@qwik.dev/react 2.0.0-beta.13 → 2.0.0-beta.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@qwik.dev/react",
3
3
  "description": "Qwik React allows adding React components into existing Qwik application",
4
- "version": "2.0.0-beta.13",
4
+ "version": "2.0.0-beta.15",
5
5
  "bugs": "https://github.com/QwikDev/qwik/issues",
6
6
  "devDependencies": {
7
7
  "@types/react": "19.1.13",
@@ -9,8 +9,8 @@
9
9
  "react": "19.1.1",
10
10
  "react-dom": "19.1.1",
11
11
  "typescript": "5.9.3",
12
- "vite": "7.1.11",
13
- "@qwik.dev/core": "2.0.0-beta.13"
12
+ "vite": "7.2.2",
13
+ "@qwik.dev/core": "2.0.0-beta.15"
14
14
  },
15
15
  "engines": {
16
16
  "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -18,13 +18,11 @@
18
18
  "exports": {
19
19
  ".": {
20
20
  "types": "./lib/types/index.qwik.d.ts",
21
- "import": "./lib/index.qwik.mjs",
22
- "require": "./lib/index.qwik.cjs"
21
+ "import": "./lib/index.qwik.mjs"
23
22
  },
24
23
  "./vite": {
25
24
  "types": "./lib/types/vite.d.ts",
26
- "import": "./lib/vite.mjs",
27
- "require": "./lib/vite.cjs"
25
+ "import": "./lib/vite.mjs"
28
26
  }
29
27
  },
30
28
  "files": [
@@ -40,7 +38,7 @@
40
38
  "react": "^18",
41
39
  "react-dom": "^18",
42
40
  "vite": ">=5 <8",
43
- "@qwik.dev/core": "^2.0.0-beta.13"
41
+ "@qwik.dev/core": "^2.0.0-beta.15"
44
42
  },
45
43
  "publishConfig": {
46
44
  "access": "public"
@@ -1,272 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
4
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
6
- const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
7
- const core = require("@qwik.dev/core");
8
- const internal = require("@qwik.dev/core/internal");
9
- const server = require("react-dom/server");
10
- const react = require("react");
11
- const client = require("react-dom/client");
12
- const reactDom = require("react-dom");
13
- const SlotCtx = react.createContext({
14
- scopeId: ""
15
- });
16
- function main(slotEl, scopeId, RootCmp, props) {
17
- const newProps = getReactProps(props);
18
- return mainExactProps(slotEl, scopeId, RootCmp, newProps);
19
- }
20
- function mainExactProps(slotEl, scopeId, RootCmp, props) {
21
- return react.createElement(SlotCtx.Provider, {
22
- value: {
23
- el: slotEl,
24
- scopeId,
25
- attachedEl: void 0
26
- },
27
- children: react.createElement(RootCmp, {
28
- ...props,
29
- children: react.createElement(SlotElement, null)
30
- })
31
- });
32
- }
33
- class SlotElement extends react.Component {
34
- constructor() {
35
- super(...arguments);
36
- __publicField(this, "slotC", react.createRef());
37
- }
38
- shouldComponentUpdate() {
39
- return false;
40
- }
41
- componentDidMount() {
42
- const slotC = this.slotC.current;
43
- if (slotC) {
44
- const { attachedEl, el } = this.context;
45
- if (el) {
46
- if (!attachedEl) {
47
- slotC.appendChild(el);
48
- } else if (attachedEl !== slotC) {
49
- throw new Error("already attached");
50
- }
51
- }
52
- }
53
- }
54
- render() {
55
- return react.createElement("q-slotc", {
56
- class: this.context.scopeId,
57
- suppressHydrationWarning: true,
58
- dangerouslySetInnerHTML: {
59
- __html: "<!--SLOT-->"
60
- },
61
- ref: this.slotC
62
- });
63
- }
64
- }
65
- __publicField(SlotElement, "contextType", SlotCtx);
66
- const getReactProps = (props) => {
67
- const obj = {};
68
- Object.keys(props).forEach((key) => {
69
- if (!key.startsWith("client:") && !key.startsWith("qwik:") && !key.startsWith(HOST_PREFIX)) {
70
- const normalizedKey = key.endsWith("$") ? key.slice(0, -1) : key;
71
- obj[normalizedKey] = props[key];
72
- }
73
- });
74
- return obj;
75
- };
76
- const getHostProps = (props) => {
77
- const obj = {};
78
- Object.keys(props).forEach((key) => {
79
- if (key.startsWith(HOST_PREFIX)) {
80
- obj[key.slice(HOST_PREFIX.length)] = props[key];
81
- }
82
- });
83
- return obj;
84
- };
85
- const useWakeupSignal = (props, opts = {}) => {
86
- const signal = core.useSignal(false);
87
- const activate = core.$(() => signal.value = true);
88
- const clientOnly = !!(props["client:only"] || props["qwik:only"] || opts?.clientOnly);
89
- const clientVisible = props["client:visible"] || props["qwik:visible"] || opts?.eagerness === "visible";
90
- const clientIdle = props["client:idle"] || props["qwik:idle"] || opts?.eagerness === "idle";
91
- const clientLoad = props["client:load"] || props["qwik:load"] || clientOnly || opts?.eagerness === "load";
92
- const clientHover = props["client:hover"] || props["qwik:hover"] || opts?.eagerness === "hover";
93
- const clientEvent = props["client:event"] || props["qwik:event"];
94
- if (core.isServer) {
95
- if (clientVisible) {
96
- core.useOn("qvisible", activate);
97
- }
98
- if (clientIdle) {
99
- core.useOnDocument("qidle", activate);
100
- }
101
- if (clientLoad) {
102
- core.useOnDocument("qinit", activate);
103
- }
104
- if (clientHover) {
105
- core.useOn("mouseover", activate);
106
- }
107
- if (clientEvent) {
108
- core.useOn(clientEvent, activate);
109
- }
110
- if (opts?.event) {
111
- core.useOn(opts?.event, activate);
112
- }
113
- }
114
- return [
115
- signal,
116
- clientOnly,
117
- activate
118
- ];
119
- };
120
- const HOST_PREFIX = "host:";
121
- async function renderFromServer(Host, reactCmp$, scopeId, props, ref, slotRef, hydrationProps) {
122
- if (core.isServer) {
123
- const Cmp = await reactCmp$.resolve();
124
- const newProps = getReactProps(props);
125
- Object.assign(hydrationProps, newProps);
126
- const html = server.renderToString(mainExactProps(void 0, scopeId, Cmp, newProps));
127
- const index = html.indexOf("<!--SLOT-->");
128
- if (index > 0) {
129
- const part1 = html.slice(0, index);
130
- const part2 = html.slice(index + "<!--SLOT-->".length);
131
- return /* @__PURE__ */ jsxRuntime.jsx(Host, {
132
- ref,
133
- ...getHostProps(props),
134
- children: /* @__PURE__ */ jsxRuntime.jsx(internal.SSRStream, {
135
- children: async function* () {
136
- yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
137
- data: "q:ignore"
138
- });
139
- yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRRaw, {
140
- data: part1
141
- });
142
- yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
143
- data: "q:container-island"
144
- });
145
- yield /* @__PURE__ */ jsxRuntime.jsx("q-slot", {
146
- ref: slotRef,
147
- children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
148
- });
149
- yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
150
- data: "/q:container-island"
151
- });
152
- yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRRaw, {
153
- data: part2
154
- });
155
- yield /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
156
- data: "/q:ignore"
157
- });
158
- }
159
- })
160
- });
161
- }
162
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
163
- children: [
164
- /* @__PURE__ */ jsxRuntime.jsxs(Host, {
165
- ref,
166
- children: [
167
- /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
168
- data: "q:container=html"
169
- }),
170
- /* @__PURE__ */ jsxRuntime.jsx(internal.SSRRaw, {
171
- data: html
172
- }),
173
- /* @__PURE__ */ jsxRuntime.jsx(internal.SSRComment, {
174
- data: "/q:container"
175
- })
176
- ]
177
- }),
178
- /* @__PURE__ */ jsxRuntime.jsx("q-slot", {
179
- ref: slotRef,
180
- children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
181
- })
182
- ]
183
- });
184
- }
185
- }
186
- function qwikifyQrl(reactCmp$, opts) {
187
- return core.component$((props) => {
188
- const { scopeId } = core.useStylesScoped$(`q-slot{display:none} q-slotc,q-slotc>q-slot{display:contents}`);
189
- const hostRef = core.useSignal();
190
- const slotRef = core.useSignal();
191
- const internalState = core.useSignal();
192
- const [signal, isClientOnly] = useWakeupSignal(props, opts);
193
- const hydrationKeys = core.useStore({});
194
- const TagName = opts?.tagName ?? "qwik-react";
195
- core.useTask$(async ({ track }) => {
196
- const trackedProps = track(() => ({
197
- ...props
198
- }));
199
- track(signal);
200
- if (!core.isBrowser) {
201
- return;
202
- }
203
- if (internalState.value) {
204
- if (internalState.value.root) {
205
- internalState.value.root.render(main(slotRef.value, scopeId, internalState.value.cmp, trackedProps));
206
- }
207
- } else {
208
- let root = void 0;
209
- const Cmp = await reactCmp$.resolve();
210
- const hostElement = hostRef.value;
211
- if (hostElement) {
212
- if (isClientOnly) {
213
- root = client.createRoot(hostElement);
214
- } else {
215
- root = reactDom.flushSync(() => {
216
- return client.hydrateRoot(hostElement, mainExactProps(slotRef.value, scopeId, Cmp, hydrationKeys));
217
- });
218
- }
219
- if (isClientOnly || signal.value === false) {
220
- root.render(main(slotRef.value, scopeId, Cmp, trackedProps));
221
- }
222
- }
223
- internalState.value = core.noSerialize({
224
- cmp: Cmp,
225
- root
226
- });
227
- }
228
- });
229
- core.useTask$(({ track, cleanup }) => {
230
- track(signal);
231
- if (core.isBrowser) {
232
- cleanup(() => {
233
- internalState.value?.root?.unmount();
234
- });
235
- }
236
- });
237
- if (core.isServer && !isClientOnly) {
238
- const jsx = renderFromServer(TagName, reactCmp$, scopeId, props, hostRef, slotRef, hydrationKeys);
239
- return /* @__PURE__ */ jsxRuntime.jsx(core.RenderOnce, {
240
- children: jsx
241
- }, 2);
242
- }
243
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
244
- children: [
245
- /* @__PURE__ */ jsxRuntime.jsx(TagName, {
246
- ...getHostProps(props),
247
- ref: (el) => {
248
- if (core.isBrowser) {
249
- queueMicrotask(() => {
250
- const internalData = internalState.value;
251
- if (internalData && !internalData.root) {
252
- const root = internalData.root = client.createRoot(el);
253
- root.render(main(slotRef.value, scopeId, internalData.cmp, props));
254
- }
255
- });
256
- } else {
257
- hostRef.value = el;
258
- }
259
- },
260
- children: core.SkipRender
261
- }),
262
- /* @__PURE__ */ jsxRuntime.jsx("q-slot", {
263
- ref: slotRef,
264
- children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
265
- })
266
- ]
267
- });
268
- });
269
- }
270
- const qwikify$ = /* @__PURE__ */ core.implicit$FirstArg(qwikifyQrl);
271
- exports.qwikify$ = qwikify$;
272
- exports.qwikifyQrl = qwikifyQrl;
package/lib/vite.cjs DELETED
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- function qwikReact() {
4
- const OPTIMIZE_DEPS = [
5
- "react",
6
- "react-dom",
7
- "react-dom/client",
8
- "react-dom/server",
9
- "react/jsx-runtime",
10
- "react/jsx-dev-runtime"
11
- ];
12
- const DEDUPE = [
13
- "react",
14
- "react-dom"
15
- ];
16
- return {
17
- name: "vite-plugin-qwik-react",
18
- config() {
19
- return {
20
- resolve: {
21
- dedupe: DEDUPE
22
- },
23
- optimizeDeps: {
24
- include: OPTIMIZE_DEPS
25
- }
26
- };
27
- }
28
- };
29
- }
30
- exports.qwikReact = qwikReact;