mez-easyjs 0.1.0

package/src/runtime/router.js

@@ -0,0 +1,423 @@
+import { reactive } from './reactive.js';
+import { mountComponent, unmountComponent } from './component.js';
+
+let activeRouter = null;
+
+/**
+ * History API SPA router with regex route matching, lazy components,
+ * and before/after navigation guards.
+ */
+export function createRouter(options = {}) {
+  const routes = normalizeRoutes(options.routes || []);
+  const base = options.base || '';
+
+  const state = reactive({
+    path: '/',
+    params: {},
+    query: {},
+    matched: null,
+    ready: false
+  });
+
+  const beforeGuards = [];
+  const afterHooks = [];
+  let viewHost = null;
+  let currentInstance = null;
+  let app = null;
+  let pending = null;
+
+  const router = {
+    state,
+    options,
+    routes,
+
+    get currentRoute() {
+      return {
+        path: state.path,
+        params: state.params,
+        query: state.query,
+        matched: state.matched
+      };
+    },
+
+    install(appInstance) {
+      app = appInstance;
+      app._context.router = router;
+      activeRouter = router;
+      app.provide('router', router);
+
+      if (typeof window !== 'undefined') {
+        window.addEventListener('popstate', () => {
+          navigate(getLocation(), { replace: true, fromPop: true });
+        });
+        // Initial navigation after mount — deferred via microtask so RouterView can register
+        queueMicrotask(() => navigate(getLocation(), { replace: true, initial: true }));
+      }
+    },
+
+    beforeEach(fn) {
+      beforeGuards.push(fn);
+      return () => {
+        const i = beforeGuards.indexOf(fn);
+        if (i >= 0) beforeGuards.splice(i, 1);
+      };
+    },
+
+    afterEach(fn) {
+      afterHooks.push(fn);
+      return () => {
+        const i = afterHooks.indexOf(fn);
+        if (i >= 0) afterHooks.splice(i, 1);
+      };
+    },
+
+    push(to) {
+      return navigate(to, { replace: false });
+    },
+
+    replace(to) {
+      return navigate(to, { replace: true });
+    },
+
+    go(n) {
+      history.go(n);
+    },
+
+    back() {
+      history.back();
+    },
+
+    forward() {
+      history.forward();
+    },
+
+    resolve(to) {
+      const loc = typeof to === 'string' ? parseLocation(to) : to;
+      const matched = matchRoute(routes, loc.path);
+      return { ...loc, matched };
+    },
+
+    /** Called by RouterView placeholder */
+    _registerView(el) {
+      viewHost = el;
+      if (state.matched && state.ready) {
+        renderMatched();
+      }
+    },
+
+    _unregisterView(el) {
+      if (viewHost === el) viewHost = null;
+    }
+  };
+
+  function getLocation() {
+    const path = window.location.pathname.slice(base.length) || '/';
+    return {
+      path,
+      query: parseQuery(window.location.search),
+      hash: window.location.hash
+    };
+  }
+
+  function navigate(to, navOpts = {}) {
+    const target = typeof to === 'string' ? parseLocation(to) : { ...to };
+    if (!target.path) target.path = '/';
+
+    const matched = matchRoute(routes, target.path);
+    const from = router.currentRoute;
+    const next = {
+      path: target.path,
+      query: target.query || {},
+      params: matched ? matched.params : {},
+      matched: matched ? matched.route : null,
+      fullPath: stringifyLocation(target)
+    };
+
+    const runId = {};
+    pending = runId;
+
+    return runGuards(beforeGuards, toGuardCtx(next), toGuardCtx(from)).then((allowed) => {
+      if (pending !== runId) return;
+      if (allowed === false) return false;
+
+      const finalNext = typeof allowed === 'string' || (allowed && allowed.path)
+        ? (() => {
+            const redir = typeof allowed === 'string' ? parseLocation(allowed) : allowed;
+            const m = matchRoute(routes, redir.path);
+            return {
+              path: redir.path,
+              query: redir.query || {},
+              params: m ? m.params : {},
+              matched: m ? m.route : null,
+              fullPath: stringifyLocation(redir)
+            };
+          })()
+        : next;
+
+      if (!navOpts.fromPop && typeof history !== 'undefined') {
+        const url = base + finalNext.fullPath;
+        if (navOpts.replace || navOpts.initial) {
+          history.replaceState({ path: finalNext.path }, '', url);
+        } else {
+          history.pushState({ path: finalNext.path }, '', url);
+        }
+      }
+
+      state.path = finalNext.path;
+      state.params = finalNext.params;
+      state.query = finalNext.query;
+      // Store a plain snapshot — never put RegExp on reactive state
+      // (deep reactive wrapping would proxy regex and break later matches).
+      state.matched = finalNext.matched ? snapshotRoute(finalNext.matched) : null;
+      state.ready = true;
+
+      return renderMatched().then(() => {
+        for (const hook of afterHooks) {
+          try {
+            hook(finalNext, from);
+          } catch (e) {
+            console.error('[easy] afterEach error:', e);
+          }
+        }
+        return finalNext;
+      });
+    });
+  }
+
+  function renderMatched() {
+    if (!viewHost) return Promise.resolve();
+
+    if (currentInstance) {
+      unmountComponent(currentInstance);
+      currentInstance = null;
+    }
+
+    viewHost.innerHTML = '';
+
+    const route = state.matched;
+    if (!route) {
+      viewHost.innerHTML = `<div data-easy-miss>No route matched: ${escapeHtml(state.path)}</div>`;
+      return Promise.resolve();
+    }
+
+    let loader = route.component;
+    if (route.components && route.components.default) {
+      loader = route.components.default;
+    }
+
+    return Promise.resolve()
+      .then(() => {
+        if (typeof loader === 'function' && !loader.__isEasyComponent && !loader.setup) {
+          return loader();
+        }
+        return loader;
+      })
+      .then((mod) => {
+        const comp = mod?.default || mod;
+        // Pass full app._context (incl. registerContext) so page/child event
+        // handlers resolve — without it, clicks fall back to App-only methods.
+        const appCtx = app && app._context ? app._context : {};
+        currentInstance = mountComponent(
+          comp,
+          viewHost,
+          { params: state.params, query: state.query },
+          {
+            ...appCtx,
+            app,
+            router,
+            parent: null
+          }
+        );
+        return currentInstance;
+      })
+      .catch((err) => {
+        console.error('[easy] route load failed:', err);
+        viewHost.innerHTML = `<div data-easy-error>Failed to load page</div>`;
+      });
+  }
+
+  return router;
+}
+
+export function useRouter() {
+  return activeRouter;
+}
+
+/**
+ * Lightweight RouterView marker — compiled apps call router._registerView(el).
+ * Can also be used as a programmatic helper.
+ */
+export function RouterView(host, router) {
+  const r = router || activeRouter;
+  if (!r) throw new Error('[easy] RouterView requires a router');
+  r._registerView(host);
+  return {
+    unmount() {
+      r._unregisterView(host);
+    }
+  };
+}
+
+function normalizeRoutes(routes, parentPath = '') {
+  const result = [];
+  for (const route of routes) {
+    const fullPath = joinPath(parentPath, route.path);
+    const record = {
+      ...route,
+      path: fullPath,
+      regex: pathToRegex(fullPath),
+      keys: extractKeys(fullPath)
+    };
+    result.push(record);
+    if (route.children) {
+      result.push(...normalizeRoutes(route.children, fullPath));
+    }
+  }
+  // Prefer static specificity: more segments / fewer params first
+  result.sort((a, b) => scoreRoute(b.path) - scoreRoute(a.path));
+  return result;
+}
+
+function scoreRoute(path) {
+  const parts = path.split('/').filter(Boolean);
+  let score = parts.length * 10;
+  for (const p of parts) {
+    if (p.startsWith(':')) score -= 5;
+    else if (p === '*') score -= 8;
+    else score += 2;
+  }
+  return score;
+}
+
+function pathToRegex(path) {
+  if (path === '*') return /.*/;
+  const pattern =
+    '^' +
+    path
+      .replace(/\/\*$/, '(?:/.*)?')
+      .replace(/\//g, '\\/')
+      .replace(/:([A-Za-z_][\w]*)/g, '([^/]+)') +
+    '\\/?$';
+  return new RegExp(pattern);
+}
+
+function extractKeys(path) {
+  const keys = [];
+  path.replace(/:([A-Za-z_][\w]*)/g, (_, k) => {
+    keys.push(k);
+    return '';
+  });
+  return keys;
+}
+
+function matchRoute(routes, path) {
+  for (const route of routes) {
+    const m = path.match(route.regex);
+    if (m) {
+      const params = {};
+      route.keys.forEach((key, i) => {
+        params[key] = decodeURIComponent(m[i + 1] || '');
+      });
+      return { route, params };
+    }
+  }
+  return null;
+}
+
+function parseLocation(input) {
+  const [pathAndQuery, hash = ''] = input.split('#');
+  const [path, qs = ''] = pathAndQuery.split('?');
+  return {
+    path: path || '/',
+    query: parseQuery(qs ? `?${qs}` : ''),
+    hash: hash ? `#${hash}` : ''
+  };
+}
+
+function parseQuery(search) {
+  const query = {};
+  const s = search.startsWith('?') ? search.slice(1) : search;
+  if (!s) return query;
+  for (const part of s.split('&')) {
+    if (!part) continue;
+    const [k, v = ''] = part.split('=');
+    query[decodeURIComponent(k)] = decodeURIComponent(v);
+  }
+  return query;
+}
+
+function stringifyLocation({ path, query = {}, hash = '' }) {
+  const qs = Object.keys(query)
+    .map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(query[k])}`)
+    .join('&');
+  return `${path || '/'}${qs ? `?${qs}` : ''}${hash || ''}`;
+}
+
+function joinPath(parent, child) {
+  if (child.startsWith('/')) return child;
+  if (!parent || parent === '/') return `/${child}`.replace(/\/+/g, '/');
+  return `${parent}/${child}`.replace(/\/+/g, '/');
+}
+
+function snapshotRoute(route) {
+  if (!route) return null;
+  return {
+    path: route.path,
+    name: route.name,
+    meta: route.meta,
+    component: route.component,
+    components: route.components
+  };
+}
+
+function toGuardCtx(route) {
+  return {
+    path: route.path,
+    params: route.params || {},
+    query: route.query || {},
+    matched: route.matched || null,
+    fullPath: route.fullPath || route.path
+  };
+}
+
+function runGuards(guards, to, from) {
+  return guards.reduce(
+    (p, guard) =>
+      p.then((prev) => {
+        if (prev === false) return false;
+        if (typeof prev === 'string' || (prev && prev.path)) return prev;
+        return new Promise((resolve) => {
+          let settled = false;
+          const next = (val) => {
+            if (settled) return;
+            settled = true;
+            if (val === undefined || val === true) resolve(true);
+            else resolve(val);
+          };
+          try {
+            const result = guard(to, from, next);
+            if (result && typeof result.then === 'function') {
+              result.then((v) => {
+                if (!settled) next(v === undefined ? true : v);
+              }, () => next(false));
+            } else if (result !== undefined && guard.length < 3) {
+              next(result);
+            } else if (guard.length < 3 && !settled) {
+              next(true);
+            }
+          } catch (e) {
+            console.error('[easy] navigation guard error:', e);
+            next(false);
+          }
+        });
+      }),
+    Promise.resolve(true)
+  );
+}
+
+function escapeHtml(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}

package/src/runtime/scheduler.js

@@ -0,0 +1,39 @@
+const queue = new Set();
+let flushing = false;
+let pending = [];
+
+export function queueJob(fn) {
+  queue.add(fn);
+  if (!flushing) {
+    flushing = true;
+    queueMicrotask(flushJobs);
+  }
+}
+
+function flushJobs() {
+  const jobs = [...queue];
+  queue.clear();
+  flushing = false;
+  for (const job of jobs) {
+    try {
+      job();
+    } catch (e) {
+      console.error('[easy] scheduler error:', e);
+    }
+  }
+  const cbs = pending;
+  pending = [];
+  for (const cb of cbs) cb();
+}
+
+export function nextTick(fn) {
+  return new Promise((resolve) => {
+    pending.push(() => {
+      if (fn) fn();
+      resolve();
+    });
+    if (!flushing && queue.size === 0) {
+      queueMicrotask(flushJobs);
+    }
+  });
+}

package/src/runtime/store.js

@@ -0,0 +1,42 @@
+import { reactive } from './reactive.js';
+
+/**
+ * Simple global store.
+ *
+ * const store = createStore({
+ *   state: () => ({ count: 0 }),
+ *   actions: {
+ *     increment(state) { state.count++ }
+ *   }
+ * });
+ */
+export function createStore(options = {}) {
+  const stateInit = typeof options.state === 'function' ? options.state() : (options.state || {});
+  const state = reactive(stateInit);
+  const actions = options.actions || {};
+  const getters = options.getters || {};
+
+  const api = {
+    get state() {
+      return state;
+    },
+    subscribe(key, fn) {
+      return state.$subscribe(key, fn);
+    }
+  };
+
+  for (const [name, fn] of Object.entries(actions)) {
+    api[name] = (...args) => fn(state, ...args);
+  }
+
+  for (const [name, fn] of Object.entries(getters)) {
+    Object.defineProperty(api, name, {
+      get() {
+        return fn(state);
+      },
+      enumerable: true
+    });
+  }
+
+  return api;
+}

package/src/transform.js

@@ -0,0 +1,106 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { compile } from './compiler/index.js';
+
+/**
+ * Transform a module source for the browser:
+ * - compile .easy SFCs
+ * - rewrite mez-easyjs / mez-easyjs/runtime imports to served virtual paths
+ */
+export function transformFile(filePath, source, options = {}) {
+  const ext = path.extname(filePath);
+  let code = source;
+  let map = null;
+
+  if (ext === '.easy' || ext === '.ejs') {
+    const result = compile(source, {
+      filename: path.basename(filePath),
+      id: options.scopeId
+    });
+    code = result.code;
+    map = result.map;
+  }
+
+  if (options.runtimeUrl) {
+    code = rewriteRuntimeImports(code, options.runtimeUrl);
+  }
+
+  if (options.alias) {
+    for (const [from, to] of Object.entries(options.alias)) {
+      code = code.replaceAll(from, to);
+    }
+  }
+
+  return { code, map };
+}
+
+export function rewriteRuntimeImports(code, runtimeUrl) {
+  const base = runtimeUrl.replace(/\/index\.js$/, '');
+  return code
+    .replace(/(from\s+|import\s*\(\s*)['"]mez-easyjs['"]/g, `$1'${runtimeUrl}'`)
+    .replace(/(from\s+|import\s*\(\s*)['"]mez-easyjs\/runtime['"]/g, `$1'${runtimeUrl}'`)
+    .replace(
+      /(from\s+|import\s*\(\s*)['"]mez-easyjs\/runtime\/([^'"]+)['"]/g,
+      `$1'${base}/$2'`
+    );
+}
+
+export function resolveProject(cwd) {
+  const root = path.resolve(cwd || process.cwd());
+  const configPath = path.join(root, 'easy.config.js');
+  let config = {};
+  if (fs.existsSync(configPath)) {
+    // sync-ish: caller may await loadConfig
+  }
+  return { root, configPath, config };
+}
+
+export async function loadConfig(root) {
+  const configPath = path.join(root, 'easy.config.js');
+  if (!fs.existsSync(configPath)) {
+    return defaultConfig(root);
+  }
+  const mod = await import(pathToFileURL(configPath).href + '?t=' + Date.now());
+  return { ...defaultConfig(root), ...(mod.default || mod) };
+}
+
+function defaultConfig(root) {
+  return {
+    root,
+    srcDir: 'src',
+    outDir: 'dist',
+    publicDir: 'public',
+    entry: 'src/main.js',
+    port: 5173
+  };
+}
+
+export function walkFiles(dir, exts = ['.js', '.easy', '.css', '.html']) {
+  const results = [];
+  if (!fs.existsSync(dir)) return results;
+
+  const stack = [dir];
+  while (stack.length) {
+    const cur = stack.pop();
+    for (const name of fs.readdirSync(cur)) {
+      if (name === 'node_modules' || name === 'dist' || name.startsWith('.')) continue;
+      const full = path.join(cur, name);
+      const st = fs.statSync(full);
+      if (st.isDirectory()) stack.push(full);
+      else if (exts.includes(path.extname(name))) results.push(full);
+    }
+  }
+  return results;
+}
+
+/** Tiny JS minifier — whitespace/comment strip (MVP, no dep). */
+export function minifyJS(code) {
+  return code
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/(^|[^:])\/\/.*$/gm, '$1')
+    .replace(/\n+/g, '\n')
+    .replace(/[ \t]+/g, ' ')
+    .replace(/\s*([{};,:()=<>+\-*/%&|!?])\s*/g, '$1')
+    .trim();
+}

package/templates/minimal/README.md

@@ -0,0 +1,21 @@
+# {{project_name}}
+
+Minimal Easy.js app (scaffolded with `easy create`).
+
+## Scripts
+
+```bash
+npm run dev     # http://localhost:5173
+npm run build   # production → dist/
+```
+
+## Dependencies
+
+This project depends on [`mez-easyjs`](https://www.npmjs.com/package/mez-easyjs) (runtime + compiler + CLI).
+
+When created from the Easy.js monorepo, `package.json` uses a `file:` link into `packages/easyjs`.
+Published users get `"mez-easyjs": "^0.1.0"`.
+
+## Language
+
+JavaScript only for this template. TypeScript scaffolding is planned.

package/templates/minimal/easy.config.js

@@ -0,0 +1,7 @@
+export default {
+  srcDir: 'src',
+  outDir: 'dist',
+  publicDir: 'public',
+  entry: 'src/main.js',
+  port: 5173
+};

package/templates/minimal/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{project_name}}</title>
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/minimal/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{project_name}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "easy dev",
+    "build": "easy build",
+    "generate": "easy generate"
+  },
+  "dependencies": {
+    "mez-easyjs": "^0.1.0"
+  }
+}

package/templates/minimal/src/App.easy

@@ -0,0 +1,24 @@
+<script>
+	let title = 'Welcome to Easy.js';
+</script>
+
+<main class="welcome">
+	<h1>{title}</h1>
+	<p>Edit <code>src/App.easy</code> and save — HMR updates in place.</p>
+</main>
+
+<style>
+	.welcome {
+		padding: 2rem 1.5rem;
+		max-width: 40rem;
+	}
+
+	h1 {
+		letter-spacing: -0.03em;
+		margin: 0 0 0.75rem;
+	}
+
+	code {
+		font-size: 0.95em;
+	}
+</style>

package/templates/minimal/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'mez-easyjs';
+import App from './App.easy';
+
+createApp(App).mount('#app');