fix(optimizer): smart interaction boundaries

.changeset/smart-interaction-boundaries.md

@@ -0,0 +1,6 @@
+---
+'@qwik.dev/core': patch
+'@qwik.dev/optimizer': patch
+---
+
+fix: keep client-only callbacks outside smart render bundles

packages/optimizer/core/src/entry_strategy.rs

@@ -93,9 +93,10 @@ impl SmartStrategy {
 
 impl EntryPolicy for SmartStrategy {
 	fn get_entry_for_sym(&self, context: &[String], segment: &SegmentData) -> Option<Atom> {
-		// Event handlers without scope variables are put into a separate file
-		if segment.scoped_idents.is_empty()
-			&& (segment.ctx_kind != SegmentKind::Function || &segment.ctx_name == "event$")
+		// Known events stay separate even when they capture state.
+		if segment.ctx_kind == SegmentKind::EventHandler
+			|| segment.ctx_name == "event$"
+			|| (segment.scoped_idents.is_empty() && segment.ctx_kind != SegmentKind::Function)
 		{
 			return None;
 		}

packages/optimizer/core/src/fixtures/smart-lifted-captures.tsx

@@ -0,0 +1,16 @@
+import { $, component$, event$, useSignal } from '@qwik.dev/core';
+import { openFeature } from './heavy-feature';
+
+export const App = component$(() => {
+  const count = useSignal(0);
+  const open$ = event$(() => openFeature(count.value));
+  const read = $(() => count.value);
+  read();
+  return (
+    <>
+      <button onClick$={() => count.value++}>increment</button>
+      <button onClick$={() => console.log('click')}>plain</button>
+      <button onClick$={open$}>open</button>
+    </>
+  );
+});

packages/optimizer/core/src/fixtures/smart-visible-task-heavy-library.tsx

@@ -0,0 +1,8 @@
+import { component$, useSignal, useVisibleTask$ } from '@qwik.dev/core';
+import { renderChart } from 'heavy-library';
+
+export const App = component$(() => {
+  const count = useSignal(0);
+  useVisibleTask$(() => renderChart(count.value));
+  return <div>{count.value}</div>;
+});

packages/optimizer/core/src/snapshots/qwik_core__test__smart_lifted_event_captures.snap

@@ -0,0 +1,222 @@
+---
+source: packages/optimizer/core/src/test.rs
+expression: output
+---
+==INPUT==
+
+import { $, component$, event$, useSignal } from '@qwik.dev/core';
+import { openFeature } from './heavy-feature';
+
+export const App = component$(() => {
+  const count = useSignal(0);
+  const open$ = event$(() => openFeature(count.value));
+  const read = $(() => count.value);
+  read();
+  return (
+    <>
+      <button onClick$={() => count.value++}>increment</button>
+      <button onClick$={() => console.log('click')}>plain</button>
+      <button onClick$={open$}>open</button>
+    </>
+  );
+});
+
+============================= test.js ==
+
+import { componentQrl } from "@qwik.dev/core";
+import { qrl } from "@qwik.dev/core";
+//
+const q_s_ckEPmXZlub0 = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_component_ckEPmXZlub0"), "s_ckEPmXZlub0");
+//
+export const App = /*#__PURE__*/ componentQrl(q_s_ckEPmXZlub0);
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAGA,OAAO,MAAM,oBAAM,8BAYhB\"}")
+============================= test.tsx_App_component_open_event_91f0czdL41I.js (ENTRY POINT)==
+
+import { _capturesObj } from "@qwik.dev/core";
+import { openFeature } from "./heavy-feature";
+//
+export const s_91f0czdL41I = ()=>{
+    let count = _capturesObj._[0];
+    return openFeature(count.value);
+};
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;6BAKuB;;WAAM,YAAY,MAAM,KAAK\"}")
+/*
+{
+  "origin": "test.tsx",
+  "name": "s_91f0czdL41I",
+  "entry": null,
+  "displayName": "test.tsx_App_component_open_event",
+  "hash": "91f0czdL41I",
+  "canonicalFilename": "test.tsx_App_component_open_event_91f0czdL41I",
+  "path": "",
+  "extension": "js",
+  "parent": "s_ckEPmXZlub0",
+  "ctxKind": "function",
+  "ctxName": "event$",
+  "captures": true,
+  "loc": [
+    207,
+    237
+  ],
+  "captureNames": [
+    "count"
+  ]
+}
+*/
+============================= test.tsx_App_component_Fragment_button_q_e_click_1_MAgjEZcOmJg.js (ENTRY POINT)==
+
+export const s_MAgjEZcOmJg = ()=>console.log('click');
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"6BAWwB,IAAM,QAAQ,GAAG,CAAC\"}")
+/*
+{
+  "origin": "test.tsx",
+  "name": "s_MAgjEZcOmJg",
+  "entry": null,
+  "displayName": "test.tsx_App_component_Fragment_button_q_e_click_1",
+  "hash": "MAgjEZcOmJg",
+  "canonicalFilename": "test.tsx_App_component_Fragment_button_q_e_click_1_MAgjEZcOmJg",
+  "path": "",
+  "extension": "js",
+  "parent": "s_ckEPmXZlub0",
+  "ctxKind": "eventHandler",
+  "ctxName": "onClick$",
+  "captures": false,
+  "loc": [
+    393,
+    419
+  ]
+}
+*/
+============================= test.tsx_App_component_ckEPmXZlub0.js ==
+
+import { Fragment as _Fragment } from "@qwik.dev/core/jsx-runtime";
+import { _jsxSorted } from "@qwik.dev/core";
+import { eventQrl } from "@qwik.dev/core";
+import { qrl } from "@qwik.dev/core";
+import { useSignal } from "@qwik.dev/core";
+//
+const q_s_91f0czdL41I = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_component_open_event_91f0czdL41I"), "s_91f0czdL41I");
+const q_s_L8uVMi11z9s = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_component_read_L8uVMi11z9s"), "s_L8uVMi11z9s");
+const q_s_MAgjEZcOmJg = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_component_Fragment_button_q_e_click_1_MAgjEZcOmJg"), "s_MAgjEZcOmJg");
+const q_s_YRU7SJ8EHtY = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_component_Fragment_button_q_e_click_YRU7SJ8EHtY"), "s_YRU7SJ8EHtY").m();
+//
+export const s_ckEPmXZlub0 = ()=>{
+    const count = useSignal(0);
+    const open$ = eventQrl(q_s_91f0czdL41I.w([
+        count
+    ]));
+    const read = q_s_L8uVMi11z9s.w([
+        count
+    ]);
+    read();
+    return /*#__PURE__*/ _jsxSorted(_Fragment, null, null, [
+        /*#__PURE__*/ _jsxSorted("button", {
+            "q:p": count
+        }, {
+            "q-e:click": q_s_YRU7SJ8EHtY
+        }, "increment", 7, null),
+        /*#__PURE__*/ _jsxSorted("button", null, {
+            "q-e:click": q_s_MAgjEZcOmJg
+        }, "plain", 3, null),
+        /*#__PURE__*/ _jsxSorted("button", null, {
+            "q-e:click": open$
+        }, "open", 3, null)
+    ], 1, "u6_0");
+};
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;;;;;;;6BAG8B;IAC5B,MAAM,QAAQ,UAAU;IACxB,MAAM,QAAQ;;;IACd,MAAM;;;IACN;IACA,qBACE;sBACE,WAAC;;;YAAO,WAAQ;WAAuB;sBACvC,WAAC;YAAO,WAAQ;WAA8B;sBAC9C,WAAC;YAAO,aAAU;WAAO;;AAG/B\"}")
+/*
+{
+  "origin": "test.tsx",
+  "name": "s_ckEPmXZlub0",
+  "entry": "test.tsx_entry_App",
+  "displayName": "test.tsx_App_component",
+  "hash": "ckEPmXZlub0",
+  "canonicalFilename": "test.tsx_App_component_ckEPmXZlub0",
+  "path": "",
+  "extension": "js",
+  "parent": null,
+  "ctxKind": "function",
+  "ctxName": "component$",
+  "captures": false,
+  "loc": [
+    146,
+    495
+  ]
+}
+*/
+============================= test.tsx_App_component_Fragment_button_q_e_click_YRU7SJ8EHtY.js (ENTRY POINT)==
+
+export const s_YRU7SJ8EHtY = (_, _1, count)=>count.value++;
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\"6BAUwB,gBAAM,MAAM,KAAK\"}")
+/*
+{
+  "origin": "test.tsx",
+  "name": "s_YRU7SJ8EHtY",
+  "entry": null,
+  "displayName": "test.tsx_App_component_Fragment_button_q_e_click",
+  "hash": "YRU7SJ8EHtY",
+  "canonicalFilename": "test.tsx_App_component_Fragment_button_q_e_click_YRU7SJ8EHtY",
+  "path": "",
+  "extension": "js",
+  "parent": "s_ckEPmXZlub0",
+  "ctxKind": "eventHandler",
+  "ctxName": "onClick$",
+  "captures": false,
+  "loc": [
+    329,
+    348
+  ],
+  "paramNames": [
+    "_",
+    "_1",
+    "count"
+  ]
+}
+*/
+============================= test.tsx_App_component_read_L8uVMi11z9s.js ==
+
+import { _capturesObj } from "@qwik.dev/core";
+//
+export const s_L8uVMi11z9s = ()=>{
+    let count = _capturesObj._[0];
+    return count.value;
+};
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;6BAMiB;;WAAM,MAAM,KAAK\"}")
+/*
+{
+  "origin": "test.tsx",
+  "name": "s_L8uVMi11z9s",
+  "entry": "test.tsx_entry_App",
+  "displayName": "test.tsx_App_component_read",
+  "hash": "L8uVMi11z9s",
+  "canonicalFilename": "test.tsx_App_component_read_L8uVMi11z9s",
+  "path": "",
+  "extension": "js",
+  "parent": "s_ckEPmXZlub0",
+  "ctxKind": "function",
+  "ctxName": "$",
+  "captures": true,
+  "loc": [
+    257,
+    274
+  ],
+  "captureNames": [
+    "count"
+  ]
+}
+*/
+== DIAGNOSTICS ==
+
+[]

packages/optimizer/core/src/snapshots/qwik_core__test__smart_visible_task_heavy_library.snap

@@ -0,0 +1,105 @@
+---
+source: packages/optimizer/core/src/test.rs
+assertion_line: 93
+expression: output
+---
+==INPUT==
+
+import { component$, useSignal, useVisibleTask$ } from '@qwik.dev/core';
+import { renderChart } from 'heavy-library';
+
+export const App = component$(() => {
+  const count = useSignal(0);
+  useVisibleTask$(() => renderChart(count.value));
+  return <div>{count.value}</div>;
+});
+
+============================= test.js ==
+
+import { componentQrl } from "@qwik.dev/core";
+import { qrl } from "@qwik.dev/core";
+//
+const q_s_ckEPmXZlub0 = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_component_ckEPmXZlub0"), "s_ckEPmXZlub0");
+//
+export const App = /*#__PURE__*/ componentQrl(q_s_ckEPmXZlub0);
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;AAGA,OAAO,MAAM,oBAAM,8BAIhB\"}")
+============================= test.tsx_App_component_useVisibleTask_e7KrEs3jyoc.js ==
+
+import { _capturesObj } from "@qwik.dev/core";
+import { renderChart } from "heavy-library";
+//
+export const s_e7KrEs3jyoc = ()=>{
+    let count = _capturesObj._[0];
+    return renderChart(count.value);
+};
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;6BAKkB;;WAAM,YAAY,MAAM,KAAK\"}")
+/*
+{
+  "origin": "test.tsx",
+  "name": "s_e7KrEs3jyoc",
+  "entry": "test.tsx_entry_App",
+  "displayName": "test.tsx_App_component_useVisibleTask",
+  "hash": "e7KrEs3jyoc",
+  "canonicalFilename": "test.tsx_App_component_useVisibleTask_e7KrEs3jyoc",
+  "path": "",
+  "extension": "js",
+  "parent": "s_ckEPmXZlub0",
+  "ctxKind": "function",
+  "ctxName": "useVisibleTask$",
+  "captures": true,
+  "loc": [
+    206,
+    236
+  ],
+  "captureNames": [
+    "count"
+  ]
+}
+*/
+============================= test.tsx_App_component_ckEPmXZlub0.js ==
+
+import { _jsxSorted } from "@qwik.dev/core";
+import { _wrapProp } from "@qwik.dev/core";
+import { qrl } from "@qwik.dev/core";
+import { useSignal } from "@qwik.dev/core";
+import { useVisibleTaskQrl } from "@qwik.dev/core";
+//
+const q_s_e7KrEs3jyoc = /*#__PURE__*/ qrl(()=>import("./test.tsx_App_component_useVisibleTask_e7KrEs3jyoc"), "s_e7KrEs3jyoc");
+//
+export const s_ckEPmXZlub0 = ()=>{
+    const count = useSignal(0);
+    useVisibleTaskQrl(q_s_e7KrEs3jyoc.w([
+        count
+    ]));
+    return /*#__PURE__*/ _jsxSorted("div", null, null, _wrapProp(count), 3, "u6_0");
+};
+
+
+Some("{\"version\":3,\"sources\":[\"/user/qwik/src/test.tsx\"],\"names\":[],\"mappings\":\";;;;;;;;6BAG8B;IAC5B,MAAM,QAAQ,UAAU;IACxB;;;IACA,qBAAO,WAAC,6BAAK;AACf\"}")
+/*
+{
+  "origin": "test.tsx",
+  "name": "s_ckEPmXZlub0",
+  "entry": "test.tsx_entry_App",
+  "displayName": "test.tsx_App_component",
+  "hash": "ckEPmXZlub0",
+  "canonicalFilename": "test.tsx_App_component_ckEPmXZlub0",
+  "path": "",
+  "extension": "js",
+  "parent": null,
+  "ctxKind": "function",
+  "ctxName": "component$",
+  "captures": false,
+  "loc": [
+    150,
+    275
+  ]
+}
+*/
+== DIAGNOSTICS ==
+
+[]