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

package/lib/assets/BqrDAOEV-bundle-graph.json

@@ -0,0 +1 @@
+[]

package/lib/index.qwik.mjs

@@ -1,264 +1,403 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsx, jsxs, Fragment } from "@qwik.dev/core/jsx-runtime";
-import { useSignal, $, isServer, useOn, useOnDocument, Slot, implicit$FirstArg, component$, useStylesScoped$, useStore, useTask$, isBrowser, noSerialize, RenderOnce, SkipRender } from "@qwik.dev/core";
+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 { 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";
 import { flushSync } from "react-dom";
-import { SSRStream, SSRComment, SSRRaw } from "@qwik.dev/core/internal";
 import { renderToString } from "react-dom/server";
-import { createContext, createElement, Component, createRef } from "react";
-const SlotCtx = createContext({
-  scopeId: ""
-});
-function main(slotEl, scopeId, RootCmp, props) {
-  const newProps = getReactProps(props);
-  return mainExactProps(slotEl, scopeId, RootCmp, newProps);
+import { Component, createContext, createElement, createRef } from "react";
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
 }
-function mainExactProps(slotEl, scopeId, RootCmp, props) {
-  return createElement(SlotCtx.Provider, {
-    value: {
-      el: slotEl,
-      scopeId,
-      attachedEl: void 0
-    },
-    children: createElement(RootCmp, {
-      ...props,
-      children: createElement(SlotElement, null)
-    })
-  });
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
 }
-class SlotElement extends Component {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "slotC", createRef());
-  }
-  shouldComponentUpdate() {
-    return false;
-  }
-  componentDidMount() {
-    const slotC = this.slotC.current;
-    if (slotC) {
-      const { attachedEl, el } = this.context;
-      if (el) {
-        if (!attachedEl) {
-          slotC.appendChild(el);
-        } else if (attachedEl !== slotC) {
-          throw new Error("already attached");
-        }
-      }
-    }
-  }
-  render() {
-    return createElement("q-slotc", {
-      class: this.context.scopeId,
-      suppressHydrationWarning: true,
-      dangerouslySetInnerHTML: {
-        __html: "<!--SLOT-->"
-      },
-      ref: this.slotC
-    });
-  }
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
 }
-__publicField(SlotElement, "contextType", SlotCtx);
-const 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 _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+var SlotCtx = createContext({ scopeId: "" });
+var QwikProjectionCtx = createContext(null);
+var SlotElement = class extends Component {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "slotC", createRef());
+	}
+	shouldComponentUpdate() {
+		return false;
+	}
+	componentDidMount() {
+		const slotC = this.slotC.current;
+		if (slotC) {
+			const { attachedEl, el } = this.context;
+			if (el) {
+				if (!attachedEl) slotC.appendChild(el);
+				else if (attachedEl !== slotC) throw new Error("already attached");
+			}
+		}
+	}
+	render() {
+		return createElement("q-slotc", {
+			class: this.context.scopeId,
+			suppressHydrationWarning: true,
+			dangerouslySetInnerHTML: { __html: "<!--SLOT-->" },
+			ref: this.slotC
+		});
+	}
 };
-const getHostProps = (props) => {
-  const obj = {};
-  Object.keys(props).forEach((key) => {
-    if (key.startsWith(HOST_PREFIX)) {
-      obj[key.slice(HOST_PREFIX.length)] = props[key];
-    }
-  });
-  return obj;
+_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)
+		})
+	});
+	if (projectionState) tree = createElement(QwikProjectionCtx.Provider, {
+		value: projectionState,
+		children: tree
+	});
+	return tree;
+}
+var useWakeupSignal = (props, opts = {}) => {
+	const signal = useSignal(false);
+	const activate = /*#__PURE__*/ inlinedQrl(() => {
+		const signal = _captures[0];
+		return signal.value = true;
+	}, "useWakeupSignal_activate_bbwdFkXhIMU", [signal]);
+	const clientOnly = !!(props["client:only"] || props["qwik:only"] || opts?.clientOnly);
+	const clientVisible = props["client:visible"] || props["qwik:visible"] || opts?.eagerness === "visible";
+	const clientIdle = props["client:idle"] || props["qwik:idle"] || opts?.eagerness === "idle";
+	const clientLoad = props["client:load"] || props["qwik:load"] || clientOnly || opts?.eagerness === "load";
+	const clientHover = props["client:hover"] || props["qwik:hover"] || opts?.eagerness === "hover";
+	const clientEvent = props["client:event"] || props["qwik:event"];
+	if (isServer) {
+		if (clientVisible) useOn("qvisible", activate);
+		if (clientIdle) useOnDocument("qidle", activate);
+		if (clientLoad) useOnDocument("qinit", activate);
+		if (clientHover) useOn("mouseover", activate);
+		if (clientEvent) useOn(clientEvent, activate);
+		if (opts?.event) useOn(opts?.event, activate);
+	}
+	return [
+		signal,
+		clientOnly,
+		activate
+	];
 };
