Skip to content

Commit 66529fc

Browse files
wmertenswmertens
authored
Merge pull request #7217 from QwikDev/v2-fix-wrapeed-indentifiers
fix: convert destructured array's props to signal
2 parents 42a6c35 + decee40 commit 66529fc

File tree

5 files changed

+412
-11
lines changed

5 files changed

+412
-11
lines changed

‎.changeset/unlucky-dodos-grab.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@qwik.dev/core': patch
3+
---
4+
5+
fix: convert destructured array's props to signal

‎packages/qwik/src/core/shared/platform/platform.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { QError, qError } from '../error/error';
44
import { getSymbolHash } from '../qrl/qrl-class';
55
import { qDynamicPlatform } from '../utils/qdev';
66
import type { CorePlatform } from './types';
7+
import { QBaseAttr } from '../utils/markers';
78

89
export const createPlatform = (): CorePlatform => {
910
return {
@@ -65,7 +66,7 @@ export const createPlatform = (): CorePlatform => {
6566
*/
6667
export const toUrl = (doc: Document, containerEl: Element, url: string | URL): URL => {
6768
const baseURI = doc.baseURI;
68-
const base = new URL(containerEl.getAttribute('q:base') ?? baseURI, baseURI);
69+
const base = new URL(containerEl.getAttribute(QBaseAttr) ?? baseURI, baseURI);
6970
return new URL(url, base);
7071
};
7172

‎packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__should_wrap_prop_from_destructured_array.snap

+256
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
---
2+
source: packages/qwik/src/optimizer/core/src/test.rs
3+
assertion_line: 4118
4+
expression: output
5+
snapshot_kind: text
6+
---
7+
==INPUT==
8+
9+
10+
import { component$, useStore, useTask$ } from '@qwik.dev/core';
11+
import { useForm, useForm2 } from './some-file.ts';
12+
13+
export const Input = component$<{error: string, error2: string, error3: string}>(
14+
(props) => {
15+
useTask$(({ track }) => {
16+
track(() => props.error);
17+
track(() => props.error2);
18+
track(() => props.error3);
19+
});
20+
21+
return (
22+
<>
23+
</>
24+
);
25+
}
26+
);
27+
28+
export default component$(() => {
29+
const [store, math] = [useStore({errors: {}}), Math.random()];
30+
const [[store2]] = [[useStore({errors: {}})]];
31+
const { store3, math4 } = { store3: useStore({errors: {}}), math4: Math.random() };
32+
const math2 = [Math.random()];
33+
const { math3 } = { math3: Math.random() };
34+
const [store4] = useForm();
35+
const {store5} = useForm2();
36+
37+
return (
38+
<div>
39+
<button onClick$={() => {
40+
store.errors.test = store.errors.test ? undefined : 'ERROR TEST';
41+
}}>click</button>
42+
<Input
43+
error={store.errors.test}
44+
error2={store2.errors.test}
45+
error3={store3.errors.test}
46+
error4={store4.errors.test}
47+
error5={store5.errors.test}
48+
math={math}
49+
math2={math2}
50+
math3={math3}
51+
math4={math4}
52+
/>
53+
</div>
54+
);
55+
});
56+
57+
============================= test.js ==
58+
59+
import { componentQrl } from "@qwik.dev/core";
60+
import { qrl } from "@qwik.dev/core";
61+
export const Input = /*#__PURE__*/ componentQrl(/*#__PURE__*/ qrl(()=>import("./test.tsx_Input_component_9metqqaxlN8"), "Input_component_9metqqaxlN8"));
62+
export default /*#__PURE__*/ componentQrl(/*#__PURE__*/ qrl(()=>import("./test.tsx_test_component_LUXeXe0DQrg"), "test_component_LUXeXe0DQrg"));
63+
64+
65+
Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;AAIE,OAAO,MAAM,sBAAQ,qHAanB;AAEF,6BAAe,mHA2BZ\"}")
66+
============================= test.tsx_test_component_LUXeXe0DQrg.js (ENTRY POINT)==
67+
68+
import { Input } from "./test";
69+
import { _fnSignal } from "@qwik.dev/core";
70+
import { _jsxSorted } from "@qwik.dev/core";
71+
import { qrl } from "@qwik.dev/core";
72+
import { useForm } from "./some-file.ts";
73+
import { useForm2 } from "./some-file.ts";
74+
import { useStore } from "@qwik.dev/core";
75+
export const test_component_LUXeXe0DQrg = ()=>{
76+
const [store, math] = [
77+
useStore({
78+
errors: {}
79+
}),
80+
Math.random()
81+
];
82+
const [[store2]] = [
83+
[
84+
useStore({
85+
errors: {}
86+
})
87+
]
88+
];
89+
const { store3, math4 } = {
90+
store3: useStore({
91+
errors: {}
92+
}),
93+
math4: Math.random()
94+
};
95+
const math2 = [
96+
Math.random()
97+
];
98+
const { math3 } = {
99+
math3: Math.random()
100+
};
101+
const [store4] = useForm();
102+
const form2 = useForm2();
103+
return /*#__PURE__*/ _jsxSorted("div", null, null, [
104+
/*#__PURE__*/ _jsxSorted("button", null, {
105+
onClick$: /*#__PURE__*/ qrl(()=>import("./test.tsx_test_component_div_button_onClick_TfpwI5Xb2NU"), "test_component_div_button_onClick_TfpwI5Xb2NU", [
106+
store
107+
])
108+
}, "click", 3, null),
109+
/*#__PURE__*/ _jsxSorted(Input, {
110+
math: math,
111+
math2: math2,
112+
math3: math3,
113+
math4: math4
114+
}, {
115+
error: _fnSignal((p0)=>p0.errors.test, [
116+
store
117+
], "p0.errors.test"),
118+
error2: _fnSignal((p0)=>p0.errors.test, [
119+
store2
120+
], "p0.errors.test"),
121+
error3: _fnSignal((p0)=>p0.errors.test, [
122+
store3
123+
], "p0.errors.test"),
124+
error4: _fnSignal((p0)=>p0.errors.test, [
125+
store4
126+
], "p0.errors.test"),
127+
error5: _fnSignal((p0)=>p0.store5.errors.test, [
128+
form2
129+
], "p0.store5.errors.test")
130+
}, null, 3, "u6_1")
131+
], 1, "u6_2");
132+
};
133+
134+
135+
Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;;;0CAmB4B;IACzB,MAAM,CAAC,OAAO,KAAK,GAAG;QAAC,SAAS;YAAC,QAAQ,CAAC;QAAC;QAAI,KAAK,MAAM;KAAG;IAC7D,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG;QAAC;YAAC,SAAS;gBAAC,QAAQ,CAAC;YAAC;SAAG;KAAC;IAC7C,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;QAAE,QAAQ,SAAS;YAAC,QAAQ,CAAC;QAAC;QAAI,OAAO,KAAK,MAAM;IAAG;IACjF,MAAM,QAAQ;QAAC,KAAK,MAAM;KAAG;IAC7B,MAAM,EAAE,KAAK,EAAE,GAAG;QAAE,OAAO,KAAK,MAAM;IAAG;IACzC,MAAM,CAAC,OAAO,GAAG;IACjB,MAAM,QAAW;IAEjB,qBACC,WAAC;sBACA,WAAC;YAAO,QAAQ;;;WAEb;sBACH,WAAC;YAMA,MAAM;YACN,OAAO;YACP,OAAO;YACP,OAAO;;YARP,KAAK,kBAAE,GAAM,MAAM,CAAC,IAAI;;;YACxB,MAAM,kBAAE,GAAO,MAAM,CAAC,IAAI;;;YAC1B,MAAM,kBAAE,GAAO,MAAM,CAAC,IAAI;;;YAC1B,MAAM,kBAAE,GAAO,MAAM,CAAC,IAAI;;;YAC1B,MAAM,kBAAE,GAZJ,OAYW,MAAM,CAAC,IAAI;;;;;AAQ9B\"}")
136+
/*
137+
{
138+
"origin": "test.tsx",
139+
"name": "test_component_LUXeXe0DQrg",
140+
"entry": null,
141+
"displayName": "test.tsx_test_component",
142+
"hash": "LUXeXe0DQrg",
143+
"canonicalFilename": "test.tsx_test_component_LUXeXe0DQrg",
144+
"path": "",
145+
"extension": "js",
146+
"parent": null,
147+
"ctxKind": "function",
148+
"ctxName": "component$",
149+
"captures": false,
150+
"loc": [
151+
434,
152+
1225
153+
]
154+
}
155+
*/
156+
============================= test.tsx_test_component_div_button_onClick_TfpwI5Xb2NU.js (ENTRY POINT)==
157+
158+
import { useLexicalScope } from "@qwik.dev/core";
159+
export const test_component_div_button_onClick_TfpwI5Xb2NU = ()=>{
160+
const [store] = useLexicalScope();
161+
store.errors.test = store.errors.test ? undefined : 'ERROR TEST';
162+
};
163+
164+
165+
Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";6DA8BuB;;IACjB,MAAM,MAAM,CAAC,IAAI,GAAG,MAAM,MAAM,CAAC,IAAI,GAAG,YAAY\"}")
166+
/*
167+
{
168+
"origin": "test.tsx",
169+
"name": "test_component_div_button_onClick_TfpwI5Xb2NU",
170+
"entry": null,
171+
"displayName": "test.tsx_test_component_div_button_onClick",
172+
"hash": "TfpwI5Xb2NU",
173+
"canonicalFilename": "test.tsx_test_component_div_button_onClick_TfpwI5Xb2NU",
174+
"path": "",
175+
"extension": "js",
176+
"parent": "test_component_LUXeXe0DQrg",
177+
"ctxKind": "eventHandler",
178+
"ctxName": "onClick$",
179+
"captures": true,
180+
"loc": [
181+
835,
182+
921
183+
]
184+
}
185+
*/
186+
============================= test.tsx_Input_component_useTask_Sbgs9Wtfkt0.js (ENTRY POINT)==
187+
188+
import { useLexicalScope } from "@qwik.dev/core";
189+
export const Input_component_useTask_Sbgs9Wtfkt0 = ({ track })=>{
190+
const [props] = useLexicalScope();
191+
track(()=>props.error);
192+
track(()=>props.error2);
193+
track(()=>props.error3);
194+
};
195+
export { _hW } from "@qwik.dev/core";
196+
197+
198+
Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";mDAMa,CAAC,EAAE,KAAK,EAAE;;IAClB,MAAM,IAAM,MAAM,KAAK;IACvB,MAAM,IAAM,MAAM,MAAM;IACxB,MAAM,IAAM,MAAM,MAAM\"}")
199+
/*
200+
{
201+
"origin": "test.tsx",
202+
"name": "Input_component_useTask_Sbgs9Wtfkt0",
203+
"entry": null,
204+
"displayName": "test.tsx_Input_component_useTask",
205+
"hash": "Sbgs9Wtfkt0",
206+
"canonicalFilename": "test.tsx_Input_component_useTask_Sbgs9Wtfkt0",
207+
"path": "",
208+
"extension": "js",
209+
"parent": "Input_component_9metqqaxlN8",
210+
"ctxKind": "function",
211+
"ctxName": "useTask$",
212+
"captures": true,
213+
"loc": [
214+
237,
215+
354
216+
]
217+
}
218+
*/
219+
============================= test.tsx_Input_component_9metqqaxlN8.js (ENTRY POINT)==
220+
221+
import { Fragment as _Fragment } from "@qwik.dev/core/jsx-runtime";
222+
import { _jsxSorted } from "@qwik.dev/core";
223+
import { qrl } from "@qwik.dev/core";
224+
import { useTaskQrl } from "@qwik.dev/core";
225+
export const Input_component_9metqqaxlN8 = (props)=>{
226+
useTaskQrl(/*#__PURE__*/ qrl(()=>import("./test.tsx_Input_component_useTask_Sbgs9Wtfkt0"), "Input_component_useTask_Sbgs9Wtfkt0", [
227+
props
228+
]));
229+
return /*#__PURE__*/ _jsxSorted(_Fragment, null, null, null, 3, "u6_0");
230+
};
231+
232+
233+
Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;2CAKG,CAAC;IACA;;;IAMA,qBACC;AAGF\"}")
234+
/*
235+
{
236+
"origin": "test.tsx",
237+
"name": "Input_component_9metqqaxlN8",
238+
"entry": null,
239+
"displayName": "test.tsx_Input_component",
240+
"hash": "9metqqaxlN8",
241+
"canonicalFilename": "test.tsx_Input_component_9metqqaxlN8",
242+
"path": "",
243+
"extension": "js",
244+
"parent": null,
245+
"ctxKind": "function",
246+
"ctxName": "component$",
247+
"captures": false,
248+
"loc": [
249+
211,
250+
399
251+
]
252+
}
253+
*/
254+
== DIAGNOSTICS ==
255+
256+
[]

