feat: context api (#15)

Author: golok727

docs/guide/context.md

@@ -19,6 +19,7 @@
   "license": "MIT",
   "packageManager": "pnpm@10.12.4",
   "devDependencies": {
+    "jsdom": "^27.0.1",
     "prettier": "^3.6.2",
     "typescript": "~5.9.3",
     "vitepress": "^1.6.4"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaori-compiler",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "JSX to lit-html compiler for kaori",
   "type": "module",
   "exports": {

packages/compiler/package.json

@@ -3,115 +3,115 @@
 exports[`Children prop reactivity > should NOT make arrow function children reactive (functions are static) 1`] = `
 "import { component, html } from "kaori.js";
 function Parent() {
-  return component(For, {
+  return html\`\${component(For, {
     get items() {
       return getItems();
     },
     children: item => html\`<div>\${item.name}</div>\`
-  });
+  })}\`;
 }"
 `;
 
 exports[`Children prop reactivity > should NOT make children reactive when containing only static content 1`] = `
 "import { component, html } from "kaori.js";
 function Parent() {
-  return component(Container, {
+  return html\`\${component(Container, {
     children: html\`<p>Static text</p>\`
-  });
+  })}\`;
 }"
 `;
 
 exports[`Children prop reactivity > should handle nested reactive children correctly 1`] = `
-"import { component } from "kaori.js";
+"import { component, html } from "kaori.js";
 function Parent() {
-  return component(Outer, {
+  return html\`\${component(Outer, {
     get children() {
-      return component(Middle, {
+      return html\`\${component(Middle, {
         get children() {
-          return component(Inner, {
+          return html\`\${component(Inner, {
             get prop() {
               return getValue();
             }
-          });
+          })}\`;
         }
-      });
+      })}\`;
     }
-  });
+  })}\`;
 }"
 `;
 
 exports[`Children prop reactivity > should make children reactive even with static component props (component call is dynamic) 1`] = `
-"import { component } from "kaori.js";
+"import { component, html } from "kaori.js";
 function Parent() {
-  return component(Container, {
+  return html\`\${component(Container, {
     get children() {
-      return component(Child, {
+      return html\`\${component(Child, {
         title: "static"
-      });
+      })}\`;
     }
-  });
+  })}\`;
 }"
 `;
 
 exports[`Children prop reactivity > should make children reactive when containing component with function call props 1`] = `
-"import { component } from "kaori.js";
+"import { component, html } from "kaori.js";
 function Parent() {
-  return component(Container, {
+  return html\`\${component(Container, {
     get children() {
-      return component(Child, {
+      return html\`\${component(Child, {
         get title() {
           return getTitle();
         }
-      });
+      })}\`;
     }
-  });
+  })}\`;
 }"
 `;
 
 exports[`Children prop reactivity > should make children reactive when containing function calls 1`] = `
-"import { component } from "kaori.js";
+"import { component, html } from "kaori.js";
 function Parent() {
-  return component(Container, {
+  return html\`\${component(Container, {
     get children() {
       return getMessage();
     }
-  });
+  })}\`;
 }"
 `;
 
 exports[`Children prop reactivity > should make children reactive when containing html template with member access 1`] = `
 "import { component, html } from "kaori.js";
 function Parent() {
-  return component(Container, {
+  return html\`\${component(Container, {
     get children() {
       return html\`<p>\${user.name}</p>\`;
     }
-  });
+  })}\`;
 }"
 `;
 
 exports[`Children prop reactivity > should make children reactive when containing member access 1`] = `
-"import { component } from "kaori.js";
+"import { component, html } from "kaori.js";
 function Parent() {
-  return component(Container, {
+  return html\`\${component(Container, {
     get children() {
       return user.name;
     }
-  });
+  })}\`;
 }"
 `;
 
 exports[`Children prop reactivity > should make children reactive with mixed static and dynamic content 1`] = `
 "import { component, html } from "kaori.js";
 function Parent() {
-  return component(Container, {
+  return html\`\${component(Container, {
     get children() {
-      return [html\`<p>Static</p>\`, getDynamic(), component(Child, {
+      return [html\`<p>Static</p>\`, getDynamic(), html\`\${component(Child, {
         get prop() {
           return getValue();
         }
-      })];
+      })}\`];
     }
-  });
+  })}\`;
 }"
 `;

packages/compiler/src/__tests__/__snapshots__/children-reactive.spec.ts.snap

@@ -46,9 +46,9 @@ exports[`Ref directive transformation > should transform ref on component 1`] =
 import { createRef } from "kaori.js";
 function App() {
   const myRef = createRef();
-  return [component(MyComponent, {
+  return [html\`\${component(MyComponent, {
     ref: myRef
-  }), html\`<div \${ref(myRef)}>HTML element</div>\`];
+  })}\`, html\`<div \${ref(myRef)}>HTML element</div>\`];
 }"
 `;