fix: issues for vue composition api (#1558)

* fix: issues for vue composition api * fix: issue with vue build * fix: issue with `this.` inside `useStore` for all generators * Update packages/core/src/generators/vue/compositionApi.ts Co-authored-by: Sami Jaber <[email protected]> * fix: issue with types for all states * chore: update from main * chore: update snapshots --------- Co-authored-by: Sami Jaber <[email protected]>
BuilderIO · Nov 1, 2024 · b5ddfa3 · b5ddfa3
1 parent adf33c8
commit b5ddfa3
Show file tree

Hide file tree

Showing 46 changed files with 6,961 additions and 233 deletions.
diff --git a/.changeset/perfect-cups-sniff.md b/.changeset/perfect-cups-sniff.md
@@ -0,0 +1,11 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[Vue] fix: ref wasn't imported when using `useRef` hook without using `useState`
+
+[Vue] fix: Composition api always use `ref()` wihtout any class -> we don't need this., but we always use `.value`
+
+[Vue] fix: `ref` could be `null` for `useRef` see: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
+
+[All] fix: replace `this.` expression in `useState` with `state.` to resolve correct `stripStateAndPropsRefs()` function inside all generators
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -380,7 +380,7 @@ exports[`Alpine.js > jsx > Javascript Test > BasicRef 1`] = `
       name: \\"PatrickJS\\",
       onBlur: function onBlur() {
         // Maintain focus
-        this.$refs.inputRef.focus();
+        this.$refs.inputRef?.focus();
       },
       lowerCaseName: function lowerCaseName() {
         return this.name.toLowerCase();
@@ -1143,6 +1143,23 @@ exports[`Alpine.js > jsx > Javascript Test > InputParent 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > NestedStore 1`] = `
+"<div x-data=\\"nestedStore()\\" x-bind:id=\\"_id\\">
+  Test
+
+  <p x-bind:id=\\"_messageId\\">Message</p>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"nestedStore\\", () => ({
+      _id: \\"abc\\",
+      _messageId: this._id + \\"-message\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > RawText 1`] = `
 "<span
   x-data=\\"rawText()\\"
@@ -1405,6 +1422,33 @@ exports[`Alpine.js > jsx > Javascript Test > Textarea 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
+"<div x-data=\\"useValueAndFnFromStore()\\" x-effect=\\"onUpdate\\">Test</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"useValueAndFnFromStore\\", () => ({
+      _id: \\"abc\\",
+      _active: false,
+
+      _do(id) {
+        this._active = !!id;
+
+        if (props.onChange) {
+          props.onChange(this._active);
+        }
+      },
+
+      onUpdate() {
+        if (this._do) {
+          this._do(this._id);
+        }
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > Video 1`] = `
 "<video
   preload=\\"none\\"
@@ -2505,6 +2549,22 @@ exports[`Alpine.js > jsx > Javascript Test > self-referencing component with chi
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > setState 1`] = `
+"<div x-data=\\"setState()\\"><button x-on:click=\\"someFn()\\">Click me</button></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"setState\\", () => ({
+      n: [\\"123\\"],
+
+      someFn() {
+        this.n[0] = \\"123\\";
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > showExpressions 1`] = `
 "<div x-data=\\"showWithOtherValues()\\">
   <template x-if=\\"conditionA\\">Content0</template>
@@ -3296,7 +3356,7 @@ exports[`Alpine.js > jsx > Typescript Test > BasicRef 1`] = `
       name: \\"PatrickJS\\",
       onBlur: function onBlur() {
         // Maintain focus
-        this.$refs.inputRef.focus();
+        this.$refs.inputRef?.focus();
       },
       lowerCaseName: function lowerCaseName() {
         return this.name.toLowerCase();
@@ -4048,6 +4108,23 @@ exports[`Alpine.js > jsx > Typescript Test > InputParent 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > NestedStore 1`] = `
+"<div x-data=\\"nestedStore()\\" x-bind:id=\\"_id\\">
+  Test
+
+  <p x-bind:id=\\"_messageId\\">Message</p>
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"nestedStore\\", () => ({
+      _id: \\"abc\\",
+      _messageId: this._id + \\"-message\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > RawText 1`] = `
 "<span
   x-data=\\"rawText()\\"
@@ -4310,6 +4387,33 @@ exports[`Alpine.js > jsx > Typescript Test > Textarea 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"<div x-data=\\"useValueAndFnFromStore()\\" x-effect=\\"onUpdate\\">Test</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"useValueAndFnFromStore\\", () => ({
+      _id: \\"abc\\",
+      _active: false,
+
+      _do(id?: string) {
+        this._active = !!id;
+
+        if (props.onChange) {
+          props.onChange(this._active);
+        }
+      },
+
+      onUpdate() {
+        if (this._do) {
+          this._do(this._id);
+        }
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > Video 1`] = `
 "<video
   preload=\\"none\\"
@@ -5413,6 +5517,22 @@ exports[`Alpine.js > jsx > Typescript Test > self-referencing component with chi
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > setState 1`] = `
+"<div x-data=\\"setState()\\"><button x-on:click=\\"someFn()\\">Click me</button></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"setState\\", () => ({
+      n: [\\"123\\"],
+
+      someFn() {
+        this.n[0] = \\"123\\";
+      },
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > showExpressions 1`] = `
 "<div x-data=\\"showWithOtherValues()\\">
   <template x-if=\\"conditionA\\">Content0</template>