create-koppajs 1.0.1 → 1.1.0

package/template/prettier.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  semi: true,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "all",
+};

package/template/src/app-view.kpa

@@ -1,36 +1,35 @@
-[template]
-  <div class="app-root">
-    <img src="https://public-assets-1b57ca06-687a-4142-a525-0635f7649a5c.s3.eu-central-1.amazonaws.com/koppajs/koppajs-logo-text-900x226.png" width="420" alt="KoppaJS Logo" class="logo">
-    <p class="subtitle">Minimal Starter</p>
-    <counter-component></counter-component>
-  </div>
-[/template]
-
-[css]
-  .app-root {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    background: #0f1117;
-    font-family: system-ui, -apple-system, sans-serif;
-    padding: 2rem;
-  }
-
-  .logo {
-    margin-bottom: .9rem;
-  }
-  
-  .subtitle {
-    color: #64dce8;
-    font-size: 1rem;
-    letter-spacing: 0.25em;
-    text-transform: uppercase;
-    margin: 0 0 1.5rem 0;
-    opacity: 0.8;
-  }
-[/css]
-
-
-
+[template]
+  <div class="app-root">
+    <img src="https://public-assets-1b57ca06-687a-4142-a525-0635f7649a5c.s3.eu-central-1.amazonaws.com/koppajs/koppajs-logo-text-900x226.png" width="420" alt="KoppaJS Logo" class="logo">
+    <p class="subtitle">Minimal Starter</p>
+    <counter-component></counter-component>
+  </div>
+[/template]
+
+[css]
+  .app-root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background: #0f1117;
+    font-family: system-ui, -apple-system, sans-serif;
+    padding: 2rem;
+  }
+
+  .logo {
+    margin-bottom: .9rem;
+  }
+
+  .subtitle {
+    color: #64dce8;
+    font-size: 1rem;
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    margin: 0 0 1.5rem 0;
+    opacity: 0.8;
+  }
+[/css]
+
+

package/template/src/counter-component.kpa

@@ -1,87 +1,87 @@
-[template]
-  <div class="counter-card">
-    <span class="counter-label">Counter</span>
-    <p class="counter-value">{{ count }}</p>
-    <div class="counter-buttons">
-      <button onClick="decrement">−</button>
-      <button onClick="increment">+</button>
-    </div>
-  </div>
-[/template]
-
-[ts]
-  return {
-    state: { count: 0 },
-    methods: {
-      increment() {
-        this.count++;
-      },
-      decrement() {
-        this.count--;
-      },
-    },
-  };
-[/ts]
-
-[css]
-  .counter-card {
-    background: #1a1d2e;
-    border: 1px solid #2a2d3e;
-    border-radius: 1.2rem;
-    padding: 2.5rem 3rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1.2rem;
-    min-width: 260px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 48px rgba(100, 220, 232, 0.05);
-  }
-
-  .counter-label {
-    font-size: 0.85rem;
-    color: #64dce8;
-    text-transform: uppercase;
-    letter-spacing: 0.2em;
-    opacity: 0.7;
-  }
-
-  .counter-value {
-    font-size: 3rem;
-    font-weight: 700;
-    color: #e8eaf0;
-    margin: 0;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .counter-buttons {
-    display: flex;
-    gap: 1rem;
-  }
-
-  button {
-    background: transparent;
-    color: #64dce8;
-    border: 1px solid #64dce8;
-    border-radius: 0.6rem;
-    padding: 0.6rem 1.5rem;
-    font-size: 1.3rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-                color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  button:hover {
-    background: rgba(100, 220, 232, 0.12);
-    color: #8ff0f8;
-    border-color: #8ff0f8;
-  }
-  
-  button:active {
-    background: #64dce8;
-    color: #0f1117;
-    transform: scale(0.93);
-  }
-[/css]
+[template]
+  <div class="counter-card">
+    <span class="counter-label">Counter</span>
+    <p class="counter-value" role="status" aria-live="polite">{{ count }}</p>
+    <div class="counter-buttons">
+      <button type="button" aria-label="Decrement counter" onClick="decrement">−</button>
+      <button type="button" aria-label="Increment counter" onClick="increment">+</button>
+    </div>
+  </div>
+[/template]
+
+[ts]
+  return {
+    state: { count: 0 },
+    methods: {
+      increment() {
+        this.count++;
+      },
+      decrement() {
+        this.count--;
+      },
+    },
+  };
+[/ts]
+
+[css]
+  .counter-card {
+    background: #1a1d2e;
+    border: 1px solid #2a2d3e;
+    border-radius: 1.2rem;
+    padding: 2.5rem 3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.2rem;
+    min-width: 260px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 48px rgba(100, 220, 232, 0.05);
+  }
+
+  .counter-label {
+    font-size: 0.85rem;
+    color: #64dce8;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    opacity: 0.7;
+  }
+
+  .counter-value {
+    font-size: 3rem;
+    font-weight: 700;
+    color: #e8eaf0;
+    margin: 0;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .counter-buttons {
+    display: flex;
+    gap: 1rem;
+  }
+
+  button {
+    background: transparent;
+    color: #64dce8;
+    border: 1px solid #64dce8;
+    border-radius: 0.6rem;
+    padding: 0.6rem 1.5rem;
+    font-size: 1.3rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  button:hover {
+    background: rgba(100, 220, 232, 0.12);
+    color: #8ff0f8;
+    border-color: #8ff0f8;
+  }
+
+  button:active {
+    background: #64dce8;
+    color: #0f1117;
+    transform: scale(0.93);
+  }
+[/css]

package/template/src/style.css

@@ -1,5 +1,5 @@
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}

package/template/tests/e2e/app.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "@playwright/test";
+
+test("renders the starter and updates the counter", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page.getByText("Minimal Starter")).toBeVisible();
+
+  const counterValue = page.getByRole("status");
+
+  await expect(counterValue).toHaveText("0");
+
+  await page.getByRole("button", { name: "Increment counter" }).click();
+  await expect(counterValue).toHaveText("1");
+
+  await page.getByRole("button", { name: "Decrement counter" }).click();
+  await page.getByRole("button", { name: "Decrement counter" }).click();
+  await expect(counterValue).toHaveText("-1");
+});

package/template/tests/integration/main-bootstrap.test.ts

@@ -0,0 +1,33 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const { core, take } = vi.hoisted(() => {
+  const take = vi.fn();
+  const core = Object.assign(vi.fn(), { take });
+
+  return { core, take };
+});
+
+vi.mock("@koppajs/koppajs-core", () => ({
+  Core: core,
+}));
+
+describe("main bootstrap", () => {
+  afterEach(() => {
+    core.mockClear();
+    take.mockClear();
+    vi.resetModules();
+  });
+
+  it("registers the root components and boots the app once", async () => {
+    await import("../../src/main");
+
+    expect(take).toHaveBeenCalledTimes(2);
+    expect(take).toHaveBeenNthCalledWith(1, expect.anything(), "app-view");
+    expect(take).toHaveBeenNthCalledWith(
+      2,
+      expect.anything(),
+      "counter-component",
+    );
+    expect(core).toHaveBeenCalledTimes(1);
+  });
+});

package/template/tests/unit/normalize-kpa-module-export.test.ts

@@ -0,0 +1,46 @@
+import type { Plugin } from "vite";
+import { describe, expect, it } from "vitest";
+
+import { normalizeKpaModuleExport } from "../../vite.config.mjs";
+
+async function transformWith(plugin: Plugin, code: string, id: string) {
+  const transform = plugin.transform;
+
+  if (!transform) {
+    return null;
+  }
+
+  if (typeof transform === "function") {
+    return transform.call({} as never, code, id);
+  }
+
+  return transform.handler.call({} as never, code, id);
+}
+
+describe("normalizeKpaModuleExport", () => {
+  it("wraps raw KPA output in an ES module export", async () => {
+    const plugin = normalizeKpaModuleExport();
+
+    await expect(
+      transformWith(plugin, '{ template: "<div></div>" }', "/src/app-view.kpa"),
+    ).resolves.toEqual({
+      code: 'export default { template: "<div></div>" };',
+      map: null,
+    });
+  });
+
+  it("ignores non-KPA files and already exported modules", async () => {
+    const plugin = normalizeKpaModuleExport();
+
+    await expect(
+      transformWith(plugin, "const count = 0;", "/src/main.ts"),
+    ).resolves.toBeNull();
+    await expect(
+      transformWith(
+        plugin,
+        "export default { template: '<div></div>' };",
+        "/src/app-view.kpa",
+      ),
+    ).resolves.toBeNull();
+  });
+});

package/template/tsconfig.json

@@ -10,6 +10,17 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true
   },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "dist"]
