Fix: useTarget + useState (#1596)

* f * f
BuilderIO · Oct 17, 2024 · 0aa642a · 0aa642a
1 parent 628211d
commit 0aa642a
Show file tree

Hide file tree

Showing 27 changed files with 303 additions and 48 deletions.
diff --git a/.changeset/pretty-pears-do.md b/.changeset/pretty-pears-do.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[All]: Fix: accessing `useState()` getter/setter within `useTarget()`
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
@@ -51,7 +51,7 @@ jobs:
  cache-install-state: true
 
  - name: Build
- run: yarn ci:build --verbose
+ run: yarn ci:build
 
  test:
  runs-on: ubuntu-latest
@@ -71,7 +71,7 @@ jobs:
  cache-install-state: true
 
  - name: Run tests
- run: yarn ci:test --verbose
+ run: yarn ci:test
 
  site:
  runs-on: ubuntu-latest
@@ -111,7 +111,7 @@ jobs:
  cache-install-state: true
 
  - name: Build
- run: yarn ci:build --verbose
+ run: yarn ci:build
 
  - name: Run E2E tests
- run: yarn ci:e2e --verbose
+ run: yarn ci:e2e
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2771,8 +2771,12 @@ exports[`Alpine.js > jsx > Javascript Test > useTarget 1`] = `
  },
 
  lastName: \\"bar\\",
+ foo: \\"bar\\",
 
- init() {},
+ init() {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
+ },
  }));
  });
 </script>
@@ -5577,8 +5581,12 @@ exports[`Alpine.js > jsx > Typescript Test > useTarget 1`] = `
  },
 
  lastName: \\"bar\\",
+ foo: \\"bar\\",
 
- init() {},
+ init() {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
+ },
  }));
  });
 </script>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -6858,9 +6858,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }
@@ -14273,9 +14276,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -6971,9 +6971,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }
@@ -14504,9 +14507,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }

diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -7076,9 +7076,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }
@@ -14734,9 +14737,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }

diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -6132,9 +6132,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }
@@ -12805,9 +12808,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }

diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -12868,9 +12868,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }
@@ -12909,9 +12912,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }
@@ -26852,9 +26858,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }
@@ -26893,9 +26902,12 @@ export default class UseTargetComponent {
  return prefix + \\"foo\\";
  }
  lastName = \\"bar\\";
+ foo = \\"bar\\";
 
  ngOnInit() {
  if (typeof window !== \\"undefined\\") {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
  }
  }
 }

diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -6831,6 +6831,7 @@ exports[`Html > jsx > Javascript Test > useTarget 1`] = `
  return prefix + \\"foo\\";
  },
  lastName: \\"bar\\",
+ foo: \\"bar\\",
  };
 
  let context = null;
@@ -6865,6 +6866,9 @@ exports[`Html > jsx > Javascript Test > useTarget 1`] = `
  update();
 
  // onMount
+ console.log(state.foo);
+ state.foo = \\"bar\\";
+ update();
 
  // Helper text DOM nodes
  function renderTextNode(el, text) {
@@ -13784,6 +13788,7 @@ exports[`Html > jsx > Typescript Test > useTarget 1`] = `
  return prefix + \\"foo\\";
  },
  lastName: \\"bar\\",
+ foo: \\"bar\\",
  };
 
  let context = null;
@@ -13818,6 +13823,9 @@ exports[`Html > jsx > Typescript Test > useTarget 1`] = `
  update();
 
  // onMount
+ console.log(state.foo);
+ state.foo = \\"bar\\";
+ update();
 
  // Helper text DOM nodes
  function renderTextNode(el, text) {

diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -4172,13 +4172,17 @@ export default class UseTargetComponent extends LitElement {
  }
 
  @state() lastName = \\"bar\\";
+ @state() foo = \\"bar\\";
 
  get name() {
  const prefix = \\"li\\";
  return prefix + \\"foo\\";
  }
 
- connectedCallback() {}
+ connectedCallback() {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
+ }
 
  render() {
  return html\`
@@ -8849,13 +8853,17 @@ export default class UseTargetComponent extends LitElement {
  }
 
  @state() lastName = \\"bar\\";
+ @state() foo = \\"bar\\";
 
  get name() {
  const prefix = \\"li\\";
  return prefix + \\"foo\\";
  }
 
- connectedCallback() {}
+ connectedCallback() {
+ console.log(this.foo);
+ this.foo = \\"bar\\";
+ }
 
  render() {
  return html\`

diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -2509,10 +2509,13 @@ exports[`Marko > jsx > Javascript Test > useTarget 1`] = `
  }
 
  onCreate() {
- this.state = { lastName: \\"bar\\" };
+ this.state = { lastName: \\"bar\\", foo: \\"bar\\" };
  }
 
- onMount() {}
+ onMount() {
+ console.log(this.state.foo);
+ this.state.foo = \\"bar\\";
+ }
 }
 
 <div>\${component.name}</div>"
@@ -5017,10 +5020,13 @@ exports[`Marko > jsx > Typescript Test > useTarget 1`] = `
  }
 
  onCreate() {
- this.state = { lastName: \\"bar\\" };
+ this.state = { lastName: \\"bar\\", foo: \\"bar\\" };
  }
 
- onMount() {}
+ onMount() {
+ console.log(this.state.foo);
+ this.state.foo = \\"bar\\";
+ }
 }
 
 <div>\${component.name}</div>"