@qwik-custom-elements/adapter-stencil 1.0.2 → 1.0.3

package/README.md

@@ -95,8 +95,7 @@ import {
 import { defineCustomElements } from '@acme/stencil-lib/loader';
 
 const renderToString: StencilRenderToString = async (input, options) => {
-  const hydrateModuleId = '@acme/stencil-lib/hydrate';
-  const { renderToString } = await import(/* @vite-ignore */ hydrateModuleId);
+  const { renderToString } = await import('@acme/stencil-lib/hydrate');
   return renderToString(input, options);
 };
 
@@ -289,7 +288,7 @@ The generated client module (`runtime-csr.generated.ts`) provides:
 - `useStencilClientSetup`
 - `GeneratedStencilCSRComponent` — the client-only rendering bridge created by `createStencilCSRComponent()`
 
-When a resolved hydrate import is also available, generation additionally emits `runtime-ssr.generated.ts` with a typed `renderToString` export that loads the resolved hydrate runtime through the same Vite-ignored dynamic import boundary used for SSR-safe demo integration.
+When a resolved hydrate import is also available, generation additionally emits `runtime-ssr.generated.ts` with a typed `renderToString` export that loads the resolved hydrate runtime through a direct dynamic import so SSR bundlers can include the hydrate runtime reliably.
 
 For `PACKAGE_NAME`, those runtime imports may come from package-aware defaults or explicit overrides. For `CEM`, they come from the explicit `adapterOptions.runtime` contract. This keeps generated runtime modules aligned with the same resolved runtime import contract already used for validation and SSR probing.
 

package/dist/bundle-graph.json

@@ -1 +1 @@
-["../client-setup-C_qW_ZSR.cjs",9,-9,4,"../client-setup.ts_createStencilClientSetup_runSetup_6wDTmOSdSbc-Dz0z3zer.cjs",0,"../client/index.cjs",0,12,"../core.min-vJ4M2jcU.cjs","../ssr/index.cjs",25,"../stencil-csr-D6zt1Am9.cjs",9,-9,16,"../stencil-csr.tsx_createStencilCSRComponent_component_pD3ekIZcUT0-cGN__hqm.cjs",9,-8,21,23,"../stencil-csr.tsx_createStencilCSRComponent_component_useVisibleTask_1_dqWPXf9eNnk-sFN0uMI_.cjs",12,"../stencil-csr.tsx_createStencilCSRComponent_component_useVisibleTask_y00qkhhKua8-BSsN2V78.cjs",9,"../stencil-ssr-UlYtcG0-.cjs",9,-9,29,"../stencil-ssr.tsx_createStencilSSRBridgeComponent_component_IlVdOHKZfN0-46y8eTjO.cjs",9,-8,38,40,-6,36,"../stencil-ssr.tsx_createStencilSSRBridgeComponent_component_useOnDocument_bvALMlewx7Q-DA73DRke.cjs",9,"../stencil-ssr.tsx_createStencilSSRBridgeComponent_component_useTask_1_aXg7AuatGTc-61dSP-JG.cjs",25,"../stencil-ssr.tsx_createStencilSSRBridgeComponent_component_useTask_IH8I3eLdwI0-DNQBT8Vc.cjs",10,"IH8I3eLdwI0",-8,40,"aXg7AuatGTc",-8,38,"dqWPXf9eNnk",-8,21,"y00qkhhKua8",-8,23,"IlVdOHKZfN0",-7,29,"pD3ekIZcUT0",-7,16,"6wDTmOSdSbc",-6,4,"bvALMlewx7Q",-6,36]
+[]

package/dist/client/client-setup.d.ts

@@ -1,4 +1,4 @@
-import { type QRL } from '@builder.io/qwik';
+import { QRL } from '@builder.io/qwik';
 type DefineCustomElementsInput = QRL<() => Promise<void>> | (() => Promise<void>);
 /**
  * Creates a client-side setup hook for Stencil components.

package/dist/client/index.qwik.mjs

@@ -0,0 +1,178 @@
+import { useOnDocument, inlinedQrl, useLexicalScope, componentQrl, _restProps, useSignal, useVisibleTaskQrl, _jsxC, _IMMUTABLE, Slot, _jsxQ } from "@builder.io/qwik";
+const STENCIL_CLIENT_SETUP_DONE = "__qce_stencil_client_setup_done__";
+const DEFINE_CUSTOM_ELEMENTS_INPUTS = /* @__PURE__ */ new Map();
+let defineCustomElementsInputIdCounter = 0;
+function registerDefineCustomElementsInput(input) {
+  if (!input) return void 0;
+  const inputId = `stencil-client-setup-${++defineCustomElementsInputIdCounter}`;
+  DEFINE_CUSTOM_ELEMENTS_INPUTS.set(inputId, input);
+  return inputId;
+}
+async function resolveDefineCustomElements(input) {
+  if (!input) return void 0;
+  if (typeof input === "object" && input !== null && "resolve" in input && typeof input.resolve === "function") {
+    const qrlInput = input;
+    return qrlInput.resolve();
+  }
+  return input;
+}
+async function runStencilClientSetup(defineCustomElements) {
+  const inlineBodyStyles = document.querySelectorAll("style[sty-id]");
+  const seenContent = /* @__PURE__ */ new Set();
+  for (const styleEl of inlineBodyStyles) if (styleEl.parentElement !== document.head) {
+    const content = styleEl.textContent ?? "";
+    if (!seenContent.has(content)) {
+      document.head.appendChild(styleEl);
+      seenContent.add(content);
+    } else
+      styleEl.remove();
+  }
+  if (defineCustomElements) await defineCustomElements();
+}
+function ensureStencilClientSetup(defineCustomElementsInput) {
+  const markerTarget = globalThis;
+  const existingMarker = markerTarget[STENCIL_CLIENT_SETUP_DONE];
+  if (existingMarker === true) return Promise.resolve();
+  if (typeof existingMarker === "object" && existingMarker !== null && "then" in existingMarker && typeof existingMarker.then === "function") return existingMarker;
+  const setupPromise = (async () => {
+    const defineCustomElements = await resolveDefineCustomElements(defineCustomElementsInput);
+    await runStencilClientSetup(defineCustomElements);
+  })();
+  markerTarget[STENCIL_CLIENT_SETUP_DONE] = setupPromise;
+  return setupPromise.then(() => {
+    markerTarget[STENCIL_CLIENT_SETUP_DONE] = true;
+  }).catch((error) => {
+    delete markerTarget[STENCIL_CLIENT_SETUP_DONE];
+    throw error;
+  });
+}
+async function executeStencilClientSetup(defineCustomElementsInputId, fallbackInput) {
+  const registeredInput = defineCustomElementsInputId == null ? void 0 : DEFINE_CUSTOM_ELEMENTS_INPUTS.get(defineCustomElementsInputId);
+  const resolvedInput = registeredInput ?? fallbackInput;
+  await ensureStencilClientSetup(resolvedInput).catch((error) => {
+    console.error(error);
+  });
+}
+function createStencilClientSetup(defineCustomElementsInput) {
+  const defineCustomElementsInputId = registerDefineCustomElementsInput(defineCustomElementsInput);
+  const qrlFallbackInput = defineCustomElementsInput != null && "$symbol$" in Object(defineCustomElementsInput) ? defineCustomElementsInput : void 0;
+  const runSetup$ = /* @__PURE__ */ inlinedQrl(async () => {
+    const [defineCustomElementsInputId2, qrlFallbackInput2] = useLexicalScope();
+    await executeStencilClientSetup(defineCustomElementsInputId2, qrlFallbackInput2);
+  }, "s_6wDTmOSdSbc", [
+    defineCustomElementsInputId,
+    qrlFallbackInput
+  ]);
+  const useStencilClientSetup = () => {
+    useOnDocument("readystatechange", runSetup$);
+    if (typeof document !== "undefined" && document.readyState !== "loading") executeStencilClientSetup(defineCustomElementsInputId, qrlFallbackInput);
+  };
+  return useStencilClientSetup;
+}
+const EVENT_PROP_PREFIX = "on";
+const QRL_PRIVATE_PREFIX = "$";
+function isEventLikeProp(propName) {
+  return propName.startsWith(EVENT_PROP_PREFIX) || propName.startsWith(QRL_PRIVATE_PREFIX);
+}
+function updateStencilCSRHostProps(host, props) {
+  if (!host || !props) return;
+  for (const [propName, propValue] of Object.entries(props)) {
+    if (isEventLikeProp(propName)) continue;
+    host[propName] = propValue;
+  }
+}
+const EVENT_QRL_IDS = /* @__PURE__ */ new WeakMap();
+let eventQrlIdCounter = 0;
+function getEventQrlId(qrl) {
+  if (!qrl || typeof qrl !== "object" && typeof qrl !== "function") return -1;
+  const qrlObject = qrl;
+  const existing = EVENT_QRL_IDS.get(qrlObject);
+  if (existing) return existing;
+  const next = ++eventQrlIdCounter;
+  EVENT_QRL_IDS.set(qrlObject, next);
+  return next;
+}
+function getEventEntries(events) {
+  return Object.entries(events ?? {}).filter(([eventName, eventQrl]) => eventName.trim().length > 0 && Boolean(eventQrl));
+}
+function getEventsDependencyKey(events) {
+  return getEventEntries(events).map(([eventName, eventQrl]) => `${eventName}:${getEventQrlId(eventQrl)}`).sort().join("|");
+}
+function createStencilCSRComponent() {
+  return /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+    const restProps = _restProps(props, [
+      "tagName",
+      "props",
+      "events",
+      "slots"
+    ]);
+    const hostRef = useSignal();
+    const namedSlots = props.slots ?? [];
+    useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
+      const [hostRef2, props2] = useLexicalScope();
+      const host = track(() => hostRef2.value);
+      const latestProps = track(() => props2.props);
+      updateStencilCSRHostProps(host, latestProps);
+    }, "s_y00qkhhKua8", [
+      hostRef,
+      props
+    ]));
+    useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track, cleanup }) => {
+      const [hostRef2, props2] = useLexicalScope();
+      const host = track(() => hostRef2.value);
+      const eventsDependencyKey = track(() => getEventsDependencyKey(props2.events));
+      if (!host) return;
+      const eventEntries = getEventEntries(props2.events);
+      if (eventEntries.length === 0 || eventsDependencyKey.length === 0) return;
+      let disposed = false;
+      const listeners = [];
+      cleanup(() => {
+        disposed = true;
+        for (const { eventName, listener } of listeners) host.removeEventListener(eventName, listener);
+      });
+      for (const [eventName, eventQrl] of eventEntries) {
+        const listener = (event) => {
+          const qrl = eventQrl;
+          const containerEl = host.closest("[q\\:container]");
+          if (containerEl) qrl.$setContainer$?.(containerEl);
+          const result = eventQrl(event, host);
+          Promise.resolve(result).catch((error) => {
+            console.error(error);
+          });
+        };
+        if (disposed) return;
+        host.addEventListener(eventName, listener);
+        listeners.push({
+          eventName,
+          listener
+        });
+      }
+    }, "s_dqWPXf9eNnk", [
+      hostRef,
+      props
+    ]));
+    return /* @__PURE__ */ _jsxC(props.tagName, {
+      ref: hostRef,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ _jsxC(Slot, null, 3, "fM_0"),
+        namedSlots.map((name) => /* @__PURE__ */ _jsxQ("span", {
+          slot: name
+        }, {
+          style: {
+            display: "contents"
+          }
+        }, /* @__PURE__ */ _jsxC(Slot, {
+          name
+        }, 3, "fM_1"), 1, name))
+      ],
+      [_IMMUTABLE]: {
+        ref: _IMMUTABLE
+      }
+    }, 0, "fM_2");
+  }, "s_pD3ekIZcUT0"));
+}
+export {
+  createStencilCSRComponent,
+  createStencilClientSetup
+};

package/dist/client/stencil-csr.d.ts

@@ -1,4 +1,4 @@
-import { type QRL } from '@builder.io/qwik';
+import { QRL } from '@builder.io/qwik';
 export interface StencilCSRProps {
     tagName: string;
     props?: Record<string, unknown>;
@@ -6,5 +6,5 @@ export interface StencilCSRProps {
     slots?: string[];
     [key: string]: unknown;
 }
-export declare function createStencilCSRComponent(): import("@builder.io/qwik").Component<StencilCSRProps>;
+export declare function createStencilCSRComponent(): import('@builder.io/qwik').Component<StencilCSRProps>;
 //# sourceMappingURL=stencil-csr.d.ts.map