diff --git a/packages/app/src/Components/Event/Note.tsx b/packages/app/src/Components/Event/Note.tsx index d159324f..885bdf74 100644 --- a/packages/app/src/Components/Event/Note.tsx +++ b/packages/app/src/Components/Event/Note.tsx @@ -1,7 +1,7 @@ import "./Note.css"; import { EventKind, NostrEvent, TaggedNostrEvent } from "@snort/system"; -import { ReactNode } from "react"; +import { memo, ReactNode } from "react"; import PubkeyList from "@/Components/Embed/PubkeyList"; import ZapstrEmbed from "@/Components/Embed/ZapstrEmbed"; @@ -47,7 +47,7 @@ export interface NoteProps { waitUntilInView?: boolean; } -export default function Note(props: NoteProps) { +export default memo(function Note(props: NoteProps) { const { data: ev, className } = props; let content; @@ -90,4 +90,4 @@ export default function Note(props: NoteProps) { } return {content}; -} +}); diff --git a/packages/app/src/Components/Event/NoteInner.tsx b/packages/app/src/Components/Event/NoteInner.tsx index e8b58ea6..751cae34 100644 --- a/packages/app/src/Components/Event/NoteInner.tsx +++ b/packages/app/src/Components/Event/NoteInner.tsx @@ -26,7 +26,7 @@ import { NoteContextMenu, NoteTranslation } from "./NoteContextMenu"; import NoteFooter from "./NoteFooter"; import NoteTime from "./NoteTime"; import Poll from "./Poll"; -import Reactions from "./Reactions"; +import ReactionsModal from "./ReactionsModal"; import Reveal from "./Reveal"; const TEXT_TRUNCATE_LENGTH = 400; @@ -388,7 +388,7 @@ export function NoteInner(props: NoteProps) { replies={props.threadChains?.get(chainKey(ev))?.length} /> )} - ReactNode; } +const options = { + truncate: true, +}; + export function TimelineFragment(props: TimelineFragProps) { const relatedFeed = useCallback( (id: string) => { @@ -39,9 +43,7 @@ export function TimelineFragment(props: TimelineFragProps) { depth={0} onClick={props.noteOnClick} context={props.noteContext?.(e)} - options={{ - truncate: true, - }} + options={options} waitUntilInView={props.index > 10} /> ), diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index fd7cae06..05dd36ce 100644 --- a/packages/app/src/index.tsx +++ b/packages/app/src/index.tsx @@ -1,6 +1,7 @@ import "./index.css"; import "@szhsin/react-menu/dist/index.css"; import "@/assets/fonts/inter.css"; +import "./wdyr"; import { encodeTLVEntries } from "@snort/system"; import { SnortContext } from "@snort/system-react"; diff --git a/packages/app/src/lang.json b/packages/app/src/lang.json index 2257e045..403bcc78 100644 --- a/packages/app/src/lang.json +++ b/packages/app/src/lang.json @@ -168,9 +168,6 @@ "3gOsZq": { "defaultMessage": "Translators" }, - "3natuV": { - "defaultMessage": "Cashu mint wallet" - }, "3qnJlS": { "defaultMessage": "You are voting with {amount} sats" }, diff --git a/packages/app/src/translations/en.json b/packages/app/src/translations/en.json index fd7f0d42..11d85c7d 100644 --- a/packages/app/src/translations/en.json +++ b/packages/app/src/translations/en.json @@ -55,7 +55,6 @@ "3QwfJR": "~{amount}", "3cc4Ct": "Light", "3gOsZq": "Translators", - "3natuV": "Cashu mint wallet", "3qnJlS": "You are voting with {amount} sats", "3t3kok": "{n,plural,=1{{n} new note} other{{n} new notes}}", "3tVy+Z": "{n} Followers", diff --git a/packages/app/src/wdyr.ts b/packages/app/src/wdyr.ts new file mode 100644 index 00000000..b8c5abfc --- /dev/null +++ b/packages/app/src/wdyr.ts @@ -0,0 +1,8 @@ +import whyDidYouRender from "@welldone-software/why-did-you-render"; +import * as React from "react"; + +if (import.meta.env.DEV) { + whyDidYouRender(React, { + trackAllPureComponents: true, + }); +} diff --git a/packages/app/vite.config.ts b/packages/app/vite.config.ts index 171c63b5..97e3667b 100644 --- a/packages/app/vite.config.ts +++ b/packages/app/vite.config.ts @@ -7,7 +7,9 @@ import { vitePluginVersionMark } from "vite-plugin-version-mark"; export default defineConfig({ plugins: [ - react(), + react({ + jsxImportSource: "@welldone-software/why-did-you-render", + }), VitePWA({ strategies: "injectManifest", srcDir: "src", diff --git a/packages/system/package.json b/packages/system/package.json index fde412a8..3503f618 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -25,6 +25,7 @@ "@types/node": "^20.5.9", "@types/uuid": "^9.0.2", "@types/ws": "^8.5.5", + "@welldone-software/why-did-you-render": "^8.0.1", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "ts-jest": "^29.1.0", diff --git a/yarn.lock b/yarn.lock index e6d83187..e099375d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3080,6 +3080,7 @@ __metadata: "@types/node": ^20.5.9 "@types/uuid": ^9.0.2 "@types/ws": ^8.5.5 + "@welldone-software/why-did-you-render": ^8.0.1 debug: ^4.3.4 eventemitter3: ^5.0.1 isomorphic-ws: ^5.0.0 @@ -4071,6 +4072,17 @@ __metadata: languageName: node linkType: hard +"@welldone-software/why-did-you-render@npm:^8.0.1": + version: 8.0.1 + resolution: "@welldone-software/why-did-you-render@npm:8.0.1" + dependencies: + lodash: ^4 + peerDependencies: + react: ^18 + checksum: cabb08e49a241b44208fc2acc60c34af2885b98feaa3e80c21b34d45c77cac72c83fc914645cc1cfa253b4a6272ac6d21327ec76d4c54b5b9387d8be576240c9 + languageName: node + linkType: hard + "abab@npm:^2.0.6": version: 2.0.6 resolution: "abab@npm:2.0.6" @@ -8172,7 +8184,7 @@ __metadata: languageName: node linkType: hard -"lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21": +"lodash@npm:^4, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21": version: 4.17.21 resolution: "lodash@npm:4.17.21" checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7