@qwik.dev/react 0.0.0 → 2.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 QwikDev
+Copyright (c) 2021 BuilderIO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# Qwik qwik-react ⚡️
+
+- Create a component library
+- Vite.js tooling.
+- Prettier code formatter.
+
+## Development Builds
+
+### Client only
+
+During development, the index.html is not a result of server-side rendering, but rather the Qwik app is built using client-side JavaScript only. This is ideal for development with Vite and its ability to reload modules quickly and on-demand. However, this mode is only for development and does not showcase "how" Qwik works since JavaScript is required to execute, and Vite imports many development modules for the app to work.
+
+```
+npm run dev
+```
+
+### Server-side Rendering (SSR) and Client
+
+Server-side rendered index.html, with client-side modules prefetched and loaded by the browser. This can be used to test out server-side rendered content during development, but will be slower than the client-only development builds.
+
+```
+npm run dev.ssr
+```
+
+## Production Builds
+
+A production build should generate the client and server modules by running both client and server build commands.
+
+```
+npm run build
+```
+
+### Client Modules
+
+Production build that creates only the client-side modules that are dynamically imported by the browser.
+
+```
+npm run build.client
+```
+
+### Server Modules
+
+Production build that creates the server-side render (SSR) module that is used by the server to render the HTML.
+
+```
+npm run build.server
+```
+
+---
+
+## Related
+
+- [Qwik Docs](https://qwik.dev/docs/)
+- [Qwik on GitHub](https://github.com/QwikDev/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Discord](https://qwik.dev/chat)
+- [Vite](https://vitejs.dev/)
+- [Partytown](https://partytown.builder.io/)
+- [Mitosis](https://github.com/BuilderIO/mitosis)
+- [Builder.io](https://www.builder.io/)

package/lib/index.qwik.cjs

@@ -0,0 +1,265 @@
+"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 build = require("@qwik.dev/core/build");
+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 (build.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 (build.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 (!build.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 (build.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 (build.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/index.qwik.mjs

@@ -0,0 +1,265 @@
+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, $, useOn, useOnDocument, Slot, component$, useStylesScoped$, useStore, useTask$, noSerialize, RenderOnce, SkipRender, implicit$FirstArg } from "@qwik.dev/core";
+import { isServer, isBrowser } from "@qwik.dev/core/build";
+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);
+}
+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)
+    })
+  });
+}
+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
+    });
+  }
+}
+__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 = 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
+  ];
+};
+const HOST_PREFIX = "host:";
+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, {})
+        })
+      ]
+    });
+  }
+}
+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, {})
+        })
+      ]
+    });
+  });
+}
+const qwikify$ = /* @__PURE__ */ implicit$FirstArg(qwikifyQrl);
+export {
+  qwikify$,
+  qwikifyQrl
+};

package/lib/types/entry.dev.d.ts

@@ -0,0 +1,12 @@
+import { type RenderOptions } from '@qwik.dev/core';
+/**
+ * Development entry point using only client-side modules:
+ *
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+export default function (opts: RenderOptions): Promise<import("packages/qwik/core-internal").RenderResult>;

package/lib/types/entry.ssr.d.ts

@@ -0,0 +1,3 @@
+import { type RenderToStreamOptions } from '@qwik.dev/core/server';
+/** Server-Side Render method to be called by a server. */
+export default function (opts: RenderToStreamOptions): Promise<import("@qwik.dev/core/server").RenderToStreamResult>;

package/lib/types/examples/app.d.ts

@@ -0,0 +1,2 @@
+/** @jsxImportSource react */
+export declare const App: import("packages/qwik/public").Component<import("../index.qwik").QwikifyProps<Record<any, any>>>;

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

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

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

@@ -0,0 +1,2 @@
+export { createRoot, hydrateRoot } from 'react-dom/client';
+export { flushSync } from 'react-dom';

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

@@ -0,0 +1,9 @@
+import { type QRL } from '@qwik.dev/core';
+import type { FunctionComponent as ReactFC } from 'react';
+import type { QwikifyOptions, QwikifyProps } from './types';
+export declare function qwikifyQrl<PROPS extends Record<any, any>>(reactCmp$: QRL<ReactFC<PROPS & {
+    children?: any;
+}>>, opts?: QwikifyOptions): import("@qwik.dev/core").Component<QwikifyProps<PROPS>>;
+export declare const qwikify$: <PROPS extends Record<any, any>>(qrl: ReactFC<PROPS & {
+    children?: any;
+}>, opts?: QwikifyOptions | undefined) => import("@qwik.dev/core").Component<QwikifyProps<PROPS>>;

