refactor: loading optimization

apps/backend/api/src/index.ts

@@ -11,7 +11,7 @@ import { createServer, appRouter } from "@vrite/backend";
       generateOpenApiDocument(appRouter, {
         baseUrl: "https://api.vrite.io",
         title: "Vrite API",
-        version: "2023.7.12"
+        version: "2023.7.17"
       })
     );
   });

apps/docs/src/pages/[...slug].astro

@@ -8,17 +8,21 @@ if (slug === undefined) {
   return Astro.redirect("/getting-started");
 }
 
-const collection = await getCollection("docs");
-const entry = await getEntry("docs", slug);
-
-if (entry === undefined) {
-  return Astro.redirect("/");
-}
-
+const { entry } = Astro.props;
 const { Content, headings } = await entry.render();
+const collection = await getCollection("docs");
 const entryIndex = collection.findIndex((e) => e.slug === slug);
 const nextEntry = collection[entryIndex + 1];
 const previousEntry = collection[entryIndex - 1];
+
+export const prerender = true;
+export async function getStaticPaths() {
+  const blogEntries = await getCollection("docs");
+  return blogEntries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { entry }
+  }));
+}
 ---
 
 <DefaultLayout

apps/web/package.json

@@ -78,7 +78,7 @@
     "typescript": "^4.9.5",
     "unocss": "^0.50.6",
     "url-slug": "^3.0.4",
-    "vite": "^4.2.1",
+    "vite": "^4.4.4",
     "y-prosemirror": "^1.2.0",
     "yjs": "^13.5.45"
   }

apps/web/public/sandbox.js

@@ -55,12 +55,12 @@
               return e2.toLowerCase() in i;
             } } };
           };
-          for (var l in s2.open(n.method || "get", e, true), s2.onload = function() {
+          for (var l2 in s2.open(n.method || "get", e, true), s2.onload = function() {
             s2.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm, function(e2, n2, t2) {
               o2.push(n2 = n2.toLowerCase()), u.push([n2, t2]), i[n2] = i[n2] ? i[n2] + "," + t2 : t2;
             }), t(a());
           }, s2.onerror = r, s2.withCredentials = "include" == n.credentials, n.headers)
-            s2.setRequestHeader(l, n.headers[l]);
+            s2.setRequestHeader(l2, n.headers[l2]);
           s2.send(n.body || null);
         });
       };
@@ -77,21 +77,21 @@
   // ../../packages/sdk/javascript/dist/api.mjs
   var api_exports = {};
   __export(api_exports, {
-    createClient: () => C
+    createClient: () => v
   });
