solid-tag-runtime 0.0.11 → 0.0.13

package/src/html.js

@@ -1,4 +1,4 @@
-import { SolidTagRuntimeError } from "./errors.js";
+import { ModuleResolutionError, SolidTagRuntimeError } from "./errors.js";
 import { createEventDispatcher } from "./events.js";
 import { HTMLRenderError, createDefaultHTMLRenderAdapter, resolveRenderComponent } from "./render.js";
 
@@ -83,6 +83,9 @@ export function createHTMLRuntime(runtime, options = {}) {
     queue: Promise.resolve(),
     lastError: undefined,
     connected: false,
+    registrationDepth: 0,
+    registrationPasses: 0,
+    solidRenderRetryScheduled: false,
     initial: emptyRegistrationResult(),
   };
 
@@ -127,10 +130,13 @@ export function createHTMLRuntime(runtime, options = {}) {
 
   controller.api = api;
   activeControllers.add(controller);
-  // The HTML adapter owns the global custom-element registration. Registering
-  // here means a controller is already available before any existing
-  // <solid-render> elements are upgraded/connected. The helper is idempotent.
-  registerSolidRenderElement();
+  // Do not define/upgrade <solid-render> here. Existing declarative script
+  // modules must be installed first; otherwise connectedCallback() can import
+  // a module before register()/observe() has defined the preceding <script>.
+  // register()/observe() register the element after their initial script batch.
+  controller.runtimeModuleDefinedUnsubscribe = runtime.subscribe?.("module-defined", event => {
+    scheduleSolidRenderRetryForModule(controller, event.id);
+  });
   controller.runtimeDisposeUnsubscribe = runtime.subscribe?.("runtime-disposed", () => {
     void disposeController(controller, { runtimeDisposed: true });
   });
@@ -147,21 +153,23 @@ export function createHTMLRuntime(runtime, options = {}) {
     const origin = callOptions.origin ?? "initial-scan";
     const discovered = Array.from(root.querySelectorAll(selector));
     const elements = [];
-
-    for (const element of discovered) {
-      const accepted = acceptsDiscoveredElement(controller, element, callOptions);
-      emitHTML(controller, {
-        type: "element-discovered",
-        element,
-        moduleId: nonEmpty(element?.getAttribute?.("module")),
-        origin,
-        accepted,
-      });
-      if (accepted) elements.push(element);
-      else maybeWarnUnresolvedRenderScope(controller, element, callOptions, origin);
-    }
+    const pendingBeforeUpgrade = collectConnectedSolidRenderElements(controller, root);
+    controller.registrationDepth += 1;
 
     try {
+      for (const element of discovered) {
+        const accepted = acceptsDiscoveredElement(controller, element, callOptions);
+        emitHTML(controller, {
+          type: "element-discovered",
+          element,
+          moduleId: nonEmpty(element?.getAttribute?.("module")),
+          origin,
+          accepted,
+        });
+        if (accepted) elements.push(element);
+        else maybeWarnUnresolvedRenderScope(controller, element, callOptions, origin);
+      }
+
       const result = await processElements(controller, elements, {
         ...callOptions,
         root,
@@ -169,11 +177,21 @@ export function createHTMLRuntime(runtime, options = {}) {
         executeEntries: callOptions.executeEntries ?? controller.executeEntries,
         executeRenders: callOptions.executeRenders ?? controller.executeRenders,
       });
+
+      // Existing upgraded instances may have connected before this controller's
+      // declaration batch was installed. Retry those after the batch completes.
       registerSolidRenderElement();
+      controller.registrationPasses += 1;
+      await retrySolidRenderElements(controller, pendingBeforeUpgrade, {
+        reason: "registration-complete",
+        forceMissingError: true,
+      });
       return result;
     } catch (error) {
       emitHTMLError(controller, "register", error, { origin });
       throw error;
+    } finally {
+      controller.registrationDepth = Math.max(0, controller.registrationDepth - 1);
     }
   }
 
@@ -186,6 +204,8 @@ export function createHTMLRuntime(runtime, options = {}) {
 
     const root = getRoot(mergeOptions(controller, callOptions), "HTML runtime observe");
     controller.observerOptions = { ...callOptions };
+    const pendingBeforeUpgrade = collectConnectedSolidRenderElements(controller, root);
+    controller.registrationDepth += 1;
 
     try {
       controller.initial = await connectObserver(controller, root, callOptions, {
@@ -193,9 +213,16 @@ export function createHTMLRuntime(runtime, options = {}) {
         initial: true,
       });
       registerSolidRenderElement();
+      controller.registrationPasses += 1;
+      await retrySolidRenderElements(controller, pendingBeforeUpgrade, {
+        reason: "observation-ready",
+        forceMissingError: true,
+      });
     } catch (error) {
       disconnect();
       throw error;
+    } finally {
+      controller.registrationDepth = Math.max(0, controller.registrationDepth - 1);
     }
 
     return api;
@@ -645,6 +672,8 @@ export function registerSolidRenderElement(options = {}) {
         mount: undefined,
         controller: undefined,
         propObserver: undefined,
+        pendingModuleResolution: undefined,
+        pendingCheckGeneration: undefined,
       });
     }
 
@@ -700,6 +729,8 @@ function getSolidRenderState(element) {
       mount: undefined,
       controller: undefined,
       propObserver: undefined,
+      pendingModuleResolution: undefined,
+      pendingCheckGeneration: undefined,
     };
     solidRenderInternals.set(element, state);
   }
@@ -738,10 +769,12 @@ function startSolidRenderPropObserver(element, state) {
   state.propObserver = observer;
 }
 
-async function remountSolidRender(element, reason) {
+async function remountSolidRender(element, reason, options = {}) {
   const state = getSolidRenderState(element);
   if (!state.connected) return;
   const generation = ++state.generation;
+  state.pendingModuleResolution = undefined;
+  state.pendingCheckGeneration = undefined;
   await disposeSolidRenderMount(element, state, reason === "connect" ? "reconnect" : reason);
   if (!state.connected || generation !== state.generation) return;
 
@@ -792,6 +825,8 @@ async function remountSolidRender(element, reason) {
 
     mount.mode = "container";
     state.mount = mount;
+    state.pendingModuleResolution = undefined;
+    state.pendingCheckGeneration = undefined;
     emitHTML(controller, {
       type: "render-mounted",
       element,
@@ -807,6 +842,26 @@ async function remountSolidRender(element, reason) {
     // failure belongs to the abandoned generation just like a stale success,
     // so it must not overwrite/report against the current element state.
     if (!state.connected || generation !== state.generation) return;
+    if (error instanceof ModuleResolutionError && controller) {
+      state.pendingModuleResolution = {
+        moduleId: nonEmpty(element.getAttribute?.("module")),
+        error,
+      };
+
+      // During startup or observer-driven DOM insertion a connected custom
+      // element can run before the matching declarative module has been
+      // installed. Treat that as a pending reference only until the relevant
+      // registration/observer queue has had a chance to settle.
+      if (!options.forceMissingError && (
+        controller.registrationDepth > 0
+        || controller.connected
+        || controller.registrationPasses === 0
+      )) {
+        schedulePendingSolidRenderResolutionCheck(element, state, controller, generation);
+        return;
+      }
+    }
+
     if (controller) {
       emitHTMLError(controller, "solid-render", error, {
         element,
@@ -985,6 +1040,116 @@ function mostSpecificController(controllers) {
   return undefined;
 }
 
+function schedulePendingSolidRenderResolutionCheck(element, state, controller, generation) {
+  if (state.pendingCheckGeneration === generation) return;
+  state.pendingCheckGeneration = generation;
+
+  const schedule = globalThis.setTimeout ?? ((callback) => Promise.resolve().then(callback));
+  schedule(async () => {
+    if (!state.connected || generation !== state.generation) return;
+    if (!state.pendingModuleResolution || state.mount) return;
+
+    // MutationObserver callbacks run before the next task. If this missing
+    // module came from a script + solid-render insertion batch, controller.queue
+    // now points at that registration work. Wait for it before deciding the
+    // reference is genuinely unresolved.
+    if (controller.connected) {
+      try {
+        await controller.queue;
+      } catch {
+        // Observer errors are reported through the normal controller path.
+      }
+    }
+
+    if (!state.connected || generation !== state.generation) return;
+    if (!state.pendingModuleResolution || state.mount) return;
+
+    // A direct register() may still be loading external source. Do not report
+    // a transient missing module while that pass is active.
+    if (controller.registrationDepth > 0) {
+      state.pendingCheckGeneration = undefined;
+      schedulePendingSolidRenderResolutionCheck(element, state, controller, generation);
+      return;
+    }
+
+    state.pendingCheckGeneration = undefined;
+    await remountSolidRender(element, "pending-module-settled", {
+      forceMissingError: true,
+    });
+  }, 0);
+}
+
+function collectConnectedSolidRenderElements(controller, root) {
+  const elements = new Set();
+
+  for (const element of controller.renderElements ?? []) {
+    const state = solidRenderInternals.get(element);
+    if (state?.connected && rootContainsElement(root, element)) elements.add(element);
+  }
+
+  if (root && typeof root.querySelectorAll === "function") {
+    for (const element of Array.from(root.querySelectorAll("solid-render") ?? [])) {
+      const state = solidRenderInternals.get(element);
+      if (state?.connected) elements.add(element);
+    }
+  }
+
+  return [...elements];
+}
+
+async function retrySolidRenderElements(controller, elements, options = {}) {
+  for (const element of elements ?? []) {
+    const state = solidRenderInternals.get(element);
+    if (!state?.connected) continue;
+    if (state.mount && !state.pendingModuleResolution) continue;
+
+    let selected;
+    try {
+      selected = resolveHTMLControllerForElement(element);
+    } catch {
+      continue;
+    }
+    if (selected !== controller) continue;
+
+    await remountSolidRender(element, options.reason ?? "retry", {
+      forceMissingError: options.forceMissingError === true,
+    });
+  }
+}
+
+function scheduleSolidRenderRetryForModule(controller, definedId) {
+  if (controller.disposed || controller.solidRenderRetryScheduled) return;
+  controller.solidRenderRetryScheduled = true;
+
+  const schedule = globalThis.queueMicrotask ?? (callback => Promise.resolve().then(callback));
+  schedule(() => {
+    controller.solidRenderRetryScheduled = false;
+    if (controller.disposed) return;
+
+    const matches = [];
+    for (const element of controller.renderElements) {
+      const state = solidRenderInternals.get(element);
+      if (!state?.connected || !state.pendingModuleResolution) continue;
+      const requested = nonEmpty(element.getAttribute?.("module"));
+      if (!requested) continue;
+      let resolved;
+      try {
+        resolved = controller.runtime.resolve(requested);
+      } catch {
+        continue;
+      }
+      if (resolved === definedId) matches.push(element);
+    }
+
+    if (matches.length > 0) {
+      void retrySolidRenderElements(controller, matches, {
+        reason: "module-defined",
+        forceMissingError: false,
+      });
+    }
+  });
+}
+
 function dispatchSolidRenderError(element, error) {
   try {
     const EventImpl = globalThis.CustomEvent;
@@ -1024,6 +1189,8 @@ async function disposeController(controller, options = {}) {
   }
 
   activeControllers.delete(controller);
+  controller.runtimeModuleDefinedUnsubscribe?.();
+  controller.runtimeModuleDefinedUnsubscribe = undefined;
   controller.runtimeDisposeUnsubscribe?.();
   controller.runtimeDisposeUnsubscribe = undefined;
   controller.events.clear();
@@ -1163,6 +1330,11 @@ async function enqueueObserverScan(controller, callOptions = {}) {
     }
 
     await cleanupDetachedRenderedDeclarations(controller, root);
+    await retrySolidRenderElements(
+      controller,
+      collectConnectedSolidRenderElements(controller, root),
+      { reason: "observer-batch-complete", forceMissingError: true },
+    );
 
     emitHTML(controller, {
       type: "observer-batch",

package/src/index.js

@@ -19,3 +19,9 @@ export {
   CircularDependencyError,
   ModuleCompileError,
 } from "./errors.js";
+
+export {
+  createMemoryCompileCache,
+  createLocalStorageCompileCache,
+  createIndexedDBCompileCache,
+} from "./compile-cache.js";