@sprlab/wccompiler 0.0.1

package/lib/css-scoper.js

@@ -0,0 +1,167 @@
+/**
+ * CSS Scoper — prefixes CSS selectors with the component tag name.
+ *
+ * Handles:
+ * - Simple selectors (.class, #id, element)
+ * - Comma-separated selectors
+ * - At-rules (@media, @keyframes) — preserved without prefixing
+ * - Nested selectors inside at-rules — still prefixed
+ */
+
+/**
+ * Scope CSS by prefixing each selector with the component tag name.
+ *
+ * @param {string} css - Raw CSS string
+ * @param {string} tagName - Component tag name (e.g. "wcc-hi")
+ * @returns {string} Scoped CSS string
+ */
+export function scopeCSS(css, tagName) {
+  if (!css || !css.trim()) return '';
+
+  const result = [];
+  let i = 0;
+
+  while (i < css.length) {
+    // Skip whitespace
+    if (/\s/.test(css[i])) {
+      result.push(css[i]);
+      i++;
+      continue;
+    }
+
+    // Detect at-rules
+    if (css[i] === '@') {
+      const atResult = consumeAtRule(css, i, tagName);
+      result.push(atResult.text);
+      i = atResult.end;
+      continue;
+    }
+
+    // Detect closing brace (end of a block)
+    if (css[i] === '}') {
+      result.push('}');
+      i++;
+      continue;
+    }
+
+    // Otherwise, it's a selector — read until '{'
+    const selectorEnd = css.indexOf('{', i);
+    if (selectorEnd === -1) {
+      // No more blocks, append remaining text as-is
+      result.push(css.slice(i));
+      break;
+    }
+
+    const rawSelector = css.slice(i, selectorEnd);
+    const scopedSelector = prefixSelectors(rawSelector, tagName);
+    result.push(scopedSelector);
+
+    // Now consume the declaration block (until matching '}')
+    const blockResult = consumeBlock(css, selectorEnd);
+    result.push(blockResult.text);
+    i = blockResult.end;
+  }
+
+  return result.join('');
+}
+
+
+/**
+ * Prefix comma-separated selectors with the tag name.
+ * e.g. ".foo, .bar" → "tag .foo, tag .bar"
+ */
+function prefixSelectors(raw, tagName) {
+  return raw
+    .split(',')
+    .map(s => {
+      const trimmed = s.trim();
+      if (!trimmed) return s;
+      // Preserve the leading whitespace from the original
+      const leadingWs = s.match(/^(\s*)/)[1];
+      return `${leadingWs}${tagName} ${trimmed}`;
+    })
+    .join(',');
+}
+
+/**
+ * Consume a { ... } block starting at the opening brace.
+ * Returns the text (including braces) and the position after the closing brace.
+ */
+function consumeBlock(css, start) {
+  let depth = 0;
+  let i = start;
+  const chars = [];
+
+  while (i < css.length) {
+    chars.push(css[i]);
+    if (css[i] === '{') depth++;
+    if (css[i] === '}') {
+      depth--;
+      if (depth === 0) {
+        return { text: chars.join(''), end: i + 1 };
+      }
+    }
+    i++;
+  }
+
+  // Unclosed block — return what we have
+  return { text: chars.join(''), end: i };
+}
+
+/**
+ * Consume an at-rule starting at '@'.
+ * Handles both block at-rules (@media { ... }) and statement at-rules (@import ...).
+ * For block at-rules, recursively scopes selectors inside.
+ */
+function consumeAtRule(css, start, tagName) {
+  // Read the at-rule prelude (everything up to '{' or ';')
+  let i = start;
+  const prelude = [];
+
+  while (i < css.length && css[i] !== '{' && css[i] !== ';') {
+    prelude.push(css[i]);
+    i++;
+  }
+
+  if (i >= css.length) {
+    // Unterminated at-rule
+    return { text: prelude.join(''), end: i };
+  }
+
+  if (css[i] === ';') {
+    // Statement at-rule (e.g. @import, @charset)
+    prelude.push(';');
+    return { text: prelude.join(''), end: i + 1 };
+  }
+
+  // Block at-rule — css[i] === '{'
+  const preludeStr = prelude.join('');
+  const atName = preludeStr.trim().split(/\s/)[0]; // e.g. "@media", "@keyframes"
+
+  // @keyframes: don't scope inner selectors (they're keyframe stops, not CSS selectors)
+  if (atName === '@keyframes' || atName === '@-webkit-keyframes') {
+    const block = consumeBlock(css, i);
+    return { text: preludeStr + block.text, end: block.end };
+  }
+
+  // For @media and other nesting at-rules: scope the inner selectors
+  // We need to parse the inner content recursively
+  const innerStart = i + 1; // after '{'
+  let depth = 1;
+  let j = innerStart;
+
+  // Find the matching closing brace
+  while (j < css.length && depth > 0) {
+    if (css[j] === '{') depth++;
+    if (css[j] === '}') depth--;
+    if (depth > 0) j++;
+  }
+
+  const innerCSS = css.slice(innerStart, j);
+  const scopedInner = scopeCSS(innerCSS, tagName);
+
+  return {
+    text: `${preludeStr}{${scopedInner}}`,
+    end: j + 1,
+  };
+}

