@builder.io/mitosis 0.0.56-11 → 0.0.56-110

package/dist/src/__tests__/data/advanced-ref.raw.d.ts

@@ -0,0 +1,4 @@
+export interface Props {
+    showInput: boolean;
+}
+export default function MyBasicRefComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/advanced-ref.raw.jsx

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicRefComponent(props) {
+    var inputRef = (0, mitosis_1.useRef)(null);
+    var inputNoArgRef = (0, mitosis_1.useRef)(null);
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    function onBlur() {
+        // Maintain focus
+        inputRef.focus();
+    }
+    function lowerCaseName() {
+        return state.name.toLowerCase();
+    }
+    (0, mitosis_1.onUpdate)(function () {
+        console.log('Received an update');
+    }, [inputRef, inputNoArgRef]);
+    return (<div>
+      {props.showInput && (<>
+          <input ref={inputRef} css={{
+                color: 'red',
+            }} value={state.name} onBlur={function (event) { return onBlur(); }} onChange={function (event) { return (state.name = event.target.value); }}/>
+
+          <label ref={inputNoArgRef} for="cars">
+            Choose a car:
+          </label>
+
+          <select name="cars" id="cars">
+            <option value="supra">GR Supra</option>
+            <option value="86">GR 86</option>
+          </select>
+        </>)}
+      Hello
+      {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web Component!
+    </div>);
+}
+exports.default = MyBasicRefComponent;

package/dist/src/__tests__/data/basic-child-component.raw.d.ts

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

package/dist/src/__tests__/data/basic-child-component.raw.jsx

@@ -7,13 +7,14 @@ var mitosis_1 = require("@builder.io/mitosis");
 var basic_raw_1 = __importDefault(require("./basic.raw"));
 var basic_onMount_update_raw_1 = __importDefault(require("./basic-onMount-update.raw"));
 function MyBasicChildComponent() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'Steve',
+        dev: 'PatrickJS',
     });
     return (<div>
-      <basic_raw_1.default />
+      <basic_raw_1.default id={state.dev}/>
       <div>
-        <basic_onMount_update_raw_1.default />
+        <basic_onMount_update_raw_1.default hi={state.name} bye={state.dev}/>
       </div>
     </div>);
 }

package/dist/src/__tests__/data/basic-context.raw.d.ts

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

package/dist/src/__tests__/data/basic-context.raw.jsx

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+var injection_js_1 = require("@dummy/injection-js");
+function MyBasicComponent() {
+    (0, mitosis_1.setContext)(injection_js_1.Injector, (0, injection_js_1.createInjector)());
+    var myService = (0, mitosis_1.useContext)(injection_js_1.MyService);
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onInit)(function () {
+        var hi = myService.method('hi');
+        console.log(hi);
+    });
+    (0, mitosis_1.onMount)(function () {
+        var bye = myService.method('hi');
+        console.log(bye);
+    });
+    function onChange() {
+        var change = myService.method('change');
+        console.log(change);
+    }
+    return (<div>
+      {myService.method('hello') + state.name}
+      Hello! I can run in React, Vue, Solid, or Liquid!
+      <input onChange={onChange}></input>
+    </div>);
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/basic-custom-mitosis-package.raw.d.ts

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

package/dist/src/__tests__/data/basic-custom-mitosis-package.raw.jsx

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var custom_mitosis_1 = require("@dummy/custom-mitosis");
+function MyBasicComponent() {
+    var state = (0, custom_mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    return <div>Hello {state.name}! I can run in React, Qwik, Vue, Solid, or Liquid!</div>;
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/basic-for-show.raw.d.ts

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

package/dist/src/__tests__/data/basic-for-show.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicForShowComponent() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
         names: ['Steve', 'PatrickJS'],
     });
@@ -12,8 +12,7 @@ function MyBasicForShowComponent() {
             <input value={state.name} onChange={function (event) {
                 state.name = event.target.value + ' and ' + person;
             }}/>
-            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid,
-            or Liquid!
+            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
           </mitosis_1.Show>); }}
       </mitosis_1.For>
     </div>);

package/dist/src/__tests__/data/basic-for.raw.d.ts

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

