wip

Author: drylian

core/src/directives/component.ts

@@ -29,7 +29,7 @@ export default (kire: Kire) => {
 		description:
 			"Loads a template as a reusable component, allowing content to be passed into named slots.",
 		example: `@component('card', { title: 'My Card' })\n  @slot('header')\n    <h1>Card Header</h1>\n  @end\n  <p>Default content.</p>\n@end`,
-		onCall(ctx) {
+		async onCall(ctx) {
 			const pathExpr = ctx.param("path");
 			const varsExpr = ctx.param("variables") || "{}";
 
@@ -43,25 +43,28 @@ export default (kire: Kire) => {
 			ctx.res(`    const $ctx = $bodyCtx;`); // Shadow $ctx
 			ctx.res(`    with($ctx) {`);
 
-			if (ctx.children) ctx.set(ctx.children);
+			if (ctx.children) await ctx.set(ctx.children);
 
 			ctx.res(`    }`);
 			ctx.res(`  })($ctx);`);
 
-			ctx.res(`  $slots.default = $bodyCtx[Symbol.for('~response')];`);
+			ctx.res(`  if (!$slots.default) $slots.default = $bodyCtx[Symbol.for('~response')];`);
 
 			// Now load the component template
 			ctx.res(`  const path = $ctx.resolve(${JSON.stringify(pathExpr)});`);
 			ctx.res(`  const templateFn = await $ctx.load(path);`);
 			ctx.res(`  if (templateFn) {`);
-			ctx.res(`    const locals = ${varsExpr};`);
-			ctx.res(`    const componentCtx = $ctx.clone(locals);`);
-			ctx.res(`    componentCtx.slots = $slots;`); // Pass slots to component
-			ctx.res(`    await templateFn(componentCtx);`);
-			ctx.res(`    $ctx.res(componentCtx[Symbol.for('~response')]);`);
+						ctx.res(`  const locals = ${varsExpr};`);
+						ctx.res(`  const componentCtx = $ctx.clone(locals);`);
+						ctx.res(`  componentCtx[${JSON.stringify(kire.varLocals)}] = locals;`); // Expose locals under the configured name
+						ctx.res(`  if(typeof locals === 'object' && locals !== null) locals.slots = $slots;`); // Attach slots to locals for it.slots access
+						ctx.res(`  componentCtx.slots = $slots;`); // Pass slots to component
+						ctx.res(`  await templateFn(componentCtx);`);
+						ctx.res(`  $ctx.res(componentCtx[Symbol.for('~response')]);`);
 			ctx.res(`  }`);
 
 			ctx.res(`})();`);
 		},
 	});
 };
+

core/src/directives/import.ts

