fix: Update React Editor component

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 /build*/
 out
+.venv

packages/cxx-storybook/.storybook/preview.css

@@ -0,0 +1,3 @@
+.sb-main-fullscreen #storybook-root {
+    height: 100svh;
+}

packages/cxx-storybook/.storybook/preview.ts

@@ -1,4 +1,9 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "./preview.css";
+
+const queryClient = new QueryClient();
 
 const preview: Preview = {
   parameters: {
@@ -10,6 +15,15 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [
+    (Story) => {
+      return React.createElement(
+        QueryClientProvider,
+        { client: queryClient },
+        React.createElement(Story)
+      );
+    },
+  ],
 };
 
 export default preview;

packages/cxx-storybook/package.json

@@ -8,37 +8,42 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
   "devDependencies": {
-    "@codemirror/commands": "^6.2.4",
+    "@codemirror/commands": "^6.2.5",
     "@codemirror/lang-cpp": "^6.0.2",
-    "@codemirror/lint": "^6.3.0",
+    "@codemirror/lint": "^6.4.1",
     "@codemirror/state": "^6.2.1",
-    "@codemirror/view": "^6.14.0",
-    "@storybook/addon-essentials": "^7.0.24",
-    "@storybook/addon-interactions": "^7.0.24",
-    "@storybook/addon-links": "^7.0.24",
-    "@storybook/blocks": "^7.0.24",
-    "@storybook/react": "^7.0.24",
-    "@storybook/react-vite": "^7.0.24",
+    "@codemirror/view": "^6.18.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/blocks": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-vite": "^7.4.0",
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@tanstack/react-query": "^4.35.0",
+    "@types/lodash": "^4.14.198",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.0.4",
     "codemirror": "^6.0.1",
     "cxx-frontend": "file:../cxx-frontend",
-    "eslint": "^8.38.0",
+    "eslint": "^8.48.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-react-refresh": "^0.3.5",
+    "eslint-plugin-storybook": "^0.6.13",
+    "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
-    "storybook": "^7.0.24",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "storybook": "^7.4.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
   }
 }

packages/cxx-storybook/src/CxxFrontendClient.tsx

@@ -0,0 +1,14 @@
+import wasmBinaryUrl from "cxx-frontend/dist/cxx-js.wasm?url";
+import { Parser } from "cxx-frontend";
+
+export class CxxFrontendClient {
+  async load(signal?: AbortSignal) {
+    const response = await fetch(wasmBinaryUrl, { signal });
+    if (!response.ok) throw new Error("failed to load cxx-js.wasm");
+    if (signal?.aborted) throw new Error("aborted");
+    const data = await response.arrayBuffer();
+    const wasmBinary = new Uint8Array(data);
+    await Parser.init({ wasmBinary });
+    return true;
+  }
+}

packages/cxx-storybook/src/CxxFrontendProvider.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { CxxFrontendClient } from "./CxxFrontendClient";
+
+interface CxxFrontendProviderProps {
+  client: CxxFrontendClient;
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function CxxFrontendProvider({
+  client,
+  fallback,
+  children,
+}: CxxFrontendProviderProps) {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isLoaded) return;
+    setIsLoaded(false);
+    const controller = new AbortController();
+    client.load(controller.signal).then(() => setIsLoaded(true));
+    return () => controller.abort();
+  }, [client, isLoaded]);
+
+  return isLoaded ? <>{children}</> : fallback;
+}

packages/cxx-storybook/src/Editor.tsx

@@ -18,162 +18,49 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { FC, useEffect, useRef, useState } from "react";
-import { basicSetup } from "codemirror";
-import { cpp } from "@codemirror/lang-cpp";
-import { EditorState } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
-import { linter, Diagnostic } from "@codemirror/lint";
-import * as cxx from "cxx-frontend";
-import "./Editor.css";
+import { ComponentProps } from "react";
+import { useConfigureEditor } from "./useConfigureEditor";
+import { Parser } from "cxx-frontend";
 
