lazy import code editor once, externalized codemirror

app/build.ts

@@ -72,16 +72,12 @@ await tsup.build({
 /**
  * Building UI for direct imports
  */
+const ui_splitting = false;
 await tsup.build({
    minify,
    sourcemap,
    watch,
-   entry: [
-      "src/ui/index.ts",
-      "src/ui/client/index.ts",
-      "src/ui/elements/index.ts",
-      "src/ui/main.css"
-   ],
+   entry: ["src/ui/index.ts", "src/ui/client/index.ts", "src/ui/main.css"],
    outDir: "dist/ui",
    external: [
       "bun:test",
@@ -89,19 +85,22 @@ await tsup.build({
       "react-dom",
       "react/jsx-runtime",
       "react/jsx-dev-runtime",
-      "use-sync-external-store"
+      "use-sync-external-store",
+      /codemirror/
    ],
    metafile: true,
    platform: "browser",
    format: ["esm"],
-   splitting: true,
+   splitting: ui_splitting,
    treeshake: true,
    loader: {
       ".svg": "dataurl"
    },
    esbuildOptions: (options) => {
       options.logLevel = "silent";
-      options.chunkNames = "chunks/[name]-[hash]";
+      if (ui_splitting) {
+         options.chunkNames = "chunks/[name]-[hash]";
+      }
    },
    onSuccess: async () => {
       delayTypes();

app/package.json

@@ -34,13 +34,14 @@
     "lodash-es": "^4.17.21",
     "oauth4webapi": "^2.11.1",
     "swr": "^2.2.5",
-    "json-schema-form-react": "^0.0.2"
+    "json-schema-form-react": "^0.0.2",
+    "@uiw/react-codemirror": "^4.23.6",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-liquid": "^6.2.1"
   },
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.613.0",
-    "@codemirror/lang-html": "^6.4.9",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-liquid": "^6.2.1",
     "@dagrejs/dagre": "^1.1.4",
     "@hello-pangea/dnd": "^17.0.0",
     "@hono/typebox-validator": "^0.2.6",
@@ -58,7 +59,6 @@
     "@types/node": "^22.10.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@uiw/react-codemirror": "^4.23.6",
     "@vitejs/plugin-react": "^4.3.3",
     "@xyflow/react": "^12.3.2",
     "autoprefixer": "^10.4.20",

app/src/ui/components/code/CodeEditor.tsx

@@ -1,8 +1,22 @@
 import { default as CodeMirror, type ReactCodeMirrorProps } from "@uiw/react-codemirror";
-
 import { useBknd } from "ui/client/bknd";
 
-export default function CodeEditor({ editable, basicSetup, ...props }: ReactCodeMirrorProps) {
+import { json } from "@codemirror/lang-json";
+import { type LiquidCompletionConfig, liquid } from "@codemirror/lang-liquid";
+
+export type CodeEditorProps = ReactCodeMirrorProps & {
+   _extensions?: Partial<{
+      json: boolean;
+      liquid: LiquidCompletionConfig;
+   }>;
+};
+
+export default function CodeEditor({
+   editable,
+   basicSetup,
+   _extensions = {},
+   ...props
+}: CodeEditorProps) {
    const b = useBknd();
    const theme = b.app.getAdminConfig().color_scheme;
    const _basicSetup: Partial<ReactCodeMirrorProps["basicSetup"]> = !editable
@@ -13,11 +27,24 @@ export default function CodeEditor({ editable, basicSetup, ...props }: ReactCode
         }
       : basicSetup;
 
+   const extensions = Object.entries(_extensions ?? {})
+      .map(([ext, config]: any) => {
+         switch (ext) {
+            case "json":
+               return json();
+            case "liquid":
+               return liquid(config);
+         }
+         return undefined;
+      })
+      .filter(Boolean) as any;
+
    return (
       <CodeMirror
          theme={theme === "dark" ? "dark" : "light"}
          editable={editable}
          basicSetup={_basicSetup}
+         extensions={extensions}
          {...props}
       />
    );

app/src/ui/components/code/JsonEditor.tsx

@@ -1,10 +1,9 @@
-import { json } from "@codemirror/lang-json";
-import type { ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { Suspense, lazy } from "react";
 import { twMerge } from "tailwind-merge";
+import type { CodeEditorProps } from "./CodeEditor";
 const CodeEditor = lazy(() => import("./CodeEditor"));
 
-export function JsonEditor({ editable, className, ...props }: ReactCodeMirrorProps) {
+export function JsonEditor({ editable, className, ...props }: CodeEditorProps) {
    return (
       <Suspense fallback={null}>
          <CodeEditor
@@ -14,7 +13,7 @@ export function JsonEditor({ editable, className, ...props }: ReactCodeMirrorPro
                className
             )}
             editable={editable}
-            extensions={[json()]}
+            _extensions={{ json: true }}
             {...props}
          />
       </Suspense>

app/src/ui/components/code/LiquidJsEditor.tsx

@@ -1,7 +1,7 @@
-import { liquid } from "@codemirror/lang-liquid";
-import type { ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { Suspense, lazy } from "react";
 import { twMerge } from "tailwind-merge";
+
+import type { CodeEditorProps } from "./CodeEditor";
 const CodeEditor = lazy(() => import("./CodeEditor"));
 
 const filters = [
@@ -106,7 +106,7 @@ const tags = [
    { label: "when" }
 ];
 
-export function LiquidJsEditor({ editable, ...props }: ReactCodeMirrorProps) {
+export function LiquidJsEditor({ editable, ...props }: CodeEditorProps) {
    return (
       <Suspense fallback={null}>
          <CodeEditor
@@ -115,7 +115,9 @@ export function LiquidJsEditor({ editable, ...props }: ReactCodeMirrorProps) {
                !editable && "opacity-70"
             )}
             editable={editable}
-            extensions={[liquid({ filters, tags })]}
+            _extensions={{
+               liquid: { filters, tags }
+            }}
             {...props}
          />
       </Suspense>

app/src/ui/modules/data/components/canvas/DataSchemaCanvas.tsx

@@ -2,7 +2,6 @@ import { MarkerType, type Node, Position, ReactFlowProvider } from "@xyflow/reac
 import type { AppDataConfig, TAppDataEntity } from "data/data-schema";
 import { useBknd } from "ui/client/BkndProvider";
 import { useBkndSystemTheme } from "ui/client/schema/system/use-bknd-system";
-import { useTheme } from "ui/client/use-theme";
 import { Canvas } from "ui/components/canvas/Canvas";
 import { layoutWithDagre } from "ui/components/canvas/layouts";
 import { Panels } from "ui/components/canvas/panels";