feat: function dependencies now include member expressions, allow usi…

…ng top level input, convert to new default attribute name

.changeset/healthy-ravens-wink.md

@@ -0,0 +1,5 @@
+---
+"@marko/tags-api-preview": minor
+---
+
+Allow using top level input rather than just <attrs/> tag.

.changeset/popular-poems-appear.md

@@ -0,0 +1,5 @@
+---
+"@marko/tags-api-preview": minor
+---
+
+Switch to new default attribute name (value instead of default).

.changeset/shiny-points-reflect.md

@@ -0,0 +1,5 @@
+---
+"@marko/tags-api-preview": minor
+---
+
+Member expressions now are accounted for when determining function dependencies.

package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.25.0",
-    "@marko/compiler": "^5.22.9",
+    "@marko/compiler": "^5.23.0",
     "@marko/fixture-snapshots": "^2.1.7",
     "@marko/testing-library": "^6.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -37,7 +37,7 @@
     "jsdom": "^20.0.1",
     "jsdom-context-require": "^4.0.6",
     "lint-staged": "^13.0.3",
-    "marko": "^5.21.10",
+    "marko": "^5.22.0",
     "memfs": "^3.4.7",
     "mocha": "^10.1.0",
     "nyc": "^15.1.0",
@@ -64,7 +64,7 @@
   "license": "MIT",
   "main": "marko.json",
   "peerDependencies": {
-    "marko": "<= 5.21.11"
+    "marko": ">= 5.23.0"
   },
   "repository": {
     "type": "git",

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

@@ -31,6 +31,27 @@ describe(
   ])
 );
 
