@builder.io/mitosis 0.0.56-2 → 0.0.56-22

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,7 +44,7 @@ var _fake_3 = require("@fake");
 var _fake_4 = require("@fake");
 function FormComponent(props) {
     var _a;
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         state: 'unsubmitted',
         // TODO: separate response and error?
         responseData: null,
@@ -242,11 +242,11 @@ function FormComponent(props) {
             }
         },
     });
-    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

@@ -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,7 +47,7 @@ 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',

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,9 +24,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/submit-button.raw.d.ts

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

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

@@ -5,4 +5,4 @@ export interface TextProps {
     content?: string;
     builderBlock?: any;
 }
-export default function Text(props: TextProps): JSX.Element;
+export default function Text(props: TextProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var sdk_1 = require("@builder.io/sdk");
+var mitosis_1 = require("@builder.io/mitosis");
 function Text(props) {
     var _a, _b, _c, _d, _e, _f;
     var allowEditingText = sdk_1.Builder.isBrowser &&
@@ -9,9 +10,10 @@ function Text(props) {
         !(((_b = (_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.bindings) === null || _b === void 0 ? void 0 : _b['component.options.text']) ||
             ((_d = (_c = props.builderBlock) === null || _c === void 0 ? void 0 : _c.bindings) === null || _d === void 0 ? void 0 : _d['options.text']) ||
             ((_f = (_e = props.builderBlock) === null || _e === void 0 ? void 0 : _e.bindings) === null || _f === void 0 ? void 0 : _f['text']));
+    var state = (0, mitosis_1.useStore)({ name: 'Decadef20' });
     // TODO: Add back dynamic `direction` CSS prop when we add support for some
     //       sort of dynamic CSS
     // css={{ direction: props.rtlMode ? 'rtl' : 'ltr' }}
-    return (<div contentEditable={allowEditingText || undefined} innerHTML={props.text || props.content || ''}/>);
+    return (<div contentEditable={allowEditingText || undefined} data-name={{ test: state.name || 'any name' }} innerHTML={props.text || props.content || state.name || '<p class="text-lg">my name</p>'}/>);
 }
 exports.default = Text;

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

@@ -5,4 +5,4 @@ export interface TextareaProps {
     defaultValue?: string;
     placeholder?: string;
 }
-export default function Textarea(props: TextareaProps): JSX.Element;
+export default function Textarea(props: TextareaProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -14,4 +14,4 @@ export interface VideoProps {
     posterImage?: string;
     lazyLoad?: boolean;
 }
-export default function Video(props: VideoProps): JSX.Element;
+export default function Video(props: VideoProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -16,6 +16,6 @@ function Video(props) {
     return (<video {...props.attributes} style={__assign(__assign({ width: '100%', height: '100%' }, (_a = props.attributes) === null || _a === void 0 ? void 0 : _a.style), { objectFit: props.fit, objectPosition: props.position, 
             // Hack to get object fit to work as expected and
             // not have the video overflow
-            borderRadius: 1 })} preload="none" key={props.video || 'no-src'} poster={props.posterImage} autoPlay={props.autoPlay} muted={props.muted} controls={props.controls} loop={props.loop}/>);
+            borderRadius: 1 })} preload="none" key={props.video || 'no-src'} poster={props.posterImage} autoplay={props.autoPlay} muted={props.muted} controls={props.controls} loop={props.loop}/>);
 }
 exports.default = Video;

package/dist/src/__tests__/data/context/component-with-context.lite.d.ts

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

package/dist/src/__tests__/data/context/component-with-context.lite.jsx

@@ -6,9 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var _1_1 = __importDefault(require("@dummy/1"));
 var _2_1 = __importDefault(require("@dummy/2"));
 var mitosis_1 = require("@builder.io/mitosis");
-function ComponentWithContext() {
+function ComponentWithContext(props) {
     var foo = (0, mitosis_1.useContext)(_1_1.default);
-    (0, mitosis_1.setContext)(_1_1.default, { foo: 'bar' });
+    (0, mitosis_1.setContext)(_1_1.default, {
+        foo: 'bar',
+        content: function () {
+            return props.content;
+        },
+    });
     return (<_2_1.default.Provider value={{ bar: 'baz' }}>
       <>{foo.value}</>
     </_2_1.default.Provider>);

package/dist/src/__tests__/data/styles/class-and-className.raw.d.ts

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