package/lib/dev-server.js

@@ -0,0 +1,107 @@
+/**
+ * Dev Server — static HTTP server with polling-based live-reload.
+ */
+
+import { createServer } from 'node:http';
+import { readFileSync, watch, existsSync } from 'node:fs';
+import { resolve, extname } from 'node:path';
+
+const MIME_TYPES = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+};
+
+const POLL_SNIPPET = `<script>
+(function() {
+  var t = 0, ready = false;
+  setInterval(function() {
+    fetch('/__poll').then(function(r) { return r.json(); }).then(function(d) {
+      if (!ready) { t = d.t; ready = true; return; }
+      if (d.t > t) { t = d.t; location.reload(); }
+    }).catch(function() {});
+  }, 500);
+})();
+</script>`;
+
+export function startDevServer({ port, root, outputDir }) {
+  let changeTs = Date.now();
+
+  const server = createServer((req, res) => {
+    const url = req.url.split('?')[0];
+
+    // Poll endpoint
+    if (url === '/__poll') {
+      const body = JSON.stringify({ t: changeTs });
+      const buf = Buffer.from(body);
+      res.writeHead(200, {
+        'Content-Type': 'application/json',
+        'Content-Length': buf.byteLength,
+        'Cache-Control': 'no-cache',
+      });
+      res.end(buf);
+      return;
+    }
+
+    // Static files
+    const filePath = url === '/' ? '/index.html' : url;
+    const fullPath = resolve(root, '.' + filePath);
+
+    try {
+      let buf = readFileSync(fullPath);
+      const ext = extname(fullPath);
+      const mime = MIME_TYPES[ext] || 'application/octet-stream';
+
+      // Inject poll snippet into HTML
+      if (ext === '.html') {
+        let html = buf.toString('utf-8');
+        if (html.includes('</body>')) {
+          html = html.replace('</body>', POLL_SNIPPET + '\n</body>');
+        } else {
+          html += '\n' + POLL_SNIPPET;
+        }
+        buf = Buffer.from(html, 'utf-8');
+      }
+
+      res.writeHead(200, {
+        'Content-Type': mime,
+        'Content-Length': buf.byteLength,
+      });
+      res.end(buf);
+    } catch {
+      const msg = 'Not Found';
+      res.writeHead(404, {
+        'Content-Type': 'text/plain',
+        'Content-Length': Buffer.byteLength(msg),
+      });
+      res.end(msg);
+    }
+  });
+
+  // Watch output dir — update timestamp on changes (debounced)
+  let watcher = null;
+  if (outputDir && existsSync(outputDir)) {
+    let timer = null;
+    watcher = watch(outputDir, { recursive: true }, () => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => { changeTs = Date.now(); }, 200);
+    });
+  }
+
+  server.listen(port, () => {
+    console.log(`Dev server running at http://localhost:${port}`);
+  });
+
+  return {
+    server,
+    close() {
+      if (watcher) watcher.close();
+      server.close();
+    },
+  };
+}

package/lib/parser.js

