@builder.io/mitosis 0.0.56-95 → 0.0.56-98

package/dist/src/__tests__/data/blocks/builder-render-block.raw.d.ts

@@ -0,0 +1,6 @@
+import { BuilderBlock } from '../types/builder-block';
+export declare type RenderBlockProps = {
+    block: BuilderBlock;
+    index: number;
+};
+export default function RenderBlock(props: RenderBlockProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/builder-render-block.raw.jsx

@@ -0,0 +1,90 @@
+"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 get_block_component_options_1 = require("../functions/get-block-component-options");
+var get_block_properties_1 = require("../functions/get-block-properties");
+var get_block_styles_1 = require("../functions/get-block-styles");
+var get_block_tag_1 = require("../functions/get-block-tag");
+var register_component_1 = require("../functions/register-component");
+var builder_context_lite_1 = __importDefault(require("../context/builder.context.lite"));
+var get_block_actions_1 = require("../functions/get-block-actions");
+var get_processed_block_1 = require("../functions/get-processed-block");
+var block_styles_lite_1 = __importDefault(require("./block-styles.lite"));
+function RenderBlock(props) {
+    var builderContext = (0, mitosis_1.useContext)(builder_context_lite_1.default);
+    var state = (0, mitosis_1.useStore)({
+        get component() {
+            var _a, _b;
+            var componentName = (_a = state.useBlock.component) === null || _a === void 0 ? void 0 : _a.name;
+            if (!componentName) {
+                return null;
+            }
+            var ref = register_component_1.components[(_b = state.useBlock.component) === null || _b === void 0 ? void 0 : _b.name];
+            if (componentName && !ref) {
+                // TODO: Public doc page with more info about this message
+                console.warn("\n          Could not find a registered component named \"".concat(componentName, "\".\n          If you registered it, is the file that registered it imported by the file that needs to render it?"));
+            }
+            return ref;
+        },
+        get componentInfo() {
+            var _a;
+            return (_a = state.component) === null || _a === void 0 ? void 0 : _a.info;
+        },
+        get componentRef() {
+            var _a;
+            return (_a = state.component) === null || _a === void 0 ? void 0 : _a.component;
+        },
+        get tagName() {
+            return (0, get_block_tag_1.getBlockTag)(state.useBlock);
+        },
+        get properties() {
+            return (0, get_block_properties_1.getBlockProperties)(state.useBlock);
+        },
+        get useBlock() {
+            return (0, get_processed_block_1.getProcessedBlock)({
+                block: props.block,
+                state: builderContext.state,
+                context: builderContext.context,
+            });
+        },
+        get actions() {
+            return (0, get_block_actions_1.getBlockActions)({
+                block: state.useBlock,
+                state: builderContext.state,
+                context: builderContext.context,
+            });
+        },
+        get css() {
+            return (0, get_block_styles_1.getBlockStyles)(state.useBlock);
+        },
+        get componentOptions() {
+            return (0, get_block_component_options_1.getBlockComponentOptions)(state.useBlock);
+        },
+    });
+    return (<>
+      {/* TODO: add the below back when support `else` */}
+      {/* <Show when={state.componentInfo?.noWrap}>
+          <state.componentRef
+            attributes={state.properties}
+            {...state.componentInfo?.options}
+            style={state.css}
+            children={state.useBlock.children}
+          />
+        </Show>
+        <Show when={!state.componentInfo?.noWrap}> */}
+      <state.tagName {...state.properties} style={state.css}>
+        <block_styles_lite_1.default block={state.useBlock}/>
+        {state.componentRef && (<state.componentRef {...state.componentOptions} children={state.useBlock.children}/>)}
+        <mitosis_1.Show when={!state.componentRef && state.useBlock.children && state.useBlock.children.length}>
+          <mitosis_1.For each={state.useBlock.children}>
+            {function (child, index) { return <RenderBlock index={index} block={child}/>; }}
+          </mitosis_1.For>
+        </mitosis_1.Show>
+      </state.tagName>
+      {/* </Show> */}
+    </>);
+}
+exports.default = RenderBlock;

package/dist/src/__tests__/data/blocks/builder-render-content.raw.d.ts

@@ -0,0 +1,10 @@
+import { BuilderContent, GetContentOptions } from '@builder.io/sdk';
+declare type RenderContentProps = {
+    model: string;
+    options?: GetContentOptions;
+    content?: BuilderContent;
+    children: any;
+    contentLoaded?: (content: BuilderContent) => void;
+};
+export declare function RenderContent(props: RenderContentProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderContent = void 0;
+var mitosis_1 = require("@builder.io/mitosis");
+var sdk_1 = require("@builder.io/sdk");
+var builder_render_block_raw_1 = __importDefault(require("./builder-render-block.raw"));
+function RenderContent(props) {
+    var content = props.content;
+    var state = (0, mitosis_1.useStore)({
+        get css() {
+            return '';
+        },
+        onWindowMessage: function (event) {
+            var _a;
+            var message = event.data;
+            if (!message) {
+                return;
+            }
+            switch (message.type) {
+                case 'builder.patchUpdates': {
+                    var data = message.data;
+                    if (!content) {
+                        return;
+                    }
+                    if (!(data && data.data)) {
+                        break;
+                    }
+                    var patches = data.data[(_a = content.data) === null || _a === void 0 ? void 0 : _a.id];
+                    if (!(patches && patches.length)) {
+                        return;
+                    }
+                    if (props.contentLoaded) {
+                        props.contentLoaded(content);
+                    }
+                    break;
+                }
+            }
+        },
+    });
+    (0, mitosis_1.onMount)(function () {
+        if (sdk_1.Builder.isEditing) {
+            addEventListener('message', state.onWindowMessage);
+        }
+    });
+    (0, mitosis_1.onUnMount)(function () {
+        if (sdk_1.Builder.isEditing) {
+            removeEventListener('message', state.onWindowMessage);
+        }
+    });
+    return (<>
+      <mitosis_1.Show when={!content}>{props.children}</mitosis_1.Show>
+      <mitosis_1.Show when={content}>
+        <div data-builder-model-name={props.model} data-builder-component={content.name} data-builder-content-id={content.id} data-builder-variation-id={content.testVariationId || content.id}>
+          <mitosis_1.Show when={state.css}>
+            <style innerHTML={state.css}/>¸
+          </mitosis_1.Show>
+          <mitosis_1.Show when={content.data.blocks}>
+            <mitosis_1.For each={content.data.blocks}>
+              {function (block, index) { return <builder_render_block_raw_1.default block={block} index={index}/>; }}
+            </mitosis_1.For>
+          </mitosis_1.Show>
+        </div>
+      </mitosis_1.Show>
+    </>);
+}
+exports.RenderContent = RenderContent;

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

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function Button(props) {
+    (0, mitosis_1.useDefaultProps)({
+        text: 'default text',
+        link: 'https://builder.io/',
+        openLinkInNewTab: false,
+    });
+    return (<>
+      <mitosis_1.Show when={props.link}>
+        <a {...props.attributes} href={props.link} target={props.openLinkInNewTab ? '_blank' : undefined}>
+          {props.text}
+        </a>
+      </mitosis_1.Show>
+      <mitosis_1.Show when={!props.link}>
+        <button {...props.attributes} type="button">
+          {props.text}
+        </button>
+      </mitosis_1.Show>
+    </>);
+}
+exports.default = Button;

package/dist/src/__tests__/data/types/component-with-default-values-types.raw.d.ts

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

package/dist/src/__tests__/data/types/component-with-default-values-types.raw.jsx

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var DEFAULT_VALUES = {
+    name: 'Sami',
+};
+function ComponentWithTypes(props) {
+    return <div> Hello {props.name || DEFAULT_VALUES.name}</div>;
+}
+exports.default = ComponentWithTypes;

package/dist/src/__tests__/shared.js

@@ -24,6 +24,7 @@ var propsType = require('./data/types/component-props-type.raw');
 var propsInterface = require('./data/types/component-props-interface.raw');
 var preserveTyping = require('./data/types/preserve-typing.raw');
 var typeDependency = require('./data/types/type-dependency.raw');
+var defaultProps = require('./data/default-props/default-props.raw');
 var classRaw = require('./data/styles/class.raw');
 var className = require('./data/styles/className.raw');
 var classAndClassName = require('./data/styles/class-and-className.raw');
@@ -88,8 +89,10 @@ var BASIC_TESTS = {
     onMount: onMount,
     propsType: propsType,
     propsInterface: propsInterface,
+    defaultProps: defaultProps,
     preserveTyping: preserveTyping,
     typeDependency: typeDependency,
+    defaultValsWithTypes: require('./data/types/component-with-default-values-types.raw'),
     subComponent: subComponent,
     nestedStyles: nestedStyles,
     propsDestructure: propsDestructure,

package/dist/src/constants/hooks.d.ts

@@ -3,4 +3,5 @@ export declare const HOOKS: {
     readonly STATE: "useState";
     readonly CONTEXT: "useContext";
     readonly REF: "useRef";
+    readonly DEFAULT_PROPS: "useDefaultProps";
 };

package/dist/src/constants/hooks.js

@@ -6,4 +6,5 @@ exports.HOOKS = {
     STATE: 'useState',
     CONTEXT: 'useContext',
     REF: 'useRef',
+    DEFAULT_PROPS: 'useDefaultProps',
 };

package/dist/src/generators/angular.js

@@ -18,6 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAngular = exports.blockToAngular = void 0;
 var dedent_1 = __importDefault(require("dedent"));
+var json5_1 = __importDefault(require("json5"));
 var standalone_1 = require("prettier/standalone");
 var collect_css_1 = require("../helpers/styles/collect-css");
 var fast_clone_1 = require("../helpers/fast-clone");
@@ -292,7 +293,7 @@ var componentToAngular = function (options) {
                 });
             },
         });
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " ", " Component ", "", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', !json.defaultProps ? '' : "const defaultProps = ".concat(json5_1.default.stringify(json.defaultProps), "\n"), (0, render_imports_1.renderPreComponent)({
             component: json,
             target: 'angular',
             excludeMitosisComponents: !options.standalone,
@@ -305,7 +306,11 @@ var componentToAngular = function (options) {
             .filter(function (item) { return !(0, slots_1.isSlotProperty)(item) && item !== 'children'; })
             .map(function (item) {
             var propType = propsTypeRef ? "".concat(propsTypeRef, "[\"").concat(item, "\"]") : 'any';
-            return "@Input() ".concat(item, ": ").concat(propType);
+            var propDeclaration = "@Input() ".concat(item, ": ").concat(propType);
+            if (json.defaultProps && json.defaultProps.hasOwnProperty(item)) {
+                propDeclaration += " = defaultProps[\"".concat(item, "\"]");
+            }
+            return propDeclaration;
         })
             .join('\n'), outputs.join('\n'), Array.from(domRefs)
             .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, ": ElementRef"); })

package/dist/src/generators/lit/generate.d.ts

@@ -1,4 +1,5 @@
 import { BaseTranspilerOptions, Transpiler } from '../../types/transpiler';
 export interface ToLitOptions extends BaseTranspilerOptions {
+    useShadowDom?: boolean;
 }
 export declare const componentToLit: (options?: ToLitOptions) => Transpiler;

package/dist/src/generators/lit/generate.js

@@ -175,9 +175,11 @@ var componentToLit = function (options) {
                 html = html.replace(/\n{3,}/g, '\n\n');
             }
         }
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      // Do not use Shadow DOM\n      createRenderRoot() {\n        return this;\n      }\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      // Do not use Shadow DOM\n      createRenderRoot() {\n        return this;\n      }\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html`\n          ", "\n        }\n          ", "\n        `\n      }\n    }\n  "], ["\n    ", "\n    import { LitElement, html, css } from 'lit';\n    import { customElement, property, state, query } from 'lit/decorators.js';\n\n    ", "\n    ", "\n\n    @customElement('", "')\n    export default class ", " extends LitElement {\n      ", "\n\n      ", "\n\n      ", "\n    \n  \n      ", "\n\n        ", "\n        ", "\n      \n        ", "\n        ", "\n        ", "\n    \n      render() {\n        return html\\`\n          ", "\n        }\n          ", "\n        \\`\n      }\n    }\n  "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
             ? "\n      const spread = (properties) =>\n        directive((part) => {\n          for (const property in properties) {\n            const value = properties[attr];\n            part.element[property] = value;\n          }\n        });\n    "
-            : '', ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || getCustomTagName(json.name, options), json.name, css.length
+            : '', ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || getCustomTagName(json.name, options), json.name, options.useShadowDom
+            ? ''
+            : "\n        createRenderRoot() {\n          return this;\n        }\n        ", options.useShadowDom && css.length
             ? "static styles = css`\n      ".concat((0, indent_1.indent)(css, 8), "`;")
             : '', Array.from(domRefs)
             .map(function (refName) { return "\n          @query('[ref=\"".concat(refName, "\"]')\n          ").concat((0, lodash_1.camelCase)(refName), "!: HTMLElement;\n          "); })
@@ -189,7 +191,7 @@ var componentToLit = function (options) {
             ? ''
             : "disconnectedCallback() { ".concat(processBinding(json.hooks.onUnMount.code), " }"), !((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
             ? ''
-            : "updated() { \n              ".concat(json.hooks.onUpdate.map(function (hook) { return processBinding(hook.code); }).join('\n\n'), " \n            }"), (0, indent_1.indent)(html, 8));
+            : "updated() { \n              ".concat(json.hooks.onUpdate.map(function (hook) { return processBinding(hook.code); }).join('\n\n'), " \n            }"), options.useShadowDom || !css.length ? '' : "<style>".concat(css, "</style>"), (0, indent_1.indent)(html, 8));
         if (options.plugins) {
             str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
         }

package/dist/src/generators/qwik/component-generator.js

@@ -18,6 +18,7 @@ var add_prevent_default_1 = require("./add-prevent-default");
 var convert_method_to_function_1 = require("./convert-method-to-function");
 var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
+var plugins_1 = require("../../modules/plugins");
 Error.stackTraceLimit = 9999;
 // TODO(misko): styles are not processed.
 var DEBUG = false;
@@ -28,7 +29,13 @@ var componentToQwik = function (userOptions) {
         var _component = _a.component, path = _a.path;
         // Make a copy we can safely mutate, similar to babel's toolchain
         var component = (0, fast_clone_1.fastClone)(_component);
+        if (userOptions.plugins) {
+            component = (0, plugins_1.runPreJsonPlugins)(component, userOptions.plugins);
+        }
         (0, add_prevent_default_1.addPreventDefault)(component);
+        if (userOptions.plugins) {
+            component = (0, plugins_1.runPostJsonPlugins)(component, userOptions.plugins);
+        }
         var file = new src_generator_1.File(component.name + '.js', {
             isPretty: true,
             isJSX: true,

package/dist/src/generators/qwik/convertMethodToFunction.d.ts

@@ -0,0 +1 @@
+export declare function convertMethodToFunction(code: string, methods: Record<string, 'method' | 'getter'>, lexicalArgs: string[]): string;

package/dist/src/generators/qwik/convertMethodToFunction.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertMethodToFunction = void 0;
+function convertMethodToFunction(code, methods, lexicalArgs) {
+    var out = [];
+    var idx = 0;
+    var lastIdx = idx;
+    var end = code.length;
+    var templateDepth = 0;
+    var mode = "code" /* Mode.code */;
+    var braceDepth = 0;
+    var stringEndBraceDepth = -1;
+    var stringEndBraceDepthQueue = [];
+    var lastCh = null;
+    while (idx < end) {
+        var ch = code.charCodeAt(idx++);
+        // console.log(mode, code[idx - 1]);
+        switch (mode) {
+            case "code" /* Mode.code */:
+                if (ch === QUOTE_DOUBLE) {
+                    mode = "stringDouble" /* Mode.stringDouble */;
+                }
+                else if (ch === QUOTE_SINGLE) {
+                    mode = "stringSingle" /* Mode.stringSingle */;
+                }
+                else if (ch === QUOTE_BACK_TICK) {
+                    mode = "stringTemplate" /* Mode.stringTemplate */;
+                    templateDepth++;
+                }
+                else if (ch === OPEN_BRACE) {
+                    braceDepth++;
+                }
+                else if (lastCh == FORWARD_SLASH && ch == FORWARD_SLASH) {
+                    mode = "commentSingleline" /* Mode.commentSingleline */;
+                }
+                else if (lastCh == FORWARD_SLASH && ch == STAR) {
+                    mode = "commentMultiline" /* Mode.commentMultiline */;
+                }
+                else if (ch === CLOSE_BRACE) {
+                    braceDepth--;
+                    if (braceDepth === stringEndBraceDepth) {
+                        stringEndBraceDepth = stringEndBraceDepthQueue.pop();
+                        templateDepth--;
+                        mode = "stringTemplate" /* Mode.stringTemplate */;
+                    }
+                }
+                else if (isWord(ch, code, idx, 'this') || isWord(ch, code, idx, 'state')) {
+                    idx--;
+                    flush();
+                    consumeIdent();
+                    if (code.charCodeAt(idx) == DOT) {
+                        idx++;
+                        var propEndIdx = findIdentEnd();
+                        var identifier = code.substring(idx, propEndIdx);
+                        if (identifier in methods) {
+                            var isGetter = code.charCodeAt(propEndIdx) !== OPEN_PAREN;
+                            lastIdx = idx = propEndIdx + (isGetter ? 0 : 1);
+                            if (isGetter) {
+                                out.push(identifier, "(".concat(lexicalArgs.join(','), ")"));
+                            }
+                            else {
+                                out.push(identifier, "(".concat(lexicalArgs.join(','), ","));
+                            }
+                        }
+                        else {
+                            flush();
+                        }
+                    }
+                }
+                break;
+            case "commentSingleline" /* Mode.commentSingleline */:
+                if (ch == EOL)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "commentMultiline" /* Mode.commentMultiline */:
+                if (lastCh == STAR && ch == FORWARD_SLASH)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringSingle" /* Mode.stringSingle */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_SINGLE)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringDouble" /* Mode.stringDouble */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_DOUBLE)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringTemplate" /* Mode.stringTemplate */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_BACK_TICK) {
+                    mode = "code" /* Mode.code */;
+                    templateDepth--;
+                }
+                else if (lastCh === DOLLAR && ch == OPEN_BRACE) {
+                    templateDepth++;
+                    mode = "code" /* Mode.code */;
+                    stringEndBraceDepthQueue.push(stringEndBraceDepth);
+                    stringEndBraceDepth = braceDepth;
+                    braceDepth++;
+                }
+                break;
+        }
+        lastCh = ch;
+    }
+    flush();
+    return out.join('');
+    function flush() {
+        out.push(code.substring(lastIdx, idx));
+        lastIdx = idx;
+    }
+    function findIdentEnd() {
+        var scanIdx = idx;
+        while (isIdentCh(code.charCodeAt(scanIdx)) && scanIdx < end) {
+            scanIdx++;
+        }
+        return scanIdx;
+    }
+    function consumeIdent() {
+        while (isIdentCh(code.charCodeAt(idx))) {
+            idx++;
+        }
+    }
+}
+exports.convertMethodToFunction = convertMethodToFunction;
+function isIdentCh(ch) {
+    return ((CHAR_0 <= ch && ch <= CHAR_9) ||
+        (CHAR_a <= ch && ch <= CHAR_z) ||
+        (CHAR_A <= ch && ch <= CHAR_Z) ||
+        ch === UNDERSCORE ||
+        ch === DOLLAR);
+}
+function isWord(ch, code, idx, word) {
+    if (ch !== word.charCodeAt(0))
+        return false;
+    for (var i = 1; i < word.length; i++) {
+        if (code.charCodeAt(idx + i - 1) !== word.charCodeAt(i)) {
+            return false;
+        }
+    }
+    if (isIdentCh(code.charCodeAt(idx + word.length - 1))) {
+        return false;
+    }
+    return true;
+}
+var QUOTE_DOUBLE = '"'.charCodeAt(0);
+var QUOTE_SINGLE = "'".charCodeAt(0);
+var QUOTE_BACK_TICK = '`'.charCodeAt(0);
+var BACKSLASH = "\\".charCodeAt(0);
+var FORWARD_SLASH = "/".charCodeAt(0);
+var EOL = "\n".charCodeAt(0);
+var STAR = "*".charCodeAt(0);
+var CHAR_0 = "0".charCodeAt(0);
+var CHAR_9 = "9".charCodeAt(0);
+var CHAR_a = "a".charCodeAt(0);
+var CHAR_z = "z".charCodeAt(0);
+var CHAR_A = "A".charCodeAt(0);
+var CHAR_Z = "Z".charCodeAt(0);
+var UNDERSCORE = "_".charCodeAt(0);
+var DOLLAR = "$".charCodeAt(0);
+var DOT = ".".charCodeAt(0);
+var OPEN_PAREN = '('.charCodeAt(0);
+var OPEN_BRACE = '{'.charCodeAt(0);
+var CLOSE_BRACE = '}'.charCodeAt(0);

package/dist/src/generators/react.js

@@ -499,11 +499,8 @@ var _componentToReact = function (json, options, isSubComponent) {
         isRootSpecialNode(json);
     var _o = getRefsString(json, allRefs, options), hasStateArgument = _o[0], refsString = _o[1];
     var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
-    var propsArgs = 'props';
-    if (json.propsTypeRef) {
-        propsArgs = "props: ".concat(json.propsTypeRef);
-    }
-    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n  "])), options.preact
+    var propsArgs = "props: ".concat(json.propsTypeRef || 'any');
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "function ", "(", "", ") {\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), options.preact
         ? "\n    /** @jsx h */\n    import { h, Fragment } from 'preact';\n    "
         : options.type !== 'native'
             ? "import * as React from 'react';"
@@ -533,7 +530,9 @@ var _componentToReact = function (json, options, isSubComponent) {
         ? "<style jsx>{`".concat(css, "`}</style>")
         : componentHasStyles && stylesType === 'style-tag'
             ? "<style>{`".concat(css, "`}</style>")
-            : '', wrap ? closeFrag(options) : '', isForwardRef ? ')' : '', !nativeStyles
+            : '', wrap ? closeFrag(options) : '', isForwardRef ? ')' : '', !json.defaultProps
+        ? ''
+        : "".concat(json.name || 'MyComponent', ".defaultProps = ").concat(json5_1.default.stringify(json.defaultProps), ";"), !nativeStyles
         ? ''
         : "\n      const styles = StyleSheet.create(".concat(json5_1.default.stringify(nativeStyles), ");\n    "), styledComponentsCode ? styledComponentsCode : '');
     str = (0, replace_new_lines_in_strings_1.stripNewlinesInStrings)(str);

package/dist/src/generators/svelte.js

@@ -66,6 +66,7 @@ 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 is_upper_case_1 = require("../helpers/is-upper-case");
+var json5_1 = __importDefault(require("json5"));
 var mappers = {
     Fragment: function (_a) {
         var _b;
@@ -350,6 +351,9 @@ var componentToSvelte = function (_a) {
             if (json.propsTypeRef && json.propsTypeRef !== 'any') {
                 propDeclaration += ": ".concat(json.propsTypeRef.split(' |')[0], "['").concat(name, "']");
             }
+            if (json.defaultProps && json.defaultProps.hasOwnProperty(name)) {
+                propDeclaration += "=".concat(json5_1.default.stringify(json.defaultProps[name]));
+            }
             propDeclaration += ';';
             return propDeclaration;
         })