@matthesketh/utopia-router 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -36,6 +36,7 @@ __export(index_exports, {
   isNavigating: () => isNavigating,
   matchRoute: () => matchRoute,
   navigate: () => navigate,
+  preloadRoute: () => preloadRoute,
   queryParams: () => queryParams,
   setQueryParam: () => setQueryParam,
   setQueryParams: () => setQueryParams
@@ -417,12 +418,35 @@ function capScrollPositions() {
 
 // src/components.ts
 var import_utopia_core2 = require("@matthesketh/utopia-core");
+var moduleCache = /* @__PURE__ */ new Map();
+async function preloadRoute() {
+  const match = currentRoute.peek();
+  if (!match) return;
+  const promises = [match.route.component()];
+  if (match.route.layout) {
+    promises.push(match.route.layout());
+  }
+  const modules = await Promise.all(promises);
+  moduleCache.set(match.route.component, modules[0]);
+  if (match.route.layout && modules.length > 1) {
+    moduleCache.set(match.route.layout, modules[1]);
+  }
+}
 function createRouterView() {
   const container = document.createElement("div");
   container.setAttribute("data-utopia-router-view", "");
   let currentCleanup = null;
   let currentMatch = null;
   let loadId = 0;
+  const initialMatch = currentRoute.peek();
+  if (initialMatch) {
+    const syncResult = tryRenderFromCache(initialMatch);
+    if (syncResult) {
+      container.appendChild(syncResult.node);
+      currentCleanup = syncResult.cleanup;
+      currentMatch = initialMatch;
+    }
+  }
   (0, import_utopia_core2.effect)(() => {
     const match = currentRoute();
     if (match === currentMatch) {
@@ -456,15 +480,58 @@ function createRouterView() {
   });
   return container;
 }
+function tryRenderFromCache(match) {
+  const cachedPage = moduleCache.get(match.route.component);
+  if (!cachedPage) return null;
+  if (match.route.layout && !moduleCache.has(match.route.layout)) return null;
+  const cachedLayout = match.route.layout ? moduleCache.get(match.route.layout) : null;
+  moduleCache.delete(match.route.component);
+  if (match.route.layout) moduleCache.delete(match.route.layout);
+  const PageComponent = cachedPage.default ?? cachedPage;
+  const LayoutComponent = cachedLayout ? cachedLayout.default ?? cachedLayout : null;
+  const pageNode = renderComponent(PageComponent, {
+    params: match.params,
+    url: match.url
+  });
+  let node;
+  if (LayoutComponent) {
+    node = renderComponent(LayoutComponent, {
+      params: match.params,
+      url: match.url,
+      children: pageNode
+    });
+  } else {
+    node = pageNode;
+  }
+  return {
+    node,
+    cleanup: () => {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+  };
+}
 async function loadRouteComponent(match) {
   try {
-    const promises = [match.route.component()];
-    if (match.route.layout) {
-      promises.push(match.route.layout());
+    const cachedPage = moduleCache.get(match.route.component);
+    const cachedLayout = match.route.layout ? moduleCache.get(match.route.layout) : void 0;
+    let pageModule;
+    let layoutModule = null;
+    if (cachedPage) {
+      pageModule = cachedPage;
+      layoutModule = cachedLayout ?? null;
+      moduleCache.delete(match.route.component);
+      if (match.route.layout) moduleCache.delete(match.route.layout);
+    } else {
+      const promises = [match.route.component()];
+      if (match.route.layout) {
+        promises.push(match.route.layout());
+      }
+      const modules = await Promise.all(promises);
+      pageModule = modules[0];
+      layoutModule = modules.length > 1 ? modules[1] : null;
     }
-    const modules = await Promise.all(promises);
-    const pageModule = modules[0];
-    const layoutModule = modules.length > 1 ? modules[1] : null;
     if (currentRoute.peek() !== match) {
       return null;
     }
@@ -662,6 +729,7 @@ function getRouteParam(name) {
   isNavigating,
   matchRoute,
   navigate,
+  preloadRoute,
   queryParams,
   setQueryParam,
   setQueryParams

package/dist/index.d.cts

@@ -167,6 +167,20 @@ declare function beforeNavigate(hook: BeforeNavigateHook): () => void;
  */
 declare function destroy(): void;
 
+/**
+ * Pre-load the current route's component (and layout) so that
+ * `createRouterView()` can render it synchronously on first paint.
+ *
+ * Call this **after** `createRouter()` and **before** `mount()`.
+ *
+ * @example
+ * ```ts
+ * createRouter(routes)
+ * await preloadRoute()
+ * mount(App, '#app')
+ * ```
+ */
+declare function preloadRoute(): Promise<void>;
 /**
  * Creates a DOM node that renders the current route's component.
  *
@@ -239,4 +253,4 @@ declare function setQueryParams(params: Record<string, string | null>): void;
  */
 declare function getRouteParam(name: string): _matthesketh_utopia_core.ReadonlySignal<string | null>;
 
-export { type BeforeNavigateHook, type Route, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, getQueryParam, getRouteParam, isNavigating, matchRoute, navigate, queryParams, setQueryParam, setQueryParams };
+export { type BeforeNavigateHook, type Route, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, getQueryParam, getRouteParam, isNavigating, matchRoute, navigate, preloadRoute, queryParams, setQueryParam, setQueryParams };

package/dist/index.d.ts

@@ -167,6 +167,20 @@ declare function beforeNavigate(hook: BeforeNavigateHook): () => void;
  */
 declare function destroy(): void;
 
+/**
+ * Pre-load the current route's component (and layout) so that
+ * `createRouterView()` can render it synchronously on first paint.
+ *
+ * Call this **after** `createRouter()` and **before** `mount()`.
+ *
+ * @example
+ * ```ts
+ * createRouter(routes)
+ * await preloadRoute()
+ * mount(App, '#app')
+ * ```
+ */
+declare function preloadRoute(): Promise<void>;
 /**
  * Creates a DOM node that renders the current route's component.
  *
@@ -239,4 +253,4 @@ declare function setQueryParams(params: Record<string, string | null>): void;
  */
 declare function getRouteParam(name: string): _matthesketh_utopia_core.ReadonlySignal<string | null>;
 
-export { type BeforeNavigateHook, type Route, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, getQueryParam, getRouteParam, isNavigating, matchRoute, navigate, queryParams, setQueryParam, setQueryParams };
+export { type BeforeNavigateHook, type Route, type RouteMatch, type RouterState, back, beforeNavigate, buildRouteTable, compilePattern, createLink, createRouter, createRouterView, currentRoute, destroy, filePathToRoute, forward, getQueryParam, getRouteParam, isNavigating, matchRoute, navigate, preloadRoute, queryParams, setQueryParam, setQueryParams };

package/dist/index.js

@@ -373,12 +373,35 @@ function capScrollPositions() {
 
 // src/components.ts
 import { effect } from "@matthesketh/utopia-core";
+var moduleCache = /* @__PURE__ */ new Map();
+async function preloadRoute() {
+  const match = currentRoute.peek();
+  if (!match) return;
+  const promises = [match.route.component()];
+  if (match.route.layout) {
+    promises.push(match.route.layout());
+  }
+  const modules = await Promise.all(promises);
+  moduleCache.set(match.route.component, modules[0]);
+  if (match.route.layout && modules.length > 1) {
+    moduleCache.set(match.route.layout, modules[1]);
+  }
+}
 function createRouterView() {
   const container = document.createElement("div");
   container.setAttribute("data-utopia-router-view", "");
   let currentCleanup = null;
   let currentMatch = null;
   let loadId = 0;
+  const initialMatch = currentRoute.peek();
+  if (initialMatch) {
+    const syncResult = tryRenderFromCache(initialMatch);
+    if (syncResult) {
+      container.appendChild(syncResult.node);
+      currentCleanup = syncResult.cleanup;
+      currentMatch = initialMatch;
+    }
+  }
   effect(() => {
     const match = currentRoute();
     if (match === currentMatch) {
@@ -412,15 +435,58 @@ function createRouterView() {
   });
   return container;
 }
+function tryRenderFromCache(match) {
+  const cachedPage = moduleCache.get(match.route.component);
+  if (!cachedPage) return null;
+  if (match.route.layout && !moduleCache.has(match.route.layout)) return null;
+  const cachedLayout = match.route.layout ? moduleCache.get(match.route.layout) : null;
+  moduleCache.delete(match.route.component);
+  if (match.route.layout) moduleCache.delete(match.route.layout);
+  const PageComponent = cachedPage.default ?? cachedPage;
+  const LayoutComponent = cachedLayout ? cachedLayout.default ?? cachedLayout : null;
+  const pageNode = renderComponent(PageComponent, {
+    params: match.params,
+    url: match.url
+  });
+  let node;
+  if (LayoutComponent) {
+    node = renderComponent(LayoutComponent, {
+      params: match.params,
+      url: match.url,
+      children: pageNode
+    });
+  } else {
+    node = pageNode;
+  }
+  return {
+    node,
+    cleanup: () => {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+  };
+}
 async function loadRouteComponent(match) {
   try {
-    const promises = [match.route.component()];
-    if (match.route.layout) {
-      promises.push(match.route.layout());
+    const cachedPage = moduleCache.get(match.route.component);
+    const cachedLayout = match.route.layout ? moduleCache.get(match.route.layout) : void 0;
+    let pageModule;
+    let layoutModule = null;
+    if (cachedPage) {
+      pageModule = cachedPage;
+      layoutModule = cachedLayout ?? null;
+      moduleCache.delete(match.route.component);
+      if (match.route.layout) moduleCache.delete(match.route.layout);
+    } else {
+      const promises = [match.route.component()];
+      if (match.route.layout) {
+        promises.push(match.route.layout());
+      }
+      const modules = await Promise.all(promises);
+      pageModule = modules[0];
+      layoutModule = modules.length > 1 ? modules[1] : null;
     }
-    const modules = await Promise.all(promises);
-    const pageModule = modules[0];
-    const layoutModule = modules.length > 1 ? modules[1] : null;
     if (currentRoute.peek() !== match) {
       return null;
     }
@@ -617,6 +683,7 @@ export {
   isNavigating,
   matchRoute,
   navigate,
+  preloadRoute,
   queryParams,
   setQueryParam,
   setQueryParams

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-router",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "File-based routing for UtopiaJS",
   "type": "module",
   "license": "MIT",
@@ -40,8 +40,8 @@
     "dist"
   ],
   "dependencies": {
-    "@matthesketh/utopia-core": "0.5.0",
-    "@matthesketh/utopia-runtime": "0.5.0"
+    "@matthesketh/utopia-core": "0.7.0",
+    "@matthesketh/utopia-runtime": "0.7.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",