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

Comparing version 0.7.1 to 0.8.1-dev.11690825475.1243803f

dist/generate-angular-component.d.ts

@@ -10,5 +10,6 @@ import type { ComponentCompilerEvent } from '@stencil/core/internal';
  * @param includeImportCustomElements Whether to define the component as a custom element.
+ * @param standalone Whether to define the component as a standalone component.
  * @returns The component declaration as a string.
  */
-export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly string[], outputs: readonly string[], methods: readonly string[], includeImportCustomElements?: boolean) => string;
+export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly string[], outputs: readonly string[], methods: readonly string[], includeImportCustomElements?: boolean, standalone?: boolean) => string;
 /**
@@ -19,6 +20,5 @@ * Creates the component interface type definition.
  * @param componentCorePackage The component core package.
- * @param includeImportCustomElements Whether to include the import for the custom element definition.
  * @param customElementsDir The custom elements directory.
  * @returns The component interface type definition as a string.
  */
-export declare const createComponentTypeDefinition: (tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, includeImportCustomElements?: boolean, customElementsDir?: string | undefined) => string;
+export declare const createComponentTypeDefinition: (tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, customElementsDir?: string | undefined) => string;

dist/generate-angular-component.js

@@ -10,5 +10,6 @@ import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList } from './utils';
  * @param includeImportCustomElements Whether to define the component as a custom element.
+ * @param standalone Whether to define the component as a standalone component.
  * @returns The component declaration as a string.
  */
-export const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false) => {
+export const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false) => {
     const tagNameAsPascal = dashToPascalCase(tagName);
@@ -35,2 +36,6 @@ const hasInputs = inputs.length > 0;
     }
+    let standaloneOption = '';
+    if (standalone && includeImportCustomElements) {
+        standaloneOption = `\n  standalone: true`;
+    }
     /**
@@ -49,3 +54,3 @@ * Notes on the generated output:
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],
+  inputs: [${formattedInputs}],${standaloneOption}
 })
@@ -107,11 +112,9 @@ export class ${tagNameAsPascal} {
  * @param componentCorePackage The component core package.
- * @param includeImportCustomElements Whether to include the import for the custom element definition.
  * @param customElementsDir The custom elements directory.
  * @returns The component interface type definition as a string.
  */
-export const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
+export const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
-        includeImportCustomElements,
         customElementsDir,
@@ -118,0 +121,0 @@ });

dist/index.cjs.js

@@ -111,6 +111,7 @@ 'use strict';
 const createComponentEventTypeImports = (componentTagName, events, options) => {
-    const { componentCorePackage, includeImportCustomElements, customElementsDir } = options;
+    const { componentCorePackage, customElementsDir } = options;
     const imports = [];
     const namedImports = new Set();
-    const importPathName = normalizePath(componentCorePackage) + (includeImportCustomElements ? `/${customElementsDir || 'components'}` : '');
+    const isCustomElementsBuild = customElementsDir !== undefined;
+    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     events.forEach((event) => {
@@ -142,5 +143,6 @@ Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
  * @param includeImportCustomElements Whether to define the component as a custom element.
+ * @param standalone Whether to define the component as a standalone component.
  * @returns The component declaration as a string.
  */
-const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false) => {
+const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false) => {
     const tagNameAsPascal = dashToPascalCase(tagName);
@@ -167,2 +169,6 @@ const hasInputs = inputs.length > 0;
     }
+    let standaloneOption = '';
+    if (standalone && includeImportCustomElements) {
+        standaloneOption = `\n  standalone: true`;
+    }
     /**
@@ -181,3 +187,3 @@ * Notes on the generated output:
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],
+  inputs: [${formattedInputs}],${standaloneOption}
 })
@@ -239,11 +245,9 @@ export class ${tagNameAsPascal} {
  * @param componentCorePackage The component core package.
- * @param includeImportCustomElements Whether to include the import for the custom element definition.
  * @param customElementsDir The custom elements directory.
  * @returns The component interface type definition as a string.
  */
-const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
+const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
-        includeImportCustomElements,
         customElementsDir,
@@ -395,7 +399,9 @@ });
 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 includeSingleComponentAngularModules = outputTarget.outputType === 'scam';
+    const includeSingleComponentAngularComponents = outputTarget.outputType === 'standalone';
+    const isCustomElementsBuild = outputTarget.customElementsDir !== undefined;
+    const isStandaloneBuild = outputTarget.outputType === 'standalone';
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
@@ -435,6 +441,4 @@ /**
             : normalizePath(componentsTypeFile);
-        importLocation += outputTarget.includeImportCustomElements
-            ? `/${outputTarget.customElementsDir || 'components'}`
-            : '';
-        return `import ${outputTarget.includeImportCustomElements ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
+        importLocation += isCustomElementsBuild ? `/${outputTarget.customElementsDir}` : '';
+        return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
@@ -449,14 +453,18 @@ const typeImports = generateTypeImports();
      */
