@stencil/angular-output-target 0.4.0 → 0.6.1-dev.11648180969.1285dace

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +49 -1
  2. package/dist/index.cjs.js +23 -23
  3. package/dist/index.js +4 -4
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,3 +1,51 @@
1
1
  # @stencil/angular-output-target
2
2
 
3
- This is an output plugin for stencil.
3
+ 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:
4
+
5
+ - Angular component wrappers will be detached from change detection, preventing unnecessary repaints of your web component.
6
+ - Web component events will be converted to RxJS observables to align with Angular's @Output() and will not emit across component boundaries.
7
+ - Optionally, form control web components can be used as control value accessors with Angular's reactive forms or [ngModel].
8
+
9
+ For a detailed guide on how to add the angular output target to a project, visit: https://stenciljs.com/docs/angular.
10
+
11
+ ## Installation
12
+
13
+ ```bash
14
+ npm install @stencil/angular-output-target
15
+ ```
16
+
17
+ ## Usage
18
+
19
+ In your `stencil.config.ts` add the following configuration to the `outputTargets` section:
20
+
21
+ ```ts
22
+ import { Config } from '@stencil/core';
23
+ import { angularOutputTarget } from '@stencil/angular-output-target';
24
+
25
+ export const config: Config = {
26
+ namespace: 'demo',
27
+ outputTargets: [
28
+ angularOutputTarget({
29
+ componentCorePackage: 'component-library',
30
+ directivesProxyFile: '../component-library-angular/src/directives/proxies.ts',
31
+ directivesArrayFile: '../component-library-angular/src/directives/index.ts',
32
+ }),
33
+ {
34
+ type: 'dist',
35
+ esmLoaderPath: '../loader',
36
+ },
37
+ ],
38
+ };
39
+ ```
40
+
41
+ ## Config Options
42
+
43
+ | Property | Description |
44
+ | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
45
+ | `componentCorePackage` | The NPM package name of your Stencil component library. This package is used as a dependency for your Angular wrappers. |
46
+ | `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. |
47
+ | `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. |
48
+ | `valueAccessorConfigs` | The configuration object for how individual web components behave with Angular control value accessors. |
49
+ | `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. |
50
+ | `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. |
51
+ | `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`. |
package/dist/index.cjs.js CHANGED
@@ -53,18 +53,18 @@ function normalizePath(str) {
53
53
  return str;
54
54
  }
55
55
  function relativeImport(pathFrom, pathTo, ext) {
56
- let relativePath = path__default['default'].relative(path__default['default'].dirname(pathFrom), path__default['default'].dirname(pathTo));
56
+ let relativePath = path__default["default"].relative(path__default["default"].dirname(pathFrom), path__default["default"].dirname(pathTo));
57
57
  if (relativePath === '') {
58
58
  relativePath = '.';
59
59
  }
60
60
  else if (relativePath[0] !== '.') {
61
61
  relativePath = './' + relativePath;
62
62
  }
63
- return normalizePath(`${relativePath}/${path__default['default'].basename(pathTo, ext)}`);
63
+ return normalizePath(`${relativePath}/${path__default["default"].basename(pathTo, ext)}`);
64
64
  }
65
65
  async function readPackageJson(config, rootDir) {
66
66
  var _a;
67
- const pkgJsonPath = path__default['default'].join(rootDir, 'package.json');
67
+ const pkgJsonPath = path__default["default"].join(rootDir, 'package.json');
68
68
  let pkgJson;
69
69
  try {
70
70
  pkgJson = (await ((_a = config.sys) === null || _a === void 0 ? void 0 : _a.readFile(pkgJsonPath, 'utf8')));
@@ -211,7 +211,7 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
211
211
  outputTarget.valueAccessorConfigs.length === 0) {
212
212
  return;
213
213
  }
214
- const targetDir = path__default['default'].dirname(outputTarget.directivesProxyFile);
214
+ const targetDir = path__default["default"].dirname(outputTarget.directivesProxyFile);
215
215
  const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
216
216
  const elementSelectors = Array.isArray(va.elementSelectors)
217
217
  ? va.elementSelectors
@@ -231,13 +231,13 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
231
231
  await Promise.all(Object.keys(normalizedValueAccessors).map(async (type) => {
232
232
  const valueAccessorType = type; // Object.keys converts to string
233
233
  const targetFileName = `${type}-value-accessor.ts`;
234
- const targetFilePath = path__default['default'].join(targetDir, targetFileName);
235
- const srcFilePath = path__default['default'].join(__dirname, '../resources/control-value-accessors/', targetFileName);
234
+ const targetFilePath = path__default["default"].join(targetDir, targetFileName);
235
+ const srcFilePath = path__default["default"].join(__dirname, '../resources/control-value-accessors/', targetFileName);
236
236
  const srcFileContents = await compilerCtx.fs.readFile(srcFilePath);
237
237
  const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType]);
238
238
  await compilerCtx.fs.writeFile(targetFilePath, finalText);
239
239
  }));
