zero-query 1.1.1 → 1.2.0

package/cli/commands/create.js

@@ -1,121 +1,137 @@
-// cli/commands/create.js - scaffold a new zQuery project
-//
-// Templates live in cli/scaffold/<variant>/ (default or minimal).
-// Reads template files, replaces {{NAME}} with the project name,
-// and writes them into the target directory.
-
-const fs   = require('fs');
-const path = require('path');
-const { execSync, spawn } = require('child_process');
-const { flag } = require('../args');
-
-/**
- * Recursively collect every file under `dir`, returning paths relative to `dir`.
- */
-function walkDir(dir, prefix = '') {
-  const entries = [];
-  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
-    const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
-    if (entry.isDirectory()) {
-      entries.push(...walkDir(path.join(dir, entry.name), rel));
-    } else {
-      entries.push(rel);
-    }
-  }
-  return entries;
-}
-
-function createProject(args) {
-  // First positional arg after "create" is the target dir (skip flags)
-  const dirArg = args.slice(1).find(a => !a.startsWith('-'));
-  const target = dirArg ? path.resolve(dirArg) : process.cwd();
-  const name   = path.basename(target);
-
-  // Determine scaffold variant: --minimal / -m  or  --ssr / -s  or  default
-  const variant = flag('minimal', 'm') ? 'minimal'
-                : flag('ssr', 's')     ? 'ssr'
-                :                        'default';
-
-  // Guard: refuse to overwrite existing files
-  const checkFiles = ['index.html', 'global.css', 'app', 'assets'];
-  if (variant === 'ssr') checkFiles.push('server');
-  const conflicts = checkFiles.filter(f =>
-    fs.existsSync(path.join(target, f))
-  );
-  if (conflicts.length) {
-    console.error(`\n  ✗ Directory already contains: ${conflicts.join(', ')}`);
-    console.error(`  Aborting to avoid overwriting existing files.\n`);
-    process.exit(1);
-  }
-
-  console.log(`\n  zQuery - Create Project (${variant})\n`);
-  console.log(`  Scaffolding into ${target}\n`);
-
-  // Resolve the scaffold template directory for the chosen variant
-  const scaffoldDir = path.resolve(__dirname, '..', 'scaffold', variant);
-
-  if (!fs.existsSync(scaffoldDir)) {
-    console.error(`\n  ✗ Scaffold variant "${variant}" not found.\n`);
-    process.exit(1);
-  }
-
-  // Walk the scaffold directory and copy each file
-  const templateFiles = walkDir(scaffoldDir);
-
-  for (const rel of templateFiles) {
-    const src = path.join(scaffoldDir, rel);
-    let content = fs.readFileSync(src, 'utf-8');
-
-    // Replace the {{NAME}} placeholder with the actual project name
-    content = content.replace(/\{\{NAME\}\}/g, name);
-
-    const dest = path.join(target, rel);
-    fs.mkdirSync(path.dirname(dest), { recursive: true });
-    fs.writeFileSync(dest, content, 'utf-8');
-    console.log(`  ✓ ${rel}`);
-  }
-
-  const devCmd = `npx zquery dev${target !== process.cwd() ? ` ${dirArg}` : ''}`;
-
-  if (variant === 'ssr') {
-    console.log(`\n  Installing dependencies...\n`);
-    // Install zero-query from the same package that provides this CLI
-    // (works both in local dev and when installed from npm)
-    const zqRoot = path.resolve(__dirname, '..', '..');
-    try {
-      execSync(`npm install "${zqRoot}"`, { cwd: target, stdio: 'inherit' });
-    } catch {
-      console.error(`\n  ✗ npm install failed. Run it manually:\n\n    cd ${dirArg || '.'}\n    npm install\n    node server/index.js\n`);
-      process.exit(1);
-    }
-
-    // Copy zquery.min.js into the project root so the SSR server can serve it
-    const zqMin = path.join(target, 'node_modules', 'zero-query', 'dist', 'zquery.min.js');
-    if (fs.existsSync(zqMin)) {
-      fs.copyFileSync(zqMin, path.join(target, 'zquery.min.js'));
-      console.log(`  ✓ zquery.min.js`);
-    }
-
-    console.log(`\n  Starting SSR server...\n`);
-    const child = spawn('node', ['server/index.js'], { cwd: target, stdio: 'inherit' });
-
-    setTimeout(() => {
-      const open = process.platform === 'win32' ? 'start'
-                 : process.platform === 'darwin' ? 'open' : 'xdg-open';
-      try { execSync(`${open} http://localhost:3000`, { stdio: 'ignore' }); } catch {}
-    }, 500);
-
-    process.on('SIGINT',  () => { child.kill(); process.exit(); });
-    process.on('SIGTERM', () => { child.kill(); process.exit(); });
-    child.on('exit', (code) => process.exit(code || 0));
-    return; // keep process alive for the server
-  } else {
-    console.log(`
-  Done! Next steps:
-
-    ${devCmd}
-`);
-  }
-}
-
-module.exports = createProject;
+// cli/commands/create.js - scaffold a new zQuery project
+//
+// Templates live in cli/scaffold/<variant>/ (default or minimal).
+// Reads template files, replaces {{NAME}} with the project name,
+// and writes them into the target directory.
+
+const fs   = require('fs');
+const path = require('path');
+const { execSync, spawn } = require('child_process');
+const { flag } = require('../args');
+
+/**
+ * Recursively collect every file under `dir`, returning paths relative to `dir`.
+ */
+function walkDir(dir, prefix = '') {
+  const entries = [];
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
+    if (entry.isDirectory()) {
+      entries.push(...walkDir(path.join(dir, entry.name), rel));
+    } else {
+      entries.push(rel);
+    }
+  }
+  return entries;
+}
+
+function createProject(args) {
+  // First positional arg after "create" is the target dir (skip flags)
+  const dirArg = args.slice(1).find(a => !a.startsWith('-'));
+  const target = dirArg ? path.resolve(dirArg) : process.cwd();
+  const name   = path.basename(target);
+
+  // Determine scaffold variant: --minimal / -m  or  --ssr / -s  or --webrtc-demo / -w  or  default
+  const variant = flag('minimal', 'm')      ? 'minimal'
+                : flag('ssr', 's')          ? 'ssr'
+                : flag('webrtc-demo', 'w')  ? 'webrtc'
+                :                             'default';
+
+  // Guard: refuse to overwrite existing files
+  const checkFiles = ['index.html', 'global.css', 'app', 'assets'];
+  if (variant === 'ssr') checkFiles.push('server');
+  const conflicts = checkFiles.filter(f =>
+    fs.existsSync(path.join(target, f))
+  );
+  if (conflicts.length) {
+    console.error(`\n  ✗ Directory already contains: ${conflicts.join(', ')}`);
+    console.error(`  Aborting to avoid overwriting existing files.\n`);
+    process.exit(1);
+  }
+
+  console.log(`\n  zQuery - Create Project (${variant})\n`);
+  console.log(`  Scaffolding into ${target}\n`);
+
+  // Resolve the scaffold template directory for the chosen variant
+  const scaffoldDir = path.resolve(__dirname, '..', 'scaffold', variant);
+
+  if (!fs.existsSync(scaffoldDir)) {
+    console.error(`\n  ✗ Scaffold variant "${variant}" not found.\n`);
+    process.exit(1);
+  }
+
+  // Walk the scaffold directory and copy each file
+  const templateFiles = walkDir(scaffoldDir);
+
+  for (const rel of templateFiles) {
+    const src = path.join(scaffoldDir, rel);
+    let content = fs.readFileSync(src, 'utf-8');
+
+    // Replace the {{NAME}} placeholder with the actual project name
+    content = content.replace(/\{\{NAME\}\}/g, name);
+
+    const dest = path.join(target, rel);
+    fs.mkdirSync(path.dirname(dest), { recursive: true });
+    fs.writeFileSync(dest, content, 'utf-8');
+    console.log(`  ✓ ${rel}`);
+  }
+
+  const devCmd = `npx zquery dev${target !== process.cwd() ? ` ${dirArg}` : ''}`;
+
+  // Copy zquery.min.js from the package's pre-built dist into the project root
+  // so file:// previews and the dev/SSR servers all serve the same minified
+  // bundle that ships with the installed zero-query package. The dev server
+  // also intercepts requests for "zquery.min.js" and will fall back to the
+  // package copy if the file is missing, so this is a convenience for direct
+  // file access (Open in Browser, etc.).
+  {
+    const zqRoot = path.resolve(__dirname, '..', '..');
+    const zqMin  = path.join(zqRoot, 'dist', 'zquery.min.js');
+    if (fs.existsSync(zqMin)) {
+      fs.copyFileSync(zqMin, path.join(target, 'zquery.min.js'));
+      console.log(`  ✓ zquery.min.js`);
+    }
+  }
+
+  if (variant === 'ssr') {
+    console.log(`\n  Installing dependencies...\n`);
+    // Install zero-query from the same package that provides this CLI
+    // (works both in local dev and when installed from npm)
+    const zqRoot = path.resolve(__dirname, '..', '..');
+    try {
+      execSync(`npm install "${zqRoot}"`, { cwd: target, stdio: 'inherit' });
+    } catch {
+      console.error(`\n  ✗ npm install failed. Run it manually:\n\n    cd ${dirArg || '.'}\n    npm install\n    node server/index.js\n`);
+      process.exit(1);
+    }
+
+    // Copy zquery.min.js into the project root so the SSR server can serve it
+    const zqMin = path.join(target, 'node_modules', 'zero-query', 'dist', 'zquery.min.js');
+    if (fs.existsSync(zqMin)) {
+      fs.copyFileSync(zqMin, path.join(target, 'zquery.min.js'));
+      console.log(`  ✓ zquery.min.js`);
+    }
+
+    console.log(`\n  Starting SSR server...\n`);
+    const child = spawn('node', ['server/index.js'], { cwd: target, stdio: 'inherit' });
+
+    setTimeout(() => {
+      const open = process.platform === 'win32' ? 'start'
+                 : process.platform === 'darwin' ? 'open' : 'xdg-open';
+      try { execSync(`${open} http://localhost:3000`, { stdio: 'ignore' }); } catch {}
+    }, 500);
+
+    process.on('SIGINT',  () => { child.kill(); process.exit(); });
+    process.on('SIGTERM', () => { child.kill(); process.exit(); });
+    child.on('exit', (code) => process.exit(code || 0));
+    return; // keep process alive for the server
+  } else {
+    console.log(`
+  Done! Next steps:
+
+    ${devCmd}
+`);
+  }
+}
+
+module.exports = createProject;

package/cli/commands/dev/devtools/index.js

@@ -1,56 +1,56 @@
-/**
- * cli/commands/dev/devtools/index.js - DevTools HTML assembler
- *
- * Reads CSS, HTML, and JS partials from this folder and concatenates them
- * into a single self-contained HTML page served at /_devtools.
- *
- * Communication:
- *   - window.opener: direct DOM access (same-origin popup)
- *   - BroadcastChannel('__zq_devtools'): cross-tab fallback
- */
-
-'use strict';
-
-const { readFileSync } = require('fs');
-const { join } = require('path');
-
-const dir = __dirname;
-const read = (f) => readFileSync(join(dir, f), 'utf8');
-
-const css = read('styles.css');
-const html = read('panel.html');
-
-const jsFiles = [
-  'js/core.js',
-  'js/tabs.js',
-  'js/source.js',
-  'js/elements.js',
-  'js/network.js',
-  'js/components.js',
-  'js/performance.js',
-  'js/router.js',
-  'js/stats.js'
-];
-
-const js = jsFiles.map(read).join('\n\n');
-
-module.exports = `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>zQuery DevTools</title>
-<style>
-${css}
-</style>
-</head>
-<body>
-${html}
-<script>
-(function() {
-'use strict';
-${js}
-})();
-</script>
-</body>
-</html>`;
+/**
+ * cli/commands/dev/devtools/index.js - DevTools HTML assembler
+ *
+ * Reads CSS, HTML, and JS partials from this folder and concatenates them
+ * into a single self-contained HTML page served at /_devtools.
+ *
+ * Communication:
+ *   - window.opener: direct DOM access (same-origin popup)
+ *   - BroadcastChannel('__zq_devtools'): cross-tab fallback
+ */
+
+'use strict';
+
+const { readFileSync } = require('fs');
+const { join } = require('path');
+
+const dir = __dirname;
+const read = (f) => readFileSync(join(dir, f), 'utf8');
+
+const css = read('styles.css');
+const html = read('panel.html');
+
+const jsFiles = [
+  'js/core.js',
+  'js/tabs.js',
+  'js/source.js',
+  'js/elements.js',
+  'js/network.js',
+  'js/components.js',
+  'js/performance.js',
+  'js/router.js',
+  'js/stats.js'
+];
+
+const js = jsFiles.map(read).join('\n\n');
+
+module.exports = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>zQuery DevTools</title>
+<style>
+${css}
+</style>
+</head>
+<body>
+${html}
+<script>
+(function() {
+'use strict';
+${js}
+})();
+</script>
+</body>
+</html>`;

package/cli/commands/dev/devtools/js/components.js

@@ -1,49 +1,49 @@
-// ===================================================================
-// Components
-// ===================================================================
-function renderComponents() {
-  var list = document.getElementById('comp-list');
-  if (!targetWin || !targetWin.$) {
-    list.innerHTML = '<div class="empty-state">Waiting for zQuery to load...</div>';
-    return;
-  }
-  var $ = targetWin.$;
-  var html = '';
-
-  // Iterate mounted components if components registry exists
-  if ($ && typeof $.components === 'function') {
-    var names = Object.keys($.components());
-    if (!names.length) {
-      list.innerHTML = '<div class="empty-state">No components registered</div>';
-      return;
-    }
-    for (var n = 0; n < names.length; n++) {
-      var name = names[n];
-      // Find mounted instances (exclude scoped <style> tags that carry data-zq-component)
-      var hosts = targetDoc.querySelectorAll(name + ':not(style)');
-      html += '<div class="comp-card">';
-      html += '<div class="comp-name">&lt;' + name + '&gt;</div>';
-      html += '<div class="comp-host">' + hosts.length + ' instance' + (hosts.length !== 1 ? 's' : '') + ' mounted</div>';
-      hosts.forEach(function(host) {
-        try {
-          var inst = $.getInstance(host);
-          if (inst && inst.state) {
-            html += '<div class="comp-state">';
-            var keys = Object.keys(inst.state);
-            for (var k = 0; k < keys.length; k++) {
-              var key = keys[k];
-              var val = inst.state[key];
-              var display = typeof val === 'object' ? JSON.stringify(val) : String(val);
-              if (display.length > 80) display = display.slice(0, 80) + '...';
-              html += '<div class="detail-row"><span class="comp-state-key">' + esc(key) + '</span><span class="comp-state-val">' + esc(display) + '</span></div>';
-            }
-            html += '</div>';
-          }
-        } catch(e) {}
-      });
-      html += '</div>';
-    }
-  }
-  if (!html) html = '<div class="empty-state">No components found</div>';
-  list.innerHTML = html;
-}
+// ===================================================================
+// Components
+// ===================================================================
+function renderComponents() {
+  var list = document.getElementById('comp-list');
+  if (!targetWin || !targetWin.$) {
+    list.innerHTML = '<div class="empty-state">Waiting for zQuery to load...</div>';
+    return;
+  }
+  var $ = targetWin.$;
+  var html = '';
+
+  // Iterate mounted components if components registry exists
+  if ($ && typeof $.components === 'function') {
+    var names = Object.keys($.components());
+    if (!names.length) {
+      list.innerHTML = '<div class="empty-state">No components registered</div>';
+      return;
+    }
+    for (var n = 0; n < names.length; n++) {
+      var name = names[n];
+      // Find mounted instances (exclude scoped <style> tags that carry data-zq-component)
+      var hosts = targetDoc.querySelectorAll(name + ':not(style)');
+      html += '<div class="comp-card">';
+      html += '<div class="comp-name">&lt;' + name + '&gt;</div>';
+      html += '<div class="comp-host">' + hosts.length + ' instance' + (hosts.length !== 1 ? 's' : '') + ' mounted</div>';
+      hosts.forEach(function(host) {
+        try {
+          var inst = $.getInstance(host);
+          if (inst && inst.state) {
+            html += '<div class="comp-state">';
+            var keys = Object.keys(inst.state);
+            for (var k = 0; k < keys.length; k++) {
+              var key = keys[k];
+              var val = inst.state[key];
+              var display = typeof val === 'object' ? JSON.stringify(val) : String(val);
+              if (display.length > 80) display = display.slice(0, 80) + '...';
+              html += '<div class="detail-row"><span class="comp-state-key">' + esc(key) + '</span><span class="comp-state-val">' + esc(display) + '</span></div>';
+            }
+            html += '</div>';
+          }
+        } catch(e) {}
+      });
+      html += '</div>';
+    }
+  }
+  if (!html) html = '<div class="empty-state">No components found</div>';
+  list.innerHTML = html;
+}