mez-easyjs 0.1.0

package/src/commands/dev.js

@@ -0,0 +1,434 @@
+import http from 'node:http';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { exec } from 'node:child_process';
+import { createHash } from 'node:crypto';
+import { WebSocketServer } from './ws.js';
+import { loadConfig, transformFile, walkFiles } from '../transform.js';
+import { compile, CompileError, parseSFC } from '../compiler/index.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const RUNTIME_DIR = path.resolve(__dirname, '../runtime');
+
+/** path -> { stylesHash, codeHash, scopeId } */
+const compileCache = new Map();
+
+export async function runDev(flags = {}) {
+  const root = path.resolve(flags.cwd || process.cwd());
+  const config = await loadConfig(root);
+  const port = Number(flags.port || config.port || 5173);
+  const runtimeUrl = '/easyjs/runtime/index.js';
+
+  const clients = new Set();
+
+  const server = http.createServer(async (req, res) => {
+    try {
+      await handleRequest(req, res, { root, config, runtimeUrl });
+    } catch (err) {
+      console.error(err);
+      const body = err instanceof CompileError || err?.name === 'CompileError'
+        ? String(err.message)
+        : String(err.message || err);
+      res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' });
+      res.end(body);
+    }
+  });
+
+  const wss = new WebSocketServer(server);
+
+  wss.onConnection((ws) => {
+    clients.add(ws);
+    ws.send(JSON.stringify({ type: 'connected', dev: true }));
+    ws.onClose(() => clients.delete(ws));
+    // Bidirectional: client may ack or request reload
+    // (text frames handled lightly in ws.js — extend if needed)
+  });
+
+  server.listen(port, () => {
+    console.log(`
+  Easy.js dev server (HMR + overlay)
+
+  ➜  Local:   http://localhost:${port}/
+  ➜  Root:    ${root}
+`);
+    if (flags.open) openBrowser(`http://localhost:${port}/`);
+  });
+
+  const srcDir = path.join(root, config.srcDir || 'src');
+  watchTree(srcDir, async (file) => {
+    const rel = '/' + path.relative(root, file).split(path.sep).join('/');
+    const ext = path.extname(file);
+    const t0 = Date.now();
+
+    try {
+      if (ext === '.easy' || ext === '.ejs') {
+        const source = fs.readFileSync(file, 'utf8');
+        const sfc = parseSFC(source, path.basename(file));
+        const logicHash = hash(
+          (sfc.template?.content || '') + '\0' + (sfc.script?.content || '')
+        );
+        const stylesSrc = (sfc.styles || []).map((s) => s.content).join('\n');
+        const stylesHash = hash(stylesSrc);
+
+        const result = compile(source, { filename: path.basename(file) });
+        const prev = compileCache.get(rel);
+        compileCache.set(rel, {
+          logicHash,
+          stylesHash,
+          scopeId: result.scopeId
+        });
+
+        const styleOnly =
+          prev && prev.logicHash === logicHash && prev.stylesHash !== stylesHash;
+
+        const ms = Date.now() - t0;
+        console.log(`[hmr] ${rel} recompiled in ${ms}ms${styleOnly ? ' (styles only)' : ''}`);
+
+        broadcast(clients, {
+          type: styleOnly ? 'style-update' : 'js-update',
+          path: rel,
+          scopeId: result.scopeId,
+          styles: result.styles,
+          timestamp: Date.now()
+        });
+        return;
+      }
+
+      if (ext === '.css') {
+        console.log(`[hmr] ${rel} css`);
+        broadcast(clients, {
+          type: 'css-update',
+          path: rel,
+          timestamp: Date.now()
+        });
+        return;
+      }
+
+      if (ext === '.js' || ext === '.mjs') {
+        console.log(`[hmr] ${rel}`);
+        broadcast(clients, {
+          type: 'js-update',
+          path: rel,
+          timestamp: Date.now()
+        });
+        return;
+      }
+
+      broadcast(clients, { type: 'full-reload', path: rel });
+    } catch (err) {
+      const message = err?.message || String(err);
+      console.error(message);
+      broadcast(clients, {
+        type: 'compile-error',
+        path: rel,
+        message,
+        filename: err.filename || path.basename(file),
+        line: err.line,
+        column: err.column,
+        frame: err.frame,
+        hint: err.hint,
+        timestamp: Date.now()
+      });
+    }
+  });
+
+  const indexHtml = path.join(root, 'index.html');
+  if (fs.existsSync(indexHtml)) {
+    fs.watch(indexHtml, () => {
+      broadcast(clients, { type: 'full-reload' });
+    });
+  }
+
+  return server;
+}
+
+function broadcast(clients, payload) {
+  const data = JSON.stringify(payload);
+  for (const c of clients) c.send(data);
+}
+
+function hash(s) {
+  return createHash('sha1').update(s).digest('hex').slice(0, 12);
+}
+
+async function handleRequest(req, res, ctx) {
+  const url = new URL(req.url || '/', `http://${req.headers.host}`);
+  let pathname = decodeURIComponent(url.pathname);
+
+  if (pathname === '/@easy/hmr.js') {
+    res.writeHead(200, { 'Content-Type': 'application/javascript', 'Cache-Control': 'no-store' });
+    res.end(hmrClientSource());
+    return;
+  }
+
+  if (pathname.startsWith('/easyjs/runtime/')) {
+    const rel = pathname.replace('/easyjs/runtime/', '');
+    const file = path.join(RUNTIME_DIR, rel);
+    if (!fs.existsSync(file)) {
+      res.writeHead(404);
+      res.end('Not found');
+      return;
+    }
+    let code = fs.readFileSync(file, 'utf8');
+    code = code.replace(
+      /from\s+['"]\.\/([^'"]+)['"]/g,
+      (_, p) => `from '/easyjs/runtime/${p}'`
+    );
+    res.writeHead(200, {
+      'Content-Type': 'application/javascript',
+      'Cache-Control': 'no-store'
+    });
+    res.end(code);
+    return;
+  }
+
+  if (pathname === '/') pathname = '/index.html';
+
+  const filePath = path.join(ctx.root, pathname.replace(/^\//, ''));
+  const publicPath = path.join(
+    ctx.root,
+    ctx.config.publicDir || 'public',
+    pathname.replace(/^\//, '')
+  );
+
+  let resolved = null;
+  if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) resolved = filePath;
+  else if (fs.existsSync(publicPath) && fs.statSync(publicPath).isFile()) resolved = publicPath;
+
+  if (!resolved) {
+    const index = path.join(ctx.root, 'index.html');
+    if (fs.existsSync(index) && !path.extname(pathname)) {
+      let html = fs.readFileSync(index, 'utf8');
+      html = injectDev(html);
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.end(html);
+      return;
+    }
+    res.writeHead(404);
+    res.end('Not found');
+    return;
+  }
+
+  const ext = path.extname(resolved);
+
+  if (ext === '.html') {
+    let html = fs.readFileSync(resolved, 'utf8');
+    html = injectDev(html);
+    res.writeHead(200, { 'Content-Type': 'text/html', 'Cache-Control': 'no-store' });
+    res.end(html);
+    return;
+  }
+
+  if (ext === '.easy' || ext === '.ejs' || ext === '.js' || ext === '.mjs') {
+    const source = fs.readFileSync(resolved, 'utf8');
+    try {
+      const { code } = transformFile(resolved, source, {
+        runtimeUrl: ctx.runtimeUrl
+      });
+      // Cache hashes on first request
+      if (ext === '.easy' || ext === '.ejs') {
+        const rel = '/' + path.relative(ctx.root, resolved).split(path.sep).join('/');
+        const compiled = compile(source, { filename: path.basename(resolved) });
+        const sfc = parseSFC(source, path.basename(resolved));
+        compileCache.set(rel, {
+          logicHash: hash(
+            (sfc.template?.content || '') + '\0' + (sfc.script?.content || '')
+          ),
+          stylesHash: hash((sfc.styles || []).map((s) => s.content).join('\n')),
+          scopeId: compiled.scopeId
+        });
+      }
+      res.writeHead(200, {
+        'Content-Type': 'application/javascript',
+        'Cache-Control': 'no-store'
+      });
+      res.end(code);
+      return;
+    } catch (err) {
+      console.error(err.message || err);
+      res.writeHead(500, { 'Content-Type': 'application/javascript' });
+      res.end(
+        `throw new Error(${JSON.stringify(err.message || String(err))});`
+      );
+      return;
+    }
+  }
+
+  if (ext === '.css') {
+    const css = fs.readFileSync(resolved, 'utf8');
+    const js = `
+const id = ${JSON.stringify(pathname)};
+let s = document.querySelector('style[data-easy-css="'+id+'"]');
+if (!s) {
+  s = document.createElement('style');
+  s.setAttribute('data-easy-css', id);
+  document.head.appendChild(s);
+}
+s.textContent = ${JSON.stringify(css)};
+export default ${JSON.stringify(css)};
+`;
+    res.writeHead(200, { 'Content-Type': 'application/javascript' });
+    res.end(js);
+    return;
+  }
+
+  const data = fs.readFileSync(resolved);
+  res.writeHead(200, { 'Content-Type': mime(ext), 'Cache-Control': 'no-store' });
+  res.end(data);
+}
+
+function injectDev(html) {
+  const boot = `<script>window.__EASY_DEV__=true;</script>`;
+  const hmr = `<script type="module" src="/@easy/hmr.js"></script>`;
+  let out = html;
+  if (!out.includes('__EASY_DEV__')) {
+    out = out.includes('<head>')
+      ? out.replace('<head>', `<head>\n    ${boot}`)
+      : boot + out;
+  }
+  if (!out.includes('/@easy/hmr.js')) {
+    out = out.includes('</body>') ? out.replace('</body>', `${hmr}\n</body>`) : out + hmr;
+  }
+  return out;
+}
+
+function hmrClientSource() {
+  return `
+window.__EASY_DEV__ = true;
+
+import {
+  enableHmr,
+  applyHmrUpdate,
+  replaceStyles,
+  installOverlay,
+  showOverlay
+} from '/easyjs/runtime/index.js';
+
+enableHmr();
+installOverlay();
+
+const wsProto = location.protocol === 'https:' ? 'wss' : 'ws';
+let ws;
+
+function connect() {
+  ws = new WebSocket(wsProto + '://' + location.host);
+  ws.addEventListener('open', () => {
+    console.log('[easy] HMR connected');
+    ws.send(JSON.stringify({ type: 'hello', href: location.href }));
+  });
+  ws.addEventListener('message', async (e) => {
+    let msg;
+    try { msg = JSON.parse(e.data); } catch { return; }
+
+    if (msg.type === 'full-reload') {
+      location.reload();
+      return;
+    }
+
+    if (msg.type === 'compile-error') {
+      showOverlay({
+        message: msg.message,
+        filename: msg.filename || msg.path,
+        hint: msg.hint,
+        frame: msg.frame,
+        component: 'compiler'
+      });
+      return;
+    }
+
+    if (msg.type === 'style-update') {
+      if (msg.scopeId && msg.styles != null) {
+        replaceStyles(msg.scopeId, msg.styles);
+        console.log('[easy hmr] swapped styles', msg.path);
+        ws.send(JSON.stringify({ type: 'ack', path: msg.path, kind: 'style' }));
+      }
+      return;
+    }
+
+    if (msg.type === 'css-update') {
+      try {
+        await import(msg.path + '?t=' + msg.timestamp);
+        console.log('[easy hmr] global css', msg.path);
+        ws.send(JSON.stringify({ type: 'ack', path: msg.path, kind: 'css' }));
+      } catch (err) {
+        console.error(err);
+        location.reload();
+      }
+      return;
+    }
+
+    if (msg.type === 'js-update' || msg.type === 'update') {
+      const url = msg.path + '?t=' + (msg.timestamp || Date.now());
+      try {
+        const mod = await import(url);
+        const result = await applyHmrUpdate(msg.path, mod, {
+          styleOnly: false
+        });
+        console.log('[easy hmr] module injected', msg.path, result);
+        ws.send(JSON.stringify({ type: 'ack', path: msg.path, kind: 'js', result }));
+      } catch (err) {
+        console.warn('[easy hmr] inject failed, full reload', err);
+        location.reload();
+      }
+    }
+  });
+  ws.addEventListener('close', () => setTimeout(connect, 1000));
+}
+
+connect();
+`;
+}
+
+function watchTree(dir, onChange) {
+  if (!fs.existsSync(dir)) return;
+  const debounce = new Map();
+  try {
+    fs.watch(dir, { recursive: true }, (event, filename) => {
+      if (!filename) return;
+      const full = path.join(dir, filename);
+      clearTimeout(debounce.get(full));
+      debounce.set(
+        full,
+        setTimeout(() => {
+          try {
+            if (fs.existsSync(full) && fs.statSync(full).isFile()) onChange(full);
+          } catch {
+            /* ignore */
+          }
+        }, 60)
+      );
+    });
+  } catch {
+    for (const file of walkFiles(dir, ['.js', '.easy', '.css', '.html'])) {
+      fs.watch(file, () => onChange(file));
+    }
+  }
+}
+
+function mime(ext) {
+  return (
+    {
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.gif': 'image/gif',
+      '.svg': 'image/svg+xml',
+      '.ico': 'image/x-icon',
+      '.json': 'application/json',
+      '.txt': 'text/plain',
+      '.woff': 'font/woff',
+      '.woff2': 'font/woff2'
+    }[ext] || 'application/octet-stream'
+  );
+}
+
+function openBrowser(url) {
+  const cmd =
+    process.platform === 'win32'
+      ? `start "" "${url}"`
+      : process.platform === 'darwin'
+        ? `open "${url}"`
+        : `xdg-open "${url}"`;
+  exec(cmd);
+}

package/src/commands/generate.js

@@ -0,0 +1,104 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { loadConfig } from '../transform.js';
+
+export async function generate(type, name, flags = {}) {
+  if (!type || !name) {
+    throw new Error('Usage: easy generate <component|page> <Name>');
+  }
+
+  const safeName = String(name).trim();
+  if (!/^[A-Za-z][A-Za-z0-9_-]*$/.test(safeName)) {
+    throw new Error(
+      'Name must start with a letter and contain only letters, digits, _ or - (no paths).'
+    );
+  }
+
+  const root = path.resolve(flags.cwd || process.cwd());
+  const config = await loadConfig(root);
+  const srcDir = path.join(root, config.srcDir || 'src');
+
+  const pascal = toPascal(safeName);
+  const kebab = toKebab(pascal);
+
+  if (type === 'component' || type === 'c') {
+    const dir = path.join(srcDir, 'components');
+    fs.mkdirSync(dir, { recursive: true });
+    const file = path.resolve(dir, `${pascal}.easy`);
+    assertInside(srcDir, file);
+    if (fs.existsSync(file)) throw new Error(`Already exists: ${file}`);
+    fs.writeFileSync(file, componentTemplate(pascal));
+    console.log(`✔ Created component ${path.relative(root, file)}`);
+    return;
+  }
+
+  if (type === 'page' || type === 'p') {
+    const dir = path.join(srcDir, 'pages');
+    fs.mkdirSync(dir, { recursive: true });
+    const file = path.resolve(dir, `${pascal}.easy`);
+    assertInside(srcDir, file);
+    if (fs.existsSync(file)) throw new Error(`Already exists: ${file}`);
+    fs.writeFileSync(file, pageTemplate(pascal, kebab));
+    console.log(`✔ Created page ${path.relative(root, file)}`);
+    console.log(`  Tip: add a route for /${kebab} in your router config.`);
+    return;
+  }
+
+  throw new Error(`Unknown generate type: ${type} (use component|page)`);
+}
+
+function assertInside(root, file) {
+  const rel = path.relative(path.resolve(root), path.resolve(file));
+  if (!rel || rel.startsWith('..') || path.isAbsolute(rel)) {
+    throw new Error('Refusing to write outside the project src directory.');
+  }
+}
+
+function toPascal(s) {
+  return String(s)
+    .replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''))
+    .replace(/^(.)/, (c) => c.toUpperCase());
+}
+
+function toKebab(s) {
+  return s
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+}
+
+function componentTemplate(name) {
+  return `<script>
+	let label = '${name}';
+</script>
+
+<div class="${toKebab(name)}">
+	<p>{label}</p>
+</div>
+
+<style>
+	.${toKebab(name)} {
+		padding: 0.5rem;
+	}
+</style>
+`;
+}
+
+function pageTemplate(name, kebab) {
+  return `<script>
+	let title = '${name}';
+	let subtitle = 'Generated by easy generate page';
+</script>
+
+<section class="page page-${kebab}">
+	<h1>{title}</h1>
+	<p>{subtitle}</p>
+</section>
+
+<style>
+	.page-${kebab} {
+		padding: 1.5rem;
+	}
+</style>
+`;
+}