@@ -0,0 +1,269 @@
+/**
+ * Parser for .html source files with <template>, <script>, <style> blocks.
+ *
+ * Extracts:
+ * - Block contents (template, script, style)
+ * - defineProps declarations
+ * - Root-level reactive variables
+ * - Computed properties
+ * - Watchers
+ * - Function declarations
+ *
+ * Tree walking (bindings, events, slots, processedTemplate) is NOT handled
+ * here — that's the responsibility of tree-walker.js (task 3).
+ */
+
+// ── Block extraction ────────────────────────────────────────────────
+
+/**
+ * Extract the content of a named block from the HTML source.
+ * Returns the inner content string, or null if the block is not found.
+ */
+function extractBlock(html, blockName) {
+  const re = new RegExp(`<${blockName}>([\\s\\S]*?)<\\/${blockName}>`);
+  const m = html.match(re);
+  return m ? m[1] : null;
+}
+
+// ── Name derivation ─────────────────────────────────────────────────
+
+/**
+ * Derive tagName from fileName (strip .html extension if present).
+ * e.g. "spr-hi.html" → "spr-hi", "spr-hi" → "spr-hi"
+ */
+function deriveTagName(fileName) {
+  return fileName.replace(/\.html$/, '');
+}
+
+/**
+ * Convert a kebab-case tag name to PascalCase class name.
+ * e.g. "spr-hi" → "SprHi"
+ */
+function toClassName(tagName) {
+  return tagName
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+}
+
+// ── Props extraction ────────────────────────────────────────────────
+
+/**
+ * Extract props from defineProps([...]) call.
+ * Detects duplicates and throws DUPLICATE_PROPS error.
+ * Returns an empty array if no defineProps is found.
+ */
+function extractProps(script, fileName) {
+  const m = script.match(/defineProps\(\[([^\]]*)\]\)/);
+  if (!m) return [];
+
+  const raw = m[1];
+  const props = [];
+  const re = /'([^']+)'/g;
+  let match;
+  while ((match = re.exec(raw)) !== null) {
+    props.push(match[1]);
+  }
+
+  // Detect duplicates
+  const seen = new Set();
+  const duplicates = new Set();
+  for (const p of props) {
+    if (seen.has(p)) duplicates.add(p);
+    seen.add(p);
+  }
+  if (duplicates.size > 0) {
+    const names = [...duplicates].join(', ');
+    const error = new Error(
+      `Error en '${fileName}': props duplicados: ${names}`
+    );
+    error.code = 'DUPLICATE_PROPS';
+    throw error;
+  }
+
+  return props;
+}
+
+// ── Root-level reactive variables ───────────────────────────────────
+
+/**
+ * Extract root-level variable declarations (const/let/var with literal value).
+ * Tracks brace depth to skip variables inside functions or nested blocks.
+ * Excludes lines that use computed(...) or watch(...).
+ */
+function extractRootVars(script) {
+  const vars = [];
+  let depth = 0;
+
+  for (const line of script.split('\n')) {
+    // Track brace depth
+    for (const ch of line) {
+      if (ch === '{') depth++;
+      if (ch === '}') depth--;
+    }
+
+    // Only extract at root level (depth === 0)
+    if (depth !== 0) continue;
+
+    // Skip computed and watch assignments
+    if (/computed\s*\(/.test(line) || /watch\s*\(/.test(line)) continue;
+
+    const m = line.match(/^\s*(?:const|let|var)\s+(\w+)\s*=\s*(.+?);?\s*$/);
+    if (m) {
+      vars.push({ name: m[1], value: m[2] });
+    }
+  }
+
+  return vars;
+}
+
+// ── Computed properties ─────────────────────────────────────────────
+
+/**
+ * Extract computed property declarations.
+ * Pattern: const name = computed(() => expr)
+ */
+function extractComputeds(script) {
+  const out = [];
+  const re = /(?:const|let|var)\s+(\w+)\s*=\s*computed\(\s*\(\)\s*=>\s*([\s\S]*?)\)/g;
+  let m;
+  while ((m = re.exec(script)) !== null) {
+    out.push({ name: m[1], body: m[2].trim() });
+  }
+  return out;
+}
+
+// ── Watchers ────────────────────────────────────────────────────────
+
+/**
+ * Extract watcher declarations.
+ * Pattern: watch('target', (newParam, oldParam) => { body })
+ */
+function extractWatchers(script) {
+  const out = [];
+  const re = /watch\(\s*'(\w+)'\s*,\s*\((\w+)\s*,\s*(\w+)\)\s*=>\s*\{([\s\S]*?)\}\s*\)/g;
+  let m;
+  while ((m = re.exec(script)) !== null) {
+    out.push({
+      target: m[1],
+      newParam: m[2],
+      oldParam: m[3],
+      body: m[4].trim(),
+    });
+  }
+  return out;
+}
+
+// ── Function declarations ───────────────────────────────────────────
+
+/**
+ * Extract top-level function declarations.
+ * Pattern: function name(params) { body }
+ * Uses brace tracking to capture the full function body.
+ */
+function extractFunctions(script) {
+  const functions = [];
+  const lines = script.split('\n');
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+    const m = line.match(/^\s*function\s+(\w+)\s*\(([^)]*)\)\s*\{/);
+    if (m) {
+      const name = m[1];
+      const params = m[2].trim();
+      // Collect body by tracking brace depth
+      let depth = 0;
+      let bodyLines = [];
+      let started = false;
+
+      for (let j = i; j < lines.length; j++) {
+        const l = lines[j];
+        for (const ch of l) {
+          if (ch === '{') {
+            if (started) depth++;
+            else { depth = 1; started = true; }
+          }
+          if (ch === '}') depth--;
+        }
+
+        if (j === i) {
+          // First line: capture everything after the opening brace
+          const afterBrace = l.substring(l.indexOf('{') + 1);
+          if (afterBrace.trim()) bodyLines.push(afterBrace);
+        } else if (depth <= 0) {
+          // Last line: capture everything before the closing brace
+          const lastBraceIdx = l.lastIndexOf('}');
+          const before = l.substring(0, lastBraceIdx);
+          if (before.trim()) bodyLines.push(before);
+          i = j;
+          break;
+        } else {
+          bodyLines.push(l);
+        }
+      }
+
+      functions.push({
+        name,
+        params,
+        body: bodyLines.join('\n').trim(),
+      });
+    }
+    i++;
+  }
+
+  return functions;
+}
+
+// ── Main parse function ─────────────────────────────────────────────
+
+/**
+ * Parse an HTML source string into a ParseResult IR.
+ *
+ * @param {string} html - The full HTML source content
+ * @param {string} fileName - The file name (e.g. "spr-hi.html" or "spr-hi")
+ * @returns {ParseResult}
+ */
+export function parse(html, fileName) {
+  const tagName = deriveTagName(fileName);
+  const className = toClassName(tagName);
+
+  // Extract blocks
+  const template = extractBlock(html, 'template');
+  if (template === null) {
+    const error = new Error(
+      `Error en '${fileName}': el bloque <template> es obligatorio`
+    );
+    error.code = 'MISSING_TEMPLATE';
+    throw error;
+  }
+
+  const script = extractBlock(html, 'script') ?? '';
+  const style = extractBlock(html, 'style') ?? '';
+  const trimmedScript = script.trim();
+
+  // Extract script-level constructs
+  const props = extractProps(trimmedScript, fileName);
+  const reactiveVars = extractRootVars(trimmedScript);
+  const computeds = extractComputeds(trimmedScript);
+  const watchers = extractWatchers(trimmedScript);
+  const methods = extractFunctions(trimmedScript);
+
+  return {
+    tagName,
+    className,
+    template,
+    script: trimmedScript,
+    style: style.trim(),
+    props,
+    reactiveVars,
+    computeds,
+    watchers,
+    methods,
+    // Tree walker fields — populated by tree-walker.js (task 3)
+    bindings: [],
+    events: [],
+    slots: [],
+    processedTemplate: null,
+  };
+}

package/lib/printer.js

@@ -0,0 +1,104 @@
+/**
+ * Pretty Printer — reconstructs .html source from a ParseResult IR.
+ *
+ * Produces a valid source file with <template>, <script>, and <style> blocks
+ * that preserves the order and semantics of all IR elements.
+ */
+
+/**
+ * Reconstruct the <template> block from the IR.
+ * Uses the original template string (before tree-walking) since it
+ * already contains {{var}} bindings, @event attributes, and <slot> elements.
+ *
+ * @param {import('./parser.js').ParseResult} ir
+ * @returns {string}
+ */
+function reconstructTemplate(ir) {
+  return ir.template;
+}
+
+/**
+ * Reconstruct the <script> block from the IR's extracted constructs.
+ *
+ * @param {import('./parser.js').ParseResult} ir
+ * @returns {string}
+ */
+function reconstructScript(ir) {
+  const lines = [];
+
+  // defineProps
+  if (ir.props.length > 0) {
+    const propsList = ir.props.map(p => `'${p}'`).join(', ');
+    lines.push(`  defineProps([${propsList}])`);
+    lines.push('');
+  }
+
+  // Reactive variables
+  for (const v of ir.reactiveVars) {
+    lines.push(`  const ${v.name} = ${v.value}`);
+  }
+  if (ir.reactiveVars.length > 0) lines.push('');
+
+  // Computed properties
+  for (const c of ir.computeds) {
+    lines.push(`  const ${c.name} = computed(() => ${c.body})`);
+  }
+  if (ir.computeds.length > 0) lines.push('');
+
+  // Watchers
+  for (const w of ir.watchers) {
+    lines.push(`  watch('${w.target}', (${w.newParam}, ${w.oldParam}) => {`);
+    // Indent the body lines
+    for (const bodyLine of w.body.split('\n')) {
+      lines.push(`    ${bodyLine}`);
+    }
+    lines.push('  })');
+  }
+  if (ir.watchers.length > 0) lines.push('');
+
+  // Functions
+  for (const m of ir.methods) {
+    lines.push(`  function ${m.name}(${m.params}) {`);
+    for (const bodyLine of m.body.split('\n')) {
+      lines.push(`    ${bodyLine}`);
+    }
+    lines.push('  }');
+  }
+
+  return lines.join('\n');
+}
+
+/**
+ * Pretty-print a ParseResult IR back to .html source format.
+ *
+ * @param {import('./parser.js').ParseResult} ir - The intermediate representation
+ * @returns {string} Reconstructed .html source
+ */
+export function prettyPrint(ir) {
+  const parts = [];
+
+  // <template> block
+  parts.push('<template>');
+  parts.push(reconstructTemplate(ir));
+  parts.push('</template>');
+
+  // <style> block (if present)
+  if (ir.style) {
+    parts.push('');
+    parts.push('<style>');
+    parts.push(ir.style);
+    parts.push('</style>');
+  }
+
+  // <script> block (if there's any script content)
+  const scriptContent = reconstructScript(ir);
+  if (scriptContent.trim()) {
+    parts.push('');
+    parts.push('<script>');
+    parts.push(scriptContent);
+    parts.push('</script>');
+  }
+
+  parts.push('');
+  return parts.join('\n');
+}

package/lib/reactive-runtime.js

@@ -0,0 +1,61 @@
+/**
+ * Template string containing the mini reactive runtime (~40 lines).
+ * This gets inlined at the top of each compiled component so the output
+ * is fully self-contained with zero imports.
+ *
+ * Implements:
+ * - __signal(initialValue): getter/setter function with subscriber tracking
+ * - __computed(fn): cached derived value that auto-invalidates
+ * - __effect(fn): runs fn immediately and re-runs when dependencies change
+ *
+ * Dependency tracking uses a global stack (__currentEffect).
+ */
+export const reactiveRuntime = `
+let __currentEffect = null;
+
+function __signal(initial) {
+  let _value = initial;
+  const _subs = new Set();
+  return (...args) => {
+    if (args.length === 0) {
+      if (__currentEffect) _subs.add(__currentEffect);
+      return _value;
+    }
+    const old = _value;
+    _value = args[0];
+    if (old !== _value) {
+      for (const fn of [..._subs]) fn();
+    }
+  };
+}
+
+function __computed(fn) {
+  let _cached, _dirty = true;
+  const _subs = new Set();
+  const recompute = () => {
+    _dirty = true;
+    for (const fn of [..._subs]) fn();
+  };
+  return () => {
+    if (__currentEffect) _subs.add(__currentEffect);
+    if (_dirty) {
+      const prev = __currentEffect;
+      __currentEffect = recompute;
+      _cached = fn();
+      __currentEffect = prev;
+      _dirty = false;
+    }
+    return _cached;
+  };
+}
+
+function __effect(fn) {
+  const run = () => {
+    const prev = __currentEffect;
+    __currentEffect = run;
+    fn();
+    __currentEffect = prev;
+  };
+  run();
+}
+`;