-    if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
+    if (isCustomElementsBuild && 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';`;
+            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir}/${component.tagName}.js';`;
         });
         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.');
+    if (!isCustomElementsBuild) {
+        if (includeSingleComponentAngularModules) {
+            // Generating Angular modules is only supported in the dist-custom-elements build
+            throw new Error('Generating single component Angular modules requires the "customElementsDir" option to be set.');
         }
+        if (includeSingleComponentAngularComponents) {
+            // Generates Angular standalone components is only supported in the dist-custom-elements build
+            throw new Error('Generating standalone Angular components requires the "customElementsDir" option to be set.');
+        }
     }
@@ -466,3 +474,3 @@ const proxyFileOutput = [];
     const mapPropName = (prop) => prop.name;
-    const { includeImportCustomElements, componentCorePackage, customElementsDir } = outputTarget;
+    const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
@@ -492,5 +500,5 @@ const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, includeImportCustomElements);
+        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
+        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
@@ -535,4 +543,7 @@ if (includeSingleComponentAngularModules) {
     if (outputTarget.includeSingleComponentAngularModules !== undefined) {
-        console.warn('**Experimental**: includeSingleComponentAngularModules is a developer preview feature and may change or be removed in the future.');
+        throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");
     }
+    if (outputTarget.outputType === 'scam') {
+        console.warn('**Experimental**: outputType: "scam" is a developer preview feature and may change or be removed in the future.');
+    }
     return results;
@@ -539,0 +550,0 @@ }

dist/index.js

@@ -103,6 +103,7 @@ import path from 'path';
 const createComponentEventTypeImports = (componentTagName, events, options) => {
-    const { componentCorePackage, includeImportCustomElements, customElementsDir } = options;
+    const { componentCorePackage, customElementsDir } = options;
     const imports = [];
     const namedImports = new Set();
-    const importPathName = normalizePath(componentCorePackage) + (includeImportCustomElements ? `/${customElementsDir || 'components'}` : '');
+    const isCustomElementsBuild = customElementsDir !== undefined;
+    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     events.forEach((event) => {
@@ -134,5 +135,6 @@ Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
  * @param includeImportCustomElements Whether to define the component as a custom element.
+ * @param standalone Whether to define the component as a standalone component.
  * @returns The component declaration as a string.
  */
-const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false) => {
+const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false) => {
     const tagNameAsPascal = dashToPascalCase(tagName);
@@ -159,2 +161,6 @@ const hasInputs = inputs.length > 0;
     }
+    let standaloneOption = '';
+    if (standalone && includeImportCustomElements) {
+        standaloneOption = `\n  standalone: true`;
+    }
     /**
@@ -173,3 +179,3 @@ * Notes on the generated output:
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],
+  inputs: [${formattedInputs}],${standaloneOption}
 })
@@ -231,11 +237,9 @@ export class ${tagNameAsPascal} {
  * @param componentCorePackage The component core package.
- * @param includeImportCustomElements Whether to include the import for the custom element definition.
  * @param customElementsDir The custom elements directory.
  * @returns The component interface type definition as a string.
  */
-const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
+const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
-        includeImportCustomElements,
         customElementsDir,
@@ -387,7 +391,9 @@ });
 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 includeSingleComponentAngularModules = outputTarget.outputType === 'scam';
+    const includeSingleComponentAngularComponents = outputTarget.outputType === 'standalone';
+    const isCustomElementsBuild = outputTarget.customElementsDir !== undefined;
+    const isStandaloneBuild = outputTarget.outputType === 'standalone';
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
@@ -427,6 +433,4 @@ /**
             : normalizePath(componentsTypeFile);
-        importLocation += outputTarget.includeImportCustomElements
-            ? `/${outputTarget.customElementsDir || 'components'}`
-            : '';
-        return `import ${outputTarget.includeImportCustomElements ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
+        importLocation += isCustomElementsBuild ? `/${outputTarget.customElementsDir}` : '';
+        return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
@@ -441,14 +445,18 @@ const typeImports = generateTypeImports();
      */
-    if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
+    if (isCustomElementsBuild && 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';`;
+            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir}/${component.tagName}.js';`;
         });
         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.');
+    if (!isCustomElementsBuild) {
+        if (includeSingleComponentAngularModules) {
+            // Generating Angular modules is only supported in the dist-custom-elements build
+            throw new Error('Generating single component Angular modules requires the "customElementsDir" option to be set.');
         }
+        if (includeSingleComponentAngularComponents) {
+            // Generates Angular standalone components is only supported in the dist-custom-elements build
+            throw new Error('Generating standalone Angular components requires the "customElementsDir" option to be set.');
+        }
     }
@@ -458,3 +466,3 @@ const proxyFileOutput = [];
     const mapPropName = (prop) => prop.name;
-    const { includeImportCustomElements, componentCorePackage, customElementsDir } = outputTarget;
+    const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
@@ -484,5 +492,5 @@ const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, includeImportCustomElements);
+        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
+        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
@@ -527,4 +535,7 @@ if (includeSingleComponentAngularModules) {
     if (outputTarget.includeSingleComponentAngularModules !== undefined) {
-        console.warn('**Experimental**: includeSingleComponentAngularModules is a developer preview feature and may change or be removed in the future.');
+        throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");
     }
+    if (outputTarget.outputType === 'scam') {
+        console.warn('**Experimental**: outputType: "scam" is a developer preview feature and may change or be removed in the future.');
+    }
     return results;
@@ -531,0 +542,0 @@ }

dist/output-angular.js

@@ -38,7 +38,9 @@ import path from 'path';
 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 includeSingleComponentAngularModules = outputTarget.outputType === 'scam';
+    const includeSingleComponentAngularComponents = outputTarget.outputType === 'standalone';
+    const isCustomElementsBuild = outputTarget.customElementsDir !== undefined;
+    const isStandaloneBuild = outputTarget.outputType === 'standalone';
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
@@ -78,6 +80,4 @@ /**
             : normalizePath(componentsTypeFile);
-        importLocation += outputTarget.includeImportCustomElements
-            ? `/${outputTarget.customElementsDir || 'components'}`
-            : '';
-        return `import ${outputTarget.includeImportCustomElements ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
+        importLocation += isCustomElementsBuild ? `/${outputTarget.customElementsDir}` : '';
+        return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
@@ -92,14 +92,18 @@ const typeImports = generateTypeImports();
      */
-    if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
+    if (isCustomElementsBuild && 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';`;
+            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir}/${component.tagName}.js';`;
         });
         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.');
+    if (!isCustomElementsBuild) {
+        if (includeSingleComponentAngularModules) {
+            // Generating Angular modules is only supported in the dist-custom-elements build
+            throw new Error('Generating single component Angular modules requires the "customElementsDir" option to be set.');
         }
+        if (includeSingleComponentAngularComponents) {
+            // Generates Angular standalone components is only supported in the dist-custom-elements build
+            throw new Error('Generating standalone Angular components requires the "customElementsDir" option to be set.');
+        }
     }
@@ -109,3 +113,3 @@ const proxyFileOutput = [];
     const mapPropName = (prop) => prop.name;
-    const { includeImportCustomElements, componentCorePackage, customElementsDir } = outputTarget;
+    const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
@@ -135,5 +139,5 @@ const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, includeImportCustomElements);
+        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
+        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
@@ -140,0 +144,0 @@ if (includeSingleComponentAngularModules) {

dist/plugin.js

@@ -31,5 +31,8 @@ import { normalizePath } from './utils';
     if (outputTarget.includeSingleComponentAngularModules !== undefined) {
-        console.warn('**Experimental**: includeSingleComponentAngularModules is a developer preview feature and may change or be removed in the future.');
+        throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");
     }
+    if (outputTarget.outputType === 'scam') {
+        console.warn('**Experimental**: outputType: "scam" is a developer preview feature and may change or be removed in the future.');
+    }
     return results;
 }

dist/types.d.ts

@@ -0,1 +1,8 @@
+/**
+ * The type of output that can be generated with the Angular output target.
+ * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
+ * - `scam` - Generate a Single Component Angular Module for each component.
+ * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+ */
+export declare type OutputType = 'component' | 'scam' | 'standalone';
 export interface OutputTargetAngular {
@@ -15,10 +22,10 @@ /**
     excludeComponents?: string[];
-    includeImportCustomElements?: boolean;
     customElementsDir?: string;
     /**
-     * @experimental
-     *
-     * `true` to generate a single component Angular module for each component.
+     * The type of output that should be generated.
+     * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
+     * - `scam` - @experimental Generate a Single Component Angular Module for each component.
+     * - `standalone` - Generate a component with the `standalone` flag set to `true`.
      */
-    includeSingleComponentAngularModules?: boolean;
+    outputType: OutputType;
 }
