vue-micro-router 1.0.5 → 1.0.8

package/README.md

@@ -333,26 +333,37 @@ const { title, message, onConfirm } = useMicroState<Attrs>({
 **Step 2:** Run code generation:
 
 ```bash
-bun run gen:types
+npx vue-micro-router-gen          # auto-detects src/ or app/, outputs src/vue-micro-router.d.ts
+npx vue-micro-router-gen -d src   # explicit scan directory
+npx vue-micro-router-gen -o types/router.d.ts  # custom output path
 ```
 
-This scans plugin files, finds components with `export interface Attrs`, and generates `vue-micro-router.d.ts` with all type mappings.
+The script:
+- Scans **all `.ts` files** for `defineFeaturePlugin()` calls (any folder structure)
+- Resolves `@/`, `~/`, `#/` path aliases automatically
+- Finds `.vue` components with `export interface Attrs`
+- Generates `vue-micro-router.d.ts` with Register + AttrsMap augmentations
 
-**Step 3:** Typed everywhere — no extra work:
+**Step 3:** Include in tsconfig and enjoy typed everywhere:
+
+```jsonc
+// tsconfig.json — add the generated file
+{ "include": ["src/**/*.ts", "src/**/*.vue", "src/vue-micro-router.d.ts"] }
+```
 
 ```ts
 push('profile', { userId: 42, username: 'Danh' });  // ✅ typed, autocomplete
 push('profile');                                      // ❌ TS error: missing required props
-push('home');                                         // ✅ OK (no Attrs defined → optional)
+push('profile', { meta: { title: 'Hi' } });          // ✅ optional fields can be skipped
+push('home');                                         // ✅ OK (no Attrs → untyped)
 openDialog('confirm', { title: 'Sure?' });            // ✅ typed
-stepWisePush('profile', { userId: 1, username: 'A' }); // ✅ typed
 ```
 
 **Rules:**
 - Required fields in `Attrs` → must pass in `push()` / `openDialog()`
-- Optional fields (`?`) → can omit
+- Optional fields (`?`) → can skip entirely, including the whole props arg
 - Routes without `export interface Attrs` → `push()` accepts any `Record<string, unknown>`
-- Re-run `bun run gen:types` after adding/changing `Attrs` interfaces
+- Re-run `npx vue-micro-router-gen` after adding/changing `Attrs` interfaces
 
 ### State Serialization
 
@@ -604,12 +615,19 @@ Includes page slide/fade transitions, dialog animations, control fade transition
 ## Development
 
 ```bash
-bun run lint       # ESLint check
-bun run lint:fix   # Auto-fix lint issues
-bun test           # Run all tests
-bun run typecheck  # TypeScript strict check
-bun run build      # Build package
+bun run lint        # ESLint check
+bun run lint:fix    # Auto-fix lint issues
+bun test            # Run all tests
+bun run typecheck   # TypeScript strict check
+bun run build       # Build package
+bun run gen:types   # Generate vue-micro-router.d.ts (local dev)
 bun run dev:example # Run example app
+bun run publish:npm # Bump version + build + publish + tag + release
+```
+
+For consumers:
+```bash
+npx vue-micro-router-gen  # Generate type augmentations in consumer project
 ```
 
 ## API Reference

package/bin/gen-attrs-types.mjs

@@ -12,7 +12,7 @@
  *   npx vue-micro-router-gen -d src             # scan specific dir
  *   npx vue-micro-router-gen --help
  */
-import { readFileSync, writeFileSync, existsSync, readdirSync } from 'fs';
+import { readFileSync, writeFileSync, existsSync, readdirSync, watch as fsWatch } from 'fs';
 import { resolve, relative, dirname, join, extname } from 'path';
 
 const CWD = process.cwd();
@@ -23,10 +23,12 @@ const MODULE_NAME = 'vue-micro-router';
 const args = process.argv.slice(2);
 let outputFile = '';
 let scanDir = '';
+let watchMode = false;
 
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '-o' || args[i] === '--output') outputFile = args[++i];
   else if (args[i] === '-d' || args[i] === '--dir') scanDir = args[++i];
+  else if (args[i] === '-w' || args[i] === '--watch') watchMode = true;
   else if (args[i] === '--help' || args[i] === '-h') {
     console.log(`
 vue-micro-router-gen — Auto-generate typed augmentations
@@ -36,6 +38,7 @@ Usage: npx vue-micro-router-gen [options]
 Options:
   -o, --output <file>   Output file (auto: src/vue-micro-router.d.ts or ./vue-micro-router.d.ts)
   -d, --dir <dir>       Directory to scan (auto-detects src/, app/, or cwd)
+  -w, --watch           Watch .vue/.ts files and regenerate on change
   -h, --help            Show this help
 
 How it works:
@@ -200,85 +203,106 @@ function hasAttrs(filePath) {
   } catch { return false; }
 }
 
-// ── Main ────────────────────────────────────────────────────────────────────
+// ── Generate ────────────────────────────────────────────────────────────────
 
-const plugins = findPlugins();
-if (plugins.length === 0) {
-  console.log('\nNo defineFeaturePlugin() calls found.');
-  console.log('Tip: use -d <dir> to specify scan directory');
-  process.exit(0);
-}
+function generate() {
+  const plugins = findPlugins();
+  if (plugins.length === 0) {
+    console.log('No defineFeaturePlugin() calls found.');
+    return false;
+  }
 
-console.log(`\nPlugins: ${plugins.length}`);
-plugins.forEach(p => console.log(`  ${p.relPath} → ${p.exportName}`));
+  console.log(`Plugins: ${plugins.length}`);
+  plugins.forEach(p => console.log(`  ${p.relPath} → ${p.exportName}`));
 
-// Extract all entries from plugins
-const allEntries = plugins.flatMap(p => extractEntries(p.absPath));
+  const allEntries = plugins.flatMap(p => extractEntries(p.absPath));
 
-// Separate by kind and filter for Attrs
-const typed = { route: [], dialog: [], control: [] };
-const untyped = { route: 0, dialog: 0, control: 0 };
+  const typed = { route: [], dialog: [], control: [] };
+  const untyped = { route: 0, dialog: 0, control: 0 };
 
-for (const entry of allEntries) {
-  if (entry.componentFile && hasAttrs(entry.componentFile)) {
-    typed[entry.kind].push(entry);
-  } else {
-    untyped[entry.kind]++;
+  for (const entry of allEntries) {
+    if (entry.componentFile && hasAttrs(entry.componentFile)) {
+      typed[entry.kind].push(entry);
+    } else {
+      untyped[entry.kind]++;
+    }
   }
-}
-
-console.log(`Routes: ${typed.route.length} typed / ${untyped.route} untyped`);
-console.log(`Dialogs: ${typed.dialog.length} typed / ${untyped.dialog} untyped`);
-console.log(`Controls: ${typed.control.length} typed / ${untyped.control} untyped`);
 
-// ── Generate ────────────────────────────────────────────────────────────────
+  console.log(`Routes: ${typed.route.length} typed / ${untyped.route} untyped`);
+  console.log(`Dialogs: ${typed.dialog.length} typed / ${untyped.dialog} untyped`);
+  console.log(`Controls: ${typed.control.length} typed / ${untyped.control} untyped`);
 
-const outDir = dirname(resolve(CWD, outputFile));
-const lines = [
-  '/* Auto-generated by vue-micro-router-gen. DO NOT EDIT. */',
-  '/* Regenerate: npx vue-micro-router-gen */',
-  '',
-];
-
-// Import plugins
-for (const p of plugins) {
-  const rel = relative(outDir, resolve(CWD, p.relPath)).replace(/\\/g, '/');
-  const imp = rel.startsWith('.') ? rel : `./${rel}`;
-  lines.push(`import type { ${p.exportName} } from '${imp.replace(/\.ts$/, '')}';`);
-}
+  const outDir = dirname(resolve(CWD, outputFile));
+  const lines = [
+    '/* Auto-generated by vue-micro-router-gen. DO NOT EDIT. */',
+    '/* Regenerate: npx vue-micro-router-gen */',
+    '',
+  ];
 
-// Import Attrs
-for (const [kind, entries] of Object.entries(typed)) {
-  for (const e of entries) {
-    const alias = `${kind}_${e.key.replace(/[^a-zA-Z0-9]/g, '_')}`;
-    const rel = relative(outDir, resolve(CWD, e.componentFile)).replace(/\\/g, '/');
+  for (const p of plugins) {
+    const rel = relative(outDir, resolve(CWD, p.relPath)).replace(/\\/g, '/');
     const imp = rel.startsWith('.') ? rel : `./${rel}`;
-    lines.push(`import type { Attrs as ${alias} } from '${imp}';`);
+    lines.push(`import type { ${p.exportName} } from '${imp.replace(/\.ts$/, '')}';`);
   }
-}
-
-lines.push('');
-lines.push(`declare module '${MODULE_NAME}' {`);
 
-// Register
-if (plugins.length > 0) {
-  lines.push('  interface Register {');
-  lines.push(`    plugin: ${plugins.map(p => `typeof ${p.exportName}`).join(' | ')};`);
-  lines.push('  }');
-}
-
-// AttrsMap
-for (const [mapName, kind] of [['RouteAttrsMap', 'route'], ['DialogAttrsMap', 'dialog'], ['ControlAttrsMap', 'control']]) {
-  if (typed[kind].length > 0) {
-    lines.push(`  interface ${mapName} {`);
-    for (const e of typed[kind]) {
+  for (const [kind, entries] of Object.entries(typed)) {
+    for (const e of entries) {
       const alias = `${kind}_${e.key.replace(/[^a-zA-Z0-9]/g, '_')}`;
-      lines.push(`    '${e.key}': ${alias};`);
+      const rel = relative(outDir, resolve(CWD, e.componentFile)).replace(/\\/g, '/');
+      const imp = rel.startsWith('.') ? rel : `./${rel}`;
+      lines.push(`import type { Attrs as ${alias} } from '${imp}';`);
     }
+  }
+
+  lines.push('');
+  lines.push(`declare module '${MODULE_NAME}' {`);
+
+  if (plugins.length > 0) {
+    lines.push('  interface Register {');
+    lines.push(`    plugin: ${plugins.map(p => `typeof ${p.exportName}`).join(' | ')};`);
     lines.push('  }');
   }
+
+  for (const [mapName, kind] of [['RouteAttrsMap', 'route'], ['DialogAttrsMap', 'dialog'], ['ControlAttrsMap', 'control']]) {
+    if (typed[kind].length > 0) {
+      lines.push(`  interface ${mapName} {`);
+      for (const e of typed[kind]) {
+        const alias = `${kind}_${e.key.replace(/[^a-zA-Z0-9]/g, '_')}`;
+        lines.push(`    '${e.key}': ${alias};`);
+      }
+      lines.push('  }');
+    }
+  }
+
+  lines.push('}', '');
+  writeFileSync(resolve(CWD, outputFile), lines.join('\n'));
+  console.log(`✅ ${outputFile}`);
+  return true;
 }
 
-lines.push('}', '');
-writeFileSync(resolve(CWD, outputFile), lines.join('\n'));
-console.log(`\n✅ ${outputFile}`);
+// ── Run ─────────────────────────────────────────────────────────────────────
+
+generate();
+
+if (watchMode) {
+  console.log(`\n👀 Watching ${scanDir}/ for .vue/.ts changes...\n`);
+
+  let debounce = null;
+  const regenerate = () => {
+    clearTimeout(debounce);
+    debounce = setTimeout(() => {
+      console.log(`\n[${new Date().toLocaleTimeString()}] Change detected, regenerating...`);
+      generate();
+    }, 300);
+  };
+
+  const outputBasename = outputFile.split('/').pop();
+
+  fsWatch(SCAN_PATH, { recursive: true }, (event, filename) => {
+    if (!filename) return;
+    // Skip output file to prevent infinite loop
+    if (filename.endsWith(outputBasename)) return;
+    const ext = extname(filename);
+    if (ext === '.vue' || ext === '.ts') regenerate();
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-micro-router",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "type": "module",
   "description": "Mobile-app-style navigation for Vue 3 — animated page stacks, modal dialogs, HUD controls. No URL routing.",
   "author": {