@builder.io/mitosis 0.0.56-18 → 0.0.56-20

package/dist/src/__tests__/shared.js

@@ -152,6 +152,14 @@ var TESTS_FOR_TARGET = {
         FORM_BLOCK_TESTS,
         FOR_SHOW_TESTS,
     ],
+    svelte: [
+        BASIC_TESTS,
+        ROOT_SHOW_TESTS,
+        FORWARD_REF_TESTS,
+        MULTI_ON_UPDATE_TESTS,
+        FORM_BLOCK_TESTS,
+        FOR_SHOW_TESTS,
+    ],
     html: [
         BASIC_TESTS,
         ROOT_SHOW_TESTS,

package/dist/src/__tests__/svelte.test.js

@@ -1,82 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var svelte_1 = require("../generators/context/svelte");
-var context_1 = require("../parsers/context");
-var svelte_2 = require("../generators/svelte");
-var jsx_1 = require("../parsers/jsx");
-var basicOnChange = require('./data/basic-onChange.raw');
-var onUpdate = require('./data/blocks/onUpdate.raw');
-var multipleOUpdate = require('./data/blocks/multiple-onUpdate.raw');
-var selfReferencingComponent = require('./data/blocks/self-referencing-component.raw');
-var selfReferencingComponentWithChildren = require('./data/blocks/self-referencing-component-with-children.raw');
-var builderRenderBlock = require('./data/blocks/builder-render-block.raw');
-var rootShow = require('./data/blocks/rootShow.raw');
-var simpleExample = require('./data/context/simple.context.lite');
-var componentWithContext = require('./data/context/component-with-context.lite');
-var renderBlock = require('./data/blocks/builder-render-block.raw');
-var text = require('./data/blocks/text.raw');
+var svelte_1 = require("../generators/svelte");
+var shared_1 = require("./shared");
 describe('Svelte', function () {
-    test('Basic onChange', function () {
-        var component = (0, jsx_1.parseJsx)(basicOnChange);
-        var output = (0, svelte_2.componentToSvelte)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('onUpdate', function () {
-        var component = (0, jsx_1.parseJsx)(onUpdate);
-        var output = (0, svelte_2.componentToSvelte)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('multipleOnUpdate', function () {
-        var component = (0, jsx_1.parseJsx)(multipleOUpdate);
-        var output = (0, svelte_2.componentToSvelte)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('selfReferencingComponent', function () {
-        var component = (0, jsx_1.parseJsx)(selfReferencingComponent);
-        var output = (0, svelte_2.componentToSvelte)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('selfReferencingComponentWithChildren', function () {
-        var component = (0, jsx_1.parseJsx)(selfReferencingComponentWithChildren);
-        var output = (0, svelte_2.componentToSvelte)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('BuilderRenderBlock', function () {
-        var component = (0, jsx_1.parseJsx)(builderRenderBlock);
-        var output = (0, svelte_2.componentToSvelte)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    test('rootShow', function () {
-        var component = (0, jsx_1.parseJsx)(rootShow);
-        var output = (0, svelte_2.componentToSvelte)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
-    describe('Context', function () {
-        test('Parse context', function () {
-            var component = (0, context_1.parseContext)(simpleExample, { name: 'SimpleExample' });
-            if (!component) {
-                throw new Error('No parseable context found for simple.context.lite.ts');
-            }
-            expect(component).toMatchSnapshot();
-            var context = (0, svelte_1.contextToSvelte)()({ context: component });
-            expect(context).toMatchSnapshot();
-        });
-        test('Use and set context in components', function () {
-            var component = (0, jsx_1.parseJsx)(componentWithContext);
-            expect(component).toMatchSnapshot();
-            var output = (0, svelte_2.componentToSvelte)()({ component: component });
-            expect(output).toMatchSnapshot();
-        });
-        test('Use and set context in complex components', function () {
-            var component = (0, jsx_1.parseJsx)(renderBlock);
-            expect(component).toMatchSnapshot();
-            var output = (0, svelte_2.componentToSvelte)()({ component: component });
-            expect(output).toMatchSnapshot();
-        });
-    });
-    test('Text', function () {
-        var component = (0, jsx_1.parseJsx)(text);
-        var output = (0, svelte_2.componentToSvelte)()({ component: component });
-        expect(output).toMatchSnapshot();
-    });
+    (0, shared_1.runTestsForTarget)('svelte', (0, svelte_1.componentToSvelte)());
 });

package/dist/src/generators/svelte.d.ts

@@ -11,5 +11,5 @@ interface BlockToSvelteProps {
 }
 declare type BlockToSvelte = (props: BlockToSvelteProps) => string;
 export declare const blockToSvelte: BlockToSvelte;
-export declare const componentToSvelte: (options?: ToSvelteOptions) => Transpiler;
+export declare const componentToSvelte: ({ plugins, ...options }?: ToSvelteOptions) => Transpiler;
 export {};

package/dist/src/generators/svelte.js

@@ -14,6 +14,26 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -40,6 +60,10 @@ var babel_transform_1 = require("../helpers/babel-transform");
 var function_1 = require("fp-ts/lib/function");
 var context_1 = require("./helpers/context");
 var html_tags_1 = require("../constants/html_tags");
+var lodash_1 = require("lodash");
+var function_literal_prefix_1 = require("../constants/function-literal-prefix");
+var method_literal_prefix_1 = require("../constants/method-literal-prefix");
+var patterns_1 = require("../helpers/patterns");
 var mappers = {
     Fragment: function (_a) {
         var _b;
@@ -231,12 +255,29 @@ var useBindValue = function (json, options) {
 var stripThisRefs = function (str) {
     return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1');
 };
-var componentToSvelte = function (options) {
-    if (options === void 0) { options = {}; }
+var FUNCTION_HACK_PLUGIN = function () { return ({
+    json: {
+        pre: function (json) {
+            for (var key in json.state) {
+                var value = json.state[key];
+                if (typeof value === 'string' && value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
+                    var strippedValue = value.replace(method_literal_prefix_1.methodLiteralPrefix, '');
+                    if (!Boolean(strippedValue.match(patterns_1.GETTER))) {
+                        var newValue = "".concat(function_literal_prefix_1.functionLiteralPrefix, " function ").concat(strippedValue);
+                        json.state[key] = newValue;
+                    }
+                }
+            }
+        },
+    },
+}); };
+var componentToSvelte = function (_a) {
+    if (_a === void 0) { _a = {}; }
+    var _b = _a.plugins, plugins = _b === void 0 ? [] : _b, options = __rest(_a, ["plugins"]);
     return function (_a) {
         var _b, _c, _d, _e, _f, _g;
         var component = _a.component;
-        var useOptions = __assign(__assign({}, options), { stateType: 'variables' });
+        var useOptions = __assign({ stateType: 'variables', prettier: true, plugins: __spreadArray([FUNCTION_HACK_PLUGIN], plugins, true) }, options);
         // Make a copy we can safely mutate, similar to babel's toolchain
         var json = (0, fast_clone_1.fastClone)(component);
         if (useOptions.plugins) {
@@ -279,7 +320,7 @@ var componentToSvelte = function (options) {
             getters: false,
             functions: true,
             format: 'variables',
-            keyPrefix: 'function ',
+            keyPrefix: 'const ',
             valueMapper: function (code) {
                 return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
                     includeState: useOptions.stateType === 'variables',
@@ -293,8 +334,7 @@ var componentToSvelte = function (options) {
                 includeState: useOptions.stateType === 'variables',
             }), babel_transform_1.babelTransformCode);
         };
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <script>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n    <script>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "import { onMount } from 'svelte'", !((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? '' : "import { afterUpdate } from 'svelte'", !((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : "import { onDestroy } from 'svelte'", (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), (0, context_1.hasContext)(component) ? 'import { getContext, setContext } from "svelte";' : '', !hasData || useOptions.stateType === 'variables' ? '' : "import onChange from 'on-change'", refs
-            .concat(props)
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <script>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n    <script>\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "import { onMount } from 'svelte'", !((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? '' : "import { afterUpdate } from 'svelte'", !((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : "import { onDestroy } from 'svelte'", (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), (0, context_1.hasContext)(component) ? 'import { getContext, setContext } from "svelte";' : '', !hasData || useOptions.stateType === 'variables' ? '' : "import onChange from 'on-change'", (0, lodash_1.uniq)(refs.map(function (ref) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref); }).concat(props))
             .map(function (name) {
             if (name === 'children') {
                 return '';
@@ -310,7 +350,17 @@ var componentToSvelte = function (options) {
             : "onMount(() => { ".concat(transformHookCode(json.hooks.onMount.code), " });"), !((_f = json.hooks.onUpdate) === null || _f === void 0 ? void 0 : _f.length)
             ? ''
             : json.hooks.onUpdate
-                .map(function (hook) { return "afterUpdate(() => { ".concat(transformHookCode(hook.code), " })"); })
+                .map(function (_a, index) {
+                var code = _a.code, deps = _a.deps;
+                var hookCode = transformHookCode(code);
+                if (deps) {
+                    var fnName = "onUpdateFn_".concat(index);
+                    return "\n                    function ".concat(fnName, "() {\n                      ").concat(hookCode, "\n                    }\n                    $: ").concat(fnName, "(...").concat(deps, ")\n                    ");
+                }
+                else {
+                    return "afterUpdate(() => { ".concat(hookCode, " })");
+                }
+            })
                 .join(';'), !((_g = json.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code)
             ? ''
             : "onDestroy(() => { ".concat(transformHookCode(json.hooks.onUnMount.code), " });"), json.children
@@ -342,7 +392,8 @@ var componentToSvelte = function (options) {
                 });
             }
             catch (err) {
-                console.warn('Could not prettify', { string: str }, err);
+                console.warn('Could not prettify');
+                console.warn({ string: str }, err);
             }
         }
         if (useOptions.plugins) {

package/dist/src/helpers/get-state-object-string.d.ts

@@ -1,12 +1,13 @@
 import { JSONObject } from '../types/json';
 import { MitosisComponent } from '../types/mitosis-component';
-export declare type GetStateObjectStringOptions = {
+interface GetStateObjectStringOptions {
     data?: boolean;
     functions?: boolean;
     getters?: boolean;
     valueMapper?: (code: string, type: 'data' | 'function' | 'getter') => string;
     format?: 'object' | 'class' | 'variables';
     keyPrefix?: string;
-};
-export declare const getMemberObjectString: (object: JSONObject, options?: GetStateObjectStringOptions) => string;
+}
+export declare const getMemberObjectString: (object: JSONObject, userOptions?: GetStateObjectStringOptions) => string;
 export declare const getStateObjectStringFromComponent: (component: MitosisComponent, options?: GetStateObjectStringOptions) => string;
+export {};

package/dist/src/helpers/get-state-object-string.js

@@ -19,15 +19,22 @@ var json5_1 = __importDefault(require("json5"));
 var function_literal_prefix_1 = require("../constants/function-literal-prefix");
 var method_literal_prefix_1 = require("../constants/method-literal-prefix");
 var patterns_1 = require("./patterns");
-var convertStateMemberToString = function (options) {
+var DEFAULT_OPTIONS = {
+    format: 'object',
+    keyPrefix: '',
+    valueMapper: function (val) { return val; },
+    data: true,
+    functions: true,
+    getters: true,
+};
+var convertStateMemberToString = function (_a) {
+    var data = _a.data, format = _a.format, functions = _a.functions, getters = _a.getters, keyPrefix = _a.keyPrefix, valueMapper = _a.valueMapper;
     return function (_a) {
         var key = _a[0], value = _a[1];
-        var valueMapper = options.valueMapper || (function (val) { return val; });
-        var keyValueDelimiter = options.format === 'object' ? ':' : '=';
-        var keyPrefix = options.keyPrefix || '';
+        var keyValueDelimiter = format === 'object' ? ':' : '=';
         if (typeof value === 'string') {
             if (value.startsWith(function_literal_prefix_1.functionLiteralPrefix)) {
-                if (options.functions === false) {
+                if (functions === false) {
                     return undefined;
                 }
                 var functionValue = value.replace(function_literal_prefix_1.functionLiteralPrefix, '');
@@ -36,31 +43,31 @@ var convertStateMemberToString = function (options) {
             else if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
                 var methodValue = value.replace(method_literal_prefix_1.methodLiteralPrefix, '');
                 var isGet = Boolean(methodValue.match(patterns_1.GETTER));
-                if (isGet && options.getters === false) {
+                if (isGet && getters === false) {
                     return undefined;
                 }
-                if (!isGet && options.functions === false) {
+                if (!isGet && functions === false) {
                     return undefined;
                 }
                 return "".concat(keyPrefix, " ").concat(valueMapper(methodValue, isGet ? 'getter' : 'function'));
             }
         }
-        if (options.data === false) {
+        if (data === false) {
             return undefined;
         }
         return "".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(json5_1.default.stringify(value), 'data'));
     };
 };
-var getMemberObjectString = function (object, options) {
-    if (options === void 0) { options = {}; }
-    var format = options.format || 'object';
-    var lineItemDelimiter = format === 'object' ? ',' : '\n';
+var getMemberObjectString = function (object, userOptions) {
+    if (userOptions === void 0) { userOptions = {}; }
+    var options = __assign(__assign({}, DEFAULT_OPTIONS), userOptions);
+    var lineItemDelimiter = options.format === 'object' ? ',' : '\n';
     var stringifiedProperties = Object.entries(object)
-        .map(convertStateMemberToString(__assign(__assign({}, options), { format: format })))
+        .map(convertStateMemberToString(options))
         .filter(function (x) { return x !== undefined; })
         .join(lineItemDelimiter);
-    var prefix = format === 'object' ? '{' : '';
-    var suffix = format === 'object' ? '}' : '';
+    var prefix = options.format === 'object' ? '{' : '';
+    var suffix = options.format === 'object' ? '}' : '';
     // NOTE: we add a `lineItemDelimiter` at the very end because other functions will sometimes append more properties.
     // If the delimiter is a comma and the format is `object`, then we need to make sure we have an extra comma at the end,
     // or the object will become invalid JS.
@@ -69,9 +76,5 @@ var getMemberObjectString = function (object, options) {
     return "".concat(prefix).concat(stringifiedProperties).concat(extraDelimiter).concat(suffix);
 };
 exports.getMemberObjectString = getMemberObjectString;
-var getStateObjectStringFromComponent = function (component, options) {
-    if (options === void 0) { options = {}; }
-    var stateObjectStr = (0, exports.getMemberObjectString)(component.state, options);
-    return stateObjectStr;
-};
+var getStateObjectStringFromComponent = function (component, options) { return (0, exports.getMemberObjectString)(component.state, options); };
 exports.getStateObjectStringFromComponent = getStateObjectStringFromComponent;

package/dist/src/helpers/styles/helpers.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import * as CSS from 'csstype';
 import { MitosisNode } from '../../types/mitosis-node';
 import { MitosisComponent } from '../../types/mitosis-component';
@@ -17,8 +18,8 @@ export declare const hasStyles: (component: MitosisComponent) => boolean;
 export declare type StyleMap = {
     [className: string]: CSS.Properties | StyleMap;
 };
-export declare const getNestedSelectors: (map: StyleMap) => import("lodash").Dictionary<StyleMap | CSS.Properties<0 | (string & {}), string & {}>>;
-export declare const getStylesOnly: (map: StyleMap) => import("lodash").Dictionary<StyleMap | CSS.Properties<0 | (string & {}), string & {}>>;
+export declare const getNestedSelectors: (map: StyleMap) => import("lodash").Dictionary<CSS.Properties<0 | (string & {}), string & {}> | StyleMap>;
+export declare const getStylesOnly: (map: StyleMap) => import("lodash").Dictionary<CSS.Properties<0 | (string & {}), string & {}> | StyleMap>;
 /**
  * { 'my-class': { display: 'block', '&.foo': { display: 'none' } }}
  */

package/dist/src/jsx-types.d.ts

@@ -1,6 +1,3 @@
-declare type CSS = Partial<CSSStyleDeclaration> & {
-    [key: string]: Partial<CSSStyleDeclaration> | string;
-};
 /**
  * Based on JSX types for Solid, Inferno, Surplus, and React
  *
@@ -10,6 +7,9 @@ declare type CSS = Partial<CSSStyleDeclaration> & {
  * https://github.com/adamhaile/surplus/blob/master/index.d.ts
  */
 export declare namespace JSX {
+    type CSS = Partial<CSSStyleDeclaration> & {
+        [key: string]: Partial<CSSStyleDeclaration> | string;
+    };
     type Element = Node | ArrayElement | FunctionElement | string | number | boolean | null | undefined;
     interface ArrayElement extends Array<Element> {
     }
@@ -38,6 +38,7 @@ export declare namespace JSX {
     }
     type EventHandlerUnion<T, E extends Event> = EventHandler<T, E> | BoundEventHandler<T, E>;
     interface IntrinsicAttributes {
+        key?: string | number;
         ref?: HTMLElement | ((e: HTMLElement) => void);
     }
     interface CustomAttributes<T> {
@@ -56,7 +57,7 @@ export declare namespace JSX {
         $id?: string;
     }
     interface DOMAttributes<T> extends CustomAttributes<T> {
-        children?: Element;
+        children?: Element | Element[] | string | undefined | false;
         innerHTML?: string;
         innerText?: string;
         textContent?: string;
@@ -311,6 +312,8 @@ export declare namespace JSX {
         referrerPolicy?: HTMLReferrerPolicy;
     }
     interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+        loading?: string;
+        role?: string;
         alt?: string;
         crossorigin?: HTMLCrossorigin;
         decoding?: 'sync' | 'async' | 'auto';

package/dist/src/jsx-types.js

@@ -1,2 +1,10 @@
 "use strict";
+/**
+ * Based on JSX types for Solid, Inferno, Surplus, and React
+ *
+ * https://github.com/ryansolid/solid/blob/master/packages/solid/src/rendering/jsx.ts
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts
+ * https://github.com/infernojs/inferno/blob/master/packages/inferno/src/core/types.ts
+ * https://github.com/adamhaile/surplus/blob/master/index.d.ts
+ */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/targets.d.ts

@@ -15,7 +15,7 @@ export declare const targets: {
     react: (reactOptions?: import("./generators/react").ToReactOptions) => import(".").Transpiler;
     reactNative: (options?: import("./generators/react-native").ToReactNativeOptions) => import(".").Transpiler;
     solid: (options?: import("./generators/solid").ToSolidOptions) => import(".").Transpiler;
-    svelte: (options?: import("./generators/svelte").ToSvelteOptions) => import(".").Transpiler;
+    svelte: ({ plugins, ...options }?: import("./generators/svelte").ToSvelteOptions) => import(".").Transpiler;
     swift: (options?: import("./generators/swift-ui").ToSwiftOptions) => import(".").Transpiler;
     template: (options?: import("./generators/template").ToTemplateOptions) => import(".").Transpiler;
     webcomponent: (options?: import("./generators/html").ToHtmlOptions) => import(".").Transpiler;