@builder.io/mitosis 0.0.56-50 → 0.0.56-53

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

@@ -4,4 +4,7 @@ var angular_1 = require("../generators/angular");
 var shared_1 = require("./shared");
 describe('Angular', function () {
     (0, shared_1.runTestsForTarget)('angular', (0, angular_1.componentToAngular)());
+    (0, shared_1.runTestsForTarget)('angular', (0, angular_1.componentToAngular)({
+        standalone: true,
+    }));
 });

package/dist/src/generators/angular.js

@@ -40,6 +40,7 @@ var slots_1 = require("../helpers/slots");
 var get_custom_imports_1 = require("../helpers/get-custom-imports");
 var get_components_used_1 = require("../helpers/get-components-used");
 var is_upper_case_1 = require("../helpers/is-upper-case");
+var BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment']);
 var mappers = {
     Fragment: function (json, options, blockOptions) {
         return "<div>".concat(json.children
@@ -251,9 +252,7 @@ var componentToAngular = function (options) {
         var domRefs = (0, get_refs_1.getRefs)(json);
         var jsRefs = Object.keys(json.refs).filter(function (ref) { return !domRefs.has(ref); });
         var stateVars = Object.keys((json === null || json === void 0 ? void 0 : json.state) || {});
-        var componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(json)).filter(function (item) {
-            return (0, is_upper_case_1.isUpperCase)(item[0]);
-        });
+        var componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(json)).filter(function (item) { return item.length && (0, is_upper_case_1.isUpperCase)(item[0]) && !BUILT_IN_COMPONENTS.has(item); });
         (0, map_refs_1.mapRefs)(json, function (refName) {
             var isDomRef = domRefs.has(refName);
             return "this.".concat(isDomRef ? '' : '_').concat(refName).concat(isDomRef ? '.nativeElement' : '');
@@ -290,7 +289,11 @@ 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  "], ["\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
+        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',
+            excludeMitosisComponents: !options.standalone,
+        }), options.standalone
             ? // TODO: also add child component imports here as well
                 "\n        standalone: true,\n        imports: [CommonModule".concat(componentsUsed.length ? ", ".concat(componentsUsed.join(', ')) : '', "],\n      ")
             : '', (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length

package/dist/src/helpers/render-imports.d.ts

@@ -5,14 +5,16 @@ export declare const renderImport: ({ theImport, target, asyncComponentImports,
     target: Target;
     asyncComponentImports: boolean;
 }) => string;
-export declare const renderImports: ({ imports, target, asyncComponentImports, }: {
+export declare const renderImports: ({ imports, target, asyncComponentImports, excludeMitosisComponents, }: {
     imports: MitosisImport[];
     target: Target;
     asyncComponentImports: boolean;
+    excludeMitosisComponents?: boolean | undefined;
 }) => string;
-export declare const renderPreComponent: ({ component, target, asyncComponentImports, }: {
+export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, }: {
     component: MitosisComponent;
     target: Target;
     asyncComponentImports?: boolean | undefined;
+    excludeMitosisComponents?: boolean | undefined;
 }) => string;
 export declare const renderExportAndLocal: (component: MitosisComponent) => string;

package/dist/src/helpers/render-imports.js

@@ -33,6 +33,8 @@ var getFileExtensionForTarget = function (target) {
         case 'vue2':
         case 'vue3':
             return '.vue';
+        case 'angular':
+            return '';
         // these `.lite` extensions are handled in the `transpile` step of the CLI.
         // TO-DO: consolidate file-extension renaming to one place.
         default:
@@ -106,7 +108,7 @@ var renderImport = function (_a) {
 };
 exports.renderImport = renderImport;
 var renderImports = function (_a) {
-    var imports = _a.imports, target = _a.target, asyncComponentImports = _a.asyncComponentImports;
+    var imports = _a.imports, target = _a.target, asyncComponentImports = _a.asyncComponentImports, excludeMitosisComponents = _a.excludeMitosisComponents;
     return imports
         .filter(function (theImport) {
         if (
@@ -116,7 +118,7 @@ var renderImports = function (_a) {
             theImport.path.startsWith('@builder.io/mitosis')) {
             return false;
         }
-        else if (target === 'angular' && theImport.path.includes('.lite')) {
+        else if (excludeMitosisComponents && theImport.path.includes('.lite')) {
             return false;
         }
         else {
@@ -128,11 +130,12 @@ var renderImports = function (_a) {
 };
 exports.renderImports = renderImports;
 var renderPreComponent = function (_a) {
-    var component = _a.component, target = _a.target, _b = _a.asyncComponentImports, asyncComponentImports = _b === void 0 ? false : _b;
+    var component = _a.component, target = _a.target, excludeMitosisComponents = _a.excludeMitosisComponents, _b = _a.asyncComponentImports, asyncComponentImports = _b === void 0 ? false : _b;
     return "\n    ".concat((0, exports.renderImports)({
         imports: component.imports,
         target: target,
         asyncComponentImports: asyncComponentImports,
+        excludeMitosisComponents: excludeMitosisComponents,
     }), "\n    ").concat((0, exports.renderExportAndLocal)(component), "\n    ").concat(component.hooks.preComponent || '', "\n  ");
 };
 exports.renderPreComponent = renderPreComponent;