@ozsarman/clarityjs 0.6.0

package/src/clarity-bundle.js

@@ -0,0 +1,332 @@
+/**
+ * Clarity.js Build Bundler
+ *
+ * Compiles all .clarity files in a directory and produces a production bundle
+ * with tree-shaking, dead-code elimination, and minification.
+ *
+ * Strategy
+ * ─────────
+ * 1. Compile every  .clarity → .js  using the Clarity compiler
+ * 2. Bundle with esbuild (if available) or produce a concatenated
+ *    plain-JS bundle (zero-dep fallback)
+ * 3. In production mode, minify with esbuild's built-in minifier
+ * 4. Output a single  dist/bundle.js  (+ optional source map)
+ *
+ * esbuild is an optional peer dependency:
+ *   npm install --save-dev esbuild
+ *
+ * Without esbuild the bundler still works — it compiles + concatenates files
+ * with an ES-module shim for environments that support <script type="module">.
+ *
+ * CLI (via clarity cli):
+ *   clarity bundle <entry>  [--out dist/] [--minify] [--sourcemap] [--watch]
+ *
+ * Programmatic:
+ *   import { bundle } from '@ozsarman/clarityjs/bundle'
+ *   await bundle({ entry: './examples/demo/main.js', outdir: './dist' })
+ *
+ * Author: Claude (Anthropic)
+ */
+
+import fs          from 'fs';
+import path        from 'path';
+import { compile } from './index.js';
+
+const C = {
+  reset: '\x1b[0m', green: '\x1b[32m', yellow: '\x1b[33m',
+  red:   '\x1b[31m', cyan: '\x1b[36m', gray: '\x1b[90m', bold: '\x1b[1m',
+};
+
+function log(color, label, msg) {
+  const ts = new Date().toLocaleTimeString('en', { hour12: false });
+  console.log(`${C.gray}${ts}${C.reset} ${color}${label}${C.reset} ${msg}`);
+}
+
+// ─── Step 1: Compile .clarity files to .js ───────────────────────────────────
+/**
+ * Compile all .clarity files found in a directory tree.
+ * Returns a Map of { outputPath → compiledCode }.
+ *
+ * @param {string}  dir       Root directory to scan
+ * @param {object}  opts      Compile options (runtimePath, sourceMap)
+ * @returns {{ compiled: Map<string,string>, errors: {file,message}[] }}
+ */
+export function compileDir(dir, opts = {}) {
+  const compiled = new Map();
+  const errors   = [];
+
+  function scan(d) {
+    for (const entry of fs.readdirSync(d, { withFileTypes: true })) {
+      const full = path.join(d, entry.name);
+      if (entry.isDirectory()) { scan(full); continue; }
+      if (!entry.name.endsWith('.clarity')) continue;
+
+      try {
+        const src     = fs.readFileSync(full, 'utf8');
+        const outPath = full.replace(/\.clarity$/, '.js');
+        const { code } = compile(src, {
+          filename:    full,
+          sourceFile:  full,
+          outputFile:  outPath,
+          runtimePath: opts.runtimePath ?? './clarity-runtime.js',
+          routerPath:  opts.routerPath  ?? './clarity-router.js',
+          sourceMap:   opts.sourceMap   ?? false,
+          ...opts,
+        });
+        compiled.set(outPath, code);
+        log(C.green, '✓ compiled', path.relative(dir, full));
+      } catch (err) {
+        errors.push({ file: full, message: err.message });
+        log(C.red, '✗ error', `${path.relative(dir, full)}: ${err.message}`);
+      }
+    }
+  }
+
+  scan(dir);
+  return { compiled, errors };
+}
+
+// ─── Step 2: Write compiled .js files ────────────────────────────────────────
+/**
+ * Write all compiled files to disk (replaces .clarity → .js in-place).
+ */
+export function writeCompiled(compiled) {
+  for (const [outPath, code] of compiled) {
+    fs.writeFileSync(outPath, code, 'utf8');
+  }
+}
+
+// ─── Step 3: Bundle with esbuild ─────────────────────────────────────────────
+/**
+ * Bundle an entry-point file with esbuild.
+ * esbuild is an optional peer dep — gracefully falls back if absent.
+ *
+ * @param {object} opts
+ * @param {string}   opts.entry      Entry-point JS file (after clarity compile)
+ * @param {string}   opts.outfile    Output bundle path (default: dist/bundle.js)
+ * @param {boolean}  opts.minify     Minify output (default: false)
+ * @param {boolean}  opts.sourcemap  Emit source map (default: false)
+ * @param {string}   opts.target     JS target (default: 'es2020')
+ * @param {string[]} opts.external   External package names (default: [])
+ * @returns {Promise<{ok: boolean, outfile: string, fallback?: boolean}>}
+ */
+export async function bundleWithEsbuild(opts = {}) {
+  const {
+    entry,
+    outfile    = 'dist/bundle.js',
+    minify     = false,
+    sourcemap  = false,
+    target     = 'es2020',
+    external   = [],
+  } = opts;
+
+  // Ensure output directory exists
+  fs.mkdirSync(path.dirname(outfile), { recursive: true });
+
+  // Try esbuild
+  try {
+    const esbuild = await import('esbuild');
+    log(C.cyan, '⚙  esbuild', `${entry} → ${outfile}${minify ? ' (minified)' : ''}`);
+
+    const result = await esbuild.build({
+      entryPoints:  [entry],
+      bundle:       true,
+      outfile,
+      minify,
+      sourcemap,
+      target,
+      external,
+      format:       'esm',
+      treeShaking:  true,
+      logLevel:     'warning',
+    });
+
+    if (result.errors.length > 0) {
+      result.errors.forEach(e => log(C.red, '✗ esbuild', e.text));
+      return { ok: false, outfile };
+    }
+
+    const size = fs.statSync(outfile).size;
+    log(C.green, '✓ bundle', `${outfile} (${_fmtBytes(size)}${minify ? ', minified' : ''})`);
+    return { ok: true, outfile };
+  } catch (err) {
+    if (err.code === 'ERR_MODULE_NOT_FOUND' || err.message?.includes('Cannot find module')) {
+      log(C.yellow, '⚠  esbuild', 'not installed — using fallback concatenation bundler');
+      log(C.yellow, '  tip', 'npm install --save-dev esbuild   for full tree-shaking + minification');
+      return bundleFallback({ entry, outfile, sourcemap });
+    }
+    throw err;
+  }
+}
+
+// ─── Fallback: concatenation bundler (no esbuild) ────────────────────────────
+/**
+ * Zero-dependency fallback bundler.
+ * Resolves local ES module imports recursively and concatenates into one file.
+ * Does NOT tree-shake or minify — suitable for development or small projects.
+ */
+export async function bundleFallback({ entry, outfile = 'dist/bundle.js', sourcemap = false } = {}) {
+  fs.mkdirSync(path.dirname(outfile), { recursive: true });
+  const visited = new Set();
+  const chunks  = [];
+
+  function collect(filePath) {
+    const abs = path.resolve(filePath);
+    if (visited.has(abs)) return;
+    visited.add(abs);
+
+    let code;
+    try {
+      code = fs.readFileSync(abs, 'utf8');
+    } catch (_) {
+      log(C.yellow, '⚠  skip', `cannot read ${abs}`);
+      return;
+    }
+
+    // Resolve local imports first (depth-first)
+    const importRe = /^import\s+.*?from\s+['"](\.[^'"]+)['"]/gm;
+    let m;
+    while ((m = importRe.exec(code)) !== null) {
+      const importPath = m[1];
+      const resolved   = path.resolve(path.dirname(abs), importPath);
+      // Try with extension variants
+      for (const ext of ['', '.js', '.mjs', '/index.js']) {
+        if (fs.existsSync(resolved + ext)) {
+          collect(resolved + ext);
+          break;
+        }
+      }
+    }
+
+    // Strip import declarations (already collected above) and export keywords
+    const stripped = code
+      .replace(/^import\s+.*?from\s+['"][^'"]+['"];?\s*\n?/gm, '')
+      .replace(/^export\s+default\s+/gm, 'var _default_export = ')
+      .replace(/^export\s+\{[^}]*\};?\s*\n?/gm, '')
+      .replace(/^export\s+(function|class|const|let|var)\s+/gm, '$1 ');
+
+    chunks.push(`/* ${path.relative(process.cwd(), abs)} */\n${stripped}`);
+  }
+
+  collect(entry);
+  const bundle = chunks.join('\n\n');
+  fs.writeFileSync(outfile, bundle, 'utf8');
+  const size = fs.statSync(outfile).size;
+  log(C.green, '✓ bundle', `${outfile} (${_fmtBytes(size)}, fallback — no tree-shaking)`);
+  return { ok: true, outfile, fallback: true };
+}
+
+// ─── Main bundle() orchestrator ──────────────────────────────────────────────
+/**
+ * Full build pipeline:
+ *   1. Compile all .clarity files in the project directory
+ *   2. Write compiled .js files
+ *   3. Bundle the entry-point with esbuild (or fallback)
+ *   4. Optionally watch for changes and rebuild
+ *
+ * @param {object} opts
+ * @param {string}   opts.entry       Entry-point .js file (e.g. './examples/demo/main.js')
+ * @param {string}   opts.projectDir  Directory containing .clarity sources (default: cwd)
+ * @param {string}   opts.outfile     Bundle output path (default: 'dist/bundle.js')
+ * @param {boolean}  opts.minify      Minify (default: false in dev, true in prod)
+ * @param {boolean}  opts.sourcemap   Emit source map (default: true)
+ * @param {boolean}  opts.watch       Re-bundle on file changes (default: false)
+ * @param {string}   opts.mode        'development' | 'production' (default: 'development')
+ * @returns {Promise<{ ok: boolean, outfile: string, errors: [] }>}
+ */
+export async function bundle(opts = {}) {
+  const {
+    entry,
+    projectDir  = process.cwd(),
+    outfile     = 'dist/bundle.js',
+    minify      = (opts.mode === 'production'),
+    sourcemap   = true,
+    watch       = false,
+    mode        = 'development',
+  } = opts;
+
+  if (!entry) throw new Error('[Clarity Bundle] opts.entry is required');
+
+  const startMs = Date.now();
+  console.log(`\n${C.bold}${C.cyan}Clarity.js Build${C.reset} (${mode})\n`);
+
+  // ── Phase 1: Compile .clarity files ──────────────────────────────────────
+  const { compiled, errors } = compileDir(projectDir, { sourceMap: sourcemap && mode !== 'production' });
+  writeCompiled(compiled);
+  console.log('');
+
+  if (errors.length > 0 && compiled.size === 0) {
+    console.error(`${C.red}Build failed — ${errors.length} compile error(s)${C.reset}`);
+    return { ok: false, outfile, errors };
+  }
+
+  // ── Phase 2: Bundle ───────────────────────────────────────────────────────
+  const result = await bundleWithEsbuild({ entry, outfile, minify, sourcemap, target: 'es2020' });
+
+  const elapsed = Date.now() - startMs;
+  if (result.ok) {
+    console.log(`\n${C.green}✓ Build complete${C.reset} in ${elapsed}ms`);
+    if (errors.length > 0) {
+      console.log(`${C.yellow}⚠  ${errors.length} compile error(s) — bundle may be incomplete${C.reset}`);
+    }
+  }
+
+  // ── Phase 3: Watch mode ───────────────────────────────────────────────────
+  if (watch) {
+    log(C.cyan, '◆ watching', projectDir);
+    try {
+      fs.watch(projectDir, { recursive: true }, async (event, filename) => {
+        if (!filename) return;
+        if (filename.endsWith('.clarity') || filename.endsWith('.js') && !filename.endsWith('.bundle.js')) {
+          log(C.yellow, '◆ changed', filename);
+          // Incremental compile + re-bundle
+          if (filename.endsWith('.clarity')) {
+            const full = path.join(projectDir, filename);
+            try {
+              const src     = fs.readFileSync(full, 'utf8');
+              const outPath = full.replace(/\.clarity$/, '.js');
+              const { code } = compile(src, { filename: full, runtimePath: './clarity-runtime.js' });
+              fs.writeFileSync(outPath, code);
+              log(C.green, '✓ compiled', filename);
+            } catch (e) {
+              log(C.red, '✗ error', e.message);
+              return;
+            }
+          }
+          await bundleWithEsbuild({ entry, outfile, minify, sourcemap, target: 'es2020' });
+        }
+      });
+    } catch (_) {
+      log(C.yellow, '⚠  watch', 'recursive watch not available in this environment');
+    }
+  }
+
+  return { ok: result.ok, outfile, errors };
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function _fmtBytes(bytes) {
+  if (bytes < 1024)       return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
+}
+
+// ─── CLI entry (when called directly) ────────────────────────────────────────
+// Usage: node src/clarity-bundle.js <entry> [--out dist/bundle.js] [--minify] [--watch]
+if (import.meta.url === new URL(process.argv[1], 'file://').href) {
+  const args    = process.argv.slice(2);
+  const entry   = args.find(a => !a.startsWith('--'));
+  const outfile = args[args.indexOf('--out') + 1] ?? 'dist/bundle.js';
+  const minify  = args.includes('--minify');
+  const watch   = args.includes('--watch');
+  const mode    = minify ? 'production' : 'development';
+
+  if (!entry) {
+    console.error('Usage: node clarity-bundle.js <entry.js> [--out dist/bundle.js] [--minify] [--watch]');
+    process.exit(1);
+  }
+
+  bundle({ entry, outfile, minify, watch, mode, sourcemap: true })
+    .then(({ ok }) => { if (!ok && !watch) process.exit(1); })
+    .catch(err => { console.error(err); process.exit(1); });
+}