+describe(
+  "<effect> input member expression",
+  fixture("./templates/input-member-expression.marko", [
+    { onCount, other: "other1", value: { a: 1, b: 2 } },
+    async ({ expect, rerender }) => {
+      expect(onCount).calledOnceWith(2);
+      resetHistory();
+
+      await rerender({ onCount, other: "other2", value: { a: 1, b: 2 } });
+      expect(onCount).has.not.been.called;
+
+      await rerender({ onCount, other: "other2", value: { a: 3, b: 2 } });
+      expect(onCount).has.not.been.called;
+
+      await rerender({ onCount, other: "other2", value: { a: 3, b: 4 } });
+      expect(onCount).calledOnceWith(4);
+      resetHistory();
+    },
+  ])
+);
+
 describe(
   "<effect> no deps",
   fixture("./templates/no-deps.marko", [

src/__tests__/fixtures/effect/templates/input-member-expression.marko

@@ -0,0 +1,8 @@
+<span>
+  ${input.other}
+  ${input.value.a}
+</span>
+
+<effect=(() => {
+  input.onCount(input.value.b);
+})/>

src/__tests__/fixtures/get-and-set/index.test.ts

@@ -1,7 +1,7 @@
 import { spy, resetHistory } from "sinon";
 import fixture from "../../fixture";
 
-const defaultChange = spy();
+const valueChange = spy();
 
 describe(
   "<get> & <set> self reference",
@@ -20,33 +20,33 @@ describe(
 describe(
   "<get> & <set> assign to mutable set",
   fixture("./templates/assign-to-mutable-set.marko", [
-    { defaultChange },
+    { valueChange },
     async ({ expect, screen, rerender, fireEvent }) => {
-      expect(defaultChange).has.not.been.called;
+      expect(valueChange).has.not.been.called;
 
       await fireEvent.click(screen.getByText("increment"));
-      expect(defaultChange).calledOnceWith(2);
+      expect(valueChange).calledOnceWith(2);
       resetHistory();
 
       await rerender();
-      expect(defaultChange).has.not.been.called;
+      expect(valueChange).has.not.been.called;
     },
   ])
 );
 
 describe(
   "<get> & <set> assign to nested mutable set",
   fixture("./templates/assign-to-nested-mutable-set.marko", [
-    { defaultChange },
+    { valueChange },
     async ({ expect, screen, rerender, fireEvent }) => {
-      expect(defaultChange).has.not.been.called;
+      expect(valueChange).has.not.been.called;
 
       await fireEvent.click(screen.getByText("increment"));
-      expect(defaultChange).calledOnceWith(2);
+      expect(valueChange).calledOnceWith(2);
       resetHistory();
 
       await rerender();
-      expect(defaultChange).has.not.been.called;
+      expect(valueChange).has.not.been.called;
     },
   ])
 );

src/__tests__/fixtures/get-and-set/templates/assign-to-mutable-set.marko

@@ -1,5 +1,5 @@
-<attrs/{ defaultChange }/>
-<set=1 defaultChange=defaultChange>
+<attrs/{ valueChange }/>
+<set=1 valueChange=valueChange>
   <get/val="."/>
   <div>${val}</div>
   <button onClick=(() => val++)>increment</button>

src/__tests__/fixtures/get-and-set/templates/assign-to-nested-mutable-set.marko

@@ -1,5 +1,5 @@
-<attrs/{ defaultChange }/>
-<set={ x: 1, xChange: defaultChange }>
+<attrs/{ valueChange }/>
+<set={ x: 1, xChange: valueChange }>
   <get/{ x }="."/>
   <div>${x}</div>
   <button onClick=(() => x++)>increment</button>

src/__tests__/fixtures/get-and-set/templates/error-set-spread-attr.marko

@@ -1,4 +1,4 @@
-<const/setValue = { default: 1 }/>
+<const/setValue = { value: 1 }/>
 <set ...setValue>
   <div/>
 </set>

src/__tests__/fixtures/let/templates/with-default-change.marko

@@ -1,5 +1,5 @@
 <attrs/{ value, valueChange }/>
-<let/count=value defaultChange=valueChange/>
+<let/count=value valueChange=valueChange/>
 
 <div>${count}</div>
 <button onClick=(() => count++)>Increment</button>

src/__tests__/fixtures/misc/components/invoke-on-mount.marko

@@ -1,2 +1,2 @@
-<attrs/{ default: fn }/>
+<attrs/{ value: fn }/>
 <lifecycle onMount=fn/>

src/__tests__/fixtures/misc/components/invoke.marko

@@ -1,2 +1,2 @@
-<attrs/{ default: fn }/>
+<attrs/{ value: fn }/>
 <const/data = fn()/>

src/__tests__/fixtures/misc/components/repeat.marko

@@ -1,4 +1,4 @@
-<attrs/{ default: times, renderBody }/>
+<attrs/{ value: times, renderBody }/>
 <for|i| from=0 to=times>
   <${renderBody}=[i]/>
 </for>

src/__tests__/fixtures/misc/feature-detect/index.test.ts

@@ -48,11 +48,6 @@ describe("misc feature detect", () => {
     fixture("./templates/error-feature-detect-reference-component.marko")
   );
 
-  describe(
-    "error reference input",
-    fixture("./templates/error-feature-detect-reference-input.marko")
-  );
-
   describe(
     "error reference out",
     fixture("./templates/error-feature-detect-reference-out.marko")

src/__tests__/fixtures/return/templates/components/read-write-clamped.marko

@@ -1,3 +1,3 @@
 <attrs/{ max }/>
 <let/x=1/>
-<return = x defaultChange=(v => x = Math.min(v, max))/>
+<return = x valueChange=(v => x = Math.min(v, max))/>

src/__tests__/fixtures/return/templates/components/read-write.marko

@@ -1,2 +1,2 @@
 <let/x=1/>
-<return = x defaultChange=(v => x = v)/>
+<return = x valueChange=(v => x = v)/>

src/components/const/marko-tag.json

@@ -1,6 +1,6 @@
 {
   "translate": "./translate",
-  "@default": {
+  "@value": {
     "type": "expression",
     "required": true,
     "autocomplete": [

src/components/effect/marko-tag.json

@@ -1,6 +1,6 @@
 {
   "translate": "./translate",
-  "@default": {
+  "@value": {
     "type": "expression",
     "required": true,
     "autocomplete": [

src/components/get/index.marko

@@ -8,11 +8,11 @@ class {
     this.sync = this.sync.bind(this);
   }
   onInput(input, out) {
-    var from = input.default;
+    var from = input.value;
 
     if (!from || !from.render) {
       throw new Error(
-        "Invalid component constructor provided as <get> 'default' attribute. Got: " +
+        "Invalid component constructor provided as <get> 'value' attribute. Got: " +
           from
       );
     }
@@ -38,8 +38,8 @@ class {
     var prevData = this.data;
     this.data = this.provider.input;
     if (
-      this.data.default !== prevData.default ||
-      this.data.defaultChange !== prevData.defaultChange
+      this.data.value !== prevData.value ||
+      this.data.valueChange !== prevData.valueChange
     ) {
       this.forceUpdate();
       this.update();
@@ -48,4 +48,4 @@ class {
 }
 
 $ var data = component.data || {};
-<${input.renderBody}(data.default, data.defaultChange)/>
+<${input.renderBody}(data.value, data.valueChange)/>

src/components/get/marko-tag.json

@@ -2,7 +2,7 @@
   "template": "./index.marko",
   "transform": "./transform",
   "translate": "./translate",
-  "@default": {
+  "@value": {
     "type": "expression",
     "required": true,
     "autocomplete": [

src/components/let/marko-tag.json

@@ -1,6 +1,6 @@
 {
   "translate": "./translate",
-  "@default": {
+  "@value": {
     "type": "expression",
     "required": true,
     "autocomplete": [
@@ -9,7 +9,7 @@
       }
     ]
   },
-  "@defaultChange": {
+  "@valueChange": {
     "type": "expression",
     "autocomplete": [
       {

src/components/return/index-browser.ts

@@ -43,8 +43,8 @@ function createReturn(component: Component) {
     if (write) {
       if (
         curValue &&
-        (curValue.default !== newVal!.default ||
-          curValue.defaultChange !== newVal!.defaultChange)
+        (curValue.value !== newVal!.value ||
+          curValue.valueChange !== newVal!.valueChange)
       ) {
         component.forceUpdate();
       }