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

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-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";
+import { RenderOnce, SkipRender, Slot, _captures, _getConstProps, _getVarProps, _jsxSorted, _jsxSplit, _wrapProp, componentQrl, implicit$FirstArg, inlinedQrl, isBrowser, isServer, jsx, noSerialize, useOn, useOnDocument, useSignal, useStore, useStylesScopedQrl, useTaskQrl } from "@qwik.dev/core";
 import { Fragment } from "@qwik.dev/core/jsx-runtime";
 import { SSRComment, SSRRaw, SSRStream, _addProjection, _getContextContainer, _getContextHostElement, _removeProjection, _setProjectionTarget, _updateProjectionProps } from "@qwik.dev/core/internal";
 import { createRoot, hydrateRoot } from "react-dom/client";
@@ -37,6 +37,27 @@ function _defineProperty(e, r, t) {
 }
 var SlotCtx = createContext({ scopeId: "" });
 var QwikProjectionCtx = createContext(null);
+function main(slotEl, scopeId, RootCmp, props, projectionState) {
+	return mainExactProps(slotEl, scopeId, RootCmp, getReactProps(props), projectionState);
+}
+function mainExactProps(slotEl, scopeId, RootCmp, props, projectionState) {
+	let tree = createElement(SlotCtx.Provider, {
+		value: {
+			el: slotEl,
+			scopeId,
+			attachedEl: void 0
+		},
+		children: createElement(RootCmp, {
+			...props,
+			children: createElement(SlotElement, null)
+		})
+	});
+	if (projectionState) tree = createElement(QwikProjectionCtx.Provider, {
+		value: projectionState,
+		children: tree
+	});
+	return tree;
+}
 var SlotElement = class extends Component {
 	constructor(..._args) {
 		super(..._args);
@@ -46,12 +67,12 @@ var SlotElement = class extends Component {
 		return false;
 	}
 	componentDidMount() {
-		const slotC = this.slotC.current;
-		if (slotC) {
+		const slotC1 = this.slotC.current;
+		if (slotC1) {
 			const { attachedEl, el } = this.context;
 			if (el) {
-				if (!attachedEl) slotC.appendChild(el);
-				else if (attachedEl !== slotC) throw new Error("already attached");
+				if (!attachedEl) slotC1.appendChild(el);
+				else if (attachedEl !== slotC1) throw new Error("already attached");
 			}
 		}
 	}
@@ -65,24 +86,23 @@ var SlotElement = class extends Component {
 	}
 };
 _defineProperty(SlotElement, "contextType", SlotCtx);
-function mainExactProps(slotEl, scopeId, RootCmp, props, projectionState) {
-	let tree = createElement(SlotCtx.Provider, {
-		value: {
-			el: slotEl,
-			scopeId,
-			attachedEl: void 0
-		},
-		children: createElement(RootCmp, {
-			...props,
-			children: createElement(SlotElement, null)
-		})
+var getReactProps = (props) => {
+	const obj = {};
+	Object.keys(props).forEach((key) => {
+		if (!key.startsWith("client:") && !key.startsWith("qwik:") && !key.startsWith(HOST_PREFIX)) {
+			const normalizedKey = key.endsWith("$") ? key.slice(0, -1) : key;
+			obj[normalizedKey] = props[key];
+		}
 	});
-	if (projectionState) tree = createElement(QwikProjectionCtx.Provider, {
-		value: projectionState,
-		children: tree
+	return obj;
+};
+var getHostProps = (props) => {
+	const obj = {};
+	Object.keys(props).forEach((key) => {
+		if (key.startsWith(HOST_PREFIX)) obj[key.slice(HOST_PREFIX.length)] = props[key];
 	});
-	return tree;
-}
+	return obj;
+};
 var useWakeupSignal = (props, opts = {}) => {
 	const signal = useSignal(false);
 	const activate = /*#__PURE__*/ inlinedQrl(() => {
@@ -110,26 +130,6 @@ var useWakeupSignal = (props, opts = {}) => {
 	];
 };
 var HOST_PREFIX = "host:";
-var getReactProps = (props) => {
-	const obj = {};
-	Object.keys(props).forEach((key) => {
-		if (!key.startsWith("client:") && !key.startsWith("qwik:") && !key.startsWith(HOST_PREFIX)) {
-			const normalizedKey = key.endsWith("$") ? key.slice(0, -1) : key;
-			obj[normalizedKey] = props[key];
-		}
-	});
-	return obj;
-};
-function main(slotEl, scopeId, RootCmp, props, projectionState) {
-	return mainExactProps(slotEl, scopeId, RootCmp, getReactProps(props), projectionState);
-}
-var getHostProps = (props) => {
-	const obj = {};
-	Object.keys(props).forEach((key) => {
-		if (key.startsWith(HOST_PREFIX)) obj[key.slice(5)] = props[key];
-	});
-	return obj;
-};
 var _ssrProjectionRegistry = null;
 function setSSRProjectionRegistry(registry) {
 	_ssrProjectionRegistry = registry;
@@ -176,37 +176,38 @@ async function renderFromServer(Host, reactCmp$, scopeId, props, ref, slotRef, h
 			const segments = splitHtmlAtMarkers(html);
 			return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSplit(Host, {
 				ref,
-				...getHostProps(props)
+				..._getVarProps(getHostProps(props)),
+				..._getConstProps(getHostProps(props))
 			}, null, /*#__PURE__*/ _jsxSorted(SSRStream, null, null, async function* () {
-				yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:ignore" }, null, 3, "cl_0");
-				for (const segment of segments) if (segment.type === "html") yield /*#__PURE__*/ _jsxSorted(SSRRaw, { data: _wrapProp(segment, "content") }, null, null, 3, "cl_1");
+				yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:ignore" }, null, 3, "30_0");
+				for (const segment of segments) if (segment.type === "html") yield /*#__PURE__*/ _jsxSorted(SSRRaw, null, { data: _wrapProp(segment, "content") }, null, 3, "30_1");
 				else if (segment.type === "slot") {
-					yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container-island" }, null, 3, "cl_2");
-					yield /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "cl_3"), 1, "cl_4");
-					yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container-island" }, null, 3, "cl_5");
+					yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container-island" }, null, 3, "30_2");
+					yield /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "30_3"), 1, "30_4");
+					yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container-island" }, null, 3, "30_5");
 				} else if (segment.type === "proj") {
 					const entry = registry.entries.get(segment.slotName);
 					if (entry) {
-						yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container-island" }, null, 3, "cl_6");
+						yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container-island" }, null, 3, "30_6");
 						const QwikComp = await entry.qrl.resolve();
 						yield jsx(QwikComp, entry.props);
-						yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container-island" }, null, 3, "cl_7");
+						yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container-island" }, null, 3, "30_7");
 					}
 				}
-				yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:ignore" }, null, 3, "cl_8");
-			}, 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");
+				yield /*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:ignore" }, null, 3, "30_8");
+			}, 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");
 		}
 		return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSorted(Host, { ref }, null, [
-			/*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container=html" }, null, 3, "cl_14"),
-			/*#__PURE__*/ _jsxSorted(SSRRaw, { data: html }, null, null, 3, "cl_15"),
-			/*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container" }, null, 3, "cl_16")
-		], 1, "cl_17"), /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "cl_18"), 1, null)], 1, "cl_19");
+			/*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "q:container=html" }, null, 3, "30_14"),
+			/*#__PURE__*/ _jsxSorted(SSRRaw, { data: html }, null, null, 3, "30_15"),
+			/*#__PURE__*/ _jsxSorted(SSRComment, null, { data: "/q:container" }, null, 3, "30_16")
+		], 1, "30_17"), /*#__PURE__*/ _jsxSorted("q-slot", { ref: slotRef }, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "30_18"), 1, null)], 1, "30_19");
 	}
 }
 function qwikifyQrl(reactCmp$, opts) {
 	return /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
 		const opts = _captures[0], reactCmp$ = _captures[1];
-		const stylesscoped$ = useStylesScopedQrl(/*#__PURE__*/ inlinedQrl(`q-slot{display:none} q-slotc,q-slotc>q-slot{display:contents}`, "qwikifyQrl_component_stylesscoped_useStylesScoped_5NfcSvFabPo"));
+		const { scopeId } = useStylesScopedQrl(/*#__PURE__*/ inlinedQrl(`q-slot{display:none} q-slotc,q-slotc>q-slot{display:contents}`, "qwikifyQrl_component_useStylesScoped_ppvg9vpFqsY"));
 		const hostRef = useSignal();
 		const slotRef = useSignal();
 		const internalState = useSignal();
@@ -214,7 +215,7 @@ function qwikifyQrl(reactCmp$, opts) {
 		const hydrationKeys = useStore({});
 		const TagName = opts?.tagName ?? "qwik-react";
 		useTaskQrl(/*#__PURE__*/ inlinedQrl(async ({ track }) => {
-			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];
+			const hostRef = _captures[0], hydrationKeys = _captures[1], internalState = _captures[2], isClientOnly = _captures[3], props = _captures[4], reactCmp$ = _captures[5], scopeId = _captures[6], signal = _captures[7], slotRef = _captures[8];
 			const trackedProps = track(() => ({ ...props }));
 			track(signal);
 			if (!isBrowser) return;
@@ -226,7 +227,7 @@ function qwikifyQrl(reactCmp$, opts) {
 				container
 			};
 			if (internalState.value) {
-				if (internalState.value.root) internalState.value.root.render(main(slotRef.value, stylesscoped$.scopeId, internalState.value.cmp, trackedProps, internalState.value.projectionState));
+				if (internalState.value.root) internalState.value.root.render(main(slotRef.value, scopeId, internalState.value.cmp, trackedProps, internalState.value.projectionState));
 			} else {
 				let root = void 0;
 				const Cmp = await reactCmp$.resolve();
@@ -234,9 +235,9 @@ function qwikifyQrl(reactCmp$, opts) {
 				if (hostElement) {
 					if (isClientOnly) root = createRoot(hostElement);
 					else root = flushSync(() => {
-						return hydrateRoot(hostElement, mainExactProps(slotRef.value, stylesscoped$.scopeId, Cmp, hydrationKeys, projectionState));
+						return hydrateRoot(hostElement, mainExactProps(slotRef.value, scopeId, Cmp, hydrationKeys, projectionState));
 					});
-					if (isClientOnly || signal.value === false) root.render(main(slotRef.value, stylesscoped$.scopeId, Cmp, trackedProps, projectionState));
+					if (isClientOnly || signal.value === false) root.render(main(slotRef.value, scopeId, Cmp, trackedProps, projectionState));
 				}
 				internalState.value = noSerialize({
 					cmp: Cmp,
@@ -251,9 +252,9 @@ function qwikifyQrl(reactCmp$, opts) {
 			isClientOnly,
 			props,
 			reactCmp$,
+			scopeId,
 			signal,
-			slotRef,
-			stylesscoped$
+			slotRef
 		]));
 		useTaskQrl(/*#__PURE__*/ inlinedQrl(({ track, cleanup }) => {
 			const internalState = _captures[0], signal = _captures[1];
@@ -264,16 +265,19 @@ function qwikifyQrl(reactCmp$, opts) {
 			});
 		}, "qwikifyQrl_component_useTask_1_mwaGrLCLc2w", [internalState, signal]));
 		if (isServer && !isClientOnly) {
-			const jsx = renderFromServer(TagName, reactCmp$, stylesscoped$.scopeId, props, hostRef, slotRef, hydrationKeys);
+			const jsx = renderFromServer(TagName, reactCmp$, scopeId, props, hostRef, slotRef, hydrationKeys);
 			return /*#__PURE__*/ _jsxSorted(RenderOnce, null, null, jsx, 1, 2);
 		}
-		return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSplit(TagName, { ...getHostProps(props) }, { ref: (el) => {
-			if (isBrowser) queueMicrotask(() => {
-				const internalData = internalState.value;
-				if (internalData && !internalData.root) (internalData.root = createRoot(el)).render(main(slotRef.value, stylesscoped$.scopeId, internalData.cmp, props, internalData.projectionState));
-			});
-			else hostRef.value = el;
-		} }, 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");
+		return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSplit(TagName, { ..._getVarProps(getHostProps(props)) }, {
+			..._getConstProps(getHostProps(props)),
+			ref: (el) => {
+				if (isBrowser) queueMicrotask(() => {
+					const internalData = internalState.value;
+					if (internalData && !internalData.root) (internalData.root = createRoot(el)).render(main(slotRef.value, scopeId, internalData.cmp, props, internalData.projectionState));
+				});
+				else hostRef.value = el;
+			}
+		}, 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");
 	}, "qwikifyQrl_component_5bB3apdeFTY", [opts, reactCmp$]));
 }
 var qwikify$ = /*#__PURE__*/ implicit$FirstArg(qwikifyQrl);
@@ -293,7 +297,8 @@ var slotCounter = 0;
 *
 * @param qwikCompQrl - A QRL wrapping a Qwik component (created with `component$`)
 * @returns A React component that renders the Qwik component
-*/ function reactifyQrl(qwikCompQrl) {
+*/
+function reactifyQrl(qwikCompQrl) {
 	class QwikInReact extends Component {
 		constructor(..._args) {
 			super(..._args);
@@ -399,5 +404,6 @@ var slotCounter = 0;
 *
 * @param qwikComp - A Qwik component (created with `component$`)
 * @returns A React component that renders the Qwik component
-*/ var reactify$ = /*#__PURE__*/ implicit$FirstArg(reactifyQrl);
+*/
+var reactify$ = /*#__PURE__*/ implicit$FirstArg(reactifyQrl);
 export { qwikify$, qwikifyQrl, reactify$, reactifyQrl };

package/lib/q-manifest.json

@@ -1,6 +1,6 @@
 {
 	"version": "1",
-	"manifestHash": "4qq332",
+	"manifestHash": "a4wqn0",
 	"options": {
 		"target": "lib",
 		"buildMode": "development",
@@ -13,8 +13,8 @@
 	"mapping": {},
 	"bundles": {
 		"../index.qwik.mjs": {
-			"size": 16446,
-			"total": 16446,
+			"size": 16526,
+			"total": 16526,
 			"origins": [
 				"src/index.qwik.ts",
 				"src/react/client.tsx",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qwik.dev/react",
   "description": "Qwik React allows adding React components into existing Qwik application",
-  "version": "2.0.0-beta.43",
+  "version": "2.0.0-beta.45",
   "bugs": "https://github.com/QwikDev/qwik/issues",
   "devDependencies": {
     "@types/react": "19.2.14",
@@ -10,7 +10,7 @@
     "react-dom": "19.2.4",
     "typescript": "5.9.3",
     "vite": "8.2.1",
-    "@qwik.dev/core": "2.0.0-beta.43"
+    "@qwik.dev/core": "2.0.0-beta.45"
   },
   "engines": {
     "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -38,7 +38,7 @@
     "react": "^18",
     "react-dom": "^18",
     "vite": ">=8 <9",
-    "@qwik.dev/core": "2.0.0-beta.43"
+    "@qwik.dev/core": "2.0.0-beta.45"
   },
   "publishConfig": {
     "access": "public"
@@ -64,7 +64,7 @@
     "fmt.check": "prettier --check .",
     "lint": "eslint \"src/**/*.ts*\"",
     "lint.fix": "eslint --fix \"src/**/*.ts*\"",
-    "release": "pnpm run -w build.local && pnpm publish",
+    "release": "pnpm run -w build.full && pnpm publish",
     "start": "npm run dev",
     "typecheck": "tsc --noEmit"
   }