@qwik.dev/react 2.0.0-beta.11 → 2.0.0-beta.14

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.11",
+  "version": "2.0.0-beta.14",
   "bugs": "https://github.com/QwikDev/qwik/issues",
   "devDependencies": {
     "@types/react": "19.1.13",
     "@types/react-dom": "19.1.7",
     "react": "19.1.1",
     "react-dom": "19.1.1",
-    "typescript": "5.9.2",
-    "vite": "7.1.7",
-    "@qwik.dev/core": "2.0.0-beta.11"
+    "typescript": "5.9.3",
+    "vite": "7.1.11",
+    "@qwik.dev/core": "2.0.0-beta.14"
   },
   "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": [
@@ -40,7 +38,7 @@
     "react": "^18",
     "react-dom": "^18",
     "vite": ">=5 <8",
-    "@qwik.dev/core": "^2.0.0-beta.11"
+    "@qwik.dev/core": "^2.0.0-beta.14"
   },
   "publishConfig": {
     "access": "public"

package/lib/index.qwik.cjs

@@ -1,272 +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 internal = require("@qwik.dev/core/internal");
-const server = require("react-dom/server");
-const react = require("react");
-const client = require("react-dom/client");
-const reactDom = require("react-dom");
-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
-        });
-      }
-    });
-    core.useTask$(({ track, cleanup }) => {
-      track(signal);
-      if (core.isBrowser) {
-        cleanup(() => {
-          internalState.value?.root?.unmount();
-        });
-      }
-    });
-    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;