@qwik-custom-elements/adapter-stencil 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -3
- package/dist/bundle-graph.json +1 -1
- package/dist/client/client-setup.d.ts +1 -1
- package/dist/client/index.qwik.mjs +178 -0
- package/dist/client/stencil-csr.d.ts +2 -2
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.qwik.mjs +225 -185
- package/dist/q-manifest.json +24 -336
- package/dist/qwikloader-BOWbeQFD.js +101 -0
- package/dist/ssr/index.qwik.mjs +346 -0
- package/dist/ssr/stencil-ssr.d.ts +40 -7
- package/dist/ssr/stencil-ssr.d.ts.map +1 -1
- package/dist/ssr/styles-core.d.ts +2 -2
- package/package.json +51 -14
- package/dist/client/client-setup.test.d.ts +0 -2
- package/dist/client/client-setup.test.d.ts.map +0 -1
- package/dist/client/index.cjs +0 -1
- package/dist/client/index.js +0 -6
- package/dist/client/stencil-csr-props.test.d.ts +0 -2
- package/dist/client/stencil-csr-props.test.d.ts.map +0 -1
- package/dist/client-setup-C_qW_ZSR.cjs +0 -1
- package/dist/client-setup-D-ffVtNL.js +0 -53
- package/dist/client-setup.ts_createStencilClientSetup_runSetup_6wDTmOSdSbc-CPKK-h2J.js +0 -11
- package/dist/client-setup.ts_createStencilClientSetup_runSetup_6wDTmOSdSbc-Dz0z3zer.cjs +0 -1
- package/dist/core.min-Qm7Mxv6F.js +0 -1846
- package/dist/core.min-vJ4M2jcU.cjs +0 -2
- package/dist/index.qwik.cjs +0 -8
- package/dist/index.test.d.ts +0 -2
- package/dist/index.test.d.ts.map +0 -1
- package/dist/preloader-Bietv0BS.js +0 -118
- package/dist/preloader-Cqc--uBU.cjs +0 -1
- package/dist/qwikloader-C01zMTOC.js +0 -102
- package/dist/qwikloader-vFGnpgvG.cjs +0 -2
- package/dist/ssr/element-props-utils.test.d.ts +0 -2
- package/dist/ssr/element-props-utils.test.d.ts.map +0 -1
- package/dist/ssr/index.cjs +0 -1
- package/dist/ssr/index.js +0 -29
- package/dist/ssr/styles-core.test.d.ts +0 -2
- package/dist/ssr/styles-core.test.d.ts.map +0 -1
- package/dist/stencil-csr-B1U9s3VQ.js +0 -24
- package/dist/stencil-csr-D6zt1Am9.cjs +0 -1
- package/dist/stencil-csr.tsx_createStencilCSRComponent_component_pD3ekIZcUT0-ChAZ0hL3.js +0 -37
- package/dist/stencil-csr.tsx_createStencilCSRComponent_component_pD3ekIZcUT0-cGN__hqm.cjs +0 -1
- package/dist/stencil-csr.tsx_createStencilCSRComponent_component_useVisibleTask_1_dqWPXf9eNnk-BYiBxXW-.js +0 -34
- package/dist/stencil-csr.tsx_createStencilCSRComponent_component_useVisibleTask_1_dqWPXf9eNnk-sFN0uMI_.cjs +0 -1
- package/dist/stencil-csr.tsx_createStencilCSRComponent_component_useVisibleTask_y00qkhhKua8-BSsN2V78.cjs +0 -1
- package/dist/stencil-csr.tsx_createStencilCSRComponent_component_useVisibleTask_y00qkhhKua8-CF00O7hf.js +0 -19
- package/dist/stencil-ssr-BHjT94rd.js +0 -118
- package/dist/stencil-ssr-UlYtcG0-.cjs +0 -1
- package/dist/stencil-ssr.tsx_createStencilSSRBridgeComponent_component_IlVdOHKZfN0-46y8eTjO.cjs +0 -1
- package/dist/stencil-ssr.tsx_createStencilSSRBridgeComponent_component_IlVdOHKZfN0-BfqXBofh.js +0 -42
- package/dist/stencil-ssr.tsx_createStencilSSRBridgeComponent_component_useOnDocument_bvALMlewx7Q-DA73DRke.cjs +0 -1
- package/dist/stencil-ssr.tsx_createStencilSSRBridgeComponent_component_useOnDocument_bvALMlewx7Q-DdcskN1z.js +0 -10
- package/dist/stencil-ssr.tsx_createStencilSSRBridgeComponent_component_useTask_1_aXg7AuatGTc-61dSP-JG.cjs +0 -1
- package/dist/stencil-ssr.tsx_createStencilSSRBridgeComponent_component_useTask_1_aXg7AuatGTc-Byrz3fUp.js +0 -34
- package/dist/stencil-ssr.tsx_createStencilSSRBridgeComponent_component_useTask_IH8I3eLdwI0-BtIygb8E.js +0 -12
- package/dist/stencil-ssr.tsx_createStencilSSRBridgeComponent_component_useTask_IH8I3eLdwI0-DNQBT8Vc.cjs +0 -1
|
@@ -0,0 +1,346 @@
|
|
|
1
|
+
import { _jsxBranch, _jsxC, SSRRaw, componentQrl, inlinedQrl, useLexicalScope, _restProps, useSignal, useId, useOnDocument, useTaskQrl, _jsxS, SSRStream, Slot, _IMMUTABLE, _fnSignal, _jsxQ } from "@builder.io/qwik";
|
|
2
|
+
function isSerializablePrimitive(value) {
|
|
3
|
+
const valueType = typeof value;
|
|
4
|
+
return value == null || valueType === "string" || valueType === "number" || valueType === "boolean";
|
|
5
|
+
}
|
|
6
|
+
function updateStencilElementProps(el, props) {
|
|
7
|
+
if (!el || !props) return;
|
|
8
|
+
const keys = Object.keys(props);
|
|
9
|
+
for (const key of keys) {
|
|
10
|
+
const value = props[key];
|
|
11
|
+
const isEvent = key.startsWith("on") || key.startsWith("$");
|
|
12
|
+
if (isEvent) continue;
|
|
13
|
+
const isPrimitive = isSerializablePrimitive(value);
|
|
14
|
+
if (isPrimitive) el.setAttribute(key, String(value));
|
|
15
|
+
else el[key] = value;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
const STENCIL_STYLE_STORE_KEY = "__stencil_ssr_style_store__";
|
|
19
|
+
function normalizeStyleKey(styleId, styleText = "", tagName) {
|
|
20
|
+
if (styleId && styleId.length > 0) return styleId;
|
|
21
|
+
if (tagName) return `sc-${tagName}`;
|
|
22
|
+
return `inline-${styleText.length}-${styleText.slice(0, 32)}`;
|
|
23
|
+
}
|
|
24
|
+
function createStencilSsrStyleStore() {
|
|
25
|
+
return {
|
|
26
|
+
stylesByKey: /* @__PURE__ */ new Map()
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
function getOrCreateStencilSsrStyleStore(requestEvent) {
|
|
30
|
+
const existing = requestEvent.sharedMap.get(STENCIL_STYLE_STORE_KEY);
|
|
31
|
+
if (existing) return existing;
|
|
32
|
+
const created = createStencilSsrStyleStore();
|
|
33
|
+
requestEvent.sharedMap.set(STENCIL_STYLE_STORE_KEY, created);
|
|
34
|
+
return created;
|
|
35
|
+
}
|
|
36
|
+
function collectStencilSsrStyles(result, styleStore, tagName) {
|
|
37
|
+
if (!result.styles || result.styles.length === 0) return;
|
|
38
|
+
for (const styleEntry of result.styles) {
|
|
39
|
+
const styleText = styleEntry.content ?? "";
|
|
40
|
+
const styleId = styleEntry.id;
|
|
41
|
+
if (!styleText) continue;
|
|
42
|
+
const key = normalizeStyleKey(styleId, styleText, tagName);
|
|
43
|
+
styleStore.stylesByKey.set(key, styleText);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
function toDocumentHeadStyles(styleStore, options) {
|
|
47
|
+
const keyPrefix = options?.keyPrefix ?? "stencil-ssr";
|
|
48
|
+
const nonce = options?.nonce;
|
|
49
|
+
return [
|
|
50
|
+
...styleStore.stylesByKey.entries()
|
|
51
|
+
].map(([styleKey, style]) => ({
|
|
52
|
+
key: `${keyPrefix}-${styleKey}`,
|
|
53
|
+
style,
|
|
54
|
+
props: nonce ? {
|
|
55
|
+
nonce
|
|
56
|
+
} : void 0
|
|
57
|
+
}));
|
|
58
|
+
}
|
|
59
|
+
function isRuntimeBrowser() {
|
|
60
|
+
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
61
|
+
}
|
|
62
|
+
function isRuntimeServer() {
|
|
63
|
+
return !isRuntimeBrowser();
|
|
64
|
+
}
|
|
65
|
+
const INLINE_EMITTED_KEY = "__stencil_ssr_inline_emitted__";
|
|
66
|
+
const EVENT_QRL_IDS = /* @__PURE__ */ new WeakMap();
|
|
67
|
+
let eventQrlIdCounter = 0;
|
|
68
|
+
function getEventQrlId(qrl) {
|
|
69
|
+
if (!qrl || typeof qrl !== "object" && typeof qrl !== "function") return -1;
|
|
70
|
+
const qrlObj = qrl;
|
|
71
|
+
const existing = EVENT_QRL_IDS.get(qrlObj);
|
|
72
|
+
if (existing) return existing;
|
|
73
|
+
const next = ++eventQrlIdCounter;
|
|
74
|
+
EVENT_QRL_IDS.set(qrlObj, next);
|
|
75
|
+
return next;
|
|
76
|
+
}
|
|
77
|
+
function getOrInitRequestInlineEmittedKeys() {
|
|
78
|
+
const reqEnv = globalThis.qcAsyncRequestStore?.getStore?.();
|
|
79
|
+
if (!reqEnv?.sharedMap || !(reqEnv.sharedMap instanceof Map)) return /* @__PURE__ */ new Set();
|
|
80
|
+
const existing = reqEnv.sharedMap.get(INLINE_EMITTED_KEY);
|
|
81
|
+
if (existing) return existing;
|
|
82
|
+
const created = /* @__PURE__ */ new Set();
|
|
83
|
+
reqEnv.sharedMap.set(INLINE_EMITTED_KEY, created);
|
|
84
|
+
return created;
|
|
85
|
+
}
|
|
86
|
+
function buildInlineStylesHtml(renderResult, tagName) {
|
|
87
|
+
const emittedKeys = getOrInitRequestInlineEmittedKeys();
|
|
88
|
+
const tempStore = createStencilSsrStyleStore();
|
|
89
|
+
collectStencilSsrStyles(renderResult, tempStore, tagName);
|
|
90
|
+
let html = "";
|
|
91
|
+
for (const [key, style] of tempStore.stylesByKey) if (!emittedKeys.has(key)) {
|
|
92
|
+
emittedKeys.add(key);
|
|
93
|
+
html += `<style sty-id="${key}">${style}</style>`;
|
|
94
|
+
}
|
|
95
|
+
return html;
|
|
96
|
+
}
|
|
97
|
+
const DEFAULT_SLOT_MARKER = "<!--SLOT-->";
|
|
98
|
+
const DEFAULT_NAMED_SLOT_PLACEHOLDER_TAG = "span";
|
|
99
|
+
function namedSlotMarker(name) {
|
|
100
|
+
return `<!--SLOT:${name}-->`;
|
|
101
|
+
}
|
|
102
|
+
function getStencilElement(wrapper, tagName) {
|
|
103
|
+
return wrapper?.querySelector(tagName);
|
|
104
|
+
}
|
|
105
|
+
function getWrapperElement(wrapperId) {
|
|
106
|
+
if (!isRuntimeBrowser()) return void 0;
|
|
107
|
+
return document.querySelector(`[data-stencil-wrapper-id="${wrapperId}"]`) ?? void 0;
|
|
108
|
+
}
|
|
109
|
+
function getEventEntries(events) {
|
|
110
|
+
return Object.entries(events ?? {}).filter(([eventName, eventQrl]) => eventName.trim().length > 0 && Boolean(eventQrl));
|
|
111
|
+
}
|
|
112
|
+
function getEventsDependencyKey(events) {
|
|
113
|
+
return getEventEntries(events).map(([eventName, eventQrl]) => {
|
|
114
|
+
return `${eventName}:${getEventQrlId(eventQrl)}`;
|
|
115
|
+
}).sort().join("|");
|
|
116
|
+
}
|
|
117
|
+
function buildInputHtml(tagName, slots) {
|
|
118
|
+
return buildInputHtmlWithOptions(tagName, slots);
|
|
119
|
+
}
|
|
120
|
+
function buildInputHtmlWithOptions(tagName, slots, options) {
|
|
121
|
+
const namedSlotTag = options?.useLegacyNamedSlotWrapper ? "div" : DEFAULT_NAMED_SLOT_PLACEHOLDER_TAG;
|
|
122
|
+
const namedSlotHtml = slots.map((s) => `<${namedSlotTag} slot="${s}" style="display:contents">${namedSlotMarker(s)}</${namedSlotTag}>`).join("");
|
|
123
|
+
return `<${tagName}>${DEFAULT_SLOT_MARKER}${namedSlotHtml}</${tagName}>`;
|
|
124
|
+
}
|
|
125
|
+
function collectSlotEntries(html, namedSlots) {
|
|
126
|
+
const candidates = [
|
|
127
|
+
{
|
|
128
|
+
marker: DEFAULT_SLOT_MARKER,
|
|
129
|
+
name: void 0
|
|
130
|
+
},
|
|
131
|
+
...namedSlots.map((s) => ({
|
|
132
|
+
marker: namedSlotMarker(s),
|
|
133
|
+
name: s
|
|
134
|
+
}))
|
|
135
|
+
];
|
|
136
|
+
const entries = [];
|
|
137
|
+
for (const { marker, name } of candidates) {
|
|
138
|
+
const position = html.indexOf(marker);
|
|
139
|
+
if (position !== -1) entries.push({
|
|
140
|
+
marker,
|
|
141
|
+
name,
|
|
142
|
+
position
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
return entries.sort((a, b) => a.position - b.position);
|
|
146
|
+
}
|
|
147
|
+
function stripSlotMarkersFromHtml(html, namedSlots) {
|
|
148
|
+
let cleaned = html.replaceAll(DEFAULT_SLOT_MARKER, "");
|
|
149
|
+
for (const name of namedSlots) cleaned = cleaned.replaceAll(namedSlotMarker(name), "");
|
|
150
|
+
return cleaned;
|
|
151
|
+
}
|
|
152
|
+
function emitSsrRawChunk(html, namedSlots) {
|
|
153
|
+
_jsxBranch();
|
|
154
|
+
const cleaned = stripSlotMarkersFromHtml(html, namedSlots);
|
|
155
|
+
if (cleaned.length === 0) return null;
|
|
156
|
+
return /* @__PURE__ */ _jsxC(SSRRaw, {
|
|
157
|
+
data: cleaned
|
|
158
|
+
}, 3, "Nj_0");
|
|
159
|
+
}
|
|
160
|
+
function createStencilSSRBridgeComponent(stencilRenderToString$, options) {
|
|
161
|
+
return /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
|
|
162
|
+
const [options2, stencilRenderToString$2] = useLexicalScope();
|
|
163
|
+
_jsxBranch();
|
|
164
|
+
const restProps = _restProps(props, [
|
|
165
|
+
"tagName",
|
|
166
|
+
"props",
|
|
167
|
+
"events",
|
|
168
|
+
"slots"
|
|
169
|
+
]);
|
|
170
|
+
const wrapperRef = useSignal(void 0);
|
|
171
|
+
const clientReady = useSignal(false);
|
|
172
|
+
const wrapperId = useId();
|
|
173
|
+
const namedSlots = props.slots ?? [];
|
|
174
|
+
useOnDocument("qinit", /* @__PURE__ */ inlinedQrl(() => {
|
|
175
|
+
const [clientReady2] = useLexicalScope();
|
|
176
|
+
clientReady2.value = true;
|
|
177
|
+
}, "s_bvALMlewx7Q", [
|
|
178
|
+
clientReady
|
|
179
|
+
]));
|
|
180
|
+
useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
|
|
181
|
+
const [props2, wrapperId2, wrapperRef2] = useLexicalScope();
|
|
182
|
+
const trackedProps = track(() => props2.props);
|
|
183
|
+
if (!isRuntimeBrowser()) return;
|
|
184
|
+
const wrapper = getWrapperElement(wrapperId2) ?? wrapperRef2.value;
|
|
185
|
+
updateStencilElementProps(getStencilElement(wrapper, props2.tagName), trackedProps);
|
|
186
|
+
}, "s_IH8I3eLdwI0", [
|
|
187
|
+
props,
|
|
188
|
+
wrapperId,
|
|
189
|
+
wrapperRef
|
|
190
|
+
]));
|
|
191
|
+
useTaskQrl(/* @__PURE__ */ inlinedQrl(({ cleanup, track }) => {
|
|
192
|
+
const [clientReady2, props2, wrapperId2, wrapperRef2] = useLexicalScope();
|
|
193
|
+
const ready = track(() => clientReady2.value);
|
|
194
|
+
const eventsDependencyKey = track(() => getEventsDependencyKey(props2.events));
|
|
195
|
+
if (!isRuntimeBrowser() || !ready) return;
|
|
196
|
+
const wrapper = getWrapperElement(wrapperId2) ?? wrapperRef2.value;
|
|
197
|
+
const stencilEl = getStencilElement(wrapper, props2.tagName);
|
|
198
|
+
const eventEntries = getEventEntries(props2.events);
|
|
199
|
+
if (!stencilEl || eventEntries.length === 0) return;
|
|
200
|
+
if (eventsDependencyKey.length === 0) return;
|
|
201
|
+
let disposed = false;
|
|
202
|
+
const listeners = [];
|
|
203
|
+
cleanup(() => {
|
|
204
|
+
disposed = true;
|
|
205
|
+
for (const { eventName, listener } of listeners) stencilEl.removeEventListener(eventName, listener);
|
|
206
|
+
});
|
|
207
|
+
for (const [eventName, eventQrl] of eventEntries) {
|
|
208
|
+
const listener = (event) => {
|
|
209
|
+
const qrl = eventQrl;
|
|
210
|
+
const containerEl = stencilEl.closest("[q\\:container]");
|
|
211
|
+
if (containerEl) qrl.$setContainer$?.(containerEl);
|
|
212
|
+
const result = eventQrl(event, stencilEl);
|
|
213
|
+
Promise.resolve(result).catch((error) => {
|
|
214
|
+
console.error(error);
|
|
215
|
+
});
|
|
216
|
+
};
|
|
217
|
+
if (disposed) return;
|
|
218
|
+
stencilEl.addEventListener(eventName, listener);
|
|
219
|
+
listeners.push({
|
|
220
|
+
eventName,
|
|
221
|
+
listener
|
|
222
|
+
});
|
|
223
|
+
}
|
|
224
|
+
}, "s_aXg7AuatGTc", [
|
|
225
|
+
clientReady,
|
|
226
|
+
props,
|
|
227
|
+
wrapperId,
|
|
228
|
+
wrapperRef
|
|
229
|
+
]));
|
|
230
|
+
if (isRuntimeServer()) return /* @__PURE__ */ _jsxS("div", {
|
|
231
|
+
ref: wrapperRef,
|
|
232
|
+
"data-stencil-wrapper-id": wrapperId,
|
|
233
|
+
...restProps,
|
|
234
|
+
style: {
|
|
235
|
+
display: "contents"
|
|
236
|
+
},
|
|
237
|
+
children: /* @__PURE__ */ _jsxC(SSRStream, {
|
|
238
|
+
children: async function* () {
|
|
239
|
+
_jsxBranch();
|
|
240
|
+
const renderToString = await stencilRenderToString$2.resolve();
|
|
241
|
+
const renderResult = await renderToString(buildInputHtml(props.tagName, namedSlots), {
|
|
242
|
+
prettyHtml: true,
|
|
243
|
+
removeScripts: false,
|
|
244
|
+
beforeHydrate: (root) => {
|
|
245
|
+
updateStencilElementProps(root.querySelector(props.tagName), props.props);
|
|
246
|
+
}
|
|
247
|
+
});
|
|
248
|
+
const html = renderResult.html ?? "";
|
|
249
|
+
if (options2?.onSsrRenderResultQrl) {
|
|
250
|
+
const onSsrRenderResult = await options2.onSsrRenderResultQrl.resolve();
|
|
251
|
+
await onSsrRenderResult(renderResult);
|
|
252
|
+
}
|
|
253
|
+
const inlineStylesHtml = buildInlineStylesHtml(renderResult, props.tagName);
|
|
254
|
+
if (inlineStylesHtml) yield /* @__PURE__ */ _jsxC(SSRRaw, {
|
|
255
|
+
data: inlineStylesHtml
|
|
256
|
+
}, 3, "Nj_1");
|
|
257
|
+
const bodyHtml = html.match(/<body>([\s\S]*)<\/body>/)?.[1] || html;
|
|
258
|
+
const entries = collectSlotEntries(bodyHtml, namedSlots);
|
|
259
|
+
if (entries.length === 0) {
|
|
260
|
+
const chunk = emitSsrRawChunk(bodyHtml, namedSlots);
|
|
261
|
+
if (chunk) yield chunk;
|
|
262
|
+
return;
|
|
263
|
+
}
|
|
264
|
+
let cursor = 0;
|
|
265
|
+
for (const entry of entries) {
|
|
266
|
+
const markerIndex = entry.position;
|
|
267
|
+
if (markerIndex > cursor) {
|
|
268
|
+
const chunk = emitSsrRawChunk(bodyHtml.slice(cursor, markerIndex), namedSlots);
|
|
269
|
+
if (chunk) yield chunk;
|
|
270
|
+
}
|
|
271
|
+
if (entry.name) yield /* @__PURE__ */ _jsxC(Slot, {
|
|
272
|
+
get name() {
|
|
273
|
+
return entry.name;
|
|
274
|
+
},
|
|
275
|
+
[_IMMUTABLE]: {
|
|
276
|
+
name: _fnSignal((p0) => p0.name, [
|
|
277
|
+
entry
|
|
278
|
+
])
|
|
279
|
+
}
|
|
280
|
+
}, 3, "Nj_2");
|
|
281
|
+
else yield /* @__PURE__ */ _jsxC(Slot, null, 3, "Nj_3");
|
|
282
|
+
cursor = markerIndex + entry.marker.length;
|
|
283
|
+
}
|
|
284
|
+
if (cursor < bodyHtml.length) {
|
|
285
|
+
const chunk = emitSsrRawChunk(bodyHtml.slice(cursor), namedSlots);
|
|
286
|
+
if (chunk) yield chunk;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
}, 1, "Nj_4")
|
|
290
|
+
}, {
|
|
291
|
+
"data-stencil-wrapper-id": _IMMUTABLE,
|
|
292
|
+
style: _IMMUTABLE
|
|
293
|
+
}, 0, "Nj_5");
|
|
294
|
+
return /* @__PURE__ */ _jsxS("div", {
|
|
295
|
+
ref: wrapperRef,
|
|
296
|
+
"data-stencil-wrapper-id": wrapperId,
|
|
297
|
+
...restProps,
|
|
298
|
+
style: {
|
|
299
|
+
display: "contents"
|
|
300
|
+
},
|
|
301
|
+
children: /* @__PURE__ */ _jsxC(props.tagName, {
|
|
302
|
+
children: [
|
|
303
|
+
/* @__PURE__ */ _jsxC(Slot, null, 3, "Nj_6"),
|
|
304
|
+
namedSlots.map((name) => /* @__PURE__ */ _jsxQ("span", {
|
|
305
|
+
slot: name
|
|
306
|
+
}, {
|
|
307
|
+
style: {
|
|
308
|
+
display: "contents"
|
|
309
|
+
}
|
|
310
|
+
}, /* @__PURE__ */ _jsxC(Slot, {
|
|
311
|
+
name
|
|
312
|
+
}, 3, "Nj_7"), 1, name))
|
|
313
|
+
]
|
|
314
|
+
}, 1, "Nj_8")
|
|
315
|
+
}, {
|
|
316
|
+
"data-stencil-wrapper-id": _IMMUTABLE,
|
|
317
|
+
style: _IMMUTABLE
|
|
318
|
+
}, 0, "Nj_9");
|
|
319
|
+
}, "s_IlVdOHKZfN0", [
|
|
320
|
+
options,
|
|
321
|
+
stencilRenderToString$
|
|
322
|
+
]));
|
|
323
|
+
}
|
|
324
|
+
export {
|
|
325
|
+
DEFAULT_NAMED_SLOT_PLACEHOLDER_TAG,
|
|
326
|
+
DEFAULT_SLOT_MARKER,
|
|
327
|
+
emitSsrRawChunk as _auto_emitSsrRawChunk,
|
|
328
|
+
isRuntimeBrowser as _auto_isRuntimeBrowser,
|
|
329
|
+
isRuntimeServer as _auto_isRuntimeServer,
|
|
330
|
+
buildInlineStylesHtml,
|
|
331
|
+
buildInputHtml,
|
|
332
|
+
buildInputHtmlWithOptions,
|
|
333
|
+
collectSlotEntries,
|
|
334
|
+
collectStencilSsrStyles,
|
|
335
|
+
createStencilSSRBridgeComponent,
|
|
336
|
+
createStencilSsrStyleStore,
|
|
337
|
+
getEventEntries,
|
|
338
|
+
getEventsDependencyKey,
|
|
339
|
+
getOrCreateStencilSsrStyleStore,
|
|
340
|
+
getStencilElement,
|
|
341
|
+
getWrapperElement,
|
|
342
|
+
namedSlotMarker,
|
|
343
|
+
stripSlotMarkersFromHtml,
|
|
344
|
+
toDocumentHeadStyles,
|
|
345
|
+
updateStencilElementProps
|
|
346
|
+
};
|
|
@@ -1,14 +1,47 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { QRL } from '@builder.io/qwik';
|
|
2
|
+
import { StencilRenderToString, StencilSSRProps } from './model';
|
|
3
|
+
export { updateStencilElementProps } from './element-props-utils';
|
|
4
|
+
/**
|
|
5
|
+
* Extracts styles from `renderResult` and returns them as a concatenated
|
|
6
|
+
* `<style>` HTML string, deduplicating across multiple renders in the same
|
|
7
|
+
* request. Returns an empty string when there is nothing new to emit.
|
|
8
|
+
*/
|
|
9
|
+
export declare function buildInlineStylesHtml(renderResult: Awaited<ReturnType<StencilRenderToString>>, tagName?: string): string;
|
|
10
|
+
export declare const DEFAULT_SLOT_MARKER = "<!--SLOT-->";
|
|
11
|
+
export declare const DEFAULT_NAMED_SLOT_PLACEHOLDER_TAG = "span";
|
|
12
|
+
export declare function namedSlotMarker(name: string): string;
|
|
13
|
+
export declare function getStencilElement(wrapper: HTMLDivElement | undefined, tagName: string): HTMLElement | null | undefined;
|
|
14
|
+
export declare function getWrapperElement(wrapperId: string): HTMLDivElement | undefined;
|
|
15
|
+
export declare function getEventEntries(events: StencilSSRProps['events']): [string, QRL<(...args: any[]) => void>][];
|
|
16
|
+
export declare function getEventsDependencyKey(events: StencilSSRProps['events']): string;
|
|
17
|
+
/**
|
|
18
|
+
* Builds the HTML string passed to Stencil's renderToString.
|
|
19
|
+
* The default slot gets `<!--SLOT-->` as its light-DOM child.
|
|
20
|
+
* Each named slot gets a `<div slot="name"><!--SLOT:name--></div>` wrapper
|
|
21
|
+
* so Stencil places the marker inside the correct slot outlet in its output.
|
|
22
|
+
*/
|
|
23
|
+
export declare function buildInputHtml(tagName: string, slots: string[]): string;
|
|
24
|
+
export declare function buildInputHtmlWithOptions(tagName: string, slots: string[], options?: {
|
|
25
|
+
useLegacyNamedSlotWrapper?: boolean;
|
|
26
|
+
}): string;
|
|
27
|
+
export type SlotEntry = {
|
|
28
|
+
marker: string;
|
|
29
|
+
name?: string;
|
|
30
|
+
position: number;
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Locates all slot markers present in `html`, sorted by their position.
|
|
34
|
+
* Returns entries only for markers that actually appear in the output
|
|
35
|
+
* (Stencil may omit a slot outlet if it has no matching slot element).
|
|
36
|
+
* Marker positions are pre-computed to avoid redundant string searches.
|
|
37
|
+
*/
|
|
38
|
+
export declare function collectSlotEntries(html: string, namedSlots: string[]): SlotEntry[];
|
|
39
|
+
export declare function stripSlotMarkersFromHtml(html: string, namedSlots: string[]): string;
|
|
3
40
|
/**
|
|
4
41
|
* Creates a Qwik component that renders a Stencil component with SSR support.
|
|
5
42
|
* Handles slot projection, prop synchronization, and style deduplication.
|
|
6
|
-
*
|
|
7
|
-
* @param stencilRenderToString$ - QRL reference to Stencil's renderToString function
|
|
8
|
-
* @param options - Optional callbacks for SSR lifecycle events
|
|
9
|
-
* @returns A Qwik component that can be used like any other Qwik component
|
|
10
43
|
*/
|
|
11
44
|
export declare function createStencilSSRBridgeComponent(stencilRenderToString$: QRL<StencilRenderToString>, options?: {
|
|
12
45
|
onSsrRenderResultQrl?: QRL<(result: Awaited<ReturnType<StencilRenderToString>>) => void | Promise<void>>;
|
|
13
|
-
}): import(
|
|
46
|
+
}): import('@builder.io/qwik').Component<StencilSSRProps>;
|
|
14
47
|
//# sourceMappingURL=stencil-ssr.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stencil-ssr.d.ts","sourceRoot":"","sources":["../../src/ssr/stencil-ssr.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"stencil-ssr.d.ts","sourceRoot":"","sources":["../../src/ssr/stencil-ssr.tsx"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,GAAG,EACT,MAAM,kBAAkB,CAAC;AAG1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAMtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAwDlE;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,OAAO,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC,EACxD,OAAO,CAAC,EAAE,MAAM,GACf,MAAM,CAcR;AAED,eAAO,MAAM,mBAAmB,gBAAgB,CAAC;AACjD,eAAO,MAAM,kCAAkC,SAAS,CAAC;AAEzD,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,UAE3C;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,GAAG,SAAS,EACnC,OAAO,EAAE,MAAM,kCAGhB;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,GAChB,cAAc,GAAG,SAAS,CAO5B;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,6CAIhE;AAED,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,GAChC,MAAM,CAOR;AAMD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAE9D;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EAAE,EACf,OAAO,CAAC,EAAE;IAAE,yBAAyB,CAAC,EAAE,OAAO,CAAA;CAAE,UAalD;AAED,MAAM,MAAM,SAAS,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5E;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAAE,GACnB,SAAS,EAAE,CAiBb;AAED,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAAE,GACnB,MAAM,CAMR;AAUD;;;GAGG;AACH,wBAAgB,+BAA+B,CAC7C,sBAAsB,EAAE,GAAG,CAAC,qBAAqB,CAAC,EAClD,OAAO,CAAC,EAAE;IACR,oBAAoB,CAAC,EAAE,GAAG,CACxB,CACE,MAAM,EAAE,OAAO,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC,KAC/C,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAC1B,CAAC;CACH,yDAwLF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { DocumentStyle, RequestEventBase } from '@builder.io/qwik-city';
|
|
2
|
+
import { StencilRenderToStringResult } from './model';
|
|
3
3
|
export interface StencilSsrStyleStore {
|
|
4
4
|
stylesByKey: Map<string, string>;
|
|
5
5
|
}
|
package/package.json
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qwik-custom-elements/adapter-stencil",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"main": "./dist/index.qwik.cjs",
|
|
6
5
|
"module": "./dist/index.qwik.mjs",
|
|
7
6
|
"types": "./dist/index.d.ts",
|
|
8
|
-
"qwik":
|
|
7
|
+
"qwik": [
|
|
8
|
+
"./dist/index.qwik.mjs",
|
|
9
|
+
"./dist/client/index.qwik.mjs",
|
|
10
|
+
"./dist/ssr/index.qwik.mjs"
|
|
11
|
+
],
|
|
9
12
|
"exports": {
|
|
10
13
|
".": {
|
|
11
14
|
"types": "./dist/index.d.ts",
|
|
12
|
-
"import": "./dist/index.qwik.mjs"
|
|
13
|
-
"require": "./dist/index.qwik.cjs"
|
|
15
|
+
"import": "./dist/index.qwik.mjs"
|
|
14
16
|
},
|
|
15
17
|
"./client": {
|
|
16
18
|
"types": "./dist/client/index.d.ts",
|
|
17
|
-
"import": "./dist/client/index.
|
|
18
|
-
"require": "./dist/client/index.cjs"
|
|
19
|
+
"import": "./dist/client/index.qwik.mjs"
|
|
19
20
|
},
|
|
20
21
|
"./ssr": {
|
|
21
22
|
"types": "./dist/ssr/index.d.ts",
|
|
22
|
-
"import": "./dist/ssr/index.
|
|
23
|
-
"require": "./dist/ssr/index.cjs"
|
|
23
|
+
"import": "./dist/ssr/index.qwik.mjs"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
"files": [
|
|
@@ -28,22 +28,59 @@
|
|
|
28
28
|
],
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"@builder.io/qwik": "^1.19.2",
|
|
31
|
-
"@builder.io/qwik-city": "^1.19.2"
|
|
31
|
+
"@builder.io/qwik-city": "^1.19.2",
|
|
32
|
+
"@qwik-custom-elements/core": "^1.0.3"
|
|
33
|
+
},
|
|
34
|
+
"peerDependenciesMeta": {
|
|
35
|
+
"@qwik-custom-elements/core": {
|
|
36
|
+
"optional": true
|
|
37
|
+
}
|
|
32
38
|
},
|
|
33
39
|
"devDependencies": {
|
|
34
40
|
"@builder.io/qwik": "^1.19.2",
|
|
35
41
|
"@builder.io/qwik-city": "^1.19.2",
|
|
36
42
|
"typescript": "^5.9.3",
|
|
37
43
|
"vite": "^7.3.1",
|
|
38
|
-
"
|
|
44
|
+
"vite-plugin-dts": "^5.0.3",
|
|
45
|
+
"vitest": "^3.2.4",
|
|
46
|
+
"@qwik-custom-elements/core": "1.0.3"
|
|
39
47
|
},
|
|
40
48
|
"publishConfig": {
|
|
41
49
|
"access": "public"
|
|
42
50
|
},
|
|
51
|
+
"description": "Stencil adapter for @qwik-custom-elements — SSR via Stencil hydrate runtime",
|
|
52
|
+
"keywords": [
|
|
53
|
+
"qwik",
|
|
54
|
+
"web-components",
|
|
55
|
+
"custom-elements",
|
|
56
|
+
"ssr",
|
|
57
|
+
"server-side-rendering",
|
|
58
|
+
"wrapper",
|
|
59
|
+
"manifest",
|
|
60
|
+
"stencil",
|
|
61
|
+
"stenciljs",
|
|
62
|
+
"hydrate"
|
|
63
|
+
],
|
|
64
|
+
"author": "Dmitry A. Efimenko (https://github.com/DmitryEfimenko)",
|
|
65
|
+
"license": "MIT",
|
|
66
|
+
"repository": {
|
|
67
|
+
"type": "git",
|
|
68
|
+
"url": "https://github.com/DmitryEfimenko/qwik-custom-elements.git",
|
|
69
|
+
"directory": "packages/adapter-stencil"
|
|
70
|
+
},
|
|
71
|
+
"homepage": "https://github.com/DmitryEfimenko/qwik-custom-elements#readme",
|
|
72
|
+
"bugs": {
|
|
73
|
+
"url": "https://github.com/DmitryEfimenko/qwik-custom-elements/issues"
|
|
74
|
+
},
|
|
75
|
+
"engines": {
|
|
76
|
+
"node": ">=20"
|
|
77
|
+
},
|
|
78
|
+
"funding": "https://github.com/sponsors/DmitryEfimenko",
|
|
79
|
+
"sideEffects": false,
|
|
43
80
|
"scripts": {
|
|
44
|
-
"build": "vite build
|
|
45
|
-
"check-types": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json --noEmit",
|
|
46
|
-
"dev": "
|
|
81
|
+
"build": "vite build",
|
|
82
|
+
"check-types": "tsc -p tsconfig.build.json --noEmit && tsc -p tsconfig.test.json --noEmit",
|
|
83
|
+
"dev": "vite build --watch",
|
|
47
84
|
"format": "prettier --write . --config ../../.prettierrc.json --ignore-path ../../.prettierignore",
|
|
48
85
|
"format:check": "prettier --check . --config ../../.prettierrc.json --ignore-path ../../.prettierignore",
|
|
49
86
|
"lint": "eslint \"**/*.{js,mjs,cjs,ts,mts,cts,tsx}\" --no-error-on-unmatched-pattern",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"client-setup.test.d.ts","sourceRoot":"","sources":["../../src/client/client-setup.test.ts"],"names":[],"mappings":""}
|
package/dist/client/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../client-setup-C_qW_ZSR.cjs"),t=require("../stencil-csr-D6zt1Am9.cjs");exports.createStencilClientSetup=e.createStencilClientSetup;exports.createStencilCSRComponent=t.createStencilCSRComponent;
|
package/dist/client/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stencil-csr-props.test.d.ts","sourceRoot":"","sources":["../../src/client/stencil-csr-props.test.ts"],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const i=require("./core.min-vJ4M2jcU.cjs"),r="__qce_stencil_client_setup_done__",s=new Map;let u=0;function a(e){if(!e)return;const t=`stencil-client-setup-${++u}`;return s.set(t,e),t}async function d(e){if(e)return typeof e=="object"&&e!==null&&"resolve"in e&&typeof e.resolve=="function"?e.resolve():e}async function S(e){const t=document.querySelectorAll("style[sty-id]"),n=new Set;for(const o of t)if(o.parentElement!==document.head){const c=o.textContent??"";n.has(c)?o.remove():(document.head.appendChild(o),n.add(c))}e&&await e()}function f(e){const t=globalThis,n=t[r];if(n===!0)return Promise.resolve();if(typeof n=="object"&&n!==null&&"then"in n&&typeof n.then=="function")return n;const o=(async()=>{const c=await d(e);await S(c)})();return t[r]=o,o.then(()=>{t[r]=!0}).catch(c=>{throw delete t[r],c})}async function l(e,t){const o=(e==null?void 0:s.get(e))??t;await f(o).catch(c=>{console.error(c)})}function p(e){const t=a(e),n=e!=null&&"$symbol$"in Object(e)?e:void 0,o=i.Ls(()=>Promise.resolve().then(()=>require("./client-setup.ts_createStencilClientSetup_runSetup_6wDTmOSdSbc-Dz0z3zer.cjs")),"s_6wDTmOSdSbc",[t,n]);return()=>{i.Re("load",o),typeof document<"u"&&document.readyState!=="loading"&&l(t,n)}}exports.createStencilClientSetup=p;exports.executeStencilClientSetup=l;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { R as i, L as l } from "./core.min-Qm7Mxv6F.js";
|
|
2
|
-
const r = "__qce_stencil_client_setup_done__", s = /* @__PURE__ */ new Map();
|
|
3
|
-
let u = 0;
|
|
4
|
-
function a(e) {
|
|
5
|
-
if (!e) return;
|
|
6
|
-
const t = `stencil-client-setup-${++u}`;
|
|
7
|
-
return s.set(t, e), t;
|
|
8
|
-
}
|
|
9
|
-
async function d(e) {
|
|
10
|
-
if (e)
|
|
11
|
-
return typeof e == "object" && e !== null && "resolve" in e && typeof e.resolve == "function" ? e.resolve() : e;
|
|
12
|
-
}
|
|
13
|
-
async function f(e) {
|
|
14
|
-
const t = document.querySelectorAll("style[sty-id]"), n = /* @__PURE__ */ new Set();
|
|
15
|
-
for (const o of t) if (o.parentElement !== document.head) {
|
|
16
|
-
const c = o.textContent ?? "";
|
|
17
|
-
n.has(c) ? o.remove() : (document.head.appendChild(o), n.add(c));
|
|
18
|
-
}
|
|
19
|
-
e && await e();
|
|
20
|
-
}
|
|
21
|
-
function S(e) {
|
|
22
|
-
const t = globalThis, n = t[r];
|
|
23
|
-
if (n === !0) return Promise.resolve();
|
|
24
|
-
if (typeof n == "object" && n !== null && "then" in n && typeof n.then == "function") return n;
|
|
25
|
-
const o = (async () => {
|
|
26
|
-
const c = await d(e);
|
|
27
|
-
await f(c);
|
|
28
|
-
})();
|
|
29
|
-
return t[r] = o, o.then(() => {
|
|
30
|
-
t[r] = !0;
|
|
31
|
-
}).catch((c) => {
|
|
32
|
-
throw delete t[r], c;
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
async function p(e, t) {
|
|
36
|
-
const o = (e == null ? void 0 : s.get(e)) ?? t;
|
|
37
|
-
await S(o).catch((c) => {
|
|
38
|
-
console.error(c);
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
function m(e) {
|
|
42
|
-
const t = a(e), n = e != null && "$symbol$" in Object(e) ? e : void 0, o = /* @__PURE__ */ l(() => import("./client-setup.ts_createStencilClientSetup_runSetup_6wDTmOSdSbc-CPKK-h2J.js"), "s_6wDTmOSdSbc", [
|
|
43
|
-
t,
|
|
44
|
-
n
|
|
45
|
-
]);
|
|
46
|
-
return () => {
|
|
47
|
-
i("load", o), typeof document < "u" && document.readyState !== "loading" && p(t, n);
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
export {
|
|
51
|
-
m as c,
|
|
52
|
-
p as e
|
|
53
|
-
};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { v as o } from "./core.min-Qm7Mxv6F.js";
|
|
2
|
-
import { x as p } from "./core.min-Qm7Mxv6F.js";
|
|
3
|
-
import { e as n } from "./client-setup-D-ffVtNL.js";
|
|
4
|
-
const m = async () => {
|
|
5
|
-
const [t, e] = o();
|
|
6
|
-
await n(t, e);
|
|
7
|
-
};
|
|
8
|
-
export {
|
|
9
|
-
p as _hW,
|
|
10
|
-
m as s_6wDTmOSdSbc
|
|
11
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./core.min-vJ4M2jcU.cjs"),c=require("./client-setup-C_qW_ZSR.cjs"),i=async()=>{const[t,n]=e.ve();await c.executeStencilClientSetup(t,n)};exports._hW=e.xe;exports.s_6wDTmOSdSbc=i;
|