@@ -25,0 +32,0 @@ export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';

dist/utils.d.ts

@@ -33,4 +33,3 @@ import { ComponentCompilerEvent, Config } from '@stencil/core/internal';
     componentCorePackage: string;
-    includeImportCustomElements?: boolean;
     customElementsDir?: string;
 }) => string;

dist/utils.js

@@ -104,6 +104,7 @@ import path from 'path';
 export const createComponentEventTypeImports = (componentTagName, events, options) => {
-    const { componentCorePackage, includeImportCustomElements, customElementsDir } = options;
+    const { componentCorePackage, customElementsDir } = options;
     const imports = [];
     const namedImports = new Set();
-    const importPathName = normalizePath(componentCorePackage) + (includeImportCustomElements ? `/${customElementsDir || 'components'}` : '');
+    const isCustomElementsBuild = customElementsDir !== undefined;
+    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     events.forEach((event) => {
@@ -110,0 +111,0 @@ Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {

package.json

 {
   "name": "@stencil/angular-output-target",
-  "version": "0.7.1",
+  "version": "0.8.1-dev.11690825475.1243803f",
   "description": "Angular output target for @stencil/core components.",
@@ -61,3 +61,3 @@ "main": "dist/index.cjs.js",
   },
-  "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0",
+  "gitHead": "243803f02d0675190181da7ed8ad6ff432c3ee1d",
   "volta": {
@@ -64,0 +64,0 @@ "extends": "../../package.json"

README.md

@@ -30,2 +30,3 @@ # @stencil/angular-output-target
       componentCorePackage: 'component-library',
+      outputType: 'component',
       directivesProxyFile: '../component-library-angular/src/directives/proxies.ts',
@@ -44,10 +45,10 @@ directivesArrayFile: '../component-library-angular/src/directives/index.ts',
 
-| Property                      | Description                                                                                                                                                                                                                                                                                                                      |
-| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `componentCorePackage`        | The NPM package name of your Stencil component library. This package is used as a dependency for your Angular wrappers.                                                                                                                                                                                                          |
-| `directivesProxyFile`         | The output file of all the component wrappers generated by the output target. This file path should point to a location within your Angular library/project.                                                                                                                                                                     |
-| `directivesArrayFile`         | The output file of a constant of all the generated component wrapper classes. Used for easily declaring and exporting the generated components from an `NgModule`. This file path should point to a location within your Angular library/project.                                                                                |
-| `valueAccessorConfigs`        | The configuration object for how individual web components behave with Angular control value accessors.                                                                                                                                                                                                                          |
-| `excludeComponents`           | An array of tag names to exclude from generating component wrappers for. This is helpful when have a custom framework implementation of a specific component or need to extend the base component wrapper behavior.                                                                                                              |
-| `includeImportCustomElements` | If `true`, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements) and will not work with lazy loaded components. |
-| `customElementsDir`           | This is the directory where the custom elements are imported from when using the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements). Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`.                                                                        |
+| Property               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `componentCorePackage` | The NPM package name of your Stencil component library. This package is used as a dependency for your Angular wrappers.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `directivesProxyFile`  | The output file of all the component wrappers generated by the output target. This file path should point to a location within your Angular library/project.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `directivesArrayFile`  | The output file of a constant of all the generated component wrapper classes. Used for easily declaring and exporting the generated components from an `NgModule`. This file path should point to a location within your Angular library/project.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `valueAccessorConfigs` | The configuration object for how individual web components behave with Angular control value accessors.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `excludeComponents`    | An array of tag names to exclude from generating component wrappers for. This is helpful when have a custom framework implementation of a specific component or need to extend the base component wrapper behavior.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `outputType`           | Specifies the type of output to be generated. It can take one of the following values: <br />1. `component`: Generates all the component wrappers to be declared on an Angular module. This option is required for Stencil projects using the `dist` hydrated output.<br /> 2. `scam`: Generates a separate Angular module for each component.<br /> 3. `standalone`: Generates standalone component wrappers.<br /> Both `scam` and `standalone` options are compatible with the `dist-custom-elements` output. Developers **must** set a `customElementsDir` in the output target config when using either 'scam' or 'standalone'.<br />Note: Please choose the appropriate `outputType` based on your project's requirements and the desired output structure. |
+| `customElementsDir`    | This is the directory where the custom elements are imported from when using the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements). Required to be set for `outputType: "scam"` or `outputType: "standalone"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

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

Improved metrics

Total package byte prevSize

99476

increased by5.91%

Lines of code

1910

increased by2.08%

Number of lines in readme file

53

increased by1.92%

No dependency changes