@qwik.dev/react 2.0.0-beta.39 → 2.0.0-beta.40

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.
Files changed (4) hide show
  1. package/lib/index.qwik.mjs +381 -436
  2. package/lib/q-manifest.json +7 -6
  3. package/lib/vite.mjs +19 -28
  4. package/package.json +5 -5
package/lib/index.qwik.mjs CHANGED
@@ -1,458 +1,403 @@
1
- var __defProp = Object.defineProperty;
2
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
- import { useSignal, isServer, useOn, useOnDocument, inlinedQrl, _captures, _jsxSorted, _jsxSplit, _wrapProp, Slot, jsx, componentQrl, useStylesScopedQrl, useStore, useTaskQrl, isBrowser, noSerialize, RenderOnce, SkipRender, implicit$FirstArg } from "@qwik.dev/core";
1
+ import { RenderOnce, SkipRender, Slot, _captures, _jsxSorted, _jsxSplit, _wrapProp, componentQrl, implicit$FirstArg, inlinedQrl, isBrowser, isServer, jsx, noSerialize, useOn, useOnDocument, useSignal, useStore, useStylesScopedQrl, useTaskQrl } from "@qwik.dev/core";
5
2
  import { Fragment } from "@qwik.dev/core/jsx-runtime";
6
- import { SSRStream, SSRComment, SSRRaw, _getContextContainer, _getContextHostElement, _addProjection, _setProjectionTarget, _removeProjection, _updateProjectionProps } from "@qwik.dev/core/internal";
7
- import { renderToString } from "react-dom/server";
8
- import { createElement, createContext, Component, createRef } from "react";
3
+ import { SSRComment, SSRRaw, SSRStream, _addProjection, _getContextContainer, _getContextHostElement, _removeProjection, _setProjectionTarget, _updateProjectionProps } from "@qwik.dev/core/internal";
9
4
  import { createRoot, hydrateRoot } from "react-dom/client";
10
5
  import { flushSync } from "react-dom";
11
- const SlotCtx = createContext({
12
- scopeId: ""
13
- });
14
- const QwikProjectionCtx = createContext(null);
15
- class SlotElement extends Component {
16
- constructor() {
17
- super(...arguments);
18
- __publicField(this, "slotC", createRef());
19
- }
20
- shouldComponentUpdate() {
21
- return false;
22
- }
23
- componentDidMount() {
24
- const slotC = this.slotC.current;
25
- if (slotC) {
26
- const { attachedEl, el } = this.context;
27
- if (el) {
28
- if (!attachedEl) {
29
- slotC.appendChild(el);
30
- } else if (attachedEl !== slotC) {
31
- throw new Error("already attached");
32
- }
33
- }
34
- }
35
- }
36
- render() {
37
- return createElement("q-slotc", {
38
- class: this.context.scopeId,
39
- suppressHydrationWarning: true,
40
- dangerouslySetInnerHTML: {
41
- __html: "<!--SLOT-->"
42
- },
43
- ref: this.slotC
44
- });
45
- }
6
+ import { renderToString } from "react-dom/server";
7
+ import { Component, createContext, createElement, createRef } from "react";
8
+ function _typeof(o) {
9
+ "@babel/helpers - typeof";
10
+ return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
11
+ return typeof o;
12
+ } : function(o) {
13
+ return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
14
+ }, _typeof(o);
15
+ }
16
+ function toPrimitive(t, r) {
17
+ if ("object" != _typeof(t) || !t) return t;
18
+ var e = t[Symbol.toPrimitive];
19
+ if (void 0 !== e) {
20
+ var i = e.call(t, r || "default");
21
+ if ("object" != _typeof(i)) return i;
22
+ throw new TypeError("@@toPrimitive must return a primitive value.");
23
+ }
24
+ return ("string" === r ? String : Number)(t);
25
+ }
26
+ function toPropertyKey(t) {
27
+ var i = toPrimitive(t, "string");
28
+ return "symbol" == _typeof(i) ? i : i + "";
46
29
  }
47
- __publicField(SlotElement, "contextType", SlotCtx);
30
+ function _defineProperty(e, r, t) {
31
+ return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
32
+ value: t,
33
+ enumerable: !0,
34
+ configurable: !0,
35
+ writable: !0
36
+ }) : e[r] = t, e;
37
+ }
38
+ var SlotCtx = createContext({ scopeId: "" });
39
+ var QwikProjectionCtx = createContext(null);
40
+ var SlotElement = class extends Component {
41
+ constructor(..._args) {
42
+ super(..._args);
43
+ _defineProperty(this, "slotC", createRef());
44
+ }
45
+ shouldComponentUpdate() {
46
+ return false;
47
+ }
48
+ componentDidMount() {
49
+ const slotC = this.slotC.current;
50
+ if (slotC) {
51
+ const { attachedEl, el } = this.context;
52
+ if (el) {
53
+ if (!attachedEl) slotC.appendChild(el);
54
+ else if (attachedEl !== slotC) throw new Error("already attached");
55
+ }
56
+ }
57
+ }
58
+ render() {
59
+ return createElement("q-slotc", {
60
+ class: this.context.scopeId,
61
+ suppressHydrationWarning: true,
62
+ dangerouslySetInnerHTML: { __html: "<!--SLOT-->" },
63
+ ref: this.slotC
64
+ });
65
+ }
66
+ };
67
+ _defineProperty(SlotElement, "contextType", SlotCtx);
48
68
  function mainExactProps(slotEl, scopeId, RootCmp, props, projectionState) {
49
- let tree = createElement(SlotCtx.Provider, {
50
- value: {
51
- el: slotEl,
52
- scopeId,
53
- attachedEl: void 0
54
- },
55
- children: createElement(RootCmp, {
56
- ...props,
57
- children: createElement(SlotElement, null)
58
- })
59
- });
60
- if (projectionState) {
61
- tree = createElement(QwikProjectionCtx.Provider, {
62
- value: projectionState,
63
- children: tree
64
- });
65
- }
66
- return tree;
69
+ let tree = createElement(SlotCtx.Provider, {
70
+ value: {
71
+ el: slotEl,
72
+ scopeId,
73
+ attachedEl: void 0
74
+ },
75
+ children: createElement(RootCmp, {
76
+ ...props,
77
+ children: createElement(SlotElement, null)
78
+ })
79
+ });
80
+ if (projectionState) tree = createElement(QwikProjectionCtx.Provider, {
81
+ value: projectionState,
82
+ children: tree
83
+ });
84
+ return tree;
67
85
  }
68
- const useWakeupSignal = (props, opts = {}) => {
69
- const signal = useSignal(false);
70
- const activate = /* @__PURE__ */ inlinedQrl(() => {
71
- const signal2 = _captures[0];
72
- return signal2.value = true;
73
- }, "useWakeupSignal_activate_bbwdFkXhIMU", [
74
- signal
75
- ]);
76
- const clientOnly = !!(props["client:only"] || props["qwik:only"] || opts?.clientOnly);
77
- const clientVisible = props["client:visible"] || props["qwik:visible"] || opts?.eagerness === "visible";
78
- const clientIdle = props["client:idle"] || props["qwik:idle"] || opts?.eagerness === "idle";
79
- const clientLoad = props["client:load"] || props["qwik:load"] || clientOnly || opts?.eagerness === "load";
80
- const clientHover = props["client:hover"] || props["qwik:hover"] || opts?.eagerness === "hover";
81
- const clientEvent = props["client:event"] || props["qwik:event"];
82
- if (isServer) {
83
- if (clientVisible) {
84
- useOn("qvisible", activate);
85
- }
86
- if (clientIdle) {
87
- useOnDocument("qidle", activate);
88
- }
89
- if (clientLoad) {
90
- useOnDocument("qinit", activate);
91
- }
92
- if (clientHover) {
93
- useOn("mouseover", activate);
94
- }
95
- if (clientEvent) {
96
- useOn(clientEvent, activate);
97
- }
98
- if (opts?.event) {
99
- useOn(opts?.event, activate);
100
- }
101
- }
102
- return [
103
- signal,
104
- clientOnly,
105
- activate
106
- ];
86
+ var useWakeupSignal = (props, opts = {}) => {
87
+ const signal = useSignal(false);
88
+ const activate = /*#__PURE__*/ inlinedQrl(() => {
89
+ const signal = _captures[0];
90
+ return signal.value = true;
91
+ }, "useWakeupSignal_activate_bbwdFkXhIMU", [signal]);
92
+ const clientOnly = !!(props["client:only"] || props["qwik:only"] || opts?.clientOnly);
93
+ const clientVisible = props["client:visible"] || props["qwik:visible"] || opts?.eagerness === "visible";
94
+ const clientIdle = props["client:idle"] || props["qwik:idle"] || opts?.eagerness === "idle";
95
+ const clientLoad = props["client:load"] || props["qwik:load"] || clientOnly || opts?.eagerness === "load";
96
+ const clientHover = props["client:hover"] || props["qwik:hover"] || opts?.eagerness === "hover";
97
+ const clientEvent = props["client:event"] || props["qwik:event"];
98
+ if (isServer) {
99
+ if (clientVisible) useOn("qvisible", activate);
100
+ if (clientIdle) useOnDocument("qidle", activate);
101
+ if (clientLoad) useOnDocument("qinit", activate);
102
+ if (clientHover) useOn("mouseover", activate);
103
+ if (clientEvent) useOn(clientEvent, activate);
104
+ if (opts?.event) useOn(opts?.event, activate);
105
+ }
106
+ return [
107
+ signal,
108
+ clientOnly,
109
+ activate
110
+ ];
107
111
  };
108
- const HOST_PREFIX = "host:";
109
- const getReactProps = (props) => {
110
- const obj = {};
111
- Object.keys(props).forEach((key) => {
112
- if (!key.startsWith("client:") && !key.startsWith("qwik:") && !key.startsWith(HOST_PREFIX)) {
113
- const normalizedKey = key.endsWith("$") ? key.slice(0, -1) : key;
114
- obj[normalizedKey] = props[key];
115
- }
116
- });
117
- return obj;
112
+ var HOST_PREFIX = "host:";
113
+ var getReactProps = (props) => {
114
+ const obj = {};
115
+ Object.keys(props).forEach((key) => {
116
+ if (!key.startsWith("client:") && !key.startsWith("qwik:") && !key.startsWith(HOST_PREFIX)) {
117
+ const normalizedKey = key.endsWith("$") ? key.slice(0, -1) : key;
118
+ obj[normalizedKey] = props[key];
119
+ }
120
+ });
121
+ return obj;
118
122
  };
119
123
  function main(slotEl, scopeId, RootCmp, props, projectionState) {
120
- const newProps = getReactProps(props);
121
- return mainExactProps(slotEl, scopeId, RootCmp, newProps, projectionState);
124
+ return mainExactProps(slotEl, scopeId, RootCmp, getReactProps(props), projectionState);
122
125
  }
123
- const getHostProps = (props) => {
124
- const obj = {};
125
- Object.keys(props).forEach((key) => {
126
- if (key.startsWith(HOST_PREFIX)) {
127
- obj[key.slice(HOST_PREFIX.length)] = props[key];
128
- }
129
- });
130
- return obj;
126
+ var getHostProps = (props) => {
127
+ const obj = {};
128
+ Object.keys(props).forEach((key) => {
129
+ if (key.startsWith(HOST_PREFIX)) obj[key.slice(5)] = props[key];
130
+ });
131
+ return obj;
131
132
  };
132
- let _ssrProjectionRegistry = null;
133
+ var _ssrProjectionRegistry = null;
133
134
  function setSSRProjectionRegistry(registry) {
134
- _ssrProjectionRegistry = registry;
135
+ _ssrProjectionRegistry = registry;
135
136
  }
136
137
  function getSSRProjectionRegistry() {
137
- return _ssrProjectionRegistry;
138
+ return _ssrProjectionRegistry;
138
139
  }
139
- const SLOT_MARKER = "<!--SLOT-->";
140
+ var SLOT_MARKER = "<!--SLOT-->";
140
141
  function splitHtmlAtMarkers(html) {
141
- const MARKER_RE = /<!--(?:SLOT|QWIK-PROJ:(.*?))-->/g;
142
- const segments = [];
143
- let lastIndex = 0;
144
- let match;
145
- while ((match = MARKER_RE.exec(html)) !== null) {
146
- if (match.index > lastIndex) {
147
- segments.push({
148
- type: "html",
149
- content: html.slice(lastIndex, match.index)
150
- });
151
- }
152
- if (match[1] !== void 0) {
153
- segments.push({
154
- type: "proj",
155
- slotName: match[1]
156
- });
157
- } else {
158
- segments.push({
159
- type: "slot"
160
- });
161
- }
162
- lastIndex = match.index + match[0].length;
163
- }
164
- if (lastIndex < html.length) {
165
- segments.push({
166
- type: "html",
167
- content: html.slice(lastIndex)
168
- });
169
- }
170
- return segments;
142
+ const MARKER_RE = /<!--(?:SLOT|QWIK-PROJ:(.*?))-->/g;
143
+ const segments = [];
144
+ let lastIndex = 0;
145
+ let match;
146
+ while ((match = MARKER_RE.exec(html)) !== null) {
147
+ if (match.index > lastIndex) segments.push({
148
+ type: "html",
149
+ content: html.slice(lastIndex, match.index)
150
+ });
151
+ if (match[1] !== void 0) segments.push({
152
+ type: "proj",
153
+ slotName: match[1]
154
+ });
155
+ else segments.push({ type: "slot" });
156
+ lastIndex = match.index + match[0].length;
157
+ }
158
+ if (lastIndex < html.length) segments.push({
159
+ type: "html",
160
+ content: html.slice(lastIndex)
161
+ });
162
+ return segments;
171
163
  }
172
164
  async function renderFromServer(Host, reactCmp$, scopeId, props, ref, slotRef, hydrationProps) {
173
- if (isServer) {
174
- const Cmp = await reactCmp$.resolve();
175
- const newProps = getReactProps(props);
176
- Object.assign(hydrationProps, newProps);
177
- const registry = {
178
- entries: /* @__PURE__ */ new Map()
179
- };
180
- setSSRProjectionRegistry(registry);
181
- const html = renderToString(mainExactProps(void 0, scopeId, Cmp, newProps));
182
- setSSRProjectionRegistry(null);
183
- const hasSlot = html.includes(SLOT_MARKER);
184
- const hasProj = registry.entries.size > 0;
185
- if (hasSlot || hasProj) {
186
- const segments = splitHtmlAtMarkers(html);
187
- return /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
188
- /* @__PURE__ */ _jsxSplit(Host, {
189
- ref,
190
- ...getHostProps(props)
191
- }, null, /* @__PURE__ */ _jsxSorted(SSRStream, null, null, async function* () {
192
- yield /* @__PURE__ */ _jsxSorted(SSRComment, null, {
193
- data: "q:ignore"
194
- }, null, 3, "cl_0");
195
- for (const segment of segments) {
196
- if (segment.type === "html") {
197
- yield /* @__PURE__ */ _jsxSorted(SSRRaw, {
198
- data: _wrapProp(segment, "content")
199
- }, null, null, 3, "cl_1");
200
- } else if (segment.type === "slot") {
201
- yield /* @__PURE__ */ _jsxSorted(SSRComment, null, {
202
- data: "q:container-island"
203
- }, null, 3, "cl_2");
204
- yield /* @__PURE__ */ _jsxSorted("q-slot", {
205
- ref: slotRef
206
- }, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "cl_3"), 1, "cl_4");
207
- yield /* @__PURE__ */ _jsxSorted(SSRComment, null, {
208
- data: "/q:container-island"
209
- }, null, 3, "cl_5");
210
- } else if (segment.type === "proj") {
211
- const entry = registry.entries.get(segment.slotName);
212
- if (entry) {
213
- yield /* @__PURE__ */ _jsxSorted(SSRComment, null, {
214
- data: "q:container-island"
215
- }, null, 3, "cl_6");
216
- const QwikComp = await entry.qrl.resolve();
217
- yield jsx(QwikComp, entry.props);
218
- yield /* @__PURE__ */ _jsxSorted(SSRComment, null, {
219
- data: "/q:container-island"
220
- }, null, 3, "cl_7");
221
- }
222
- }
223
- }
224
- yield /* @__PURE__ */ _jsxSorted(SSRComment, null, {
225
- data: "/q:ignore"
226
- }, null, 3, "cl_8");
227
- }, 1, "cl_9"), 0, "cl_10"),
228
- !hasSlot && /* @__PURE__ */ _jsxSorted("q-slot", {
229
- ref: slotRef
230
- }, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "cl_11"), 1, "cl_12")
231
- ], 1, "cl_13");
232
- }
233
- return /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
234
- /* @__PURE__ */ _jsxSorted(Host, {
235
- ref
236
- }, null, [
237
- /* @__PURE__ */ _jsxSorted(SSRComment, null, {
238
- data: "q:container=html"
239
- }, null, 3, "cl_14"),
240
- /* @__PURE__ */ _jsxSorted(SSRRaw, {
241
- data: html
242
- }, null, null, 3, "cl_15"),
243
- /* @__PURE__ */ _jsxSorted(SSRComment, null, {
244
- data: "/q:container"
245
- }, null, 3, "cl_16")
246
- ], 1, "cl_17"),
247
- /* @__PURE__ */ _jsxSorted("q-slot", {
248
- ref: slotRef
249
- }, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "cl_18"), 1, null)
250
- ], 1, "cl_19");
251
- }
165
+ if (isServer) {
166
+ const Cmp = await reactCmp$.resolve();
167
+ const newProps = getReactProps(props);
168
+ Object.assign(hydrationProps, newProps);
169
+ const registry = { entries: /* @__PURE__ */ new Map() };
170
+ setSSRProjectionRegistry(registry);
171
+ const html = renderToString(mainExactProps(void 0, scopeId, Cmp, newProps));
172
+ setSSRProjectionRegistry(null);
173
+ const hasSlot = html.includes(SLOT_MARKER);
174
+ const hasProj = registry.entries.size > 0;
175
+ if (hasSlot || hasProj) {
176
+ const segments = splitHtmlAtMarkers(html);
177
+ return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSplit(Host, {
178
+ ref,
179
+ ...getHostProps(props)
180
+ }, null, /*#__PURE__*/ _jsxSorted(SSRStream, null, null, async function* () {
181
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:ignore" }, null, 3, "cl_0");
182
+ for (const segment of segments) if (segment.type === "html") yield /*#__PURE__*/ _jsxSorted(SSRRaw, { data: _wrapProp(segment, "content") }, null, null, 3, "cl_1");
183
+ else if (segment.type === "slot") {
184
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container-island" }, null, 3, "cl_2");
185
+ yield /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "cl_3"), 1, "cl_4");
186
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container-island" }, null, 3, "cl_5");
187
+ } else if (segment.type === "proj") {
188
+ const entry = registry.entries.get(segment.slotName);
189
+ if (entry) {
190
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container-island" }, null, 3, "cl_6");
191
+ const QwikComp = await entry.qrl.resolve();
192
+ yield jsx(QwikComp, entry.props);
193
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container-island" }, null, 3, "cl_7");
194
+ }
195
+ }
196
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:ignore" }, null, 3, "cl_8");
197
+ }, 1, "cl_9"), 0, "cl_10"), !hasSlot && /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "cl_11"), 1, "cl_12")], 1, "cl_13");
198
+ }
199
+ return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSorted(Host, { ref }, null, [
200
+ /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container=html" }, null, 3, "cl_14"),
201
+ /*#__PURE__*/ _jsxSorted(SSRRaw, { data: html }, null, null, 3, "cl_15"),
202
+ /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container" }, null, 3, "cl_16")
203
+ ], 1, "cl_17"), /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "cl_18"), 1, null)], 1, "cl_19");
204
+ }
252
205
  }
253
206
  function qwikifyQrl(reactCmp$, opts) {
254
- return /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
255
- const opts2 = _captures[0], reactCmp$2 = _captures[1];
256
- const stylesscoped$ = useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(`q-slot{display:none} q-slotc,q-slotc>q-slot{display:contents}`, "qwikifyQrl_component_stylesscoped_useStylesScoped_5NfcSvFabPo"));
257
- const hostRef = useSignal();
258
- const slotRef = useSignal();
259
- const internalState = useSignal();
260
- const [signal, isClientOnly] = useWakeupSignal(props, opts2);
261
- const hydrationKeys = useStore({});
262
- const TagName = opts2?.tagName ?? "qwik-react";
263
- useTaskQrl(/* @__PURE__ */ inlinedQrl(async ({ track }) => {
264
- const hostRef2 = _captures[0], hydrationKeys2 = _captures[1], internalState2 = _captures[2], isClientOnly2 = _captures[3], props2 = _captures[4], reactCmp$3 = _captures[5], signal2 = _captures[6], slotRef2 = _captures[7], stylesscoped$2 = _captures[8];
265
- const trackedProps = track(() => ({
266
- ...props2
267
- }));
268
- track(signal2);
269
- if (!isBrowser) {
270
- return;
271
- }
272
- let projectionState = null;
273
- const container = _getContextContainer();
274
- const hostVNode = _getContextHostElement();
275
- if (container && hostVNode) {
276
- projectionState = {
277
- parentVNode: hostVNode,
278
- container
279
- };
280
- }
281
- if (internalState2.value) {
282
- if (internalState2.value.root) {
283
- internalState2.value.root.render(main(slotRef2.value, stylesscoped$2.scopeId, internalState2.value.cmp, trackedProps, internalState2.value.projectionState));
284
- }
285
- } else {
286
- let root = void 0;
287
- const Cmp = await reactCmp$3.resolve();
288
- const hostElement = hostRef2.value;
289
- if (hostElement) {
290
- if (isClientOnly2) {
291
- root = createRoot(hostElement);
292
- } else {
293
- root = flushSync(() => {
294
- return hydrateRoot(hostElement, mainExactProps(slotRef2.value, stylesscoped$2.scopeId, Cmp, hydrationKeys2, projectionState));
295
- });
296
- }
297
- if (isClientOnly2 || signal2.value === false) {
298
- root.render(main(slotRef2.value, stylesscoped$2.scopeId, Cmp, trackedProps, projectionState));
299
- }
300
- }
301
- internalState2.value = noSerialize({
302
- cmp: Cmp,
303
- root,
304
- projectionState
305
- });
306
- }
307
- }, "qwikifyQrl_component_useTask_JuFeaMCL0P0", [
308
- hostRef,
309
- hydrationKeys,
310
- internalState,
311
- isClientOnly,
312
- props,
313
- reactCmp$2,
314
- signal,
315
- slotRef,
316
- stylesscoped$
317
- ]));
318
- useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track, cleanup }) => {
319
- const internalState2 = _captures[0], signal2 = _captures[1];
320
- track(signal2);
321
- if (isBrowser) {
322
- cleanup(() => {
323
- const root = internalState2.value?.root;
324
- if (root) {
325
- queueMicrotask(() => root.unmount());
326
- }
327
- });
328
- }
329
- }, "qwikifyQrl_component_useTask_1_mwaGrLCLc2w", [
330
- internalState,
331
- signal
332
- ]));
333
- if (isServer && !isClientOnly) {
334
- const jsx2 = renderFromServer(TagName, reactCmp$2, stylesscoped$.scopeId, props, hostRef, slotRef, hydrationKeys);
335
- return /* @__PURE__ */ _jsxSorted(RenderOnce, null, null, jsx2, 1, 2);
336
- }
337
- return /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
338
- /* @__PURE__ */ _jsxSplit(TagName, {
339
- ...getHostProps(props)
340
- }, {
341
- ref: (el) => {
342
- if (isBrowser) {
343
- queueMicrotask(() => {
344
- const internalData = internalState.value;
345
- if (internalData && !internalData.root) {
346
- const root = internalData.root = createRoot(el);
347
- root.render(main(slotRef.value, stylesscoped$.scopeId, internalData.cmp, props, internalData.projectionState));
348
- }
349
- });
350
- } else {
351
- hostRef.value = el;
352
- }
353
- }
354
- }, SkipRender, 0, "sV_0"),
355
- /* @__PURE__ */ _jsxSorted("q-slot", {
356
- ref: slotRef
357
- }, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "sV_1"), 1, null)
358
- ], 1, "sV_2");
359
- }, "qwikifyQrl_component_5bB3apdeFTY", [
360
- opts,
361
- reactCmp$
362
- ]));
207
+ return /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
208
+ const opts = _captures[0], reactCmp$ = _captures[1];
209
+ const stylesscoped$ = useStylesScopedQrl(/*#__PURE__*/ inlinedQrl(`q-slot{display:none} q-slotc,q-slotc>q-slot{display:contents}`, "qwikifyQrl_component_stylesscoped_useStylesScoped_5NfcSvFabPo"));
210
+ const hostRef = useSignal();
211
+ const slotRef = useSignal();
212
+ const internalState = useSignal();
213
+ const [signal, isClientOnly] = useWakeupSignal(props, opts);
214
+ const hydrationKeys = useStore({});
215
+ const TagName = opts?.tagName ?? "qwik-react";
216
+ useTaskQrl(/*#__PURE__*/ inlinedQrl(async ({ track }) => {
217
+ const hostRef = _captures[0], hydrationKeys = _captures[1], internalState = _captures[2], isClientOnly = _captures[3], props = _captures[4], reactCmp$ = _captures[5], signal = _captures[6], slotRef = _captures[7], stylesscoped$ = _captures[8];
218
+ const trackedProps = track(() => ({ ...props }));
219
+ track(signal);
220
+ if (!isBrowser) return;
221
+ let projectionState = null;
222
+ const container = _getContextContainer();
223
+ const hostVNode = _getContextHostElement();
224
+ if (container && hostVNode) projectionState = {
225
+ parentVNode: hostVNode,
226
+ container
227
+ };
228
+ if (internalState.value) {
229
+ if (internalState.value.root) internalState.value.root.render(main(slotRef.value, stylesscoped$.scopeId, internalState.value.cmp, trackedProps, internalState.value.projectionState));
230
+ } else {
231
+ let root = void 0;
232
+ const Cmp = await reactCmp$.resolve();
233
+ const hostElement = hostRef.value;
234
+ if (hostElement) {
235
+ if (isClientOnly) root = createRoot(hostElement);
236
+ else root = flushSync(() => {
237
+ return hydrateRoot(hostElement, mainExactProps(slotRef.value, stylesscoped$.scopeId, Cmp, hydrationKeys, projectionState));
238
+ });
239
+ if (isClientOnly || signal.value === false) root.render(main(slotRef.value, stylesscoped$.scopeId, Cmp, trackedProps, projectionState));
240
+ }
241
+ internalState.value = noSerialize({
242
+ cmp: Cmp,
243
+ root,
244
+ projectionState
245
+ });
246
+ }
247
+ }, "qwikifyQrl_component_useTask_JuFeaMCL0P0", [
248
+ hostRef,
249
+ hydrationKeys,
250
+ internalState,
251
+ isClientOnly,
252
+ props,
253
+ reactCmp$,
254
+ signal,
255
+ slotRef,
256
+ stylesscoped$
257
+ ]));
258
+ useTaskQrl(/*#__PURE__*/ inlinedQrl(({ track, cleanup }) => {
259
+ const internalState = _captures[0], signal = _captures[1];
260
+ track(signal);
261
+ if (isBrowser) cleanup(() => {
262
+ const root = internalState.value?.root;
263
+ if (root) queueMicrotask(() => root.unmount());
264
+ });
265
+ }, "qwikifyQrl_component_useTask_1_mwaGrLCLc2w", [internalState, signal]));
266
+ if (isServer && !isClientOnly) {
267
+ const jsx = renderFromServer(TagName, reactCmp$, stylesscoped$.scopeId, props, hostRef, slotRef, hydrationKeys);
268
+ return /*#__PURE__*/ _jsxSorted(RenderOnce, null, null, jsx, 1, 2);
269
+ }
270
+ return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSplit(TagName, { ...getHostProps(props) }, { ref: (el) => {
271
+ if (isBrowser) queueMicrotask(() => {
272
+ const internalData = internalState.value;
273
+ if (internalData && !internalData.root) (internalData.root = createRoot(el)).render(main(slotRef.value, stylesscoped$.scopeId, internalData.cmp, props, internalData.projectionState));
274
+ });
275
+ else hostRef.value = el;
276
+ } }, SkipRender, 0, "sV_0"), /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "sV_1"), 1, null)], 1, "sV_2");
277
+ }, "qwikifyQrl_component_5bB3apdeFTY", [opts, reactCmp$]));
363
278
  }
