@stencil/angular-output-target 0.6.1-dev.11664502361.139bc7c5 → 0.6.1-dev.11669751385.1c42cc9f

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.
package/README.md CHANGED
@@ -27,7 +27,7 @@ export const config: Config = {
27
27
  outputTargets: [
28
28
  angularOutputTarget({
29
29
  componentCorePackage: 'component-library',
30
- proxyDeclarationFile: '../component-library-angular/src/directives/proxies.ts',
30
+ directivesProxyFile: '../component-library-angular/src/directives/proxies.ts',
31
31
  directivesArrayFile: '../component-library-angular/src/directives/index.ts',
32
32
  }),
33
33
  {
@@ -43,7 +43,7 @@ export const config: Config = {
43
43
  | Property | Description |
44
44
  | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
45
45
  | `componentCorePackage` | The NPM package name of your Stencil component library. This package is used as a dependency for your Angular wrappers. |
46
- | `proxyDeclarationFile` | 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. |
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
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
48
  | `valueAccessorConfigs` | The configuration object for how individual web components behave with Angular control value accessors. |
49
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. |
@@ -74,9 +74,10 @@ const formatOutputType = (componentClassName, event) => {
74
74
  .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
75
75
  .reduce((type, [src, dst]) => {
76
76
  const renamedType = `I${componentClassName}${type}`;
77
- return renamedType
77
+ return (renamedType
78
78
  .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
79
- .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
79
+ // Capture all instances of the `src` field surrounded by non-word characters on each side and join them.
80
+ .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join('')));
80
81
  }, event.complexType.original
81
82
  .replace(/\n/g, ' ')
82
83
  .replace(/\s{2,}/g, ' ')
@@ -113,8 +114,14 @@ export const createComponentTypeDefinition = (tagNameAsPascal, events, component
113
114
  });
114
115
  const eventTypes = publicEvents.map((event) => {
115
116
  const comment = createDocComment(event.docs);
117
+ let eventName = event.name;
118
+ if (event.name.includes('-')) {
119
+ // If an event name includes a dash, we need to wrap it in quotes.
120
+ // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
121
+ eventName = `'${event.name}'`;
122
+ }
116
123
  return `${comment.length > 0 ? ` ${comment}` : ''}
117
- ${event.name}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
124
+ ${eventName}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
118
125
  });
119
126
  const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
120
127
  const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
@@ -4,7 +4,7 @@ export function generateAngularDirectivesFile(compilerCtx, components, outputTar
4
4
  if (!outputTarget.directivesArrayFile) {
5
5
  return Promise.resolve();
6
6
  }
7
- const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.proxyDeclarationFile, '.ts');
7
+ const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
8
8
  const directives = components
9
9
  .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
10
10
  .map((className) => `d.${className}`)
@@ -4,7 +4,7 @@ export default async function generateValueAccessors(compilerCtx, components, ou
4
4
  if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
5
5
  return;
6
6
  }
7
- const targetDir = path.dirname(outputTarget.proxyDeclarationFile);
7
+ const targetDir = path.dirname(outputTarget.directivesProxyFile);
8
8
  const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
9
9
  const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
10
10
  const type = va.type;
package/dist/index.cjs.js CHANGED
@@ -205,9 +205,10 @@ const formatOutputType = (componentClassName, event) => {
205
205
  .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
206
206
  .reduce((type, [src, dst]) => {
207
207
  const renamedType = `I${componentClassName}${type}`;
208
- return renamedType
208
+ return (renamedType
209
209
  .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
210
- .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
210
+ // Capture all instances of the `src` field surrounded by non-word characters on each side and join them.
211
+ .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join('')));
211
212
  }, event.complexType.original
212
213
  .replace(/\n/g, ' ')
213
214
  .replace(/\s{2,}/g, ' ')
@@ -244,8 +245,14 @@ const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePac
244
245
  });
245
246
  const eventTypes = publicEvents.map((event) => {
246
247
  const comment = createDocComment(event.docs);
248
+ let eventName = event.name;
249
+ if (event.name.includes('-')) {
250
+ // If an event name includes a dash, we need to wrap it in quotes.
251
+ // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
252
+ eventName = `'${event.name}'`;
253
+ }
247
254
  return `${comment.length > 0 ? ` ${comment}` : ''}
248
- ${event.name}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
255
+ ${eventName}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
249
256
  });
250
257
  const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
251
258
  const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
@@ -262,7 +269,7 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
262
269
  if (!outputTarget.directivesArrayFile) {
263
270
  return Promise.resolve();
264
271
  }
265
- const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.proxyDeclarationFile, '.ts');
272
+ const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
266
273
  const directives = components
267
274
  .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
268
275
  .map((className) => `d.${className}`)
@@ -281,7 +288,7 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
281
288
  if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
282
289
  return;
283
290
  }
284
- const targetDir = path__default['default'].dirname(outputTarget.proxyDeclarationFile);
291
+ const targetDir = path__default['default'].dirname(outputTarget.directivesProxyFile);
285
292
  const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
286
293
  const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
287
294
  const type = va.type;
@@ -338,7 +345,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
338
345
  const pkgData = await readPackageJson(config, rootDir);
339
346
  const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
340
347
  await Promise.all([
341
- compilerCtx.fs.writeFile(outputTarget.proxyDeclarationFile, finalText),
348
+ compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
342
349
  copyResources$1(config, outputTarget),
343
350
  generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
344
351
  generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
@@ -352,7 +359,7 @@ async function copyResources$1(config, outputTarget) {
352
359
  throw new Error('stencil is not properly initialized at this step. Notify the developer');
353
360
  }
354
361
  const srcDirectory = path__default['default'].join(__dirname, '..', 'angular-component-lib');
355
- const destDirectory = path__default['default'].join(path__default['default'].dirname(outputTarget.proxyDeclarationFile), 'angular-component-lib');
362
+ const destDirectory = path__default['default'].join(path__default['default'].dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
356
363
  return config.sys.copy([
357
364
  {
358
365
  src: srcDirectory,
@@ -365,7 +372,7 @@ async function copyResources$1(config, outputTarget) {
365
372
  function generateProxies(components, pkgData, outputTarget, rootDir) {
366
373
  const distTypesDir = path__default['default'].dirname(pkgData.types);
367
374
  const dtsFilePath = path__default['default'].join(rootDir, distTypesDir, GENERATED_DTS);
368
- const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
375
+ const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
369
376
  /**
370
377
  * The collection of named imports from @angular/core.
371
378
  */
@@ -471,14 +478,11 @@ function normalizeOutputTarget(config, outputTarget) {
471
478
  if (config.rootDir == null) {
472
479
  throw new Error('rootDir is not set and it should be set by stencil itself');
473
480
  }
474
- if (outputTarget.directivesProxyFile !== undefined) {
475
- throw new Error('directivesProxyFile has been removed. Use proxyDeclarationFile instead.');
476
- }
477
- if (outputTarget.proxyDeclarationFile == null) {
478
- throw new Error('proxyDeclarationFile is required. Please set it in the Stencil config.');
481
+ if (outputTarget.directivesProxyFile == null) {
482
+ throw new Error('directivesProxyFile is required. Please set it in the Stencil config.');
479
483
  }
480
- if (outputTarget.proxyDeclarationFile && !path__default['default'].isAbsolute(outputTarget.proxyDeclarationFile)) {
481
- results.proxyDeclarationFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.proxyDeclarationFile));
484
+ if (outputTarget.directivesProxyFile && !path__default['default'].isAbsolute(outputTarget.directivesProxyFile)) {
485
+ results.directivesProxyFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesProxyFile));
482
486
  }
483
487
  if (outputTarget.directivesArrayFile && !path__default['default'].isAbsolute(outputTarget.directivesArrayFile)) {
484
488
  results.directivesArrayFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesArrayFile));
package/dist/index.js CHANGED
@@ -197,9 +197,10 @@ const formatOutputType = (componentClassName, event) => {
197
197
  .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
198
198
  .reduce((type, [src, dst]) => {
199
199
  const renamedType = `I${componentClassName}${type}`;
200
- return renamedType
200
+ return (renamedType
201
201
  .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
202
- .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
202
+ // Capture all instances of the `src` field surrounded by non-word characters on each side and join them.
203
+ .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join('')));
203
204
  }, event.complexType.original
204
205
  .replace(/\n/g, ' ')
205
206
  .replace(/\s{2,}/g, ' ')
@@ -236,8 +237,14 @@ const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePac
236
237
  });
237
238
  const eventTypes = publicEvents.map((event) => {
238
239
  const comment = createDocComment(event.docs);
240
+ let eventName = event.name;
241
+ if (event.name.includes('-')) {
242
+ // If an event name includes a dash, we need to wrap it in quotes.
243
+ // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
244
+ eventName = `'${event.name}'`;
245
+ }
239
246
  return `${comment.length > 0 ? ` ${comment}` : ''}
240
- ${event.name}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
247
+ ${eventName}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
241
248
  });
242
249
  const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
243
250
  const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
@@ -254,7 +261,7 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
254
261
  if (!outputTarget.directivesArrayFile) {
255
262
  return Promise.resolve();
256
263
  }
257
- const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.proxyDeclarationFile, '.ts');
264
+ const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
258
265
  const directives = components
259
266
  .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
260
267
  .map((className) => `d.${className}`)
@@ -273,7 +280,7 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
273
280
  if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
274
281
  return;
275
282
  }
276
- const targetDir = path.dirname(outputTarget.proxyDeclarationFile);
283
+ const targetDir = path.dirname(outputTarget.directivesProxyFile);
277
284
  const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
278
285
  const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
279
286
  const type = va.type;
@@ -330,7 +337,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
330
337
  const pkgData = await readPackageJson(config, rootDir);
331
338
  const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
332
339
  await Promise.all([
333
- compilerCtx.fs.writeFile(outputTarget.proxyDeclarationFile, finalText),
340
+ compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
334
341
  copyResources$1(config, outputTarget),
335
342
  generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
336
343
  generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
@@ -344,7 +351,7 @@ async function copyResources$1(config, outputTarget) {
344
351
  throw new Error('stencil is not properly initialized at this step. Notify the developer');
345
352
  }
346
353
  const srcDirectory = path.join(__dirname, '..', 'angular-component-lib');
347
- const destDirectory = path.join(path.dirname(outputTarget.proxyDeclarationFile), 'angular-component-lib');
354
+ const destDirectory = path.join(path.dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
348
355
  return config.sys.copy([
349
356
  {
350
357
  src: srcDirectory,
@@ -357,7 +364,7 @@ async function copyResources$1(config, outputTarget) {
357
364
  function generateProxies(components, pkgData, outputTarget, rootDir) {
358
365
  const distTypesDir = path.dirname(pkgData.types);
359
366
  const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
360
- const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
367
+ const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
361
368
  /**
362
369
  * The collection of named imports from @angular/core.
363
370
  */
@@ -463,14 +470,11 @@ function normalizeOutputTarget(config, outputTarget) {
463
470
  if (config.rootDir == null) {
464
471
  throw new Error('rootDir is not set and it should be set by stencil itself');
465
472
  }
466
- if (outputTarget.directivesProxyFile !== undefined) {
467
- throw new Error('directivesProxyFile has been removed. Use proxyDeclarationFile instead.');
468
- }
469
- if (outputTarget.proxyDeclarationFile == null) {
470
- throw new Error('proxyDeclarationFile is required. Please set it in the Stencil config.');
473
+ if (outputTarget.directivesProxyFile == null) {
474
+ throw new Error('directivesProxyFile is required. Please set it in the Stencil config.');
471
475
  }
472
- if (outputTarget.proxyDeclarationFile && !path.isAbsolute(outputTarget.proxyDeclarationFile)) {
473
- results.proxyDeclarationFile = normalizePath(path.join(config.rootDir, outputTarget.proxyDeclarationFile));
476
+ if (outputTarget.directivesProxyFile && !path.isAbsolute(outputTarget.directivesProxyFile)) {
477
+ results.directivesProxyFile = normalizePath(path.join(config.rootDir, outputTarget.directivesProxyFile));
474
478
  }
475
479
  if (outputTarget.directivesArrayFile && !path.isAbsolute(outputTarget.directivesArrayFile)) {
476
480
  results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));
@@ -9,7 +9,7 @@ export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, com
9
9
  const pkgData = await readPackageJson(config, rootDir);
10
10
  const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
11
11
  await Promise.all([
12
- compilerCtx.fs.writeFile(outputTarget.proxyDeclarationFile, finalText),
12
+ compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
13
13
  copyResources(config, outputTarget),
14
14
  generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
15
15
  generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
@@ -23,7 +23,7 @@ async function copyResources(config, outputTarget) {
23
23
  throw new Error('stencil is not properly initialized at this step. Notify the developer');
24
24
  }
25
25
  const srcDirectory = path.join(__dirname, '..', 'angular-component-lib');
26
- const destDirectory = path.join(path.dirname(outputTarget.proxyDeclarationFile), 'angular-component-lib');
26
+ const destDirectory = path.join(path.dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
27
27
  return config.sys.copy([
28
28
  {
29
29
  src: srcDirectory,
@@ -36,7 +36,7 @@ async function copyResources(config, outputTarget) {
36
36
  export function generateProxies(components, pkgData, outputTarget, rootDir) {
37
37
  const distTypesDir = path.dirname(pkgData.types);
38
38
  const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
39
- const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
39
+ const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
40
40
  /**
41
41
  * The collection of named imports from @angular/core.
42
42
  */
package/dist/plugin.js CHANGED
@@ -18,14 +18,11 @@ export function normalizeOutputTarget(config, outputTarget) {
18
18
  if (config.rootDir == null) {
19
19
  throw new Error('rootDir is not set and it should be set by stencil itself');
20
20
  }
21
- if (outputTarget.directivesProxyFile !== undefined) {
22
- throw new Error('directivesProxyFile has been removed. Use proxyDeclarationFile instead.');
21
+ if (outputTarget.directivesProxyFile == null) {
22
+ throw new Error('directivesProxyFile is required. Please set it in the Stencil config.');
23
23
  }
24
- if (outputTarget.proxyDeclarationFile == null) {
25
- throw new Error('proxyDeclarationFile is required. Please set it in the Stencil config.');
26
- }
27
- if (outputTarget.proxyDeclarationFile && !path.isAbsolute(outputTarget.proxyDeclarationFile)) {
28
- results.proxyDeclarationFile = normalizePath(path.join(config.rootDir, outputTarget.proxyDeclarationFile));
24
+ if (outputTarget.directivesProxyFile && !path.isAbsolute(outputTarget.directivesProxyFile)) {
25
+ results.directivesProxyFile = normalizePath(path.join(config.rootDir, outputTarget.directivesProxyFile));
29
26
  }
30
27
  if (outputTarget.directivesArrayFile && !path.isAbsolute(outputTarget.directivesArrayFile)) {
31
28
  results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));
package/dist/types.d.ts CHANGED
@@ -4,17 +4,13 @@ export interface OutputTargetAngular {
4
4
  * This is used to generate the import statements.
5
5
  */
6
6
  componentCorePackage: string;
7
- /**
8
- * @deprecated Use `proxyDeclarationFile` instead. This property has been replaced.
9
- */
10
- directivesProxyFile?: string;
11
- directivesArrayFile?: string;
12
- directivesUtilsFile?: string;
13
7
  /**
14
8
  * The path to the proxy file that will be generated. This can be an absolute path
15
9
  * or a relative path from the root directory of the Stencil library.
16
10
  */
17
- proxyDeclarationFile: string;
11
+ directivesProxyFile: string;
12
+ directivesArrayFile?: string;
13
+ directivesUtilsFile?: string;
18
14
  valueAccessorConfigs?: ValueAccessorConfig[];
19
15
  excludeComponents?: string[];
20
16
  includeImportCustomElements?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stencil/angular-output-target",
3
- "version": "0.6.1-dev.11664502361.139bc7c5",
3
+ "version": "0.6.1-dev.11669751385.1c42cc9f",
4
4
  "description": "Angular output target for @stencil/core components.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",
@@ -58,5 +58,5 @@
58
58
  ],
59
59
  "testURL": "http://localhost"
60
60
  },
61
- "gitHead": "39bc7c5aab00038b7b440f51d510010f506a1c54"
61
+ "gitHead": "c42cc9fa407385abf8612cede969bf70d8786258"
62
62
  }