fix: component props as var props

.changeset/fuzzy-jobs-compare.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: component props as var props

packages/qwik/src/core/tests/use-store.spec.tsx

@@ -395,8 +395,8 @@ describe.each([
 
       expect(vNode).toMatchVDOM(
         <Component ssr-required>
-          <InlineComponent ssr-required>
-            <InlineComponent ssr-required>
+          <InlineComponent>
+            <InlineComponent>
               <button class="repl-tab-button">Options</button>
             </InlineComponent>
           </InlineComponent>
@@ -407,8 +407,8 @@ describe.each([
 
       expect(vNode).toMatchVDOM(
         <Component ssr-required>
-          <InlineComponent ssr-required>
-            <InlineComponent ssr-required>
+          <InlineComponent>
+            <InlineComponent>
               <button class="active-tab repl-tab-button">Options</button>
             </InlineComponent>
           </InlineComponent>

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

@@ -8,6 +8,7 @@ use swc_ecmascript::ast;
 use swc_ecmascript::codegen::text_writer::JsWriter;
 use swc_ecmascript::transforms::fixer;
 use swc_ecmascript::transforms::hygiene::hygiene_with_config;
+use swc_ecmascript::visit::{Visit, VisitWith};
 use swc_ecmascript::{
 	utils::private_ident,
 	visit::{VisitMut, VisitMutWith},
@@ -26,6 +27,7 @@ pub fn convert_inlined_fn(
 	qqsegment: &Id,
 	accept_call_expr: bool,
 	serialize_fn: bool,
+	is_const: bool,
 ) -> (Option<ast::Expr>, bool) {
 	let mut identifiers = HashMap::new();
 	let params: Vec<ast::Pat> = scoped_idents
@@ -42,20 +44,26 @@ pub fn convert_inlined_fn(
 		.collect();
 
 	if matches!(expr, ast::Expr::Arrow(_)) {
-		return (None, false);
+		return (None, is_const);
+	}
+
+	println!("{:?}", is_used_as_object(&expr, &scoped_idents));
+
+	if !is_used_as_object(&expr, &scoped_idents) {
+		return (None, is_const);
 	}
 
 	// Replace identifier
 	let mut replace_identifiers = ReplaceIdentifiers::new(identifiers, accept_call_expr);
 	expr.visit_mut_with(&mut replace_identifiers);
 
 	if replace_identifiers.abort {
-		return (None, false);
+		return (None, is_const);
 	}
 
 	let rendered_expr = render_expr(&expr);
 	if rendered_expr.len() > 150 {
-		return (None, false);
+		return (None, is_const);
 	}
 
 	if scoped_idents.is_empty() {
@@ -98,7 +106,7 @@ pub fn convert_inlined_fn(
 			args,
 			..Default::default()
 		})),
-		true,
+		is_const,
 	)
 }
 
@@ -199,3 +207,34 @@ pub fn render_expr(expr: &ast::Expr) -> String {
 		.trim_end_matches(';')
 		.to_string()
 }
+
+struct ObjectUsageChecker<'a> {
+	identifiers: &'a Vec<Id>,
+	used_as_object: bool,
+}
+
+impl<'a> Visit for ObjectUsageChecker<'a> {
+	fn visit_member_expr(&mut self, node: &ast::MemberExpr) {
+		if let ast::Expr::Ident(obj_ident) = &*node.obj {
+			for id in self.identifiers {
+				if obj_ident.sym == id.0 {
+					println!("Used as object: {:?}", obj_ident.sym);
+					self.used_as_object = true;
+					return;
+				}
+			}
+		}
+		node.visit_children_with(self);
+	}
+}
+
+fn is_used_as_object(expr: &ast::Expr, identifiers: &Vec<Id>) -> bool {
+	let mut checker = ObjectUsageChecker {
+		identifiers,
+		used_as_object: false,
+	};
+
+	expr.visit_with(&mut checker);
+
+	checker.used_as_object
+}

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

@@ -1,6 +1,6 @@
 ---
 source: packages/qwik/src/optimizer/core/src/test.rs
-assertion_line: 3651
+assertion_line: 3715
 expression: output
 snapshot_kind: text
 ---
@@ -31,7 +31,7 @@ import { Fragment as _Fragment } from "@qwik.dev/core/jsx-runtime";
 import { _jsxSorted } from "@qwik.dev/core";
 import { _wrapProp } from "@qwik.dev/core";
 export const test_component_LUXeXe0DQrg = (props)=>{
-    return /*#__PURE__*/ _jsxSorted(_Fragment, null, null, _wrapProp(props, "bind:value"), 3, "u6_0");
+    return /*#__PURE__*/ _jsxSorted(_Fragment, null, null, _wrapProp(props, "bind:value"), 1, "u6_0");
 };
 
 

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

@@ -40,7 +40,7 @@ export const test_component_LUXeXe0DQrg = (props)=>{
     useSignal(rest['bind:value']);
     return /*#__PURE__*/ _jsxSorted(_Fragment, null, null, _fnSignal((p0)=>p0.test.value, [
         props
-    ], "p0.test.value"), 3, "u6_0");
+    ], "p0.test.value"), 1, "u6_0");
 };
 
 

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

@@ -24,14 +24,14 @@ import { _fnSignal } from "@qwik.dev/core";
 import { qrl } from "@qwik.dev/core";
 import { _jsxSorted } from "@qwik.dev/core";
 export default ((props)=>{
-    return /*#__PURE__*/ _jsxSorted("div", null, {
+    return /*#__PURE__*/ _jsxSorted("div", {
         "data-is-active": _fnSignal((p0)=>p0.data.selectedOutputDetail === 'options', [
             props
         ], 'p0.data.selectedOutputDetail==="options"'),
         onClick$: /*#__PURE__*/ qrl(()=>import("./test.tsx_test_div_onClick_GbMO6TGQv9M"), "test_div_onClick_GbMO6TGQv9M", [
             props
         ])
-    }, null, 3, "u6_0");
+    }, null, null, 2, "u6_0");
 });
 
 

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

@@ -25,14 +25,14 @@ import { _fnSignal } from "@qwik.dev/core";
 import { qrl } from "@qwik.dev/core";
 import { _jsxSorted } from "@qwik.dev/core";
 export default ((props)=>{
-    return /*#__PURE__*/ _jsxSorted("div", null, {
+    return /*#__PURE__*/ _jsxSorted("div", {
         "data-is-active": _fnSignal((p0)=>p0.data.selectedOutputDetail === 'options', [
             props
         ], 'p0.data.selectedOutputDetail==="options"'),
         onClick$: /*#__PURE__*/ qrl(()=>import("./test.tsx_test_div_onClick_GbMO6TGQv9M"), "test_div_onClick_GbMO6TGQv9M", [
             props
         ])
-    }, null, 3, "u6_0");
+    }, null, null, 2, "u6_0");
 });
 
 

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

@@ -20,17 +20,17 @@ snapshot_kind: text
 import { _fnSignal } from "@qwik.dev/core";
 import { qrl } from "@qwik.dev/core";
 import { _jsxSorted } from "@qwik.dev/core";
-export default ((props)=>/*#__PURE__*/ _jsxSorted("div", null, {
+export default ((props)=>/*#__PURE__*/ _jsxSorted("div", {
         "data-is-active": _fnSignal((p0)=>p0.data.selectedOutputDetail === 'options', [
             props
         ], 'p0.data.selectedOutputDetail==="options"'),
         onClick$: /*#__PURE__*/ qrl(()=>import("./test.tsx_test_div_onClick_GbMO6TGQv9M"), "test_div_onClick_GbMO6TGQv9M", [
             props
         ])
-    }, null, 3, "u6_0"));
+    }, 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;;;uBAGT,EAAE\"}")
+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\"}")
 ============================= test.tsx_test_div_onClick_GbMO6TGQv9M.js (ENTRY POINT)==
 
 import { useLexicalScope } from "@qwik.dev/core";

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

@@ -1,6 +1,6 @@
 ---
 source: packages/qwik/src/optimizer/core/src/test.rs
-assertion_line: 3850
+assertion_line: 3979
 expression: output
 snapshot_kind: text
 ---
@@ -291,7 +291,10 @@ export const App_component_ckEPmXZlub0 = ()=>{
                 i,
                 results
             ])
-        }, null, results[i], 0, "u6_1"));
+        }, null, _fnSignal((p0, p1)=>p1[p0], [
+            i,
+            results
+        ], "p1[p0]"), 0, "u6_1"));
         return items;
     }
     function loopForOf(results) {
@@ -315,7 +318,7 @@ export const App_component_ckEPmXZlub0 = ()=>{
         }, null, _fnSignal((p0, p1)=>p1[p0], [
             key,
             results
-        ], "p1[p0]"), 2, "u6_3"));
+        ], "p1[p0]"), 0, "u6_3"));
         return items;
     }
     function loopWhile(results) {
@@ -328,7 +331,10 @@ export const App_component_ckEPmXZlub0 = ()=>{
                     i,
                     results
                 ])
