43 lines
2.3 KiB
TypeScript
43 lines
2.3 KiB
TypeScript
import { expect, test } from "bun:test";
|
|
import { compile } from "../src/index.ts";
|
|
test("component conditional templates retain enclosing loop locals for reactive reevaluation", async () => {
|
|
const source = `component FormFields {
|
|
props { pages = [{id:'page',fields:[{id:'name',hidden:false}]}] }
|
|
state answers = {}
|
|
view { {#each pages as page}<section>{#each page.fields as field}{#if !field.hidden}<Input name="{field.id}" @input="answers[field.id]=payload.value" />{/if}{/each}</section>{/each} }
|
|
}`;
|
|
const code = new Bun.Transpiler({ loader: "ts" }).transformSync(
|
|
compile(source, "FormFields.wrn").code,
|
|
);
|
|
const mod = await import("data:text/javascript;base64," + Buffer.from(code).toString("base64"));
|
|
const html = mod.render({});
|
|
const markers = [...html.matchAll(/<template([^>]+)>/g)].map((match) => match[1]!);
|
|
const conditional = markers.find((marker) => marker.includes("data-wrn-if="))!;
|
|
const locals = /data-wrn-loop-locals="([^"]+)"/.exec(conditional);
|
|
expect(conditional?.trim().startsWith("data-wrn-if=")).toBe(true);
|
|
expect(locals).not.toBeNull();
|
|
const decoded = JSON.parse(Buffer.from(locals![1]!, "base64").toString());
|
|
expect(decoded.field.id).toBe("name");
|
|
expect(decoded.page.id).toBe("page");
|
|
const nestedEach = markers.filter((marker) => marker.includes("data-wrn-each="))[1]!;
|
|
const eachLocals = /data-wrn-loop-locals="([^"]+)"/.exec(nestedEach);
|
|
expect(eachLocals).not.toBeNull();
|
|
expect(JSON.parse(Buffer.from(eachLocals![1]!, "base64").toString()).page.id).toBe("page");
|
|
const child = /<div data-component="Input"([^>]+)>/.exec(html)!;
|
|
const childLocals = /data-wrn-loop-locals="([^"]+)"/.exec(child[1]!);
|
|
expect(childLocals).not.toBeNull();
|
|
expect(JSON.parse(Buffer.from(childLocals![1]!, "base64").toString()).field.id).toBe("name");
|
|
const childCode = new Bun.Transpiler({ loader: "ts" }).transformSync(
|
|
compile("component Child { view { <input /> } }", "Child.wrn").code,
|
|
);
|
|
const childModule = await import(
|
|
"data:text/javascript;base64," + Buffer.from(childCode).toString("base64")
|
|
);
|
|
const renderedChild = childModule.render({
|
|
"data-wrn-loop-locals": childLocals![1]!,
|
|
"data-wrn-if": "forbidden",
|
|
});
|
|
expect(renderedChild).toContain('data-wrn-loop-locals="' + childLocals![1] + '"');
|
|
expect(renderedChild).not.toContain('data-wrn-if="forbidden"');
|
|
});
|