-export interface EditorProps {
+export interface EditorProps
+  extends Pick<ComponentProps<"div">, "className" | "style"> {
   /**
-   * The initial text of the editor.
+   * The initial value of the editor.
+   * @default ""
    */
   initialValue?: string;
 
   /**
-   * Whether the Editor owns the syntax tree.
-   *
+   * Whether the editor is editable.
    * @default true
    */
-  editorWillDisposeSyntaxTree?: boolean;
+  editable?: boolean;
 
   /**
-   * Called when the cursor position changes.
-   *
-   * @param lineNumber 1-based line number
-   * @param column 1-based column number
+   * Whether to check the syntax of the document.
+   * @default true
    */
-  onCursorPositionChanged?: (lineNumber: number, column: number) => void;
+  checkSyntax?: boolean;
 
   /**
-   * Called when the syntax is parsed.
-   *
-   * @param parser the Parser
+   * Called when the parser changes.
+   * @param parser The new parser or null if the parser was unset.
    */
-  onSyntaxChanged?: (parser: cxx.Parser) => void;
+  onParserChanged?: (parser: Parser | null) => void;
 }
 
-export const Editor: FC<EditorProps> = ({
+export function Editor({
   initialValue,
-  editorWillDisposeSyntaxTree = true,
-  onCursorPositionChanged,
-  onSyntaxChanged,
-}) => {
-  const editorRef = useRef<HTMLDivElement>(null);
-
-  const [editor, setEditor] = useState<EditorView | null>(null);
-
-  const linterRef = useRef({
-    editorWillDisposeSyntaxTree,
-    onCursorPositionChanged,
-    onSyntaxChanged,
+  checkSyntax,
+  editable,
+  onParserChanged,
+  ...props
+}: EditorProps) {
+  const configureEditor = useConfigureEditor({
+    initialValue,
+    checkSyntax,
+    editable,
+    onParserChanged,
   });
-
-  linterRef.current = {
-    editorWillDisposeSyntaxTree,
-    onCursorPositionChanged,
-    onSyntaxChanged,
-  };
-
-  useEffect(() => {
-    if (!editor) return;
-
-    editor.dispatch({
-      changes: { from: 0, to: editor.state.doc.length, insert: initialValue },
-    });
-  }, [editor, initialValue]);
-
-  useEffect(() => {
-    const domElement = editorRef.current;
-
-    if (!domElement) {
-      return;
-    }
-
-    const {
-      editorWillDisposeSyntaxTree,
-      onCursorPositionChanged,
-      onSyntaxChanged,
-    } = linterRef.current;
-
-    const syntaxChecker = (view: EditorView) => {
-      if (!cxx.Parser.isInitialized()) {
-        // The parser is not ready yet, we can't do anything
-        return [];
-      }
-
-      const source = view.state.doc.toString();
-
-      const parser = new cxx.Parser({
-        path: "main.cc",
-        source,
-      });
-
-      parser.parse();
-
-      const diagnostics: Diagnostic[] = [];
-
-      for (const diagnostic of parser.getDiagnostics()) {
-        const { startLine, startColumn, endLine, endColumn, message } =
-          diagnostic;
-
-        const from =
-          view.state.doc.line(startLine).from + Math.max(startColumn - 1, 0);
-
-        const to =
-          view.state.doc.line(endLine).from + Math.max(endColumn - 1, 0);
-
-        diagnostics.push({
-          severity: "error",
-          from,
-          to,
-          message,
-        });
-      }
-
-      onSyntaxChanged?.(parser);
-
-      if (editorWillDisposeSyntaxTree || !onSyntaxChanged) {
-        parser.dispose();
-      }
-
-      return diagnostics;
-    };
-
-    const needsRefresh = () => {
-      return !cxx.Parser.isInitialized();
-    };
-
-    const cppLinter = linter(syntaxChecker, { needsRefresh });
-
-    const updateListener = EditorView.updateListener.of((update) => {
-      if (update.selectionSet && onCursorPositionChanged) {
-        const sel = update.state.selection.main;
-        const line = update.state.doc.lineAt(sel.to);
-        const column = sel.from - line.from;
-        onCursorPositionChanged(line.number, column);
-      }
-    });
-
-    const startState = EditorState.create({
-      doc: "",
-      extensions: [basicSetup, cpp(), updateListener, cppLinter],
-    });
-
-    const editor = new EditorView({
-      state: startState,
-      parent: domElement,
-    });
-
-    setEditor(editor);
-
-    return () => {
-      editor.destroy();
-    };
-  }, [editorRef]);
-
-  return <div ref={editorRef} className="Editor" />;
-};
+  return <div ref={configureEditor} {...props} />;
+}