fix: const/var props in loops/functions

.changeset/afraid-bags-jam.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: Resource without onPending callback

.changeset/shaggy-poems-return.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: event handlers in loops

packages/qwik/src/core/tests/component.spec.tsx

@@ -729,15 +729,15 @@ describe.each([
             <Component>
               <div>
                 {'Child '}
-                {'1'}
+                <Signal ssr-required>{'1'}</Signal>
                 {', active: '}
                 <Signal ssr-required>{'false'}</Signal>
               </div>
             </Component>
             <Component>
               <div>
                 {'Child '}
-                {'2'}
+                <Signal ssr-required>{'2'}</Signal>
                 {', active: '}
                 <Signal ssr-required>{'true'}</Signal>
               </div>
@@ -756,15 +756,15 @@ describe.each([
             <Component>
               <div>
                 {'Child '}
-                {'1'}
+                <Signal ssr-required>{'1'}</Signal>
                 {', active: '}
                 <Signal ssr-required>{'true'}</Signal>
               </div>
             </Component>
             <Component>
               <div>
                 {'Child '}
-                {'2'}
+                <Signal ssr-required>{'2'}</Signal>
                 {', active: '}
                 <Signal ssr-required>{'false'}</Signal>
               </div>

packages/qwik/src/core/tests/inline-component.spec.tsx

@@ -258,13 +258,19 @@ describe.each([
         <footer>
           <button></button>
           <InlineComponent>
-            <div>qwik</div>
+            <div>
+              <Signal ssr-required>qwik</Signal>
+            </div>
           </InlineComponent>
           <InlineComponent>
-            <div>foo</div>
+            <div>
+              <Signal ssr-required>foo</Signal>
+            </div>
           </InlineComponent>
           <InlineComponent>
-            <div>bar</div>
+            <div>
+              <Signal ssr-required>bar</Signal>
+            </div>
           </InlineComponent>
         </footer>
       </Component>
@@ -277,13 +283,19 @@ describe.each([
         <footer>
           <button></button>
           <InlineComponent>
-            <div>bar</div>
+            <div>
+              <Signal ssr-required>bar</Signal>
+            </div>
           </InlineComponent>
           <InlineComponent>
-            <div>foo</div>
+            <div>
+              <Signal ssr-required>foo</Signal>
+            </div>
           </InlineComponent>
           <InlineComponent>
-            <div>qwik</div>
+            <div>
+              <Signal ssr-required>qwik</Signal>
+            </div>
           </InlineComponent>
         </footer>
       </Component>

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

@@ -150,7 +150,9 @@ describe.each([
                 <Awaited ssr-required>
                   <Component ssr-required>
                     <Fragment ssr-required>
-                      <p>1</p>
+                      <p>
+                        <WrappedSignal ssr-required>1</WrappedSignal>
+                      </p>
                       <p>
                         <Awaited>0</Awaited>
                       </p>
@@ -176,7 +178,9 @@ describe.each([
                 <Awaited ssr-required>
                   <Component ssr-required>
                     <Fragment ssr-required>
-                      <p>1</p>
+                      <p>
+                        <WrappedSignal ssr-required>1</WrappedSignal>
+                      </p>
                       <p>
                         <Awaited ssr-required>2</Awaited>
                       </p>

packages/qwik/src/core/tests/use-lexical-scope.spec.tsx

@@ -0,0 +1,147 @@
+import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
+import { describe, expect, it } from 'vitest';
+import {
+  component$,
+  useStore,
+  useSignal,
+  Fragment as Component,
+  Fragment as Signal,
+} from '@qwik.dev/core';
+
+const debug = false; //true;
+Error.stackTraceLimit = 100;
+
+describe.each([
+  { render: ssrRenderToDom }, //
+  { render: domRender }, //
+])('$render.name: useLexicalScope', ({ render }) => {
+  it('should update const prop event value', async () => {
+    type Cart = string[];
+
+    const Parent = component$(() => {
+      const cart = useStore<Cart>([]);
+      const results = useSignal(['foo', 'bar']);
+
+      return (
+        <div>
+          <button id="first" onClick$={() => (results.value = ['item1', 'item2'])}></button>
+
+          {results.value.map((item, key) => (
+            <button
+              id={'second-' + key}
+              onClick$={() => {
+                cart.push(item);
+              }}
+            >
+              {item}
+            </button>
+          ))}
+          <ul>
+            {cart.map((item) => (
+              <li>
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      );
+    });
+
+    const { vNode, document } = await render(<Parent />, { debug });
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <div>
+          <button id="first"></button>
+          <button id="second-0">foo</button>
+          <button id="second-1">bar</button>
+          <ul></ul>
+        </div>
+      </Component>
+    );
+
+    await trigger(document.body, 'button#first', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <div>
+          <button id="first"></button>
+          <button id="second-0">item1</button>
+          <button id="second-1">item2</button>
+          <ul></ul>
+        </div>
+      </Component>
+    );
+
+    await trigger(document.body, 'button#second-1', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <div>
+          <button id="first"></button>
+          <button id="second-0">item1</button>
+          <button id="second-1">item2</button>
+          <ul>
+            <li>
+              <span>item2</span>
+            </li>
+          </ul>
+        </div>
+      </Component>
+    );
+  });
+
+  describe('regression', () => {
+    it('#5662 - should update value in the list', async () => {
+      /**
+       * ROOT CAUSE ANALYSIS: This is a bug in Optimizer. The optimizer incorrectly marks the
+       * `onClick` listener as 'const'/'immutable'. Because it is const, the QRL associated with the
+       * click handler always points to the original object, and it is not updated.
+       */
+      const Cmp = component$(() => {
+        const store = useStore<{ users: { name: string }[] }>({ users: [{ name: 'Giorgio' }] });
+
+        return (
+          <div>
+            {store.users.map((user, key) => (
+              <span
+                key={key}
+                onClick$={() => {
+                  store.users = store.users.map(({ name }: { name: string }) => ({
+                    name: name === user.name ? name + '!' : name,
+                  }));
+                }}
+              >
+                {user.name}
+              </span>
+            ))}
+          </div>
+        );
+      });
+      const { vNode, container } = await render(<Cmp />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <div>
+            <span key="0">
+              <Signal ssr-required>{'Giorgio'}</Signal>
+            </span>
+          </div>
+        </Component>
+      );
+      await trigger(container.element, 'span', 'click');
+      await trigger(container.element, 'span', 'click');
+      await trigger(container.element, 'span', 'click');
+      await trigger(container.element, 'span', 'click');
+      await trigger(container.element, 'span', 'click');
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <div>
+            <span key="0">
+              <Signal ssr-required>{'Giorgio!!!!!'}</Signal>
+            </span>
+          </div>
+        </Component>
+      );
+    });
+  });
+});

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

@@ -339,4 +339,74 @@ describe.each([
       </Component>
     );
   });
+
+  it('should update elements correctly inside onResolved fn', async () => {
+    const ResourceCmp = component$(() => {
+      const count = useSignal(0);
+      const resource = useResource$<number>(async ({ track }) => {
+        track(count);
+        return count.value + 10;
+      });
+
+      return (
+        <>
+          <button onClick$={() => count.value++}>{count.value}</button>
+          <Resource
+            value={resource}
+            // uncomment to test pending WORKING and test pass
+            // onPending={() => <p>Loading..</p>}
+            onRejected={() => <p>error ...</p>}
+            onResolved={(data) => (
+              <>
+                <div>{data}</div>
+                <input value={data} />
+              </>
+            )}
+          />
+        </>
+      );
+    });
+
+    const { vNode, container } = await render(<ResourceCmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button>
+            <Signal ssr-required>0</Signal>
+          </button>
+          <InlineComponent ssr-required>
+            <Fragment ssr-required>
+              <Awaited ssr-required>
+                <Fragment ssr-required>
+                  <div>10</div>
+                  <input value="10" />
+                </Fragment>
+              </Awaited>
+            </Fragment>
+          </InlineComponent>
+        </Fragment>
+      </Component>
+    );
+    await trigger(container.element, 'button', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button>
+            <Signal ssr-required>1</Signal>
+          </button>
+          <InlineComponent ssr-required>
+            <Fragment ssr-required>
+              <Awaited ssr-required>
+                <Fragment ssr-required>
+                  <div>11</div>
+                  <input value="11" />
+                </Fragment>
+              </Awaited>
+            </Fragment>
+          </InlineComponent>
+        </Fragment>
+      </Component>
+    );
+  });
 });