@opentf/web 0.4.0 → 0.5.0

package/dist/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "@opentf/web",
-  "version": "0.4.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

@@ -1,73 +0,0 @@
-import { effect as _effect, renderDynamic as _renderDynamic, signal as _signal, createPropsProxy as _createPropsProxy, withInstance as _withInstance } from "../index.js";
-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/dist/router/index.js

@@ -1,216 +0,0 @@
-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)),
-  hash: signal(window.location.hash),
-  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);
-    const s = target[key];
-    if (s && typeof s === 'object' && 'value' in s && typeof s.subscribe === 'function') {
-      return s.value;
-    }
-    return s;
-  },
-  set: (target, key, val) => {
-    const s = target[key];
-    if (s && typeof s === 'object' && 'value' in s && typeof s.subscribe === 'function') {
-      s.value = val;
-    } else {
-      target[key] = val;
-    }
-    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)$/, '');
-    if (route === '') route = '/';
-    if (isNotFound) {
-      routes.notFound = pages[path];
-    } else if (isLayout) {
-      routes.layouts[route] = pages[path];
-    } else {
-      routes.pages[route] = pages[path];
-    }
-  }
-}
-function matchRoute(path) {
-  for (const route in routes.pages) {
-    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 || {})
-      };
-      for (const key in params) {
-        if (route.includes(`[...${key}]`)) {
-          params[key] = params[key].split('/');
-        }
-      }
-      return {
-        page: routes.pages[route],
-        params,
-        route
-      };
-    }
-  }
-  return null;
-}
-function scrollToHash(hash) {
-  if (!hash) return;
-  const id = hash.replace('#', '');
-  const el = document.getElementById(id);
-  if (el) {
-    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);
-    const to = {
-      path: pathname,
-      fullPath: pathname + url.search + url.hash,
-      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 => {
-            navigate(p, root, false);
-            reject('redirected');
-          },
-          replace: p => {
-            navigate(p, root, true);
-            reject('redirected');
-          }
-        };
-
-        // Execute guard
-        Promise.resolve(routerSignals.guard(to, tools)).catch(reject);
-      });
-    } catch (e) {
-      routerSignals.isGuarding.value = false;
-      if (e === 'redirected') return;
-      console.error('Route Guard Error:', e);
-      return;
-    }
-    routerSignals.isGuarding.value = false;
-  }
-  if (!isPopState) {
-    routerSignals.pathname.value = pathname;
-    routerSignals.searchParams.value = new URLSearchParams(url.search);
-    routerSignals.hash.value = url.hash;
-  }
-
-  // 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);
-    }
-    scrollToHash(url.hash);
-    return;
-  }
-  const match = matchRoute(pathname) || (routes.notFound ? {
-    page: routes.notFound,
-    params: {},
-    route: null
-  } : null);
-  if (match) {
-    const {
-      page,
-      params,
-      route
-    } = match;
-    if (currentPageInstance && currentPageInstance._onCleanups) {
-      currentPageInstance._onCleanups.forEach(fn => fn());
-    }
-    const instance = {
-      _onMounts: [],
-      _onCleanups: []
-    };
-    currentPageInstance = instance;
-    const layoutChain = [];
-    if (route) {
-      let currentPath = route;
-      while (true) {
-        if (routes.layouts[currentPath]) {
-          layoutChain.unshift(routes.layouts[currentPath]);
-        }
-        if (currentPath === '/') break;
-        currentPath = currentPath.substring(0, currentPath.lastIndexOf('/')) || '/';
-      }
-    }
-    let content = document.createDocumentFragment();
-    withInstance(instance, () => {
-      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
-        });
-        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);
-    }
-
-    // Scroll to hash after render
-    setTimeout(() => scrollToHash(url.hash), 100);
-  } else {
-    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;
-    routerSignals.pathname.value = window.location.pathname;
-    routerSignals.searchParams.value = new URLSearchParams(window.location.search);
-    routerSignals.hash.value = window.location.hash;
-    navigate(fullPath, undefined, false, true);
-  });
-  window.addEventListener('hashchange', () => {
-    routerSignals.hash.value = window.location.hash;
-    scrollToHash(window.location.hash);
-  });
-}

package/dist/runtime/For.js

@@ -1,16 +0,0 @@
-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.
-  return mapped(props.each, props.children[0]);
-}
-
-// Register as a Web Component to support <For> syntax
-class ForElement extends HTMLElement {
-  connectedCallback() {
-    const each = this._propsSignals?.each;
-    const renderFn = this.childNodes[0]; // Wait, this is tricky
-    // ...
-  }
-}

package/dist/runtime/dom.js

@@ -1,73 +0,0 @@
-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);
-        nextCache.set(key, cached);
-      } else {
-        // If it's a new item OR the data changed (new reference), re-render
-        const node = fn(item, index);
-        node._key = key;
-        nextNodes.push(node);
-        nextCache.set(key, {
-          node,
-          item
-        });
-      }
-    });
-
-    // Cleanup removed items
-    cache.forEach((cached, key) => {
-      if (!nextCache.has(key)) {
-        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);
-  oldNodes.forEach(n => {
-    if (!nextSet.has(n)) n.remove();
-  });
-
-  // 2. Insert or move nodes from right to left to minimize DOM operations
-  let current = anchor;
-  for (let i = nextNodes.length - 1; i >= 0; i--) {
-    const node = nextNodes[i];
-    if (node.nextSibling !== current) {
-      parent.insertBefore(node, current);
-    }
-    current = node;
-  }
-}

package/dist/runtime/lifecycle.js

@@ -1,25 +0,0 @@
-let currentInstance = null;
-export function withInstance(inst, fn) {
-  const prev = currentInstance;
-  currentInstance = inst;
-  try {
-    return fn();
-  } finally {
-    currentInstance = prev;
-  }
-}
-export function onMount(fn) {
-  if (currentInstance) {
-    if (!currentInstance._onMounts) currentInstance._onMounts = [];
-    currentInstance._onMounts.push(fn);
-  } else {
-    // If no instance (like in a Page render), run immediately
-    fn();
-  }
-}
-export function onCleanup(fn) {
-  if (currentInstance) {
-    if (!currentInstance._onCleanups) currentInstance._onCleanups = [];
-    currentInstance._onCleanups.push(fn);
-  }
-}

package/dist/runtime/props.js

@@ -1,103 +0,0 @@
-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);
-      }
-      return target._propsSignals[key].value;
-    },
-    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
-        target._propsSignals[key]._link = effect(() => {
-          target._propsSignals[key].value = value.value;
-        });
-      } else {
-        target._propsSignals[key].value = value;
-      }
-      target[key] = value;
-      return true;
-    },
-    ownKeys: target => {
-      const keys = new Set(Object.keys(target));
-      Object.keys(target._propsSignals).forEach(k => keys.add(k));
-      keys.add("children");
-      return Array.from(keys).filter(k => !k.startsWith("_"));
-    },
-    getOwnPropertyDescriptor: (target, key) => {
-      return {
-        enumerable: true,
-        configurable: true
-      };
-    }
-  });
-}
-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 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;
-        if (isProperty) {
-          if (attrProp === "style" && val && typeof val === "object") {
-            Object.assign(el.style, val);
-          } else if (attrProp === "className" && el instanceof SVGElement) {
-            el.setAttribute("class", val);
-          } else {
-            el[attrProp] = val;
-          }
-        } else {
-          if (val === null || val === undefined || val === false) {
-            el.removeAttribute(key);
-          } else {
-            el.setAttribute(key, val);
-          }
-        }
-      });
-    } else {
-      if (isEvent) {
-        el[name] = value;
-      } else if (isProperty) {
-        if (attrProp === "style" && value && typeof value === "object") {
-          Object.assign(el.style, value);
-        } else if (attrProp === "className" && el instanceof SVGElement) {
-          el.setAttribute("class", value);
-        } else {
-          el[attrProp] = value;
-        }
-      } else {
-        if (value === null || value === undefined || value === false) {
-          el.removeAttribute(key);
-        } else {
-          el.setAttribute(key, value);
-        }
-      }
-    }
-  });
-}