Merge pull request #7355 from QwikDev/fix-wrap

fix(core): non-wrapped expressions aren't const

Author: wmertens

packages/qwik/src/optimizer/core/README.md

@@ -1,33 +1,7 @@
-# qwik-core
+# Qwik Optimizer
 
-## 1. Install rust
+See the contributing guide for more install information. If you want to updat the tests, run `pnpm run test.rust.update`. If you want to run a single test with dbg output:
 
-https://www.rust-lang.org/tools/install
-
-```
-curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
-```
-
-## 2. Build library
-
-```
-make build
-```
-
-or
-
-```
-cargo build
-```
-
-## 3. Run tests
-
-```
-make test
-```
-
-or
-
-```
-cargo test
+```shell
+cargo test --manifest-path packages/qwik/src/optimizer/core/Cargo.toml PARTIAL_NAME_OF_TEST -- --nocapture
 ```

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

@@ -61,7 +61,9 @@ pub fn convert_inlined_fn(
 
 	let rendered_expr = render_expr(&expr);
 	if rendered_expr.len() > 150 {
-		return (None, is_const);
+		// It isn't guaranteed const if we don't wrap it
+		// TODO make this be a wrapped computedsignal?
+		return (None, false);
 	}
 
 	if scoped_idents.is_empty() {

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

@@ -0,0 +1,95 @@
+---
+source: packages/qwik/src/optimizer/core/src/test.rs
+assertion_line: 4299
+expression: output
+snapshot_kind: text
+---
+==INPUT==
+
+
+		import { component$, useStore } from '@qwik.dev/core';
+
+		export default component$(() => {
+			const panelStore = useStore(() => ({
+				active: 'Input',
+				list: PANELS,
+			}));
+
+			return (
+				<div
+					stuff={panelStore.active ? 'yes' : 'no'}
+					class={{
+						'too-long-to-wrap': true,
+						'examples-panel-input': panelStore.active === 'Input',
+						'examples-panel-output': panelStore.active === 'Output',
+						'examples-panel-console': panelStore.active === 'Console',
+					}}
+				/>
+			);
+		});
+		export const PANELS: ActivePanel[] = ['Examples', 'Input', 'Output', 'Console'];
+		
+============================= test.js ==
+
+import { componentQrl } from "@qwik.dev/core";
+import { qrl } from "@qwik.dev/core";
+export default /*#__PURE__*/ componentQrl(/*#__PURE__*/ qrl(()=>import("./test.tsx_test_component_LUXeXe0DQrg"), "test_component_LUXeXe0DQrg"));
+export const PANELS = [
+    'Examples',
+    'Input',
+    'Output',
+    'Console'
+];
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;AAGE,6BAAe,mHAiBZ;AACH,OAAO,MAAM,SAAwB;IAAC;IAAY;IAAS;IAAU;CAAU,CAAC\"}")
+============================= test.tsx_test_component_LUXeXe0DQrg.js (ENTRY POINT)==
+
+import { PANELS } from "./test";
+import { _fnSignal } from "@qwik.dev/core";
+import { _jsxSorted } from "@qwik.dev/core";
+import { useStore } from "@qwik.dev/core";
+export const test_component_LUXeXe0DQrg = ()=>{
+    const panelStore = useStore(()=>({
+            active: 'Input',
+            list: PANELS
+        }));
+    return /*#__PURE__*/ _jsxSorted("div", {
+        class: {
+            'too-long-to-wrap': true,
+            'examples-panel-input': panelStore.active === 'Input',
+            'examples-panel-output': panelStore.active === 'Output',
+            'examples-panel-console': panelStore.active === 'Console'
+        }
+    }, {
+        stuff: _fnSignal((p0)=>p0.active ? 'yes' : 'no', [
+            panelStore
+        ], 'p0.active?"yes":"no"')
+    }, null, 3, "u6_0");
+};
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;0CAG4B;IACzB,MAAM,aAAa,SAAS,IAAM,CAAC;YAClC,QAAQ;YACR,MAAM;QACP,CAAC;IAED,qBACC,WAAC;QAEA,OAAO;YACN,oBAAoB;YACpB,wBAAwB,WAAW,MAAM,KAAK;YAC9C,yBAAyB,WAAW,MAAM,KAAK;YAC/C,0BAA0B,WAAW,MAAM,KAAK;QACjD;;QANA,KAAK,kBAAE,GAAW,MAAM,GAAG,QAAQ;;;;AAStC\"}")
+/*
+{
+  "origin": "test.tsx",
+  "name": "test_component_LUXeXe0DQrg",
+  "entry": null,
+  "displayName": "test.tsx_test_component",
+  "hash": "LUXeXe0DQrg",
+  "canonicalFilename": "test.tsx_test_component_LUXeXe0DQrg",
+  "path": "",
+  "extension": "js",
+  "parent": null,
+  "ctxKind": "function",
+  "ctxName": "component$",
+  "captures": false,
+  "loc": [
+    88,
+    510
+  ]
+}
+*/
+== DIAGNOSTICS ==
+
+[]

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

@@ -4293,6 +4293,40 @@ export default component$((props) => {
 		..TestInput::default()
 	});
 }
+
+#[test]
+fn should_wrap_store_expression() {
+	test_input!(TestInput {
+		code: r#"
+		import { component$, useStore } from '@qwik.dev/core';
+
+		export default component$(() => {
+			const panelStore = useStore(() => ({
+				active: 'Input',
+				list: PANELS,
+			}));
+
+			return (
+				<div
+					stuff={panelStore.active ? 'yes' : 'no'}
+					class={{
+						'too-long-to-wrap': true,
+						'examples-panel-input': panelStore.active === 'Input',
+						'examples-panel-output': panelStore.active === 'Output',
+						'examples-panel-console': panelStore.active === 'Console',
+					}}
+				/>
+			);
+		});
+		export const PANELS: ActivePanel[] = ['Examples', 'Input', 'Output', 'Console'];
+		"#
+		.to_string(),
+		transpile_ts: true,
+		transpile_jsx: true,
+		..TestInput::default()
+	});
+}
+
 // TODO(misko): Make this test work by implementing strict serialization.
 // #[test]
 // fn example_of_synchronous_qrl_that_cant_be_serialized() {