package/src/commands/ws.js

@@ -0,0 +1,157 @@
+/**
+ * Minimal WebSocket server on top of an HTTP server (no deps).
+ * Bidirectional text frames for HMR.
+ */
+import crypto from 'node:crypto';
+
+export class WebSocketServer {
+  constructor(server) {
+    this.clients = new Set();
+    this._onConnection = null;
+
+    server.on('upgrade', (req, socket, head) => {
+      const key = req.headers['sec-websocket-key'];
+      if (!key) {
+        socket.destroy();
+        return;
+      }
+      const accept = crypto
+        .createHash('sha1')
+        .update(key + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')
+        .digest('base64');
+
+      socket.write(
+        'HTTP/1.1 101 Switching Protocols\r\n' +
+          'Upgrade: websocket\r\n' +
+          'Connection: Upgrade\r\n' +
+          `Sec-WebSocket-Accept: ${accept}\r\n` +
+          '\r\n'
+      );
+
+      const client = createClient(socket);
+      this.clients.add(client);
+      if (this._onConnection) this._onConnection(client);
+    });
+  }
+
+  onConnection(fn) {
+    this._onConnection = fn;
+  }
+}
+
+function createClient(socket) {
+  const closeHandlers = new Set();
+  const messageHandlers = new Set();
+  let closed = false;
+  let buffer = Buffer.alloc(0);
+
+  socket.on('data', (chunk) => {
+    buffer = Buffer.concat([buffer, chunk]);
+    while (true) {
+      const frame = tryParseFrame(buffer);
+      if (!frame) break;
+      buffer = buffer.slice(frame.bytesConsumed);
+      if (frame.opcode === 0x8) {
+        cleanup();
+        return;
+      }
+      if (frame.opcode === 0x9) {
+        // ping → pong
+        socket.write(encodeFrame(frame.payload, 0x0a));
+        continue;
+      }
+      if (frame.opcode === 0x1) {
+        const text = frame.payload.toString('utf8');
+        for (const fn of messageHandlers) {
+          try {
+            fn(text);
+          } catch (_) {
+            /* ignore */
+          }
+        }
+        try {
+          const msg = JSON.parse(text);
+          if (msg.type === 'ack') {
+            // quiet success
+          } else if (msg.type === 'hello') {
+            console.log('[hmr] client hello', msg.href || '');
+          }
+        } catch {
+          /* ignore non-json */
+        }
+      }
+    }
+  });
+
+  socket.on('close', cleanup);
+  socket.on('error', cleanup);
+
+  function cleanup() {
+    if (closed) return;
+    closed = true;
+    for (const fn of closeHandlers) fn();
+  }
+
+  return {
+    send(text) {
+      if (closed) return;
+      socket.write(encodeFrame(Buffer.from(String(text)), 0x81));
+    },
+    onClose(fn) {
+      closeHandlers.add(fn);
+    },
+    onMessage(fn) {
+      messageHandlers.add(fn);
+    }
+  };
+}
+
+function tryParseFrame(buf) {
+  if (buf.length < 2) return null;
+  const second = buf[1];
+  const masked = (second & 0x80) !== 0;
+  let len = second & 0x7f;
+  let offset = 2;
+  if (len === 126) {
+    if (buf.length < 4) return null;
+    len = buf.readUInt16BE(2);
+    offset = 4;
+  } else if (len === 127) {
+    if (buf.length < 10) return null;
+    len = Number(buf.readBigUInt64BE(2));
+    offset = 10;
+  }
+  const maskLen = masked ? 4 : 0;
+  if (buf.length < offset + maskLen + len) return null;
+  let payload = buf.slice(offset + maskLen, offset + maskLen + len);
+  if (masked) {
+    const mask = buf.slice(offset, offset + 4);
+    payload = Buffer.from(payload.map((b, i) => b ^ mask[i % 4]));
+  }
+  return {
+    opcode: buf[0] & 0x0f,
+    payload,
+    bytesConsumed: offset + maskLen + len
+  };
+}
+
+function encodeFrame(payload, firstByte) {
+  const len = payload.length;
+  let header;
+  if (len < 126) {
+    header = Buffer.alloc(2);
+    header[0] = firstByte;
+    header[1] = len;
+  } else if (len < 65536) {
+    header = Buffer.alloc(4);
+    header[0] = firstByte;
+    header[1] = 126;
+    header.writeUInt16BE(len, 2);
+  } else {
+    header = Buffer.alloc(10);
+    header[0] = firstByte;
+    header[1] = 127;
+    header.writeBigUInt64BE(BigInt(len), 2);
+  }
+  return Buffer.concat([header, payload]);
+}