@baloise/angular-output-target - npm Package Compare versions

Comparing version 1.0.26 to 1.1.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.1.0](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.26...@baloise/angular-output-target@1.1.0) (2022-01-31)
+
+
+### Features
+
+* **angular:** add modules for each component ([e6a5cd2](https://github.com/baloise/stencil-ds-output-targets/commit/e6a5cd209dd0d61a4bcbc8855fae965b0ff6f815))
+
+
+
+
+
 ## [1.0.26](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.25...@baloise/angular-output-target@1.0.26) (2022-01-24)
@@ -8,0 +19,0 @@

dist/generate-angular-directives-file.js

@@ -9,4 +9,4 @@ import { dashToPascalCase, relativeImport } from './utils';
     const directives = components
-        .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
-        .map((className) => `d.${className}`)
+        .map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
+        .map(className => `d.${className}`)
         .join(',\n  ');
@@ -13,0 +13,0 @@ const c = `

dist/index.cjs.js

@@ -18,3 +18,3 @@ 'use strict';
     .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
@@ -171,4 +171,4 @@ function sortBy(array, prop) {
     const directives = components
-        .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
-        .map((className) => `d.${className}`)
+        .map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
+        .map(className => `d.${className}`)
         .join(',\n  ');
@@ -240,2 +240,57 @@ const c = `
 
+const createComponentModule = (groups = {}) => (cmpMeta) => {
+    const isPrivate = Object.values(groups)
+        .flat()
+        .map(o => o.components)
+        .flat()
+        .some(tag => tag === cmpMeta.tagName);
+    if (isPrivate) {
+        return '';
+    }
+    const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+    let cmpImports = [];
+    let cmpDefines = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].components) {
+        const children = groups[cmpMeta.tagName].components;
+        if (children) {
+            cmpImports = children.map(tag => `${dashToPascalCase(tag)}`);
+            cmpDefines = children.map(tag => `     define${dashToPascalCase(tag)}();`);
+        }
+    }
+    let providers = [];
+    let providerImports = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].providers) {
+        const children = groups[cmpMeta.tagName].providers;
+        if (children) {
+            providerImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
+            providers = children.map(p => p.name);
+        }
+    }
+    let declarations = [];
+    let declarationImports = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].declarations) {
+        const children = groups[cmpMeta.tagName].declarations;
+        if (children) {
+            declarationImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
+            declarations = children.map(p => p.name);
+        }
+    }
+    const finalText = `
+${providerImports.join('\n  ')}
+${declarationImports.join('\n  ')}
+
+@NgModule({
+  declarations: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
+  exports: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
+  providers: [${providers.join(', ')}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ${tagNameAsPascal}Module {
+  constructor() {
+${[`    define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
+  }
+}`;
+    return finalText;
+};
+
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
@@ -246,4 +301,6 @@ const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
+    const allComponentModule = generateAllComponentModule(filteredComponents, outputTarget);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile.replace('.ts', '.module.ts'), allComponentModule),
         copyResources(config, outputTarget),
@@ -255,3 +312,3 @@ generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
 function getFilteredComponents(excludeComponents = [], cmps) {
-    return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
+    return sortBy(cmps, cmp => cmp.tagName).filter(c => !excludeComponents.includes(c.tagName) && !c.internal);
 }
@@ -273,2 +330,30 @@ async function copyResources(config, outputTarget) {
 }
+function generateAllComponentModule(components, outputTarget) {
+    const childComponent = Object.values(outputTarget.componentGroups || {})
+        .flat()
+        .map(o => o.components)
+        .flat();
+    const moduleImports = components
+        .map(c => c.tagName)
+        .filter(c => !childComponent.includes(c))
+        .map(c => `  ${dashToPascalCase(c)}Module,`);
+    return `/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import {
+${moduleImports.join('\n')}
+} from './proxies'
+
+const modules = [
+${moduleImports.join('\n')}
+]
+
+@NgModule({
+  imports: [...modules],
+  exports: [...modules],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class BalAllComponentModule {}
+  `;
+}
 function generateProxies(components, pkgData, outputTarget, rootDir) {
@@ -280,4 +365,5 @@ const distTypesDir = path__default['default'].dirname(pkgData.types);
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const componentImports = components.map(c => `import { defineCustomElement as define${dashToPascalCase(c.tagName)} } from '${normalizePath(outputTarget.componentCorePackage || '')}/dist/components/${c.tagName}';`);
     const typeImports = !outputTarget.componentCorePackage
@@ -289,5 +375,5 @@ ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
         typeImports,
-        components
-            .map(createComponentDefinition(outputTarget.componentCorePackage))
-            .join('\n'),
+        componentImports.join('\n'),
+        components.map(createComponentDefinition(outputTarget.componentCorePackage)).join('\n'),
+        components.map(createComponentModule(outputTarget.componentGroups)).join('\n'),
     ];
@@ -294,0 +380,0 @@ return final.join('\n') + '\n';

dist/index.js

@@ -9,3 +9,3 @@ import path from 'path';
     .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
@@ -162,4 +162,4 @@ function sortBy(array, prop) {
     const directives = components
-        .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
-        .map((className) => `d.${className}`)
+        .map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
+        .map(className => `d.${className}`)
         .join(',\n  ');
@@ -231,2 +231,57 @@ const c = `
 
+const createComponentModule = (groups = {}) => (cmpMeta) => {
+    const isPrivate = Object.values(groups)
+        .flat()
+        .map(o => o.components)
+        .flat()
+        .some(tag => tag === cmpMeta.tagName);
+    if (isPrivate) {
+        return '';
+    }
+    const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+    let cmpImports = [];
+    let cmpDefines = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].components) {
+        const children = groups[cmpMeta.tagName].components;
+        if (children) {
+            cmpImports = children.map(tag => `${dashToPascalCase(tag)}`);
+            cmpDefines = children.map(tag => `     define${dashToPascalCase(tag)}();`);
+        }
+    }
+    let providers = [];
+    let providerImports = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].providers) {
+        const children = groups[cmpMeta.tagName].providers;
+        if (children) {
+            providerImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
+            providers = children.map(p => p.name);
+        }
+    }
+    let declarations = [];
+    let declarationImports = [];
+    if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].declarations) {
+        const children = groups[cmpMeta.tagName].declarations;
+        if (children) {
+            declarationImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
+            declarations = children.map(p => p.name);
+        }
+    }
+    const finalText = `
+${providerImports.join('\n  ')}
+${declarationImports.join('\n  ')}
+
+@NgModule({
+  declarations: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
+  exports: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
+  providers: [${providers.join(', ')}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ${tagNameAsPascal}Module {
+  constructor() {
+${[`    define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
+  }
+}`;
+    return finalText;
+};
+
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
@@ -237,4 +292,6 @@ const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
+    const allComponentModule = generateAllComponentModule(filteredComponents, outputTarget);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile.replace('.ts', '.module.ts'), allComponentModule),
         copyResources(config, outputTarget),
@@ -246,3 +303,3 @@ generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
 function getFilteredComponents(excludeComponents = [], cmps) {
-    return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
+    return sortBy(cmps, cmp => cmp.tagName).filter(c => !excludeComponents.includes(c.tagName) && !c.internal);
 }
@@ -264,2 +321,30 @@ async function copyResources(config, outputTarget) {
 }
+function generateAllComponentModule(components, outputTarget) {
+    const childComponent = Object.values(outputTarget.componentGroups || {})
+        .flat()
+        .map(o => o.components)
+        .flat();
+    const moduleImports = components
+        .map(c => c.tagName)
+        .filter(c => !childComponent.includes(c))
+        .map(c => `  ${dashToPascalCase(c)}Module,`);
+    return `/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import {
+${moduleImports.join('\n')}
+} from './proxies'
+
+const modules = [
+${moduleImports.join('\n')}
+]
+
+@NgModule({
+  imports: [...modules],
+  exports: [...modules],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class BalAllComponentModule {}
+  `;
+}
 function generateProxies(components, pkgData, outputTarget, rootDir) {
@@ -271,4 +356,5 @@ const distTypesDir = path.dirname(pkgData.types);
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const componentImports = components.map(c => `import { defineCustomElement as define${dashToPascalCase(c.tagName)} } from '${normalizePath(outputTarget.componentCorePackage || '')}/dist/components/${c.tagName}';`);
     const typeImports = !outputTarget.componentCorePackage
@@ -280,5 +366,5 @@ ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
         typeImports,
-        components
-            .map(createComponentDefinition(outputTarget.componentCorePackage))
-            .join('\n'),
+        componentImports.join('\n'),
+        components.map(createComponentDefinition(outputTarget.componentCorePackage)).join('\n'),
+        components.map(createComponentModule(outputTarget.componentGroups)).join('\n'),
     ];
@@ -285,0 +371,0 @@ return final.join('\n') + '\n';

dist/output-angular.d.ts

 import type { CompilerCtx, ComponentCompilerMeta, Config } from '@stencil/core/internal';
 import type { OutputTargetAngular, PackageJSON } from './types';
 export declare function angularDirectiveProxyOutput(compilerCtx: CompilerCtx, outputTarget: OutputTargetAngular, components: ComponentCompilerMeta[], config: Config): Promise<void>;
+export declare function generateAllComponentModule(components: ComponentCompilerMeta[], outputTarget: OutputTargetAngular): string;
 export declare function generateProxies(components: ComponentCompilerMeta[], pkgData: PackageJSON, outputTarget: OutputTargetAngular, rootDir: string): string;

dist/output-angular.js

 import path from 'path';
-import { relativeImport, normalizePath, sortBy, readPackageJson } from './utils';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase } from './utils';
 import { createComponentDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
+import { createComponentModule } from './generate-angular-module';
 export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
@@ -11,4 +12,6 @@ const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
+    const allComponentModule = generateAllComponentModule(filteredComponents, outputTarget);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile.replace('.ts', '.module.ts'), allComponentModule),
         copyResources(config, outputTarget),
@@ -20,3 +23,3 @@ generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
 function getFilteredComponents(excludeComponents = [], cmps) {
-    return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
+    return sortBy(cmps, cmp => cmp.tagName).filter(c => !excludeComponents.includes(c.tagName) && !c.internal);
 }
@@ -38,2 +41,30 @@ async function copyResources(config, outputTarget) {
 }
+export function generateAllComponentModule(components, outputTarget) {
+    const childComponent = Object.values(outputTarget.componentGroups || {})
+        .flat()
+        .map(o => o.components)
+        .flat();
+    const moduleImports = components
+        .map(c => c.tagName)
+        .filter(c => !childComponent.includes(c))
+        .map(c => `  ${dashToPascalCase(c)}Module,`);
+    return `/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import {
+${moduleImports.join('\n')}
+} from './proxies'
+
+const modules = [
+${moduleImports.join('\n')}
+]
+
+@NgModule({
+  imports: [...modules],
+  exports: [...modules],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class BalAllComponentModule {}
+  `;
+}
 export function generateProxies(components, pkgData, outputTarget, rootDir) {
@@ -45,4 +76,5 @@ const distTypesDir = path.dirname(pkgData.types);
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const componentImports = components.map(c => `import { defineCustomElement as define${dashToPascalCase(c.tagName)} } from '${normalizePath(outputTarget.componentCorePackage || '')}/dist/components/${c.tagName}';`);
     const typeImports = !outputTarget.componentCorePackage
@@ -54,5 +86,5 @@ ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
         typeImports,
-        components
-            .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir))
-            .join('\n'),
+        componentImports.join('\n'),
+        components.map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir)).join('\n'),
+        components.map(createComponentModule(outputTarget.componentGroups)).join('\n'),
     ];
@@ -59,0 +91,0 @@ return final.join('\n') + '\n';

dist/types.d.ts

@@ -8,3 +8,15 @@ export interface OutputTargetAngular {
     excludeComponents?: string[];
+    componentGroups?: {
+        [key: string]: ComponentGroup;
+    };
 }
+export interface ComponentGroup {
+    components?: string[];
+    providers?: ComponentProvider[];
+    declarations?: ComponentProvider[];
+}
+export interface ComponentProvider {
+    import: string;
+    name: string;
+}
 export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
@@ -11,0 +23,0 @@ export interface ValueAccessorConfig {

dist/utils.js

@@ -8,3 +8,3 @@ import path from 'path';
     .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
@@ -11,0 +11,0 @@ export function sortBy(array, prop) {

package.json

 {
   "name": "@baloise/angular-output-target",
-  "version": "1.0.26",
+  "version": "1.1.0",
   "description": "Angular output target for @stencil/core components.",
@@ -64,3 +64,3 @@ "main": "dist/index.cjs.js",
   },
-  "gitHead": "8bb77d65c12764569a0e28d9fa00d1daeb28ba08"
+  "gitHead": "6074bb9ab1b327fafca6ad13c5bc07366f7d27f2"
 }

No alert changes

Improved metrics

Total package byte prevSize

79641

increased by16.32%

Number of package files

30

increased by7.14%

Lines of code

1433

increased by22.79%

No dependency changes