mez-easyjs 0.1.0

package/src/compiler/css.js

@@ -0,0 +1,117 @@
+/**
+ * Scope CSS selectors with [scopeId] attribute selectors.
+ * Handles basic CSS: rules, media queries, keyframes (left alone).
+ */
+export function scopeCSS(css, scopeId) {
+  if (!css || !css.trim()) return '';
+
+  const attr = `[${scopeId}]`;
+  let output = '';
+  let i = 0;
+  const src = css;
+
+  while (i < src.length) {
+    // Skip comments
+    if (src[i] === '/' && src[i + 1] === '*') {
+      const end = src.indexOf('*/', i + 2);
+      output += src.slice(i, end === -1 ? src.length : end + 2);
+      i = end === -1 ? src.length : end + 2;
+      continue;
+    }
+
+    // @keyframes / @font-face — copy block as-is
+    if (src[i] === '@') {
+      const rest = src.slice(i);
+      const atMatch = rest.match(/^@(keyframes|font-face|import|charset)\b/i);
+      if (atMatch) {
+        const block = readAtBlock(src, i);
+        output += block.text;
+        i = block.end;
+        continue;
+      }
+
+      // @media / @supports — scope inner rules
+      const nestMatch = rest.match(/^@(media|supports|layer|container)[^{]*\{/i);
+      if (nestMatch) {
+        const headerEnd = src.indexOf('{', i);
+        output += src.slice(i, headerEnd + 1);
+        i = headerEnd + 1;
+        const inner = extractBalanced(src, i - 1);
+        output += scopeCSS(inner.content, scopeId);
+        output += '}';
+        i = inner.end;
+        continue;
+      }
+    }
+
+    // Regular rule: selectors { body }
+    const brace = src.indexOf('{', i);
+    if (brace === -1) {
+      output += src.slice(i);
+      break;
+    }
+
+    const selectors = src.slice(i, brace).trim();
+    const body = extractBalanced(src, brace);
+
+    if (selectors) {
+      const scoped = selectors
+        .split(',')
+        .map((sel) => scopeSelector(sel.trim(), attr))
+        .join(', ');
+      output += `${scoped} {${body.content}}`;
+    }
+    i = body.end;
+  }
+
+  return output;
+}
+
+function scopeSelector(selector, attr) {
+  if (!selector) return selector;
+  // :global(.foo) → .foo
+  if (selector.startsWith(':global(')) {
+    const inner = selector.slice(8, -1);
+    return inner;
+  }
+  // Don't scope keyframe percentages / from / to
+  if (/^(from|to|\d+%)$/i.test(selector)) return selector;
+
+  // Insert attribute before pseudo-elements/classes on the last compound selector
+  // e.g. ".foo .bar:hover" → ".foo .bar[e-xxx]:hover"
+  const parts = selector.split(/\s+/);
+  const last = parts[parts.length - 1];
+  const m = last.match(/^([^\::]+)?(::?[a-z-]+(?:\([^)]*\))?)*$/i);
+  if (m) {
+    const base = m[1] || '*';
+    const pseudos = last.slice(base.length);
+    parts[parts.length - 1] = `${base}${attr}${pseudos}`;
+    return parts.join(' ');
+  }
+  return `${selector}${attr}`;
+}
+
+function extractBalanced(src, openIdx) {
+  let depth = 0;
+  for (let i = openIdx; i < src.length; i++) {
+    if (src[i] === '{') depth++;
+    else if (src[i] === '}') {
+      depth--;
+      if (depth === 0) {
+        return { content: src.slice(openIdx + 1, i), end: i + 1 };
+      }
+    }
+  }
+  return { content: src.slice(openIdx + 1), end: src.length };
+}
+
+function readAtBlock(src, start) {
+  const brace = src.indexOf('{', start);
+  if (brace === -1) {
+    const semi = src.indexOf(';', start);
+    const end = semi === -1 ? src.length : semi + 1;
+    return { text: src.slice(start, end), end };
+  }
+  const body = extractBalanced(src, brace);
+  return { text: src.slice(start, body.end), end: body.end };
+}

package/src/compiler/errors.js

@@ -0,0 +1,65 @@
+/**
+ * Compile-time errors with filename, line/column, snippet, and fix hint.
+ */
+
+export class CompileError extends Error {
+  constructor({ message, filename, line, column, source, hint, code }) {
+    super(formatCompileError({ message, filename, line, column, source, hint }));
+    this.name = 'CompileError';
+    this.filename = filename;
+    this.line = line;
+    this.column = column;
+    this.hint = hint;
+    this.code = code || 'E_COMPILE';
+    this.frame = buildFrame(source, line, column);
+  }
+}
+
+export function formatCompileError({ message, filename, line, column, source, hint }) {
+  const loc =
+    filename != null && line != null
+      ? `${filename}:${line}:${column || 1}`
+      : filename || 'unknown';
+  const frame = buildFrame(source, line, column);
+  const hintLine = hint ? `\n\nHint: ${hint}` : '';
+  return `[easy] ${loc}\n${message}${frame ? `\n\n${frame}` : ''}${hintLine}`;
+}
+
+export function buildFrame(source, line, column) {
+  if (!source || line == null || line < 1) return '';
+  const lines = String(source).split(/\r?\n/);
+  const idx = line - 1;
+  if (idx < 0 || idx >= lines.length) return '';
+
+  const start = Math.max(0, idx - 2);
+  const end = Math.min(lines.length, idx + 3);
+  const width = String(end).length;
+  const out = [];
+
+  for (let i = start; i < end; i++) {
+    const num = String(i + 1).padStart(width, ' ');
+    const mark = i === idx ? '>' : ' ';
+    out.push(`${mark} ${num} | ${lines[i]}`);
+    if (i === idx && column != null && column > 0) {
+      out.push(`  ${' '.repeat(width)} | ${' '.repeat(column - 1)}^`);
+    }
+  }
+  return out.join('\n');
+}
+
+/** Locate line/column of a substring or index in source. */
+export function locate(source, indexOrSearch) {
+  const src = String(source || '');
+  let index =
+    typeof indexOrSearch === 'number'
+      ? indexOrSearch
+      : src.indexOf(String(indexOrSearch));
+  if (index < 0) index = 0;
+  const before = src.slice(0, index);
+  const lines = before.split(/\r?\n/);
+  return { line: lines.length, column: lines[lines.length - 1].length + 1 };
+}
+
+export function assert(condition, opts) {
+  if (!condition) throw new CompileError(opts);
+}

package/src/compiler/expr.js

@@ -0,0 +1,142 @@
+/**
+ * Compile template expressions to CSP-safe JS (no eval / new Function).
+ * Rewrites bare identifiers to state/methods/props/local lookups.
+ */
+
+const KEYWORDS = new Set([
+  'true', 'false', 'null', 'undefined', 'NaN', 'Infinity',
+  'typeof', 'instanceof', 'new', 'void', 'in', 'of',
+  'return', 'if', 'else', 'var', 'let', 'const', 'function',
+  'this', 'window', 'document', 'Math', 'Date', 'JSON',
+  'Object', 'Array', 'String', 'Number', 'Boolean', 'RegExp',
+  'parseInt', 'parseFloat', 'isNaN', 'isFinite', 'encodeURIComponent',
+  'decodeURIComponent'
+]);
+
+/**
+ * @param {string} expression
+ * @param {{ locals?: string[] }} options
+ * @returns {{ code: string, keys: string[] }}
+ */
+export function compileExpression(expression, options = {}) {
+  const locals = new Set(options.locals || []);
+  const keys = new Set();
+  const src = String(expression || '').trim();
+  if (!src) return { code: 'undefined', keys: [] };
+
+  let i = 0;
+  let out = '';
+
+  while (i < src.length) {
+    const ch = src[i];
+
+    // strings
+    if (ch === '"' || ch === "'" || ch === '`') {
+      const { text, end } = readString(src, i);
+      out += text;
+      i = end;
+      continue;
+    }
+
+    // numbers
+    if (/[0-9]/.test(ch) || (ch === '.' && /[0-9]/.test(src[i + 1] || ''))) {
+      const start = i;
+      i++;
+      while (i < src.length && /[0-9._xXoa-fA-F]/.test(src[i])) i++;
+      out += src.slice(start, i);
+      continue;
+    }
+
+    // identifiers / keywords
+    if (/[A-Za-z_$]/.test(ch)) {
+      const start = i;
+      i++;
+      while (i < src.length && /[\w$]/.test(src[i])) i++;
+      const id = src.slice(start, i);
+
+      // skip property names after .
+      const prev = previousNonSpace(out);
+      if (prev === '.') {
+        out += id;
+        continue;
+      }
+
+      if (KEYWORDS.has(id) || locals.has(id)) {
+        out += id;
+        if (locals.has(id)) {
+          // local already in scope as const
+        }
+        continue;
+      }
+
+      // method call: ident(
+      const next = nextNonSpace(src, i);
+      if (next === '(') {
+        out += `__m[${JSON.stringify(id)}]`;
+        keys.add(id);
+        continue;
+      }
+
+      // props.xxx already handled if id is props
+      if (id === 'props') {
+        out += '__p';
+        continue;
+      }
+
+      keys.add(id);
+      out += `__s[${JSON.stringify(id)}]`;
+      continue;
+    }
+
+    out += ch;
+    i++;
+  }
+
+  return { code: out, keys: [...keys] };
+}
+
+/**
+ * Emit a reader arrow used in updaters.
+ * Locals (e-for) are assumed declared in outer scope.
+ */
+export function emitReader(expression, options = {}) {
+  const { code, keys } = compileExpression(expression, options);
+  return {
+    keys,
+    // __s = state, __m = methods, __p = props
+    code: `(function(){ const __s = state; const __m = methods; const __p = props; return (${code}); })()`
+  };
+}
+
+function readString(src, start) {
+  const quote = src[start];
+  let i = start + 1;
+  let text = quote;
+  while (i < src.length) {
+    const ch = src[i];
+    text += ch;
+    if (ch === '\\') {
+      i++;
+      if (i < src.length) text += src[i];
+      i++;
+      continue;
+    }
+    if (ch === quote) {
+      return { text, end: i + 1 };
+    }
+    i++;
+  }
+  return { text, end: src.length };
+}
+
+function previousNonSpace(s) {
+  for (let i = s.length - 1; i >= 0; i--) {
+    if (!/\s/.test(s[i])) return s[i];
+  }
+  return '';
+}
+
+function nextNonSpace(src, i) {
+  while (i < src.length && /\s/.test(src[i])) i++;
+  return src[i] || '';
+}

package/src/compiler/index.js

@@ -0,0 +1,105 @@
+import { parseSFC } from './parse.js';
+import { parseTemplate } from './template.js';
+import { scopeCSS } from './css.js';
+import { generate } from './codegen.js';
+import { stripTypeScript } from './strip-ts.js';
+import { CompileError, locate } from './errors.js';
+import { createHash } from 'node:crypto';
+
+/**
+ * Compile an Easy.js Single File Component (.easy).
+ * Svelte-like: optional <template>, {expr}, onclick={handler}, let/function script.
+ */
+export function compile(source, options = {}) {
+  const filename = options.filename || 'anonymous.easy';
+  const scopeId = options.id || 'e-' + hash(filename + '\0' + source).slice(0, 8);
+
+  let sfc;
+  try {
+    sfc = parseSFC(source, filename);
+  } catch (err) {
+    if (err instanceof CompileError) throw err;
+    const loc = locate(source, 0);
+    throw new CompileError({
+      message: err.message || String(err),
+      filename,
+      ...loc,
+      source,
+      hint: 'Check <script>, markup, and <style> are well-formed (template wrapper is optional).'
+    });
+  }
+
+  if (!sfc.template || !sfc.template.content.trim()) {
+    throw new CompileError({
+      message: 'No markup found',
+      filename,
+      line: 1,
+      column: 1,
+      source,
+      hint: 'Put HTML after <script> (Svelte style), or use <template>...</template>.'
+    });
+  }
+
+  let ast;
+  try {
+    ast = parseTemplate(sfc.template.content, { filename });
+  } catch (err) {
+    throw new CompileError({
+      message: err.message || String(err),
+      filename,
+      ...locate(source, sfc.template.content.slice(0, 12)),
+      source,
+      hint: 'Check tags, {expressions}, onclick={handler}, {#if}/{#each}, or e-if/e-for.'
+    });
+  }
+
+  const scopedStyles = sfc.styles
+    .map((s) => (s.scoped !== false ? scopeCSS(s.content, scopeId) : s.content))
+    .join('\n');
+
+  let scriptContent = sfc.script ? sfc.script.content : '';
+  const lang = (sfc.script?.lang || 'js').toLowerCase();
+  if (lang === 'ts' || lang === 'typescript') {
+    scriptContent = stripTypeScript(scriptContent);
+  }
+
+  let result;
+  try {
+    result = generate(ast, {
+      script: scriptContent,
+      styles: scopedStyles,
+      scopeId,
+      filename,
+      source,
+      lang
+    });
+  } catch (err) {
+    if (err instanceof CompileError) throw err;
+    throw new CompileError({
+      message: err.message || String(err),
+      filename,
+      ...locate(source, 0),
+      source,
+      hint: 'Review markup expressions and <script> (let/function or export default).'
+    });
+  }
+
+  return {
+    code: result.code,
+    map: null,
+    scopeId,
+    styles: scopedStyles,
+    dependencies: result.dependencies
+  };
+}
+
+export { parseSFC } from './parse.js';
+export { parseTemplate } from './template.js';
+export { scopeCSS } from './css.js';
+export { CompileError, formatCompileError, buildFrame } from './errors.js';
+export { compileExpression } from './expr.js';
+export { stripTypeScript } from './strip-ts.js';
+
+function hash(str) {
+  return createHash('sha256').update(str).digest('hex');
+}

package/src/compiler/parse.js

@@ -0,0 +1,115 @@
+/**
+ * Parse Easy.js SFC — Svelte-like by default.
+ *
+ * Preferred:
+ *   <script>...</script>
+ *   <markup/>
+ *   <style>...</style>
+ *
+ * Optional <template> still supported for compatibility.
+ */
+import { CompileError, locate } from './errors.js';
+
+export function parseSFC(source, filename = 'component.easy') {
+  const result = {
+    filename,
+    template: null,
+    script: null,
+    styles: [],
+    markupMode: 'svelte' // or 'template'
+  };
+
+  const blocks = [];
+  const blockRe = /<(template|script|style)(\s[^>]*)?>([\s\S]*?)<\/\1>/gi;
+  let match;
+
+  while ((match = blockRe.exec(source)) !== null) {
+    const tag = match[1].toLowerCase();
+    const attrs = parseAttrs(match[2] || '');
+    const content = match[3];
+    blocks.push({
+      tag,
+      attrs,
+      content,
+      start: match.index,
+      end: match.index + match[0].length,
+      full: match[0]
+    });
+  }
+
+  for (const block of blocks) {
+    if (block.tag === 'template') {
+      if (result.template) {
+        throw new CompileError({
+          message: 'Multiple <template> blocks are not supported',
+          filename,
+          ...locate(source, block.start),
+          source,
+          hint: 'Use one <template>, or omit it and put markup between <script> and <style>.'
+        });
+      }
+      result.template = { content: block.content.trim(), attrs: block.attrs };
+      result.markupMode = 'template';
+    } else if (block.tag === 'script') {
+      if (result.script) {
+        throw new CompileError({
+          message: 'Multiple <script> blocks are not supported',
+          filename,
+          ...locate(source, block.start),
+          source,
+          hint: 'Combine scripts into a single <script> block.'
+        });
+      }
+      result.script = {
+        content: block.content.trim(),
+        attrs: block.attrs,
+        lang: String(block.attrs.lang || 'js').toLowerCase()
+      };
+    } else if (block.tag === 'style') {
+      result.styles.push({
+        content: block.content.trim(),
+        attrs: block.attrs,
+        scoped: block.attrs.scoped !== undefined ? block.attrs.scoped !== 'false' : true,
+        lang: block.attrs.lang || 'css'
+      });
+    }
+  }
+
+  // Svelte-like: markup is everything outside <script>/<style>/<template>
+  if (!result.template) {
+    let markup = source;
+    // Remove blocks from last to first so indices stay valid
+    const ordered = [...blocks].sort((a, b) => b.start - a.start);
+    for (const b of ordered) {
+      markup = markup.slice(0, b.start) + markup.slice(b.end);
+    }
+    markup = markup.trim();
+    if (!markup) {
+      throw new CompileError({
+        message: 'No markup found',
+        filename,
+        line: 1,
+        column: 1,
+        source,
+        hint: 'Add HTML between <script> and <style>, or wrap markup in <template>...</template>.'
+      });
+    }
+    result.template = { content: markup, attrs: {} };
+    result.markupMode = 'svelte';
+  }
+
+  return result;
+}
+
+function parseAttrs(str) {
+  const attrs = {};
+  const re = /([:@]?[\w:-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+  let m;
+  while ((m = re.exec(str)) !== null) {
+    const name = m[1];
+    const value =
+      m[2] !== undefined ? m[2] : m[3] !== undefined ? m[3] : m[4] !== undefined ? m[4] : true;
+    attrs[name] = value;
+  }
+  return attrs;
+}

package/src/compiler/strip-ts.js

@@ -0,0 +1,39 @@
+/**
+ * Lightweight strip of TypeScript syntax for lang="ts" scripts.
+ * Not a full TS compiler — enough for demos (types, interfaces, satisfies, as).
+ */
+export function stripTypeScript(code) {
+  let src = String(code || '');
+
+  // Remove import type / export type
+  src = src.replace(/^\s*import\s+type\s+[\s\S]*?;?\s*$/gm, '');
+  src = src.replace(/^\s*export\s+type\s+[\s\S]*?;?\s*$/gm, '');
+
+  // Remove interface / type alias blocks
+  src = src.replace(/^\s*(?:export\s+)?interface\s+\w+[\s\S]*?\{[\s\S]*?\}\s*/gm, '');
+  src = src.replace(/^\s*(?:export\s+)?type\s+\w+\s*=\s*[^;]+;\s*/gm, '');
+
+  // Strip `as Type` / `satisfies Type`
+  src = src.replace(/\s+as\s+const\b/g, '');
+  src = src.replace(/\s+as\s+[A-Za-z0-9_$.<>,\s|&[\]]+/g, '');
+  src = src.replace(/\s+satisfies\s+[A-Za-z0-9_$.<>,\s|&[\]]+/g, '');
+
+  // Strip parameter / variable type annotations in common positions
+  // function foo(a: number, b: string): void
+  src = src.replace(/:\s*[A-Za-z0-9_$.<>,\s|&[\]]+(?=\s*[,)=])/g, '');
+  // return types ) : Type {
+  src = src.replace(/\)\s*:\s*[A-Za-z0-9_$.<>,\s|&[\]]+(?=\s*\{)/g, ')');
+  // let x: number =
+  src = src.replace(
+    /\b(let|const|var)\s+([A-Za-z_$][\w$]*)\s*:\s*[A-Za-z0-9_$.<>,\s|&[\]]+(?=\s*=)/g,
+    '$1 $2'
+  );
+
+  // Non-null assertions foo!
+  src = src.replace(/([A-Za-z0-9_)\]])\!(?=\s*[,.;)\]]|$)/g, '$1');
+
+  // Angle generics on calls: foo<Bar>( → foo(  (conservative)
+  src = src.replace(/\b([A-Za-z_$][\w$]*)\s*<\s*[A-Za-z_$][\w$.,\s|[&\]<>]*\s*>\s*\(/g, '$1(');
+
+  return src;
+}