package/lib/types/react/server-render.d.ts

@@ -0,0 +1,2 @@
+import { type QRL, type Signal } from '@qwik.dev/core';
+export declare function renderFromServer(Host: any, reactCmp$: QRL<any>, scopeId: string, props: Record<string, any>, ref: Signal<Element | undefined>, slotRef: Signal<Element | undefined>, hydrationProps: Record<string, any>): Promise<import("@qwik.dev/core").JSXOutput>;

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

@@ -0,0 +1,29 @@
+import { Component } from 'react';
+import type { QwikifyOptions, QwikifyProps } from './types';
+interface SlotState {
+    el?: Element;
+    scopeId: string;
+    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 declare class SlotElement extends Component {
+    static contextType: import("react").Context<SlotState>;
+    context: React.ContextType<typeof SlotCtx>;
+    slotC: import("react").RefObject<Element>;
+    shouldComponentUpdate(): boolean;
+    componentDidMount(): void;
+    render(): import("react").DOMElement<{
+        class: string;
+        suppressHydrationWarning: boolean;
+        dangerouslySetInnerHTML: {
+            __html: string;
+        };
+        ref: import("react").RefObject<Element>;
+    }, 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 {};

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

@@ -0,0 +1,86 @@
+import type { QRL, Signal } from '@qwik.dev/core';
+import type { FunctionComponent as ReactFC } from 'react';
+import type { Root } from 'react-dom/client';
+export interface Internal<PROPS> {
+    root: Root | undefined;
+    cmp: ReactFC<PROPS>;
+}
+export interface QwikifyBase {
+    /**
+     * The component eagerly hydrates when the document loads.
+     *
+     * **Use case:** Immediately-visible UI elements that need to be interactive as soon as possible.
+     */
+    'client:load'?: boolean;
+    'qwik:load'?: boolean;
+    /**
+     * The component eagerly hydrates when the browser first become idle, ie, when everything
+     * important as already run before.
+     *
+     * **Use case:** Lower-priority UI elements that don’t need to be immediately interactive.
+     */
+    'client:idle'?: boolean;
+    'qwik:idle'?: boolean;
+    /**
+     * The component eagerly hydrates when it becomes visible in the viewport.
+     *
+     * **Use case:** Low-priority UI elements that are either far down the page (“below the fold”) or
+     * so resource-intensive to load that you would prefer not to load them at all if the user never
+     * saw the element.
+     */
+    'client:visible'?: boolean;
+    'qwik:visible'?: boolean;
+    /**
+     * The component eagerly hydrates when the mouse is over the component.
+     *
+     * **Use case:** Lowest-priority UI elements which interactivity is not crucial, and only needs to
+     * run in desktop.
+     */
+    'client:hover'?: boolean;
+    'qwik:hover'?: boolean;
+    /** When `true`, the component will not run in SSR, only in the browser. */
+    'client:only'?: boolean;
+    'qwik:only'?: boolean;
+    /**
+     * This is an advanced API that allows to hydrate the component whenever the passed signal becomes
+     * `true`.
+     *
+     * This effectively allows you to implement custom strategies for hydration.
+     */
+    'client:signal'?: Signal<boolean>;
+    'qwik:signal'?: Signal<boolean>;
+    /** The component eagerly hydrates when specified DOM events are dispatched. */
+    'client:event'?: string | string[];
+    'qwik:event'?: string | string[];
+    /**
+     * Adds a `click` event listener to the host element, this event will be dispatched even if the
+     * react component is not hydrated.
+     */
+    'host:onClick$'?: QRL<(ev: Event) => void>;
+    /**
+     * Adds a `blur` event listener to the host element, this event will be dispatched even if the
+     * react component is not hydrated.
+     */
+    'host:onBlur$'?: QRL<(ev: Event) => void>;
+    /**
+     * Adds a `focus` event listener to the host element, this event will be dispatched even if the
+     * react component is not hydrated.
+     */
+    'host:onFocus$'?: QRL<(ev: Event) => void>;
+    /**
+     * Adds a `mouseover` event listener to the host element, this event will be dispatched even if
+     * the react component is not hydrated.
+     */
+    'host:onMouseOver$'?: QRL<(ev: Event) => void>;
+    children?: any;
+}
+export type TransformProps<PROPS extends Record<any, any>> = {
+    [K in keyof PROPS as K extends `on${string}` ? `${K}$` : K]: PROPS[K];
+};
+export type QwikifyProps<PROPS extends Record<any, any>> = TransformProps<PROPS> & QwikifyBase;
+export interface QwikifyOptions {
+    tagName?: string;
+    eagerness?: 'load' | 'visible' | 'idle' | 'hover';
+    event?: string | string[];
+    clientOnly?: boolean;
+}

package/lib/types/root.d.ts

@@ -0,0 +1 @@
+export declare const Root: import("@qwik.dev/core").Component<unknown>;

package/lib/types/vite.d.ts

@@ -0,0 +1 @@
+export declare function qwikReact(): any;

package/lib/vite.cjs

@@ -0,0 +1,30 @@
+"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;

package/lib/vite.mjs

@@ -0,0 +1,30 @@
+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
+        }
+      };
+    }
+  };
+}
+export {
+  qwikReact
+};

