mikuru 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,8 +1,14 @@
-# Changelog
-
-## 1.0.0
-
-- Stabilized the v1 SFC compiler surface for `.mikuru` files.
+# Changelog
+
+## 1.0.1
+
+- Added the `mikuru` CLI with `mikuru create [project-name]`.
+- Added a Vite starter template that shows a Mikuru welcome screen and counter after setup.
+- Added create CLI smoke coverage and included it in CI.
+
+## 1.0.0
+
+- Stabilized the v1 SFC compiler surface for `.mikuru` files.
 - Added Vite integration, generated DOM cleanup, component props/events/slots, `defineProps`, and `defineEmits`.
 - Added `v-if` / `v-else-if` / `v-else`, `v-show`, `v-for`, `v-model`, DOM event modifiers, style injection, and basic scoped CSS support.
 - Added CI, library build checks, basic example build checks, and browser E2E coverage.

package/README.md

@@ -90,7 +90,7 @@ v1では次の機能を対象にします。
 
 MikuruはVue完全互換を目指しません。SSR、hydration、transition、devtools、完全なテンプレート型チェック、Vue互換を名乗るための広範な仕様追従はv1後に検討します。scoped CSSはv1では基本セレクタのみを対象にし、`:global()`、深いセレクタ、複雑なネスト規則は後続課題です。
 
