+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+
+export default MyBooleanAttribute;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props) {
+ const state = useBuilderState({ name: \\"Steve\\", dev: \\"PatrickJS\\" });
+
+ return (
+ state.handleChange(value)}
+ />
+ );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > RawText 1`] = `
+"import * as React from \\"react\\";
+
+function RawText(props) {
+ const state = useBuilderState({});
+
+ return (
+
+ {props.options?.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+
+export default SelectComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+ const state = useBuilderState({});
+
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > SlotJsx 1`] = `
+"import * as React from \\"react\\";
+import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+
+function SlotCode(props) {
+ const state = useBuilderState({});
+
+ return (
+
+ Hello
} />
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > SlotNamed 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+ const state = useBuilderState({});
+
+ return (
+
+ <>{props.myAwesomeSlot}
+ <>{props.top}
+ <>{props.left || \\"Default left\\"}
+ <>{props.children || \\"Default Child\\"}
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props) {
+ const state = useBuilderState({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ 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) => {
+ 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}
+
+ );
+}
+
+export default SubmitButton;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props) {
+ const state = useBuilderState({ name: \\"Decadef20\\" });
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+export default Text;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+function Textarea(props) {
+ const state = useBuilderState({});
+
+ return (
+
+ );
+}
+
+export default Textarea;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+function Video(props) {
+ const state = useBuilderState({});
+
+ return (
+
+ );
+}
+
+export default Video;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ });
+
+ return
Hello {state.name}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > basicForNoTagReference 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicForNoTagRefComponent(props) {
+ const state = useBuilderState({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ });
+
+ return (
+
+ Hello {state.name}
+ {props.actions?.map((action) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+
+export default MyBasicForNoTagRefComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const state = useBuilderState({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const state = useBuilderState({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicOnUpdateReturnComponent(props) {
+ const state = useBuilderState({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ state.name = data.name;
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [state.name]);
+
+ return
Hello! {state.name}
;
+}
+
+export default MyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > class + ClassName + css 1`] = `
+"import * as React from \\"react\\";
+import MyComp from \\"./my-component\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({});
+
+ 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[`React - stateType: builder > jsx > Javascript Test > class + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > className + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function ClassNameCode(props) {
+ const state = useBuilderState({ bindings: \\"a binding\\" });
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+
+export default ClassNameCode;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > classState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({
+ classState: \\"testClassName\\",
+ styleState: {
+ color: \\"red\\",
+ },
+ });
+
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > 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 state = useBuilderState({});
+
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>{foo.value}
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`React - stateType: builder > 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 state = useBuilderState({});
+
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>
+ <>{foo.value}
+ other
+
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`React - stateType: builder > 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) {
+ const state = useBuilderState({});
+
+ return (
+
+ setting context
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > defaultProps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function Button(props) {
+ const state = useBuilderState({});
+
+ 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[`React - stateType: builder > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function Button(props) {
+ const state = useBuilderState({});
+
+ 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[`React - stateType: builder > jsx > Javascript Test > defaultValsWithTypes 1`] = `
+"import * as React from \\"react\\";
+
+const DEFAULT_VALUES = {
+ name: \\"Sami\\",
+};
+
+function ComponentWithTypes(props) {
+ const state = useBuilderState({});
+
+ return
Hello {props.name || DEFAULT_VALUES.name}
;
+}
+
+export default ComponentWithTypes;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ });
+
+ return
{state.refToUse}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+ const state = useBuilderState({
+ 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)}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > import types 1`] = `
+"import * as React from \\"react\\";
+import RenderBlock from \\"./builder-render-block.raw\\";
+
+function RenderContent(props) {
+ const state = useBuilderState({
+ getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ },
+ });
+
+ return (
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > multipleOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MultipleOnUpdate(props) {
+ const state = useBuilderState({});
+
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender as well\\");
+ });
+
+ return
;
+}
+
+export default MultipleOnUpdate;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MultipleOnUpdateWithDeps(props) {
+ const state = useBuilderState({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", state.a, state.b);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.a, state.b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", state.c, state.d);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.c, state.d]);
+
+ return
;
+}
+
+export default MultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({
+ attrs: {
+ hello: \\"world\\",
+ },
+ });
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > nestedShow 1`] = `
+"import * as React from \\"react\\";
+
+function NestedShow(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+ {props.conditionA ? (
+ <>
+ {!props.conditionB ? (
+
if condition A and condition B
+ ) : (
+
else-condition-B
+ )}
+
+ ) : (
+
else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
Hello world
+
+
+ );
+}
+
+export default NestedStyles;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function Embed(props) {
+ const elem = useRef(null);
+ const state = useBuilderState({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ elem_onInitEditingBldr(event) {
+ console.log(\\"test\\");
+ state.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[`React - stateType: builder > jsx > Javascript Test > onInit & onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function OnInit(props) {
+ const state = useBuilderState({});
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ return
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props) {
+ const state = useBuilderState({ name: \\"\\" });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = defaultValues.name || props.name;
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return
Default name defined by parent {state.name}
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props) {
+ const state = useBuilderState({});
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ return
;
+}
+
+export default OnInitPlain;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props) {
+ const state = useBuilderState({});
+
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"Runs on unMount\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default Comp;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > onMountMultiple 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props) {
+ const state = useBuilderState({});
+
+ 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[`React - stateType: builder > jsx > Javascript Test > onUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props) {
+ const state = useBuilderState({});
+
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdateWithDeps(props) {
+ const state = useBuilderState({ a: \\"a\\", b: \\"b\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", state.a, state.b, props.size);
+ }, [state.a, state.b, props.size]);
+
+ return
;
+}
+
+export default OnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: builder > 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) {
+ const state = useBuilderState({});
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > preserveTyping 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+
Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({ name: \\"Decadef20\\" });
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > propsInterface 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+
Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > propsType 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+
Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > referencingFunInsideHook 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props) {
+ const state = useBuilderState({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ });
+
+ useEffect(() => {
+ state.foo({
+ someOption: state.bar,
+ });
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > renderBlock 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { TARGET } from \\"../../constants/target.js\\";
+import { evaluate } from \\"../../functions/evaluate.js\\";
+import { extractTextStyles } from \\"../../functions/extract-text-styles.js\\";
+import { getBlockActions } from \\"../../functions/get-block-actions.js\\";
+import { getBlockComponentOptions } from \\"../../functions/get-block-component-options.js\\";
+import { getBlockProperties } from \\"../../functions/get-block-properties.js\\";
+import { getBlockTag } from \\"../../functions/get-block-tag.js\\";
+import { getProcessedBlock } from \\"../../functions/get-processed-block.js\\";
+import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-block-styles.js\\";
+import BlockStyles from \\"./block-styles\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import RenderComponent from \\"./render-component\\";
+import RenderRepeatedBlock from \\"./render-repeated-block\\";
+
+function RenderBlock(props) {
+ const state = useBuilderState({
+ 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;
+ }
+ },
+ componentInfo: null,
+ });
+
+ return (
+ <>
+ {state.shouldWrap ? (
+ <>
+ {isEmptyHtmlElement(state.tag) ? (
+
+ ) : null}
+ {!isEmptyHtmlElement(state.tag) && state.repeatItemData ? (
+ <>
+ {state.repeatItemData?.map((data, index) => (
+
+ ))}
+
+ ) : null}
+ {!isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+
+
+ )}
+
+ );
+}
+
+export default RenderBlock;
+"
+`;
+
+exports[`React - stateType: builder > 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) {
+ const state = useBuilderState({});
+
+ useEffect(() => {
+ sendComponentsToVisualEditor(props.customComponents);
+ }, []);
+
+ useEffect(() => {
+ dispatchNewContentToVisualEditor(props.content);
+ }, [props.content]);
+
+ return (
+ <>
+
+ trackClick(props.content.id)}>
+
+
+
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > rootFragmentMultiNode 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+function RenderStyles(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+
Bar
+
+ ) : (
+
Foo
+ )}
+
+ );
+}
+
+export default RenderStyles;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > self-referencing component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > self-referencing component with children 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+
+ {props.name}
+ {props.children}
+ {props.name === \\"Batman\\" ? (
+
+ Wayne
+
+ ) : null}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > showExpressions 1`] = `
+"import * as React from \\"react\\";
+
+function ShowWithOtherValues(props) {
+ const state = useBuilderState({});
+
+ 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
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ?
complete
: <>9mb}
+ ) : props.conditionC === \\"Complete\\" ? (
+ <>dff
+ ) : (
+
complete else
+ )}
+
+ );
+}
+
+export default ShowWithOtherValues;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > showWithFor 1`] = `
+"import * as React from \\"react\\";
+
+function NestedShow(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+ {props.conditionA ? (
+ <>
+ {props.items?.map((item, idx) => (
+
{item}
+ ))}
+
+ ) : (
+
else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > showWithOtherValues 1`] = `
+"import * as React from \\"react\\";
+
+function ShowWithOtherValues(props) {
+ const state = useBuilderState({});
+
+ 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[`React - stateType: builder > jsx > Javascript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+function ShowRootText(props) {
+ const state = useBuilderState({});
+
+ return <>{props.conditionA ? <>ContentA :
else-condition-A
};
+}
+
+export default ShowRootText;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > signalsOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({});
+
+ 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[`React - stateType: builder > jsx > Javascript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({});
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > spreadNestedProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({});
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > spreadProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({});
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function StringLiteralStore(props) {
+ const state = useBuilderState({ foo: 123 });
+
+ return
{state.foo}
;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
+
+
+ );
+}
+
+export default StylePropClassAndCss;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props) {
+ const state = useBuilderState({});
+
+ return
;
+}
+
+export default SubComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > svgComponent 1`] = `
+"import * as React from \\"react\\";
+
+function SvgComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default SvgComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+function TypeDependency(props) {
+ const state = useBuilderState({});
+
+ return
{props.foo}
;
+}
+
+export default TypeDependency;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function TypeExternalStore(props) {
+ const state = useBuilderState({ _name: \\"test\\" });
+
+ return
Hello {state._name}!
;
+}
+
+export default TypeExternalStore;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function TypeGetterStore(props) {
+ const state = useBuilderState({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ });
+
+ return
Hello {state.name}!
;
+}
+
+export default TypeGetterStore;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
+ Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function UseTargetComponent(props) {
+ const state = useBuilderState({
+ get name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ foo: \\"bar\\",
+ });
+
+ useEffect(() => {
+ console.log(state.foo);
+ state.foo = \\"bar\\";
+ console.log(\\"react\\");
+ state.lastName = \\"baz\\";
+ console.log(state.foo);
+ state.foo = \\"baz\\";
+ }, []);
+
+ return
{state.name}
;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Javascript Test > webComponent 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { register } from \\"swiper/element/bundle\\";
+
+function MyBasicWebComponent(props) {
+ const state = useBuilderState({});
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ register();
+ hasInitialized.current = true;
+ }
+
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+
+export default MyBasicWebComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Remove Internal mitosis package 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const state = useBuilderState({ name: \\"PatrickJS\\" });
+
+ return (
+
+ Hello {state.name}! I can run in React, Qwik, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefComponent(props: Props) {
+ const inputRef = useRef
(null);
+ const inputNoArgRef = useRef(null);
+ const state = useBuilderState({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
+
+ 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!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface MyBasicComponentProps {
+ id: string;
+}
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ const state = useBuilderState({
+ name: \\"Steve\\",
+ underscore_fn_name() {
+ return \\"bar\\";
+ },
+ age: 1,
+ sports: [\\"\\"],
+ });
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Basic Context 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props: any) {
+ const state = useBuilderState({
+ name: \\"PatrickJS\\",
+ onChange: 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\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface Props {
+ hi: string;
+ bye: string;
+}
+
+function MyBasicOnMountUpdateComponent(props: Props) {
+ const state = useBuilderState({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = \\"PatrickJS onInit\\" + props.hi;
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ }, []);
+
+ return Hello {state.name}
;
+}
+
+export default MyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicOutputsComponent(props: any) {
+ const state = useBuilderState({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicOutputsComponent(props: any) {
+ const state = useBuilderState({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > BasicAttribute 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({});
+
+ return
+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+
+export default MyBooleanAttribute;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props: any) {
+ const state = useBuilderState({ name: \\"Steve\\", dev: \\"PatrickJS\\" });
+
+ return (
+
+ );
+}
+
+export default MyBasicChildComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicForComponent(props: any) {
+ const state = useBuilderState({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ });
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {state.names?.map((person) => (
+ <>
+
+ );
+}
+
+export default MyBasicForComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > BasicRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefComponent(props: Props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const state = useBuilderState({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ 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!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefAssignmentComponent(props: Props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ const state = useBuilderState({
+ handlerClick: function handlerClick(event: Event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ },
+ });
+
+ return (
+
+ state.handlerClick(evt)}>Click
+
+ );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+}
+
+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: Props) {
+ const state = useBuilderState({ count: 0 });
+
+ const prevCount = useRef(state.count);
+
+ useEffect(() => {
+ prevCount.current = state.count;
+ }, [state.count]);
+
+ return (
+
+
+ Now: {state.count}, before: {prevCount.current}
+
+ (state.count += 1)}>Increment
+
+ );
+}
+
+export default MyPreviousComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Button 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+ const state = useBuilderState({});
+
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ {props.columns?.map((column, index) => (
+
+ {column.content}
+ {index}
+
+ ))}
+
+ <>{props.slotTesting}
+
+
+
+ <>{props.children}
+
+
state.show()}
+ className={state.cls}
+ >
+ {state.showContent && props.slotContent ? (
+ <>{props.content || \\"{props.content}\\"}
+ ) : null}
+
+
+
{props.children}
+
(null);
+ const state = useBuilderState({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface CustomCodeProps {
+ code: string;
+ replaceNodes?: boolean;
+}
+
+function CustomCode(props: CustomCodeProps) {
+ const elem = useRef(null);
+ const state = useBuilderState({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Form 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+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\\";
+
+function FormComponent(props: FormProps) {
+ const formRef = useRef(null);
+ const state = useBuilderState({
+ 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\\";
+ }
+ );
+ }
+ },
+ });
+ return (
+ <>
+ {\\" \\"}
+ {\\" \\"}
+ {\\" \\"}
+
+ );
+}
+export default FormComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Image 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+// 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;
+}
+
+function Image(props: ImageProps) {
+ const pictureRef = useRef(null);
+ const state = useBuilderState({
+ 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,
+ });
+
+ useEffect(() => {
+ 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();
+ }
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (state.scrollListener) {
+ window.removeEventListener(\\"scroll\\", state.scrollListener);
+ }
+ };
+ }, []);
+
+ return (
+ <>
+
+
+ {!state.useLazyLoading() || state.load ? (
+
+ {props.children}
+
+ {state.images?.map((item, itemIndex) => (
+
+ ))}
+
state.handleChange(value)}
+ />
+ );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > RawText 1`] = `
+"import * as React from \\"react\\";
+
+export interface RawTextProps {
+ attributes?: any;
+ text?: string; // builderBlock?: any;
+}
+
+function RawText(props: RawTextProps) {
+ const state = useBuilderState({});
+
+ return (
+
+ {props.options?.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+
+export default SelectComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+ const state = useBuilderState({});
+
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > SlotNamed 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+ const state = useBuilderState({});
+
+ return (
+
+ <>{props.myAwesomeSlot}
+ <>{props.top}
+ <>{props.left || \\"Default left\\"}
+ <>{props.children || \\"Default Child\\"}
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type SmileReviewsProps = {
+ productId: string;
+ apiKey: string;
+};
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props: SmileReviewsProps) {
+ const state = useBuilderState({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ 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) => {
+ 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}
+
+ );
+}
+
+export default SubmitButton;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface TextProps {
+ attributes?: any;
+ rtlMode: boolean;
+ text?: string;
+ content?: string;
+ builderBlock?: any;
+}
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props: TextProps) {
+ const state = useBuilderState({ name: \\"Decadef20\\" });
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+export default Text;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+export interface TextareaProps {
+ attributes?: any;
+ name?: string;
+ value?: string;
+ defaultValue?: string;
+ placeholder?: string;
+}
+
+function Textarea(props: TextareaProps) {
+ const state = useBuilderState({});
+
+ return (
+
+ );
+}
+
+export default Textarea;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+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;
+}
+
+function Video(props: VideoProps) {
+ const state = useBuilderState({});
+
+ return (
+
+ );
+}
+
+export default Video;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ });
+
+ return
Hello {state.name}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > basicForNoTagReference 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicForNoTagRefComponent(props: any) {
+ const state = useBuilderState({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ });
+
+ return (
+
+ Hello {state.name}
+ {props.actions?.map((action) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+
+export default MyBasicForNoTagRefComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+ inputRef: HTMLInputElement;
+}
+
+const MyBasicForwardRefComponent = forwardRef
(
+ function MyBasicForwardRefComponent(props: Props, inputRef) {
+ const state = useBuilderState({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+ inputRef: HTMLInputElement;
+}
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props: Props, inputRef) {
+ const state = useBuilderState({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicOnUpdateReturnComponent(props: any) {
+ const state = useBuilderState({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ state.name = data.name;
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [state.name]);
+
+ return Hello! {state.name}
;
+}
+
+export default MyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > class + ClassName + css 1`] = `
+"import * as React from \\"react\\";
+import MyComp from \\"./my-component\\";
+
+function MyBasicComponent(props: any) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > className + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string | JSX.Element;
+ slotTesting: JSX.Element;
+};
+import type { JSX } from \\"../../../../jsx-runtime\\";
+
+function ClassNameCode(props: Props) {
+ const state = useBuilderState({ bindings: \\"a binding\\" });
+
+ return (
+
+
Without Binding
+
With binding
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > componentWithContext 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+ const state = useBuilderState({});
+
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>{foo.value}
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+ const state = useBuilderState({});
+
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>
+ <>{foo.value}
+ other
+
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`React - stateType: builder > 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: any) {
+ const state = useBuilderState({});
+
+ return (
+
+ setting context
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > defaultProps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ buttonText?: string; // no default value
+
+ link?: string;
+ openLinkInNewTab?: boolean;
+ onClick?: () => void;
+}
+
+function Button(props: ButtonProps) {
+ const state = useBuilderState({});
+
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick()}
+ >
+ {props.buttonText}
+
+ ) : null}
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick(event)}
+ >
+ {props.text}
+
+ ) : null}
+
Hello {props.name || DEFAULT_VALUES.name}
;
+}
+
+export default ComponentWithTypes;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ });
+
+ return {state.refToUse}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ foo: string;
+}
+
+function Button(props: ButtonProps) {
+ const state = useBuilderState({
+ 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)}
+
;
+}
+
+export default MultipleOnUpdate;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MultipleOnUpdateWithDeps(props: any) {
+ const state = useBuilderState({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", state.a, state.b);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.a, state.b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", state.c, state.d);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.c, state.d]);
+
+ return
;
+}
+
+export default MultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ const state = useBuilderState({
+ attrs: {
+ hello: \\"world\\",
+ },
+ });
+
+ return if condition A and condition B
+ ) : (
+ else-condition-B
+ )}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props: any) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+ Hello world
+
+
+ );
+}
+
+export default NestedStyles;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function Embed(props: any) {
+ const elem = useRef(null);
+ const state = useBuilderState({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ elem_onInitEditingBldr(event) {
+ console.log(\\"test\\");
+ state.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[`React - stateType: builder > jsx > Typescript Test > onInit & onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function OnInit(props: any) {
+ const state = useBuilderState({});
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ return
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+type Props = {
+ name: string;
+};
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props: Props) {
+ const state = useBuilderState({ name: \\"\\" });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = defaultValues.name || props.name;
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return Default name defined by parent {state.name}
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props: any) {
+ const state = useBuilderState({});
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ return
;
+}
+
+export default OnInitPlain;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props: any) {
+ const state = useBuilderState({});
+
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"Runs on unMount\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default Comp;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > onMountMultiple 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props: any) {
+ const state = useBuilderState({});
+
+ 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[`React - stateType: builder > jsx > Typescript Test > onUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props: any) {
+ const state = useBuilderState({});
+
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type Props = {
+ size: string;
+};
+
+function OnUpdateWithDeps(props: Props) {
+ const state = useBuilderState({ a: \\"a\\", b: \\"b\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", state.a, state.b, props.size);
+ }, [state.a, state.b, props.size]);
+
+ return
;
+}
+
+export default OnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
+"import * as React from \\"react\\";
+
+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) {}
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ const state = useBuilderState({});
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > preserveTyping 1`] = `
+"import * as React from \\"react\\";
+
+export type A = \\"test\\";
+export interface C {
+ n: \\"test\\";
+}
+type B = \\"test2\\";
+interface D {
+ n: \\"test\\";
+}
+export interface MyBasicComponentProps {
+ name: string;
+ age?: number;
+}
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ const state = useBuilderState({});
+
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+type Props = {
+ children: any;
+ type: string;
+};
+
+function MyBasicComponent(props: Props) {
+ const state = useBuilderState({ name: \\"Decadef20\\" });
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > propsInterface 1`] = `
+"import * as React from \\"react\\";
+
+interface Person {
+ name: string;
+ age?: number;
+}
+
+function MyBasicComponent(props: Person | never) {
+ const state = useBuilderState({});
+
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > propsType 1`] = `
+"import * as React from \\"react\\";
+
+type Person = {
+ name: string;
+ age?: number;
+};
+
+function MyBasicComponent(props: Person) {
+ const state = useBuilderState({});
+
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > referencingFunInsideHook 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props: any) {
+ const state = useBuilderState({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ });
+
+ useEffect(() => {
+ state.foo({
+ someOption: state.bar,
+ });
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > renderBlock 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export type RenderBlockProps = {
+ block: BuilderBlock;
+ context: BuilderContextInterface;
+};
+import { TARGET } from \\"../../constants/target.js\\";
+import type {
+ BuilderContextInterface,
+ RegisteredComponent,
+} from \\"../../context/types.js\\";
+import { evaluate } from \\"../../functions/evaluate.js\\";
+import { extractTextStyles } from \\"../../functions/extract-text-styles.js\\";
+import { getBlockActions } from \\"../../functions/get-block-actions.js\\";
+import { getBlockComponentOptions } from \\"../../functions/get-block-component-options.js\\";
+import { getBlockProperties } from \\"../../functions/get-block-properties.js\\";
+import { getBlockTag } from \\"../../functions/get-block-tag.js\\";
+import { getProcessedBlock } from \\"../../functions/get-processed-block.js\\";
+import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-block-styles.js\\";
+import type { BuilderBlock } from \\"../../types/builder-block.js\\";
+import type { Nullable } from \\"../../types/typescript.js\\";
+import BlockStyles from \\"./block-styles\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import type { RenderComponentProps } from \\"./render-component\\";
+import RenderComponent from \\"./render-component\\";
+import RenderRepeatedBlock from \\"./render-repeated-block\\";
+import type { RepeatData } from \\"./types.js\\";
+
+function RenderBlock(props: RenderBlockProps) {
+ const state = useBuilderState({
+ 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;
+ }
+ },
+ componentInfo: null,
+ });
+
+ return (
+ <>
+ {state.shouldWrap ? (
+ <>
+ {isEmptyHtmlElement(state.tag) ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+
+ trackClick(props.content.id)}>
+
+
+
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+export interface RenderStylesProps {
+ foo: string;
+}
+
+function RenderStyles(props: RenderStylesProps) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+ Bar
+
+ ) : (
+ Foo
+ )}
+
+ );
+}
+
+export default RenderStyles;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > self-referencing component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({});
+
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > self-referencing component with children 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({});
+
+ 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
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ?
complete
: <>9mb}
+ ) : props.conditionC === \\"Complete\\" ? (
+ <>dff
+ ) : (
+
complete else
+ )}
+
{item}
+ ))}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > showWithOtherValues 1`] = `
+"import * as React from \\"react\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+function ShowWithOtherValues(props: Props) {
+ const state = useBuilderState({});
+
+ 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[`React - stateType: builder > jsx > Typescript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+function ShowRootText(props: Props) {
+ const state = useBuilderState({});
+
+ return <>{props.conditionA ? <>ContentA : else-condition-A
};
+}
+
+export default ShowRootText;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type Props = {
+ id: string;
+ foo: {
+ bar: {
+ baz: number;
+ };
+ };
+};
+
+function MyBasicComponent(props: Props) {
+ const state = useBuilderState({});
+
+ 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[`React - stateType: builder > jsx > Typescript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ const state = useBuilderState({});
+
+ return {state.foo}
;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props: any) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
+
+
+ );
+}
+
+export default StylePropClassAndCss;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props: any) {
+ const state = useBuilderState({});
+
+ return
+
+
+
+
+
+ );
+}
+
+export default SvgComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+export type TypeDependencyProps = {
+ foo: Foo;
+ foo2: Foo2;
+};
+import type { Foo } from \\"./foo-type\\";
+import type { Foo as Foo2 } from \\"./type-export\\";
+
+function TypeDependency(props: TypeDependencyProps) {
+ const state = useBuilderState({});
+
+ return {props.foo}
;
+}
+
+export default TypeDependency;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { FooStore } from \\"./foo-store\\";
+
+function TypeExternalStore(props: any) {
+ const state = useBuilderState({ _name: \\"test\\" });
+
+ return Hello {state._name}!
;
+}
+
+export default TypeExternalStore;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+type GetterStore = {
+ getName: () => string;
+ name: string;
+ get test(): string;
+};
+
+function TypeGetterStore(props: any) {
+ const state = useBuilderState({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ });
+
+ return Hello {state.name}!
;
+}
+
+export default TypeGetterStore;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+ Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+
+ Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({});
+
+ return (
+ <>
+ Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function UseTargetComponent(props: any) {
+ const state = useBuilderState({
+ get name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ foo: \\"bar\\",
+ });
+
+ useEffect(() => {
+ console.log(state.foo);
+ state.foo = \\"bar\\";
+ console.log(\\"react\\");
+ state.lastName = \\"baz\\";
+ console.log(state.foo);
+ state.foo = \\"baz\\";
+ }, []);
+
+ return {state.name}
;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`React - stateType: builder > jsx > Typescript Test > webComponent 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { register } from \\"swiper/element/bundle\\";
+
+function MyBasicWebComponent(props: any) {
+ const state = useBuilderState({});
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ register();
+ hasInitialized.current = true;
+ }
+
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+
+export default MyBasicWebComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({ name: \\"Steve\\" });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({ tortilla: \\"Plain\\", fillings: [] });
+
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({ value: \\"hello\\" });
+
+ return {state.activeTab}
+ | ^
+ 36 |
+ 37 |
+ 38 |"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
+
+ return (
+
+ {state.numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > eventHandlers 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ });
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({ html: \\"bold \\" });
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > ifElse 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ });
+
+ return (
+ <>
+ {state.show ? (
+ <>
+ state.toggle(event)}> Hide
+
+ ) : (
+ state.toggle(event)}> Show
+ )}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({ disabled: false });
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > lifecycleHooks 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({});
+
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ useEffect(() => {
+ console.log(\\"onAfterUpdate\\");
+ });
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"onDestroy\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > reactiveWithFn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ });
+
+ useEffect(() => {
+ state.calculateResult(state.a, state.b);
+ }, [state.a, state.b]);
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Javascript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const state = useBuilderState({});
+
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({ name: \\"Steve\\" });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({ tortilla: \\"Plain\\", fillings: [] });
+
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({ value: \\"hello\\" });
+
+ return {state.activeTab}
+ | ^
+ 36 |
+ 37 |
+ 38 |"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
+
+ return (
+
+ {state.numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > eventHandlers 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ });
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({ html: \\"bold \\" });
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > ifElse 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ });
+
+ return (
+ <>
+ {state.show ? (
+ <>
+ state.toggle(event)}> Hide
+
+ ) : (
+ state.toggle(event)}> Show
+ )}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({ disabled: false });
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > lifecycleHooks 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({});
+
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ useEffect(() => {
+ console.log(\\"onAfterUpdate\\");
+ });
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"onDestroy\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > reactiveWithFn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ });
+
+ useEffect(() => {
+ state.calculateResult(state.a, state.b);
+ }, [state.a, state.b]);
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: builder > svelte > Typescript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const state = useBuilderState({});
+
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
new file mode 100644
index 0000000000..daf5cb6d9c
--- /dev/null
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -0,0 +1,8251 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`React - stateType: mobx > jsx > Javascript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const state = useLocalObservable(() => ({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ }));
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
+
+ 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!
+
+
+
+ );
+}
+
+const observedMyBasicRefComponent = observer(MyBasicRefComponent);
+export default observedMyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props) {
+ const state = useLocalObservable(() => ({
+ name: \\"Steve\\",
+ underscore_fn_name() {
+ return \\"bar\\";
+ },
+ age: 1,
+ sports: [\\"\\"],
+ }));
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Basic Context 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props) {
+ const state = useLocalObservable(() => ({
+ name: \\"PatrickJS\\",
+ onChange: 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\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicOnMountUpdateComponent(props) {
+ const state = useLocalObservable(() => ({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ }));
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = \\"PatrickJS onInit\\" + props.hi;
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ }, []);
+
+ return Hello {state.name}
;
+}
+
+const observedMyBasicOnMountUpdateComponent = observer(
+ MyBasicOnMountUpdateComponent
+);
+export default observedMyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicOutputsComponent(props) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+const observedMyBasicOutputsComponent = observer(MyBasicOutputsComponent);
+export default observedMyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicOutputsComponent(props) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+const observedMyBasicOutputsComponent = observer(MyBasicOutputsComponent);
+export default observedMyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > BasicAttribute 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return
+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+
+const observedMyBooleanAttribute = observer(MyBooleanAttribute);
+export default observedMyBooleanAttribute;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props) {
+ const state = useLocalObservable(() => ({ name: \\"Steve\\", dev: \\"PatrickJS\\" }));
+
+ return (
+
+ );
+}
+
+const observedMyBasicChildComponent = observer(MyBasicChildComponent);
+export default observedMyBasicChildComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicForComponent(props) {
+ const state = useLocalObservable(() => ({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ }));
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {state.names?.map((person) => (
+ <>
+
+ );
+}
+
+const observedMyBasicForComponent = observer(MyBasicForComponent);
+export default observedMyBasicForComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > BasicRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const state = useLocalObservable(() => ({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ }));
+
+ 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!
+
+
+
+ );
+}
+
+const observedMyBasicRefComponent = observer(MyBasicRefComponent);
+export default observedMyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicRefAssignmentComponent(props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ const state = useLocalObservable(() => ({
+ handlerClick: function handlerClick(event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ },
+ }));
+
+ return (
+
+ state.handlerClick(evt)}>Click
+
+ );
+}
+
+const observedMyBasicRefAssignmentComponent = observer(
+ MyBasicRefAssignmentComponent
+);
+export default observedMyBasicRefAssignmentComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+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 state = useLocalObservable(() => ({ count: 0 }));
+
+ const prevCount = useRef(state.count);
+
+ useEffect(() => {
+ prevCount.current = state.count;
+ }, [state.count]);
+
+ return (
+
+
+ Now: {state.count}, before: {prevCount.current}
+
+ (state.count += 1)}>Increment
+
+ );
+}
+
+const observedMyPreviousComponent = observer(MyPreviousComponent);
+export default observedMyPreviousComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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}
+
+
state.show()}
+ className={state.cls}
+ >
+ {state.showContent && props.slotContent ? (
+ <>{props.content || \\"{props.content}\\"}
+ ) : null}
+
+
+
{props.children}
+
+ );
+}
+
+const observedCustomCode = observer(CustomCode);
+export default observedCustomCode;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function CustomCode(props) {
+ const elem = useRef(null);
+ const state = useLocalObservable(() => ({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ }));
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+const observedCustomCode = observer(CustomCode);
+export default observedCustomCode;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Form 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import { Builder, builder } from \\"@builder.io/sdk\\";
+import {
+ BuilderBlock as BuilderBlockComponent,
+ BuilderBlocks,
+ get,
+ set,
+} from \\"@fake\\";
+
+function FormComponent(props) {
+ const formRef = useRef(null);
+ const state = useLocalObservable(() => ({
+ 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\\";
+ }
+ );
+ }
+ },
+ }));
+ return (
+ <>
+ {\\" \\"}
+ {\\" \\"}
+ {\\" \\"}
+
+ );
+}
+const observedFormComponent = observer(FormComponent);
+export default observedFormComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Image 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function Image(props) {
+ const pictureRef = useRef(null);
+ const state = useLocalObservable(() => ({
+ 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,
+ }));
+
+ useEffect(() => {
+ 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();
+ }
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (state.scrollListener) {
+ window.removeEventListener(\\"scroll\\", state.scrollListener);
+ }
+ };
+ }, []);
+
+ return (
+ <>
+
+
+ {!state.useLazyLoading() || state.load ? (
+
+ {props.children}
+
+ {state.images?.map((item, itemIndex) => (
+
+ ))}
+
state.handleChange(value)}
+ />
+ );
+}
+
+const observedStepper = observer(Stepper);
+export default observedStepper;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > RawText 1`] = `
+"import * as React from \\"react\\";
+
+function RawText(props) {
+ return (
+
+ {props.options?.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+
+const observedSelectComponent = observer(SelectComponent);
+export default observedSelectComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+const observedSlotCode = observer(SlotCode);
+export default observedSlotCode;
+"
+`;
+
+exports[`React - stateType: mobx > 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\\"}
+
+ );
+}
+
+const observedSlotCode = observer(SlotCode);
+export default observedSlotCode;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props) {
+ const state = useLocalObservable(() => ({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ 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) => {
+ 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}
+
+ );
+}
+
+const observedSubmitButton = observer(SubmitButton);
+export default observedSubmitButton;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props) {
+ const state = useLocalObservable(() => ({ name: \\"Decadef20\\" }));
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+const observedText = observer(Text);
+export default observedText;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+function Textarea(props) {
+ return (
+
+ );
+}
+
+const observedTextarea = observer(Textarea);
+export default observedTextarea;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+function Video(props) {
+ return (
+
+ );
+}
+
+const observedVideo = observer(Video);
+export default observedVideo;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ }));
+
+ return
Hello {state.name}
;
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > basicForNoTagReference 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicForNoTagRefComponent(props) {
+ const state = useLocalObservable(() => ({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ }));
+
+ return (
+
+ Hello {state.name}
+ {props.actions?.map((action) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+
+const observedMyBasicForNoTagRefComponent = observer(
+ MyBasicForNoTagRefComponent
+);
+export default observedMyBasicForNoTagRefComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+const observedMyBasicForwardRefComponent = observer(MyBasicForwardRefComponent);
+export default observedMyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+const observedMyBasicForwardRefComponent = observer(MyBasicForwardRefComponent);
+export default observedMyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicOnUpdateReturnComponent(props) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ state.name = data.name;
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [state.name]);
+
+ return
Hello! {state.name}
;
+}
+
+const observedMyBasicOnUpdateReturnComponent = observer(
+ MyBasicOnUpdateReturnComponent
+);
+export default observedMyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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!
+
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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!
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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!
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function ClassNameCode(props) {
+ const state = useLocalObservable(() => ({ bindings: \\"a binding\\" }));
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+
+const observedClassNameCode = observer(ClassNameCode);
+export default observedClassNameCode;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > classState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicComponent(props) {
+ const state = useLocalObservable(() => ({
+ classState: \\"testClassName\\",
+ styleState: {
+ color: \\"red\\",
+ },
+ }));
+
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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}
+
+
+ );
+}
+
+const observedComponentWithContext = observer(ComponentWithContext);
+export default observedComponentWithContext;
+"
+`;
+
+exports[`React - stateType: mobx > 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
+
+
+
+ );
+}
+
+const observedComponentWithContext = observer(ComponentWithContext);
+export default observedComponentWithContext;
+"
+`;
+
+exports[`React - stateType: mobx > 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
+
+ );
+}
+
+const observedRenderContent = observer(RenderContent);
+export default observedRenderContent;
+"
+`;
+
+exports[`React - stateType: mobx > 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\\");
+ },
+};
+
+const observedButton = observer(Button);
+export default observedButton;
+"
+`;
+
+exports[`React - stateType: mobx > 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: () => {},
+};
+
+const observedButton = observer(Button);
+export default observedButton;
+"
+`;
+
+exports[`React - stateType: mobx > 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}
;
+}
+
+const observedComponentWithTypes = observer(ComponentWithTypes);
+export default observedComponentWithTypes;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ }));
+
+ return
{state.refToUse}
;
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function Button(props) {
+ const state = useLocalObservable(() => ({
+ 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)}
+
+ );
+}
+
+const observedButton = observer(Button);
+export default observedButton;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > import types 1`] = `
+"import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import RenderBlock from \\"./builder-render-block.raw\\";
+
+function RenderContent(props) {
+ const state = useLocalObservable(() => ({
+ getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ },
+ }));
+
+ return (
+
+ );
+}
+
+const observedRenderContent = observer(RenderContent);
+export default observedRenderContent;
+"
+`;
+
+exports[`React - stateType: mobx > 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
;
+}
+
+const observedMultipleOnUpdate = observer(MultipleOnUpdate);
+export default observedMultipleOnUpdate;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MultipleOnUpdateWithDeps(props) {
+ const state = useLocalObservable(() => ({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" }));
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", state.a, state.b);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.a, state.b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", state.c, state.d);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.c, state.d]);
+
+ return
;
+}
+
+const observedMultipleOnUpdateWithDeps = observer(MultipleOnUpdateWithDeps);
+export default observedMultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicComponent(props) {
+ const state = useLocalObservable(() => ({
+ attrs: {
+ hello: \\"world\\",
+ },
+ }));
+
+ return
;
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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
+ )}
+
+ );
+}
+
+const observedNestedShow = observer(NestedShow);
+export default observedNestedShow;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props) {
+ return (
+ <>
+
Hello world
+
+
+ );
+}
+
+const observedNestedStyles = observer(NestedStyles);
+export default observedNestedStyles;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function Embed(props) {
+ const elem = useRef(null);
+ const state = useLocalObservable(() => ({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ elem_onInitEditingBldr(event) {
+ console.log(\\"test\\");
+ state.foo(event);
+ },
+ }));
+
+ useEffect(() => {
+ elem.current?.addEventListener(\\"initEditingBldr\\", elem_onInitEditingBldr);
+ return () =>
+ elem.current?.removeEventListener(
+ \\"initEditingBldr\\",
+ elem_onInitEditingBldr
+ );
+ }, []);
+
+ useEffect(() => {
+ elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+ }, []);
+
+ return (
+
+ );
+}
+
+const observedEmbed = observer(Embed);
+export default observedEmbed;
+"
+`;
+
+exports[`React - stateType: mobx > 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
;
+}
+
+const observedOnInit = observer(OnInit);
+export default observedOnInit;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props) {
+ const state = useLocalObservable(() => ({ name: \\"\\" }));
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = defaultValues.name || props.name;
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return
Default name defined by parent {state.name}
;
+}
+
+const observedOnInit = observer(OnInit);
+export default observedOnInit;
+"
+`;
+
+exports[`React - stateType: mobx > 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
;
+}
+
+const observedOnInitPlain = observer(OnInitPlain);
+export default observedOnInitPlain;
+"
+`;
+
+exports[`React - stateType: mobx > 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
;
+}
+
+const observedComp = observer(Comp);
+export default observedComp;
+"
+`;
+
+exports[`React - stateType: mobx > 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
;
+}
+
+const observedComp = observer(Comp);
+export default observedComp;
+"
+`;
+
+exports[`React - stateType: mobx > 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
;
+}
+
+const observedOnUpdate = observer(OnUpdate);
+export default observedOnUpdate;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function OnUpdateWithDeps(props) {
+ const state = useLocalObservable(() => ({ a: \\"a\\", b: \\"b\\" }));
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", state.a, state.b, props.size);
+ }, [state.a, state.b, props.size]);
+
+ return
;
+}
+
+const observedOnUpdateWithDeps = observer(OnUpdateWithDeps);
+export default observedOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: mobx > 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
;
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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}
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicComponent(props) {
+ const state = useLocalObservable(() => ({ name: \\"Decadef20\\" }));
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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}
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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}
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > referencingFunInsideHook 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function OnUpdate(props) {
+ const state = useLocalObservable(() => ({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ }));
+
+ useEffect(() => {
+ state.foo({
+ someOption: state.bar,
+ });
+ });
+
+ return
;
+}
+
+const observedOnUpdate = observer(OnUpdate);
+export default observedOnUpdate;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > renderBlock 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import { TARGET } from \\"../../constants/target.js\\";
+import { evaluate } from \\"../../functions/evaluate.js\\";
+import { extractTextStyles } from \\"../../functions/extract-text-styles.js\\";
+import { getBlockActions } from \\"../../functions/get-block-actions.js\\";
+import { getBlockComponentOptions } from \\"../../functions/get-block-component-options.js\\";
+import { getBlockProperties } from \\"../../functions/get-block-properties.js\\";
+import { getBlockTag } from \\"../../functions/get-block-tag.js\\";
+import { getProcessedBlock } from \\"../../functions/get-processed-block.js\\";
+import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-block-styles.js\\";
+import BlockStyles from \\"./block-styles\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import RenderComponent from \\"./render-component\\";
+import RenderRepeatedBlock from \\"./render-repeated-block\\";
+
+function RenderBlock(props) {
+ const state = useLocalObservable(() => ({
+ 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;
+ }
+ },
+ componentInfo: null,
+ }));
+
+ return (
+ <>
+ {state.shouldWrap ? (
+ <>
+ {isEmptyHtmlElement(state.tag) ? (
+
+ ) : null}
+ {!isEmptyHtmlElement(state.tag) && state.repeatItemData ? (
+ <>
+ {state.repeatItemData?.map((data, index) => (
+
+ ))}
+
+ ) : null}
+ {!isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+
+
+ )}
+
+ );
+}
+
+const observedRenderBlock = observer(RenderBlock);
+export default observedRenderBlock;
+"
+`;
+
+exports[`React - stateType: mobx > 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)}>
+
+
+
+
+ );
+}
+
+const observedRenderContent = observer(RenderContent);
+export default observedRenderContent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > rootFragmentMultiNode 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+ return (
+ <>
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+const observedButton = observer(Button);
+export default observedButton;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+function RenderStyles(props) {
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+
Bar
+
+ ) : (
+
Foo
+ )}
+
+ );
+}
+
+const observedRenderStyles = observer(RenderStyles);
+export default observedRenderStyles;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > self-referencing component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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}
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ?
complete
: <>9mb}
+ ) : props.conditionC === \\"Complete\\" ? (
+ <>dff
+ ) : (
+
complete else
+ )}
+
+ );
+}
+
+const observedShowWithOtherValues = observer(ShowWithOtherValues);
+export default observedShowWithOtherValues;
+"
+`;
+
+exports[`React - stateType: mobx > 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
+ )}
+
+ );
+}
+
+const observedNestedShow = observer(NestedShow);
+export default observedNestedShow;
+"
+`;
+
+exports[`React - stateType: mobx > 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}
+
+ );
+}
+
+const observedShowWithOtherValues = observer(ShowWithOtherValues);
+export default observedShowWithOtherValues;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+function ShowRootText(props) {
+ return <>{props.conditionA ? <>ContentA :
else-condition-A
};
+}
+
+const observedShowRootText = observer(ShowRootText);
+export default observedShowRootText;
+"
+`;
+
+exports[`React - stateType: mobx > 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}
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > spreadNestedProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > spreadProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function StringLiteralStore(props) {
+ const state = useLocalObservable(() => ({ foo: 123 }));
+
+ return
{state.foo}
;
+}
+
+const observedStringLiteralStore = observer(StringLiteralStore);
+export default observedStringLiteralStore;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props) {
+ return (
+ <>
+
+
+
+ );
+}
+
+const observedStylePropClassAndCss = observer(StylePropClassAndCss);
+export default observedStylePropClassAndCss;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props) {
+ return
;
+}
+
+const observedSubComponent = observer(SubComponent);
+export default observedSubComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > svgComponent 1`] = `
+"import * as React from \\"react\\";
+
+function SvgComponent(props) {
+ return (
+
+
+
+
+
+
+ );
+}
+
+const observedSvgComponent = observer(SvgComponent);
+export default observedSvgComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+function TypeDependency(props) {
+ return
{props.foo}
;
+}
+
+const observedTypeDependency = observer(TypeDependency);
+export default observedTypeDependency;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function TypeExternalStore(props) {
+ const state = useLocalObservable(() => ({ _name: \\"test\\" }));
+
+ return
Hello {state._name}!
;
+}
+
+const observedTypeExternalStore = observer(TypeExternalStore);
+export default observedTypeExternalStore;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function TypeGetterStore(props) {
+ const state = useLocalObservable(() => ({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ }));
+
+ return
Hello {state.name}!
;
+}
+
+const observedTypeGetterStore = observer(TypeGetterStore);
+export default observedTypeGetterStore;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
Button
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
+ Button
+
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
Button
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Javascript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function UseTargetComponent(props) {
+ const state = useLocalObservable(() => ({
+ get name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ foo: \\"bar\\",
+ }));
+
+ useEffect(() => {
+ console.log(state.foo);
+ state.foo = \\"bar\\";
+ console.log(\\"react\\");
+ state.lastName = \\"baz\\";
+ console.log(state.foo);
+ state.foo = \\"baz\\";
+ }, []);
+
+ return
{state.name}
;
+}
+
+const observedUseTargetComponent = observer(UseTargetComponent);
+export default observedUseTargetComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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
+
+ );
+}
+
+const observedMyBasicWebComponent = observer(MyBasicWebComponent);
+export default observedMyBasicWebComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Remove Internal mitosis package 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicComponent(props) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ return (
+
+ Hello {state.name}! I can run in React, Qwik, Vue, Solid, or Liquid!
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefComponent(props: Props) {
+ const inputRef = useRef
(null);
+ const inputNoArgRef = useRef(null);
+ const state = useLocalObservable(() => ({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ }));
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
+
+ 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!
+
+
+
+ );
+}
+
+const observedMyBasicRefComponent = observer(MyBasicRefComponent);
+export default observedMyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface MyBasicComponentProps {
+ id: string;
+}
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ const state = useLocalObservable(() => ({
+ name: \\"Steve\\",
+ underscore_fn_name() {
+ return \\"bar\\";
+ },
+ age: 1,
+ sports: [\\"\\"],
+ }));
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Basic Context 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ name: \\"PatrickJS\\",
+ onChange: 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\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface Props {
+ hi: string;
+ bye: string;
+}
+
+function MyBasicOnMountUpdateComponent(props: Props) {
+ const state = useLocalObservable(() => ({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ }));
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = \\"PatrickJS onInit\\" + props.hi;
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ }, []);
+
+ return Hello {state.name}
;
+}
+
+const observedMyBasicOnMountUpdateComponent = observer(
+ MyBasicOnMountUpdateComponent
+);
+export default observedMyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicOutputsComponent(props: any) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+const observedMyBasicOutputsComponent = observer(MyBasicOutputsComponent);
+export default observedMyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicOutputsComponent(props: any) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+const observedMyBasicOutputsComponent = observer(MyBasicOutputsComponent);
+export default observedMyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > BasicAttribute 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return
+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+
+const observedMyBooleanAttribute = observer(MyBooleanAttribute);
+export default observedMyBooleanAttribute;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props: any) {
+ const state = useLocalObservable(() => ({ name: \\"Steve\\", dev: \\"PatrickJS\\" }));
+
+ return (
+
+ );
+}
+
+const observedMyBasicChildComponent = observer(MyBasicChildComponent);
+export default observedMyBasicChildComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicForComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ }));
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {state.names?.map((person) => (
+ <>
+
+ );
+}
+
+const observedMyBasicForComponent = observer(MyBasicForComponent);
+export default observedMyBasicForComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > BasicRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefComponent(props: Props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const state = useLocalObservable(() => ({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ }));
+
+ 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!
+
+
+
+ );
+}
+
+const observedMyBasicRefComponent = observer(MyBasicRefComponent);
+export default observedMyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefAssignmentComponent(props: Props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ const state = useLocalObservable(() => ({
+ handlerClick: function handlerClick(event: Event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ },
+ }));
+
+ return (
+
+ state.handlerClick(evt)}>Click
+
+ );
+}
+
+const observedMyBasicRefAssignmentComponent = observer(
+ MyBasicRefAssignmentComponent
+);
+export default observedMyBasicRefAssignmentComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface Props {
+ showInput: boolean;
+}
+
+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: Props) {
+ const state = useLocalObservable(() => ({ count: 0 }));
+
+ const prevCount = useRef(state.count);
+
+ useEffect(() => {
+ prevCount.current = state.count;
+ }, [state.count]);
+
+ return (
+
+
+ Now: {state.count}, before: {prevCount.current}
+
+ (state.count += 1)}>Increment
+
+ );
+}
+
+const observedMyPreviousComponent = observer(MyPreviousComponent);
+export default observedMyPreviousComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Button 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ {props.columns?.map((column, index) => (
+
+ {column.content}
+ {index}
+
+ ))}
+
+ <>{props.slotTesting}
+
+
+
+ <>{props.children}
+
+
state.show()}
+ className={state.cls}
+ >
+ {state.showContent && props.slotContent ? (
+ <>{props.content || \\"{props.content}\\"}
+ ) : null}
+
+
+
{props.children}
+
(null);
+ const state = useLocalObservable(() => ({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ }));
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+const observedCustomCode = observer(CustomCode);
+export default observedCustomCode;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface CustomCodeProps {
+ code: string;
+ replaceNodes?: boolean;
+}
+
+function CustomCode(props: CustomCodeProps) {
+ const elem = useRef(null);
+ const state = useLocalObservable(() => ({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ }));
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+const observedCustomCode = observer(CustomCode);
+export default observedCustomCode;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Form 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+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\\";
+
+function FormComponent(props: FormProps) {
+ const formRef = useRef(null);
+ const state = useLocalObservable(() => ({
+ 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\\";
+ }
+ );
+ }
+ },
+ }));
+ return (
+ <>
+ {\\" \\"}
+ {\\" \\"}
+ {\\" \\"}
+
+ );
+}
+const observedFormComponent = observer(FormComponent);
+export default observedFormComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Image 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+// 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;
+}
+
+function Image(props: ImageProps) {
+ const pictureRef = useRef(null);
+ const state = useLocalObservable(() => ({
+ 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,
+ }));
+
+ useEffect(() => {
+ 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();
+ }
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (state.scrollListener) {
+ window.removeEventListener(\\"scroll\\", state.scrollListener);
+ }
+ };
+ }, []);
+
+ return (
+ <>
+
+
+ {!state.useLazyLoading() || state.load ? (
+
+ {props.children}
+
+ {state.images?.map((item, itemIndex) => (
+
+ ))}
+
state.handleChange(value)}
+ />
+ );
+}
+
+const observedStepper = observer(Stepper);
+export default observedStepper;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > RawText 1`] = `
+"import * as React from \\"react\\";
+
+export interface RawTextProps {
+ attributes?: any;
+ text?: string; // builderBlock?: any;
+}
+
+function RawText(props: RawTextProps) {
+ return (
+
+ {props.options?.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+
+const observedSelectComponent = observer(SelectComponent);
+export default observedSelectComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+const observedSlotCode = observer(SlotCode);
+export default observedSlotCode;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > SlotNamed 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+ return (
+
+ <>{props.myAwesomeSlot}
+ <>{props.top}
+ <>{props.left || \\"Default left\\"}
+ <>{props.children || \\"Default Child\\"}
+
+ );
+}
+
+const observedSlotCode = observer(SlotCode);
+export default observedSlotCode;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+type SmileReviewsProps = {
+ productId: string;
+ apiKey: string;
+};
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props: SmileReviewsProps) {
+ const state = useLocalObservable(() => ({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ 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) => {
+ 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}
+
+ );
+}
+
+const observedSubmitButton = observer(SubmitButton);
+export default observedSubmitButton;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface TextProps {
+ attributes?: any;
+ rtlMode: boolean;
+ text?: string;
+ content?: string;
+ builderBlock?: any;
+}
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props: TextProps) {
+ const state = useLocalObservable(() => ({ name: \\"Decadef20\\" }));
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+const observedText = observer(Text);
+export default observedText;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+export interface TextareaProps {
+ attributes?: any;
+ name?: string;
+ value?: string;
+ defaultValue?: string;
+ placeholder?: string;
+}
+
+function Textarea(props: TextareaProps) {
+ return (
+
+ );
+}
+
+const observedTextarea = observer(Textarea);
+export default observedTextarea;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+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;
+}
+
+function Video(props: VideoProps) {
+ return (
+
+ );
+}
+
+const observedVideo = observer(Video);
+export default observedVideo;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ }));
+
+ return
Hello {state.name}
;
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > basicForNoTagReference 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicForNoTagRefComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ }));
+
+ return (
+
+ Hello {state.name}
+ {props.actions?.map((action) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+
+const observedMyBasicForNoTagRefComponent = observer(
+ MyBasicForNoTagRefComponent
+);
+export default observedMyBasicForNoTagRefComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface Props {
+ showInput: boolean;
+ inputRef: HTMLInputElement;
+}
+
+const MyBasicForwardRefComponent = forwardRef
(
+ function MyBasicForwardRefComponent(props: Props, inputRef) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+const observedMyBasicForwardRefComponent = observer(MyBasicForwardRefComponent);
+export default observedMyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface Props {
+ showInput: boolean;
+ inputRef: HTMLInputElement;
+}
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props: Props, inputRef) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+const observedMyBasicForwardRefComponent = observer(MyBasicForwardRefComponent);
+export default observedMyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicOnUpdateReturnComponent(props: any) {
+ const state = useLocalObservable(() => ({ name: \\"PatrickJS\\" }));
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ state.name = data.name;
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [state.name]);
+
+ return Hello! {state.name}
;
+}
+
+const observedMyBasicOnUpdateReturnComponent = observer(
+ MyBasicOnUpdateReturnComponent
+);
+export default observedMyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > class + ClassName + css 1`] = `
+"import * as React from \\"react\\";
+import MyComp from \\"./my-component\\";
+
+function MyBasicComponent(props: any) {
+ return (
+ <>
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > className + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+type Props = {
+ [key: string]: string | JSX.Element;
+ slotTesting: JSX.Element;
+};
+import type { JSX } from \\"../../../../jsx-runtime\\";
+
+function ClassNameCode(props: Props) {
+ const state = useLocalObservable(() => ({ bindings: \\"a binding\\" }));
+
+ return (
+
+
Without Binding
+
With binding
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > componentWithContext 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>{foo.value}
+
+
+ );
+}
+
+const observedComponentWithContext = observer(ComponentWithContext);
+export default observedComponentWithContext;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>
+ <>{foo.value}
+ other
+
+
+
+ );
+}
+
+const observedComponentWithContext = observer(ComponentWithContext);
+export default observedComponentWithContext;
+"
+`;
+
+exports[`React - stateType: mobx > 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: any) {
+ return (
+
+ setting context
+
+ );
+}
+
+const observedRenderContent = observer(RenderContent);
+export default observedRenderContent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > defaultProps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ buttonText?: string; // no default value
+
+ link?: string;
+ openLinkInNewTab?: boolean;
+ onClick?: () => void;
+}
+
+function Button(props: ButtonProps) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick()}
+ >
+ {props.buttonText}
+
+ ) : null}
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick(event)}
+ >
+ {props.text}
+
+ ) : null}
+
Hello {props.name || DEFAULT_VALUES.name}
;
+}
+
+const observedComponentWithTypes = observer(ComponentWithTypes);
+export default observedComponentWithTypes;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ }));
+
+ return {state.refToUse}
;
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export interface ButtonProps {
+ foo: string;
+}
+
+function Button(props: ButtonProps) {
+ const state = useLocalObservable(() => ({
+ 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)}
+
;
+}
+
+const observedMultipleOnUpdate = observer(MultipleOnUpdate);
+export default observedMultipleOnUpdate;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MultipleOnUpdateWithDeps(props: any) {
+ const state = useLocalObservable(() => ({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" }));
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", state.a, state.b);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.a, state.b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", state.c, state.d);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.c, state.d]);
+
+ return
;
+}
+
+const observedMultipleOnUpdateWithDeps = observer(MultipleOnUpdateWithDeps);
+export default observedMultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyBasicComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ attrs: {
+ hello: \\"world\\",
+ },
+ }));
+
+ return if condition A and condition B
+ ) : (
+ else-condition-B
+ )}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+const observedNestedShow = observer(NestedShow);
+export default observedNestedShow;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props: any) {
+ return (
+ <>
+ Hello world
+
+
+ );
+}
+
+const observedNestedStyles = observer(NestedStyles);
+export default observedNestedStyles;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function Embed(props: any) {
+ const elem = useRef(null);
+ const state = useLocalObservable(() => ({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ elem_onInitEditingBldr(event) {
+ console.log(\\"test\\");
+ state.foo(event);
+ },
+ }));
+
+ useEffect(() => {
+ elem.current?.addEventListener(\\"initEditingBldr\\", elem_onInitEditingBldr);
+ return () =>
+ elem.current?.removeEventListener(
+ \\"initEditingBldr\\",
+ elem_onInitEditingBldr
+ );
+ }, []);
+
+ useEffect(() => {
+ elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
+ }, []);
+
+ return (
+
+ );
+}
+
+const observedEmbed = observer(Embed);
+export default observedEmbed;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > onInit & onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function OnInit(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ return
;
+}
+
+const observedOnInit = observer(OnInit);
+export default observedOnInit;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+type Props = {
+ name: string;
+};
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props: Props) {
+ const state = useLocalObservable(() => ({ name: \\"\\" }));
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = defaultValues.name || props.name;
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return Default name defined by parent {state.name}
;
+}
+
+const observedOnInit = observer(OnInit);
+export default observedOnInit;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ return
;
+}
+
+const observedOnInitPlain = observer(OnInitPlain);
+export default observedOnInitPlain;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props: any) {
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"Runs on unMount\\");
+ };
+ }, []);
+
+ return
;
+}
+
+const observedComp = observer(Comp);
+export default observedComp;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > onMountMultiple 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props: any) {
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+ useEffect(() => {
+ console.log(\\"Another one runs on Mount\\");
+ }, []);
+ useEffect(() => {
+ console.log(\\"SSR runs on Mount\\");
+ }, []);
+
+ return
;
+}
+
+const observedComp = observer(Comp);
+export default observedComp;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > onUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props: any) {
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+
+ return
;
+}
+
+const observedOnUpdate = observer(OnUpdate);
+export default observedOnUpdate;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+type Props = {
+ size: string;
+};
+
+function OnUpdateWithDeps(props: Props) {
+ const state = useLocalObservable(() => ({ a: \\"a\\", b: \\"b\\" }));
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", state.a, state.b, props.size);
+ }, [state.a, state.b, props.size]);
+
+ return
;
+}
+
+const observedOnUpdateWithDeps = observer(OnUpdateWithDeps);
+export default observedOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
+"import * as React from \\"react\\";
+
+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) {}
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ return
;
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > preserveTyping 1`] = `
+"import * as React from \\"react\\";
+
+export type A = \\"test\\";
+export interface C {
+ n: \\"test\\";
+}
+type B = \\"test2\\";
+interface D {
+ n: \\"test\\";
+}
+export interface MyBasicComponentProps {
+ name: string;
+ age?: number;
+}
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+type Props = {
+ children: any;
+ type: string;
+};
+
+function MyBasicComponent(props: Props) {
+ const state = useLocalObservable(() => ({ name: \\"Decadef20\\" }));
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > propsInterface 1`] = `
+"import * as React from \\"react\\";
+
+interface Person {
+ name: string;
+ age?: number;
+}
+
+function MyBasicComponent(props: Person | never) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > propsType 1`] = `
+"import * as React from \\"react\\";
+
+type Person = {
+ name: string;
+ age?: number;
+};
+
+function MyBasicComponent(props: Person) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > referencingFunInsideHook 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function OnUpdate(props: any) {
+ const state = useLocalObservable(() => ({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ }));
+
+ useEffect(() => {
+ state.foo({
+ someOption: state.bar,
+ });
+ });
+
+ return
;
+}
+
+const observedOnUpdate = observer(OnUpdate);
+export default observedOnUpdate;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > renderBlock 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+export type RenderBlockProps = {
+ block: BuilderBlock;
+ context: BuilderContextInterface;
+};
+import { TARGET } from \\"../../constants/target.js\\";
+import type {
+ BuilderContextInterface,
+ RegisteredComponent,
+} from \\"../../context/types.js\\";
+import { evaluate } from \\"../../functions/evaluate.js\\";
+import { extractTextStyles } from \\"../../functions/extract-text-styles.js\\";
+import { getBlockActions } from \\"../../functions/get-block-actions.js\\";
+import { getBlockComponentOptions } from \\"../../functions/get-block-component-options.js\\";
+import { getBlockProperties } from \\"../../functions/get-block-properties.js\\";
+import { getBlockTag } from \\"../../functions/get-block-tag.js\\";
+import { getProcessedBlock } from \\"../../functions/get-processed-block.js\\";
+import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-block-styles.js\\";
+import type { BuilderBlock } from \\"../../types/builder-block.js\\";
+import type { Nullable } from \\"../../types/typescript.js\\";
+import BlockStyles from \\"./block-styles\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import type { RenderComponentProps } from \\"./render-component\\";
+import RenderComponent from \\"./render-component\\";
+import RenderRepeatedBlock from \\"./render-repeated-block\\";
+import type { RepeatData } from \\"./types.js\\";
+
+function RenderBlock(props: RenderBlockProps) {
+ const state = useLocalObservable(() => ({
+ 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;
+ }
+ },
+ componentInfo: null,
+ }));
+
+ return (
+ <>
+ {state.shouldWrap ? (
+ <>
+ {isEmptyHtmlElement(state.tag) ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+
+ trackClick(props.content.id)}>
+
+
+
+
+ );
+}
+
+const observedRenderContent = observer(RenderContent);
+export default observedRenderContent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+ return (
+ <>
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+const observedButton = observer(Button);
+export default observedButton;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+export interface RenderStylesProps {
+ foo: string;
+}
+
+function RenderStyles(props: RenderStylesProps) {
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+ Bar
+
+ ) : (
+ Foo
+ )}
+
+ );
+}
+
+const observedRenderStyles = observer(RenderStyles);
+export default observedRenderStyles;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > self-referencing component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > self-referencing component with children 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ 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
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ?
complete
: <>9mb}
+ ) : props.conditionC === \\"Complete\\" ? (
+ <>dff
+ ) : (
+
complete else
+ )}
+
{item}
+ ))}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+const observedNestedShow = observer(NestedShow);
+export default observedNestedShow;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > showWithOtherValues 1`] = `
+"import * as React from \\"react\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+function ShowWithOtherValues(props: 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}
+
+ );
+}
+
+const observedShowWithOtherValues = observer(ShowWithOtherValues);
+export default observedShowWithOtherValues;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+function ShowRootText(props: Props) {
+ return <>{props.conditionA ? <>ContentA : else-condition-A
};
+}
+
+const observedShowRootText = observer(ShowRootText);
+export default observedShowRootText;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type Props = {
+ id: string;
+ foo: {
+ bar: {
+ baz: number;
+ };
+ };
+};
+
+function MyBasicComponent(props: 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}
+
+
+
+ );
+}
+
+const observedMyBasicComponent = observer(MyBasicComponent);
+export default observedMyBasicComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ return {state.foo}
;
+}
+
+const observedStringLiteralStore = observer(StringLiteralStore);
+export default observedStringLiteralStore;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props: any) {
+ return (
+ <>
+
+
+
+ );
+}
+
+const observedStylePropClassAndCss = observer(StylePropClassAndCss);
+export default observedStylePropClassAndCss;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props: any) {
+ return
+
+
+
+
+
+ );
+}
+
+const observedSvgComponent = observer(SvgComponent);
+export default observedSvgComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+export type TypeDependencyProps = {
+ foo: Foo;
+ foo2: Foo2;
+};
+import type { Foo } from \\"./foo-type\\";
+import type { Foo as Foo2 } from \\"./type-export\\";
+
+function TypeDependency(props: TypeDependencyProps) {
+ return {props.foo}
;
+}
+
+const observedTypeDependency = observer(TypeDependency);
+export default observedTypeDependency;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import { FooStore } from \\"./foo-store\\";
+
+function TypeExternalStore(props: any) {
+ const state = useLocalObservable(() => ({ _name: \\"test\\" }));
+
+ return Hello {state._name}!
;
+}
+
+const observedTypeExternalStore = observer(TypeExternalStore);
+export default observedTypeExternalStore;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+type GetterStore = {
+ getName: () => string;
+ name: string;
+ get test(): string;
+};
+
+function TypeGetterStore(props: any) {
+ const state = useLocalObservable(() => ({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ }));
+
+ return Hello {state.name}!
;
+}
+
+const observedTypeGetterStore = observer(TypeGetterStore);
+export default observedTypeGetterStore;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+ Button
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+
+ Button
+
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+ Button
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function UseTargetComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ get name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ foo: \\"bar\\",
+ }));
+
+ useEffect(() => {
+ console.log(state.foo);
+ state.foo = \\"bar\\";
+ console.log(\\"react\\");
+ state.lastName = \\"baz\\";
+ console.log(state.foo);
+ state.foo = \\"baz\\";
+ }, []);
+
+ return {state.name}
;
+}
+
+const observedUseTargetComponent = observer(UseTargetComponent);
+export default observedUseTargetComponent;
+"
+`;
+
+exports[`React - stateType: mobx > jsx > Typescript Test > webComponent 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { register } from \\"swiper/element/bundle\\";
+
+function MyBasicWebComponent(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ register();
+ hasInitialized.current = true;
+ }
+
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+
+const observedMyBasicWebComponent = observer(MyBasicWebComponent);
+export default observedMyBasicWebComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({ name: \\"Steve\\" }));
+
+ return (
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({ tortilla: \\"Plain\\", fillings: [] }));
+
+ return (
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({ value: \\"hello\\" }));
+
+ return {state.activeTab}
+ | ^
+ 36 |
+ 37 |
+ 38 |"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({
+ numbers: [\\"one\\", \\"two\\", \\"three\\"],
+ }));
+
+ return (
+
+ {state.numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > eventHandlers 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ }));
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({ html: \\"bold \\" }));
+
+ return
;
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > ifElse 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ }));
+
+ return (
+ <>
+ {state.show ? (
+ <>
+ state.toggle(event)}> Hide
+
+ ) : (
+ state.toggle(event)}> Show
+ )}
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({ disabled: false }));
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > 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
;
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ }));
+
+ return (
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > reactiveWithFn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props) {
+ const state = useLocalObservable(() => ({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ }));
+
+ useEffect(() => {
+ state.calculateResult(state.a, state.b);
+ }, [state.a, state.b]);
+
+ return (
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Javascript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({ name: \\"Steve\\" }));
+
+ return (
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({ tortilla: \\"Plain\\", fillings: [] }));
+
+ return (
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({ value: \\"hello\\" }));
+
+ return {state.activeTab}
+ | ^
+ 36 |
+ 37 |
+ 38 |"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ numbers: [\\"one\\", \\"two\\", \\"three\\"],
+ }));
+
+ return (
+
+ {state.numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > eventHandlers 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ }));
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({ html: \\"bold \\" }));
+
+ return
;
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > ifElse 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ }));
+
+ return (
+ <>
+ {state.show ? (
+ <>
+ state.toggle(event)}> Hide
+
+ ) : (
+ state.toggle(event)}> Show
+ )}
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({ disabled: false }));
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > lifecycleHooks 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyComponent(props: any) {
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ useEffect(() => {
+ console.log(\\"onAfterUpdate\\");
+ });
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"onDestroy\\");
+ };
+ }, []);
+
+ return
;
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ }));
+
+ return (
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > reactiveWithFn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalObservable, observer } from \\"mobx-react-lite\\";
+
+function MyComponent(props: any) {
+ const state = useLocalObservable(() => ({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ }));
+
+ useEffect(() => {
+ state.calculateResult(state.a, state.b);
+ }, [state.a, state.b]);
+
+ return (
+
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
+
+exports[`React - stateType: mobx > svelte > Typescript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+
+const observedMyComponent = observer(MyComponent);
+export default observedMyComponent;
+"
+`;
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
new file mode 100644
index 0000000000..a22febcf25
--- /dev/null
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -0,0 +1,7996 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`React - stateType: solid > jsx > Javascript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const state = useMutable({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
+
+ 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!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props) {
+ const state = useMutable({
+ name: \\"Steve\\",
+ underscore_fn_name() {
+ return \\"bar\\";
+ },
+ age: 1,
+ sports: [\\"\\"],
+ });
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Basic Context 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props) {
+ const state = useMutable({
+ name: \\"PatrickJS\\",
+ onChange: 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\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicOnMountUpdateComponent(props) {
+ const state = useMutable({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = \\"PatrickJS onInit\\" + props.hi;
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ }, []);
+
+ return Hello {state.name}
;
+}
+
+export default MyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicOutputsComponent(props) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicOutputsComponent(props) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props) {
+ const state = useMutable({ name: \\"Steve\\", dev: \\"PatrickJS\\" });
+
+ return (
+
+ );
+}
+
+export default MyBasicChildComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicForComponent(props) {
+ const state = useMutable({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ });
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {state.names?.map((person) => (
+ <>
+
+ );
+}
+
+export default MyBasicForComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > BasicRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const state = useMutable({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ 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!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicRefAssignmentComponent(props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ const state = useMutable({
+ handlerClick: function handlerClick(event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ },
+ });
+
+ return (
+
+ state.handlerClick(evt)}>Click
+
+ );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+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 state = useMutable({ count: 0 });
+
+ const prevCount = useRef(state.count);
+
+ useEffect(() => {
+ prevCount.current = state.count;
+ }, [state.count]);
+
+ return (
+
+
+ Now: {state.count}, before: {prevCount.current}
+
+ (state.count += 1)}>Increment
+
+ );
+}
+
+export default MyPreviousComponent;
+"
+`;
+
+exports[`React - stateType: solid > 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}
+
+
state.show()}
+ className={state.cls}
+ >
+ {state.showContent && props.slotContent ? (
+ <>{props.content || \\"{props.content}\\"}
+ ) : null}
+
+
+
{props.children}
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function CustomCode(props) {
+ const elem = useRef(null);
+ const state = useMutable({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Form 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import { Builder, builder } from \\"@builder.io/sdk\\";
+import {
+ BuilderBlock as BuilderBlockComponent,
+ BuilderBlocks,
+ get,
+ set,
+} from \\"@fake\\";
+
+function FormComponent(props) {
+ const formRef = useRef(null);
+ const state = useMutable({
+ 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\\";
+ }
+ );
+ }
+ },
+ });
+ return (
+ <>
+ {\\" \\"}
+ {\\" \\"}
+ {\\" \\"}
+
+ );
+}
+export default FormComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Image 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function Image(props) {
+ const pictureRef = useRef(null);
+ const state = useMutable({
+ 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,
+ });
+
+ useEffect(() => {
+ 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();
+ }
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (state.scrollListener) {
+ window.removeEventListener(\\"scroll\\", state.scrollListener);
+ }
+ };
+ }, []);
+
+ return (
+ <>
+
+
+ {!state.useLazyLoading() || state.load ? (
+
+ {props.children}
+
+ {state.images?.map((item, itemIndex) => (
+
+ ))}
+
state.handleChange(value)}
+ />
+ );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props) {
+ const state = useMutable({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ 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) => {
+ 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}
+
+ );
+}
+
+export default SubmitButton;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props) {
+ const state = useMutable({ name: \\"Decadef20\\" });
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+export default Text;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+function Textarea(props) {
+ return (
+
+ );
+}
+
+export default Textarea;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+function Video(props) {
+ return (
+
+ );
+}
+
+export default Video;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ });
+
+ return
Hello {state.name}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > basicForNoTagReference 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicForNoTagRefComponent(props) {
+ const state = useMutable({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ });
+
+ return (
+
+ Hello {state.name}
+ {props.actions?.map((action) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+
+export default MyBasicForNoTagRefComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicOnUpdateReturnComponent(props) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ state.name = data.name;
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [state.name]);
+
+ return
Hello! {state.name}
;
+}
+
+export default MyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function ClassNameCode(props) {
+ const state = useMutable({ bindings: \\"a binding\\" });
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+
+export default ClassNameCode;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > classState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicComponent(props) {
+ const state = useMutable({
+ classState: \\"testClassName\\",
+ styleState: {
+ color: \\"red\\",
+ },
+ });
+
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ });
+
+ return
{state.refToUse}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function Button(props) {
+ const state = useMutable({
+ 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)}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > import types 1`] = `
+"import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import RenderBlock from \\"./builder-render-block.raw\\";
+
+function RenderContent(props) {
+ const state = useMutable({
+ getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ },
+ });
+
+ return (
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MultipleOnUpdateWithDeps(props) {
+ const state = useMutable({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", state.a, state.b);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.a, state.b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", state.c, state.d);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.c, state.d]);
+
+ return
;
+}
+
+export default MultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicComponent(props) {
+ const state = useMutable({
+ attrs: {
+ hello: \\"world\\",
+ },
+ });
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props) {
+ return (
+ <>
+
Hello world
+
+
+ );
+}
+
+export default NestedStyles;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function Embed(props) {
+ const elem = useRef(null);
+ const state = useMutable({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ elem_onInitEditingBldr(event) {
+ console.log(\\"test\\");
+ state.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[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props) {
+ const state = useMutable({ name: \\"\\" });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = defaultValues.name || props.name;
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return
Default name defined by parent {state.name}
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function OnUpdateWithDeps(props) {
+ const state = useMutable({ a: \\"a\\", b: \\"b\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", state.a, state.b, props.size);
+ }, [state.a, state.b, props.size]);
+
+ return
;
+}
+
+export default OnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicComponent(props) {
+ const state = useMutable({ name: \\"Decadef20\\" });
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > referencingFunInsideHook 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function OnUpdate(props) {
+ const state = useMutable({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ });
+
+ useEffect(() => {
+ state.foo({
+ someOption: state.bar,
+ });
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > renderBlock 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import { TARGET } from \\"../../constants/target.js\\";
+import { evaluate } from \\"../../functions/evaluate.js\\";
+import { extractTextStyles } from \\"../../functions/extract-text-styles.js\\";
+import { getBlockActions } from \\"../../functions/get-block-actions.js\\";
+import { getBlockComponentOptions } from \\"../../functions/get-block-component-options.js\\";
+import { getBlockProperties } from \\"../../functions/get-block-properties.js\\";
+import { getBlockTag } from \\"../../functions/get-block-tag.js\\";
+import { getProcessedBlock } from \\"../../functions/get-processed-block.js\\";
+import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-block-styles.js\\";
+import BlockStyles from \\"./block-styles\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import RenderComponent from \\"./render-component\\";
+import RenderRepeatedBlock from \\"./render-repeated-block\\";
+
+function RenderBlock(props) {
+ const state = useMutable({
+ 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;
+ }
+ },
+ componentInfo: null,
+ });
+
+ return (
+ <>
+ {state.shouldWrap ? (
+ <>
+ {isEmptyHtmlElement(state.tag) ? (
+
+ ) : null}
+ {!isEmptyHtmlElement(state.tag) && state.repeatItemData ? (
+ <>
+ {state.repeatItemData?.map((data, index) => (
+
+ ))}
+
+ ) : null}
+ {!isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+
+
+ )}
+
+ );
+}
+
+export default RenderBlock;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+function RenderStyles(props) {
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+
Bar
+
+ ) : (
+
Foo
+ )}
+
+ );
+}
+
+export default RenderStyles;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > 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
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ?
complete
: <>9mb}
+ ) : props.conditionC === \\"Complete\\" ? (
+ <>dff
+ ) : (
+
complete else
+ )}
+
+ );
+}
+
+export default ShowWithOtherValues;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+function ShowRootText(props) {
+ return <>{props.conditionA ? <>ContentA :
else-condition-A
};
+}
+
+export default ShowRootText;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > jsx > Javascript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > spreadNestedProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > spreadProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function StringLiteralStore(props) {
+ const state = useMutable({ foo: 123 });
+
+ return
{state.foo}
;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default StylePropClassAndCss;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props) {
+ return
;
+}
+
+export default SubComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > svgComponent 1`] = `
+"import * as React from \\"react\\";
+
+function SvgComponent(props) {
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default SvgComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+function TypeDependency(props) {
+ return
{props.foo}
;
+}
+
+export default TypeDependency;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function TypeExternalStore(props) {
+ const state = useMutable({ _name: \\"test\\" });
+
+ return
Hello {state._name}!
;
+}
+
+export default TypeExternalStore;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function TypeGetterStore(props) {
+ const state = useMutable({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ });
+
+ return
Hello {state.name}!
;
+}
+
+export default TypeGetterStore;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
+ Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Javascript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function UseTargetComponent(props) {
+ const state = useMutable({
+ get name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ foo: \\"bar\\",
+ });
+
+ useEffect(() => {
+ console.log(state.foo);
+ state.foo = \\"bar\\";
+ console.log(\\"react\\");
+ state.lastName = \\"baz\\";
+ console.log(state.foo);
+ state.foo = \\"baz\\";
+ }, []);
+
+ return
{state.name}
;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > jsx > Remove Internal mitosis package 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicComponent(props) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ return (
+
+ Hello {state.name}! I can run in React, Qwik, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefComponent(props: Props) {
+ const inputRef = useRef
(null);
+ const inputNoArgRef = useRef(null);
+ const state = useMutable({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
+
+ 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!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface MyBasicComponentProps {
+ id: string;
+}
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ const state = useMutable({
+ name: \\"Steve\\",
+ underscore_fn_name() {
+ return \\"bar\\";
+ },
+ age: 1,
+ sports: [\\"\\"],
+ });
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Basic Context 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props: any) {
+ const state = useMutable({
+ name: \\"PatrickJS\\",
+ onChange: 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\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface Props {
+ hi: string;
+ bye: string;
+}
+
+function MyBasicOnMountUpdateComponent(props: Props) {
+ const state = useMutable({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = \\"PatrickJS onInit\\" + props.hi;
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ }, []);
+
+ return Hello {state.name}
;
+}
+
+export default MyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicOutputsComponent(props: any) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicOutputsComponent(props: any) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > BasicAttribute 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return
+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+
+export default MyBooleanAttribute;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props: any) {
+ const state = useMutable({ name: \\"Steve\\", dev: \\"PatrickJS\\" });
+
+ return (
+
+ );
+}
+
+export default MyBasicChildComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicForComponent(props: any) {
+ const state = useMutable({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ });
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {state.names?.map((person) => (
+ <>
+
+ );
+}
+
+export default MyBasicForComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > BasicRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefComponent(props: Props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const state = useMutable({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ 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!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefAssignmentComponent(props: Props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ const state = useMutable({
+ handlerClick: function handlerClick(event: Event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ },
+ });
+
+ return (
+
+ state.handlerClick(evt)}>Click
+
+ );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface Props {
+ showInput: boolean;
+}
+
+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: Props) {
+ const state = useMutable({ count: 0 });
+
+ const prevCount = useRef(state.count);
+
+ useEffect(() => {
+ prevCount.current = state.count;
+ }, [state.count]);
+
+ return (
+
+
+ Now: {state.count}, before: {prevCount.current}
+
+ (state.count += 1)}>Increment
+
+ );
+}
+
+export default MyPreviousComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Button 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ {props.columns?.map((column, index) => (
+
+ {column.content}
+ {index}
+
+ ))}
+
+ <>{props.slotTesting}
+
+
+
+ <>{props.children}
+
+
state.show()}
+ className={state.cls}
+ >
+ {state.showContent && props.slotContent ? (
+ <>{props.content || \\"{props.content}\\"}
+ ) : null}
+
+
+
{props.children}
+
(null);
+ const state = useMutable({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface CustomCodeProps {
+ code: string;
+ replaceNodes?: boolean;
+}
+
+function CustomCode(props: CustomCodeProps) {
+ const elem = useRef(null);
+ const state = useMutable({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Form 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+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\\";
+
+function FormComponent(props: FormProps) {
+ const formRef = useRef(null);
+ const state = useMutable({
+ 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\\";
+ }
+ );
+ }
+ },
+ });
+ return (
+ <>
+ {\\" \\"}
+ {\\" \\"}
+ {\\" \\"}
+
+ );
+}
+export default FormComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Image 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+// 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;
+}
+
+function Image(props: ImageProps) {
+ const pictureRef = useRef(null);
+ const state = useMutable({
+ 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,
+ });
+
+ useEffect(() => {
+ 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();
+ }
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (state.scrollListener) {
+ window.removeEventListener(\\"scroll\\", state.scrollListener);
+ }
+ };
+ }, []);
+
+ return (
+ <>
+
+
+ {!state.useLazyLoading() || state.load ? (
+
+ {props.children}
+
+ {state.images?.map((item, itemIndex) => (
+
+ ))}
+
state.handleChange(value)}
+ />
+ );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > RawText 1`] = `
+"import * as React from \\"react\\";
+
+export interface RawTextProps {
+ attributes?: any;
+ text?: string; // builderBlock?: any;
+}
+
+function RawText(props: RawTextProps) {
+ return (
+
+ {props.options?.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+
+export default SelectComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > SlotNamed 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+ return (
+
+ <>{props.myAwesomeSlot}
+ <>{props.top}
+ <>{props.left || \\"Default left\\"}
+ <>{props.children || \\"Default Child\\"}
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+type SmileReviewsProps = {
+ productId: string;
+ apiKey: string;
+};
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props: SmileReviewsProps) {
+ const state = useMutable({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ 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) => {
+ 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}
+
+ );
+}
+
+export default SubmitButton;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface TextProps {
+ attributes?: any;
+ rtlMode: boolean;
+ text?: string;
+ content?: string;
+ builderBlock?: any;
+}
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props: TextProps) {
+ const state = useMutable({ name: \\"Decadef20\\" });
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+export default Text;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+export interface TextareaProps {
+ attributes?: any;
+ name?: string;
+ value?: string;
+ defaultValue?: string;
+ placeholder?: string;
+}
+
+function Textarea(props: TextareaProps) {
+ return (
+
+ );
+}
+
+export default Textarea;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+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;
+}
+
+function Video(props: VideoProps) {
+ return (
+
+ );
+}
+
+export default Video;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ });
+
+ return
Hello {state.name}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > basicForNoTagReference 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicForNoTagRefComponent(props: any) {
+ const state = useMutable({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ });
+
+ return (
+
+ Hello {state.name}
+ {props.actions?.map((action) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+
+export default MyBasicForNoTagRefComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface Props {
+ showInput: boolean;
+ inputRef: HTMLInputElement;
+}
+
+const MyBasicForwardRefComponent = forwardRef
(
+ function MyBasicForwardRefComponent(props: Props, inputRef) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface Props {
+ showInput: boolean;
+ inputRef: HTMLInputElement;
+}
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props: Props, inputRef) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicOnUpdateReturnComponent(props: any) {
+ const state = useMutable({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ state.name = data.name;
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [state.name]);
+
+ return Hello! {state.name}
;
+}
+
+export default MyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > class + ClassName + css 1`] = `
+"import * as React from \\"react\\";
+import MyComp from \\"./my-component\\";
+
+function MyBasicComponent(props: any) {
+ return (
+ <>
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > className + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+type Props = {
+ [key: string]: string | JSX.Element;
+ slotTesting: JSX.Element;
+};
+import type { JSX } from \\"../../../../jsx-runtime\\";
+
+function ClassNameCode(props: Props) {
+ const state = useMutable({ bindings: \\"a binding\\" });
+
+ return (
+
+
Without Binding
+
With binding
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > componentWithContext 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>{foo.value}
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>
+ <>{foo.value}
+ other
+
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`React - stateType: solid > 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: any) {
+ return (
+
+ setting context
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > defaultProps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ buttonText?: string; // no default value
+
+ link?: string;
+ openLinkInNewTab?: boolean;
+ onClick?: () => void;
+}
+
+function Button(props: ButtonProps) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick()}
+ >
+ {props.buttonText}
+
+ ) : null}
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick(event)}
+ >
+ {props.text}
+
+ ) : null}
+
Hello {props.name || DEFAULT_VALUES.name}
;
+}
+
+export default ComponentWithTypes;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ });
+
+ return {state.refToUse}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export interface ButtonProps {
+ foo: string;
+}
+
+function Button(props: ButtonProps) {
+ const state = useMutable({
+ 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)}
+
;
+}
+
+export default MultipleOnUpdate;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MultipleOnUpdateWithDeps(props: any) {
+ const state = useMutable({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", state.a, state.b);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.a, state.b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", state.c, state.d);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.c, state.d]);
+
+ return
;
+}
+
+export default MultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyBasicComponent(props: any) {
+ const state = useMutable({
+ attrs: {
+ hello: \\"world\\",
+ },
+ });
+
+ return if condition A and condition B
+ ) : (
+ else-condition-B
+ )}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props: any) {
+ return (
+ <>
+ Hello world
+
+
+ );
+}
+
+export default NestedStyles;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function Embed(props: any) {
+ const elem = useRef(null);
+ const state = useMutable({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ elem_onInitEditingBldr(event) {
+ console.log(\\"test\\");
+ state.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[`React - stateType: solid > jsx > Typescript Test > onInit & onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function OnInit(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ return
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+type Props = {
+ name: string;
+};
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props: Props) {
+ const state = useMutable({ name: \\"\\" });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = defaultValues.name || props.name;
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return Default name defined by parent {state.name}
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ return
;
+}
+
+export default OnInitPlain;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props: any) {
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"Runs on unMount\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default Comp;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > onMountMultiple 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props: any) {
+ 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[`React - stateType: solid > jsx > Typescript Test > onUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props: any) {
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+type Props = {
+ size: string;
+};
+
+function OnUpdateWithDeps(props: Props) {
+ const state = useMutable({ a: \\"a\\", b: \\"b\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", state.a, state.b, props.size);
+ }, [state.a, state.b, props.size]);
+
+ return
;
+}
+
+export default OnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
+"import * as React from \\"react\\";
+
+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) {}
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > preserveTyping 1`] = `
+"import * as React from \\"react\\";
+
+export type A = \\"test\\";
+export interface C {
+ n: \\"test\\";
+}
+type B = \\"test2\\";
+interface D {
+ n: \\"test\\";
+}
+export interface MyBasicComponentProps {
+ name: string;
+ age?: number;
+}
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+type Props = {
+ children: any;
+ type: string;
+};
+
+function MyBasicComponent(props: Props) {
+ const state = useMutable({ name: \\"Decadef20\\" });
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > propsInterface 1`] = `
+"import * as React from \\"react\\";
+
+interface Person {
+ name: string;
+ age?: number;
+}
+
+function MyBasicComponent(props: Person | never) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > propsType 1`] = `
+"import * as React from \\"react\\";
+
+type Person = {
+ name: string;
+ age?: number;
+};
+
+function MyBasicComponent(props: Person) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > referencingFunInsideHook 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function OnUpdate(props: any) {
+ const state = useMutable({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ });
+
+ useEffect(() => {
+ state.foo({
+ someOption: state.bar,
+ });
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > renderBlock 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+export type RenderBlockProps = {
+ block: BuilderBlock;
+ context: BuilderContextInterface;
+};
+import { TARGET } from \\"../../constants/target.js\\";
+import type {
+ BuilderContextInterface,
+ RegisteredComponent,
+} from \\"../../context/types.js\\";
+import { evaluate } from \\"../../functions/evaluate.js\\";
+import { extractTextStyles } from \\"../../functions/extract-text-styles.js\\";
+import { getBlockActions } from \\"../../functions/get-block-actions.js\\";
+import { getBlockComponentOptions } from \\"../../functions/get-block-component-options.js\\";
+import { getBlockProperties } from \\"../../functions/get-block-properties.js\\";
+import { getBlockTag } from \\"../../functions/get-block-tag.js\\";
+import { getProcessedBlock } from \\"../../functions/get-processed-block.js\\";
+import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-block-styles.js\\";
+import type { BuilderBlock } from \\"../../types/builder-block.js\\";
+import type { Nullable } from \\"../../types/typescript.js\\";
+import BlockStyles from \\"./block-styles\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import type { RenderComponentProps } from \\"./render-component\\";
+import RenderComponent from \\"./render-component\\";
+import RenderRepeatedBlock from \\"./render-repeated-block\\";
+import type { RepeatData } from \\"./types.js\\";
+
+function RenderBlock(props: RenderBlockProps) {
+ const state = useMutable({
+ 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;
+ }
+ },
+ componentInfo: null,
+ });
+
+ return (
+ <>
+ {state.shouldWrap ? (
+ <>
+ {isEmptyHtmlElement(state.tag) ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+
+ trackClick(props.content.id)}>
+
+
+
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+ return (
+ <>
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+export interface RenderStylesProps {
+ foo: string;
+}
+
+function RenderStyles(props: RenderStylesProps) {
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+ Bar
+
+ ) : (
+ Foo
+ )}
+
+ );
+}
+
+export default RenderStyles;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > self-referencing component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > self-referencing component with children 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ 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
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ?
complete
: <>9mb}
+ ) : props.conditionC === \\"Complete\\" ? (
+ <>dff
+ ) : (
+
complete else
+ )}
+
{item}
+ ))}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > showWithOtherValues 1`] = `
+"import * as React from \\"react\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+function ShowWithOtherValues(props: 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[`React - stateType: solid > jsx > Typescript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+function ShowRootText(props: Props) {
+ return <>{props.conditionA ? <>ContentA : else-condition-A
};
+}
+
+export default ShowRootText;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type Props = {
+ id: string;
+ foo: {
+ bar: {
+ baz: number;
+ };
+ };
+};
+
+function MyBasicComponent(props: 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[`React - stateType: solid > jsx > Typescript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ return {state.foo}
;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props: any) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default StylePropClassAndCss;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props: any) {
+ return
+
+
+
+
+
+ );
+}
+
+export default SvgComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+export type TypeDependencyProps = {
+ foo: Foo;
+ foo2: Foo2;
+};
+import type { Foo } from \\"./foo-type\\";
+import type { Foo as Foo2 } from \\"./type-export\\";
+
+function TypeDependency(props: TypeDependencyProps) {
+ return {props.foo}
;
+}
+
+export default TypeDependency;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import { FooStore } from \\"./foo-store\\";
+
+function TypeExternalStore(props: any) {
+ const state = useMutable({ _name: \\"test\\" });
+
+ return Hello {state._name}!
;
+}
+
+export default TypeExternalStore;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+type GetterStore = {
+ getName: () => string;
+ name: string;
+ get test(): string;
+};
+
+function TypeGetterStore(props: any) {
+ const state = useMutable({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ });
+
+ return Hello {state.name}!
;
+}
+
+export default TypeGetterStore;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+ Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+
+ Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+ Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function UseTargetComponent(props: any) {
+ const state = useMutable({
+ get name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ foo: \\"bar\\",
+ });
+
+ useEffect(() => {
+ console.log(state.foo);
+ state.foo = \\"bar\\";
+ console.log(\\"react\\");
+ state.lastName = \\"baz\\";
+ console.log(state.foo);
+ state.foo = \\"baz\\";
+ }, []);
+
+ return {state.name}
;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`React - stateType: solid > jsx > Typescript Test > webComponent 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { register } from \\"swiper/element/bundle\\";
+
+function MyBasicWebComponent(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ register();
+ hasInitialized.current = true;
+ }
+
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+
+export default MyBasicWebComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Javascript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({ name: \\"Steve\\" });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Javascript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({ tortilla: \\"Plain\\", fillings: [] });
+
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Javascript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({ value: \\"hello\\" });
+
+ return {state.activeTab}
+ | ^
+ 36 |
+ 37 |
+ 38 |"
+`;
+
+exports[`React - stateType: solid > svelte > Javascript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
+
+ return (
+
+ {state.numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Javascript Test > eventHandlers 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ });
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Javascript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({ html: \\"bold \\" });
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Javascript Test > ifElse 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ });
+
+ return (
+ <>
+ {state.show ? (
+ <>
+ state.toggle(event)}> Hide
+
+ ) : (
+ state.toggle(event)}> Show
+ )}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Javascript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props) {
+ const state = useMutable({ disabled: false });
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > 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[`React - stateType: solid > svelte > Javascript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Javascript Test > reactiveWithFn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props) {
+ const state = useMutable({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ });
+
+ useEffect(() => {
+ state.calculateResult(state.a, state.b);
+ }, [state.a, state.b]);
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Javascript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({ name: \\"Steve\\" });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({ tortilla: \\"Plain\\", fillings: [] });
+
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({ value: \\"hello\\" });
+
+ return {state.activeTab}
+ | ^
+ 36 |
+ 37 |
+ 38 |"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
+
+ return (
+
+ {state.numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > eventHandlers 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ });
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({ html: \\"bold \\" });
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > ifElse 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ });
+
+ return (
+ <>
+ {state.show ? (
+ <>
+ state.toggle(event)}> Hide
+
+ ) : (
+ state.toggle(event)}> Show
+ )}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({ disabled: false });
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > lifecycleHooks 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyComponent(props: any) {
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ useEffect(() => {
+ console.log(\\"onAfterUpdate\\");
+ });
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"onDestroy\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > reactiveWithFn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useMutable } from \\"react-solid-state\\";
+
+function MyComponent(props: any) {
+ const state = useMutable({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ });
+
+ useEffect(() => {
+ state.calculateResult(state.a, state.b);
+ }, [state.a, state.b]);
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: solid > svelte > Typescript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
new file mode 100644
index 0000000000..1c6ef4cdd2
--- /dev/null
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -0,0 +1,7996 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`React - stateType: valtio > jsx > Javascript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const state = useLocalProxy({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
+
+ 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!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props) {
+ const state = useLocalProxy({
+ name: \\"Steve\\",
+ underscore_fn_name() {
+ return \\"bar\\";
+ },
+ age: 1,
+ sports: [\\"\\"],
+ });
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Basic Context 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props) {
+ const state = useLocalProxy({
+ name: \\"PatrickJS\\",
+ onChange: 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\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicOnMountUpdateComponent(props) {
+ const state = useLocalProxy({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = \\"PatrickJS onInit\\" + props.hi;
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ }, []);
+
+ return Hello {state.name}
;
+}
+
+export default MyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicOutputsComponent(props) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicOutputsComponent(props) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props) {
+ const state = useLocalProxy({ name: \\"Steve\\", dev: \\"PatrickJS\\" });
+
+ return (
+
+ );
+}
+
+export default MyBasicChildComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicForComponent(props) {
+ const state = useLocalProxy({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ });
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {state.names?.map((person) => (
+ <>
+
+ );
+}
+
+export default MyBasicForComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > BasicRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const state = useLocalProxy({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ 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!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicRefAssignmentComponent(props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ const state = useLocalProxy({
+ handlerClick: function handlerClick(event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ },
+ });
+
+ return (
+
+ state.handlerClick(evt)}>Click
+
+ );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+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 state = useLocalProxy({ count: 0 });
+
+ const prevCount = useRef(state.count);
+
+ useEffect(() => {
+ prevCount.current = state.count;
+ }, [state.count]);
+
+ return (
+
+
+ Now: {state.count}, before: {prevCount.current}
+
+ (state.count += 1)}>Increment
+
+ );
+}
+
+export default MyPreviousComponent;
+"
+`;
+
+exports[`React - stateType: valtio > 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}
+
+
state.show()}
+ className={state.cls}
+ >
+ {state.showContent && props.slotContent ? (
+ <>{props.content || \\"{props.content}\\"}
+ ) : null}
+
+
+
{props.children}
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function CustomCode(props) {
+ const elem = useRef(null);
+ const state = useLocalProxy({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Form 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import { Builder, builder } from \\"@builder.io/sdk\\";
+import {
+ BuilderBlock as BuilderBlockComponent,
+ BuilderBlocks,
+ get,
+ set,
+} from \\"@fake\\";
+
+function FormComponent(props) {
+ const formRef = useRef(null);
+ const state = useLocalProxy({
+ 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\\";
+ }
+ );
+ }
+ },
+ });
+ return (
+ <>
+ {\\" \\"}
+ {\\" \\"}
+ {\\" \\"}
+
+ );
+}
+export default FormComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Image 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function Image(props) {
+ const pictureRef = useRef(null);
+ const state = useLocalProxy({
+ 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,
+ });
+
+ useEffect(() => {
+ 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();
+ }
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (state.scrollListener) {
+ window.removeEventListener(\\"scroll\\", state.scrollListener);
+ }
+ };
+ }, []);
+
+ return (
+ <>
+
+
+ {!state.useLazyLoading() || state.load ? (
+
+ {props.children}
+
+ {state.images?.map((item, itemIndex) => (
+
+ ))}
+
state.handleChange(value)}
+ />
+ );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props) {
+ const state = useLocalProxy({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ 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) => {
+ 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}
+
+ );
+}
+
+export default SubmitButton;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props) {
+ const state = useLocalProxy({ name: \\"Decadef20\\" });
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+export default Text;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+function Textarea(props) {
+ return (
+
+ );
+}
+
+export default Textarea;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+function Video(props) {
+ return (
+
+ );
+}
+
+export default Video;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ });
+
+ return
Hello {state.name}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > basicForNoTagReference 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicForNoTagRefComponent(props) {
+ const state = useLocalProxy({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ });
+
+ return (
+
+ Hello {state.name}
+ {props.actions?.map((action) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+
+export default MyBasicForNoTagRefComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicOnUpdateReturnComponent(props) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ state.name = data.name;
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [state.name]);
+
+ return
Hello! {state.name}
;
+}
+
+export default MyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function ClassNameCode(props) {
+ const state = useLocalProxy({ bindings: \\"a binding\\" });
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+
+export default ClassNameCode;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > classState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicComponent(props) {
+ const state = useLocalProxy({
+ classState: \\"testClassName\\",
+ styleState: {
+ color: \\"red\\",
+ },
+ });
+
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ });
+
+ return
{state.refToUse}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function Button(props) {
+ const state = useLocalProxy({
+ 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)}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > import types 1`] = `
+"import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import RenderBlock from \\"./builder-render-block.raw\\";
+
+function RenderContent(props) {
+ const state = useLocalProxy({
+ getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ },
+ });
+
+ return (
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MultipleOnUpdateWithDeps(props) {
+ const state = useLocalProxy({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", state.a, state.b);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.a, state.b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", state.c, state.d);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.c, state.d]);
+
+ return
;
+}
+
+export default MultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicComponent(props) {
+ const state = useLocalProxy({
+ attrs: {
+ hello: \\"world\\",
+ },
+ });
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props) {
+ return (
+ <>
+
Hello world
+
+
+ );
+}
+
+export default NestedStyles;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function Embed(props) {
+ const elem = useRef(null);
+ const state = useLocalProxy({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ elem_onInitEditingBldr(event) {
+ console.log(\\"test\\");
+ state.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[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props) {
+ const state = useLocalProxy({ name: \\"\\" });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = defaultValues.name || props.name;
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return
Default name defined by parent {state.name}
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function OnUpdateWithDeps(props) {
+ const state = useLocalProxy({ a: \\"a\\", b: \\"b\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", state.a, state.b, props.size);
+ }, [state.a, state.b, props.size]);
+
+ return
;
+}
+
+export default OnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicComponent(props) {
+ const state = useLocalProxy({ name: \\"Decadef20\\" });
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > referencingFunInsideHook 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function OnUpdate(props) {
+ const state = useLocalProxy({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ });
+
+ useEffect(() => {
+ state.foo({
+ someOption: state.bar,
+ });
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > renderBlock 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import { TARGET } from \\"../../constants/target.js\\";
+import { evaluate } from \\"../../functions/evaluate.js\\";
+import { extractTextStyles } from \\"../../functions/extract-text-styles.js\\";
+import { getBlockActions } from \\"../../functions/get-block-actions.js\\";
+import { getBlockComponentOptions } from \\"../../functions/get-block-component-options.js\\";
+import { getBlockProperties } from \\"../../functions/get-block-properties.js\\";
+import { getBlockTag } from \\"../../functions/get-block-tag.js\\";
+import { getProcessedBlock } from \\"../../functions/get-processed-block.js\\";
+import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-block-styles.js\\";
+import BlockStyles from \\"./block-styles\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import RenderComponent from \\"./render-component\\";
+import RenderRepeatedBlock from \\"./render-repeated-block\\";
+
+function RenderBlock(props) {
+ const state = useLocalProxy({
+ 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;
+ }
+ },
+ componentInfo: null,
+ });
+
+ return (
+ <>
+ {state.shouldWrap ? (
+ <>
+ {isEmptyHtmlElement(state.tag) ? (
+
+ ) : null}
+ {!isEmptyHtmlElement(state.tag) && state.repeatItemData ? (
+ <>
+ {state.repeatItemData?.map((data, index) => (
+
+ ))}
+
+ ) : null}
+ {!isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+
+
+ )}
+
+ );
+}
+
+export default RenderBlock;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+function RenderStyles(props) {
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+
Bar
+
+ ) : (
+
Foo
+ )}
+
+ );
+}
+
+export default RenderStyles;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > 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
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ?
complete
: <>9mb}
+ ) : props.conditionC === \\"Complete\\" ? (
+ <>dff
+ ) : (
+
complete else
+ )}
+
+ );
+}
+
+export default ShowWithOtherValues;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+function ShowRootText(props) {
+ return <>{props.conditionA ? <>ContentA :
else-condition-A
};
+}
+
+export default ShowRootText;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Javascript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > spreadNestedProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > spreadProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function StringLiteralStore(props) {
+ const state = useLocalProxy({ foo: 123 });
+
+ return
{state.foo}
;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default StylePropClassAndCss;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props) {
+ return
;
+}
+
+export default SubComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > svgComponent 1`] = `
+"import * as React from \\"react\\";
+
+function SvgComponent(props) {
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default SvgComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+function TypeDependency(props) {
+ return
{props.foo}
;
+}
+
+export default TypeDependency;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function TypeExternalStore(props) {
+ const state = useLocalProxy({ _name: \\"test\\" });
+
+ return
Hello {state._name}!
;
+}
+
+export default TypeExternalStore;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function TypeGetterStore(props) {
+ const state = useLocalProxy({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ });
+
+ return
Hello {state.name}!
;
+}
+
+export default TypeGetterStore;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
+ Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Javascript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function UseTargetComponent(props) {
+ const state = useLocalProxy({
+ get name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ foo: \\"bar\\",
+ });
+
+ useEffect(() => {
+ console.log(state.foo);
+ state.foo = \\"bar\\";
+ console.log(\\"react\\");
+ state.lastName = \\"baz\\";
+ console.log(state.foo);
+ state.foo = \\"baz\\";
+ }, []);
+
+ return
{state.name}
;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > jsx > Remove Internal mitosis package 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicComponent(props) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ return (
+
+ Hello {state.name}! I can run in React, Qwik, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > AdvancedRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefComponent(props: Props) {
+ const inputRef = useRef
(null);
+ const inputNoArgRef = useRef(null);
+ const state = useLocalProxy({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
+
+ 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!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface MyBasicComponentProps {
+ id: string;
+}
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ const state = useLocalProxy({
+ name: \\"Steve\\",
+ underscore_fn_name() {
+ return \\"bar\\";
+ },
+ age: 1,
+ sports: [\\"\\"],
+ });
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Basic Context 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props: any) {
+ const state = useLocalProxy({
+ name: \\"PatrickJS\\",
+ onChange: 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\\") + state.name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface Props {
+ hi: string;
+ bye: string;
+}
+
+function MyBasicOnMountUpdateComponent(props: Props) {
+ const state = useLocalProxy({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = \\"PatrickJS onInit\\" + props.hi;
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ state.name = \\"PatrickJS onMount\\" + props.bye;
+ }, []);
+
+ return Hello {state.name}
;
+}
+
+export default MyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicOutputsComponent(props: any) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicOutputsComponent(props: any) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ props.onMessage(state.name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > BasicAttribute 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return
+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+
+export default MyBooleanAttribute;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props: any) {
+ const state = useLocalProxy({ name: \\"Steve\\", dev: \\"PatrickJS\\" });
+
+ return (
+
+ );
+}
+
+export default MyBasicChildComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicForComponent(props: any) {
+ const state = useLocalProxy({
+ name: \\"PatrickJS\\",
+ names: [\\"Steve\\", \\"PatrickJS\\"],
+ });
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {state.names?.map((person) => (
+ <>
+
+ );
+}
+
+export default MyBasicForComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > BasicRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefComponent(props: Props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const state = useLocalProxy({
+ name: \\"PatrickJS\\",
+ onBlur: function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ },
+ lowerCaseName: function lowerCaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ 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!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefAssignmentComponent(props: Props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ const state = useLocalProxy({
+ handlerClick: function handlerClick(event: Event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ },
+ });
+
+ return (
+
+ state.handlerClick(evt)}>Click
+
+ );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface Props {
+ showInput: boolean;
+}
+
+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: Props) {
+ const state = useLocalProxy({ count: 0 });
+
+ const prevCount = useRef(state.count);
+
+ useEffect(() => {
+ prevCount.current = state.count;
+ }, [state.count]);
+
+ return (
+
+
+ Now: {state.count}, before: {prevCount.current}
+
+ (state.count += 1)}>Increment
+
+ );
+}
+
+export default MyPreviousComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Button 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ {props.columns?.map((column, index) => (
+
+ {column.content}
+ {index}
+
+ ))}
+
+ <>{props.slotTesting}
+
+
+
+ <>{props.children}
+
+
state.show()}
+ className={state.cls}
+ >
+ {state.showContent && props.slotContent ? (
+ <>{props.content || \\"{props.content}\\"}
+ ) : null}
+
+
+
{props.children}
+
(null);
+ const state = useLocalProxy({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface CustomCodeProps {
+ code: string;
+ replaceNodes?: boolean;
+}
+
+function CustomCode(props: CustomCodeProps) {
+ const elem = useRef(null);
+ const state = useLocalProxy({
+ 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);
+ }
+ }
+ }
+ }
+ },
+ });
+
+ useEffect(() => {
+ state.findAndRunScripts();
+ }, []);
+
+ return (
+
+ );
+}
+
+export default CustomCode;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Form 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+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\\";
+
+function FormComponent(props: FormProps) {
+ const formRef = useRef(null);
+ const state = useLocalProxy({
+ 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\\";
+ }
+ );
+ }
+ },
+ });
+ return (
+ <>
+ {\\" \\"}
+ {\\" \\"}
+ {\\" \\"}
+
+ );
+}
+export default FormComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Image 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+// 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;
+}
+
+function Image(props: ImageProps) {
+ const pictureRef = useRef(null);
+ const state = useLocalProxy({
+ 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,
+ });
+
+ useEffect(() => {
+ 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();
+ }
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ if (state.scrollListener) {
+ window.removeEventListener(\\"scroll\\", state.scrollListener);
+ }
+ };
+ }, []);
+
+ return (
+ <>
+
+
+ {!state.useLazyLoading() || state.load ? (
+
+ {props.children}
+
+ {state.images?.map((item, itemIndex) => (
+
+ ))}
+
state.handleChange(value)}
+ />
+ );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > RawText 1`] = `
+"import * as React from \\"react\\";
+
+export interface RawTextProps {
+ attributes?: any;
+ text?: string; // builderBlock?: any;
+}
+
+function RawText(props: RawTextProps) {
+ return (
+
+ {props.options?.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+
+export default SelectComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > SlotNamed 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+ return (
+
+ <>{props.myAwesomeSlot}
+ <>{props.top}
+ <>{props.left || \\"Default left\\"}
+ <>{props.children || \\"Default Child\\"}
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+type SmileReviewsProps = {
+ productId: string;
+ apiKey: string;
+};
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props: SmileReviewsProps) {
+ const state = useLocalProxy({
+ reviews: [],
+ name: \\"test\\",
+ showReviewPrompt: false,
+ kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ },
+ 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) => {
+ 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}
+
+ );
+}
+
+export default SubmitButton;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface TextProps {
+ attributes?: any;
+ rtlMode: boolean;
+ text?: string;
+ content?: string;
+ builderBlock?: any;
+}
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props: TextProps) {
+ const state = useLocalProxy({ name: \\"Decadef20\\" });
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+export default Text;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+export interface TextareaProps {
+ attributes?: any;
+ name?: string;
+ value?: string;
+ defaultValue?: string;
+ placeholder?: string;
+}
+
+function Textarea(props: TextareaProps) {
+ return (
+
+ );
+}
+
+export default Textarea;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+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;
+}
+
+function Video(props: VideoProps) {
+ return (
+
+ );
+}
+
+export default Video;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({
+ name: \\"steve\\",
+ setName(value) {
+ state.name = value;
+ },
+ updateNameWithArrowFn(value) {
+ state.name = value;
+ },
+ });
+
+ return
Hello {state.name}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > basicForNoTagReference 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicForNoTagRefComponent(props: any) {
+ const state = useLocalProxy({
+ name: \\"VincentW\\",
+ TagName: \\"div\\",
+ tag: \\"span\\",
+ get TagNameGetter() {
+ return \\"span\\";
+ },
+ });
+
+ return (
+
+ Hello {state.name}
+ {props.actions?.map((action) => (
+
+ {action.text}
+
+ ))}
+
+ );
+}
+
+export default MyBasicForNoTagRefComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface Props {
+ showInput: boolean;
+ inputRef: HTMLInputElement;
+}
+
+const MyBasicForwardRefComponent = forwardRef
(
+ function MyBasicForwardRefComponent(props: Props, inputRef) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface Props {
+ showInput: boolean;
+ inputRef: HTMLInputElement;
+}
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props: Props, inputRef) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicOnUpdateReturnComponent(props: any) {
+ const state = useLocalProxy({ name: \\"PatrickJS\\" });
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ state.name = data.name;
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [state.name]);
+
+ return Hello! {state.name}
;
+}
+
+export default MyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > class + ClassName + css 1`] = `
+"import * as React from \\"react\\";
+import MyComp from \\"./my-component\\";
+
+function MyBasicComponent(props: any) {
+ return (
+ <>
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > className + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+type Props = {
+ [key: string]: string | JSX.Element;
+ slotTesting: JSX.Element;
+};
+import type { JSX } from \\"../../../../jsx-runtime\\";
+
+function ClassNameCode(props: Props) {
+ const state = useLocalProxy({ bindings: \\"a binding\\" });
+
+ return (
+
+
Without Binding
+
With binding
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > componentWithContext 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>{foo.value}
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>
+ <>{foo.value}
+ other
+
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`React - stateType: valtio > 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: any) {
+ return (
+
+ setting context
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > defaultProps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ buttonText?: string; // no default value
+
+ link?: string;
+ openLinkInNewTab?: boolean;
+ onClick?: () => void;
+}
+
+function Button(props: ButtonProps) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick()}
+ >
+ {props.buttonText}
+
+ ) : null}
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick(event)}
+ >
+ {props.text}
+
+ ) : null}
+
Hello {props.name || DEFAULT_VALUES.name}
;
+}
+
+export default ComponentWithTypes;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({
+ refToUse: !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null,
+ });
+
+ return {state.refToUse}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export interface ButtonProps {
+ foo: string;
+}
+
+function Button(props: ButtonProps) {
+ const state = useLocalProxy({
+ 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)}
+
;
+}
+
+export default MultipleOnUpdate;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MultipleOnUpdateWithDeps(props: any) {
+ const state = useLocalProxy({ a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", state.a, state.b);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.a, state.b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", state.c, state.d);
+
+ if (state.a === \\"a\\") {
+ state.a = \\"b\\";
+ }
+ }, [state.c, state.d]);
+
+ return
;
+}
+
+export default MultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyBasicComponent(props: any) {
+ const state = useLocalProxy({
+ attrs: {
+ hello: \\"world\\",
+ },
+ });
+
+ return if condition A and condition B
+ ) : (
+ else-condition-B
+ )}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props: any) {
+ return (
+ <>
+ Hello world
+
+
+ );
+}
+
+export default NestedStyles;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function Embed(props: any) {
+ const elem = useRef(null);
+ const state = useLocalProxy({
+ foo(event) {
+ console.log(\\"test2\\");
+ },
+ elem_onInitEditingBldr(event) {
+ console.log(\\"test\\");
+ state.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[`React - stateType: valtio > jsx > Typescript Test > onInit & onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function OnInit(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ return
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+type Props = {
+ name: string;
+};
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props: Props) {
+ const state = useLocalProxy({ name: \\"\\" });
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ state.name = defaultValues.name || props.name;
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return Default name defined by parent {state.name}
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ return
;
+}
+
+export default OnInitPlain;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props: any) {
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"Runs on unMount\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default Comp;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > onMountMultiple 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props: any) {
+ 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[`React - stateType: valtio > jsx > Typescript Test > onUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props: any) {
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+type Props = {
+ size: string;
+};
+
+function OnUpdateWithDeps(props: Props) {
+ const state = useLocalProxy({ a: \\"a\\", b: \\"b\\" });
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", state.a, state.b, props.size);
+ }, [state.a, state.b, props.size]);
+
+ return
;
+}
+
+export default OnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
+"import * as React from \\"react\\";
+
+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) {}
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > preserveTyping 1`] = `
+"import * as React from \\"react\\";
+
+export type A = \\"test\\";
+export interface C {
+ n: \\"test\\";
+}
+type B = \\"test2\\";
+interface D {
+ n: \\"test\\";
+}
+export interface MyBasicComponentProps {
+ name: string;
+ age?: number;
+}
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+type Props = {
+ children: any;
+ type: string;
+};
+
+function MyBasicComponent(props: Props) {
+ const state = useLocalProxy({ name: \\"Decadef20\\" });
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > propsInterface 1`] = `
+"import * as React from \\"react\\";
+
+interface Person {
+ name: string;
+ age?: number;
+}
+
+function MyBasicComponent(props: Person | never) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > propsType 1`] = `
+"import * as React from \\"react\\";
+
+type Person = {
+ name: string;
+ age?: number;
+};
+
+function MyBasicComponent(props: Person) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > referencingFunInsideHook 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function OnUpdate(props: any) {
+ const state = useLocalProxy({
+ foo: function foo(params) {},
+ bar: function bar() {},
+ zoo: function zoo() {
+ const params = {
+ cb: state.bar,
+ };
+ },
+ });
+
+ useEffect(() => {
+ state.foo({
+ someOption: state.bar,
+ });
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > renderBlock 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+export type RenderBlockProps = {
+ block: BuilderBlock;
+ context: BuilderContextInterface;
+};
+import { TARGET } from \\"../../constants/target.js\\";
+import type {
+ BuilderContextInterface,
+ RegisteredComponent,
+} from \\"../../context/types.js\\";
+import { evaluate } from \\"../../functions/evaluate.js\\";
+import { extractTextStyles } from \\"../../functions/extract-text-styles.js\\";
+import { getBlockActions } from \\"../../functions/get-block-actions.js\\";
+import { getBlockComponentOptions } from \\"../../functions/get-block-component-options.js\\";
+import { getBlockProperties } from \\"../../functions/get-block-properties.js\\";
+import { getBlockTag } from \\"../../functions/get-block-tag.js\\";
+import { getProcessedBlock } from \\"../../functions/get-processed-block.js\\";
+import { getReactNativeBlockStyles } from \\"../../functions/get-react-native-block-styles.js\\";
+import type { BuilderBlock } from \\"../../types/builder-block.js\\";
+import type { Nullable } from \\"../../types/typescript.js\\";
+import BlockStyles from \\"./block-styles\\";
+import { isEmptyHtmlElement } from \\"./render-block.helpers.js\\";
+import RenderComponentWithContext from \\"./render-component-with-context.js\\";
+import type { RenderComponentProps } from \\"./render-component\\";
+import RenderComponent from \\"./render-component\\";
+import RenderRepeatedBlock from \\"./render-repeated-block\\";
+import type { RepeatData } from \\"./types.js\\";
+
+function RenderBlock(props: RenderBlockProps) {
+ const state = useLocalProxy({
+ 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;
+ }
+ },
+ componentInfo: null,
+ });
+
+ return (
+ <>
+ {state.shouldWrap ? (
+ <>
+ {isEmptyHtmlElement(state.tag) ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+
+ trackClick(props.content.id)}>
+
+
+
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+ return (
+ <>
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+export interface RenderStylesProps {
+ foo: string;
+}
+
+function RenderStyles(props: RenderStylesProps) {
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+ Bar
+
+ ) : (
+ Foo
+ )}
+
+ );
+}
+
+export default RenderStyles;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > self-referencing component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > self-referencing component with children 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ 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
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ?
complete
: <>9mb}
+ ) : props.conditionC === \\"Complete\\" ? (
+ <>dff
+ ) : (
+
complete else
+ )}
+
{item}
+ ))}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > showWithOtherValues 1`] = `
+"import * as React from \\"react\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+function ShowWithOtherValues(props: 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[`React - stateType: valtio > jsx > Typescript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+function ShowRootText(props: Props) {
+ return <>{props.conditionA ? <>ContentA : else-condition-A
};
+}
+
+export default ShowRootText;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type Props = {
+ id: string;
+ foo: {
+ bar: {
+ baz: number;
+ };
+ };
+};
+
+function MyBasicComponent(props: 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[`React - stateType: valtio > jsx > Typescript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ return {state.foo}
;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props: any) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default StylePropClassAndCss;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props: any) {
+ return
+
+
+
+
+
+ );
+}
+
+export default SvgComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+export type TypeDependencyProps = {
+ foo: Foo;
+ foo2: Foo2;
+};
+import type { Foo } from \\"./foo-type\\";
+import type { Foo as Foo2 } from \\"./type-export\\";
+
+function TypeDependency(props: TypeDependencyProps) {
+ return {props.foo}
;
+}
+
+export default TypeDependency;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import { FooStore } from \\"./foo-store\\";
+
+function TypeExternalStore(props: any) {
+ const state = useLocalProxy({ _name: \\"test\\" });
+
+ return Hello {state._name}!
;
+}
+
+export default TypeExternalStore;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+type GetterStore = {
+ getName: () => string;
+ name: string;
+ get test(): string;
+};
+
+function TypeGetterStore(props: any) {
+ const state = useLocalProxy({
+ name: \\"test\\",
+ getName() {
+ if (state.name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return state.name;
+ },
+ get test() {
+ return \\"test\\";
+ },
+ });
+
+ return Hello {state.name}!
;
+}
+
+export default TypeGetterStore;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+ Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+
+ Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+ Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function UseTargetComponent(props: any) {
+ const state = useLocalProxy({
+ get name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ },
+ lastName: \\"bar\\",
+ foo: \\"bar\\",
+ });
+
+ useEffect(() => {
+ console.log(state.foo);
+ state.foo = \\"bar\\";
+ console.log(\\"react\\");
+ state.lastName = \\"baz\\";
+ console.log(state.foo);
+ state.foo = \\"baz\\";
+ }, []);
+
+ return {state.name}
;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`React - stateType: valtio > jsx > Typescript Test > webComponent 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { register } from \\"swiper/element/bundle\\";
+
+function MyBasicWebComponent(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ register();
+ hasInitialized.current = true;
+ }
+
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+
+export default MyBasicWebComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Javascript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({ name: \\"Steve\\" });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Javascript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({ tortilla: \\"Plain\\", fillings: [] });
+
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Javascript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({ value: \\"hello\\" });
+
+ return {state.activeTab}
+ | ^
+ 36 |
+ 37 |
+ 38 |"
+`;
+
+exports[`React - stateType: valtio > svelte > Javascript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
+
+ return (
+
+ {state.numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Javascript Test > eventHandlers 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ });
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Javascript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({ html: \\"bold \\" });
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Javascript Test > ifElse 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ });
+
+ return (
+ <>
+ {state.show ? (
+ <>
+ state.toggle(event)}> Hide
+
+ ) : (
+ state.toggle(event)}> Show
+ )}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Javascript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({ disabled: false });
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > 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[`React - stateType: valtio > svelte > Javascript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Javascript Test > reactiveWithFn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props) {
+ const state = useLocalProxy({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ });
+
+ useEffect(() => {
+ state.calculateResult(state.a, state.b);
+ }, [state.a, state.b]);
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Javascript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({ name: \\"Steve\\" });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({ tortilla: \\"Plain\\", fillings: [] });
+
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({ value: \\"hello\\" });
+
+ return {state.activeTab}
+ | ^
+ 36 |
+ 37 |
+ 38 |"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({ numbers: [\\"one\\", \\"two\\", \\"three\\"] });
+
+ return (
+
+ {state.numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > eventHandlers 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({
+ log: function log(msg = \\"hello\\") {
+ console.log(msg);
+ },
+ });
+
+ return (
+
+ state.log(\\"hi\\")}>Log
+ state.log(event)}>Log
+ state.log(event)}>Log
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({ html: \\"bold \\" });
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > ifElse 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({
+ show: true,
+ toggle: function toggle() {
+ state.show = !state.show;
+ },
+ });
+
+ return (
+ <>
+ {state.show ? (
+ <>
+ state.toggle(event)}> Hide
+
+ ) : (
+ state.toggle(event)}> Show
+ )}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({ disabled: false });
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > lifecycleHooks 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyComponent(props: any) {
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ useEffect(() => {
+ console.log(\\"onAfterUpdate\\");
+ });
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"onDestroy\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({
+ name: \\"Steve\\",
+ get lowercaseName() {
+ return state.name.toLowerCase();
+ },
+ });
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > reactiveWithFn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { useLocalProxy } from \\"valtio/utils\\";
+
+function MyComponent(props: any) {
+ const state = useLocalProxy({
+ a: 2,
+ b: 5,
+ result: null,
+ calculateResult: function calculateResult(a_, b_) {
+ state.result = a_ * b_;
+ },
+ });
+
+ useEffect(() => {
+ state.calculateResult(state.a, state.b);
+ }, [state.a, state.b]);
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: valtio > svelte > Typescript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {state.a + state.b}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
new file mode 100644
index 0000000000..95c38dac81
--- /dev/null
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -0,0 +1,6116 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`React - stateType: variables > jsx > Javascript Test > AdvancedRef 1`] = `
+"'(' expected. (18:34)
+ 16 | const inputNoArgRef = useRef(null);
+ 17 | const name= 'PatrickJS'
+> 18 | const onBlur = onBlur = function function onBlur() {
+ | ^
+ 19 | // Maintain focus
+ 20 | inputRef.current.focus();
+ 21 | }"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props) {
+ const name = \\"Steve\\";
+ const underscore_fn_name = function underscore_fn_name() {
+ return \\"bar\\";
+ };
+ const age = 1;
+ const sports = [\\"\\"];
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > Basic Context 1`] = `
+"'(' expected. (16:38)
+ 14 | function MyBasicComponent(props) {
+ 15 | const name= 'PatrickJS'
+> 16 | const onChange = onChange = function function onChange() {
+ | ^
+ 17 | const change = myService.method('change');
+ 18 | console.log(change);
+ 19 | }"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function MyBasicOnMountUpdateComponent(props) {
+ const name = \\"PatrickJS\\";
+ const names = [\\"Steve\\", \\"PatrickJS\\"];
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ name = \\"PatrickJS onInit\\" + props.hi;
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ name = \\"PatrickJS onMount\\" + props.bye;
+ }, []);
+
+ return Hello {name}
;
+}
+
+export default MyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicOutputsComponent(props) {
+ const name = \\"PatrickJS\\";
+
+ useEffect(() => {
+ props.onMessage(name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicOutputsComponent(props) {
+ const name = \\"PatrickJS\\";
+
+ useEffect(() => {
+ props.onMessage(name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props) {
+ const name = \\"Steve\\";
+ const dev = \\"PatrickJS\\";
+
+ return (
+
+ );
+}
+
+export default MyBasicChildComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicForComponent(props) {
+ const name = \\"PatrickJS\\";
+ const names = [\\"Steve\\", \\"PatrickJS\\"];
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {names?.map((person) => (
+ <>
+
+ );
+}
+
+export default MyBasicForComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > BasicRef 1`] = `
+"'(' expected. (18:34)
+ 16 | const inputNoArgRef = useRef(null);
+ 17 | const name= 'PatrickJS'
+> 18 | const onBlur = onBlur = function function onBlur() {
+ | ^
+ 19 | // Maintain focus
+ 20 | inputRef.current.focus();
+ 21 | }"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > BasicRefAssignment 1`] = `
+"'(' expected. (16:46)
+ 14 | function MyBasicRefAssignmentComponent(props) {
+ 15 | const holdValueRef = useRef('Patrick');
+> 16 | const handlerClick = handlerClick = function function handlerClick(event) {
+ | ^
+ 17 | event.preventDefault();
+ 18 | console.log('current value', holdValueRef.current);
+ 19 | holdValueRef.current = holdValueRef.current + 'JS';"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { 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 = 0;
+
+ const prevCount = useRef(state.count);
+
+ useEffect(() => {
+ prevCount.current = count;
+ }, [count]);
+
+ return (
+
+
+ Now: {count}, before: {prevCount.current}
+
+ (count += 1)}>Increment
+
+ );
+}
+
+export default MyPreviousComponent;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function CustomCode(props) {
+ const elem = useRef(null);
+ const scriptsInserted = [];
+ const scriptsRun = [];
+ const findAndRunScripts = 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[`React - stateType: variables > jsx > Javascript Test > Form 1`] = `
+"',' expected. (108:2796)
+ 106 | if (contentType && contentType !== 'multipart/form-data') {
+ 107 | if (
+> 108 | /* 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; } } 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); } formErrorMessage = message; } } responseData = body; 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; } } responseData = err; formState = 'error'; }); } } return ( <> ); } export default FormComponent;
+ | ^
+ 109 |
+ 110 |
+ 111 |"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > Image 1`] = `
+"'(' expected. (25:40)
+ 23 | return !!props.lazy && isBrowser();
+ 24 | }
+> 25 | const isBrowser = isBrowser = function function isBrowser() {
+ | ^
+ 26 | return typeof window !== 'undefined' && window.navigator.product != 'ReactNative';
+ 27 | }
+ 28 | const load= false"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > Image State 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function ImgStateComponent(props) {
+ const canShow = true;
+ const images = [\\"http://example.com/qwik.png\\"];
+
+ return (
+
+ {images?.map((item, itemIndex) => (
+
+ ))}
+
handleChange(value)}
+ />
+ );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props) {
+ const reviews = [];
+ const name = \\"test\\";
+ const showReviewPrompt = false;
+ const kebabCaseValue = function kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ };
+ const snakeCaseValue = 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) => {
+ reviews = data.data;
+ });
+ }, []);
+
+ return (
+ <>
+
+
(showReviewPrompt = true)}>
+ Write a review
+
+ {showReviewPrompt || \\"asdf\\" ? (
+ <>
+
+
+
+
{
+ event.preventDefault();
+ showReviewPrompt = false;
+ }}
+ >
+ Submit
+
+
+ ) : null}
+ {reviews?.map((review, index) => (
+
+
+
+
N: {index}
+
{review.author}
+
{review.reviewMessage}
+
+
+ ))}
+
+ {props.text}
+
+ );
+}
+
+export default SubmitButton;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props) {
+ const name = \\"Decadef20\\";
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+export default Text;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+function Textarea(props) {
+ return (
+
+ );
+}
+
+export default Textarea;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+function Video(props) {
+ return (
+
+ );
+}
+
+export default Video;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const name = \\"steve\\";
+ const setName = function setName(value) {
+ name = value;
+ };
+ const updateNameWithArrowFn = function updateNameWithArrowFn(value) {
+ name = value;
+ };
+
+ return
Hello {name}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > basicForNoTagReference 1`] = `
+"Identifier expected. (39:17)
+ 37 | return (
+ 38 |
+> 39 |
+ | ^
+ 40 | Hello {name} {props.actions?.map((action) => (
+ 41 | {action.text} "
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const name = \\"PatrickJS\\";
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props, inputRef) {
+ const name = \\"PatrickJS\\";
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicOnUpdateReturnComponent(props) {
+ const name = \\"PatrickJS\\";
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ name = data.name;
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [name]);
+
+ return
Hello! {name}
;
+}
+
+export default MyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function ClassNameCode(props) {
+ const bindings = \\"a binding\\";
+
+ return (
+
+
Without Binding
+
With binding
+
+ );
+}
+
+export default ClassNameCode;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > classState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const classState = \\"testClassName\\";
+ const styleState = {
+ color: \\"red\\",
+ };
+
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const refToUse = !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null;
+
+ return
{refToUse}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+function Button(props) {
+ const foo2 = function foo2() {
+ return props.foo + \\"foo\\";
+ };
+ const bar = function bar() {
+ return \\"bar\\";
+ };
+ const baz = function baz(i) {
+ return i + foo2().length;
+ };
+
+ return (
+
+
{foo2()}
+
{bar()}
+
{baz(1)}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > import types 1`] = `
+"import * as React from \\"react\\";
+import RenderBlock from \\"./builder-render-block.raw\\";
+
+function RenderContent(props) {
+ const getRenderContentProps = function getRenderContentProps(block, index) {
+ return {
+ block: block,
+ index: index,
+ };
+ };
+
+ return (
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MultipleOnUpdateWithDeps(props) {
+ const a = \\"a\\";
+ const b = \\"b\\";
+ const c = \\"c\\";
+ const d = \\"d\\";
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", a, b);
+
+ if (a === \\"a\\") {
+ a = \\"b\\";
+ }
+ }, [a, b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", c, d);
+
+ if (a === \\"a\\") {
+ a = \\"b\\";
+ }
+ }, [c, d]);
+
+ return
;
+}
+
+export default MultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const attrs = {
+ hello: \\"world\\",
+ };
+
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props) {
+ return (
+ <>
+
Hello world
+
+
+ );
+}
+
+export default NestedStyles;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function Embed(props) {
+ const elem = useRef(null);
+ const foo = function foo(event) {
+ console.log(\\"test2\\");
+ };
+ const elem_onInitEditingBldr = 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[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props) {
+ const name = \\"\\";
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ name = defaultValues.name || props.name;
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return
Default name defined by parent {name}
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdateWithDeps(props) {
+ const a = \\"a\\";
+ const b = \\"b\\";
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", a, b, props.size);
+ }, [a, b, props.size]);
+
+ return
;
+}
+
+export default OnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const name = \\"Decadef20\\";
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > referencingFunInsideHook 1`] = `
+"'(' expected. (15:30)
+ 13 |
+ 14 | function OnUpdate(props) {
+> 15 | const foo = foo = function function foo(params) {}
+ | ^
+ 16 | const bar = bar = function function bar() {}
+ 17 | const zoo = zoo = function function zoo() {
+ 18 | const params = {"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > renderBlock 1`] = `
+"Identifier expected. (214:8)
+ 212 | {shouldWrap() ? (
+ 213 | <>{isEmptyHtmlElement(tag()) ? (
+> 214 |
+ | ^
+ 215 | ) : null}
+ 216 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+ 217 | <>{repeatItemData()?.map((data, index) => ("
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+function RenderStyles(props) {
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+
Bar
+
+ ) : (
+
Foo
+ )}
+
+ );
+}
+
+export default RenderStyles;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > 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
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ?
complete
: <>9mb}
+ ) : props.conditionC === \\"Complete\\" ? (
+ <>dff
+ ) : (
+
complete else
+ )}
+
+ );
+}
+
+export default ShowWithOtherValues;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+function ShowRootText(props) {
+ return <>{props.conditionA ? <>ContentA :
else-condition-A
};
+}
+
+export default ShowRootText;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > jsx > Javascript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > spreadNestedProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > spreadProps 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > string-literal-store 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function StringLiteralStore(props) {
+ const foo = 123;
+
+ return
{foo}
;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default StylePropClassAndCss;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props) {
+ return
;
+}
+
+export default SubComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > svgComponent 1`] = `
+"import * as React from \\"react\\";
+
+function SvgComponent(props) {
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default SvgComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+function TypeDependency(props) {
+ return
{props.foo}
;
+}
+
+export default TypeDependency;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function TypeExternalStore(props) {
+ const _name = \\"test\\";
+
+ return
Hello {_name}!
;
+}
+
+export default TypeExternalStore;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function TypeGetterStore(props) {
+ const name = \\"test\\";
+ const getName = function getName() {
+ if (name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return name;
+ };
+ const test = function test() {
+ return \\"test\\";
+ };
+
+ return
Hello {name}!
;
+}
+
+export default TypeGetterStore;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
+ Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+ return (
+ <>
+
Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Javascript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function UseTargetComponent(props) {
+ const name = function name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ };
+ const lastName = \\"bar\\";
+ const foo = \\"bar\\";
+
+ useEffect(() => {
+ console.log(foo);
+ foo = \\"bar\\";
+ console.log(\\"react\\");
+ lastName = \\"baz\\";
+ console.log(foo);
+ foo = \\"baz\\";
+ }, []);
+
+ return
{name()}
;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > jsx > Remove Internal mitosis package 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicComponent(props) {
+ const name = \\"PatrickJS\\";
+
+ return (
+
Hello {name}! I can run in React, Qwik, Vue, Solid, or Liquid!
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > AdvancedRef 1`] = `
+"'(' expected. (20:34)
+ 18 | const inputNoArgRef = useRef
(null);
+ 19 | const name= 'PatrickJS'
+> 20 | const onBlur = onBlur = function function onBlur() {
+ | ^
+ 21 | // Maintain focus
+ 22 | inputRef.current.focus();
+ 23 | }"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface MyBasicComponentProps {
+ id: string;
+}
+
+export const DEFAULT_VALUES = {
+ name: \\"Steve\\",
+};
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ const name = \\"Steve\\";
+ const underscore_fn_name = function underscore_fn_name() {
+ return \\"bar\\";
+ };
+ const age = 1;
+ const sports = [\\"\\"];
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Basic Context 1`] = `
+"'(' expected. (16:38)
+ 14 | function MyBasicComponent(props:any) {
+ 15 | const name= 'PatrickJS'
+> 16 | const onChange = onChange = function function onChange() {
+ | ^
+ 17 | const change = myService.method('change');
+ 18 | console.log(change);
+ 19 | }"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Basic OnMount Update 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface Props {
+ hi: string;
+ bye: string;
+}
+
+function MyBasicOnMountUpdateComponent(props: Props) {
+ const name = \\"PatrickJS\\";
+ const names = [\\"Steve\\", \\"PatrickJS\\"];
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ name = \\"PatrickJS onInit\\" + props.hi;
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ name = \\"PatrickJS onMount\\" + props.bye;
+ }, []);
+
+ return Hello {name}
;
+}
+
+export default MyBasicOnMountUpdateComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Basic Outputs 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicOutputsComponent(props: any) {
+ const name = \\"PatrickJS\\";
+
+ useEffect(() => {
+ props.onMessage(name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Basic Outputs Meta 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicOutputsComponent(props: any) {
+ const name = \\"PatrickJS\\";
+
+ useEffect(() => {
+ props.onMessage(name);
+ props.onEvent(props.message);
+ }, []);
+
+ return
;
+}
+
+export default MyBasicOutputsComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > BasicAttribute 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return
+ {props.children ? (
+ <>
+ {props.children}
+ {props.type}
+
+ ) : null}
+
+ );
+}
+
+export default MyBooleanAttribute;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > BasicChildComponent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
+import MyBasicComponent from \\"./basic.raw\\";
+
+function MyBasicChildComponent(props: any) {
+ const name = \\"Steve\\";
+ const dev = \\"PatrickJS\\";
+
+ return (
+
+ );
+}
+
+export default MyBasicChildComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > BasicFor 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicForComponent(props: any) {
+ const name = \\"PatrickJS\\";
+ const names = [\\"Steve\\", \\"PatrickJS\\"];
+
+ useEffect(() => {
+ console.log(\\"onMount code\\");
+ }, []);
+
+ return (
+
+ {names?.map((person) => (
+ <>
+
+ );
+}
+
+export default MyBasicForComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > BasicRef 1`] = `
+"'(' expected. (20:34)
+ 18 | const inputNoArgRef = useRef(null);
+ 19 | const name= 'PatrickJS'
+> 20 | const onBlur = onBlur = function function onBlur() {
+ | ^
+ 21 | // Maintain focus
+ 22 | inputRef.current.focus();
+ 23 | }"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > BasicRefAssignment 1`] = `
+"'(' expected. (18:46)
+ 16 | function MyBasicRefAssignmentComponent(props:Props) {
+ 17 | const holdValueRef = useRef('Patrick');
+> 18 | const handlerClick = handlerClick = function function handlerClick(event: Event) {
+ | ^
+ 19 | event.preventDefault();
+ 20 | console.log('current value', holdValueRef.current);
+ 21 | holdValueRef.current = holdValueRef.current + 'JS';"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+}
+
+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: Props) {
+ const count = 0;
+
+ const prevCount = useRef(state.count);
+
+ useEffect(() => {
+ prevCount.current = count;
+ }, [count]);
+
+ return (
+
+
+ Now: {count}, before: {prevCount.current}
+
+ (count += 1)}>Increment
+
+ );
+}
+
+export default MyPreviousComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Button 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+ 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}
+
(null);
+ const scriptsInserted = [];
+ const scriptsRun = [];
+ const findAndRunScripts = 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[`React - stateType: variables > jsx > Typescript Test > Embed 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface CustomCodeProps {
+ code: string;
+ replaceNodes?: boolean;
+}
+
+function CustomCode(props: CustomCodeProps) {
+ const elem = useRef(null);
+ const scriptsInserted = [];
+ const scriptsRun = [];
+ const findAndRunScripts = 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[`React - stateType: variables > jsx > Typescript Test > Form 1`] = `
+"',' expected. (135:2797)
+ 133 | if (contentType && contentType !== 'multipart/form-data') {
+ 134 | if (
+> 135 | /* 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; } } 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); } formErrorMessage = message; } } responseData = body; 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; } } responseData = err; formState = 'error'; }); } } return ( <> ); } export default FormComponent;
+ | ^
+ 136 |
+ 137 |
+ 138 |"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Image 1`] = `
+"'(' expected. (42:40)
+ 40 | return !!props.lazy && isBrowser();
+ 41 | }
+> 42 | const isBrowser = isBrowser = function function isBrowser() {
+ | ^
+ 43 | return typeof window !== 'undefined' && window.navigator.product != 'ReactNative';
+ 44 | }
+ 45 | const load= false"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Image State 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function ImgStateComponent(props: any) {
+ const canShow = true;
+ const images = [\\"http://example.com/qwik.png\\"];
+
+ return (
+
+ {images?.map((item, itemIndex) => (
+
+ ))}
+
handleChange(value)}
+ />
+ );
+}
+
+export default Stepper;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > RawText 1`] = `
+"import * as React from \\"react\\";
+
+export interface RawTextProps {
+ attributes?: any;
+ text?: string; // builderBlock?: any;
+}
+
+function RawText(props: RawTextProps) {
+ return (
+
+ {props.options?.map((option, index) => (
+
+ {option.name || option.value}
+
+ ))}
+
+ );
+}
+
+export default SelectComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > SlotDefault 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+ return (
+
+ <>
+ {props.children ||
Default content
}
+
+
+ Hello
}>
+
+ Hello
} />
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > SlotNamed 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+ return (
+
+ <>{props.myAwesomeSlot}
+ <>{props.top}
+ <>{props.left || \\"Default left\\"}
+ <>{props.children || \\"Default Child\\"}
+
+ );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Stamped.io 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type SmileReviewsProps = {
+ productId: string;
+ apiKey: string;
+};
+import { kebabCase, snakeCase } from \\"lodash\\";
+
+function SmileReviews(props: SmileReviewsProps) {
+ const reviews = [];
+ const name = \\"test\\";
+ const showReviewPrompt = false;
+ const kebabCaseValue = function kebabCaseValue() {
+ return kebabCase(\\"testThat\\");
+ };
+ const snakeCaseValue = 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) => {
+ reviews = data.data;
+ });
+ }, []);
+
+ return (
+ <>
+
+
(showReviewPrompt = true)}>
+ Write a review
+
+ {showReviewPrompt || \\"asdf\\" ? (
+ <>
+
+
+
+
{
+ event.preventDefault();
+ showReviewPrompt = false;
+ }}
+ >
+ Submit
+
+
+ ) : null}
+ {reviews?.map((review, index) => (
+
+
+
+
N: {index}
+
{review.author}
+
{review.reviewMessage}
+
+
+ ))}
+
+ {props.text}
+
+ );
+}
+
+export default SubmitButton;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Text 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface TextProps {
+ attributes?: any;
+ rtlMode: boolean;
+ text?: string;
+ content?: string;
+ builderBlock?: any;
+}
+
+import { Builder } from \\"@builder.io/sdk\\";
+
+function Text(props: TextProps) {
+ const name = \\"Decadef20\\";
+
+ return (
+ my name',
+ }}
+ />
+ );
+}
+
+export default Text;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Textarea 1`] = `
+"import * as React from \\"react\\";
+
+export interface TextareaProps {
+ attributes?: any;
+ name?: string;
+ value?: string;
+ defaultValue?: string;
+ placeholder?: string;
+}
+
+function Textarea(props: TextareaProps) {
+ return (
+
+ );
+}
+
+export default Textarea;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > Video 1`] = `
+"import * as React from \\"react\\";
+
+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;
+}
+
+function Video(props: VideoProps) {
+ return (
+
+ );
+}
+
+export default Video;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const name = \\"steve\\";
+ const setName = function setName(value) {
+ name = value;
+ };
+ const updateNameWithArrowFn = function updateNameWithArrowFn(value) {
+ name = value;
+ };
+
+ return
Hello {name}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > basicForNoTagReference 1`] = `
+"Identifier expected. (39:17)
+ 37 | return (
+ 38 |
+> 39 |
+ | ^
+ 40 | Hello {name} {props.actions?.map((action) => (
+ 41 | {action.text} "
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > basicForwardRef 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+ inputRef: HTMLInputElement;
+}
+
+const MyBasicForwardRefComponent = forwardRef
(
+ function MyBasicForwardRefComponent(props: Props, inputRef) {
+ const name = \\"PatrickJS\\";
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+ inputRef: HTMLInputElement;
+}
+
+const MyBasicForwardRefComponent = forwardRef(
+ function MyBasicForwardRefComponent(props: Props, inputRef) {
+ const name = \\"PatrickJS\\";
+
+ return (
+ <>
+
+
+
+
+ );
+ }
+);
+
+export default MyBasicForwardRefComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyBasicOnUpdateReturnComponent(props: any) {
+ const name = \\"PatrickJS\\";
+
+ useEffect(() => {
+ const controller = new AbortController();
+ const signal = controller.signal;
+ fetch(\\"https://patrickjs.com/api/resource.json\\", {
+ signal,
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ name = data.name;
+ });
+ return () => {
+ if (!signal.aborted) {
+ controller.abort();
+ }
+ };
+ }, [name]);
+
+ return Hello! {name}
;
+}
+
+export default MyBasicOnUpdateReturnComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > class + ClassName + css 1`] = `
+"import * as React from \\"react\\";
+import MyComp from \\"./my-component\\";
+
+function MyBasicComponent(props: any) {
+ return (
+ <>
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > className + css 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ return (
+ <>
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > className 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+type Props = {
+ [key: string]: string | JSX.Element;
+ slotTesting: JSX.Element;
+};
+import type { JSX } from \\"../../../../jsx-runtime\\";
+
+function ClassNameCode(props: Props) {
+ const bindings = \\"a binding\\";
+
+ return (
+
+
Without Binding
+
With binding
+
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > componentWithContext 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>{foo.value}
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext } from \\"react\\";
+
+export interface ComponentWithContextProps {
+ content: string;
+}
+
+import Context1 from \\"@dummy/1\\";
+import Context2 from \\"@dummy/2\\";
+
+function ComponentWithContext(props: ComponentWithContextProps) {
+ const foo = useContext(Context1);
+
+ return (
+
+
+ <>
+ <>{foo.value}
+ other
+
+
+
+ );
+}
+
+export default ComponentWithContext;
+"
+`;
+
+exports[`React - stateType: variables > 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: any) {
+ return (
+
+ setting context
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > defaultProps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ buttonText?: string; // no default value
+
+ link?: string;
+ openLinkInNewTab?: boolean;
+ onClick?: () => void;
+}
+
+function Button(props: ButtonProps) {
+ return (
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick()}
+ >
+ {props.buttonText}
+
+ ) : null}
+
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
props.onClick(event)}
+ >
+ {props.text}
+
+ ) : null}
+
Hello {props.name || DEFAULT_VALUES.name}
;
+}
+
+export default ComponentWithTypes;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > expressionState 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const refToUse = !(props.componentRef instanceof Function)
+ ? props.componentRef
+ : null;
+
+ return {refToUse}
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > getterState 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ foo: string;
+}
+
+function Button(props: ButtonProps) {
+ const foo2 = function foo2() {
+ return props.foo + \\"foo\\";
+ };
+ const bar = function bar() {
+ return \\"bar\\";
+ };
+ const baz = function baz(i: number) {
+ return i + foo2().length;
+ };
+
+ return (
+
+
{foo2()}
+
{bar()}
+
{baz(1)}
+
;
+}
+
+export default MultipleOnUpdate;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MultipleOnUpdateWithDeps(props: any) {
+ const a = \\"a\\";
+ const b = \\"b\\";
+ const c = \\"c\\";
+ const d = \\"d\\";
+
+ useEffect(() => {
+ console.log(\\"Runs when a or b changes\\", a, b);
+
+ if (a === \\"a\\") {
+ a = \\"b\\";
+ }
+ }, [a, b]);
+ useEffect(() => {
+ console.log(\\"Runs when c or d changes\\", c, d);
+
+ if (a === \\"a\\") {
+ a = \\"b\\";
+ }
+ }, [c, d]);
+
+ return
;
+}
+
+export default MultipleOnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > multipleSpreads 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ const attrs = {
+ hello: \\"world\\",
+ };
+
+ return if condition A and condition B
+ ) : (
+ else-condition-B
+ )}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > nestedStyles 1`] = `
+"import * as React from \\"react\\";
+
+function NestedStyles(props: any) {
+ return (
+ <>
+ Hello world
+
+
+ );
+}
+
+export default NestedStyles;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > onEvent 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function Embed(props: any) {
+ const elem = useRef(null);
+ const foo = function foo(event) {
+ console.log(\\"test2\\");
+ };
+ const elem_onInitEditingBldr = 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[`React - stateType: variables > jsx > Typescript Test > onInit & onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+function OnInit(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ return
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > onInit 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+type Props = {
+ name: string;
+};
+
+export const defaultValues = {
+ name: \\"PatrickJS\\",
+};
+
+function OnInit(props: Props) {
+ const name = \\"\\";
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ name = defaultValues.name || props.name;
+ console.log(\\"set defaults with props\\");
+ hasInitialized.current = true;
+ }
+
+ return Default name defined by parent {name}
;
+}
+
+export default OnInit;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > onInitPlain 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function OnInitPlain(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ console.log(\\"onInit\\");
+ hasInitialized.current = true;
+ }
+
+ return
;
+}
+
+export default OnInitPlain;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > onMount 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props: any) {
+ useEffect(() => {
+ console.log(\\"Runs on mount\\");
+ }, []);
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"Runs on unMount\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default Comp;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > onMountMultiple 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function Comp(props: any) {
+ 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[`React - stateType: variables > jsx > Typescript Test > onUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props: any) {
+ useEffect(() => {
+ console.log(\\"Runs on every update/rerender\\");
+ });
+
+ return
;
+}
+
+export default OnUpdate;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > onUpdateWithDeps 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type Props = {
+ size: string;
+};
+
+function OnUpdateWithDeps(props: Props) {
+ const a = \\"a\\";
+ const b = \\"b\\";
+
+ useEffect(() => {
+ console.log(\\"Runs when a, b or size changes\\", a, b, props.size);
+ }, [a, b, props.size]);
+
+ return
;
+}
+
+export default OnUpdateWithDeps;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
+"import * as React from \\"react\\";
+
+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) {}
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ return
;
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > preserveTyping 1`] = `
+"import * as React from \\"react\\";
+
+export type A = \\"test\\";
+export interface C {
+ n: \\"test\\";
+}
+type B = \\"test2\\";
+interface D {
+ n: \\"test\\";
+}
+export interface MyBasicComponentProps {
+ name: string;
+ age?: number;
+}
+
+function MyBasicComponent(props: MyBasicComponentProps) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > propsDestructure 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+type Props = {
+ children: any;
+ type: string;
+};
+
+function MyBasicComponent(props: Props) {
+ const name = \\"Decadef20\\";
+
+ return (
+
+ {props.children}
+ {props.type}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > propsInterface 1`] = `
+"import * as React from \\"react\\";
+
+interface Person {
+ name: string;
+ age?: number;
+}
+
+function MyBasicComponent(props: Person | never) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > propsType 1`] = `
+"import * as React from \\"react\\";
+
+type Person = {
+ name: string;
+ age?: number;
+};
+
+function MyBasicComponent(props: Person) {
+ return (
+ Hello! I can run in React, Vue, Solid, or Liquid! {props.name}
+ );
+}
+
+export default MyBasicComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > referencingFunInsideHook 1`] = `
+"'(' expected. (15:30)
+ 13 |
+ 14 | function OnUpdate(props:any) {
+> 15 | const foo = foo = function function foo(params) {}
+ | ^
+ 16 | const bar = bar = function function bar() {}
+ 17 | const zoo = zoo = function function zoo() {
+ 18 | const params = {"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > renderBlock 1`] = `
+"Identifier expected. (222:8)
+ 220 | {shouldWrap() ? (
+ 221 | <>{isEmptyHtmlElement(tag()) ? (
+> 222 |
+ trackClick(props.content.id)}>
+
+
+
+
+ );
+}
+
+export default RenderContent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
+"import * as React from \\"react\\";
+
+export interface ButtonProps {
+ attributes?: any;
+ text?: string;
+ link?: string;
+ openLinkInNewTab?: boolean;
+}
+
+function Button(props: ButtonProps) {
+ return (
+ <>
+ {props.link ? (
+
+ {props.text}
+
+ ) : null}
+ {!props.link ? (
+
+ {props.text}
+
+ ) : null}
+
+ );
+}
+
+export default Button;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > rootShow 1`] = `
+"import * as React from \\"react\\";
+
+export interface RenderStylesProps {
+ foo: string;
+}
+
+function RenderStyles(props: RenderStylesProps) {
+ return (
+ <>
+ {props.foo === \\"bar\\" ? (
+ <>
+ Bar
+
+ ) : (
+ Foo
+ )}
+
+ );
+}
+
+export default RenderStyles;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > self-referencing component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+
+ {props.name}
+ {props.name === \\"Batman\\" ?
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > self-referencing component with children 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ 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
+ )}
+ {props.conditionA === \\"Default\\" ? (
+ <>{props.conditionB === \\"Complete\\" ?
complete
: <>9mb}
+ ) : props.conditionC === \\"Complete\\" ? (
+ <>dff
+ ) : (
+
complete else
+ )}
+
{item}
+ ))}
+
+ ) : (
+ else-condition-A
+ )}
+
+ );
+}
+
+export default NestedShow;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > showWithOtherValues 1`] = `
+"import * as React from \\"react\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+function ShowWithOtherValues(props: 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[`React - stateType: variables > jsx > Typescript Test > showWithRootText 1`] = `
+"import * as React from \\"react\\";
+
+interface Props {
+ conditionA: boolean;
+}
+
+function ShowRootText(props: Props) {
+ return <>{props.conditionA ? <>ContentA : else-condition-A
};
+}
+
+export default ShowRootText;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > signalsOnUpdate 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+type Props = {
+ id: string;
+ foo: {
+ bar: {
+ baz: number;
+ };
+ };
+};
+
+function MyBasicComponent(props: 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[`React - stateType: variables > jsx > Typescript Test > spreadAttrs 1`] = `
+"import * as React from \\"react\\";
+
+function MyBasicComponent(props: any) {
+ return {foo}
;
+}
+
+export default StringLiteralStore;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > styleClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > stylePropClassAndCss 1`] = `
+"import * as React from \\"react\\";
+
+function StylePropClassAndCss(props: any) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default StylePropClassAndCss;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > subComponent 1`] = `
+"import * as React from \\"react\\";
+import Foo from \\"./foo-sub-component\\";
+
+function SubComponent(props: any) {
+ return
+
+
+
+
+
+ );
+}
+
+export default SvgComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > typeDependency 1`] = `
+"import * as React from \\"react\\";
+
+export type TypeDependencyProps = {
+ foo: Foo;
+ foo2: Foo2;
+};
+import type { Foo } from \\"./foo-type\\";
+import type { Foo as Foo2 } from \\"./type-export\\";
+
+function TypeDependency(props: TypeDependencyProps) {
+ return {props.foo}
;
+}
+
+export default TypeDependency;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > typeExternalStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { FooStore } from \\"./foo-store\\";
+
+function TypeExternalStore(props: any) {
+ const _name = \\"test\\";
+
+ return Hello {_name}!
;
+}
+
+export default TypeExternalStore;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > typeGetterStore 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+type GetterStore = {
+ getName: () => string;
+ name: string;
+ get test(): string;
+};
+
+function TypeGetterStore(props: any) {
+ const name = \\"test\\";
+ const getName = function getName() {
+ if (name === \\"a\\") {
+ return \\"b\\";
+ }
+
+ return name;
+ };
+ const test = function test() {
+ return \\"test\\";
+ };
+
+ return Hello {name}!
;
+}
+
+export default TypeGetterStore;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > use-style 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+ Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > use-style-and-css 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+
+ Button
+
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > use-style-outside-component 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+ <>
+ Button
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > useTarget 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function UseTargetComponent(props: any) {
+ const name = function name() {
+ const prefix = 123;
+ return prefix + \\"foo\\";
+ };
+ const lastName = \\"bar\\";
+ const foo = \\"bar\\";
+
+ useEffect(() => {
+ console.log(foo);
+ foo = \\"bar\\";
+ console.log(\\"react\\");
+ lastName = \\"baz\\";
+ console.log(foo);
+ foo = \\"baz\\";
+ }, []);
+
+ return {name()}
;
+}
+
+export default UseTargetComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > webComponent 1`] = `
+"import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+import { register } from \\"swiper/element/bundle\\";
+
+function MyBasicWebComponent(props: any) {
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ register();
+ hasInitialized.current = true;
+ }
+
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+}
+
+export default MyBasicWebComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const name = \\"Steve\\";
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const tortilla = \\"Plain\\";
+ const fillings = [];
+
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const value = \\"hello\\";
+
+ return {activeTab}
+ | ^
+ 37 |
+ 38 |
+ 39 |"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const numbers = [\\"one\\", \\"two\\", \\"three\\"];
+
+ return (
+
+ {numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > eventHandlers 1`] = `
+"'(' expected. (15:30)
+ 13 |
+ 14 | function MyComponent(props) {
+> 15 | const log = log = function function log(msg = 'hello') {
+ | ^
+ 16 | console.log(msg);
+ 17 | }
+ 18 |"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const html = \\"bold \\";
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > ifElse 1`] = `
+"'(' expected. (16:34)
+ 14 | function MyComponent(props) {
+ 15 | const show= true
+> 16 | const toggle = toggle = function function toggle() {
+ | ^
+ 17 | show = !show;
+ 18 | }
+ 19 |"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props) {
+ const disabled = false;
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > svelte > Javascript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const name = \\"Steve\\";
+ const lowercaseName = function lowercaseName() {
+ return name.toLowerCase();
+ };
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > reactiveWithFn 1`] = `
+"'(' expected. (18:52)
+ 16 | const b= 5
+ 17 | const result= null
+> 18 | const calculateResult = calculateResult = function function calculateResult(a_, b_) {
+ | ^
+ 19 | result = a_ * b_;
+ 20 | }
+ 21 |"
+`;
+
+exports[`React - stateType: variables > 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[`React - stateType: variables > svelte > Typescript Test > basic 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const name = \\"Steve\\";
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > bindGroup 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const tortilla = \\"Plain\\";
+ const fillings = [];
+
+ return (
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > bindProperty 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const value = \\"hello\\";
+
+ return {activeTab}
+ | ^
+ 37 |
+ 38 |
+ 39 |"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > each 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const numbers = [\\"one\\", \\"two\\", \\"three\\"];
+
+ return (
+
+ {numbers?.map((num) => (
+ {num}
+ ))}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > eventHandlers 1`] = `
+"'(' expected. (15:30)
+ 13 |
+ 14 | function MyComponent(props:any) {
+> 15 | const log = log = function function log(msg = 'hello') {
+ | ^
+ 16 | console.log(msg);
+ 17 | }
+ 18 |"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > html 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const html = \\"bold \\";
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > ifElse 1`] = `
+"'(' expected. (16:34)
+ 14 | function MyComponent(props:any) {
+ 15 | const show= true
+> 16 | const toggle = toggle = function function toggle() {
+ | ^
+ 17 | show = !show;
+ 18 | }
+ 19 |"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > imports 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import Button from \\"./Button\\";
+
+function MyComponent(props: any) {
+ const disabled = false;
+
+ return (
+
+
+ <>{props.children}
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > lifecycleHooks 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function MyComponent(props: any) {
+ useEffect(() => {
+ console.log(\\"onMount\\");
+ }, []);
+
+ useEffect(() => {
+ console.log(\\"onAfterUpdate\\");
+ });
+
+ useEffect(() => {
+ return () => {
+ console.log(\\"onDestroy\\");
+ };
+ }, []);
+
+ return
;
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > reactive 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const name = \\"Steve\\";
+ const lowercaseName = function lowercaseName() {
+ return name.toLowerCase();
+ };
+
+ return (
+
+
+ );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > reactiveWithFn 1`] = `
+"'(' expected. (18:52)
+ 16 | const b= 5
+ 17 | const result= null
+> 18 | const calculateResult = calculateResult = function function calculateResult(a_, b_) {
+ | ^
+ 19 | result = a_ * b_;
+ 20 | }
+ 21 |"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > slots 1`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ return (
+
+ <>{props.children || \\"default\\"}
+ <>{props.Test ||
default
}
+
+ normal:
+ {a + b}
+
+ );
+}
+
+export default MyComponent;
+"
+`;
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 67e070bc36..7fe63c2a89 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`React > jsx > Javascript Test > AdvancedRef 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > AdvancedRef 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -61,7 +61,7 @@ export default MyBasicRefComponent;
"
`;
-exports[`React > jsx > Javascript Test > Basic 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Basic 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -103,7 +103,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > Basic Context 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Basic Context 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useContext, useRef, useEffect } from \\"react\\";
@@ -146,7 +146,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > Basic OnMount Update 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Basic OnMount Update 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -173,7 +173,7 @@ export default MyBasicOnMountUpdateComponent;
"
`;
-exports[`React > jsx > Javascript Test > Basic Outputs 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Basic Outputs 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -193,7 +193,7 @@ export default MyBasicOutputsComponent;
"
`;
-exports[`React > jsx > Javascript Test > Basic Outputs Meta 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Basic Outputs Meta 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -213,7 +213,7 @@ export default MyBasicOutputsComponent;
"
`;
-exports[`React > jsx > Javascript Test > BasicAttribute 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > BasicAttribute 1`] = `
"import * as React from \\"react\\";
function MyComponent(props) {
@@ -224,7 +224,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Javascript Test > BasicBooleanAttribute 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > BasicBooleanAttribute 1`] = `
"import * as React from \\"react\\";
import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
@@ -248,7 +248,7 @@ export default MyBooleanAttribute;
"
`;
-exports[`React > jsx > Javascript Test > BasicChildComponent 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > BasicChildComponent 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -274,7 +274,7 @@ export default MyBasicChildComponent;
"
`;
-exports[`React > jsx > Javascript Test > BasicFor 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > BasicFor 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -311,7 +311,7 @@ export default MyBasicForComponent;
"
`;
-exports[`React > jsx > Javascript Test > BasicRef 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > BasicRef 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef } from \\"react\\";
@@ -368,7 +368,7 @@ export default MyBasicRefComponent;
"
`;
-exports[`React > jsx > Javascript Test > BasicRefAssignment 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > BasicRefAssignment 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useRef } from \\"react\\";
@@ -392,7 +392,7 @@ export default MyBasicRefAssignmentComponent;
"
`;
-exports[`React > jsx > Javascript Test > BasicRefPrevious 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > BasicRefPrevious 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -433,7 +433,7 @@ export default MyPreviousComponent;
"
`;
-exports[`React > jsx > Javascript Test > Button 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Button 1`] = `
"import * as React from \\"react\\";
function Button(props) {
@@ -461,7 +461,7 @@ export default Button;
"
`;
-exports[`React > jsx > Javascript Test > Columns 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Columns 1`] = `
"import * as React from \\"react\\";
function Column(props) {
@@ -524,7 +524,7 @@ export default Column;
"
`;
-exports[`React > jsx > Javascript Test > ContentSlotHtml 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > ContentSlotHtml 1`] = `
"import * as React from \\"react\\";
function ContentSlotCode(props) {
@@ -545,7 +545,7 @@ export default ContentSlotCode;
"
`;
-exports[`React > jsx > Javascript Test > ContentSlotJSX 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > ContentSlotJSX 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -598,7 +598,7 @@ export default ContentSlotJsxCode;
"
`;
-exports[`React > jsx > Javascript Test > CustomCode 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > CustomCode 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -670,7 +670,7 @@ export default CustomCode;
"
`;
-exports[`React > jsx > Javascript Test > Embed 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Embed 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -742,7 +742,7 @@ export default CustomCode;
"
`;
-exports[`React > jsx > Javascript Test > Form 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Form 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef } from \\"react\\";
@@ -1007,7 +1007,7 @@ export default FormComponent;
"
`;
-exports[`React > jsx > Javascript Test > Image 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Image 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -1107,7 +1107,7 @@ export default Image;
"
`;
-exports[`React > jsx > Javascript Test > Image State 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Image State 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -1130,7 +1130,7 @@ export default ImgStateComponent;
"
`;
-exports[`React > jsx > Javascript Test > Img 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Img 1`] = `
"import * as React from \\"react\\";
import { Builder } from \\"@builder.io/sdk\\";
@@ -1153,7 +1153,7 @@ export default ImgComponent;
"
`;
-exports[`React > jsx > Javascript Test > Input 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Input 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { Builder } from \\"@builder.io/sdk\\";
@@ -1182,7 +1182,7 @@ export default FormInputComponent;
"
`;
-exports[`React > jsx > Javascript Test > InputParent 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > InputParent 1`] = `
"import * as React from \\"react\\";
import FormInputComponent from \\"./input.raw\\";
@@ -1204,7 +1204,7 @@ export default Stepper;
"
`;
-exports[`React > jsx > Javascript Test > RawText 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > RawText 1`] = `
"import * as React from \\"react\\";
function RawText(props) {
@@ -1220,7 +1220,7 @@ export default RawText;
"
`;
-exports[`React > jsx > Javascript Test > Section 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Section 1`] = `
"import * as React from \\"react\\";
function SectionComponent(props) {
@@ -1244,7 +1244,7 @@ export default SectionComponent;
"
`;
-exports[`React > jsx > Javascript Test > Select 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Select 1`] = `
"import * as React from \\"react\\";
import { Builder } from \\"@builder.io/sdk\\";
@@ -1274,7 +1274,7 @@ export default SelectComponent;
"
`;
-exports[`React > jsx > Javascript Test > SlotDefault 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > SlotDefault 1`] = `
"import * as React from \\"react\\";
function SlotCode(props) {
@@ -1291,7 +1291,7 @@ export default SlotCode;
"
`;
-exports[`React > jsx > Javascript Test > SlotHtml 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > SlotHtml 1`] = `
"import * as React from \\"react\\";
import ContentSlotCode from \\"./content-slot-jsx.raw\\";
@@ -1307,7 +1307,7 @@ export default SlotCode;
"
`;
-exports[`React > jsx > Javascript Test > SlotJsx 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > SlotJsx 1`] = `
"import * as React from \\"react\\";
import ContentSlotCode from \\"./content-slot-jsx.raw\\";
@@ -1323,7 +1323,7 @@ export default SlotCode;
"
`;
-exports[`React > jsx > Javascript Test > SlotNamed 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > SlotNamed 1`] = `
"import * as React from \\"react\\";
function SlotCode(props) {
@@ -1341,7 +1341,7 @@ export default SlotCode;
"
`;
-exports[`React > jsx > Javascript Test > Stamped.io 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Stamped.io 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -1443,7 +1443,7 @@ export default SmileReviews;
"
`;
-exports[`React > jsx > Javascript Test > Submit 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Submit 1`] = `
"import * as React from \\"react\\";
function SubmitButton(props) {
@@ -1458,7 +1458,7 @@ export default SubmitButton;
"
`;
-exports[`React > jsx > Javascript Test > Text 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Text 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -1488,7 +1488,7 @@ export default Text;
"
`;
-exports[`React > jsx > Javascript Test > Textarea 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Textarea 1`] = `
"import * as React from \\"react\\";
function Textarea(props) {
@@ -1507,7 +1507,7 @@ export default Textarea;
"
`;
-exports[`React > jsx > Javascript Test > Video 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > Video 1`] = `
"import * as React from \\"react\\";
function Video(props) {
@@ -1539,7 +1539,7 @@ export default Video;
"
`;
-exports[`React > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -1562,7 +1562,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Javascript Test > basicForNoTagReference 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > basicForNoTagReference 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -1597,7 +1597,7 @@ export default MyBasicForNoTagRefComponent;
"
`;
-exports[`React > jsx > Javascript Test > basicForwardRef 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > basicForwardRef 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, forwardRef } from \\"react\\";
@@ -1630,7 +1630,7 @@ export default MyBasicForwardRefComponent;
"
`;
-exports[`React > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, forwardRef } from \\"react\\";
@@ -1663,7 +1663,7 @@ export default MyBasicForwardRefComponent;
"
`;
-exports[`React > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -1695,7 +1695,7 @@ export default MyBasicOnUpdateReturnComponent;
"
`;
-exports[`React > jsx > Javascript Test > class + ClassName + css 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > class + ClassName + css 1`] = `
"import * as React from \\"react\\";
import MyComp from \\"./my-component\\";
@@ -1723,7 +1723,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > class + css 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > class + css 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props) {
@@ -1745,7 +1745,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > className + css 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > className + css 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props) {
@@ -1767,7 +1767,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > className 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > className 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -1787,7 +1787,7 @@ export default ClassNameCode;
"
`;
-exports[`React > jsx > Javascript Test > classState 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > classState 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -1817,7 +1817,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > componentWithContext 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > componentWithContext 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useContext } from \\"react\\";
@@ -1852,7 +1852,7 @@ export default ComponentWithContext;
"
`;
-exports[`React > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > componentWithContextMultiRoot 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useContext } from \\"react\\";
@@ -1890,7 +1890,7 @@ export default ComponentWithContext;
"
`;
-exports[`React > jsx > Javascript Test > contentState 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > contentState 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useContext } from \\"react\\";
@@ -1913,7 +1913,7 @@ export default RenderContent;
"
`;
-exports[`React > jsx > Javascript Test > defaultProps 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > defaultProps 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -1955,7 +1955,7 @@ export default Button;
"
`;
-exports[`React > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -1995,7 +1995,7 @@ export default Button;
"
`;
-exports[`React > jsx > Javascript Test > defaultValsWithTypes 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > defaultValsWithTypes 1`] = `
"import * as React from \\"react\\";
const DEFAULT_VALUES = {
@@ -2010,7 +2010,7 @@ export default ComponentWithTypes;
"
`;
-exports[`React > jsx > Javascript Test > expressionState 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > expressionState 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -2027,7 +2027,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Javascript Test > getterState 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > getterState 1`] = `
"import * as React from \\"react\\";
function Button(props) {
@@ -2056,7 +2056,7 @@ export default Button;
"
`;
-exports[`React > jsx > Javascript Test > import types 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > import types 1`] = `
"import * as React from \\"react\\";
import RenderBlock from \\"./builder-render-block.raw\\";
@@ -2079,7 +2079,7 @@ export default RenderContent;
"
`;
-exports[`React > jsx > Javascript Test > multipleOnUpdate 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > multipleOnUpdate 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -2099,7 +2099,7 @@ export default MultipleOnUpdate;
"
`;
-exports[`React > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -2135,7 +2135,7 @@ export default MultipleOnUpdateWithDeps;
"
`;
-exports[`React > jsx > Javascript Test > multipleSpreads 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > multipleSpreads 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -2152,7 +2152,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > nestedShow 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > nestedShow 1`] = `
"import * as React from \\"react\\";
function NestedShow(props) {
@@ -2177,7 +2177,7 @@ export default NestedShow;
"
`;
-exports[`React > jsx > Javascript Test > nestedStyles 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > nestedStyles 1`] = `
"import * as React from \\"react\\";
function NestedStyles(props) {
@@ -2219,7 +2219,7 @@ export default NestedStyles;
"
`;
-exports[`React > jsx > Javascript Test > onEvent 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > onEvent 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useRef, useEffect } from \\"react\\";
@@ -2259,7 +2259,7 @@ export default Embed;
"
`;
-exports[`React > jsx > Javascript Test > onInit & onMount 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > onInit & onMount 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useRef, useEffect } from \\"react\\";
@@ -2282,7 +2282,7 @@ export default OnInit;
"
`;
-exports[`React > jsx > Javascript Test > onInit 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > onInit 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef } from \\"react\\";
@@ -2308,7 +2308,7 @@ export default OnInit;
"
`;
-exports[`React > jsx > Javascript Test > onInitPlain 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > onInitPlain 1`] = `
"import * as React from \\"react\\";
import { useRef } from \\"react\\";
@@ -2326,7 +2326,7 @@ export default OnInitPlain;
"
`;
-exports[`React > jsx > Javascript Test > onMount 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > onMount 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -2349,7 +2349,7 @@ export default Comp;
"
`;
-exports[`React > jsx > Javascript Test > onMountMultiple 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > onMountMultiple 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -2372,7 +2372,7 @@ export default Comp;
"
`;
-exports[`React > jsx > Javascript Test > onUpdate 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > onUpdate 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -2389,7 +2389,7 @@ export default OnUpdate;
"
`;
-exports[`React > jsx > Javascript Test > onUpdateWithDeps 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > onUpdateWithDeps 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -2410,7 +2410,7 @@ export default OnUpdateWithDeps;
"
`;
-exports[`React > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
"import * as React from \\"react\\";
const b = 3;
@@ -2427,7 +2427,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > preserveTyping 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > preserveTyping 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props) {
@@ -2440,7 +2440,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > propsDestructure 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > propsDestructure 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -2461,7 +2461,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > propsInterface 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > propsInterface 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props) {
@@ -2474,7 +2474,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > propsType 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > propsType 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props) {
@@ -2487,7 +2487,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > referencingFunInsideHook 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > referencingFunInsideHook 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -2516,7 +2516,7 @@ export default OnUpdate;
"
`;
-exports[`React > jsx > Javascript Test > renderBlock 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > renderBlock 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -2777,7 +2777,7 @@ export default RenderBlock;
"
`;
-exports[`React > jsx > Javascript Test > renderContentExample 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > renderContentExample 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useContext, useEffect } from \\"react\\";
@@ -2829,7 +2829,7 @@ export default RenderContent;
"
`;
-exports[`React > jsx > Javascript Test > rootFragmentMultiNode 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > rootFragmentMultiNode 1`] = `
"import * as React from \\"react\\";
function Button(props) {
@@ -2857,7 +2857,7 @@ export default Button;
"
`;
-exports[`React > jsx > Javascript Test > rootShow 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > rootShow 1`] = `
"import * as React from \\"react\\";
function RenderStyles(props) {
@@ -2878,7 +2878,7 @@ export default RenderStyles;
"
`;
-exports[`React > jsx > Javascript Test > self-referencing component 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > self-referencing component 1`] = `
"import * as React from \\"react\\";
function MyComponent(props) {
@@ -2894,7 +2894,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Javascript Test > self-referencing component with children 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > self-referencing component with children 1`] = `
"import * as React from \\"react\\";
function MyComponent(props) {
@@ -2915,7 +2915,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Javascript Test > showExpressions 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > showExpressions 1`] = `
"import * as React from \\"react\\";
function ShowWithOtherValues(props) {
@@ -2961,7 +2961,7 @@ export default ShowWithOtherValues;
"
`;
-exports[`React > jsx > Javascript Test > showWithFor 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > showWithFor 1`] = `
"import * as React from \\"react\\";
function NestedShow(props) {
@@ -2984,7 +2984,7 @@ export default NestedShow;
"
`;
-exports[`React > jsx > Javascript Test > showWithOtherValues 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > showWithOtherValues 1`] = `
"import * as React from \\"react\\";
function ShowWithOtherValues(props) {
@@ -3004,7 +3004,7 @@ export default ShowWithOtherValues;
"
`;
-exports[`React > jsx > Javascript Test > showWithRootText 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > showWithRootText 1`] = `
"import * as React from \\"react\\";
function ShowRootText(props) {
@@ -3015,7 +3015,7 @@ export default ShowRootText;
"
`;
-exports[`React > jsx > Javascript Test > signalsOnUpdate 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > signalsOnUpdate 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -3045,7 +3045,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > spreadAttrs 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > spreadAttrs 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props) {
@@ -3056,7 +3056,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > spreadNestedProps 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > spreadNestedProps 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props) {
@@ -3067,7 +3067,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > spreadProps 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > spreadProps 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props) {
@@ -3078,7 +3078,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Javascript Test > string-literal-store 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > string-literal-store 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -3093,7 +3093,7 @@ export default StringLiteralStore;
"
`;
-exports[`React > jsx > Javascript Test > styleClassAndCss 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > styleClassAndCss 1`] = `
"import * as React from \\"react\\";
function MyComponent(props) {
@@ -3120,7 +3120,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Javascript Test > stylePropClassAndCss 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > stylePropClassAndCss 1`] = `
"import * as React from \\"react\\";
function StylePropClassAndCss(props) {
@@ -3145,7 +3145,7 @@ export default StylePropClassAndCss;
"
`;
-exports[`React > jsx > Javascript Test > subComponent 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > subComponent 1`] = `
"import * as React from \\"react\\";
import Foo from \\"./foo-sub-component\\";
@@ -3157,7 +3157,7 @@ export default SubComponent;
"
`;
-exports[`React > jsx > Javascript Test > svgComponent 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > svgComponent 1`] = `
"import * as React from \\"react\\";
function SvgComponent(props) {
@@ -3184,7 +3184,7 @@ export default SvgComponent;
"
`;
-exports[`React > jsx > Javascript Test > typeDependency 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > typeDependency 1`] = `
"import * as React from \\"react\\";
function TypeDependency(props) {
@@ -3195,7 +3195,7 @@ export default TypeDependency;
"
`;
-exports[`React > jsx > Javascript Test > typeExternalStore 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -3210,7 +3210,7 @@ export default TypeExternalStore;
"
`;
-exports[`React > jsx > Javascript Test > typeGetterStore 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > typeGetterStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -3237,7 +3237,7 @@ export default TypeGetterStore;
"
`;
-exports[`React > jsx > Javascript Test > use-style 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > use-style 1`] = `
"import * as React from \\"react\\";
function MyComponent(props) {
@@ -3260,7 +3260,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Javascript Test > use-style-and-css 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > use-style-and-css 1`] = `
"import * as React from \\"react\\";
function MyComponent(props) {
@@ -3288,7 +3288,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Javascript Test > use-style-outside-component 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > use-style-outside-component 1`] = `
"import * as React from \\"react\\";
function MyComponent(props) {
@@ -3311,7 +3311,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Javascript Test > useTarget 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > useTarget 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -3342,7 +3342,7 @@ export default UseTargetComponent;
"
`;
-exports[`React > jsx > Javascript Test > webComponent 1`] = `
+exports[`React - stateType: useState > jsx > Javascript Test > webComponent 1`] = `
"import * as React from \\"react\\";
import { useRef } from \\"react\\";
import { register } from \\"swiper/element/bundle\\";
@@ -3367,7 +3367,7 @@ export default MyBasicWebComponent;
"
`;
-exports[`React > jsx > Remove Internal mitosis package 1`] = `
+exports[`React - stateType: useState > jsx > Remove Internal mitosis package 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -3384,7 +3384,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > AdvancedRef 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > AdvancedRef 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -3449,7 +3449,7 @@ export default MyBasicRefComponent;
"
`;
-exports[`React > jsx > Typescript Test > Basic 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Basic 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -3495,7 +3495,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > Basic Context 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Basic Context 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useContext, useRef, useEffect } from \\"react\\";
@@ -3538,7 +3538,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > Basic OnMount Update 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Basic OnMount Update 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -3570,7 +3570,7 @@ export default MyBasicOnMountUpdateComponent;
"
`;
-exports[`React > jsx > Typescript Test > Basic Outputs 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Basic Outputs 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -3590,7 +3590,7 @@ export default MyBasicOutputsComponent;
"
`;
-exports[`React > jsx > Typescript Test > Basic Outputs Meta 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Basic Outputs Meta 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -3610,7 +3610,7 @@ export default MyBasicOutputsComponent;
"
`;
-exports[`React > jsx > Typescript Test > BasicAttribute 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > BasicAttribute 1`] = `
"import * as React from \\"react\\";
function MyComponent(props: any) {
@@ -3621,7 +3621,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
"import * as React from \\"react\\";
type Props = {
@@ -3650,7 +3650,7 @@ export default MyBooleanAttribute;
"
`;
-exports[`React > jsx > Typescript Test > BasicChildComponent 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > BasicChildComponent 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -3676,7 +3676,7 @@ export default MyBasicChildComponent;
"
`;
-exports[`React > jsx > Typescript Test > BasicFor 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > BasicFor 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -3713,7 +3713,7 @@ export default MyBasicForComponent;
"
`;
-exports[`React > jsx > Typescript Test > BasicRef 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > BasicRef 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef } from \\"react\\";
@@ -3774,7 +3774,7 @@ export default MyBasicRefComponent;
"
`;
-exports[`React > jsx > Typescript Test > BasicRefAssignment 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > BasicRefAssignment 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useRef } from \\"react\\";
@@ -3802,7 +3802,7 @@ export default MyBasicRefAssignmentComponent;
"
`;
-exports[`React > jsx > Typescript Test > BasicRefPrevious 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > BasicRefPrevious 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -3847,7 +3847,7 @@ export default MyPreviousComponent;
"
`;
-exports[`React > jsx > Typescript Test > Button 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Button 1`] = `
"import * as React from \\"react\\";
export interface ButtonProps {
@@ -3882,7 +3882,7 @@ export default Button;
"
`;
-exports[`React > jsx > Typescript Test > Columns 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Columns 1`] = `
"import * as React from \\"react\\";
type Column = {
@@ -3960,7 +3960,7 @@ export default Column;
"
`;
-exports[`React > jsx > Typescript Test > ContentSlotHtml 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > ContentSlotHtml 1`] = `
"import * as React from \\"react\\";
type Props = {
@@ -3987,7 +3987,7 @@ export default ContentSlotCode;
"
`;
-exports[`React > jsx > Typescript Test > ContentSlotJSX 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > ContentSlotJSX 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -4045,7 +4045,7 @@ export default ContentSlotJsxCode;
"
`;
-exports[`React > jsx > Typescript Test > CustomCode 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > CustomCode 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -4122,7 +4122,7 @@ export default CustomCode;
"
`;
-exports[`React > jsx > Typescript Test > Embed 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Embed 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -4199,7 +4199,7 @@ export default CustomCode;
"
`;
-exports[`React > jsx > Typescript Test > Form 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Form 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef } from \\"react\\";
@@ -4495,7 +4495,7 @@ export default FormComponent;
"
`;
-exports[`React > jsx > Typescript Test > Image 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Image 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef, useEffect } from \\"react\\";
@@ -4614,7 +4614,7 @@ export default Image;
"
`;
-exports[`React > jsx > Typescript Test > Image State 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Image State 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -4637,7 +4637,7 @@ export default ImgStateComponent;
"
`;
-exports[`React > jsx > Typescript Test > Img 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Img 1`] = `
"import * as React from \\"react\\";
export interface ImgProps {
@@ -4678,7 +4678,7 @@ export default ImgComponent;
"
`;
-exports[`React > jsx > Typescript Test > Input 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Input 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -4719,7 +4719,7 @@ export default FormInputComponent;
"
`;
-exports[`React > jsx > Typescript Test > InputParent 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > InputParent 1`] = `
"import * as React from \\"react\\";
import FormInputComponent from \\"./input.raw\\";
@@ -4741,7 +4741,7 @@ export default Stepper;
"
`;
-exports[`React > jsx > Typescript Test > RawText 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > RawText 1`] = `
"import * as React from \\"react\\";
export interface RawTextProps {
@@ -4762,7 +4762,7 @@ export default RawText;
"
`;
-exports[`React > jsx > Typescript Test > Section 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Section 1`] = `
"import * as React from \\"react\\";
export interface SectionProps {
@@ -4792,7 +4792,7 @@ export default SectionComponent;
"
`;
-exports[`React > jsx > Typescript Test > Select 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Select 1`] = `
"import * as React from \\"react\\";
export interface FormSelectProps {
@@ -4834,7 +4834,7 @@ export default SelectComponent;
"
`;
-exports[`React > jsx > Typescript Test > SlotDefault 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > SlotDefault 1`] = `
"import * as React from \\"react\\";
type Props = {
@@ -4855,7 +4855,7 @@ export default SlotCode;
"
`;
-exports[`React > jsx > Typescript Test > SlotHtml 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > SlotHtml 1`] = `
"import * as React from \\"react\\";
type Props = {
@@ -4875,7 +4875,7 @@ export default SlotCode;
"
`;
-exports[`React > jsx > Typescript Test > SlotJsx 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > SlotJsx 1`] = `
"import * as React from \\"react\\";
type Props = {
@@ -4895,7 +4895,7 @@ export default SlotCode;
"
`;
-exports[`React > jsx > Typescript Test > SlotNamed 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > SlotNamed 1`] = `
"import * as React from \\"react\\";
type Props = {
@@ -4917,7 +4917,7 @@ export default SlotCode;
"
`;
-exports[`React > jsx > Typescript Test > Stamped.io 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Stamped.io 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -5024,7 +5024,7 @@ export default SmileReviews;
"
`;
-exports[`React > jsx > Typescript Test > Submit 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Submit 1`] = `
"import * as React from \\"react\\";
export interface ButtonProps {
@@ -5044,7 +5044,7 @@ export default SubmitButton;
"
`;
-exports[`React > jsx > Typescript Test > Text 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Text 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -5083,7 +5083,7 @@ export default Text;
"
`;
-exports[`React > jsx > Typescript Test > Textarea 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Textarea 1`] = `
"import * as React from \\"react\\";
export interface TextareaProps {
@@ -5110,7 +5110,7 @@ export default Textarea;
"
`;
-exports[`React > jsx > Typescript Test > Video 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > Video 1`] = `
"import * as React from \\"react\\";
export interface VideoProps {
@@ -5168,7 +5168,7 @@ export default Video;
"
`;
-exports[`React > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -5191,7 +5191,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Typescript Test > basicForNoTagReference 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > basicForNoTagReference 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -5226,7 +5226,7 @@ export default MyBasicForNoTagRefComponent;
"
`;
-exports[`React > jsx > Typescript Test > basicForwardRef 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > basicForwardRef 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, forwardRef } from \\"react\\";
@@ -5264,7 +5264,7 @@ export default MyBasicForwardRefComponent;
"
`;
-exports[`React > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, forwardRef } from \\"react\\";
@@ -5302,7 +5302,7 @@ export default MyBasicForwardRefComponent;
"
`;
-exports[`React > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -5334,7 +5334,7 @@ export default MyBasicOnUpdateReturnComponent;
"
`;
-exports[`React > jsx > Typescript Test > class + ClassName + css 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > class + ClassName + css 1`] = `
"import * as React from \\"react\\";
import MyComp from \\"./my-component\\";
@@ -5362,7 +5362,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > class + css 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > class + css 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props: any) {
@@ -5384,7 +5384,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > className + css 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > className + css 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props: any) {
@@ -5406,7 +5406,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > className 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > className 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -5432,7 +5432,7 @@ export default ClassNameCode;
"
`;
-exports[`React > jsx > Typescript Test > classState 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > classState 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -5462,7 +5462,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > componentWithContext 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > componentWithContext 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useContext } from \\"react\\";
@@ -5502,7 +5502,7 @@ export default ComponentWithContext;
"
`;
-exports[`React > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > componentWithContextMultiRoot 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useContext } from \\"react\\";
@@ -5545,7 +5545,7 @@ export default ComponentWithContext;
"
`;
-exports[`React > jsx > Typescript Test > contentState 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > contentState 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useContext } from \\"react\\";
@@ -5568,7 +5568,7 @@ export default RenderContent;
"
`;
-exports[`React > jsx > Typescript Test > defaultProps 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > defaultProps 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -5620,7 +5620,7 @@ export default Button;
"
`;
-exports[`React > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -5668,7 +5668,7 @@ export default Button;
"
`;
-exports[`React > jsx > Typescript Test > defaultValsWithTypes 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > defaultValsWithTypes 1`] = `
"import * as React from \\"react\\";
type Props = {
@@ -5687,7 +5687,7 @@ export default ComponentWithTypes;
"
`;
-exports[`React > jsx > Typescript Test > expressionState 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > expressionState 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -5704,7 +5704,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Typescript Test > getterState 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > getterState 1`] = `
"import * as React from \\"react\\";
export interface ButtonProps {
@@ -5737,7 +5737,7 @@ export default Button;
"
`;
-exports[`React > jsx > Typescript Test > import types 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > import types 1`] = `
"import * as React from \\"react\\";
type RenderContentProps = {
@@ -5767,7 +5767,7 @@ export default RenderContent;
"
`;
-exports[`React > jsx > Typescript Test > multipleOnUpdate 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > multipleOnUpdate 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -5787,7 +5787,7 @@ export default MultipleOnUpdate;
"
`;
-exports[`React > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -5823,7 +5823,7 @@ export default MultipleOnUpdateWithDeps;
"
`;
-exports[`React > jsx > Typescript Test > multipleSpreads 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > multipleSpreads 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -5840,7 +5840,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > nestedShow 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > nestedShow 1`] = `
"import * as React from \\"react\\";
interface Props {
@@ -5870,7 +5870,7 @@ export default NestedShow;
"
`;
-exports[`React > jsx > Typescript Test > nestedStyles 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > nestedStyles 1`] = `
"import * as React from \\"react\\";
function NestedStyles(props: any) {
@@ -5912,7 +5912,7 @@ export default NestedStyles;
"
`;
-exports[`React > jsx > Typescript Test > onEvent 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > onEvent 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useRef, useEffect } from \\"react\\";
@@ -5952,7 +5952,7 @@ export default Embed;
"
`;
-exports[`React > jsx > Typescript Test > onInit & onMount 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > onInit & onMount 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useRef, useEffect } from \\"react\\";
@@ -5975,7 +5975,7 @@ export default OnInit;
"
`;
-exports[`React > jsx > Typescript Test > onInit 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > onInit 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useRef } from \\"react\\";
@@ -6005,7 +6005,7 @@ export default OnInit;
"
`;
-exports[`React > jsx > Typescript Test > onInitPlain 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > onInitPlain 1`] = `
"import * as React from \\"react\\";
import { useRef } from \\"react\\";
@@ -6023,7 +6023,7 @@ export default OnInitPlain;
"
`;
-exports[`React > jsx > Typescript Test > onMount 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > onMount 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -6046,7 +6046,7 @@ export default Comp;
"
`;
-exports[`React > jsx > Typescript Test > onMountMultiple 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > onMountMultiple 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -6069,7 +6069,7 @@ export default Comp;
"
`;
-exports[`React > jsx > Typescript Test > onUpdate 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > onUpdate 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -6086,7 +6086,7 @@ export default OnUpdate;
"
`;
-exports[`React > jsx > Typescript Test > onUpdateWithDeps 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > onUpdateWithDeps 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -6111,7 +6111,7 @@ export default OnUpdateWithDeps;
"
`;
-exports[`React > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
"import * as React from \\"react\\";
type Types = {
@@ -6138,7 +6138,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > preserveTyping 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > preserveTyping 1`] = `
"import * as React from \\"react\\";
export type A = \\"test\\";
@@ -6164,7 +6164,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > propsDestructure 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > propsDestructure 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -6190,7 +6190,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > propsInterface 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > propsInterface 1`] = `
"import * as React from \\"react\\";
interface Person {
@@ -6208,7 +6208,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > propsType 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > propsType 1`] = `
"import * as React from \\"react\\";
type Person = {
@@ -6226,7 +6226,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > referencingFunInsideHook 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > referencingFunInsideHook 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -6255,7 +6255,7 @@ export default OnUpdate;
"
`;
-exports[`React > jsx > Typescript Test > renderBlock 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > renderBlock 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -6529,7 +6529,7 @@ export default RenderBlock;
"
`;
-exports[`React > jsx > Typescript Test > renderContentExample 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > renderContentExample 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useContext, useEffect } from \\"react\\";
@@ -6589,7 +6589,7 @@ export default RenderContent;
"
`;
-exports[`React > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
"import * as React from \\"react\\";
export interface ButtonProps {
@@ -6624,7 +6624,7 @@ export default Button;
"
`;
-exports[`React > jsx > Typescript Test > rootShow 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > rootShow 1`] = `
"import * as React from \\"react\\";
export interface RenderStylesProps {
@@ -6649,7 +6649,7 @@ export default RenderStyles;
"
`;
-exports[`React > jsx > Typescript Test > self-referencing component 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > self-referencing component 1`] = `
"import * as React from \\"react\\";
function MyComponent(props: any) {
@@ -6665,7 +6665,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Typescript Test > self-referencing component with children 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > self-referencing component with children 1`] = `
"import * as React from \\"react\\";
function MyComponent(props: any) {
@@ -6686,7 +6686,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Typescript Test > showExpressions 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > showExpressions 1`] = `
"import * as React from \\"react\\";
interface Props {
@@ -6737,7 +6737,7 @@ export default ShowWithOtherValues;
"
`;
-exports[`React > jsx > Typescript Test > showWithFor 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > showWithFor 1`] = `
"import * as React from \\"react\\";
interface Props {
@@ -6765,7 +6765,7 @@ export default NestedShow;
"
`;
-exports[`React > jsx > Typescript Test > showWithOtherValues 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > showWithOtherValues 1`] = `
"import * as React from \\"react\\";
interface Props {
@@ -6789,7 +6789,7 @@ export default ShowWithOtherValues;
"
`;
-exports[`React > jsx > Typescript Test > showWithRootText 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > showWithRootText 1`] = `
"import * as React from \\"react\\";
interface Props {
@@ -6804,7 +6804,7 @@ export default ShowRootText;
"
`;
-exports[`React > jsx > Typescript Test > signalsOnUpdate 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > signalsOnUpdate 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -6843,7 +6843,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > spreadAttrs 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > spreadAttrs 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props: any) {
@@ -6854,7 +6854,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > spreadNestedProps 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > spreadNestedProps 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props: any) {
@@ -6865,7 +6865,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > spreadProps 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > spreadProps 1`] = `
"import * as React from \\"react\\";
function MyBasicComponent(props: any) {
@@ -6876,7 +6876,7 @@ export default MyBasicComponent;
"
`;
-exports[`React > jsx > Typescript Test > string-literal-store 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > string-literal-store 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -6891,7 +6891,7 @@ export default StringLiteralStore;
"
`;
-exports[`React > jsx > Typescript Test > styleClassAndCss 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > styleClassAndCss 1`] = `
"import * as React from \\"react\\";
function MyComponent(props: any) {
@@ -6918,7 +6918,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Typescript Test > stylePropClassAndCss 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > stylePropClassAndCss 1`] = `
"import * as React from \\"react\\";
function StylePropClassAndCss(props: any) {
@@ -6943,7 +6943,7 @@ export default StylePropClassAndCss;
"
`;
-exports[`React > jsx > Typescript Test > subComponent 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > subComponent 1`] = `
"import * as React from \\"react\\";
import Foo from \\"./foo-sub-component\\";
@@ -6955,7 +6955,7 @@ export default SubComponent;
"
`;
-exports[`React > jsx > Typescript Test > svgComponent 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > svgComponent 1`] = `
"import * as React from \\"react\\";
function SvgComponent(props: any) {
@@ -6982,7 +6982,7 @@ export default SvgComponent;
"
`;
-exports[`React > jsx > Typescript Test > typeDependency 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > typeDependency 1`] = `
"import * as React from \\"react\\";
export type TypeDependencyProps = {
@@ -7000,7 +7000,7 @@ export default TypeDependency;
"
`;
-exports[`React > jsx > Typescript Test > typeExternalStore 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7016,7 +7016,7 @@ export default TypeExternalStore;
"
`;
-exports[`React > jsx > Typescript Test > typeGetterStore 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > typeGetterStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7049,7 +7049,7 @@ export default TypeGetterStore;
"
`;
-exports[`React > jsx > Typescript Test > use-style 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > use-style 1`] = `
"import * as React from \\"react\\";
function MyComponent(props: any) {
@@ -7072,7 +7072,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Typescript Test > use-style-and-css 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > use-style-and-css 1`] = `
"import * as React from \\"react\\";
function MyComponent(props: any) {
@@ -7100,7 +7100,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Typescript Test > use-style-outside-component 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > use-style-outside-component 1`] = `
"import * as React from \\"react\\";
function MyComponent(props: any) {
@@ -7123,7 +7123,7 @@ export default MyComponent;
"
`;
-exports[`React > jsx > Typescript Test > useTarget 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > useTarget 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -7154,7 +7154,7 @@ export default UseTargetComponent;
"
`;
-exports[`React > jsx > Typescript Test > webComponent 1`] = `
+exports[`React - stateType: useState > jsx > Typescript Test > webComponent 1`] = `
"import * as React from \\"react\\";
import { useRef } from \\"react\\";
import { register } from \\"swiper/element/bundle\\";
@@ -7179,7 +7179,7 @@ export default MyBasicWebComponent;
"
`;
-exports[`React > stamped (mobx) 1`] = `
+exports[`React - stateType: useState > stamped (mobx) 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -7278,7 +7278,7 @@ export default observedSmileReviews;
"
`;
-exports[`React > stamped (useState) 1`] = `
+exports[`React - stateType: useState > stamped (useState) 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -7375,7 +7375,7 @@ export default SmileReviews;
"
`;
-exports[`React > svelte > Javascript Test > basic 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > basic 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7395,7 +7395,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > bindGroup 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > bindGroup 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7461,7 +7461,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > bindProperty 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > bindProperty 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7476,7 +7476,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > classDirective 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > classDirective 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7499,7 +7499,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > context 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > context 1`] = `
"'>' expected. (35:13)
33 | return (
34 |
@@ -7510,7 +7510,7 @@ exports[`React > svelte > Javascript Test > context 1`] = `
38 |"
`;
-exports[`React > svelte > Javascript Test > each 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > each 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7531,7 +7531,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > eventHandlers 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > eventHandlers 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -7553,7 +7553,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > html 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > html 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7568,7 +7568,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > ifElse 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > ifElse 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7597,7 +7597,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > imports 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > imports 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7619,7 +7619,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > lifecycleHooks 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > lifecycleHooks 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -7646,7 +7646,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > reactive 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > reactive 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7670,7 +7670,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > reactiveWithFn 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > reactiveWithFn 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -7711,7 +7711,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > slots 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > slots 1`] = `
"import * as React from \\"react\\";
function MyComponent(props) {
@@ -7727,7 +7727,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > style 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > style 1`] = `
"import * as React from \\"react\\";
function MyComponent(props) {
@@ -7752,7 +7752,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Javascript Test > textExpressions 1`] = `
+exports[`React - stateType: useState > svelte > Javascript Test > textExpressions 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7777,7 +7777,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > basic 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > basic 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7797,7 +7797,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > bindGroup 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > bindGroup 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7863,7 +7863,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > bindProperty 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > bindProperty 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7878,7 +7878,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > classDirective 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > classDirective 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7901,7 +7901,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > context 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > context 1`] = `
"'>' expected. (35:13)
33 | return (
34 |
@@ -7912,7 +7912,7 @@ exports[`React > svelte > Typescript Test > context 1`] = `
38 |"
`;
-exports[`React > svelte > Typescript Test > each 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > each 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7933,7 +7933,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > eventHandlers 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > eventHandlers 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -7955,7 +7955,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > html 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > html 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7970,7 +7970,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > ifElse 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > ifElse 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -7999,7 +7999,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > imports 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > imports 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -8021,7 +8021,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > lifecycleHooks 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > lifecycleHooks 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useEffect } from \\"react\\";
@@ -8048,7 +8048,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > reactive 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > reactive 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
@@ -8072,7 +8072,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > reactiveWithFn 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > reactiveWithFn 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState, useEffect } from \\"react\\";
@@ -8113,7 +8113,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > slots 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > slots 1`] = `
"import * as React from \\"react\\";
function MyComponent(props: any) {
@@ -8129,7 +8129,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > style 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > style 1`] = `
"import * as React from \\"react\\";
function MyComponent(props: any) {
@@ -8154,7 +8154,7 @@ export default MyComponent;
"
`;
-exports[`React > svelte > Typescript Test > textExpressions 1`] = `
+exports[`React - stateType: useState > svelte > Typescript Test > textExpressions 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
import { useState } from \\"react\\";
diff --git a/packages/core/src/__tests__/react-state-builder.test.ts b/packages/core/src/__tests__/react-state-builder.test.ts
new file mode 100644
index 0000000000..6995ef6ee1
--- /dev/null
+++ b/packages/core/src/__tests__/react-state-builder.test.ts
@@ -0,0 +1,12 @@
+import { componentToReact } from '../generators/react';
+import { runTestsForTarget } from './test-generator';
+
+describe('React - stateType: builder', () => {
+ runTestsForTarget({
+ options: {
+ stateType: 'builder',
+ },
+ target: 'react',
+ generator: componentToReact,
+ });
+});
diff --git a/packages/core/src/__tests__/react-state-mobx.test.ts b/packages/core/src/__tests__/react-state-mobx.test.ts
new file mode 100644
index 0000000000..e8422f5410
--- /dev/null
+++ b/packages/core/src/__tests__/react-state-mobx.test.ts
@@ -0,0 +1,12 @@
+import { componentToReact } from '../generators/react';
+import { runTestsForTarget } from './test-generator';
+
+describe('React - stateType: mobx', () => {
+ runTestsForTarget({
+ options: {
+ stateType: 'mobx',
+ },
+ target: 'react',
+ generator: componentToReact,
+ });
+});
diff --git a/packages/core/src/__tests__/react-state-solid.test.ts b/packages/core/src/__tests__/react-state-solid.test.ts
new file mode 100644
index 0000000000..36139e59a7
--- /dev/null
+++ b/packages/core/src/__tests__/react-state-solid.test.ts
@@ -0,0 +1,12 @@
+import { componentToReact } from '../generators/react';
+import { runTestsForTarget } from './test-generator';
+
+describe('React - stateType: solid', () => {
+ runTestsForTarget({
+ options: {
+ stateType: 'solid',
+ },
+ target: 'react',
+ generator: componentToReact,
+ });
+});
diff --git a/packages/core/src/__tests__/react-state-valtio.test.ts b/packages/core/src/__tests__/react-state-valtio.test.ts
new file mode 100644
index 0000000000..abb461ced0
--- /dev/null
+++ b/packages/core/src/__tests__/react-state-valtio.test.ts
@@ -0,0 +1,12 @@
+import { componentToReact } from '../generators/react';
+import { runTestsForTarget } from './test-generator';
+
+describe('React - stateType: valtio', () => {
+ runTestsForTarget({
+ options: {
+ stateType: 'valtio',
+ },
+ target: 'react',
+ generator: componentToReact,
+ });
+});
diff --git a/packages/core/src/__tests__/react-state-variables.test.ts b/packages/core/src/__tests__/react-state-variables.test.ts
new file mode 100644
index 0000000000..05318ace27
--- /dev/null
+++ b/packages/core/src/__tests__/react-state-variables.test.ts
@@ -0,0 +1,12 @@
+import { componentToReact } from '../generators/react';
+import { runTestsForTarget } from './test-generator';
+
+describe('React - stateType: variables', () => {
+ runTestsForTarget({
+ options: {
+ stateType: 'variables',
+ },
+ target: 'react',
+ generator: componentToReact,
+ });
+});
diff --git a/packages/core/src/__tests__/react.test.ts b/packages/core/src/__tests__/react.test.ts
index 09d7e0f0b8..1930cf3f2b 100644
--- a/packages/core/src/__tests__/react.test.ts
+++ b/packages/core/src/__tests__/react.test.ts
@@ -4,8 +4,14 @@ import { runTestsForTarget } from './test-generator';
import stamped from './data/blocks/stamped-io.raw.tsx?raw';
-describe('React', () => {
- runTestsForTarget({ options: {}, target: 'react', generator: componentToReact });
+describe('React - stateType: useState', () => {
+ runTestsForTarget({
+ options: {
+ stateType: 'useState',
+ },
+ target: 'react',
+ generator: componentToReact,
+ });
test('stamped (useState)', () => {
const component = parseJsx(stamped);
const output = componentToReact({