@stencil/angular-output-target 0.2.1 → 0.4.0-2

package/angular-component-lib/utils.ts

@@ -32,13 +32,30 @@ export const proxyOutputs = (instance: any, el: any, events: string[]) => {
   events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
 }
 
-export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
-  const decorator = function(cls: any) {
-    if (opts.inputs) {
-      proxyInputs(cls, opts.inputs);
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (
+    customElement !== undefined &&
+    typeof customElements !== 'undefined' &&
+    !customElements.get(tagName)
+  ) {
+    customElements.define(tagName, customElement);
+  }
+}
+
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { defineCustomElementFn, inputs, methods } = opts;
+
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
+    }
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
     }
-    if (opts.methods) {
-      proxyMethods(cls, opts.methods);
+    if (methods) {
+      proxyMethods(cls, methods);
     }
     return cls;
   };

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

@@ -1,2 +1,2 @@
 import type { ComponentCompilerMeta } from '@stencil/core/internal';
-export declare const createComponentDefinition: (componentCorePackage: string, distTypesDir: string, rootDir: string) => (cmpMeta: ComponentCompilerMeta) => string;
+export declare const createComponentDefinition: (componentCorePackage: string, distTypesDir: string, rootDir: string, includeImportCustomElements?: boolean, customElementsDir?: string) => (cmpMeta: ComponentCompilerMeta) => string;

package/dist/generate-angular-component.js

@@ -1,5 +1,5 @@
-import { dashToPascalCase } from './utils';
-export const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
+import { dashToPascalCase, normalizePath } from './utils';
+export const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
     // Collect component meta
     const inputs = [
         ...cmpMeta.properties.filter((prop) => !prop.internal).map((prop) => prop.name),
@@ -29,7 +29,12 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
             const remappedReference = `I${cmpMeta.componentClassName}${reference}`;
             if (refObject.location === 'local' || refObject.location === 'import') {
                 outputReferenceRemap[reference] = remappedReference;
-                outputsInterface.add(`import { ${reference} as ${remappedReference} } from '${componentCorePackage}';`);
+                let importLocation = componentCorePackage;
+                if (componentCorePackage !== undefined) {
+                    const dirPath = includeImportCustomElements ? `/${customElementsDir || 'components'}` : '';
+                    importLocation = `${normalizePath(componentCorePackage)}${dirPath}`;
+                }
+                outputsInterface.add(`import type { ${reference} as ${remappedReference} } from '${importLocation}';`);
             }
         });
     });
@@ -65,7 +70,7 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
         `${[...outputsInterface].join('\n')}
 export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {${componentEvents.length > 1 ? componentEvents.join('\n') : ''}}
 
-${getProxyCmp(inputs, methods)}
+${getProxyCmp(cmpMeta.tagName, includeImportCustomElements, inputs, methods)}
 @Component({
   ${directiveOpts.join(',\n  ')}
 })
@@ -82,13 +87,12 @@ export class ${tagNameAsPascal} {`,
     lines.push(`}`);
     return lines.join('\n');
 };
-function getProxyCmp(inputs, methods) {
+function getProxyCmp(tagName, includeCustomElement, inputs, methods) {
     const hasInputs = inputs.length > 0;
     const hasMethods = methods.length > 0;
-    const proxMeta = [];
-    if (!hasInputs && !hasMethods) {
-        return '';
-    }
+    const proxMeta = [
+        `customElement: ${includeCustomElement ? 'define' + dashToPascalCase(tagName) : 'undefined'}`
+    ];
     if (hasInputs)
         proxMeta.push(`inputs: ['${inputs.join(`', '`)}']`);
     if (hasMethods)

package/dist/index.cjs.js

@@ -3,16 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var path = require('path');
-var util = require('util');
-var fs = require('fs');
 var os = require('os');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
-var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 
-const readFile = util.promisify(fs__default['default'].readFile);
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
@@ -66,11 +62,12 @@ function relativeImport(pathFrom, pathTo, ext) {
     }
     return normalizePath(`${relativePath}/${path__default['default'].basename(pathTo, ext)}`);
 }
-async function readPackageJson(rootDir) {
+async function readPackageJson(config, rootDir) {
+    var _a;
     const pkgJsonPath = path__default['default'].join(rootDir, 'package.json');
     let pkgJson;
     try {
-        pkgJson = await readFile(pkgJsonPath, 'utf8');
+        pkgJson = (await ((_a = config.sys) === null || _a === void 0 ? void 0 : _a.readFile(pkgJsonPath, 'utf8')));
     }
     catch (e) {
         throw new Error(`Missing "package.json" file for distribution: ${pkgJsonPath}`);
@@ -88,7 +85,7 @@ const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
 const NON_ASCII_REGEX = /[^\x00-\x80]+/;
 const SLASH_REGEX = /\\/g;
 
-const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
+const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
     // Collect component meta
     const inputs = [
         ...cmpMeta.properties.filter((prop) => !prop.internal).map((prop) => prop.name),
@@ -118,7 +115,12 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
             const remappedReference = `I${cmpMeta.componentClassName}${reference}`;
             if (refObject.location === 'local' || refObject.location === 'import') {
                 outputReferenceRemap[reference] = remappedReference;
-                outputsInterface.add(`import { ${reference} as ${remappedReference} } from '${componentCorePackage}';`);
+                let importLocation = componentCorePackage;
+                if (componentCorePackage !== undefined) {
+                    const dirPath = includeImportCustomElements ? `/${customElementsDir || 'components'}` : '';
+                    importLocation = `${normalizePath(componentCorePackage)}${dirPath}`;
+                }
+                outputsInterface.add(`import type { ${reference} as ${remappedReference} } from '${importLocation}';`);
             }
         });
     });
@@ -154,7 +156,7 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
         `${[...outputsInterface].join('\n')}
 export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {${componentEvents.length > 1 ? componentEvents.join('\n') : ''}}
 
-${getProxyCmp(inputs, methods)}
+${getProxyCmp(cmpMeta.tagName, includeImportCustomElements, inputs, methods)}
 @Component({
   ${directiveOpts.join(',\n  ')}
 })
@@ -171,13 +173,12 @@ export class ${tagNameAsPascal} {`,
     lines.push(`}`);
     return lines.join('\n');
 };
-function getProxyCmp(inputs, methods) {
+function getProxyCmp(tagName, includeCustomElement, inputs, methods) {
     const hasInputs = inputs.length > 0;
     const hasMethods = methods.length > 0;
-    const proxMeta = [];
-    if (!hasInputs && !hasMethods) {
-        return '';
-    }
+    const proxMeta = [
+        `customElement: ${includeCustomElement ? 'define' + dashToPascalCase(tagName) : 'undefined'}`
+    ];
     if (hasInputs)
         proxMeta.push(`inputs: ['${inputs.join(`', '`)}']`);
     if (hasMethods)
@@ -266,7 +267,7 @@ const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChan
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
-    const pkgData = await readPackageJson(rootDir);
+    const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
@@ -301,14 +302,39 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
 /* auto-generated angular directive proxies */
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
-    const typeImports = !outputTarget.componentCorePackage
-        ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
-        : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
+    /**
+     * Generate JSX import type from correct location.
+     * When using custom elements build, we need to import from
+     * either the "components" directory or customElementsDir
+     * otherwise we risk bundlers pulling in lazy loaded imports.
+     */
+    const generateTypeImports = () => {
+        let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
+        importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+        return `import ${outputTarget.includeImportCustomElements ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
+    };
+    const typeImports = generateTypeImports();
+    let sourceImports = '';
+    /**
+     * Build an array of Custom Elements build imports and namespace them
+     * so that they do not conflict with the React wrapper names. For example,
+     * IonButton would be imported as IonButtonCmp so as to not conflict with the
+     * IonButton React Component that takes in the Web Component as a parameter.
+     */
+    if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
+        const cmpImports = components.map(component => {
+            const pascalImport = dashToPascalCase(component.tagName);
+            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir ||
+                'components'}/${component.tagName}.js';`;
+        });
+        sourceImports = cmpImports.join('\n');
+    }
     const final = [
         imports,
         typeImports,
+        sourceImports,
         components
-            .map(createComponentDefinition(outputTarget.componentCorePackage))
+            .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
             .join('\n'),
     ];
     return final.join('\n') + '\n';

package/dist/index.js

@@ -1,9 +1,6 @@
 import path from 'path';
-import { promisify } from 'util';
-import fs from 'fs';
 import { EOL } from 'os';
 
-const readFile = promisify(fs.readFile);
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
@@ -57,11 +54,12 @@ function relativeImport(pathFrom, pathTo, ext) {
     }
     return normalizePath(`${relativePath}/${path.basename(pathTo, ext)}`);
 }
-async function readPackageJson(rootDir) {
+async function readPackageJson(config, rootDir) {
+    var _a;
     const pkgJsonPath = path.join(rootDir, 'package.json');
     let pkgJson;
     try {
-        pkgJson = await readFile(pkgJsonPath, 'utf8');
+        pkgJson = (await ((_a = config.sys) === null || _a === void 0 ? void 0 : _a.readFile(pkgJsonPath, 'utf8')));
     }
     catch (e) {
         throw new Error(`Missing "package.json" file for distribution: ${pkgJsonPath}`);
@@ -79,7 +77,7 @@ const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
 const NON_ASCII_REGEX = /[^\x00-\x80]+/;
 const SLASH_REGEX = /\\/g;
 
-const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
+const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
     // Collect component meta
     const inputs = [
         ...cmpMeta.properties.filter((prop) => !prop.internal).map((prop) => prop.name),
@@ -109,7 +107,12 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
             const remappedReference = `I${cmpMeta.componentClassName}${reference}`;
             if (refObject.location === 'local' || refObject.location === 'import') {
                 outputReferenceRemap[reference] = remappedReference;
-                outputsInterface.add(`import { ${reference} as ${remappedReference} } from '${componentCorePackage}';`);
+                let importLocation = componentCorePackage;
+                if (componentCorePackage !== undefined) {
+                    const dirPath = includeImportCustomElements ? `/${customElementsDir || 'components'}` : '';
+                    importLocation = `${normalizePath(componentCorePackage)}${dirPath}`;
+                }
+                outputsInterface.add(`import type { ${reference} as ${remappedReference} } from '${importLocation}';`);
             }
         });
     });
@@ -145,7 +148,7 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
         `${[...outputsInterface].join('\n')}
 export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {${componentEvents.length > 1 ? componentEvents.join('\n') : ''}}
 
-${getProxyCmp(inputs, methods)}
+${getProxyCmp(cmpMeta.tagName, includeImportCustomElements, inputs, methods)}
 @Component({
   ${directiveOpts.join(',\n  ')}
 })
@@ -162,13 +165,12 @@ export class ${tagNameAsPascal} {`,
     lines.push(`}`);
     return lines.join('\n');
 };
-function getProxyCmp(inputs, methods) {
+function getProxyCmp(tagName, includeCustomElement, inputs, methods) {
     const hasInputs = inputs.length > 0;
     const hasMethods = methods.length > 0;
-    const proxMeta = [];
-    if (!hasInputs && !hasMethods) {
-        return '';
-    }
+    const proxMeta = [
+        `customElement: ${includeCustomElement ? 'define' + dashToPascalCase(tagName) : 'undefined'}`
+    ];
     if (hasInputs)
         proxMeta.push(`inputs: ['${inputs.join(`', '`)}']`);
     if (hasMethods)
@@ -257,7 +259,7 @@ const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChan
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
-    const pkgData = await readPackageJson(rootDir);
+    const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
@@ -292,14 +294,39 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
 /* auto-generated angular directive proxies */
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
-    const typeImports = !outputTarget.componentCorePackage
-        ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
-        : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
+    /**
+     * Generate JSX import type from correct location.
+     * When using custom elements build, we need to import from
+     * either the "components" directory or customElementsDir
+     * otherwise we risk bundlers pulling in lazy loaded imports.
+     */
+    const generateTypeImports = () => {
+        let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
+        importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+        return `import ${outputTarget.includeImportCustomElements ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
+    };
+    const typeImports = generateTypeImports();
+    let sourceImports = '';
+    /**
+     * Build an array of Custom Elements build imports and namespace them
+     * so that they do not conflict with the React wrapper names. For example,
+     * IonButton would be imported as IonButtonCmp so as to not conflict with the
+     * IonButton React Component that takes in the Web Component as a parameter.
+     */
+    if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
+        const cmpImports = components.map(component => {
+            const pascalImport = dashToPascalCase(component.tagName);
+            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir ||
+                'components'}/${component.tagName}.js';`;
+        });
+        sourceImports = cmpImports.join('\n');
+    }
     const final = [
         imports,
         typeImports,
+        sourceImports,
         components
-            .map(createComponentDefinition(outputTarget.componentCorePackage))
+            .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
             .join('\n'),
     ];
     return final.join('\n') + '\n';

