@baloise/angular-output-target 1.0.25 → 1.1.2

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.2](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.1.1...@baloise/angular-output-target@1.1.2) (2022-02-10)
+
+
+### Bug Fixes
+
+* **angular:** remove all component module ([dcf567d](https://github.com/baloise/stencil-ds-output-targets/commit/dcf567d597313a5b5bf1ec003ef9f7f25dd4bcad))
+
+
+
+
+
+## [1.1.1](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.1.0...@baloise/angular-output-target@1.1.1) (2022-01-31)
+
+
+### Bug Fixes
+
+* **angular:** add common module ([6387334](https://github.com/baloise/stencil-ds-output-targets/commit/63873341511fe0dfe9490fda06bb785df3fc1404))
+* **angular:** add common module ([10798bb](https://github.com/baloise/stencil-ds-output-targets/commit/10798bb22e435a87cf12d0ccd6d868ff0314f685))
+
+
+
+
+
+# [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)
+
+**Note:** Version bump only for package @baloise/angular-output-target
+
+
+
+
+
 ## [1.0.25](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.24...@baloise/angular-output-target@1.0.25) (2022-01-08)
 
 

package/dist/generate-angular-directives-file.js

@@ -6,8 +6,8 @@ export function generateAngularDirectivesFile(compilerCtx, components, outputTar
     }
     const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
-        .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
-        .map((className) => `d.${className}`)
+        .map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
+        .map(className => `d.${className}`)
         .join(',\n  ');
     const c = `
 import * as d from '${proxyPath}';

package/dist/generate-angular-module.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentCompilerMeta } from '@stencil/core/internal';
+import { ComponentGroup } from './types';
+export declare const createComponentModule: (groups?: {
+    [key: string]: ComponentGroup;
+}) => (cmpMeta: ComponentCompilerMeta) => string;

package/dist/generate-angular-module.js

@@ -0,0 +1,56 @@
+import { dashToPascalCase } from './utils';
+export 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(', ')}],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ${tagNameAsPascal}Module {
+  constructor() {
+${[`    define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
+  }
+}`;
+    return finalText;
+};

package/dist/index.cjs.js

@@ -15,7 +15,7 @@ const readFile = util.promisify(fs__default['default'].readFile);
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
 function sortBy(array, prop) {
     return array.slice().sort((a, b) => {
@@ -167,8 +167,8 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
     }
     const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
-        .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
-        .map((className) => `d.${className}`)
+        .map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
+        .map(className => `d.${className}`)
         .join(',\n  ');
     const c = `
 import * as d from '${proxyPath}';
@@ -235,6 +235,62 @@ const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
 
+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(', ')}],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ${tagNameAsPascal}Module {
+  constructor() {
+${[`    define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
+  }
+}`;
+    return finalText;
+};
+
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -248,7 +304,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
     ]);
 }
 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);
 }
 async function copyResources(config, outputTarget) {
     if (!config.sys || !config.sys.copy || !config.sys.glob) {
@@ -271,17 +327,19 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const imports = `/* tslint:disable */
 /* 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 { CommonModule } from '@angular/common';
 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
         ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
         : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
     const final = [
         imports,
         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'),
     ];
     return final.join('\n') + '\n';
 }

package/dist/index.js

@@ -6,7 +6,7 @@ const readFile = promisify(fs.readFile);
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
 function sortBy(array, prop) {
     return array.slice().sort((a, b) => {
@@ -158,8 +158,8 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
     }
     const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
-        .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
-        .map((className) => `d.${className}`)
+        .map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
+        .map(className => `d.${className}`)
         .join(',\n  ');
     const c = `
 import * as d from '${proxyPath}';
@@ -226,6 +226,62 @@ const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
 
+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(', ')}],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ${tagNameAsPascal}Module {
+  constructor() {
+${[`    define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
+  }
+}`;
+    return finalText;
+};
+
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -239,7 +295,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
     ]);
 }
 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);
 }
 async function copyResources(config, outputTarget) {
     if (!config.sys || !config.sys.copy || !config.sys.glob) {
@@ -262,17 +318,19 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const imports = `/* tslint:disable */
 /* 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 { CommonModule } from '@angular/common';
 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
         ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
         : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
     const final = [
         imports,
         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'),
     ];
     return final.join('\n') + '\n';
 }

package/dist/output-angular.js

@@ -1,8 +1,9 @@
 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) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -16,7 +17,7 @@ export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, com
     ]);
 }
 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);
 }
 async function copyResources(config, outputTarget) {
     if (!config.sys || !config.sys.copy || !config.sys.glob) {
@@ -39,17 +40,19 @@ export function generateProxies(components, pkgData, outputTarget, rootDir) {
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const imports = `/* tslint:disable */
 /* 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 { CommonModule } from '@angular/common';
 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
         ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
         : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
     const final = [
         imports,
         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'),
     ];
     return final.join('\n') + '\n';
 }

package/dist/types.d.ts

@@ -5,6 +5,18 @@ export interface OutputTargetAngular {
     directivesUtilsFile?: string;
     valueAccessorConfigs?: ValueAccessorConfig[];
     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';
 export interface ValueAccessorConfig {

package/dist/utils.js

@@ -5,7 +5,7 @@ const readFile = promisify(fs.readFile);
 export const toLowerCase = (str) => str.toLowerCase();
 export const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
-    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
 export function sortBy(array, prop) {
     return array.slice().sort((a, b) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baloise/angular-output-target",
-  "version": "1.0.25",
+  "version": "1.1.2",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -61,5 +61,5 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "762717adb5c9c21245ab20bde1590f02245e119b"
+  "gitHead": "63e87696a264d54d246ac3dcf6cd0fea41f6fb59"
 }