azoxjs 0.1.0

package/core/dev/watcher.js

@@ -0,0 +1,52 @@
+// Recursive file watching with debounce.
+//
+// fs.watch fires several times for one save (editors write, rename
+// and touch metadata separately), so events are coalesced into a
+// single callback. Node's `recursive: true` works on macOS and
+// Windows; on Linux it needs Node 20+, so a manual fallback walks
+// subdirectories and watches each one.
+
+import { watch, readdirSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+
+const DEBOUNCE_MS = 40;
+
+export function watchDirectory(dir, onChange, { filter = () => true } = {}) {
+  const watchers = [];
+  let timer = null;
+
+  const trigger = (filename) => {
+    if (filename && !filter(filename)) return;
+
+    clearTimeout(timer);
+    timer = setTimeout(() => onChange(filename), DEBOUNCE_MS);
+  };
+
+  try {
+    watchers.push(watch(dir, { recursive: true }, (_event, filename) => trigger(filename)));
+  } catch {
+    // Recursive mode unavailable: watch this directory and each
+    // subdirectory found at startup.
+    for (const target of [dir, ...subdirectories(dir)]) {
+      watchers.push(watch(target, (_event, filename) => trigger(filename)));
+    }
+  }
+
+  return () => {
+    clearTimeout(timer);
+    for (const watcher of watchers) watcher.close();
+  };
+}
+
+function subdirectories(dir) {
+  const found = [];
+
+  for (const entry of readdirSync(dir)) {
+    if (entry.startsWith('.') || entry === 'node_modules') continue;
+
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) found.push(full, ...subdirectories(full));
+  }
+
+  return found;
+}

package/core/index.js

@@ -0,0 +1,7 @@
+// Public entry point for `import ... from 'azoxjs'`.
+
+export { signal, effect, computed } from './reactivity/signal.js';
+export { parseAzox } from './compiler/parser.js';
+export { compileToModule } from './compiler/compileToJs.js';
+export { renderToHtml } from './renderer/renderToHtml.js';
+export { VERSION, TAGLINE } from './meta.js';

package/core/meta.js

@@ -0,0 +1,15 @@
+// Single source of truth for version and identity strings. Reading
+// from package.json means `azox -v` can never drift out of sync with
+// what npm publishes.
+
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const ROOT_DIR = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+
+const pkg = JSON.parse(readFileSync(resolve(ROOT_DIR, 'package.json'), 'utf8'));
+
+export const VERSION = pkg.version;
+export const TAGLINE = 'The Sound of Future Web';
+export const BANNER = `Azox Framework v${VERSION} - ${TAGLINE}`;

package/core/reactivity/signal.js

@@ -0,0 +1,48 @@
+// Azox's reactivity primitive. No Virtual DOM, no diffing tree —
+// a signal tracks its own subscribers and notifies only them when
+// its value changes. Effects that read a signal during their run
+// are auto-subscribed; this is what lets compiled bindings update
+// a single DOM node directly instead of re-rendering a component.
+
+let activeEffect = null;
+
+export function signal(initialValue) {
+  let value = initialValue;
+  const subscribers = new Set();
+
+  function read() {
+    if (activeEffect) subscribers.add(activeEffect);
+    return value;
+  }
+
+  read.set = (next) => {
+    const resolved = typeof next === 'function' ? next(value) : next;
+    if (resolved === value) return;
+    value = resolved;
+    for (const effect of [...subscribers]) effect();
+  };
+
+  read.peek = () => value;
+
+  return read;
+}
+
+export function effect(fn) {
+  const wrapped = () => {
+    const previous = activeEffect;
+    activeEffect = wrapped;
+    try {
+      fn();
+    } finally {
+      activeEffect = previous;
+    }
+  };
+  wrapped();
+  return wrapped;
+}
+
+export function computed(fn) {
+  const derived = signal(undefined);
+  effect(() => derived.set(fn()));
+  return derived;
+}

package/core/renderer/renderToHtml.js

