@stencil/angular-output-target 0.0.7 → 0.2.1

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 (9) hide show
  1. package/angular-component-lib/utils.ts +11 -8
  2. package/dist/generate-angular-component.js +46 -18
  3. package/dist/generate-angular-directives-file.js +1 -1
  4. package/dist/index.cjs.js +48 -19
  5. package/dist/index.js +48 -19
  6. package/dist/output-angular.js +1 -1
  7. package/dist/utils.d.ts +1 -0
  8. package/dist/utils.js +3 -0
  9. package/package.json +1 -1
package/angular-component-lib/utils.ts CHANGED
@@ -1,36 +1,39 @@
1
+ /* eslint-disable */
2
+ /* tslint:disable */
1
3
  import { fromEvent } from 'rxjs';
2
4
 
3
5
  export const proxyInputs = (Cmp: any, inputs: string[]) => {
4
6
  const Prototype = Cmp.prototype;
5
- inputs.forEach((item) => {
7
+ inputs.forEach(item => {
6
8
  Object.defineProperty(Prototype, item, {
7
9
  get() {
8
10
  return this.el[item];
9
11
  },
10
12
  set(val: any) {
11
13
  this.z.runOutsideAngular(() => (this.el[item] = val));
12
- },
14
+ }
13
15
  });
14
16
  });
15
17
  };
16
18
 
17
19
  export const proxyMethods = (Cmp: any, methods: string[]) => {
18
20
  const Prototype = Cmp.prototype;
19
- methods.forEach((methodName) => {
21
+ methods.forEach(methodName => {
20
22
  Prototype[methodName] = function () {
21
23
  const args = arguments;
22
- return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
24
+ return this.z.runOutsideAngular(() =>
25
+ this.el[methodName].apply(this.el, args)
26
+ );
23
27
  };
24
28
  });
25
29
  };
26
30
 
27
31
  export const proxyOutputs = (instance: any, el: any, events: string[]) => {
28
- events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
29
- };
32
+ events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
33
+ }
30
34
 
31
- // tslint:disable-next-line: only-arrow-functions
32
35
  export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
33
- const decorator = function (cls: any) {
36
+ const decorator = function(cls: any) {
34
37
  if (opts.inputs) {
35
38
  proxyInputs(cls, opts.inputs);
36
39
  }
package/dist/generate-angular-component.js CHANGED
@@ -1,5 +1,4 @@
1
- import path from 'path';
2
- import { dashToPascalCase, normalizePath } from './utils';
1
+ import { dashToPascalCase } from './utils';
3
2
  export const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
4
3
  // Collect component meta
5
4
  const inputs = [
@@ -19,30 +18,59 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
19
18
  if (inputs.length > 0) {
20
19
  directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
21
20
  }
22
- if (outputs.length > 0) {
23
- directiveOpts.push(`outputs: ['${outputs.map((output) => output.name).join(`', '`)}']`);
24
- }
25
21
  const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
26
- const typePath = path.parse(path.join(componentCorePackage, path.join(cmpMeta.sourceFilePath, '').replace(path.join(rootDir, 'src'), distTypesDir)));
27
- const importPath = normalizePath(path.join(typePath.dir, typePath.name));
28
- const outputsInterface = outputs.length > 0
29
- ? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
30
- : '';
22
+ const outputsInterface = new Set();
23
+ const outputReferenceRemap = {};
24
+ outputs.forEach((output) => {
25
+ Object.entries(output.complexType.references).forEach(([reference, refObject]) => {
26
+ // Add import line for each local/import reference, and add new mapping name.
27
+ // `outputReferenceRemap` should be updated only if the import interface is set in outputsInterface,
28
+ // this will prevent global types to be remapped.
29
+ const remappedReference = `I${cmpMeta.componentClassName}${reference}`;
30
+ if (refObject.location === 'local' || refObject.location === 'import') {
31
+ outputReferenceRemap[reference] = remappedReference;
32
+ outputsInterface.add(`import { ${reference} as ${remappedReference} } from '${componentCorePackage}';`);
33
+ }
34
+ });
35
+ });
36
+ const componentEvents = [
37
+ '' // Empty first line
38
+ ];
39
+ // Generate outputs
40
+ outputs.forEach((output, index) => {
41
+ componentEvents.push(` /**
42
+ * ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}
43
+ */`);
44
+ /**
45
+ * The original attribute contains the original type defined by the devs.
46
+ * This regexp normalizes the reference, by removing linebreaks,
47
+ * replacing consecutive spaces with a single space, and adding a single space after commas.
48
+ **/
49
+ const outputTypeRemapped = Object.entries(outputReferenceRemap).reduce((type, [src, dst]) => {
50
+ return type
51
+ .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
52
+ .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
53
+ }, output.complexType.original
54
+ .replace(/\n/g, ' ')
55
+ .replace(/\s{2,}/g, ' ')
56
+ .replace(/,\s*/g, ', '));
57
+ componentEvents.push(` ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
58
+ if (index === outputs.length - 1) {
59
+ // Empty line to push end `}` to new line
60
+ componentEvents.push('\n');
61
+ }
62
+ });
31
63
  const lines = [
32
- `
33
- ${outputsInterface}
34
- export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
64
+ '',
65
+ `${[...outputsInterface].join('\n')}
66
+ export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {${componentEvents.length > 1 ? componentEvents.join('\n') : ''}}
67
+
35
68
  ${getProxyCmp(inputs, methods)}
36
69
  @Component({
37
70
  ${directiveOpts.join(',\n ')}
38
71
  })
39
72
  export class ${tagNameAsPascal} {`,
40
73
  ];
41
- // Generate outputs
42
- outputs.forEach((output) => {
43
- lines.push(` /** ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}*/`);
44
- lines.push(` ${output.name}!: I${cmpMeta.componentClassName}['${output.method}'];`);
45
- });
46
74
  lines.push(' protected el: HTMLElement;');
47
75
  lines.push(` constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
48
76
  c.detach();
package/dist/generate-angular-directives-file.js CHANGED
@@ -13,7 +13,7 @@ export function generateAngularDirectivesFile(compilerCtx, components, outputTar
13
13
  import * as d from '${proxyPath}';
14
14
 
15
15
  export const DIRECTIVES = [
16
- ${directives}
16
+ ${directives}
17
17
  ];
18
18
  `;
19
19
  return compilerCtx.fs.writeFile(outputTarget.directivesArrayFile, c);
package/dist/index.cjs.js CHANGED
@@ -107,30 +107,59 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
107
107
  if (inputs.length > 0) {
108
108
  directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
109
109
  }
110
- if (outputs.length > 0) {
111
- directiveOpts.push(`outputs: ['${outputs.map((output) => output.name).join(`', '`)}']`);
112
- }
113
110
  const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
114
- const typePath = path__default['default'].parse(path__default['default'].join(componentCorePackage, path__default['default'].join(cmpMeta.sourceFilePath, '').replace(path__default['default'].join(rootDir, 'src'), distTypesDir)));
115
- const importPath = normalizePath(path__default['default'].join(typePath.dir, typePath.name));
116
- const outputsInterface = outputs.length > 0
117
- ? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
118
- : '';
111
+ const outputsInterface = new Set();
112
+ const outputReferenceRemap = {};
113
+ outputs.forEach((output) => {
114
+ Object.entries(output.complexType.references).forEach(([reference, refObject]) => {
115
+ // Add import line for each local/import reference, and add new mapping name.
116
+ // `outputReferenceRemap` should be updated only if the import interface is set in outputsInterface,
117
+ // this will prevent global types to be remapped.
118
+ const remappedReference = `I${cmpMeta.componentClassName}${reference}`;
119
+ if (refObject.location === 'local' || refObject.location === 'import') {
120
+ outputReferenceRemap[reference] = remappedReference;
121
+ outputsInterface.add(`import { ${reference} as ${remappedReference} } from '${componentCorePackage}';`);
122
+ }
123
+ });
124
+ });
125
+ const componentEvents = [
126
+ '' // Empty first line
127
+ ];
128
+ // Generate outputs
129
+ outputs.forEach((output, index) => {
130
+ componentEvents.push(` /**
131
+ * ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}
132
+ */`);
133
+ /**
134
+ * The original attribute contains the original type defined by the devs.
135
+ * This regexp normalizes the reference, by removing linebreaks,
136
+ * replacing consecutive spaces with a single space, and adding a single space after commas.
137
+ **/
138
+ const outputTypeRemapped = Object.entries(outputReferenceRemap).reduce((type, [src, dst]) => {
139
+ return type
140
+ .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
141
+ .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
142
+ }, output.complexType.original
143
+ .replace(/\n/g, ' ')
144
+ .replace(/\s{2,}/g, ' ')
145
+ .replace(/,\s*/g, ', '));
146
+ componentEvents.push(` ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
147
+ if (index === outputs.length - 1) {
148
+ // Empty line to push end `}` to new line
149
+ componentEvents.push('\n');
150
+ }
151
+ });
119
152
  const lines = [
120
- `
121
- ${outputsInterface}
122
- export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
153
+ '',
154
+ `${[...outputsInterface].join('\n')}
155
+ export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {${componentEvents.length > 1 ? componentEvents.join('\n') : ''}}
156
+
123
157
  ${getProxyCmp(inputs, methods)}
124
158
  @Component({
125
159
  ${directiveOpts.join(',\n ')}
126
160
  })
127
161
  export class ${tagNameAsPascal} {`,
128
162
  ];
129
- // Generate outputs
130
- outputs.forEach((output) => {
131
- lines.push(` /** ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}*/`);
132
- lines.push(` ${output.name}!: I${cmpMeta.componentClassName}['${output.method}'];`);
133
- });
134
163
  lines.push(' protected el: HTMLElement;');
135
164
  lines.push(` constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
136
165
  c.detach();
@@ -170,7 +199,7 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
170
199
  import * as d from '${proxyPath}';
171
200
 
172
201
  export const DIRECTIVES = [
173
- ${directives}
202
+ ${directives}
174
203
  ];
175
204
  `;
176
205
  return compilerCtx.fs.writeFile(outputTarget.directivesArrayFile, c);
@@ -270,7 +299,7 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
270
299
  const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
271
300
  const imports = `/* tslint:disable */
272
301
  /* auto-generated angular directive proxies */
273
- import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone } from '@angular/core';
302
+ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
274
303
  import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
275
304
  const typeImports = !outputTarget.componentCorePackage
276
305
  ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
@@ -279,7 +308,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
279
308
  imports,
280
309
  typeImports,
281
310
  components
282
- .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir))
311
+ .map(createComponentDefinition(outputTarget.componentCorePackage))
283
312
  .join('\n'),
284
313
  ];
285
314
  return final.join('\n') + '\n';
package/dist/index.js CHANGED
@@ -98,30 +98,59 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
98
98
  if (inputs.length > 0) {
99
99
  directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
100
100
  }
101
- if (outputs.length > 0) {
102
- directiveOpts.push(`outputs: ['${outputs.map((output) => output.name).join(`', '`)}']`);
103
- }
104
101
  const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
105
- const typePath = path.parse(path.join(componentCorePackage, path.join(cmpMeta.sourceFilePath, '').replace(path.join(rootDir, 'src'), distTypesDir)));
106
- const importPath = normalizePath(path.join(typePath.dir, typePath.name));
107
- const outputsInterface = outputs.length > 0
108
- ? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
109
- : '';
102
+ const outputsInterface = new Set();
103
+ const outputReferenceRemap = {};
104
+ outputs.forEach((output) => {
105
+ Object.entries(output.complexType.references).forEach(([reference, refObject]) => {
106
+ // Add import line for each local/import reference, and add new mapping name.
107
+ // `outputReferenceRemap` should be updated only if the import interface is set in outputsInterface,
108
+ // this will prevent global types to be remapped.
109
+ const remappedReference = `I${cmpMeta.componentClassName}${reference}`;
110
+ if (refObject.location === 'local' || refObject.location === 'import') {
111
+ outputReferenceRemap[reference] = remappedReference;
112
+ outputsInterface.add(`import { ${reference} as ${remappedReference} } from '${componentCorePackage}';`);
113
+ }
114
+ });
115
+ });
116
+ const componentEvents = [
117
+ '' // Empty first line
118
+ ];
119
+ // Generate outputs
120
+ outputs.forEach((output, index) => {
121
+ componentEvents.push(` /**
122
+ * ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}
123
+ */`);
124
+ /**
125
+ * The original attribute contains the original type defined by the devs.
126
+ * This regexp normalizes the reference, by removing linebreaks,
127
+ * replacing consecutive spaces with a single space, and adding a single space after commas.
128
+ **/
129
+ const outputTypeRemapped = Object.entries(outputReferenceRemap).reduce((type, [src, dst]) => {
130
+ return type
131
+ .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
132
+ .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
133
+ }, output.complexType.original
134
+ .replace(/\n/g, ' ')
135
+ .replace(/\s{2,}/g, ' ')
136
+ .replace(/,\s*/g, ', '));
137
+ componentEvents.push(` ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
138
+ if (index === outputs.length - 1) {
139
+ // Empty line to push end `}` to new line
140
+ componentEvents.push('\n');
141
+ }
142
+ });
110
143
  const lines = [
111
- `
112
- ${outputsInterface}
113
- export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
144
+ '',
145
+ `${[...outputsInterface].join('\n')}
146
+ export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {${componentEvents.length > 1 ? componentEvents.join('\n') : ''}}
147
+
114
148
  ${getProxyCmp(inputs, methods)}
115
149
  @Component({
116
150
  ${directiveOpts.join(',\n ')}
117
151
  })
118
152
  export class ${tagNameAsPascal} {`,
119
153
  ];
120
- // Generate outputs
121
- outputs.forEach((output) => {
122
- lines.push(` /** ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}*/`);
123
- lines.push(` ${output.name}!: I${cmpMeta.componentClassName}['${output.method}'];`);
124
- });
125
154
  lines.push(' protected el: HTMLElement;');
126
155
  lines.push(` constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
127
156
  c.detach();
@@ -161,7 +190,7 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
161
190
  import * as d from '${proxyPath}';
162
191
 
163
192
  export const DIRECTIVES = [
164
- ${directives}
193
+ ${directives}
165
194
  ];
166
195
  `;
167
196
  return compilerCtx.fs.writeFile(outputTarget.directivesArrayFile, c);
@@ -261,7 +290,7 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
261
290
  const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
262
291
  const imports = `/* tslint:disable */
263
292
  /* auto-generated angular directive proxies */
264
- import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone } from '@angular/core';
293
+ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
265
294
  import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
266
295
  const typeImports = !outputTarget.componentCorePackage
267
296
  ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
@@ -270,7 +299,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
270
299
  imports,
271
300
  typeImports,
272
301
  components
273
- .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir))
302
+ .map(createComponentDefinition(outputTarget.componentCorePackage))
274
303
  .join('\n'),
275
304
  ];
276
305
  return final.join('\n') + '\n';
package/dist/output-angular.js CHANGED
@@ -39,7 +39,7 @@ export function generateProxies(components, pkgData, outputTarget, rootDir) {
39
39
  const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
40
40
  const imports = `/* tslint:disable */
41
41
  /* auto-generated angular directive proxies */
42
- import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone } from '@angular/core';
42
+ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
43
43
  import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
44
44
  const typeImports = !outputTarget.componentCorePackage
45
45
  ? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
package/dist/utils.d.ts CHANGED
@@ -4,4 +4,5 @@ export declare const dashToPascalCase: (str: string) => string;
4
4
  export declare function sortBy<T>(array: T[], prop: (item: T) => string): T[];
5
5
  export declare function normalizePath(str: string): string;
6
6
  export declare function relativeImport(pathFrom: string, pathTo: string, ext?: string): string;
7
+ export declare function isRelativePath(path: string): boolean | "";
7
8
  export declare function readPackageJson(rootDir: string): Promise<PackageJSON>;
package/dist/utils.js CHANGED
@@ -55,6 +55,9 @@ export function relativeImport(pathFrom, pathTo, ext) {
55
55
  }
56
56
  return normalizePath(`${relativePath}/${path.basename(pathTo, ext)}`);
57
57
  }
58
+ export function isRelativePath(path) {
59
+ return path && path.startsWith('.');
60
+ }
58
61
  export async function readPackageJson(rootDir) {
59
62
  const pkgJsonPath = path.join(rootDir, 'package.json');
60
63
  let pkgJson;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stencil/angular-output-target",
3
- "version": "0.0.7",
3
+ "version": "0.2.1",
4
4
  "description": "Angular output target for @stencil/core components.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",