npm - @transclude/core - Versions diffs - 0.9.0 → 0.10.0 - Mend

@transclude/core 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/bin/dev.js +13 -4
package/package.json +1 -1
package/skills/transclude/SKILL.md +4 -0
package/src/app.js +8 -0
package/src/compiler/codegen.js +70 -3
package/src/document.js +31 -0

package/bin/dev.js CHANGED Viewed

@@ -18,6 +18,7 @@ import {
   renderRoute,
   responseOf,
   runAction,
+  runGuards,
   withEnvelope,
 } from '../src/document.js';
 import transclude, { clientEntryUrl, pageModuleId } from '../src/plugin.js';
@@ -222,10 +223,11 @@ const sendFragment = async (route, c, region, extra = {}) => {
 /**
  * A form submission, or anything else that is not a GET.
  *
- * The action runs first, then the request is answered the same way a GET is: the
- * whole document, or one region if the URL asked for one. That last part is what
- * regions are for. POST a form to `?fragment=list` and what comes back is
- * the list, already rendered, by the same compiled region the page uses.
+ * The layouts answer first, then the action, then the request is answered the
+ * same way a GET is: the whole document, or one region if the URL asked for one.
+ * That last part is what regions are for. POST a form to `?fragment=list` and
+ * what comes back is the list, already rendered, by the same compiled region the
+ * page uses.
  */
 const handleAction = async (route, c) => {
   const page = await vite.ssrLoadModule(pageModuleId(route.id));
@@ -238,6 +240,13 @@ const handleAction = async (route, c) => {
   }
   const ctx = contextFor(route, c);
+  // The layouts answer before the handler does, exactly as production does it.
+  // A guard that only stopped the render would let the mutation happen and then
+  // send its redirect, which is the same response a stopped request gets.
+  const refused = await runGuards(page, ctx);
+  if (refused) return withEnvelope(refused, ctx);
   const outcome = await runAction(page, ctx, c.req.method);
   if (!outcome) {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@transclude/core",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "An HTML-first server framework. A page is an .html file, the directory tree is the route table, and any fragment of a page is a URL of its own. Runs on Node, Bun, Deno and workerd, and ships no client JavaScript by default.",
   "keywords": [
     "html",

package/skills/transclude/SKILL.md CHANGED Viewed

@@ -129,6 +129,10 @@ The action runs, then the loader renders what it left behind. `POST`, `PUT`,
 `PATCH` and `DELETE` are the verbs. Return nothing to re-render, or return a
 `Response` to redirect.
+A layout's loader runs before the action, so a guard that returns a `Response`
+stops the handler as well as the render. Write the check once, in the layout,
+rather than at the top of every verb export below it.
 ## Endpoints
 A `.js` file in `routes/` returns a `Response`.

package/src/app.js CHANGED Viewed

@@ -24,6 +24,7 @@ import {
   renderRoute,
   responseOf,
   runAction,
+  runGuards,
   withEnvelope,
 } from './document.js';
 import { pickEncoding } from './negotiate.js';
@@ -330,6 +331,13 @@ export function createApp({
         }
         const acting = contextFor(route, c);
+        // The layouts answer before the handler does. A guard that only stopped
+        // the render would let the mutation happen and then send its redirect,
+        // which is the same response a request that was stopped gets.
+        const refused = await runGuards(page, acting);
+        if (refused) return withEnvelope(refused, acting);
         const outcome = await runAction(page, acting, c.req.method);
         if (!outcome) {
           return c.text(`${c.req.method} not allowed`, 405, { Allow: methodsOf(page).join(', ') });

package/src/compiler/codegen.js CHANGED Viewed

@@ -152,6 +152,10 @@ class Codegen {
     this.body = [];
     this.head = [];
     this.title = [];
+    // Depth inside the head buffer. Nothing in <head> is ever re-rendered, so a
+    // directive there is emitted plainly rather than as an updatable block: the
+    // anchors would be comments in <head> that nothing ever looks for.
+    this.inHead = 0;
     // `<template slot="x">` at the top level of a page or layout fills the named
     // slot of the level above it, so it compiles to its own buffer.
     this.slots = new Map();
@@ -274,7 +278,16 @@ class Codegen {
       if (dirs?.has('if')) {
         const { chain, next } = gatherChain(nodes, i);
-        this.emitIfChain(chain, out, scope, topLevel);
+        // Decided here rather than in emitElement, which is too late: by then the
+        // branch has already written `if (…) {` into this buffer, and the tag
+        // itself is about to be written into another one.
+        const target = this.hoistTargetOf(chain, out, topLevel);
+        const hoisted = target !== out;
+        if (hoisted) this.inHead++;
+        this.emitIfChain(chain, target, scope, topLevel);
+        if (hoisted) this.inHead--;
         i = next;
         continue;
       }
@@ -287,18 +300,72 @@ class Codegen {
         );
       }
-      this.emitNode(node, out, scope, topLevel);
+      // `each` on a hoisted tag needs the same treatment for the same reason: the
+      // loop would be written here and the tag into <head>, once, unconditionally.
+      const target = dirs?.has('each') ? this.hoistTargetOf([{ node }], out, topLevel) : out;
+      const hoisted = target !== out;
+      if (hoisted) this.inHead++;
+      this.emitNode(node, target, scope, topLevel);
+      if (hoisted) this.inHead--;
       i++;
     }
   }
+  /**
+   * Where a directive-carrying top-level tag has to be written, given that
+   * `<title>`, `<meta>`, `<link>` and `<base>` are hoisted into <head>. The
+   * buffer for the head, or `out` when nothing here is hoisted.
+   *
+   * Every branch of an if-chain has to agree. One that mixes a hoisted tag with
+   * an ordinary one has no single answer, so it is refused rather than guessed.
+   *
+   * @param {{node: object}[]} chain the branches, or a single node in a list
+   * @param {any[]} out the buffer this level is being written into
+   * @param {boolean} topLevel
+   * @returns {any[]} the buffer to use
+   */
+  hoistTargetOf(chain, out, topLevel) {
+    if (!topLevel || !this.page) return out;
+    const hoisted = chain.filter(({ node }) => HEAD_TAGS.has(node.tagName));
+    if (hoisted.length === 0) return out;
+    if (hoisted.length !== chain.length) {
+      const ordinary = chain.find(({ node }) => !HEAD_TAGS.has(node.tagName));
+      throw new CompileError(
+        `<${hoisted[0].node.tagName}> is hoisted into <head> and ` +
+          `<${ordinary.node.tagName}> is not, so this chain would be split in two. ` +
+          `Give each of them its own condition.`,
+        ordinary.node,
+      );
+    }
+    // The innermost <title> winning is decided when this compiles, by whether a
+    // level has one at all. A condition would make that a question only the
+    // request can answer, and a false one would leave the document untitled with
+    // the layout's title already ruled out.
+    const titled = chain.find(({ node }) => node.tagName === 'title');
+    if (titled) {
+      throw new CompileError(
+        `<title> cannot carry a directive. Which level's title wins is settled ` +
+          `when this compiles. Interpolate the text instead, or move the ` +
+          `condition into the loader.`,
+        titled.node,
+      );
+    }
+    return this.head;
+  }
   /**
    * True where a structural block is addressable on its own. Anchors nest and
    * the runtime counts depth, and a block inside a loop takes that loop's
    * variables as arguments, so nesting is not a reason to give up on either.
    */
   standalone() {
-    return this.blocks;
+    return this.blocks && this.inHead === 0;
   }
   /** Flat list of the loop variables in scope, outermost first. */

package/src/document.js CHANGED Viewed

@@ -456,6 +456,37 @@ export async function renderFragment(page, ctx, { region = null, ...options } =
  */
 export const ACTION_METHODS = ['POST', 'PUT', 'PATCH', 'DELETE'];
+/**
+ * The layouts' answer to a request that is about to change something, or null
+ * when every one of them let it through.
+ *
+ * A layout loader returning a `Response` is how a login redirect is written once
+ * for everything below it, and until this existed that only held for the render.
+ * The action ran first, so a signed-out POST reached the handler, mutated, and
+ * then met the guard on the way back out. The reader got the redirect, which is
+ * what a request stopped at the door also gets, so nothing anywhere said the
+ * handler had run.
+ *
+ * The data is thrown away. `renderRoute` loads the chain again afterwards, which
+ * is a second run of every layout loader on an action request, and the price of
+ * the render seeing what the action just did rather than what was true before it.
+ *
+ * @param {object} page a compiled page module
+ * @param {object} ctx the request context
+ * @returns {Promise<Response|null>} the first layout that answered for itself
+ */
+export async function runGuards(page, ctx) {
+  let inherited = {};
+  for (const layout of page.layouts) {
+    const data = await layout.load({ ...ctx, layout: inherited });
+    if (data instanceof Response) return data;
+    inherited = { ...inherited, ...data };
+  }
+  return null;
+}
 /**
  * Runs the page's handler for a request that is not a GET.
  *