From 9df2f475145eaef45bb455717d7944acda1173a2 Mon Sep 17 00:00:00 2001 From: Sami Jaber Date: Fri, 11 Oct 2024 15:42:20 -0300 Subject: [PATCH 1/8] f --- .../core/src/generators/react/generator.ts | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts index 57435e0a7d..e7df9fa7f2 100644 --- a/packages/core/src/generators/react/generator.ts +++ b/packages/core/src/generators/react/generator.ts @@ -217,6 +217,23 @@ export const componentToReact: TranspilerGenerator> = userOptions: reactOptions, }); + options.plugins.unshift( + CODE_PROCESSOR_PLUGIN((codeType, json) => { + switch (codeType) { + case 'hooks': + case 'hooks-deps': + return (c) => processHookCode({ str: c, options }); + case 'types': + case 'bindings': + case 'state': + case 'context-set': + case 'properties': + case 'dynamic-jsx-elements': + return (c) => c; + } + }), + ); + if (options.plugins) { json = runPreJsonPlugins({ json, plugins: options.plugins }); } @@ -454,20 +471,17 @@ const _componentToReact = ( } ${hasStateArgument ? refsString : ''} ${getContextString(json, options)} - ${json.hooks.init?.code ? processHookCode({ str: json.hooks.init?.code, options }) : ''} + ${json.hooks.init?.code || ''} ${contextStr || ''} ${ json.hooks.onInit?.code ? shouldInlineOnInitHook - ? processHookCode({ str: json.hooks.onInit.code, options }) + ? json.hooks.onInit.code : ` const hasInitialized = useRef(false); if (!hasInitialized.current) { - ${processHookCode({ - str: json.hooks.onInit.code, - options, - })} + ${json.hooks.onInit.code} hasInitialized.current = true; } ` @@ -491,10 +505,7 @@ const _componentToReact = ( .map( (hook) => `useEffect(() => { - ${processHookCode({ - str: hook.code, - options, - })} + ${hook.code} }, [])`, ) .join('\n')} @@ -503,9 +514,9 @@ const _componentToReact = ( json.hooks.onUpdate ?.map( (hook) => `useEffect(() => { - ${processHookCode({ str: hook.code, options })} + ${hook.code} }, - ${hook.deps ? processHookCode({ str: hook.deps, options }) : ''})`, + ${hook.deps || ''})`, ) .join(';') ?? '' } @@ -514,10 +525,7 @@ const _componentToReact = ( json.hooks.onUnMount?.code ? `useEffect(() => { return () => { - ${processHookCode({ - str: json.hooks.onUnMount.code, - options, - })} + ${json.hooks.onUnMount.code} } }, [])` : '' From 1a68f1f4550daef2c0b8a4d4b4a79f63b4640275 Mon Sep 17 00:00:00 2001 From: Sami Jaber Date: Tue, 15 Oct 2024 18:20:57 -0300 Subject: [PATCH 2/8] f --- packages/core/src/generators/react/blocks.ts | 56 +++++-------- .../core/src/generators/react/generator.ts | 78 ++++++++++++------- packages/core/src/generators/react/helpers.ts | 46 +++++------ packages/core/src/generators/react/state.ts | 74 ++++-------------- .../core/src/helpers/getters-to-functions.ts | 40 ++++++---- 5 files changed, 132 insertions(+), 162 deletions(-) diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts index e31205a0ac..5e9d07928d 100644 --- a/packages/core/src/generators/react/blocks.ts +++ b/packages/core/src/generators/react/blocks.ts @@ -8,7 +8,6 @@ import { MitosisComponent } from '@/types/mitosis-component'; import { checkIsForNode, ForNode, MitosisNode } from '@/types/mitosis-node'; import { SELF_CLOSING_HTML_TAGS } from '../../constants/html_tags'; import { closeFrag, getFragment, openFrag, processBinding, wrapInFragment } from './helpers'; -import { updateStateSettersInCode } from './state'; import { ToReactOptions } from './types'; const NODE_MAPPERS: { @@ -55,11 +54,11 @@ const NODE_MAPPERS: { return ''; } - const children = processBinding('props.children', options); + const children = processBinding({ code: 'props.children', options, json: component }); return `<>{${children} ${hasChildren ? `|| (${renderChildren()})` : ''}}`; } - let slotProp = processBinding(slotName as string, options).replace('name=', ''); + let slotProp = slotName.replace('name=', ''); if (!slotProp.startsWith('props.')) { slotProp = `props.${slotProp}`; @@ -77,10 +76,7 @@ const NODE_MAPPERS: { const json = _json as ForNode; const wrap = wrapInFragment(json); const forArguments = getForArguments(json).join(', '); - const expression = `${processBinding( - json.bindings.each?.code as string, - options, - )}?.map((${forArguments}) => ( + const expression = `${json.bindings.each?.code}?.map((${forArguments}) => ( ${wrap ? openFrag(options) : ''}${json.children .filter(filterEmptyTextNodes) .map((item) => blockToReact(item, options, component, wrap)) @@ -106,7 +102,7 @@ const NODE_MAPPERS: { (wrapInFragment(json.meta.else as any) || checkIsForNode(json.meta.else as any)) ); - const expression = `${processBinding(json.bindings.when?.code as string, options)} ? ( + const expression = `${json.bindings.when?.code} ? ( ${wrap ? openFrag(options) : ''}${json.children .filter(filterEmptyTextNodes) .map((item) => blockToReact(item, options, component, wrap)) @@ -187,15 +183,14 @@ export const blockToReact = ( } if (json.bindings._text?.code) { - const processed = processBinding(json.bindings._text.code, options); if ( options.type === 'native' && !isChildren({ node: json }) && !isSlotProperty(json.bindings._text.code.split('.')[1] || '') ) { - return `{${processed}}`; + return `{${json.bindings._text.code}}`; } - return `{${processed}}`; + return `{${json.bindings._text.code}}`; } let str = ''; @@ -220,9 +215,8 @@ export const blockToReact = ( // Handle href for TouchableOpacity if (json.name === 'TouchableOpacity' && key === 'href') { - const hrefValue = processBinding(value, options); - if (hrefValue) { - const onPress = `() => Linking.openURL(${JSON.stringify(hrefValue)})`; + if (value) { + const onPress = `() => Linking.openURL(${JSON.stringify(value)})`; str += ` onPress={${onPress}} `; } continue; // Skip further processing for 'href' in TouchableOpacity @@ -262,23 +256,16 @@ export const blockToReact = ( continue; } - const useBindingValue = processBinding(value, options); - if (json.name === 'Image' && key === 'src') { - let src; - const imageSource = processBinding(value, options); - if (imageSource) { - src = `{ uri: ${imageSource} }`; - str += `source={${src}} `; + if (value) { + str += `source={{ uri: ${value} }} `; continue; // Skip further processing for 'src' in Image } } // Handle href for TouchableOpacity if (json.name === 'TouchableOpacity' && key === 'href') { - const hrefValue = processBinding(value, options); - if (hrefValue) { - const onPress = `() => Linking.openURL(${hrefValue})`; - str += ` onPress={${onPress}} `; + if (value) { + str += ` onPress={() => Linking.openURL(${value})} `; continue; // Skip further processing for 'href' in TouchableOpacity } } @@ -292,36 +279,33 @@ export const blockToReact = ( } else if (key.startsWith('on')) { const { arguments: cusArgs = ['event'] } = json.bindings[key]!; const eventName = options.type === 'native' ? NATIVE_EVENT_MAPPER[key] || key : key; - str += ` ${eventName}={(${cusArgs.join(',')}) => ${updateStateSettersInCode( - useBindingValue, - options, - )} } `; + str += ` ${eventName}={(${cusArgs.join(',')}) => ${value} } `; } else if (key.startsWith('slot')) { // } /> str += ` ${key}={${value}} `; } else if (key === 'class') { - str += ` className={${useBindingValue}} `; + str += ` className={${value}} `; } else if (BINDING_MAPPERS[key]) { const mapper = BINDING_MAPPERS[key]; if (typeof mapper === 'function') { - const [newKey, newValue] = mapper(key, useBindingValue, options); + const [newKey, newValue] = mapper(key, value, options); str += ` ${newKey}={${newValue}} `; } else { - if (useBindingValue === 'true') { + if (value === 'true') { str += ` ${BINDING_MAPPERS[key]} `; } else { - str += ` ${BINDING_MAPPERS[key]}={${useBindingValue}} `; + str += ` ${BINDING_MAPPERS[key]}={${value}} `; } } } else if (key === 'style' && options.type === 'native' && json.name === 'ScrollView') { // React Native's ScrollView has a different prop for styles: `contentContainerStyle` - str += ` contentContainerStyle={${useBindingValue}} `; + str += ` contentContainerStyle={${value}} `; } else { if (isValidAttributeName(key)) { - if (useBindingValue === 'true') { + if (value === 'true') { str += ` ${key} `; } else { - str += ` ${key}={${useBindingValue}} `; + str += ` ${key}={${value}} `; } } } diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts index e7df9fa7f2..1d0400306b 100644 --- a/packages/core/src/generators/react/generator.ts +++ b/packages/core/src/generators/react/generator.ts @@ -8,14 +8,13 @@ import { getStateObjectStringFromComponent, stringifyContextValue, } from '@/helpers/get-state-object-string'; -import { gettersToFunctions } from '@/helpers/getters-to-functions'; import { handleMissingState } from '@/helpers/handle-missing-state'; import { isRootTextNode } from '@/helpers/is-root-text-node'; import { mapRefs } from '@/helpers/map-refs'; import { initializeOptions } from '@/helpers/merge-options'; import { checkIsDefined } from '@/helpers/nullable'; import { getOnEventHandlerName, processOnEventHooksPlugin } from '@/helpers/on-event'; -import { CODE_PROCESSOR_PLUGIN } from '@/helpers/plugins/process-code'; +import { CODE_PROCESSOR_PLUGIN, createCodeProcessorPlugin } from '@/helpers/plugins/process-code'; import { processHttpRequests } from '@/helpers/process-http-requests'; import { renderPreComponent } from '@/helpers/render-imports'; import { replaceNodes, replaceStateIdentifier } from '@/helpers/replace-identifiers'; @@ -28,10 +27,12 @@ import { hasCss } from '@/helpers/styles/helpers'; import { MitosisComponent } from '@/types/mitosis-component'; import { TranspilerGenerator } from '@/types/transpiler'; import { types } from '@babel/core'; +import { flow } from 'fp-ts/lib/function'; import hash from 'hash-sum'; import json5 from 'json5'; import { format } from 'prettier/standalone'; import { + Plugin, runPostCodePlugins, runPostJsonPlugins, runPreCodePlugins, @@ -41,8 +42,14 @@ import { hasContext } from '../helpers/context'; import { checkIfIsClientComponent } from '../helpers/rsc'; import { collectReactNativeStyles } from '../react-native'; import { blockToReact } from './blocks'; -import { closeFrag, openFrag, processTagReferences, wrapInFragment } from './helpers'; -import { getUseStateCode, processHookCode, updateStateSetters } from './state'; +import { + closeFrag, + openFrag, + processBinding, + processTagReferences, + wrapInFragment, +} from './helpers'; +import { getUseStateCode } from './state'; import { ToReactOptions } from './types'; export const contextPropDrillingKey = '_context'; @@ -66,9 +73,10 @@ const getRefsString = (json: MitosisComponent, refs: string[], options: ToReactO hasStateArgument = /state\./.test(argument); code += `\nconst ${ref} = useRef${ typeParameter && options.typescript ? `<${typeParameter}>` : '' - }(${processHookCode({ - str: argument, + }(${processBinding({ + code: argument, options, + json, })});`; } @@ -79,7 +87,7 @@ function provideContext(json: MitosisComponent, options: ToReactOptions): string if (options.contextType === 'prop-drill') { let str = ''; for (const key in json.context.set) { - const { name, ref, value } = json.context.set[key]; + const { name, value } = json.context.set[key]; if (value) { str += ` ${contextPropDrillingKey}.${name} = ${stringifyContextValue(value)}; @@ -157,7 +165,7 @@ export const componentToPreact: TranspilerGenerator> = ( export const componentToReact: TranspilerGenerator> = (reactOptions = {}) => - ({ component, path }) => { + ({ component }) => { let json = fastClone(component); const target = reactOptions.preact @@ -181,14 +189,14 @@ export const componentToReact: TranspilerGenerator> = processOnEventHooksPlugin({ setBindings: false }), ...(stateType === 'variables' ? [ - CODE_PROCESSOR_PLUGIN((codeType, json) => (code, hookType) => { + CODE_PROCESSOR_PLUGIN((codeType, json) => (code, _hookType) => { if (codeType === 'types') return code; code = replaceNodes({ code, nodeMaps: Object.entries(json.state) - .filter(([key, value]) => value?.type === 'getter') - .map(([key, value]) => { + .filter(([_key, value]) => value?.type === 'getter') + .map(([key, _value]) => { const expr = types.memberExpression( types.identifier('state'), types.identifier(key), @@ -210,30 +218,47 @@ export const componentToReact: TranspilerGenerator> = ], }; - const options = initializeOptions({ - target, - component, - defaults: DEFAULT_OPTIONS, - userOptions: reactOptions, - }); - - options.plugins.unshift( - CODE_PROCESSOR_PLUGIN((codeType, json) => { + DEFAULT_OPTIONS.plugins!.unshift( + flow( + createCodeProcessorPlugin, + (plugin): Plugin => + () => ({ json: { pre: plugin } }), + )((codeType, json) => { switch (codeType) { case 'hooks': case 'hooks-deps': - return (c) => processHookCode({ str: c, options }); - case 'types': case 'bindings': + case 'dynamic-jsx-elements': + return (code) => { + const after = processBinding({ code, options, json }); + console.log({ before: code, after }); + + return after; + }; case 'state': + return (code) => { + const newLocal = + options.stateType === 'useState' + ? processBinding({ code, options, json }) + : processBinding({ code, options, json }); + // console.log({ old: code, new: newLocal }); + return newLocal; + }; + case 'types': case 'context-set': case 'properties': - case 'dynamic-jsx-elements': return (c) => c; } }), ); + const options = initializeOptions({ + target, + component, + defaults: DEFAULT_OPTIONS, + userOptions: reactOptions, + }); + if (options.plugins) { json = runPreJsonPlugins({ json, plugins: options.plugins }); } @@ -270,7 +295,7 @@ export const componentToReact: TranspilerGenerator> = }; // TODO: import target components when they are required -const getDefaultImport = (json: MitosisComponent, options: ToReactOptions): string => { +const getDefaultImport = (_json: MitosisComponent, options: ToReactOptions): string => { const { preact, type } = options; if (preact) { return ` @@ -333,10 +358,6 @@ const _componentToReact = ( processTagReferences(json, options); const contextStr = provideContext(json, options); const componentHasStyles = hasCss(json); - if (options.stateType === 'useState') { - gettersToFunctions(json); - updateStateSetters(json, options); - } if (!json.name) { json.name = 'MyComponent'; @@ -366,6 +387,7 @@ const _componentToReact = ( : ''; const useStateCode = options.stateType === 'useState' ? getUseStateCode(json, options) : ''; + if (options.plugins) { json = runPostJsonPlugins({ json, plugins: options.plugins }); } diff --git a/packages/core/src/generators/react/helpers.ts b/packages/core/src/generators/react/helpers.ts index c521d0707c..813655f21b 100644 --- a/packages/core/src/generators/react/helpers.ts +++ b/packages/core/src/generators/react/helpers.ts @@ -1,19 +1,27 @@ +import { updateGettersToFunctionsInCode } from '@/helpers/getters-to-functions'; import { isMitosisNode } from '@/helpers/is-mitosis-node'; import { stripStateAndPropsRefs } from '@/helpers/strip-state-and-props-refs'; import { MitosisComponent } from '@/types/mitosis-component'; import { MitosisNode } from '@/types/mitosis-node'; import { upperFirst } from 'lodash'; import traverse from 'neotraverse/legacy'; - +import { updateStateSettersInCode } from './state'; import { ToReactOptions } from './types'; -export const processBinding = (str: string, options: ToReactOptions) => { - // fix web-component tag transform issue with dashes by not transforming it - if (options.stateType !== 'useState') { - return str; - } +export const processBinding = ({ + code, + options, + json, +}: { + code: string; + options: ToReactOptions; + json: MitosisComponent; +}) => { + const str = updateStateSettersInCode(code, options); + const getterKeys = Object.keys(json.state).filter((item) => json.state[item]?.type === 'getter'); + const value = updateGettersToFunctionsInCode(str, getterKeys); - return stripStateAndPropsRefs(str, { + return stripStateAndPropsRefs(value, { includeState: true, includeProps: false, }); @@ -31,7 +39,7 @@ function getRefName(path: string) { return upperFirst(path) + 'Ref'; } -export function processTagReferences(json: MitosisComponent, options: ToReactOptions) { +export function processTagReferences(json: MitosisComponent, _options: ToReactOptions) { const namesFound = new Set(); traverse(json).forEach((el) => { @@ -39,12 +47,10 @@ export function processTagReferences(json: MitosisComponent, options: ToReactOpt return; } - const processedRefName = el.name.includes('-') ? el.name : processBinding(el.name, options); - if (el.name.includes('state.')) { - switch (json.state[processedRefName]?.type) { - case 'getter': - const refName = getRefName(processedRefName); + switch (json.state[el.name]?.type) { + case 'getter': { + const refName = getRefName(el.name); if (!namesFound.has(el.name)) { namesFound.add(el.name); json.hooks.init = { @@ -58,28 +64,24 @@ export function processTagReferences(json: MitosisComponent, options: ToReactOpt el.name = refName; break; - + } // NOTE: technically, it should be impossible for the tag to be a method or a function in Mitosis JSX syntax, // as that will fail JSX parsing. case 'method': case 'function': case 'property': - const capitalizedName = upperFirst(processedRefName); + const capitalizedName = upperFirst(el.name); - if (capitalizedName !== processedRefName) { + if (capitalizedName !== el.name) { el.name = capitalizedName; - json.state[capitalizedName] = { ...json.state[processedRefName]! }; + json.state[capitalizedName] = { ...json.state[el.name]! }; - delete json.state[processedRefName]; - } else { - el.name = processedRefName; + delete json.state[el.name]; } break; } - } else { - el.name = processedRefName; } }); } diff --git a/packages/core/src/generators/react/state.ts b/packages/core/src/generators/react/state.ts index a3866bff65..d1841e8e6d 100644 --- a/packages/core/src/generators/react/state.ts +++ b/packages/core/src/generators/react/state.ts @@ -1,63 +1,39 @@ import { capitalize } from '@/helpers/capitalize'; import { getTypedFunction } from '@/helpers/get-typed-function'; -import { isMitosisNode } from '@/helpers/is-mitosis-node'; import { prefixWithFunction, replaceGetterWithFunction } from '@/helpers/patterns'; import { transformStateSetters } from '@/helpers/transform-state-setters'; import { MitosisComponent, StateValue } from '@/types/mitosis-component'; import { types } from '@babel/core'; import { pipe } from 'fp-ts/lib/function'; -import traverse from 'neotraverse/legacy'; -import { processBinding } from './helpers'; import { ToReactOptions } from './types'; -/** - * Removes all `this.` references. - */ -const stripThisRefs = (str: string, options: ToReactOptions) => { - if (options.stateType !== 'useState') { - return str; - } - - return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1'); -}; - -export const processHookCode = ({ str, options }: { str: string; options: ToReactOptions }) => - processBinding(updateStateSettersInCode(str, options), options); - -const valueMapper = (options: ToReactOptions) => (val: string) => { - const x = processHookCode({ str: val, options }); - return stripThisRefs(x, options); -}; const getSetStateFnName = (stateName: string) => `set${capitalize(stateName)}`; const processStateValue = (options: ToReactOptions) => { - const mapValue = valueMapper(options); - return ([key, stateVal]: [key: string, stateVal: StateValue | undefined]) => { if (!stateVal) { return ''; } - let value = stateVal.code || ''; + const value = stateVal.code || ''; const type = stateVal.type; const typeParameter = stateVal.typeParameter; - const stateType = - options.typescript && stateVal.typeParameter ? `<${stateVal.typeParameter}>` : ''; - let result = ''; - if (type === 'getter') { - result = pipe(value, replaceGetterWithFunction, mapValue); - } else if (type === 'function') { - result = mapValue(value); - } else if (type === 'method') { - result = pipe(value, prefixWithFunction, mapValue); - } else { - return `const [${key}, ${getSetStateFnName(key)}] = useState${stateType}(() => (${mapValue( - value, - )}))`; + switch (type) { + case 'property': + const stateType = options.typescript && typeParameter ? `<${typeParameter}>` : ''; + return `const [${key}, ${getSetStateFnName(key)}] = useState${stateType}(() => (${value}))`; + case 'getter': + return pipe(replaceGetterWithFunction(value), (x) => + getTypedFunction(x, options.typescript, typeParameter), + ); + case 'function': + return getTypedFunction(value, options.typescript, typeParameter); + case 'method': + return pipe(prefixWithFunction(value), (x) => + getTypedFunction(x, options.typescript, typeParameter), + ); } - - return getTypedFunction(result, options.typescript, typeParameter); }; }; @@ -68,26 +44,6 @@ export const getUseStateCode = (json: MitosisComponent, options: ToReactOptions) return stringifiedState.join(lineItemDelimiter); }; -export const updateStateSetters = (json: MitosisComponent, options: ToReactOptions) => { - if (options.stateType !== 'useState') { - return; - } - traverse(json).forEach(function (item) { - if (isMitosisNode(item)) { - for (const key in item.bindings) { - let values = item.bindings[key]!; - const newValue = updateStateSettersInCode(values?.code as string, options); - if (newValue !== values?.code) { - item.bindings[key] = { - ...values, - code: newValue, - }; - } - } - } - }); -}; - export const updateStateSettersInCode = (value: string, options: ToReactOptions) => { if (options.stateType !== 'useState') { return value; diff --git a/packages/core/src/helpers/getters-to-functions.ts b/packages/core/src/helpers/getters-to-functions.ts index 366973558b..ba4d809e2c 100644 --- a/packages/core/src/helpers/getters-to-functions.ts +++ b/packages/core/src/helpers/getters-to-functions.ts @@ -1,6 +1,28 @@ import traverse from 'neotraverse/legacy'; import { MitosisComponent } from '../types/mitosis-component'; +export const updateGettersToFunctionsInCode = (code: string, getterKeys: string[]) => { + let value = code; + for (const key of getterKeys) { + try { + value = value.replace( + new RegExp(`state\\s*\\.\\s*${key}([^a-z0-9]|$)`, 'gi'), + (match, group1) => { + if (match.endsWith('?')) { + return `${key}?.()${group1}`; + } + + return `${key}()${group1}`; + }, + ); + } catch (err) { + console.error('Could not update getter ref', err); + } + } + + return value; +}; + /** * Map getters like `useStore({ get foo() { ... }})` from `state.foo` to `foo()` */ @@ -10,23 +32,7 @@ export const gettersToFunctions = (json: MitosisComponent) => { traverse(json).forEach(function (item) { // TODO: not all strings are expressions! if (typeof item === 'string') { - let value = item; - for (const key of getterKeys) { - try { - value = value.replace( - new RegExp(`state\\s*\\.\\s*${key}([^a-z0-9]|$)`, 'gi'), - (match, group1) => { - if (match.endsWith('?')) { - return `${key}?.()${group1}`; - } - - return `${key}()${group1}`; - }, - ); - } catch (err) { - console.error('Could not update getter ref', err); - } - } + const value = updateGettersToFunctionsInCode(item, getterKeys); if (value !== item) { this.update(value); } From e0cf325781a892449ad74ce80e9dc7e2f3ce191d Mon Sep 17 00:00:00 2001 From: Sami Jaber Date: Tue, 15 Oct 2024 19:02:25 -0300 Subject: [PATCH 3/8] f --- .../__snapshots__/context.test.ts.snap | 14 +- .../__snapshots__/preact.test.ts.snap | 42 +- .../__snapshots__/react-native.test.ts.snap | 92 ++- .../__snapshots__/react.test.ts.snap | 62 +- .../__tests__/__snapshots__/rsc.test.ts.snap | 555 ++++++++++++++++-- .../__tests__/__snapshots__/taro.test.ts.snap | 72 +-- .../core/src/generators/react/generator.ts | 40 +- packages/core/src/generators/react/helpers.ts | 43 +- 8 files changed, 656 insertions(+), 264 deletions(-) diff --git a/packages/core/src/__tests__/__snapshots__/context.test.ts.snap b/packages/core/src/__tests__/__snapshots__/context.test.ts.snap index 49e0cda311..e079ef443f 100644 --- a/packages/core/src/__tests__/__snapshots__/context.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/context.test.ts.snap @@ -578,15 +578,10 @@ function ComponentWithContext(props) { const foo = useContext(Context1); return ( - + + + + ); } @@ -2164,7 +2154,7 @@ function MyBasicComponent(props) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -2831,7 +2821,6 @@ function RenderContent(props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -5578,15 +5567,10 @@ function ComponentWithContext(props: ComponentWithContextProps) { const foo = useContext(Context1); return ( - + + ); } @@ -5936,7 +5915,7 @@ function MyBasicComponent(props: any) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -6675,7 +6654,6 @@ function RenderContent(props: Props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -7475,7 +7453,7 @@ exports[`Preact > svelte > Javascript Test > context 1`] = ` "'>' expected. (36:13) 34 | return ( 35 | -> 36 | <'activeTab'.Provider value={activeTab}>
{activeTab}
+> 36 | <'activeTab'.Provider value={state.activeTab}>
{activeTab}
| ^ 37 | 38 | @@ -7879,7 +7857,7 @@ exports[`Preact > svelte > Typescript Test > context 1`] = ` "'>' expected. (36:13) 34 | return ( 35 | -> 36 | <'activeTab'.Provider value={activeTab}>
{activeTab}
+> 36 | <'activeTab'.Provider value={state.activeTab}>
{activeTab}
| ^ 37 | 38 | 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 d0d034da53..73fa60ce7f 100644 --- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap @@ -2398,7 +2398,12 @@ function MyBasicComponent(props) { })); return ( - + Hello! I can run in React, Vue, Solid, or Liquid! ); @@ -2433,15 +2438,10 @@ function ComponentWithContext(props) { const foo = useContext(Context1); return ( - + + ); } @@ -2944,7 +2939,7 @@ function MyBasicComponent(props) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -3864,7 +3859,6 @@ function RenderContent(props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -4489,14 +4483,7 @@ import { } from \\"react-native\\"; function MyComponent(props) { - return ( - - ); + return ; } const styles = StyleSheet.create({ @@ -4524,7 +4511,14 @@ import { } from \\"react-native\\"; function StylePropClassAndCss(props) { - return ; + return ( + + ); } const styles = StyleSheet.create({ @@ -7501,7 +7495,12 @@ function MyBasicComponent(props: any) { })); return ( - + Hello! I can run in React, Vue, Solid, or Liquid! ); @@ -7541,15 +7540,10 @@ function ComponentWithContext(props: ComponentWithContextProps) { const foo = useContext(Context1); return ( - + + ); } @@ -8090,7 +8079,7 @@ function MyBasicComponent(props: any) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -9082,7 +9071,6 @@ function RenderContent(props: Props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -9745,14 +9733,7 @@ import { } from \\"react-native\\"; function MyComponent(props: any) { - return ( - - ); + return ; } const styles = StyleSheet.create({ @@ -9780,7 +9761,14 @@ import { } from \\"react-native\\"; function StylePropClassAndCss(props: any) { - return ; + return ( + + ); } const styles = StyleSheet.create({ @@ -10359,7 +10347,7 @@ exports[`React Native > svelte > Javascript Test > context 1`] = ` "'>' expected. (36:13) 34 | return ( 35 | -> 36 | <'activeTab'.Provider value={activeTab}>{activeTab} +> 36 | <'activeTab'.Provider value={state.activeTab}>{activeTab} | ^ 37 | 38 | @@ -10954,7 +10942,7 @@ exports[`React Native > svelte > Typescript Test > context 1`] = ` "'>' expected. (36:13) 34 | return ( 35 | -> 36 | <'activeTab'.Provider value={activeTab}>{activeTab} +> 36 | <'activeTab'.Provider value={state.activeTab}>{activeTab} | ^ 37 | 38 | diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap index 0999ad8c6c..83fbd5b840 100644 --- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap @@ -1828,15 +1828,10 @@ function ComponentWithContext(props) { const foo = useContext(Context1); return ( - + + ); } @@ -2145,7 +2135,7 @@ function MyBasicComponent(props) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -2805,7 +2795,6 @@ function RenderContent(props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -5465,15 +5454,10 @@ function ComponentWithContext(props: ComponentWithContextProps) { const foo = useContext(Context1); return ( - + + ); } @@ -5820,7 +5799,7 @@ function MyBasicComponent(props: any) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -6552,7 +6531,6 @@ function RenderContent(props: Props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -7294,13 +7272,13 @@ function SmileReviews(props) { {showReviewPrompt || \\"asdf\\" ? ( <> - +