@builder.io/mitosis 0.0.56-42 → 0.0.56-46

package/dist/src/generators/angular.js

@@ -37,6 +37,7 @@ var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
 var remove_surrounding_block_1 = require("../helpers/remove-surrounding-block");
 var indent_1 = require("../helpers/indent");
 var slots_1 = require("../helpers/slots");
+var get_custom_imports_1 = require("../helpers/get-custom-imports");
 var mappers = {
     Fragment: function (json, options, blockOptions) {
         return "<div>".concat(json.children
@@ -141,7 +142,7 @@ var blockToAngular = function (json, options, blockOptions) {
                 contextVars: contextVars,
                 outputVars: outputVars,
                 domRefs: domRefs,
-            });
+            }).replace(/"/g, '&quot;');
             if (key.startsWith('on')) {
                 var event_1 = key.replace('on', '').toLowerCase();
                 if (event_1 === 'change' && json.name === 'input' /* todo: other tags */) {
@@ -165,10 +166,10 @@ var blockToAngular = function (json, options, blockOptions) {
                 needsToRenderSlots.push("".concat(useValue.replace(/(\/\>)|\>/, " ".concat(lowercaseKey, ">"))));
             }
             else if (BINDINGS_MAPPER[key]) {
-                str += " [".concat(BINDINGS_MAPPER[key], "]=\"").concat(useValue.replace(/"/g, "\\'"), "\"  ");
+                str += " [".concat(BINDINGS_MAPPER[key], "]=\"").concat(useValue, "\"  ");
             }
             else {
-                str += " [".concat(key, "]='").concat(useValue, "' ");
+                str += " [".concat(key, "]=\"").concat(useValue, "\" ");
             }
         }
         if (jsx_1.selfClosingTags.has(json.name)) {
@@ -207,6 +208,7 @@ var componentToAngular = function (options) {
                 }
             });
         });
+        var customImports = (0, get_custom_imports_1.getCustomImports)(json);
         var _q = component.exports, localExports = _q === void 0 ? {} : _q;
         var localExportVars = Object.keys(localExports)
             .filter(function (key) { return localExports[key].usedInLocal; })
@@ -283,12 +285,12 @@ 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\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    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  "])), 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.interfaces ? (_h = json.interfaces) === null || _h === void 0 ? void 0 : _h.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'angular' }), options.standalone
+        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.interfaces ? (_h = json.interfaces) === null || _h === void 0 ? void 0 : _h.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'angular' }), options.standalone
             ? // TODO: also add child component imports here as well
                 "\n        standalone: true,\n        imports: [CommonModule],\n      "
             : '', (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length
             ? "styles: [\n        `".concat((0, indent_1.indent)(css, 8), "`\n      ],")
-            : '', component.name, localExportVars.join('\n'), Array.from(props)
+            : '', component.name, localExportVars.join('\n'), customImports.map(function (name) { return "".concat(name, " = ").concat(name); }).join('\n'), Array.from(props)
             .filter(function (item) { return !(0, slots_1.isSlotProperty)(item) && item !== 'children'; })
             .map(function (item) {
             var propType = propsTypeRef ? "".concat(propsTypeRef, "[\"").concat(item, "\"]") : 'any';

package/dist/src/generators/vue.js

@@ -63,6 +63,7 @@ var process_http_requests_1 = require("../helpers/process-http-requests");
 var patterns_1 = require("../helpers/patterns");
 var method_literal_prefix_1 = require("../constants/method-literal-prefix");
 var function_1 = require("fp-ts/lib/function");
+var get_custom_imports_1 = require("../helpers/get-custom-imports");
 function encodeQuotes(string) {
     return string.replace(/"/g, '"');
 }
@@ -430,20 +431,13 @@ var componentToVue = function (userOptions) {
             functions: true,
             valueMapper: function (code) { return processBinding(code, options, component); },
         });
-        var blocksString = JSON.stringify(component.children);
         // Component references to include in `component: { YourComponent, ... }
         var componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(component))
             .filter(function (name) { return name.length && !name.includes('.') && name[0].toUpperCase() === name[0]; })
             // Strip out components that compile away
             .filter(function (name) { return !['For', 'Show', 'Fragment', component.name].includes(name); });
         // Append refs to data as { foo, bar, etc }
-        dataString = dataString.replace(/}$/, "".concat(component.imports
-            .map(function (thisImport) { return Object.keys(thisImport.imports).join(','); })
-            // Make sure actually used in template
-            .filter(function (key) { return Boolean(key && blocksString.includes(key)); })
-            // Don't include component imports
-            .filter(function (key) { return !componentsUsed.includes(key); })
-            .join(','), "}"));
+        dataString = dataString.replace(/}$/, "".concat((0, get_custom_imports_1.getCustomImports)(component).join(','), "}"));
         if (localVarAsData.length) {
             dataString = dataString.replace(/}$/, "".concat(localVarAsData.join(','), "}"));
         }

package/dist/src/helpers/get-custom-imports.d.ts

@@ -0,0 +1,15 @@
+import { MitosisComponent } from '../types/mitosis-component';
+/**
+ * Return custom imports of basic values (aka things
+ * that are not ClassCase like components and types)
+ *
+ * For for code like:
+ *   import { foo, bar } from './constants'
+ *
+ * Will return:
+ *   ['foo', 'bar' ]
+ *
+ * This also filters for strings that appears to be actually used
+ * by the template
+ */
+export declare function getCustomImports(json: MitosisComponent): string[];

package/dist/src/helpers/get-custom-imports.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCustomImports = void 0;
+var is_upper_case_1 = require("./is-upper-case");
+/**
+ * Return custom imports of basic values (aka things
+ * that are not ClassCase like components and types)
+ *
+ * For for code like:
+ *   import { foo, bar } from './constants'
+ *
+ * Will return:
+ *   ['foo', 'bar' ]
+ *
+ * This also filters for strings that appears to be actually used
+ * by the template
+ */
+function getCustomImports(json) {
+    var blocksString = JSON.stringify(json.children);
+    var customImports = json.imports
+        .map(function (item) {
+        return Object.keys(item.imports).filter(function (item) { return item && !(0, is_upper_case_1.isUpperCase)(item[0]); });
+    })
+        .flat()
+        // This is imperfect. Basically, if the string of this import name
+        // doesn't occur at all, it's definitely not used. If it does, it might.
+        // So this simple check helps us ~90% of the time not over-add imports
+        // to templates. Arguably "good enough" for now, as there is generally no 
+        // consequence to over adding here, and it would be a lot more performance expensive
+        // during compilation to do a complete AST parse and look for real references
+        .filter(function (item) { return blocksString.includes(item); });
+    return customImports;
+}
+exports.getCustomImports = getCustomImports;

package/dist/src/parsers/jsx.js

@@ -889,8 +889,7 @@ function parseJsx(jsx, options) {
                         for (var _i = 0, _a = path.node.specifiers; _i < _a.length; _i++) {
                             var specifier = _a[_i];
                             if (types.isImportSpecifier(specifier)) {
-                                importObject.imports[specifier.imported.name] =
-                                    specifier.local.name;
+                                importObject.imports[specifier.local.name] = specifier.imported.name;
                             }
                             else if (types.isImportDefaultSpecifier(specifier)) {
                                 importObject.imports[specifier.local.name] = 'default';