WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(wrn): support native structured prop expressions

Browse Source
This commit is contained in:
Clintchiz
2026-07-29 16:46:18 +05:30
parent 6afe32f63f
commit 8fc6f15402
68 changed files with 210 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/compiler/README.md
+2 -2
View File
@@ -164,8 +164,8 @@ A file opens with `page <Name>` or `component <Name>` followed by a `{ ... }` bo
- `types { <TypeScript declarations> }` — reusable interfaces and aliases for the current file.
- `props { name: Type = <default> ... }` — typed component props. Omit `= <default>` to make a prop required. Legacy inferred props remain supported.
- `@event name = function` inside `props` — declares a public component event. Emit it from component behavior with `name(detail)` or `$emit("name", detail)`, and consume it with `<Component @name="handler(event)" />`.
- `state <ident>: Type = <expr>` — typed reactive state seeded from a raw JS expression. The annotation is optional for backward compatibility.
- `view { <html> }` — plain HTML with `{expr}` interpolation in text and attributes, hyphenated attributes, boolean attributes, `@event="..."` client bindings, and `<!-- comments -->`. Attribute expressions that reference `state` keep an SSR value and update reactively in the browser.
- `state <ident>: Type = <expr>` — typed reactive state seeded from a raw JS expression, including native array and object literals. The annotation is optional for backward compatibility.
- `view { <html> }` — plain HTML with `{expr}` interpolation in text and attributes, JSX-style component props such as `items={items}`, `items={[...]}`, and `options={{...}}`, hyphenated attributes, boolean attributes, `@event="..."` client bindings, and `<!-- comments -->`. Structured component props are serialized safely for SSR; expressions that reference `state` retain their initial value and update reactively in the browser.
- `seo { key = "value" ... }` — metadata merged into the generated `meta`.
- `style { <raw css> }` — inlined page/component stylesheet (repeatable).
- `functions { <TypeScript> }` — helpers with typed parameters and return values. Types remain in server output and are safely erased from browser behavior code.
packages/compiler/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/compiler",
"version": "0.5.0",
"version": "0.5.1",
"type": "module",
"main": "src/index.ts",
"exports": {
packages/compiler/test/compiler.test.ts
+22
View File
@@ -464,6 +464,28 @@ component ParentCard {
expect(output).toContain("function __wireProp");
});
test("native array and object props serialize through component mounts", async () => {
const mod = await compileAndImport(`
component NativeProps {
state items = [{"label":"Home","href":"/"}]
view {
<Navbar items={items} options={{"dense":true}} />
<Sidebar items={[{"label":"Cases","href":"/cases"}]} />
}
}
`);
const render = mod.render as (props?: Record<string, unknown>) => string;
const html = render();
expect(html).toContain(
'items="[{&quot;label&quot;:&quot;Home&quot;,&quot;href&quot;:&quot;/&quot;}]"',
);
expect(html).toContain('options="{&quot;dense&quot;:true}"');
expect(html).toContain(
'items="[{&quot;label&quot;:&quot;Cases&quot;,&quot;href&quot;:&quot;/cases&quot;}]"',
);
});
test("parses a layout block", () => {
const ast = parse(`
layout AppLayout {