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

Comparing version 1.0.0 to 1.1.0

dist/generate-angular-component.d.ts

 import type { ComponentCompilerEvent, ComponentCompilerProperty } from '@stencil/core/internal';
-import type { OutputType } from './types';
+import type { ComponentInputProperty, OutputType } from './types';
 /**
@@ -7,3 +7,3 @@ * Creates an Angular component declaration from formatted Stencil compiler metadata.
  * @param tagName The tag name of the component.
- * @param inputs The inputs of the Stencil component (e.g. ['myInput']).
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
@@ -16,3 +16,3 @@ * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
  */
-export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly string[], outputs: readonly string[], methods: readonly string[], includeImportCustomElements?: boolean, standalone?: boolean, inlineComponentProps?: readonly ComponentCompilerProperty[]) => string;
+export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly ComponentInputProperty[], outputs: readonly string[], methods: readonly string[], includeImportCustomElements?: boolean, standalone?: boolean, inlineComponentProps?: readonly ComponentCompilerProperty[]) => string;
 /**
@@ -19,0 +19,0 @@ * Creates the component interface type definition.

dist/generate-angular-component.js

@@ -1,2 +0,2 @@
-import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList } from './utils';
+import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList, mapPropName } from './utils';
 /**
@@ -28,6 +28,25 @@ * Creates a property declaration.
 /**
+ * Creates a formatted inputs text with required declaration.
+ *
+ * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
+ * @returns The inputs list declaration as a string.
+ */
+function formatInputs(inputs) {
+    return inputs
+        .map((item) => {
+        if (item.required) {
+            return `{ name: '${item.name}', required: true }`;
+        }
+        else {
+            return `'${item.name}'`;
+        }
+    })
+        .join(', ');
+}
+/**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *
  * @param tagName The tag name of the component.
- * @param inputs The inputs of the Stencil component (e.g. ['myInput']).
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
@@ -46,3 +65,6 @@ * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
     // Formats the input strings into comma separated, single quoted values.
-    const formattedInputs = formatToQuotedList(inputs);
+    const proxyCmpFormattedInputs = formatToQuotedList(inputs.map(mapPropName));
+    // Formats the input strings into comma separated, single quoted values if optional.
+    // Formats the required input strings into comma separated {name, required} objects.
+    const formattedInputs = formatInputs(inputs);
     // Formats the output strings into comma separated, single quoted values.
@@ -58,3 +80,3 @@ const formattedOutputs = formatToQuotedList(outputs);
     if (hasInputs) {
-        proxyCmpOptions.push(`\n  inputs: [${formattedInputs}]`);
+        proxyCmpOptions.push(`\n  inputs: [${proxyCmpFormattedInputs}]`);
     }
@@ -61,0 +83,0 @@ if (hasMethods) {

dist/index.cjs.js

@@ -18,2 +18,3 @@ 'use strict';
 const toLowerCase = (str) => str.toLowerCase();
+const mapPropName = (prop) => prop.name;
 const dashToPascalCase = (str) => toLowerCase(str)
@@ -174,6 +175,25 @@ .split('-')
 /**
+ * Creates a formatted inputs text with required declaration.
+ *
+ * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
+ * @returns The inputs list declaration as a string.
+ */
+function formatInputs(inputs) {
+    return inputs
+        .map((item) => {
+        if (item.required) {
+            return `{ name: '${item.name}', required: true }`;
+        }
+        else {
+            return `'${item.name}'`;
+        }
+    })
+        .join(', ');
+}
+/**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *
  * @param tagName The tag name of the component.
- * @param inputs The inputs of the Stencil component (e.g. ['myInput']).
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
@@ -192,3 +212,6 @@ * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
     // Formats the input strings into comma separated, single quoted values.
-    const formattedInputs = formatToQuotedList(inputs);
+    const proxyCmpFormattedInputs = formatToQuotedList(inputs.map(mapPropName));
+    // Formats the input strings into comma separated, single quoted values if optional.
+    // Formats the required input strings into comma separated {name, required} objects.
+    const formattedInputs = formatInputs(inputs);
     // Formats the output strings into comma separated, single quoted values.
@@ -204,3 +227,3 @@ const formattedOutputs = formatToQuotedList(outputs);
     if (hasInputs) {
-        proxyCmpOptions.push(`\n  inputs: [${formattedInputs}]`);
+        proxyCmpOptions.push(`\n  inputs: [${proxyCmpFormattedInputs}]`);
     }
@@ -529,3 +552,10 @@ if (hasMethods) {
     const filterInternalProps = (prop) => !prop.internal;
-    const mapPropName = (prop) => prop.name;
+    // Ensure that virtual properties has required as false.
+    const mapInputProp = (prop) => {
+        var _a;
+        return ({
+            name: prop.name,
+            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
+        });
+    };
     const { componentCorePackage, customElementsDir } = outputTarget;
@@ -538,7 +568,7 @@ for (let cmpMeta of components) {
         }
-        const inputs = internalProps.map(mapPropName);
+        const inputs = internalProps.map(mapInputProp);
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapPropName));
+            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
-        inputs.sort();
+        const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const outputs = [];
@@ -559,3 +589,3 @@ if (cmpMeta.events) {
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
+        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
@@ -562,0 +592,0 @@ const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);

dist/index.js

@@ -10,2 +10,3 @@ import path from 'path';
 const toLowerCase = (str) => str.toLowerCase();
+const mapPropName = (prop) => prop.name;
 const dashToPascalCase = (str) => toLowerCase(str)
@@ -166,6 +167,25 @@ .split('-')
 /**
+ * Creates a formatted inputs text with required declaration.
+ *
+ * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
+ * @returns The inputs list declaration as a string.
+ */
+function formatInputs(inputs) {
+    return inputs
+        .map((item) => {
+        if (item.required) {
+            return `{ name: '${item.name}', required: true }`;
+        }
+        else {
+            return `'${item.name}'`;
+        }
+    })
+        .join(', ');
+}
+/**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *
  * @param tagName The tag name of the component.
- * @param inputs The inputs of the Stencil component (e.g. ['myInput']).
+ * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
@@ -184,3 +204,6 @@ * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
     // Formats the input strings into comma separated, single quoted values.
-    const formattedInputs = formatToQuotedList(inputs);
+    const proxyCmpFormattedInputs = formatToQuotedList(inputs.map(mapPropName));
+    // Formats the input strings into comma separated, single quoted values if optional.
+    // Formats the required input strings into comma separated {name, required} objects.
+    const formattedInputs = formatInputs(inputs);
     // Formats the output strings into comma separated, single quoted values.
@@ -196,3 +219,3 @@ const formattedOutputs = formatToQuotedList(outputs);
     if (hasInputs) {
-        proxyCmpOptions.push(`\n  inputs: [${formattedInputs}]`);
+        proxyCmpOptions.push(`\n  inputs: [${proxyCmpFormattedInputs}]`);
     }
@@ -521,3 +544,10 @@ if (hasMethods) {
     const filterInternalProps = (prop) => !prop.internal;
-    const mapPropName = (prop) => prop.name;
+    // Ensure that virtual properties has required as false.
+    const mapInputProp = (prop) => {
+        var _a;
+        return ({
+            name: prop.name,
+            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
+        });
+    };
     const { componentCorePackage, customElementsDir } = outputTarget;
@@ -530,7 +560,7 @@ for (let cmpMeta of components) {
         }
-        const inputs = internalProps.map(mapPropName);
+        const inputs = internalProps.map(mapInputProp);
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapPropName));
+            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
-        inputs.sort();
+        const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const outputs = [];
@@ -551,3 +581,3 @@ if (cmpMeta.events) {
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
+        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
@@ -554,0 +584,0 @@ const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);

dist/output-angular.js

 import path from 'path';
-import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, isOutputTypeCustomElementsBuild, OutputTypes, } from './utils';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, isOutputTypeCustomElementsBuild, OutputTypes, mapPropName, } from './utils';
 import { createAngularComponentDefinition, createComponentTypeDefinition } from './generate-angular-component';
@@ -100,3 +100,10 @@ import { generateAngularDirectivesFile } from './generate-angular-directives-file';
     const filterInternalProps = (prop) => !prop.internal;
-    const mapPropName = (prop) => prop.name;
+    // Ensure that virtual properties has required as false.
+    const mapInputProp = (prop) => {
+        var _a;
+        return ({
+            name: prop.name,
+            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
+        });
+    };
     const { componentCorePackage, customElementsDir } = outputTarget;
@@ -109,7 +116,7 @@ for (let cmpMeta of components) {
         }
-        const inputs = internalProps.map(mapPropName);
+        const inputs = internalProps.map(mapInputProp);
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapPropName));
+            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
-        inputs.sort();
+        const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const outputs = [];
@@ -130,3 +137,3 @@ if (cmpMeta.events) {
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
+        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
@@ -133,0 +140,0 @@ const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);

dist/types.d.ts

@@ -47,1 +47,5 @@ /**
 }
+export interface ComponentInputProperty {
+    name: string;
+    required: boolean;
+}

dist/utils.d.ts

@@ -7,2 +7,5 @@ import { ComponentCompilerEvent, Config } from '@stencil/core/internal';
 export declare const toLowerCase: (str: string) => string;
+export declare const mapPropName: (prop: {
+    name: string;
+}) => string;
 export declare const dashToPascalCase: (str: string) => string;
@@ -9,0 +12,0 @@ export declare function sortBy<T>(array: T[], prop: (item: T) => string): T[];

dist/utils.js

@@ -8,2 +8,3 @@ import path from 'path';
 export const toLowerCase = (str) => str.toLowerCase();
+export const mapPropName = (prop) => prop.name;
 export const dashToPascalCase = (str) => toLowerCase(str)
@@ -10,0 +11,0 @@ .split('-')

package.json

 {
   "name": "@stencil/angular-output-target",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Angular output target for @stencil/core components.",
@@ -53,3 +53,3 @@ "main": "dist/index.cjs.js",
     "@angular/forms": "8.2.14",
-    "@stencil/core": "4.32.0",
+    "@stencil/core": "4.35.1",
     "@types/node": "^18.0.0",
@@ -56,0 +56,0 @@ "npm-run-all2": "^6.2.4",

No alert changes

Improved metrics

Total package byte prevSize

114875

3.45%

Lines of code

2229

4.55%

No dependency changes