From e9cfef0ef38a82872ef6a1b0a825c8c74895029a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 8 Nov 2024 12:07:05 -0500 Subject: [PATCH] fix: identifiers are not incorrectly scoped to state (#1630) * add failing test * update tests * fails * fix: only map state variables used in useState * base tests * update tests * account for other state values and functions * update snapshots * changeset * make sure state is actually used * rename * fix angular * snapshots * Update late-papayas-eat.md * Update .changeset/late-papayas-eat.md --------- Co-authored-by: Sami Jaber --- .changeset/late-papayas-eat.md | 6 + .../__snapshots__/alpine.test.ts.snap | 64 +++ .../__snapshots__/angular.import.test.ts.snap | 178 ++++++-- .../__snapshots__/angular.mapper.test.ts.snap | 182 ++++++-- .../__snapshots__/angular.state.test.ts.snap | 222 ++++++++-- .../__snapshots__/angular.styles.test.ts.snap | 150 +++++-- .../__snapshots__/angular.test.ts.snap | 328 +++++++++++--- .../__tests__/__snapshots__/html.test.ts.snap | 236 +++++++++++ .../__snapshots__/liquid.test.ts.snap | 20 + .../__tests__/__snapshots__/lit.test.ts.snap | 108 +++++ .../__snapshots__/marko.test.ts.snap | 56 +++ .../__snapshots__/mitosis.test.ts.snap | 212 ++++++++++ .../__snapshots__/parse-jsx.test.ts.snap | 244 +++++++++++ .../__snapshots__/preact.test.ts.snap | 76 ++++ .../__tests__/__snapshots__/qwik.test.ts.snap | 64 +++ .../__snapshots__/react-native.test.ts.snap | 140 ++++++ .../react-state-builder.test.ts.snap | 76 ++++ .../react-state-mobx.test.ts.snap | 84 ++++ .../react-state-solid.test.ts.snap | 80 ++++ .../react-state-valtio.test.ts.snap | 80 ++++ .../react-state-variables.test.ts.snap | 68 +++ .../__snapshots__/react.test.ts.snap | 76 ++++ .../__tests__/__snapshots__/rsc.test.ts.snap | 76 ++++ .../__snapshots__/solid.test.ts.snap | 168 ++++++++ .../__snapshots__/stencil.test.ts.snap | 80 ++++ .../__snapshots__/svelte.test.ts.snap | 48 +++ .../__tests__/__snapshots__/taro.test.ts.snap | 80 ++++ .../vue-composition.test.ts.snap | 108 +++++ .../__tests__/__snapshots__/vue.test.ts.snap | 96 +++++ .../__snapshots__/webcomponent.test.ts.snap | 400 ++++++++++++++++++ .../data/store/store-shadow-vars.raw.tsx | 12 + .../data/store/store-with-state.raw.tsx | 12 + packages/core/src/__tests__/test-generator.ts | 4 + packages/core/src/generators/angular/index.ts | 33 +- .../core/src/parsers/jsx/function-parser.ts | 4 + packages/core/src/parsers/jsx/jsx.ts | 6 +- packages/core/src/parsers/jsx/state.ts | 11 +- 37 files changed, 3731 insertions(+), 157 deletions(-) create mode 100644 .changeset/late-papayas-eat.md create mode 100644 packages/core/src/__tests__/data/store/store-shadow-vars.raw.tsx create mode 100644 packages/core/src/__tests__/data/store/store-with-state.raw.tsx diff --git a/.changeset/late-papayas-eat.md b/.changeset/late-papayas-eat.md new file mode 100644 index 0000000000..5fb25ea54b --- /dev/null +++ b/.changeset/late-papayas-eat.md @@ -0,0 +1,6 @@ +--- +'@builder.io/mitosis': patch +--- + +[All] Fix: scope renaming of state methods to not include shadow variables +[Angular]: Update `state.*` -> `this.*` transform to new AST transform approach diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap index 09e963a77d..108b6731e1 100644 --- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap @@ -1395,6 +1395,38 @@ exports[`Alpine.js > jsx > Javascript Test > StoreComment 1`] = ` " `; +exports[`Alpine.js > jsx > Javascript Test > StoreShadowVars 1`] = ` +"
+ +" +`; + +exports[`Alpine.js > jsx > Javascript Test > StoreWithState 1`] = ` +"
+ +" +`; + exports[`Alpine.js > jsx > Javascript Test > Submit 1`] = ` " " @@ -1345,6 +1355,16 @@ exports[`Liquid > jsx > Typescript Test > StoreComment 1`] = ` " `; +exports[`Liquid > jsx > Typescript Test > StoreShadowVars 1`] = ` +"
+" +`; + +exports[`Liquid > jsx > Typescript Test > StoreWithState 1`] = ` +"
+" +`; + exports[`Liquid > jsx > Typescript Test > Submit 1`] = ` " " diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap index 383519ae6d..cee39adce9 100644 --- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap @@ -1899,6 +1899,60 @@ export default class StringLiteralStore extends LitElement { " `; +exports[`Lit > jsx > Javascript Test > StoreShadowVars 1`] = ` +"import { LitElement, html, css } from \\"lit\\"; +import { customElement, property, state, query } from \\"lit/decorators.js\\"; + +@customElement(\\"my-component\\") +export default class MyComponent extends LitElement { + createRenderRoot() { + return this; + } + + @state() errors = {}; + + foo(errors) { + return errors; + } + + render() { + return html\` + + \${this.foo(this.errors)} + + \`; + } +} +" +`; + +exports[`Lit > jsx > Javascript Test > StoreWithState 1`] = ` +"import { LitElement, html, css } from \\"lit\\"; +import { customElement, property, state, query } from \\"lit/decorators.js\\"; + +@customElement(\\"my-component\\") +export default class MyComponent extends LitElement { + createRenderRoot() { + return this; + } + + @state() foo = false; + + bar() { + return this.foo; + } + + render() { + return html\` + + \${this.bar()} + + \`; + } +} +" +`; + exports[`Lit > jsx > Javascript Test > Submit 1`] = ` "import { LitElement, html, css } from \\"lit\\"; import { customElement, property, state, query } from \\"lit/decorators.js\\"; @@ -6637,6 +6691,60 @@ export default class StringLiteralStore extends LitElement { " `; +exports[`Lit > jsx > Typescript Test > StoreShadowVars 1`] = ` +"import { LitElement, html, css } from \\"lit\\"; +import { customElement, property, state, query } from \\"lit/decorators.js\\"; + +@customElement(\\"my-component\\") +export default class MyComponent extends LitElement { + createRenderRoot() { + return this; + } + + @state() errors = {}; + + foo(errors) { + return errors; + } + + render() { + return html\` + + \${this.foo(this.errors)} + + \`; + } +} +" +`; + +exports[`Lit > jsx > Typescript Test > StoreWithState 1`] = ` +"import { LitElement, html, css } from \\"lit\\"; +import { customElement, property, state, query } from \\"lit/decorators.js\\"; + +@customElement(\\"my-component\\") +export default class MyComponent extends LitElement { + createRenderRoot() { + return this; + } + + @state() foo = false; + + bar() { + return this.foo; + } + + render() { + return html\` + + \${this.bar()} + + \`; + } +} +" +`; + exports[`Lit > jsx > Typescript Test > Submit 1`] = ` "import { LitElement, html, css } from \\"lit\\"; import { customElement, property, state, query } from \\"lit/decorators.js\\"; diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap index f19b42b7a8..d2c2429920 100644 --- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap @@ -1321,6 +1321,34 @@ exports[`Marko > jsx > Javascript Test > StoreComment 1`] = ` \${state.foo}" `; +exports[`Marko > jsx > Javascript Test > StoreShadowVars 1`] = ` +"class { + foo(errors) { + return errors; + } + + onCreate() { + this.state = { errors: {} }; + } +} + +\${component.foo(state.errors)}" +`; + +exports[`Marko > jsx > Javascript Test > StoreWithState 1`] = ` +"class { + bar() { + return this.state.foo; + } + + onCreate() { + this.state = { foo: false }; + } +} + +\${component.bar()}" +`; + exports[`Marko > jsx > Javascript Test > Submit 1`] = ` "class {} @@ -3987,6 +4015,34 @@ exports[`Marko > jsx > Typescript Test > StoreComment 1`] = ` \${state.foo}" `; +exports[`Marko > jsx > Typescript Test > StoreShadowVars 1`] = ` +"class { + foo(errors) { + return errors; + } + + onCreate() { + this.state = { errors: {} }; + } +} + +\${component.foo(state.errors)}" +`; + +exports[`Marko > jsx > Typescript Test > StoreWithState 1`] = ` +"class { + bar() { + return this.state.foo; + } + + onCreate() { + this.state = { foo: false }; + } +} + +\${component.bar()}" +`; + exports[`Marko > jsx > Typescript Test > Submit 1`] = ` "class {} diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap index bff7c2724b..d7d714b82b 100644 --- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap @@ -1435,6 +1435,40 @@ export default function StringLiteralStore(props) { " `; +exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > StoreShadowVars 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; +import { Fragment } from \\"@components\\"; + +export default function MyComponent(props) { + const state = useStore({ + errors: {}, + foo(errors) { + return errors; + }, + }); + + return [{state.foo(state.errors)}]; +} +" +`; + +exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > StoreWithState 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; +import { Fragment } from \\"@components\\"; + +export default function MyComponent(props) { + const state = useStore({ + foo: false, + bar() { + return state.foo; + }, + }); + + return [{state.bar()}]; +} +" +`; + exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > Submit 1`] = ` "export default function SubmitButton(props) { return [ @@ -4616,6 +4650,40 @@ export default function StringLiteralStore(props) { " `; +exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > StoreShadowVars 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; +import { Fragment } from \\"@components\\"; + +export default function MyComponent(props) { + const state = useStore({ + errors: {}, + foo(errors) { + return errors; + }, + }); + + return [{state.foo(state.errors)}]; +} +" +`; + +exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > StoreWithState 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; +import { Fragment } from \\"@components\\"; + +export default function MyComponent(props) { + const state = useStore({ + foo: false, + bar() { + return state.foo; + }, + }); + + return [{state.bar()}]; +} +" +`; + exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Submit 1`] = ` "export interface ButtonProps { attributes?: any; @@ -8513,6 +8581,40 @@ export default function StringLiteralStore(props) { " `; +exports[`Mitosis, format: legacy > jsx > Javascript Test > StoreShadowVars 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; +import { Fragment } from \\"@components\\"; + +export default function MyComponent(props) { + const state = useStore({ + errors: {}, + foo(errors) { + return errors; + }, + }); + + return {state.foo(state.errors)}; +} +" +`; + +exports[`Mitosis, format: legacy > jsx > Javascript Test > StoreWithState 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; +import { Fragment } from \\"@components\\"; + +export default function MyComponent(props) { + const state = useStore({ + foo: false, + bar() { + return state.foo; + }, + }); + + return {state.bar()}; +} +" +`; + exports[`Mitosis, format: legacy > jsx > Javascript Test > Submit 1`] = ` "export default function SubmitButton(props) { return ( @@ -11752,6 +11854,40 @@ export default function StringLiteralStore(props) { " `; +exports[`Mitosis, format: legacy > jsx > Typescript Test > StoreShadowVars 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; +import { Fragment } from \\"@components\\"; + +export default function MyComponent(props) { + const state = useStore({ + errors: {}, + foo(errors) { + return errors; + }, + }); + + return {state.foo(state.errors)}; +} +" +`; + +exports[`Mitosis, format: legacy > jsx > Typescript Test > StoreWithState 1`] = ` +"import { useStore } from \\"@builder.io/mitosis\\"; +import { Fragment } from \\"@components\\"; + +export default function MyComponent(props) { + const state = useStore({ + foo: false, + bar() { + return state.foo; + }, + }); + + return {state.bar()}; +} +" +`; + exports[`Mitosis, format: legacy > jsx > Typescript Test > Submit 1`] = ` "export interface ButtonProps { attributes?: any; @@ -15815,6 +15951,44 @@ export default StringLiteralStore; " `; +exports[`Mitosis, format: react > jsx > Javascript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props) { + const [errors, setErrors] = useState(() => ({})); + + function foo(errors) { + return errors; + } + + return <>{foo(errors)}; +} + +export default MyComponent; +" +`; + +exports[`Mitosis, format: react > jsx > Javascript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props) { + const [foo, setFoo] = useState(() => false); + + function bar() { + return foo; + } + + return <>{bar()}; +} + +export default MyComponent; +" +`; + exports[`Mitosis, format: react > jsx > Javascript Test > Submit 1`] = ` "import * as React from \\"react\\"; @@ -19445,6 +19619,44 @@ export default StringLiteralStore; " `; +exports[`Mitosis, format: react > jsx > Typescript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props) { + const [errors, setErrors] = useState(() => ({})); + + function foo(errors) { + return errors; + } + + return <>{foo(errors)}; +} + +export default MyComponent; +" +`; + +exports[`Mitosis, format: react > jsx > Typescript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props) { + const [foo, setFoo] = useState(() => false); + + function bar() { + return foo; + } + + return <>{bar()}; +} + +export default MyComponent; +" +`; + exports[`Mitosis, format: react > jsx > Typescript Test > Submit 1`] = ` "import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap index f2e67a4335..fb7f8737b4 100644 --- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap @@ -5329,6 +5329,128 @@ exports[`Parse JSX > Javascript > StoreComment 1`] = ` } `; +exports[`Parse JSX > Javascript > StoreShadowVars 1`] = ` +{ + "@type": "@builder.io/mitosis/component", + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": { + "_text": { + "bindingType": "expression", + "code": "state.foo(state.errors)", + "type": "single", + }, + }, + "children": [], + "meta": {}, + "name": "div", + "properties": {}, + "scope": {}, + }, + ], + "meta": {}, + "name": "Fragment", + "properties": {}, + "scope": {}, + }, + ], + "context": { + "get": {}, + "set": {}, + }, + "exports": {}, + "hooks": { + "onEvent": [], + "onMount": [], + }, + "imports": [], + "inputs": [], + "meta": {}, + "name": "MyComponent", + "refs": {}, + "state": { + "errors": { + "code": "{}", + "propertyType": "normal", + "type": "property", + }, + "foo": { + "code": "foo(errors) { + return errors; +}", + "type": "method", + }, + }, + "subComponents": [], +} +`; + +exports[`Parse JSX > Javascript > StoreWithState 1`] = ` +{ + "@type": "@builder.io/mitosis/component", + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": { + "_text": { + "bindingType": "expression", + "code": "state.bar()", + "type": "single", + }, + }, + "children": [], + "meta": {}, + "name": "div", + "properties": {}, + "scope": {}, + }, + ], + "meta": {}, + "name": "Fragment", + "properties": {}, + "scope": {}, + }, + ], + "context": { + "get": {}, + "set": {}, + }, + "exports": {}, + "hooks": { + "onEvent": [], + "onMount": [], + }, + "imports": [], + "inputs": [], + "meta": {}, + "name": "MyComponent", + "refs": {}, + "state": { + "bar": { + "code": "bar() { + return state.foo; +}", + "type": "method", + }, + "foo": { + "code": "false", + "propertyType": "normal", + "type": "property", + }, + }, + "subComponents": [], +} +`; + exports[`Parse JSX > Javascript > Submit 1`] = ` { "@type": "@builder.io/mitosis/component", @@ -18166,6 +18288,128 @@ exports[`Parse JSX > Typescript > StoreComment 1`] = ` } `; +exports[`Parse JSX > Typescript > StoreShadowVars 1`] = ` +{ + "@type": "@builder.io/mitosis/component", + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": { + "_text": { + "bindingType": "expression", + "code": "state.foo(state.errors)", + "type": "single", + }, + }, + "children": [], + "meta": {}, + "name": "div", + "properties": {}, + "scope": {}, + }, + ], + "meta": {}, + "name": "Fragment", + "properties": {}, + "scope": {}, + }, + ], + "context": { + "get": {}, + "set": {}, + }, + "exports": {}, + "hooks": { + "onEvent": [], + "onMount": [], + }, + "imports": [], + "inputs": [], + "meta": {}, + "name": "MyComponent", + "refs": {}, + "state": { + "errors": { + "code": "{}", + "propertyType": "normal", + "type": "property", + }, + "foo": { + "code": "foo(errors) { + return errors; +}", + "type": "method", + }, + }, + "subComponents": [], +} +`; + +exports[`Parse JSX > Typescript > StoreWithState 1`] = ` +{ + "@type": "@builder.io/mitosis/component", + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": { + "_text": { + "bindingType": "expression", + "code": "state.bar()", + "type": "single", + }, + }, + "children": [], + "meta": {}, + "name": "div", + "properties": {}, + "scope": {}, + }, + ], + "meta": {}, + "name": "Fragment", + "properties": {}, + "scope": {}, + }, + ], + "context": { + "get": {}, + "set": {}, + }, + "exports": {}, + "hooks": { + "onEvent": [], + "onMount": [], + }, + "imports": [], + "inputs": [], + "meta": {}, + "name": "MyComponent", + "refs": {}, + "state": { + "bar": { + "code": "bar() { + return state.foo; +}", + "type": "method", + }, + "foo": { + "code": "false", + "propertyType": "normal", + "type": "property", + }, + }, + "subComponents": [], +} +`; + exports[`Parse JSX > Typescript > Submit 1`] = ` { "@type": "@builder.io/mitosis/component", diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap index 6bd5a45515..9832dcf199 100644 --- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap @@ -1496,6 +1496,44 @@ export default StringLiteralStore; " `; +exports[`Preact > jsx > Javascript Test > StoreShadowVars 1`] = ` +"/** @jsx h */ +import { h, Fragment } from \\"preact\\"; +import { useState } from \\"preact/hooks\\"; + +function MyComponent(props) { + const [errors, setErrors] = useState(() => ({})); + + function foo(errors) { + return errors; + } + + return {foo(errors)}; +} + +export default MyComponent; +" +`; + +exports[`Preact > jsx > Javascript Test > StoreWithState 1`] = ` +"/** @jsx h */ +import { h, Fragment } from \\"preact\\"; +import { useState } from \\"preact/hooks\\"; + +function MyComponent(props) { + const [foo, setFoo] = useState(() => false); + + function bar() { + return foo; + } + + return {bar()}; +} + +export default MyComponent; +" +`; + exports[`Preact > jsx > Javascript Test > Submit 1`] = ` "/** @jsx h */ import { h, Fragment } from \\"preact\\"; @@ -5355,6 +5393,44 @@ export default StringLiteralStore; " `; +exports[`Preact > jsx > Typescript Test > StoreShadowVars 1`] = ` +"/** @jsx h */ +import { h, Fragment } from \\"preact\\"; +import { useState } from \\"preact/hooks\\"; + +function MyComponent(props: any) { + const [errors, setErrors] = useState(() => ({})); + + function foo(errors) { + return errors; + } + + return {foo(errors)}; +} + +export default MyComponent; +" +`; + +exports[`Preact > jsx > Typescript Test > StoreWithState 1`] = ` +"/** @jsx h */ +import { h, Fragment } from \\"preact\\"; +import { useState } from \\"preact/hooks\\"; + +function MyComponent(props: any) { + const [foo, setFoo] = useState(() => false); + + function bar() { + return foo; + } + + return {bar()}; +} + +export default MyComponent; +" +`; + exports[`Preact > jsx > Typescript Test > Submit 1`] = ` "/** @jsx h */ import { h, Fragment } from \\"preact\\"; diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap index cf0a4f7ce6..36c49fc99f 100644 --- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap @@ -3415,6 +3415,38 @@ export default StringLiteralStore; " `; +exports[`qwik > jsx > Javascript Test > StoreShadowVars 1`] = ` +"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\"; + +export const foo = function foo(props, state, errors) { + return errors; +}; +export const MyComponent = component$((props) => { + const state = useStore({ errors: {} }); + + return {foo(props, state, state.errors)}; +}); + +export default MyComponent; +" +`; + +exports[`qwik > jsx > Javascript Test > StoreWithState 1`] = ` +"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\"; + +export const bar = function bar(props, state) { + return state.foo; +}; +export const MyComponent = component$((props) => { + const state = useStore({ foo: false }); + + return {bar(props, state)}; +}); + +export default MyComponent; +" +`; + exports[`qwik > jsx > Javascript Test > Submit 1`] = ` "import { Fragment, component$, h } from \\"@builder.io/qwik\\"; @@ -7219,6 +7251,38 @@ export default StringLiteralStore; " `; +exports[`qwik > jsx > Typescript Test > StoreShadowVars 1`] = ` +"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\"; + +export const foo = function foo(props, state, errors) { + return errors; +}; +export const MyComponent = component$((props: any) => { + const state = useStore({ errors: {} }); + + return {foo(props, state, state.errors)}; +}); + +export default MyComponent; +" +`; + +exports[`qwik > jsx > Typescript Test > StoreWithState 1`] = ` +"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\"; + +export const bar = function bar(props, state) { + return state.foo; +}; +export const MyComponent = component$((props: any) => { + const state = useStore({ foo: false }); + + return {bar(props, state)}; +}); + +export default MyComponent; +" +`; + exports[`qwik > jsx > Typescript Test > Submit 1`] = ` "import { Fragment, component$, h } from \\"@builder.io/qwik\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap index 2a4da807b3..e0fe28c783 100644 --- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap @@ -1942,6 +1942,76 @@ export default StringLiteralStore; " `; +exports[`React Native > jsx > Javascript Test > StoreShadowVars 1`] = ` +"import * as React from \\"react\\"; +import { + FlatList, + ScrollView, + View, + StyleSheet, + Image, + Text, + Pressable, + TextInput, + TouchableOpacity, + Button, + Linking, +} from \\"react-native\\"; +import { useState } from \\"react\\"; + +function MyComponent(props) { + const [errors, setErrors] = useState(() => ({})); + + function foo(errors) { + return errors; + } + + return ( + <> + {foo(errors)} + + ); +} + +export default MyComponent; +" +`; + +exports[`React Native > jsx > Javascript Test > StoreWithState 1`] = ` +"import * as React from \\"react\\"; +import { + FlatList, + ScrollView, + View, + StyleSheet, + Image, + Text, + Pressable, + TextInput, + TouchableOpacity, + Button, + Linking, +} from \\"react-native\\"; +import { useState } from \\"react\\"; + +function MyComponent(props) { + const [foo, setFoo] = useState(() => false); + + function bar() { + return foo; + } + + return ( + <> + {bar()} + + ); +} + +export default MyComponent; +" +`; + exports[`React Native > jsx > Javascript Test > Submit 1`] = ` "import * as React from \\"react\\"; import { @@ -7276,6 +7346,76 @@ export default StringLiteralStore; " `; +exports[`React Native > jsx > Typescript Test > StoreShadowVars 1`] = ` +"import * as React from \\"react\\"; +import { + FlatList, + ScrollView, + View, + StyleSheet, + Image, + Text, + Pressable, + TextInput, + TouchableOpacity, + Button, + Linking, +} from \\"react-native\\"; +import { useState } from \\"react\\"; + +function MyComponent(props: any) { + const [errors, setErrors] = useState(() => ({})); + + function foo(errors) { + return errors; + } + + return ( + <> + {foo(errors)} + + ); +} + +export default MyComponent; +" +`; + +exports[`React Native > jsx > Typescript Test > StoreWithState 1`] = ` +"import * as React from \\"react\\"; +import { + FlatList, + ScrollView, + View, + StyleSheet, + Image, + Text, + Pressable, + TextInput, + TouchableOpacity, + Button, + Linking, +} from \\"react-native\\"; +import { useState } from \\"react\\"; + +function MyComponent(props: any) { + const [foo, setFoo] = useState(() => false); + + function bar() { + return foo; + } + + return ( + <> + {bar()} + + ); +} + +export default MyComponent; +" +`; + exports[`React Native > jsx > Typescript Test > Submit 1`] = ` "import * as React from \\"react\\"; import { diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap index 5d19ed303f..ed4693e877 100644 --- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap @@ -1506,6 +1506,44 @@ export default StringLiteralStore; " `; +exports[`React - stateType: builder > jsx > Javascript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function MyComponent(props) { + const state = useBuilderState({ + errors: {}, + foo(errors) { + return errors; + }, + }); + + return <>{state.foo(state.errors)}; +} + +export default MyComponent; +" +`; + +exports[`React - stateType: builder > jsx > Javascript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function MyComponent(props) { + const state = useBuilderState({ + foo: false, + bar() { + return state.foo; + }, + }); + + return <>{state.bar()}; +} + +export default MyComponent; +" +`; + exports[`React - stateType: builder > jsx > Javascript Test > Submit 1`] = ` "import * as React from \\"react\\"; @@ -5348,6 +5386,44 @@ export default StringLiteralStore; " `; +exports[`React - stateType: builder > jsx > Typescript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function MyComponent(props: any) { + const state = useBuilderState({ + errors: {}, + foo(errors) { + return errors; + }, + }); + + return <>{state.foo(state.errors)}; +} + +export default MyComponent; +" +`; + +exports[`React - stateType: builder > jsx > Typescript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function MyComponent(props: any) { + const state = useBuilderState({ + foo: false, + bar() { + return state.foo; + }, + }); + + return <>{state.bar()}; +} + +export default MyComponent; +" +`; + exports[`React - stateType: builder > jsx > Typescript Test > Submit 1`] = ` "import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap index 83d3d88910..214348e508 100644 --- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap @@ -1541,6 +1541,48 @@ export default observedStringLiteralStore; " `; +exports[`React - stateType: mobx > jsx > Javascript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalObservable, observer } from \\"mobx-react-lite\\"; + +function MyComponent(props) { + const state = useLocalObservable(() => ({ + errors: {}, + foo(errors) { + return errors; + }, + })); + + return <>{state.foo(state.errors)}; +} + +const observedMyComponent = observer(MyComponent); +export default observedMyComponent; +" +`; + +exports[`React - stateType: mobx > jsx > Javascript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalObservable, observer } from \\"mobx-react-lite\\"; + +function MyComponent(props) { + const state = useLocalObservable(() => ({ + foo: false, + bar() { + return state.foo; + }, + })); + + return <>{state.bar()}; +} + +const observedMyComponent = observer(MyComponent); +export default observedMyComponent; +" +`; + exports[`React - stateType: mobx > jsx > Javascript Test > Submit 1`] = ` "import * as React from \\"react\\"; @@ -5417,6 +5459,48 @@ export default observedStringLiteralStore; " `; +exports[`React - stateType: mobx > jsx > Typescript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalObservable, observer } from \\"mobx-react-lite\\"; + +function MyComponent(props: any) { + const state = useLocalObservable(() => ({ + errors: {}, + foo(errors) { + return errors; + }, + })); + + return <>{state.foo(state.errors)}; +} + +const observedMyComponent = observer(MyComponent); +export default observedMyComponent; +" +`; + +exports[`React - stateType: mobx > jsx > Typescript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalObservable, observer } from \\"mobx-react-lite\\"; + +function MyComponent(props: any) { + const state = useLocalObservable(() => ({ + foo: false, + bar() { + return state.foo; + }, + })); + + return <>{state.bar()}; +} + +const observedMyComponent = observer(MyComponent); +export default observedMyComponent; +" +`; + exports[`React - stateType: mobx > jsx > Typescript Test > Submit 1`] = ` "import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap index 9bcb508e09..08033a9eac 100644 --- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap @@ -1499,6 +1499,46 @@ export default StringLiteralStore; " `; +exports[`React - stateType: solid > jsx > Javascript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useMutable } from \\"react-solid-state\\"; + +function MyComponent(props) { + const state = useMutable({ + errors: {}, + foo(errors) { + return errors; + }, + }); + + return <>{state.foo(state.errors)}; +} + +export default MyComponent; +" +`; + +exports[`React - stateType: solid > jsx > Javascript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useMutable } from \\"react-solid-state\\"; + +function MyComponent(props) { + const state = useMutable({ + foo: false, + bar() { + return state.foo; + }, + }); + + return <>{state.bar()}; +} + +export default MyComponent; +" +`; + exports[`React - stateType: solid > jsx > Javascript Test > Submit 1`] = ` "import * as React from \\"react\\"; @@ -5254,6 +5294,46 @@ export default StringLiteralStore; " `; +exports[`React - stateType: solid > jsx > Typescript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useMutable } from \\"react-solid-state\\"; + +function MyComponent(props: any) { + const state = useMutable({ + errors: {}, + foo(errors) { + return errors; + }, + }); + + return <>{state.foo(state.errors)}; +} + +export default MyComponent; +" +`; + +exports[`React - stateType: solid > jsx > Typescript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useMutable } from \\"react-solid-state\\"; + +function MyComponent(props: any) { + const state = useMutable({ + foo: false, + bar() { + return state.foo; + }, + }); + + return <>{state.bar()}; +} + +export default MyComponent; +" +`; + exports[`React - stateType: solid > jsx > Typescript Test > Submit 1`] = ` "import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap index bd95bb27df..8dd5d5d2f6 100644 --- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap @@ -1502,6 +1502,46 @@ export default StringLiteralStore; " `; +exports[`React - stateType: valtio > jsx > Javascript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalProxy } from \\"valtio/utils\\"; + +function MyComponent(props) { + const state = useLocalProxy({ + errors: {}, + foo(errors) { + return errors; + }, + }); + + return <>{state.foo(state.errors)}; +} + +export default MyComponent; +" +`; + +exports[`React - stateType: valtio > jsx > Javascript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalProxy } from \\"valtio/utils\\"; + +function MyComponent(props) { + const state = useLocalProxy({ + foo: false, + bar() { + return state.foo; + }, + }); + + return <>{state.bar()}; +} + +export default MyComponent; +" +`; + exports[`React - stateType: valtio > jsx > Javascript Test > Submit 1`] = ` "import * as React from \\"react\\"; @@ -5260,6 +5300,46 @@ export default StringLiteralStore; " `; +exports[`React - stateType: valtio > jsx > Typescript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalProxy } from \\"valtio/utils\\"; + +function MyComponent(props: any) { + const state = useLocalProxy({ + errors: {}, + foo(errors) { + return errors; + }, + }); + + return <>{state.foo(state.errors)}; +} + +export default MyComponent; +" +`; + +exports[`React - stateType: valtio > jsx > Typescript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useLocalProxy } from \\"valtio/utils\\"; + +function MyComponent(props: any) { + const state = useLocalProxy({ + foo: false, + bar() { + return state.foo; + }, + }); + + return <>{state.bar()}; +} + +export default MyComponent; +" +`; + exports[`React - stateType: valtio > jsx > Typescript Test > Submit 1`] = ` "import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap index d4f4335723..95bdf7a555 100644 --- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap @@ -969,6 +969,40 @@ export default StringLiteralStore; " `; +exports[`React - stateType: variables > jsx > Javascript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function MyComponent(props) { + const errors = {}; + const foo = function foo(errors) { + return errors; + }; + + return <>{foo(errors)}; +} + +export default MyComponent; +" +`; + +exports[`React - stateType: variables > jsx > Javascript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function MyComponent(props) { + const foo = false; + const bar = function bar() { + return foo; + }; + + return <>{bar()}; +} + +export default MyComponent; +" +`; + exports[`React - stateType: variables > jsx > Javascript Test > Submit 1`] = ` "import * as React from \\"react\\"; @@ -3823,6 +3857,40 @@ export default StringLiteralStore; " `; +exports[`React - stateType: variables > jsx > Typescript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function MyComponent(props: any) { + const errors = {}; + const foo = function foo(errors) { + return errors; + }; + + return <>{foo(errors)}; +} + +export default MyComponent; +" +`; + +exports[`React - stateType: variables > jsx > Typescript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; + +function MyComponent(props: any) { + const foo = false; + const bar = function bar() { + return foo; + }; + + return <>{bar()}; +} + +export default MyComponent; +" +`; + exports[`React - stateType: variables > jsx > Typescript Test > Submit 1`] = ` "import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap index 7eb849d8da..9a9113265f 100644 --- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap @@ -1482,6 +1482,44 @@ export default StringLiteralStore; " `; +exports[`React - stateType: useState > jsx > Javascript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props) { + const [errors, setErrors] = useState(() => ({})); + + function foo(errors) { + return errors; + } + + return <>{foo(errors)}; +} + +export default MyComponent; +" +`; + +exports[`React - stateType: useState > jsx > Javascript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props) { + const [foo, setFoo] = useState(() => false); + + function bar() { + return foo; + } + + return <>{bar()}; +} + +export default MyComponent; +" +`; + exports[`React - stateType: useState > jsx > Javascript Test > Submit 1`] = ` "import * as React from \\"react\\"; @@ -5237,6 +5275,44 @@ export default StringLiteralStore; " `; +exports[`React - stateType: useState > jsx > Typescript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props: any) { + const [errors, setErrors] = useState(() => ({})); + + function foo(errors) { + return errors; + } + + return <>{foo(errors)}; +} + +export default MyComponent; +" +`; + +exports[`React - stateType: useState > jsx > Typescript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props: any) { + const [foo, setFoo] = useState(() => false); + + function bar() { + return foo; + } + + return <>{bar()}; +} + +export default MyComponent; +" +`; + exports[`React - stateType: useState > jsx > Typescript Test > Submit 1`] = ` "import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap index 8058f91533..096da473ee 100644 --- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap @@ -1479,6 +1479,44 @@ export default StringLiteralStore; " `; +exports[`RSC > jsx > Javascript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props) { + const [errors, setErrors] = useState(() => ({})); + + function foo(errors) { + return errors; + } + + return <>{foo(errors)}; +} + +export default MyComponent; +" +`; + +exports[`RSC > jsx > Javascript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props) { + const [foo, setFoo] = useState(() => false); + + function bar() { + return foo; + } + + return <>{bar()}; +} + +export default MyComponent; +" +`; + exports[`RSC > jsx > Javascript Test > Submit 1`] = ` "import * as React from \\"react\\"; @@ -4963,6 +5001,44 @@ export default StringLiteralStore; " `; +exports[`RSC > jsx > Typescript Test > StoreShadowVars 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props: any) { + const [errors, setErrors] = useState(() => ({})); + + function foo(errors) { + return errors; + } + + return <>{foo(errors)}; +} + +export default MyComponent; +" +`; + +exports[`RSC > jsx > Typescript Test > StoreWithState 1`] = ` +"\\"use client\\"; +import * as React from \\"react\\"; +import { useState } from \\"react\\"; + +function MyComponent(props: any) { + const [foo, setFoo] = useState(() => false); + + function bar() { + return foo; + } + + return <>{bar()}; +} + +export default MyComponent; +" +`; + exports[`RSC > jsx > Typescript Test > Submit 1`] = ` "import * as React from \\"react\\"; diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap index 3300632457..152cfa6bed 100644 --- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap @@ -3440,6 +3440,90 @@ export default StringLiteralStore; " `; +exports[`Solid > jsx > Javascript Test > StoreShadowVars 1`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function MyComponent(props) { + const [errors, setErrors] = createSignal({}); + + function foo(errors) { + return errors; + } + + return ( + <> + <>{foo(errors())} + + ); +} + +export default MyComponent; +" +`; + +exports[`Solid > jsx > Javascript Test > StoreShadowVars 2`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function MyComponent(props) { + const [errors, setErrors] = createSignal({}); + + function foo(errors) { + return errors; + } + + return ( + <> + <>{foo(errors())} + + ); +} + +export default MyComponent; +" +`; + +exports[`Solid > jsx > Javascript Test > StoreWithState 1`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function MyComponent(props) { + const [foo, setFoo] = createSignal(false); + + function bar() { + return foo(); + } + + return ( + <> + <>{bar()} + + ); +} + +export default MyComponent; +" +`; + +exports[`Solid > jsx > Javascript Test > StoreWithState 2`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function MyComponent(props) { + const [foo, setFoo] = createSignal(false); + + function bar() { + return foo(); + } + + return ( + <> + <>{bar()} + + ); +} + +export default MyComponent; +" +`; + exports[`Solid > jsx > Javascript Test > Submit 1`] = ` "function SubmitButton(props) { return ( @@ -11572,6 +11656,90 @@ export default StringLiteralStore; " `; +exports[`Solid > jsx > Typescript Test > StoreShadowVars 1`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function MyComponent(props: any) { + const [errors, setErrors] = createSignal({}); + + function foo(errors) { + return errors; + } + + return ( + <> + <>{foo(errors())} + + ); +} + +export default MyComponent; +" +`; + +exports[`Solid > jsx > Typescript Test > StoreShadowVars 2`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function MyComponent(props: any) { + const [errors, setErrors] = createSignal({}); + + function foo(errors) { + return errors; + } + + return ( + <> + <>{foo(errors())} + + ); +} + +export default MyComponent; +" +`; + +exports[`Solid > jsx > Typescript Test > StoreWithState 1`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function MyComponent(props: any) { + const [foo, setFoo] = createSignal(false); + + function bar() { + return foo(); + } + + return ( + <> + <>{bar()} + + ); +} + +export default MyComponent; +" +`; + +exports[`Solid > jsx > Typescript Test > StoreWithState 2`] = ` +"import { createSignal, createMemo } from \\"solid-js\\"; + +function MyComponent(props: any) { + const [foo, setFoo] = createSignal(false); + + function bar() { + return foo(); + } + + return ( + <> + <>{bar()} + + ); +} + +export default MyComponent; +" +`; + exports[`Solid > jsx > Typescript Test > Submit 1`] = ` "export interface ButtonProps { attributes?: any; diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap index eb3b2816bb..c6a91fa340 100644 --- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap @@ -1781,6 +1781,46 @@ export class StringLiteralStore { " `; +exports[`Stencil > jsx > Javascript Test > StoreShadowVars 1`] = ` +"import { Component, h, Fragment, State } from \\"@stencil/core\\"; + +@Component({ + tag: \\"my-component\\", +}) +export class MyComponent { + @State() errors = {}; + + foo(errors) { + return errors; + } + + render() { + return {this.foo(this.errors)}; + } +} +" +`; + +exports[`Stencil > jsx > Javascript Test > StoreWithState 1`] = ` +"import { Component, h, Fragment, State } from \\"@stencil/core\\"; + +@Component({ + tag: \\"my-component\\", +}) +export class MyComponent { + @State() foo = false; + + bar() { + return this.foo; + } + + render() { + return {this.bar()}; + } +} +" +`; + exports[`Stencil > jsx > Javascript Test > Submit 1`] = ` "import { Component, h, Fragment, Prop } from \\"@stencil/core\\"; @@ -5800,6 +5840,46 @@ export class StringLiteralStore { " `; +exports[`Stencil > jsx > Typescript Test > StoreShadowVars 1`] = ` +"import { Component, h, Fragment, State } from \\"@stencil/core\\"; + +@Component({ + tag: \\"my-component\\", +}) +export class MyComponent { + @State() errors = {}; + + foo(errors) { + return errors; + } + + render() { + return {this.foo(this.errors)}; + } +} +" +`; + +exports[`Stencil > jsx > Typescript Test > StoreWithState 1`] = ` +"import { Component, h, Fragment, State } from \\"@stencil/core\\"; + +@Component({ + tag: \\"my-component\\", +}) +export class MyComponent { + @State() foo = false; + + bar() { + return this.foo; + } + + render() { + return {this.bar()}; + } +} +" +`; + exports[`Stencil > jsx > Typescript Test > Submit 1`] = ` "import { Component, h, Fragment, Prop } from \\"@stencil/core\\"; diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap index e25aa06e2f..59c19c2c1a 100644 --- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap @@ -1414,6 +1414,30 @@ exports[`Svelte > jsx > Javascript Test > StoreComment 1`] = ` {foo}" `; +exports[`Svelte > jsx > Javascript Test > StoreShadowVars 1`] = ` +" + +{foo(errors)}" +`; + +exports[`Svelte > jsx > Javascript Test > StoreWithState 1`] = ` +" + +{bar()}" +`; + exports[`Svelte > jsx > Javascript Test > Submit 1`] = ` " + +{foo(errors)}" +`; + +exports[`Svelte > jsx > Typescript Test > StoreWithState 1`] = ` +" + +{bar()}" +`; + exports[`Svelte > jsx > Typescript Test > Submit 1`] = ` "" `; +exports[`Vue > jsx > Javascript Test > StoreShadowVars 1`] = ` +" + +" +`; + +exports[`Vue > jsx > Javascript Test > StoreWithState 1`] = ` +" + +" +`; + exports[`Vue > jsx > Javascript Test > Submit 1`] = ` "