@builder.io/mitosis 0.0.56-1 → 0.0.56-101

package/dist/src/__tests__/data/blocks/classname-jsx.raw.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from '../../../../jsx-runtime';
+declare type Props = {
+    [key: string]: string | JSX.Element;
+    slotTesting: JSX.Element;
+};
+export default function ClassNameCode(props: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/classname-jsx.raw.jsx

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function ClassNameCode(props) {
+    var state = (0, mitosis_1.useStore)({
+        bindings: 'a binding',
+    });
+    return (<div>
+      {/*// @ts-ignore */}
+      <div className="no binding">Without Binding</div>
+      {/*// @ts-ignore */}
+      <div className={state.bindings}>With binding</div>
+    </div>);
+}
+exports.default = ClassNameCode;

package/dist/src/__tests__/data/blocks/columns.raw.d.ts

@@ -8,5 +8,5 @@ export interface ColumnProps {
     stackColumnsAt?: 'tablet' | 'mobile' | 'never';
     reverseColumnsWhenStacked?: boolean;
 }
-export default function Column(props: ColumnProps): JSX.Element;
+export default function Column(props: ColumnProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
 export {};

package/dist/src/__tests__/data/blocks/columns.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Column(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         getColumns: function () {
             return props.columns || [];
         },

package/dist/src/__tests__/data/blocks/content-slot-html.raw.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from '../../../../jsx-runtime';
+declare type Props = {
+    [key: string]: string | JSX.Element;
+    slotTesting: JSX.Element;
+};
+export default function ContentSlotCode(props: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/content-slot-html.raw.jsx

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function ContentSlotCode(props) {
+    return (<div>
+      <mitosis_1.Slot name={props.slotTesting}/>
+      <div>
+        <hr />
+      </div>
+      <div>
+        <mitosis_1.Slot />
+      </div>
+    </div>);
+}
+exports.default = ContentSlotCode;

package/dist/src/__tests__/data/blocks/content-slot-jsx.raw.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from '../../../../jsx-runtime';
+declare type Props = {
+    [key: string]: string | JSX.Element;
+};
+export default function ContentSlotJsxCode(props: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/content-slot-jsx.raw.jsx

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function ContentSlotJsxCode(props) {
+    return (<div>
+      {props.slotTesting}
+      <div>
+        <hr />
+      </div>
+      <div>{props.children}</div>
+    </div>);
+}
+exports.default = ContentSlotJsxCode;

package/dist/src/__tests__/data/blocks/custom-code.raw.d.ts

@@ -2,4 +2,4 @@ export interface CustomCodeProps {
     code: string;
     replaceNodes?: boolean;
 }
-export default function CustomCode(props: CustomCodeProps): JSX.Element;
+export default function CustomCode(props: CustomCodeProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/custom-code.raw.jsx

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function CustomCode(props) {
-    var elem = (0, mitosis_1.useRef)();
-    var state = (0, mitosis_1.useState)({
+    var elem = (0, mitosis_1.useRef)(null);
+    var state = (0, mitosis_1.useStore)({
         scriptsInserted: [],
         scriptsRun: [],
         findAndRunScripts: function () {
@@ -24,11 +24,7 @@ function CustomCode(props) {
                         document.head.appendChild(newScript);
                     }
                     else if (!script.type ||
-                        [
-                            'text/javascript',
-                            'application/javascript',
-                            'application/ecmascript',
-                        ].includes(script.type)) {
+                        ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
                         if (state.scriptsRun.includes(script.innerText)) {
                             continue;
                         }

package/dist/src/__tests__/data/blocks/embed.raw.d.ts

@@ -1,4 +1,4 @@
 export interface EmbedProps {
     content: string;
 }
-export default function Embed(props: EmbedProps): JSX.Element;
+export default function Embed(props: EmbedProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/embed.raw.jsx

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Embed(props) {
-    var elem = (0, mitosis_1.useRef)();
-    var state = (0, mitosis_1.useState)({
+    var elem = (0, mitosis_1.useRef)(null);
+    var state = (0, mitosis_1.useStore)({
         scriptsInserted: [],
         scriptsRun: [],
         findAndRunScripts: function () {
@@ -24,11 +24,7 @@ function Embed(props) {
                         document.head.appendChild(newScript);
                     }
                     else if (!script.type ||
-                        [
-                            'text/javascript',
-                            'application/javascript',
-                            'application/ecmascript',
-                        ].includes(script.type)) {
+                        ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
                         if (state.scriptsRun.includes(script.innerText)) {
                             continue;
                         }

package/dist/src/__tests__/data/blocks/form.raw.d.ts

@@ -22,4 +22,4 @@ export interface FormProps {
     errorMessagePath?: string;
 }
 export declare type FormState = 'unsubmitted' | 'sending' | 'success' | 'error';
-export default function FormComponent(props: FormProps): JSX.Element;
+export default function FormComponent(props: FormProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/form.raw.jsx

@@ -44,13 +44,13 @@ var _fake_3 = require("@fake");
 var _fake_4 = require("@fake");
 function FormComponent(props) {
     var _a;
-    var state = (0, mitosis_1.useState)({
-        state: 'unsubmitted',
+    var state = (0, mitosis_1.useStore)({
+        formState: 'unsubmitted',
         // TODO: separate response and error?
         responseData: null,
         formErrorMessage: '',
         get submissionState() {
-            return (sdk_1.Builder.isEditing && props.previewState) || state.state;
+            return (sdk_1.Builder.isEditing && props.previewState) || state.formState;
         },
         onSubmit: function (event) {
             var _this = this;
@@ -149,7 +149,7 @@ function FormComponent(props) {
                         return;
                     }
                 }
-                state.state = 'sending';
+                state.formState = 'sending';
                 var formUrl = "".concat(sdk_1.builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io', "/api/v1/form-submit?apiKey=").concat(sdk_1.builder.apiKey, "&to=").concat(btoa(props.sendSubmissionsToEmail || ''), "&name=").concat(encodeURIComponent(props.name || ''));
                 fetch(props.sendSubmissionsTo === 'email'
                     ? formUrl
@@ -185,7 +185,7 @@ function FormComponent(props) {
                                     }
                                 }
                                 state.responseData = body;
-                                state.state = res.ok ? 'success' : 'error';
+                                state.formState = res.ok ? 'success' : 'error';
                                 if (res.ok) {
                                     submitSuccessEvent = new CustomEvent('submit:success', {
                                         detail: {
@@ -237,16 +237,16 @@ function FormComponent(props) {
                         }
                     }
                     state.responseData = err;
-                    state.state = 'error';
+                    state.formState = 'error';
                 });
             }
         },
     });
-    var formRef = (0, mitosis_1.useRef)();
+    var formRef = (0, mitosis_1.useRef)(null);
     return (<form validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={function (event) { return state.onSubmit(event); }} {...props.attributes}>
       <mitosis_1.Show when={props.builderBlock && props.builderBlock.children}>
         <mitosis_1.For each={(_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.children}>
-          {function (block, index) { return (<_fake_1.BuilderBlock key={block.id} block={block} index={index}/>); }}
+          {function (block, index) { return <_fake_1.BuilderBlock key={block.id} block={block} index={index}/>; }}
         </mitosis_1.For>
       </mitosis_1.Show>
 

package/dist/src/__tests__/data/blocks/image.raw.d.ts

@@ -1,5 +1,5 @@
 export interface ImageProps {
-    class?: string;
+    _class?: string;
     image: string;
     sizes?: string;
     lazy?: boolean;
@@ -12,4 +12,4 @@ export interface ImageProps {
     aspectRatio?: number;
     children?: any;
 }
-export default function Image(props: ImageProps): JSX.Element;
+export default function Image(props: ImageProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/image.raw.jsx

@@ -3,22 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Image(props) {
     var pictureRef = (0, mitosis_1.useRef)();
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         scrollListener: null,
         imageLoaded: false,
-        load: false,
         setLoaded: function () {
             state.imageLoaded = true;
         },
-        isBrowser: function () {
-            return (typeof window !== 'undefined' &&
-                window.navigator.product != 'ReactNative');
-        },
         useLazyLoading: function () {
             // TODO: Add more checks here, like testing for real web browsers
-            return !!props.lazy && state.isBrowser();
+            return !!props.lazy && isBrowser();
         },
     });
+    function isBrowser() {
+        return typeof window !== 'undefined' && window.navigator.product != 'ReactNative';
+    }
+    var _a = (0, mitosis_1.useState)(false), load = _a[0], setLoad = _a[1];
     (0, mitosis_1.onMount)(function () {
         if (state.useLazyLoading()) {
             // throttled scroll capture listener
@@ -27,7 +26,7 @@ function Image(props) {
                     var rect = pictureRef.getBoundingClientRect();
                     var buffer = window.innerHeight / 2;
                     if (rect.top < window.innerHeight + buffer) {
-                        state.load = true;
+                        setLoad(true);
                         state.scrollListener = null;
                         window.removeEventListener('scroll', listener_1);
                     }
@@ -48,13 +47,13 @@ function Image(props) {
     });
     return (<>
       <picture ref={pictureRef}>
-        <mitosis_1.Show when={!state.useLazyLoading() || state.load}>
+        <mitosis_1.Show when={!state.useLazyLoading() || load}>
           <img alt={props.altText} aria-role={props.altText ? 'presentation' : undefined} css={{
             opacity: '1',
             transition: 'opacity 0.2s ease-in-out',
             objectFit: 'cover',
             objectPosition: 'center',
-        }} class={'builder-image' + (props.class ? ' ' + props.class : '')} src={props.image} onLoad={function () { return state.setLoaded(); }} 
+        }} class={'builder-image' + (props._class ? ' ' + props._class : '')} src={props.image} onLoad={function () { return state.setLoaded(); }} 
     // TODO: memoize on image on client
     srcset={props.srcset} sizes={props.sizes}/>
         </mitosis_1.Show>

package/dist/src/__tests__/data/blocks/img-state.raw.d.ts

@@ -0,0 +1 @@
+export default function ImgStateComponent(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/img-state.raw.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function ImgStateComponent() {
+    var state = (0, mitosis_1.useStore)({
+        canShow: true,
+        images: ['http://example.com/qwik.png'],
+    });
+    return (<div>
+      <mitosis_1.For each={state.images}>
+        {function (item, itemIndex) { return (<>
+            <img class={'custom-class'} src={item} key={itemIndex}/>
+          </>); }}
+      </mitosis_1.For>
+    </div>);
+}
+exports.default = ImgStateComponent;

package/dist/src/__tests__/data/blocks/img.raw.d.ts

@@ -6,4 +6,4 @@ export interface ImgProps {
     backgroundSize?: 'cover' | 'contain';
     backgroundPosition?: 'center' | 'top' | 'left' | 'right' | 'bottom' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
 }
-export default function ImgComponent(props: ImgProps): JSX.Element;
+export default function ImgComponent(props: ImgProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/input.raw.d.ts

@@ -8,4 +8,4 @@ export interface FormInputProps {
     defaultValue?: string;
     required?: boolean;
 }
-export default function FormInputComponent(props: FormInputProps): JSX.Element;
+export default function FormInputComponent(props: FormInputProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/input.raw.jsx

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 require("@builder.io/mitosis");
 var sdk_1 = require("@builder.io/sdk");
 function FormInputComponent(props) {
-    return (<input {...props.attributes} key={sdk_1.Builder.isEditing && props.defaultValue
-            ? props.defaultValue
-            : 'default-key'} placeholder={props.placeholder} type={props.type} name={props.name} value={props.value} defaultValue={props.defaultValue} required={props.required}/>);
+    return (<input {...props.attributes} key={sdk_1.Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'} placeholder={props.placeholder} type={props.type} name={props.name} value={props.value} defaultValue={props.defaultValue} required={props.required}/>);
 }
 exports.default = FormInputComponent;

package/dist/src/__tests__/data/blocks/multiple-onUpdate.raw.d.ts

@@ -1 +1 @@
-export default function MultipleOnUpdate(): JSX.Element;
+export default function MultipleOnUpdate(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/multiple-onUpdateWithDeps.raw.d.ts

@@ -1 +1 @@
-export default function MultipleOnUpdateWithDeps(): JSX.Element;
+export default function MultipleOnUpdateWithDeps(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/multiple-onUpdateWithDeps.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MultipleOnUpdateWithDeps() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         a: 'a',
         b: 'b',
         c: 'c',
@@ -10,9 +10,15 @@ function MultipleOnUpdateWithDeps() {
     });
     (0, mitosis_1.onUpdate)(function () {
         console.log('Runs when a or b changes', state.a, state.b);
+        if (state.a === 'a') {
+            state.a = 'b';
+        }
     }, [state.a, state.b]);
     (0, mitosis_1.onUpdate)(function () {
         console.log('Runs when c or d changes', state.c, state.d);
+        if (state.a === 'a') {
+            state.a = 'b';
+        }
     }, [state.c, state.d]);
     return <div />;
 }

package/dist/src/__tests__/data/blocks/onInit-onMount.raw.d.ts

@@ -0,0 +1 @@
+export default function OnInit(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/onInit-onMount.raw.jsx

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function OnInit() {
+    (0, mitosis_1.onInit)(function () {
+        console.log('onInit');
+    });
+    (0, mitosis_1.onMount)(function () {
+        console.log('onMount');
+    });
+    return <div />;
+}
+exports.default = OnInit;

package/dist/src/__tests__/data/blocks/onInit.raw.d.ts

@@ -0,0 +1,8 @@
+declare type Props = {
+    name: string;
+};
+export declare const defaultValues: {
+    name: string;
+};
+export default function OnInit(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/onInit.raw.jsx

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValues = void 0;
+var mitosis_1 = require("@builder.io/mitosis");
+exports.defaultValues = {
+    name: 'PatrickJS',
+};
+function OnInit(props) {
+    var state = (0, mitosis_1.useStore)({
+        // name: props.name
+        // name: defaultValues.name || props.name,
+        name: '',
+    });
+    (0, mitosis_1.onInit)(function () {
+        state.name = exports.defaultValues.name || props.name;
+        console.log('set defaults with props');
+    });
+    return <div>Default name defined by parent {state.name}</div>;
+}
+exports.default = OnInit;

package/dist/src/__tests__/data/blocks/onMount.raw.d.ts

@@ -1 +1 @@
-export default function Comp(): JSX.Element;
+export default function Comp(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/onUpdate.raw.d.ts

@@ -1 +1 @@
-export default function OnUpdate(): JSX.Element;
+export default function OnUpdate(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/onUpdateWithDeps.raw.d.ts

@@ -1 +1 @@
-export default function OnUpdateWithDeps(): JSX.Element;
+export default function OnUpdateWithDeps(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/onUpdateWithDeps.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function OnUpdateWithDeps() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         a: 'a',
         b: 'b',
     });

package/dist/src/__tests__/data/blocks/raw-text.raw.d.ts

@@ -2,4 +2,4 @@ export interface RawTextProps {
     attributes?: any;
     text?: string;
 }
-export default function RawText(props: RawTextProps): JSX.Element;
+export default function RawText(props: RawTextProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/rootShow.raw.d.ts

@@ -1,3 +1,3 @@
 export default function RenderStyles(props: {
     foo: string;
-}): JSX.Element;
+}): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/section-state.raw.d.ts

@@ -0,0 +1,6 @@
+export interface SectionProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+}
+export default function SectionStateComponent(props: SectionProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/section-state.raw.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function SectionStateComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        max: 42,
+        items: [42],
+    });
+    return (<mitosis_1.Show when={state.max}>
+      <mitosis_1.For each={state.items}>
+        {function (item) { return (<section {...props.attributes} style={{ maxWidth: item + state.max }}>
+            {props.children}
+          </section>); }}
+      </mitosis_1.For>
+    </mitosis_1.Show>);
+}
+exports.default = SectionStateComponent;

package/dist/src/__tests__/data/blocks/section.raw.d.ts

@@ -4,4 +4,4 @@ export interface SectionProps {
     attributes?: any;
     children?: any;
 }
-export default function SectionComponent(props: SectionProps): JSX.Element;
+export default function SectionComponent(props: SectionProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/select.raw.d.ts

@@ -8,4 +8,4 @@ export interface FormSelectProps {
     value?: string;
     defaultValue?: string;
 }
-export default function SelectComponent(props: FormSelectProps): JSX.Element;
+export default function SelectComponent(props: FormSelectProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/select.raw.jsx

@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 var sdk_1 = require("@builder.io/sdk");
 function SelectComponent(props) {
-    return (<select {...props.attributes} value={props.value} key={sdk_1.Builder.isEditing && props.defaultValue
-            ? props.defaultValue
-            : 'default-key'} defaultValue={props.defaultValue} name={props.name}>
+    return (<select {...props.attributes} value={props.value} key={sdk_1.Builder.isEditing && props.defaultValue ? props.defaultValue : 'default-key'} defaultValue={props.defaultValue} name={props.name}>
       <mitosis_1.For each={props.options}>
         {function (option, index) { return (<option value={option.value} data-index={index}>
             {option.name || option.value}

package/dist/src/__tests__/data/blocks/self-referencing-component-with-children.raw.d.ts

@@ -1 +1 @@
-export default function MyComponent(props: any): JSX.Element;
+export default function MyComponent(props: any): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/self-referencing-component.raw.d.ts

@@ -1 +1 @@
-export default function MyComponent(props: any): JSX.Element;
+export default function MyComponent(props: any): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/shadow-dom.raw.d.ts

@@ -2,5 +2,5 @@ declare type SmileReviewsProps = {
     productId: string;
     apiKey: string;
 };
-export default function SmileReviews(props: SmileReviewsProps): JSX.Element;
+export default function SmileReviews(props: SmileReviewsProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
 export {};

package/dist/src/__tests__/data/blocks/shadow-dom.raw.jsx

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 (0, mitosis_1.useMetadata)({ isAttachedToShadowDom: true });
 function SmileReviews(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         reviews: [],
         name: 'test',
         showReviewPrompt: false,
@@ -17,9 +17,7 @@ function SmileReviews(props) {
         });
     });
     return (<div data-user={state.name}>
-      <button onClick={function () { return (state.showReviewPrompt = true); }}>
-        Write a review
-      </button>
+      <button onClick={function () { return (state.showReviewPrompt = true); }}>Write a review</button>
       <mitosis_1.Show when={state.showReviewPrompt}>
         <input placeholder="Email"/>
 

package/dist/src/__tests__/data/blocks/slot-html.raw.d.ts

@@ -0,0 +1,5 @@
+declare type Props = {
+    [key: string]: string;
+};
+export default function SlotCode(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/slot-html.raw.jsx

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+var content_slot_jsx_raw_1 = __importDefault(require("./content-slot-jsx.raw"));
+function SlotCode(props) {
+    return (<div>
+      <content_slot_jsx_raw_1.default>
+        <mitosis_1.Slot testing={<div>Hello</div>}></mitosis_1.Slot>
+      </content_slot_jsx_raw_1.default>
+    </div>);
+}
+exports.default = SlotCode;

package/dist/src/__tests__/data/blocks/slot-jsx.raw.d.ts

@@ -0,0 +1,5 @@
+declare type Props = {
+    [key: string]: string;
+};
+export default function SlotCode(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/slot-jsx.raw.jsx

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var content_slot_jsx_raw_1 = __importDefault(require("./content-slot-jsx.raw"));
+function SlotCode(props) {
+    return (<div>
+      <content_slot_jsx_raw_1.default slotTesting={<div>Hello</div>}/>
+    </div>);
+}
+exports.default = SlotCode;

package/dist/src/__tests__/data/blocks/stamped-io.raw.d.ts

@@ -2,5 +2,5 @@ declare type SmileReviewsProps = {
     productId: string;
     apiKey: string;
 };
-export default function SmileReviews(props: SmileReviewsProps): JSX.Element;
+export default function SmileReviews(props: SmileReviewsProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
 export {};

package/dist/src/__tests__/data/blocks/stamped-io.raw.jsx

@@ -4,7 +4,7 @@ var mitosis_1 = require("@builder.io/mitosis");
 var lodash_1 = require("lodash");
 var lodash_2 = require("lodash");
 function SmileReviews(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         reviews: [],
         name: 'test',
         showReviewPrompt: false,
@@ -24,16 +24,15 @@ function SmileReviews(props) {
         });
     });
     return (<div data-user={state.name}>
-      <button onClick={function () { return (state.showReviewPrompt = true); }}>
-        Write a review
-      </button>
+      <button onClick={function () { return (state.showReviewPrompt = true); }}>Write a review</button>
       <mitosis_1.Show when={state.showReviewPrompt}>
         <input placeholder="Email"/>
 
         <input css={{ display: 'block' }} placeholder="Title"/>
 
         <textarea css={{ display: 'block' }} placeholder="How was your experience?"/>
-        <button css={{ display: 'block' }} onClick={function () {
+        <button css={{ display: 'block' }} onClick={function (event) {
+            event.preventDefault();
             state.showReviewPrompt = false;
         }}>
           Submit