@mizumi25/cli 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mizumi25/cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "CLI for Mizumi CSS framework",
   "type": "module",
   "main": "index.js",

package/watcher.js

@@ -1,56 +1,169 @@
 // packages/cli/watcher.js
-import fs from 'fs';
-import path from 'path';
-import { DocsGenerator } from './docs-generator.js';
-import Mizumi from '../core/index.js';
+import path     from 'node:path'
+import fs       from 'node:fs'
+import { createRequire } from 'node:module'
 
+// chokidar is CJS — load via createRequire in ESM
+const require = createRequire(import.meta.url)
+let chokidar
+try {
+  chokidar = require('chokidar')
+} catch {
+  chokidar = null
+}
 
-function watch() {
-  const configPath = path.join(process.cwd(), 'mizumi.config.js');
-  const outDir     = path.join(process.cwd(), '.mizumi');
+// ── DevTools injection helpers ────────────────────────────
+const DEVTOOLS_SCRIPT_TAG  = '<script src=".mizumi/mizumi-devtools.js"></script>'
+const DEVTOOLS_COMMENT_TAG = '<!-- mizumi-devtools -->'
 
-  if (!fs.existsSync(configPath)) {
-    console.error('❌ mizumi.config.js not found! Run: node mizumi init');
-    process.exit(1);
+/**
+ * Find all .html files in cwd (excluding node_modules / .mizumi)
+ */
+function findHTMLFiles(cwd) {
+  const results = []
+  function walk(dir) {
+    let entries
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }) }
+    catch { return }
+    for (const e of entries) {
+      const full = path.join(dir, e.name)
+      if (e.isDirectory()) {
+        if (!e.name.startsWith('.') && e.name !== 'node_modules') walk(full)
+      } else if (e.isFile() && e.name.endsWith('.html')) {
+        results.push(full)
+      }
+    }
   }
+  walk(cwd)
+  return results
+}
+
+/**
+ * Inject the devtools <script> tag into an HTML file if not already present.
+ * Inserts just before </body>, or at end of file if </body> not found.
+ * Marks injected lines with a comment so we can remove them on exit.
+ */
+function injectDevToolsTag(htmlPath) {
+  let html = fs.readFileSync(htmlPath, 'utf8')
+  if (html.includes(DEVTOOLS_SCRIPT_TAG)) return  // already injected
 
-  console.log('🌊 Mizumi watching for changes...');
-  console.log(`   Watching: mizumi.config.js`);
-  console.log('   Press Ctrl+C to stop\n');
+  const injection = `  ${DEVTOOLS_COMMENT_TAG}\n  ${DEVTOOLS_SCRIPT_TAG}\n`
+
+  if (html.includes('</body>')) {
+    html = html.replace('</body>', injection + '</body>')
+  } else {
+    html = html + '\n' + injection
+  }
 
-  // Run initial build
-  runBuild(configPath, outDir);
+  fs.writeFileSync(htmlPath, html)
+  console.log(`   💉 DevTools injected → ${path.relative(process.cwd(), htmlPath)}`)
+}
 
-  // Watch the config file
-  const watcher = chokidar.watch(configPath, {
-    persistent: true,
-    ignoreInitial: true
-  });
+/**
+ * Remove the injected devtools tag from an HTML file on watch exit.
+ */
+function removeDevToolsTag(htmlPath) {
+  if (!fs.existsSync(htmlPath)) return
+  let html = fs.readFileSync(htmlPath, 'utf8')
+  if (!html.includes(DEVTOOLS_SCRIPT_TAG)) return
 
-  watcher.on('change', () => {
-    console.log('\n📝 Config changed! Rebuilding...');
-    runBuild(configPath, outDir);
-  });
+  // Remove the comment line + script line
+  html = html
+    .replace(/[ \t]*<!-- mizumi-devtools -->\n/g, '')
+    .replace(/[ \t]*<script src="\.mizumi\/mizumi-devtools\.js"><\/script>\n?/g, '')
 
-  watcher.on('error', err => {
-    console.error('❌ Watcher error:', err);
-  });
+  fs.writeFileSync(htmlPath, html)
 }
 
