@async/framework 0.3.0 → 0.5.0

package/src/loader.js

@@ -1,8 +1,10 @@
 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";
 
+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;
@@ -16,6 +18,9 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
   const visibleElements = new WeakSet();
   const boundaryState = new WeakMap();
   const renderingBoundaries = new WeakSet();
+  const inlineBindings = new Map();
+  const scopedCleanups = new WeakMap();
+  let inlineBindingCounter = 0;
   let destroyed = false;
 
   const api = {
@@ -36,6 +41,7 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
     scan(rootOrFragment = rootNode) {
       assertActive();
       bindSignalAttributes(rootOrFragment);
+      bindClassAttributes(rootOrFragment);
       bindEventAttributes(rootOrFragment);
       bindBoundaries(rootOrFragment);
       runPseudoEvents(rootOrFragment);
@@ -48,6 +54,7 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
       if (!boundary) {
         throw new Error(`Boundary "${boundaryId}" was not found.`);
       }
+      cleanupChildren(boundary);
       boundary.replaceChildren(toFragment(fragmentOrTemplate, documentRef));
       api.scan(boundary);
       return boundary;
@@ -64,11 +71,12 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
         cache: api.cache,
         attributes: attributeConfig
       });
+      cleanupChildren(target);
       target.replaceChildren(toFragment(rendered.html, target.ownerDocument));
       api.scan(target);
       rendered.mount(target);
       rendered.visible(target, api._observeVisible);
-      cleanups.add(rendered.cleanup);
+      addCleanup(rendered.cleanup, target, "children");
       return rendered;
     },
 
@@ -78,17 +86,34 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
       }
       destroyed = true;
       for (const cleanup of [...cleanups]) {
-        cleanup();
+        runCleanup(cleanup);
       }
       cleanups.clear();
     },
 
     _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 });
+  api.server?._setContext?.({
+    signals: signalRegistry,
+    handlers: handlerRegistry,
+    loader: api,
+    router: api.router,
+    cache: api.cache
+  });
 
   function bindEventAttributes(scope) {
     for (const element of elementsIn(scope)) {
@@ -100,7 +125,7 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
         if (!eventName) {
           continue;
         }
-        if (eventName === "mount" || eventName === "visible") {
+        if (eventName === "attach" || eventName === "mount" || eventName === "visible") {
           continue;
         }
         bindEvent(element, eventName, element.getAttribute(name));
@@ -137,7 +162,7 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
     };
 
     element.addEventListener(eventName, listener);
-    cleanups.add(() => element.removeEventListener(eventName, listener));
+    addCleanup(() => element.removeEventListener(eventName, listener), element);
   }
 
   function bindSignalAttributes(scope) {
@@ -172,18 +197,71 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
           bindSignal(element, `attr:${attr}:${path}`, path, (value) => updateAttribute(element, attr, value));
           continue;
         }
+        if (signalName.startsWith("prop:")) {
+          const prop = signalName.slice("prop:".length);
+          const path = element.getAttribute(name);
+          bindSignal(element, `prop:${prop}:${path}`, path, (value) => updateProperty(element, prop, value));
+          continue;
+        }
         if (signalName.startsWith("class:")) {
           const className = signalName.slice("class:".length);
           const path = element.getAttribute(name);
-          bindSignal(element, `class:${className}:${path}`, path, (value) => {
-            element.classList.toggle(className, Boolean(value));
-          });
+          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;
@@ -191,8 +269,9 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
     bound.add(key);
     signalBindings.set(element, bound);
 
-    apply(signalRegistry.get(path));
-    cleanups.add(signalRegistry.subscribe(path, apply));
+    const read = () => readBinding(path, options);
+    apply(read());
+    addCleanup(subscribeBinding(path, () => apply(read())), element);
   }
 
   function bindValueWriter(element, path) {
@@ -200,11 +279,42 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
     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 elementsIn(scope)) {
       if (renderingBoundaries.has(boundary)) {
@@ -225,7 +335,7 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
           cleanup: signalRegistry.subscribe(`${id}.$status`, () => renderBoundary(boundary))
         };
         boundaryState.set(boundary, state);
-        cleanups.add(state.cleanup);
+        addCleanup(state.cleanup, boundary);
       }
       renderBoundary(boundary);
     }
@@ -241,6 +351,7 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
     if (!template) {
       return;
     }
