release: WRNexusJS 0.2.28

packages/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.27",
+  "version": "0.2.28",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/compiler/src/codegen.ts

@@ -599,7 +599,9 @@ async function __wrnexusRenderSsrBindings(html: string, ctx: any): Promise<strin
 }
 
 export function generate(ast: PageAst): string {
-  if (ast.kind === "component") return generateComponent(ast);
+  if (ast.kind === "component" || ast.kind === "layout") {
+    return generateComponent(ast);
+  }
 
   const out: string[] = [];
   const ssrBindings: SsrBinding[] = [];
@@ -903,6 +905,8 @@ function compileText(raw: string, ctx: CompCtx): string {
         escLit(`<span data-text="${attrEscape(expr)}">`) +
         `\${__wireHtml(${ctx.resolveExpr(expr)})}` +
         escLit(`</span>`);
+    } else if (expr === "content") {
+      out += `\${__wireRaw(${ctx.resolveExpr(expr)})}`;
     } else {
       out += `\${__wireHtml(${ctx.resolveExpr(expr)})}`;
     }
@@ -1024,9 +1028,22 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string {
 function generateComponent(ast: PageAst): string {
   const out: string[] = [];
 
+  const effectiveProps =
+    ast.kind === "layout" && !ast.props.some((prop) => prop.name === "content")
+      ? [
+          {
+            name: "content",
+            default: '""',
+          },
+          ...ast.props,
+        ]
+      : ast.props;
+
   const stateNames = new Set(ast.states.map((s) => s.name));
   const nameRefs = new Map<string, string>();
-  for (const p of ast.props) nameRefs.set(p.name, safeRef(p.name));
+  for (const p of effectiveProps) {
+    nameRefs.set(p.name, safeRef(p.name));
+  }
   for (const s of ast.states) nameRefs.set(s.name, safeRef(s.name));
   const resolveExpr = (expr: string): string => {
     let result = expr;
@@ -1050,10 +1067,13 @@ function generateComponent(ast: PageAst): string {
   // Prop-driven text/attributes are baked server-side, so static components ship
   // no JavaScript at all.
   const needsScope = ast.states.length > 0 || viewHasEvents(ast.view);
-  const scopeKeys = [...ast.props.map((p) => p.name), ...ast.states.map((s) => s.name)];
+  const scopeKeys = [
+    ...effectiveProps.map((prop) => prop.name),
+    ...ast.states.map((state) => state.name),
+  ];
 
   const decls: string[] = [];
-  for (const prop of ast.props) {
+  for (const prop of effectiveProps) {
     decls.push(
       `  const ${nameRefs.get(prop.name)} = __coerce(__p[${JSON.stringify(prop.name)}], (${resolveExpr(prop.default)}));`,
     );
@@ -1073,7 +1093,11 @@ function generateComponent(ast: PageAst): string {
         ? `  const __scope = "";\n`
         : "";
 
-  out.push(`export const __wrnexusComponent = ${JSON.stringify(ast.name)};`);
+  if (ast.kind === "layout") {
+    out.push(`export const __wrnexusLayout = ${JSON.stringify(ast.name)};`);
+  } else {
+    out.push(`export const __wrnexusComponent = ${JSON.stringify(ast.name)};`);
+  }
   out.push(`function __coerce(v: any, def: any): any {
   if (v === undefined || v === null) return def;
   if (typeof def === "number") return Number(v);
@@ -1116,3 +1140,13 @@ function __wireAttr(v: any): string {
 
   return out.join("\n\n") + "\n";
 }
+
+function __wireHtml(v: any): string {
+  return String(v == null ? "" : v).replace(/[&<>]/g, (c) =>
+    c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;",
+  );
+}
+
+function __wireRaw(v: any): string {
+  return String(v == null ? "" : v);
+}

packages/compiler/src/parser.ts

@@ -124,8 +124,11 @@ export interface PropDecl {
 
 export interface PageAst {
   type: "page";
-  /** `page` (a route) or `component` (a reusable, prop-driven fragment). */
-  kind: "page" | "component";
+  /**
+   * `page` is a route, `component` is a reusable fragment,
+   * and `layout` is a reusable page wrapper.
+   */
+  kind: "page" | "component" | "layout";
   name: string;
   /** Name of the page layout (`app/layouts/<layout>.wrn`), if the page sets one. */
   layout?: string;
@@ -183,14 +186,18 @@ export function parse(source: string): PageAst {
   };
 
   try {
-    // A file is either a `page` (a route) or a `component` (a reusable fragment).
+    // A file may contain a page, reusable component, or reusable layout.
     const opener = lx.next();
-    if (opener.type !== "ident" || (opener.value !== "page" && opener.value !== "component")) {
+
+    if (opener.type !== "ident" || !["page", "component", "layout"].includes(opener.value)) {
       throw new ParseError(
-        `Expected 'page' or 'component' but got '${opener.value || opener.type}' at offset ${opener.pos}`,
+        `Expected 'page', 'component', or 'layout' but got '${
+          opener.value || opener.type
+        }' at offset ${opener.pos}`,
       );
     }
-    const kind: "page" | "component" = opener.value === "component" ? "component" : "page";
+
+    const kind = opener.value as "page" | "component" | "layout";
     const name = expect("ident").value;
     expect("lbrace");
 

packages/compiler/test/compiler.test.ts

@@ -212,3 +212,34 @@ component ParentCard {
 
   expect(output).toContain('title="${__wireAttr(title)}"');
 });
+
+test("parses a layout block", () => {
+  const ast = parse(`
+layout AppLayout {
+  view {
+    <main>{content}</main>
+  }
+}
+`);
+
+  expect(ast.kind).toBe("layout");
+  expect(ast.name).toBe("AppLayout");
+});
+
+test("layouts compile as reusable render modules", () => {
+  const output = generate(
+    parse(`
+layout AppLayout {
+  view {
+    <main>{content}</main>
+  }
+}
+`),
+  );
+
+  expect(output).toContain('export const __wrnexusLayout = "AppLayout"');
+
+  expect(output).toContain("${__wireRaw(content)}");
+
+  expect(output).toContain("export function render");
+});