+ {state.names.map((person, index) =>
+ person === state.name ? (
+ <>
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > Basic Context 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ name: \\"PatrickJS\\",
+ onChange: function onChange() {
+ const change = myService.method(\\"change\\");
+ console.log(change);
+ },
+ });
+
+ onMount(() => {
+ const bye = myService.method(\\"hi\\");
+ console.log(bye);
+ });
+
+ return (
+
+ {myService.method(\\"hello\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > Basic OnMount Update 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicOnMountUpdateComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+
+ onMount(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ });
+
+ return (
+
+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > BasicChildComponent 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { MyBasicComponent, MyBasicOnMountUpdateComponent } from \\"@components\\";
+
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+export default function MyBasicChildComponent(props) {
+ const state = useStore({ name: \\"Steve\\", dev: \\"PatrickJS\\" });
+
+ return (
+ state.handleChange(value)}
+ />
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > RawText 1`] = `
+"export default function RawText(props) {
+ return (
+
+ {props.options.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > SlotDefault 1`] = `
+"import { Slot } from \\"@components\\";
+
+export default function SlotCode(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > SlotHtml 1`] = `
+"import { ContentSlotCode, Slot } from \\"@components\\";
+
+import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+
+export default function SlotCode(props) {
+ return (
+
+
+ Hello
} />
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > SlotJsx 1`] = `
+"import { ContentSlotCode } from \\"@components\\";
+
+import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+
+export default function SlotCode(props) {
+ return (
+
+ Hello
} />
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > SlotNamed 1`] = `
+"import { Slot } from \\"@components\\";
+
+export default function SlotCode(props) {
+ return (
+
+ Default left
+ Default Child
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > Stamped.io 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { Show, For } from \\"@components\\";
+
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+export default function SmileReviews(props) {
+ const state = useStore({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ snakeCaseValue() {
+ return snakeCase(\\"testThis\\");
+ },
+ });
+
+ onMount(() => {
+ fetch(
+ \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
+ props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
+ }&productId=\${props.productId || \\"2410511106127\\"}\`
+ )
+ .then((res) => res.json())
+ .then((data) => {
+ state.reviews = data.data;
+ });
+ });
+
+ return (
+
+
(state.showReviewPrompt = true)}>
+ Write a review
+
+ {state.showReviewPrompt || \\"asdf\\" ? (
+ <>
+
+
+
+
{
+ event.preventDefault();
+ state.showReviewPrompt = false;
+ }}
+ >
+ Submit
+
+
+ ) : null}
+ {state.reviews.map((review, index) => (
+
+
+
+
+ N:
+ {index}
+
+
{review.author}
+
{review.reviewMessage}
+
+
+ ))}
+
+ {props.text}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > Text 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+export default function Text(props) {
+ const state = useStore({ name: \\"Decadef20\\" });
+
+ return (
+ my name'
+ }
+ />
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > Textarea 1`] = `
+"export default function Textarea(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > Video 1`] = `
+"export default function Video(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicForNoTagReference 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { For } from \\"@components\\";
+
+export default function MyBasicForNoTagRefComponent(props) {
+ const state = useStore({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}
+ {props.actions.map((action, index) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicForwardRef 1`] = `
+"',' expected. (16:12)
+ 14 | const state = useStore({ name: 'PatrickJS',});
+ 15 |
+> 16 | const props.inputRef = useRef();
+ | ^
+ 17 |
+ 18 |
+ 19 |"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
+"',' expected. (16:12)
+ 14 | const state = useStore({ name: 'PatrickJS',});
+ 15 |
+> 16 | const props.inputRef = useRef();
+ | ^
+ 17 |
+ 18 |
+ 19 |"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicOnUpdateReturnComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ return (
+
+ Hello!
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > class + ClassName + css 1`] = `
+"import { MyComp } from \\"@components\\";
+
+import MyComp from \\"./my-component.js\\";
+
+export default function MyBasicComponent(props) {
+ return (
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > class + css 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > className + css 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > className 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function ClassNameCode(props) {
+ const state = useStore({ bindings: \\"a binding\\" });
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > classState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ classState: \\"testClassName\\",
+ styleState: {
+ color: \\"red\\",
+ },
+ });
+
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > componentWithContext 1`] = `
+"import { Fragment } from \\"@components\\";
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+ return (
+
+ {foo.value}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import { Fragment } from \\"@components\\";
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+ return (
+
+ {foo.value}
+ other
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > contentState 1`] = `
+"import BuilderContext from \\"@dummy/context.js\\";
+
+export default function RenderContent(props) {
+ return
setting context
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > defaultProps 1`] = `
+"import { Show } from \\"@components\\";
+
+export default function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick()}
+ >
+ {props.buttonText}
+
+ ) : null}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
+"import { Show } from \\"@components\\";
+
+export default function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick(event)}
+ >
+ {props.text}
+
+ ) : null}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > defaultValsWithTypes 1`] = `
+"const DEFAULT_VALUES = {
+ name: \\"Sami\\",
+};
+
+export default function ComponentWithTypes(props) {
+ return (
+
+ {\\" \\"}
+ Hello
+ {props.name || DEFAULT_VALUES.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > expressionState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ });
+
+ return
{state.refToUse}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > getterState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function Button(props) {
+ const state = useStore({
+ get foo2() {
+ return props.foo + \\"foo\\";
+ },
+ get bar() {
+ return \\"bar\\";
+ },
+ baz(i) {
+ return i + state.foo2.length;
+ },
+ });
+
+ return (
+
+
{state.foo2}
+
{state.bar}
+
{state.baz(1)}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > import types 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { RenderBlock } from \\"@components\\";
+
+import RenderBlock from \\"./builder-render-block.raw\\";
+
+export default function RenderContent(props) {
+ const state = useStore({
+ getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ },
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > multipleOnUpdate 1`] = `
+"export default function MultipleOnUpdate(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MultipleOnUpdateWithDeps(props) {
+ const state = useStore({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > multipleSpreads 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ attrs: {
+ hello: \\"world\\",
+ },
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > nestedShow 1`] = `
+"import { Show } from \\"@components\\";
+
+export default function NestedShow(props) {
+ return props.conditionA ? (
+ !props.conditionB ? (
+
if condition A and condition B
+ ) : (
+
else-condition-B
+ )
+ ) : (
+
else-condition-A
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > nestedStyles 1`] = `
+"export default function NestedStyles(props) {
+ return (
+
+ Hello world
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > onEvent 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+
+export default function Embed(props) {
+ const state = useStore({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ });
+
+ const elem = useRef(null);
+ const elem = useRef(null);
+
+ onMount(() => {
+ elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > onInit & onMount 1`] = `
+"export default function OnInit(props) {
+ onMount(() => {
+ console.log(\\"onMount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > onInit 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+export default function OnInit(props) {
+ const state = useStore({ name: \\"\\" });
+
+ return (
+
+ Default name defined by parent
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > onInitPlain 1`] = `
+"export default function OnInitPlain(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > onMount 1`] = `
+"export default function Comp(props) {
+ onMount(() => {
+ console.log(\\"Runs on mount\\");
+ });
+
+ onUnMount(() => {
+ console.log(\\"Runs on unMount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > onMountMultiple 1`] = `
+"export default function Comp(props) {
+ onMount(() => {
+ console.log(\\"Runs on mount\\");
+ }),
+ onMount(() => {
+ console.log(\\"Another one runs on Mount\\");
+ }),
+ onMount(() => {
+ console.log(\\"SSR runs on Mount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > onUpdate 1`] = `
+"export default function OnUpdate(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > onUpdateWithDeps 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function OnUpdateWithDeps(props) {
+ const state = useStore({ a: \\"a\\", b: \\"b\\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
+"const b = 3;
+const foo = () => {};
+export const a = 3;
+export const bar = () => {};
+export function run(value) {}
+
+export default function MyBasicComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > preserveTyping 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > propsDestructure 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({ name: \\"Decadef20\\" });
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > propsInterface 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > propsType 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > referencingFunInsideHook 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function OnUpdate(props) {
+ const state = useStore({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > renderBlock 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import {
+ Show,
+ For,
+ RenderRepeatedBlock,
+ RenderBlock,
+ BlockStyles,
+} from \\"@components\\";
+
+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.js\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import RenderComponent from \\"./render-component.js\\";
+import RenderRepeatedBlock from \\"./render-repeated-block.js\\";
+
+export default function RenderBlock(props) {
+ const state = useStore({
+ get 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;
+ }
+ },
+ get tag() {
+ return getBlockTag(state.useBlock);
+ },
+ get useBlock() {
+ return state.repeatItemData
+ ? props.block
+ : getProcessedBlock({
+ block: props.block,
+ state: props.context.state,
+ context: props.context.context,
+ shouldEvaluateBindings: true,
+ });
+ },
+ get actions() {
+ return getBlockActions({
+ block: state.useBlock,
+ state: props.context.state,
+ context: props.context.context,
+ });
+ },
+ get attributes() {
+ const blockProperties = getBlockProperties(state.useBlock);
+ return {
+ ...blockProperties,
+ ...(TARGET === \\"reactNative\\"
+ ? {
+ style: getReactNativeBlockStyles({
+ block: state.useBlock,
+ context: props.context,
+ blockStyles: blockProperties.style,
+ }),
+ }
+ : {}),
+ };
+ },
+ get shouldWrap() {
+ return !state.component?.noWrap;
+ },
+ get renderComponentProps() {
+ return {
+ blockChildren: state.useChildren,
+ componentRef: state.component?.component,
+ componentOptions: {
+ ...getBlockComponentOptions(state.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.
+ */
+ ...(state.shouldWrap
+ ? {}
+ : {
+ attributes: { ...state.attributes, ...state.actions },
+ }),
+ customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
+ },
+ context: state.childrenContext,
+ };
+ },
+ get 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 state.useBlock.children ?? [];
+ },
+ get 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 =
+ !state.component?.component && !state.repeatItemData;
+ return shouldRenderChildrenOutsideRef ? state.useChildren : [];
+ },
+ get 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;
+ },
+ get inheritedTextStyles() {
+ if (TARGET !== \\"reactNative\\") {
+ return {};
+ }
+
+ const styles = getReactNativeBlockStyles({
+ block: state.useBlock,
+ context: props.context,
+ blockStyles: state.attributes.style,
+ });
+ return extractTextStyles(styles);
+ },
+ get childrenContext() {
+ return {
+ apiKey: props.context.apiKey,
+ state: props.context.state,
+ content: props.context.content,
+ context: props.context.context,
+ registeredComponents: props.context.registeredComponents,
+ inheritedStyles: state.inheritedTextStyles,
+ };
+ },
+ get renderComponentTag() {
+ if (TARGET === \\"reactNative\\") {
+ return RenderComponentWithContext;
+ } else if (TARGET === \\"vue3\\") {
+ // vue3 expects a string for the component tag
+ return \\"RenderComponent\\";
+ } else {
+ return RenderComponent;
+ }
+ },
+ });
+
+ return state.shouldWrap ? (
+ <>
+ {isEmptyHtmlElement(state.tag) ? (
+
+ ) : null}
+ {!isEmptyHtmlElement(state.tag) && state.repeatItemData
+ ? state.repeatItemData.map((data, index) => (
+
+ ))
+ : null}
+ {!isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (
+
+
+ ) : null}
+
+ ) : (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > renderContentExample 1`] = `
+"import { RenderBlocks } from \\"@components\\";
+
+import BuilderContext from \\"@dummy/context.js\\";
+import {
+ dispatchNewContentToVisualEditor,
+ sendComponentsToVisualEditor,
+ trackClick,
+} from \\"@dummy/injection-js\\";
+import RenderBlocks from \\"@dummy/RenderBlocks.js\\";
+
+export default function RenderContent(props) {
+ onMount(() => {
+ sendComponentsToVisualEditor(props.customComponents);
+ });
+
+ return (
+
trackClick(props.content.id)}
+ >
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > rootFragmentMultiNode 1`] = `
+"import { Fragment, Show } from \\"@components\\";
+
+export default function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > rootShow 1`] = `
+"import { Show } from \\"@components\\";
+
+export default function RenderStyles(props) {
+ return props.foo === \\"bar\\" ?
Bar
:
Foo
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > self-referencing component 1`] = `
+"import { Show, MyComponent } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > self-referencing component with children 1`] = `
+"import { Show, MyComponent } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.children}
+ {props.name === \\"Batman\\" ? (
+
+ Wayne
+
+ ) : null}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > showExpressions 1`] = `
+"An identifier or keyword cannot immediately follow a numeric literal. (63:6)
+ 61 | : ContentF}
+ 62 | {(props.conditionA === 'Default') ?
+> 63 | 4mb
+ | ^
+ 64 | : (props.conditionB === 'Complete') ?
+ 65 | 20mb
+ 66 | : 9mb}"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > showWithFor 1`] = `
+"import { Show, For } from \\"@components\\";
+
+export default function NestedShow(props) {
+ return props.conditionA ? (
+ props.items.map((item, idx) =>
{item}
)
+ ) : (
+
else-condition-A
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > showWithOtherValues 1`] = `
+"import { Show } from \\"@components\\";
+
+export default function ShowWithOtherValues(props) {
+ return (
+
+ {props.conditionA ? ContentA : null}
+ {props.conditionA ? ContentB : { undefined }}
+ {props.conditionA ? ContentC : null}
+ {props.conditionA ? ContentD : null}
+ {props.conditionA ? ContentE : hello}
+ {props.conditionA ? ContentF : 123}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > showWithRootText 1`] = `
+"import { Show } from \\"@components\\";
+
+export default function ShowRootText(props) {
+ return props.conditionA ? ContentA :
else-condition-A
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > signalsOnUpdate 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ {props.id}
+ {props.foo.value.bar.baz}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > spreadAttrs 1`] = `
+"export default function MyBasicComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > spreadNestedProps 1`] = `
+"export default function MyBasicComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > spreadProps 1`] = `
+"export default function MyBasicComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > string-literal-store 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function StringLiteralStore(props) {
+ const state = useStore({ foo: 123 });
+
+ return
{state.foo}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > styleClassAndCss 1`] = `
+"export default function MyComponent(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > stylePropClassAndCss 1`] = `
+"export default function StylePropClassAndCss(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > subComponent 1`] = `
+"import { Foo } from \\"@components\\";
+
+import Foo from \\"./foo-sub-component.js\\";
+
+export default function SubComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > svgComponent 1`] = `
+"export default function SvgComponent(props) {
+ return (
+
+
+
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > typeDependency 1`] = `
+"export default function TypeDependency(props) {
+ return
{props.foo}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > typeExternalStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function TypeExternalStore(props) {
+ const state = useStore({ _name: \\"test\\" });
+
+ return (
+
+ Hello
+ {state._name}!{\\" \\"}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > typeGetterStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function TypeGetterStore(props) {
+ const state = useStore({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}!{\\" \\"}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > use-style 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ background: blue;
+ color: white;
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+ \`);
+
+ return
Button ;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > use-style-and-css 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+ \`);
+
+ return (
+
+ Button
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > use-style-outside-component 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ background: blue;
+ color: white;
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+\`);
+
+ return
Button ;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > useTarget 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function UseTargetComponent(props) {
+ const state = useStore({
+ get name() {
+ const prefix = \\"USE_TARGET_BLOCK_1\\";
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ });
+
+ onMount(() => {
+ \\"USE_TARGET_BLOCK_2\\";
+ });
+
+ return
{state.name}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > webComponent 1`] = `
+"import { register } from \\"swiper/element/bundle\\";
+
+export default function MyBasicWebComponent(props) {
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Remove Internal mitosis package 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ return (
+
+ Hello
+ {state.name}! I can run in React, Qwik, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > AdvancedRef 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+import { Show, Fragment } from \\"@components\\";
+export interface Props {
+ showInput: boolean;
+}
+
+export default function MyBasicRefComponent(props) {
+ const state = useStore({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ const inputRef = useRef
(null);
+ const inputNoArgRef = useRef(null);
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+
+ return (
+
+ {props.showInput ? (
+
+
+ Choose a car:
+
+
+ GR Supra
+ GR 86
+
+
+ ) : null}
+ Hello
+ {state.lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+ Component!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Basic 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export interface MyBasicComponentProps {
+ id: string;
+}
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ name: \\"Steve\\",
+ underscore_fn_name() {
+ return \\"bar\\";
+ },
+ age: 1,
+ sports: [\\"\\"],
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Basic 2`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { For, Show } from \\"@components\\";
+
+export default function MyBasicForShowComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+
+ return (
+
+ {state.names.map((person, index) =>
+ person === state.name ? (
+ <>
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Basic Context 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ name: \\"PatrickJS\\",
+ onChange: function onChange() {
+ const change = myService.method(\\"change\\");
+ console.log(change);
+ },
+ });
+
+ onMount(() => {
+ const bye = myService.method(\\"hi\\");
+ console.log(bye);
+ });
+
+ return (
+
+ {myService.method(\\"hello\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Basic OnMount Update 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export interface Props {
+ hi: string;
+ bye: string;
+}
+
+export default function MyBasicOnMountUpdateComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+
+ onMount(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ });
+
+ return (
+
+ Hello
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Basic Outputs 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicOutputsComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ onMount(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Basic Outputs Meta 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+useMetadata({
+ outputs: [\\"onMessage\\", \\"onEvent\\"],
+ baz: \\"metadata inside component\\",
+});
+
+export default function MyBasicOutputsComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ onMount(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > BasicAttribute 1`] = `
+"export default function MyComponent(props) {
+ return
+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > BasicChildComponent 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { MyBasicComponent, MyBasicOnMountUpdateComponent } from \\"@components\\";
+
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+export default function MyBasicChildComponent(props) {
+ const state = useStore({ name: \\"Steve\\", dev: \\"PatrickJS\\" });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > BasicFor 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { For, Fragment } from \\"@components\\";
+
+export default function MyBasicForComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+
+ onMount(() => {
+ console.log(\\"onMount code\\");
+ });
+
+ return (
+
+ {state.names.map((person, index) => (
+
+
+ ))}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > BasicRef 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+import { Show, Fragment } from \\"@components\\";
+export interface Props {
+ showInput: boolean;
+}
+
+export default function MyBasicRefComponent(props) {
+ const state = useStore({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+
+ return (
+
+ {props.showInput ? (
+
+
+ Choose a car:
+
+
+ GR Supra
+ GR 86
+
+
+ ) : null}
+ Hello
+ {state.lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+ Component!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > BasicRefAssignment 1`] = `"unknown: Maximum call stack size exceeded"`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > BasicRefPrevious 1`] = `"unknown: Maximum call stack size exceeded"`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Button 1`] = `
+"import { Show } from \\"@components\\";
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+export default function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ {props.columns.map((column, index) => (
+
+ {column.content}
+ {index}
+
+ ))}
+
state.show()}
+ class={state.cls}
+ >
+ {state.showContent && props.slotContent ? (
+
{props.content}
+ ) : null}
+
+
+
{props.children}
+
(null);
+ const elem = useRef(null);
+
+ onMount(() => {
+ state.findAndRunScripts();
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Embed 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+
+export interface CustomCodeProps {
+ code: string;
+ replaceNodes?: boolean;
+}
+
+export default function CustomCode(props) {
+ const state = useStore({
+ scriptsInserted: [],
+ scriptsRun: [],
+ findAndRunScripts() {
+ // TODO: Move this function to standalone one in '@builder.io/utils'
+ if (elem.current && typeof window !== \\"undefined\\") {
+ /** @type {HTMLScriptElement[]} */
+ const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+ for (let i = 0; i < scripts.length; i++) {
+ const script = scripts[i];
+
+ if (script.src) {
+ if (state.scriptsInserted.includes(script.src)) {
+ continue;
+ }
+
+ state.scriptsInserted.push(script.src);
+ const newScript = document.createElement(\\"script\\");
+ newScript.async = true;
+ newScript.src = script.src;
+ document.head.appendChild(newScript);
+ } else if (
+ !script.type ||
+ [
+ \\"text/javascript\\",
+ \\"application/javascript\\",
+ \\"application/ecmascript\\",
+ ].includes(script.type)
+ ) {
+ if (state.scriptsRun.includes(script.innerText)) {
+ continue;
+ }
+
+ try {
+ state.scriptsRun.push(script.innerText);
+ new Function(script.innerText)();
+ } catch (error) {
+ console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ const elem = useRef(null);
+ const elem = useRef(null);
+
+ onMount(() => {
+ state.findAndRunScripts();
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Form 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+import { Show, For, BuilderBlockComponent, BuilderBlocks } from \\"@components\\";
+export interface FormProps {
+ attributes?: any;
+ name?: string;
+ action?: string;
+ validate?: boolean;
+ method?: string;
+ builderBlock?: BuilderElement;
+ sendSubmissionsTo?: string;
+ sendSubmissionsToEmail?: string;
+ sendWithJs?: boolean;
+ contentType?: string;
+ customHeaders?: {
+ [key: string]: string;
+ };
+ successUrl?: string;
+ previewState?: FormState;
+ successMessage?: BuilderElement[];
+ errorMessage?: BuilderElement[];
+ sendingMessage?: BuilderElement[];
+ resetFormOnSubmit?: boolean;
+ errorMessagePath?: string;
+}
+export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"error\\";
+
+import { Builder, BuilderElement, builder } from \\"@builder.io/sdk\\";
+import {
+ BuilderBlock as BuilderBlockComponent,
+ BuilderBlocks,
+ get,
+ set,
+} from \\"@fake\\";
+
+export default function FormComponent(props) {
+ const state = useStore({
+ formState: \\"unsubmitted\\",
+ responseData: null,
+ formErrorMessage: \\"\\",
+ get submissionState() {
+ return (Builder.isEditing && props.previewState) || state.formState;
+ },
+ onSubmit(
+ event: Event & {
+ currentTarget: HTMLFormElement;
+ }
+ ) {
+ const sendWithJs =
+ props.sendWithJs || props.sendSubmissionsTo === \\"email\\";
+
+ if (props.sendSubmissionsTo === \\"zapier\\") {
+ event.preventDefault();
+ } else if (sendWithJs) {
+ if (!(props.action || props.sendSubmissionsTo === \\"email\\")) {
+ event.preventDefault();
+ return;
+ }
+
+ event.preventDefault();
+ const el = event.currentTarget;
+ const headers = props.customHeaders || {};
+ let body: any;
+ const formData = new FormData(el); // TODO: maybe support null
+
+ const formPairs: {
+ key: string;
+ value: File | boolean | number | string | FileList;
+ }[] = Array.from(
+ event.currentTarget.querySelectorAll(\\"input,select,textarea\\")
+ )
+ .filter((el) => !!(el as HTMLInputElement).name)
+ .map((el) => {
+ let value: any;
+ const key = (el as HTMLImageElement).name;
+
+ if (el instanceof HTMLInputElement) {
+ if (el.type === \\"radio\\") {
+ if (el.checked) {
+ value = el.name;
+ return {
+ key,
+ value,
+ };
+ }
+ } else if (el.type === \\"checkbox\\") {
+ value = el.checked;
+ } else if (el.type === \\"number\\" || el.type === \\"range\\") {
+ const num = el.valueAsNumber;
+
+ if (!isNaN(num)) {
+ value = num;
+ }
+ } else if (el.type === \\"file\\") {
+ // TODO: one vs multiple files
+ value = el.files;
+ } else {
+ value = el.value;
+ }
+ } else {
+ value = (el as HTMLInputElement).value;
+ }
+
+ return {
+ key,
+ value,
+ };
+ });
+ let contentType = props.contentType;
+
+ if (props.sendSubmissionsTo === \\"email\\") {
+ contentType = \\"multipart/form-data\\";
+ }
+
+ Array.from(formPairs).forEach(({ value }) => {
+ if (
+ value instanceof File ||
+ (Array.isArray(value) && value[0] instanceof File) ||
+ value instanceof FileList
+ ) {
+ contentType = \\"multipart/form-data\\";
+ }
+ }); // TODO: send as urlEncoded or multipart by default
+ // because of ease of use and reliability in browser API
+ // for encoding the form?
+
+ if (contentType !== \\"application/json\\") {
+ body = formData;
+ } else {
+ // Json
+ const json = {};
+ Array.from(formPairs).forEach(({ value, key }) => {
+ set(json, key, value);
+ });
+ body = JSON.stringify(json);
+ }
+
+ if (contentType && contentType !== \\"multipart/form-data\\") {
+ if (
+ /* Zapier doesn't allow content-type header to be sent from browsers */
+ !(sendWithJs && props.action?.includes(\\"zapier.com\\"))
+ ) {
+ headers[\\"content-type\\"] = contentType;
+ }
+ }
+
+ const presubmitEvent = new CustomEvent(\\"presubmit\\", {
+ detail: {
+ body,
+ },
+ });
+
+ if (formRef.current) {
+ formRef.current.dispatchEvent(presubmitEvent);
+
+ if (presubmitEvent.defaultPrevented) {
+ return;
+ }
+ }
+
+ state.formState = \\"sending\\";
+ const formUrl = \`\${
+ builder.env === \\"dev\\" ? \\"http://localhost:5000\\" : \\"https://builder.io\\"
+ }/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(
+ props.sendSubmissionsToEmail || \\"\\"
+ )}&name=\${encodeURIComponent(props.name || \\"\\")}\`;
+ fetch(
+ props.sendSubmissionsTo === \\"email\\" ? formUrl : props.action!,
+ /* TODO: throw error if no action URL */
+ {
+ body,
+ headers,
+ method: props.method || \\"post\\",
+ }
+ ).then(
+ async (res) => {
+ let body;
+ const contentType = res.headers.get(\\"content-type\\");
+
+ if (contentType && contentType.indexOf(\\"application/json\\") !== -1) {
+ body = await res.json();
+ } else {
+ body = await res.text();
+ }
+
+ if (!res.ok && props.errorMessagePath) {
+ /* TODO: allow supplying an error formatter function */
+ let message = get(body, props.errorMessagePath);
+
+ if (message) {
+ if (typeof message !== \\"string\\") {
+ /* TODO: ideally convert json to yaml so it woul dbe like
+ error: - email has been taken */
+ message = JSON.stringify(message);
+ }
+
+ state.formErrorMessage = message;
+ }
+ }
+
+ state.responseData = body;
+ state.formState = res.ok ? \\"success\\" : \\"error\\";
+
+ if (res.ok) {
+ const submitSuccessEvent = new CustomEvent(\\"submit:success\\", {
+ detail: {
+ res,
+ body,
+ },
+ });
+
+ if (formRef.current) {
+ formRef.current.dispatchEvent(submitSuccessEvent);
+
+ if (submitSuccessEvent.defaultPrevented) {
+ return;
+ }
+ /* TODO: option to turn this on/off? */
+
+ if (props.resetFormOnSubmit !== false) {
+ formRef.current.reset();
+ }
+ }
+ /* TODO: client side route event first that can be preventDefaulted */
+
+ if (props.successUrl) {
+ if (formRef.current) {
+ const event = new CustomEvent(\\"route\\", {
+ detail: {
+ url: props.successUrl,
+ },
+ });
+ formRef.current.dispatchEvent(event);
+
+ if (!event.defaultPrevented) {
+ location.href = props.successUrl;
+ }
+ } else {
+ location.href = props.successUrl;
+ }
+ }
+ }
+ },
+ (err) => {
+ const submitErrorEvent = new CustomEvent(\\"submit:error\\", {
+ detail: {
+ error: err,
+ },
+ });
+
+ if (formRef.current) {
+ formRef.current.dispatchEvent(submitErrorEvent);
+
+ if (submitErrorEvent.defaultPrevented) {
+ return;
+ }
+ }
+
+ state.responseData = err;
+ state.formState = \\"error\\";
+ }
+ );
+ }
+ },
+ });
+
+ const formRef = useRef(null);
+ const formRef = useRef(null);
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Image 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+import { Show } from \\"@components\\";
+// TODO: AMP Support?
+export interface ImageProps {
+ _class?: string;
+ image: string;
+ sizes?: string;
+ lazy?: boolean;
+ height?: number;
+ width?: number;
+ altText?: string;
+ backgroundSize?: string;
+ backgroundPosition?: string; // TODO: Support generating Builder.io and or Shopify \`srcset\`s when needed
+
+ srcset?: string; // TODO: Implement support for custom aspect ratios
+
+ aspectRatio?: number; // TODO: This might not work as expected in terms of positioning
+
+ children?: any;
+}
+
+export default function Image(props) {
+ const state = useStore({
+ scrollListener: null,
+ imageLoaded: false,
+ setLoaded() {
+ state.imageLoaded = true;
+ },
+ useLazyLoading() {
+ // TODO: Add more checks here, like testing for real web browsers
+ return !!props.lazy && state.isBrowser();
+ },
+ isBrowser: function isBrowser() {
+ return (
+ typeof window !== \\"undefined\\" &&
+ window.navigator.product != \\"ReactNative\\"
+ );
+ },
+ load: false,
+ });
+
+ const pictureRef = useRef();
+ const pictureRef = useRef();
+
+ onMount(() => {
+ if (state.useLazyLoading()) {
+ // throttled scroll capture listener
+ const listener = () => {
+ if (pictureRef.current) {
+ const rect = pictureRef.current.getBoundingClientRect();
+ const buffer = window.innerHeight / 2;
+
+ if (rect.top < window.innerHeight + buffer) {
+ state.load = true;
+ state.scrollListener = null;
+ window.removeEventListener(\\"scroll\\", listener);
+ }
+ }
+ };
+
+ state.scrollListener = listener;
+ window.addEventListener(\\"scroll\\", listener, {
+ capture: true,
+ passive: true,
+ });
+ listener();
+ }
+ });
+
+ onUnMount(() => {
+ if (state.scrollListener) {
+ window.removeEventListener(\\"scroll\\", state.scrollListener);
+ }
+ });
+
+ return (
+
+
+ {!state.useLazyLoading() || state.load ? (
+
+ {props.children}
+
+ {state.images.map((item, itemIndex) => (
+
+
+ ))}
+
state.handleChange(value)}
+ />
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > RawText 1`] = `
+"export interface RawTextProps {
+ attributes?: any;
+ text?: string; // builderBlock?: any;
+}
+
+export default function RawText(props) {
+ return (
+
+ {props.options.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > SlotDefault 1`] = `
+"import { Slot } from \\"@components\\";
+type Props = {
+ [key: string]: string;
+};
+
+export default function SlotCode(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > SlotHtml 1`] = `
+"import { ContentSlotCode, Slot } from \\"@components\\";
+type Props = {
+ [key: string]: string;
+};
+
+import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+
+export default function SlotCode(props) {
+ return (
+
+
+ Hello
} />
+
+
+ Hello
} />
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > SlotNamed 1`] = `
+"import { Slot } from \\"@components\\";
+type Props = {
+ [key: string]: string;
+};
+
+export default function SlotCode(props) {
+ return (
+
+ Default left
+ Default Child
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Stamped.io 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { Show, For } from \\"@components\\";
+type SmileReviewsProps = {
+ productId: string;
+ apiKey: string;
+};
+
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+export default function SmileReviews(props) {
+ const state = useStore({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ snakeCaseValue() {
+ return snakeCase(\\"testThis\\");
+ },
+ });
+
+ onMount(() => {
+ fetch(
+ \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
+ props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
+ }&productId=\${props.productId || \\"2410511106127\\"}\`
+ )
+ .then((res) => res.json())
+ .then((data) => {
+ state.reviews = data.data;
+ });
+ });
+
+ return (
+
+
(state.showReviewPrompt = true)}>
+ Write a review
+
+ {state.showReviewPrompt || \\"asdf\\" ? (
+ <>
+
+
+
+
{
+ event.preventDefault();
+ state.showReviewPrompt = false;
+ }}
+ >
+ Submit
+
+
+ ) : null}
+ {state.reviews.map((review, index) => (
+
+
+
+
+ N:
+ {index}
+
+
{review.author}
+
{review.reviewMessage}
+
+
+ ))}
+
+ {props.text}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Text 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export interface TextProps {
+ attributes?: any;
+ rtlMode: boolean;
+ text?: string;
+ content?: string;
+ builderBlock?: any;
+}
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+export default function Text(props) {
+ const state = useStore({ name: \\"Decadef20\\" });
+
+ return (
+ my name'
+ }
+ />
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Textarea 1`] = `
+"export interface TextareaProps {
+ attributes?: any;
+ name?: string;
+ value?: string;
+ defaultValue?: string;
+ placeholder?: string;
+}
+
+export default function Textarea(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Video 1`] = `
+"export interface VideoProps {
+ attributes?: any;
+ video?: string;
+ autoPlay?: boolean;
+ controls?: boolean;
+ muted?: boolean;
+ loop?: boolean;
+ playsInline?: boolean;
+ aspectRatio?: number;
+ width?: number;
+ height?: number;
+ fit?: \\"contain\\" | \\"cover\\" | \\"fill\\";
+ position?:
+ | \\"center\\"
+ | \\"top\\"
+ | \\"left\\"
+ | \\"right\\"
+ | \\"bottom\\"
+ | \\"top left\\"
+ | \\"top right\\"
+ | \\"bottom left\\"
+ | \\"bottom right\\";
+ posterImage?: string;
+ lazyLoad?: boolean;
+}
+
+export default function Video(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicForNoTagReference 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { For } from \\"@components\\";
+
+export default function MyBasicForNoTagRefComponent(props) {
+ const state = useStore({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}
+ {props.actions.map((action, index) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicForwardRef 1`] = `
+"',' expected. (19:12)
+ 17 | const state = useStore({ name: 'PatrickJS',});
+ 18 |
+> 19 | const props.inputRef = useRef();
+ | ^
+ 20 |
+ 21 |
+ 22 |"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
+"',' expected. (19:12)
+ 17 | const state = useStore({ name: 'PatrickJS',});
+ 18 |
+> 19 | const props.inputRef = useRef();
+ | ^
+ 20 |
+ 21 |
+ 22 |"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicOnUpdateReturnComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ return (
+
+ Hello!
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > class + ClassName + css 1`] = `
+"import { MyComp } from \\"@components\\";
+
+import MyComp from \\"./my-component.js\\";
+
+export default function MyBasicComponent(props) {
+ return (
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > class + css 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > className + css 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > className 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+type Props = {
+ [key: string]: string | JSX.Element;
+ slotTesting: JSX.Element;
+};
+
+import type { JSX } from \\"../../../../jsx-runtime\\";
+
+export default function ClassNameCode(props) {
+ const state = useStore({ bindings: \\"a binding\\" });
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > classState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ classState: \\"testClassName\\",
+ styleState: {
+ color: \\"red\\",
+ },
+ });
+
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > componentWithContext 1`] = `
+"import { Fragment } from \\"@components\\";
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+ return (
+
+ {foo.value}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import { Fragment } from \\"@components\\";
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+ return (
+
+ {foo.value}
+ other
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > contentState 1`] = `
+"import BuilderContext from \\"@dummy/context.js\\";
+
+export default function RenderContent(props) {
+ return
setting context
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > defaultProps 1`] = `
+"import { Show } from \\"@components\\";
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ buttonText?: string; // no default value
+
+ link?: string;
+ openLinkInNewTab?: boolean;
+ onClick?: () => void;
+}
+
+export default function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick()}
+ >
+ {props.buttonText}
+
+ ) : null}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
+"import { Show } from \\"@components\\";
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+ onClick: () => void;
+}
+
+export default function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick(event)}
+ >
+ {props.text}
+
+ ) : null}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > defaultValsWithTypes 1`] = `
+"type Props = {
+ name: string;
+};
+
+const DEFAULT_VALUES: Props = {
+ name: \\"Sami\\",
+};
+
+export default function ComponentWithTypes(props) {
+ return (
+
+ {\\" \\"}
+ Hello
+ {props.name || DEFAULT_VALUES.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > expressionState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ });
+
+ return
{state.refToUse}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > getterState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export interface ButtonProps {
+ foo: string;
+}
+
+export default function Button(props) {
+ const state = useStore({
+ get foo2() {
+ return props.foo + \\"foo\\";
+ },
+ get bar() {
+ return \\"bar\\";
+ },
+ baz(i: number) {
+ return i + state.foo2.length;
+ },
+ });
+
+ return (
+
+
{state.foo2}
+
{state.bar}
+
{state.baz(1)}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > import types 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { RenderBlock } from \\"@components\\";
+type RenderContentProps = {
+ options?: GetContentOptions;
+ content: BuilderContent;
+ renderContentProps: RenderBlockProps;
+};
+
+import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
+import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
+
+export default function RenderContent(props) {
+ const state = useStore({
+ getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ },
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > multipleOnUpdate 1`] = `
+"export default function MultipleOnUpdate(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MultipleOnUpdateWithDeps(props) {
+ const state = useStore({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > multipleSpreads 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ attrs: {
+ hello: \\"world\\",
+ },
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > nestedShow 1`] = `
+"import { Show } from \\"@components\\";
+interface Props {
+ conditionA: boolean;
+ conditionB: boolean;
+}
+
+export default function NestedShow(props) {
+ return props.conditionA ? (
+ !props.conditionB ? (
+
if condition A and condition B
+ ) : (
+
else-condition-B
+ )
+ ) : (
+
else-condition-A
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > nestedStyles 1`] = `
+"export default function NestedStyles(props) {
+ return (
+
+ Hello world
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > onEvent 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+
+export default function Embed(props) {
+ const state = useStore({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ });
+
+ const elem = useRef
(null);
+ const elem = useRef(null);
+
+ onMount(() => {
+ elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > onInit & onMount 1`] = `
+"export default function OnInit(props) {
+ onMount(() => {
+ console.log(\\"onMount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > onInit 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+type Props = {
+ name: string;
+};
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+export default function OnInit(props) {
+ const state = useStore({ name: \\"\\" });
+
+ return (
+
+ Default name defined by parent
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > onInitPlain 1`] = `
+"export default function OnInitPlain(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > onMount 1`] = `
+"export default function Comp(props) {
+ onMount(() => {
+ console.log(\\"Runs on mount\\");
+ });
+
+ onUnMount(() => {
+ console.log(\\"Runs on unMount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > onMountMultiple 1`] = `
+"export default function Comp(props) {
+ onMount(() => {
+ console.log(\\"Runs on mount\\");
+ }),
+ onMount(() => {
+ console.log(\\"Another one runs on Mount\\");
+ }),
+ onMount(() => {
+ console.log(\\"SSR runs on Mount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > onUpdate 1`] = `
+"export default function OnUpdate(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > onUpdateWithDeps 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+type Props = {
+ size: string;
+};
+
+export default function OnUpdateWithDeps(props) {
+ const state = useStore({ a: \\"a\\", b: \\"b\\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
+"type Types = {
+ s: any[];
+};
+interface IPost {
+ len: number;
+}
+export interface MyBasicComponentProps {
+ id: string;
+}
+
+const b = 3;
+const foo = () => {};
+export const a = 3;
+export const bar = () => {};
+export function run(value: T) {}
+
+export default function MyBasicComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > preserveTyping 1`] = `
+"export type A = \\"test\\";
+export interface C {
+ n: \\"test\\";
+}
+type B = \\"test2\\";
+interface D {
+ n: \\"test\\";
+}
+export interface MyBasicComponentProps {
+ name: string;
+ age?: number;
+}
+
+export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > propsDestructure 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+type Props = {
+ children: any;
+ type: string;
+};
+
+export default function MyBasicComponent(props) {
+ const state = useStore({ name: \\"Decadef20\\" });
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > propsInterface 1`] = `
+"interface Person {
+ name: string;
+ age?: number;
+}
+
+export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > propsType 1`] = `
+"type Person = {
+ name: string;
+ age?: number;
+};
+
+export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > referencingFunInsideHook 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function OnUpdate(props) {
+ const state = useStore({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > renderBlock 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import {
+ Show,
+ For,
+ RenderRepeatedBlock,
+ RenderBlock,
+ BlockStyles,
+} from \\"@components\\";
+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.js\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import type { RenderComponentProps } from \\"./render-component.js\\";
+import RenderComponent from \\"./render-component.js\\";
+import RenderRepeatedBlock from \\"./render-repeated-block.js\\";
+import type { RepeatData } from \\"./types.js\\";
+
+export default function RenderBlock(props) {
+ const state = useStore({
+ get 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;
+ }
+ },
+ get tag() {
+ return getBlockTag(state.useBlock);
+ },
+ get useBlock() {
+ return state.repeatItemData
+ ? props.block
+ : getProcessedBlock({
+ block: props.block,
+ state: props.context.state,
+ context: props.context.context,
+ shouldEvaluateBindings: true,
+ });
+ },
+ get actions() {
+ return getBlockActions({
+ block: state.useBlock,
+ state: props.context.state,
+ context: props.context.context,
+ });
+ },
+ get attributes() {
+ const blockProperties = getBlockProperties(state.useBlock);
+ return {
+ ...blockProperties,
+ ...(TARGET === \\"reactNative\\"
+ ? {
+ style: getReactNativeBlockStyles({
+ block: state.useBlock,
+ context: props.context,
+ blockStyles: blockProperties.style,
+ }),
+ }
+ : {}),
+ };
+ },
+ get shouldWrap() {
+ return !state.component?.noWrap;
+ },
+ get renderComponentProps() {
+ return {
+ blockChildren: state.useChildren,
+ componentRef: state.component?.component,
+ componentOptions: {
+ ...getBlockComponentOptions(state.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.
+ */
+ ...(state.shouldWrap
+ ? {}
+ : {
+ attributes: { ...state.attributes, ...state.actions },
+ }),
+ customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
+ },
+ context: state.childrenContext,
+ };
+ },
+ get 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 state.useBlock.children ?? [];
+ },
+ get 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 =
+ !state.component?.component && !state.repeatItemData;
+ return shouldRenderChildrenOutsideRef ? state.useChildren : [];
+ },
+ get 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;
+ },
+ get inheritedTextStyles() {
+ if (TARGET !== \\"reactNative\\") {
+ return {};
+ }
+
+ const styles = getReactNativeBlockStyles({
+ block: state.useBlock,
+ context: props.context,
+ blockStyles: state.attributes.style,
+ });
+ return extractTextStyles(styles);
+ },
+ get childrenContext() {
+ return {
+ apiKey: props.context.apiKey,
+ state: props.context.state,
+ content: props.context.content,
+ context: props.context.context,
+ registeredComponents: props.context.registeredComponents,
+ inheritedStyles: state.inheritedTextStyles,
+ };
+ },
+ get renderComponentTag() {
+ if (TARGET === \\"reactNative\\") {
+ return RenderComponentWithContext;
+ } else if (TARGET === \\"vue3\\") {
+ // vue3 expects a string for the component tag
+ return \\"RenderComponent\\";
+ } else {
+ return RenderComponent;
+ }
+ },
+ });
+
+ return state.shouldWrap ? (
+ <>
+ {isEmptyHtmlElement(state.tag) ? (
+
+
+ ) : null}
+
+ ) : (
+ trackClick(props.content.id)}
+ >
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
+"import { Fragment, Show } from \\"@components\\";
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+export default function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > rootShow 1`] = `
+"import { Show } from \\"@components\\";
+export interface RenderStylesProps {
+ foo: string;
+}
+
+export default function RenderStyles(props) {
+ return props.foo === \\"bar\\" ? Bar
: Foo
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > self-referencing component 1`] = `
+"import { Show, MyComponent } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > self-referencing component with children 1`] = `
+"import { Show, MyComponent } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.children}
+ {props.name === \\"Batman\\" ? (
+
+ Wayne
+
+ ) : null}
+
{item}
)
+ ) : (
+ else-condition-A
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > showWithOtherValues 1`] = `
+"import { Show } from \\"@components\\";
+interface Props {
+ conditionA: boolean;
+}
+
+export default function ShowWithOtherValues(props) {
+ return (
+
+ {props.conditionA ? ContentA : null}
+ {props.conditionA ? ContentB : { undefined }}
+ {props.conditionA ? ContentC : null}
+ {props.conditionA ? ContentD : null}
+ {props.conditionA ? ContentE : hello}
+ {props.conditionA ? ContentF : 123}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > showWithRootText 1`] = `
+"import { Show } from \\"@components\\";
+interface Props {
+ conditionA: boolean;
+}
+
+export default function ShowRootText(props) {
+ return props.conditionA ? ContentA : else-condition-A
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"type Props = {
+ id: Signal;
+ foo: Signal<{
+ bar: {
+ baz: number;
+ };
+ }>;
+};
+
+export default function MyBasicComponent(props) {
+ return (
+
+ {props.id}
+ {props.foo.value.bar.baz}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > spreadAttrs 1`] = `
+"export default function MyBasicComponent(props) {
+ return {state.foo}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > styleClassAndCss 1`] = `
+"export default function MyComponent(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > stylePropClassAndCss 1`] = `
+"export default function StylePropClassAndCss(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > subComponent 1`] = `
+"import { Foo } from \\"@components\\";
+
+import Foo from \\"./foo-sub-component.js\\";
+
+export default function SubComponent(props) {
+ return
+
+
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > typeDependency 1`] = `
+"export type TypeDependencyProps = {
+ foo: Foo;
+ foo2: Foo2;
+};
+
+import type { Foo } from \\"./foo-type\\";
+import type { Foo as Foo2 } from \\"./type-export.js\\";
+
+export default function TypeDependency(props) {
+ return {props.foo}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > typeExternalStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+import { FooStore } from \\"./foo-store\\";
+
+export default function TypeExternalStore(props) {
+ const state = useStore({ _name: \\"test\\" });
+
+ return (
+
+ Hello
+ {state._name}!{\\" \\"}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > typeGetterStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+type GetterStore = {
+ getName: () => string;
+ name: string;
+ get test(): string;
+};
+
+export default function TypeGetterStore(props) {
+ const state = useStore({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}!{\\" \\"}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > use-style 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ background: blue;
+ color: white;
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+ \`);
+
+ return Button ;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > use-style-and-css 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+ \`);
+
+ return (
+
+ Button
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > use-style-outside-component 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ background: blue;
+ color: white;
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+\`);
+
+ return Button ;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > useTarget 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function UseTargetComponent(props) {
+ const state = useStore({
+ get name() {
+ const prefix = \\"USE_TARGET_BLOCK_1\\";
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ });
+
+ onMount(() => {
+ \\"USE_TARGET_BLOCK_2\\";
+ });
+
+ return {state.name}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > webComponent 1`] = `
+"import { register } from \\"swiper/element/bundle\\";
+
+export default function MyBasicWebComponent(props) {
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > basic 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ name: \\"Steve\\" });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > bindGroup 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ tortilla: \\"Plain\\", fillings: [] });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > bindProperty 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ value: \\"hello\\" });
+
+ return {state.activeTab}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > each 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { For } from \\"@components\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
+
+ return (
+
+ {state.numbers.map((num, index) => (
+ {num}
+ ))}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > eventHandlers 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ });
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > html 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ html: \\"bold \\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > ifElse 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { Show } from \\"@components\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ });
+
+ return state.show ? (
+ state.toggle(event)}> Hide
+ ) : (
+ state.toggle(event)}> Show
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > imports 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { Button, Slot } from \\"@components\\";
+
+import Button from \\"./Button.js\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ disabled: false });
+
+ return (
+
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > lifecycleHooks 1`] = `
+"export default function MyComponent(props) {
+ onMount(() => {
+ console.log(\\"onMount\\");
+ });
+
+ onUnMount(() => {
+ console.log(\\"onDestroy\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > reactive 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > reactiveWithFn 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Javascript Test > slots 1`] = `
+"import { Slot } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+
default
+
+ default
+
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > basic 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ name: \\"Steve\\" });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > bindGroup 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ tortilla: \\"Plain\\", fillings: [] });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > bindProperty 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ value: \\"hello\\" });
+
+ return {state.activeTab}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > each 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { For } from \\"@components\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
+
+ return (
+
+ {state.numbers.map((num, index) => (
+ {num}
+ ))}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > eventHandlers 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ });
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > html 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ html: \\"bold \\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > ifElse 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { Show } from \\"@components\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ });
+
+ return state.show ? (
+ state.toggle(event)}> Hide
+ ) : (
+ state.toggle(event)}> Show
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > imports 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { Button, Slot } from \\"@components\\";
+
+import Button from \\"./Button.js\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ disabled: false });
+
+ return (
+
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > lifecycleHooks 1`] = `
+"export default function MyComponent(props) {
+ onMount(() => {
+ console.log(\\"onMount\\");
+ });
+
+ onUnMount(() => {
+ console.log(\\"onDestroy\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > reactive 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > reactiveWithFn 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy (native loops and conditionals) > svelte > Typescript Test > slots 1`] = `
+"import { Slot } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+
default
+
+ default
+
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > AdvancedRef 1`] = `
+"import { useStore, useRef, Show } from \\"@builder.io/mitosis\\";
+import { Fragment } from \\"@components\\";
+
+export default function MyBasicRefComponent(props) {
+ const state = useStore({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+
+ return (
+
+
+
+
+ Choose a car:
+
+
+ GR Supra
+ GR 86
+
+
+
+ Hello
+ {state.lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+ Component!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Basic 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ name: \\"Steve\\",
+ underscore_fn_name() {
+ return \\"bar\\";
+ },
+ age: 1,
+ sports: [\\"\\"],
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Basic 2`] = `
+"import { useStore, For, Show } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicForShowComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+
+ return (
+
+
+ {(person, index) => (
+
+
+ )}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Basic Context 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ name: \\"PatrickJS\\",
+ onChange: function onChange() {
+ const change = myService.method(\\"change\\");
+ console.log(change);
+ },
+ });
+
+ onMount(() => {
+ const bye = myService.method(\\"hi\\");
+ console.log(bye);
+ });
+
+ return (
+
+ {myService.method(\\"hello\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Basic OnMount Update 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicOnMountUpdateComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+
+ onMount(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ });
+
+ return (
+
+ Hello
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Basic Outputs 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicOutputsComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ onMount(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Basic Outputs Meta 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+useMetadata({
+ outputs: [\\"onMessage\\", \\"onEvent\\"],
+ baz: \\"metadata inside component\\",
+});
+
+export default function MyBasicOutputsComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ onMount(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > BasicAttribute 1`] = `
+"export default function MyComponent(props) {
+ return
+
+ {props.children}
+ {props.type}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > BasicChildComponent 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { MyBasicComponent, MyBasicOnMountUpdateComponent } from \\"@components\\";
+
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+export default function MyBasicChildComponent(props) {
+ const state = useStore({ name: \\"Steve\\", dev: \\"PatrickJS\\" });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > BasicFor 1`] = `
+"import { useStore, For } from \\"@builder.io/mitosis\\";
+import { Fragment } from \\"@components\\";
+
+export default function MyBasicForComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+
+ onMount(() => {
+ console.log(\\"onMount code\\");
+ });
+
+ return (
+
+
+ {(person, index) => (
+
+
+ )}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > BasicRef 1`] = `
+"import { useStore, useRef, Show } from \\"@builder.io/mitosis\\";
+import { Fragment } from \\"@components\\";
+
+export default function MyBasicRefComponent(props) {
+ const state = useStore({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+
+ return (
+
+
+
+
+ Choose a car:
+
+
+ GR Supra
+ GR 86
+
+
+
+ Hello
+ {state.lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+ Component!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > BasicRefAssignment 1`] = `"unknown: Maximum call stack size exceeded"`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > BasicRefPrevious 1`] = `"unknown: Maximum call stack size exceeded"`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Button 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export default function Button(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Columns 1`] = `
+"import { useStore, For } from \\"@builder.io/mitosis\\";
+
+export default function Column(props) {
+ const state = useStore({
+ getColumns() {
+ return props.columns || [];
+ },
+ getGutterSize() {
+ return typeof props.space === \\"number\\" ? props.space || 0 : 20;
+ },
+ getWidth(index) {
+ const columns = state.getColumns();
+ return (columns[index] && columns[index].width) || 100 / columns.length;
+ },
+ getColumnCssWidth(index) {
+ const columns = state.getColumns();
+ const gutterSize = state.getGutterSize();
+ const subtractWidth =
+ (gutterSize * (columns.length - 1)) / columns.length;
+ return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`;
+ },
+ });
+
+ return (
+
+
+ {(column, index) => (
+
+ {column.content}
+ {index}
+
+ )}
+
+
+ state.show()}
+ class={state.cls}
+ >
+
+ {props.content}
+
+
+
+
{props.children}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > CustomCode 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+
+export default function CustomCode(props) {
+ const state = useStore({
+ scriptsInserted: [],
+ scriptsRun: [],
+ findAndRunScripts() {
+ // TODO: Move this function to standalone one in '@builder.io/utils'
+ if (elem.current && typeof window !== \\"undefined\\") {
+ /** @type {HTMLScriptElement[]} */
+ const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+ for (let i = 0; i < scripts.length; i++) {
+ const script = scripts[i];
+
+ if (script.src) {
+ if (state.scriptsInserted.includes(script.src)) {
+ continue;
+ }
+
+ state.scriptsInserted.push(script.src);
+ const newScript = document.createElement(\\"script\\");
+ newScript.async = true;
+ newScript.src = script.src;
+ document.head.appendChild(newScript);
+ } else if (
+ !script.type ||
+ [
+ \\"text/javascript\\",
+ \\"application/javascript\\",
+ \\"application/ecmascript\\",
+ ].includes(script.type)
+ ) {
+ if (state.scriptsRun.includes(script.innerText)) {
+ continue;
+ }
+
+ try {
+ state.scriptsRun.push(script.innerText);
+ new Function(script.innerText)();
+ } catch (error) {
+ console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ const elem = useRef(null);
+ const elem = useRef(null);
+
+ onMount(() => {
+ state.findAndRunScripts();
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Embed 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+
+export default function CustomCode(props) {
+ const state = useStore({
+ scriptsInserted: [],
+ scriptsRun: [],
+ findAndRunScripts() {
+ // TODO: Move this function to standalone one in '@builder.io/utils'
+ if (elem.current && typeof window !== \\"undefined\\") {
+ /** @type {HTMLScriptElement[]} */
+ const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+ for (let i = 0; i < scripts.length; i++) {
+ const script = scripts[i];
+
+ if (script.src) {
+ if (state.scriptsInserted.includes(script.src)) {
+ continue;
+ }
+
+ state.scriptsInserted.push(script.src);
+ const newScript = document.createElement(\\"script\\");
+ newScript.async = true;
+ newScript.src = script.src;
+ document.head.appendChild(newScript);
+ } else if (
+ !script.type ||
+ [
+ \\"text/javascript\\",
+ \\"application/javascript\\",
+ \\"application/ecmascript\\",
+ ].includes(script.type)
+ ) {
+ if (state.scriptsRun.includes(script.innerText)) {
+ continue;
+ }
+
+ try {
+ state.scriptsRun.push(script.innerText);
+ new Function(script.innerText)();
+ } catch (error) {
+ console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ const elem = useRef(null);
+ const elem = useRef(null);
+
+ onMount(() => {
+ state.findAndRunScripts();
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Form 1`] = `
+"import { useStore, useRef, Show, For } from \\"@builder.io/mitosis\\";
+import { BuilderBlockComponent, BuilderBlocks } from \\"@components\\";
+
+import { Builder, builder } from \\"@builder.io/sdk\\";
+import {
+ BuilderBlock as BuilderBlockComponent,
+ BuilderBlocks,
+ get,
+ set,
+} from \\"@fake\\";
+
+export default function FormComponent(props) {
+ const state = useStore({
+ formState: \\"unsubmitted\\",
+ responseData: null,
+ formErrorMessage: \\"\\",
+ get submissionState() {
+ return (Builder.isEditing && props.previewState) || state.formState;
+ },
+ onSubmit(event) {
+ const sendWithJs =
+ props.sendWithJs || props.sendSubmissionsTo === \\"email\\";
+
+ if (props.sendSubmissionsTo === \\"zapier\\") {
+ event.preventDefault();
+ } else if (sendWithJs) {
+ if (!(props.action || props.sendSubmissionsTo === \\"email\\")) {
+ event.preventDefault();
+ return;
+ }
+
+ event.preventDefault();
+ const el = event.currentTarget;
+ const headers = props.customHeaders || {};
+ let body;
+ const formData = new FormData(el); // TODO: maybe support null
+
+ const formPairs = Array.from(
+ event.currentTarget.querySelectorAll(\\"input,select,textarea\\")
+ )
+ .filter((el) => !!el.name)
+ .map((el) => {
+ let value;
+ const key = el.name;
+
+ if (el instanceof HTMLInputElement) {
+ if (el.type === \\"radio\\") {
+ if (el.checked) {
+ value = el.name;
+ return {
+ key,
+ value,
+ };
+ }
+ } else if (el.type === \\"checkbox\\") {
+ value = el.checked;
+ } else if (el.type === \\"number\\" || el.type === \\"range\\") {
+ const num = el.valueAsNumber;
+
+ if (!isNaN(num)) {
+ value = num;
+ }
+ } else if (el.type === \\"file\\") {
+ // TODO: one vs multiple files
+ value = el.files;
+ } else {
+ value = el.value;
+ }
+ } else {
+ value = el.value;
+ }
+
+ return {
+ key,
+ value,
+ };
+ });
+ let contentType = props.contentType;
+
+ if (props.sendSubmissionsTo === \\"email\\") {
+ contentType = \\"multipart/form-data\\";
+ }
+
+ Array.from(formPairs).forEach(({ value }) => {
+ if (
+ value instanceof File ||
+ (Array.isArray(value) && value[0] instanceof File) ||
+ value instanceof FileList
+ ) {
+ contentType = \\"multipart/form-data\\";
+ }
+ }); // TODO: send as urlEncoded or multipart by default
+ // because of ease of use and reliability in browser API
+ // for encoding the form?
+
+ if (contentType !== \\"application/json\\") {
+ body = formData;
+ } else {
+ // Json
+ const json = {};
+ Array.from(formPairs).forEach(({ value, key }) => {
+ set(json, key, value);
+ });
+ body = JSON.stringify(json);
+ }
+
+ if (contentType && contentType !== \\"multipart/form-data\\") {
+ if (
+ /* Zapier doesn't allow content-type header to be sent from browsers */
+ !(sendWithJs && props.action?.includes(\\"zapier.com\\"))
+ ) {
+ headers[\\"content-type\\"] = contentType;
+ }
+ }
+
+ const presubmitEvent = new CustomEvent(\\"presubmit\\", {
+ detail: {
+ body,
+ },
+ });
+
+ if (formRef.current) {
+ formRef.current.dispatchEvent(presubmitEvent);
+
+ if (presubmitEvent.defaultPrevented) {
+ return;
+ }
+ }
+
+ state.formState = \\"sending\\";
+ const formUrl = \`\${
+ builder.env === \\"dev\\" ? \\"http://localhost:5000\\" : \\"https://builder.io\\"
+ }/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(
+ props.sendSubmissionsToEmail || \\"\\"
+ )}&name=\${encodeURIComponent(props.name || \\"\\")}\`;
+ fetch(
+ props.sendSubmissionsTo === \\"email\\" ? formUrl : props.action,
+ /* TODO: throw error if no action URL */
+ {
+ body,
+ headers,
+ method: props.method || \\"post\\",
+ }
+ ).then(
+ async (res) => {
+ let body;
+ const contentType = res.headers.get(\\"content-type\\");
+
+ if (contentType && contentType.indexOf(\\"application/json\\") !== -1) {
+ body = await res.json();
+ } else {
+ body = await res.text();
+ }
+
+ if (!res.ok && props.errorMessagePath) {
+ /* TODO: allow supplying an error formatter function */
+ let message = get(body, props.errorMessagePath);
+
+ if (message) {
+ if (typeof message !== \\"string\\") {
+ /* TODO: ideally convert json to yaml so it woul dbe like
+ error: - email has been taken */
+ message = JSON.stringify(message);
+ }
+
+ state.formErrorMessage = message;
+ }
+ }
+
+ state.responseData = body;
+ state.formState = res.ok ? \\"success\\" : \\"error\\";
+
+ if (res.ok) {
+ const submitSuccessEvent = new CustomEvent(\\"submit:success\\", {
+ detail: {
+ res,
+ body,
+ },
+ });
+
+ if (formRef.current) {
+ formRef.current.dispatchEvent(submitSuccessEvent);
+
+ if (submitSuccessEvent.defaultPrevented) {
+ return;
+ }
+ /* TODO: option to turn this on/off? */
+
+ if (props.resetFormOnSubmit !== false) {
+ formRef.current.reset();
+ }
+ }
+ /* TODO: client side route event first that can be preventDefaulted */
+
+ if (props.successUrl) {
+ if (formRef.current) {
+ const event = new CustomEvent(\\"route\\", {
+ detail: {
+ url: props.successUrl,
+ },
+ });
+ formRef.current.dispatchEvent(event);
+
+ if (!event.defaultPrevented) {
+ location.href = props.successUrl;
+ }
+ } else {
+ location.href = props.successUrl;
+ }
+ }
+ }
+ },
+ (err) => {
+ const submitErrorEvent = new CustomEvent(\\"submit:error\\", {
+ detail: {
+ error: err,
+ },
+ });
+
+ if (formRef.current) {
+ formRef.current.dispatchEvent(submitErrorEvent);
+
+ if (submitErrorEvent.defaultPrevented) {
+ return;
+ }
+ }
+
+ state.responseData = err;
+ state.formState = \\"error\\";
+ }
+ );
+ }
+ },
+ });
+
+ const formRef = useRef(null);
+ const formRef = useRef(null);
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Image 1`] = `
+"import { useStore, useRef, Show } from \\"@builder.io/mitosis\\";
+
+export default function Image(props) {
+ const state = useStore({
+ scrollListener: null,
+ imageLoaded: false,
+ setLoaded() {
+ state.imageLoaded = true;
+ },
+ useLazyLoading() {
+ // TODO: Add more checks here, like testing for real web browsers
+ return !!props.lazy && state.isBrowser();
+ },
+ isBrowser: function isBrowser() {
+ return (
+ typeof window !== \\"undefined\\" &&
+ window.navigator.product != \\"ReactNative\\"
+ );
+ },
+ load: false,
+ });
+
+ const pictureRef = useRef();
+ const pictureRef = useRef();
+
+ onMount(() => {
+ if (state.useLazyLoading()) {
+ // throttled scroll capture listener
+ const listener = () => {
+ if (pictureRef.current) {
+ const rect = pictureRef.current.getBoundingClientRect();
+ const buffer = window.innerHeight / 2;
+
+ if (rect.top < window.innerHeight + buffer) {
+ state.load = true;
+ state.scrollListener = null;
+ window.removeEventListener(\\"scroll\\", listener);
+ }
+ }
+ };
+
+ state.scrollListener = listener;
+ window.addEventListener(\\"scroll\\", listener, {
+ capture: true,
+ passive: true,
+ });
+ listener();
+ }
+ });
+
+ onUnMount(() => {
+ if (state.scrollListener) {
+ window.removeEventListener(\\"scroll\\", state.scrollListener);
+ }
+ });
+
+ return (
+
+
+
+
+
+ {props.children}
+
+
+ {(item, itemIndex) => (
+
+
+ )}
+
+
state.handleChange(value)}
+ />
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > RawText 1`] = `
+"export default function RawText(props) {
+ return (
+
+
+ {(item, index) => (
+
+ )}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Select 1`] = `
+"import { For } from \\"@builder.io/mitosis\\";
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+export default function SelectComponent(props) {
+ return (
+
+
+ {(option, index) => (
+
+ {option.name || option.value}
+
+ )}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > SlotDefault 1`] = `
+"import { Slot } from \\"@components\\";
+
+export default function SlotCode(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > SlotHtml 1`] = `
+"import { ContentSlotCode, Slot } from \\"@components\\";
+
+import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+
+export default function SlotCode(props) {
+ return (
+
+
+ Hello
} />
+
+
+ Hello
} />
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > SlotNamed 1`] = `
+"import { Slot } from \\"@components\\";
+
+export default function SlotCode(props) {
+ return (
+
+ Default left
+ Default Child
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Stamped.io 1`] = `
+"import { useStore, Show, For } from \\"@builder.io/mitosis\\";
+
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+export default function SmileReviews(props) {
+ const state = useStore({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ snakeCaseValue() {
+ return snakeCase(\\"testThis\\");
+ },
+ });
+
+ onMount(() => {
+ fetch(
+ \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
+ props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
+ }&productId=\${props.productId || \\"2410511106127\\"}\`
+ )
+ .then((res) => res.json())
+ .then((data) => {
+ state.reviews = data.data;
+ });
+ });
+
+ return (
+
+
(state.showReviewPrompt = true)}>
+ Write a review
+
+
+ {
+ event.preventDefault();
+ state.showReviewPrompt = false;
+ }}
+ >
+ Submit
+
+
+
+ {(review, index) => (
+
+
+
+
+ N:
+ {index}
+
+
{review.author}
+
{review.reviewMessage}
+
+
+
+ {props.text}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Text 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+export default function Text(props) {
+ const state = useStore({ name: \\"Decadef20\\" });
+
+ return (
+ my name'
+ }
+ />
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Textarea 1`] = `
+"export default function Textarea(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > Video 1`] = `
+"export default function Video(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > basicForNoTagReference 1`] = `
+"import { useStore, For } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicForNoTagRefComponent(props) {
+ const state = useStore({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}
+
+ {(action, index) => (
+
+ {action.text}
+
+ )}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > basicForwardRef 1`] = `
+"',' expected. (16:12)
+ 14 | const state = useStore({ name: 'PatrickJS',});
+ 15 |
+> 16 | const props.inputRef = useRef();
+ | ^
+ 17 |
+ 18 |
+ 19 |"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
+"',' expected. (16:12)
+ 14 | const state = useStore({ name: 'PatrickJS',});
+ 15 |
+> 16 | const props.inputRef = useRef();
+ | ^
+ 17 |
+ 18 |
+ 19 |"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicOnUpdateReturnComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ return (
+
+ Hello!
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > class + ClassName + css 1`] = `
+"import { MyComp } from \\"@components\\";
+
+import MyComp from \\"./my-component.js\\";
+
+export default function MyBasicComponent(props) {
+ return (
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > class + css 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > className + css 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > className 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function ClassNameCode(props) {
+ const state = useStore({ bindings: \\"a binding\\" });
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > classState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ classState: \\"testClassName\\",
+ styleState: {
+ color: \\"red\\",
+ },
+ });
+
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > componentWithContext 1`] = `
+"import { Fragment } from \\"@components\\";
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+ return (
+
+ {foo.value}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"import { Fragment } from \\"@components\\";
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+ return (
+
+ {foo.value}
+ other
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > contentState 1`] = `
+"import BuilderContext from \\"@dummy/context.js\\";
+
+export default function RenderContent(props) {
+ return
setting context
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > defaultProps 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export default function Button(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export default function Button(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > defaultValsWithTypes 1`] = `
+"const DEFAULT_VALUES = {
+ name: \\"Sami\\",
+};
+
+export default function ComponentWithTypes(props) {
+ return (
+
+ {\\" \\"}
+ Hello
+ {props.name || DEFAULT_VALUES.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > expressionState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ });
+
+ return
{state.refToUse}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > getterState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function Button(props) {
+ const state = useStore({
+ get foo2() {
+ return props.foo + \\"foo\\";
+ },
+ get bar() {
+ return \\"bar\\";
+ },
+ baz(i) {
+ return i + state.foo2.length;
+ },
+ });
+
+ return (
+
+
{state.foo2}
+
{state.bar}
+
{state.baz(1)}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > import types 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { RenderBlock } from \\"@components\\";
+
+import RenderBlock from \\"./builder-render-block.raw\\";
+
+export default function RenderContent(props) {
+ const state = useStore({
+ getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ },
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > multipleOnUpdate 1`] = `
+"export default function MultipleOnUpdate(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MultipleOnUpdateWithDeps(props) {
+ const state = useStore({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > multipleSpreads 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ attrs: {
+ hello: \\"world\\",
+ },
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > nestedShow 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export default function NestedShow(props) {
+ return (
+
+
+ if condition A and condition B
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > nestedStyles 1`] = `
+"export default function NestedStyles(props) {
+ return (
+
+ Hello world
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > onEvent 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+
+export default function Embed(props) {
+ const state = useStore({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ });
+
+ const elem = useRef(null);
+ const elem = useRef(null);
+
+ onMount(() => {
+ elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > onInit & onMount 1`] = `
+"export default function OnInit(props) {
+ onMount(() => {
+ console.log(\\"onMount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > onInit 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+export default function OnInit(props) {
+ const state = useStore({ name: \\"\\" });
+
+ return (
+
+ Default name defined by parent
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > onInitPlain 1`] = `
+"export default function OnInitPlain(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > onMount 1`] = `
+"export default function Comp(props) {
+ onMount(() => {
+ console.log(\\"Runs on mount\\");
+ });
+
+ onUnMount(() => {
+ console.log(\\"Runs on unMount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > onMountMultiple 1`] = `
+"export default function Comp(props) {
+ onMount(() => {
+ console.log(\\"Runs on mount\\");
+ }),
+ onMount(() => {
+ console.log(\\"Another one runs on Mount\\");
+ }),
+ onMount(() => {
+ console.log(\\"SSR runs on Mount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > onUpdate 1`] = `
+"export default function OnUpdate(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > onUpdateWithDeps 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function OnUpdateWithDeps(props) {
+ const state = useStore({ a: \\"a\\", b: \\"b\\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
+"const b = 3;
+const foo = () => {};
+export const a = 3;
+export const bar = () => {};
+export function run(value) {}
+
+export default function MyBasicComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > preserveTyping 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > propsDestructure 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({ name: \\"Decadef20\\" });
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > propsInterface 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > propsType 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > referencingFunInsideHook 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function OnUpdate(props) {
+ const state = useStore({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > renderBlock 1`] = `
+"import { useStore, Show, For } from \\"@builder.io/mitosis\\";
+import { RenderRepeatedBlock, RenderBlock, BlockStyles } from \\"@components\\";
+
+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.js\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import RenderComponent from \\"./render-component.js\\";
+import RenderRepeatedBlock from \\"./render-repeated-block.js\\";
+
+export default function RenderBlock(props) {
+ const state = useStore({
+ get 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;
+ }
+ },
+ get tag() {
+ return getBlockTag(state.useBlock);
+ },
+ get useBlock() {
+ return state.repeatItemData
+ ? props.block
+ : getProcessedBlock({
+ block: props.block,
+ state: props.context.state,
+ context: props.context.context,
+ shouldEvaluateBindings: true,
+ });
+ },
+ get actions() {
+ return getBlockActions({
+ block: state.useBlock,
+ state: props.context.state,
+ context: props.context.context,
+ });
+ },
+ get attributes() {
+ const blockProperties = getBlockProperties(state.useBlock);
+ return {
+ ...blockProperties,
+ ...(TARGET === \\"reactNative\\"
+ ? {
+ style: getReactNativeBlockStyles({
+ block: state.useBlock,
+ context: props.context,
+ blockStyles: blockProperties.style,
+ }),
+ }
+ : {}),
+ };
+ },
+ get shouldWrap() {
+ return !state.component?.noWrap;
+ },
+ get renderComponentProps() {
+ return {
+ blockChildren: state.useChildren,
+ componentRef: state.component?.component,
+ componentOptions: {
+ ...getBlockComponentOptions(state.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.
+ */
+ ...(state.shouldWrap
+ ? {}
+ : {
+ attributes: { ...state.attributes, ...state.actions },
+ }),
+ customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
+ },
+ context: state.childrenContext,
+ };
+ },
+ get 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 state.useBlock.children ?? [];
+ },
+ get 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 =
+ !state.component?.component && !state.repeatItemData;
+ return shouldRenderChildrenOutsideRef ? state.useChildren : [];
+ },
+ get 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;
+ },
+ get inheritedTextStyles() {
+ if (TARGET !== \\"reactNative\\") {
+ return {};
+ }
+
+ const styles = getReactNativeBlockStyles({
+ block: state.useBlock,
+ context: props.context,
+ blockStyles: state.attributes.style,
+ });
+ return extractTextStyles(styles);
+ },
+ get childrenContext() {
+ return {
+ apiKey: props.context.apiKey,
+ state: props.context.state,
+ content: props.context.content,
+ context: props.context.context,
+ registeredComponents: props.context.registeredComponents,
+ inheritedStyles: state.inheritedTextStyles,
+ };
+ },
+ get renderComponentTag() {
+ if (TARGET === \\"reactNative\\") {
+ return RenderComponentWithContext;
+ } else if (TARGET === \\"vue3\\") {
+ // vue3 expects a string for the component tag
+ return \\"RenderComponent\\";
+ } else {
+ return RenderComponent;
+ }
+ },
+ });
+
+ return (
+
+
+
+
+
+ {(data, index) => (
+
+
+
+
+
+ {(child, index) => (
+
+
+ {(child, index) => (
+
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > renderContentExample 1`] = `
+"import { RenderBlocks } from \\"@components\\";
+
+import BuilderContext from \\"@dummy/context.js\\";
+import {
+ dispatchNewContentToVisualEditor,
+ sendComponentsToVisualEditor,
+ trackClick,
+} from \\"@dummy/injection-js\\";
+import RenderBlocks from \\"@dummy/RenderBlocks.js\\";
+
+export default function RenderContent(props) {
+ onMount(() => {
+ sendComponentsToVisualEditor(props.customComponents);
+ });
+
+ return (
+
trackClick(props.content.id)}
+ >
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > rootFragmentMultiNode 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+import { Fragment } from \\"@components\\";
+
+export default function Button(props) {
+ return (
+
+
+
+ {props.text}
+
+
+
+
+ {props.text}
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > rootShow 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export default function RenderStyles(props) {
+ return (
+
+ Bar
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > self-referencing component 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+import { MyComponent } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+ {props.name}
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > self-referencing component with children 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+import { MyComponent } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.children}
+
+
+ Wayne
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > showExpressions 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export default function ShowWithOtherValues(props) {
+ return (
+
+ Content0
+ ContentA
+ ContentB
+ {undefined}
+ ContentC
+ ContentD
+ ContentE
+ hello
+ ContentF
+ 123
+ 4mb
+
+ 20mb
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > showWithFor 1`] = `
+"import { Show, For } from \\"@builder.io/mitosis\\";
+
+export default function NestedShow(props) {
+ return (
+
+ {(item, idx) => {item}
}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > showWithOtherValues 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export default function ShowWithOtherValues(props) {
+ return (
+
+ ContentA
+ ContentB
+ ContentC
+ ContentD
+ ContentE
+ ContentF
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > showWithRootText 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export default function ShowRootText(props) {
+ return
ContentA ;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > signalsOnUpdate 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ {props.id}
+ {props.foo.value.bar.baz}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > spreadAttrs 1`] = `
+"export default function MyBasicComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > spreadNestedProps 1`] = `
+"export default function MyBasicComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > spreadProps 1`] = `
+"export default function MyBasicComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > string-literal-store 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function StringLiteralStore(props) {
+ const state = useStore({ foo: 123 });
+
+ return
{state.foo}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > styleClassAndCss 1`] = `
+"export default function MyComponent(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > stylePropClassAndCss 1`] = `
+"export default function StylePropClassAndCss(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > subComponent 1`] = `
+"import { Foo } from \\"@components\\";
+
+import Foo from \\"./foo-sub-component.js\\";
+
+export default function SubComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > svgComponent 1`] = `
+"export default function SvgComponent(props) {
+ return (
+
+
+
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > typeDependency 1`] = `
+"export default function TypeDependency(props) {
+ return
{props.foo}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > typeExternalStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function TypeExternalStore(props) {
+ const state = useStore({ _name: \\"test\\" });
+
+ return (
+
+ Hello
+ {state._name}!{\\" \\"}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > typeGetterStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function TypeGetterStore(props) {
+ const state = useStore({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}!{\\" \\"}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > use-style 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ background: blue;
+ color: white;
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+ \`);
+
+ return
Button ;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > use-style-and-css 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+ \`);
+
+ return (
+
+ Button
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > use-style-outside-component 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ background: blue;
+ color: white;
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+\`);
+
+ return
Button ;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > useTarget 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function UseTargetComponent(props) {
+ const state = useStore({
+ get name() {
+ const prefix = \\"USE_TARGET_BLOCK_1\\";
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ });
+
+ onMount(() => {
+ \\"USE_TARGET_BLOCK_2\\";
+ });
+
+ return
{state.name}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Javascript Test > webComponent 1`] = `
+"import { register } from \\"swiper/element/bundle\\";
+
+export default function MyBasicWebComponent(props) {
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Remove Internal mitosis package 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ return (
+
+ Hello
+ {state.name}! I can run in React, Qwik, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > AdvancedRef 1`] = `
+"import { useStore, useRef, Show } from \\"@builder.io/mitosis\\";
+import { Fragment } from \\"@components\\";
+export interface Props {
+ showInput: boolean;
+}
+
+export default function MyBasicRefComponent(props) {
+ const state = useStore({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ const inputRef = useRef
(null);
+ const inputNoArgRef = useRef(null);
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+
+ return (
+
+
+
+
+ Choose a car:
+
+
+ GR Supra
+ GR 86
+
+
+
+ Hello
+ {state.lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+ Component!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Basic 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export interface MyBasicComponentProps {
+ id: string;
+}
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ name: \\"Steve\\",
+ underscore_fn_name() {
+ return \\"bar\\";
+ },
+ age: 1,
+ sports: [\\"\\"],
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Basic 2`] = `
+"import { useStore, For, Show } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicForShowComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+
+ return (
+
+
+ {(person, index) => (
+
+
+ )}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Basic Context 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ name: \\"PatrickJS\\",
+ onChange: function onChange() {
+ const change = myService.method(\\"change\\");
+ console.log(change);
+ },
+ });
+
+ onMount(() => {
+ const bye = myService.method(\\"hi\\");
+ console.log(bye);
+ });
+
+ return (
+
+ {myService.method(\\"hello\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Basic OnMount Update 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export interface Props {
+ hi: string;
+ bye: string;
+}
+
+export default function MyBasicOnMountUpdateComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+
+ onMount(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ });
+
+ return (
+
+ Hello
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Basic Outputs 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicOutputsComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ onMount(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Basic Outputs Meta 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+useMetadata({
+ outputs: [\\"onMessage\\", \\"onEvent\\"],
+ baz: \\"metadata inside component\\",
+});
+
+export default function MyBasicOutputsComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ onMount(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > BasicAttribute 1`] = `
+"export default function MyComponent(props) {
+ return
+
+ {props.children}
+ {props.type}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > BasicChildComponent 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { MyBasicComponent, MyBasicOnMountUpdateComponent } from \\"@components\\";
+
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+export default function MyBasicChildComponent(props) {
+ const state = useStore({ name: \\"Steve\\", dev: \\"PatrickJS\\" });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > BasicFor 1`] = `
+"import { useStore, For } from \\"@builder.io/mitosis\\";
+import { Fragment } from \\"@components\\";
+
+export default function MyBasicForComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+
+ onMount(() => {
+ console.log(\\"onMount code\\");
+ });
+
+ return (
+
+
+ {(person, index) => (
+
+
+ )}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > BasicRef 1`] = `
+"import { useStore, useRef, Show } from \\"@builder.io/mitosis\\";
+import { Fragment } from \\"@components\\";
+export interface Props {
+ showInput: boolean;
+}
+
+export default function MyBasicRefComponent(props) {
+ const state = useStore({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+
+ return (
+
+
+
+
+ Choose a car:
+
+
+ GR Supra
+ GR 86
+
+
+
+ Hello
+ {state.lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+ Component!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > BasicRefAssignment 1`] = `"unknown: Maximum call stack size exceeded"`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > BasicRefPrevious 1`] = `"unknown: Maximum call stack size exceeded"`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Button 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+export default function Button(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Columns 1`] = `
+"import { useStore, For } from \\"@builder.io/mitosis\\";
+
+type Column = {
+ content: any; // TODO: Implement this when support for dynamic CSS lands
+
+ width?: number;
+};
+export interface ColumnProps {
+ columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
+
+ space?: number; // TODO: Implement this when support for dynamic CSS lands
+
+ stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
+
+ reverseColumnsWhenStacked?: boolean;
+}
+
+export default function Column(props) {
+ const state = useStore({
+ getColumns() {
+ return props.columns || [];
+ },
+ getGutterSize() {
+ return typeof props.space === \\"number\\" ? props.space || 0 : 20;
+ },
+ getWidth(index: number) {
+ const columns = state.getColumns();
+ return (columns[index] && columns[index].width) || 100 / columns.length;
+ },
+ getColumnCssWidth(index: number) {
+ const columns = state.getColumns();
+ const gutterSize = state.getGutterSize();
+ const subtractWidth =
+ (gutterSize * (columns.length - 1)) / columns.length;
+ return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`;
+ },
+ });
+
+ return (
+
+
+ {(column, index) => (
+
+ {column.content}
+ {index}
+
+ )}
+
+
+ state.show()}
+ class={state.cls}
+ >
+
+ {props.content}
+
+
+
+
{props.children}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > CustomCode 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+
+export interface CustomCodeProps {
+ code: string;
+ replaceNodes?: boolean;
+}
+
+export default function CustomCode(props) {
+ const state = useStore({
+ scriptsInserted: [],
+ scriptsRun: [],
+ findAndRunScripts() {
+ // TODO: Move this function to standalone one in '@builder.io/utils'
+ if (elem.current && typeof window !== \\"undefined\\") {
+ /** @type {HTMLScriptElement[]} */
+ const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+ for (let i = 0; i < scripts.length; i++) {
+ const script = scripts[i];
+
+ if (script.src) {
+ if (state.scriptsInserted.includes(script.src)) {
+ continue;
+ }
+
+ state.scriptsInserted.push(script.src);
+ const newScript = document.createElement(\\"script\\");
+ newScript.async = true;
+ newScript.src = script.src;
+ document.head.appendChild(newScript);
+ } else if (
+ !script.type ||
+ [
+ \\"text/javascript\\",
+ \\"application/javascript\\",
+ \\"application/ecmascript\\",
+ ].includes(script.type)
+ ) {
+ if (state.scriptsRun.includes(script.innerText)) {
+ continue;
+ }
+
+ try {
+ state.scriptsRun.push(script.innerText);
+ new Function(script.innerText)();
+ } catch (error) {
+ console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ const elem = useRef(null);
+ const elem = useRef(null);
+
+ onMount(() => {
+ state.findAndRunScripts();
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Embed 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+
+export interface CustomCodeProps {
+ code: string;
+ replaceNodes?: boolean;
+}
+
+export default function CustomCode(props) {
+ const state = useStore({
+ scriptsInserted: [],
+ scriptsRun: [],
+ findAndRunScripts() {
+ // TODO: Move this function to standalone one in '@builder.io/utils'
+ if (elem.current && typeof window !== \\"undefined\\") {
+ /** @type {HTMLScriptElement[]} */
+ const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+ for (let i = 0; i < scripts.length; i++) {
+ const script = scripts[i];
+
+ if (script.src) {
+ if (state.scriptsInserted.includes(script.src)) {
+ continue;
+ }
+
+ state.scriptsInserted.push(script.src);
+ const newScript = document.createElement(\\"script\\");
+ newScript.async = true;
+ newScript.src = script.src;
+ document.head.appendChild(newScript);
+ } else if (
+ !script.type ||
+ [
+ \\"text/javascript\\",
+ \\"application/javascript\\",
+ \\"application/ecmascript\\",
+ ].includes(script.type)
+ ) {
+ if (state.scriptsRun.includes(script.innerText)) {
+ continue;
+ }
+
+ try {
+ state.scriptsRun.push(script.innerText);
+ new Function(script.innerText)();
+ } catch (error) {
+ console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ const elem = useRef(null);
+ const elem = useRef(null);
+
+ onMount(() => {
+ state.findAndRunScripts();
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Form 1`] = `
+"import { useStore, useRef, Show, For } from \\"@builder.io/mitosis\\";
+import { BuilderBlockComponent, BuilderBlocks } from \\"@components\\";
+export interface FormProps {
+ attributes?: any;
+ name?: string;
+ action?: string;
+ validate?: boolean;
+ method?: string;
+ builderBlock?: BuilderElement;
+ sendSubmissionsTo?: string;
+ sendSubmissionsToEmail?: string;
+ sendWithJs?: boolean;
+ contentType?: string;
+ customHeaders?: {
+ [key: string]: string;
+ };
+ successUrl?: string;
+ previewState?: FormState;
+ successMessage?: BuilderElement[];
+ errorMessage?: BuilderElement[];
+ sendingMessage?: BuilderElement[];
+ resetFormOnSubmit?: boolean;
+ errorMessagePath?: string;
+}
+export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"error\\";
+
+import { Builder, BuilderElement, builder } from \\"@builder.io/sdk\\";
+import {
+ BuilderBlock as BuilderBlockComponent,
+ BuilderBlocks,
+ get,
+ set,
+} from \\"@fake\\";
+
+export default function FormComponent(props) {
+ const state = useStore({
+ formState: \\"unsubmitted\\",
+ responseData: null,
+ formErrorMessage: \\"\\",
+ get submissionState() {
+ return (Builder.isEditing && props.previewState) || state.formState;
+ },
+ onSubmit(
+ event: Event & {
+ currentTarget: HTMLFormElement;
+ }
+ ) {
+ const sendWithJs =
+ props.sendWithJs || props.sendSubmissionsTo === \\"email\\";
+
+ if (props.sendSubmissionsTo === \\"zapier\\") {
+ event.preventDefault();
+ } else if (sendWithJs) {
+ if (!(props.action || props.sendSubmissionsTo === \\"email\\")) {
+ event.preventDefault();
+ return;
+ }
+
+ event.preventDefault();
+ const el = event.currentTarget;
+ const headers = props.customHeaders || {};
+ let body: any;
+ const formData = new FormData(el); // TODO: maybe support null
+
+ const formPairs: {
+ key: string;
+ value: File | boolean | number | string | FileList;
+ }[] = Array.from(
+ event.currentTarget.querySelectorAll(\\"input,select,textarea\\")
+ )
+ .filter((el) => !!(el as HTMLInputElement).name)
+ .map((el) => {
+ let value: any;
+ const key = (el as HTMLImageElement).name;
+
+ if (el instanceof HTMLInputElement) {
+ if (el.type === \\"radio\\") {
+ if (el.checked) {
+ value = el.name;
+ return {
+ key,
+ value,
+ };
+ }
+ } else if (el.type === \\"checkbox\\") {
+ value = el.checked;
+ } else if (el.type === \\"number\\" || el.type === \\"range\\") {
+ const num = el.valueAsNumber;
+
+ if (!isNaN(num)) {
+ value = num;
+ }
+ } else if (el.type === \\"file\\") {
+ // TODO: one vs multiple files
+ value = el.files;
+ } else {
+ value = el.value;
+ }
+ } else {
+ value = (el as HTMLInputElement).value;
+ }
+
+ return {
+ key,
+ value,
+ };
+ });
+ let contentType = props.contentType;
+
+ if (props.sendSubmissionsTo === \\"email\\") {
+ contentType = \\"multipart/form-data\\";
+ }
+
+ Array.from(formPairs).forEach(({ value }) => {
+ if (
+ value instanceof File ||
+ (Array.isArray(value) && value[0] instanceof File) ||
+ value instanceof FileList
+ ) {
+ contentType = \\"multipart/form-data\\";
+ }
+ }); // TODO: send as urlEncoded or multipart by default
+ // because of ease of use and reliability in browser API
+ // for encoding the form?
+
+ if (contentType !== \\"application/json\\") {
+ body = formData;
+ } else {
+ // Json
+ const json = {};
+ Array.from(formPairs).forEach(({ value, key }) => {
+ set(json, key, value);
+ });
+ body = JSON.stringify(json);
+ }
+
+ if (contentType && contentType !== \\"multipart/form-data\\") {
+ if (
+ /* Zapier doesn't allow content-type header to be sent from browsers */
+ !(sendWithJs && props.action?.includes(\\"zapier.com\\"))
+ ) {
+ headers[\\"content-type\\"] = contentType;
+ }
+ }
+
+ const presubmitEvent = new CustomEvent(\\"presubmit\\", {
+ detail: {
+ body,
+ },
+ });
+
+ if (formRef.current) {
+ formRef.current.dispatchEvent(presubmitEvent);
+
+ if (presubmitEvent.defaultPrevented) {
+ return;
+ }
+ }
+
+ state.formState = \\"sending\\";
+ const formUrl = \`\${
+ builder.env === \\"dev\\" ? \\"http://localhost:5000\\" : \\"https://builder.io\\"
+ }/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(
+ props.sendSubmissionsToEmail || \\"\\"
+ )}&name=\${encodeURIComponent(props.name || \\"\\")}\`;
+ fetch(
+ props.sendSubmissionsTo === \\"email\\" ? formUrl : props.action!,
+ /* TODO: throw error if no action URL */
+ {
+ body,
+ headers,
+ method: props.method || \\"post\\",
+ }
+ ).then(
+ async (res) => {
+ let body;
+ const contentType = res.headers.get(\\"content-type\\");
+
+ if (contentType && contentType.indexOf(\\"application/json\\") !== -1) {
+ body = await res.json();
+ } else {
+ body = await res.text();
+ }
+
+ if (!res.ok && props.errorMessagePath) {
+ /* TODO: allow supplying an error formatter function */
+ let message = get(body, props.errorMessagePath);
+
+ if (message) {
+ if (typeof message !== \\"string\\") {
+ /* TODO: ideally convert json to yaml so it woul dbe like
+ error: - email has been taken */
+ message = JSON.stringify(message);
+ }
+
+ state.formErrorMessage = message;
+ }
+ }
+
+ state.responseData = body;
+ state.formState = res.ok ? \\"success\\" : \\"error\\";
+
+ if (res.ok) {
+ const submitSuccessEvent = new CustomEvent(\\"submit:success\\", {
+ detail: {
+ res,
+ body,
+ },
+ });
+
+ if (formRef.current) {
+ formRef.current.dispatchEvent(submitSuccessEvent);
+
+ if (submitSuccessEvent.defaultPrevented) {
+ return;
+ }
+ /* TODO: option to turn this on/off? */
+
+ if (props.resetFormOnSubmit !== false) {
+ formRef.current.reset();
+ }
+ }
+ /* TODO: client side route event first that can be preventDefaulted */
+
+ if (props.successUrl) {
+ if (formRef.current) {
+ const event = new CustomEvent(\\"route\\", {
+ detail: {
+ url: props.successUrl,
+ },
+ });
+ formRef.current.dispatchEvent(event);
+
+ if (!event.defaultPrevented) {
+ location.href = props.successUrl;
+ }
+ } else {
+ location.href = props.successUrl;
+ }
+ }
+ }
+ },
+ (err) => {
+ const submitErrorEvent = new CustomEvent(\\"submit:error\\", {
+ detail: {
+ error: err,
+ },
+ });
+
+ if (formRef.current) {
+ formRef.current.dispatchEvent(submitErrorEvent);
+
+ if (submitErrorEvent.defaultPrevented) {
+ return;
+ }
+ }
+
+ state.responseData = err;
+ state.formState = \\"error\\";
+ }
+ );
+ }
+ },
+ });
+
+ const formRef = useRef(null);
+ const formRef = useRef(null);
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Image 1`] = `
+"import { useStore, useRef, Show } from \\"@builder.io/mitosis\\";
+
+// TODO: AMP Support?
+export interface ImageProps {
+ _class?: string;
+ image: string;
+ sizes?: string;
+ lazy?: boolean;
+ height?: number;
+ width?: number;
+ altText?: string;
+ backgroundSize?: string;
+ backgroundPosition?: string; // TODO: Support generating Builder.io and or Shopify \`srcset\`s when needed
+
+ srcset?: string; // TODO: Implement support for custom aspect ratios
+
+ aspectRatio?: number; // TODO: This might not work as expected in terms of positioning
+
+ children?: any;
+}
+
+export default function Image(props) {
+ const state = useStore({
+ scrollListener: null,
+ imageLoaded: false,
+ setLoaded() {
+ state.imageLoaded = true;
+ },
+ useLazyLoading() {
+ // TODO: Add more checks here, like testing for real web browsers
+ return !!props.lazy && state.isBrowser();
+ },
+ isBrowser: function isBrowser() {
+ return (
+ typeof window !== \\"undefined\\" &&
+ window.navigator.product != \\"ReactNative\\"
+ );
+ },
+ load: false,
+ });
+
+ const pictureRef = useRef();
+ const pictureRef = useRef();
+
+ onMount(() => {
+ if (state.useLazyLoading()) {
+ // throttled scroll capture listener
+ const listener = () => {
+ if (pictureRef.current) {
+ const rect = pictureRef.current.getBoundingClientRect();
+ const buffer = window.innerHeight / 2;
+
+ if (rect.top < window.innerHeight + buffer) {
+ state.load = true;
+ state.scrollListener = null;
+ window.removeEventListener(\\"scroll\\", listener);
+ }
+ }
+ };
+
+ state.scrollListener = listener;
+ window.addEventListener(\\"scroll\\", listener, {
+ capture: true,
+ passive: true,
+ });
+ listener();
+ }
+ });
+
+ onUnMount(() => {
+ if (state.scrollListener) {
+ window.removeEventListener(\\"scroll\\", state.scrollListener);
+ }
+ });
+
+ return (
+
+
+
+
+
+ {props.children}
+
+
+ {(item, itemIndex) => (
+
+
+ )}
+
+
state.handleChange(value)}
+ />
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > RawText 1`] = `
+"export interface RawTextProps {
+ attributes?: any;
+ text?: string; // builderBlock?: any;
+}
+
+export default function RawText(props) {
+ return (
+
+
+ {(item, index) => (
+
+ )}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Select 1`] = `
+"import { For } from \\"@builder.io/mitosis\\";
+
+export interface FormSelectProps {
+ options?: {
+ name?: string;
+ value: string;
+ }[];
+ attributes?: any;
+ name?: string;
+ value?: string;
+ defaultValue?: string;
+}
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+export default function SelectComponent(props) {
+ return (
+
+
+ {(option, index) => (
+
+ {option.name || option.value}
+
+ )}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > SlotDefault 1`] = `
+"import { Slot } from \\"@components\\";
+type Props = {
+ [key: string]: string;
+};
+
+export default function SlotCode(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > SlotHtml 1`] = `
+"import { ContentSlotCode, Slot } from \\"@components\\";
+type Props = {
+ [key: string]: string;
+};
+
+import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+
+export default function SlotCode(props) {
+ return (
+
+
+ Hello
} />
+
+
+ Hello
} />
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > SlotNamed 1`] = `
+"import { Slot } from \\"@components\\";
+type Props = {
+ [key: string]: string;
+};
+
+export default function SlotCode(props) {
+ return (
+
+ Default left
+ Default Child
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Stamped.io 1`] = `
+"import { useStore, Show, For } from \\"@builder.io/mitosis\\";
+
+type SmileReviewsProps = {
+ productId: string;
+ apiKey: string;
+};
+
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+export default function SmileReviews(props) {
+ const state = useStore({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ snakeCaseValue() {
+ return snakeCase(\\"testThis\\");
+ },
+ });
+
+ onMount(() => {
+ fetch(
+ \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
+ props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
+ }&productId=\${props.productId || \\"2410511106127\\"}\`
+ )
+ .then((res) => res.json())
+ .then((data) => {
+ state.reviews = data.data;
+ });
+ });
+
+ return (
+
+
(state.showReviewPrompt = true)}>
+ Write a review
+
+
+ {
+ event.preventDefault();
+ state.showReviewPrompt = false;
+ }}
+ >
+ Submit
+
+
+
+ {(review, index) => (
+
+
+
+
+ N:
+ {index}
+
+
{review.author}
+
{review.reviewMessage}
+
+
+
+ {props.text}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Text 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export interface TextProps {
+ attributes?: any;
+ rtlMode: boolean;
+ text?: string;
+ content?: string;
+ builderBlock?: any;
+}
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+export default function Text(props) {
+ const state = useStore({ name: \\"Decadef20\\" });
+
+ return (
+ my name'
+ }
+ />
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Textarea 1`] = `
+"export interface TextareaProps {
+ attributes?: any;
+ name?: string;
+ value?: string;
+ defaultValue?: string;
+ placeholder?: string;
+}
+
+export default function Textarea(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > Video 1`] = `
+"export interface VideoProps {
+ attributes?: any;
+ video?: string;
+ autoPlay?: boolean;
+ controls?: boolean;
+ muted?: boolean;
+ loop?: boolean;
+ playsInline?: boolean;
+ aspectRatio?: number;
+ width?: number;
+ height?: number;
+ fit?: \\"contain\\" | \\"cover\\" | \\"fill\\";
+ position?:
+ | \\"center\\"
+ | \\"top\\"
+ | \\"left\\"
+ | \\"right\\"
+ | \\"bottom\\"
+ | \\"top left\\"
+ | \\"top right\\"
+ | \\"bottom left\\"
+ | \\"bottom right\\";
+ posterImage?: string;
+ lazyLoad?: boolean;
+}
+
+export default function Video(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > basicForNoTagReference 1`] = `
+"import { useStore, For } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicForNoTagRefComponent(props) {
+ const state = useStore({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}
+
+ {(action, index) => (
+
+ {action.text}
+
+ )}
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > basicForwardRef 1`] = `
+"',' expected. (19:12)
+ 17 | const state = useStore({ name: 'PatrickJS',});
+ 18 |
+> 19 | const props.inputRef = useRef();
+ | ^
+ 20 |
+ 21 |
+ 22 |"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
+"',' expected. (19:12)
+ 17 | const state = useStore({ name: 'PatrickJS',});
+ 18 |
+> 19 | const props.inputRef = useRef();
+ | ^
+ 20 |
+ 21 |
+ 22 |"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicOnUpdateReturnComponent(props) {
+ const state = useStore({ name: \\"PatrickJS\\" });
+
+ return (
+
+ Hello!
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > class + ClassName + css 1`] = `
+"import { MyComp } from \\"@components\\";
+
+import MyComp from \\"./my-component.js\\";
+
+export default function MyBasicComponent(props) {
+ return (
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > class + css 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > className + css 1`] = `
+"export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > className 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+type Props = {
+ [key: string]: string | JSX.Element;
+ slotTesting: JSX.Element;
+};
+
+import type { JSX } from \\"../../../../jsx-runtime\\";
+
+export default function ClassNameCode(props) {
+ const state = useStore({ bindings: \\"a binding\\" });
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > classState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ classState: \\"testClassName\\",
+ styleState: {
+ color: \\"red\\",
+ },
+ });
+
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > componentWithContext 1`] = `
+"import { Fragment } from \\"@components\\";
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+ return (
+
+ {foo.value}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"import { Fragment } from \\"@components\\";
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+export default function ComponentWithContext(props) {
+ return (
+
+ {foo.value}
+ other
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > contentState 1`] = `
+"import BuilderContext from \\"@dummy/context.js\\";
+
+export default function RenderContent(props) {
+ return
setting context
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > defaultProps 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ buttonText?: string; // no default value
+
+ link?: string;
+ openLinkInNewTab?: boolean;
+ onClick?: () => void;
+}
+
+export default function Button(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+ onClick: () => void;
+}
+
+export default function Button(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > defaultValsWithTypes 1`] = `
+"type Props = {
+ name: string;
+};
+
+const DEFAULT_VALUES: Props = {
+ name: \\"Sami\\",
+};
+
+export default function ComponentWithTypes(props) {
+ return (
+
+ {\\" \\"}
+ Hello
+ {props.name || DEFAULT_VALUES.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > expressionState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ });
+
+ return
{state.refToUse}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > getterState 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export interface ButtonProps {
+ foo: string;
+}
+
+export default function Button(props) {
+ const state = useStore({
+ get foo2() {
+ return props.foo + \\"foo\\";
+ },
+ get bar() {
+ return \\"bar\\";
+ },
+ baz(i: number) {
+ return i + state.foo2.length;
+ },
+ });
+
+ return (
+
+
{state.foo2}
+
{state.bar}
+
{state.baz(1)}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > import types 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { RenderBlock } from \\"@components\\";
+type RenderContentProps = {
+ options?: GetContentOptions;
+ content: BuilderContent;
+ renderContentProps: RenderBlockProps;
+};
+
+import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
+import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
+
+export default function RenderContent(props) {
+ const state = useStore({
+ getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ },
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > multipleOnUpdate 1`] = `
+"export default function MultipleOnUpdate(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MultipleOnUpdateWithDeps(props) {
+ const state = useStore({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > multipleSpreads 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyBasicComponent(props) {
+ const state = useStore({
+ attrs: {
+ hello: \\"world\\",
+ },
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > nestedShow 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+interface Props {
+ conditionA: boolean;
+ conditionB: boolean;
+}
+
+export default function NestedShow(props) {
+ return (
+
+
+ if condition A and condition B
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > nestedStyles 1`] = `
+"export default function NestedStyles(props) {
+ return (
+
+ Hello world
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > onEvent 1`] = `
+"import { useStore, useRef } from \\"@builder.io/mitosis\\";
+
+export default function Embed(props) {
+ const state = useStore({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ });
+
+ const elem = useRef
(null);
+ const elem = useRef(null);
+
+ onMount(() => {
+ elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+ });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > onInit & onMount 1`] = `
+"export default function OnInit(props) {
+ onMount(() => {
+ console.log(\\"onMount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > onInit 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+type Props = {
+ name: string;
+};
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+export default function OnInit(props) {
+ const state = useStore({ name: \\"\\" });
+
+ return (
+
+ Default name defined by parent
+ {state.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > onInitPlain 1`] = `
+"export default function OnInitPlain(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > onMount 1`] = `
+"export default function Comp(props) {
+ onMount(() => {
+ console.log(\\"Runs on mount\\");
+ });
+
+ onUnMount(() => {
+ console.log(\\"Runs on unMount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > onMountMultiple 1`] = `
+"export default function Comp(props) {
+ onMount(() => {
+ console.log(\\"Runs on mount\\");
+ }),
+ onMount(() => {
+ console.log(\\"Another one runs on Mount\\");
+ }),
+ onMount(() => {
+ console.log(\\"SSR runs on Mount\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > onUpdate 1`] = `
+"export default function OnUpdate(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > onUpdateWithDeps 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+type Props = {
+ size: string;
+};
+
+export default function OnUpdateWithDeps(props) {
+ const state = useStore({ a: \\"a\\", b: \\"b\\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
+"type Types = {
+ s: any[];
+};
+interface IPost {
+ len: number;
+}
+export interface MyBasicComponentProps {
+ id: string;
+}
+
+const b = 3;
+const foo = () => {};
+export const a = 3;
+export const bar = () => {};
+export function run(value: T) {}
+
+export default function MyBasicComponent(props) {
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > preserveTyping 1`] = `
+"export type A = \\"test\\";
+export interface C {
+ n: \\"test\\";
+}
+type B = \\"test2\\";
+interface D {
+ n: \\"test\\";
+}
+export interface MyBasicComponentProps {
+ name: string;
+ age?: number;
+}
+
+export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > propsDestructure 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+type Props = {
+ children: any;
+ type: string;
+};
+
+export default function MyBasicComponent(props) {
+ const state = useStore({ name: \\"Decadef20\\" });
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > propsInterface 1`] = `
+"interface Person {
+ name: string;
+ age?: number;
+}
+
+export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > propsType 1`] = `
+"type Person = {
+ name: string;
+ age?: number;
+};
+
+export default function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ {props.name}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > referencingFunInsideHook 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function OnUpdate(props) {
+ const state = useStore({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > renderBlock 1`] = `
+"import { useStore, Show, For } from \\"@builder.io/mitosis\\";
+import { RenderRepeatedBlock, RenderBlock, BlockStyles } from \\"@components\\";
+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.js\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import type { RenderComponentProps } from \\"./render-component.js\\";
+import RenderComponent from \\"./render-component.js\\";
+import RenderRepeatedBlock from \\"./render-repeated-block.js\\";
+import type { RepeatData } from \\"./types.js\\";
+
+export default function RenderBlock(props) {
+ const state = useStore({
+ get 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;
+ }
+ },
+ get tag() {
+ return getBlockTag(state.useBlock);
+ },
+ get useBlock() {
+ return state.repeatItemData
+ ? props.block
+ : getProcessedBlock({
+ block: props.block,
+ state: props.context.state,
+ context: props.context.context,
+ shouldEvaluateBindings: true,
+ });
+ },
+ get actions() {
+ return getBlockActions({
+ block: state.useBlock,
+ state: props.context.state,
+ context: props.context.context,
+ });
+ },
+ get attributes() {
+ const blockProperties = getBlockProperties(state.useBlock);
+ return {
+ ...blockProperties,
+ ...(TARGET === \\"reactNative\\"
+ ? {
+ style: getReactNativeBlockStyles({
+ block: state.useBlock,
+ context: props.context,
+ blockStyles: blockProperties.style,
+ }),
+ }
+ : {}),
+ };
+ },
+ get shouldWrap() {
+ return !state.component?.noWrap;
+ },
+ get renderComponentProps() {
+ return {
+ blockChildren: state.useChildren,
+ componentRef: state.component?.component,
+ componentOptions: {
+ ...getBlockComponentOptions(state.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.
+ */
+ ...(state.shouldWrap
+ ? {}
+ : {
+ attributes: { ...state.attributes, ...state.actions },
+ }),
+ customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
+ },
+ context: state.childrenContext,
+ };
+ },
+ get 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 state.useBlock.children ?? [];
+ },
+ get 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 =
+ !state.component?.component && !state.repeatItemData;
+ return shouldRenderChildrenOutsideRef ? state.useChildren : [];
+ },
+ get 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;
+ },
+ get inheritedTextStyles() {
+ if (TARGET !== \\"reactNative\\") {
+ return {};
+ }
+
+ const styles = getReactNativeBlockStyles({
+ block: state.useBlock,
+ context: props.context,
+ blockStyles: state.attributes.style,
+ });
+ return extractTextStyles(styles);
+ },
+ get childrenContext() {
+ return {
+ apiKey: props.context.apiKey,
+ state: props.context.state,
+ content: props.context.content,
+ context: props.context.context,
+ registeredComponents: props.context.registeredComponents,
+ inheritedStyles: state.inheritedTextStyles,
+ };
+ },
+ get renderComponentTag() {
+ if (TARGET === \\"reactNative\\") {
+ return RenderComponentWithContext;
+ } else if (TARGET === \\"vue3\\") {
+ // vue3 expects a string for the component tag
+ return \\"RenderComponent\\";
+ } else {
+ return RenderComponent;
+ }
+ },
+ });
+
+ return (
+
+
+
+
+
+ {(data, index) => (
+
+
+
+
+
+ {(child, index) => (
+
+
+ {(child, index) => (
+
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > renderContentExample 1`] = `
+"import { RenderBlocks } from \\"@components\\";
+type Props = {
+ customComponents: string[];
+ content: {
+ blocks: any[];
+ id: string;
+ };
+};
+
+import BuilderContext from \\"@dummy/context.js\\";
+import {
+ dispatchNewContentToVisualEditor,
+ sendComponentsToVisualEditor,
+ trackClick,
+} from \\"@dummy/injection-js\\";
+import RenderBlocks from \\"@dummy/RenderBlocks.js\\";
+
+export default function RenderContent(props) {
+ onMount(() => {
+ sendComponentsToVisualEditor(props.customComponents);
+ });
+
+ return (
+ trackClick(props.content.id)}
+ >
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+import { Fragment } from \\"@components\\";
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+export default function Button(props) {
+ return (
+
+
+
+ {props.text}
+
+
+
+
+ {props.text}
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > rootShow 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+export interface RenderStylesProps {
+ foo: string;
+}
+
+export default function RenderStyles(props) {
+ return (
+
+ Bar
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > self-referencing component 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+import { MyComponent } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+ {props.name}
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > self-referencing component with children 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+import { MyComponent } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.children}
+
+
+ Wayne
+
+
+
+ Content0
+ ContentA
+ ContentB
+ {undefined}
+ ContentC
+ ContentD
+ ContentE
+ hello
+ ContentF
+ 123
+ 4mb
+
+ 20mb
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > showWithFor 1`] = `
+"import { Show, For } from \\"@builder.io/mitosis\\";
+
+interface Props {
+ conditionA: boolean;
+ items: string[];
+}
+
+export default function NestedShow(props) {
+ return (
+
+ {(item, idx) => {item}
}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > showWithOtherValues 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+export default function ShowWithOtherValues(props) {
+ return (
+
+ ContentA
+ ContentB
+ ContentC
+ ContentD
+ ContentE
+ ContentF
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > showWithRootText 1`] = `
+"import { Show } from \\"@builder.io/mitosis\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+export default function ShowRootText(props) {
+ return ContentA ;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"type Props = {
+ id: Signal;
+ foo: Signal<{
+ bar: {
+ baz: number;
+ };
+ }>;
+};
+
+export default function MyBasicComponent(props) {
+ return (
+
+ {props.id}
+ {props.foo.value.bar.baz}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > spreadAttrs 1`] = `
+"export default function MyBasicComponent(props) {
+ return {state.foo}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > styleClassAndCss 1`] = `
+"export default function MyComponent(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > stylePropClassAndCss 1`] = `
+"export default function StylePropClassAndCss(props) {
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > subComponent 1`] = `
+"import { Foo } from \\"@components\\";
+
+import Foo from \\"./foo-sub-component.js\\";
+
+export default function SubComponent(props) {
+ return
+
+
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > typeDependency 1`] = `
+"export type TypeDependencyProps = {
+ foo: Foo;
+ foo2: Foo2;
+};
+
+import type { Foo } from \\"./foo-type\\";
+import type { Foo as Foo2 } from \\"./type-export.js\\";
+
+export default function TypeDependency(props) {
+ return {props.foo}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > typeExternalStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+import { FooStore } from \\"./foo-store\\";
+
+export default function TypeExternalStore(props) {
+ const state = useStore({ _name: \\"test\\" });
+
+ return (
+
+ Hello
+ {state._name}!{\\" \\"}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > typeGetterStore 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+type GetterStore = {
+ getName: () => string;
+ name: string;
+ get test(): string;
+};
+
+export default function TypeGetterStore(props) {
+ const state = useStore({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ });
+
+ return (
+
+ Hello
+ {state.name}!{\\" \\"}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > use-style 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ background: blue;
+ color: white;
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+ \`);
+
+ return Button ;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > use-style-and-css 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+ \`);
+
+ return (
+
+ Button
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > use-style-outside-component 1`] = `
+"export default function MyComponent(props) {
+ useStyle(\`
+ button {
+ background: blue;
+ color: white;
+ font-size: 12px;
+ outline: 1px solid black;
+ }
+\`);
+
+ return Button ;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > useTarget 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function UseTargetComponent(props) {
+ const state = useStore({
+ get name() {
+ const prefix = \\"USE_TARGET_BLOCK_1\\";
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ });
+
+ onMount(() => {
+ \\"USE_TARGET_BLOCK_2\\";
+ });
+
+ return {state.name}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > jsx > Typescript Test > webComponent 1`] = `
+"import { register } from \\"swiper/element/bundle\\";
+
+export default function MyBasicWebComponent(props) {
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > basic 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ name: \\"Steve\\" });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > bindGroup 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ tortilla: \\"Plain\\", fillings: [] });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > bindProperty 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ value: \\"hello\\" });
+
+ return {state.activeTab}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > each 1`] = `
+"import { useStore, For } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
+
+ return (
+
+ {(num, index) => {num} }
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > eventHandlers 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ });
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > html 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ html: \\"bold \\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > ifElse 1`] = `
+"import { useStore, Show } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ });
+
+ return (
+
+ state.toggle(event)}> Hide
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > imports 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { Button, Slot } from \\"@components\\";
+
+import Button from \\"./Button.js\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ disabled: false });
+
+ return (
+
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > lifecycleHooks 1`] = `
+"export default function MyComponent(props) {
+ onMount(() => {
+ console.log(\\"onMount\\");
+ });
+
+ onUnMount(() => {
+ console.log(\\"onDestroy\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > reactive 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > reactiveWithFn 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Javascript Test > slots 1`] = `
+"import { Slot } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+
default
+
+ default
+
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > basic 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ name: \\"Steve\\" });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > bindGroup 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ tortilla: \\"Plain\\", fillings: [] });
+
+ return (
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > bindProperty 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ value: \\"hello\\" });
+
+ return {state.activeTab}
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > each 1`] = `
+"import { useStore, For } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
+
+ return (
+
+ {(num, index) => {num} }
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > eventHandlers 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ });
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > html 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ html: \\"bold \\" });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > ifElse 1`] = `
+"import { useStore, Show } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ });
+
+ return (
+
+ state.toggle(event)}> Hide
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > imports 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+import { Button, Slot } from \\"@components\\";
+
+import Button from \\"./Button.js\\";
+
+export default function MyComponent(props) {
+ const state = useStore({ disabled: false });
+
+ return (
+
+
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > lifecycleHooks 1`] = `
+"export default function MyComponent(props) {
+ onMount(() => {
+ console.log(\\"onMount\\");
+ });
+
+ onUnMount(() => {
+ console.log(\\"onDestroy\\");
+ });
+
+ return
;
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > reactive 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > reactiveWithFn 1`] = `
+"import { useStore } from \\"@builder.io/mitosis\\";
+
+export default function MyComponent(props) {
+ const state = useStore({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ });
+
+ return (
+
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: legacy > svelte > Typescript Test > slots 1`] = `
+"import { Slot } from \\"@components\\";
+
+export default function MyComponent(props) {
+ return (
+
+
default
+
+ default
+
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef, useEffect } from \\"react\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ }
+
+ function lowerCaseName() {
+ return name.toLowerCase();
+ }
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
+
+ return (
+
+ {props.showInput ? (
+ <>
+
+ Choose a car:
+
+
+ GR Supra
+ GR 86
+
+
+ ) : null}
+ Hello
+ {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web Component!
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props) {
+ const [name, setName] = useState(() => \\"Steve\\");
+
+ function underscore_fn_name() {
+ return \\"bar\\";
+ }
+
+ const [age, setAge] = useState(() => 1);
+
+ const [sports, setSports] = useState(() => [\\"\\"]);
+
+ return (
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Basic 2`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicForShowComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ const [names, setNames] = useState(() => [\\"Steve\\", \\"PatrickJS\\"]);
+
+ return (
+
+ {names?.map((person) =>
+ person === name ? (
+ <>
+
+ );
+}
+
+export default MyBasicForShowComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Basic Context 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useContext, useRef, useEffect } from \\"react\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ function onChange() {
+ const change = myService.method(\\"change\\");
+ console.log(change);
+ }
+
+ const myService = useContext(MyService);
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ const hi = myService.method(\\"hi\\");
+ console.log(hi);
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ const bye = myService.method(\\"hi\\");
+ console.log(bye);
+ }, []);
+
+ return (
+
+
+ {myService.method(\\"hello\\") + name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef, useEffect } from \\"react\\";
+
+function MyBasicOnMountUpdateComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ const [names, setNames] = useState(() => [\\"Steve\\", \\"PatrickJS\\"]);
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ setName(\\"PatrickJS onInit\\" + props.hi);
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ setName(\\"PatrickJS onMount\\" + props.bye);
+ }, []);
+
+ return Hello {name}
;
+}
+
+export default MyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MyBasicOutputsComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ useEffect(() => {
+ props.onMessage(name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MyBasicOutputsComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ useEffect(() => {
+ props.onMessage(name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > BasicAttribute 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return
+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+
+export default MyBooleanAttribute;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props) {
+ const [name, setName] = useState(() => \\"Steve\\");
+
+ const [dev, setDev] = useState(() => \\"PatrickJS\\");
+
+ return (
+
+ );
+}
+
+export default MyBasicChildComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MyBasicForComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ const [names, setNames] = useState(() => [\\"Steve\\", \\"PatrickJS\\"]);
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {names?.map((person) => (
+ <>
+
+ );
+}
+
+export default MyBasicForComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > BasicRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef } from \\"react\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ }
+
+ function lowerCaseName() {
+ return name.toLowerCase();
+ }
+
+ return (
+
+ {props.showInput ? (
+ <>
+
+ Choose a car:
+
+
+ GR Supra
+ GR 86
+
+
+ ) : null}
+ Hello
+ {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web Component!
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function MyBasicRefAssignmentComponent(props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ function handlerClick(event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ }
+
+ return (
+
+ handlerClick(evt)}>Click
+
+ );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef, useEffect } from \\"react\\";
+
+export function usePrevious(value) {
+ // The ref object is a generic container whose current property is mutable ...
+ // ... and can hold any value, similar to an instance property on a class
+ let ref = useRef(null); // Store current value in ref
+
+ onUpdate(() => {
+ ref = value;
+ }, [value]); // Only re-run if value changes
+ // Return previous value (happens before update in useEffect above)
+
+ return ref;
+}
+
+function MyPreviousComponent(props) {
+ const [count, setCount] = useState(() => 0);
+
+ const prevCount = useRef(count);
+
+ useEffect(() => {
+ prevCount.current = count;
+ }, [count]);
+
+ return (
+
+
+ Now: {count}, before: {prevCount.current}
+
+ setCount(1)}>Increment
+
+ );
+}
+
+export default MyPreviousComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Button 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ {props.columns?.map((column, index) => (
+
+ {column.content}
+ {index}
+
+ ))}
+
+ <>{props.slotTesting}
+
+
+
+ <>{props.children}
+
+
show()}
+ className={cls()}
+ >
+ {showContent && props.slotContent ? (
+ <>{props.content || \\"{props.content}\\"}
+ ) : null}
+
+
+
{props.children}
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef, useEffect } from \\"react\\";
+
+function CustomCode(props) {
+ const elem = useRef(null);
+ const [scriptsInserted, setScriptsInserted] = useState(() => []);
+
+ const [scriptsRun, setScriptsRun] = useState(() => []);
+
+ function findAndRunScripts() {
+ // TODO: Move this function to standalone one in '@builder.io/utils'
+ if (elem.current && typeof window !== \\"undefined\\") {
+ /** @type {HTMLScriptElement[]} */
+ const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+ for (let i = 0; i < scripts.length; i++) {
+ const script = scripts[i];
+
+ if (script.src) {
+ if (scriptsInserted.includes(script.src)) {
+ continue;
+ }
+
+ scriptsInserted.push(script.src);
+ const newScript = document.createElement(\\"script\\");
+ newScript.async = true;
+ newScript.src = script.src;
+ document.head.appendChild(newScript);
+ } else if (
+ !script.type ||
+ [
+ \\"text/javascript\\",
+ \\"application/javascript\\",
+ \\"application/ecmascript\\",
+ ].includes(script.type)
+ ) {
+ if (scriptsRun.includes(script.innerText)) {
+ continue;
+ }
+
+ try {
+ scriptsRun.push(script.innerText);
+ new Function(script.innerText)();
+ } catch (error) {
+ console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+ }
+ }
+ }
+ }
+ }
+
+ useEffect(() => {
+ findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Form 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef } from \\"react\\";
+import { Builder, builder } from \\"@builder.io/sdk\\";
+import {
+ BuilderBlock as BuilderBlockComponent,
+ BuilderBlocks,
+ get,
+ set,
+} from \\"@fake\\";
+
+function FormComponent(props) {
+ const formRef = useRef(null);
+ const [formState, setFormState] = useState(() => \\"unsubmitted\\");
+
+ const [responseData, setResponseData] = useState(() => null);
+
+ const [formErrorMessage, setFormErrorMessage] = useState(() => \\"\\");
+
+ function submissionState() {
+ return (Builder.isEditing && props.previewState) || formState;
+ }
+
+ function onSubmit(event) {
+ const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === \\"email\\";
+
+ if (props.sendSubmissionsTo === \\"zapier\\") {
+ event.preventDefault();
+ } else if (sendWithJs) {
+ if (!(props.action || props.sendSubmissionsTo === \\"email\\")) {
+ event.preventDefault();
+ return;
+ }
+
+ event.preventDefault();
+ const el = event.currentTarget;
+ const headers = props.customHeaders || {};
+ let body;
+ const formData = new FormData(el); // TODO: maybe support null
+
+ const formPairs = Array.from(
+ event.currentTarget.querySelectorAll(\\"input,select,textarea\\")
+ )
+ .filter((el) => !!el.name)
+ .map((el) => {
+ let value;
+ const key = el.name;
+
+ if (el instanceof HTMLInputElement) {
+ if (el.type === \\"radio\\") {
+ if (el.checked) {
+ value = el.name;
+ return {
+ key,
+ value,
+ };
+ }
+ } else if (el.type === \\"checkbox\\") {
+ value = el.checked;
+ } else if (el.type === \\"number\\" || el.type === \\"range\\") {
+ const num = el.valueAsNumber;
+
+ if (!isNaN(num)) {
+ value = num;
+ }
+ } else if (el.type === \\"file\\") {
+ // TODO: one vs multiple files
+ value = el.files;
+ } else {
+ value = el.value;
+ }
+ } else {
+ value = el.value;
+ }
+
+ return {
+ key,
+ value,
+ };
+ });
+ let contentType = props.contentType;
+
+ if (props.sendSubmissionsTo === \\"email\\") {
+ contentType = \\"multipart/form-data\\";
+ }
+
+ Array.from(formPairs).forEach(({ value }) => {
+ if (
+ value instanceof File ||
+ (Array.isArray(value) && value[0] instanceof File) ||
+ value instanceof FileList
+ ) {
+ contentType = \\"multipart/form-data\\";
+ }
+ }); // TODO: send as urlEncoded or multipart by default
+ // because of ease of use and reliability in browser API
+ // for encoding the form?
+
+ if (contentType !== \\"application/json\\") {
+ body = formData;
+ } else {
+ // Json
+ const json = {};
+ Array.from(formPairs).forEach(({ value, key }) => {
+ set(json, key, value);
+ });
+ body = JSON.stringify(json);
+ }
+
+ if (contentType && contentType !== \\"multipart/form-data\\") {
+ if (
+ /* Zapier doesn't allow content-type header to be sent from browsers */ !(
+ sendWithJs && props.action?.includes(\\"zapier.com\\")
+ )
+ ) {
+ headers[\\"content-type\\"] = contentType;
+ }
+ }
+ const presubmitEvent = new CustomEvent(\\"presubmit\\", { detail: { body } });
+ if (formRef.current) {
+ formRef.current.dispatchEvent(presubmitEvent);
+ if (presubmitEvent.defaultPrevented) {
+ return;
+ }
+ }
+ setFormState(\\"sending\\");
+ const formUrl = \`\${
+ builder.env === \\"dev\\" ? \\"http://localhost:5000\\" : \\"https://builder.io\\"
+ }/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(
+ props.sendSubmissionsToEmail || \\"\\"
+ )}&name=\${encodeURIComponent(props.name || \\"\\")}\`;
+ fetch(
+ props.sendSubmissionsTo === \\"email\\"
+ ? formUrl
+ : props.action /* TODO: throw error if no action URL */,
+ { body, headers, method: props.method || \\"post\\" }
+ ).then(
+ async (res) => {
+ let body;
+ const contentType = res.headers.get(\\"content-type\\");
+ if (contentType && contentType.indexOf(\\"application/json\\") !== -1) {
+ body = await res.json();
+ } else {
+ body = await res.text();
+ }
+ if (!res.ok && props.errorMessagePath) {
+ /* TODO: allow supplying an error formatter function */ let message =
+ get(body, props.errorMessagePath);
+ if (message) {
+ if (typeof message !== \\"string\\") {
+ /* TODO: ideally convert json to yaml so it woul dbe like error: - email has been taken */ message =
+ JSON.stringify(message);
+ }
+ setFormErrorMessage(message);
+ }
+ }
+ setResponseData(body);
+ setFormState(res.ok ? \\"success\\" : \\"error\\");
+ if (res.ok) {
+ const submitSuccessEvent = new CustomEvent(\\"submit:success\\", {
+ detail: { res, body },
+ });
+ if (formRef.current) {
+ formRef.current.dispatchEvent(submitSuccessEvent);
+ if (submitSuccessEvent.defaultPrevented) {
+ return;
+ }
+ /* TODO: option to turn this on/off? */ if (
+ props.resetFormOnSubmit !== false
+ ) {
+ formRef.current.reset();
+ }
+ }
+ /* TODO: client side route event first that can be preventDefaulted */ if (
+ props.successUrl
+ ) {
+ if (formRef.current) {
+ const event = new CustomEvent(\\"route\\", {
+ detail: { url: props.successUrl },
+ });
+ formRef.current.dispatchEvent(event);
+ if (!event.defaultPrevented) {
+ location.href = props.successUrl;
+ }
+ } else {
+ location.href = props.successUrl;
+ }
+ }
+ }
+ },
+ (err) => {
+ const submitErrorEvent = new CustomEvent(\\"submit:error\\", {
+ detail: { error: err },
+ });
+ if (formRef.current) {
+ formRef.current.dispatchEvent(submitErrorEvent);
+ if (submitErrorEvent.defaultPrevented) {
+ return;
+ }
+ }
+ setResponseData(err);
+ setFormState(\\"error\\");
+ }
+ );
+ }
+ }
+ return (
+
+ );
+}
+export default FormComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Image 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef, useEffect } from \\"react\\";
+
+function Image(props) {
+ const pictureRef = useRef(null);
+ const [scrollListener, setScrollListener] = useState(() => null);
+
+ const [imageLoaded, setImageLoaded] = useState(() => false);
+
+ function setLoaded() {
+ setImageLoaded(true);
+ }
+
+ function useLazyLoading() {
+ // TODO: Add more checks here, like testing for real web browsers
+ return !!props.lazy && isBrowser();
+ }
+
+ function isBrowser() {
+ return (
+ typeof window !== \\"undefined\\" && window.navigator.product != \\"ReactNative\\"
+ );
+ }
+
+ const [load, setLoad] = useState(() => false);
+
+ useEffect(() => {
+ if (useLazyLoading()) {
+ // throttled scroll capture listener
+ const listener = () => {
+ if (pictureRef.current) {
+ const rect = pictureRef.current.getBoundingClientRect();
+ const buffer = window.innerHeight / 2;
+
+ if (rect.top < window.innerHeight + buffer) {
+ setLoad(true);
+ setScrollListener(null);
+ window.removeEventListener(\\"scroll\\", listener);
+ }
+ }
+ };
+
+ setScrollListener(listener);
+ window.addEventListener(\\"scroll\\", listener, {
+ capture: true,
+ passive: true,
+ });
+ listener();
+ }
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (scrollListener) {
+ window.removeEventListener(\\"scroll\\", scrollListener);
+ }
+ };
+ }, []);
+
+ return (
+
+
+ {!useLazyLoading() || load ? (
+
+ {props.children}
+
+ {images?.map((item, itemIndex) => (
+
+ ))}
+
handleChange(value)}
+ />
+ );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > RawText 1`] = `
+"import * as React from \\"react\\";
+
+function RawText(props) {
+ return (
+
+ {props.options?.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+
+export default SelectComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > SlotNamed 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+ return (
+
+ <>{props.myAwesomeSlot}
+ <>{props.top}
+ <>{props.left || \\"Default left\\"}
+ <>{props.children || \\"Default Child\\"}
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props) {
+ const [reviews, setReviews] = useState(() => []);
+
+ const [name, setName] = useState(() => \\"test\\");
+
+ const [showReviewPrompt, setShowReviewPrompt] = useState(() => false);
+
+ function kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ }
+
+ function snakeCaseValue() {
+ return snakeCase(\\"testThis\\");
+ }
+
+ useEffect(() => {
+ fetch(
+ \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
+ props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
+ }&productId=\${props.productId || \\"2410511106127\\"}\`
+ )
+ .then((res) => res.json())
+ .then((data) => {
+ setReviews(data.data);
+ });
+ }, []);
+
+ return (
+
+
setShowReviewPrompt(true)}>
+ Write a review
+
+ {showReviewPrompt || \\"asdf\\" ? (
+ <>
+
+
+
+
{
+ event.preventDefault();
+ setShowReviewPrompt(false);
+ }}
+ >
+ Submit
+
+
+ ) : null}
+ {reviews?.map((review, index) => (
+
+
+
+
N: {index}
+
{review.author}
+
{review.reviewMessage}
+
+
+ ))}
+
+ {props.text}
+
+ );
+}
+
+export default SubmitButton;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props) {
+ const [name, setName] = useState(() => \\"Decadef20\\");
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+export default Text;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+function Textarea(props) {
+ return (
+
+ );
+}
+
+export default Textarea;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+function Video(props) {
+ return (
+
+ );
+}
+
+export default Video;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [name, setName] = useState(() => \\"steve\\");
+
+ function setName(value) {
+ setName(value);
+ }
+
+ function updateNameWithArrowFn(value) {
+ setName(value);
+ }
+
+ return
Hello {name}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > basicForNoTagReference 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicForNoTagRefComponent(props) {
+ const [name, setName] = useState(() => \\"VincentW\\");
+
+ const [TagName, setTagName] = useState(() => \\"div\\");
+
+ function TagNameGetter() {
+ return \\"span\\";
+ }
+
+ const [Tag, setTag] = useState(() => \\"span\\");
+
+ const TagNameGetterRef = TagNameGetter();
+
+ return (
+
+ Hello {name}
+ {props.actions?.map((action) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+
+export default MyBasicForNoTagRefComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, forwardRef } from \\"react\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ return (
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, forwardRef } from \\"react\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ return (
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MyBasicOnUpdateReturnComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ setName(data.name);
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [name]);
+
+ return
Hello! {name}
;
+}
+
+export default MyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > class + ClassName + css 1`] = `
+"import * as React from \\"react\\";
+import MyComp from \\"./my-component\\";
+
+function MyBasicComponent(props) {
+ return (
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > class + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > className + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function ClassNameCode(props) {
+ const [bindings, setBindings] = useState(() => \\"a binding\\");
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+
+export default ClassNameCode;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > classState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicComponent(props) {
+ const [classState, setClassState] = useState(() => \\"testClassName\\");
+
+ const [styleState, setStyleState] = useState(() => ({
+ color: \\"red\\",
+ }));
+
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > componentWithContext 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>{foo.value}
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>
+ <>{foo.value}
+ other
+
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > contentState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+import BuilderContext from \\"@dummy/context.js\\";
+
+function RenderContent(props) {
+ return (
+
+ setting context
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > defaultProps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick()}
+ >
+ {props.buttonText}
+
+ ) : null}
+
+ );
+}
+
+Button.defaultProps = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+};
+
+export default Button;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick(event)}
+ >
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+Button.defaultProps = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+};
+
+export default Button;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > defaultValsWithTypes 1`] = `
+"import * as React from \\"react\\";
+
+const DEFAULT_VALUES = {
+ name: \\"Sami\\",
+};
+
+function ComponentWithTypes(props) {
+ return
Hello {props.name || DEFAULT_VALUES.name}
;
+}
+
+export default ComponentWithTypes;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [refToUse, setRefToUse] = useState(() =>
+ !(props.componentRef instanceof Function) ? props.componentRef : null
+ );
+
+ return
{refToUse}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+ function foo2() {
+ return props.foo + \\"foo\\";
+ }
+
+ function bar() {
+ return \\"bar\\";
+ }
+
+ function baz(i) {
+ return i + foo2().length;
+ }
+
+ return (
+
+
{foo2()}
+
{bar()}
+
{baz(1)}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > import types 1`] = `
+"import * as React from \\"react\\";
+import RenderBlock from \\"./builder-render-block.raw\\";
+
+function RenderContent(props) {
+ function getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ }
+
+ return (
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > multipleOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MultipleOnUpdate(props) {
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender as well\\");
+ });
+
+ return
;
+}
+
+export default MultipleOnUpdate;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MultipleOnUpdateWithDeps(props) {
+ const [a, setA] = useState(() => \\"a\\");
+
+ const [b, setB] = useState(() => \\"b\\");
+
+ const [c, setC] = useState(() => \\"c\\");
+
+ const [d, setD] = useState(() => \\"d\\");
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", a, b);
+
+ if (a === \\"a\\") {
+ setA(\\"b\\");
+ }
+ }, [a, b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", c, d);
+
+ if (a === \\"a\\") {
+ setA(\\"b\\");
+ }
+ }, [c, d]);
+
+ return
;
+}
+
+export default MultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicComponent(props) {
+ const [attrs, setAttrs] = useState(() => ({
+ hello: \\"world\\",
+ }));
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > nestedShow 1`] = `
+"import * as React from \\"react\\";
+
+function NestedShow(props) {
+ return (
+ <>
+ {props.conditionA ? (
+ <>
+ {!props.conditionB ? (
+
if condition A and condition B
+ ) : (
+
else-condition-B
+ )}
+
+ ) : (
+
else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props) {
+ return (
+
+ Hello world
+
+ );
+}
+
+export default NestedStyles;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function Embed(props) {
+ const elem = useRef(null);
+ function foo(event) {
+ console.log(\\"test2\\");
+ }
+
+ function elem_onInitEditingBldr(event) {
+ console.log(\\"test\\");
+ foo(event);
+ }
+
+ useEffect(() => {
+ elem.current?.addEventListener(\\"initEditingBldr\\", elem_onInitEditingBldr);
+ return () =>
+ elem.current?.removeEventListener(
+ \\"initEditingBldr\\",
+ elem_onInitEditingBldr
+ );
+ }, []);
+
+ useEffect(() => {
+ elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+ }, []);
+
+ return (
+
+ );
+}
+
+export default Embed;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > onInit & onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function OnInit(props) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ return
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef } from \\"react\\";
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props) {
+ const [name, setName] = useState(() => \\"\\");
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ setName(defaultValues.name || props.name);
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return
Default name defined by parent {name}
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ return
;
+}
+
+export default OnInitPlain;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props) {
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"Runs on unMount\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default Comp;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > onMountMultiple 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props) {
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+ useEffect(() => {
+ console.log(\\"Another one runs on Mount\\");
+ }, []);
+ useEffect(() => {
+ console.log(\\"SSR runs on Mount\\");
+ }, []);
+
+ return
;
+}
+
+export default Comp;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > onUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props) {
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function OnUpdateWithDeps(props) {
+ const [a, setA] = useState(() => \\"a\\");
+
+ const [b, setB] = useState(() => \\"b\\");
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", a, b, props.size);
+ }, [a, b, props.size]);
+
+ return
;
+}
+
+export default OnUpdateWithDeps;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
+"import * as React from \\"react\\";
+
+const b = 3;
+const foo = () => {};
+export const a = 3;
+export const bar = () => {};
+export function run(value) {}
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > preserveTyping 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return (
+
Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicComponent(props) {
+ const [name, setName] = useState(() => \\"Decadef20\\");
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > propsInterface 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return (
+
Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > propsType 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return (
+
Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > referencingFunInsideHook 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props) {
+ function foo(params) {}
+
+ function bar() {}
+
+ function zoo() {
+ const params = {
+ cb: bar,
+ };
+ }
+
+ useEffect(() => {
+ foo({
+ someOption: bar,
+ });
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > renderBlock 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } 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) {
+ 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;
+ }
+ }
+
+ function tag() {
+ return getBlockTag(useBlock());
+ }
+
+ function useBlock() {
+ return repeatItemData()
+ ? props.block
+ : getProcessedBlock({
+ block: props.block,
+ state: props.context.state,
+ context: props.context.context,
+ shouldEvaluateBindings: true,
+ });
+ }
+
+ function actions() {
+ return getBlockActions({
+ block: useBlock(),
+ state: props.context.state,
+ context: props.context.context,
+ });
+ }
+
+ function attributes() {
+ const blockProperties = getBlockProperties(useBlock());
+ return {
+ ...blockProperties,
+ ...(TARGET === \\"reactNative\\"
+ ? {
+ style: getReactNativeBlockStyles({
+ block: useBlock(),
+ context: props.context,
+ blockStyles: blockProperties.style,
+ }),
+ }
+ : {}),
+ };
+ }
+
+ function shouldWrap() {
+ return !component?.()?.noWrap;
+ }
+
+ 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(),
+ };
+ }
+
+ 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 ? useBlock().children : [];
+ return useBlock().children ?? [];
+ }
+
+ 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() : [];
+ }
+
+ function repeatItemData() {
+ /**
+ * we don't use \`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;
+ }
+
+ function inheritedTextStyles() {
+ if (TARGET !== \\"reactNative\\") {
+ return {};
+ }
+
+ const styles = getReactNativeBlockStyles({
+ block: useBlock(),
+ context: props.context,
+ blockStyles: attributes().style,
+ });
+ return extractTextStyles(styles);
+ }
+
+ 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(),
+ };
+ }
+
+ 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, setComponentInfo] = useState(() => null);
+
+ const RenderComponentTagRef = renderComponentTag();
+ const TagRef = tag();
+
+ return (
+ <>
+ {shouldWrap() ? (
+ <>
+ {isEmptyHtmlElement(tag()) ? (
+
+ ) : null}
+ {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+ <>
+ {repeatItemData()?.map((data, index) => (
+
+ ))}
+
+ ) : null}
+ {!isEmptyHtmlElement(tag()) && !repeatItemData() ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+
+
+ )}
+
+ );
+}
+
+export default RenderBlock;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > renderContentExample 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useEffect } from \\"react\\";
+import BuilderContext from \\"@dummy/context.js\\";
+import {
+ dispatchNewContentToVisualEditor,
+ sendComponentsToVisualEditor,
+ trackClick,
+} from \\"@dummy/injection-js\\";
+import RenderBlocks from \\"@dummy/RenderBlocks\\";
+
+function RenderContent(props) {
+ useEffect(() => {
+ sendComponentsToVisualEditor(props.customComponents);
+ }, []);
+
+ useEffect(() => {
+ dispatchNewContentToVisualEditor(props.content);
+ }, [props.content]);
+
+ return (
+
+ trackClick(props.content.id)}
+ >
+
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > rootFragmentMultiNode 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+ return (
+ <>
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+function RenderStyles(props) {
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+
Bar
+
+ ) : (
+
Foo
+ )}
+
+ );
+}
+
+export default RenderStyles;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > self-referencing component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > self-referencing component with children 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.children}
+ {props.name === \\"Batman\\" ? (
+
+ Wayne
+
+ ) : null}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > showExpressions 1`] = `
+"import * as React from \\"react\\";
+
+function ShowWithOtherValues(props) {
+ return (
+
+ {props.conditionA ? <>Content0 : <>ContentA}
+ {props.conditionA ? <>ContentA : null}
+ {props.conditionA ? <> : <>ContentA}
+ {props.conditionA ? <>ContentB : <>{undefined}}
+ {props.conditionA ? <>{undefined} : <>ContentB}
+ {props.conditionA ? <>ContentC : null}
+ {props.conditionA ? <> : <>ContentC}
+ {props.conditionA ? <>ContentD : null}
+ {props.conditionA ? <> : <>ContentD}
+ {props.conditionA ? <>ContentE : <>hello}
+ {props.conditionA ? <>hello : <>ContentE}
+ {props.conditionA ? <>ContentF : <>123}
+ {props.conditionA ? <>123 : <>ContentF}
+ {props.conditionA === \\"Default\\" ? (
+ <>4mb
+ ) : props.conditionB === \\"Complete\\" ? (
+ <>20mb
+ ) : (
+ <>9mb
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ? <>20mb : <>9mb}
+ ) : (
+ <>4mb
+ )}
+
+ );
+}
+
+export default ShowWithOtherValues;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > showWithFor 1`] = `
+"import * as React from \\"react\\";
+
+function NestedShow(props) {
+ return (
+ <>
+ {props.conditionA ? (
+ <>
+ {props.items?.map((item, idx) => (
+
{item}
+ ))}
+
+ ) : (
+
else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > showWithOtherValues 1`] = `
+"import * as React from \\"react\\";
+
+function ShowWithOtherValues(props) {
+ return (
+
+ {props.conditionA ? <>ContentA : null}
+ {props.conditionA ? <>ContentB : <>{undefined}}
+ {props.conditionA ? <>ContentC : null}
+ {props.conditionA ? <>ContentD : null}
+ {props.conditionA ? <>ContentE : <>hello}
+ {props.conditionA ? <>ContentF : <>123}
+
+ );
+}
+
+export default ShowWithOtherValues;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+function ShowRootText(props) {
+ return <>{props.conditionA ? <>ContentA :
else-condition-A
};
+}
+
+export default ShowRootText;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > signalsOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicComponent(props) {
+ useEffect(() => {
+ console.log(\\"props.id changed\\", props.id);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.value.bar.baz);
+ }, [props.id, props.foo.value.bar.baz]);
+
+ return (
+
+ {props.id}
+ {props.foo.value.bar.baz}
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > spreadNestedProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > spreadProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function StringLiteralStore(props) {
+ const [foo, setFoo] = useState(() => 123);
+
+ return
{foo}
;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props) {
+ return (
+
+ );
+}
+
+export default StylePropClassAndCss;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props) {
+ return
;
+}
+
+export default SubComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > svgComponent 1`] = `
+"import * as React from \\"react\\";
+
+function SvgComponent(props) {
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default SvgComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+function TypeDependency(props) {
+ return
{props.foo}
;
+}
+
+export default TypeDependency;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function TypeExternalStore(props) {
+ const [_name, set_name] = useState(() => \\"test\\");
+
+ return
Hello {_name}!
;
+}
+
+export default TypeExternalStore;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function TypeGetterStore(props) {
+ const [name, setName] = useState(() => \\"test\\");
+
+ function getName() {
+ if (name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return name;
+ }
+
+ function test() {
+ return \\"test\\";
+ }
+
+ return
Hello {name}!
;
+}
+
+export default TypeGetterStore;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
+ Button
+
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function UseTargetComponent(props) {
+ function name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ }
+
+ const [lastName, setLastName] = useState(() => \\"bar\\");
+
+ useEffect(() => {
+ console.log(\\"react\\");
+ setLastName(\\"baz\\");
+ }, []);
+
+ return
{name()}
;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Javascript Test > webComponent 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { register } from \\"swiper/element/bundle\\";
+
+function MyBasicWebComponent(props) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ register();
+ hasInitialized.current = true;
+ }
+
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+
+export default MyBasicWebComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Remove Internal mitosis package 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ return (
+
Hello {name}! I can run in React, Qwik, Vue, Solid, or Liquid!
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef, useEffect } from \\"react\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ }
+
+ function lowerCaseName() {
+ return name.toLowerCase();
+ }
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
+
+ return (
+
+ {props.showInput ? (
+ <>
+
+ Choose a car:
+
+
+ GR Supra
+ GR 86
+
+
+ ) : null}
+ Hello
+ {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web Component!
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props) {
+ const [name, setName] = useState(() => \\"Steve\\");
+
+ function underscore_fn_name() {
+ return \\"bar\\";
+ }
+
+ const [age, setAge] = useState(() => 1);
+
+ const [sports, setSports] = useState(() => [\\"\\"]);
+
+ return (
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Basic 2`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicForShowComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ const [names, setNames] = useState(() => [\\"Steve\\", \\"PatrickJS\\"]);
+
+ return (
+
+ {names?.map((person) =>
+ person === name ? (
+ <>
+
+ );
+}
+
+export default MyBasicForShowComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Basic Context 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useContext, useRef, useEffect } from \\"react\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ function onChange() {
+ const change = myService.method(\\"change\\");
+ console.log(change);
+ }
+
+ const myService = useContext(MyService);
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ const hi = myService.method(\\"hi\\");
+ console.log(hi);
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ const bye = myService.method(\\"hi\\");
+ console.log(bye);
+ }, []);
+
+ return (
+
+
+ {myService.method(\\"hello\\") + name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef, useEffect } from \\"react\\";
+
+function MyBasicOnMountUpdateComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ const [names, setNames] = useState(() => [\\"Steve\\", \\"PatrickJS\\"]);
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ setName(\\"PatrickJS onInit\\" + props.hi);
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ setName(\\"PatrickJS onMount\\" + props.bye);
+ }, []);
+
+ return
Hello {name}
;
+}
+
+export default MyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MyBasicOutputsComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ useEffect(() => {
+ props.onMessage(name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MyBasicOutputsComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ useEffect(() => {
+ props.onMessage(name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > BasicAttribute 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
+"import * as React from \\"react\\";
+import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
+
+function MyBooleanAttribute(props) {
+ return (
+
+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+
+export default MyBooleanAttribute;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props) {
+ const [name, setName] = useState(() => \\"Steve\\");
+
+ const [dev, setDev] = useState(() => \\"PatrickJS\\");
+
+ return (
+
+ );
+}
+
+export default MyBasicChildComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MyBasicForComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ const [names, setNames] = useState(() => [\\"Steve\\", \\"PatrickJS\\"]);
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {names?.map((person) => (
+ <>
+
+ );
+}
+
+export default MyBasicForComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > BasicRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef } from \\"react\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ }
+
+ function lowerCaseName() {
+ return name.toLowerCase();
+ }
+
+ return (
+
+ {props.showInput ? (
+ <>
+
+ Choose a car:
+
+
+ GR Supra
+ GR 86
+
+
+ ) : null}
+ Hello
+ {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web Component!
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function MyBasicRefAssignmentComponent(props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ function handlerClick(event: Event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ }
+
+ return (
+
+ handlerClick(evt)}>Click
+
+ );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef, useEffect } from \\"react\\";
+
+export function usePrevious
(value: T) {
+ // The ref object is a generic container whose current property is mutable ...
+ // ... and can hold any value, similar to an instance property on a class
+ let ref = useRef(null); // Store current value in ref
+
+ onUpdate(() => {
+ ref = value;
+ }, [value]); // Only re-run if value changes
+ // Return previous value (happens before update in useEffect above)
+
+ return ref;
+}
+
+function MyPreviousComponent(props) {
+ const [count, setCount] = useState(() => 0);
+
+ const prevCount = useRef(count);
+
+ useEffect(() => {
+ prevCount.current = count;
+ }, [count]);
+
+ return (
+
+
+ Now: {count}, before: {prevCount.current}
+
+ setCount(1)}>Increment
+
+ );
+}
+
+export default MyPreviousComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Button 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ {props.columns?.map((column, index) => (
+
+ {column.content}
+ {index}
+
+ ))}
+
+ <>{props.slotTesting}
+
+
+
+ <>{props.children}
+
+
show()}
+ className={cls()}
+ >
+ {showContent && props.slotContent ? (
+ <>{props.content || \\"{props.content}\\"}
+ ) : null}
+
+
+
{props.children}
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef, useEffect } from \\"react\\";
+
+function CustomCode(props) {
+ const elem = useRef(null);
+ const [scriptsInserted, setScriptsInserted] = useState(() => []);
+
+ const [scriptsRun, setScriptsRun] = useState(() => []);
+
+ function findAndRunScripts() {
+ // TODO: Move this function to standalone one in '@builder.io/utils'
+ if (elem.current && typeof window !== \\"undefined\\") {
+ /** @type {HTMLScriptElement[]} */
+ const scripts = elem.current.getElementsByTagName(\\"script\\");
+
+ for (let i = 0; i < scripts.length; i++) {
+ const script = scripts[i];
+
+ if (script.src) {
+ if (scriptsInserted.includes(script.src)) {
+ continue;
+ }
+
+ scriptsInserted.push(script.src);
+ const newScript = document.createElement(\\"script\\");
+ newScript.async = true;
+ newScript.src = script.src;
+ document.head.appendChild(newScript);
+ } else if (
+ !script.type ||
+ [
+ \\"text/javascript\\",
+ \\"application/javascript\\",
+ \\"application/ecmascript\\",
+ ].includes(script.type)
+ ) {
+ if (scriptsRun.includes(script.innerText)) {
+ continue;
+ }
+
+ try {
+ scriptsRun.push(script.innerText);
+ new Function(script.innerText)();
+ } catch (error) {
+ console.warn(\\"\`CustomCode\`: Error running script:\\", error);
+ }
+ }
+ }
+ }
+ }
+
+ useEffect(() => {
+ findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Form 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef } from \\"react\\";
+import { Builder, BuilderElement, builder } from \\"@builder.io/sdk\\";
+import {
+ BuilderBlock as BuilderBlockComponent,
+ BuilderBlocks,
+ get,
+ set,
+} from \\"@fake\\";
+
+function FormComponent(props) {
+ const formRef = useRef(null);
+ const [formState, setFormState] = useState(() => \\"unsubmitted\\");
+
+ const [responseData, setResponseData] = useState(() => null);
+
+ const [formErrorMessage, setFormErrorMessage] = useState(() => \\"\\");
+
+ function submissionState() {
+ return (Builder.isEditing && props.previewState) || formState;
+ }
+
+ function onSubmit(
+ event: Event & {
+ currentTarget: HTMLFormElement;
+ }
+ ) {
+ const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === \\"email\\";
+
+ if (props.sendSubmissionsTo === \\"zapier\\") {
+ event.preventDefault();
+ } else if (sendWithJs) {
+ if (!(props.action || props.sendSubmissionsTo === \\"email\\")) {
+ event.preventDefault();
+ return;
+ }
+
+ event.preventDefault();
+ const el = event.currentTarget;
+ const headers = props.customHeaders || {};
+ let body: any;
+ const formData = new FormData(el); // TODO: maybe support null
+
+ const formPairs: {
+ key: string;
+ value: File | boolean | number | string | FileList;
+ }[] = Array.from(
+ event.currentTarget.querySelectorAll(\\"input,select,textarea\\")
+ )
+ .filter((el) => !!(el as HTMLInputElement).name)
+ .map((el) => {
+ let value: any;
+ const key = (el as HTMLImageElement).name;
+
+ if (el instanceof HTMLInputElement) {
+ if (el.type === \\"radio\\") {
+ if (el.checked) {
+ value = el.name;
+ return {
+ key,
+ value,
+ };
+ }
+ } else if (el.type === \\"checkbox\\") {
+ value = el.checked;
+ } else if (el.type === \\"number\\" || el.type === \\"range\\") {
+ const num = el.valueAsNumber;
+
+ if (!isNaN(num)) {
+ value = num;
+ }
+ } else if (el.type === \\"file\\") {
+ // TODO: one vs multiple files
+ value = el.files;
+ } else {
+ value = el.value;
+ }
+ } else {
+ value = (el as HTMLInputElement).value;
+ }
+
+ return {
+ key,
+ value,
+ };
+ });
+ let contentType = props.contentType;
+
+ if (props.sendSubmissionsTo === \\"email\\") {
+ contentType = \\"multipart/form-data\\";
+ }
+
+ Array.from(formPairs).forEach(({ value }) => {
+ if (
+ value instanceof File ||
+ (Array.isArray(value) && value[0] instanceof File) ||
+ value instanceof FileList
+ ) {
+ contentType = \\"multipart/form-data\\";
+ }
+ }); // TODO: send as urlEncoded or multipart by default
+ // because of ease of use and reliability in browser API
+ // for encoding the form?
+
+ if (contentType !== \\"application/json\\") {
+ body = formData;
+ } else {
+ // Json
+ const json = {};
+ Array.from(formPairs).forEach(({ value, key }) => {
+ set(json, key, value);
+ });
+ body = JSON.stringify(json);
+ }
+
+ if (contentType && contentType !== \\"multipart/form-data\\") {
+ if (
+ /* Zapier doesn't allow content-type header to be sent from browsers */ !(
+ sendWithJs && props.action?.includes(\\"zapier.com\\")
+ )
+ ) {
+ headers[\\"content-type\\"] = contentType;
+ }
+ }
+ const presubmitEvent = new CustomEvent(\\"presubmit\\", { detail: { body } });
+ if (formRef.current) {
+ formRef.current.dispatchEvent(presubmitEvent);
+ if (presubmitEvent.defaultPrevented) {
+ return;
+ }
+ }
+ setFormState(\\"sending\\");
+ const formUrl = \`\${
+ builder.env === \\"dev\\" ? \\"http://localhost:5000\\" : \\"https://builder.io\\"
+ }/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(
+ props.sendSubmissionsToEmail || \\"\\"
+ )}&name=\${encodeURIComponent(props.name || \\"\\")}\`;
+ fetch(
+ props.sendSubmissionsTo === \\"email\\"
+ ? formUrl
+ : props.action! /* TODO: throw error if no action URL */,
+ { body, headers, method: props.method || \\"post\\" }
+ ).then(
+ async (res) => {
+ let body;
+ const contentType = res.headers.get(\\"content-type\\");
+ if (contentType && contentType.indexOf(\\"application/json\\") !== -1) {
+ body = await res.json();
+ } else {
+ body = await res.text();
+ }
+ if (!res.ok && props.errorMessagePath) {
+ /* TODO: allow supplying an error formatter function */ let message =
+ get(body, props.errorMessagePath);
+ if (message) {
+ if (typeof message !== \\"string\\") {
+ /* TODO: ideally convert json to yaml so it woul dbe like error: - email has been taken */ message =
+ JSON.stringify(message);
+ }
+ setFormErrorMessage(message);
+ }
+ }
+ setResponseData(body);
+ setFormState(res.ok ? \\"success\\" : \\"error\\");
+ if (res.ok) {
+ const submitSuccessEvent = new CustomEvent(\\"submit:success\\", {
+ detail: { res, body },
+ });
+ if (formRef.current) {
+ formRef.current.dispatchEvent(submitSuccessEvent);
+ if (submitSuccessEvent.defaultPrevented) {
+ return;
+ }
+ /* TODO: option to turn this on/off? */ if (
+ props.resetFormOnSubmit !== false
+ ) {
+ formRef.current.reset();
+ }
+ }
+ /* TODO: client side route event first that can be preventDefaulted */ if (
+ props.successUrl
+ ) {
+ if (formRef.current) {
+ const event = new CustomEvent(\\"route\\", {
+ detail: { url: props.successUrl },
+ });
+ formRef.current.dispatchEvent(event);
+ if (!event.defaultPrevented) {
+ location.href = props.successUrl;
+ }
+ } else {
+ location.href = props.successUrl;
+ }
+ }
+ }
+ },
+ (err) => {
+ const submitErrorEvent = new CustomEvent(\\"submit:error\\", {
+ detail: { error: err },
+ });
+ if (formRef.current) {
+ formRef.current.dispatchEvent(submitErrorEvent);
+ if (submitErrorEvent.defaultPrevented) {
+ return;
+ }
+ }
+ setResponseData(err);
+ setFormState(\\"error\\");
+ }
+ );
+ }
+ }
+ return (
+
+ );
+}
+export default FormComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Image 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef, useEffect } from \\"react\\";
+
+function Image(props) {
+ const pictureRef = useRef(null);
+ const [scrollListener, setScrollListener] = useState(() => null);
+
+ const [imageLoaded, setImageLoaded] = useState(() => false);
+
+ function setLoaded() {
+ setImageLoaded(true);
+ }
+
+ function useLazyLoading() {
+ // TODO: Add more checks here, like testing for real web browsers
+ return !!props.lazy && isBrowser();
+ }
+
+ function isBrowser() {
+ return (
+ typeof window !== \\"undefined\\" && window.navigator.product != \\"ReactNative\\"
+ );
+ }
+
+ const [load, setLoad] = useState(() => false);
+
+ useEffect(() => {
+ if (useLazyLoading()) {
+ // throttled scroll capture listener
+ const listener = () => {
+ if (pictureRef.current) {
+ const rect = pictureRef.current.getBoundingClientRect();
+ const buffer = window.innerHeight / 2;
+
+ if (rect.top < window.innerHeight + buffer) {
+ setLoad(true);
+ setScrollListener(null);
+ window.removeEventListener(\\"scroll\\", listener);
+ }
+ }
+ };
+
+ setScrollListener(listener);
+ window.addEventListener(\\"scroll\\", listener, {
+ capture: true,
+ passive: true,
+ });
+ listener();
+ }
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (scrollListener) {
+ window.removeEventListener(\\"scroll\\", scrollListener);
+ }
+ };
+ }, []);
+
+ return (
+
+
+ {!useLazyLoading() || load ? (
+
+ {props.children}
+
+ {images?.map((item, itemIndex) => (
+
+ ))}
+
handleChange(value)}
+ />
+ );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > RawText 1`] = `
+"import * as React from \\"react\\";
+
+function RawText(props) {
+ return (
+
+ {props.options?.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+
+export default SelectComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > SlotNamed 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+ return (
+
+ <>{props.myAwesomeSlot}
+ <>{props.top}
+ <>{props.left || \\"Default left\\"}
+ <>{props.children || \\"Default Child\\"}
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props) {
+ const [reviews, setReviews] = useState(() => []);
+
+ const [name, setName] = useState(() => \\"test\\");
+
+ const [showReviewPrompt, setShowReviewPrompt] = useState(() => false);
+
+ function kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ }
+
+ function snakeCaseValue() {
+ return snakeCase(\\"testThis\\");
+ }
+
+ useEffect(() => {
+ fetch(
+ \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
+ props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
+ }&productId=\${props.productId || \\"2410511106127\\"}\`
+ )
+ .then((res) => res.json())
+ .then((data) => {
+ setReviews(data.data);
+ });
+ }, []);
+
+ return (
+
+
setShowReviewPrompt(true)}>
+ Write a review
+
+ {showReviewPrompt || \\"asdf\\" ? (
+ <>
+
+
+
+
{
+ event.preventDefault();
+ setShowReviewPrompt(false);
+ }}
+ >
+ Submit
+
+
+ ) : null}
+ {reviews?.map((review, index) => (
+
+
+
+
N: {index}
+
{review.author}
+
{review.reviewMessage}
+
+
+ ))}
+
+ {props.text}
+
+ );
+}
+
+export default SubmitButton;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props) {
+ const [name, setName] = useState(() => \\"Decadef20\\");
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+export default Text;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+function Textarea(props) {
+ return (
+
+ );
+}
+
+export default Textarea;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+function Video(props) {
+ return (
+
+ );
+}
+
+export default Video;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [name, setName] = useState(() => \\"steve\\");
+
+ function setName(value) {
+ setName(value);
+ }
+
+ function updateNameWithArrowFn(value) {
+ setName(value);
+ }
+
+ return
Hello {name}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > basicForNoTagReference 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicForNoTagRefComponent(props) {
+ const [name, setName] = useState(() => \\"VincentW\\");
+
+ const [TagName, setTagName] = useState(() => \\"div\\");
+
+ function TagNameGetter() {
+ return \\"span\\";
+ }
+
+ const [Tag, setTag] = useState(() => \\"span\\");
+
+ const TagNameGetterRef = TagNameGetter();
+
+ return (
+
+ Hello {name}
+ {props.actions?.map((action) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+
+export default MyBasicForNoTagRefComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, forwardRef } from \\"react\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ return (
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, forwardRef } from \\"react\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ return (
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MyBasicOnUpdateReturnComponent(props) {
+ const [name, setName] = useState(() => \\"PatrickJS\\");
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ setName(data.name);
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [name]);
+
+ return
Hello! {name}
;
+}
+
+export default MyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > class + ClassName + css 1`] = `
+"import * as React from \\"react\\";
+import MyComp from \\"./my-component\\";
+
+function MyBasicComponent(props) {
+ return (
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > class + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > className + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import type { JSX } from \\"../../../../jsx-runtime\\";
+
+function ClassNameCode(props) {
+ const [bindings, setBindings] = useState(() => \\"a binding\\");
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+
+export default ClassNameCode;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > classState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicComponent(props) {
+ const [classState, setClassState] = useState(() => \\"testClassName\\");
+
+ const [styleState, setStyleState] = useState(() => ({
+ color: \\"red\\",
+ }));
+
+ return (
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > componentWithContext 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>{foo.value}
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>
+ <>{foo.value}
+ other
+
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > contentState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+import BuilderContext from \\"@dummy/context.js\\";
+
+function RenderContent(props) {
+ return (
+
+ setting context
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > defaultProps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick()}
+ >
+ {props.buttonText}
+
+ ) : null}
+
+ );
+}
+
+Button.defaultProps = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+};
+
+export default Button;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function Button(props) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick(event)}
+ >
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+Button.defaultProps = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+};
+
+export default Button;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > defaultValsWithTypes 1`] = `
+"import * as React from \\"react\\";
+
+const DEFAULT_VALUES: Props = {
+ name: \\"Sami\\",
+};
+
+function ComponentWithTypes(props) {
+ return
Hello {props.name || DEFAULT_VALUES.name}
;
+}
+
+export default ComponentWithTypes;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [refToUse, setRefToUse] = useState(() =>
+ !(props.componentRef instanceof Function) ? props.componentRef : null
+ );
+
+ return
{refToUse}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+ function foo2() {
+ return props.foo + \\"foo\\";
+ }
+
+ function bar() {
+ return \\"bar\\";
+ }
+
+ function baz(i: number) {
+ return i + foo2().length;
+ }
+
+ return (
+
+
{foo2()}
+
{bar()}
+
{baz(1)}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > import types 1`] = `
+"import * as React from \\"react\\";
+import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
+import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
+
+function RenderContent(props) {
+ function getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ }
+
+ return (
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > multipleOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MultipleOnUpdate(props) {
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender as well\\");
+ });
+
+ return
;
+}
+
+export default MultipleOnUpdate;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MultipleOnUpdateWithDeps(props) {
+ const [a, setA] = useState(() => \\"a\\");
+
+ const [b, setB] = useState(() => \\"b\\");
+
+ const [c, setC] = useState(() => \\"c\\");
+
+ const [d, setD] = useState(() => \\"d\\");
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", a, b);
+
+ if (a === \\"a\\") {
+ setA(\\"b\\");
+ }
+ }, [a, b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", c, d);
+
+ if (a === \\"a\\") {
+ setA(\\"b\\");
+ }
+ }, [c, d]);
+
+ return
;
+}
+
+export default MultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicComponent(props) {
+ const [attrs, setAttrs] = useState(() => ({
+ hello: \\"world\\",
+ }));
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > nestedShow 1`] = `
+"import * as React from \\"react\\";
+
+function NestedShow(props) {
+ return (
+ <>
+ {props.conditionA ? (
+ <>
+ {!props.conditionB ? (
+
if condition A and condition B
+ ) : (
+
else-condition-B
+ )}
+
+ ) : (
+
else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props) {
+ return (
+
+ Hello world
+
+ );
+}
+
+export default NestedStyles;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function Embed(props) {
+ const elem = useRef(null);
+ function foo(event) {
+ console.log(\\"test2\\");
+ }
+
+ function elem_onInitEditingBldr(event) {
+ console.log(\\"test\\");
+ foo(event);
+ }
+
+ useEffect(() => {
+ elem.current?.addEventListener(\\"initEditingBldr\\", elem_onInitEditingBldr);
+ return () =>
+ elem.current?.removeEventListener(
+ \\"initEditingBldr\\",
+ elem_onInitEditingBldr
+ );
+ }, []);
+
+ useEffect(() => {
+ elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+ }, []);
+
+ return (
+
+ );
+}
+
+export default Embed;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > onInit & onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function OnInit(props) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ return
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useRef } from \\"react\\";
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props) {
+ const [name, setName] = useState(() => \\"\\");
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ setName(defaultValues.name || props.name);
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return
Default name defined by parent {name}
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ return
;
+}
+
+export default OnInitPlain;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props) {
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"Runs on unMount\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default Comp;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > onMountMultiple 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props) {
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+ useEffect(() => {
+ console.log(\\"Another one runs on Mount\\");
+ }, []);
+ useEffect(() => {
+ console.log(\\"SSR runs on Mount\\");
+ }, []);
+
+ return
;
+}
+
+export default Comp;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > onUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props) {
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function OnUpdateWithDeps(props) {
+ const [a, setA] = useState(() => \\"a\\");
+
+ const [b, setB] = useState(() => \\"b\\");
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", a, b, props.size);
+ }, [a, b, props.size]);
+
+ return
;
+}
+
+export default OnUpdateWithDeps;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
+"import * as React from \\"react\\";
+
+const b = 3;
+const foo = () => {};
+export const a = 3;
+export const bar = () => {};
+export function run
(value: T) {}
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > preserveTyping 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyBasicComponent(props) {
+ const [name, setName] = useState(() => \\"Decadef20\\");
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > propsInterface 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > propsType 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > referencingFunInsideHook 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props) {
+ function foo(params) {}
+
+ function bar() {}
+
+ function zoo() {
+ const params = {
+ cb: bar,
+ };
+ }
+
+ useEffect(() => {
+ foo({
+ someOption: bar,
+ });
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > renderBlock 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+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) {
+ 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;
+ }
+ }
+
+ function tag() {
+ return getBlockTag(useBlock());
+ }
+
+ function useBlock() {
+ return repeatItemData()
+ ? props.block
+ : getProcessedBlock({
+ block: props.block,
+ state: props.context.state,
+ context: props.context.context,
+ shouldEvaluateBindings: true,
+ });
+ }
+
+ function actions() {
+ return getBlockActions({
+ block: useBlock(),
+ state: props.context.state,
+ context: props.context.context,
+ });
+ }
+
+ function attributes() {
+ const blockProperties = getBlockProperties(useBlock());
+ return {
+ ...blockProperties,
+ ...(TARGET === \\"reactNative\\"
+ ? {
+ style: getReactNativeBlockStyles({
+ block: useBlock(),
+ context: props.context,
+ blockStyles: blockProperties.style,
+ }),
+ }
+ : {}),
+ };
+ }
+
+ function shouldWrap() {
+ return !component?.()?.noWrap;
+ }
+
+ 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(),
+ };
+ }
+
+ 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 ? useBlock().children : [];
+ return useBlock().children ?? [];
+ }
+
+ 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() : [];
+ }
+
+ function repeatItemData() {
+ /**
+ * we don't use \`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;
+ }
+
+ function inheritedTextStyles() {
+ if (TARGET !== \\"reactNative\\") {
+ return {};
+ }
+
+ const styles = getReactNativeBlockStyles({
+ block: useBlock(),
+ context: props.context,
+ blockStyles: attributes().style,
+ });
+ return extractTextStyles(styles);
+ }
+
+ 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(),
+ };
+ }
+
+ 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, setComponentInfo] = useState(() => null);
+
+ const RenderComponentTagRef = renderComponentTag();
+ const TagRef = tag();
+
+ return (
+ <>
+ {shouldWrap() ? (
+ <>
+ {isEmptyHtmlElement(tag()) ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+
+ trackClick(props.content.id)}
+ >
+
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+ return (
+ <>
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+function RenderStyles(props) {
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+ Bar
+
+ ) : (
+ Foo
+ )}
+
+ );
+}
+
+export default RenderStyles;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > self-referencing component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > self-referencing component with children 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.children}
+ {props.name === \\"Batman\\" ? (
+
+ Wayne
+
+ ) : null}
+
+ {props.conditionA ? <>Content0 : <>ContentA}
+ {props.conditionA ? <>ContentA : null}
+ {props.conditionA ? <> : <>ContentA}
+ {props.conditionA ? <>ContentB : <>{undefined}}
+ {props.conditionA ? <>{undefined} : <>ContentB}
+ {props.conditionA ? <>ContentC : null}
+ {props.conditionA ? <> : <>ContentC}
+ {props.conditionA ? <>ContentD : null}
+ {props.conditionA ? <> : <>ContentD}
+ {props.conditionA ? <>ContentE : <>hello}
+ {props.conditionA ? <>hello : <>ContentE}
+ {props.conditionA ? <>ContentF : <>123}
+ {props.conditionA ? <>123 : <>ContentF}
+ {props.conditionA === \\"Default\\" ? (
+ <>4mb
+ ) : props.conditionB === \\"Complete\\" ? (
+ <>20mb
+ ) : (
+ <>9mb
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ? <>20mb : <>9mb}
+ ) : (
+ <>4mb
+ )}
+
+ );
+}
+
+export default ShowWithOtherValues;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > showWithFor 1`] = `
+"import * as React from \\"react\\";
+
+function NestedShow(props) {
+ return (
+ <>
+ {props.conditionA ? (
+ <>
+ {props.items?.map((item, idx) => (
+ {item}
+ ))}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > showWithOtherValues 1`] = `
+"import * as React from \\"react\\";
+
+function ShowWithOtherValues(props) {
+ return (
+
+ {props.conditionA ? <>ContentA : null}
+ {props.conditionA ? <>ContentB : <>{undefined}}
+ {props.conditionA ? <>ContentC : null}
+ {props.conditionA ? <>ContentD : null}
+ {props.conditionA ? <>ContentE : <>hello}
+ {props.conditionA ? <>ContentF : <>123}
+
+ );
+}
+
+export default ShowWithOtherValues;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+function ShowRootText(props) {
+ return <>{props.conditionA ? <>ContentA : else-condition-A
};
+}
+
+export default ShowRootText;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicComponent(props) {
+ useEffect(() => {
+ console.log(\\"props.id changed\\", props.id);
+ console.log(\\"props.foo.value.bar.baz changed\\", props.foo.bar.baz);
+ }, [props.id, props.foo.bar.baz]);
+
+ return (
+
+ {props.id}
+ {props.foo.bar.baz}
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return {foo}
;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props) {
+ return (
+
+ );
+}
+
+export default StylePropClassAndCss;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props) {
+ return
+
+
+
+
+
+ );
+}
+
+export default SvgComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+import type { Foo } from \\"./foo-type\\";
+import type { Foo as Foo2 } from \\"./type-export\\";
+
+function TypeDependency(props) {
+ return {props.foo}
;
+}
+
+export default TypeDependency;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import { FooStore } from \\"./foo-store\\";
+
+function TypeExternalStore(props) {
+ const [_name, set_name] = useState(() => \\"test\\");
+
+ return Hello {_name}!
;
+}
+
+export default TypeExternalStore;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function TypeGetterStore(props) {
+ const [name, setName] = useState(() => \\"test\\");
+
+ function getName() {
+ if (name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return name;
+ }
+
+ function test() {
+ return \\"test\\";
+ }
+
+ return Hello {name}!
;
+}
+
+export default TypeGetterStore;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+ Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
+ Button
+
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+ Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function UseTargetComponent(props) {
+ function name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ }
+
+ const [lastName, setLastName] = useState(() => \\"bar\\");
+
+ useEffect(() => {
+ console.log(\\"react\\");
+ setLastName(\\"baz\\");
+ }, []);
+
+ return {name()}
;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`Mitosis, format: react > jsx > Typescript Test > webComponent 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { register } from \\"swiper/element/bundle\\";
+
+function MyBasicWebComponent(props) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ register();
+ hasInitialized.current = true;
+ }
+
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+
+export default MyBasicWebComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [name, setName] = useState(() => \\"Steve\\");
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [tortilla, setTortilla] = useState(() => \\"Plain\\");
+
+ const [fillings, setFillings] = useState(() => []);
+
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [value, setValue] = useState(() => \\"hello\\");
+
+ return {activeTab}
+ | ^
+ 36 |
+ 37 |
+ 38 |"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [numbers, setNumbers] = useState(() => [\\"one\\", \\"two\\", \\"three\\"]);
+
+ return (
+
+ {numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > eventHandlers 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ function log(msg = \\"hello\\") {
+ console.log(msg);
+ }
+
+ return (
+
+ log(\\"hi\\")}>Log
+ log(event)}>Log
+ log(event)}>Log
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [html, setHtml] = useState(() => \\"bold \\");
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > ifElse 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [show, setShow] = useState(() => true);
+
+ function toggle() {
+ setShow(!show);
+ }
+
+ return (
+ <>
+ {show ? (
+ <>
+ toggle(event)}> Hide
+
+ ) : (
+ toggle(event)}> Show
+ )}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props) {
+ const [disabled, setDisabled] = useState(() => false);
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > lifecycleHooks 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyComponent(props) {
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ useEffect(() => {
+ console.log(\\"onAfterUpdate\\");
+ });
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"onDestroy\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [name, setName] = useState(() => \\"Steve\\");
+
+ function lowercaseName() {
+ return name.toLowerCase();
+ }
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > reactiveWithFn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MyComponent(props) {
+ const [a, setA] = useState(() => 2);
+
+ const [b, setB] = useState(() => 5);
+
+ const [result, setResult] = useState(() => null);
+
+ function calculateResult(a_, b_) {
+ setResult(a_ * b_);
+ }
+
+ useEffect(() => {
+ calculateResult(a, b);
+ }, [a, b]);
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Javascript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {a + b}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [name, setName] = useState(() => \\"Steve\\");
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [tortilla, setTortilla] = useState(() => \\"Plain\\");
+
+ const [fillings, setFillings] = useState(() => []);
+
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [value, setValue] = useState(() => \\"hello\\");
+
+ return {activeTab}
+ | ^
+ 36 |
+ 37 |
+ 38 |"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [numbers, setNumbers] = useState(() => [\\"one\\", \\"two\\", \\"three\\"]);
+
+ return (
+
+ {numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > eventHandlers 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ function log(msg = \\"hello\\") {
+ console.log(msg);
+ }
+
+ return (
+
+ log(\\"hi\\")}>Log
+ log(event)}>Log
+ log(event)}>Log
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [html, setHtml] = useState(() => \\"bold \\");
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > ifElse 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [show, setShow] = useState(() => true);
+
+ function toggle() {
+ setShow(!show);
+ }
+
+ return (
+ <>
+ {show ? (
+ <>
+ toggle(event)}> Hide
+
+ ) : (
+ toggle(event)}> Show
+ )}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props) {
+ const [disabled, setDisabled] = useState(() => false);
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > lifecycleHooks 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyComponent(props) {
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ useEffect(() => {
+ console.log(\\"onAfterUpdate\\");
+ });
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"onDestroy\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function MyComponent(props) {
+ const [name, setName] = useState(() => \\"Steve\\");
+
+ function lowercaseName() {
+ return name.toLowerCase();
+ }
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > reactiveWithFn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useState, useEffect } from \\"react\\";
+
+function MyComponent(props) {
+ const [a, setA] = useState(() => 2);
+
+ const [b, setB] = useState(() => 5);
+
+ const [result, setResult] = useState(() => null);
+
+ function calculateResult(a_, b_) {
+ setResult(a_ * b_);
+ }
+
+ useEffect(() => {
+ calculateResult(a, b);
+ }, [a, b]);
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Mitosis, format: react > svelte > Typescript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {a + b}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
diff --git a/packages/core/src/__tests__/mitosis.test.ts b/packages/core/src/__tests__/mitosis.test.ts
new file mode 100644
index 0000000000..c1a711a3d8
--- /dev/null
+++ b/packages/core/src/__tests__/mitosis.test.ts
@@ -0,0 +1,28 @@
+import { componentToMitosis } from '@/generators/mitosis';
+import { runTestsForTarget } from './test-generator';
+
+describe('Mitosis, format: legacy', () => {
+ runTestsForTarget({
+ options: { format: 'legacy' },
+ target: 'mitosis',
+ generator: componentToMitosis,
+ });
+});
+
+describe('Mitosis, format: legacy (native loops and conditionals)', () => {
+ runTestsForTarget({
+ options: { format: 'legacy', nativeLoops: true, nativeConditionals: true },
+ target: 'mitosis',
+ generator: componentToMitosis,
+ });
+});
+
+describe('Mitosis, format: react', () => {
+ runTestsForTarget({
+ options: {
+ format: 'react',
+ },
+ target: 'mitosis',
+ generator: componentToMitosis,
+ });
+});
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index aae5dd63a6..5f2a5f5630 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -426,6 +426,18 @@ const JSX_TESTS_FOR_TARGET: Partial> = {
ADVANCED_REF,
ON_UPDATE_RETURN,
],
+ mitosis: [
+ BASIC_TESTS,
+ SLOTS_TESTS,
+ SHOW_TESTS,
+ FORWARD_REF_TESTS,
+ MULTI_ON_UPDATE_TESTS,
+ FORM_BLOCK_TESTS,
+ ADVANCED_REF,
+ ON_UPDATE_RETURN,
+ FOR_SHOW_TESTS,
+ CONTEXT_TEST,
+ ],
webcomponent: [
CONTEXT_TEST,
BASIC_TESTS,
diff --git a/packages/core/src/generators/mitosis/generator.ts b/packages/core/src/generators/mitosis/generator.ts
index 4a5361a2bc..869a8675e6 100644
--- a/packages/core/src/generators/mitosis/generator.ts
+++ b/packages/core/src/generators/mitosis/generator.ts
@@ -1,4 +1,5 @@
import { ToMitosisOptions } from '@/generators/mitosis/types';
+import { isMitosisNode } from '@/helpers/is-mitosis-node';
import {
runPostCodePlugins,
runPostJsonPlugins,
@@ -19,7 +20,7 @@ import { mapRefs } from '../../helpers/map-refs';
import { renderPreComponent } from '../../helpers/render-imports';
import { checkHasState } from '../../helpers/state';
import { MitosisComponent } from '../../types/mitosis-component';
-import { MitosisNode, checkIsForNode } from '../../types/mitosis-node';
+import { MitosisNode, checkIsForNode, checkIsShowNode } from '../../types/mitosis-node';
import { TranspilerGenerator } from '../../types/transpiler';
import { blockToReact, componentToReact } from '../react';
@@ -34,6 +35,7 @@ export const blockToMitosis = (
json: MitosisNode,
toMitosisOptions: Partial = {},
component: MitosisComponent,
+ insideJsx: boolean,
): string => {
const options: ToMitosisOptions = {
format: DEFAULT_FORMAT,
@@ -50,16 +52,48 @@ export const blockToMitosis = (
prettier: options.prettier,
},
component,
- true,
+ insideJsx,
);
}
+ if (options.nativeConditionals && checkIsShowNode(json)) {
+ const when = json.bindings.when?.code;
+ const elseCase = json.meta.else as MitosisNode;
+ const needsWrapper = json.children.length !== 1;
+
+ const renderChildren = `${needsWrapper ? '<>' : ''}
+ ${json.children
+ .map((child) => blockToMitosis(child, options, component, needsWrapper))
+ .join('\n')}
+ ${needsWrapper ? '' : ''}`;
+
+ const renderElse =
+ elseCase && isMitosisNode(elseCase)
+ ? blockToMitosis(elseCase, options, component, false)
+ : 'null';
+ return `${insideJsx ? '{' : ''}(${when}) ? ${renderChildren} : ${renderElse}${
+ insideJsx ? '}' : ''
+ }`;
+ }
+
if (checkIsForNode(json)) {
const needsWrapper = json.children.length !== 1;
+ if (options.nativeLoops) {
+ const a = `${insideJsx ? '{' : ''}(${json.bindings.each?.code}).map(
+ (${json.scope.forName}, ${json.scope.indexName || 'index'}) => (
+ ${needsWrapper ? '<>' : ''}
+ ${json.children
+ .map((child) => blockToMitosis(child, options, component, needsWrapper))
+ .join('\n')}
+ ${needsWrapper ? '' : ''}
+ ))${insideJsx ? '}' : ''}`;
+ console.log(a);
+ return a;
+ }
return `
{(${json.scope.forName}, ${json.scope.indexName || 'index'}) =>
${needsWrapper ? '<>' : ''}
- ${json.children.map((child) => blockToMitosis(child, options, component))}}
+ ${json.children.map((child) => blockToMitosis(child, options, component, needsWrapper))}}
${needsWrapper ? '' : ''}
`;
}
@@ -111,7 +145,7 @@ export const blockToMitosis = (
}
str += '>';
if (json.children) {
- str += json.children.map((item) => blockToMitosis(item, options, component)).join('\n');
+ str += json.children.map((item) => blockToMitosis(item, options, component, true)).join('\n');
}
str += ``;
@@ -169,6 +203,13 @@ export const componentToMitosis: TranspilerGenerator>
const addWrapper = json.children.length !== 1 || isRootTextNode(json);
const components = Array.from(getComponents(json));
+ const mitosisCoreComponents: string[] = [];
+ if (!options.nativeConditionals) {
+ mitosisCoreComponents.push('Show');
+ }
+ if (!options.nativeLoops) {
+ mitosisCoreComponents.push('For');
+ }
const mitosisComponents = components.filter((item) => mitosisCoreComponents.includes(item));
const otherComponents = components.filter((item) => !mitosisCoreComponents.includes(item));
@@ -218,7 +259,9 @@ export const componentToMitosis: TranspilerGenerator>
${json.style ? `useStyle(\`${json.style}\`)` : ''}
return (${addWrapper ? '<>' : ''}
- ${json.children.map((item) => blockToMitosis(item, options, component)).join('\n')}
+ ${json.children
+ .map((item) => blockToMitosis(item, options, component, addWrapper))
+ .join('\n')}
${addWrapper ? '' : ''})
}
diff --git a/packages/core/src/generators/mitosis/types.ts b/packages/core/src/generators/mitosis/types.ts
index 165dd87c67..0e65693968 100644
--- a/packages/core/src/generators/mitosis/types.ts
+++ b/packages/core/src/generators/mitosis/types.ts
@@ -2,6 +2,8 @@ import { BaseTranspilerOptions } from '@/types/transpiler';
export interface ToMitosisOptions extends BaseTranspilerOptions {
format: 'react' | 'legacy';
+ nativeConditionals?: boolean;
+ nativeLoops?: boolean;
}
export type MitosisMetadata = {};
diff --git a/packages/core/src/types/mitosis-node.ts b/packages/core/src/types/mitosis-node.ts
index 14e815a64a..2c9dd2468b 100644
--- a/packages/core/src/types/mitosis-node.ts
+++ b/packages/core/src/types/mitosis-node.ts
@@ -65,6 +65,12 @@ export type ForNode = BaseNode & {
};
};
+export type ShowNode = BaseNode & {
+ name: 'Show';
+};
+
export type MitosisNode = BaseNode | ForNode;
export const checkIsForNode = (node: MitosisNode): node is ForNode => node.name === 'For';
+
+export const checkIsShowNode = (node: MitosisNode): node is ShowNode => node.name === 'Show';