fix: issue for jetbrains ide not autocompleting angular components (#…

…3215)

packages/components/configs/angular/index.js

@@ -0,0 +1,14 @@
+module.exports = {
+	typescript: true,
+	standalone: true,
+	visuallyIgnoreHostElement: false,
+	importMapper: (component, theImport, importedValues, componentsUsed) => {
+		const { namedImports, defaultImport } = importedValues;
+		const { path } = theImport;
+		return namedImports
+			? `import ${namedImports} from '${path}';`
+			: componentsUsed.includes(defaultImport)
+				? `import { ${defaultImport} } from '${path}';`
+				: `import '${path}';`;
+	}
+};

packages/components/mitosis-angular.config.js → packages/components/configs/angular/mitosis.config.js

@@ -1,12 +1,10 @@
+const angular = require('./index');
+
 module.exports = {
 	files: 'src/**',
 	targets: ['angular'],
 	dest: '../../output/tmp',
 	options: {
-		angular: {
-			typescript: true,
-			standalone: true,
-			visuallyIgnoreHostElement: false
-		}
+		angular
 	}
 };

packages/components/mitosis.config.js → packages/components/configs/mitosis.config.js

@@ -1,19 +1,15 @@
+const angular = require('./angular');
+const react = require('./react');
+const vue = require('./vue');
+
 module.exports = {
 	files: 'src/**',
 	targets: ['angular', 'vue', 'webcomponent', 'react'],
 	dest: '../../output',
 	options: {
-		react: {
-			typescript: true
-		},
-		angular: {
-			typescript: true,
-			standalone: true,
-			visuallyIgnoreHostElement: false
-		},
-		vue: {
-			typescript: true
-		},
+		react,
+		angular,
+		vue,
 		webcomponent: {
 			experimental: {
 				attributeChangedCallback(test, json) {

packages/components/configs/react/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+	typescript: true,
+};

packages/components/mitosis-react.config.js → packages/components/configs/react/mitosis.config.js

@@ -1,10 +1,10 @@
+const react = require('./index');
+
 module.exports = {
 	files: 'src/**',
 	targets: ['react'],
 	dest: '../../output/tmp',
 	options: {
-		react: {
-			typescript: true
-		}
+		react
 	}
 };

packages/components/configs/vue/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+	typescript: true
+};

packages/components/mitosis-vue.config.js → packages/components/configs/vue/mitosis.config.js

@@ -1,10 +1,10 @@
+const vue = require('./index');
+
 module.exports = {
 	files: 'src/**',
 	targets: ['vue'],
 	dest: '../../output/tmp',
 	options: {
-		vue: {
-			typescript: true
-		}
+		vue
 	}
 };

packages/components/package.json

@@ -22,10 +22,10 @@
     "build-components:post": "tsx scripts/post-build/index.ts",
     "build-style:01_sass": "sass src:build --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ --future-deprecation=import",
     "build-style:02_postcss": "postcss build/**/*.css --replace",
-    "build:mitosis": "mitosis build",
-    "compile:angular": "mitosis build -c mitosis-angular.config.js && tsx scripts/exec/angular.ts && cpr ../../output/tmp/angular/src ../../output/angular/src -o",
-    "compile:react": "mitosis build -c mitosis-react.config.js && tsx scripts/exec/react.ts && cpr ../../output/tmp/react/src ../../output/react/src -o",
-    "compile:vue": "mitosis build -c mitosis-vue.config.js && tsx scripts/exec/vue.ts && cpr ../../output/tmp/vue/src ../../output/vue/src -o",
+    "build:mitosis": "mitosis build -c configs/mitosis.config.js",
+    "compile:angular": "mitosis build -c configs/angular/mitosis.config.js && tsx scripts/exec/angular.ts && cpr ../../output/tmp/angular/src ../../output/angular/src -o",
+    "compile:react": "mitosis build -c configs/react/mitosis.config.js && tsx scripts/exec/react.ts && cpr ../../output/tmp/react/src ../../output/react/src -o",
+    "compile:vue": "mitosis build -c configs/vue/mitosis.config.js && tsx scripts/exec/vue.ts && cpr ../../output/tmp/vue/src ../../output/vue/src -o",
     "copy-assets": "cpr ../foundations/assets build/assets -o",
     "copy-output": "npm-run-all copy:*",
     "copy:outputs": "cpr build ../../build-outputs/components/build -o",

packages/components/scripts/post-build/angular.ts

@@ -16,6 +16,10 @@ const changeFile = (input: string) => {
 				!line.includes(`[key]=`)
 		)
 		.map((line) => {
+			if (line.includes('export default')) {
+				return line.replace('export default', 'export');
+			}
+
 			if (line.includes(': ElementRef')) {
 				return line.replace(': ElementRef', ': ElementRef | undefined');
 			}
@@ -68,8 +72,8 @@ const setControlValueAccessorReplacements = (
 
 	// implementing interface and constructor
 	replacements.push({
-		from: `export default class ${upperComponentName} {`,
-		to: `export default class ${upperComponentName} implements ControlValueAccessor {
+		from: `export class ${upperComponentName} {`,
+		to: `export class ${upperComponentName} implements ControlValueAccessor {
 		constructor(private renderer: Renderer2) { }`
 	});
 
@@ -130,9 +134,9 @@ const setDirectiveReplacements = (
 		}
 
 		replacements.push({
-			from: `export default class ${upperComponentName} {\n`,
+			from: `export class ${upperComponentName} {\n`,
 			to:
-				`export default class ${upperComponentName} {\n` +
+				`export class ${upperComponentName} {\n` +
 				`\t@ContentChild(${directive.name}Directive, { read: TemplateRef }) db${directive.name}: any;\n`
 		});
 
@@ -207,10 +211,13 @@ export default (tmp?: boolean) => {
 		const componentName = component.name;
 		const upperComponentName = `DB${transformToUpperComponentName(component.name)}`;
 		const file = `../../${outputFolder}/angular/src/components/${componentName}/${componentName}.ts`;
-		const options = {
-			files: file,
-			processor: (input: string) => changeFile(input)
-		};
+		const indexFile = `../../${outputFolder}/angular/src/components/${componentName}/index.ts`;
+
+		replaceInFileSync({
+			files: indexFile,
+			from: 'default as ',
+			to: ''
+		});
 
 		const replacements: Overwrite[] = [
 			{
@@ -273,7 +280,10 @@ export default (tmp?: boolean) => {
 		}
 
 		try {
-			replaceInFileSync(options);
+			replaceInFileSync({
+				files: file,
+				processor: (input: string) => changeFile(input)
+			});
 			runReplacements(replacements, component, 'angular', file);
 		} catch (error) {
 			console.error('Error occurred:', error);