@async/framework 0.2.2 → 0.4.0

package/src/handlers.js

@@ -4,6 +4,7 @@ import {
   resolveServerCommandArguments,
   unwrapServerResult
 } from "./server.js";
+import { attachRegistryInspection, createRegistryStore } from "./registry-store.js";
 
 const builtInTokens = new Set(["preventDefault", "stopPropagation", "stopImmediatePropagation"]);
 const builtInHandlers = {
@@ -18,10 +19,12 @@ const builtInHandlers = {
   }
 };
 
-export function createHandlerRegistry(initialMap = {}) {
-  const handlers = new Map();
+export function createHandlerRegistry(initialMap = {}, options = {}) {
+  const registryStore = options.registry ?? createRegistryStore();
+  const type = options.type ?? "handler";
+  const handlers = registryStore._map(type);
 
-  const registry = {
+  const registry = attachRegistryInspection({
     register(id, fn) {
       assertId(id);
       if (typeof fn !== "function") {
@@ -90,14 +93,30 @@ export function createHandlerRegistry(initialMap = {}) {
       }
 
       return results;
+    },
+
+    _adoptMany() {
+      return registry;
     }
-  };
+  }, registryStore, type);
 
-  registry.registerMany(builtInHandlers);
+  registerBuiltIns(registry, handlers);
   registry.registerMany(initialMap);
   return registry;
 }
 
+function registerBuiltIns(registry, handlers) {
+  for (const [id, fn] of Object.entries(builtInHandlers)) {
+    if (!handlers.has(id)) {
+      registry.register(id, fn);
+      continue;
+    }
+    if (handlers.get(id) !== fn) {
+      throw new Error(`Handler "${id}" is already registered.`);
+    }
+  }
+}
+
 export function parseHandlerRef(ref) {
   if (typeof ref !== "string" || ref.trim().length === 0) {
     throw new TypeError("Handler ref must be a non-empty string.");

package/src/html.js

@@ -1,4 +1,5 @@
 import { isSignalRef } from "./signals.js";
+import { attributeName, matchAttribute, normalizeAttributeConfig } from "./attributes.js";
 
 const templateKind = Symbol.for("@async/framework.template");
 const rawKind = Symbol.for("@async/framework.rawHtml");
@@ -22,29 +23,36 @@ export function rawHtml(value) {
   };
 }
 
-export function renderTemplate(value) {
+export function renderTemplate(value, options = {}) {
   if (isTemplateResult(value)) {
+    const context = createRenderContext(options);
     let output = "";
     for (let index = 0; index < value.strings.length; index += 1) {
       output += value.strings[index];
       if (index < value.values.length) {
-        output += renderValue(value.values[index]);
+        output += renderValue(value.values[index], {
+          ...context,
+          attribute: readAttributeContext(value.strings[index])
+        });
       }
     }
     return output;
   }
-  return renderValue(value);
+  return renderValue(value, createRenderContext(options));
 }
 
-function renderValue(value) {
+function renderValue(value, context = createRenderContext()) {
   if (value?.[rawKind]) {
     return value.html;
   }
   if (isTemplateResult(value)) {
-    return renderTemplate(value);
+    return renderTemplate(value, context);
+  }
+  if (context.attribute) {
+    return renderAttributeValue(value, context);
   }
   if (Array.isArray(value)) {
-    return value.map(renderValue).join("");
+    return value.map((item) => renderValue(item, context)).join("");
   }
   if (isSignalRef(value)) {
     return escapeHtml(value.value);
@@ -55,6 +63,91 @@ function renderValue(value) {
   return escapeHtml(value);
 }
 
+function renderAttributeValue(value, context) {
+  const signalName = matchAttribute(context.attribute.name, context.attributes, "signal");
+  const className = matchAttribute(context.attribute.name, context.attributes, "class");
+  const signalPath = signalPathFor(value, context);
+
+  if (context.attribute.name === "value" && signalPath) {
+    const currentValue = readSignalValue(value, context);
+    const signalValueAttribute = attributeName(context.attributes, "signal", "value");
+    return `${escapeHtml(currentValue)}${context.attribute.quote} ${signalValueAttribute}=${context.attribute.quote}${escapeHtml(signalPath)}`;
+  }
+
+  if (signalName != null || className != null) {
+    if (signalPath) {
+      return escapeHtml(signalPath);
+    }
+    if (isInlineBindingValue(value)) {
+      return escapeHtml(registerInlineBinding(value, context));
+    }
+  }
+
+  return renderValueAsAttributeLiteral(value, context);
+}
+
+function renderValueAsAttributeLiteral(value, context) {
+  if (Array.isArray(value)) {
+    return value.map((item) => renderValueAsAttributeLiteral(item, context)).join("");
+  }
+  if (isSignalRef(value)) {
+    return escapeHtml(value.value);
+  }
+  if (value == null || value === false) {
+    return "";
+  }
+  return escapeHtml(value);
+}
+
+function createRenderContext(options = {}) {
+  return {
+    ...options,
+    attributes: normalizeAttributeConfig(options.attributes)
+  };
+}
+
+function readAttributeContext(source) {
+  const match = source.match(/(?:^|[\s<])([^\s"'=<>`]+)\s*=\s*(["'])$/);
+  if (!match) {
+    return null;
+  }
+  return {
+    name: match[1],
+    quote: match[2]
+  };
+}
+
+function signalPathFor(value, context) {
+  if (isSignalRef(value)) {
+    return value.id;
+  }
+  if (typeof value === "string" && context.signals?.has?.(value)) {
+    return value;
+  }
+  return null;
+}
+
+function readSignalValue(value, context) {
+  if (isSignalRef(value)) {
+    return value.value;
+  }
+  if (typeof value === "string" && context.signals?.has?.(value)) {
+    return context.signals.get(value);
+  }
+  return value;
+}
+
+function isInlineBindingValue(value) {
+  return Boolean(value && typeof value === "object");
+}
+
+function registerInlineBinding(value, context) {
+  if (typeof context.bind !== "function") {
+    return value;
+  }
+  return context.bind(value);
+}
+
 export function escapeHtml(value) {
   return String(value)
     .replaceAll("&", "&amp;")

package/src/index.js

@@ -1,5 +1,6 @@
 export { asyncSignal } from "./async-signal.js";
 export { Async, createApp, defineApp } from "./app.js";
+export { attributeName, defineAttributeConfig } from "./attributes.js";
 export { createCacheRegistry, defineCache } from "./cache.js";
 export { component, createComponentRegistry, defineComponent } from "./component.js";
 export { delay } from "./delay.js";
@@ -7,6 +8,7 @@ export { createHandlerRegistry } from "./handlers.js";
 export { html } from "./html.js";
 export { AsyncLoader } from "./loader.js";
 export { createPartialRegistry } from "./partials.js";
+export { createRegistryStore } from "./registry-store.js";
 export { createRouteRegistry, createRouter, defineRoute, route } from "./router.js";
 export { createServerProxy, createServerRegistry } from "./server.js";
 export { computed, createSignal, createSignalRegistry, effect, signal } from "./signals.js";

package/src/loader.js

@@ -1,12 +1,16 @@
 import { renderComponent } from "./component.js";
 import { createHandlerRegistry } from "./handlers.js";
-import { createSignalRegistry } from "./signals.js";
+import { createSignalRegistry, isSignalRef } from "./signals.js";
+import { matchAttribute, normalizeAttributeConfig, readAttribute } from "./attributes.js";
 
-export function AsyncLoader({ root, signals, handlers, server, router, cache } = {}) {
+const inlineBindingPrefix = "__async:inline:";
+
+export function AsyncLoader({ root, signals, handlers, server, router, cache, attributes } = {}) {
   const documentRef = root?.ownerDocument ?? root ?? globalThis.document;
   const rootNode = root ?? documentRef;
   const signalRegistry = signals ?? createSignalRegistry();
   const handlerRegistry = handlers ?? createHandlerRegistry();
+  const attributeConfig = normalizeAttributeConfig(attributes);
   const cleanups = new Set();
   const eventBindings = new WeakMap();
   const signalBindings = new WeakMap();
@@ -14,6 +18,8 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
   const visibleElements = new WeakSet();
   const boundaryState = new WeakMap();
   const renderingBoundaries = new WeakSet();
+  const inlineBindings = new Map();
+  let inlineBindingCounter = 0;
   let destroyed = false;
 
   const api = {
@@ -23,6 +29,7 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
     server,
     router,
     cache,
+    attributes: attributeConfig,
 
     start() {
       assertActive();
@@ -33,6 +40,7 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
     scan(rootOrFragment = rootNode) {
       assertActive();
       bindSignalAttributes(rootOrFragment);
+      bindClassAttributes(rootOrFragment);
       bindEventAttributes(rootOrFragment);
       bindBoundaries(rootOrFragment);
       runPseudoEvents(rootOrFragment);
@@ -41,7 +49,7 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
 
     swap(boundaryId, fragmentOrTemplate) {
       assertActive();
-      const boundary = findBoundary(rootNode, boundaryId);
+      const boundary = findBoundary(rootNode, boundaryId, attributeConfig);
       if (!boundary) {
         throw new Error(`Boundary "${boundaryId}" was not found.`);
       }
@@ -58,7 +66,8 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
         loader: api,
         server: api.server,
         router: api.router,
-        cache: api.cache
+        cache: api.cache,
+        attributes: attributeConfig
       });
       target.replaceChildren(toFragment(rendered.html, target.ownerDocument));
       api.scan(target);
@@ -81,22 +90,32 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
 
     _observeVisible(target, fn) {
       return observeVisible(target, fn);
+    },
+
+    _registerBinding(value) {
+      const id = `${inlineBindingPrefix}${++inlineBindingCounter}`;
+      inlineBindings.set(id, value);
+      return id;
+    },
+
+    _releaseBinding(id) {
+      inlineBindings.delete(id);
     }
   };
 
   signalRegistry._setContext?.({ server: api.server, router: api.router, loader: api, cache: api.cache });
 
   function bindEventAttributes(scope) {
-    for (const element of selectAll(scope, "[data-async-container], *")) {
+    for (const element of elementsIn(scope)) {
       if (typeof element.getAttributeNames !== "function") {
         continue;
       }
       for (const name of element.getAttributeNames()) {
-        if (!name.startsWith("on:")) {
+        const eventName = matchAttribute(name, attributeConfig, "on");
+        if (!eventName) {
           continue;
         }
-        const eventName = name.slice(3);
-        if (eventName === "mount" || eventName === "visible") {
+        if (eventName === "attach" || eventName === "mount" || eventName === "visible") {
           continue;
         }
         bindEvent(element, eventName, element.getAttribute(name));
@@ -137,43 +156,96 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
   }
 
   function bindSignalAttributes(scope) {
-    for (const element of selectAll(scope, "[data-async-text]")) {
-      bindSignal(element, `text:${element.getAttribute("data-async-text")}`, element.getAttribute("data-async-text"), (value) => {
-        element.textContent = value ?? "";
-      });
-    }
-
-    for (const element of selectAll(scope, "[data-async-value]")) {
-      const path = element.getAttribute("data-async-value");
-      bindSignal(element, `value:${path}`, path, (value) => {
-        if ("value" in element && element.value !== String(value ?? "")) {
-          element.value = value ?? "";
-        } else if (!("value" in element)) {
-          element.setAttribute("value", value ?? "");
-        }
-      });
-      bindValueWriter(element, path);
-    }
-
-    for (const element of selectAll(scope, "*")) {
+    for (const element of elementsIn(scope)) {
       for (const name of element.getAttributeNames?.() ?? []) {
-        if (name.startsWith("data-async-attr:")) {
-          const attr = name.slice("data-async-attr:".length);
+        const signalName = matchAttribute(name, attributeConfig, "signal");
+        if (!signalName) {
+          continue;
+        }
+        if (signalName === "text") {
           const path = element.getAttribute(name);
-          bindSignal(element, `attr:${attr}:${path}`, path, (value) => updateAttribute(element, attr, value));
+          bindSignal(element, `text:${path}`, path, (value) => {
+            element.textContent = value ?? "";
+          });
+          continue;
         }
-        if (name.startsWith("data-async-class:")) {
-          const className = name.slice("data-async-class:".length);
+        if (signalName === "value") {
           const path = element.getAttribute(name);
-          bindSignal(element, `class:${className}:${path}`, path, (value) => {
-            element.classList.toggle(className, Boolean(value));
+          bindSignal(element, `value:${path}`, path, (value) => {
+            if ("value" in element && element.value !== String(value ?? "")) {
+              element.value = value ?? "";
+            } else if (!("value" in element)) {
+              element.setAttribute("value", value ?? "");
+            }
           });
+          bindValueWriter(element, path);
+          continue;
+        }
+        if (signalName.startsWith("attr:")) {
+          const attr = signalName.slice("attr:".length);
+          const path = element.getAttribute(name);
+          bindSignal(element, `attr:${attr}:${path}`, path, (value) => updateAttribute(element, attr, value));
+          continue;
+        }
+        if (signalName.startsWith("class:")) {
+          const className = signalName.slice("class:".length);
+          const path = element.getAttribute(name);
+          if (className === "" || className === "{}") {
+            bindClass(element, className, path);
+          } else {
+            bindSignal(element, `class:${className}:${path}`, path, (value) => {
+              element.classList.toggle(className, Boolean(value));
+            });
+          }
+          continue;
+        }
+        if (signalName === "class") {
+          const path = element.getAttribute(name);
+          bindClass(element, "{}", path);
         }
       }
     }
   }
 
-  function bindSignal(element, key, path, apply) {
+  function bindClassAttributes(scope) {
+    for (const element of elementsIn(scope)) {
+      for (const name of element.getAttributeNames?.() ?? []) {
+        const className = matchAttribute(name, attributeConfig, "class");
+        if (className == null) {
+          continue;
+        }
+        bindClass(element, className, element.getAttribute(name));
+      }
+    }
+  }
+
+  function bindClass(element, className, path) {
+    if (className === "" || className === "{}") {
+      const staticClasses = readClassTokens(element);
+      let previous = new Set();
+      bindSignal(element, `class:{}:${path}`, path, (value) => {
+        const next = normalizeClassTokens(value);
+        const current = readClassTokens(element);
+        for (const token of previous) {
+          if (!next.has(token) && !staticClasses.has(token)) {
+            current.delete(token);
+          }
+        }
+        for (const token of next) {
+          current.add(token);
+        }
+        writeClassTokens(element, current);
+        previous = next;
+      }, { rawInline: true });
+      return;
+    }
+
+    bindSignal(element, `class:${className}:${path}`, path, (value) => {
+      updateClassToken(element, className, Boolean(value));
+    });
+  }
+
+  function bindSignal(element, key, path, apply, options = {}) {
     const bound = signalBindings.get(element) ?? new Set();
     if (bound.has(key)) {
       return;
@@ -181,8 +253,9 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
     bound.add(key);
     signalBindings.set(element, bound);
 
-    apply(signalRegistry.get(path));
-    cleanups.add(signalRegistry.subscribe(path, apply));
+    const read = () => readBinding(path, options);
+    apply(read());
+    cleanups.add(subscribeBinding(path, () => apply(read())));
   }
 
   function bindValueWriter(element, path) {
@@ -190,19 +263,53 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
     bindEvent(element, "change", `__async:set:${path}`);
     if (!handlerRegistry.resolve(`__async:set:${path}`)) {
       handlerRegistry.register(`__async:set:${path}`, function writeValue({ element }) {
-        signalRegistry.set(path, element.value);
+        writeBinding(path, element.value);
       });
     }
   }
 
+  function readBinding(path, options = {}) {
+    if (isInlineBinding(path)) {
+      const value = inlineBindings.get(path);
+      return options.rawInline ? value : resolveInlineValue(value);
+    }
+    return signalRegistry.get(path);
+  }
+
+  function writeBinding(path, value) {
+    if (!isInlineBinding(path)) {
+      return signalRegistry.set(path, value);
+    }
+    const binding = inlineBindings.get(path);
+    if (isSignalRef(binding)) {
+      return binding.set(value);
+    }
+    throw new Error(`Inline binding "${path}" is not writable.`);
+  }
+
+  function subscribeBinding(path, fn) {
+    if (!isInlineBinding(path)) {
+      return signalRegistry.subscribe(path, fn);
+    }
+    const cleanups = collectSignalRefs(inlineBindings.get(path)).map((ref) => ref.subscribe(fn));
+    return () => {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+    };
+  }
+
   function bindBoundaries(scope) {
-    for (const boundary of selectAll(scope, "[data-async-boundary]")) {
+    for (const boundary of elementsIn(scope)) {
       if (renderingBoundaries.has(boundary)) {
         continue;
       }
-      const id = boundary.getAttribute("data-async-boundary");
+      const id = readAttribute(boundary, attributeConfig, "async", "boundary");
+      if (id == null) {
+        continue;
+      }
       if (!boundaryState.has(boundary)) {
-        const templates = collectBoundaryTemplates(boundary, id);
+        const templates = collectBoundaryTemplates(boundary, id, attributeConfig);
         if (Object.keys(templates).length === 0 || !signalRegistry.has(id)) {
           continue;
         }
@@ -238,23 +345,44 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
   }
 
   function runPseudoEvents(scope) {
-    for (const element of selectAll(scope, "[on\\:mount]")) {
+    for (const element of elementsIn(scope)) {
+      const refs = readPseudoRefs(element, ["attach", "mount"]);
+      if (refs.length === 0) {
+        continue;
+      }
       if (mountedElements.has(element)) {
         continue;
       }
       mountedElements.add(element);
-      runPseudo(element, element.getAttribute("on:mount"));
+      for (const ref of refs) {
+        runPseudo(element, ref);
+      }
     }
 
-    for (const element of selectAll(scope, "[on\\:visible]")) {
+    for (const element of elementsIn(scope)) {
+      const ref = readAttribute(element, attributeConfig, "on", "visible");
+      if (ref == null) {
+        continue;
+      }
       if (visibleElements.has(element)) {
         continue;
       }
       visibleElements.add(element);
-      cleanups.add(observeVisible(element, () => runPseudo(element, element.getAttribute("on:visible"))));
+      cleanups.add(observeVisible(element, () => runPseudo(element, ref)));
     }
   }
 
+  function readPseudoRefs(element, names) {
+    const refs = [];
+    for (const name of names) {
+      const ref = readAttribute(element, attributeConfig, "on", name);
+      if (ref != null) {
+        refs.push(ref);
+      }
+    }
+    return refs;
+  }
+
   async function runPseudo(element, ref) {
     try {
       const results = await handlerRegistry.run(ref, {
@@ -309,16 +437,120 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache } =
   return api;
 }
 
-function collectBoundaryTemplates(boundary, id) {
+function normalizeClassTokens(value, tokens = new Set()) {
+  if (value == null || value === false) {
+    return tokens;
+  }
+  if (isSignalRef(value)) {
+    const signalValue = value.value;
+    if (signalValue === true) {
+      tokens.add(signalClassName(value.id));
+      return tokens;
+    }
+    return normalizeClassTokens(signalValue, tokens);
+  }
+  if (typeof value === "string") {
+    for (const token of value.split(/\s+/).filter(Boolean)) {
+      tokens.add(token);
+    }
+    return tokens;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      normalizeClassTokens(item, tokens);
+    }
+    return tokens;
+  }
+  if (typeof value === "object") {
+    for (const [token, enabled] of Object.entries(value)) {
+      const value = isSignalRef(enabled) ? enabled.value : enabled;
+      if (value) {
+        normalizeClassTokens(token, tokens);
+      }
+    }
+    return tokens;
+  }
+  if (value !== true) {
+    tokens.add(String(value));
+  }
+  return tokens;
+}
+
+function resolveInlineValue(value) {
+  if (isSignalRef(value)) {
+    return value.value;
+  }
+  if (Array.isArray(value)) {
+    return value.map(resolveInlineValue);
+  }
+  if (value && typeof value === "object") {
+    return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, resolveInlineValue(entry)]));
+  }
+  return value;
+}
+
+function collectSignalRefs(value, refs = new Map()) {
+  if (isSignalRef(value)) {
+    refs.set(value.id, value);
+    return [...refs.values()];
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      collectSignalRefs(item, refs);
+    }
+    return [...refs.values()];
+  }
+  if (value && typeof value === "object") {
+    for (const item of Object.values(value)) {
+      collectSignalRefs(item, refs);
+    }
+  }
+  return [...refs.values()];
+}
+
+function isInlineBinding(value) {
+  return typeof value === "string" && value.startsWith(inlineBindingPrefix);
+}
+
+function signalClassName(id) {
+  return id.split(".").at(-1);
+}
+
+function updateClassToken(element, className, enabled) {
+  const tokens = readClassTokens(element);
+  for (const token of normalizeClassTokens(className)) {
+    if (enabled) {
+      tokens.add(token);
+    } else {
+      tokens.delete(token);
+    }
+  }
+  writeClassTokens(element, tokens);
+}
+
+function readClassTokens(element) {
+  return normalizeClassTokens(element.getAttribute("class") ?? "");
+}
+
+function writeClassTokens(element, tokens) {
+  const value = [...tokens].join(" ");
+  if (value.length === 0) {
+    element.removeAttribute("class");
+    return;
+  }
+  element.setAttribute("class", value);
+}
+
+function collectBoundaryTemplates(boundary, id, attributeConfig) {
   const templates = {};
   for (const template of [...boundary.children].filter((child) => child.tagName === "TEMPLATE")) {
-    if (template.getAttribute("data-async-loading") === id) {
+    if (readAttribute(template, attributeConfig, "async", "loading") === id) {
       templates.loading = template;
     }
-    if (template.getAttribute("data-async-ready") === id) {
+    if (readAttribute(template, attributeConfig, "async", "ready") === id) {
       templates.ready = template;
     }
-    if (template.getAttribute("data-async-error") === id) {
+    if (readAttribute(template, attributeConfig, "async", "error") === id) {
       templates.error = template;
     }
   }
@@ -358,12 +590,17 @@ function selectAll(scope, selector) {
   return elements;
 }
 
-function findBoundary(root, boundaryId) {
-  const selector = `[data-async-boundary="${String(boundaryId).replaceAll('"', '\\"')}"]`;
-  if (root?.nodeType === 1 && root.matches?.(selector)) {
-    return root;
+function elementsIn(scope) {
+  return selectAll(scope, "*");
+}
+
+function findBoundary(root, boundaryId, attributeConfig) {
+  for (const element of elementsIn(root)) {
+    if (readAttribute(element, attributeConfig, "async", "boundary") === String(boundaryId)) {
+      return element;
+    }
   }
-  return root?.querySelector?.(selector);
+  return null;
 }
 
 function toFragment(value, documentRef) {