package/dist/src/__tests__/data/basic-for.raw.jsx

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function MyBasicForComponent() {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
         names: ['Steve', 'PatrickJS'],
     });
@@ -15,8 +15,7 @@ function MyBasicForComponent() {
             <input value={state.name} onChange={function (event) {
                 state.name = event.target.value + ' and ' + person;
             }}/>
-            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid,
-            or Liquid!
+            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
           </>); }}
       </mitosis_1.For>
     </div>);

package/dist/src/__tests__/data/basic-forwardRef-metadata.raw.d.ts

@@ -0,0 +1,5 @@
+export interface Props {
+    showInput: boolean;
+    inputRef: HTMLInputElement;
+}
+export default function MyBasicForwardRefComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/basic-forwardRef-metadata.raw.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+(0, mitosis_1.useMetadata)({
+    forwardRef: 'inputRef',
+});
+function MyBasicForwardRefComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    return (<div>
+      <input ref={props.inputRef} css={{
+            color: 'red',
+        }} value={state.name} onChange={function (event) { return (state.name = event.target.value); }}/>
+    </div>);
+}
+exports.default = MyBasicForwardRefComponent;

package/dist/src/__tests__/data/basic-forwardRef.raw.d.ts

@@ -0,0 +1,5 @@
+export interface Props {
+    showInput: boolean;
+    inputRef: HTMLInputElement;
+}
+export default function MyBasicForwardRefComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/basic-forwardRef.raw.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicForwardRefComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    return (<div>
+      <input ref={props.inputRef} css={{
+            color: 'red',
+        }} value={state.name} onChange={function (event) { return (state.name = event.target.value); }}/>
+    </div>);
+}
+exports.default = MyBasicForwardRefComponent;

package/dist/src/__tests__/data/basic-onChange.raw.d.ts

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

package/dist/src/__tests__/data/basic-onChange.raw.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicComponent() {
+    var state = (0, mitosis_1.useStore)({
+        name: 'Steve',
+    });
+    return (<div class="test" css={{
+            padding: '10px',
+        }}>
+      <input value={state.name} onChange={function (myEvent) {
+            state.name = myEvent.target.value;
+        }}/>
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/basic-onMount-update.raw.d.ts

@@ -1 +1,5 @@
-export default function MyBasicOnMountUpdateComponent(): JSX.Element;
+export interface Props {
+    hi: string;
+    bye: string;
+}
+export default function MyBasicOnMountUpdateComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/basic-onMount-update.raw.jsx

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
-function MyBasicOnMountUpdateComponent() {
-    var state = (0, mitosis_1.useState)({
+function MyBasicOnMountUpdateComponent(props) {
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
         names: ['Steve', 'PatrickJS'],
     });
     (0, mitosis_1.onInit)(function () {
-        state.name = 'PatrickJS onInit';
+        state.name = 'PatrickJS onInit' + props.hi;
     });
     (0, mitosis_1.onMount)(function () {
-        state.name = 'PatrickJS onMount';
+        state.name = 'PatrickJS onMount' + props.bye;
     });
     return <div>Hello {state.name}</div>;
 }

package/dist/src/__tests__/data/basic-onUpdate-return.raw.d.ts

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

package/dist/src/__tests__/data/basic-onUpdate-return.raw.jsx

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicOnUpdateReturnComponent() {
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onUpdate)(function () {
+        var controller = new AbortController();
+        var signal = controller.signal;
+        fetch('https://patrickjs.com/api/resource.json', { signal: signal })
+            .then(function (response) { return response.json(); })
+            .then(function (data) {
+            state.name = data.name;
+        });
+        return function () {
+            if (!signal.aborted) {
+                controller.abort();
+            }
+        };
+    }, [state.name]);
+    return <div>Hello! {state.name}</div>;
+}
+exports.default = MyBasicOnUpdateReturnComponent;

package/dist/src/__tests__/data/basic-outputs-meta.raw.d.ts

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

package/dist/src/__tests__/data/basic-outputs-meta.raw.jsx

@@ -5,7 +5,7 @@ var mitosis_1 = require("@builder.io/mitosis");
     outputs: ['onMessage', 'onEvent'],
 });
 function MyBasicOutputsComponent(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         name: 'PatrickJS',
     });
     (0, mitosis_1.onMount)(function () {

package/dist/src/__tests__/data/basic-outputs.raw.d.ts

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

package/dist/src/__tests__/data/basic-outputs.raw.jsx

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

package/dist/src/__tests__/data/basic-preserve-export-or-local-statement.raw.d.ts

@@ -0,0 +1,6 @@
+export declare const a = 3;
+export declare const bar: () => void;
+export declare function run<T>(value: T): void;
+export default function MyBasicComponent(props: {
+    id: string;
+}): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/basic-preserve-export-or-local-statement.raw.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.run = exports.bar = exports.a = void 0;
+var b = 3;
+var foo = function () { };
+exports.a = 3;
+var bar = function () { };
+exports.bar = bar;
+function run(value) { }
+exports.run = run;
+function MyBasicComponent(props) {
+    return <div></div>;
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/basic-props-destructure.raw.d.ts

@@ -0,0 +1,6 @@
+declare type Props = {
+    children: any;
+    type: string;
+};
+export default function MyBasicComponent({ children: c, type }: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

package/dist/src/__tests__/data/basic-props-destructure.raw.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicComponent(_a) {
+    var c = _a.children, type = _a.type;
+    var state = (0, mitosis_1.useStore)({
+        name: 'Decadef20',
+    });
+    return (<div>
+      {c} {type}
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/basic-props.raw.d.ts

@@ -0,0 +1,6 @@
+declare type Props = {
+    children: any;
+    type: string;
+};
+export default function MyBasicComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

package/dist/src/__tests__/data/basic-props.raw.jsx

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        name: 'Decadef20',
+    });
+    return (<div>
+      {props.children} {props.type}
+      Hello! I can run in React, Vue, Solid, or Liquid!
+    </div>);
+}
+exports.default = MyBasicComponent;

package/dist/src/__tests__/data/basic-ref-assignment.raw.d.ts

@@ -0,0 +1,4 @@
+export interface Props {
+    showInput: boolean;
+}
+export default function MyBasicRefAssignmentComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/basic-ref-assignment.raw.jsx

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicRefAssignmentComponent(props) {
+    var holdValueRef = (0, mitosis_1.useRef)('Patrick');
+    function handlerClick(event) {
+        event.preventDefault();
+        console.log('current value', holdValueRef);
+        holdValueRef = holdValueRef + 'JS';
+    }
+    return (<div>
+      <button onClick={function (evt) { return handlerClick(evt); }}>Click</button>
+    </div>);
+}
+exports.default = MyBasicRefAssignmentComponent;

package/dist/src/__tests__/data/basic-ref-usePrevious.raw.d.ts

@@ -0,0 +1,5 @@
+export interface Props {
+    showInput: boolean;
+}
+export declare function usePrevious<T>(value: T): T;
+export default function MyPreviousComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/basic-ref-usePrevious.raw.jsx

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrevious = void 0;
+var mitosis_1 = require("@builder.io/mitosis");
+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
+    var ref = (0, mitosis_1.useRef)(null);
+    // Store current value in ref
+    (0, mitosis_1.onUpdate)(function () {
+        ref = value;
+    }, [value]); // Only re-run if value changes
+    // Return previous value (happens before update in useEffect above)
+    return ref;
+}
+exports.usePrevious = usePrevious;
+function MyPreviousComponent(props) {
+    var state = (0, mitosis_1.useStore)({
+        count: 0,
+    });
+    var prevCount = (0, mitosis_1.useRef)(state.count);
+    (0, mitosis_1.onUpdate)(function () {
+        prevCount = state.count;
+    }, [state.count]); //
+    // Get the previous value (was passed into hook on last render)
+    // const prevCount = usePrevious(state.count);
+    // Display both current and previous count value
+    return (<div>
+      <h1>
+        Now: {state.count}, before: {prevCount}
+      </h1>
+      <button onClick={function () { return (state.count += 1); }}>Increment</button>
+    </div>);
+}
+exports.default = MyPreviousComponent;

package/dist/src/__tests__/data/basic-ref.raw.d.ts

@@ -0,0 +1,4 @@
+export interface Props {
+    showInput: boolean;
+}
+export default function MyBasicRefComponent(props: Props): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/basic-ref.raw.jsx

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicRefComponent(props) {
+    var inputRef = (0, mitosis_1.useRef)(null);
+    var inputNoArgRef = (0, mitosis_1.useRef)(null);
+    var state = (0, mitosis_1.useStore)({
+        name: 'PatrickJS',
+    });
+    function onBlur() {
+        // Maintain focus
+        inputRef.focus();
+    }
+    function lowerCaseName() {
+        return state.name.toLowerCase();
+    }
+    return (<div>
+      {props.showInput && (<>
+          <input ref={inputRef} css={{
+                color: 'red',
+            }} value={state.name} onBlur={function (event) { return onBlur(); }} onChange={function (event) { return (state.name = event.target.value); }}/>
+
+          <label ref={inputNoArgRef} for="cars">
+            Choose a car:
+          </label>
+
+          <select name="cars" id="cars">
+            <option value="supra">GR Supra</option>
+            <option value="86">GR 86</option>
+          </select>
+        </>)}
+      Hello
+      {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web Component!
+    </div>);
+}
+exports.default = MyBasicRefComponent;

package/dist/src/__tests__/data/basic.raw.d.ts

@@ -1 +1,6 @@
-export default function MyBasicComponent(): JSX.Element;
+export declare const DEFAULT_VALUES: {
+    name: string;
+};
+export default function MyBasicComponent(props: {
+    id: string;
+}): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/basic.raw.jsx

@@ -1,12 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_VALUES = void 0;
 var mitosis_1 = require("@builder.io/mitosis");
-function MyBasicComponent() {
-    var state = (0, mitosis_1.useState)({
+exports.DEFAULT_VALUES = {
+    name: 'Steve',
+};
+function MyBasicComponent(props) {
+    var state = (0, mitosis_1.useStore)({
         name: 'Steve',
+        underscore_fn_name: function () {
+            return 'bar';
+        },
     });
-    return (<div>
-      <input value={state.name} onChange={function (event) { return (state.name = event.target.value); }}/>
+    return (<div class="test" css={{
+            padding: '10px',
+        }}>
+      <input value={exports.DEFAULT_VALUES.name || state.name} onChange={function (myEvent) { return (state.name = myEvent.target.value); }}/>
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>);
 }

package/dist/src/__tests__/data/blocks/button-with-metadata.raw.d.ts

@@ -4,4 +4,4 @@ export interface ButtonProps {
     link?: string;
     openLinkInNewTab?: boolean;
 }
-export default function Button(props: ButtonProps): JSX.Element;
+export default function Button(props: ButtonProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -4,4 +4,4 @@ export interface ButtonProps {
     link?: string;
     openLinkInNewTab?: boolean;
 }
-export default function Button(props: ButtonProps): JSX.Element;
+export default function Button(props: ButtonProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import type { JSX } from '../../../../jsx-runtime';
 declare type Props = {
     [key: string]: string | JSX.Element;
     slotTesting: JSX.Element;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function ClassNameCode(props) {
-    var state = (0, mitosis_1.useState)({
+    var state = (0, mitosis_1.useStore)({
         bindings: 'a binding',
     });
     return (<div>

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

@@ -1,3 +1,4 @@
+import type { JSX } from '../../../../jsx-runtime';
 declare type Props = {
     [key: string]: string | JSX.Element;
     slotTesting: JSX.Element;

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

@@ -1,3 +1,4 @@
+import type { JSX } from '../../../../jsx-runtime';
 declare type Props = {
     [key: string]: string | JSX.Element;
 };

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

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
 function ContentSlotJsxCode(props) {
     return (<div>
-      {props.slotTesting}
+      <mitosis_1.Show when={props.slotTesting}>
+        <div>{props.slotTesting}</div>
+      </mitosis_1.Show>
       <div>
         <hr />
       </div>

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;