diff --git a/packages/components/configs/angular/index.js b/packages/components/configs/angular/index.js new file mode 100644 index 00000000000..f6159ff78cd --- /dev/null +++ b/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}';`; + } +}; diff --git a/packages/components/mitosis-angular.config.js b/packages/components/configs/angular/mitosis.config.js similarity index 52% rename from packages/components/mitosis-angular.config.js rename to packages/components/configs/angular/mitosis.config.js index 3f4dcb9e36e..e371b49c2a8 100644 --- a/packages/components/mitosis-angular.config.js +++ b/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 } }; diff --git a/packages/components/mitosis.config.js b/packages/components/configs/mitosis.config.js similarity index 82% rename from packages/components/mitosis.config.js rename to packages/components/configs/mitosis.config.js index 7bd332c714a..c0aece7b89b 100644 --- a/packages/components/mitosis.config.js +++ b/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) { diff --git a/packages/components/configs/react/index.js b/packages/components/configs/react/index.js new file mode 100644 index 00000000000..de5613de9fd --- /dev/null +++ b/packages/components/configs/react/index.js @@ -0,0 +1,3 @@ +module.exports = { + typescript: true, +}; diff --git a/packages/components/mitosis-react.config.js b/packages/components/configs/react/mitosis.config.js similarity index 70% rename from packages/components/mitosis-react.config.js rename to packages/components/configs/react/mitosis.config.js index 84ab3f8c89c..7ff3310602d 100644 --- a/packages/components/mitosis-react.config.js +++ b/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 } }; diff --git a/packages/components/configs/vue/index.js b/packages/components/configs/vue/index.js new file mode 100644 index 00000000000..fcf5f165fc6 --- /dev/null +++ b/packages/components/configs/vue/index.js @@ -0,0 +1,3 @@ +module.exports = { + typescript: true +}; diff --git a/packages/components/mitosis-vue.config.js b/packages/components/configs/vue/mitosis.config.js similarity index 72% rename from packages/components/mitosis-vue.config.js rename to packages/components/configs/vue/mitosis.config.js index 172455c9f7f..d241682c665 100644 --- a/packages/components/mitosis-vue.config.js +++ b/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 } }; diff --git a/packages/components/package.json b/packages/components/package.json index a74d6b44730..8e8828bce4b 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/scripts/post-build/angular.ts b/packages/components/scripts/post-build/angular.ts index 53a7abfc996..96248eed87e 100644 --- a/packages/components/scripts/post-build/angular.ts +++ b/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);