fix: avoid conflicting restprops and props names

.changeset/easy-geese-watch.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: convert any destructured props to restProps helper

.changeset/many-forks-ring.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: avoid potential name conflicts with rest props

packages/qwik/src/core/qwik.core.api.md

@@ -900,7 +900,7 @@ export interface ResourceResolved<T> {
 export type ResourceReturn<T> = ResourcePending<T> | ResourceResolved<T> | ResourceRejected<T>;
 
 // @internal (undocumented)
-export const _restProps: (props: PropsProxy, omit: string[], target?: Props) => Props;
+export const _restProps: (props: PropsProxy, omit?: string[], target?: Props) => Props;
 
 // @internal
 export const _run: (...args: unknown[]) => ValueOrPromise<unknown>;

packages/qwik/src/core/shared/utils/prop.ts

@@ -7,7 +7,7 @@ export function isSlotProp(prop: string): boolean {
 }
 
 /** @internal */
-export const _restProps = (props: PropsProxy, omit: string[], target: Props = {}) => {
+export const _restProps = (props: PropsProxy, omit: string[] = [], target: Props = {}) => {
   let constPropsTarget: Props | null = null;
   const constProps = props[_CONST_PROPS];
   if (constProps) {

packages/qwik/src/optimizer/core/src/props_destructuring.rs

@@ -56,13 +56,13 @@ enum TransformInit {
 impl<'a> PropsDestructuring<'a> {
 	fn transform_component_props(&mut self, arrow: &mut ast::ArrowExpr) {
 		if let Some(ast::Pat::Object(obj)) = arrow.params.first() {
-			let new_ident = private_ident!("props");
-			if let Some((rest_id, local)) =
+			let new_ident = private_ident!("_rawProps");
+			if let Some((rest_id_opt, local)) =
 				transform_pat(ast::Expr::Ident(new_ident.clone()), obj, self)
 			{
-				if let Some(rest_id) = rest_id {
+				if let Some(rest_id) = rest_id_opt {
 					let omit_fn = self.global_collect.import(&_REST_PROPS, self.core_module);
-					let omit = local.iter().map(|(_, id, _)| id.clone()).collect();
+					let omit: Vec<JsWord> = local.iter().map(|(_, id, _)| id.clone()).collect();
 					transform_rest(
 						arrow,
 						&omit_fn,
@@ -413,9 +413,10 @@ fn transform_pat(
 			}
 		}
 	}
-	if skip || local.is_empty() {
+	if skip {
 		return None;
 	}
+	// Allow case with only rest binding (no local fields)
 	Some((rest_id, local))
 }
 
@@ -426,7 +427,30 @@ fn transform_rest(
 	props_expr: ast::Expr,
 	omit: Vec<JsWord>,
 ) {
-	let new_stmt = create_omit_props(omit_fn, rest_id, props_expr, omit);
+	let new_stmt = if omit.is_empty() {
+		// const rest = _restProps(rawProps);
+		ast::Stmt::Decl(ast::Decl::Var(Box::new(ast::VarDecl {
+			kind: ast::VarDeclKind::Const,
+			decls: vec![ast::VarDeclarator {
+				definite: false,
+				span: DUMMY_SP,
+				init: Some(Box::new(ast::Expr::Call(ast::CallExpr {
+					callee: ast::Callee::Expr(Box::new(ast::Expr::Ident(new_ident_from_id(
+						omit_fn,
+					)))),
+					args: vec![ast::ExprOrSpread {
+						spread: None,
+						expr: Box::new(props_expr),
+					}],
+					..Default::default()
+				}))),
+				name: ast::Pat::Ident(ast::BindingIdent::from(new_ident_from_id(rest_id))),
+			}],
+			..Default::default()
+		})))
+	} else {
+		create_omit_props(omit_fn, rest_id, props_expr, omit)
+	};
 	match &mut arrow.body {
 		box ast::BlockStmtOrExpr::BlockStmt(block) => {
 			block.stmts.insert(0, new_stmt);

packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__destructure_args_inline_cmp_block_stmt.snap

@@ -24,13 +24,13 @@ import { _fnSignal } from "@qwik.dev/core";
 import { qrl } from "@qwik.dev/core";
 import { _jsxSorted } from "@qwik.dev/core";
 const i_GbMO6TGQv9M = ()=>import("./test.tsx_test_div_onClick_GbMO6TGQv9M");
-export default ((props)=>{
+export default ((_rawProps)=>{
     return /*#__PURE__*/ _jsxSorted("div", {
         "data-is-active": _fnSignal((p0)=>p0.data.selectedOutputDetail === 'options', [
-            props
+            _rawProps
         ], 'p0.data.selectedOutputDetail==="options"'),
         onClick$: /*#__PURE__*/ qrl(i_GbMO6TGQv9M, "test_div_onClick_GbMO6TGQv9M", [
-            props
+            _rawProps
         ])
     }, null, null, 2, "u6_0");
 });
@@ -41,12 +41,12 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
 
 import { useLexicalScope } from "@qwik.dev/core";
 export const test_div_onClick_GbMO6TGQv9M = ()=>{
-    const [props] = useLexicalScope();
-    props.data.selectedOutputDetail = 'options';
+    const [_rawProps] = useLexicalScope();
+    _rawProps.data.selectedOutputDetail = 'options';
 };
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";4CAKwB;;IACR,MALI,KAKC,oBAAoB,GAAG\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";4CAKwB;;IACR,UALI,KAKC,oBAAoB,GAAG\"}")
 /*
 {
   "origin": "test.tsx",
@@ -66,7 +66,7 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
     259
   ],
   "captureNames": [
-    "props"
+    "_rawProps"
   ]
 }
 */

packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__destructure_args_inline_cmp_expr_stmt.snap

@@ -21,27 +21,27 @@ import { _fnSignal } from "@qwik.dev/core";
 import { qrl } from "@qwik.dev/core";
 import { _jsxSorted } from "@qwik.dev/core";
 const i_GbMO6TGQv9M = ()=>import("./test.tsx_test_div_onClick_GbMO6TGQv9M");
-export default ((props)=>/*#__PURE__*/ _jsxSorted("div", {
+export default ((_rawProps)=>/*#__PURE__*/ _jsxSorted("div", {
         "data-is-active": _fnSignal((p0)=>p0.data.selectedOutputDetail === 'options', [
-            props
+            _rawProps
         ], 'p0.data.selectedOutputDetail==="options"'),
         onClick$: /*#__PURE__*/ qrl(i_GbMO6TGQv9M, "test_div_onClick_GbMO6TGQv9M", [
-            props
+            _rawProps
         ])
     }, null, null, 2, "u6_0"));
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;AACE,eAAe,CAAA,uBACL,WAAC;QACC,gBAAc,kBAAE,GAFV,KAEe,oBAAoB,KAAK;;;QAC9C,QAAQ;;;6BAGT,EAAE\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;AACE,eAAe,CAAA,2BACL,WAAC;QACC,gBAAc,kBAAE,GAFV,KAEe,oBAAoB,KAAK;;;QAC9C,QAAQ;;;6BAGT,EAAE\"}")
 ============================= test.tsx_test_div_onClick_GbMO6TGQv9M.js (ENTRY POINT)==
 
 import { useLexicalScope } from "@qwik.dev/core";
 export const test_div_onClick_GbMO6TGQv9M = ()=>{
-    const [props] = useLexicalScope();
-    props.data.selectedOutputDetail = 'options';
+    const [_rawProps] = useLexicalScope();
+    _rawProps.data.selectedOutputDetail = 'options';
 };
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";4CAIwB;;IACR,MAJI,KAIC,oBAAoB,GAAG\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";4CAIwB;;IACR,UAJI,KAIC,oBAAoB,GAAG\"}")
 /*
 {
   "origin": "test.tsx",
@@ -61,7 +61,7 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
     238
   ],
   "captureNames": [
-    "props"
+    "_rawProps"
   ]
 }
 */

packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_dead_code.snap

@@ -23,7 +23,7 @@ export const Foo = component$(({foo}) => {
 
 ============================= test.tsx_Foo_component_HTDRsvUbLiE.tsx (ENTRY POINT)==
 
-export const Foo_component_HTDRsvUbLiE = (props)=>{
+export const Foo_component_HTDRsvUbLiE = (_rawProps)=>{
     useMount$(()=>{});
     return <div/>;
 };
@@ -49,7 +49,7 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
     199
   ],
   "paramNames": [
-    "props"
+    "_rawProps"
   ]
 }
 */

packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_invalid_references.snap

@@ -61,7 +61,7 @@ import { _auto_I8 as I8 } from "./test";
 import { _auto_I9 as I9 } from "./test";
 import { qrl } from "@qwik.dev/core";
 const i_w0t0o3QMovU = ()=>import("./test.tsx_App_component_1_w0t0o3QMovU");
-export const App_component_ckEPmXZlub0 = (props)=>{
+export const App_component_ckEPmXZlub0 = (_rawProps)=>{
     console.log(I1, I2, I3, I4, I5, I6, I7, I8, I9);
     console.log(itsok, v1, v2, v3, obj);
     return /*#__PURE__*/ qrl(i_w0t0o3QMovU, "App_component_1_w0t0o3QMovU");
@@ -88,7 +88,7 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
     346
   ],
   "paramNames": [
-    "props"
+    "_rawProps"
   ]
 }
 */

packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_issue_33443.snap

@@ -35,13 +35,13 @@ const Issue3742_component_div_button_onClick_a504K2BCEXg = ()=>{
     const [counter] = useLexicalScope();
     return counter.value++;
 };
-const Issue3742_component_svSy0PlWTAw = (props)=>{
+const Issue3742_component_svSy0PlWTAw = (_rawProps)=>{
     const counter = useSignal(0);
     return /*#__PURE__*/ _jsxSorted("div", {
-        title: _fnSignal((p0, p1)=>(p1.description ?? '') && 'description' in p1.other ? `Hello ${p0.value}` : `Bye ${p0.value}`, [
-            counter,
-            props
-        ], '(p1.description??"")&&"description"in p1.other?`Hello ${p0.value}`:`Bye ${p0.value}`')
+        title: _fnSignal((p0, p1)=>(p0.description ?? '') && 'description' in p0.other ? `Hello ${p1.value}` : `Bye ${p1.value}`, [
+            _rawProps,
+            counter
+        ], '(p0.description??"")&&"description"in p0.other?`Hello ${p1.value}`:`Bye ${p1.value}`')
     }, null, [
         "Issue3742",
         /*#__PURE__*/ _jsxSorted("button", null, {

packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_lightweight_functional.snap

@@ -72,12 +72,12 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
 
 import { useLexicalScope } from "@qwik.dev/core";
 export const ButtonArrow_button_onClick_9npo43fIGik = ()=>{
-    const [props] = useLexicalScope();
-    return console.log(props.text, props.color);
+    const [_rawProps] = useLexicalScope();
+    return console.log(_rawProps.text, _rawProps.color);
 };
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";sDAsBqC;;WAAI,QAAQ,GAAG,OAFvB,YAAM\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";sDAsBqC;;WAAI,QAAQ,GAAG,WAFvB,gBAAM\"}")
 /*
 {
   "origin": "test.tsx",
@@ -97,7 +97,7 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
     473
   ],
   "captureNames": [
-    "props"
+    "_rawProps"
   ]
 }
 */
@@ -151,14 +151,14 @@ export function Button({ text, color }) {
         text
     ])}>{text}</button>;
 }
-export const ButtonArrow = (props)=>{
-    return <button onColor$={props.color} onClick$={/*#__PURE__*/ qrl(i_9npo43fIGik, "ButtonArrow_button_onClick_9npo43fIGik", [
-        props
-    ])}>{props.text}</button>;
+export const ButtonArrow = (_rawProps)=>{
+    return <button onColor$={_rawProps.color} onClick$={/*#__PURE__*/ qrl(i_9npo43fIGik, "ButtonArrow_button_onClick_9npo43fIGik", [
+        _rawProps
+    ])}>{_rawProps.text}</button>;
 };
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAGA,OAAO,MAAM,oBAAM,4EAOhB;IACF,SAAS;AACV,GAAG;AAEH,OAAO,SAAS,OAAO,EAAC,IAAI,EAAE,KAAK,EAAC;IACnC,QACE,OAAO,UAAU,OAAO;;;SAAyC,OAAO;AAE3E;AAEA,OAAO,MAAM,cAAc;IAC1B,QACE,OAAO,gBAFyB,OAER;;eAFE,OAE8C;AAE3E,EAAC\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAGA,OAAO,MAAM,oBAAM,4EAOhB;IACF,SAAS;AACV,GAAG;AAEH,OAAO,SAAS,OAAO,EAAC,IAAI,EAAE,KAAK,EAAC;IACnC,QACE,OAAO,UAAU,OAAO;;;SAAyC,OAAO;AAE3E;AAEA,OAAO,MAAM,cAAc;IAC1B,QACE,OAAO,oBAFyB,OAER;;mBAFE,OAE8C;AAE3E,EAAC\"}")
 == DIAGNOSTICS ==
 
 []

packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_multi_capture.snap

@@ -35,9 +35,9 @@ export const Bar = component$(({bar}) => {
 
 import { qrl } from "@qwik.dev/core";
 const i_DvU6FitWglY = ()=>import("./test.tsx_Foo_component_1_DvU6FitWglY");
-export const Foo_component_HTDRsvUbLiE = (props)=>{
+export const Foo_component_HTDRsvUbLiE = (_rawProps)=>{
     return /*#__PURE__*/ qrl(i_DvU6FitWglY, "Foo_component_1_DvU6FitWglY", [
-        props
+        _rawProps
     ]);
 };
 
@@ -62,7 +62,7 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
     221
   ],
   "paramNames": [
-    "props"
+    "_rawProps"
   ]
 }
 */
@@ -81,9 +81,9 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
 
 import { qrl } from "@qwik.dev/core";
 const i_0xSyNSnVu3k = ()=>import("./test.tsx_Bar_component_1_0xSyNSnVu3k");
-export const Bar_component_L80pS8Hxf1Y = (props)=>{
+export const Bar_component_L80pS8Hxf1Y = (_rawProps)=>{
     return /*#__PURE__*/ qrl(i_0xSyNSnVu3k, "Bar_component_1_0xSyNSnVu3k", [
-        props
+        _rawProps
     ]);
 };
 
@@ -108,23 +108,23 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
     335
   ],
   "paramNames": [
-    "props"
+    "_rawProps"
   ]
 }
 */
 ============================= test.tsx_Foo_component_1_DvU6FitWglY.jsx (ENTRY POINT)==
 
 import { useLexicalScope } from "@qwik.dev/core";
 export const Foo_component_1_DvU6FitWglY = ()=>{
-    const [props] = useLexicalScope();
+    const [_rawProps] = useLexicalScope();
     const fn = ({ aaa })=>aaa;
     return <div>
-				{props.foo}{fn()}{20}
+				{_rawProps.foo}{fn()}{20}
 			</div>;
 };
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";2CAKU;;IACR,MAAM,KAAK,CAAC,EAAC,GAAG,EAAC,GAAK;IACtB,QACE,IAAI;IACJ,OAN4B,KAMtB,MALI,GAKO;GAClB,EAAE\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";2CAKU;;IACR,MAAM,KAAK,CAAC,EAAC,GAAG,EAAC,GAAK;IACtB,QACE,IAAI;IACJ,WAN4B,KAMtB,MALI,GAKO;GAClB,EAAE\"}")
 /*
 {
   "origin": "test.tsx",
@@ -144,22 +144,22 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
     217
   ],
   "captureNames": [
-    "props"
+    "_rawProps"
   ]
 }
 */
 ============================= test.tsx_Bar_component_1_0xSyNSnVu3k.jsx (ENTRY POINT)==
 
 import { useLexicalScope } from "@qwik.dev/core";
 export const Bar_component_1_0xSyNSnVu3k = ()=>{
-    const [props] = useLexicalScope();
+    const [_rawProps] = useLexicalScope();
     return <div>
-				{props.bar}
+				{_rawProps.bar}
 			</div>;
 };
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";2CAgBU;;IACR,QACE,IAAI;IACJ,OAJ4B,IAIvB;GACN,EAAE\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";2CAgBU;;IACR,QACE,IAAI;IACJ,WAJ4B,IAIvB;GACN,EAAE\"}")
 /*
 {
   "origin": "test.tsx",
@@ -179,7 +179,7 @@ Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"ma
     331
   ],
   "captureNames": [
-    "props"
+    "_rawProps"
   ]
 }
 */