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

Comparing version 0.4.0 to 0.6.1-dev.11648179954.1c2dc085

dist/index.cjs.js

@@ -56,3 +56,3 @@ 'use strict';
 function relativeImport(pathFrom, pathTo, ext) {
-    let relativePath = path__default['default'].relative(path__default['default'].dirname(pathFrom), path__default['default'].dirname(pathTo));
+    let relativePath = path__default["default"].relative(path__default["default"].dirname(pathFrom), path__default["default"].dirname(pathTo));
     if (relativePath === '') {
@@ -64,7 +64,7 @@ relativePath = '.';
     }
-    return normalizePath(`${relativePath}/${path__default['default'].basename(pathTo, ext)}`);
+    return normalizePath(`${relativePath}/${path__default["default"].basename(pathTo, ext)}`);
 }
 async function readPackageJson(config, rootDir) {
     var _a;
-    const pkgJsonPath = path__default['default'].join(rootDir, 'package.json');
+    const pkgJsonPath = path__default["default"].join(rootDir, 'package.json');
     let pkgJson;
@@ -216,3 +216,3 @@ try {
     }
-    const targetDir = path__default['default'].dirname(outputTarget.directivesProxyFile);
+    const targetDir = path__default["default"].dirname(outputTarget.directivesProxyFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
@@ -237,4 +237,4 @@ const elementSelectors = Array.isArray(va.elementSelectors)
         const targetFileName = `${type}-value-accessor.ts`;
-        const targetFilePath = path__default['default'].join(targetDir, targetFileName);
-        const srcFilePath = path__default['default'].join(__dirname, '../resources/control-value-accessors/', targetFileName);
+        const targetFilePath = path__default["default"].join(targetDir, targetFileName);
+        const srcFilePath = path__default["default"].join(__dirname, '../resources/control-value-accessors/', targetFileName);
         const srcFileContents = await compilerCtx.fs.readFile(srcFilePath);
@@ -244,3 +244,3 @@ const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType]);
     }));
-    await copyResources(config, ['value-accessor.ts'], targetDir);
+    await copyResources$1(config, ['value-accessor.ts'], targetDir);
 }
@@ -253,3 +253,3 @@ function createValueAccessor(srcFileContents, valueAccessor) {
 }
-function copyResources(config, resourcesFilesToCopy, directory) {
+function copyResources$1(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
@@ -260,4 +260,4 @@ throw new Error('stencil is not properly intialized at this step. Notify the developer');
         return {
-            src: path__default['default'].join(__dirname, '../resources/control-value-accessors/', rf),
-            dest: path__default['default'].join(directory, rf),
+            src: path__default["default"].join(__dirname, '../resources/control-value-accessors/', rf),
+            dest: path__default["default"].join(directory, rf),
             keepDirStructure: false,
@@ -267,3 +267,3 @@ warn: false,
     });
-    return config.sys.copy(copyTasks, path__default['default'].join(directory));
+    return config.sys.copy(copyTasks, path__default["default"].join(directory));
 }
@@ -282,3 +282,3 @@ const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
-        copyResources$1(config, outputTarget),
+        copyResources(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
@@ -291,8 +291,8 @@ generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
 }
-async function copyResources$1(config, outputTarget) {
+async function copyResources(config, outputTarget) {
     if (!config.sys || !config.sys.copy || !config.sys.glob) {
         throw new Error('stencil is not properly initialized at this step. Notify the developer');
     }
-    const srcDirectory = path__default['default'].join(__dirname, '..', 'angular-component-lib');
-    const destDirectory = path__default['default'].join(path__default['default'].dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
+    const srcDirectory = path__default["default"].join(__dirname, '..', 'angular-component-lib');
+    const destDirectory = path__default["default"].join(path__default["default"].dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
     return config.sys.copy([
@@ -308,4 +308,4 @@ {
 function generateProxies(components, pkgData, outputTarget, rootDir) {
-    const distTypesDir = path__default['default'].dirname(pkgData.types);
-    const dtsFilePath = path__default['default'].join(rootDir, distTypesDir, GENERATED_DTS);
+    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');
@@ -376,10 +376,10 @@ const imports = `/* tslint:disable */
     }
-    if (outputTarget.directivesProxyFile && !path__default['default'].isAbsolute(outputTarget.directivesProxyFile)) {
-        results.directivesProxyFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesProxyFile));
+    if (outputTarget.directivesProxyFile && !path__default["default"].isAbsolute(outputTarget.directivesProxyFile)) {
+        results.directivesProxyFile = normalizePath(path__default["default"].join(config.rootDir, outputTarget.directivesProxyFile));
     }
-    if (outputTarget.directivesArrayFile && !path__default['default'].isAbsolute(outputTarget.directivesArrayFile)) {
-        results.directivesArrayFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesArrayFile));
+    if (outputTarget.directivesArrayFile && !path__default["default"].isAbsolute(outputTarget.directivesArrayFile)) {
+        results.directivesArrayFile = normalizePath(path__default["default"].join(config.rootDir, outputTarget.directivesArrayFile));
     }
-    if (outputTarget.directivesUtilsFile && !path__default['default'].isAbsolute(outputTarget.directivesUtilsFile)) {
-        results.directivesUtilsFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesUtilsFile));
+    if (outputTarget.directivesUtilsFile && !path__default["default"].isAbsolute(outputTarget.directivesUtilsFile)) {
+        results.directivesUtilsFile = normalizePath(path__default["default"].join(config.rootDir, outputTarget.directivesUtilsFile));
     }
@@ -386,0 +386,0 @@ return results;

dist/index.js

@@ -232,3 +232,3 @@ import path from 'path';
     }));
-    await copyResources(config, ['value-accessor.ts'], targetDir);
+    await copyResources$1(config, ['value-accessor.ts'], targetDir);
 }
@@ -241,3 +241,3 @@ function createValueAccessor(srcFileContents, valueAccessor) {
 }
-function copyResources(config, resourcesFilesToCopy, directory) {
+function copyResources$1(config, resourcesFilesToCopy, directory) {
     if (!config.sys || !config.sys.copy) {
@@ -268,3 +268,3 @@ throw new Error('stencil is not properly intialized at this step. Notify the developer');
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
-        copyResources$1(config, outputTarget),
+        copyResources(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
@@ -277,3 +277,3 @@ generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
 }
-async function copyResources$1(config, outputTarget) {
+async function copyResources(config, outputTarget) {
     if (!config.sys || !config.sys.copy || !config.sys.glob) {
@@ -280,0 +280,0 @@ throw new Error('stencil is not properly initialized at this step. Notify the developer');

package.json

 {
   "name": "@stencil/angular-output-target",
-  "version": "0.4.0",
+  "version": "0.6.1-dev.11648179954.1c2dc085",
   "description": "Angular output target for @stencil/core components.",
@@ -57,3 +57,3 @@ "main": "dist/index.cjs.js",
   },
-  "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
+  "gitHead": "c2dc0854544b1f52ec973beb30f63acd49193cfe"
 }

README.md

 # @stencil/angular-output-target
 
-This is an output plugin for stencil.
+Stencil can generate Angular component wrappers for your web components. This allows your Stencil components to be used within an Angular application. The benefits of using Stencil's component wrappers over the standard web components include:
+
+- Angular component wrappers will be detached from change detection, preventing unnecessary repaints of your web component.
+- Web component events will be converted to RxJS observables to align with Angular's @Output() and will not emit across component boundaries.
+- Optionally, form control web components can be used as control value accessors with Angular's reactive forms or [ngModel].
+
+For a detailed guide on how to add the angular output target to a project, visit: https://stenciljs.com/docs/angular.
+
+## Installation
+
+```bash
+npm install @stencil/angular-output-target
+```
+
+## Usage
+
+In your `stencil.config.ts` add the following configuration to the `outputTargets` section:
+
+```ts
+import { Config } from '@stencil/core';
+import { angularOutputTarget } from '@stencil/angular-output-target';
+
+export const config: Config = {
+  namespace: 'demo',
+  outputTargets: [
+    angularOutputTarget({
+      componentCorePackage: 'component-library',
+      directivesProxyFile: '../component-library-angular/src/directives/proxies.ts',
+      directivesArrayFile: '../component-library-angular/src/directives/index.ts',
+    }),
+    {
+      type: 'dist',
+      esmLoaderPath: '../loader',
+    },
+  ],
+};
+```
+
+## Config Options
+
+| 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`.                                                                        |

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68923

increased by7.27%

Number of lines in readme file

52

increased by1200%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes