@opentf/web 0.1.0 → 0.2.0

package/dist/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@opentf/web",
+  "version": "0.2.0",
+  "description": "The core engine of the Web App Framework, including the zero-VDOM compiler and signal-based runtime.",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "babel . --out-dir dist --extensions .js,.jsx --copy-files --config-file ./babel.config.cjs --ignore \"node_modules,dist,package.json,bun.lock,*.md\"",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./compiler": "./dist/compiler/babel-plugin.cjs",
+    "./runtime": "./dist/runtime/index.js",
+    "./router": "./dist/router/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@preact/signals-core": "^1.14.1",
+    "@babel/core": "^7.29.0",
+    "@babel/helper-module-imports": "^7.28.6",
+    "@babel/plugin-syntax-jsx": "^7.28.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/dist/router/Link.js

@@ -0,0 +1,76 @@
+import { createPropsProxy as _createPropsProxy, withInstance as _withInstance } from "../index.js";
+import { signal as _signal } from "@preact/signals-core";
+import { renderDynamic as _renderDynamic } from "../index.js";
+import { effect as _effect } from "@preact/signals-core";
+import { navigate } from "./index";
+class LinkElement extends HTMLElement {
+  static observedAttributes = ["href", "className", "style", "children"];
+  set href(val) {
+    this._propsSignals["href"].value = val;
+  }
+  set className(val) {
+    this._propsSignals["className"].value = val;
+    this.setAttribute("class", val);
+  }
+  set style(val) {
+    this._propsSignals["style"].value = val;
+    if (val && typeof val === "object") Object.assign(this.style, val);
+  }
+  set children(val) {
+    this._propsSignals["children"].value = val;
+  }
+  get href() {
+    return this._propsSignals["href"].value;
+  }
+  get className() {
+    return this._propsSignals["className"].value;
+  }
+  get style() {
+    return this._propsSignals["style"].value;
+  }
+  get children() {
+    return this._propsSignals["children"].value;
+  }
+  constructor() {
+    super();
+    this._propsSignals = {
+      href: _signal(null),
+      className: _signal(null),
+      style: _signal(null),
+      children: _signal(null)
+    };
+  }
+  attributeChangedCallback(name, _, value) {
+    this._propsSignals[name].value = value;
+  }
+  connectedCallback() {
+    this._onMounts = [];
+    this._onCleanups = [];
+    const props = _createPropsProxy(this);
+    this._children = Array.from(this.childNodes);
+    while (this.firstChild) this.removeChild(this.firstChild);
+    _withInstance(this, () => {
+      const rootElement = (() => {
+        const el0 = document.createElement("a");
+        _effect(() => el0.href = props.href);
+        _effect(() => el0.className = props.className);
+        _effect(() => Object.assign(el0.style, props.style));
+        el0.onclick = e => {
+          if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
+          e.preventDefault();
+          navigate(props.href);
+          window.scrollTo(0, 0);
+        };
+        _renderDynamic(el0, () => props.children);
+        return el0;
+      })();
+      this.appendChild(rootElement);
+    });
+    this._onMounts.forEach(fn => fn());
+  }
+  disconnectedCallback() {
+    this._onCleanups.forEach(fn => fn());
+  }
+}
+customElements.define("web-link", LinkElement);
+export default LinkElement;

package/{router → dist/router}/index.js

