You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@stencil/angular-output-target

Package Overview
Dependencies
Maintainers
4
Versions
126
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version

0.0.1-dev.11751417912.1d1c2863
to
0.0.1-dev.11753708416.1bc385bb

4

dist/generate-angular-component.d.ts

@@ -8,3 +8,2 @@ import type { ComponentCompilerEvent, ComponentCompilerProperty } from '@stencil/core/internal';

* @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']).
* @param methods The methods of the Stencil component. (e.g. ['myMethod']).

@@ -14,5 +13,6 @@ * @param includeImportCustomElements Whether to define the component as a custom element.

* @param inlineComponentProps List of properties that should be inlined into the component definition.
* @param events The events of the Stencil component for generating outputs.
* @returns The component declaration as a string.
*/
export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly ComponentInputProperty[], outputs: readonly string[], methods: readonly string[], includeImportCustomElements?: boolean, standalone?: boolean, inlineComponentProps?: readonly ComponentCompilerProperty[]) => string;
export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly ComponentInputProperty[], methods: readonly string[], includeImportCustomElements?: boolean, standalone?: boolean, inlineComponentProps?: readonly ComponentCompilerProperty[], events?: readonly ComponentCompilerEvent[]) => string;
/**

@@ -19,0 +19,0 @@ * Creates the component interface type definition.

25

dist/generate-angular-component.js

@@ -51,3 +51,2 @@ import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList, mapPropName } from './utils';

* @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']).
* @param methods The methods of the Stencil component. (e.g. ['myMethod']).

@@ -57,6 +56,8 @@ * @param includeImportCustomElements Whether to define the component as a custom element.

* @param inlineComponentProps List of properties that should be inlined into the component definition.
* @param events The events of the Stencil component for generating outputs.
* @returns The component declaration as a string.
*/
export const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = []) => {
export const createAngularComponentDefinition = (tagName, inputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = [], events = []) => {
const tagNameAsPascal = dashToPascalCase(tagName);
const outputs = events.filter((event) => !event.internal).map((event) => event.name);
const hasInputs = inputs.length > 0;

@@ -90,3 +91,14 @@ const hasOutputs = outputs.length > 0;

const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n ');
const outputDeclarations = events
.filter((event) => !event.internal)
.map((event) => {
const camelCaseOutput = event.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
return `@Output() ${camelCaseOutput} = new ${outputType}();`;
});
const propertiesDeclarationText = [
`protected el: HTML${tagNameAsPascal}Element;`,
...propertyDeclarations,
...outputDeclarations,
].join('\n ');
/**

@@ -105,3 +117,3 @@ * Notes on the generated output:

// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: [${formattedInputs}],${standaloneOption}
inputs: [${formattedInputs}],${hasOutputs ? `\n outputs: [${formattedOutputs}],` : ''}${standaloneOption}
})

@@ -112,6 +124,3 @@ export class ${tagNameAsPascal} {

c.detach();
this.el = r.nativeElement;${hasOutputs
? `
proxyOutputs(this, this.el, [${formattedOutputs}]);`
: ''}
this.el = r.nativeElement;
}

@@ -118,0 +127,0 @@ }`;

36

dist/index.cjs.js

@@ -197,3 +197,2 @@ 'use strict';

* @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']).
* @param methods The methods of the Stencil component. (e.g. ['myMethod']).

@@ -203,6 +202,8 @@ * @param includeImportCustomElements Whether to define the component as a custom element.

* @param inlineComponentProps List of properties that should be inlined into the component definition.
* @param events The events of the Stencil component for generating outputs.
* @returns The component declaration as a string.
*/
const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = []) => {
const createAngularComponentDefinition = (tagName, inputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = [], events = []) => {
const tagNameAsPascal = dashToPascalCase(tagName);
const outputs = events.filter((event) => !event.internal).map((event) => event.name);
const hasInputs = inputs.length > 0;

@@ -236,3 +237,14 @@ const hasOutputs = outputs.length > 0;

const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n ');
const outputDeclarations = events
.filter((event) => !event.internal)
.map((event) => {
const camelCaseOutput = event.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
return `@Output() ${camelCaseOutput} = new ${outputType}();`;
});
const propertiesDeclarationText = [
`protected el: HTML${tagNameAsPascal}Element;`,
...propertyDeclarations,
...outputDeclarations,
].join('\n ');
/**

@@ -251,3 +263,3 @@ * Notes on the generated output:

// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: [${formattedInputs}],${standaloneOption}
inputs: [${formattedInputs}],${hasOutputs ? `\n outputs: [${formattedOutputs}],` : ''}${standaloneOption}
})

@@ -258,6 +270,3 @@ export class ${tagNameAsPascal} {

c.detach();
this.el = r.nativeElement;${hasOutputs
? `
proxyOutputs(this, this.el, [${formattedOutputs}]);`
: ''}
this.el = r.nativeElement;
}

@@ -505,3 +514,3 @@ }`;

if (includeOutputImports) {
angularCoreImports.push('EventEmitter');
angularCoreImports.push('EventEmitter', 'Output');
}

@@ -513,5 +522,2 @@ angularCoreImports.push('NgZone');

const componentLibImports = ['ProxyCmp'];
if (includeOutputImports) {
componentLibImports.push('proxyOutputs');
}
if (includeSingleComponentAngularModules) {

@@ -575,6 +581,2 @@ angularCoreImports.push('NgModule');

const orderedInputs = sortBy(inputs, (cip) => cip.name);
const outputs = [];
if (cmpMeta.events) {
outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
}
const methods = [];

@@ -591,3 +593,3 @@ if (cmpMeta.methods) {

*/
const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);

@@ -594,0 +596,0 @@ const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);

36

dist/index.js

@@ -189,3 +189,2 @@ import path from 'path';

* @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']).
* @param methods The methods of the Stencil component. (e.g. ['myMethod']).

@@ -195,6 +194,8 @@ * @param includeImportCustomElements Whether to define the component as a custom element.

* @param inlineComponentProps List of properties that should be inlined into the component definition.
* @param events The events of the Stencil component for generating outputs.
* @returns The component declaration as a string.
*/
const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = []) => {
const createAngularComponentDefinition = (tagName, inputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = [], events = []) => {
const tagNameAsPascal = dashToPascalCase(tagName);
const outputs = events.filter((event) => !event.internal).map((event) => event.name);
const hasInputs = inputs.length > 0;

@@ -228,3 +229,14 @@ const hasOutputs = outputs.length > 0;

const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n ');
const outputDeclarations = events
.filter((event) => !event.internal)
.map((event) => {
const camelCaseOutput = event.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
return `@Output() ${camelCaseOutput} = new ${outputType}();`;
});
const propertiesDeclarationText = [
`protected el: HTML${tagNameAsPascal}Element;`,
...propertyDeclarations,
...outputDeclarations,
].join('\n ');
/**

@@ -243,3 +255,3 @@ * Notes on the generated output:

// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: [${formattedInputs}],${standaloneOption}
inputs: [${formattedInputs}],${hasOutputs ? `\n outputs: [${formattedOutputs}],` : ''}${standaloneOption}
})

@@ -250,6 +262,3 @@ export class ${tagNameAsPascal} {

c.detach();
this.el = r.nativeElement;${hasOutputs
? `
proxyOutputs(this, this.el, [${formattedOutputs}]);`
: ''}
this.el = r.nativeElement;
}

@@ -497,3 +506,3 @@ }`;

if (includeOutputImports) {
angularCoreImports.push('EventEmitter');
angularCoreImports.push('EventEmitter', 'Output');
}

@@ -505,5 +514,2 @@ angularCoreImports.push('NgZone');

const componentLibImports = ['ProxyCmp'];
if (includeOutputImports) {
componentLibImports.push('proxyOutputs');
}
if (includeSingleComponentAngularModules) {

@@ -567,6 +573,2 @@ angularCoreImports.push('NgModule');

const orderedInputs = sortBy(inputs, (cip) => cip.name);
const outputs = [];
if (cmpMeta.events) {
outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
}
const methods = [];

@@ -583,3 +585,3 @@ if (cmpMeta.methods) {

*/
const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);

@@ -586,0 +588,0 @@ const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);