package/package.json

@@ -1,188 +1,71 @@
 {
   "name": "@qwik.dev/react",
-  "description": "An open source framework for instant loading web apps at any scale, without the extra effort.",
-  "version": "0.0.0",
-  "author": "Qwik Team",
-  "annotation": "This package.json is for internal use in the monorepo, the build actually makes a new package.json for the published package via scripts/package-json.ts",
-  "bin": {
-    "qwik": "./qwik-cli.cjs"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
+  "description": "Qwik React allows adding React components into existing Qwik application",
+  "version": "2.0.0-alpha.1",
   "bugs": "https://github.com/QwikDev/qwik/issues",
-  "dependencies": {},
-  "devDependencies": {},
+  "devDependencies": {
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "typescript": "5.4.5",
+    "vite": "5.4.10",
+    "@qwik.dev/core": "2.0.0-alpha.1"
+  },
   "engines": {
     "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
   },
   "exports": {
     ".": {
-      "types": "./public.d.ts",
-      "import": {
-        "development": "./dist/core.mjs",
-        "production": "./dist/core.prod.mjs",
-        "default": "./dist/core.prod.mjs",
-        "min": "./dist/core.min.mjs"
-      },
-      "require": {
-        "development": "./dist/core.cjs",
-        "production": "./dist/core.prod.cjs",
-        "default": "./dist/core.prod.cjs"
-      }
-    },
-    "./cli": {
-      "require": "./dist/cli.cjs"
-    },
-    "./internal": {
-      "types": "./dist/core-internal.d.ts",
-      "import": {
-        "development": "./dist/core.mjs",
-        "production": "./dist/core.prod.mjs",
-        "default": "./dist/core.prod.mjs",
-        "min": "./dist/core.min.mjs"
-      },
-      "require": {
-        "development": "./dist/core.cjs",
-        "production": "./dist/core.prod.cjs",
-        "default": "./dist/core.prod.cjs"
-      }
-    },
-    "./jsx-runtime": {
-      "types": "./dist/jsx-runtime.d.ts",
-      "import": {
-        "development": "./dist/core.mjs",
-        "production": "./dist/core.prod.mjs",
-        "default": "./dist/core.prod.mjs",
-        "min": "./dist/core.min.mjs"
-      },
-      "require": {
-        "development": "./dist/core.cjs",
-        "production": "./dist/core.prod.cjs",
-        "default": "./dist/core.prod.cjs"
-      }
-    },
-    "./jsx-dev-runtime": {
-      "types": "./dist/jsx-runtime.d.ts",
-      "import": {
-        "development": "./dist/core.mjs",
-        "production": "./dist/core.prod.mjs",
-        "default": "./dist/core.mjs",
-        "min": "./dist/core.min.mjs"
-      },
-      "require": {
-        "development": "./dist/core.cjs",
-        "production": "./dist/core.prod.cjs",
-        "default": "./dist/core.cjs"
-      }
-    },
-    "./build": {
-      "types": "./dist/build/index.d.ts",
-      "import": {
-        "development": "./dist/build/index.dev.mjs",
-        "production": "./dist/build/index.prod.mjs",
-        "default": "./dist/build/index.mjs"
-      },
-      "require": {
-        "development": "./dist/build/index.dev.cjs",
-        "production": "./dist/build/index.prod.cjs",
-        "default": "./dist/build/index.cjs"
-      }
-    },
-    "./loader": {
-      "types": "./dist/loader/index.d.ts",
-      "import": "./dist/loader/index.mjs",
-      "require": "./dist/loader/index.cjs"
-    },
-    "./insights": {
-      "types": "./dist/insights/index.d.ts",
-      "import": "./dist/insights/index.qwik.mjs",
-      "require": "./dist/insights/index.qwik.cjs"
-    },
-    "./insights/vite": {
-      "types": "./dist/insights/vite/index.d.ts",
-      "import": "./dist/insights/vite/index.mjs",
-      "require": "./dist/insights/vite/index.cjs"
+      "types": "./lib/types/index.qwik.d.ts",
+      "import": "./lib/index.qwik.mjs",
+      "require": "./lib/index.qwik.cjs"
     },
-    "./optimizer.cjs": "./dist/optimizer.cjs",
-    "./optimizer.mjs": "./dist/optimizer.mjs",
-    "./optimizer": {
-      "types": "./dist/optimizer.d.ts",
-      "import": "./dist/optimizer.mjs",
-      "require": "./dist/optimizer.cjs"
-    },
-    "./server.cjs": "./dist/server.cjs",
-    "./server.mjs": "./dist/server.mjs",
-    "./server": {
-      "types": "./server.d.ts",
-      "import": "./dist/server.mjs",
-      "require": "./dist/server.cjs"
-    },
-    "./testing": {
-      "types": "./dist/testing/index.d.ts",
-      "import": "./dist/testing/index.mjs",
-      "require": "./dist/testing/index.cjs"
-    },
-    "./qwikloader.js": "./dist/qwikloader.js",
-    "./qwikloader.debug.js": "./dist/qwikloader.debug.js",
-    "./qwik-prefetch.js": "./dist/qwik-prefetch.js",
-    "./qwik-prefetch.debug.js": "./dist/qwik-prefetch.debug.js",
-    "./package.json": "./dist/package.json"
+    "./vite": {
+      "types": "./lib/types/vite.d.ts",
+      "import": "./lib/vite.mjs",
+      "require": "./lib/vite.cjs"
+    }
   },
-  "exports_annotation": "We use the build for the optimizer because esbuild doesn't like the html?raw imports in the server plugin and it's only used in the vite configs",
   "files": [
-    "README.md",
-    "LICENSE",
-    "dist",
-    "bindings",
-    "build.d.ts",
-    "cli.d.ts",
-    "jsx-dev-runtime.d.ts",
-    "jsx-runtime.d.ts",
-    "loader.d.ts",
-    "optimizer.d.ts",
-    "public.d.ts",
-    "server.d.ts",
-    "testing.d.ts",
-    "qwik-cli.cjs"
+    "lib",
+    "vite"
   ],
   "homepage": "https://qwik.dev/",
-  "keywords": [
-    "Builder.io",
-    "framework",
-    "generator",
-    "prerender",
-    "server-side-render",
-    "ssg",
-    "ssr",
-    "static-site",
-    "static-site-generator",
-    "webapp",
-    "website"
-  ],
   "license": "MIT",
-  "main": "./src/index.ts",
+  "main": "./lib/index.qwik.mjs",
   "peerDependencies": {
-    "prettier": "*",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "react": "^18",
+    "react-dom": "^18",
     "vite": "^5",
-    "vitest": "^2"
+    "@qwik.dev/core": "^2.0.0-alpha.1"
   },
-  "peerDependenciesMeta": {
-    "vitest": {
-      "optional": true
-    },
-    "prettier": {
-      "optional": true
-    }
+  "qwik": "./lib/index.qwik.mjs",
+  "publishConfig": {
+    "access": "public"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/QwikDev/qwik.git",
-    "directory": "packages/qwik"
-  },
-  "scripts": {
-    "build.insights": "cd src/insights && vite build --mode lib --emptyOutDir"
+    "directory": "packages/qwik-react"
   },
   "type": "module",
-  "types": "./dist/core.d.ts"
-}
+  "types": "./lib/types/index.qwik.d.ts",
+  "scripts": {
+    "build": "npm run build.lib",
+    "build.client": "vite build",
+    "build.lib": "vite build --mode lib",
+    "build.ssr": "vite build --ssr src/entry.ssr.tsx",
+    "dev": "vite",
+    "dev.debug": "node --inspect-brk ../../node_modules/vite/bin/vite.js --mode ssr --force",
+    "dev.ssr": "vite --mode ssr",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "release": "pnpm run -w build.local && pnpm publish",
+    "start": "npm run dev",
+    "typecheck": "tsc --noEmit"
+  }
+}