+    cleanupChildren(boundary);
     boundary.replaceChildren(template.content.cloneNode(true));
     renderingBoundaries.add(boundary);
     try {
@@ -252,15 +363,17 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
 
   function runPseudoEvents(scope) {
     for (const element of elementsIn(scope)) {
-      const ref = readAttribute(element, attributeConfig, "on", "mount");
-      if (ref == null) {
+      const refs = readPseudoRefs(element, ["attach", "mount"]);
+      if (refs.length === 0) {
         continue;
       }
       if (mountedElements.has(element)) {
         continue;
       }
       mountedElements.add(element);
-      runPseudo(element, ref);
+      for (const ref of refs) {
+        runPseudo(element, ref);
+      }
     }
 
     for (const element of elementsIn(scope)) {
@@ -272,10 +385,21 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
         continue;
       }
       visibleElements.add(element);
-      cleanups.add(observeVisible(element, () => runPseudo(element, ref)));
+      addCleanup(observeVisible(element, () => runPseudo(element, ref)), element);
     }
   }
 
+  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, {
@@ -291,7 +415,7 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
       });
       for (const result of results) {
         if (typeof result === "function") {
-          cleanups.add(result);
+          addCleanup(result, element);
         }
       }
     } catch (error) {
@@ -327,9 +451,170 @@ export function AsyncLoader({ root, signals, handlers, server, router, cache, at
     }
   }
 
+  function addCleanup(cleanup, owner, mode = "self") {
+    if (typeof cleanup !== "function") {
+      return cleanup;
+    }
+    cleanups.add(cleanup);
+    if (owner) {
+      const records = scopedCleanups.get(owner) ?? [];
+      records.push({ cleanup, mode });
+      scopedCleanups.set(owner, records);
+    }
+    return cleanup;
+  }
+
+  function runCleanup(cleanup) {
+    if (typeof cleanup !== "function" || !cleanups.has(cleanup)) {
+      return;
+    }
+    cleanups.delete(cleanup);
+    cleanup();
+  }
+
+  function cleanupChildren(container) {
+    runScopedCleanups(container, "children");
+    for (const child of [...(container.childNodes ?? [])]) {
+      cleanupNode(child);
+    }
+  }
+
+  function cleanupNode(node) {
+    if (node.nodeType !== 1) {
+      return;
+    }
+    for (const element of elementsIn(node)) {
+      runScopedCleanups(element);
+    }
+  }
+
+  function runScopedCleanups(element, mode) {
+    const records = scopedCleanups.get(element);
+    if (!records) {
+      return;
+    }
+    const remaining = [];
+    for (const record of records) {
+      if (mode && record.mode !== mode) {
+        remaining.push(record);
+        continue;
+      }
+      runCleanup(record.cleanup);
+    }
+    if (remaining.length > 0) {
+      scopedCleanups.set(element, remaining);
+    } else {
+      scopedCleanups.delete(element);
+    }
+  }
+
   return api;
 }
 
+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")) {
@@ -370,6 +655,14 @@ function updateAttribute(element, attr, value) {
   }
 }
 