-  var import_isomorphic_unfetch, b, y, o, k, G, T, g, s, w, U, S, c, L, x, D, p, O, m, j, I, h, f, C;
+  var import_isomorphic_unfetch, b, k, o, G, g, m, w, s, U, S, L, c, D, O, x, p, j, d, I, f, h, C, l, W, v;
   var init_api = __esm({
     "../../packages/sdk/javascript/dist/api.mjs"() {
       import_isomorphic_unfetch = __toESM(require_browser(), 1);
       b = "/content-groups";
-      y = (r) => ({ list: () => r("GET", `${b}/list`), create: (t) => r("POST", `${b}`, { body: t }), update: (t) => r("PUT", `${b}`, { body: t }), delete: (t) => r("DELETE", `${b}`, { params: t }) });
+      k = (r) => ({ list: () => r("GET", `${b}/list`), create: (t) => r("POST", `${b}`, { body: t }), update: (t) => r("PUT", `${b}`, { body: t }), delete: (t) => r("DELETE", `${b}`, { params: t }) });
       o = "/content-pieces";
-      k = (r) => ({ get: (t) => r("GET", `${o}`, { params: t }), create: (t) => r("POST", `${o}`, { body: t }), update: (t) => r("PUT", `${o}`, { body: t }), delete: (t) => r("DELETE", `${o}`, { params: t }), list: (t) => r("GET", `${o}/list`, { params: t }) });
-      G = (r) => {
-        let t = r.baseURL || "https://api.vrite.io", e = r.extensionId || "", u = r.headers || {}, { token: l } = r;
-        return { sendRequest: async (a, d, i) => {
+      G = (r) => ({ get: (t) => r("GET", `${o}`, { params: t }), create: (t) => r("POST", `${o}`, { body: t }), update: (t) => r("PUT", `${o}`, { body: t }), delete: (t) => r("DELETE", `${o}`, { params: t }), list: (t) => r("GET", `${o}/list`, { params: t }) });
+      g = (r) => {
+        let t = r.baseURL || "https://api.vrite.io", e = r.extensionId || "", u = r.headers || {}, { token: T } = r;
+        return { sendRequest: async (a, P, i) => {
           try {
-            const n = await fetch(`${t}${d}/?${encodeURI(Object.entries(i?.params || {}).filter(([, $]) => $).map(([$, P]) => `${$}=${P}`).join("&"))}`, { headers: { Authorization: `Bearer ${l}`, Accept: "application/json", ...i?.body ? { "Content-Type": "application/json" } : {}, ...e ? { "X-Vrite-Extension-ID": e } : {}, ...u }, body: i?.body ? JSON.stringify(i.body) : null, method: a });
+            const n = await fetch(`${t}${P}/?${encodeURI(Object.entries(i?.params || {}).filter(([, $]) => $).map(([$, y]) => `${$}=${y}`).join("&"))}`, { headers: { Authorization: `Bearer ${T}`, Accept: "application/json", ...i?.body ? { "Content-Type": "application/json" } : {}, ...e ? { "X-Vrite-Extension-ID": e } : {}, ...u }, body: i?.body ? JSON.stringify(i.body) : null, method: a });
             let E = null;
             try {
               if (E = await n.json(), !E)
@@ -106,29 +106,31 @@
             throw console.error(n), n;
           }
         }, reconfigure: (a) => {
-          t = a.baseURL || t, l = a.token || l, e = a.extensionId || e, u = a.headers || u;
+          t = a.baseURL || t, T = a.token || T, e = a.extensionId || e, u = a.headers || u;
         } };
       };
-      T = "/user-settings";
-      g = (r) => ({ get: () => r("GET", `${T}`), update: (t) => r("PUT", `${T}`, { body: t }) });
+      m = "/user-settings";
+      w = (r) => ({ get: () => r("GET", `${m}`), update: (t) => r("PUT", `${m}`, { body: t }) });
       s = "/tags";
-      w = (r) => ({ get: (t) => r("GET", `${s}`, { params: t }), update: (t) => r("PUT", `${s}`, { body: t }), create: (t) => r("PUT", `${s}`, { body: t }), delete: (t) => r("DELETE", `${s}`, { params: t }), list: (t) => r("GET", `${s}/list`, { params: t }) });
-      U = "/profile";
-      S = (r) => ({ get: () => r("GET", `${U}`) });
+      U = (r) => ({ get: (t) => r("GET", `${s}`, { params: t }), update: (t) => r("PUT", `${s}`, { body: t }), create: (t) => r("PUT", `${s}`, { body: t }), delete: (t) => r("DELETE", `${s}`, { params: t }), list: (t) => r("GET", `${s}/list`, { params: t }) });
+      S = "/profile";
+      L = (r) => ({ get: () => r("GET", `${S}`) });
       c = "/webhooks";
-      L = (r) => ({ get: (t) => r("GET", `${c}`, { params: t }), create: (t) => r("POST", `${c}`, { body: t }), update: (t) => r("PUT", `${c}`, { body: t }), delete: (t) => r("DELETE", `${c}`, { params: t }), list: (t) => r("GET", `${c}/list`, { params: t }) });
-      x = "/workspace";
-      D = (r) => ({ get: () => r("GET", `${x}`) });
+      D = (r) => ({ get: (t) => r("GET", `${c}`, { params: t }), create: (t) => r("POST", `${c}`, { body: t }), update: (t) => r("PUT", `${c}`, { body: t }), delete: (t) => r("DELETE", `${c}`, { params: t }), list: (t) => r("GET", `${c}/list`, { params: t }) });
+      O = "/workspace";
+      x = (r) => ({ get: () => r("GET", `${O}`) });
       p = "/roles";
-      O = (r) => ({ get: (t) => r("GET", `${p}`, { params: t }), create: (t) => r("POST", `${p}`, { body: t }), update: (t) => r("PUT", `${p}`, { body: t }), delete: (t) => r("DELETE", `${p}`, { params: t }), list: (t) => r("GET", `${p}/list`, { params: t }) });
-      m = "/workspace-settings";
-      j = (r) => ({ get: () => r("GET", `${m}`), update: (t) => r("PUT", `${m}`, { body: t }) });
-      I = (r) => ({ listMembers: (t) => r("GET", "/workspace-memberships/list-members", { params: t }), listWorkspaces: (t) => r("GET", "/workspace-memberships/list-workspaces", { params: t }), create: (t) => r("POST", "/workspace-memberships", { body: t }), update: (t) => r("PUT", "/workspace-memberships", { body: t }), delete: (t) => r("DELETE", "/workspace-memberships", { params: t }) });
+      j = (r) => ({ get: (t) => r("GET", `${p}`, { params: t }), create: (t) => r("POST", `${p}`, { body: t }), update: (t) => r("PUT", `${p}`, { body: t }), delete: (t) => r("DELETE", `${p}`, { params: t }), list: (t) => r("GET", `${p}/list`, { params: t }) });
+      d = "/workspace-settings";
+      I = (r) => ({ get: () => r("GET", `${d}`), update: (t) => r("PUT", `${d}`, { body: t }) });
+      f = (r) => ({ listMembers: (t) => r("GET", "/workspace-memberships/list-members", { params: t }), listWorkspaces: (t) => r("GET", "/workspace-memberships/list-workspaces", { params: t }), create: (t) => r("POST", "/workspace-memberships", { body: t }), update: (t) => r("PUT", "/workspace-memberships", { body: t }), delete: (t) => r("DELETE", "/workspace-memberships", { params: t }) });
       h = "/extension";
-      f = (r) => ({ get: () => r("GET", `${h}`), updateContentPieceData: (t) => r("POST", `${h}/content-piece-data`, { body: t }) });
-      C = (r) => {
-        const { sendRequest: t, reconfigure: e } = G(r);
-        return { contentGroups: y(t), contentPieces: k(t), tags: w(t), profile: S(t), userSettings: g(t), webhooks: L(t), workspace: D(t), roles: O(t), workspaceSettings: j(t), workspaceMemberships: I(t), extension: f(t), reconfigure: e };
+      C = (r) => ({ get: () => r("GET", `${h}`), updateContentPieceData: (t) => r("POST", `${h}/content-piece-data`, { body: t }) });
+      l = "/variants";
+      W = (r) => ({ create: (t) => r("POST", `${l}`, { body: t }), update: (t) => r("PUT", `${l}`, { body: t }), delete: (t) => r("DELETE", `${l}`, { params: t }), list: () => r("GET", `${l}/list`) });
+      v = (r) => {
+        const { sendRequest: t, reconfigure: e } = g(r);
+        return { contentGroups: k(t), contentPieces: G(t), tags: U(t), profile: L(t), userSettings: w(t), webhooks: D(t), workspace: x(t), roles: j(t), workspaceSettings: I(t), workspaceMemberships: f(t), extension: C(t), variants: W(t), reconfigure: e };
       };
     }
   });

apps/web/src/app.tsx

@@ -1,10 +1,18 @@
 import { Component, Match, Switch, lazy } from "solid-js";
 import { Outlet, Route, Routes } from "@solidjs/router";
-import { AuthView } from "#views/auth";
 import { StandaloneLayout, SecuredLayout } from "#layout";
-import { VerifyView } from "#views/verify";
 import { isEditorApp } from "#lib/utils";
 
+const AuthView = lazy(async () => {
+  const { AuthView } = await import("#views/auth");
+
+  return { default: AuthView };
+});
+const VerifyView = lazy(async () => {
+  const { VerifyView } = await import("#views/verify");
+
+  return { default: VerifyView };
+});
 const StandaloneEditorView = lazy(async () => {
   const { StandaloneEditorView } = await import("#views/standalone-editor");
 

apps/web/src/components/fragments/mini-code-editor.tsx

@@ -1,13 +1,23 @@
-import { Component, createEffect, createSignal, on, onCleanup, onMount, Show } from "solid-js";
+import {
+  Component,
+  createEffect,
+  createSignal,
+  lazy,
+  on,
+  onCleanup,
+  onMount,
+  Show
+} from "solid-js";
 import { nanoid } from "nanoid";
 import clsx from "clsx";
 import { mdiCheckCircleOutline } from "@mdi/js";
+import type { monaco } from "#lib/monaco";
 import { createRef } from "#lib/utils";
-import { monaco } from "#lib/code-editor";
 import { useAppearanceContext } from "#context";
 import { IconButton } from "#components/primitives";
 
 interface MiniCodeEditorProps {
+  monaco: typeof monaco;
   wrapperClass?: string;
   wrap?: boolean;
   class?: string;
@@ -29,6 +39,13 @@ const MiniCodeEditor: Component<MiniCodeEditorProps> = (props) => {
   const [codeEditor, setCodeEditor] = createSignal<monaco.editor.IStandaloneCodeEditor | null>(
     null
   );
+  const getUri = (): monaco.Uri => {
+    if (props.fileName) {
+      return props.monaco.Uri.file(props.fileName);
+    }
+
+    return props.monaco.Uri.parse(`file:///${nanoid()}`);
+  };
 
   onMount(() => {
     const editorContainer = editorContainerRef();
@@ -53,7 +70,7 @@ const MiniCodeEditor: Component<MiniCodeEditorProps> = (props) => {
     };
 
     if (editorContainer) {
-      const codeEditor = monaco.editor.create(editorContainer, {
+      const codeEditor = props.monaco.editor.create(editorContainer, {
         automaticLayout: true,
         minimap: { enabled: false },
         contextmenu: false,
@@ -77,13 +94,9 @@ const MiniCodeEditor: Component<MiniCodeEditorProps> = (props) => {
       }
 
       codeEditor.setModel(
-        monaco.editor.createModel(
-          props.code || "",
-          props.language || "json",
-          props.fileName ? monaco.Uri.file(props.fileName) : monaco.Uri.parse(`file:///${nanoid()}`)
-        )
+        props.monaco.editor.createModel(props.code || "", props.language || "json", getUri())
       );
-      codeEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, async () => {
+      codeEditor.addCommand(props.monaco.KeyMod.CtrlCmd | props.monaco.KeyCode.KeyS, async () => {
         props.onSave?.(codeEditor.getValue());
       });
 
@@ -111,20 +124,24 @@ const MiniCodeEditor: Component<MiniCodeEditorProps> = (props) => {
           () => props.language,
           () => {
             if (props.readOnly) {
-              let fileName = monaco.Uri.parse(`file:///${nanoid()}`);
+              let fileName = props.monaco.Uri.parse(`file:///${nanoid()}`);
 
-              if (props.fileName) fileName = monaco.Uri.file(props.fileName);
+              if (props.fileName) fileName = props.monaco.Uri.file(props.fileName);
 
               codeEditor.getModel()?.dispose();
               codeEditor.setModel(
-                monaco.editor.createModel(props.code || "", props.language || "json", fileName)
+                props.monaco.editor.createModel(
+                  props.code || "",
+                  props.language || "json",
+                  fileName
+                )
               );
             }
           }
         )
       );
       createEffect(() => {
-        monaco.editor.setTheme(
+        props.monaco.editor.setTheme(
           `${codeEditorTheme()}${props.color === "contrast" ? "-contrast" : ""}`
         );
       });
@@ -161,5 +178,14 @@ const MiniCodeEditor: Component<MiniCodeEditorProps> = (props) => {
     </div>
   );
 };
+const MiniCodeEditorWrapper = lazy(async () => {
+  const { monaco } = await import("#lib/monaco");
+
+  return {
+    default: (props: Omit<MiniCodeEditorProps, "monaco">) => (
+      <MiniCodeEditor monaco={monaco} {...props} />
+    )
+  };
+});
 
-export { MiniCodeEditor };
+export { MiniCodeEditorWrapper as MiniCodeEditor };

apps/web/src/config/index.ts

@@ -1,5 +1,5 @@
 const config = {
-  version: "Beta, v2023.7.12"
+  version: "Beta, v2023.7.17"
 };
 
 export { config };

apps/web/src/context/cache/index.tsx

@@ -1,19 +1,45 @@
+import { UseContentGroups, useContentGroups } from "./content-groups";
+import { UseContentPieces, useContentPieces } from "./content-pieces";
 import { UseOpenedContentPiece, useOpenedContentPiece } from "./opened-content-piece";
-import { ParentComponent, createContext, useContext } from "solid-js";
+import { ParentComponent, createContext, getOwner, runWithOwner, useContext } from "solid-js";
 
 interface CacheContextData {
   useOpenedContentPiece(): UseOpenedContentPiece;
+  useContentGroups(): UseContentGroups;
+  useContentPieces(contentGroupId: string): UseContentPieces;
 }
 
 const CacheContext = createContext<CacheContextData>();
 const CacheContextProvider: ParentComponent = (props) => {
-  const useOpenedContentPieceCache = useOpenedContentPiece();
+  const cacheOwner = getOwner();
+  const useContentPiecesCache = new Map<string, UseContentPieces>();
+
+  let useOpenedContentPieceCache: UseOpenedContentPiece | null = null;
+  let useContentGroupsCache: UseContentGroups | null = null;
 
   return (
     <CacheContext.Provider
       value={{
         useOpenedContentPiece() {
-          return useOpenedContentPieceCache;
+          return runWithOwner(cacheOwner, () => {
+            return (
+              useOpenedContentPieceCache || (useOpenedContentPieceCache = useOpenedContentPiece())
+            );
+          })!;
+        },
+        useContentGroups() {
+          return runWithOwner(cacheOwner, () => {
+            return useContentGroupsCache || (useContentGroupsCache = useContentGroups());
+          })!;
+        },
+        useContentPieces(contentGroupId) {
+          return runWithOwner(cacheOwner, () => {
+            if (!useContentPiecesCache.has(contentGroupId)) {
+              useContentPiecesCache.set(contentGroupId, useContentPieces(contentGroupId));
+            }
+
+            return useContentPiecesCache.get(contentGroupId)!;
+          })!;
         }
       }}
     >

apps/web/src/context/cache/opened-content-piece.ts

@@ -68,7 +68,7 @@ const useOpenedContentPiece = (): UseOpenedContentPiece => {
     on(
       () => state.contentPiece?.contentGroupId,
       (contentGroupId, previousContentGroupId) => {
-        if (!contentGroupId || contentGroupId === previousContentGroupId) return;
+        if (!contentGroupId) return;
 
         const contentPiecesChanges = client.contentPieces.changes.subscribe(
           {

apps/web/src/index.tsx

@@ -10,8 +10,7 @@ import {
   ClientContextProvider,
   ConfirmationContextProvider,
   NotificationsProvider,
-  UIContextProvider,
-  CacheContextProvider
+  UIContextProvider
 } from "#context";
 
 const container = document.querySelector("#root");

apps/web/src/layout/side-panel.tsx

@@ -5,23 +5,15 @@ import { Dynamic } from "solid-js/web";
 import { useUIContext } from "#context";
 import { createRef } from "#lib/utils";
 import { ContentPieceView } from "#views/content-piece";
-import { SettingsView } from "#views/settings/view";
-import { GettingStartedView } from "#views/getting-started";
+import { SettingsView } from "#views/settings";
 import { ExtensionsView } from "#views/extensions";
+import { GettingStartedView } from "#views/getting-started";
 
 const sidePanelViews: Record<string, Component<Record<string, any>>> = {
-  contentPiece: () => {
-    return <ContentPieceView />;
-  },
-  settings: () => {
-    return <SettingsView />;
-  },
-  extensions: () => {
-    return <ExtensionsView />;
-  },
-  default: () => {
-    return <GettingStartedView />;
-  }
+  contentPiece: ContentPieceView,
+  settings: SettingsView,
+  extensions: ExtensionsView,
+  default: GettingStartedView
 };
 const SidePanel: Component = () => {
   const { storage, setStorage } = useUIContext();

apps/web/src/lib/code-editor/format.ts

@@ -3,7 +3,7 @@ import type { Options, Plugin } from "prettier";
 
 const languageParserMap = {
   javascript: "babel",
-  typescript: "typescript",
+  typescript: "babel-ts",
   json: "yaml",
   graphql: "graphql",
   html: "html",
@@ -23,9 +23,8 @@ const isFormattable = (language: string): boolean => {
 const loadParserPlugin = async (language: string): Promise<Plugin | null> => {
   switch (language as SupportedLanguages) {
     case "javascript":
-      return import("prettier/parser-babel");
     case "typescript":
-      return import("prettier/parser-typescript");
+      return import("prettier/parser-babel");
     case "graphql":
       return import("prettier/parser-graphql");
     case "html":