11

dist/output-angular.js

@@ -52,3 +52,3 @@ import path from 'path';

if (includeOutputImports) {
angularCoreImports.push('EventEmitter');
angularCoreImports.push('EventEmitter', 'Output');
}

@@ -60,5 +60,2 @@ angularCoreImports.push('NgZone');

const componentLibImports = ['ProxyCmp'];
if (includeOutputImports) {
componentLibImports.push('proxyOutputs');
}
if (includeSingleComponentAngularModules) {

@@ -122,6 +119,2 @@ angularCoreImports.push('NgModule');

const orderedInputs = sortBy(inputs, (cip) => cip.name);
const outputs = [];
if (cmpMeta.events) {
outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
}
const methods = [];

@@ -138,3 +131,3 @@ if (cmpMeta.methods) {

*/
const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);

@@ -141,0 +134,0 @@ const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);

4

package.json
{
"name": "@stencil/angular-output-target",
"version": "0.0.1-dev.11751417912.1d1c2863",
"version": "0.0.1-dev.11753708416.1bc385bb",
"description": "Angular output target for @stencil/core components.",

@@ -64,3 +64,3 @@ "main": "dist/index.cjs.js",

},
"gitHead": "d1c286351b4468fdc6c2032e36ee2dc42e55e9c7"
"gitHead": "bc385bb0794e3062bd579669f18bb4f3ccf3aef3"
}