+function updateProperty(element, prop, value) {
+  if (value == null) {
+    element[prop] = "";
+    return;
+  }
+  element[prop] = value;
+}
+
 function selectAll(scope, selector) {
   const elements = [];
   if (scope?.nodeType === 1 && scope.matches?.(selector)) {

package/src/partials.js

@@ -26,6 +26,11 @@ export function createPartialRegistry(initialMap = {}, options = {}) {
       return registry;
     },
 
+    unregister(id) {
+      assertId(id);
+      return entries.delete(id);
+    },
+
     resolve(id) {
       assertId(id);
       return entries.get(id);
@@ -46,7 +51,7 @@ export function createPartialRegistry(initialMap = {}, options = {}) {
         partials: registry
       };
       const result = await fn.call(partialContext, props);
-      return normalizePartialResult(result);
+      return normalizePartialResult(result, partialContext);
     },
 
     _adoptMany() {
@@ -58,18 +63,18 @@ export function createPartialRegistry(initialMap = {}, options = {}) {
   return registry;
 }
 
-export function normalizePartialResult(result) {
+export function normalizePartialResult(result, context = {}) {
   if (isPartialEnvelope(result)) {
     return {
       ...result,
-      html: Object.hasOwn(result, "html") ? renderPartialValue(result.html) : result.html
+      html: Object.hasOwn(result, "html") ? renderPartialValue(result.html, context) : result.html
     };
   }
 
-  return { html: renderPartialValue(result) };
+  return { html: renderPartialValue(result, context) };
 }
 
-function renderPartialValue(value) {
+function renderPartialValue(value, context) {
   if (value?.nodeType) {
     return value;
   }
@@ -77,9 +82,17 @@ function renderPartialValue(value) {
     return value;
   }
   if (isTemplateResult(value)) {
-    return renderTemplate(value);
+    return renderTemplate(value, templateRenderOptions(context));
   }
-  return renderTemplate(value);
+  return renderTemplate(value, templateRenderOptions(context));
+}
+
+function templateRenderOptions(context) {
+  return {
+    attributes: context.loader?.attributes,
+    signals: context.signals,
+    bind: context.loader?._registerBinding?.bind(context.loader)
+  };
 }
 
 function isPartialEnvelope(value) {

package/src/registry-store.js

@@ -34,6 +34,10 @@ export function createRegistryStore(initial = {}, options = {}) {
       return value;
     },
 
+    unregister(type, id) {
+      return registry.delete(type, id);
+    },
+
     delete(type, id) {
       return registry._map(type).delete(id);
     },

package/src/router.js

@@ -41,6 +41,15 @@ export function createRouteRegistry(initialMap = {}, options = {}) {
       return registry;
     },
 
+    unregister(pattern) {
+      assertPattern(pattern);
+      const index = routes.findIndex((candidate) => candidate.pattern === pattern);
+      if (index !== -1) {
+        routes.splice(index, 1);
+      }
+      return entries.delete(pattern);
+    },
+
     match(url) {
       const path = toUrl(url).pathname;
       for (const candidate of routes) {

package/src/server.js

@@ -28,6 +28,11 @@ export function createServerRegistry(initialMap = {}, options = {}) {
       return registry;
     },
 
+    unregister(id) {
+      assertServerId(id);
+      return entries.delete(id);
+    },
+
     resolve(id) {
       assertServerId(id);
       return entries.get(id);
@@ -43,7 +48,7 @@ export function createServerRegistry(initialMap = {}, options = {}) {
       let runContext;
       const server = createServerNamespace((childId, childArgs, childContext = {}) => {
         return registry.run(childId, childArgs, { ...runContext, ...childContext });
-      });
+      }, {}, () => runContext);
 
       const mergedContext = {
         ...defaults,
@@ -76,7 +81,7 @@ export function createServerRegistry(initialMap = {}, options = {}) {
   }, registryStore, type);
 
   registry.registerMany(initialMap);
-  return createServerNamespace((id, args, context) => registry.run(id, args, context), registry);
+  return createServerNamespace((id, args, context) => registry.run(id, args, context), registry, () => defaults);
 }
 
 export function createServerProxy({
@@ -127,7 +132,7 @@ export function createServerProxy({
     _setContext(context = {}) {
       Object.assign(defaults, context);
     }
-  });
+  }, () => defaults);
 }
 
 export function resolveServerCommandArguments(args, context = {}) {
@@ -205,7 +210,7 @@ export function defaultInput(context = {}) {
   };
 }
 
-function createServerNamespace(run, root = {}) {
+function createServerNamespace(run, root = {}, contextProvider = () => ({})) {
   const cache = new Map();
 
   function namespace(parts) {
@@ -214,11 +219,14 @@ function createServerNamespace(run, root = {}) {
       return cache.get(cacheKey);
     }
 
-    const callable = (...args) => {
+    const callable = async (...args) => {
       if (parts.length === 0) {
         throw new Error("Server namespace is not directly callable.");
       }
-      return Promise.resolve(run(parts.join("."), args)).then(unwrapServerResult);
+      const context = contextProvider() ?? {};
+      const result = await run(parts.join("."), args, context);
+      await applyServerResult(result, context);
+      return unwrapServerResult(result);
     };
 
     const proxy = new Proxy(callable, {
@@ -229,6 +237,18 @@ function createServerNamespace(run, root = {}) {
         if (prop in _target) {
           return _target[prop];
         }
+        if (parts.length === 0 && prop === "_withContext") {
+          return (context = {}) => createServerNamespace(run, root, () => ({
+            ...(contextProvider() ?? {}),
+            ...context
+          }));
+        }
+        if (parts.length === 0 && prop === "run" && typeof root.run === "function") {
+          return (id, args = [], context = {}) => root.run(id, args, {
+            ...(contextProvider() ?? {}),
+            ...context
+          });
+        }
         if (parts.length === 0 && Object.hasOwn(root, prop)) {
           return root[prop];
         }

package/src/signals.js

@@ -121,7 +121,7 @@ export function createSignalRegistry(initialMap = {}, options = {}) {
   const registryStore = options.registry ?? createRegistryStore();
   const type = options.type ?? "signal";
   const entries = registryStore._map(type);
-  const registryCleanups = new Set();
+  const registryCleanups = new Map();
   const runtimeContext = {};
   const boundEntries = new Set();
 
@@ -144,6 +144,19 @@ export function createSignalRegistry(initialMap = {}, options = {}) {
       return registry;
     },
 
+    unregister(id) {
+      assertId(id);
+      if (!entries.has(id)) {
+        return false;
+      }
+      registryCleanups.get(id)?.();
+      registryCleanups.delete(id);
+      entries.get(id)?._dispose?.();
+      entries.delete(id);
+      boundEntries.delete(id);
+      return true;
+    },
+
     ensure(id, initial) {
       assertId(id);
       if (!entries.has(id)) {
@@ -256,7 +269,7 @@ export function createSignalRegistry(initialMap = {}, options = {}) {
     },
 
     destroy() {
-      for (const cleanup of registryCleanups) {
+      for (const cleanup of registryCleanups.values()) {
         cleanup();
       }
       registryCleanups.clear();
@@ -313,7 +326,7 @@ export function createSignalRegistry(initialMap = {}, options = {}) {
     boundEntries.add(id);
     const cleanup = entry._bindRegistry(registry, id);
     if (typeof cleanup === "function") {
-      registryCleanups.add(cleanup);
+      registryCleanups.set(id, cleanup);
     }
   }
 }