Optimize bundle size + chunked builds + JIT loading

* Replaced AJV with other JSON schema library
* Turndown and Vim mode (very large) now only loaded when used
* Chunked builds with ESBuild

Author: zefhemel

build_client.ts

@@ -1,4 +1,4 @@
-import { cp, mkdir, readFile, writeFile } from "node:fs/promises";
+import { cp, mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import { dirname } from "node:path";
 import * as sass from "sass";
@@ -28,7 +28,7 @@ export async function copyAssets(dist: string) {
   const scssContent = await readFile("client/styles/main.scss", "utf-8");
   const result = sass.compileString(scssContent, {
     loadPaths: ["client/styles"],
-    style: "expanded",
+    style: "compressed",
   });
   await writeFile(`${dist}/main.css`, result.css, "utf-8");
 
@@ -62,7 +62,10 @@ async function buildCopyBundleAssets() {
     sourcemap: "linked",
     minify: true,
     jsxFactory: "h",
-    // metafile: true,
+    metafile: true,
+    splitting: true,
+    format: "esm",
+    chunkNames: ".client/[name]-[hash]",
     jsx: "automatic",
     jsxFragment: "Fragment",
     jsxImportSource: "preact",
@@ -73,16 +76,32 @@ async function buildCopyBundleAssets() {
     console.log("Bundle info", text);
   }
 
-  // Patch the service_worker {{CACHE_NAME}}
+  await copyAssets("client_bundle/client/.client");
+
+  // Scan .client/ directory to build the full precache file list
+  const clientDir = "client_bundle/client/.client";
+  const allFiles = await readdir(clientDir);
+  const precacheFiles = [
+    "/", // The index page
+    "/.client/manifest.json", // Dynamically generated by the server, but needed for PWA
+    ...allFiles
+      .filter((f) =>
+        !f.endsWith(".map") && f !== "auth.html" && f !== "index.html" &&
+        f !== "LICENSE.md"
+      )
+      .map((f) => `/.client/${f}`),
+  ];
+  const precacheFilesStr = precacheFiles.join(",");
+
+  // Patch the service_worker {{CACHE_NAME}} and {{PRECACHE_FILES}}
   let swCode = await readFile(
     "client_bundle/client/service_worker.js",
     "utf-8",
   );
   swCode = swCode.replaceAll("{{CACHE_NAME}}", `cache-${Date.now()}`);
+  swCode = swCode.replaceAll("{{PRECACHE_FILES}}", precacheFilesStr);
   await writeFile("client_bundle/client/service_worker.js", swCode, "utf-8");
 
-  await copyAssets("client_bundle/client/.client");
-
   console.log("Built!");
 }
 

client/client.ts

@@ -96,6 +96,7 @@ export class Client {
   // CodeMirror editor
   editorView!: EditorView;
   commandKeyHandlerCompartment?: Compartment;
+  vimCompartment?: Compartment;
   indentUnitCompartment?: Compartment;
   undoHistoryCompartment?: Compartment;
 

client/codemirror/editor_paste.ts

@@ -2,12 +2,6 @@ import { syntaxTree } from "@codemirror/language";
 import { EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view";
 import type { Client } from "../client.ts";
 
-// We use turndown to convert HTML to Markdown
-import TurndownService from "turndown";
-
-// With tables and task notation as well
-// @ts-expect-error - No type definitions available for this package
-import { tables, taskListItems } from "@joplin/turndown-plugin-gfm";
 import { lezerToParseTree } from "../markdown_parser/parse_tree.ts";
 import {
   addParentPointers,
@@ -21,17 +15,30 @@ import { localDateString } from "@silverbulletmd/silverbullet/lib/dates";
 import type { UploadFile } from "@silverbulletmd/silverbullet/type/client";
 import { isValidName, isValidPath } from "@silverbulletmd/silverbullet/lib/ref";
 
-const turndownService = new TurndownService({
-  hr: "---",
-  codeBlockStyle: "fenced",
-  headingStyle: "atx",
-  emDelimiter: "*",
-  bulletListMarker: "*", // Duh!
-  strongDelimiter: "**",
-  linkStyle: "inlined",
-});
-turndownService.use(taskListItems);
-turndownService.use(tables);
+// Dynamically load the turndown service (only used for clipboard pasete)
+let turndownService: any = null;
+async function getTurndownService() {
+  if (!turndownService) {
+    const [{ default: TurndownService }, { tables, taskListItems }] =
+      await Promise.all([
+        import("turndown"),
+        // @ts-expect-error - No type definitions available for this package
+        import("@joplin/turndown-plugin-gfm"),
+      ]);
+    turndownService = new TurndownService({
+      hr: "---",
+      codeBlockStyle: "fenced",
+      headingStyle: "atx",
+      emDelimiter: "*",
+      bulletListMarker: "*", // Duh!
+      strongDelimiter: "**",
+      linkStyle: "inlined",
+    });
+    turndownService.use(taskListItems);
+    turndownService.use(tables);
+  }
+  return turndownService;
+}
 
 function striptHtmlComments(s: string): string {
   return s.replace(/<!--[\s\S]*?-->/g, "");
@@ -137,7 +144,7 @@ export function documentExtension(editor: Client) {
 
       // Only do rich text paste if shift is NOT down
       if (richText && !shiftDown) {
-        // Are we in a fencede code block?
+        // Are we in a fenced code block?
         const editorText = editor.editorView.state.sliceDoc();
         const tree = lezerToParseTree(
           editorText,
@@ -161,23 +168,26 @@ export function documentExtension(editor: Client) {
           }
         }
 
-        const markdown = striptHtmlComments(
-          turndownService.turndown(richText),
-        ).trim();
+        // Prevent default immediately, then do async turndown conversion
+        event.preventDefault();
         const view = editor.editorView;
         const selection = view.state.selection.main;
-        view.dispatch({
-          changes: [
-            {
-              from: selection.from,
-              to: selection.to,
-              insert: markdown,
+        safeRun(async () => {
+          const td = await getTurndownService();
+          const markdown = striptHtmlComments(td.turndown(richText)).trim();
+          view.dispatch({
+            changes: [
+              {
+                from: selection.from,
+                to: selection.to,
+                insert: markdown,
+              },
+            ],
+            selection: {
+              anchor: selection.from + markdown.length,
             },
-          ],
-          selection: {
-            anchor: selection.from + markdown.length,
-          },
-          scrollIntoView: true,
+            scrollIntoView: true,
+          });
         });
         return true;
       }

client/codemirror/editor_state.ts

@@ -34,9 +34,9 @@ import {
   ViewPlugin,
   type ViewUpdate,
 } from "@codemirror/view";
-import { vim } from "@replit/codemirror-vim";
 import { markdown } from "@codemirror/lang-markdown";
 import type { Client } from "../client.ts";
+import { loadVim } from "../vim_loader.ts";
 import { inlineContentPlugin } from "./inline_content.ts";
 import { cleanModePlugins } from "./clean.ts";
 import { lineWrapper } from "./line_wrapper.ts";
@@ -63,6 +63,7 @@ export function createEditorState(
   // Ugly: keep the commandKeyHandler compartment in the client, to be replaced
   // later once more commands are loaded
   client.commandKeyHandlerCompartment = new Compartment();
+  client.vimCompartment = new Compartment();
   const commandKeyBindings = client.commandKeyHandlerCompartment.of(
     createCommandKeyBindings(client),
   );
@@ -76,6 +77,13 @@ export function createEditorState(
   client.undoHistoryCompartment = new Compartment();
   const undoHistory = client.undoHistoryCompartment.of([history()]);
 
+  const vimMode = client.ui.viewState.uiOptions.vimMode;
+
+  // If vim mode is requested, load it async and reconfigure the compartment
+  if (vimMode) {
+    void enableVimMode(client);
+  }
+
   return EditorState.create({
     doc: text,
     extensions: [
@@ -93,15 +101,8 @@ export function createEditorState(
       // bindings wont trigger if they have the same keys.
       commandKeyBindings,
 
-      // Enable vim mode, or not
-      [
-        ...(client.ui.viewState.uiOptions.vimMode
-          ? [
-              vim({ status: true }),
-              EditorState.allowMultipleSelections.of(true),
-            ]
-          : []),
-      ],
+      // Vim mode compartment — starts empty, loaded async if needed
+      client.vimCompartment.of([]),
       [
         ...(readOnly ||
         client.ui.viewState.uiOptions.forcedROMode ||
@@ -425,6 +426,18 @@ export function createRegularKeyBindings(client: Client): Extension {
   }
 }
 
+async function enableVimMode(client: Client) {
+  const { vim } = await loadVim();
+  if (client.editorView && client.vimCompartment) {
+    client.editorView.dispatch({
+      effects: client.vimCompartment.reconfigure([
+        vim({ status: true }),
+        EditorState.allowMultipleSelections.of(true),
+      ]),
+    });
+  }
+}
+
 /**
  * Checks if the current platform is Mac-like (Mac, iPhone, iPod, iPad).
  * @returns A boolean indicating if the platform is Mac-like.

client/components/mini_editor.tsx

@@ -8,7 +8,7 @@ import {
   ViewPlugin,
   type ViewUpdate,
 } from "@codemirror/view";
-import { getCM as vimGetCm, Vim, vim } from "@replit/codemirror-vim";
+import { getVimModule } from "../vim_loader.ts";
 import { createCommandKeyBindings } from "../codemirror/editor_state.ts";
 
 type MiniEditorEvents = {
@@ -131,15 +131,16 @@ export function MiniEditor({
     // When vim mode is active, we need for CM to have created the new state
     // and the subscribe to the vim mode's events
     // This needs to happen in the next tick, so we wait a tick with setTimeout
-    if (vimMode) {
+    const vimMod = getVimModule();
+    if (vimMode && vimMod) {
       // Only applies to vim mode
       setTimeout(() => {
-        const cm = vimGetCm(editorViewRef.current!)!;
+        const cm = vimMod.getCM(editorViewRef.current!)!;
         cm.on("vim-mode-change", ({ mode }: { mode: string }) => {
           vimModeRef.current = mode;
         });
         if (vimStartInInsertMode) {
-          Vim.handleKey(cm, "i", "+input");
+          vimMod.Vim.handleKey(cm, "i", "+input");
         }
       });
     }
@@ -150,8 +151,8 @@ export function MiniEditor({
         // Insert command bindings before vim-mode to ensure they're available
         // in normal mode. See editor_state.ts for more details.
         createCommandKeyBindings(globalThis.client),
-        // Enable vim mode, or not
-        [...(vimMode ? [vim()] : [])],
+        // Enable vim mode, or not (uses already-loaded module if available)
+        [...(vimMode && vimMod ? [vimMod.vim()] : [])],
         [
           ...(editable
             ? []