+  "include": [
+    "src/**/*.ts",
+    "tests/**/*.ts",
+    "playwright.config.ts",
+    "vite.config.d.mts"
+  ],
+  "exclude": [
+    "coverage",
+    "dist",
+    "node_modules",
+    "playwright-report",
+    "test-results"
+  ]
 }

package/template/vite.config.d.mts

@@ -0,0 +1,7 @@
+import type { Plugin, UserConfig } from "vite";
+
+export declare function normalizeKpaModuleExport(): Plugin;
+
+declare const config: UserConfig;
+
+export default config;

package/template/vite.config.mjs

@@ -1,10 +1,45 @@
-import { defineConfig } from "vite";
 import koppaPlugin from "@koppajs/koppajs-vite-plugin";
+import { defineConfig } from "vite";
+
+/**
+ * Wrap raw `.kpa` object output in a valid ES module export.
+ *
+ * @returns {import("vite").Plugin}
+ */
+export function normalizeKpaModuleExport() {
+  return {
+    name: "normalize-kpa-module-export",
+    enforce: "post",
+    /**
+     * @param {string} code
+     * @param {string} id
+     */
+    transform(code, id) {
+      const cleanId = id.split("?")[0];
+
+      if (!cleanId.endsWith(".kpa")) {
+        return null;
+      }
+
+      const trimmed = code.trim();
+
+      if (!trimmed.startsWith("{") || trimmed.startsWith("export default")) {
+        return null;
+      }
+
+      return {
+        code: `export default ${trimmed};`,
+        map: null,
+      };
+    },
+  };
+}
 
 export default defineConfig({
   plugins: [
     koppaPlugin({
-      tsconfigFile: "./tsconfig.json"
-    })
-  ]
+      tsconfigFile: "./tsconfig.json",
+    }),
+    normalizeKpaModuleExport(),
+  ],
 });

package/template/vitest.config.mjs

@@ -0,0 +1,19 @@
+import { defineConfig, mergeConfig } from "vitest/config";
+
+import viteConfig from "./vite.config.mjs";
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      include: ["tests/**/*.test.ts"],
+      coverage: {
+        provider: "v8",
+        reporter: ["text", "html"],
+        reportsDirectory: "./coverage",
+        include: ["src/**/*.ts"],
+        exclude: ["playwright.config.ts", "tests/**/*.ts", "vitest.config.mjs"],
+      },
+    },
+  }),
+);