@uniflowed/vite 0.0.0-alpha.31 → 0.0.0-alpha.33

package/index.js

@@ -291,6 +291,12 @@ function flowPlugin({
   const forgetActions = () => {
     actionMemo = null;
   };
+  const invalidateActionModules = (moduleGraph, modules) => {
+    for (const id of modules.keys()) {
+      const module = moduleGraph.getModuleById(id);
+      if (module) moduleGraph.invalidateModule(module);
+    }
+  };
   const actionTables = () => {
     const file = process.env[RSC_MANIFEST_ENV];
     const key = rscManifestKey(file);
@@ -581,11 +587,15 @@ function flowPlugin({
         devServer.watcher.add(manifestPath);
         const onManifest = (file) => {
           if (path.resolve(file) !== manifestPath) return;
+          const previousActions = actionTables().modules;
           // The action tables are read from the same file and are memoised on
           // its size and modification time, which is a pair two writes inside
           // one millisecond can share. This is the answer that does not
           // depend on a clock.
           forgetActions();
+          const nextActions = actionTables().modules;
+          invalidateActionModules(devServer.moduleGraph, previousActions);
+          invalidateActionModules(devServer.moduleGraph, nextActions);
           const routes = devServer.moduleGraph.getModuleById(resolved(VIRTUAL.routes));
           if (routes) devServer.moduleGraph.invalidateModule(routes);
           const actions = devServer.moduleGraph.getModuleById(resolved(VIRTUAL.actions));

package/internal/routes.js

@@ -56,6 +56,7 @@ export const UNSUPPORTED_SEGMENTS = Object.freeze([
   "(..)photo",
   "(...)photo",
   "(..)(..)photo",
+  "(..)(..)(..)photo",
 ]);
 
 /**
@@ -77,6 +78,16 @@ export const LAYOUT_PROP_NAMES = Object.freeze(["children", "params"]);
 /** Template spellings that look conventional elsewhere but uf will not open. */
 const UNSUPPORTED_TEMPLATE_FILES = Object.freeze(["template.js", "_uf.template.js"]);
 
+/** Boundary spellings a slot might look for, but uf does not open. */
+const UNSUPPORTED_SLOT_BOUNDARY_FILES = Object.freeze({
+  "error.js": "error",
+  "loading.js": "loading",
+  "not-found.js": "not-found",
+  "_uf.error.js": "error",
+  "_uf.loading.js": "loading",
+  "_uf.not-found.js": "not-found",
+});
+
 /** Extensions a page or layout may use; `.mdx` is a page written as content. */
 const PAGE_EXTENSIONS = [".js", ".jsx", ".mdx"];
 const MODULE_EXTENSIONS = [".js", ".jsx"];
@@ -177,18 +188,21 @@ const MAX_DEPTH = 32;
  * @property {number} above how many of the route's layouts are outside it
  * @property {?string} defaultPage absolute path of `$default.*`, or `null`
  * @property {boolean} defaultMdx whether that default is MDX content
+ * @property {?{above: number, module: string}} defaultErrorBoundary the
+ *   `$error.js` boundary that catches the default page in the browser
  * @property {ReadonlyArray<SlotRoute>} routes what the slot may render, by URL
  */
 
 /**
  * One page inside a slot.
  *
- * A `Route` without the parts a slot does not have: no `loading`, no
- * `templates`, and no boundary of its own. Those are the segment's, and they
- * already wrap the layout the slot renders into. Per-slot boundaries are the
- * part of parallel routes uf has not built — see
+ * A `Route` without the request-level parts a slot does not have: no handler
+ * and no not-found boundary of its own. Loading boundaries, templates and
+ * browser render error boundaries are the pieces that compose like layouts, so
+ * they are carried below. Per-slot not-found boundaries are the part of
+ * parallel routes uf has not built — see
  * https://github.com/ubugeeei-prod/uf/issues/267 — and {@link scanRoutes}
- * refuses the files rather than leaving them unopened.
+ * refuses those files rather than leaving them unopened.
  *
  * `layouts` are the layouts *inside* the slot, root first; the ones above it
  * are already rendering, since the slot renders into one of them.
@@ -198,6 +212,12 @@ const MAX_DEPTH = 32;
  * @property {ReadonlyArray<{name: string, catchAll: boolean}>} params
  * @property {string} page absolute path of the page module
  * @property {ReadonlyArray<string>} layouts absolute paths, slot root first
+ * @property {ReadonlyArray<{above: number, module: string}>} loading the
+ *   `$loading.js` fallbacks inside the slot, root first
+ * @property {ReadonlyArray<{above: number, module: string}>} templates the
+ *   `$template.js` wrappers inside the slot, root first
+ * @property {?{above: number, module: string}} errorBoundary the `$error.js`
+ *   boundary inside the slot, if one is in scope
  * @property {ReadonlyArray<Slot>} slots slots declared inside this slot
  * @property {boolean} mdx whether the page is MDX content
  */
@@ -298,9 +318,9 @@ const MAX_DEPTH = 32;
  * A `@slot` directory is a parallel route and is scanned; see {@link Slot}. It
  * throws for the three ways one can be written without being renderable: a
  * slot on a segment with no layout of its own, a `$default.js` that is not
- * directly inside a slot, and a boundary or a handler inside a slot. Each is a
- * file the router would otherwise never open, which is the failure #267 is
- * about.
+ * directly inside a slot, a not-found boundary or handler inside a slot, and
+ * boundary-like files with names uf does not open. Each is a file the router
+ * would otherwise never open, which is the failure #267 is about.
  *
  * @param {string} appRoot absolute path of the router root (`app/`)
  * @param {{target?: "web" | "native" | "ios" | "android"}} [options]
@@ -581,13 +601,27 @@ function scanSlot(parent, directoryName, name, segments, ownLayout, above, targe
 
   const routes = [];
   const defaultPage = findModule(directory, RESERVED.default, PAGE_EXTENSIONS, target);
-
-  const walkSlot = (current, currentSegments, layouts, atSlotRoot, currentDepth) => {
+  const defaultError = findModule(directory, RESERVED.error, MODULE_EXTENSIONS, target);
+
+  const walkSlot = (
+    current,
+    currentSegments,
+    layouts,
+    loading,
+    templates,
+    errorBoundary,
+    atSlotRoot,
+    currentDepth,
+  ) => {
     if (currentDepth > MAX_DEPTH) return;
+    const entries = readdirSync(current, { withFileTypes: true }).sort((a, b) =>
+      a.name < b.name ? -1 : a.name > b.name ? 1 : 0,
+    );
+
     // What a slot does not have, said where somebody writing the file will
-    // read it rather than by never opening it. This is also the list of what
-    // is left of parallel routes; see the issue.
-    for (const role of [RESERVED.notFound, RESERVED.error, RESERVED.loading, RESERVED.template]) {
+    // read it rather than by never opening it. Loading and error boundaries
+    // compose like layouts, so they are carried below instead of refused here.
+    for (const role of [RESERVED.notFound]) {
       const found =
         findModule(current, role, MODULE_EXTENSIONS, target) ??
         findModule(current, role, PAGE_EXTENSIONS, target);
@@ -595,12 +629,24 @@ function scanSlot(parent, directoryName, name, segments, ownLayout, above, targe
         throw new Error(
           `${found}: a \`@slot\` renders a page and the layouts inside the slot, and has no ` +
             `\`${role.slice("$".length)}\` of its own — uf's parallel routes do not carry ` +
-            "per-slot boundaries yet, so this file would never be opened. Put it outside " +
+            "per-slot not-found boundaries yet, so this file would never be opened. Put it outside " +
             `\`${directoryName}\`, where it covers the whole segment. ` +
             "https://github.com/ubugeeei-prod/uf/issues/267",
         );
       }
     }
+    for (const entry of entries) {
+      if (!entry.isFile()) continue;
+      const role = unsupportedSlotBoundaryRole(entry.name);
+      if (role == null) continue;
+      const file = path.join(current, entry.name);
+      throw new Error(
+        `${file}: \`${entry.name}\` looks like a \`${role}\` boundary for a \`@slot\`, but it ` +
+          "is not a uf route file there. Use `$loading.js` for slot loading and `$error.js` " +
+          "for slot errors; per-slot not-found boundaries are still not implemented. " +
+          "https://github.com/ubugeeei-prod/uf/issues/267",
+      );
+    }
     for (const role of [RESERVED.route, RESERVED.middleware]) {
       const found = findModule(current, role, MODULE_EXTENSIONS, target);
       if (found != null) {
@@ -626,10 +672,18 @@ function scanSlot(parent, directoryName, name, segments, ownLayout, above, targe
 
     const layoutHere = findModule(current, RESERVED.layout, MODULE_EXTENSIONS, target);
     const nextLayouts = layoutHere ? [...layouts, layoutHere] : layouts;
-
-    const entries = readdirSync(current, { withFileTypes: true }).sort((a, b) =>
-      a.name < b.name ? -1 : a.name > b.name ? 1 : 0,
-    );
+    const loadingHere = findModule(current, RESERVED.loading, MODULE_EXTENSIONS, target);
+    const nextLoading = loadingHere
+      ? [...loading, { above: nextLayouts.length, module: loadingHere }]
+      : loading;
+    const templateHere = findModule(current, RESERVED.template, MODULE_EXTENSIONS, target);
+    const nextTemplates = templateHere
+      ? [...templates, { above: nextLayouts.length, module: templateHere }]
+      : templates;
+    const errorHere = findModule(current, RESERVED.error, MODULE_EXTENSIONS, target);
+    const nextErrorBoundary = errorHere
+      ? { above: nextLayouts.length, module: errorHere }
+      : errorBoundary;
 
     refuseUnsupportedTemplateFiles(current, entries);
 
@@ -662,6 +716,9 @@ function scanSlot(parent, directoryName, name, segments, ownLayout, above, targe
         params,
         page,
         layouts: nextLayouts,
+        loading: nextLoading,
+        templates: nextTemplates,
+        errorBoundary: nextErrorBoundary,
         slots: nestedSlots,
         mdx: page.endsWith(".mdx"),
       });
@@ -680,13 +737,25 @@ function scanSlot(parent, directoryName, name, segments, ownLayout, above, targe
         path.join(current, entry.name),
         [...currentSegments, entry.name],
         nextLayouts,
+        nextLoading,
+        nextTemplates,
+        nextErrorBoundary,
         false,
         currentDepth + 1,
       );
     }
   };
 
-  walkSlot(directory, segments, [], true, depth + 1);
+  walkSlot(
+    directory,
+    segments,
+    [],
+    [],
+    [],
+    defaultError == null ? null : { above: 0, module: defaultError },
+    true,
+    depth + 1,
+  );
 
   const byPath = (a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0);
   routes.sort(byPath);
@@ -695,6 +764,7 @@ function scanSlot(parent, directoryName, name, segments, ownLayout, above, targe
     above,
     defaultPage,
     defaultMdx: defaultPage != null && defaultPage.endsWith(".mdx"),
+    defaultErrorBoundary: defaultError == null ? null : { above: 0, module: defaultError },
     routes,
   };
 }
@@ -740,6 +810,10 @@ function unsupportedTemplateFileReason(fileName) {
   );
 }
 
+function unsupportedSlotBoundaryRole(fileName) {
+  return UNSUPPORTED_SLOT_BOUNDARY_FILES[fileName] ?? null;
+}
+
 /**
  * What one directory name means to the route path.
  *
@@ -842,6 +916,9 @@ export function routeFromSegments(segments) {
       out.push(`:${classified.name}`);
       continue;
     }
+    if (classified.kind === "interception") {
+      throw new Error(unsupportedSegmentReason(segment));
+    }
     out.push(segment);
   }
   const routePath = out.length === 0 ? "/" : `/${out.join("/")}`;
@@ -1020,6 +1097,10 @@ export function routesModuleSource(table, options = {}) {
   const slotIds = new Map();
   const slotDefinitions = [];
   const slotFiles = new Set();
+  const slotErrorBoundary = (boundary) =>
+    boundary == null
+      ? "null"
+      : `{ above: ${boundary.above}, module: () => import(${JSON.stringify(boundary.module)}) }`;
   const slotId = (slot) => {
     let id = slotIds.get(slot);
     if (id !== undefined) {
@@ -1028,7 +1109,9 @@ export function routesModuleSource(table, options = {}) {
     const routes = slot.routes.map((route) => {
       slotFiles.add(route.page);
       for (const file of route.layouts) slotFiles.add(file);
+      for (const entry of route.loading ?? []) slotFiles.add(entry.module);
       const nested = route.slots.map(slotId);
+      if (route.errorBoundary != null) slotFiles.add(route.errorBoundary.module);
       return `    {
       path: ${JSON.stringify(route.path)},
       params: ${JSON.stringify(route.params)},
@@ -1036,6 +1119,13 @@ export function routesModuleSource(table, options = {}) {
       file: ${JSON.stringify(displayFile(route.page))},
       page: () => import(${JSON.stringify(route.page)}),
       layouts: [${route.layouts.map(layoutId).join(", ")}],
+      loading: [${(route.loading ?? [])
+        .map((boundary) => `{ above: ${boundary.above}, module: ${loadingId(boundary.module)} }`)
+        .join(", ")}],
+      templates: [${(route.templates ?? [])
+        .map((entry) => `{ above: ${entry.above}, module: ${templateId(entry.module)} }`)
+        .join(", ")}],
+      errorBoundary: ${slotErrorBoundary(route.errorBoundary ?? null)},
       slots: [${nested.join(", ")}],
     }`;
     });
@@ -1045,6 +1135,9 @@ export function routesModuleSource(table, options = {}) {
     if (slot.defaultPage != null) {
       slotFiles.add(slot.defaultPage);
     }
+    if (slot.defaultErrorBoundary != null) {
+      slotFiles.add(slot.defaultErrorBoundary.module);
+    }
     const fallback =
       slot.defaultPage == null
         ? "    defaultPage: null,"
@@ -1055,6 +1148,7 @@ export function routesModuleSource(table, options = {}) {
     above: ${slot.above},
 ${fallback}
     defaultMdx: ${slot.defaultMdx},
+    defaultErrorBoundary: ${slotErrorBoundary(slot.defaultErrorBoundary ?? null)},
     routes: [
 ${routes.join(",\n")}
     ],
@@ -1221,8 +1315,16 @@ function slotModuleFiles(slots) {
   const files = [];
   for (const slot of slots) {
     if (slot.defaultPage != null) files.push(slot.defaultPage);
+    if (slot.defaultErrorBoundary != null) files.push(slot.defaultErrorBoundary.module);
     for (const route of slot.routes) {
-      files.push(route.page, ...route.layouts, ...slotModuleFiles(route.slots));
+      files.push(
+        route.page,
+        ...route.layouts,
+        ...(route.loading ?? []).map((it) => it.module),
+        ...(route.templates ?? []).map((it) => it.module),
+        ...(route.errorBoundary == null ? [] : [route.errorBoundary.module]),
+        ...slotModuleFiles(route.slots),
+      );
     }
   }
   return files;

package/internal/rsc.js

@@ -145,6 +145,7 @@ export function clientRouteFilter(manifest, root, boundaries = {}) {
 
   const notFound = boundaries.notFound ?? [];
   const errors = boundaries.errors ?? [];
+  const needsSlot = slotPredicate(needed);
 
   return (route) => {
     if (needed(route.page)) return true;
@@ -156,7 +157,7 @@ export function clientRouteFilter(manifest, root, boundaries = {}) {
     // interactive part is in a slot would be dropped from the client bundle
     // and served as a document — rendered correctly and never hydrated, which
     // is the quietest way a feature can be half-implemented.
-    if (slotNeeds(route.slots ?? [], needed)) return true;
+    if ((route.slots ?? []).some(needsSlot)) return true;
     // A boundary with no module of its own is the record the scan synthesises
     // at the router root, and what renders there is the framework's own page —
     // already in `@uniflowed/router`, reaching nothing this project wrote. It
@@ -186,20 +187,41 @@ export function clientRouteFilter(manifest, root, boundaries = {}) {
  *
  * @param {ReadonlyArray<{
  *   defaultPage: ?string,
- *   routes: ReadonlyArray<{page: string, layouts: ReadonlyArray<string>, slots: ReadonlyArray<*>}>,
- * }>} slots
+ *   routes: ReadonlyArray<{
+ *     page: string,
+ *     layouts: ReadonlyArray<string>,
+ *     loading?: ReadonlyArray<{module: string}>,
+ *     templates?: ReadonlyArray<{module: string}>,
+ *     slots: ReadonlyArray<*>,
+ *   }>,
  * @param {(file: ?string) => boolean} needed
+ * @returns {(slot: *) => boolean}
  */
-function slotNeeds(slots, needed) {
-  for (const slot of slots) {
-    if (slot.defaultPage != null && needed(slot.defaultPage)) return true;
+function slotPredicate(needed) {
+  const cache = new WeakMap();
+  const needsSlot = (slot) => {
+    const cached = cache.get(slot);
+    if (cached !== undefined) return cached;
+    let answer = false;
+    if (slot.defaultPage != null && needed(slot.defaultPage)) {
+      answer = true;
+    }
     for (const route of slot.routes) {
-      if (needed(route.page)) return true;
-      if (route.layouts.some(needed)) return true;
-      if (slotNeeds(route.slots, needed)) return true;
+      if (answer) break;
+      if (
+        needed(route.page) ||
+        route.layouts.some(needed) ||
+        (route.loading ?? []).some((entry) => needed(entry.module)) ||
+        (route.templates ?? []).some((entry) => needed(entry.module)) ||
+        route.slots.some(needsSlot)
+      ) {
+        answer = true;
+      }
     }
-  }
-  return false;
+    cache.set(slot, answer);
+    return answer;
+  };
+  return needsSlot;
 }
 
 // ---------------------------------------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/vite",
-  "version": "0.0.0-alpha.31",
+  "version": "0.0.0-alpha.33",
   "description": "Vite, driven by uf.config.js: every Flow module through `uf transform`, MDX, the file-system router and static rendering as Vite plugins.",
   "type": "module",
   "license": "MIT",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@mdx-js/rollup": "^3.1.1",
     "@shikijs/rehype": "^3.23.0",
-    "@uniflowed/host": "0.0.0-alpha.31",
-    "@uniflowed/router": "0.0.0-alpha.31",
-    "@uniflowed/server": "0.0.0-alpha.31",
-    "@uniflowed/validator": "0.0.0-alpha.31",
+    "@uniflowed/host": "0.0.0-alpha.33",
+    "@uniflowed/router": "0.0.0-alpha.33",
+    "@uniflowed/server": "0.0.0-alpha.33",
+    "@uniflowed/validator": "0.0.0-alpha.33",
     "rehype-slug": "^6.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",