@@ -0,0 +1,67 @@
+// Server-side renderer. Walks the same AST the compiler uses, but
+// evaluates dynamic expressions once (synchronously) to produce a
+// plain HTML string — no browser DOM APIs involved, so this runs
+// directly in Node. The client script (emitted by compileToJs) then
+// takes over in the browser and wires up live signal bindings on
+// top of this markup.
+
+import { BuildError } from '../buildError.js';
+
+const VOID_TAGS = new Set(['br', 'hr', 'img', 'input', 'meta', 'link']);
+
+export function renderToHtml(ast, scope) {
+  return renderNode(ast.markup, scope);
+}
+
+function renderNode(node, scope) {
+  if (!node) return '';
+
+  // A fragment (from <slot />) contributes only its children.
+  if (node.type === 'fragment') {
+    return node.children.map((child) => renderNode(child, scope)).join('');
+  }
+
+  if (node.type === 'text') {
+    return node.parts
+      .map((part) => (part.kind === 'static' ? escapeHtml(part.value) : escapeHtml(String(evalExpr(part.expr, scope)))))
+      .join('');
+  }
+
+  const attrs = Object.entries(node.attrs)
+    .filter(([key]) => !key.startsWith('on:'))
+    .map(([key, attr]) => {
+      const value = attr.kind === 'static' ? attr.value : String(evalExpr(attr.expr, scope));
+      return ` ${key}="${escapeHtml(value)}"`;
+    })
+    .join('');
+
+  if (VOID_TAGS.has(node.name)) return `<${node.name}${attrs}>`;
+
+  const inner = node.children.map((child) => renderNode(child, scope)).join('');
+  return `<${node.name}${attrs}>${inner}</${node.name}>`;
+}
+
+function evalExpr(expr, scope) {
+  const keys = Object.keys(scope);
+
+  let fn;
+  try {
+    fn = new Function(...keys, `return (${expr});`);
+  } catch (error) {
+    throw new BuildError(`{${expr}} is not valid JavaScript: ${error.message}`);
+  }
+
+  try {
+    return fn(...keys.map((key) => scope[key]));
+  } catch (error) {
+    throw new BuildError(`{${expr}} failed while rendering: ${error.message}`);
+  }
+}
+
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}

package/core/routes.js

@@ -0,0 +1,78 @@
+// Maps files under pages/ to routes and to their place in the build.
+//
+//   pages/index.azox        →  /              →  index.html
+//   pages/about.azox        →  /about         →  about/index.html
+//   pages/blog/index.azox   →  /blog          →  blog/index.html
+//   pages/blog/first.azox   →  /blog/first    →  blog/first/index.html
+//
+// Emitting a directory with an index.html means clean URLs work on
+// any static host without rewrite rules, since serving index.html
+// for a directory is universal behaviour.
+
+import { readdirSync, existsSync } from 'node:fs';
+import { join, relative, sep } from 'node:path';
+
+export const PAGE_EXTENSION = '.azox';
+
+// Directories that are never routes.
+const IGNORED = new Set(['node_modules']);
+
+export function collectRoutes(pagesDir) {
+  if (!existsSync(pagesDir)) return [];
+
+  return walk(pagesDir, pagesDir)
+    .map((sourcePath) => describeRoute(pagesDir, sourcePath))
+    .sort((a, b) => a.url.localeCompare(b.url));
+}
+
+function walk(dir, pagesDir) {
+  const found = [];
+
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    if (entry.name.startsWith('.') || IGNORED.has(entry.name)) continue;
+
+    const full = join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      found.push(...walk(full, pagesDir));
+    } else if (entry.name.endsWith(PAGE_EXTENSION)) {
+      found.push(full);
+    }
+  }
+
+  return found;
+}
+
+function describeRoute(pagesDir, sourcePath) {
+  const relativePath = relative(pagesDir, sourcePath);
+  const segments = relativePath.slice(0, -PAGE_EXTENSION.length).split(sep);
+
+  // A trailing "index" names its parent directory rather than adding
+  // a segment, so blog/index.azox is /blog and not /blog/index.
+  const routeSegments = segments[segments.length - 1] === 'index' ? segments.slice(0, -1) : segments;
+
+  const url = routeSegments.length ? `/${routeSegments.join('/')}` : '/';
+  const outputDir = routeSegments.join('/');
+
+  return {
+    // The name used on the command line: `azox compile --page=blog/first`
+    name: segments.join('/'),
+    sourcePath,
+    url,
+    htmlPath: outputDir ? `${outputDir}/index.html` : 'index.html',
+    // Assets sit beside the page, so a nested page needs to climb
+    // back out to reach the shared runtime at the build root.
+    assetPrefix: '../'.repeat(routeSegments.length) || './',
+    outputDir,
+  };
+}
+
+export function findRoute(routes, name) {
+  // Accept the route URL as well as the file name, since both read
+  // naturally on the command line.
+  const wanted = name.replace(/^\/+|\/+$/g, '');
+
+  return routes.find(
+    (route) => route.name === wanted || route.url === `/${wanted}` || (wanted === '' && route.url === '/')
+  );
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "azoxjs",
+  "version": "0.1.0",
+  "description": "Azox Framework — The Sound of Future Web",
+  "type": "module",
+  "license": "MIT",
+  "author": "Daril Pratomo <darilprtmsr@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/darilpratomo/azox.git"
+  },
+  "homepage": "https://github.com/darilpratomo/azox#readme",
+  "bugs": {
+    "url": "https://github.com/darilpratomo/azox/issues"
+  },
+  "bin": {
+    "azox": "./bin/azox.js"
+  },
+  "exports": {
+    ".": "./core/index.js",
+    "./reactivity": "./core/reactivity/signal.js",
+    "./compiler": "./core/compiler/index.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "bin",
+    "core",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "test": "node --test test/*.test.js",
+    "build": "node ./bin/azox.js compile"
+  },
+  "keywords": [
+    "azox",
+    "framework",
+    "signals",
+    "reactivity",
+    "compiler",
+    "ssr",
+    "no-virtual-dom"
+  ]
+}