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

fix: conditional classes, dynamic params, HMR and formatter

Browse Source
This commit is contained in:
Clintchiz
2026-07-14 11:56:43 +05:30
parent 420706ca3b
commit 71480bb229
6 changed files with 240 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/compiler/src/codegen.ts
+125 -11
View File
@@ -521,8 +521,8 @@ export function generate(ast: PageAst): string {
const needsClientRuntime = ast.states.length > 0 || hasClientBehavior(ast.view);
if (needsClientRuntime) {
const scope = ast.states.map((s) => `${s.name}: ${s.expr}`).join(", ");
html = `<div data-scope="${attrEscape(scope)}">${html}</div>`;
const scopePlaceholder = "__WRNEXUS_DYNAMIC_SCOPE__";
html = `<div data-scope="${scopePlaceholder}">${html}</div>`;
}
if (styles.length > 0) {
@@ -536,6 +536,12 @@ export function generate(ast: PageAst): string {
// Escape the static HTML for the template literal, then swap loop sentinels for
// their real `${…}` code (which must NOT be escaped).
let body = templateEscape(html);
const dynamicStateScope = ast.states
.map(
(state) =>
`${JSON.stringify(state.name)}: (() => { try { return (${state.expr}); } catch { return undefined; } })()`,
)
.join(", ");
loops.forEach((code, idx) => {
body = body.replace(`\x00WRNEACH${idx}\x00`, () => code);
});
@@ -554,16 +560,68 @@ export function generate(ast: PageAst): string {
}
}
const needsSsrRuntime = ssrBindings.length > 0 || loops.length > 0;
const needsSsrRuntime =
ssrBindings.length > 0 ||
loops.length > 0 ||
ast.states.some((state) => /\bctx\b/.test(state.expr));
if (needsSsrRuntime) {
out.push(ssrRuntimeSource());
out.push(`const __wrnexusSsrBindings = ${JSON.stringify(ssrBindings, null, 2)};`);
const decls = loopConsts.length > 0 ? loopConsts.join("\n") + "\n" : "";
out.push(
`export default async function ${ast.name}(ctx: any) {\n${decls} const html = \`${body}\`;\n return await __wrnexusRenderSsrBindings(html, ctx);\n}`,
`export default async function ${ast.name}(ctx: any) {
${decls}
const __state = { ${dynamicStateScope} };
const __scopeValue = Object.entries(__state)
.map(([key, value]) => {
const encoded =
typeof value === "number" || typeof value === "boolean"
? String(value)
: JSON.stringify(value == null ? "" : String(value));
return key + ": " + encoded;
})
.join(", ")
.replace(/&/g, "&amp;")
.replace(/"/g, "&quot;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
const html = \`${body}\`.replace(
"__WRNEXUS_DYNAMIC_SCOPE__",
__scopeValue,
);
return await __wrnexusRenderSsrBindings(html, ctx);
}`,
);
} else {
out.push(`export default function ${ast.name}() {\n return \`${body}\`;\n}`);
out.push(
`export default function ${ast.name}(ctx: any) {
const __state = { ${dynamicStateScope} };
const __scopeValue = Object.entries(__state)
.map(([key, value]) => {
const encoded =
typeof value === "number" || typeof value === "boolean"
? String(value)
: JSON.stringify(value == null ? "" : String(value));
return key + ": " + encoded;
})
.join(", ")
.replace(/&/g, "&amp;")
.replace(/"/g, "&quot;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
return \`${body}\`.replace(
"__WRNEXUS_DYNAMIC_SCOPE__",
__scopeValue,
);
}`,
);
}
// --- API blocks -> method handlers ---
@@ -773,25 +831,81 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string {
}
let bindIndex = 0;
const staticClasses: string[] = [];
const conditionalClasses: Array<{
className: string;
expression: string;
}> = [];
for (const attr of node.attrs) {
if (!attr.event && attr.name === "class") {
staticClasses.push(attr.value);
}
if (!attr.event && attr.name.startsWith("class:")) {
conditionalClasses.push({
className: attr.name.slice("class:".length),
expression: attr.value,
});
}
}
const attrs = node.attrs
.filter((a) => a.name !== "class" && !a.name.startsWith("class:"))
.map((a) => {
if (a.event) return ` ${eventAttribute(a.name)}="${compileAttrValue(a.value, ctx)}"`;
if (a.boolean) return ` ${a.name}`;
if (a.event) {
return ` ${eventAttribute(a.name)}="${compileAttrValue(a.value, ctx)}"`;
}
if (a.boolean) {
return ` ${a.name}`;
}
const rendered = ` ${a.name}="${compileAttrValue(a.value, ctx)}"`;
if (!a.value.includes("{") || !exprRefsState(a.value, ctx.stateNames)) return rendered;
if (!a.value.includes("{") || !exprRefsState(a.value, ctx.stateNames)) {
return rendered;
}
const marker = attrEscape(JSON.stringify([a.name, a.value]));
return `${rendered} data-wrn-bind-${bindIndex++}="${escLit(marker)}"`;
})
.join("");
const initialConditionalClasses = conditionalClasses
.map(({ className, expression }) => {
return `\${(${ctx.resolveExpr(expression)}) ? ${JSON.stringify(` ${className}`)} : ""}`;
})
.join("");
const classAttribute =
staticClasses.length > 0 || conditionalClasses.length > 0
? ` class="${compileAttrValue(staticClasses.join(" "), ctx)}${initialConditionalClasses}"`
: "";
const classBindings = conditionalClasses
.map(({ className, expression }, index) => {
const marker = attrEscape(JSON.stringify([className, expression]));
return ` data-wrn-class-${index}="${escLit(marker)}"`;
})
.join("");
// A `data-for` element introduces loop variables for its subtree.
const loops = loopVarsOf(node);
const childCtx =
loops.length > 0 ? { ...ctx, loopVars: new Set([...(ctx.loopVars ?? []), ...loops]) } : ctx;
if (VOID_ELEMENTS.has(node.tag.toLowerCase())) return `<${node.tag}${attrs}>`;
const inner = node.children.map((c) => renderComponentNode(c, childCtx)).join("");
return `<${node.tag}${attrs}>${inner}</${node.tag}>`;
const allAttrs = `${classAttribute}${classBindings}${attrs}`;
if (VOID_ELEMENTS.has(node.tag.toLowerCase())) {
return `<${node.tag}${allAttrs}>`;
}
const inner = node.children.map((child) => renderComponentNode(child, childCtx)).join("");
return `<${node.tag}${allAttrs}>${inner}</${node.tag}>`;
}
function generateComponent(ast: PageAst): string {
packages/compiler/src/parser.ts
+11 -2
View File
@@ -386,7 +386,14 @@ export function parseHtmlView(src: string, pos: number): { nodes: ViewNode[]; en
let i = pos;
const isNameStart = (c: string): boolean => /[A-Za-z_]/.test(c);
const isNamePart = (c: string): boolean => /[A-Za-z0-9_:-]/.test(c);
const isNamePart = (c: string): boolean => /[A-Za-z0-9_:.[\]%-]/.test(c);
const isAttributeNamePart = (c: string, next: string | undefined): boolean => {
if (c === "/") {
return next !== ">";
}
return isNamePart(c);
};
const isWs = (c: string): boolean => c === " " || c === "\t" || c === "\n" || c === "\r";
const fail = (msg: string): never => {
@@ -425,7 +432,9 @@ export function parseHtmlView(src: string, pos: number): { nodes: ViewNode[]; en
const readName = (): string => {
if (i >= src.length || !isNameStart(src[i]!)) return fail("Expected a tag or attribute name");
const start = i++;
while (i < src.length && isNamePart(src[i]!)) i++;
while (i < src.length && isAttributeNamePart(src[i], src[i + 1])) {
i++;
}
return src.slice(start, i);
};