docs: add kitajs/html example and tests

README.md

@@ -36,6 +36,7 @@
   - [Brisa](#brisa-experimental)
   - [React](#react)
   - [Preact](#preact)
+  - [Kitajs/html](#kitajshtml)
   - [Add your framework example](#add-your-framework-example)
 - [Contributing](#contributing)
 - [License](#license)
@@ -66,7 +67,6 @@ In this way:
   <img src="https://github.com/aralroca/prerender-macro/assets/13313058/8ab3cf1d-c395-494e-88aa-69ca207d7bdc" alt="React example" class="center" />
 </figure>
 
-
 ### How does it work?
 
 This plugin transforms the previous code into this code:
@@ -148,11 +148,12 @@ The `prerenderConfig` named export needs this mandatory configuration to work:
 
 ## Configuration examples in different frameworks
 
-| Framework                                                                   | Render ahead of time | Inject ahead of time | Preserves the HTML structure | Demo                    |
-| --------------------------------------------------------------------------- | -------------------- | -------------------- | ---------------------------- | ----------------------- |
-| <div style="font-size: 16px;"><a href="#brisa-experimental">Brisa</a></div> | ✅                   | ✅                   | ✅                           | [🔗](/examples/brisa/)  |
-| <div style="font-size: 16px;"><a href="#react">React</a></div>              | ✅                   | ❌                   | ❌                           | [🔗](/examples/react/)  |
-| <div style="font-size: 16px;"><a href="#preact">Preact</a></div>            | ✅                   | ✅                   | ❌                           | [🔗](/examples/preact/) |
+| Framework                                                                   | Render ahead of time | Inject ahead of time | Preserves the HTML structure | Demo                         |
+| --------------------------------------------------------------------------- | -------------------- | -------------------- | ---------------------------- | ---------------------------- |
+| <div style="font-size: 16px;"><a href="#brisa-experimental">Brisa</a></div> | ✅                   | ✅                   | ✅                           | [🔗](/examples/brisa/)       |
+| <div style="font-size: 16px;"><a href="#react">React</a></div>              | ✅                   | ❌                   | ❌                           | [🔗](/examples/react/)       |
+| <div style="font-size: 16px;"><a href="#preact">Preact</a></div>            | ✅                   | ✅                   | ❌                           | [🔗](/examples/preact/)      |
+| <div style="font-size: 16px;"><a href="#kitajshtml">Kitajs/html</a></div>   | ✅                   | ✅                   | ✅                           | [🔗](/examples/kitajs-html/) |
 
 > [!TIP]
 >
@@ -256,6 +257,31 @@ export const plugin = prerenderMacroPlugin({
 >
 > **Additional `<div>` Nodes**: Using `dangerouslySetInnerHTML` attribute to inject HTML strings into JSX components results in the creation of an additional `<div>` node for each injection, which may affect the structure of your rendered output. Unlike [Brisa](#brisa-experimental), where this issue is avoided, the extra `<div>` nodes can lead to unexpected layout changes or styling issues.
 
+### Kitajs/html
+
+Configuration example:
+
+```tsx
+import { createElement } from "@kitajs/html";
+import prerenderMacroPlugin, { type PrerenderConfig } from "prerender-macro";
+
+export const prerenderConfig = {
+  render: createElement,
+} satisfies PrerenderConfig;
+
+export const plugin = prerenderMacroPlugin({
+  prerenderConfigPath: import.meta.url,
+});
+```
+
+> [!NOTE]
+>
+> Kitajs/html elements can be seamlessly coerced with Bun's AST and everything can be done AOT without having to use a `postRender`.
+
+> [!NOTE]
+>
+> Kitajs/html does not add extra nodes in the HTML, so it is a prerender of the real component, without modifying its structure.
+
 ### Add your framework example
 
 This project is open-source and totally open for you to contribute by adding the JSX framework you use, I'm sure it can help a lot of people.

examples/kitajs-html/README.md

@@ -0,0 +1,17 @@
+# `prerender-macro` Kitajs/html Example
+
+This is an example with kitajs-html SSR without hotreloading and with a build process.
+
+To test it:
+
+- Clone the repo: `git clone [email protected]:aralroca/prerender-macro.git`
+- Install dependencies: `cd prerender-macro && bun install`
+- Run demo: `bun run demo:kitajs-html`
+- Open http://localhost:1234 to see the result
+- Look at `examples/kitajs-html/dist/index.js` to verify how the static parts have been converted to HTML in string.
+
+The static component is translated to html in string in build-time:
+
+```tsx
+"Static Component \uD83E\uDD76 Random number = 0.41381527597071954";
+```

examples/kitajs-html/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "kitajs-example",
+  "private": true,
+  "module": "build.tsx",
+  "type": "module",
+  "scripts": {
+    "start": "bun run src/build.ts && bun run dist/index.js"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "5.4.3"
+  },
+  "dependencies": {
+    "prerender-macro": "workspace:*"
+  }
+}

examples/kitajs-html/src/build.ts

@@ -0,0 +1,16 @@
+import { join } from "node:path";
+import prerenderMacro from "prerender-macro";
+
+const { success, logs } = await Bun.build({
+  entrypoints: [join(import.meta.dir, "index.tsx")],
+  outdir: join(import.meta.dir, "..", "dist"),
+  target: "bun",
+  plugins: [
+    prerenderMacro({
+      prerenderConfigPath: join(import.meta.dir, "prerender.tsx"),
+    }),
+  ],
+});
+
+if (success) console.log("Build complete ✅");
+else console.error("Build failed ❌", logs);

examples/kitajs-html/src/components/dynamic-component.tsx

@@ -0,0 +1,7 @@
+export default function DynamicComponent({ name }: { name: string }) {
+  return (
+    <div>
+      {name} Component 🔥 Random number = {Math.random()}
+    </div>
+  );
+}

examples/kitajs-html/src/components/static-component.tsx

@@ -0,0 +1,7 @@
+export default function StaticComponent({ name }: { name: string }) {
+  return (
+    <div>
+      {name} Component 🥶 Random number = {Math.random()}
+    </div>
+  );
+}

examples/kitajs-html/src/index.tsx

@@ -0,0 +1,27 @@
+import DynamicComponent from "./components/dynamic-component";
+import StaticComponent from "./components/static-component" with { type: "prerender" };
+
+Bun.serve({
+  port: 1234,
+  fetch: async (request: Request) => {
+    const page = await (
+      <html>
+        <head>
+          <title>Prerender Macro | Brisa example</title>
+          <meta charSet="utf-8" />
+        </head>
+        <body>
+          <StaticComponent name="Static" />
+          <DynamicComponent name="Dynamic" />
+          <a href="/">Refresh</a>
+        </body>
+      </html>
+    );
+
+    return new Response(page, {
+      headers: new Headers({ "Content-Type": "text/html" }),
+    });
+  },
+});
+
+console.log("Server running at http://localhost:1234");

examples/kitajs-html/src/prerender.tsx

@@ -0,0 +1,10 @@
+import { createElement } from "@kitajs/html";
+import prerenderMacroPlugin, { type PrerenderConfig } from "prerender-macro";
+
+export const prerenderConfig = {
+  render: createElement,
+} satisfies PrerenderConfig;
+
+export const plugin = prerenderMacroPlugin({
+  prerenderConfigPath: import.meta.url,
+});

examples/kitajs-html/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "target": "esnext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@kitajs/html",
+    "plugins": [{ "name": "@kitajs/ts-html-plugin" }]
+  },
+  "include": ["src"]
+}

package.json

@@ -6,23 +6,27 @@
   "devDependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "@types/bun": "1.0.10",
-    "@types/react": "18.2.69",
+    "@types/bun": "1.0.11",
+    "@types/react": "18.2.72",
     "@types/react-dom": "18.2.22",
-    "brisa": "0.0.37",
-    "preact": "10.20.1"
+    "brisa": "0.0.38",
+    "preact": "10.20.1",
+    "@kitajs/html": "4.0.0-next.3",
+    "@kitajs/ts-html-plugin": "4.0.0-next.3"
   },
   "dependencies": {
     "typescript": "5.4.3"
   },
   "scripts": {
-    "test": "bun run test:brisa && bun run test:react && bun run test:preact",
+    "test": "bun run test:brisa && bun run test:react && bun run test:preact && bun run test:kitajs-html",
     "test:brisa": "cd tests/brisa && bun test && cd ../..",
     "test:react": "cd tests/react && bun test && cd ../..",
     "test:preact": "cd tests/preact && bun test && cd ../..",
+    "test:kitajs-html": "cd tests/kitajs-html && bun test && cd ../..",
     "demo:react": "cd examples/react && bun start",
     "demo:brisa": "cd examples/brisa && bun start",
-    "demo:preact": "cd examples/preact && bun start"
+    "demo:preact": "cd examples/preact && bun start",
+    "demo:kitajs-html": "cd examples/kitajs-html && bun start"
   },
   "workspaces": [
     "package",

tests/kitajs-html/components.tsx

@@ -0,0 +1,18 @@
+export default function Foo({
+  name = "foo",
+  nested = {},
+}: {
+  name: string;
+  nested: { foo?: string };
+}) {
+  return (
+    <div>
+      Foo, {name}
+      {nested.foo}!
+    </div>
+  );
+}
+
+export function Bar({ name = "bar" }: { name: string }) {
+  return <div>Bar, {name}!</div>;
+}

tests/kitajs-html/config.tsx

@@ -0,0 +1,10 @@
+import { createElement } from "@kitajs/html";
+import prerenderMacroPlugin, { type PrerenderConfig } from "prerender-macro";
+
+export const prerenderConfig = {
+  render: createElement,
+} satisfies PrerenderConfig;
+
+export const plugin = prerenderMacroPlugin({
+  prerenderConfigPath: import.meta.url,
+});

tests/kitajs-html/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "test-kitajs-html",
+  "private": true,
+  "scripts": {
+    "test": "bun test"
+  },
+  "dependencies": {
+    "prerender-macro": "workspace:*"
+  }
+}