@shapeshift-labs/frontier-lang-parser 0.3.24 → 0.3.25

package/README.md

@@ -220,6 +220,46 @@ npm install @shapeshift-labs/frontier-lang-parser
 
 The parser projects text into `@shapeshift-labs/frontier-lang-kernel` documents. The syntax is intentionally small and experimental.
 
+## Authored view render graph syntax
+
+`.frontier` view blocks can describe UI render graphs directly. Nested `render`
+blocks are flattened into `view.renders`, and each parent stores stable child
+render IDs in `children`. This keeps authored UI structural and target-neutral:
+HTML, JSX, SwiftUI, or another target can lower the same semantic graph without
+the parser claiming browser or runtime equivalence.
+
+```frontier
+view TodoList @id("view_todo_list") {
+  reads TodoDb.todos
+  dispatches action_add
+  prop disabled @id("view_prop_disabled"): Boolean
+  event save @id("view_event_save") action action_add input TodoInput
+
+  render Article @id("render_todo_root") {
+    key todo-list-root
+
+    render Button @id("render_save_button") {
+      identity save
+      text "Save"
+      prop disabled disabled
+      on press save
+    }
+
+    render SaveIcon kind component @id("render_save_icon") {
+      component Icon
+      key save-icon
+      prop name "check"
+    }
+  }
+}
+```
+
+The root render becomes a graph node whose `children` reference
+`render_save_button` and `render_save_icon` in source order. Child props, text,
+and events stay attached to the child render node instead of leaking onto the
+parent. `kind component` records `component` instead of a literal HTML tag, so
+target adapters can decide how to project it.
+
 ## Authored target projection syntax
 
 `.frontier` target blocks can carry projection contracts next to their emit settings. These rows describe what a target lowering claims to represent, what it still needs proof for, and which losses or missing evidence must stay visible to merge and translation tooling.

package/dist/view.js

@@ -34,20 +34,32 @@ function readViewEvents(body) {
 }
 
 function readRenderNodes(body) {
-  return readNestedBlocks('render', body).map((block) => {
-    const tagName = nameFrom(block.header);
-    const props = readRenderProps(block.body);
-    const events = readRenderEvents(block.body);
-    return {
-      id: idFrom(block.header, `render_${tagName}`),
-      kind: readInlineWord('kind', block.header) ?? 'element',
-      tagName,
-      identityKey: readLine('identity', block.body) ?? readLine('key', block.body),
-      text: readQuotedLine('text', block.body),
-      props: props.length ? props : undefined,
-      events: events.length ? events : undefined
-    };
-  });
+  const renders = [];
+  for (const block of readNestedBlocks('render', body)) pushRenderNode(block, renders);
+  return renders;
+}
+
+function pushRenderNode(block, renders) {
+  const headerName = nameFrom(block.header);
+  const ownBody = stripNestedBlocks('render', block.body);
+  const kind = readInlineWord('kind', block.header) ?? readLine('kind', ownBody) ?? 'element';
+  const props = readRenderProps(ownBody);
+  const events = readRenderEvents(ownBody);
+  const childBlocks = readNestedBlocks('render', block.body);
+  const explicitChildren = readList('children', ownBody) ?? readList('child', ownBody);
+  const nestedChildren = childBlocks.map((child) => idFrom(child.header, `render_${nameFrom(child.header)}`));
+  renders.push(compactRecord({
+    id: idFrom(block.header, `render_${headerName}`),
+    kind,
+    tagName: readLine('tag', ownBody) ?? readLine('tagName', ownBody) ?? (kind === 'component' || kind === 'text' ? undefined : headerName),
+    component: readLine('component', ownBody) ?? (kind === 'component' ? headerName : undefined),
+    identityKey: readLine('identity', ownBody) ?? readLine('key', ownBody),
+    text: readQuotedLine('text', ownBody),
+    props: props.length ? props : undefined,
+    events: events.length ? events : undefined,
+    children: uniqueStrings([...(explicitChildren ?? []), ...nestedChildren])
+  }));
+  for (const child of childBlocks) pushRenderNode(child, renders);
 }
 
 function readRenderProps(body) {
@@ -92,6 +104,8 @@ function readLine(label, body) { return new RegExp('^\\s*' + label + '\\s+([^\\n
 function readQuotedLine(label, body) { return new RegExp(`^\\s*${label}\\s+["']([^"']+)["']`, 'm').exec(body)?.[1]; }
 function readInlineWord(label, text = '') { return new RegExp('(?:^|\\s)' + label + '\\s+([^\\s,]+)').exec(text)?.[1]?.trim(); }
 function readRenderValue(value) { const quoted = /^["']([^"']+)["']$/.exec(value.trim()); return quoted ? { value: quoted[1] } : { expression: value.trim() }; }
+function compactRecord(record) { return Object.fromEntries(Object.entries(record).filter(([, value]) => value !== undefined)); }
+function uniqueStrings(values) { const result = []; for (const value of values) if (value && !result.includes(value)) result.push(value); return result.length ? result : undefined; }
 function parseOptionalTypeExpression(value) { return value ? parseTypeExpression(value.trim()) : undefined; }
 function parseTypeExpression(value) {
   const text = value.trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shapeshift-labs/frontier-lang-parser",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "description": "Parser for the first Frontier Lang .frontier syntax slice.",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "build": "node scripts/build.mjs",
-    "test": "npm run build && node test/smoke.mjs && node test/resource-graph-smoke.mjs && node test/interlingua-smoke.mjs && node test/dialect-registry-smoke.mjs",
+    "test": "npm run build && node test/smoke.mjs && node test/view-render-graph-smoke.mjs && node test/resource-graph-smoke.mjs && node test/interlingua-smoke.mjs && node test/dialect-registry-smoke.mjs",
     "typecheck": "node ./node_modules/typescript/bin/tsc --noEmit -p test/tsconfig.json",
     "fuzz": "npm run build && node fuzz/smoke.mjs",
     "bench": "npm run build && node bench/smoke.mjs",