solid-tag-runtime 0.0.8 → 0.0.9

package/src/render.js

@@ -0,0 +1,205 @@
+import { SolidTagRuntimeError } from "./errors.js";
+
+export class HTMLRenderError extends SolidTagRuntimeError {
+  constructor(message, options = {}) {
+    super(message, options);
+    this.name = "HTMLRenderError";
+    this.moduleId = options.moduleId;
+    this.component = options.component;
+    this.element = options.element;
+    this.cause = options.cause ?? this.cause;
+  }
+}
+
+export function resolveRenderComponent(namespace, componentName, context = {}) {
+  const exportName = componentName || "default";
+  if (!namespace || !(exportName in namespace)) {
+    const suffix = componentName
+      ? `Module does not export component ${JSON.stringify(componentName)}.`
+      : `Render declaration expected default export, but the module does not export \"default\". Use component=\"Name\" to render a named export.`;
+    throw new HTMLRenderError(suffix, {
+      moduleId: context.moduleId,
+      component: componentName,
+      element: context.element,
+    });
+  }
+
+  const Component = namespace[exportName];
+  if (typeof Component !== "function") {
+    throw new HTMLRenderError(
+      `Export ${JSON.stringify(exportName)} from ${JSON.stringify(context.moduleId ?? "module")} is not callable and cannot be rendered as a Solid component.`,
+      {
+        moduleId: context.moduleId,
+        component: componentName,
+        element: context.element,
+      },
+    );
+  }
+
+  return { Component, exportName };
+}
+
+export function createDefaultHTMLRenderAdapter(runtime) {
+  let modulesPromise;
+
+  return {
+    async mountContainer({ target, Component, props }) {
+      const { Solid, Web } = await getSolidModules();
+      if (typeof Web.render !== "function") {
+        throw new HTMLRenderError("@solidjs/web does not provide render().");
+      }
+
+      const reactive = createReactiveProps(Solid, props);
+      const createComponent = getCreateComponent(Solid, Web);
+      const dispose = Web.render(
+        () => createComponent(Component, reactive.props),
+        target,
+      );
+
+      return {
+        kind: "container",
+        target,
+        updateProps: reactive.update,
+        dispose: once(() => {
+          if (typeof dispose === "function") dispose();
+        }),
+      };
+    },
+
+    async mountRange({ parent, before, startMarker, endMarker, Component, props }) {
+      const { Solid, Web } = await getSolidModules();
+      if (typeof Solid.createRoot !== "function") {
+        throw new HTMLRenderError("solid-js does not provide createRoot().");
+      }
+      if (typeof Web.insert !== "function") {
+        throw new HTMLRenderError("@solidjs/web does not provide insert() required for in-place rendering.");
+      }
+
+      const reactive = createReactiveProps(Solid, props);
+      const createComponent = getCreateComponent(Solid, Web);
+      const disposeRoot = Solid.createRoot(dispose => {
+        Web.insert(
+          parent,
+          () => createComponent(Component, reactive.props),
+          before,
+        );
+        return dispose;
+      });
+
+      return {
+        kind: "range",
+        parent,
+        startMarker,
+        endMarker,
+        updateProps: reactive.update,
+        dispose: once(() => {
+          if (typeof disposeRoot === "function") disposeRoot();
+          clearBetween(startMarker, endMarker);
+        }),
+      };
+    },
+  };
+
+  function getSolidModules() {
+    if (!modulesPromise) {
+      modulesPromise = Promise.all([
+        runtime.import("solid-js"),
+        importSolidWeb(runtime),
+      ]).then(([Solid, Web]) => ({ Solid, Web }));
+    }
+    return modulesPromise;
+  }
+}
+
+async function importSolidWeb(runtime) {
+  try {
+    return await runtime.import("@solidjs/web");
+  } catch (primaryError) {
+    try {
+      return await runtime.import("solid-js/web");
+    } catch {
+      throw primaryError;
+    }
+  }
+}
+
+function getCreateComponent(Solid, Web) {
+  const createComponent = Solid?.createComponent ?? Web?.createComponent;
+  if (typeof createComponent === "function") return createComponent;
+  return (Component, props) => Component(props);
+}
+
+function createReactiveProps(Solid, initialProps = {}) {
+  if (typeof Solid?.createSignal !== "function") {
+    let current = initialProps;
+    return {
+      props: new Proxy(Object.create(null), {
+        get(_target, key) {
+          return current[key];
+        },
+        has(_target, key) {
+          return key in current;
+        },
+        ownKeys() {
+          return Reflect.ownKeys(current);
+        },
+        getOwnPropertyDescriptor(_target, key) {
+          if (!(key in current)) return undefined;
+          return { configurable: true, enumerable: true, value: current[key] };
+        },
+      }),
+      update(next) {
+        current = next ?? {};
+      },
+    };
+  }
+
+  const [revision, setRevision] = Solid.createSignal(0);
+  let current = initialProps ?? {};
+  const props = new Proxy(Object.create(null), {
+    get(_target, key) {
+      revision();
+      return current[key];
+    },
+    has(_target, key) {
+      revision();
+      return key in current;
+    },
+    ownKeys() {
+      revision();
+      return Reflect.ownKeys(current);
+    },
+    getOwnPropertyDescriptor(_target, key) {
+      revision();
+      if (!(key in current)) return undefined;
+      return { configurable: true, enumerable: true, value: current[key] };
+    },
+  });
+
+  return {
+    props,
+    update(next) {
+      current = next ?? {};
+      setRevision(value => value + 1);
+    },
+  };
+}
+
+function clearBetween(start, end) {
+  if (!start || !end) return;
+  let node = start.nextSibling;
+  while (node && node !== end) {
+    const next = node.nextSibling;
+    node.parentNode?.removeChild?.(node);
+    node = next;
+  }
+}
+
+function once(fn) {
+  let called = false;
+  return () => {
+    if (called) return;
+    called = true;
+    fn?.();
+  };
+}