-## 開発
+## 開発
 
 ```sh
 npm install
@@ -140,3 +140,16 @@ npm run build:dogfood
 ## 補足
 
 Mikuru v1は、Vue完全互換ではなく小さなVue風SFCサブセットです。設計文書、対応構文、非対応構文、リリース前チェック項目などの詳細文書は内部資料として扱います。
+
+## Starter
+
+新しいMikuruアプリはCLIから作成できます。
+
+```sh
+npx mikuru create my-app
+cd my-app
+npm install
+npm run dev
+```
+
+生成されるスターターは、Viteの初期画面のようにMikuruのウェルカム画面を表示します。`src/App.mikuru` を編集するとHMRで画面が更新されます。

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { basename, dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+const command = process.argv[2];
+const targetArg = process.argv[3];
+if (command === "--help" || command === "-h" || !command) {
+    printHelp();
+    process.exit(0);
+}
+if (command !== "create") {
+    console.error(`Unknown command: ${command}`);
+    printHelp();
+    process.exit(1);
+}
+const targetDir = resolve(process.cwd(), targetArg ?? "mikuru-app");
+const appName = toPackageName(basename(targetDir));
+if (existsSync(targetDir) && readdirSync(targetDir).length > 0) {
+    console.error(`Target directory is not empty: ${targetDir}`);
+    process.exit(1);
+}
+const templateDir = resolve(dirname(fileURLToPath(import.meta.url)), "../templates/starter");
+copyTemplate(templateDir, targetDir, { appName });
+console.log(`Created ${appName} in ${targetDir}`);
+console.log("");
+console.log("Next steps:");
+console.log(`  cd ${basename(targetDir)}`);
+console.log("  npm install");
+console.log("  npm run dev");
+function printHelp() {
+    console.log("Usage:");
+    console.log("  mikuru create [project-name]");
+}
+function copyTemplate(sourceDir, targetDir, variables) {
+    mkdirSync(targetDir, { recursive: true });
+    for (const entry of readdirSync(sourceDir)) {
+        const sourcePath = join(sourceDir, entry);
+        const targetName = entry === "_gitignore" ? ".gitignore" : entry;
+        const targetPath = join(targetDir, targetName);
+        const stat = statSync(sourcePath);
+        if (stat.isDirectory()) {
+            copyTemplate(sourcePath, targetPath, variables);
+            continue;
+        }
+        if (isTextTemplate(sourcePath)) {
+            const content = readFileSync(sourcePath, "utf8").replaceAll("__MIKURU_APP_NAME__", variables.appName);
+            writeFileSync(targetPath, content);
+            continue;
+        }
+        copyFileSync(sourcePath, targetPath);
+    }
+}
+function isTextTemplate(path) {
+    return /\.(css|html|json|mikuru|ts)$/.test(path) || path.endsWith("_gitignore");
+}
+function toPackageName(value) {
+    return value
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9._-]+/g, "-")
+        .replace(/^-+|-+$/g, "") || "mikuru-app";
+}
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "mikuru",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
-  "type": "module",
-  "description": "A compile-first JavaScript framework with Vue-like authoring and Svelte-like generated DOM updates.",
-  "homepage": "https://github.com/miyagawayuu/mikuru#readme",
-  "bugs": {
-    "url": "https://github.com/miyagawayuu/mikuru/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/miyagawayuu/mikuru.git"
-  },
-  "exports": {
+  "type": "module",
+  "description": "A compile-first JavaScript framework with Vue-like authoring and Svelte-like generated DOM updates.",
+  "homepage": "https://github.com/miyagawayuu/mikuru#readme",
+  "bugs": {
+    "url": "https://github.com/miyagawayuu/mikuru/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/miyagawayuu/mikuru.git"
+  },
+  "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
@@ -30,11 +30,15 @@
       "default": "./dist/vite.js"
     }
   },
-  "files": [
-    "dist",
-    "README.md",
-    "CHANGELOG.md"
-  ],
+  "bin": {
+    "mikuru": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "engines": {
     "node": ">=22"
   },
@@ -45,15 +49,16 @@
     "build:realworld": "vite build --config examples/realworld/vite.config.ts",
     "build:mikuru-sample": "vite build --config examples/mikuru-sample/vite.config.ts",
     "build:mikuru-vue-like": "vite build --config examples/mikuru-vue-like/vite.config.ts",
-    "ci": "npm run typecheck && npm test && npm run build && npm run build:basic && npm run build:realworld && npm run build:dogfood && npm run test:package && npm run test:pack && npm run test:e2e && npm run test:e2e:dogfood",
+    "ci": "npm run typecheck && npm test && npm run build && npm run test:create && npm run build:basic && npm run build:realworld && npm run build:dogfood && npm run test:package && npm run test:pack && npm run test:e2e && npm run test:e2e:dogfood",
     "dev:basic": "vite --config examples/basic/vite.config.ts",
-    "dev:dogfood": "vite --config examples/dogfood/vite.config.ts",
-    "dev:realworld": "vite --config examples/realworld/vite.config.ts",
-    "dev:mikuru-sample": "vite --config examples/mikuru-sample/vite.config.ts",
-    "dev:mikuru-vue-like": "vite --config examples/mikuru-vue-like/vite.config.ts",
+    "dev:dogfood": "vite --config examples/dogfood/vite.config.ts",
+    "dev:realworld": "vite --config examples/realworld/vite.config.ts",
+    "dev:mikuru-sample": "vite --config examples/mikuru-sample/vite.config.ts",
+    "dev:mikuru-vue-like": "vite --config examples/mikuru-vue-like/vite.config.ts",
     "test": "vitest run",
     "test:e2e": "playwright test",
     "test:e2e:dogfood": "playwright test --config playwright.dogfood.config.ts",
+    "test:create": "node tests/create-cli-smoke.mjs",
     "test:pack": "node tests/npm-pack-smoke.mjs",
     "test:package": "node tests/package-usage.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit"

package/templates/starter/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+*.local

package/templates/starter/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mikuru App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/starter/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "__MIKURU_APP_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "mikuru": "^1.0.1"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10"
+  }
+}

package/templates/starter/src/App.mikuru

@@ -0,0 +1,38 @@
+<template>
+  <main class="shell">
+    <section class="hero">
+      <div class="mark">み</div>
+      <p class="eyebrow">Mikuru is ready</p>
+      <h1>Make tiny Vue-like apps feel sweet and fast.</h1>
+      <p class="summary">
+        Edit <code>src/App.mikuru</code> and save to test Mikuru with Vite HMR.
+      </p>
+      <button @click="increment">count: {{ count }}</button>
+    </section>
+
+    <section class="grid">
+      <article>
+        <h2>Template</h2>
+        <p>Write friendly SFC templates with interpolation, events, lists, and form models.</p>
+      </article>
+      <article>
+        <h2>Runtime</h2>
+        <p>Keep state small with <code>ref</code>, <code>computed</code>, and direct DOM updates.</p>
+      </article>
+      <article>
+        <h2>Compiler</h2>
+        <p>Compile SFCs into lightweight browser code without bringing a virtual DOM.</p>
+      </article>
+    </section>
+  </main>
+</template>
+
+<script>
+import { ref } from "mikuru";
+
+const count = ref(0);
+
+function increment() {
+  count.value += 1;
+}
+</script>

package/templates/starter/src/main.ts

@@ -0,0 +1,10 @@
+import { mount } from "./App.mikuru";
+import "./style.css";
+
+const app = document.querySelector<HTMLDivElement>("#app");
+
+if (!app) {
+  throw new Error("Missing #app");
+}
+
+mount(app);

package/templates/starter/src/mikuru-env.d.ts

@@ -0,0 +1,17 @@
+declare module "*.mikuru" {
+  export type MikuruComponentInstance = {
+    element: Element | Comment;
+    unmount(): void;
+  };
+
+  export function mount(
+    target: Element | DocumentFragment,
+    props?: Record<string, unknown>
+  ): MikuruComponentInstance;
+
+  const component: {
+    mount: typeof mount;
+  };
+
+  export default component;
+}

package/templates/starter/src/style.css

@@ -0,0 +1,151 @@
+:root {
+  color: #3a2430;
+  background:
+    radial-gradient(circle at 18% 12%, rgba(255, 176, 211, 0.38), transparent 28%),
+    radial-gradient(circle at 82% 8%, rgba(255, 218, 235, 0.72), transparent 24%),
+    #fff7fb;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+}
+
+button {
+  border: 1px solid #ff8abc;
+  border-radius: 999px;
+  background: #ff5fa2;
+  color: #ffffff;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  padding: 11px 18px;
+  box-shadow: 0 12px 26px rgba(255, 95, 162, 0.24);
+}
+
+button:hover {
+  background: #f34f96;
+}
+
+code {
+  border-radius: 6px;
+  background: #fff0f7;
+  color: #d93282;
+  padding: 2px 6px;
+}
+
+.shell {
+  width: min(1040px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 72px 0;
+}
+
+.hero {
+  display: grid;
+  justify-items: center;
+  gap: 18px;
+  min-height: 520px;
+  align-content: center;
+  border: 1px solid #ffd2e4;
+  border-radius: 28px 28px 0 0;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 250, 0.96)),
+    #ffffff;
+  box-shadow: 0 24px 70px rgba(217, 50, 130, 0.14);
+  text-align: center;
+}
+
+.mark {
+  display: grid;
+  width: 84px;
+  height: 84px;
+  place-items: center;
+  border: 1px solid #ffb6d4;
+  border-radius: 26px;
+  background: linear-gradient(135deg, #ff6faf, #ffc1dc);
+  color: #ffffff;
+  font-size: 40px;
+  font-weight: 800;
+  box-shadow: 0 18px 34px rgba(255, 111, 175, 0.32);
+}
+
+.eyebrow {
+  margin: 0;
+  color: #e24e91;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+h1 {
+  max-width: 760px;
+  margin: 0;
+  font-size: 56px;
+  font-weight: 750;
+  line-height: 1.05;
+}
+
+.summary {
+  max-width: 560px;
+  margin: 0;
+  color: #7b5b6a;
+  font-size: 18px;
+  line-height: 1.7;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  overflow: hidden;
+  border: 1px solid #ffd2e4;
+  border-top: 0;
+  border-radius: 0 0 28px 28px;
+  background: #ffd2e4;
+}
+
+article {
+  min-height: 180px;
+  padding: 28px;
+  background: rgba(255, 255, 255, 0.78);
+}
+
+h2 {
+  margin: 0 0 12px;
+  font-size: 22px;
+}
+
+article p {
+  margin: 0;
+  color: #7b5b6a;
+  line-height: 1.65;
+}
+
+@media (max-width: 760px) {
+  .shell {
+    padding: 24px 0;
+  }
+
+  .hero {
+    min-height: 460px;
+    padding: 32px 20px;
+  }
+
+  h1 {
+    font-size: 38px;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}

package/templates/starter/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import { mikuru } from "mikuru/vite";
+
+export default defineConfig({
+  plugins: [mikuru()]
+});