-const useWakeupSignal = (props, opts = {}) => {
-  const signal = useSignal(false);
-  const activate = $(() => signal.value = true);
-  const clientOnly = !!(props["client:only"] || props["qwik:only"] || opts?.clientOnly);
-  const clientVisible = props["client:visible"] || props["qwik:visible"] || opts?.eagerness === "visible";
-  const clientIdle = props["client:idle"] || props["qwik:idle"] || opts?.eagerness === "idle";
-  const clientLoad = props["client:load"] || props["qwik:load"] || clientOnly || opts?.eagerness === "load";
-  const clientHover = props["client:hover"] || props["qwik:hover"] || opts?.eagerness === "hover";
-  const clientEvent = props["client:event"] || props["qwik:event"];
-  if (isServer) {
-    if (clientVisible) {
-      useOn("qvisible", activate);
-    }
-    if (clientIdle) {
-      useOnDocument("qidle", activate);
-    }
-    if (clientLoad) {
-      useOnDocument("qinit", activate);
-    }
-    if (clientHover) {
-      useOn("mouseover", activate);
-    }
-    if (clientEvent) {
-      useOn(clientEvent, activate);
-    }
-    if (opts?.event) {
-      useOn(opts?.event, activate);
-    }
-  }
-  return [
-    signal,
-    clientOnly,
-    activate
-  ];
+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;
 };
-const HOST_PREFIX = "host:";
+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;
+}
+function getSSRProjectionRegistry() {
+	return _ssrProjectionRegistry;
+}
+var SLOT_MARKER = "<!--SLOT-->";
+function splitHtmlAtMarkers(html) {
+	const MARKER_RE = /<!--(?:SLOT|QWIK-PROJ:(.*?))-->/g;
+	const segments = [];
+	let lastIndex = 0;
+	let match;
+	while ((match = MARKER_RE.exec(html)) !== null) {
+		if (match.index > lastIndex) segments.push({
+			type: "html",
+			content: html.slice(lastIndex, match.index)
+		});
+		if (match[1] !== void 0) segments.push({
+			type: "proj",
+			slotName: match[1]
+		});
+		else segments.push({ type: "slot" });
+		lastIndex = match.index + match[0].length;
+	}
+	if (lastIndex < html.length) segments.push({
+		type: "html",
+		content: html.slice(lastIndex)
+	});
+	return segments;
+}
 async function renderFromServer(Host, reactCmp$, scopeId, props, ref, slotRef, hydrationProps) {
-  if (isServer) {
-    const Cmp = await reactCmp$.resolve();
-    const newProps = getReactProps(props);
-    Object.assign(hydrationProps, newProps);
-    const html = renderToString(mainExactProps(void 0, scopeId, Cmp, newProps));
-    const index = html.indexOf("<!--SLOT-->");
-    if (index > 0) {
-      const part1 = html.slice(0, index);
-      const part2 = html.slice(index + "<!--SLOT-->".length);
-      return /* @__PURE__ */ jsx(Host, {
-        ref,
-        ...getHostProps(props),
-        children: /* @__PURE__ */ jsx(SSRStream, {
-          children: async function* () {
-            yield /* @__PURE__ */ jsx(SSRComment, {
-              data: "q:ignore"
-            });
-            yield /* @__PURE__ */ jsx(SSRRaw, {
-              data: part1
-            });
-            yield /* @__PURE__ */ jsx(SSRComment, {
-              data: "q:container-island"
-            });
-            yield /* @__PURE__ */ jsx("q-slot", {
-              ref: slotRef,
-              children: /* @__PURE__ */ jsx(Slot, {})
-            });
-            yield /* @__PURE__ */ jsx(SSRComment, {
-              data: "/q:container-island"
-            });
-            yield /* @__PURE__ */ jsx(SSRRaw, {
-              data: part2
-            });
-            yield /* @__PURE__ */ jsx(SSRComment, {
-              data: "/q:ignore"
-            });
-          }
-        })
-      });
-    }
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsxs(Host, {
-          ref,
-          children: [
-            /* @__PURE__ */ jsx(SSRComment, {
-              data: "q:container=html"
-            }),
-            /* @__PURE__ */ jsx(SSRRaw, {
-              data: html
-            }),
-            /* @__PURE__ */ jsx(SSRComment, {
-              data: "/q:container"
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsx("q-slot", {
-          ref: slotRef,
-          children: /* @__PURE__ */ jsx(Slot, {})
-        })
-      ]
-    });
-  }
+	if (isServer) {
+		const Cmp = await reactCmp$.resolve();
+		const newProps = getReactProps(props);
+		Object.assign(hydrationProps, newProps);
+		const registry = { entries: /* @__PURE__ */ new Map() };
+		setSSRProjectionRegistry(registry);
+		const html = renderToString(mainExactProps(void 0, scopeId, Cmp, newProps));
+		setSSRProjectionRegistry(null);
+		const hasSlot = html.includes(SLOT_MARKER);
+		const hasProj = registry.entries.size > 0;
+		if (hasSlot || hasProj) {
+			const segments = splitHtmlAtMarkers(html);
+			return /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSplit(Host, {
+				ref,
+				...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");
+				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");
+				} 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");
+						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: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");
+		}
+		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");
+	}
 }
 function qwikifyQrl(reactCmp$, opts) {
-  return component$((props) => {
-    const { scopeId } = useStylesScoped$(`q-slot{display:none} q-slotc,q-slotc>q-slot{display:contents}`);
-    const hostRef = useSignal();
-    const slotRef = useSignal();
-    const internalState = useSignal();
-    const [signal, isClientOnly] = useWakeupSignal(props, opts);
-    const hydrationKeys = useStore({});
-    const TagName = opts?.tagName ?? "qwik-react";
-    useTask$(async ({ track }) => {
-      const trackedProps = track(() => ({
-        ...props
-      }));
-      track(signal);
-      if (!isBrowser) {
-        return;
-      }
-      if (internalState.value) {
-        if (internalState.value.root) {
-          internalState.value.root.render(main(slotRef.value, scopeId, internalState.value.cmp, trackedProps));
-        }
-      } else {
-        let root = void 0;
-        const Cmp = await reactCmp$.resolve();
-        const hostElement = hostRef.value;
-        if (hostElement) {
-          if (isClientOnly) {
-            root = createRoot(hostElement);
-          } else {
-            root = flushSync(() => {
-              return hydrateRoot(hostElement, mainExactProps(slotRef.value, scopeId, Cmp, hydrationKeys));
-            });
-          }
-          if (isClientOnly || signal.value === false) {
-            root.render(main(slotRef.value, scopeId, Cmp, trackedProps));
-          }
-        }
-        internalState.value = noSerialize({
-          cmp: Cmp,
-          root
-        });
-      }
-    });
-    if (isServer && !isClientOnly) {
-      const jsx$1 = renderFromServer(TagName, reactCmp$, scopeId, props, hostRef, slotRef, hydrationKeys);
-      return /* @__PURE__ */ jsx(RenderOnce, {
-        children: jsx$1
-      }, 2);
-    }
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx(TagName, {
-          ...getHostProps(props),
-          ref: (el) => {
-            if (isBrowser) {
-              queueMicrotask(() => {
-                const internalData = internalState.value;
-                if (internalData && !internalData.root) {
-                  const root = internalData.root = createRoot(el);
-                  root.render(main(slotRef.value, scopeId, internalData.cmp, props));
-                }
-              });
-            } else {
-              hostRef.value = el;
-            }
-          },
-          children: SkipRender
-        }),
-        /* @__PURE__ */ jsx("q-slot", {
-          ref: slotRef,
-          children: /* @__PURE__ */ jsx(Slot, {})
-        })
-      ]
-    });
-  });
+	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 hostRef = useSignal();
+		const slotRef = useSignal();
+		const internalState = useSignal();
+		const [signal, isClientOnly] = useWakeupSignal(props, 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 trackedProps = track(() => ({ ...props }));
+			track(signal);
+			if (!isBrowser) return;
+			let projectionState = null;
+			const container = _getContextContainer();
+			const hostVNode = _getContextHostElement();
+			if (container && hostVNode) projectionState = {
+				parentVNode: hostVNode,
+				container
+			};
+			if (internalState.value) {
+				if (internalState.value.root) internalState.value.root.render(main(slotRef.value, stylesscoped$.scopeId, internalState.value.cmp, trackedProps, internalState.value.projectionState));
+			} else {
+				let root = void 0;
+				const Cmp = await reactCmp$.resolve();
+				const hostElement = hostRef.value;
+				if (hostElement) {
+					if (isClientOnly) root = createRoot(hostElement);
+					else root = flushSync(() => {
+						return hydrateRoot(hostElement, mainExactProps(slotRef.value, stylesscoped$.scopeId, Cmp, hydrationKeys, projectionState));
+					});
+					if (isClientOnly || signal.value === false) root.render(main(slotRef.value, stylesscoped$.scopeId, Cmp, trackedProps, projectionState));
+				}
+				internalState.value = noSerialize({
+					cmp: Cmp,
+					root,
+					projectionState
+				});
+			}
+		}, "qwikifyQrl_component_useTask_JuFeaMCL0P0", [
+			hostRef,
+			hydrationKeys,
+			internalState,
+			isClientOnly,
+			props,
+			reactCmp$,
+			signal,
+			slotRef,
+			stylesscoped$
+		]));
+		useTaskQrl(/*#__PURE__*/ inlinedQrl(({ track, cleanup }) => {
+			const internalState = _captures[0], signal = _captures[1];
+			track(signal);
+			if (isBrowser) cleanup(() => {
+				const root = internalState.value?.root;
+				if (root) queueMicrotask(() => root.unmount());
+			});
+		}, "qwikifyQrl_component_useTask_1_mwaGrLCLc2w", [internalState, signal]));
+		if (isServer && !isClientOnly) {
+			const jsx = renderFromServer(TagName, reactCmp$, stylesscoped$.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");
+	}, "qwikifyQrl_component_5bB3apdeFTY", [opts, reactCmp$]));
 }
-const qwikify$ = /* @__PURE__ */ implicit$FirstArg(qwikifyQrl);
-export {
-  qwikify$,
-  qwikifyQrl
-};
+var qwikify$ = /*#__PURE__*/ implicit$FirstArg(qwikifyQrl);
+var slotCounter = 0;
+/**
+* Creates a React component that renders a Qwik component inside a qwikify$ React tree.
+*
+* This is the QRL form. Use `reactify$` for the convenience form with automatic `$()` wrapping.
+*
+* The returned React component must be rendered inside a `qwikify$()` React tree. It creates a div
+* that Qwik renders into, while React ignores its contents.
+*
+* During SSR, a marker is emitted so that server-render.tsx can render the Qwik component inline
+* inside `q:container-island` comments. On the client, Qwik resumes the SSR content naturally
+* (events, signals, state are all serialized). For pure CSR, `_addProjection` renders from
+* scratch.
+*
+* @param qwikCompQrl - A QRL wrapping a Qwik component (created with `component$`)
+* @returns A React component that renders the Qwik component
+*/ function reactifyQrl(qwikCompQrl) {
+	class QwikInReact extends Component {
+		constructor(..._args) {
+			super(..._args);
+			_defineProperty(this, "slotName", `_rq:${slotCounter++}`);
+			_defineProperty(this, "vnode", null);
+			_defineProperty(this, "divRef", createRef());
+			_defineProperty(this, "mounted", false);
+			_defineProperty(this, "pendingProps", null);
+		}
+		componentDidMount() {
+			this.mounted = true;
+			const projectionState = this.context;
+			if (!projectionState) {
+				if (typeof console !== "undefined") console.warn("reactify$: component must be rendered inside a qwikify$() React tree.");
+				return;
+			}
+			const div = this.divRef.current;
+			if (!div) return;
+			if (div.firstElementChild) return;
+			qwikCompQrl.resolve().then((QwikComp) => {
+				if (!this.mounted) return;
+				const name = QwikComp.displayName || QwikComp.name || "QwikComponent";
+				QwikInReact.displayName = `reactify$(${name})`;
+				const { parentVNode, container } = projectionState;
+				const reactProps = getReactProps(this.pendingProps || this.props);
+				this.vnode = _addProjection(container, parentVNode, qwikCompQrl, reactProps, this.slotName);
+				div.replaceChildren();
+				_setProjectionTarget(this.vnode, div);
+			});
+		}
+		componentWillUnmount() {
+			this.mounted = false;
+			if (this.vnode && this.context) {
+				_removeProjection(this.context.container, this.context.parentVNode, this.vnode, this.slotName);
+				this.vnode = null;
+			}
+		}
+		shouldComponentUpdate(nextProps) {
+			if (this.vnode && this.context) {
+				const reactProps = getReactProps(nextProps);
+				_updateProjectionProps(this.context.container, this.vnode, reactProps);
+			} else this.pendingProps = nextProps;
+			return false;
+		}
+		render() {
+			const registry = getSSRProjectionRegistry();
+			if (registry) {
+				const reactProps = getReactProps(this.props);
+				registry.entries.set(this.slotName, {
+					qrl: qwikCompQrl,
+					props: reactProps
+				});
+				return createElement("div", {
+					"data-qwik-projection": this.slotName,
+					suppressHydrationWarning: true,
+					dangerouslySetInnerHTML: { __html: `<!--QWIK-PROJ:${this.slotName}-->` }
+				});
+			}
+			return createElement("div", {
+				ref: this.divRef,
+				suppressHydrationWarning: true,
+				dangerouslySetInnerHTML: { __html: `<!--QWIK-PROJ:${this.slotName}-->` },
+				"data-qwik-projection": this.slotName
+			});
+		}
+	}
+	_defineProperty(QwikInReact, "contextType", QwikProjectionCtx);
+	QwikInReact.displayName = `reactify$(...)`;
+	return QwikInReact;
+}
+/**
+* Creates a React component that renders a Qwik component inside a qwikify$ React tree.
+*
+* The returned React component must be rendered inside a `qwikify$()` React tree. It creates a div
+* that Qwik renders into, while React ignores its contents.
+*
+* During SSR, the Qwik component is rendered as HTML inside `q:container-island` comments. On the
+* client, the component re-renders via the external projection API.
+*
+* @example
+*
+* ```tsx
+* import { component$ } from '@qwik.dev/core';
+* import { qwikify$, reactify$ } from '@qwik.dev/react';
+*
+* const QwikCounter = component$(() => {
+*   const count = useSignal(0);
+*   return <button onClick$={() => count.value++}>{count.value}</button>;
+* });
+*
+* const ReactCounter = reactify$(QwikCounter);
+*
+* const ReactApp = ({ children }) => (
+*   <div>
+*     <h1>React App</h1>
+*     <ReactCounter />
+*     {children}
+*   </div>
+* );
+*
+* export const QwikifiedApp = qwikify$(ReactApp);
+* ```
+*
+* @param qwikComp - A Qwik component (created with `component$`)
+* @returns A React component that renders the Qwik component
+*/ var reactify$ = /*#__PURE__*/ implicit$FirstArg(reactifyQrl);
+export { qwikify$, qwikifyQrl, reactify$, reactifyQrl };

package/lib/q-manifest.json

@@ -0,0 +1,51 @@
+{
+	"version": "1",
+	"manifestHash": "4qq332",
+	"options": {
+		"target": "lib",
+		"buildMode": "development",
+		"entryStrategy": {
+			"type": "inline"
+		}
+	},
+	"bundleGraphAsset": "assets/BqrDAOEV-bundle-graph.json",
+	"injections": [],
+	"mapping": {},
+	"bundles": {
+		"../index.qwik.mjs": {
+			"size": 16446,
+			"total": 16446,
+			"origins": [
+				"src/index.qwik.ts",
+				"src/react/client.tsx",
+				"src/react/qwikify.tsx",
+				"src/react/reactify.ts",
+				"src/react/server-render.tsx",
+				"src/react/slot.ts"
+			],
+			"interactivity": 0
+		},
+		"../vite.mjs": {
+			"size": 396,
+			"total": 396,
+			"origins": [
+				"src/vite.ts"
+			],
+			"interactivity": 0
+		}
+	},
+	"assets": {
+		"assets/BqrDAOEV-bundle-graph.json": {
+			"name": "bundle-graph.json",
+			"size": 0
+		}
+	},
+	"symbols": {},
+	"platform": {
+		"vite": "",
+		"rollup": "4.23.0",
+		"env": "node",
+		"os": "linux",
+		"node": "24.15.0"
+	}
+}

package/lib/types/index.qwik.d.ts

@@ -1,2 +1,3 @@
 export { qwikify$, qwikifyQrl } from './react/qwikify';
+export { reactify$, reactifyQrl } from './react/reactify';
 export type { QwikifyProps } from './react/types';

package/lib/types/react/reactify.d.ts

@@ -0,0 +1,55 @@
+import { type QRL } from '@qwik.dev/core';
+/**
+ * Creates a React component that renders a Qwik component inside a qwikify$ React tree.
+ *
+ * This is the QRL form. Use `reactify$` for the convenience form with automatic `$()` wrapping.
+ *
+ * The returned React component must be rendered inside a `qwikify$()` React tree. It creates a div
+ * that Qwik renders into, while React ignores its contents.
+ *
+ * During SSR, a marker is emitted so that server-render.tsx can render the Qwik component inline
+ * inside `q:container-island` comments. On the client, Qwik resumes the SSR content naturally
+ * (events, signals, state are all serialized). For pure CSR, `_addProjection` renders from
+ * scratch.
+ *
+ * @param qwikCompQrl - A QRL wrapping a Qwik component (created with `component$`)
+ * @returns A React component that renders the Qwik component
+ */
+export declare function reactifyQrl(qwikCompQrl: QRL<any>): any;
+/**
+ * Creates a React component that renders a Qwik component inside a qwikify$ React tree.
+ *
+ * The returned React component must be rendered inside a `qwikify$()` React tree. It creates a div
+ * that Qwik renders into, while React ignores its contents.
+ *
+ * During SSR, the Qwik component is rendered as HTML inside `q:container-island` comments. On the
+ * client, the component re-renders via the external projection API.
+ *
+ * @example
+ *
+ * ```tsx
+ * import { component$ } from '@qwik.dev/core';
+ * import { qwikify$, reactify$ } from '@qwik.dev/react';
+ *
+ * const QwikCounter = component$(() => {
+ *   const count = useSignal(0);
+ *   return <button onClick$={() => count.value++}>{count.value}</button>;
+ * });
+ *
+ * const ReactCounter = reactify$(QwikCounter);
+ *
+ * const ReactApp = ({ children }) => (
+ *   <div>
+ *     <h1>React App</h1>
+ *     <ReactCounter />
+ *     {children}
+ *   </div>
+ * );
+ *
+ * export const QwikifiedApp = qwikify$(ReactApp);
+ * ```
+ *
+ * @param qwikComp - A Qwik component (created with `component$`)
+ * @returns A React component that renders the Qwik component
+ */
+export declare const reactify$: (qrl: any) => any;

package/lib/types/react/slot.d.ts

@@ -1,4 +1,5 @@
-import { Component } from 'react';
+import { type QRL } from '@qwik.dev/core';
+import { Component, type ReactElement } from 'react';
 import type { QwikifyOptions, QwikifyProps } from './types';
 interface SlotState {
     el?: Element;
@@ -6,12 +7,17 @@ interface SlotState {
     attachedEl?: Element;
 }
 declare const SlotCtx: import("react").Context<SlotState>;
-export declare function main(slotEl: Element | undefined, scopeId: string, RootCmp: any, props: any): import("react").FunctionComponentElement<import("react").ProviderProps<SlotState>>;
-export declare function mainExactProps(slotEl: Element | undefined, scopeId: string, RootCmp: any, props: any): import("react").FunctionComponentElement<import("react").ProviderProps<SlotState>>;
+export interface QwikProjectionState {
+    parentVNode: any;
+    container: any;
+}
+export declare const QwikProjectionCtx: import("react").Context<QwikProjectionState | null>;
+export declare function main(slotEl: Element | undefined, scopeId: string, RootCmp: any, props: any, projectionState?: QwikProjectionState | null): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function mainExactProps(slotEl: Element | undefined, scopeId: string, RootCmp: any, props: any, projectionState?: QwikProjectionState | null): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare class SlotElement extends Component {
     static contextType: import("react").Context<SlotState>;
     context: React.ContextType<typeof SlotCtx>;
-    slotC: import("react").RefObject<Element>;
+    slotC: import("react").RefObject<Element | null>;
     shouldComponentUpdate(): boolean;
     componentDidMount(): void;
     render(): import("react").DOMElement<{
@@ -20,10 +26,19 @@ export declare class SlotElement extends Component {
         dangerouslySetInnerHTML: {
             __html: string;
         };
-        ref: import("react").RefObject<Element>;
+        ref: import("react").RefObject<Element | null>;
     }, Element>;
 }
 export declare const getReactProps: (props: Record<string, any>) => Record<string, any>;
 export declare const getHostProps: (props: Record<string, any>) => Record<string, any>;
-export declare const useWakeupSignal: (props: QwikifyProps<{}>, opts?: QwikifyOptions) => readonly [import("@qwik.dev/core").Signal<boolean>, boolean, import("@qwik.dev/core").QRL<() => true>];
+export declare const useWakeupSignal: (props: QwikifyProps<{}>, opts?: QwikifyOptions) => readonly [import("@qwik.dev/core").Signal<boolean>, boolean, QRL<() => true>];
+export interface SSRProjectionEntry {
+    qrl: QRL<any>;
+    props: Record<string, any>;
+}
+export interface SSRProjectionRegistry {
+    entries: Map<string, SSRProjectionEntry>;
+}
+export declare function setSSRProjectionRegistry(registry: SSRProjectionRegistry | null): void;
+export declare function getSSRProjectionRegistry(): SSRProjectionRegistry | null;
 export {};

package/lib/types/react/types.d.ts

@@ -1,9 +1,11 @@
 import type { QRL, Signal } from '@qwik.dev/core';
 import type { FunctionComponent as ReactFC } from 'react';
 import type { Root } from 'react-dom/client';
+import type { QwikProjectionState } from './slot';
 export interface Internal<PROPS> {
     root: Root | undefined;
     cmp: ReactFC<PROPS>;
+    projectionState: QwikProjectionState | null;
 }
 export interface QwikifyBase {
     /**

package/lib/vite.mjs

@@ -1,30 +1,21 @@
 function qwikReact() {
-  const OPTIMIZE_DEPS = [
-    "react",
-    "react-dom",
-    "react-dom/client",
-    "react-dom/server",
-    "react/jsx-runtime",
-    "react/jsx-dev-runtime"
-  ];
-  const DEDUPE = [
-    "react",
-    "react-dom"
-  ];
-  return {
-    name: "vite-plugin-qwik-react",
-    config() {
-      return {
-        resolve: {
-          dedupe: DEDUPE
-        },
-        optimizeDeps: {
-          include: OPTIMIZE_DEPS
-        }
-      };
-    }
-  };
+	const OPTIMIZE_DEPS = [
+		"react",
+		"react-dom",
+		"react-dom/client",
+		"react-dom/server",
+		"react/jsx-runtime",
+		"react/jsx-dev-runtime"
+	];
+	const DEDUPE = ["react", "react-dom"];
+	return {
+		name: "vite-plugin-qwik-react",
+		config() {
+			return {
+				resolve: { dedupe: DEDUPE },
+				optimizeDeps: { include: OPTIMIZE_DEPS }
+			};
+		}
+	};
 }
-export {
-  qwikReact
-};
+export { qwikReact };

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@qwik.dev/react",
   "description": "Qwik React allows adding React components into existing Qwik application",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.40",
   "bugs": "https://github.com/QwikDev/qwik/issues",
   "devDependencies": {
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "typescript": "5.8.3",
-    "vite": "7.0.0",
-    "@qwik.dev/core": "2.0.0-beta.4"
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "5.9.3",
+    "vite": "8.2.1",
+    "@qwik.dev/core": "2.0.0-beta.40"
   },
   "engines": {
     "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -18,13 +18,11 @@
   "exports": {
     ".": {
       "types": "./lib/types/index.qwik.d.ts",
-      "import": "./lib/index.qwik.mjs",
-      "require": "./lib/index.qwik.cjs"
+      "import": "./lib/index.qwik.mjs"
     },
     "./vite": {
       "types": "./lib/types/vite.d.ts",
-      "import": "./lib/vite.mjs",
-      "require": "./lib/vite.cjs"
+      "import": "./lib/vite.mjs"
     }
   },
   "files": [
@@ -39,8 +37,8 @@
     "@types/react-dom": "^18",
     "react": "^18",
     "react-dom": "^18",
-    "vite": ">=5 <8",
-    "@qwik.dev/core": "^2.0.0-beta.4"
+    "vite": ">=8 <9",
+    "@qwik.dev/core": "^2.0.0-beta.40"
   },
   "publishConfig": {
     "access": "public"
@@ -51,6 +49,7 @@
     "url": "https://github.com/QwikDev/qwik.git",
     "directory": "packages/qwik-react"
   },
+  "sideEffects": false,
   "type": "module",
   "types": "./lib/types/index.qwik.d.ts",
   "scripts": {

package/lib/index.qwik.cjs

@@ -1,264 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const client = require("react-dom/client");
-const reactDom = require("react-dom");
-const internal = require("@qwik.dev/core/internal");
-const server = require("react-dom/server");
-const react = require("react");
-const SlotCtx = react.createContext({
-  scopeId: ""
-});
-function main(slotEl, scopeId, RootCmp, props) {
-  const newProps = getReactProps(props);
-  return mainExactProps(slotEl, scopeId, RootCmp, newProps);
-}
-function mainExactProps(slotEl, scopeId, RootCmp, props) {
-  return react.createElement(SlotCtx.Provider, {
-    value: {
-      el: slotEl,
-      scopeId,
-      attachedEl: void 0
-    },
-    children: react.createElement(RootCmp, {
-      ...props,
-      children: react.createElement(SlotElement, null)
-    })
-  });
-}
-class SlotElement extends react.Component {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "slotC", react.createRef());
-  }
-  shouldComponentUpdate() {
-    return false;
-  }
-  componentDidMount() {
-    const slotC = this.slotC.current;
-    if (slotC) {
-      const { attachedEl, el } = this.context;
-      if (el) {
-        if (!attachedEl) {
-          slotC.appendChild(el);
-        } else if (attachedEl !== slotC) {
-          throw new Error("already attached");
-        }
-      }
-    }
-  }
-  render() {
-    return react.createElement("q-slotc", {
-      class: this.context.scopeId,
-      suppressHydrationWarning: true,
-      dangerouslySetInnerHTML: {
-        __html: "<!--SLOT-->"
-      },
-      ref: this.slotC
-    });
-  }
-}
-__publicField(SlotElement, "contextType", SlotCtx);
-const 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;
-};
-const getHostProps = (props) => {
-  const obj = {};
-  Object.keys(props).forEach((key) => {
-    if (key.startsWith(HOST_PREFIX)) {
-      obj[key.slice(HOST_PREFIX.length)] = props[key];
-    }
-  });
-  return obj;
-};
-const useWakeupSignal = (props, opts = {}) => {
-  const signal = core.useSignal(false);
-  const activate = core.$(() => signal.value = true);
-  const clientOnly = !!(props["client:only"] || props["qwik:only"] || opts?.clientOnly);
-  const clientVisible = props["client:visible"] || props["qwik:visible"] || opts?.eagerness === "visible";
-  const clientIdle = props["client:idle"] || props["qwik:idle"] || opts?.eagerness === "idle";
-  const clientLoad = props["client:load"] || props["qwik:load"] || clientOnly || opts?.eagerness === "load";
-  const clientHover = props["client:hover"] || props["qwik:hover"] || opts?.eagerness === "hover";
-  const clientEvent = props["client:event"] || props["qwik:event"];
-  if (core.isServer) {
-    if (clientVisible) {
-      core.useOn("qvisible", activate);
-    }
-    if (clientIdle) {
-      core.useOnDocument("qidle", activate);
-    }
-    if (clientLoad) {
-      core.useOnDocument("qinit", activate);
-    }
-    if (clientHover) {
-      core.useOn("mouseover", activate);
-    }
-    if (clientEvent) {
-      core.useOn(clientEvent, activate);
-    }
-    if (opts?.event) {
-      core.useOn(opts?.event, activate);
-    }
-  }
-  return [
-    signal,
-    clientOnly,
-    activate
-  ];
-};
-const HOST_PREFIX = "host:";
-async function renderFromServer(Host, reactCmp$, scopeId, props, ref, slotRef, hydrationProps) {
-  if (core.isServer) {
-    const Cmp = await reactCmp$.resolve();
-    const newProps = getReactProps(props);
-    Object.assign(hydrationProps, newProps);
-    const html = server.renderToString(mainExactProps(void 0, scopeId, Cmp, newProps));
-    const index = html.indexOf("<!--SLOT-->");
-    if (index > 0) {
-      const part1 = html.slice(0, index);
-      const part2 = html.slice(index + "<!--SLOT-->".length);
-      return /* @__PURE__ */ jsxRuntime.jsx(Host, {
-        ref,
-        ...getHostProps(props),
-        children: /* @__PURE__ */ jsxRuntime.jsx(internal.SSRStream, {
-          children: async function* () {
-            yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
-              data: "q:ignore"
-            });
-            yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRRaw, {
-              data: part1
-            });
-            yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
-              data: "q:container-island"
-            });
-            yield /* @__PURE__ */ jsxRuntime.jsx("q-slot", {
-              ref: slotRef,
-              children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
-            });
-            yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
-              data: "/q:container-island"
-            });
-            yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRRaw, {
-              data: part2
-            });
-            yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
-              data: "/q:ignore"
-            });
-          }
-        })
-      });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Host, {
-          ref,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
-              data: "q:container=html"
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx(internal.SSRRaw, {
-              data: html
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
-              data: "/q:container"
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("q-slot", {
-          ref: slotRef,
-          children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
-        })
-      ]
-    });
-  }
-}
-function qwikifyQrl(reactCmp$, opts) {
-  return core.component$((props) => {
-    const { scopeId } = core.useStylesScoped$(`q-slot{display:none} q-slotc,q-slotc>q-slot{display:contents}`);
-    const hostRef = core.useSignal();
-    const slotRef = core.useSignal();
-    const internalState = core.useSignal();
-    const [signal, isClientOnly] = useWakeupSignal(props, opts);
-    const hydrationKeys = core.useStore({});
-    const TagName = opts?.tagName ?? "qwik-react";
-    core.useTask$(async ({ track }) => {
-      const trackedProps = track(() => ({
-        ...props
-      }));
-      track(signal);
-      if (!core.isBrowser) {
-        return;
-      }
-      if (internalState.value) {
-        if (internalState.value.root) {
-          internalState.value.root.render(main(slotRef.value, scopeId, internalState.value.cmp, trackedProps));
-        }
-      } else {
-        let root = void 0;
-        const Cmp = await reactCmp$.resolve();
-        const hostElement = hostRef.value;
-        if (hostElement) {
-          if (isClientOnly) {
-            root = client.createRoot(hostElement);
-          } else {
-            root = reactDom.flushSync(() => {
-              return client.hydrateRoot(hostElement, mainExactProps(slotRef.value, scopeId, Cmp, hydrationKeys));
-            });
-          }
-          if (isClientOnly || signal.value === false) {
-            root.render(main(slotRef.value, scopeId, Cmp, trackedProps));
-          }
-        }
-        internalState.value = core.noSerialize({
-          cmp: Cmp,
-          root
-        });
-      }
-    });
-    if (core.isServer && !isClientOnly) {
-      const jsx = renderFromServer(TagName, reactCmp$, scopeId, props, hostRef, slotRef, hydrationKeys);
-      return /* @__PURE__ */ jsxRuntime.jsx(core.RenderOnce, {
-        children: jsx
-      }, 2);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TagName, {
-          ...getHostProps(props),
-          ref: (el) => {
-            if (core.isBrowser) {
-              queueMicrotask(() => {
-                const internalData = internalState.value;
-                if (internalData && !internalData.root) {
-                  const root = internalData.root = client.createRoot(el);
-                  root.render(main(slotRef.value, scopeId, internalData.cmp, props));
-                }
-              });
-            } else {
-              hostRef.value = el;
-            }
-          },
-          children: core.SkipRender
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("q-slot", {
-          ref: slotRef,
-          children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
-        })
-      ]
-    });
-  });
-}
-const qwikify$ = /* @__PURE__ */ core.implicit$FirstArg(qwikifyQrl);
-exports.qwikify$ = qwikify$;
-exports.qwikifyQrl = qwikifyQrl;

package/lib/vite.cjs

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function qwikReact() {
-  const OPTIMIZE_DEPS = [
-    "react",
-    "react-dom",
-    "react-dom/client",
-    "react-dom/server",
-    "react/jsx-runtime",
-    "react/jsx-dev-runtime"
-  ];
-  const DEDUPE = [
-    "react",
-    "react-dom"
-  ];
-  return {
-    name: "vite-plugin-qwik-react",
-    config() {
-      return {
-        resolve: {
-          dedupe: DEDUPE
-        },
-        optimizeDeps: {
-          include: OPTIMIZE_DEPS
-        }
-      };
-    }
-  };
-}
-exports.qwikReact = qwikReact;