‎packages/qwik/src/optimizer/core/src/test.rs

+58
Original file line numberDiff line numberDiff line change
@@ -4113,6 +4113,64 @@ export default component$((props: { id: number }) => {
41134113
});
41144114
}
41154115

4116+
#[test]
4117+
fn should_wrap_prop_from_destructured_array() {
4118+
test_input!(TestInput {
4119+
code: r#"
4120+
import { component$, useStore, useTask$ } from '@qwik.dev/core';
4121+
import { useForm, useForm2 } from './some-file.ts';
4122+
4123+
export const Input = component$<{error: string, error2: string, error3: string}>(
4124+
(props) => {
4125+
useTask$(({ track }) => {
4126+
track(() => props.error);
4127+
track(() => props.error2);
4128+
track(() => props.error3);
4129+
});
4130+
4131+
return (
4132+
<>
4133+
</>
4134+
);
4135+
}
4136+
);
4137+
4138+
export default component$(() => {
4139+
const [store, math] = [useStore({errors: {}}), Math.random()];
4140+
const [[store2]] = [[useStore({errors: {}})]];
4141+
const { store3, math4 } = { store3: useStore({errors: {}}), math4: Math.random() };
4142+
const math2 = [Math.random()];
4143+
const { math3 } = { math3: Math.random() };
4144+
const [store4] = useForm();
4145+
const {store5} = useForm2();
4146+
4147+
return (
4148+
<div>
4149+
<button onClick$={() => {
4150+
store.errors.test = store.errors.test ? undefined : 'ERROR TEST';
4151+
}}>click</button>
4152+
<Input
4153+
error={store.errors.test}
4154+
error2={store2.errors.test}
4155+
error3={store3.errors.test}
4156+
error4={store4.errors.test}
4157+
error5={store5.errors.test}
4158+
math={math}
4159+
math2={math2}
4160+
math3={math3}
4161+
math4={math4}
4162+
/>
4163+
</div>
4164+
);
4165+
});
4166+
"#
4167+
.to_string(),
4168+
transpile_jsx: true,
4169+
transpile_ts: true,
4170+
..TestInput::default()
4171+
});
4172+
}
4173+
41164174
// TODO(misko): Make this test work by implementing strict serialization.
41174175
// #[test]
41184176
// fn example_of_synchronous_qrl_that_cant_be_serialized() {

0 commit comments

Comments
 (0)