@builder.io/mitosis 0.5.16 → 0.5.17

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/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,7 @@ const processStateObjectSlice = (item) => {
                 type: 'function',
             };
         }
-        const n = (0, helpers_1.parseCode)({ ...item, returnType: null }).trim();
+        const n = getCleanedStateCode((0, helpers_1.parseCode)({ ...item, 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.17",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {