@builder.io/mitosis 0.5.16 → 0.5.18

package/dist/src/generators/angular/index.js

@@ -150,9 +150,6 @@ const processCodeBlockInTemplate = (code) => {
 const processEventBinding = (key, code, nodeName, customArg) => {
     let event = key.replace('on', '');
     event = event.charAt(0).toLowerCase() + event.slice(1);
-    if (event === 'change' && nodeName === 'input' /* todo: other tags */) {
-        event = 'input';
-    }
     // TODO: proper babel transform to replace. Util for this
     const eventName = customArg;
     const regexp = new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + eventName + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g');

package/dist/src/generators/html/generator.js

@@ -23,7 +23,6 @@ const has_component_1 = require("../../helpers/has-component");
 const has_props_1 = require("../../helpers/has-props");
 const has_stateful_dom_1 = require("../../helpers/has-stateful-dom");
 const is_children_1 = __importDefault(require("../../helpers/is-children"));
-const is_component_1 = require("../../helpers/is-component");
 const is_html_attribute_1 = require("../../helpers/is-html-attribute");
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const map_refs_1 = require("../../helpers/map-refs");
@@ -298,9 +297,6 @@ const blockToHtml = (json, options, blockOptions = {}) => {
             const useValue = value;
             if (key.startsWith('on')) {
                 let event = key.replace('on', '').toLowerCase();
-                if (!(0, is_component_1.isComponent)(json) && event === 'change') {
-                    event = 'input';
-                }
                 const fnName = (0, lodash_1.camelCase)(`on-${elId}-${event}`);
                 const codeContent = (0, remove_surrounding_block_1.removeSurroundingBlock)(updateReferencesInCode(useValue, options, blockOptions));
                 const asyncKeyword = ((_h = json.bindings[key]) === null || _h === void 0 ? void 0 : _h.async) ? 'async ' : '';

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

@@ -81,9 +81,8 @@ const blockToLit = (json, options = {}) => {
             str += ` ref="${code}" `;
         }
         else if (key.startsWith('on')) {
-            let useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
             const asyncKeyword = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.async) ? 'async ' : '';
-            useKey = '@' + useKey.substring(2).toLowerCase();
+            const useKey = '@' + key.substring(2).toLowerCase();
             str += ` ${useKey}=\${${asyncKeyword}(${cusArgs.join(',')}) => ${processBinding(code)}} `;
         }
         else {

package/dist/src/generators/react/blocks.js

@@ -57,10 +57,10 @@ const NODE_MAPPERS = {
         return `<>{${slotProp} ${hasChildren ? `|| (${renderChildren()})` : ''}}</>`;
     },
     Fragment(json, options, component) {
-        const wrap = (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
-        return `${wrap ? (0, helpers_1.getFragment)('open', options) : ''}${json.children
+        const wrap = (0, helpers_1.isFragmentWithKey)(json) || (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
+        return `${wrap ? (0, helpers_1.getFragment)('open', options, json) : ''}${json.children
             .map((item) => (0, exports.blockToReact)(item, options, component, wrap))
-            .join('\n')}${wrap ? (0, helpers_1.getFragment)('close', options) : ''}`;
+            .join('\n')}${wrap ? (0, helpers_1.getFragment)('close', options, json) : ''}`;
     },
     For(_json, options, component, insideJsx) {
         var _a;

package/dist/src/generators/react/helpers.d.ts

@@ -4,6 +4,7 @@ import { ToReactOptions } from './types';
 export declare const processBinding: (str: string, options: ToReactOptions) => string;
 export declare const openFrag: (options: ToReactOptions) => string;
 export declare const closeFrag: (options: ToReactOptions) => string;
-export declare function getFragment(type: 'open' | 'close', options: ToReactOptions): string;
+export declare const isFragmentWithKey: (node?: MitosisNode) => boolean;
+export declare function getFragment(type: 'open' | 'close', options: ToReactOptions, node?: MitosisNode): string;
 export declare const wrapInFragment: (json: MitosisComponent | MitosisNode) => boolean;
 export declare function processTagReferences(json: MitosisComponent, options: ToReactOptions): void;

package/dist/src/generators/react/helpers.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.processTagReferences = exports.wrapInFragment = exports.getFragment = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
+exports.processTagReferences = exports.wrapInFragment = exports.getFragment = exports.isFragmentWithKey = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 const lodash_1 = require("lodash");
@@ -23,9 +23,21 @@ const openFrag = (options) => getFragment('open', options);
 exports.openFrag = openFrag;
 const closeFrag = (options) => getFragment('close', options);
 exports.closeFrag = closeFrag;
-function getFragment(type, options) {
-    const tagName = options.preact ? 'Fragment' : '';
-    return type === 'open' ? `<${tagName}>` : `</${tagName}>`;
+const isFragmentWithKey = (node) => (node === null || node === void 0 ? void 0 : node.name) === 'Fragment' && !!(node === null || node === void 0 ? void 0 : node.bindings['key']);
+exports.isFragmentWithKey = isFragmentWithKey;
+function getFragment(type, options, node) {
+    var _a;
+    let tag = '';
+    if (node && node.bindings && (0, exports.isFragmentWithKey)(node)) {
+        tag = options.preact ? 'Fragment' : 'React.Fragment';
+        if (type === 'open') {
+            tag += ` key={${(_a = node.bindings['key']) === null || _a === void 0 ? void 0 : _a.code}}`;
+        }
+    }
+    else if (options.preact) {
+        tag = 'Fragment';
+    }
+    return type === 'open' ? `<${tag}>` : `</${tag}>`;
 }
 exports.getFragment = getFragment;
 const wrapInFragment = (json) => json.children.length !== 1;

package/dist/src/generators/solid/blocks.js

@@ -50,7 +50,8 @@ const blockToSolid = (json, component, options, insideJsx) => {
     </For>`;
     }
     let str = '';
-    if (json.name === 'Fragment') {
+    const isFragmentWithoutKey = json.name === 'Fragment' && !json.bindings.key;
+    if (isFragmentWithoutKey) {
         str += '<';
     }
     else {
@@ -121,7 +122,7 @@ const blockToSolid = (json, component, options, insideJsx) => {
             .map((item) => (0, exports.blockToSolid)(item, component, options, true))
             .join('\n');
     }
-    if (json.name === 'Fragment') {
+    if (isFragmentWithoutKey) {
         str += '</>';
     }
     else {

package/dist/src/generators/stencil/blocks.js

@@ -86,9 +86,8 @@ const blockToStencil = (json, options = {}, insideJsx, childComponents) => {
             str += ` ref={(el) => ${code.startsWith('this.') ? code : `this.${code}`} = el} `;
         }
         else if ((0, helpers_1.isEvent)(key)) {
-            const useKey = key === 'onChange' && blockName === 'input' ? 'onInput' : key;
             const asyncKeyword = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.async) ? 'async ' : '';
-            str += ` ${useKey}={${asyncKeyword}(${cusArgs.join(',')}) => ${code}} `;
+            str += ` ${key}={${asyncKeyword}(${cusArgs.join(',')}) => ${code}} `;
         }
         else {
             str += ` ${key}={${code}} `;

package/dist/src/generators/vue/compositionApi.js

@@ -42,7 +42,9 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         functions: false,
         getters: false,
         format: 'variables',
-        valueMapper: (code, _, typeParameter) => isTs && typeParameter ? `ref<${typeParameter}>(${code})` : `ref(${code})`,
+        valueMapper: (code, _, typeParameter) => {
+            return isTs && typeParameter ? `ref<${typeParameter}>(${code})` : `ref(${code})`;
+        },
         keyPrefix: 'const',
     });
     let methods = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
@@ -84,8 +86,10 @@ function generateCompositionApiScript(component, options, template, props, onUpd
     }).join('\n')}
 
     ${(_c = Object.keys(component.refs)) === null || _c === void 0 ? void 0 : _c.map((key) => {
+        var _a;
         if (isTs) {
-            return `const ${key} = ref<${component.refs[key].typeParameter}>()`;
+            const type = (_a = component.refs[key].typeParameter) !== null && _a !== void 0 ? _a : 'any';
+            return `const ${key} = ref<${type}>(null)`;
         }
         else {
             return `const ${key} = ref(null)`;

package/dist/src/generators/vue/helpers.js

@@ -88,12 +88,14 @@ const getAllRefs = (component) => {
     return allKeys;
 };
 function processRefs({ input, component, options, thisPrefix, }) {
-    const refs = options.api === 'options' ? getContextNames(component) : getAllRefs(component);
+    const { api } = options;
+    const refs = api === 'options' ? getContextNames(component) : getAllRefs(component);
     return (0, babel_transform_1.babelTransformExpression)(input, {
         Identifier(path) {
             const name = path.node.name;
-            if (refs.includes(name) && shouldAppendValueToRef(path)) {
-                const newValue = options.api === 'options' ? `${thisPrefix}.${name}` : `${name}.value`;
+            // Composition api should use .value all the time
+            if (refs.includes(name) && (api === 'composition' || shouldAppendValueToRef(path))) {
+                const newValue = api === 'options' ? `${thisPrefix}.${name}` : `${name}.value`;
                 path.replaceWith(core_1.types.identifier(newValue));
             }
         },

package/dist/src/generators/vue/vue.js

@@ -191,7 +191,7 @@ const componentToVue = (userOptions) => ({ component: _component, path }) => {
         (0, lodash_1.size)(getterKeys) && vueImports.push('computed');
         (0, lodash_1.size)(component.context.set) && vueImports.push('provide');
         (0, lodash_1.size)(component.context.get) && vueImports.push('inject');
-        (0, lodash_1.size)(Object.keys(component.state).filter((key) => { var _a; return ((_a = component.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; })) && vueImports.push('ref');
+        (0, lodash_1.size)(Object.keys(component.state).filter((key) => { var _a; return ((_a = component.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; })) + (0, lodash_1.size)(component.refs) && vueImports.push('ref');
         (0, lodash_1.size)(slotsProps) && vueImports.push('useSlots');
     }
     const tsLangAttribute = options.typescript ? `lang='ts'` : '';

package/dist/src/helpers/replace-identifiers.d.ts

@@ -5,6 +5,11 @@ type ReplaceArgs = {
     from: string | string[];
     to: ReplaceTo;
 };
+export type NodeMap = {
+    from: types.Node;
+    condition?: (path: babel.NodePath<types.Node>) => boolean;
+    to: types.Node;
+};
 /**
  * @deprecated Use `replaceNodes` instead.
  */
@@ -15,12 +20,8 @@ export declare const replacePropsIdentifier: (to: ReplaceArgs['to']) => (code: s
  * Replaces all instances of a Babel AST Node with a new Node within a code string.
  * Uses `generate()` to convert the Node to a string and compare them.
  */
-export declare const replaceNodes: ({ code, nodeMaps, }: {
+export declare const replaceNodes: ({ code, nodeMaps }: {
     code: string;
-    nodeMaps: {
-        from: types.Node;
-        condition?: ((path: babel.NodePath<types.Node>) => boolean) | undefined;
-        to: types.Node;
-    }[];
+    nodeMaps: NodeMap[];
 }) => string;
 export {};

package/dist/src/helpers/replace-identifiers.js

@@ -146,7 +146,7 @@ const isNewlyGenerated = (node) => { var _a; return (_a = node === null || node
  * Replaces all instances of a Babel AST Node with a new Node within a code string.
  * Uses `generate()` to convert the Node to a string and compare them.
  */
-const replaceNodes = ({ code, nodeMaps, }) => {
+const replaceNodes = ({ code, nodeMaps }) => {
     const searchAndReplace = (path) => {
         if (isNewlyGenerated(path.node) || isNewlyGenerated(path.parent))
             return;
@@ -173,6 +173,9 @@ const replaceNodes = ({ code, nodeMaps, }) => {
         }
     };
     return (0, babel_transform_1.babelTransformExpression)(code, {
+        ThisExpression(path) {
+            searchAndReplace(path);
+        },
         MemberExpression(path) {
             searchAndReplace(path);
         },

package/dist/src/parsers/jsx/state.js

@@ -8,6 +8,8 @@ const babel_transform_1 = require("../../helpers/babel-transform");
 const capitalize_1 = require("../../helpers/capitalize");
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const process_code_1 = require("../../helpers/plugins/process-code");
+const replace_identifiers_1 = require("../../helpers/replace-identifiers");
+const core_1 = require("@babel/core");
 const types_1 = require("@babel/types");
 const function_1 = require("fp-ts/lib/function");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
@@ -119,11 +121,26 @@ function mapStateIdentifiers(json) {
     });
 }
 exports.mapStateIdentifiers = mapStateIdentifiers;
+/**
+ * Replaces `this.` with `state.` and trims code
+ * @param code origin code
+ */
+const getCleanedStateCode = (code) => {
+    return (0, replace_identifiers_1.replaceNodes)({
+        code,
+        nodeMaps: [
+            {
+                from: core_1.types.thisExpression(),
+                to: core_1.types.identifier('state'),
+            },
+        ],
+    }).trim();
+};
 const processStateObjectSlice = (item) => {
     if ((0, types_1.isObjectProperty)(item)) {
         if ((0, types_1.isFunctionExpression)(item.value)) {
             return {
-                code: (0, helpers_1.parseCode)(item.value).trim(),
+                code: getCleanedStateCode((0, helpers_1.parseCode)(item.value)),
                 type: 'function',
             };
         }
@@ -147,7 +164,9 @@ const processStateObjectSlice = (item) => {
                 };
             }
             const n = (0, types_1.objectMethod)('method', item.key, item.value.params, item.value.body);
-            const code = (0, helpers_1.parseCode)(n).trim();
+            // Replace this. with state. to handle following
+            // const state = useStore({ _do: () => {this._active = !!id;}})
+            const code = getCleanedStateCode((0, helpers_1.parseCode)(n));
             return {
                 code: code,
                 type: 'method',
@@ -158,13 +177,13 @@ const processStateObjectSlice = (item) => {
             // { foo: ('string' as SomeType) }
             if ((0, types_1.isTSAsExpression)(item.value)) {
                 return {
-                    code: (0, helpers_1.parseCode)(item.value.expression).trim(),
+                    code: getCleanedStateCode((0, helpers_1.parseCode)(item.value.expression)),
                     type: 'property',
                     propertyType: 'normal',
                 };
             }
             return {
-                code: (0, helpers_1.parseCode)(item.value).trim(),
+                code: getCleanedStateCode((0, helpers_1.parseCode)(item.value)),
                 type: 'property',
                 propertyType: 'normal',
             };
@@ -179,7 +198,8 @@ const processStateObjectSlice = (item) => {
                 type: 'function',
             };
         }
-        const n = (0, helpers_1.parseCode)({ ...item, returnType: null }).trim();
+        const method = (0, types_1.objectMethod)(item.kind, item.key, item.params, item.body, false, false, item.async);
+        const n = getCleanedStateCode((0, helpers_1.parseCode)({ ...method, returnType: null }));
         const isGetter = item.kind === 'get';
         return {
             code: n,

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.16",
+  "version": "0.5.18",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {