@stencil/angular-output-target - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

angular-component-lib/utils.ts

@@ -35,9 +35,24 @@ /* eslint-disable */
 
-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: { tagName: string, customElement?: any, inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { tagName, customElement, inputs, methods } = opts;
+
+    defineCustomElement(tagName, customElement);
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
     }
-    if (opts.methods) {
-      proxyMethods(cls, opts.methods);
+    if (methods) {
+      proxyMethods(cls, methods);
     }
@@ -44,0 +59,0 @@ return cls;

dist/generate-angular-component.d.ts

 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;

dist/generate-angular-component.js

@@ -1,3 +0,3 @@
-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
@@ -32,3 +32,8 @@ const inputs = [
                 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}';`);
             }
@@ -69,3 +74,3 @@ });
 
-${getProxyCmp(inputs, methods)}
+${getProxyCmp(cmpMeta.tagName, includeImportCustomElements, inputs, methods)}
 @Component({
@@ -87,9 +92,9 @@ ${directiveOpts.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 = [
+        `tagName: \'${tagName}\'`,
+        `customElement: ${includeCustomElement ? dashToPascalCase(tagName) + 'Cmp' : 'undefined'}`
+    ];
     if (hasInputs)
@@ -96,0 +101,0 @@ proxMeta.push(`inputs: ['${inputs.join(`', '`)}']`);

dist/index.cjs.js

@@ -6,4 +6,2 @@ 'use strict';
 var path = require('path');
-var util = require('util');
-var fs = require('fs');
 var os = require('os');
@@ -14,5 +12,3 @@
 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();
@@ -71,7 +67,8 @@ const dashToPascalCase = (str) => toLowerCase(str)
 }
-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')));
     }
@@ -94,3 +91,3 @@ catch (e) {
 
-const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
+const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
     // Collect component meta
@@ -125,3 +122,8 @@ const inputs = [
                 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}';`);
             }
@@ -162,3 +164,3 @@ });
 
-${getProxyCmp(inputs, methods)}
+${getProxyCmp(cmpMeta.tagName, includeImportCustomElements, inputs, methods)}
 @Component({
@@ -180,9 +182,9 @@ ${directiveOpts.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 = [
+        `tagName: \'${tagName}\'`,
+        `customElement: ${includeCustomElement ? dashToPascalCase(tagName) + 'Cmp' : 'undefined'}`
+    ];
     if (hasInputs)
@@ -276,3 +278,3 @@ proxMeta.push(`inputs: ['${inputs.join(`', '`)}']`);
     const rootDir = config.rootDir;
-    const pkgData = await readPackageJson(rootDir);
+    const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
@@ -312,10 +314,35 @@ await Promise.all([
 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 { ${pascalImport} as ${pascalImport}Cmp } 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'),
@@ -322,0 +349,0 @@ ];

dist/index.js

 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();
@@ -60,7 +57,8 @@ const dashToPascalCase = (str) => toLowerCase(str)
 }
-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')));
     }
@@ -83,3 +81,3 @@ catch (e) {
 
-const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
+const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
     // Collect component meta
@@ -114,3 +112,8 @@ const inputs = [
                 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}';`);
             }
@@ -151,3 +154,3 @@ });
 
-${getProxyCmp(inputs, methods)}
+${getProxyCmp(cmpMeta.tagName, includeImportCustomElements, inputs, methods)}
 @Component({
@@ -169,9 +172,9 @@ ${directiveOpts.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 = [
+        `tagName: \'${tagName}\'`,
+        `customElement: ${includeCustomElement ? dashToPascalCase(tagName) + 'Cmp' : 'undefined'}`
+    ];
     if (hasInputs)
@@ -265,3 +268,3 @@ proxMeta.push(`inputs: ['${inputs.join(`', '`)}']`);
     const rootDir = config.rootDir;
-    const pkgData = await readPackageJson(rootDir);
+    const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
@@ -301,10 +304,35 @@ await Promise.all([
 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 { ${pascalImport} as ${pascalImport}Cmp } 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'),
@@ -311,0 +339,0 @@ ];

dist/output-angular.js

 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';
@@ -9,3 +9,3 @@ import { generateAngularDirectivesFile } from './generate-angular-directives-file';
     const rootDir = config.rootDir;
-    const pkgData = await readPackageJson(rootDir);
+    const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
@@ -45,10 +45,35 @@ await Promise.all([
 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 { ${pascalImport} as ${pascalImport}Cmp } 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'),
@@ -55,0 +80,0 @@ ];

dist/types.d.ts

@@ -8,2 +8,4 @@ export interface OutputTargetAngular {
     excludeComponents?: string[];
+    includeImportCustomElements?: boolean;
+    customElementsDir?: string;
 }
@@ -10,0 +12,0 @@ export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';

dist/utils.d.ts

@@ -0,1 +1,2 @@
+import { Config } from '@stencil/core/internal';
 import type { PackageJSON } from './types';
@@ -8,2 +9,2 @@ export declare const toLowerCase: (str: 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>;

dist/utils.js

 import path from 'path';
-import { promisify } from 'util';
-import fs from 'fs';
-const readFile = promisify(fs.readFile);
 export const toLowerCase = (str) => str.toLowerCase();
@@ -61,7 +58,8 @@ export const dashToPascalCase = (str) => toLowerCase(str)
 }
-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')));
     }
@@ -68,0 +66,0 @@ catch (e) {

package.json

 {
   "name": "@stencil/angular-output-target",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Angular output target for @stencil/core components.",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64212

increased by11.85%

Lines of code

1355

increased by7.8%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes