@stencil/angular-output-target 0.5.0 → 0.6.0

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,9 +387,11 @@ 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;
     /**
      * The collection of named imports from @angular/core.
      */
@@ -388,6 +407,9 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
+    if (includeSingleComponentAngularModules) {
+        angularCoreImports.push('NgModule');
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -423,6 +445,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 +476,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 +520,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,9 +379,11 @@ 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;
     /**
      * The collection of named imports from @angular/core.
      */
@@ -380,6 +399,9 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
+    if (includeSingleComponentAngularModules) {
+        angularCoreImports.push('NgModule');
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -415,6 +437,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 +468,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 +512,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,9 +35,11 @@ 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;
     /**
      * The collection of named imports from @angular/core.
      */
@@ -52,6 +55,9 @@ export function generateProxies(components, pkgData, outputTarget, rootDir) {
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
+    if (includeSingleComponentAngularModules) {
+        angularCoreImports.push('NgModule');
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -87,6 +93,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 +124,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.6.0",
   "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": {