fix(v2): qwik-react

packages/qwik-react/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@builder.io/qwik-react",
   "description": "QwikReact allows adding React components into existing Qwik application",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "bugs": "https://github.com/QwikDev/qwik/issues",
   "devDependencies": {
     "@builder.io/qwik": "workspace:^",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "5.4.5",
-    "vite": "^5.2.11"
+    "vite": "^5.2.10"
   },
   "engines": {
     "node": ">=16.8.0 <18.0.0 || >=18.11"
@@ -36,10 +36,10 @@
   "main": "./lib/index.qwik.mjs",
   "peerDependencies": {
     "@builder.io/qwik": "workspace:^",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "qwik": "./lib/index.qwik.mjs",
   "repository": {

packages/qwik-react/src/react/qwikify.tsx

@@ -10,6 +10,7 @@ import {
   Slot,
   RenderOnce,
   useStylesScoped$,
+  useStore,
 } from '@builder.io/qwik';
 
 import { isBrowser, isServer } from '@builder.io/qwik/build';
@@ -32,7 +33,7 @@ export function qwikifyQrl<PROPS extends Record<any, any>>(
     const slotRef = useSignal<Element>();
     const internalState = useSignal<NoSerialize<Internal<PROPS>>>();
     const [signal, isClientOnly] = useWakeupSignal(props, opts);
-    const hydrationKeys = {};
+    const hydrationKeys = useStore({});
     const TagName = opts?.tagName ?? ('qwik-react' as any);
 
     // Task takes cares of updates and partial hydration
@@ -92,7 +93,7 @@ export function qwikifyQrl<PROPS extends Record<any, any>>(
     }
 
     return (
-      <RenderOnce>
+      <>
         <TagName
           {...getHostProps(props)}
           ref={(el: Element) => {
@@ -114,7 +115,7 @@ export function qwikifyQrl<PROPS extends Record<any, any>>(
         <q-slot ref={slotRef}>
           <Slot></Slot>
         </q-slot>
-      </RenderOnce>
+      </>
     );
   });
 }

packages/qwik-react/src/react/server-render.tsx

@@ -1,4 +1,4 @@
-import { type QRL, type Signal, Slot, SSRRaw, SSRStream } from '@builder.io/qwik';
+import { type QRL, type Signal, Slot, SSRComment, SSRRaw, SSRStream } from '@builder.io/qwik';
 import { getHostProps, mainExactProps, getReactProps } from './slot';
 import { renderToString } from 'react-dom/server';
 import { isServer } from '@builder.io/qwik/build';
@@ -26,13 +26,17 @@ export async function renderFromServer(
         <Host ref={ref} {...getHostProps(props)}>
           <SSRStream>
             {async function* () {
+              yield <SSRComment data="q:ignore" />;
               yield <SSRRaw data={part1} />;
+              yield <SSRComment data="q:container-island" />;
               yield (
                 <q-slot ref={slotRef}>
                   <Slot />
                 </q-slot>
               );
+              yield <SSRComment data="/q:container-island" />;
               yield <SSRRaw data={part2} />;
+              yield <SSRComment data="/q:ignore" />;
             }}
           </SSRStream>
         </Host>
@@ -41,7 +45,9 @@ export async function renderFromServer(
     return (
       <>
         <Host ref={ref}>
+          <SSRComment data="q:container=html" />
           <SSRRaw data={html}></SSRRaw>
+          <SSRComment data="/q:container" />
         </Host>
         <q-slot ref={slotRef}>
           <Slot />

packages/qwik-react/src/vite.ts

@@ -3,6 +3,7 @@ export function qwikReact(): any {
     'react',
     'react-dom',
     'react-dom/client',
+    'react-dom/server',
     'react/jsx-runtime',
     'react/jsx-dev-runtime',
   ];

packages/qwik/src/core/component/component.public.ts

@@ -1,19 +1,14 @@
 import { dollar, type PropFnInterface, type QRL } from '../qrl/qrl.public';
-import type { JSXNode, JSXOutput } from '../render/jsx/types/jsx-node';
-import { OnRenderProp, QSlot } from '../util/markers';
+import type { JSXOutput } from '../render/jsx/types/jsx-node';
 import type {
   ComponentBaseProps,
   EventHandler,
   JSXChildren,
   QRLEventHandlerMulti,
 } from '../render/jsx/types/jsx-qwik-attributes';
 import type { FunctionComponent } from '../render/jsx/types/jsx-node';
-import { Virtual } from '../render/jsx/jsx-runtime';
 import { SERIALIZABLE_STATE } from '../container/serializers';
-import { qTest } from '../util/qdev';
-import { assertQrl } from '../qrl/qrl-class';
 import { _CONST_PROPS, _VAR_PROPS, _jsxSorted } from '../internal';
-import { assertNumber } from '../error/assert';
 import type { QwikIntrinsicElements } from '../render/jsx/types/jsx-qwik-elements';
 
 // TS way to check for any
@@ -186,25 +181,7 @@ export const componentQrl = <PROPS extends Record<any, any>>(
   componentQrl: QRL<OnRenderFn<PROPS>>
 ): Component<PROPS> => {
   // Return a QComponent Factory function.
-  // This is only used in v1, in v2 we use componentQrl directly
-  function QwikComponent(props: PublicProps<PROPS>, key: string | null, flags: number): JSXNode {
-    assertQrl(componentQrl);
-    assertNumber(flags, 'The Qwik Component was not invoked correctly');
-    const hash = qTest ? 'sX' : componentQrl.$hash$.slice(0, 4);
-    const finalKey = hash + ':' + (key ? key : '');
-    return _jsxSorted(
-      Virtual,
-      {
-        props,
-        [OnRenderProp]: componentQrl,
-        [QSlot]: props[QSlot],
-      },
-      null,
-      props.children,
-      flags,
-      finalKey
-    ) as any;
-  }
+  const QwikComponent = () => {};
   (QwikComponent as any)[SERIALIZABLE_STATE] = [componentQrl];
   return QwikComponent as any;
 };

packages/qwik/src/core/util/markers.ts

@@ -32,7 +32,7 @@ export const QVersionAttr = 'q:version';
 export const QBaseAttr = 'q:base';
 export const QLocaleAttr = 'q:locale';
 export const QManifestHashAttr = 'q:manifest-hash';
-export const QContainerIsland = 'q:container';
+export const QContainerIsland = 'q:container-island';
 export const QContainerIslandEnd = '/' + QContainerIsland;
 export const QIgnore = 'q:ignore';
 export const QIgnoreEnd = '/' + QIgnore;

packages/qwik/src/core/v2/client/process-vnode-data.ts

@@ -256,7 +256,7 @@ export function processVNodeData(document: Document) {
         do {
           nextNode = walker.nextNode();
           if (!nextNode) {
-            throw new Error(`Island container not closed!`);
+            throw new Error(`Ignore block not closed!`);
           }
         } while (getFastNodeType(nextNode) !== NodeType.COMMENT_IGNORE_END);
         nextNode = null;

packages/qwik/src/core/v2/client/vnode-diff.ts

@@ -106,7 +106,7 @@ export const vnode_diff = (
   vStartNode: VNode,
   scopedStyleIdPrefix: string | null
 ) => {
-  const journal = (container as DomContainer).$journal$;
+  let journal = (container as DomContainer).$journal$;
 
   /**
    * Stack is used to keep track of the state of the traversal.
@@ -232,6 +232,7 @@ export const vnode_diff = (
           }
         } else if (jsxValue === SkipRender) {
           // do nothing, we are skipping this node
+          journal = [];
         } else {
           expectText('');
         }

packages/qwik/src/core/v2/ssr/ssr-render-jsx.ts

@@ -12,15 +12,7 @@ import { SignalDerived, isSignal } from '../../state/signal';
 import { trackSignal } from '../../use/use-core';
 import { EMPTY_ARRAY } from '../../util/flyweight';
 import { throwErrorAndStop } from '../../util/log';
-import {
-  ELEMENT_KEY,
-  FLUSH_COMMENT,
-  QDefaultSlot,
-  QContainerAttr,
-  QScopedStyle,
-  QSlot,
-  QContainerAttrEnd,
-} from '../../util/markers';
+import { ELEMENT_KEY, FLUSH_COMMENT, QDefaultSlot, QScopedStyle, QSlot } from '../../util/markers';
 import { isPromise } from '../../util/promises';
 import { isFunction, type ValueOrPromise } from '../../util/types';
 import {
@@ -31,7 +23,7 @@ import {
 } from '../shared/event-names';
 import { addComponentStylePrefix, hasClassAttr, isClassAttr } from '../shared/scoped-styles';
 import { qrlToString, type SerializationContext } from '../shared/shared-serialization';
-import { DEBUG_TYPE, QContainerValue, VirtualType, type fixMeAny } from '../shared/types';
+import { DEBUG_TYPE, VirtualType, type fixMeAny } from '../shared/types';
 import { applyInlineComponent, applyQwikComponentBody } from './ssr-render-component';
 import type { ISsrNode, SSRContainer, SsrAttrs } from './ssr-types';
 import {
@@ -262,9 +254,7 @@ function processJSXNode(
           enqueue(value as StackValue);
           isPromise(value) && enqueue(Promise);
         } else if (type === SSRRaw) {
-          ssr.commentNode(QContainerAttr + '=' + QContainerValue.HTML);
           ssr.htmlNode(jsx.props.data as string);
-          ssr.commentNode(QContainerAttrEnd);
         } else if (isQwikComponent(type)) {
           ssr.openComponent(isDev ? [DEBUG_TYPE, VirtualType.Component] : EMPTY_ARRAY);
           const host = ssr.getLastNode();