@@ -1,12 +1,10 @@
-import { withInstance } from '../runtime/lifecycle.js'
-import { signal } from '@preact/signals-core'
-
+import { withInstance } from '../runtime/lifecycle.js';
+import { signal } from '@preact/signals-core';
 export const routes = {
   pages: {},
   layouts: {},
   notFound: null
-}
-
+};
 const routerSignals = {
   pathname: signal(window.location.pathname),
   searchParams: signal(new URLSearchParams(window.location.search)),
@@ -14,12 +12,10 @@ const routerSignals = {
   isGuarding: signal(false),
   guard: null
 };
-
 export const router = new Proxy(routerSignals, {
   get: (target, key) => {
-    if (key === "push") return (path) => navigate(path);
-    if (key === "replace") return (path) => navigate(path, undefined, true);
-    
+    if (key === "push") return path => navigate(path);
+    if (key === "replace") return path => navigate(path, undefined, true);
     const s = target[key];
     if (s && typeof s === 'object' && 'value' in s && typeof s.subscribe === 'function') {
       return s.value;
@@ -36,20 +32,13 @@ export const router = new Proxy(routerSignals, {
     return true;
   }
 });
-
 let currentPageInstance = null;
-
 export function registerRoutes(pages) {
   for (const path in pages) {
     const isLayout = path.endsWith('layout.jsx') || path.endsWith('layout.tsx');
     const isNotFound = path.endsWith('404.jsx') || path.endsWith('404.tsx');
-    
-    let route = path
-      .replace(/^.*\/app/, '') 
-      .replace(/\/(page|layout|404)\.(jsx|tsx)$/, '');
-    
+    let route = path.replace(/^.*\/app/, '').replace(/\/(page|layout|404)\.(jsx|tsx)$/, '');
     if (route === '') route = '/';
-    
     if (isNotFound) {
       routes.notFound = pages[path];
     } else if (isLayout) {
@@ -59,26 +48,22 @@ export function registerRoutes(pages) {
     }
   }
 }
-
 function matchRoute(path) {
   for (const route in routes.pages) {
-    const pattern = route
-      .replace(/\[\.\.\.([^\]]+)\]/g, '(?<$1>.+)')
-      .replace(/\[([^\]]+)\]/g, '(?<$1>[^/]+)');
-    
+    const pattern = route.replace(/\[\.\.\.([^\]]+)\]/g, '(?<$1>.+)').replace(/\[([^\]]+)\]/g, '(?<$1>[^/]+)');
     const regex = new RegExp(`^${pattern}$`);
     const match = path.match(regex);
     if (match) {
-      const params = { ...(match.groups || {}) };
-      
+      const params = {
+        ...(match.groups || {})
+      };
       for (const key in params) {
         if (route.includes(`[...${key}]`)) {
           params[key] = params[key].split('/');
         }
       }
-
-      return { 
-        page: routes.pages[route], 
+      return {
+        page: routes.pages[route],
         params,
         route
       };
@@ -86,26 +71,24 @@ function matchRoute(path) {
   }
   return null;
 }
-
-
 function scrollToHash(hash) {
   if (!hash) return;
   const id = hash.replace('#', '');
   const el = document.getElementById(id);
   if (el) {
-    el.scrollIntoView({ behavior: 'smooth' });
+    el.scrollIntoView({
+      behavior: 'smooth'
+    });
   }
 }
-
 export async function navigate(path, root = document.getElementById("app"), replace = false, isPopState = false) {
   if (!path) return;
-  
   const url = new URL(path, window.location.origin);
   const pathname = url.pathname;
   const oldPathname = window.location.pathname;
   const oldSearch = window.location.search;
   const oldHash = window.location.hash;
-  
+
   // 1. Run Route Guard if registered
   if (router.guard) {
     const match = matchRoute(pathname);
@@ -115,23 +98,21 @@ export async function navigate(path, root = document.getElementById("app"), repl
       params: match?.params || {},
       query: Object.fromEntries(new URLSearchParams(url.search))
     };
-
     routerSignals.isGuarding.value = true;
-    
     try {
       await new Promise((resolve, reject) => {
         const tools = {
           next: () => resolve(),
-          redirect: (p) => {
+          redirect: p => {
             navigate(p, root, false);
             reject('redirected');
           },
-          replace: (p) => {
+          replace: p => {
             navigate(p, root, true);
             reject('redirected');
           }
         };
-        
+
         // Execute guard
         Promise.resolve(routerSignals.guard(to, tools)).catch(reject);
       });
@@ -141,10 +122,8 @@ export async function navigate(path, root = document.getElementById("app"), repl
       console.error('Route Guard Error:', e);
       return;
     }
-    
     routerSignals.isGuarding.value = false;
   }
-
   if (!isPopState) {
     routerSignals.pathname.value = pathname;
     routerSignals.searchParams.value = new URLSearchParams(url.search);
@@ -154,25 +133,30 @@ export async function navigate(path, root = document.getElementById("app"), repl
   // If only hash changed, don't re-render everything
   if (pathname === oldPathname && url.search === oldSearch && url.hash !== oldHash) {
     if (!isPopState) {
-      if (replace) window.history.replaceState({}, '', path);
-      else window.history.pushState({}, '', path);
+      if (replace) window.history.replaceState({}, '', path);else window.history.pushState({}, '', path);
     }
     scrollToHash(url.hash);
     return;
   }
-
-  const match = matchRoute(pathname) || (routes.notFound ? { page: routes.notFound, params: {}, route: null } : null);
-  
+  const match = matchRoute(pathname) || (routes.notFound ? {
+    page: routes.notFound,
+    params: {},
+    route: null
+  } : null);
   if (match) {
-    const { page, params, route } = match;
-    
+    const {
+      page,
+      params,
+      route
+    } = match;
     if (currentPageInstance && currentPageInstance._onCleanups) {
       currentPageInstance._onCleanups.forEach(fn => fn());
     }
-    
-    const instance = { _onMounts: [], _onCleanups: [] };
+    const instance = {
+      _onMounts: [],
+      _onCleanups: []
+    };
     currentPageInstance = instance;
-
     const layoutChain = [];
     if (route) {
       let currentPath = route;
@@ -184,32 +168,31 @@ export async function navigate(path, root = document.getElementById("app"), repl
         currentPath = currentPath.substring(0, currentPath.lastIndexOf('/')) || '/';
       }
     }
-
     let content = document.createDocumentFragment();
     withInstance(instance, () => {
-      page.render(content, { params });
-
+      page.render(content, {
+        params
+      });
       for (let i = layoutChain.length - 1; i >= 0; i--) {
         const layout = layoutChain[i];
         const nextContent = document.createDocumentFragment();
-        layout.render(nextContent, { children: content, params });
+        layout.render(nextContent, {
+          children: content,
+          params
+        });
         content = nextContent;
       }
     });
-
     if (!root) root = document.getElementById("app");
     if (root) {
       root.innerHTML = '';
       root.appendChild(content);
     }
-
     if (instance._onMounts) {
       instance._onMounts.forEach(fn => fn());
     }
-
     if (!isPopState) {
-      if (replace) window.history.replaceState({}, '', path);
-      else window.history.pushState({}, '', path);
+      if (replace) window.history.replaceState({}, '', path);else window.history.pushState({}, '', path);
     }
 
     // Scroll to hash after render
@@ -218,7 +201,6 @@ export async function navigate(path, root = document.getElementById("app"), repl
     if (root) root.innerHTML = '<h1>404 Not Found</h1>';
   }
 }
-
 if (typeof window !== 'undefined') {
   window.addEventListener('popstate', () => {
     const fullPath = window.location.pathname + window.location.search + window.location.hash;
@@ -231,4 +213,4 @@ if (typeof window !== 'undefined') {
     routerSignals.hash.value = window.location.hash;
     scrollToHash(window.location.hash);
   });
-}
+}

package/{runtime → dist/runtime}/For.js

@@ -1,6 +1,5 @@
 import { mapped, renderDynamic } from "./dom.js";
 import { withInstance } from "./lifecycle.js";
-
 export function For(props) {
   // We return a "marker" that renderDynamic will handle
   // But wait, if we are called as a component, we need to render something.
@@ -14,4 +13,4 @@ class ForElement extends HTMLElement {
     const renderFn = this.childNodes[0]; // Wait, this is tricky
     // ...
   }
-}
+}

package/{runtime → dist/runtime}/dom.js

@@ -1,41 +1,33 @@
 import { effect } from "@preact/signals-core";
-
 export function renderDynamic(parent, fn) {
   const anchor = document.createComment("dynamic");
   parent.appendChild(anchor);
-  
   let currentNodes = [];
-  
   effect(() => {
     let value = fn();
     // If the value is a function (e.g., from mapped), execute it to get the nodes
     if (typeof value === "function") value = value();
-    
     if (value === null || value === undefined || value === false) value = [];
     if (!Array.isArray(value)) value = [value];
-
     const nextNodes = value.map(v => {
       if (v instanceof Node) return v;
       return document.createTextNode(String(v));
     });
-
     reconcile(anchor.parentNode, anchor, currentNodes, nextNodes);
     currentNodes = nextNodes;
   });
 }
-
 export function mapped(source, fn) {
   let cache = new Map(); // key -> { node }
-  
+
   return () => {
     const list = (typeof source === "function" ? source() : source.value) || [];
     const nextNodes = [];
     const nextCache = new Map();
-
     list.forEach((item, index) => {
       const key = item.key ?? item.id ?? index;
       let cached = cache.get(key);
-      
+
       // If the item exists and the reference is identical, reuse the node
       if (cached && cached.item === item) {
         nextNodes.push(cached.node);
@@ -45,7 +37,10 @@ export function mapped(source, fn) {
         const node = fn(item, index);
         node._key = key;
         nextNodes.push(node);
-        nextCache.set(key, { node, item });
+        nextCache.set(key, {
+          node,
+          item
+        });
       }
     });
 
@@ -55,12 +50,10 @@ export function mapped(source, fn) {
         if (cached.node.remove) cached.node.remove();
       }
     });
-
     cache = nextCache;
     return nextNodes;
   };
 }
-
 function reconcile(parent, anchor, oldNodes, nextNodes) {
   // 1. Remove nodes that are no longer present
   const nextSet = new Set(nextNodes);
@@ -77,4 +70,4 @@ function reconcile(parent, anchor, oldNodes, nextNodes) {
     }
     current = node;
   }
-}
+}

package/{runtime → dist/runtime}/lifecycle.js

@@ -1,5 +1,4 @@
 let currentInstance = null;
-
 export function withInstance(inst, fn) {
   const prev = currentInstance;
   currentInstance = inst;
@@ -9,7 +8,6 @@ export function withInstance(inst, fn) {
     currentInstance = prev;
   }
 }
-
 export function onMount(fn) {
   if (currentInstance) {
     if (!currentInstance._onMounts) currentInstance._onMounts = [];
@@ -19,10 +17,9 @@ export function onMount(fn) {
     fn();
   }
 }
-
 export function onCleanup(fn) {
   if (currentInstance) {
     if (!currentInstance._onCleanups) currentInstance._onCleanups = [];
     currentInstance._onCleanups.push(fn);
   }
-}
+}

package/{runtime → dist/runtime}/props.js

@@ -1,19 +1,16 @@
 import { effect, signal } from "@preact/signals-core";
-
 function toKebabCase(str) {
   return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-
 export function createPropsProxy(el) {
   if (!el._propsSignals) el._propsSignals = {};
-  
   return new Proxy(el, {
     get: (target, key) => {
       if (key === "__signals") return target._propsSignals;
       if (key === "children") return target._children;
       if (typeof key === "symbol") return target[key];
       if (key === "then") return undefined; // Promise check
-      
+
       if (!target._propsSignals[key]) {
         const initialValue = target.getAttribute(toKebabCase(key)) || target[key];
         target._propsSignals[key] = signal(initialValue);
@@ -22,11 +19,9 @@ export function createPropsProxy(el) {
     },
     set: (target, key, value) => {
       const isSignal = value && typeof value === "object" && "value" in value && typeof value.subscribe === "function";
-      
       if (!target._propsSignals[key]) {
         target._propsSignals[key] = signal(isSignal ? value.value : value);
       }
-      
       if (isSignal) {
         // Link the internal signal to the external one
         if (target._propsSignals[key]._link) target._propsSignals[key]._link(); // Cleanup old link
@@ -36,11 +31,10 @@ export function createPropsProxy(el) {
       } else {
         target._propsSignals[key].value = value;
       }
-      
       target[key] = value;
       return true;
     },
-    ownKeys: (target) => {
+    ownKeys: target => {
       const keys = new Set(Object.keys(target));
       Object.keys(target._propsSignals).forEach(k => keys.add(k));
       keys.add("children");
@@ -54,24 +48,19 @@ export function createPropsProxy(el) {
     }
   });
 }
-
 export function applySpread(el, props) {
   if (!props) return;
-  
   const signals = props?.__signals;
-  
   Object.keys(props).forEach(key => {
     let value = props[key];
     if (signals && signals[key]) value = signals[key];
-    
     const name = key.toLowerCase();
-    const attrProp = (name === "class" || name === "classname") ? "className" : key;
+    const attrProp = name === "class" || name === "classname" ? "className" : key;
     const isProperty = ["className", "style", "value", "checked", "id", "title", "href", "src", "key"].includes(attrProp);
     const isEvent = name.startsWith("on");
 
     // Simple heuristic for signal detection: object with .value and .subscribe
     const isSignal = value && typeof value === "object" && "value" in value && typeof value.subscribe === "function";
-
     if (isSignal) {
       effect(() => {
         const val = value.value;
@@ -111,4 +100,4 @@ export function applySpread(el, props) {
       }
     }
   });
-}
+}

package/package.json

@@ -1,16 +1,23 @@
 {
   "name": "@opentf/web",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The core engine of the Web App Framework, including the zero-VDOM compiler and signal-based runtime.",
-  "main": "index.js",
-  "module": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "type": "module",
+  "scripts": {
+    "build": "babel . --out-dir dist --extensions .js,.jsx --copy-files --config-file ./babel.config.cjs --ignore \"node_modules,dist,package.json,bun.lock,*.md\"",
+    "prepublishOnly": "npm run build"
+  },
   "exports": {
-    ".": "./index.js",
-    "./compiler": "./compiler/babel-plugin.cjs",
-    "./runtime": "./runtime/index.js",
-    "./router": "./router/index.js"
+    ".": "./dist/index.js",
+    "./compiler": "./dist/compiler/babel-plugin.cjs",
+    "./runtime": "./dist/runtime/index.js",
+    "./router": "./dist/router/index.js"
   },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@preact/signals-core": "^1.14.1",
     "@babel/core": "^7.29.0",

package/router/Link.jsx

@@ -1,27 +0,0 @@
-import { navigate } from "./index"
-
-export default function Link(props) {
-  return (
-    <a
-      href={props.href}
-      className={props.className}
-      style={props.style}
-      onclick={(e) => {
-        if (
-          e.defaultPrevented ||
-          e.metaKey ||
-          e.ctrlKey ||
-          e.shiftKey ||
-          e.altKey ||
-          e.button !== 0
-        ) return
-
-        e.preventDefault()
-        navigate(props.href)
-        window.scrollTo(0, 0)
-      }}
-    >
-      {props.children}
-    </a>
-  )
-}