package/dist/output-angular.js

@@ -1,12 +1,12 @@
 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';
 export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
-    const pkgData = await readPackageJson(rootDir);
+    const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
     await Promise.all([
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
@@ -41,14 +41,39 @@ export function generateProxies(components, pkgData, outputTarget, rootDir) {
 /* auto-generated angular directive proxies */
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
-    const typeImports = !outputTarget.componentCorePackage
-        ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
-        : `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
+    /**
+     * Generate JSX import type from correct location.
+     * When using custom elements build, we need to import from
+     * either the "components" directory or customElementsDir
+     * otherwise we risk bundlers pulling in lazy loaded imports.
+     */
+    const generateTypeImports = () => {
+        let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
+        importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+        return `import ${outputTarget.includeImportCustomElements ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
+    };
+    const typeImports = generateTypeImports();
+    let sourceImports = '';
+    /**
+     * Build an array of Custom Elements build imports and namespace them
+     * so that they do not conflict with the React wrapper names. For example,
+     * IonButton would be imported as IonButtonCmp so as to not conflict with the
+     * IonButton React Component that takes in the Web Component as a parameter.
+     */
+    if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
+        const cmpImports = components.map(component => {
+            const pascalImport = dashToPascalCase(component.tagName);
+            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir ||
+                'components'}/${component.tagName}.js';`;
+        });
+        sourceImports = cmpImports.join('\n');
+    }
     const final = [
         imports,
         typeImports,
+        sourceImports,
         components
-            .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir))
+            .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
             .join('\n'),
     ];
     return final.join('\n') + '\n';

package/dist/types.d.ts

@@ -5,6 +5,8 @@ export interface OutputTargetAngular {
     directivesUtilsFile?: string;
     valueAccessorConfigs?: ValueAccessorConfig[];
     excludeComponents?: string[];
+    includeImportCustomElements?: boolean;
+    customElementsDir?: string;
 }
 export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
 export interface ValueAccessorConfig {

package/dist/utils.d.ts

@@ -1,3 +1,4 @@
+import { Config } from '@stencil/core/internal';
 import type { PackageJSON } from './types';
 export declare const toLowerCase: (str: string) => string;
 export declare const dashToPascalCase: (str: string) => string;
@@ -5,4 +6,4 @@ export declare function sortBy<T>(array: T[], prop: (item: T) => string): T[];
 export declare function normalizePath(str: string): string;
 export declare function relativeImport(pathFrom: string, pathTo: string, ext?: string): string;
 export declare function isRelativePath(path: string): boolean | "";
-export declare function readPackageJson(rootDir: string): Promise<PackageJSON>;
+export declare function readPackageJson(config: Config, rootDir: string): Promise<PackageJSON>;

package/dist/utils.js

@@ -1,7 +1,4 @@
 import path from 'path';
-import { promisify } from 'util';
-import fs from 'fs';
-const readFile = promisify(fs.readFile);
 export const toLowerCase = (str) => str.toLowerCase();
 export const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
@@ -58,11 +55,12 @@ export function relativeImport(pathFrom, pathTo, ext) {
 export function isRelativePath(path) {
     return path && path.startsWith('.');
 }
-export async function readPackageJson(rootDir) {
+export async function readPackageJson(config, rootDir) {
+    var _a;
     const pkgJsonPath = path.join(rootDir, 'package.json');
     let pkgJson;
     try {
-        pkgJson = await readFile(pkgJsonPath, 'utf8');
+        pkgJson = (await ((_a = config.sys) === null || _a === void 0 ? void 0 : _a.readFile(pkgJsonPath, 'utf8')));
     }
     catch (e) {
         throw new Error(`Missing "package.json" file for distribution: ${pkgJsonPath}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.2.1",
+  "version": "0.4.0-2",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -37,6 +37,9 @@
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14"
   },
+  "peerDependencies": {
+    "@stencil/core": "^2.9.0"
+  },
   "jest": {
     "transform": {
       "^.+\\.(js|ts|tsx)$": "<rootDir>/test/jest.preprocessor.js"