fix: improve cached value handling

.changeset/cool-dancers-help.md

@@ -0,0 +1,5 @@
+---
+"@marko/tags-api-preview": minor
+---
+
+Improve caching to be more like Marko 6. Fixes an issue with conditionally caching functions.

src/__tests__/fixtures/let/__snapshots__/let-with-cacheable-value/node.render.expected.html

@@ -0,0 +1,6 @@
+<div>
+  1
+</div>
+<button>
+  Increment
+</button>

src/__tests__/fixtures/let/__snapshots__/let-with-cacheable-value/web.render.expected.html

@@ -0,0 +1,6 @@
+<div>
+  1
+</div>
+<button>
+  Increment
+</button>

src/__tests__/fixtures/let/__snapshots__/let-with-cacheable-value/web.step-0.expected.html

@@ -0,0 +1,6 @@
+<div>
+  2
+</div>
+<button>
+  Increment
+</button>

src/__tests__/fixtures/let/__snapshots__/let-with-cacheable-value/web.step-1.expected.html

@@ -0,0 +1,6 @@
+<div>
+  3
+</div>
+<button>
+  Increment
+</button>

src/__tests__/fixtures/let/index.test.ts

@@ -163,6 +163,15 @@ describe(
   ])
 );
 
+describe(
+  "<let> with cacheable value",
+  fixture("./templates/with-cacheable-value.marko", [
+    { value: 1 },
+    increment,
+    increment,
+  ])
+);
+
 function click(text: string) {
   return async ({ fireEvent, screen }: FixtureHelpers) =>
     await fireEvent.click(screen.getByText(text));

src/__tests__/fixtures/let/templates/with-cacheable-value.marko

@@ -0,0 +1,8 @@
+<attrs/{ value }/>
+<let/getCount() { return value; }/>
+
+<div>${getCount()}</div>
+<button onClick=(() => {
+  const newCount = getCount() + 1;
+  getCount = () => newCount;
+})>Increment</button>

src/__tests__/fixtures/misc/cached-conditional-value/__snapshots__/cached-conditional-value/node.render.expected.html

@@ -0,0 +1,12 @@
+<div>
+  Count: 0
+</div>
+<div>
+  Message: 
+</div>
+<button>
+  Increment
+</button>
+<button>
+  Toggle
+</button>

src/__tests__/fixtures/misc/cached-conditional-value/__snapshots__/cached-conditional-value/web.render.expected.html

@@ -0,0 +1,12 @@
+<div>
+  Count: 0
+</div>
+<div>
+  Message: 
+</div>
+<button>
+  Increment
+</button>
+<button>
+  Toggle
+</button>

src/__tests__/fixtures/misc/cached-conditional-value/__snapshots__/cached-conditional-value/web.step-0.expected.html

@@ -0,0 +1,12 @@
+<div>
+  Count: 1
+</div>
+<div>
+  Message: 
+</div>
+<button>
+  Increment
+</button>
+<button>
+  Toggle
+</button>

src/__tests__/fixtures/misc/cached-conditional-value/__snapshots__/cached-conditional-value/web.step-1.expected.html

@@ -0,0 +1,12 @@
+<div>
+  Count: 1
+</div>
+<div>
+  Message: hello 1
+</div>
+<button>
+  Increment
+</button>
+<button>
+  Toggle
+</button>

src/__tests__/fixtures/misc/cached-conditional-value/__snapshots__/cached-conditional-value/web.step-2.expected.html

@@ -0,0 +1,12 @@
+<div>
+  Count: 1
+</div>
+<div>
+  Message: 
+</div>
+<button>
+  Increment
+</button>
+<button>
+  Toggle
+</button>

src/__tests__/fixtures/misc/cached-conditional-value/__snapshots__/cached-conditional-value/web.step-3.expected.html

@@ -0,0 +1,12 @@
+<div>
+  Count: 2
+</div>
+<div>
+  Message: 
+</div>
+<button>
+  Increment
+</button>
+<button>
+  Toggle
+</button>

src/__tests__/fixtures/misc/cached-conditional-value/__snapshots__/cached-conditional-value/web.step-4.expected.html

@@ -0,0 +1,12 @@
+<div>
+  Count: 2
+</div>
+<div>
+  Message: hello 2
+</div>
+<button>
+  Increment
+</button>
+<button>
+  Toggle
+</button>

src/__tests__/fixtures/misc/cached-conditional-value/index.test.ts

@@ -0,0 +1,20 @@
+import fixture, { FixtureHelpers } from "../../../fixture";
+const increment = click("Increment");
+const toggle = click("Toggle");
+
+describe(
+  "cached conditional value",
+  fixture("./templates/basic.marko", [
+    {},
+    increment,
+    toggle,
+    toggle,
+    increment,
+    toggle,
+  ])
+);
+
+function click(text: string) {
+  return async ({ fireEvent, screen }: FixtureHelpers) =>
+    await fireEvent.click(screen.getByText(text));
+}

src/__tests__/fixtures/misc/cached-conditional-value/templates/basic.marko

@@ -0,0 +1,8 @@
+<let/enabled = false/>
+<let/count = 0/>
+<const/dynamicMessage = enabled ? () => `hello ${count}` : undefined/>
+
+<div>Count: ${count}</div>
+<div>Message: ${dynamicMessage?.()}</div>
+<button onClick=(() => count++)>Increment</button>
+<button onClick=(() => enabled = !enabled)>Toggle</button>