240
- await copyResources(config, ['value-accessor.ts'], targetDir);
240
+ await copyResources$1(config, ['value-accessor.ts'], targetDir);
241
241
  }
242
242
  function createValueAccessor(srcFileContents, valueAccessor) {
243
243
  const hostContents = valueAccessor.eventTargets.map((listItem) => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
@@ -245,19 +245,19 @@ function createValueAccessor(srcFileContents, valueAccessor) {
245
245
  .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
246
246
  .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${os.EOL}`));
247
247
  }
248
- function copyResources(config, resourcesFilesToCopy, directory) {
248
+ function copyResources$1(config, resourcesFilesToCopy, directory) {
249
249
  if (!config.sys || !config.sys.copy) {
250
250
  throw new Error('stencil is not properly intialized at this step. Notify the developer');
251
251
  }
252
252
  const copyTasks = resourcesFilesToCopy.map((rf) => {
253
253
  return {
254
- src: path__default['default'].join(__dirname, '../resources/control-value-accessors/', rf),
255
- dest: path__default['default'].join(directory, rf),
254
+ src: path__default["default"].join(__dirname, '../resources/control-value-accessors/', rf),
255
+ dest: path__default["default"].join(directory, rf),
256
256
  keepDirStructure: false,
257
257
  warn: false,
258
258
  };
259
259
  });
260
- return config.sys.copy(copyTasks, path__default['default'].join(directory));
260
+ return config.sys.copy(copyTasks, path__default["default"].join(directory));
261
261
  }
262
262
  const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
263
263
  const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
@@ -271,7 +271,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
271
271
  const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
272
272
  await Promise.all([
273
273
  compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
274
- copyResources$1(config, outputTarget),
274
+ copyResources(config, outputTarget),
275
275
  generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
276
276
  generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
277
277
  ]);
@@ -279,12 +279,12 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
279
279
  function getFilteredComponents(excludeComponents = [], cmps) {
280
280
  return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
281
281
  }
282
- async function copyResources$1(config, outputTarget) {
282
+ async function copyResources(config, outputTarget) {
283
283
  if (!config.sys || !config.sys.copy || !config.sys.glob) {
284
284
  throw new Error('stencil is not properly initialized at this step. Notify the developer');
285
285
  }
286
- const srcDirectory = path__default['default'].join(__dirname, '..', 'angular-component-lib');
287
- const destDirectory = path__default['default'].join(path__default['default'].dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
286
+ const srcDirectory = path__default["default"].join(__dirname, '..', 'angular-component-lib');
287
+ const destDirectory = path__default["default"].join(path__default["default"].dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
288
288
  return config.sys.copy([
289
289
  {
290
290
  src: srcDirectory,
@@ -295,8 +295,8 @@ async function copyResources$1(config, outputTarget) {
295
295
  ], srcDirectory);
296
296
  }
297
297
  function generateProxies(components, pkgData, outputTarget, rootDir) {
298
- const distTypesDir = path__default['default'].dirname(pkgData.types);
299
- const dtsFilePath = path__default['default'].join(rootDir, distTypesDir, GENERATED_DTS);
298
+ const distTypesDir = path__default["default"].dirname(pkgData.types);
299
+ const dtsFilePath = path__default["default"].join(rootDir, distTypesDir, GENERATED_DTS);
300
300
  const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
301
301
  const imports = `/* tslint:disable */
302
302
  /* auto-generated angular directive proxies */
@@ -362,14 +362,14 @@ function normalizeOutputTarget(config, outputTarget) {
362
362
  if (outputTarget.directivesProxyFile == null) {
363
363
  throw new Error('directivesProxyFile is required');
364
364
  }
365
- if (outputTarget.directivesProxyFile && !path__default['default'].isAbsolute(outputTarget.directivesProxyFile)) {
366
- results.directivesProxyFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesProxyFile));
365
+ if (outputTarget.directivesProxyFile && !path__default["default"].isAbsolute(outputTarget.directivesProxyFile)) {
366
+ results.directivesProxyFile = normalizePath(path__default["default"].join(config.rootDir, outputTarget.directivesProxyFile));
367
367
  }
368
- if (outputTarget.directivesArrayFile && !path__default['default'].isAbsolute(outputTarget.directivesArrayFile)) {
369
- results.directivesArrayFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesArrayFile));
368
+ if (outputTarget.directivesArrayFile && !path__default["default"].isAbsolute(outputTarget.directivesArrayFile)) {
369
+ results.directivesArrayFile = normalizePath(path__default["default"].join(config.rootDir, outputTarget.directivesArrayFile));
370
370
  }
371
- if (outputTarget.directivesUtilsFile && !path__default['default'].isAbsolute(outputTarget.directivesUtilsFile)) {
372
- results.directivesUtilsFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesUtilsFile));
371
+ if (outputTarget.directivesUtilsFile && !path__default["default"].isAbsolute(outputTarget.directivesUtilsFile)) {
372
+ results.directivesUtilsFile = normalizePath(path__default["default"].join(config.rootDir, outputTarget.directivesUtilsFile));
373
373
  }
374
374
  return results;
375
375
  }
