npm - @opentf/web - Versions diffs - 0.4.0 → 0.6.0 - Mend

@opentf/web 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (187) hide show

package/server/render.js ADDED Viewed

@@ -0,0 +1,98 @@
+//! Server render for SSG (ARCHITECTURE.md §6) — composes a route's HTML by
+//! calling the SSG render functions the compiler emits (page/layout factories
+//! that return strings, components registered in the SSG registry). No DOM: this
+//! runs in plain Bun/Node at build time.
+//
+// The route table (registerRoutes/matchRoute/layoutChain) is shared with the
+// client router; here we resolve a route's page + layout chain to string
+// renderers and concatenate them, passing `children` as an HTML string.
+import {
+  layoutChain,
+  matchRoute,
+  resolveFactory,
+  routes,
+  setRouteState,
+} from "../runtime/router.js";
+import { resolveMetadata } from "./head.js";
+/**
+ * Render `pathname` to `{ html, metadata, status }`: the markup for inside `#app`,
+ * the resolved SEO metadata (for the `<head>`), and an HTTP `status` (200 when the
+ * path matched a real route, 404 when it fell back to the registered 404 page — the
+ * SSR server uses it; SSG ignores it). `params` (from `getStaticPaths`) override the
+ * matched route's params for dynamic routes. Returns `null` if there's no match and
+ * no 404 page.
+ */
+export async function renderRoute(pathname, params = null, search = "") {
+  const real = matchRoute(pathname);
+  const match =
+    real || (routes.notFound ? { entry: routes.notFound, params: {}, route: null } : null);
+  if (!match) return null;
+  if (params) match.params = params;
+  // Let a page reading `router.params`/`pathname`/`query` resolve to this route.
+  setRouteState({ pathname, search, params: match.params });
+  const query = Object.fromEntries(new URLSearchParams(search));
+  const props = { params: match.params, query };
+  let html = (await resolveFactory(match.entry))(props);
+  // Wrap with layouts, most-specific inward to root outermost.
+  const chain = layoutChain(match.route);
+  for (let i = chain.length - 1; i >= 0; i--) {
+    const layout = await resolveFactory(chain[i]);
+    html = layout({ ...props, children: html });
+  }
+  const metadata = await resolveMetadata({
+    route: match.route,
+    entry: match.entry,
+    params: match.params,
+    query,
+  });
+  return { html, metadata, status: real ? 200 : 404 };
+}
+/** Back-compat / convenience: render just the `#app` markup for `pathname`. */
+export async function renderToString(pathname, search = "") {
+  const result = await renderRoute(pathname, null, search);
+  return result ? result.html : null;
+}
+/** Substitute `[param]` / `[...rest]` in a route with concrete values. */
+function fillRoute(route, params) {
+  return route
+    .replace(/\[\.\.\.([^\]]+)\]/g, (_, k) => [].concat(params[k] ?? []).join("/"))
+    .replace(/\[([^\]]+)\]/g, (_, k) => String(params[k] ?? ""));
+}
+/**
+ * Enumerate the concrete paths to pre-render as `{ path, params }`. Static routes
+ * are taken as-is (`params: {}`); dynamic routes (`[param]`) are expanded via the
+ * page module's optional `getStaticPaths()` (returning `[{ params }]`), carrying the
+ * params forward so the renderer/`generateMetadata` see them. Dynamic routes without
+ * `getStaticPaths` are collected as `skipped`.
+ */
+export async function collectRoutePaths() {
+  const paths = [];
+  const skipped = [];
+  for (const route in routes.pages) {
+    if (!route.includes("[")) {
+      paths.push({ path: route, params: {} });
+      continue;
+    }
+    const ns = routes.pages[route];
+    const getStaticPaths =
+      ns && (ns.getStaticPaths || (ns.default && ns.default.getStaticPaths));
+    if (typeof getStaticPaths === "function") {
+      for (const entry of (await getStaticPaths()) || []) {
+        const params = entry.params || entry;
+        paths.push({ path: fillRoute(route, params), params });
+      }
+    } else {
+      skipped.push(route);
+    }
+  }
+  return { paths, skipped };
+}

package/server/ssg-runtime.js ADDED Viewed

@@ -0,0 +1,112 @@
+//! SSG runtime helpers — the string-building primitives the SSG codegen emits
+//! (ARCHITECTURE.md §6). No DOM: these run in plain Bun/Node at build time and
+//! return HTML strings. Component output is composed via a tag→renderer registry,
+//! mirroring how CSR composes by Custom Element tag.
+const VOID = new Set([
+  "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta",
+  "param", "source", "track", "wbr",
+]);
+const UNITLESS = new Set([
+  "opacity", "zIndex", "fontWeight", "lineHeight", "flex", "flexGrow", "flexShrink",
+  "order", "zoom", "tabSize", "columnCount", "fillOpacity", "strokeOpacity",
+]);
+const registry = {};
+/** Register a component's SSG renderer under its Custom Element tag. */
+export function defineSSG(tag, render) {
+  registry[tag] = render;
+}
+/** Escape text content for HTML. */
+export function escapeHtml(s) {
+  return String(s).replace(/[&<>]/g, (c) => (c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;"));
+}
+/** Escape an attribute value. */
+export function escapeAttr(s) {
+  return String(s).replace(/[&"]/g, (c) => (c === "&" ? "&amp;" : "&quot;"));
+}
+/** clsx-style class normalization (mirrors runtime/dom.js). */
+export function clsx(value) {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number") return String(value);
+  if (Array.isArray(value)) {
+    const parts = [];
+    for (const v of value) {
+      const s = clsx(v);
+      if (s) parts.push(s);
+    }
+    return parts.join(" ");
+  }
+  if (typeof value === "object") {
+    const parts = [];
+    for (const k in value) if (value[k]) parts.push(k);
+    return parts.join(" ");
+  }
+  return "";
+}
+/** Serialize a style value (string passthrough, or object → `prop:val;`). */
+export function styleString(value) {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  let s = "";
+  for (const k in value) {
+    const v = value[k];
+    if (v == null) continue;
+    const prop = k.startsWith("--") ? k : k.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+    const val = typeof v === "number" && !UNITLESS.has(k) ? `${v}px` : v;
+    s += `${prop}:${val};`;
+  }
+  return s;
+}
+/** Render one attribute: ` name="value"`, ` name` (true), or "" (null/false). */
+export function attr(name, value) {
+  if (name === "class") value = clsx(value);
+  else if (name === "style") value = styleString(value);
+  if (value == null || value === false) return "";
+  if (value === true) return ` ${name}`;
+  return ` ${name}="${escapeAttr(String(value))}"`;
+}
+/** A dynamic hole's value → HTML: trusted `{__html}` raw, else escaped text. */
+export function ssgText(v) {
+  if (v == null || v === false || v === true) return "";
+  if (typeof v === "object" && v.__html != null) return v.__html;
+  return escapeHtml(String(v));
+}
+/** Render an array.map list to concatenated HTML. */
+export function ssgList(arr, fn) {
+  return (Array.isArray(arr) ? arr : []).map(fn).join("");
+}
+/**
+ * Render a child component `<tag>inner</tag>` via the registry. Props are passed to
+ * the renderer (which decides where they land — declared props become properties /
+ * forward into the view), so the host tag carries no reflected attributes — exactly
+ * as CSR composes a component (props go through `setProp`, declared ones as
+ * properties, not host attributes). Avoids duplicating e.g. `class` on both the
+ * host and the element the component renders.
+ */
+export function ssgComponent(tag, props, children) {
+  const render = registry[tag];
+  let inner;
+  try {
+    inner = render ? render(props || {}, children ?? "") : (children ?? "");
+  } catch {
+    inner = ""; // fail soft (client renders/handles it)
+  }
+  // Stamp the stable styling hook on the host (mirrors CSR's `classList.add`) so
+  // tag-hashed components are still styleable by a readable class name.
+  const cls = render && render.hostClass;
+  return cls ? `<${tag} class="${cls}">${inner}</${tag}>` : `<${tag}>${inner}</${tag}>`;
+}
+export { VOID };

package/dist/CHANGELOG.md DELETED Viewed

@@ -1,49 +0,0 @@
-# @opentf/web
-## 0.4.0
-### Minor Changes
-- ba984c2: Here is a summary of the changes for your changelog:
-  ### 🚀 Features
-  - **Compiler:** Added comprehensive support for **SVG camelCase attributes** (e.g., `viewBox`, `strokeWidth`, `strokeLinecap`). The compiler now preserves the original casing for these attributes, ensuring icons and SVGs render correctly in the browser.
-  - **Router:** Improved route matching to support **optional trailing slashes** (e.g., `/about` and `/about/` now match the same route).
-  - **Playground:** Added a new **SVG Icons Showcase** page to demonstrate seamless integration with icon libraries like Lucide and Heroicons.
-  ### 🐞 Bug Fixes
-  - **Compiler:** Fixed a critical bug where **imported components** were incorrectly compiled as dynamic variables (e.g., `document.createElement(Link)`) instead of using their registered custom element tag names (e.g., `document.createElement("web-link")`).
-  - **Playground:** Resolved a build failure in the Icons page by correcting an illegal `const` reassignment of a reactive state variable.
-  - **Performance:** Reduced the simulated network delay in `routeGuard.js` from 800ms to 100ms for a snappier development experience.
-  ### 🏠 Internal & Maintenance
-  - **Refactoring:** Optimized the Babel plugin by moving large static lists (SVG tags, properties, etc.) to the top-level scope, improving compilation speed.
-  - **Testing:** Expanded the test suite with new cases for **icon libraries** and **complex React patterns** (dynamic tags, render props, spread overrides).
-  ***
-## 0.3.0
-### Minor Changes
-- 476d65a: Fix reactivity issues by re-exporting all signals from the core package and updating the compiler to use a unified reactivity instance. This prevents state-update failures in complex project structures.
-## 0.2.0
-### Minor Changes
-- a56fdfe: Fix the core components to prebuilt before publishing
-## 0.1.0
-### Minor Changes
-- Global rebranding to Web App Framework and monorepo restructuring.
-  - Renamed all packages from `@opentf/mwaf-*` to `@opentf/web-*`.
-  - Updated Custom Element prefix from `mwaf-` to `web-`.
-  - Restructured the repository into a scoped monorepo.
-  - Updated scaffolding tool `@opentf/create-web` with new templates.
-  - Aligned all package versions to 0.1.0-alpha.1.

package/dist/README.md DELETED Viewed

@@ -1,41 +0,0 @@
-# @opentf/web
-The core engine of the **Web App Framework**, a lightweight, high-performance SPA framework designed for the modern web.
-## Features
-- 🚀 **Zero-VDOM**: Compiles JSX directly to imperative DOM operations for maximum speed.
-- ⚡ **Signal-Based Reactivity**: Powered by `@preact/signals-core` for fine-grained, surgical updates.
-- 📦 **Web Component Native**: Every component is a standard Custom Element, ensuring perfect encapsulation and interoperability.
-- 🛠️ **Convention-over-Configuration**: File-based routing and automatic component registration.
-- 📏 **Ultra-Lightweight**: Minimal runtime footprint.
-## Installation
-```bash
-npm install @opentf/web
-```
-## Basic Usage
-```jsx
-export default function Counter() {
-  let count = $state(0);
-  return (
-    <div className="counter">
-      <button onclick={() => count--}>-</button>
-      <span>{count}</span>
-      <button onclick={() => count++}>+</button>
-    </div>
-  );
-}
-```
-## Documentation
-Visit [web.opentf.workers.dev](https://web.opentf.workers.dev) for full documentation and guides.
-## License
-MIT © [Open Tech Foundation](https://github.com/Open-Tech-Foundation)

package/dist/babel.config.cjs DELETED Viewed

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: [
-    "@babel/plugin-syntax-jsx",
-    ["./compiler/babel-plugin.cjs", { "runtimeSource": "../index.js" }]
-  ]
-};