-            }, null, results[i], 0, "u6_4"));
+            }, null, _fnSignal((p0, p1)=>p1[p0], [
+                i,
+                results
+            ], "p1[p0]"), 0, "u6_4"));
             i++;
         }
         return items;
@@ -351,7 +357,7 @@ export const App_component_ckEPmXZlub0 = ()=>{
 };
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;yCAE8B;IACxB,MAAM,OAAO,SAAmB,EAAE;IAClC,MAAM,UAAU,UAAU;QAAC;KAAM;IACjC,SAAS,YAAY,OAAiB;QACpC,OAAO,QAAQ,GAAG,CAAC,CAAC,qBAClB,WAAC;gBACC,QAAQ;;;;qBAIP;IAGP;IACA,SAAS,SAAS,OAAiB;QACjC,MAAM,QAAQ,EAAE;QAChB,IAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,MAAM,EAAE,IAClC,MAAM,IAAI,eACR,WAAC;YACC,QAAQ;;;;;iBAIP,OAAO,CAAC,EAAE;QAIjB,OAAO;IACT;IACA,SAAS,UAAU,OAAiB;QAClC,MAAM,QAAQ,EAAE;QAChB,KAAK,MAAM,QAAQ,QACjB,MAAM,IAAI,eACR,WAAC;YACC,QAAQ;;;;iBAIP;QAIP,OAAO;IACT;IACA,SAAS,UAAU,OAAiB;QAClC,MAAM,QAAQ,EAAE;QAChB,IAAK,MAAM,OAAO,QAChB,MAAM,IAAI,eACR,WAAC;YACC,QAAQ;;;;;qCAIP,EAAO,IAAK;;;;QAInB,OAAO;IACT;IACA,SAAS,UAAU,OAAiB;QAClC,MAAM,QAAQ,EAAE;QAChB,IAAI,IAAI;QACR,MAAO,IAAI,QAAQ,MAAM,CAAE;YACzB,MAAM,IAAI,eACR,WAAC;gBACC,QAAQ;;;;;qBAIP,OAAO,CAAC,EAAE;YAGf;QACF;QACA,OAAO;IACT;IACA,qBACE,WAAC;QACE,QAAQ,KAAK,CAAC,GAAG,CAAC,CAAC,qBAClB,WAAC;gBAEC,QAAQ;;;;;gBADR,IAAG;eAKF;QAGJ,YAAY,QAAQ,KAAK;QACzB,SAAS,QAAQ,KAAK;QACtB,UAAU,QAAQ,KAAK;QACvB,UAAU,QAAQ,KAAK;QACvB,UAAU,QAAQ,KAAK;;AAG9B\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;yCAE8B;IACxB,MAAM,OAAO,SAAmB,EAAE;IAClC,MAAM,UAAU,UAAU;QAAC;KAAM;IACjC,SAAS,YAAY,OAAiB;QACpC,OAAO,QAAQ,GAAG,CAAC,CAAC,qBAClB,WAAC;gBACC,QAAQ;;;;qBAIP;IAGP;IACA,SAAS,SAAS,OAAiB;QACjC,MAAM,QAAQ,EAAE;QAChB,IAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,MAAM,EAAE,IAClC,MAAM,IAAI,eACR,WAAC;YACC,QAAQ;;;;;qCAIP,EAAO,IAAG;;;;QAIjB,OAAO;IACT;IACA,SAAS,UAAU,OAAiB;QAClC,MAAM,QAAQ,EAAE;QAChB,KAAK,MAAM,QAAQ,QACjB,MAAM,IAAI,eACR,WAAC;YACC,QAAQ;;;;iBAIP;QAIP,OAAO;IACT;IACA,SAAS,UAAU,OAAiB;QAClC,MAAM,QAAQ,EAAE;QAChB,IAAK,MAAM,OAAO,QAChB,MAAM,IAAI,eACR,WAAC;YACC,QAAQ;;;;;qCAIP,EAAO,IAAK;;;;QAInB,OAAO;IACT;IACA,SAAS,UAAU,OAAiB;QAClC,MAAM,QAAQ,EAAE;QAChB,IAAI,IAAI;QACR,MAAO,IAAI,QAAQ,MAAM,CAAE;YACzB,MAAM,IAAI,eACR,WAAC;gBACC,QAAQ;;;;;yCAIP,EAAO,IAAG;;;;YAGf;QACF;QACA,OAAO;IACT;IACA,qBACE,WAAC;QACE,QAAQ,KAAK,CAAC,GAAG,CAAC,CAAC,qBAClB,WAAC;gBAEC,QAAQ;;;;;gBADR,IAAG;eAKF;QAGJ,YAAY,QAAQ,KAAK;QACzB,SAAS,QAAQ,KAAK;QACtB,UAAU,QAAQ,KAAK;QACvB,UAAU,QAAQ,KAAK;QACvB,UAAU,QAAQ,KAAK;;AAG9B\"}")
 /*
 {
   "origin": "test.tsx",

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

@@ -65,12 +65,12 @@ const TextContent_component_puSwpKXO7Kg = (props)=>{
         /*#__PURE__*/ _jsxSorted("div", null, null, [
             "data-nu: ",
             _wrapProp(props, "data-nu")
-        ], 3, null),
+        ], 1, null),
         /*#__PURE__*/ _jsxSorted("div", null, null, [
             "class: ",
             _wrapProp(props, "class")
-        ], 3, null)
-    ], 3, "u6_0");
+        ], 1, null)
+    ], 1, "u6_0");
 };
 export const TextContent = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(TextContent_component_puSwpKXO7Kg, "TextContent_component_puSwpKXO7Kg"));
 const App_component_ckEPmXZlub0 = ()=>{

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

@@ -62,8 +62,8 @@ export const App = component$((props) => {
 ============================= test.js ==
 
 import { componentQrl } from "@qwik.dev/core";
-import { _wrapProp } from "@qwik.dev/core";
 import { _fnSignal } from "@qwik.dev/core";
+import { _wrapProp } from "@qwik.dev/core";
 import { _jsxSorted } from "@qwik.dev/core";
 import { inlinedQrl } from "@qwik.dev/core";
 import { useStore, mutable } from '@qwik.dev/core';

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

@@ -57,21 +57,21 @@ import { _jsxSorted } from "@qwik.dev/core";
 import { _wrapProp } from "@qwik.dev/core";
 export const Cmp_component_4ryKJTOKjWE = (props)=>{
     return /*#__PURE__*/ _jsxSorted(_Fragment, null, null, [
-        /*#__PURE__*/ _jsxSorted("p", null, {
+        /*#__PURE__*/ _jsxSorted("p", {
             "data-value": _wrapProp(props, "count")
-        }, _fnSignal((p0)=>p0.nested.count, [
+        }, null, _fnSignal((p0)=>p0.nested.count, [
             props
-        ], "p0.nested.count"), 3, null),
+        ], "p0.nested.count"), 1, null),
         /*#__PURE__*/ _jsxSorted("p", null, null, [
             "Value ",
             _wrapProp(props, "count"),
             /*#__PURE__*/ _jsxSorted("span", null, null, null, 3, null)
-        ], 3, null)
-    ], 3, "u6_1");
+        ], 1, null)
+    ], 1, "u6_1");
 };
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;yCAyB8B,CAAC;IAC9B,qBACC;sBACC,WAAC;YAAE,YAAU,YAAE;2BAAc,GAAM,MAAM,CAAC,KAAK;;;sBAC/C,WAAC;YAAE;sBAAO;0BAAY,WAAC;;;AAG1B\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;yCAyB8B,CAAC;IAC9B,qBACC;sBACC,WAAC;YAAE,YAAU,YAAE;iCAAc,GAAM,MAAM,CAAC,KAAK;;;sBAC/C,WAAC;YAAE;sBAAO;0BAAY,WAAC;;;AAG1B\"}")
 /*
 {
   "origin": "test.tsx",

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

@@ -37,12 +37,12 @@ const Issue3742_component_div_button_onClick_a504K2BCEXg = ()=>{
 };
 const Issue3742_component_svSy0PlWTAw = (props)=>{
     const counter = useSignal(0);
-    return /*#__PURE__*/ _jsxSorted("div", null, {
+    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}`')
-    }, [
+    }, null, [
         "Issue3742",
         /*#__PURE__*/ _jsxSorted("button", null, {
             onClick$: /*#__PURE__*/ inlinedQrl(Issue3742_component_div_button_onClick_a504K2BCEXg, "Issue3742_component_div_button_onClick_a504K2BCEXg", [

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

@@ -169,7 +169,7 @@ const AppStatic_component_gYRXqF3G5nE = (props)=>{
         /*#__PURE__*/ _jsxSorted("div", null, null, [
             "Static ",
             _wrapProp(props)
-        ], 3, null),
+        ], 1, null),
         /*#__PURE__*/ _jsxSorted("div", null, null, [
             "Static ",
             stuff()

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

@@ -33,30 +33,29 @@ import { useSignal } from '@qwik.dev/core';
 export const Works = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props)=>{
     let fromLocal = useSignal(0);
     return /*#__PURE__*/ _jsxSorted("div", {
-        local: fromLocal
-    }, {
         computed: _fnSignal((p0, p1)=>p0 + p1.fromProps, [
             fromLocal,
             props
         ], "p0+p1.fromProps"),
-        "props-wrap": _wrapProp(props, "fromProps"),
-        "props-only": _fnSignal((p0)=>({
-                props: p0.fromProps
-            }), [
-            props
-        ], "{props:p0.fromProps}"),
+        local: fromLocal,
         props: _fnSignal((p0, p1)=>({
                 props: p1.fromProps,
                 local: p0
             }), [
             fromLocal,
             props
-        ], "{props:p1.fromProps,local:p0}")
-    }, null, 3, "u6_0");
+        ], "{props:p1.fromProps,local:p0}"),
+        "props-only": _fnSignal((p0)=>({
+                props: p0.fromProps
+            }), [
+            props
+        ], "{props:p0.fromProps}"),
+        "props-wrap": _wrapProp(props, "fromProps")
+    }, null, null, 3, "u6_0");
 }, "Works_component_t45qL4vNGv0"));
 
 
-Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AACA,SAAwB,SAAS,QAAQ,iBAAiB;AAC1D,OAAO,MAAM,sBAAQ,sCAAW;IAC/B,IAAI,YAAY,UAAU;IAC1B,qBACC,WAAC;QAEA,OAAO;;QADP,QAAQ,sBAAE,QAJqB;;;;QAM/B,YAAU;QACV,YAAU,kBAAE,CAAA;gBAAC,KAAK,KAPa;YAOF,CAAA;;;QAC7B,KAAK,sBAAE,CAAA;gBAAC,KAAK,KARkB;gBAQL,KAAK;YAAW,CAAA;;;;;AAI7C,mCAAG\"}")
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AACA,SAAwB,SAAS,QAAQ,iBAAiB;AAC1D,OAAO,MAAM,sBAAQ,sCAAW;IAC/B,IAAI,YAAY,UAAU;IAC1B,qBACC,WAAC;QACA,QAAQ,sBAAE,QAJqB;;;;QAK/B,OAAO;QAGP,KAAK,sBAAE,CAAA;gBAAC,KAAK,KARkB;gBAQL,KAAK;YAAW,CAAA;;;;QAD1C,YAAU,kBAAE,CAAA;gBAAC,KAAK,KAPa;YAOF,CAAA;;;QAD7B,YAAU;;AAMb,mCAAG\"}")
 == DIAGNOSTICS ==
 
 []