package/dist/index.js CHANGED
@@ -229,7 +229,7 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
229
229
  const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType]);
230
230
  await compilerCtx.fs.writeFile(targetFilePath, finalText);
231
231
  }));
232
- await copyResources(config, ['value-accessor.ts'], targetDir);
232
+ await copyResources$1(config, ['value-accessor.ts'], targetDir);
233
233
  }
234
234
  function createValueAccessor(srcFileContents, valueAccessor) {
235
235
  const hostContents = valueAccessor.eventTargets.map((listItem) => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
@@ -237,7 +237,7 @@ function createValueAccessor(srcFileContents, valueAccessor) {
237
237
  .replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
238
238
  .replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(`,${EOL}`));
239
239
  }
240
- function copyResources(config, resourcesFilesToCopy, directory) {
240
+ function copyResources$1(config, resourcesFilesToCopy, directory) {
241
241
  if (!config.sys || !config.sys.copy) {
242
242
  throw new Error('stencil is not properly intialized at this step. Notify the developer');
243
243
  }
@@ -263,7 +263,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
263
263
  const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
264
264
  await Promise.all([
265
265
  compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
266
- copyResources$1(config, outputTarget),
266
+ copyResources(config, outputTarget),
267
267
  generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
268
268
  generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
269
269
  ]);
@@ -271,7 +271,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
271
271
  function getFilteredComponents(excludeComponents = [], cmps) {
272
272
  return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
273
273
  }
274
- async function copyResources$1(config, outputTarget) {
274
+ async function copyResources(config, outputTarget) {
275
275
  if (!config.sys || !config.sys.copy || !config.sys.glob) {
276
276
  throw new Error('stencil is not properly initialized at this step. Notify the developer');
277
277
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stencil/angular-output-target",
3
- "version": "0.4.0",
3
+ "version": "0.6.1-dev.11648180969.1285dace",
4
4
  "description": "Angular output target for @stencil/core components.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -54,5 +54,5 @@
54
54
  ],
55
55
  "testURL": "http://localhost"
56
56
  },
57
- "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
57
+ "gitHead": "285dace7daf2492f2b10184ebac24d9200d79588"
58
58
  }