@@ -4,11 +4,11 @@ export default (kire: Kire) => {
 	kire.directive({
 		name: "include",
 		params: ["path:string", "locals:object"],
-		children: true,
+		children: false,
 		type: "html",
 		description:
-			'Includes and renders a template from a given path, optionally passing local variables. Can also wrap content passed as "content" variable.',
-		example: `@include('partials/card')\n  <p>Card content</p>\n@end`,
+			"Includes and renders a template from a given path, optionally passing local variables.",
+		example: `@include('partials/card')`,
 		onCall(ctx) {
 			const pathExpr = ctx.param("path");
 			const localsExpr = ctx.param("locals") || "{}";
@@ -18,25 +18,13 @@ export default (kire: Kire) => {
     const templateFn = await $ctx.load(path);
     
     if (templateFn) {
-        let content = '';`);
-
-			if (ctx.children && ctx.children.length > 0) {
-				ctx.res(`const $bodyCtx = $ctx.clone();
-        await (async ($parentCtx) => {
-            const $ctx = $bodyCtx;
-            with($ctx) {`);
-				ctx.set(ctx.children);
-				ctx.res(`}
-        })($ctx);
-        content = $bodyCtx[Symbol.for('~response')];`);
-			}
-
-			ctx.res(`const locals = Object.assign({ content }, ${localsExpr});
+        const locals = ${localsExpr};
         const childCtx = $ctx.clone(locals);
+        childCtx[${JSON.stringify(kire.varLocals)}] = locals;
         await templateFn(childCtx);
         $ctx.res(childCtx[Symbol.for('~response')]);
     }
 })();`);
 		},
 	});
-};
+};

core/src/kire.ts

@@ -32,12 +32,16 @@ export class Kire {
 	public cacheFiles: Map<string, Function> = new Map();
 	public parserConstructor: IParserConstructor;
 	public compilerConstructor: ICompilerConstructor;
+	public varLocals: string;
+	public exposeLocals: boolean;
 
 	constructor(options: KireOptions = {}) {
 		this.root = options.root ?? "./";
 		this.cache = options.cache ?? true;
 		this.alias = options.alias ?? { "~/": this.root };
 		this.extension = options.extension ?? "kire";
+		this.varLocals = options.varLocals ?? "it";
+		this.exposeLocals = options.exposeLocals ?? true;
 
 		this.resolverFn =
 			options.resolver ??
@@ -248,6 +252,10 @@ export class Kire {
 			}
 		}
 
+		if (content === null || content === undefined) {
+			return null as any;
+		}
+
 		const code = await this.compile(content);
 		try {
 			const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor;
@@ -276,6 +284,11 @@ export class Kire {
 		}
 		Object.assign(rctx, locals);
 
+		// Expose locals under the configured varLocals name if exposeLocals is true
+		if (this.exposeLocals) {
+			rctx[this.varLocals] = locals;
+		}
+
 		// Initialize the response and structure symbols on the runtime context
 		rctx[RESPONSE_SYMBOL] = "";
 		rctx[STRUCTURE_SYMBOL] = [];

core/src/types.ts

@@ -27,6 +27,8 @@ export interface KireOptions {
 		parser?: IParserConstructor;
 		compiler?: ICompilerConstructor;
 	};
+	varLocals?: string;
+	exposeLocals?: boolean;
 }
 
 export interface KireContext {

core/tests/defaults.test.ts

@@ -52,5 +52,5 @@ test("Kire - Include", async () => {
 
 	const tpl2 = `@include('/some/path.kire')`;
 	// Expect this to fail or return empty, not throw uncaught.
-	await expect(await kire.render(tpl2)).resolves.toBe("");
+	expect(await kire.render(tpl2)).toBe("");
 });

core/tests/directives.test.ts

@@ -61,20 +61,17 @@ describe("Kire Native Directives", () => {
 
 	describe("Loops", () => {
 		it("@for with array of", async () => {
-			const tpl = `@for(item of it.items){{ item }},
-@end`;
+			const tpl = `@for(item of it.items){{ item }},@end`;
 			expect(await render(tpl, { items: [1, 2, 3] })).toBe("1,2,3,");
 		});
 
 		it("@for with empty array", async () => {
-			const tpl = `@for(item of it.items){{ item }},
-@end`;
+			const tpl = `@for(item of it.items){{ item }},@end`;
 			expect(await render(tpl, { items: [] })).toBe("");
 		});
 
 		it("@for with object properties (for...in equivalent)", async () => {
-			const tpl = `@for(key in it.obj){{ key }}:{{ it.obj[key] }},
-@end`;
+			const tpl = `@for(key in it.obj){{ key }}:{{ it.obj[key] }},@end`;
 			expect(await render(tpl, { obj: { a: 1, b: 2 } })).toBe("a:1,b:2,");
 		});
 	});
@@ -230,11 +227,10 @@ describe("Kire Component Directives", () => {
 describe("Kire Include Directive", () => {
 	const kire = new Kire();
 	kire.resolverFn = async (path) => {
-		if (path.includes("child")) return `Child: {{ it.name }}`;
-		if (path.includes("wrapper")) return `Wrapper: {{ it.content }}`;
-		if (path.includes("grandchild"))
+		if (path === "child.kire") return `Child: {{ it.name }}`;
+		if (path === "grandchild.kire")
 			return `Grandchild: {{ it.item.name }} and {{ it.item.value }}`;
-		if (path.includes("nested"))
+		if (path === "nested.kire")
 			return `@include('grandchild', { item: it.n_item })`;
 		return null;
 	};
@@ -245,14 +241,9 @@ describe("Kire Include Directive", () => {
 		expect(await render(tpl)).toBe("Child: Test");
 	});
 
-	it("@include with content block", async () => {
-		const tpl = `@include('wrapper')Inner@end`;
-		expect(await render(tpl)).toBe("Wrapper: Inner");
-	});
-
 	it("@include with non-existent path", async () => {
 		const tpl = `Start @include('nonexistent') End`;
-		expect(await render(tpl)).toBe("Start End");
+		expect(await render(tpl)).toBe("Start  End");
 	});
 
 	it("@include with nested includes", async () => {