-function runBuild(configPath, outDir) {
-  try {
-    // Clear require cache so config changes are picked up
-    delete require.cache[require.resolve(configPath)];
+/**
+ * watch(loadConfig, Mizumi, generateDevToolsScript)
+ * Called from cli/index.js after an initial build.
+ */
+export async function watch(loadConfig, Mizumi, generateDevToolsScript) {
+  const cwd        = process.cwd()
+  const configPath = path.join(cwd, 'mizumi.config.js')
+  const outDir     = path.join(cwd, '.mizumi')
+
+  if (!chokidar) {
+    console.error('❌ chokidar not installed — run: npm install chokidar')
+    process.exit(1)
+  }
 
-    const config = require(configPath);
-    const mizumi = new Mizumi(config);
-    mizumi.build(outDir);
+  // ── Write devtools JS and inject into all HTML files ──
+  const writeDevTools = async () => {
+    try {
+      const config = await loadConfig()
+      const meta = {
+        tokens:    config.tokens    || {},
+        patterns:  config.patterns  || {},
+        animations:config.animations|| {},
+      }
+      const devtoolsJS = generateDevToolsScript(meta)
+      const outPath    = path.join(outDir, 'mizumi-devtools.js')
+      fs.writeFileSync(outPath, devtoolsJS)
+      console.log(`✅ DevTools: ${path.relative(cwd, outPath)}`)
 
-    console.log(`⏰ ${new Date().toLocaleTimeString()} — Ready!\n`);
-  } catch (err) {
-    console.error('❌ Build failed:', err.message);
-    console.log('   Fix the error and save again...\n');
+      // Inject into all HTML files
+      const htmlFiles = findHTMLFiles(cwd)
+      htmlFiles.forEach(injectDevToolsTag)
+      if (htmlFiles.length > 0) {
+        console.log(`   💮 DevTools active on ${htmlFiles.length} HTML file(s) — open in browser\n`)
+      }
+    } catch (err) {
+      console.error('❌ DevTools build failed:', err.message)
+    }
+  }
+
+  // ── Cleanup on exit — strip injected tags from HTML ──
+  const cleanup = () => {
+    console.log('\n💮 Mizumi: Stopping watch — cleaning up DevTools tags...')
+    findHTMLFiles(cwd).forEach(removeDevToolsTag)
+    console.log('✅ Done.\n')
+    process.exit(0)
+  }
+  process.on('SIGINT',  cleanup)
+  process.on('SIGTERM', cleanup)
+
+  const patterns = [
+    configPath,
+    path.join(cwd, '**/*.mizu'),
+  ]
+
+  console.log('💮 Mizumi watching for changes...')
+  console.log('   Watching: mizumi.config.js + **/*.mizu')
+  console.log('   DevTools: active in watch mode (auto-removed on Ctrl+C)')
+  console.log('   Press Ctrl+C to stop\n')
+
+  // Write devtools on start
+  await writeDevTools()
+
+  const watcher = chokidar.watch(patterns, {
+    persistent:    true,
+    ignoreInitial: true,
+    ignored:       /node_modules/,
+  })
+
+  const rebuild = async (filePath) => {
+    console.log('\n📝 Changed: ' + path.relative(cwd, filePath) + ' — rebuilding...')
+    try {
+      const config = await loadConfig()
+      const mizumi = new Mizumi(config)
+      const outDir_ = path.join(cwd, '.mizumi')
+
+      // Rebuild CSS + runtime
+      mizumi.build(outDir_)
+
+      // Rebuild devtools with fresh config
+      await writeDevTools()
+
+      console.log('⏰ ' + new Date().toLocaleTimeString() + ' — Ready!\n')
+    } catch (err) {
+      console.error('❌ Build failed:', err.message)
+      console.log('   Fix the error and save again...\n')
+    }
   }
-}
 
-export { watch };
+  watcher.on('change', rebuild)
+  watcher.on('add',    rebuild)
+  watcher.on('error',  err => console.error('❌ Watcher error:', err))
+}