This is profiling data from: https://github.com/3perf/react-workshop-ra/tree/main/notes
Last active
January 25, 2024 01:23
-
-
Save aidenybai/29ce59a0424cf418dee6d0a7b25117ce to your computer and use it in GitHub Desktop.
Example of Million Copilot runtime data
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "componentName": "NoteButton", | |
| "fileName": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteButton/index.jsx", | |
| "totalTime": 214.799999833107, | |
| "count": 900, | |
| "start": { | |
| "line": 37, | |
| "column": 12 | |
| }, | |
| "end": { | |
| "line": 44, | |
| "column": 14 | |
| } | |
| }, | |
| { | |
| "componentName": "NoteButton", | |
| "fileName": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteButton/index.jsx", | |
| "totalTime": 638.9999992847443, | |
| "count": 5400, | |
| "start": { | |
| "line": 6, | |
| "column": 20 | |
| }, | |
| "end": { | |
| "line": 6, | |
| "column": 73 | |
| } | |
| }, | |
| { | |
| "componentName": "NoteButton", | |
| "fileName": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteButton/index.jsx", | |
| "totalTime": 1194.6999995708466, | |
| "count": 5400, | |
| "start": { | |
| "line": 37, | |
| "column": 12 | |
| }, | |
| "end": { | |
| "line": 44, | |
| "column": 14 | |
| } | |
| }, | |
| { | |
| "componentName": "DarkModeProvider", | |
| "fileName": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeContext/index.jsx", | |
| "totalTime": 2795.499998688698, | |
| "count": 13, | |
| "start": { | |
| "line": 98, | |
| "column": 4 | |
| }, | |
| "end": { | |
| "line": 127, | |
| "column": 23 | |
| } | |
| }, | |
| { | |
| "componentName": "DarkModeProvider", | |
| "fileName": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeContext/index.jsx", | |
| "totalTime": 1279.199999332428, | |
| "count": 6, | |
| "start": { | |
| "line": 98, | |
| "column": 4 | |
| }, | |
| "end": { | |
| "line": 127, | |
| "column": 23 | |
| } | |
| } | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/FilterInput/index.jsx": { | |
| "source": "import { TextField } from \"@mui/material\";\n\nfunction FilterInput({ filter, onChange, noteCount }) {\n return (\n <TextField\n className=\"notes-list__input\"\n type=\"search\"\n size=\"small\"\n value={filter}\n onChange={(e) => onChange(e.target.value)}\n placeholder={`Filter ${noteCount} note${noteCount === 1 ? \"\" : \"s\"}`}\n />\n );\n}\nexport default FilterInput;\n", | |
| "components": { | |
| "FilterInput": { | |
| "id": "FilterInput", | |
| "start": { | |
| "line": 3, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 14, | |
| "column": 1 | |
| }, | |
| "externals": {}, | |
| "renders": [ | |
| { | |
| "kind": "mount", | |
| "start": { | |
| "line": 19, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 23, | |
| "column": 10 | |
| }, | |
| "selfTime": 2, | |
| "totalTime": 1.5, | |
| "count": 1, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx::NotesList", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx" | |
| }, | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 3, | |
| "column": 21 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 52 | |
| }, | |
| "selfTime": 0.09999990463256836, | |
| "totalTime": 4.799999952316284, | |
| "count": 6, | |
| "props": [ | |
| { | |
| "name": "onChange", | |
| "prev": "d=>{var a;let g=(a=v(1,null).path)==null?void 0:a.map(E=>E.name);i(d);let{selfTime:y,totalTime:x}=_(c);S(n,o,{kind:\"state\",start:r,end:s,selfTime:y,totalTime:x,count:1,props:null,state:[{prev:h(t[0]),next:h(d),stack:g,count:1}],owner:f})}", | |
| "next": "d=>{var a;let g=(a=v(1,null).path)==null?void 0:a.map(E=>E.name);i(d);let{selfTime:y,totalTime:x}=_(c);S(n,o,{kind:\"state\",start:r,end:s,selfTime:y,totalTime:x,count:1,props:null,state:[{prev:h(t[0]),next:h(d),stack:g,count:1}],owner:f})}", | |
| "unstable": true, | |
| "type": "function", | |
| "count": 6 | |
| } | |
| ], | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx::NotesList", | |
| "filename": null | |
| }, | |
| { | |
| "kind": "update", | |
| "start": { | |
| "line": 19, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 23, | |
| "column": 10 | |
| }, | |
| "selfTime": 7.199999928474426, | |
| "totalTime": 10.600000023841858, | |
| "count": 9, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx::NotesList", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx" | |
| }, | |
| { | |
| "kind": "nested-update", | |
| "start": { | |
| "line": 19, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 23, | |
| "column": 10 | |
| }, | |
| "selfTime": 0, | |
| "totalTime": 4.300000071525574, | |
| "count": 4, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx::NotesList", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx" | |
| } | |
| ], | |
| "children": { | |
| "TextField": "::TextField" | |
| }, | |
| "count": 20, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/FilterInput/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteButton/index.jsx": { | |
| "source": "import ReactMarkdown from 'react-markdown';\nimport gfm from 'remark-gfm';\nimport { format } from 'date-fns';\nimport './index.css';\n\nfunction NoteButton({ isActive, onNoteActivated, text, filterText, date }) {\n const className = [\n 'notes-list__button',\n 'notes-list__note',\n isActive && 'notes-list__note_active',\n ]\n .filter((i) => i !== false)\n .join(' ');\n\n return (\n <button className={className} onClick={onNoteActivated}>\n <span className=\"notes-list__note-meta\">\n {format(date, 'd MMM yyyy')}\n </span>\n {generateNoteHeader(text, filterText)}\n </button>\n );\n}\n\nfunction generateNoteHeader(text, filterText) {\n let firstLine = text\n .split('\\n')\n .map((i) => i.trim())\n .filter((i) => i.length > 0)[0];\n\n // Wrap the filter text with a `<mark>` tag.\n // (The algorithm below is a bit buggy: if the note itself has any `~~something~~` entries,\n // they will be turned into `<mark>` as well. But this is alright for demo purposes.)\n let componentsMapping = {};\n if (\n filterText &&\n firstLine.toLowerCase().includes(filterText.toLowerCase())\n ) {\n // If `filterText` is `aa`, this splits `bbbbaacccaac` into ['bbb', 'aa', 'ccc', 'aa', 'c']\n // Based on example 2 in https://stackoverflow.com/a/25221523/1192426\n const firstLineParts = firstLine.split(\n new RegExp(\n '(' + filterText.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&') + ')',\n 'gi'\n )\n );\n\n // This wraps all `filterText` entries with a `del` tag.\n // ['bbb', 'aa', 'ccc', 'aa', 'c'] => ['bbb', '~~aa~~', 'ccc', '~~aa~~', 'c'] => 'bbb~~aa~~ccc~~aa~~c'\n firstLine = firstLineParts\n .map((part) => {\n if (part.toLowerCase() === filterText.toLowerCase()) {\n return `~~${part}~~`;\n }\n\n return part;\n })\n .join('');\n\n // This ensures that all `filterText` entries are actually wrapped with `mark`, not with `del`\n componentsMapping = {\n del: 'mark',\n };\n }\n\n return (\n <ReactMarkdown\n remarkPlugins={[gfm]}\n disallowedElements={['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']}\n unwrapDisallowed={true}\n components={componentsMapping}\n >\n {firstLine}\n </ReactMarkdown>\n );\n}\n\nexport default NoteButton;\n", | |
| "components": { | |
| "NoteButton": { | |
| "id": "NoteButton", | |
| "start": { | |
| "line": 6, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 23, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "gfm": { | |
| "kind": "module", | |
| "start": { | |
| "line": 2, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 10 | |
| }, | |
| "jsx": false | |
| }, | |
| "format": { | |
| "kind": "module", | |
| "start": { | |
| "line": 3, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 15 | |
| }, | |
| "jsx": false | |
| }, | |
| "generateNoteHeader": { | |
| "kind": "hoisted", | |
| "start": { | |
| "line": 25, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 76, | |
| "column": 1 | |
| }, | |
| "jsx": true | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "mount", | |
| "start": { | |
| "line": 37, | |
| "column": 12 | |
| }, | |
| "end": { | |
| "line": 44, | |
| "column": 14 | |
| }, | |
| "selfTime": 222.5, | |
| "totalTime": 214.799999833107, | |
| "count": 900, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx::NotesList", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx" | |
| }, | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 6, | |
| "column": 20 | |
| }, | |
| "end": { | |
| "line": 6, | |
| "column": 73 | |
| }, | |
| "selfTime": 53.399999260902405, | |
| "totalTime": 638.9999992847443, | |
| "count": 5400, | |
| "props": [ | |
| { | |
| "name": "isActive", | |
| "prev": "false", | |
| "next": "true", | |
| "unstable": false, | |
| "type": "boolean", | |
| "count": 5 | |
| }, | |
| { | |
| "name": "onNoteActivated", | |
| "prev": "() => onNoteActivated(id)", | |
| "next": "() => onNoteActivated(id)", | |
| "unstable": true, | |
| "type": "function", | |
| "count": 5400 | |
| }, | |
| { | |
| "name": "text", | |
| "prev": "\"Cimocada. Do giben. Ti vojipococ bubenem.\\n\\nRar _rubirayabe._ Hiqi mahurizab to neropibiqu kipocik zulo gamo cep gumuceda **bohibidak** cetahamar qecuzeku zibigo buyuconibe. _Nodarar_ dis **birelu.** Lu nodubeceh. Ducojonanu ci. _Rizila_ nibeleri meniwiboci _xajizaneki_ ratubeco qapete mece.as\"", | |
| "next": "\"Cimocada. Do giben. Ti vojipococ bubenem.\\n\\nRar _rubirayabe._ Hiqi mahurizab to neropibiqu kipocik zulo gamo cep gumuceda **bohibidak** cetahamar qecuzeku zibigo buyuconibe. _Nodarar_ dis **birelu.** Lu nodubeceh. Ducojonanu ci. _Rizila_ nibeleri meniwiboci _xajizaneki_ ratubeco qapete mece.asd\"", | |
| "unstable": false, | |
| "type": "string", | |
| "count": 3 | |
| } | |
| ], | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx::NotesList", | |
| "filename": null | |
| }, | |
| { | |
| "kind": "update", | |
| "start": { | |
| "line": 37, | |
| "column": 12 | |
| }, | |
| "end": { | |
| "line": 44, | |
| "column": 14 | |
| }, | |
| "selfTime": 1210.0999993085861, | |
| "totalTime": 1194.6999995708466, | |
| "count": 5400, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx::NotesList", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 11700, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteButton/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx": { | |
| "source": "import { useState } from \"react\";\nimport { Button, ButtonGroup } from \"@mui/material\";\nimport FilterInput from \"../FilterInput\";\nimport NoteButton from \"../NoteButton\";\nimport \"./index.css\";\n\nfunction NotesList({\n notes,\n activeNoteId,\n onNoteActivated,\n onNewNotesRequested,\n onDeleteAllRequested,\n}) {\n const [filter, setFilter] = useState(\"\");\n\n return (\n <div className=\"notes-list\" style={{ position: \"relative\" }}>\n <div className=\"notes-list__filter\">\n <FilterInput\n filter={filter}\n onChange={setFilter}\n noteCount={Object.keys(notes).length}\n />\n </div>\n\n <div className=\"notes-list__notes\">\n {Object.values(notes)\n .sort((a, b) => b.date.getTime() - a.date.getTime())\n .filter(({ text }) => {\n if (!filter) {\n return true;\n }\n\n return text.toLowerCase().includes(filter.toLowerCase());\n })\n .map(({ id, text, date }) => (\n <NoteButton\n key={id}\n isActive={activeNoteId === id}\n onNoteActivated={() => onNoteActivated(id)}\n text={text}\n filterText={filter}\n date={date}\n />\n ))}\n </div>\n\n <div className=\"notes-list__controls\">\n <ButtonGroup size=\"small\">\n <Button\n classes={{ root: \"notes-list__control\" }}\n onClick={() => onNewNotesRequested({ count: 1, paragraphs: 1 })}\n >\n + Note\n </Button>\n <Button\n classes={{ root: \"notes-list__control\" }}\n onClick={() => onNewNotesRequested({ count: 1, paragraphs: 300 })}\n >\n + Huge\n </Button>\n <Button\n classes={{ root: \"notes-list__control\" }}\n onClick={() => onNewNotesRequested({ count: 100, paragraphs: 1 })}\n >\n + 100\n </Button>\n </ButtonGroup>\n <ButtonGroup size=\"small\">\n <Button\n classes={{ root: \"notes-list__control\" }}\n onClick={() => onDeleteAllRequested()}\n >\n Delete all\n </Button>\n </ButtonGroup>\n </div>\n </div>\n );\n}\n\nexport default NotesList;\n", | |
| "components": { | |
| "NotesList": { | |
| "id": "NotesList", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 80, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useState": { | |
| "kind": "module", | |
| "start": { | |
| "line": 1, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 1, | |
| "column": 17 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 7, | |
| "column": 19 | |
| }, | |
| "end": { | |
| "line": 13, | |
| "column": 1 | |
| }, | |
| "selfTime": 0, | |
| "totalTime": 0.10000002384185791, | |
| "count": 6, | |
| "props": [ | |
| { | |
| "name": "activeNoteId", | |
| "prev": "\"TvwV7MNMKY4PWz9bIKB4X\"", | |
| "next": "\"h0MCKqIPem2jlP-A0c6p-\"", | |
| "unstable": false, | |
| "type": "string", | |
| "count": 3 | |
| }, | |
| { | |
| "name": "onNoteActivated", | |
| "prev": "d=>{var a;let g=(a=v(1,null).path)==null?void 0:a.map(E=>E.name);i(d);let{selfTime:y,totalTime:x}=_(c);S(n,o,{kind:\"state\",start:r,end:s,selfTime:y,totalTime:x,count:1,props:null,state:[{prev:h(t[0]),next:h(d),stack:g,count:1}],owner:f})}", | |
| "next": "d=>{var a;let g=(a=v(1,null).path)==null?void 0:a.map(E=>E.name);i(d);let{selfTime:y,totalTime:x}=_(c);S(n,o,{kind:\"state\",start:r,end:s,selfTime:y,totalTime:x,count:1,props:null,state:[{prev:h(t[0]),next:h(d),stack:g,count:1}],owner:f})}", | |
| "unstable": true, | |
| "type": "function", | |
| "count": 6 | |
| }, | |
| { | |
| "name": "onNewNotesRequested", | |
| "prev": "({\n count,\n paragraphs\n }) => {\n for (let i = 0; i < count; i++) {\n const noteId = nanoid();\n let noteText = jabber.createParagraph(6);\n for (let j = 0; j < paragraphs; j++) {\n let line = jabber.createParagraph(30);\n noteText += \"\\n\\n\" + line;\n }\n noteText = noteText.split(\"\\n\").map((line) => line.split(\" \").filter(Boolean).map((word) => {\n if (Math.random() < 0.05) {\n return \"**\" + word + \"**\";\n }\n if (Math.random() < 0.05) {\n return \"_\" + word + \"_\";\n }\n return word;\n }).join(\" \")).join(\"\\n\");\n putNote(noteId, {\n text: noteText\n });\n }\n const newNotes = getNotes();\n setNotes(newNotes);\n if (count === 1) {\n const noteIds = Object.keys(newNotes);\n setActiveNoteId(noteIds[noteIds.length - 1]);\n }\n }", | |
| "next": "({\n count,\n paragraphs\n }) => {\n for (let i = 0; i < count; i++) {\n const noteId = nanoid();\n let noteText = jabber.createParagraph(6);\n for (let j = 0; j < paragraphs; j++) {\n let line = jabber.createParagraph(30);\n noteText += \"\\n\\n\" + line;\n }\n noteText = noteText.split(\"\\n\").map((line) => line.split(\" \").filter(Boolean).map((word) => {\n if (Math.random() < 0.05) {\n return \"**\" + word + \"**\";\n }\n if (Math.random() < 0.05) {\n return \"_\" + word + \"_\";\n }\n return word;\n }).join(\" \")).join(\"\\n\");\n putNote(noteId, {\n text: noteText\n });\n }\n const newNotes = getNotes();\n setNotes(newNotes);\n if (count === 1) {\n const noteIds = Object.keys(newNotes);\n setActiveNoteId(noteIds[noteIds.length - 1]);\n }\n }", | |
| "unstable": true, | |
| "type": "function", | |
| "count": 6 | |
| }, | |
| { | |
| "name": "onDeleteAllRequested", | |
| "prev": "() => {\n deleteNotes();\n const newNotes = getNotes();\n setNotes(newNotes);\n setActiveNoteId(null);\n }", | |
| "next": "() => {\n deleteNotes();\n const newNotes = getNotes();\n setNotes(newNotes);\n setActiveNoteId(null);\n }", | |
| "unstable": true, | |
| "type": "function", | |
| "count": 6 | |
| }, | |
| { | |
| "name": "notes", | |
| "prev": "{…}", | |
| "next": "{…}", | |
| "unstable": true, | |
| "type": "object", | |
| "count": 3 | |
| } | |
| ], | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "filename": null | |
| } | |
| ], | |
| "children": { | |
| "FilterInput": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/FilterInput/index.jsx::FilterInput", | |
| "NoteButton": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteButton/index.jsx::NoteButton", | |
| "ButtonGroup": "::ButtonGroup" | |
| }, | |
| "count": 6, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NotesList/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteEditor/index.jsx": { | |
| "source": "import { useEffect, useRef } from \"react\";\nimport CodeMirror from \"codemirror\";\nimport \"codemirror/mode/markdown/markdown\";\nimport \"codemirror/lib/codemirror.css\";\nimport \"./index.css\";\n\nfunction NoteEditor({ notes, activeNoteId, saveNote }) {\n const currentNote = notes[activeNoteId];\n const textareaRef = useRef();\n\n useEffect(() => {\n const editor = CodeMirror.fromTextArea(textareaRef.current, {\n mode: \"markdown\",\n lineWrapping: true,\n });\n\n editor.on(\"change\", (doc, change) => {\n if (change.origin !== \"setValue\") {\n saveNote({ text: doc.getValue() });\n }\n });\n\n return () => editor.toTextArea();\n }, [activeNoteId]);\n\n return (\n <div className=\"note-editor\" key={activeNoteId}>\n <textarea\n ref={textareaRef}\n defaultValue={currentNote.text}\n autoComplete=\"off\"\n />\n </div>\n );\n}\n\nexport default NoteEditor;\n", | |
| "components": { | |
| "NoteEditor": { | |
| "id": "NoteEditor", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 35, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useEffect": { | |
| "kind": "module", | |
| "start": { | |
| "line": 1, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 1, | |
| "column": 18 | |
| }, | |
| "jsx": false | |
| }, | |
| "useRef": { | |
| "kind": "module", | |
| "start": { | |
| "line": 1, | |
| "column": 20 | |
| }, | |
| "end": { | |
| "line": 1, | |
| "column": 26 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "mount", | |
| "start": { | |
| "line": 67, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 71, | |
| "column": 10 | |
| }, | |
| "selfTime": 0.2999999523162842, | |
| "totalTime": 0.10000002384185791, | |
| "count": 1, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx" | |
| }, | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 7, | |
| "column": 20 | |
| }, | |
| "end": { | |
| "line": 7, | |
| "column": 53 | |
| }, | |
| "selfTime": 0.10000002384185791, | |
| "totalTime": 0.5, | |
| "count": 5, | |
| "props": [ | |
| { | |
| "name": "saveNote", | |
| "prev": "({\n text,\n date\n }) => saveNote(activeNoteId, {\n text,\n date\n })", | |
| "next": "({\n text,\n date\n }) => saveNote(activeNoteId, {\n text,\n date\n })", | |
| "unstable": true, | |
| "type": "function", | |
| "count": 5 | |
| }, | |
| { | |
| "name": "activeNoteId", | |
| "prev": "\"TvwV7MNMKY4PWz9bIKB4X\"", | |
| "next": "\"h0MCKqIPem2jlP-A0c6p-\"", | |
| "unstable": false, | |
| "type": "string", | |
| "count": 2 | |
| }, | |
| { | |
| "name": "notes", | |
| "prev": "{…}", | |
| "next": "{…}", | |
| "unstable": true, | |
| "type": "object", | |
| "count": 3 | |
| } | |
| ], | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": null | |
| }, | |
| { | |
| "kind": "update", | |
| "start": { | |
| "line": 67, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 71, | |
| "column": 10 | |
| }, | |
| "selfTime": 0.5000001192092896, | |
| "totalTime": 0.20000004768371582, | |
| "count": 5, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx" | |
| } | |
| ], | |
| "children": {}, | |
| "count": 11, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteEditor/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteView/index.jsx": { | |
| "source": "import \"./index.css\";\nimport ReactMarkdown from \"react-markdown\";\nimport gfm from \"remark-gfm\";\n\nexport default function NoteView({ text }) {\n return (\n <div className=\"note-view\">\n <ReactMarkdown remarkPlugins={[gfm]}>{text}</ReactMarkdown>\n </div>\n );\n}\n", | |
| "components": { | |
| "NoteView": { | |
| "id": "NoteView", | |
| "start": { | |
| "line": 5, | |
| "column": 15 | |
| }, | |
| "end": { | |
| "line": 11, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "gfm": { | |
| "kind": "module", | |
| "start": { | |
| "line": 3, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 10 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "mount", | |
| "start": { | |
| "line": 73, | |
| "column": 10 | |
| }, | |
| "end": { | |
| "line": 73, | |
| "column": 54 | |
| }, | |
| "selfTime": 1.100000023841858, | |
| "totalTime": 1.100000023841858, | |
| "count": 1, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx" | |
| }, | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 5, | |
| "column": 33 | |
| }, | |
| "end": { | |
| "line": 5, | |
| "column": 41 | |
| }, | |
| "selfTime": 0, | |
| "totalTime": 2.4000000953674316, | |
| "count": 5, | |
| "props": [ | |
| { | |
| "name": "text", | |
| "prev": "\"Cimocada. Do giben. Ti vojipococ bubenem.\\n\\nRar _rubirayabe._ Hiqi mahurizab to neropibiqu kipocik zulo gamo cep gumuceda **bohibidak** cetahamar qecuzeku zibigo buyuconibe. _Nodarar_ dis **birelu.** Lu nodubeceh. Ducojonanu ci. _Rizila_ nibeleri meniwiboci _xajizaneki_ ratubeco qapete mece.as\"", | |
| "next": "\"Cimocada. Do giben. Ti vojipococ bubenem.\\n\\nRar _rubirayabe._ Hiqi mahurizab to neropibiqu kipocik zulo gamo cep gumuceda **bohibidak** cetahamar qecuzeku zibigo buyuconibe. _Nodarar_ dis **birelu.** Lu nodubeceh. Ducojonanu ci. _Rizila_ nibeleri meniwiboci _xajizaneki_ ratubeco qapete mece.asd\"", | |
| "unstable": false, | |
| "type": "string", | |
| "count": 5 | |
| } | |
| ], | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": null | |
| }, | |
| { | |
| "kind": "update", | |
| "start": { | |
| "line": 73, | |
| "column": 10 | |
| }, | |
| "end": { | |
| "line": 73, | |
| "column": 54 | |
| }, | |
| "selfTime": 3.399999976158142, | |
| "totalTime": 3.399999976158142, | |
| "count": 5, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx" | |
| } | |
| ], | |
| "children": { | |
| "ReactMarkdown": "::ReactMarkdown" | |
| }, | |
| "count": 11, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteView/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeContext/index.jsx": { | |
| "source": "import { createContext, useEffect, useState } from \"react\";\nimport \"./index.css\";\n\nexport const DarkModeContext = createContext();\n\nexport function DarkModeProvider({ children }) {\n const [mode, setMode] = useState(\"light\");\n\n useEffect(() => {\n document.body.classList.add(\"theme-\" + mode);\n\n return () => {\n document.body.classList.remove(\"theme-\" + mode);\n };\n }, [mode]);\n\n return (\n <DarkModeContext.Provider value={{ mode, setMode }}>\n {children}\n </DarkModeContext.Provider>\n );\n}\n", | |
| "components": { | |
| "DarkModeProvider": { | |
| "id": "DarkModeProvider", | |
| "start": { | |
| "line": 6, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 22, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "createContext": { | |
| "kind": "module", | |
| "start": { | |
| "line": 1, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 1, | |
| "column": 22 | |
| }, | |
| "jsx": false | |
| }, | |
| "useEffect": { | |
| "kind": "module", | |
| "start": { | |
| "line": 1, | |
| "column": 24 | |
| }, | |
| "end": { | |
| "line": 1, | |
| "column": 33 | |
| }, | |
| "jsx": false | |
| }, | |
| "useState": { | |
| "kind": "module", | |
| "start": { | |
| "line": 1, | |
| "column": 35 | |
| }, | |
| "end": { | |
| "line": 1, | |
| "column": 43 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "mount", | |
| "start": { | |
| "line": 98, | |
| "column": 4 | |
| }, | |
| "end": { | |
| "line": 127, | |
| "column": 23 | |
| }, | |
| "selfTime": 233.69999992847443, | |
| "totalTime": 224.39999973773956, | |
| "count": 1, | |
| "props": null, | |
| "state": null, | |
| "owner": null, | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx" | |
| }, | |
| { | |
| "kind": "update", | |
| "start": { | |
| "line": 98, | |
| "column": 4 | |
| }, | |
| "end": { | |
| "line": 127, | |
| "column": 23 | |
| }, | |
| "selfTime": 1277.4999990463257, | |
| "totalTime": 2795.499998688698, | |
| "count": 13, | |
| "props": null, | |
| "state": null, | |
| "owner": null, | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx" | |
| }, | |
| { | |
| "kind": "nested-update", | |
| "start": { | |
| "line": 98, | |
| "column": 4 | |
| }, | |
| "end": { | |
| "line": 127, | |
| "column": 23 | |
| }, | |
| "selfTime": 0.5000001192092896, | |
| "totalTime": 1279.199999332428, | |
| "count": 6, | |
| "props": null, | |
| "state": null, | |
| "owner": null, | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx" | |
| }, | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 6, | |
| "column": 33 | |
| }, | |
| "end": { | |
| "line": 6, | |
| "column": 45 | |
| }, | |
| "selfTime": 0.09999990463256836, | |
| "totalTime": 441.0999994277954, | |
| "count": 6, | |
| "props": [ | |
| { | |
| "name": "children", | |
| "prev": "<div …/>", | |
| "next": "<div …/>", | |
| "unstable": true, | |
| "type": "object", | |
| "count": 6 | |
| } | |
| ], | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "filename": null | |
| } | |
| ], | |
| "children": {}, | |
| "count": 26, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeContext/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeSwitcher/index.jsx": { | |
| "source": "import { ToggleButton, ToggleButtonGroup } from \"@mui/material\";\nimport WbSunnyIcon from \"@mui/icons-material/WbSunny\";\nimport Brightness2Icon from \"@mui/icons-material/Brightness2\";\nimport { useContext } from \"react\";\nimport { DarkModeContext } from \"../DarkModeContext\";\nimport \"./index.css\";\n\nfunction DarkModeSwitcher() {\n const { mode, setMode } = useContext(DarkModeContext);\n\n return (\n <div className=\"theme-switcher\">\n <ToggleButtonGroup\n size=\"small\"\n value={mode}\n exclusive\n onChange={(_e, value) => setMode(value)}\n aria-label=\"text alignment\"\n >\n <ToggleButton value=\"light\">\n <WbSunnyIcon />\n </ToggleButton>\n <ToggleButton value=\"dark\">\n <Brightness2Icon />\n </ToggleButton>\n </ToggleButtonGroup>\n </div>\n );\n}\n\nexport default DarkModeSwitcher;\n", | |
| "components": { | |
| "DarkModeSwitcher": { | |
| "id": "DarkModeSwitcher", | |
| "start": { | |
| "line": 8, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 29, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useContext": { | |
| "kind": "module", | |
| "start": { | |
| "line": 4, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 4, | |
| "column": 19 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "context", | |
| "start": { | |
| "line": 9, | |
| "column": 28 | |
| }, | |
| "end": { | |
| "line": 9, | |
| "column": 55 | |
| }, | |
| "selfTime": 0.40000009536743164, | |
| "totalTime": 3.000000238418579, | |
| "count": 12, | |
| "props": null, | |
| "state": [ | |
| { | |
| "prev": "{…}", | |
| "next": "{…}", | |
| "stack": [ | |
| "<unknown>", | |
| "flushSyncCallbacks", | |
| "performSyncWorkOnRoot", | |
| "renderRootSync", | |
| "workLoopSync", | |
| "performUnitOfWork", | |
| "beginWork$1", | |
| "beginWork", | |
| "mountIndeterminateComponent", | |
| "renderWithHooks" | |
| ], | |
| "count": 12 | |
| } | |
| ], | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": null | |
| }, | |
| { | |
| "kind": "mount", | |
| "start": { | |
| "line": 48, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 48, | |
| "column": 28 | |
| }, | |
| "selfTime": 1.600000023841858, | |
| "totalTime": 1.5, | |
| "count": 1, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx" | |
| }, | |
| { | |
| "kind": "update", | |
| "start": { | |
| "line": 48, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 48, | |
| "column": 28 | |
| }, | |
| "selfTime": 4.100000381469727, | |
| "totalTime": 8.7000013589859, | |
| "count": 7, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx" | |
| }, | |
| { | |
| "kind": "nested-update", | |
| "start": { | |
| "line": 48, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 48, | |
| "column": 28 | |
| }, | |
| "selfTime": 0.20000004768371582, | |
| "totalTime": 1.8000003099441528, | |
| "count": 1, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx" | |
| } | |
| ], | |
| "children": { | |
| "ToggleButtonGroup": "::ToggleButtonGroup" | |
| }, | |
| "count": 21, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeSwitcher/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/ActiveAuthors/index.jsx": { | |
| "source": "import { Avatar, AvatarGroup } from \"@mui/material\";\nimport { useSelector } from \"react-redux\";\nimport avatar1 from \"./avatar1.jpg\";\nimport avatar2 from \"./avatar2.jpg\";\nimport avatar3 from \"./avatar3.jpg\";\n\nfunction ActiveAuthors() {\n const activeThisMonth = useSelector((state) =>\n state.users.filter(\n (i) =>\n new Date(i.lastActiveDate).getFullYear() === 2023 &&\n new Date(i.lastActiveDate).getMonth() === 0\n )\n );\n\n return (\n <div className=\"primary-pane__authors\">\n <div className=\"primary-pane__authors-last-active\">\n {activeThisMonth.length} users active this month:{\" \"}\n {activeThisMonth.map((i) => i.name).join(\", \")}\n </div>\n <AvatarGroup max={2}>\n <Avatar src={avatar1} />\n <Avatar src={avatar2} />\n <Avatar src={avatar3} />\n </AvatarGroup>\n </div>\n );\n}\n\nexport default ActiveAuthors;\n", | |
| "components": { | |
| "ActiveAuthors": { | |
| "id": "ActiveAuthors", | |
| "start": { | |
| "line": 7, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 29, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useSelector": { | |
| "kind": "module", | |
| "start": { | |
| "line": 2, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 20 | |
| }, | |
| "jsx": false | |
| }, | |
| "avatar1": { | |
| "kind": "module", | |
| "start": { | |
| "line": 3, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 14 | |
| }, | |
| "jsx": false | |
| }, | |
| "avatar2": { | |
| "kind": "module", | |
| "start": { | |
| "line": 4, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 4, | |
| "column": 14 | |
| }, | |
| "jsx": false | |
| }, | |
| "avatar3": { | |
| "kind": "module", | |
| "start": { | |
| "line": 5, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 5, | |
| "column": 14 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "mount", | |
| "start": { | |
| "line": 47, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 47, | |
| "column": 25 | |
| }, | |
| "selfTime": 3, | |
| "totalTime": 2.799999952316284, | |
| "count": 1, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx" | |
| }, | |
| { | |
| "kind": "update", | |
| "start": { | |
| "line": 47, | |
| "column": 8 | |
| }, | |
| "end": { | |
| "line": 47, | |
| "column": 25 | |
| }, | |
| "selfTime": 2.399999976158142, | |
| "totalTime": 5.100000023841858, | |
| "count": 6, | |
| "props": null, | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "parent": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx::PrimaryPane", | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx" | |
| } | |
| ], | |
| "children": { | |
| "AvatarGroup": "::AvatarGroup" | |
| }, | |
| "count": 7, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/ActiveAuthors/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx": { | |
| "source": "import { Button } from \"@mui/material\";\nimport { useState } from \"react\";\nimport fakeApi from \"../../utils/fakeApi\";\nimport NoteEditor from \"../NoteEditor\";\nimport NoteView from \"../NoteView\";\nimport DarkModeSwitcher from \"../DarkModeSwitcher\";\nimport ActiveAuthors from \"../ActiveAuthors\";\nimport spinner from \"./spinner.svg\";\nimport \"./index.css\";\n\nfunction PrimaryPane({ activeNoteId, notes, saveNote }) {\n const [isLoading, setIsLoading] = useState(false);\n const [isPublic, setIsPublic] = useState(false);\n const [publishedAt, setPublishedAt] = useState(null);\n\n const togglePublic = async () => {\n setIsLoading(true);\n\n if (isPublic) {\n await fakeApi.setPublicStatus(false);\n setIsPublic(false);\n } else {\n await fakeApi.setPublicStatus(true);\n const publishedDate = await fakeApi.getPublishedDate();\n setIsPublic(true);\n setPublishedAt(publishedDate.toLocaleTimeString());\n }\n\n setIsLoading(false);\n };\n\n if (!activeNoteId) {\n return (\n <div className=\"primary-pane__empty-editor\">\n <div className=\"primary-pane__eyes\">👀</div>\n <div className=\"primary-pane__eyes-caption\">\n Select a note to start editing\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"primary-pane\">\n <div className=\"primary-pane__header\">\n <h1 className=\"primary-pane__header-text\">Editor</h1>\n <ActiveAuthors />\n <DarkModeSwitcher />\n </div>\n\n <div className=\"primary-pane__content\">\n <div className=\"primary-pane__controls\">\n <Button\n variant=\"outlined\"\n onClick={togglePublic}\n disabled={isLoading}\n startIcon={isPublic ? \"🤫\" : \"👀\"}\n >\n {isLoading\n ? \"Loading...\"\n : isPublic\n ? \"Make Private\"\n : \"Make Public\"}\n </Button>\n {!isLoading && isPublic && <span>Published at: {publishedAt}</span>}\n </div>\n <NoteEditor\n saveNote={({ text, date }) => saveNote(activeNoteId, { text, date })}\n notes={notes}\n activeNoteId={activeNoteId}\n />\n <div className=\"primary-pane__view\">\n <NoteView text={notes[activeNoteId].text} />\n </div>\n </div>\n <div\n className={\n \"primary-pane__spinner-wrapper\" +\n (isLoading ? \" primary-pane__spinner-wrapper_visible\" : \"\")\n }\n >\n <img className=\"primary-pane__spinner\" src={spinner} alt=\"\" />\n </div>\n </div>\n );\n}\n\nexport default PrimaryPane;\n", | |
| "components": { | |
| "PrimaryPane": { | |
| "id": "PrimaryPane", | |
| "start": { | |
| "line": 11, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 86, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useState": { | |
| "kind": "module", | |
| "start": { | |
| "line": 2, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 2, | |
| "column": 17 | |
| }, | |
| "jsx": false | |
| }, | |
| "fakeApi": { | |
| "kind": "module", | |
| "start": { | |
| "line": 3, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 14 | |
| }, | |
| "jsx": false | |
| }, | |
| "spinner": { | |
| "kind": "module", | |
| "start": { | |
| "line": 8, | |
| "column": 7 | |
| }, | |
| "end": { | |
| "line": 8, | |
| "column": 14 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 11, | |
| "column": 21 | |
| }, | |
| "end": { | |
| "line": 11, | |
| "column": 54 | |
| }, | |
| "selfTime": 0.39999985694885254, | |
| "totalTime": 5.4999998807907104, | |
| "count": 6, | |
| "props": [ | |
| { | |
| "name": "activeNoteId", | |
| "prev": "\"TvwV7MNMKY4PWz9bIKB4X\"", | |
| "next": "\"h0MCKqIPem2jlP-A0c6p-\"", | |
| "unstable": false, | |
| "type": "string", | |
| "count": 3 | |
| }, | |
| { | |
| "name": "saveNote", | |
| "prev": "(id, {\n text,\n date\n }) => {\n putNote(id, {\n text,\n date\n });\n const newNotes = getNotes();\n setNotes(newNotes);\n dispatch(updateLastActiveDate(formatISO(/* @__PURE__ */ new Date(), {\n representation: \"date\"\n })));\n }", | |
| "next": "(id, {\n text,\n date\n }) => {\n putNote(id, {\n text,\n date\n });\n const newNotes = getNotes();\n setNotes(newNotes);\n dispatch(updateLastActiveDate(formatISO(/* @__PURE__ */ new Date(), {\n representation: \"date\"\n })));\n }", | |
| "unstable": true, | |
| "type": "function", | |
| "count": 6 | |
| }, | |
| { | |
| "name": "notes", | |
| "prev": "{…}", | |
| "next": "{…}", | |
| "unstable": true, | |
| "type": "object", | |
| "count": 3 | |
| } | |
| ], | |
| "state": null, | |
| "owner": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx::App", | |
| "filename": null | |
| } | |
| ], | |
| "children": { | |
| "ActiveAuthors": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/ActiveAuthors/index.jsx::ActiveAuthors", | |
| "DarkModeSwitcher": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeSwitcher/index.jsx::DarkModeSwitcher", | |
| "Button": "::Button", | |
| "NoteEditor": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteEditor/index.jsx::NoteEditor", | |
| "NoteView": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/NoteView/index.jsx::NoteView" | |
| }, | |
| "count": 6, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PrimaryPane/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeInfo/index.jsx": { | |
| "source": "import { useContext } from \"react\";\nimport Button from \"@mui/material/Button\";\nimport { DarkModeContext } from \"../DarkModeContext\";\nimport \"./index.css\";\n\nfunction DarkModeInfo() {\n const { mode } = useContext(DarkModeContext);\n\n return (\n <span>\n Mode:{\" \"}\n <Button\n classes={{ root: \"dark-mode-info__button\" }}\n size=\"small\"\n onClick={() => alert(\"Ha, thought you can click me?\")}\n >\n {mode}\n </Button>\n </span>\n );\n}\n\nexport default DarkModeInfo;\n", | |
| "components": { | |
| "DarkModeInfo": { | |
| "id": "DarkModeInfo", | |
| "start": { | |
| "line": 6, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 21, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "useContext": { | |
| "kind": "module", | |
| "start": { | |
| "line": 1, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 1, | |
| "column": 19 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "context", | |
| "start": { | |
| "line": 7, | |
| "column": 19 | |
| }, | |
| "end": { | |
| "line": 7, | |
| "column": 46 | |
| }, | |
| "selfTime": 1.2000000476837158, | |
| "totalTime": 3.5999996662139893, | |
| "count": 16, | |
| "props": null, | |
| "state": [ | |
| { | |
| "prev": "{…}", | |
| "next": "{…}", | |
| "stack": [ | |
| "performWorkUntilDeadline", | |
| "flushWork", | |
| "workLoop", | |
| "performConcurrentWorkOnRoot", | |
| "renderRootSync", | |
| "workLoopSync", | |
| "performUnitOfWork", | |
| "beginWork$1", | |
| "beginWork", | |
| "mountIndeterminateComponent", | |
| "renderWithHooks" | |
| ], | |
| "count": 16 | |
| } | |
| ], | |
| "owner": null, | |
| "filename": null | |
| } | |
| ], | |
| "children": { | |
| "Button": "::Button" | |
| }, | |
| "count": 16, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeInfo/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PublishingTo/index.jsx": { | |
| "source": "import { observer } from \"mobx-react-lite\";\nimport \"./index.css\";\n\nfunction PublishingTo({ publishingTarget, onPublishingTargetChange }) {\n return (\n <>\n Publishing to: {publishingTarget}{\" \"}\n <button\n className=\"publishing-to__button\"\n onClick={() => {\n const newTarget = prompt(\"New target?\");\n onPublishingTargetChange(newTarget);\n }}\n >\n (edit)\n </button>\n </>\n );\n}\n\nexport default observer(PublishingTo);\n", | |
| "components": { | |
| "PublishingTo": { | |
| "id": "PublishingTo", | |
| "start": { | |
| "line": 4, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 19, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "observer": { | |
| "kind": "module", | |
| "start": { | |
| "line": 1, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 1, | |
| "column": 17 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "props", | |
| "start": { | |
| "line": 4, | |
| "column": 22 | |
| }, | |
| "end": { | |
| "line": 4, | |
| "column": 68 | |
| }, | |
| "selfTime": 0.10000002384185791, | |
| "totalTime": 0.10000002384185791, | |
| "count": 1, | |
| "props": [ | |
| { | |
| "name": "onPublishingTargetChange", | |
| "prev": "(newTarget) => {\n store.setPublishingTarget(newTarget);\n }", | |
| "next": "(newTarget) => {\n store.setPublishingTarget(newTarget);\n }", | |
| "unstable": true, | |
| "type": "function", | |
| "count": 1 | |
| } | |
| ], | |
| "state": null, | |
| "owner": null, | |
| "filename": null | |
| } | |
| ], | |
| "children": {}, | |
| "count": 1, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/PublishingTo/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/StatusBar/index.jsx": { | |
| "source": "import { observer } from 'mobx-react-lite';\nimport DarkModeInfo from '../DarkModeInfo';\nimport PublishingTo from '../PublishingTo';\n\nconst StatusBar = ({ store }) => {\n return (\n <div>\n <PublishingTo\n publishingTarget={store.publishingConfig.target}\n onPublishingTargetChange={(newTarget) => {\n store.setPublishingTarget(newTarget);\n }}\n />{' '}\n · <DarkModeInfo /> · Status: {store.status}\n </div>\n );\n};\n\nexport default observer(StatusBar);\n", | |
| "components": {} | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx": { | |
| "source": "import { formatISO } from \"date-fns\";\nimport Jabber from \"jabber\";\nimport { nanoid } from \"nanoid\";\nimport { memo, useEffect, useRef, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport {\n deleteNotes,\n getNotes,\n putNote,\n saveNotesToLocalStorage,\n} from \"../../utils/storage\";\nimport { updateLastActiveDate } from \"../../store/redux/userReducer\";\nimport NotesList from \"../NotesList\";\nimport PrimaryPane from \"../PrimaryPane\";\nimport \"./index.css\";\nimport \"./index-pro.css\";\nimport { DarkModeProvider } from \"../DarkModeContext\";\nimport StatusBar from \"../StatusBar\";\n\nconst jabber = new Jabber();\n\nfunction App({ mobxStore }) {\n const [notes, setNotes] = useState(getNotes());\n const [activeNoteId, setActiveNoteId] = useState(null);\n\n useEffect(() => {\n saveNotesToLocalStorage(notes, activeNoteId);\n }, [notes, activeNoteId]);\n\n const dispatch = useDispatch();\n\n const saveNote = (id, { text, date }) => {\n putNote(id, { text, date });\n\n const newNotes = getNotes();\n setNotes(newNotes);\n\n dispatch(\n updateLastActiveDate(formatISO(new Date(), { representation: \"date\" }))\n );\n };\n\n const createNewNotes = ({ count, paragraphs }) => {\n for (let i = 0; i < count; i++) {\n const noteId = nanoid();\n\n let noteText = jabber.createParagraph(6);\n for (let j = 0; j < paragraphs; j++) {\n let line = jabber.createParagraph(30);\n\n noteText += \"\\n\\n\" + line;\n }\n\n // Make random words bold or italic\n noteText = noteText\n .split(\"\\n\")\n .map((line) =>\n line\n .split(\" \")\n .filter(Boolean)\n .map((word) => {\n if (Math.random() < 0.05) {\n return \"**\" + word + \"**\";\n }\n\n if (Math.random() < 0.05) {\n return \"_\" + word + \"_\";\n }\n\n return word;\n })\n .join(\" \")\n )\n .join(\"\\n\");\n\n putNote(noteId, { text: noteText });\n }\n\n const newNotes = getNotes();\n setNotes(newNotes);\n\n // For convenience, if only a single note was created, activate it\n if (count === 1) {\n const noteIds = Object.keys(newNotes);\n setActiveNoteId(noteIds[noteIds.length - 1]);\n }\n };\n\n const deleteAllNotes = () => {\n deleteNotes();\n\n const newNotes = getNotes();\n setNotes(newNotes);\n setActiveNoteId(null);\n };\n\n return (\n <DarkModeProvider>\n <div className=\"notes\">\n <div className=\"notes__columns\">\n <div className=\"notes__column notes__column_list\">\n <h1>NoteList</h1>\n <div className=\"notes__column-content\">\n <NotesList\n notes={notes}\n activeNoteId={activeNoteId}\n onNoteActivated={setActiveNoteId}\n onNewNotesRequested={createNewNotes}\n onDeleteAllRequested={deleteAllNotes}\n />\n </div>\n </div>\n <div className=\"notes__column notes__column_primary\">\n <div className=\"notes__column-content\">\n <PrimaryPane\n activeNoteId={activeNoteId}\n notes={notes}\n saveNote={saveNote}\n />\n </div>\n </div>\n </div>\n <div className=\"notes__status-bar\">\n <StatusBar store={mobxStore.statusBar} />\n </div>\n </div>\n </DarkModeProvider>\n );\n}\n\nexport default memo(App);\n", | |
| "components": { | |
| "App": { | |
| "id": "App", | |
| "start": { | |
| "line": 22, | |
| "column": 0 | |
| }, | |
| "end": { | |
| "line": 129, | |
| "column": 1 | |
| }, | |
| "externals": { | |
| "formatISO": { | |
| "kind": "module", | |
| "start": { | |
| "line": 1, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 1, | |
| "column": 18 | |
| }, | |
| "jsx": false | |
| }, | |
| "nanoid": { | |
| "kind": "module", | |
| "start": { | |
| "line": 3, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "column": 15 | |
| }, | |
| "jsx": false | |
| }, | |
| "memo": { | |
| "kind": "module", | |
| "start": { | |
| "line": 4, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 4, | |
| "column": 13 | |
| }, | |
| "jsx": false | |
| }, | |
| "useEffect": { | |
| "kind": "module", | |
| "start": { | |
| "line": 4, | |
| "column": 15 | |
| }, | |
| "end": { | |
| "line": 4, | |
| "column": 24 | |
| }, | |
| "jsx": false | |
| }, | |
| "useRef": { | |
| "kind": "module", | |
| "start": { | |
| "line": 4, | |
| "column": 26 | |
| }, | |
| "end": { | |
| "line": 4, | |
| "column": 32 | |
| }, | |
| "jsx": false | |
| }, | |
| "useState": { | |
| "kind": "module", | |
| "start": { | |
| "line": 4, | |
| "column": 34 | |
| }, | |
| "end": { | |
| "line": 4, | |
| "column": 42 | |
| }, | |
| "jsx": false | |
| }, | |
| "useDispatch": { | |
| "kind": "module", | |
| "start": { | |
| "line": 5, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 5, | |
| "column": 20 | |
| }, | |
| "jsx": false | |
| }, | |
| "deleteNotes": { | |
| "kind": "module", | |
| "start": { | |
| "line": 7, | |
| "column": 2 | |
| }, | |
| "end": { | |
| "line": 7, | |
| "column": 13 | |
| }, | |
| "jsx": false | |
| }, | |
| "getNotes": { | |
| "kind": "module", | |
| "start": { | |
| "line": 8, | |
| "column": 2 | |
| }, | |
| "end": { | |
| "line": 8, | |
| "column": 10 | |
| }, | |
| "jsx": false | |
| }, | |
| "putNote": { | |
| "kind": "module", | |
| "start": { | |
| "line": 9, | |
| "column": 2 | |
| }, | |
| "end": { | |
| "line": 9, | |
| "column": 9 | |
| }, | |
| "jsx": false | |
| }, | |
| "saveNotesToLocalStorage": { | |
| "kind": "module", | |
| "start": { | |
| "line": 10, | |
| "column": 2 | |
| }, | |
| "end": { | |
| "line": 10, | |
| "column": 25 | |
| }, | |
| "jsx": false | |
| }, | |
| "updateLastActiveDate": { | |
| "kind": "module", | |
| "start": { | |
| "line": 12, | |
| "column": 9 | |
| }, | |
| "end": { | |
| "line": 12, | |
| "column": 29 | |
| }, | |
| "jsx": false | |
| }, | |
| "jabber": { | |
| "kind": "const", | |
| "start": { | |
| "line": 20, | |
| "column": 6 | |
| }, | |
| "end": { | |
| "line": 20, | |
| "column": 27 | |
| }, | |
| "jsx": false | |
| } | |
| }, | |
| "renders": [ | |
| { | |
| "kind": "state", | |
| "start": { | |
| "line": 24, | |
| "column": 42 | |
| }, | |
| "end": { | |
| "line": 24, | |
| "column": 56 | |
| }, | |
| "selfTime": 0.10000002384185791, | |
| "totalTime": 226.39999997615814, | |
| "count": 3, | |
| "props": null, | |
| "state": [ | |
| { | |
| "prev": "null", | |
| "next": "\"1pzsNz0t9tC5EUlwuCG-e\"", | |
| "stack": [ | |
| "dispatchDiscreteEvent", | |
| "dispatchEvent", | |
| "dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay", | |
| "dispatchEventForPluginEventSystem", | |
| "batchedUpdates", | |
| "batchedUpdates$1", | |
| "<unknown>", | |
| "dispatchEventsForPlugins", | |
| "processDispatchQueue", | |
| "processDispatchQueueItemsInOrder", | |
| "executeDispatch", | |
| "invokeGuardedCallbackAndCatchFirstError", | |
| "invokeGuardedCallback", | |
| "invokeGuardedCallbackDev" | |
| ], | |
| "count": 1 | |
| }, | |
| { | |
| "prev": "\"1pzsNz0t9tC5EUlwuCG-e\"", | |
| "next": "\"TvwV7MNMKY4PWz9bIKB4X\"", | |
| "stack": [ | |
| "dispatchDiscreteEvent", | |
| "dispatchEvent", | |
| "dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay", | |
| "dispatchEventForPluginEventSystem", | |
| "batchedUpdates", | |
| "batchedUpdates$1", | |
| "<unknown>", | |
| "dispatchEventsForPlugins", | |
| "processDispatchQueue", | |
| "processDispatchQueueItemsInOrder", | |
| "executeDispatch", | |
| "invokeGuardedCallbackAndCatchFirstError", | |
| "invokeGuardedCallback", | |
| "invokeGuardedCallbackDev" | |
| ], | |
| "count": 1 | |
| }, | |
| { | |
| "prev": "\"TvwV7MNMKY4PWz9bIKB4X\"", | |
| "next": "\"h0MCKqIPem2jlP-A0c6p-\"", | |
| "stack": [ | |
| "dispatchDiscreteEvent", | |
| "dispatchEvent", | |
| "dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay", | |
| "dispatchEventForPluginEventSystem", | |
| "batchedUpdates", | |
| "batchedUpdates$1", | |
| "<unknown>", | |
| "dispatchEventsForPlugins", | |
| "processDispatchQueue", | |
| "processDispatchQueueItemsInOrder", | |
| "executeDispatch", | |
| "invokeGuardedCallbackAndCatchFirstError", | |
| "invokeGuardedCallback", | |
| "invokeGuardedCallbackDev" | |
| ], | |
| "count": 1 | |
| } | |
| ], | |
| "owner": null | |
| }, | |
| { | |
| "kind": "state", | |
| "start": { | |
| "line": 23, | |
| "column": 28 | |
| }, | |
| "end": { | |
| "line": 23, | |
| "column": 48 | |
| }, | |
| "selfTime": 0.20000004768371582, | |
| "totalTime": 215.29999959468842, | |
| "count": 3, | |
| "props": null, | |
| "state": [ | |
| { | |
| "prev": "{…}", | |
| "next": "{…}", | |
| "stack": [ | |
| "<unknown>", | |
| "TextareaInput#poll", | |
| "runInOp", | |
| "endOperation", | |
| "finishOperation", | |
| "fireCallbacksForOps", | |
| "<unknown>", | |
| "<unknown>" | |
| ], | |
| "count": 3 | |
| } | |
| ], | |
| "owner": null | |
| } | |
| ], | |
| "children": { | |
| "DarkModeProvider": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/DarkModeContext/index.jsx::DarkModeProvider" | |
| }, | |
| "count": 6, | |
| "filename": "/Users/aidenybai/Projects/aidenybai/anya/demo/src/components/App/index.jsx" | |
| } | |
| } | |
| }, | |
| "/Users/aidenybai/Projects/aidenybai/anya/demo/src/index.jsx": { | |
| "source": "// Uncomment to enable why-did-you-render:\n// import \"./wdyr\";\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactDOMClient from 'react-dom/client';\nimport * as MobxReact from 'mobx-react-lite';\nimport * as ReactRedux from 'react-redux';\nimport App from './components/App';\nimport reduxStore from './store/redux';\nimport mobxStore from './store/mobx';\nimport './index.css';\nimport { createTheme, ThemeProvider } from '@mui/material';\n\nconst theme = createTheme({\n typography: {\n fontFamily: 'inherit',\n },\n components: {\n MuiButton: {\n defaultProps: {\n size: 'small',\n },\n styleOverrides: {\n root: {\n fontFamily: 'inherit',\n color: 'black',\n borderColor: 'rgba(0, 0, 0, 0.23)',\n backgroundColor: 'white',\n '&:hover': {\n borderColor: 'rgba(0, 0, 0, 0.23)',\n backgroundColor: '#ffe866',\n },\n '&:active': {\n borderColor: 'rgba(0, 0, 0, 0.23)',\n backgroundColor: '#ffdb01',\n },\n },\n },\n },\n },\n});\n\nconst useReact18 = true;\n\nconst element = (\n <React.StrictMode>\n <ReactRedux.Provider store={reduxStore}>\n <MobxReact.Observer>\n {() => (\n <ThemeProvider theme={theme}>\n {!useReact18 && (\n <div className=\"react-17-warning\">\n Workshop warning: running in the React 17 mode.\n </div>\n )}\n <App mobxStore={mobxStore} />\n </ThemeProvider>\n )}\n </MobxReact.Observer>\n </ReactRedux.Provider>\n </React.StrictMode>\n);\n\nif (useReact18) {\n ReactDOMClient.createRoot(document.getElementById('root')).render(element);\n} else {\n ReactDOM.render(element, document.getElementById('root'));\n}\n", | |
| "components": {} | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment