@qwik.dev/react 2.0.0-beta.28 → 2.0.0-beta.29

package/lib/index.qwik.mjs

@@ -1,9 +1,9 @@
 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, component$, useStylesScoped$, useStore, useTask$, isBrowser, noSerialize, RenderOnce, SkipRender, implicit$FirstArg } from "@qwik.dev/core";
-import { SSRStream, SSRComment, SSRRaw } from "@qwik.dev/core/internal";
+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";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+import { SSRStream, SSRComment, SSRRaw, _getContextContainer, _getContextHostElement, _addProjection, _setProjectionTarget, _removeProjection, _updateProjectionProps } from "@qwik.dev/core/internal";
 import { renderToString } from "react-dom/server";
 import { createElement, createContext, Component, createRef } from "react";
 import { createRoot, hydrateRoot } from "react-dom/client";
@@ -11,23 +11,7 @@ import { flushSync } from "react-dom";
 const SlotCtx = 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 createElement(SlotCtx.Provider, {
-    value: {
-      el: slotEl,
-      scopeId,
-      attachedEl: void 0
-    },
-    children: createElement(RootCmp, {
-      ...props,
-      children: createElement(SlotElement, null)
-    })
-  });
-}
+const QwikProjectionCtx = createContext(null);
 class SlotElement extends Component {
   constructor() {
     super(...arguments);
@@ -61,28 +45,34 @@ class SlotElement extends Component {
   }
 }
 __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];
-    }
+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)
+    })
   });
-  return obj;
-};
+  if (projectionState) {
+    tree = createElement(QwikProjectionCtx.Provider, {
+      value: projectionState,
+      children: tree
+    });
+  }
+  return tree;
+}
 const useWakeupSignal = (props, opts = {}) => {
   const signal = useSignal(false);
-  const activate = $(() => signal.value = true);
+  const activate = /* @__PURE__ */ inlinedQrl(() => {
+    const signal2 = _captures[0];
+    return signal2.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";
@@ -116,157 +106,353 @@ const useWakeupSignal = (props, opts = {}) => {
   ];
 };
 const HOST_PREFIX = "host:";
+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 main(slotEl, scopeId, RootCmp, props, projectionState) {
+  const newProps = getReactProps(props);
+  return mainExactProps(slotEl, scopeId, RootCmp, newProps, projectionState);
+}
+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;
+};
+let _ssrProjectionRegistry = null;
+function setSSRProjectionRegistry(registry) {
+  _ssrProjectionRegistry = registry;
+}
+function getSSRProjectionRegistry() {
+  return _ssrProjectionRegistry;
+}
+const 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 registry = {
+      entries: /* @__PURE__ */ new Map()
+    };
+    setSSRProjectionRegistry(registry);
     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"
-            });
+    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__ */ 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, {})
-        })
-      ]
-    });
+    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}`);
+  return /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+    const opts2 = _captures[0], reactCmp$2 = _captures[1];
+    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();
-    const [signal, isClientOnly] = useWakeupSignal(props, opts);
+    const [signal, isClientOnly] = useWakeupSignal(props, opts2);
     const hydrationKeys = useStore({});
-    const TagName = opts?.tagName ?? "qwik-react";
-    useTask$(async ({ track }) => {
+    const TagName = opts2?.tagName ?? "qwik-react";
+    useTaskQrl(/* @__PURE__ */ inlinedQrl(async ({ track }) => {
+      const hostRef2 = _captures[0], hydrationKeys2 = _captures[1], internalState2 = _captures[2], isClientOnly2 = _captures[3], props2 = _captures[4], reactCmp$3 = _captures[5], scopeId2 = _captures[6], signal2 = _captures[7], slotRef2 = _captures[8];
       const trackedProps = track(() => ({
-        ...props
+        ...props2
       }));
-      track(signal);
+      track(signal2);
       if (!isBrowser) {
         return;
       }
-      if (internalState.value) {
-        if (internalState.value.root) {
-          internalState.value.root.render(main(slotRef.value, scopeId, internalState.value.cmp, trackedProps));
+      let projectionState = null;
+      const container = _getContextContainer();
+      const hostVNode = _getContextHostElement();
+      if (container && hostVNode) {
+        projectionState = {
+          parentVNode: hostVNode,
+          container
+        };
+      }
+      if (internalState2.value) {
+        if (internalState2.value.root) {
+          internalState2.value.root.render(main(slotRef2.value, scopeId2, internalState2.value.cmp, trackedProps, internalState2.value.projectionState));
         }
       } else {
         let root = void 0;
-        const Cmp = await reactCmp$.resolve();
-        const hostElement = hostRef.value;
+        const Cmp = await reactCmp$3.resolve();
+        const hostElement = hostRef2.value;
         if (hostElement) {
-          if (isClientOnly) {
+          if (isClientOnly2) {
             root = createRoot(hostElement);
           } else {
             root = flushSync(() => {
-              return hydrateRoot(hostElement, mainExactProps(slotRef.value, scopeId, Cmp, hydrationKeys));
+              return hydrateRoot(hostElement, mainExactProps(slotRef2.value, scopeId2, Cmp, hydrationKeys2, projectionState));
             });
           }
-          if (isClientOnly || signal.value === false) {
-            root.render(main(slotRef.value, scopeId, Cmp, trackedProps));
+          if (isClientOnly2 || signal2.value === false) {
+            root.render(main(slotRef2.value, scopeId2, Cmp, trackedProps, projectionState));
           }
         }
-        internalState.value = noSerialize({
+        internalState2.value = noSerialize({
           cmp: Cmp,
-          root
+          root,
+          projectionState
         });
       }
-    });
-    useTask$(({ track, cleanup }) => {
-      track(signal);
+    }, "qwikifyQrl_component_useTask_JuFeaMCL0P0", [
+      hostRef,
+      hydrationKeys,
+      internalState,
+      isClientOnly,
+      props,
+      reactCmp$2,
+      scopeId,
+      signal,
+      slotRef
+    ]));
+    useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track, cleanup }) => {
+      const internalState2 = _captures[0], signal2 = _captures[1];
+      track(signal2);
       if (isBrowser) {
         cleanup(() => {
-          internalState.value?.root?.unmount();
+          const root = internalState2.value?.root;
+          if (root) {
+            queueMicrotask(() => root.unmount());
+          }
         });
       }
-    });
+    }, "qwikifyQrl_component_useTask_1_mwaGrLCLc2w", [
+      internalState,
+      signal
+    ]));
     if (isServer && !isClientOnly) {
-      const jsx$1 = renderFromServer(TagName, reactCmp$, scopeId, props, hostRef, slotRef, hydrationKeys);
-      return /* @__PURE__ */ jsx(RenderOnce, {
-        children: jsx$1
-      }, 2);
+      const jsx2 = renderFromServer(TagName, reactCmp$2, scopeId, props, hostRef, slotRef, hydrationKeys);
+      return /* @__PURE__ */ _jsxSorted(RenderOnce, null, null, jsx2, 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__ */ _jsxSorted(Fragment, null, null, [
+      /* @__PURE__ */ _jsxSplit(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, 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);
+let slotCounter = 0;
+function reactifyQrl(qwikCompQrl) {
+  const _QwikInReact = class _QwikInReact extends Component {
+    constructor() {
+      super(...arguments);
+      __publicField(this, "slotName", `_rq:${slotCounter++}`);
+      __publicField(this, "vnode", null);
+      __publicField(this, "divRef", createRef());
+      __publicField(this, "mounted", false);
+      __publicField(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
+      });
+    }
+  };
+  __publicField(_QwikInReact, "contextType", QwikProjectionCtx);
+  let QwikInReact = _QwikInReact;
+  QwikInReact.displayName = `reactify$(...)`;
+  return QwikInReact;
+}
+const reactify$ = /* @__PURE__ */ implicit$FirstArg(reactifyQrl);
 export {
   qwikify$,
-  qwikifyQrl
+  qwikifyQrl,
+  reactify$,
+  reactifyQrl
 };

package/lib/q-manifest.json

@@ -1,6 +1,6 @@
 {
 	"version": "1",
-	"manifestHash": "r0ysh8",
+	"manifestHash": "v6wp5f",
 	"options": {
 		"target": "lib",
 		"buildMode": "development",
@@ -13,11 +13,12 @@
 	"mapping": {},
 	"bundles": {
 		"../index.qwik.mjs": {
-			"size": 8785,
-			"total": 8785,
+			"size": 16132,
+			"total": 16132,
 			"origins": [
 				"src/index.qwik.ts",
 				"src/react/qwikify.tsx",
+				"src/react/reactify.ts",
 				"src/react/server-render.tsx",
 				"src/react/slot.ts"
 			],

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,8 +7,13 @@ 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>;
@@ -25,5 +31,14 @@ export declare class SlotElement extends Component {
 }
 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/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.28",
+  "version": "2.0.0-beta.29",
   "bugs": "https://github.com/QwikDev/qwik/issues",
   "devDependencies": {
     "@types/react": "19.2.7",
@@ -10,7 +10,7 @@
     "react-dom": "19.2.3",
     "typescript": "5.9.3",
     "vite": "7.3.1",
-    "@qwik.dev/core": "2.0.0-beta.28"
+    "@qwik.dev/core": "2.0.0-beta.29"
   },
   "engines": {
     "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -38,7 +38,7 @@
     "react": "^18",
     "react-dom": "^18",
     "vite": ">=6 <9",
-    "@qwik.dev/core": "^2.0.0-beta.28"
+    "@qwik.dev/core": "^2.0.0-beta.29"
   },
   "publishConfig": {
     "access": "public"