diff --git a/.changeset/small-garlics-flash.md b/.changeset/small-garlics-flash.md new file mode 100644 index 0000000000..7735ca25e9 --- /dev/null +++ b/.changeset/small-garlics-flash.md @@ -0,0 +1,5 @@ +--- +'@builder.io/mitosis': patch +--- + +[React] Refactor: consolidate bindings processing into code processor plugin. diff --git a/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap b/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap index ea3519501c..1d19177a9c 100644 --- a/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap +++ b/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap @@ -364,10 +364,7 @@ function MyComponent(props) { lineHeight: \\"normal\\", width: \\"33%\\", marginLeft: \\"0px\\", - \\"@media (max-width: 991px)\\": { - width: \\"100%\\", - marginLeft: 0, - }, + \\"@media (max-width: 991px)\\": { width: \\"100%\\", marginLeft: 0 }, }} > + + + + ); } @@ -15532,7 +15522,7 @@ function MyBasicComponent(props) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -16188,7 +16178,6 @@ function RenderContent(props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -18615,15 +18604,10 @@ function ComponentWithContext(props) { const foo = useContext(Context1); return ( - + + ); } @@ -18933,7 +18912,7 @@ function MyBasicComponent(props) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -19597,7 +19576,6 @@ function RenderContent(props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -20283,7 +20261,7 @@ exports[`Mitosis, format: react > svelte > Javascript Test > context 1`] = ` "'>' expected. (35:13) 33 | return ( 34 | -> 35 | <'activeTab'.Provider value={activeTab}>
{activeTab}
+> 35 | <'activeTab'.Provider value={state.activeTab}>
{activeTab}
| ^ 36 | 37 | @@ -20686,7 +20664,7 @@ exports[`Mitosis, format: react > svelte > Typescript Test > context 1`] = ` "'>' expected. (35:13) 33 | return ( 34 | -> 35 | <'activeTab'.Provider value={activeTab}>
{activeTab}
+> 35 | <'activeTab'.Provider value={state.activeTab}>
{activeTab}
| ^ 36 | 37 | diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap index 0b2abdd829..613f821d5c 100644 --- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap @@ -1844,15 +1844,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; }, @@ -5596,15 +5585,10 @@ function ComponentWithContext(props: ComponentWithContextProps) { const foo = useContext(Context1); return ( - + + ); } @@ -5954,7 +5933,7 @@ function MyBasicComponent(props: any) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -6693,7 +6672,6 @@ function RenderContent(props: Props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -7511,7 +7489,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 | @@ -7915,7 +7893,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 f82c7c3aa4..b6c77d4d74 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; }, @@ -4510,14 +4504,7 @@ import { } from \\"react-native\\"; function MyComponent(props) { - return ( - - ); + return ; } const styles = StyleSheet.create({ @@ -4545,7 +4532,14 @@ import { } from \\"react-native\\"; function StylePropClassAndCss(props) { - return ; + return ( + + ); } const styles = StyleSheet.create({ @@ -7527,7 +7521,12 @@ function MyBasicComponent(props: any) { })); return ( - + Hello! I can run in React, Vue, Solid, or Liquid! ); @@ -7567,15 +7566,10 @@ function ComponentWithContext(props: ComponentWithContextProps) { const foo = useContext(Context1); return ( - + + ); } @@ -8116,7 +8105,7 @@ function MyBasicComponent(props: any) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -9108,7 +9097,6 @@ function RenderContent(props: Props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -9792,14 +9780,7 @@ import { } from \\"react-native\\"; function MyComponent(props: any) { - return ( - - ); + return ; } const styles = StyleSheet.create({ @@ -9827,7 +9808,14 @@ import { } from \\"react-native\\"; function StylePropClassAndCss(props: any) { - return ; + return ( + + ); } const styles = StyleSheet.create({ @@ -10411,7 +10399,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 | @@ -11006,7 +10994,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-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap index 37f4d74f77..a061ac7ce6 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 @@ -1860,15 +1860,10 @@ function ComponentWithContext(props) { const foo = useContext(Context1); return ( - + + + + + + + + + + + + + + + + { prevCount.current = count; @@ -1050,14 +1050,34 @@ export default MyComponent; `; exports[`React - stateType: variables > jsx > Javascript Test > basicForNoTagReference 1`] = ` -"Identifier expected. (39:17) - 37 | return ( - 38 | -> 39 | - | ^ - 40 | Hello {name}{props.actions?.map((action) => ( - 41 | {action.text} - 42 | ))}" +"\\"use client\\"; +import * as React from \\"react\\"; + +function MyBasicForNoTagRefComponent(props) { + const name = \\"VincentW\\"; + const TagName = \\"div\\"; + const TagNameGetter = function TagNameGetter() { + return \\"span\\"; + }; + const Tag = \\"span\\"; + + const TagNameGetterRef = TagNameGetter(); + + return ( + + Hello {name} + {props.actions?.map((action) => ( + + + {action.text} + + ))} + + ); +} + +export default MyBasicForNoTagRefComponent; +" `; exports[`React - stateType: variables > jsx > Javascript Test > basicForwardRef 1`] = ` @@ -1949,14 +1969,251 @@ exports[`React - stateType: variables > jsx > Javascript Test > referencingFunIn `; exports[`React - stateType: variables > jsx > Javascript Test > renderBlock 1`] = ` -"Identifier expected. (214:8) - 212 | {shouldWrap() ? ( - 213 | <>{isEmptyHtmlElement(tag()) ? ( -> 214 | - | ^ - 215 | ) : null} - 216 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? ( - 217 | <>{repeatItemData()?.map((data, index) => (" +"\\"use client\\"; +import * as React from \\"react\\"; +import { TARGET } from \\"../../constants/target.js\\"; +import { evaluate } from \\"../../functions/evaluate.js\\"; +import { extractTextStyles } from \\"../../functions/extract-text-styles.js\\"; +import { getBlockActions } from \\"../../functions/get-block-actions.js\\"; +import { getBlockComponentOptions } from \\"../../functions/get-block-component-options.js\\"; +import { getBlockProperties } from \\"../../functions/get-block-properties.js\\"; +import { getBlockTag } from \\"../../functions/get-block-tag.js\\"; +import { getProcessedBlock } from \\"../../functions/get-processed-block.js\\"; +import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-block-styles.js\\"; +import BlockStyles from \\"./block-styles\\"; +import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\"; +import RenderComponentWithContext from \\"./render-component-with-context.js\\"; +import RenderComponent from \\"./render-component\\"; +import RenderRepeatedBlock from \\"./render-repeated-block\\"; + +function RenderBlock(props) { + const component = function component() { + const componentName = getProcessedBlock({ + block: props.block, + state: props.context.state, + context: props.context.context, + shouldEvaluateBindings: false, + }).component?.name; + + if (!componentName) { + return null; + } + + const ref = props.context.registeredComponents[componentName]; + + if (!ref) { + // TODO: Public doc page with more info about this message + console.warn(\` + Could not find a registered component named \\"\${componentName}\\". + If you registered it, is the file that registered it imported by the file that needs to render it?\`); + return undefined; + } else { + return ref; + } + }; + const tag = function tag() { + return getBlockTag(useBlock()); + }; + const useBlock = function useBlock() { + return repeatItemData() + ? props.block + : getProcessedBlock({ + block: props.block, + state: props.context.state, + context: props.context.context, + shouldEvaluateBindings: true, + }); + }; + const actions = function actions() { + return getBlockActions({ + block: useBlock(), + state: props.context.state, + context: props.context.context, + }); + }; + const attributes = function attributes() { + const blockProperties = getBlockProperties(useBlock()); + return { + ...blockProperties, + ...(TARGET === \\"reactNative\\" + ? { + style: getReactNativeBlockStyles({ + block: useBlock(), + context: props.context, + blockStyles: blockProperties.style, + }), + } + : {}), + }; + }; + const shouldWrap = function shouldWrap() { + return !component()?.noWrap; + }; + const renderComponentProps = function renderComponentProps() { + return { + blockChildren: useChildren(), + componentRef: component()?.component, + componentOptions: { + ...getBlockComponentOptions(useBlock()), + + /** + * These attributes are passed to the wrapper element when there is one. If \`noWrap\` is set to true, then + * they are provided to the component itself directly. + */ + ...(shouldWrap() + ? {} + : { + attributes: { ...attributes(), ...actions() }, + }), + customBreakpoints: childrenContext()?.content?.meta?.breakpoints, + }, + context: childrenContext(), + }; + }; + const useChildren = function useChildren() { + // TO-DO: When should \`canHaveChildren\` dictate rendering? + // This is currently commented out because some Builder components (e.g. Box) do not have \`canHaveChildren: true\`, + // but still receive and need to render children. + // return state.componentInfo?.canHaveChildren ? state.useBlock.children : []; + return useBlock().children ?? []; + }; + const childrenWithoutParentComponent = + function childrenWithoutParentComponent() { + /** + * When there is no \`componentRef\`, there might still be children that need to be rendered. In this case, + * we render them outside of \`componentRef\`. + * NOTE: We make sure not to render this if \`repeatItemData\` is non-null, because that means we are rendering an array of + * blocks, and the children will be repeated within those blocks. + */ + const shouldRenderChildrenOutsideRef = + !component()?.component && !repeatItemData(); + return shouldRenderChildrenOutsideRef ? useChildren() : []; + }; + const repeatItemData = function repeatItemData() { + /** + * we don't use \`state.useBlock\` here because the processing done within its logic includes evaluating the block's bindings, + * which will not work if there is a repeat. + */ + const { repeat, ...blockWithoutRepeat } = props.block; + + if (!repeat?.collection) { + return undefined; + } + + const itemsArray = evaluate({ + code: repeat.collection, + state: props.context.state, + context: props.context.context, + }); + + if (!Array.isArray(itemsArray)) { + return undefined; + } + + const collectionName = repeat.collection.split(\\".\\").pop(); + const itemNameToUse = + repeat.itemName || (collectionName ? collectionName + \\"Item\\" : \\"item\\"); + const repeatArray = itemsArray.map((item, index) => ({ + context: { + ...props.context, + state: { + ...props.context.state, + $index: index, + $item: item, + [itemNameToUse]: item, + [\`$\${itemNameToUse}Index\`]: index, + }, + }, + block: blockWithoutRepeat, + })); + return repeatArray; + }; + const inheritedTextStyles = function inheritedTextStyles() { + if (TARGET !== \\"reactNative\\") { + return {}; + } + + const styles = getReactNativeBlockStyles({ + block: useBlock(), + context: props.context, + blockStyles: attributes().style, + }); + return extractTextStyles(styles); + }; + const childrenContext = function childrenContext() { + return { + apiKey: props.context.apiKey, + state: props.context.state, + content: props.context.content, + context: props.context.context, + registeredComponents: props.context.registeredComponents, + inheritedStyles: inheritedTextStyles(), + }; + }; + const renderComponentTag = function renderComponentTag() { + if (TARGET === \\"reactNative\\") { + return RenderComponentWithContext; + } else if (TARGET === \\"vue3\\") { + // vue3 expects a string for the component tag + return \\"RenderComponent\\"; + } else { + return RenderComponent; + } + }; + const componentInfo = null; + + const RenderComponentTagRef = renderComponentTag(); + const TagRef = tag(); + + return ( + <> + {shouldWrap() ? ( + <> + {isEmptyHtmlElement(tag()) ? ( + + ) : null} + {!isEmptyHtmlElement(tag()) && repeatItemData() ? ( + <> + {repeatItemData()?.map((data, index) => ( + + ))} + + ) : null} + {!isEmptyHtmlElement(tag()) && !repeatItemData() ? ( + + + {childrenWithoutParentComponent()?.map((child) => ( + + ))} + {childrenWithoutParentComponent()?.map((child) => ( + + ))} + + ) : null} + + ) : ( + <> + + + )} + + ); +} + +export default RenderBlock; +" `; exports[`React - stateType: variables > jsx > Javascript Test > renderContentExample 1`] = ` @@ -2840,7 +3097,7 @@ export function usePrevious(value: T) { function MyPreviousComponent(props: Props) { const count = 0; - const prevCount = useRef(state.count); + const prevCount = useRef(count); useEffect(() => { prevCount.current = count; @@ -3791,14 +4048,34 @@ export default MyComponent; `; exports[`React - stateType: variables > jsx > Typescript Test > basicForNoTagReference 1`] = ` -"Identifier expected. (39:17) - 37 | return ( - 38 | -> 39 | - | ^ - 40 | Hello {name}{props.actions?.map((action) => ( - 41 | {action.text} - 42 | ))}" +"\\"use client\\"; +import * as React from \\"react\\"; + +function MyBasicForNoTagRefComponent(props: any) { + const name = \\"VincentW\\"; + const TagName = \\"div\\"; + const TagNameGetter = function TagNameGetter() { + return \\"span\\"; + }; + const Tag = \\"span\\"; + + const TagNameGetterRef = TagNameGetter(); + + return ( + + Hello {name} + {props.actions?.map((action) => ( + + + {action.text} + + ))} + + ); +} + +export default MyBasicForNoTagRefComponent; +" `; exports[`React - stateType: variables > jsx > Typescript Test > basicForwardRef 1`] = ` @@ -4800,14 +5077,264 @@ exports[`React - stateType: variables > jsx > Typescript Test > referencingFunIn `; exports[`React - stateType: variables > jsx > Typescript Test > renderBlock 1`] = ` -"Identifier expected. (222:8) - 220 | {shouldWrap() ? ( - 221 | <>{isEmptyHtmlElement(tag()) ? ( -> 222 | - | ^ - 223 | ) : null} - 224 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? ( - 225 | <>{repeatItemData()?.map((data, index) => (" +"\\"use client\\"; +import * as React from \\"react\\"; + +export type RenderBlockProps = { + block: BuilderBlock; + context: BuilderContextInterface; +}; +import { TARGET } from \\"../../constants/target.js\\"; +import type { + BuilderContextInterface, + RegisteredComponent, +} from \\"../../context/types.js\\"; +import { evaluate } from \\"../../functions/evaluate.js\\"; +import { extractTextStyles } from \\"../../functions/extract-text-styles.js\\"; +import { getBlockActions } from \\"../../functions/get-block-actions.js\\"; +import { getBlockComponentOptions } from \\"../../functions/get-block-component-options.js\\"; +import { getBlockProperties } from \\"../../functions/get-block-properties.js\\"; +import { getBlockTag } from \\"../../functions/get-block-tag.js\\"; +import { getProcessedBlock } from \\"../../functions/get-processed-block.js\\"; +import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-block-styles.js\\"; +import type { BuilderBlock } from \\"../../types/builder-block.js\\"; +import type { Nullable } from \\"../../types/typescript.js\\"; +import BlockStyles from \\"./block-styles\\"; +import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\"; +import RenderComponentWithContext from \\"./render-component-with-context.js\\"; +import type { RenderComponentProps } from \\"./render-component\\"; +import RenderComponent from \\"./render-component\\"; +import RenderRepeatedBlock from \\"./render-repeated-block\\"; +import type { RepeatData } from \\"./types.js\\"; + +function RenderBlock(props: RenderBlockProps) { + const component = function component() { + const componentName = getProcessedBlock({ + block: props.block, + state: props.context.state, + context: props.context.context, + shouldEvaluateBindings: false, + }).component?.name; + + if (!componentName) { + return null; + } + + const ref = props.context.registeredComponents[componentName]; + + if (!ref) { + // TODO: Public doc page with more info about this message + console.warn(\` + Could not find a registered component named \\"\${componentName}\\". + If you registered it, is the file that registered it imported by the file that needs to render it?\`); + return undefined; + } else { + return ref; + } + }; + const tag = function tag() { + return getBlockTag(useBlock()); + }; + const useBlock = function useBlock() { + return repeatItemData() + ? props.block + : getProcessedBlock({ + block: props.block, + state: props.context.state, + context: props.context.context, + shouldEvaluateBindings: true, + }); + }; + const actions = function actions() { + return getBlockActions({ + block: useBlock(), + state: props.context.state, + context: props.context.context, + }); + }; + const attributes = function attributes() { + const blockProperties = getBlockProperties(useBlock()); + return { + ...blockProperties, + ...(TARGET === \\"reactNative\\" + ? { + style: getReactNativeBlockStyles({ + block: useBlock(), + context: props.context, + blockStyles: blockProperties.style, + }), + } + : {}), + }; + }; + const shouldWrap = function shouldWrap() { + return !component()?.noWrap; + }; + const renderComponentProps = function renderComponentProps() { + return { + blockChildren: useChildren(), + componentRef: component()?.component, + componentOptions: { + ...getBlockComponentOptions(useBlock()), + + /** + * These attributes are passed to the wrapper element when there is one. If \`noWrap\` is set to true, then + * they are provided to the component itself directly. + */ + ...(shouldWrap() + ? {} + : { + attributes: { ...attributes(), ...actions() }, + }), + customBreakpoints: childrenContext()?.content?.meta?.breakpoints, + }, + context: childrenContext(), + }; + }; + const useChildren = function useChildren() { + // TO-DO: When should \`canHaveChildren\` dictate rendering? + // This is currently commented out because some Builder components (e.g. Box) do not have \`canHaveChildren: true\`, + // but still receive and need to render children. + // return state.componentInfo?.canHaveChildren ? state.useBlock.children : []; + return useBlock().children ?? []; + }; + const childrenWithoutParentComponent = + function childrenWithoutParentComponent() { + /** + * When there is no \`componentRef\`, there might still be children that need to be rendered. In this case, + * we render them outside of \`componentRef\`. + * NOTE: We make sure not to render this if \`repeatItemData\` is non-null, because that means we are rendering an array of + * blocks, and the children will be repeated within those blocks. + */ + const shouldRenderChildrenOutsideRef = + !component()?.component && !repeatItemData(); + return shouldRenderChildrenOutsideRef ? useChildren() : []; + }; + const repeatItemData = function repeatItemData() { + /** + * we don't use \`state.useBlock\` here because the processing done within its logic includes evaluating the block's bindings, + * which will not work if there is a repeat. + */ + const { repeat, ...blockWithoutRepeat } = props.block; + + if (!repeat?.collection) { + return undefined; + } + + const itemsArray = evaluate({ + code: repeat.collection, + state: props.context.state, + context: props.context.context, + }); + + if (!Array.isArray(itemsArray)) { + return undefined; + } + + const collectionName = repeat.collection.split(\\".\\").pop(); + const itemNameToUse = + repeat.itemName || (collectionName ? collectionName + \\"Item\\" : \\"item\\"); + const repeatArray = itemsArray.map((item, index) => ({ + context: { + ...props.context, + state: { + ...props.context.state, + $index: index, + $item: item, + [itemNameToUse]: item, + [\`$\${itemNameToUse}Index\`]: index, + }, + }, + block: blockWithoutRepeat, + })); + return repeatArray; + }; + const inheritedTextStyles = function inheritedTextStyles() { + if (TARGET !== \\"reactNative\\") { + return {}; + } + + const styles = getReactNativeBlockStyles({ + block: useBlock(), + context: props.context, + blockStyles: attributes().style, + }); + return extractTextStyles(styles); + }; + const childrenContext = function childrenContext() { + return { + apiKey: props.context.apiKey, + state: props.context.state, + content: props.context.content, + context: props.context.context, + registeredComponents: props.context.registeredComponents, + inheritedStyles: inheritedTextStyles(), + }; + }; + const renderComponentTag = function renderComponentTag() { + if (TARGET === \\"reactNative\\") { + return RenderComponentWithContext; + } else if (TARGET === \\"vue3\\") { + // vue3 expects a string for the component tag + return \\"RenderComponent\\"; + } else { + return RenderComponent; + } + }; + const componentInfo = null; + + const RenderComponentTagRef = renderComponentTag(); + const TagRef = tag(); + + return ( + <> + {shouldWrap() ? ( + <> + {isEmptyHtmlElement(tag()) ? ( + + ) : null} + {!isEmptyHtmlElement(tag()) && repeatItemData() ? ( + <> + {repeatItemData()?.map((data, index) => ( + + ))} + + ) : null} + {!isEmptyHtmlElement(tag()) && !repeatItemData() ? ( + + + {childrenWithoutParentComponent()?.map((child) => ( + + ))} + {childrenWithoutParentComponent()?.map((child) => ( + + ))} + + ) : null} + + ) : ( + <> + + + )} + + ); +} + +export default RenderBlock; +" `; exports[`React - stateType: variables > jsx > Typescript Test > renderContentExample 1`] = ` diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap index 7fe63c2a89..78dbfc32e8 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; }, @@ -5478,15 +5467,10 @@ function ComponentWithContext(props: ComponentWithContextProps) { const foo = useContext(Context1); return ( - + + ); } @@ -5833,7 +5812,7 @@ function MyBasicComponent(props: any) { hello: \\"world\\", })); - return ; + return ; } export default MyBasicComponent; @@ -6565,7 +6544,6 @@ function RenderContent(props: Props) { get content() { return 3; }, - get registeredComponents() { return 4; }, @@ -7320,13 +7298,13 @@ function SmileReviews(props) { {showReviewPrompt || \\"asdf\\" ? ( <> - +