@stencil/angular-output-target 0.5.0 → 0.5.1-dev.11685564559.1b0b6e89

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

@@ -0,0 +1,6 @@
+/**
+ * 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

@@ -0,0 +1,17 @@
+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;
+};

package/dist/index.cjs.js

@@ -339,6 +339,23 @@ 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;
@@ -370,24 +387,30 @@ 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.directivesProxyFile, dtsFilePath, '.d.ts');
+    const includeSingleComponentAngularModules = (_a = outputTarget.includeSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
      */
-    const angularCoreImports = [
-        'ChangeDetectionStrategy',
-        'ChangeDetectorRef',
-        'Component',
-        'ElementRef',
-        'EventEmitter',
-        'NgZone',
-    ];
+    const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef'];
+    if (includeOutputImports) {
+        angularCoreImports.push('EventEmitter');
+    }
+    angularCoreImports.push('NgZone');
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
-    const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
+    const componentLibImports = ['ProxyCmp'];
+    if (includeOutputImports) {
+        componentLibImports.push('proxyOutputs');
+    }
+    if (includeSingleComponentAngularModules) {
+        angularCoreImports.push('NgModule');
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -423,6 +446,12 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
+    if (includeSingleComponentAngularModules) {
+        // 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;
@@ -448,11 +477,16 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         /**
          * For each component, we need to generate:
          * 1. The @Component decorated class
-         * 2. The component interface (using declaration merging for types).
+         * 2. Optionally the @NgModule decorated class (if includeSingleComponentAngularModules is true)
+         * 3. 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');
+        if (includeSingleComponentAngularModules) {
+            proxyFileOutput.push(moduleDefinition, '\n');
+        }
         proxyFileOutput.push(componentTypeDefinition, '\n');
     }
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
@@ -487,6 +521,9 @@ function normalizeOutputTarget(config, outputTarget) {
     if (outputTarget.directivesArrayFile && !path__default['default'].isAbsolute(outputTarget.directivesArrayFile)) {
         results.directivesArrayFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesArrayFile));
     }
+    if (outputTarget.includeSingleComponentAngularModules !== undefined) {
+        console.warn('**Experimental**: includeSingleComponentAngularModules is a developer preview feature and may change or be removed in the future.');
+    }
     return results;
 }
 

package/dist/index.js

@@ -331,6 +331,23 @@ 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;
@@ -362,24 +379,30 @@ 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.directivesProxyFile, dtsFilePath, '.d.ts');
+    const includeSingleComponentAngularModules = (_a = outputTarget.includeSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
      */
-    const angularCoreImports = [
-        'ChangeDetectionStrategy',
-        'ChangeDetectorRef',
-        'Component',
-        'ElementRef',
-        'EventEmitter',
-        'NgZone',
-    ];
+    const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef'];
+    if (includeOutputImports) {
+        angularCoreImports.push('EventEmitter');
+    }
+    angularCoreImports.push('NgZone');
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
-    const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
+    const componentLibImports = ['ProxyCmp'];
+    if (includeOutputImports) {
+        componentLibImports.push('proxyOutputs');
+    }
+    if (includeSingleComponentAngularModules) {
+        angularCoreImports.push('NgModule');
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -415,6 +438,12 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
+    if (includeSingleComponentAngularModules) {
+        // 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;
@@ -440,11 +469,16 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         /**
          * For each component, we need to generate:
          * 1. The @Component decorated class
-         * 2. The component interface (using declaration merging for types).
+         * 2. Optionally the @NgModule decorated class (if includeSingleComponentAngularModules is true)
+         * 3. 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');
+        if (includeSingleComponentAngularModules) {
+            proxyFileOutput.push(moduleDefinition, '\n');
+        }
         proxyFileOutput.push(componentTypeDefinition, '\n');
     }
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
@@ -479,6 +513,9 @@ function normalizeOutputTarget(config, outputTarget) {
     if (outputTarget.directivesArrayFile && !path.isAbsolute(outputTarget.directivesArrayFile)) {
         results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));
     }
+    if (outputTarget.includeSingleComponentAngularModules !== undefined) {
+        console.warn('**Experimental**: includeSingleComponentAngularModules is a developer preview feature and may change or be removed in the future.');
+    }
     return results;
 }
 

package/dist/output-angular.js

@@ -3,6 +3,7 @@ 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;
@@ -34,24 +35,30 @@ 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.directivesProxyFile, dtsFilePath, '.d.ts');
+    const includeSingleComponentAngularModules = (_a = outputTarget.includeSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
      */
-    const angularCoreImports = [
-        'ChangeDetectionStrategy',
-        'ChangeDetectorRef',
-        'Component',
-        'ElementRef',
-        'EventEmitter',
-        'NgZone',
-    ];
+    const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef'];
+    if (includeOutputImports) {
+        angularCoreImports.push('EventEmitter');
+    }
+    angularCoreImports.push('NgZone');
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
-    const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
+    const componentLibImports = ['ProxyCmp'];
+    if (includeOutputImports) {
+        componentLibImports.push('proxyOutputs');
+    }
+    if (includeSingleComponentAngularModules) {
+        angularCoreImports.push('NgModule');
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -87,6 +94,12 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
+    if (includeSingleComponentAngularModules) {
+        // 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;
@@ -112,11 +125,16 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         /**
          * For each component, we need to generate:
          * 1. The @Component decorated class
-         * 2. The component interface (using declaration merging for types).
+         * 2. Optionally the @NgModule decorated class (if includeSingleComponentAngularModules is true)
+         * 3. 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');
+        if (includeSingleComponentAngularModules) {
+            proxyFileOutput.push(moduleDefinition, '\n');
+        }
         proxyFileOutput.push(componentTypeDefinition, '\n');
     }
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];

package/dist/plugin.js

@@ -27,5 +27,8 @@ export function normalizeOutputTarget(config, outputTarget) {
     if (outputTarget.directivesArrayFile && !path.isAbsolute(outputTarget.directivesArrayFile)) {
         results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));
     }
+    if (outputTarget.includeSingleComponentAngularModules !== undefined) {
+        console.warn('**Experimental**: includeSingleComponentAngularModules is a developer preview feature and may change or be removed in the future.');
+    }
     return results;
 }

package/dist/types.d.ts

@@ -14,6 +14,12 @@ export interface OutputTargetAngular {
     excludeComponents?: string[];
     includeImportCustomElements?: boolean;
     customElementsDir?: string;
+    /**
+     * @experimental
+     *
+     * `true` to generate a single component Angular module for each component.
+     */
+    includeSingleComponentAngularModules?: 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.5.0",
+  "version": "0.5.1-dev.11685564559.1b0b6e89",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -42,7 +42,7 @@
     "@angular/forms": "8.2.14"
   },
   "peerDependencies": {
-    "@stencil/core": "^2.9.0 || ^3.0.0-beta.0"
+    "@stencil/core": "^2.9.0 || ^3.0.0"
   },
   "jest": {
     "transform": {
@@ -58,5 +58,8 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
+  "gitHead": "b0b6e898b94958cabecfa212c9a58c9e9ac4411e",
+  "volta": {
+    "extends": "../../package.json"
+  }
 }