From 5118c28b4e5e183dca4d4e7c6f862ef83a2fe5ea Mon Sep 17 00:00:00 2001 From: Raymond Muller Date: Fri, 18 Nov 2022 14:40:00 +0100 Subject: [PATCH 1/9] fix(core): update type to allow setContext to accept a string as the first argument --- packages/core/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index dfa05ec2dc..95d09adeab 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -27,7 +27,7 @@ export const useContext = (key: Context): T => nu export const createContext = (value: T): Context => null as unknown as Context; export const setContext = ( - key: Context, + key: Context | string, value: Partial, ): void => {}; export const onMount = (fn: () => any) => { From f0e57bbf9da3c53b55495fa963c756c0f3adb12a Mon Sep 17 00:00:00 2001 From: Raymond Muller Date: Fri, 18 Nov 2022 14:42:48 +0100 Subject: [PATCH 2/9] fix(core): vue composition api provide --- packages/core/src/generators/vue/helpers.ts | 34 ++++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/core/src/generators/vue/helpers.ts b/packages/core/src/generators/vue/helpers.ts index 2f21e48aee..31129c3501 100644 --- a/packages/core/src/generators/vue/helpers.ts +++ b/packages/core/src/generators/vue/helpers.ts @@ -102,7 +102,16 @@ function processRefs(input: string, component: MitosisComponent, options: ToVueO return babelTransformExpression(input, { Identifier(path: babel.NodePath) { + // we should not add .value to object properties + if ( + (types.isObjectProperty(path.parent) && path.parent.key === path.node) || + (types.isMemberExpression(path.parent) && path.parent.property === path.node) + ) { + return; + } + const name = path.node.name; + if (refs.includes(name) && shouldAppendValueToRef(path)) { const newValue = options.api === 'options' ? `this.${name}` : `${name}.value`; path.replaceWith(types.identifier(newValue)); @@ -159,14 +168,23 @@ export const processBinding = ({ export const getContextValue = ({ options, json }: { options: ToVueOptions; json: MitosisComponent }) => ({ name, ref, value }: ContextSetInfo): Nullable => { - const valueStr = value - ? stringifyContextValue(value, { - valueMapper: (code) => processBinding({ code, options, json, preserveGetter: true }), - }) - : ref - ? processBinding({ code: ref, options, json, preserveGetter: true }) - : null; - + const compositionApi = options.api === 'composition'; + + let valueStr; + + // we don't want to add .value to the ref when 'providing' it + // as it will lose reactivity if we do so + if (compositionApi) { + valueStr = value ? stringifyContextValue(value) : ref || null; + } else { + valueStr = value + ? stringifyContextValue(value, { + valueMapper: (code) => processBinding({ code, options, json, preserveGetter: true }), + }) + : ref + ? processBinding({ code: ref, options, json, preserveGetter: true }) + : null; + } return valueStr; }; From a9ec2b3696f572ad50f2d85bbfaa9b3affa859fd Mon Sep 17 00:00:00 2001 From: Raymond Muller Date: Fri, 18 Nov 2022 16:04:24 +0100 Subject: [PATCH 3/9] fix(core): change order in svelte generator --- packages/core/src/generators/svelte/svelte.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts index 77fa5b400c..5ca3d370f3 100644 --- a/packages/core/src/generators/svelte/svelte.ts +++ b/packages/core/src/generators/svelte/svelte.ts @@ -271,13 +271,6 @@ export const componentToSvelte: TranspilerGenerator = ` : '' } - ${getContextCode(json)} - ${setContextCode({ json, options })} - - ${functionsString.length < 4 ? '' : functionsString} - ${getterString.length < 4 ? '' : getterString} - - ${refs.map((ref) => `let ${stripStateAndProps({ json, options })(ref)}`).join('\n')} ${ options.stateType === 'proxies' @@ -286,6 +279,15 @@ export const componentToSvelte: TranspilerGenerator = : `let state = onChange(${dataString}, () => state = state)` : dataString } + + ${getContextCode(json)} + ${setContextCode({ json, options })} + + ${functionsString.length < 4 ? '' : functionsString} + ${getterString.length < 4 ? '' : getterString} + + ${refs.map((ref) => `let ${stripStateAndProps({ json, options })(ref)}`).join('\n')} + ${json.hooks.onInit?.code ?? ''} ${!json.hooks.onMount?.code ? '' : `onMount(() => { ${json.hooks.onMount.code} });`} From 18de059962e6a381aa94369641f635b616ec10a6 Mon Sep 17 00:00:00 2001 From: Raymond Muller Date: Fri, 18 Nov 2022 16:04:50 +0100 Subject: [PATCH 4/9] fix(core): strip state and props ref from context ref value --- packages/core/src/generators/vue/helpers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/generators/vue/helpers.ts b/packages/core/src/generators/vue/helpers.ts index 31129c3501..1e230621ec 100644 --- a/packages/core/src/generators/vue/helpers.ts +++ b/packages/core/src/generators/vue/helpers.ts @@ -175,7 +175,7 @@ export const getContextValue = // we don't want to add .value to the ref when 'providing' it // as it will lose reactivity if we do so if (compositionApi) { - valueStr = value ? stringifyContextValue(value) : ref || null; + valueStr = value ? stringifyContextValue(value) : stripStateAndPropsRefs(ref) || null; } else { valueStr = value ? stringifyContextValue(value, { From 8a5f0940a063e3e1288064bff7c39da3d2a74d6d Mon Sep 17 00:00:00 2001 From: Raymond Muller Date: Fri, 18 Nov 2022 16:12:14 +0100 Subject: [PATCH 5/9] feat(core): allow state refs to be passed as context --- .../core/src/parsers/jsx/function-parser.ts | 24 +++++++++++++++---- packages/core/src/parsers/jsx/state.ts | 14 +++++++++++ 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/packages/core/src/parsers/jsx/function-parser.ts b/packages/core/src/parsers/jsx/function-parser.ts index 38d0d9fa60..bc25199359 100644 --- a/packages/core/src/parsers/jsx/function-parser.ts +++ b/packages/core/src/parsers/jsx/function-parser.ts @@ -7,13 +7,12 @@ import { JSONOrNode } from '../../types/json'; import { MitosisComponent } from '../../types/mitosis-component'; import { MitosisNode } from '../../types/mitosis-node'; import { HOOKS } from '../../constants/hooks'; -import { parseStateObjectToMitosisState } from './state'; +import { mapStateInObjectExpressions, parseStateObjectToMitosisState } from './state'; import { Context } from './types'; import { parseCode, parseCodeJson } from './helpers'; import { getPropsTypeRef } from './component-types'; import { jsxElementToJson } from './element-parser'; import { METADATA_HOOK_NAME } from './hooks'; - const { types } = babel; export function generateUseStyleCode(expression: babel.types.CallExpression) { @@ -49,6 +48,22 @@ const processHookCode = ( // { console.log('hi') } -> console.log('hi') .replace(/^{/, '') .replace(/}$/, ''); + +const generateContextRef = ( + node: babel.types.Node, + state: MitosisComponent['state'] = {}, +): string => { + const stateProperties = Object.keys(state); + if (types.isObjectExpression(node)) { + mapStateInObjectExpressions(node, stateProperties); + } else if (types.isIdentifier(node)) { + if (stateProperties.includes(node.name)) { + node.name = `state.${node.name}`; + } + } + return generate(node).code; +}; + /** * Parses function declarations within the Mitosis copmonent's body to JSON */ @@ -83,10 +98,9 @@ export const componentFunctionToJson = ( value, }; } else { - const ref = generate(valueNode).code; setContext[keyPath] = { name: keyNode.name, - ref, + ref: generateContextRef(valueNode, state), }; } } @@ -94,7 +108,7 @@ export const componentFunctionToJson = ( if (types.isExpression(valueNode)) { setContext[keyNode.value] = { name: `"${keyNode.value}"`, - ref: generate(valueNode).code, + ref: generateContextRef(valueNode, state), }; } } diff --git a/packages/core/src/parsers/jsx/state.ts b/packages/core/src/parsers/jsx/state.ts index c2872469c3..d15ace616c 100644 --- a/packages/core/src/parsers/jsx/state.ts +++ b/packages/core/src/parsers/jsx/state.ts @@ -38,6 +38,20 @@ function mapStateIdentifiersInExpression(expression: string, stateProperties: st ); } +export function mapStateInObjectExpressions( + node: babel.types.ObjectExpression, + stateProperties: string[], +) { + node.properties = node.properties.map((p) => { + if (types.isObjectProperty(p) && types.isIdentifier(p.value)) { + p.value.name = stateProperties.includes(p.value.name) + ? `state.${p.value.name}` + : p.value.name; + } + return p; + }); +} + /** * Convert state identifiers from React hooks format to the state.* format Mitosis needs * e.g. From 02c10a480c924d86c234534e503bad1b5548acb5 Mon Sep 17 00:00:00 2001 From: Raymond Muller Date: Fri, 18 Nov 2022 16:16:52 +0100 Subject: [PATCH 6/9] docs: add more context examples --- docs/context.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/docs/context.md b/docs/context.md index f4103d0b2a..557c919ec4 100644 --- a/docs/context.md +++ b/docs/context.md @@ -50,3 +50,39 @@ export default function ComponentWithContext(props: { content: string }) { ); } ``` + +More examples: + +```tsx +import { setContext, useState } from '@builder.io/mitosis'; + +export default function MyComponent(props) { + const [disabled, setDisabled] = useState(false); + + setContext('disabled', { disabled }); + + return

Hello World

; +} +``` + +```tsx +import { setContext, useState } from '@builder.io/mitosis'; + +export default function MyComponent(props) { + const [disabled, setDisabled] = useState(false); + + setContext('disabled', disabled); + + return

Hello World

; +} +``` + +```tsx +import { setContext, useState } from '@builder.io/mitosis'; + +export default function MyComponent(props) { + setContext('hello', props.world); + + return

Hello World

; +} +``` From d6c8bdd1dfb2413446d792a8c985be144bcaa9f9 Mon Sep 17 00:00:00 2001 From: Raymond Muller Date: Fri, 18 Nov 2022 16:19:42 +0100 Subject: [PATCH 7/9] test(core): update snapshots --- .../__snapshots__/svelte.test.ts.snap | 178 +++++++++--------- .../vue-composition.test.ts.snap | 4 +- 2 files changed, 94 insertions(+), 88 deletions(-) diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap index dda23991ee..5cf7cda894 100644 --- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap @@ -4,6 +4,8 @@ exports[`Svelte > jsx > Javascript Test > AdvancedRef 1`] = ` "
@@ -115,6 +115,8 @@ exports[`Svelte > jsx > Javascript Test > Basic Context 1`] = ` import { Injector, createInjector, MyService } from \\"@dummy/injection-js\\"; + let name = \\"PatrickJS\\"; + let myService = getContext(MyService.key); setContext(Injector, createInjector()); @@ -123,7 +125,6 @@ exports[`Svelte > jsx > Javascript Test > Basic Context 1`] = ` console.log(change); } - let name = \\"PatrickJS\\"; const hi = myService.method(\\"hi\\"); console.log(hi); @@ -149,6 +150,7 @@ exports[`Svelte > jsx > Javascript Test > Basic OnMount Update 1`] = ` let name = \\"PatrickJS\\"; let names = [\\"Steve\\", \\"PatrickJS\\"]; + name = \\"PatrickJS onInit\\" + hi; onMount(() => { @@ -264,6 +266,8 @@ exports[`Svelte > jsx > Javascript Test > BasicRef 1`] = ` "
@@ -453,6 +455,9 @@ exports[`Svelte > jsx > Javascript Test > CustomCode 1`] = ` export let replaceNodes; export let code; + let scriptsInserted = []; + let scriptsRun = []; + function findAndRunScripts() { // TODO: Move this function to standalone one in '@builder.io/utils' if (elem && typeof window !== \\"undefined\\") { @@ -497,9 +502,6 @@ exports[`Svelte > jsx > Javascript Test > CustomCode 1`] = ` let elem; - let scriptsInserted = []; - let scriptsRun = []; - onMount(() => { findAndRunScripts(); }); @@ -520,6 +522,9 @@ exports[`Svelte > jsx > Javascript Test > Embed 1`] = ` export let replaceNodes; export let code; + let scriptsInserted = []; + let scriptsRun = []; + function findAndRunScripts() { // TODO: Move this function to standalone one in '@builder.io/utils' if (elem && typeof window !== \\"undefined\\") { @@ -564,9 +569,6 @@ exports[`Svelte > jsx > Javascript Test > Embed 1`] = ` let elem; - let scriptsInserted = []; - let scriptsRun = []; - onMount(() => { findAndRunScripts(); }); @@ -607,6 +609,10 @@ exports[`Svelte > jsx > Javascript Test > Form 1`] = ` export let sendingMessage; export let successMessage; + let formState = \\"unsubmitted\\"; + let responseData = null; + let formErrorMessage = \\"\\"; + function onSubmit(event) { const sendWithJs = sendWithJs || sendSubmissionsTo === \\"email\\"; @@ -825,10 +831,6 @@ exports[`Svelte > jsx > Javascript Test > Form 1`] = ` }; let formRef; - - let formState = \\"unsubmitted\\"; - let responseData = null; - let formErrorMessage = \\"\\";
jsx > Javascript Test > Image 1`] = ` export let srcset; export let sizes; + let scrollListener = null; + let imageLoaded = false; + let load = false; + function setLoaded() { imageLoaded = true; } @@ -904,10 +910,6 @@ exports[`Svelte > jsx > Javascript Test > Image 1`] = ` let pictureRef; - let scrollListener = null; - let imageLoaded = false; - let load = false; - onMount(() => { if (useLazyLoading()) { // throttled scroll capture listener @@ -1148,6 +1150,10 @@ exports[`Svelte > jsx > Javascript Test > Stamped.io 1`] = ` export let apiKey; export let productId; + let reviews = []; + let name = \\"test\\"; + let showReviewPrompt = false; + function kebabCaseValue() { return kebabCase(\\"testThat\\"); } @@ -1156,10 +1162,6 @@ exports[`Svelte > jsx > Javascript Test > Stamped.io 1`] = ` return snakeCase(\\"testThis\\"); } - let reviews = []; - let name = \\"test\\"; - let showReviewPrompt = false; - onMount(() => { fetch( \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${ @@ -1326,6 +1328,8 @@ exports[`Svelte > jsx > Javascript Test > Video 1`] = ` exports[`Svelte > jsx > Javascript Test > arrowFunctionInUseStore 1`] = ` "
Hello {name}
" @@ -1344,9 +1346,9 @@ exports[`Svelte > jsx > Javascript Test > basicForwardRef 1`] = ` "
@@ -1364,9 +1366,9 @@ exports[`Svelte > jsx > Javascript Test > basicForwardRefMetadata 1`] = ` "
@@ -1698,6 +1700,7 @@ exports[`Svelte > jsx > Javascript Test > onInit 1`] = ` export let name; let name = \\"\\"; + name = defaultValues.name || name; console.log(\\"set defaults with props\\"); @@ -2021,6 +2024,8 @@ exports[`Svelte > jsx > Typescript Test > AdvancedRef 1`] = `
@@ -2138,6 +2141,8 @@ exports[`Svelte > jsx > Typescript Test > Basic Context 1`] = ` import { Injector, createInjector, MyService } from \\"@dummy/injection-js\\"; + let name = \\"PatrickJS\\"; + let myService = getContext(MyService.key); setContext(Injector, createInjector()); @@ -2146,7 +2151,6 @@ exports[`Svelte > jsx > Typescript Test > Basic Context 1`] = ` console.log(change); } - let name = \\"PatrickJS\\"; const hi = myService.method(\\"hi\\"); console.log(hi); @@ -2179,6 +2183,7 @@ exports[`Svelte > jsx > Typescript Test > Basic OnMount Update 1`] = ` let name = \\"PatrickJS\\"; let names = [\\"Steve\\", \\"PatrickJS\\"]; + name = \\"PatrickJS onInit\\" + hi; onMount(() => { @@ -2312,6 +2317,8 @@ exports[`Svelte > jsx > Typescript Test > BasicRef 1`] = `
@@ -2547,6 +2552,9 @@ exports[`Svelte > jsx > Typescript Test > CustomCode 1`] = ` export let replaceNodes: CustomCodeProps[\\"replaceNodes\\"]; export let code: CustomCodeProps[\\"code\\"]; + let scriptsInserted = []; + let scriptsRun = []; + function findAndRunScripts() { // TODO: Move this function to standalone one in '@builder.io/utils' if (elem && typeof window !== \\"undefined\\") { @@ -2591,9 +2599,6 @@ exports[`Svelte > jsx > Typescript Test > CustomCode 1`] = ` let elem; - let scriptsInserted = []; - let scriptsRun = []; - onMount(() => { findAndRunScripts(); }); @@ -2621,6 +2626,9 @@ exports[`Svelte > jsx > Typescript Test > Embed 1`] = ` export let replaceNodes: CustomCodeProps[\\"replaceNodes\\"]; export let code: CustomCodeProps[\\"code\\"]; + let scriptsInserted = []; + let scriptsRun = []; + function findAndRunScripts() { // TODO: Move this function to standalone one in '@builder.io/utils' if (elem && typeof window !== \\"undefined\\") { @@ -2665,9 +2673,6 @@ exports[`Svelte > jsx > Typescript Test > Embed 1`] = ` let elem; - let scriptsInserted = []; - let scriptsRun = []; - onMount(() => { findAndRunScripts(); }); @@ -2735,6 +2740,10 @@ exports[`Svelte > jsx > Typescript Test > Form 1`] = ` export let sendingMessage: FormProps[\\"sendingMessage\\"]; export let successMessage: FormProps[\\"successMessage\\"]; + let formState = \\"unsubmitted\\"; + let responseData = null; + let formErrorMessage = \\"\\"; + function onSubmit(event) { const sendWithJs = sendWithJs || sendSubmissionsTo === \\"email\\"; @@ -2953,10 +2962,6 @@ exports[`Svelte > jsx > Typescript Test > Form 1`] = ` }; let formRef; - - let formState = \\"unsubmitted\\"; - let responseData = null; - let formErrorMessage = \\"\\"; jsx > Typescript Test > Image 1`] = ` export let srcset: ImageProps[\\"srcset\\"]; export let sizes: ImageProps[\\"sizes\\"]; + let scrollListener = null; + let imageLoaded = false; + let load = false; + function setLoaded() { imageLoaded = true; } @@ -3053,10 +3062,6 @@ exports[`Svelte > jsx > Typescript Test > Image 1`] = ` let pictureRef; - let scrollListener = null; - let imageLoaded = false; - let load = false; - onMount(() => { if (useLazyLoading()) { // throttled scroll capture listener @@ -3371,6 +3376,10 @@ exports[`Svelte > jsx > Typescript Test > Stamped.io 1`] = ` export let apiKey: SmileReviewsProps[\\"apiKey\\"]; export let productId: SmileReviewsProps[\\"productId\\"]; + let reviews = []; + let name = \\"test\\"; + let showReviewPrompt = false; + function kebabCaseValue() { return kebabCase(\\"testThat\\"); } @@ -3379,10 +3388,6 @@ exports[`Svelte > jsx > Typescript Test > Stamped.io 1`] = ` return snakeCase(\\"testThis\\"); } - let reviews = []; - let name = \\"test\\"; - let showReviewPrompt = false; - onMount(() => { fetch( \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${ @@ -3604,6 +3609,8 @@ exports[`Svelte > jsx > Typescript Test > Video 1`] = ` exports[`Svelte > jsx > Typescript Test > arrowFunctionInUseStore 1`] = ` "
Hello {name}
" @@ -3629,9 +3634,9 @@ exports[`Svelte > jsx > Typescript Test > basicForwardRef 1`] = `
@@ -3656,9 +3661,9 @@ exports[`Svelte > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
@@ -4060,6 +4065,7 @@ exports[`Svelte > jsx > Typescript Test > onInit 1`] = ` export let name: Props[\\"name\\"]; let name = \\"\\"; + name = defaultValues.name || name; console.log(\\"set defaults with props\\"); @@ -4584,10 +4590,10 @@ exports[`Svelte > svelte > Javascript Test > context 1`] = ` "
{activeTab}
" @@ -4639,11 +4645,11 @@ exports[`Svelte > svelte > Javascript Test > html 1`] = ` exports[`Svelte > svelte > Javascript Test > ifElse 1`] = ` " {#if show} @@ -4697,11 +4703,11 @@ exports[`Svelte > svelte > Javascript Test > lifecycleHooks 1`] = ` exports[`Svelte > svelte > Javascript Test > reactive 1`] = ` "
@@ -4712,14 +4718,14 @@ exports[`Svelte > svelte > Javascript Test > reactive 1`] = ` exports[`Svelte > svelte > Javascript Test > reactiveWithFn 1`] = ` "
{activeTab}
" @@ -4913,11 +4919,11 @@ exports[`Svelte > svelte > Typescript Test > html 1`] = ` exports[`Svelte > svelte > Typescript Test > ifElse 1`] = ` " {#if show} @@ -4971,11 +4977,11 @@ exports[`Svelte > svelte > Typescript Test > lifecycleHooks 1`] = ` exports[`Svelte > svelte > Typescript Test > reactive 1`] = ` "
@@ -4986,14 +4992,14 @@ exports[`Svelte > svelte > Typescript Test > reactive 1`] = ` exports[`Svelte > svelte > Typescript Test > reactiveWithFn 1`] = ` "" `; @@ -5449,7 +5449,7 @@ const activeTab = ref(0); const disabled = inject(\\"disabled\\"); -provide(\\"activeTab\\", activeTab.value); +provide(\\"activeTab\\", activeTab); " `; From 0db66f2315a5f25a7704e07811b9069693da9f00 Mon Sep 17 00:00:00 2001 From: Raymond Muller Date: Fri, 18 Nov 2022 16:35:36 +0100 Subject: [PATCH 8/9] test: add context tests --- .../__tests__/data/context/set-context-object.raw.tsx | 9 +++++++++ .../src/__tests__/data/context/set-context-var.raw.tsx | 9 +++++++++ packages/core/src/__tests__/shared.ts | 4 ++++ 3 files changed, 22 insertions(+) create mode 100644 packages/core/src/__tests__/data/context/set-context-object.raw.tsx create mode 100644 packages/core/src/__tests__/data/context/set-context-var.raw.tsx diff --git a/packages/core/src/__tests__/data/context/set-context-object.raw.tsx b/packages/core/src/__tests__/data/context/set-context-object.raw.tsx new file mode 100644 index 0000000000..b155d049c3 --- /dev/null +++ b/packages/core/src/__tests__/data/context/set-context-object.raw.tsx @@ -0,0 +1,9 @@ +import { setContext, useState } from '@builder.io/mitosis'; + +export default function MyComponent(props) { + const [disabled, setDisabled] = useState(false); + + setContext('disabled', { disabled, foo: 'bar' }); + + return

Hello World

; +} diff --git a/packages/core/src/__tests__/data/context/set-context-var.raw.tsx b/packages/core/src/__tests__/data/context/set-context-var.raw.tsx new file mode 100644 index 0000000000..5a0b7a60aa --- /dev/null +++ b/packages/core/src/__tests__/data/context/set-context-var.raw.tsx @@ -0,0 +1,9 @@ +import { setContext, useState } from '@builder.io/mitosis'; + +export default function MyComponent(props) { + const [disabled, setDisabled] = useState(false); + + setContext('disabled', disabled); + + return

Hello World

; +} diff --git a/packages/core/src/__tests__/shared.ts b/packages/core/src/__tests__/shared.ts index 21630942ad..9c047b5a0c 100644 --- a/packages/core/src/__tests__/shared.ts +++ b/packages/core/src/__tests__/shared.ts @@ -15,6 +15,8 @@ const basicOutputsMeta = getRawFile('./data/basic-outputs-meta.raw.tsx'); const basicOutputs = getRawFile('./data/basic-outputs.raw.tsx'); const subComponent = getRawFile('./data/sub-component.raw.tsx'); const componentWithContext = getRawFile('./data/context/component-with-context.raw.tsx'); +const setContextVar = getRawFile('./data/context/set-context-var.raw.tsx'); +const setContextObject = getRawFile('./data/context/set-context-object.raw.tsx'); const expressionState = getRawFile('./data/expression-state.raw.tsx'); const contentState = getRawFile('./data/context-state.raw.tsx'); @@ -233,6 +235,8 @@ const IMPORT_TEST: Tests = { const CONTEXT_TEST: Tests = { componentWithContext, + setContextVar, + setContextObject, }; const JSX_TESTS: Tests[] = [ From 72e85b56152675464f5df62f75d33ebce6f4aba8 Mon Sep 17 00:00:00 2001 From: Raymond Muller Date: Fri, 18 Nov 2022 16:35:42 +0100 Subject: [PATCH 9/9] test: update snapshots --- .../__snapshots__/alpine.test.ts.snap | 48 +++ .../__snapshots__/angular.import.test.ts.snap | 100 +++++ .../__snapshots__/angular.mapper.test.ts.snap | 104 +++++ .../__snapshots__/angular.test.ts.snap | 212 ++++++++++ .../__tests__/__snapshots__/html.test.ts.snap | 20 + .../__snapshots__/liquid.test.ts.snap | 20 + .../__tests__/__snapshots__/lit.test.ts.snap | 92 +++++ .../__snapshots__/marko.test.ts.snap | 40 ++ .../__snapshots__/parse-jsx.test.ts.snap | 107 ++++++ .../__snapshots__/preact.test.ts.snap | 78 ++++ .../__snapshots__/react-native.test.ts.snap | 86 +++++ .../__snapshots__/react.test.ts.snap | 74 ++++ .../__tests__/__snapshots__/rsc.test.ts.snap | 52 +++ .../__snapshots__/solid.test.ts.snap | 88 +++++ .../__snapshots__/stencil.test.ts.snap | 64 ++++ .../__snapshots__/svelte.test.ts.snap | 54 +++ .../vue-composition.test.ts.snap | 62 +++ .../__tests__/__snapshots__/vue.test.ts.snap | 86 +++++ .../__snapshots__/webcomponent.test.ts.snap | 362 ++++++++++++++++++ 19 files changed, 1749 insertions(+) diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap index 151c2e67f2..3efe2630a0 100644 --- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap @@ -1994,6 +1994,30 @@ exports[`Alpine.js > jsx > Javascript Test > self-referencing component with chi " `; +exports[`Alpine.js > jsx > Javascript Test > setContextObject 1`] = ` +"

Hello World

+ +" +`; + +exports[`Alpine.js > jsx > Javascript Test > setContextVar 1`] = ` +"

Hello World

+ +" +`; + exports[`Alpine.js > jsx > Javascript Test > showWithFor 1`] = ` "