docs: add kitajs/html example and tests (#6)

* docs: add kitajs/html example and tests

* chore: update kitajs/html version

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 git@github.com: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:*"
+ }
+}