@stencil/angular-output-target 0.6.1-dev.11662151255.17ea4066 → 0.6.1-dev.11664502361.139bc7c5

package/dist/generate-angular-component.js

@@ -41,8 +41,8 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
     const output = `@ProxyCmp({${proxyCmpOptions.join(',')}\n})
 @Component({
   selector: '${tagName}',
-  template: '<ng-content></ng-content>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [${formattedInputs}],
 })
@@ -105,20 +105,23 @@ const createDocComment = (doc) => {
  * @returns The component interface type definition as a string.
  */
 export const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
-    const typeDefinition = `${createComponentEventTypeImports(tagNameAsPascal, events, {
+    const publicEvents = events.filter((ev) => !ev.internal);
+    const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         includeImportCustomElements,
         customElementsDir,
-    })}
-
-export interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {
-${events
-        .map((event) => {
+    });
+    const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);
         return `${comment.length > 0 ? `  ${comment}` : ''}
   ${event.name}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
-    })
-        .join('\n')}
-}`;
+    });
+    const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
+    const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
+        `${interfaceDeclaration}${eventTypes.length === 0
+            ? '}'
+            : `
+${eventTypes.join('\n')}
+}`}`;
     return typeDefinition;
 };

package/dist/index.cjs.js

@@ -172,8 +172,8 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     const output = `@ProxyCmp({${proxyCmpOptions.join(',')}\n})
 @Component({
   selector: '${tagName}',
-  template: '<ng-content></ng-content>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [${formattedInputs}],
 })
@@ -236,21 +236,24 @@ const createDocComment = (doc) => {
  * @returns The component interface type definition as a string.
  */
 const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
-    const typeDefinition = `${createComponentEventTypeImports(tagNameAsPascal, events, {
+    const publicEvents = events.filter((ev) => !ev.internal);
+    const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         includeImportCustomElements,
         customElementsDir,
-    })}
-
-export interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {
-${events
-        .map((event) => {
+    });
+    const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);
         return `${comment.length > 0 ? `  ${comment}` : ''}
   ${event.name}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
-    })
-        .join('\n')}
-}`;
+    });
+    const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
+    const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
+        `${interfaceDeclaration}${eventTypes.length === 0
+            ? '}'
+            : `
+${eventTypes.join('\n')}
+}`}`;
     return typeDefinition;
 };
 
@@ -329,23 +332,6 @@ const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
 
-/**
- * Creates an Angular module declaration for a component wrapper.
- * @param componentTagName The tag name of the Stencil component.
- * @returns The Angular module declaration as a string.
- */
-const generateAngularModuleForComponent = (componentTagName) => {
-    const tagNameAsPascal = dashToPascalCase(componentTagName);
-    const componentClassName = `${tagNameAsPascal}`;
-    const moduleClassName = `${tagNameAsPascal}Module`;
-    const moduleDefinition = `@NgModule({
-  declarations: [${componentClassName}],
-  exports: [${componentClassName}]
-})
-export class ${moduleClassName} { }`;
-    return moduleDefinition;
-};
-
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -377,11 +363,9 @@ async function copyResources$1(config, outputTarget) {
     ], srcDirectory);
 }
 function generateProxies(components, pkgData, outputTarget, rootDir) {
-    var _a;
     const distTypesDir = path__default['default'].dirname(pkgData.types);
     const dtsFilePath = path__default['default'].join(rootDir, distTypesDir, GENERATED_DTS);
     const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
-    const createSingleComponentAngularModules = (_a = outputTarget.createSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
     /**
      * The collection of named imports from @angular/core.
      */
@@ -397,9 +381,6 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
-    if (createSingleComponentAngularModules) {
-        angularCoreImports.push('NgModule');
-    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -435,12 +416,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
-    if (createSingleComponentAngularModules) {
-        // Generating Angular modules is only supported in the dist-custom-elements build
-        if (!outputTarget.includeImportCustomElements) {
-            throw new Error('Generating single component Angular modules requires the "includeImportCustomElements" option to be set to true.');
-        }
-    }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     const mapPropName = (prop) => prop.name;
@@ -466,13 +441,12 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         /**
          * For each component, we need to generate:
          * 1. The @Component decorated class
-         * 2. Optionally the @NgModule decorated class (if createSingleComponentAngularModules is true)
-         * 3. The component interface (using declaration merging for types).
+         * 2. The component interface (using declaration merging for types).
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, includeImportCustomElements);
-        const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
-        proxyFileOutput.push(componentDefinition, '\n', createSingleComponentAngularModules ? moduleDefinition : '', '\n', componentTypeDefinition, '\n');
+        proxyFileOutput.push(componentDefinition, '\n');
+        proxyFileOutput.push(componentTypeDefinition, '\n');
     }
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
     return final.join('\n') + '\n';

package/dist/index.js

@@ -164,8 +164,8 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     const output = `@ProxyCmp({${proxyCmpOptions.join(',')}\n})
 @Component({
   selector: '${tagName}',
-  template: '<ng-content></ng-content>',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: [${formattedInputs}],
 })
@@ -228,21 +228,24 @@ const createDocComment = (doc) => {
  * @returns The component interface type definition as a string.
  */
 const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
-    const typeDefinition = `${createComponentEventTypeImports(tagNameAsPascal, events, {
+    const publicEvents = events.filter((ev) => !ev.internal);
+    const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         includeImportCustomElements,
         customElementsDir,
-    })}
-
-export interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {
-${events
-        .map((event) => {
+    });
+    const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);
         return `${comment.length > 0 ? `  ${comment}` : ''}
   ${event.name}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
-    })
-        .join('\n')}
-}`;
+    });
+    const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
+    const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
+        `${interfaceDeclaration}${eventTypes.length === 0
+            ? '}'
+            : `
+${eventTypes.join('\n')}
+}`}`;
     return typeDefinition;
 };
 
@@ -321,23 +324,6 @@ const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
 
-/**
- * Creates an Angular module declaration for a component wrapper.
- * @param componentTagName The tag name of the Stencil component.
- * @returns The Angular module declaration as a string.
- */
-const generateAngularModuleForComponent = (componentTagName) => {
-    const tagNameAsPascal = dashToPascalCase(componentTagName);
-    const componentClassName = `${tagNameAsPascal}`;
-    const moduleClassName = `${tagNameAsPascal}Module`;
-    const moduleDefinition = `@NgModule({
-  declarations: [${componentClassName}],
-  exports: [${componentClassName}]
-})
-export class ${moduleClassName} { }`;
-    return moduleDefinition;
-};
-
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -369,11 +355,9 @@ async function copyResources$1(config, outputTarget) {
     ], srcDirectory);
 }
 function generateProxies(components, pkgData, outputTarget, rootDir) {
-    var _a;
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
     const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
-    const createSingleComponentAngularModules = (_a = outputTarget.createSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
     /**
      * The collection of named imports from @angular/core.
      */
@@ -389,9 +373,6 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
-    if (createSingleComponentAngularModules) {
-        angularCoreImports.push('NgModule');
-    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -427,12 +408,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
-    if (createSingleComponentAngularModules) {
-        // Generating Angular modules is only supported in the dist-custom-elements build
-        if (!outputTarget.includeImportCustomElements) {
-            throw new Error('Generating single component Angular modules requires the "includeImportCustomElements" option to be set to true.');
-        }
-    }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     const mapPropName = (prop) => prop.name;
@@ -458,13 +433,12 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         /**
          * For each component, we need to generate:
          * 1. The @Component decorated class
-         * 2. Optionally the @NgModule decorated class (if createSingleComponentAngularModules is true)
-         * 3. The component interface (using declaration merging for types).
+         * 2. The component interface (using declaration merging for types).
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, includeImportCustomElements);
-        const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
-        proxyFileOutput.push(componentDefinition, '\n', createSingleComponentAngularModules ? moduleDefinition : '', '\n', componentTypeDefinition, '\n');
+        proxyFileOutput.push(componentDefinition, '\n');
+        proxyFileOutput.push(componentTypeDefinition, '\n');
     }
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
     return final.join('\n') + '\n';

package/dist/output-angular.js

@@ -3,7 +3,6 @@ import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCas
 import { createAngularComponentDefinition, createComponentTypeDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
-import { generateAngularModuleForComponent } from './generate-angular-modules';
 export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -35,11 +34,9 @@ async function copyResources(config, outputTarget) {
     ], srcDirectory);
 }
 export function generateProxies(components, pkgData, outputTarget, rootDir) {
-    var _a;
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
     const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
-    const createSingleComponentAngularModules = (_a = outputTarget.createSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
     /**
      * The collection of named imports from @angular/core.
      */
@@ -55,9 +52,6 @@ export function generateProxies(components, pkgData, outputTarget, rootDir) {
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
-    if (createSingleComponentAngularModules) {
-        angularCoreImports.push('NgModule');
-    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -93,12 +87,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
-    if (createSingleComponentAngularModules) {
-        // Generating Angular modules is only supported in the dist-custom-elements build
-        if (!outputTarget.includeImportCustomElements) {
-            throw new Error('Generating single component Angular modules requires the "includeImportCustomElements" option to be set to true.');
-        }
-    }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     const mapPropName = (prop) => prop.name;
@@ -124,13 +112,12 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         /**
          * For each component, we need to generate:
          * 1. The @Component decorated class
-         * 2. Optionally the @NgModule decorated class (if createSingleComponentAngularModules is true)
-         * 3. The component interface (using declaration merging for types).
+         * 2. The component interface (using declaration merging for types).
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, includeImportCustomElements);
-        const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
-        proxyFileOutput.push(componentDefinition, '\n', createSingleComponentAngularModules ? moduleDefinition : '', '\n', componentTypeDefinition, '\n');
+        proxyFileOutput.push(componentDefinition, '\n');
+        proxyFileOutput.push(componentTypeDefinition, '\n');
     }
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
     return final.join('\n') + '\n';

package/dist/types.d.ts

@@ -19,10 +19,6 @@ export interface OutputTargetAngular {
     excludeComponents?: string[];
     includeImportCustomElements?: boolean;
     customElementsDir?: string;
-    /**
-     * `true` to generate a single component Angular module for each component.
-     */
-    createSingleComponentAngularModules?: boolean;
 }
 export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
 export interface ValueAccessorConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.6.1-dev.11662151255.17ea4066",
+  "version": "0.6.1-dev.11664502361.139bc7c5",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -58,5 +58,5 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "7ea40666153180bc16a62602feba11b767d8e396"
+  "gitHead": "39bc7c5aab00038b7b440f51d510010f506a1c54"
 }

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

@@ -1,6 +0,0 @@
-/**
- * Creates an Angular module declaration for a component wrapper.
- * @param componentTagName The tag name of the Stencil component.
- * @returns The Angular module declaration as a string.
- */
-export declare const generateAngularModuleForComponent: (componentTagName: string) => string;

package/dist/generate-angular-modules.js

@@ -1,17 +0,0 @@
-import { dashToPascalCase } from './utils';
-/**
- * Creates an Angular module declaration for a component wrapper.
- * @param componentTagName The tag name of the Stencil component.
- * @returns The Angular module declaration as a string.
- */
-export const generateAngularModuleForComponent = (componentTagName) => {
-    const tagNameAsPascal = dashToPascalCase(componentTagName);
-    const componentClassName = `${tagNameAsPascal}`;
-    const moduleClassName = `${tagNameAsPascal}Module`;
-    const moduleDefinition = `@NgModule({
-  declarations: [${componentClassName}],
-  exports: [${componentClassName}]
-})
-export class ${moduleClassName} { }`;
-    return moduleDefinition;
-};