@qwik.dev/react 2.0.0-beta.43 → 2.0.0-beta.47

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 (3) hide show
  1. package/lib/index.qwik.mjs +81 -75
  2. package/lib/q-manifest.json +3 -3
  3. package/package.json +4 -4
package/lib/index.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
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";
1
+ import { RenderOnce, SkipRender, Slot, _capturesObj, _getConstProps, _getVarProps, _jsxSorted, _jsxSplit, _wrapProp, componentQrl, implicit$FirstArg, inlinedQrl, isBrowser, isServer, jsx, noSerialize, useOn, useOnDocument, useSignal, useStore, useStylesScopedQrl, useTaskQrl } from "@qwik.dev/core";
2
2
  import { Fragment } from "@qwik.dev/core/jsx-runtime";
3
3
  import { SSRComment, SSRRaw, SSRStream, _addProjection, _getContextContainer, _getContextHostElement, _removeProjection, _setProjectionTarget, _updateProjectionProps } from "@qwik.dev/core/internal";
4
4
  import { createRoot, hydrateRoot } from "react-dom/client";
@@ -37,6 +37,27 @@ function _defineProperty(e, r, t) {
37
37
  }
38
38
  var SlotCtx = createContext({ scopeId: "" });
39
39
  var QwikProjectionCtx = createContext(null);
40
+ function main(slotEl, scopeId, RootCmp, props, projectionState) {
41
+ return mainExactProps(slotEl, scopeId, RootCmp, getReactProps(props), projectionState);
42
+ }
43
+ function mainExactProps(slotEl, scopeId, RootCmp, props, projectionState) {
44
+ let tree = createElement(SlotCtx.Provider, {
45
+ value: {
46
+ el: slotEl,
47
+ scopeId,
48
+ attachedEl: void 0
49
+ },
50
+ children: createElement(RootCmp, {
51
+ ...props,
52
+ children: createElement(SlotElement, null)
53
+ })
54
+ });
55
+ if (projectionState) tree = createElement(QwikProjectionCtx.Provider, {
56
+ value: projectionState,
57
+ children: tree
58
+ });
59
+ return tree;
60
+ }
40
61
  var SlotElement = class extends Component {
41
62
  constructor(..._args) {
42
63
  super(..._args);
@@ -46,12 +67,12 @@ var SlotElement = class extends Component {
46
67
  return false;
47
68
  }
48
69
  componentDidMount() {
49
- const slotC = this.slotC.current;
50
- if (slotC) {
70
+ const slotC1 = this.slotC.current;
71
+ if (slotC1) {
51
72
  const { attachedEl, el } = this.context;
52
73
  if (el) {
53
- if (!attachedEl) slotC.appendChild(el);
54
- else if (attachedEl !== slotC) throw new Error("already attached");
74
+ if (!attachedEl) slotC1.appendChild(el);
75
+ else if (attachedEl !== slotC1) throw new Error("already attached");
55
76
  }
56
77
  }
57
78
  }
@@ -65,28 +86,27 @@ var SlotElement = class extends Component {
65
86
  }
66
87
  };
67
88
  _defineProperty(SlotElement, "contextType", SlotCtx);
68
- function mainExactProps(slotEl, scopeId, RootCmp, props, projectionState) {
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
- })
89
+ var getReactProps = (props) => {
90
+ const obj = {};
91
+ Object.keys(props).forEach((key) => {
92
+ if (!key.startsWith("client:") && !key.startsWith("qwik:") && !key.startsWith(HOST_PREFIX)) {
93
+ const normalizedKey = key.endsWith("$") ? key.slice(0, -1) : key;
94
+ obj[normalizedKey] = props[key];
95
+ }
79
96
  });
80
- if (projectionState) tree = createElement(QwikProjectionCtx.Provider, {
81
- value: projectionState,
82
- children: tree
97
+ return obj;
98
+ };
99
+ var getHostProps = (props) => {
100
+ const obj = {};
101
+ Object.keys(props).forEach((key) => {
102
+ if (key.startsWith(HOST_PREFIX)) obj[key.slice(HOST_PREFIX.length)] = props[key];
83
103
  });
84
- return tree;
85
- }
104
+ return obj;
105
+ };
86
106
  var useWakeupSignal = (props, opts = {}) => {
87
107
  const signal = useSignal(false);
88
108
  const activate = /*#__PURE__*/ inlinedQrl(() => {
89
- const signal = _captures[0];
109
+ let signal = _capturesObj._[0];
90
110
  return signal.value = true;
91
111
  }, "useWakeupSignal_activate_bbwdFkXhIMU", [signal]);
92
112
  const clientOnly = !!(props["client:only"] || props["qwik:only"] || opts?.clientOnly);
@@ -110,26 +130,6 @@ var useWakeupSignal = (props, opts = {}) => {
110
130
  ];
111
131
  };
112
132
  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;
122
- };
123
- function main(slotEl, scopeId, RootCmp, props, projectionState) {
124
- return mainExactProps(slotEl, scopeId, RootCmp, getReactProps(props), projectionState);
125
- }
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;
132
- };
133
133
  var _ssrProjectionRegistry = null;
134
134
  function setSSRProjectionRegistry(registry) {
135
135
  _ssrProjectionRegistry = registry;
@@ -176,37 +176,38 @@ async function renderFromServer(Host, reactCmp$, scopeId, props, ref, slotRef, h
176
176
  const segments = splitHtmlAtMarkers(html);
177
177
  return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSplit(Host, {
178
178
  ref,
179
- ...getHostProps(props)
179
+ ..._getVarProps(getHostProps(props)),
180
+ ..._getConstProps(getHostProps(props))
180
181
  }, 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");
182
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:ignore" }, null, 3, "30_0");
183
+ for (const segment of segments) if (segment.type === "html") yield /*#__PURE__*/ _jsxSorted(SSRRaw, null, { data: _wrapProp(segment, "content") }, null, 3, "30_1");
183
184
  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");
185
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container-island" }, null, 3, "30_2");
186
+ yield /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "30_3"), 1, "30_4");
187
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container-island" }, null, 3, "30_5");
187
188
  } else if (segment.type === "proj") {
188
189
  const entry = registry.entries.get(segment.slotName);
189
190
  if (entry) {
190
- yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container-island" }, null, 3, "cl_6");
191
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container-island" }, null, 3, "30_6");
191
192
  const QwikComp = await entry.qrl.resolve();
192
193
  yield jsx(QwikComp, entry.props);
193
- yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container-island" }, null, 3, "cl_7");
194
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container-island" }, null, 3, "30_7");
194
195
  }
195
196
  }
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");
197
+ yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:ignore" }, null, 3, "30_8");
198
+ }, 3, "30_9"), 0, "30_10"), !hasSlot && /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "30_11"), 1, "30_12")], 1, "30_13");
198
199
  }
199
200
  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");
201
+ /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container=html" }, null, 3, "30_14"),
202
+ /*#__PURE__*/ _jsxSorted(SSRRaw, { data: html }, null, null, 3, "30_15"),
203
+ /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container" }, null, 3, "30_16")
204
+ ], 1, "30_17"), /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "30_18"), 1, null)], 1, "30_19");
204
205
  }
205
206
  }
206
207
  function qwikifyQrl(reactCmp$, opts) {
207
208
  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"));
209
+ let opts = _capturesObj._[0], reactCmp$ = _capturesObj._[1];
210
+ const { scopeId } = useStylesScopedQrl(/*#__PURE__*/ inlinedQrl(`q-slot{display:none} q-slotc,q-slotc>q-slot{display:contents}`, "qwikifyQrl_component_useStylesScoped_ppvg9vpFqsY"));
210
211
  const hostRef = useSignal();
211
212
  const slotRef = useSignal();
212
213
  const internalState = useSignal();
@@ -214,7 +215,7 @@ function qwikifyQrl(reactCmp$, opts) {
214
215
  const hydrationKeys = useStore({});
215
216
  const TagName = opts?.tagName ?? "qwik-react";
216
217
  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
+ let hostRef = _capturesObj._[0], hydrationKeys = _capturesObj._[1], internalState = _capturesObj._[2], isClientOnly = _capturesObj._[3], props = _capturesObj._[4], reactCmp$ = _capturesObj._[5], scopeId = _capturesObj._[6], signal = _capturesObj._[7], slotRef = _capturesObj._[8];
218
219
  const trackedProps = track(() => ({ ...props }));
219
220
  track(signal);
220
221
  if (!isBrowser) return;
@@ -226,7 +227,7 @@ function qwikifyQrl(reactCmp$, opts) {
226
227
  container
227
228
  };
228
229
  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
+ if (internalState.value.root) internalState.value.root.render(main(slotRef.value, scopeId, internalState.value.cmp, trackedProps, internalState.value.projectionState));
230
231
  } else {
231
232
  let root = void 0;
232
233
  const Cmp = await reactCmp$.resolve();
@@ -234,9 +235,9 @@ function qwikifyQrl(reactCmp$, opts) {
234
235
  if (hostElement) {
235
236
  if (isClientOnly) root = createRoot(hostElement);
236
237
  else root = flushSync(() => {
237
- return hydrateRoot(hostElement, mainExactProps(slotRef.value, stylesscoped$.scopeId, Cmp, hydrationKeys, projectionState));
238
+ return hydrateRoot(hostElement, mainExactProps(slotRef.value, scopeId, Cmp, hydrationKeys, projectionState));
238
239
  });
239
- if (isClientOnly || signal.value === false) root.render(main(slotRef.value, stylesscoped$.scopeId, Cmp, trackedProps, projectionState));
240
+ if (isClientOnly || signal.value === false) root.render(main(slotRef.value, scopeId, Cmp, trackedProps, projectionState));
240
241
  }
241
242
  internalState.value = noSerialize({
242
243
  cmp: Cmp,
@@ -251,12 +252,12 @@ function qwikifyQrl(reactCmp$, opts) {
251
252
  isClientOnly,
252
253
  props,
253
254
  reactCmp$,
255
+ scopeId,
254
256
  signal,
255
- slotRef,
256
- stylesscoped$
257
+ slotRef
257
258
  ]));
258
259
  useTaskQrl(/*#__PURE__*/ inlinedQrl(({ track, cleanup }) => {
259
- const internalState = _captures[0], signal = _captures[1];
260
+ let internalState = _capturesObj._[0], signal = _capturesObj._[1];
260
261
  track(signal);
261
262
  if (isBrowser) cleanup(() => {
262
263
  const root = internalState.value?.root;
@@ -264,16 +265,19 @@ function qwikifyQrl(reactCmp$, opts) {
264
265
  });
265
266
  }, "qwikifyQrl_component_useTask_1_mwaGrLCLc2w", [internalState, signal]));
266
267
  if (isServer && !isClientOnly) {
267
- const jsx = renderFromServer(TagName, reactCmp$, stylesscoped$.scopeId, props, hostRef, slotRef, hydrationKeys);
268
+ const jsx = renderFromServer(TagName, reactCmp$, scopeId, props, hostRef, slotRef, hydrationKeys);
268
269
  return /*#__PURE__*/ _jsxSorted(RenderOnce, null, null, jsx, 1, 2);
269
270
  }
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");
271
+ return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSplit(TagName, { ..._getVarProps(getHostProps(props)) }, {
272
+ ..._getConstProps(getHostProps(props)),
273
+ ref: (el) => {
274
+ if (isBrowser) queueMicrotask(() => {
275
+ const internalData = internalState.value;
276
+ if (internalData && !internalData.root) (internalData.root = createRoot(el)).render(main(slotRef.value, scopeId, internalData.cmp, props, internalData.projectionState));
277
+ });
278
+ else hostRef.value = el;
279
+ }
280
+ }, SkipRender, 0, "Wy_0"), /*#__PURE__*/ _jsxSorted("q-slot", null, { ref: slotRef }, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "Wy_1"), 1, null)], 1, "Wy_2");
277
281
  }, "qwikifyQrl_component_5bB3apdeFTY", [opts, reactCmp$]));
278
282
  }
279
283
  var qwikify$ = /*#__PURE__*/ implicit$FirstArg(qwikifyQrl);
@@ -293,7 +297,8 @@ var slotCounter = 0;
293
297
  *
294
298
  * @param qwikCompQrl - A QRL wrapping a Qwik component (created with `component$`)
295
299
  * @returns A React component that renders the Qwik component
296
- */ function reactifyQrl(qwikCompQrl) {
300
+ */
301
+ function reactifyQrl(qwikCompQrl) {
297
302
  class QwikInReact extends Component {
298
303
  constructor(..._args) {
299
304
  super(..._args);
@@ -399,5 +404,6 @@ var slotCounter = 0;
399
404
  *
400
405
  * @param qwikComp - A Qwik component (created with `component$`)
401
406
  * @returns A React component that renders the Qwik component
402
- */ var reactify$ = /*#__PURE__*/ implicit$FirstArg(reactifyQrl);
407
+ */
408
+ var reactify$ = /*#__PURE__*/ implicit$FirstArg(reactifyQrl);
403
409
  export { qwikify$, qwikifyQrl, reactify$, reactifyQrl };
package/lib/q-manifest.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": "1",
3
- "manifestHash": "4qq332",
3
+ "manifestHash": "l4b9vw",
4
4
  "options": {
5
5
  "target": "lib",
6
6
  "buildMode": "development",
@@ -13,8 +13,8 @@
13
13
  "mapping": {},
14
14
  "bundles": {
15
15
  "../index.qwik.mjs": {
16
- "size": 16446,
17
- "total": 16446,
16
+ "size": 16591,
17
+ "total": 16591,
18
18
  "origins": [
19
19
  "src/index.qwik.ts",
20
20
  "src/react/client.tsx",
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.43",
4
+ "version": "2.0.0-beta.47",
5
5
  "bugs": "https://github.com/QwikDev/qwik/issues",
6
6
  "devDependencies": {
7
7
  "@types/react": "19.2.14",
@@ -10,7 +10,7 @@
10
10
  "react-dom": "19.2.4",
11
11
  "typescript": "5.9.3",
12
12
  "vite": "8.2.1",
13
- "@qwik.dev/core": "2.0.0-beta.43"
13
+ "@qwik.dev/core": "2.0.0-beta.47"
14
14
  },
15
15
  "engines": {
16
16
  "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -38,7 +38,7 @@
38
38
  "react": "^18",
39
39
  "react-dom": "^18",
40
40
  "vite": ">=8 <9",
41
- "@qwik.dev/core": "2.0.0-beta.43"
41
+ "@qwik.dev/core": "2.0.0-beta.47"
42
42
  },
43
43
  "publishConfig": {
44
44
  "access": "public"
@@ -64,7 +64,7 @@
64
64
  "fmt.check": "prettier --check .",
65
65
  "lint": "eslint \"src/**/*.ts*\"",
66
66
  "lint.fix": "eslint --fix \"src/**/*.ts*\"",
67
- "release": "pnpm run -w build.local && pnpm publish",
67
+ "release": "pnpm run -w build.full && pnpm publish",
68
68
  "start": "npm run dev",
69
69
  "typecheck": "tsc --noEmit"
70
70
  }