364
- const qwikify$ = /* @__PURE__ */ implicit$FirstArg(qwikifyQrl);
365
- let slotCounter = 0;
366
- function reactifyQrl(qwikCompQrl) {
367
- const _QwikInReact = class _QwikInReact extends Component {
368
- constructor() {
369
- super(...arguments);
370
- __publicField(this, "slotName", `_rq:${slotCounter++}`);
371
- __publicField(this, "vnode", null);
372
- __publicField(this, "divRef", createRef());
373
- __publicField(this, "mounted", false);
374
- __publicField(this, "pendingProps", null);
375
- }
376
- componentDidMount() {
377
- this.mounted = true;
378
- const projectionState = this.context;
379
- if (!projectionState) {
380
- if (typeof console !== "undefined") {
381
- console.warn("reactify$: component must be rendered inside a qwikify$() React tree.");
382
- }
383
- return;
384
- }
385
- const div = this.divRef.current;
386
- if (!div) {
387
- return;
388
- }
389
- if (div.firstElementChild) {
390
- return;
391
- }
392
- qwikCompQrl.resolve().then((QwikComp) => {
393
- if (!this.mounted) {
394
- return;
395
- }
396
- const name = QwikComp.displayName || QwikComp.name || "QwikComponent";
397
- _QwikInReact.displayName = `reactify$(${name})`;
398
- const { parentVNode, container } = projectionState;
399
- const reactProps = getReactProps(this.pendingProps || this.props);
400
- this.vnode = _addProjection(container, parentVNode, qwikCompQrl, reactProps, this.slotName);
401
- div.replaceChildren();
402
- _setProjectionTarget(this.vnode, div);
403
- });
404
- }
405
- componentWillUnmount() {
406
- this.mounted = false;
407
- if (this.vnode && this.context) {
408
- _removeProjection(this.context.container, this.context.parentVNode, this.vnode, this.slotName);
409
- this.vnode = null;
410
- }
411
- }
412
- shouldComponentUpdate(nextProps) {
413
- if (this.vnode && this.context) {
414
- const reactProps = getReactProps(nextProps);
415
- _updateProjectionProps(this.context.container, this.vnode, reactProps);
416
- } else {
417
- this.pendingProps = nextProps;
418
- }
419
- return false;
420
- }
421
- render() {
422
- const registry = getSSRProjectionRegistry();
423
- if (registry) {
424
- const reactProps = getReactProps(this.props);
425
- registry.entries.set(this.slotName, {
426
- qrl: qwikCompQrl,
427
- props: reactProps
428
- });
429
- return createElement("div", {
430
- "data-qwik-projection": this.slotName,
431
- suppressHydrationWarning: true,
432
- dangerouslySetInnerHTML: {
433
- __html: `<!--QWIK-PROJ:${this.slotName}-->`
434
- }
435
- });
436
- }
437
- return createElement("div", {
438
- ref: this.divRef,
439
- suppressHydrationWarning: true,
440
- dangerouslySetInnerHTML: {
441
- __html: `<!--QWIK-PROJ:${this.slotName}-->`
442
- },
443
- "data-qwik-projection": this.slotName
444
- });
445
- }
446
- };
447
- __publicField(_QwikInReact, "contextType", QwikProjectionCtx);
448
- let QwikInReact = _QwikInReact;
449
- QwikInReact.displayName = `reactify$(...)`;
450
- return QwikInReact;
279
+ var qwikify$ = /*#__PURE__*/ implicit$FirstArg(qwikifyQrl);
280
+ var slotCounter = 0;
281
+ /**
282
+ * Creates a React component that renders a Qwik component inside a qwikify$ React tree.
283
+ *
284
+ * This is the QRL form. Use `reactify$` for the convenience form with automatic `$()` wrapping.
285
+ *
286
+ * The returned React component must be rendered inside a `qwikify$()` React tree. It creates a div
287
+ * that Qwik renders into, while React ignores its contents.
288
+ *
289
+ * During SSR, a marker is emitted so that server-render.tsx can render the Qwik component inline
290
+ * inside `q:container-island` comments. On the client, Qwik resumes the SSR content naturally
291
+ * (events, signals, state are all serialized). For pure CSR, `_addProjection` renders from
292
+ * scratch.
293
+ *
294
+ * @param qwikCompQrl - A QRL wrapping a Qwik component (created with `component$`)
295
+ * @returns A React component that renders the Qwik component
296
+ */ function reactifyQrl(qwikCompQrl) {
297
+ class QwikInReact extends Component {
298
+ constructor(..._args) {
299
+ super(..._args);
300
+ _defineProperty(this, "slotName", `_rq:${slotCounter++}`);
301
+ _defineProperty(this, "vnode", null);
302
+ _defineProperty(this, "divRef", createRef());
303
+ _defineProperty(this, "mounted", false);
304
+ _defineProperty(this, "pendingProps", null);
305
+ }
306
+ componentDidMount() {
307
+ this.mounted = true;
308
+ const projectionState = this.context;
309
+ if (!projectionState) {
310
+ if (typeof console !== "undefined") console.warn("reactify$: component must be rendered inside a qwikify$() React tree.");
311
+ return;
312
+ }
313
+ const div = this.divRef.current;
314
+ if (!div) return;
315
+ if (div.firstElementChild) return;
316
+ qwikCompQrl.resolve().then((QwikComp) => {
317
+ if (!this.mounted) return;
318
+ const name = QwikComp.displayName || QwikComp.name || "QwikComponent";
319
+ QwikInReact.displayName = `reactify$(${name})`;
320
+ const { parentVNode, container } = projectionState;
321
+ const reactProps = getReactProps(this.pendingProps || this.props);
322
+ this.vnode = _addProjection(container, parentVNode, qwikCompQrl, reactProps, this.slotName);
323
+ div.replaceChildren();
324
+ _setProjectionTarget(this.vnode, div);
325
+ });
326
+ }
327
+ componentWillUnmount() {
328
+ this.mounted = false;
329
+ if (this.vnode && this.context) {
330
+ _removeProjection(this.context.container, this.context.parentVNode, this.vnode, this.slotName);
331
+ this.vnode = null;
332
+ }
333
+ }
334
+ shouldComponentUpdate(nextProps) {
335
+ if (this.vnode && this.context) {
336
+ const reactProps = getReactProps(nextProps);
337
+ _updateProjectionProps(this.context.container, this.vnode, reactProps);
338
+ } else this.pendingProps = nextProps;
339
+ return false;
340
+ }
341
+ render() {
342
+ const registry = getSSRProjectionRegistry();
343
+ if (registry) {
344
+ const reactProps = getReactProps(this.props);
345
+ registry.entries.set(this.slotName, {
346
+ qrl: qwikCompQrl,
347
+ props: reactProps
348
+ });
349
+ return createElement("div", {
350
+ "data-qwik-projection": this.slotName,
351
+ suppressHydrationWarning: true,
352
+ dangerouslySetInnerHTML: { __html: `<!--QWIK-PROJ:${this.slotName}-->` }
353
+ });
354
+ }
355
+ return createElement("div", {
356
+ ref: this.divRef,
357
+ suppressHydrationWarning: true,
358
+ dangerouslySetInnerHTML: { __html: `<!--QWIK-PROJ:${this.slotName}-->` },
359
+ "data-qwik-projection": this.slotName
360
+ });
361
+ }
362
+ }
363
+ _defineProperty(QwikInReact, "contextType", QwikProjectionCtx);
364
+ QwikInReact.displayName = `reactify$(...)`;
365
+ return QwikInReact;
451
366
  }
452
- const reactify$ = /* @__PURE__ */ implicit$FirstArg(reactifyQrl);
453
- export {
454
- qwikify$,
455
- qwikifyQrl,
456
- reactify$,
457
- reactifyQrl
458
- };
367
+ /**
368
+ * Creates a React component that renders a Qwik component inside a qwikify$ React tree.
369
+ *
370
+ * The returned React component must be rendered inside a `qwikify$()` React tree. It creates a div
371
+ * that Qwik renders into, while React ignores its contents.
372
+ *
373
+ * During SSR, the Qwik component is rendered as HTML inside `q:container-island` comments. On the
374
+ * client, the component re-renders via the external projection API.
375
+ *
376
+ * @example
377
+ *
378
+ * ```tsx
379
+ * import { component$ } from '@qwik.dev/core';
380
+ * import { qwikify$, reactify$ } from '@qwik.dev/react';
381
+ *
382
+ * const QwikCounter = component$(() => {
383
+ * const count = useSignal(0);
384
+ * return <button onClick$={() => count.value++}>{count.value}</button>;
385
+ * });
386
+ *
387
+ * const ReactCounter = reactify$(QwikCounter);
388
+ *
389
+ * const ReactApp = ({ children }) => (
390
+ * <div>
391
+ * <h1>React App</h1>
392
+ * <ReactCounter />
393
+ * {children}
394
+ * </div>
395
+ * );
396
+ *
397
+ * export const QwikifiedApp = qwikify$(ReactApp);
398
+ * ```
399
+ *
400
+ * @param qwikComp - A Qwik component (created with `component$`)
401
+ * @returns A React component that renders the Qwik component
402
+ */ var reactify$ = /*#__PURE__*/ implicit$FirstArg(reactifyQrl);
403
+ export { qwikify$, qwikifyQrl, reactify$, reactifyQrl };
package/lib/q-manifest.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": "1",
3
- "manifestHash": "8uor6j",
3
+ "manifestHash": "4qq332",
4
4
  "options": {
5
5
  "target": "lib",
6
6
  "buildMode": "development",
@@ -13,10 +13,11 @@
13
13
  "mapping": {},
14
14
  "bundles": {
15
15
  "../index.qwik.mjs": {
16
- "size": 16229,
17
- "total": 16229,
16
+ "size": 16446,
17
+ "total": 16446,
18
18
  "origins": [
19
19
  "src/index.qwik.ts",
20
+ "src/react/client.tsx",
20
21
  "src/react/qwikify.tsx",
21
22
  "src/react/reactify.ts",
22
23
  "src/react/server-render.tsx",
@@ -25,8 +26,8 @@
25
26
  "interactivity": 0
26
27
  },
27
28
  "../vite.mjs": {
28
- "size": 483,
29
- "total": 483,
29
+ "size": 396,
30
+ "total": 396,
30
31
  "origins": [
31
32
  "src/vite.ts"
32
33
  ],
@@ -42,7 +43,7 @@
42
43
  "symbols": {},
43
44
  "platform": {
44
45
  "vite": "",
45
- "rollup": "4.61.0",
46
+ "rollup": "4.23.0",
46
47
  "env": "node",
47
48
  "os": "linux",
48
49
  "node": "24.15.0"
package/lib/vite.mjs CHANGED
@@ -1,30 +1,21 @@
1
1
  function qwikReact() {
2
- const OPTIMIZE_DEPS = [
3
- "react",
4
- "react-dom",
5
- "react-dom/client",
6
- "react-dom/server",
7
- "react/jsx-runtime",
8
- "react/jsx-dev-runtime"
9
- ];
10
- const DEDUPE = [
11
- "react",
12
- "react-dom"
13
- ];
14
- return {
15
- name: "vite-plugin-qwik-react",
16
- config() {
17
- return {
18
- resolve: {
19
- dedupe: DEDUPE
20
- },
21
- optimizeDeps: {
22
- include: OPTIMIZE_DEPS
23
- }
24
- };
25
- }
26
- };
2
+ const OPTIMIZE_DEPS = [
3
+ "react",
4
+ "react-dom",
5
+ "react-dom/client",
6
+ "react-dom/server",
7
+ "react/jsx-runtime",
8
+ "react/jsx-dev-runtime"
9
+ ];
10
+ const DEDUPE = ["react", "react-dom"];
11
+ return {
12
+ name: "vite-plugin-qwik-react",
13
+ config() {
14
+ return {
15
+ resolve: { dedupe: DEDUPE },
16
+ optimizeDeps: { include: OPTIMIZE_DEPS }
17
+ };
18
+ }
19
+ };
27
20
  }
28
- export {
29
- qwikReact
30
- };
21
+ export { qwikReact };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@qwik.dev/react",
3
3
  "description": "Qwik React allows adding React components into existing Qwik application",
4
- "version": "2.0.0-beta.39",
4
+ "version": "2.0.0-beta.40",
5
5
  "bugs": "https://github.com/QwikDev/qwik/issues",
6
6
  "devDependencies": {
7
7
  "@types/react": "19.2.14",
@@ -9,8 +9,8 @@
9
9
  "react": "19.2.4",
10
10
  "react-dom": "19.2.4",
11
11
  "typescript": "5.9.3",
12
- "vite": "7.3.5",
13
- "@qwik.dev/core": "2.0.0-beta.39"
12
+ "vite": "8.2.1",
13
+ "@qwik.dev/core": "2.0.0-beta.40"
14
14
  },
15
15
  "engines": {
16
16
  "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -37,8 +37,8 @@
37
37
  "@types/react-dom": "^18",
38
38
  "react": "^18",
39
39
  "react-dom": "^18",
40
- "vite": ">=6 <9",
41
- "@qwik.dev/core": "^2.0.0-beta.39"
40
+ "vite": ">=8 <9",
41
+ "@qwik.dev/core": "^2.0.0-beta.40"
42
42
  },
43
43
  "publishConfig": {
44
44
  "access": "public"