@baloise/angular-output-target 1.0.5 → 1.0.15
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +66 -0
- package/dist/generate-angular-component.js +12 -19
- package/dist/generate-value-accessors.js +5 -8
- package/dist/index.cjs.js +21 -30
- package/dist/index.js +21 -30
- package/package.json +11 -4
- package/resources/control-value-accessors/boolean-value-accessor.ts +9 -9
- package/resources/control-value-accessors/number-value-accessor.ts +10 -10
- package/resources/control-value-accessors/radio-value-accessor.ts +8 -8
- package/resources/control-value-accessors/select-value-accessor.ts +8 -8
- package/resources/control-value-accessors/text-value-accessor.ts +8 -8
package/CHANGELOG.md
CHANGED
@@ -3,3 +3,69 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [1.0.13](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.12...@baloise/angular-output-target@1.0.13) (2021-06-01)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @baloise/angular-output-target
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
|
13
|
+
|
14
|
+
## [1.0.12](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.11...@baloise/angular-output-target@1.0.12) (2021-05-07)
|
15
|
+
|
16
|
+
**Note:** Version bump only for package @baloise/angular-output-target
|
17
|
+
|
18
|
+
|
19
|
+
|
20
|
+
|
21
|
+
|
22
|
+
## [1.0.11](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.10...@baloise/angular-output-target@1.0.11) (2021-05-07)
|
23
|
+
|
24
|
+
|
25
|
+
### Bug Fixes
|
26
|
+
|
27
|
+
* remove ui-library and use variable instead ([f86568a](https://github.com/baloise/stencil-ds-output-targets/commit/f86568a27f9e2c80b35d1e201ab7822cc5e58d03))
|
28
|
+
|
29
|
+
|
30
|
+
|
31
|
+
|
32
|
+
|
33
|
+
## [1.0.10](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.9...@baloise/angular-output-target@1.0.10) (2021-04-15)
|
34
|
+
|
35
|
+
**Note:** Version bump only for package @baloise/angular-output-target
|
36
|
+
|
37
|
+
|
38
|
+
|
39
|
+
|
40
|
+
|
41
|
+
## [1.0.9](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.8...@baloise/angular-output-target@1.0.9) (2021-04-15)
|
42
|
+
|
43
|
+
**Note:** Version bump only for package @baloise/angular-output-target
|
44
|
+
|
45
|
+
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
## [1.0.8](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.7...@baloise/angular-output-target@1.0.8) (2021-04-13)
|
50
|
+
|
51
|
+
**Note:** Version bump only for package @baloise/angular-output-target
|
52
|
+
|
53
|
+
|
54
|
+
|
55
|
+
|
56
|
+
|
57
|
+
## [1.0.7](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.6...@baloise/angular-output-target@1.0.7) (2021-02-13)
|
58
|
+
|
59
|
+
|
60
|
+
### Bug Fixes
|
61
|
+
|
62
|
+
* **angular:** remove unused interfaces ([e21f4fa](https://github.com/baloise/stencil-ds-output-targets/commit/e21f4fadf8e0f0ed7da8a52276162c374785a2b2))
|
63
|
+
* **angular:** remove unused interfaces ([bb19a4b](https://github.com/baloise/stencil-ds-output-targets/commit/bb19a4b1d48460d1f854692490804132427fcd63))
|
64
|
+
|
65
|
+
|
66
|
+
|
67
|
+
|
68
|
+
|
69
|
+
## [1.0.6](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.5...@baloise/angular-output-target@1.0.6) (2021-02-03)
|
70
|
+
|
71
|
+
**Note:** Version bump only for package @baloise/angular-output-target
|
@@ -1,13 +1,12 @@
|
|
1
|
-
import
|
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 = [
|
6
|
-
...cmpMeta.properties.filter(
|
7
|
-
...cmpMeta.virtualProperties.map(
|
5
|
+
...cmpMeta.properties.filter(prop => !prop.internal).map(prop => prop.name),
|
6
|
+
...cmpMeta.virtualProperties.map(prop => prop.name),
|
8
7
|
].sort();
|
9
|
-
const outputs = cmpMeta.events.filter(
|
10
|
-
const methods = cmpMeta.methods.filter(
|
8
|
+
const outputs = cmpMeta.events.filter(ev => !ev.internal).map(prop => prop);
|
9
|
+
const methods = cmpMeta.methods.filter(method => !method.internal).map(prop => prop.name);
|
11
10
|
// Process meta
|
12
11
|
const hasOutputs = outputs.length > 0;
|
13
12
|
// Generate Angular @Directive
|
@@ -20,28 +19,22 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
|
|
20
19
|
directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
|
21
20
|
}
|
22
21
|
if (outputs.length > 0) {
|
23
|
-
directiveOpts.push(`outputs: ['${outputs.map(
|
22
|
+
directiveOpts.push(`outputs: ['${outputs.map(output => output.name).join(`', '`)}']`);
|
24
23
|
}
|
25
24
|
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
|
-
: '';
|
31
25
|
let outputsTypes = outputs
|
32
|
-
.filter(
|
26
|
+
.filter(output => !!output.complexType.references &&
|
33
27
|
Object.prototype.hasOwnProperty.call(output.complexType.references, output.complexType.original) &&
|
34
28
|
output.complexType.references[output.complexType.original].location === 'import')
|
35
|
-
.map(
|
29
|
+
.map(output => output.complexType.original)
|
36
30
|
.filter((item, pos, self) => self.indexOf(item) === pos)
|
37
31
|
.join(', ');
|
38
32
|
if (outputsTypes.length > 0) {
|
39
|
-
outputsTypes = `import { ${outputsTypes} } from '
|
33
|
+
outputsTypes = `import { ${outputsTypes} } from '${componentCorePackage}';`;
|
40
34
|
}
|
41
35
|
const lines = [
|
42
36
|
`
|
43
37
|
${outputsTypes}
|
44
|
-
${outputsInterface}
|
45
38
|
export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
|
46
39
|
${getProxyCmp(inputs, methods)}
|
47
40
|
@Component({
|
@@ -50,8 +43,8 @@ ${getProxyCmp(inputs, methods)}
|
|
50
43
|
export class ${tagNameAsPascal} {`,
|
51
44
|
];
|
52
45
|
// Generate outputs
|
53
|
-
outputs.forEach(
|
54
|
-
lines.push(` /** ${output.docs.text} ${output.docs.tags.map(
|
46
|
+
outputs.forEach(output => {
|
47
|
+
lines.push(` /** ${output.docs.text} ${output.docs.tags.map(tag => `@${tag.name} ${tag.text}`)}*/`);
|
55
48
|
lines.push(` ${output.name}!: EventEmitter<CustomEvent<${output.complexType.resolved}>>;`);
|
56
49
|
});
|
57
50
|
lines.push(' protected el: HTMLElement;');
|
@@ -59,7 +52,7 @@ export class ${tagNameAsPascal} {`,
|
|
59
52
|
c.detach();
|
60
53
|
this.el = r.nativeElement;`);
|
61
54
|
if (hasOutputs) {
|
62
|
-
lines.push(` proxyOutputs(this, this.el, ['${outputs.map(
|
55
|
+
lines.push(` proxyOutputs(this, this.el, ['${outputs.map(output => output.name).join(`', '`)}']);`);
|
63
56
|
}
|
64
57
|
lines.push(` }`);
|
65
58
|
lines.push(`}`);
|
@@ -1,14 +1,11 @@
|
|
1
1
|
import path from 'path';
|
2
2
|
export default async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
|
3
|
-
if (!Array.isArray(outputTarget.valueAccessorConfigs) ||
|
4
|
-
outputTarget.valueAccessorConfigs.length === 0) {
|
3
|
+
if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
|
5
4
|
return;
|
6
5
|
}
|
7
6
|
const targetDir = path.dirname(outputTarget.directivesProxyFile);
|
8
7
|
const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
|
9
|
-
const elementSelectors = Array.isArray(va.elementSelectors)
|
10
|
-
? va.elementSelectors
|
11
|
-
: [va.elementSelectors];
|
8
|
+
const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
|
12
9
|
const type = va.type;
|
13
10
|
let allElementSelectors = [];
|
14
11
|
let allEventTargets = [];
|
@@ -33,7 +30,7 @@ export default async function generateValueAccessors(compilerCtx, components, ou
|
|
33
30
|
await copyResources(config, ['value-accessor.ts'], targetDir);
|
34
31
|
}
|
35
32
|
function createValueAccessor(srcFileContents, valueAccessor) {
|
36
|
-
const hostContents = valueAccessor.eventTargets.map(
|
33
|
+
const hostContents = valueAccessor.eventTargets.map(listItem => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
|
37
34
|
return srcFileContents
|
38
35
|
.replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
|
39
36
|
.replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(',\n'));
|
@@ -42,7 +39,7 @@ function copyResources(config, resourcesFilesToCopy, directory) {
|
|
42
39
|
if (!config.sys || !config.sys.copy) {
|
43
40
|
throw new Error('stencil is not properly intialized at this step. Notify the developer');
|
44
41
|
}
|
45
|
-
const copyTasks = resourcesFilesToCopy.map(
|
42
|
+
const copyTasks = resourcesFilesToCopy.map(rf => {
|
46
43
|
return {
|
47
44
|
src: path.join(__dirname, '../resources/control-value-accessors/', rf),
|
48
45
|
dest: path.join(directory, rf),
|
@@ -55,4 +52,4 @@ function copyResources(config, resourcesFilesToCopy, directory) {
|
|
55
52
|
const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
|
56
53
|
const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
|
57
54
|
const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
|
58
|
-
const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.
|
55
|
+
const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
|
package/dist/index.cjs.js
CHANGED
@@ -90,11 +90,11 @@ const SLASH_REGEX = /\\/g;
|
|
90
90
|
const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
|
91
91
|
// Collect component meta
|
92
92
|
const inputs = [
|
93
|
-
...cmpMeta.properties.filter(
|
94
|
-
...cmpMeta.virtualProperties.map(
|
93
|
+
...cmpMeta.properties.filter(prop => !prop.internal).map(prop => prop.name),
|
94
|
+
...cmpMeta.virtualProperties.map(prop => prop.name),
|
95
95
|
].sort();
|
96
|
-
const outputs = cmpMeta.events.filter(
|
97
|
-
const methods = cmpMeta.methods.filter(
|
96
|
+
const outputs = cmpMeta.events.filter(ev => !ev.internal).map(prop => prop);
|
97
|
+
const methods = cmpMeta.methods.filter(method => !method.internal).map(prop => prop.name);
|
98
98
|
// Process meta
|
99
99
|
const hasOutputs = outputs.length > 0;
|
100
100
|
// Generate Angular @Directive
|
@@ -107,28 +107,22 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
|
|
107
107
|
directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
|
108
108
|
}
|
109
109
|
if (outputs.length > 0) {
|
110
|
-
directiveOpts.push(`outputs: ['${outputs.map(
|
110
|
+
directiveOpts.push(`outputs: ['${outputs.map(output => output.name).join(`', '`)}']`);
|
111
111
|
}
|
112
112
|
const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
|
113
|
-
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)));
|
114
|
-
const importPath = normalizePath(path__default['default'].join(typePath.dir, typePath.name));
|
115
|
-
const outputsInterface = outputs.length > 0
|
116
|
-
? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
|
117
|
-
: '';
|
118
113
|
let outputsTypes = outputs
|
119
|
-
.filter(
|
114
|
+
.filter(output => !!output.complexType.references &&
|
120
115
|
Object.prototype.hasOwnProperty.call(output.complexType.references, output.complexType.original) &&
|
121
116
|
output.complexType.references[output.complexType.original].location === 'import')
|
122
|
-
.map(
|
117
|
+
.map(output => output.complexType.original)
|
123
118
|
.filter((item, pos, self) => self.indexOf(item) === pos)
|
124
119
|
.join(', ');
|
125
120
|
if (outputsTypes.length > 0) {
|
126
|
-
outputsTypes = `import { ${outputsTypes} } from '
|
121
|
+
outputsTypes = `import { ${outputsTypes} } from '${componentCorePackage}';`;
|
127
122
|
}
|
128
123
|
const lines = [
|
129
124
|
`
|
130
125
|
${outputsTypes}
|
131
|
-
${outputsInterface}
|
132
126
|
export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
|
133
127
|
${getProxyCmp(inputs, methods)}
|
134
128
|
@Component({
|
@@ -137,8 +131,8 @@ ${getProxyCmp(inputs, methods)}
|
|
137
131
|
export class ${tagNameAsPascal} {`,
|
138
132
|
];
|
139
133
|
// Generate outputs
|
140
|
-
outputs.forEach(
|
141
|
-
lines.push(` /** ${output.docs.text} ${output.docs.tags.map(
|
134
|
+
outputs.forEach(output => {
|
135
|
+
lines.push(` /** ${output.docs.text} ${output.docs.tags.map(tag => `@${tag.name} ${tag.text}`)}*/`);
|
142
136
|
lines.push(` ${output.name}!: EventEmitter<CustomEvent<${output.complexType.resolved}>>;`);
|
143
137
|
});
|
144
138
|
lines.push(' protected el: HTMLElement;');
|
@@ -146,7 +140,7 @@ export class ${tagNameAsPascal} {`,
|
|
146
140
|
c.detach();
|
147
141
|
this.el = r.nativeElement;`);
|
148
142
|
if (hasOutputs) {
|
149
|
-
lines.push(` proxyOutputs(this, this.el, ['${outputs.map(
|
143
|
+
lines.push(` proxyOutputs(this, this.el, ['${outputs.map(output => output.name).join(`', '`)}']);`);
|
150
144
|
}
|
151
145
|
lines.push(` }`);
|
152
146
|
lines.push(`}`);
|
@@ -187,15 +181,12 @@ ${directives}
|
|
187
181
|
}
|
188
182
|
|
189
183
|
async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
|
190
|
-
if (!Array.isArray(outputTarget.valueAccessorConfigs) ||
|
191
|
-
outputTarget.valueAccessorConfigs.length === 0) {
|
184
|
+
if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
|
192
185
|
return;
|
193
186
|
}
|
194
187
|
const targetDir = path__default['default'].dirname(outputTarget.directivesProxyFile);
|
195
188
|
const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
|
196
|
-
const elementSelectors = Array.isArray(va.elementSelectors)
|
197
|
-
? va.elementSelectors
|
198
|
-
: [va.elementSelectors];
|
189
|
+
const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
|
199
190
|
const type = va.type;
|
200
191
|
let allElementSelectors = [];
|
201
192
|
let allEventTargets = [];
|
@@ -217,19 +208,19 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
|
|
217
208
|
const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType]);
|
218
209
|
await compilerCtx.fs.writeFile(targetFilePath, finalText);
|
219
210
|
}));
|
220
|
-
await copyResources(config, ['value-accessor.ts'], targetDir);
|
211
|
+
await copyResources$1(config, ['value-accessor.ts'], targetDir);
|
221
212
|
}
|
222
213
|
function createValueAccessor(srcFileContents, valueAccessor) {
|
223
|
-
const hostContents = valueAccessor.eventTargets.map(
|
214
|
+
const hostContents = valueAccessor.eventTargets.map(listItem => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
|
224
215
|
return srcFileContents
|
225
216
|
.replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
|
226
217
|
.replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(',\n'));
|
227
218
|
}
|
228
|
-
function copyResources(config, resourcesFilesToCopy, directory) {
|
219
|
+
function copyResources$1(config, resourcesFilesToCopy, directory) {
|
229
220
|
if (!config.sys || !config.sys.copy) {
|
230
221
|
throw new Error('stencil is not properly intialized at this step. Notify the developer');
|
231
222
|
}
|
232
|
-
const copyTasks = resourcesFilesToCopy.map(
|
223
|
+
const copyTasks = resourcesFilesToCopy.map(rf => {
|
233
224
|
return {
|
234
225
|
src: path__default['default'].join(__dirname, '../resources/control-value-accessors/', rf),
|
235
226
|
dest: path__default['default'].join(directory, rf),
|
@@ -242,7 +233,7 @@ function copyResources(config, resourcesFilesToCopy, directory) {
|
|
242
233
|
const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
|
243
234
|
const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
|
244
235
|
const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
|
245
|
-
const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.
|
236
|
+
const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
|
246
237
|
|
247
238
|
async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
|
248
239
|
const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
|
@@ -251,7 +242,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
|
|
251
242
|
const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
|
252
243
|
await Promise.all([
|
253
244
|
compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
|
254
|
-
copyResources
|
245
|
+
copyResources(config, outputTarget),
|
255
246
|
generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
|
256
247
|
generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
|
257
248
|
]);
|
@@ -259,7 +250,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
|
|
259
250
|
function getFilteredComponents(excludeComponents = [], cmps) {
|
260
251
|
return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
|
261
252
|
}
|
262
|
-
async function copyResources
|
253
|
+
async function copyResources(config, outputTarget) {
|
263
254
|
if (!config.sys || !config.sys.copy || !config.sys.glob) {
|
264
255
|
throw new Error('stencil is not properly initialized at this step. Notify the developer');
|
265
256
|
}
|
@@ -289,7 +280,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
|
|
289
280
|
imports,
|
290
281
|
typeImports,
|
291
282
|
components
|
292
|
-
.map(createComponentDefinition(outputTarget.componentCorePackage
|
283
|
+
.map(createComponentDefinition(outputTarget.componentCorePackage))
|
293
284
|
.join('\n'),
|
294
285
|
];
|
295
286
|
return final.join('\n') + '\n';
|
package/dist/index.js
CHANGED
@@ -81,11 +81,11 @@ const SLASH_REGEX = /\\/g;
|
|
81
81
|
const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir) => (cmpMeta) => {
|
82
82
|
// Collect component meta
|
83
83
|
const inputs = [
|
84
|
-
...cmpMeta.properties.filter(
|
85
|
-
...cmpMeta.virtualProperties.map(
|
84
|
+
...cmpMeta.properties.filter(prop => !prop.internal).map(prop => prop.name),
|
85
|
+
...cmpMeta.virtualProperties.map(prop => prop.name),
|
86
86
|
].sort();
|
87
|
-
const outputs = cmpMeta.events.filter(
|
88
|
-
const methods = cmpMeta.methods.filter(
|
87
|
+
const outputs = cmpMeta.events.filter(ev => !ev.internal).map(prop => prop);
|
88
|
+
const methods = cmpMeta.methods.filter(method => !method.internal).map(prop => prop.name);
|
89
89
|
// Process meta
|
90
90
|
const hasOutputs = outputs.length > 0;
|
91
91
|
// Generate Angular @Directive
|
@@ -98,28 +98,22 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir)
|
|
98
98
|
directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
|
99
99
|
}
|
100
100
|
if (outputs.length > 0) {
|
101
|
-
directiveOpts.push(`outputs: ['${outputs.map(
|
101
|
+
directiveOpts.push(`outputs: ['${outputs.map(output => output.name).join(`', '`)}']`);
|
102
102
|
}
|
103
103
|
const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
|
104
|
-
const typePath = path.parse(path.join(componentCorePackage, path.join(cmpMeta.sourceFilePath, '').replace(path.join(rootDir, 'src'), distTypesDir)));
|
105
|
-
const importPath = normalizePath(path.join(typePath.dir, typePath.name));
|
106
|
-
const outputsInterface = outputs.length > 0
|
107
|
-
? `import { ${cmpMeta.componentClassName} as I${cmpMeta.componentClassName} } from '${importPath}';`
|
108
|
-
: '';
|
109
104
|
let outputsTypes = outputs
|
110
|
-
.filter(
|
105
|
+
.filter(output => !!output.complexType.references &&
|
111
106
|
Object.prototype.hasOwnProperty.call(output.complexType.references, output.complexType.original) &&
|
112
107
|
output.complexType.references[output.complexType.original].location === 'import')
|
113
|
-
.map(
|
108
|
+
.map(output => output.complexType.original)
|
114
109
|
.filter((item, pos, self) => self.indexOf(item) === pos)
|
115
110
|
.join(', ');
|
116
111
|
if (outputsTypes.length > 0) {
|
117
|
-
outputsTypes = `import { ${outputsTypes} } from '
|
112
|
+
outputsTypes = `import { ${outputsTypes} } from '${componentCorePackage}';`;
|
118
113
|
}
|
119
114
|
const lines = [
|
120
115
|
`
|
121
116
|
${outputsTypes}
|
122
|
-
${outputsInterface}
|
123
117
|
export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {}
|
124
118
|
${getProxyCmp(inputs, methods)}
|
125
119
|
@Component({
|
@@ -128,8 +122,8 @@ ${getProxyCmp(inputs, methods)}
|
|
128
122
|
export class ${tagNameAsPascal} {`,
|
129
123
|
];
|
130
124
|
// Generate outputs
|
131
|
-
outputs.forEach(
|
132
|
-
lines.push(` /** ${output.docs.text} ${output.docs.tags.map(
|
125
|
+
outputs.forEach(output => {
|
126
|
+
lines.push(` /** ${output.docs.text} ${output.docs.tags.map(tag => `@${tag.name} ${tag.text}`)}*/`);
|
133
127
|
lines.push(` ${output.name}!: EventEmitter<CustomEvent<${output.complexType.resolved}>>;`);
|
134
128
|
});
|
135
129
|
lines.push(' protected el: HTMLElement;');
|
@@ -137,7 +131,7 @@ export class ${tagNameAsPascal} {`,
|
|
137
131
|
c.detach();
|
138
132
|
this.el = r.nativeElement;`);
|
139
133
|
if (hasOutputs) {
|
140
|
-
lines.push(` proxyOutputs(this, this.el, ['${outputs.map(
|
134
|
+
lines.push(` proxyOutputs(this, this.el, ['${outputs.map(output => output.name).join(`', '`)}']);`);
|
141
135
|
}
|
142
136
|
lines.push(` }`);
|
143
137
|
lines.push(`}`);
|
@@ -178,15 +172,12 @@ ${directives}
|
|
178
172
|
}
|
179
173
|
|
180
174
|
async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
|
181
|
-
if (!Array.isArray(outputTarget.valueAccessorConfigs) ||
|
182
|
-
outputTarget.valueAccessorConfigs.length === 0) {
|
175
|
+
if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
|
183
176
|
return;
|
184
177
|
}
|
185
178
|
const targetDir = path.dirname(outputTarget.directivesProxyFile);
|
186
179
|
const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
|
187
|
-
const elementSelectors = Array.isArray(va.elementSelectors)
|
188
|
-
? va.elementSelectors
|
189
|
-
: [va.elementSelectors];
|
180
|
+
const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
|
190
181
|
const type = va.type;
|
191
182
|
let allElementSelectors = [];
|
192
183
|
let allEventTargets = [];
|
@@ -208,19 +199,19 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
|
|
208
199
|
const finalText = createValueAccessor(srcFileContents, normalizedValueAccessors[valueAccessorType]);
|
209
200
|
await compilerCtx.fs.writeFile(targetFilePath, finalText);
|
210
201
|
}));
|
211
|
-
await copyResources(config, ['value-accessor.ts'], targetDir);
|
202
|
+
await copyResources$1(config, ['value-accessor.ts'], targetDir);
|
212
203
|
}
|
213
204
|
function createValueAccessor(srcFileContents, valueAccessor) {
|
214
|
-
const hostContents = valueAccessor.eventTargets.map(
|
205
|
+
const hostContents = valueAccessor.eventTargets.map(listItem => VALUE_ACCESSOR_EVENTTARGETS.replace(VALUE_ACCESSOR_EVENT, listItem[0]).replace(VALUE_ACCESSOR_TARGETATTR, listItem[1]));
|
215
206
|
return srcFileContents
|
216
207
|
.replace(VALUE_ACCESSOR_SELECTORS, valueAccessor.elementSelectors.join(', '))
|
217
208
|
.replace(VALUE_ACCESSOR_EVENTTARGETS, hostContents.join(',\n'));
|
218
209
|
}
|
219
|
-
function copyResources(config, resourcesFilesToCopy, directory) {
|
210
|
+
function copyResources$1(config, resourcesFilesToCopy, directory) {
|
220
211
|
if (!config.sys || !config.sys.copy) {
|
221
212
|
throw new Error('stencil is not properly intialized at this step. Notify the developer');
|
222
213
|
}
|
223
|
-
const copyTasks = resourcesFilesToCopy.map(
|
214
|
+
const copyTasks = resourcesFilesToCopy.map(rf => {
|
224
215
|
return {
|
225
216
|
src: path.join(__dirname, '../resources/control-value-accessors/', rf),
|
226
217
|
dest: path.join(directory, rf),
|
@@ -233,7 +224,7 @@ function copyResources(config, resourcesFilesToCopy, directory) {
|
|
233
224
|
const VALUE_ACCESSOR_SELECTORS = `<VALUE_ACCESSOR_SELECTORS>`;
|
234
225
|
const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
|
235
226
|
const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
|
236
|
-
const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.
|
227
|
+
const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
|
237
228
|
|
238
229
|
async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
|
239
230
|
const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
|
@@ -242,7 +233,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
|
|
242
233
|
const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
|
243
234
|
await Promise.all([
|
244
235
|
compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
|
245
|
-
copyResources
|
236
|
+
copyResources(config, outputTarget),
|
246
237
|
generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
|
247
238
|
generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
|
248
239
|
]);
|
@@ -250,7 +241,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
|
|
250
241
|
function getFilteredComponents(excludeComponents = [], cmps) {
|
251
242
|
return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
|
252
243
|
}
|
253
|
-
async function copyResources
|
244
|
+
async function copyResources(config, outputTarget) {
|
254
245
|
if (!config.sys || !config.sys.copy || !config.sys.glob) {
|
255
246
|
throw new Error('stencil is not properly initialized at this step. Notify the developer');
|
256
247
|
}
|
@@ -280,7 +271,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
|
|
280
271
|
imports,
|
281
272
|
typeImports,
|
282
273
|
components
|
283
|
-
.map(createComponentDefinition(outputTarget.componentCorePackage
|
274
|
+
.map(createComponentDefinition(outputTarget.componentCorePackage))
|
284
275
|
.join('\n'),
|
285
276
|
];
|
286
277
|
return final.join('\n') + '\n';
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@baloise/angular-output-target",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.15",
|
4
4
|
"description": "Angular output target for @stencil/core components.",
|
5
5
|
"main": "dist/index.cjs.js",
|
6
6
|
"module": "dist/index.js",
|
@@ -37,8 +37,15 @@
|
|
37
37
|
"url": "https://github.com/baloise/stencil-ds-output-targets/issues"
|
38
38
|
},
|
39
39
|
"devDependencies": {
|
40
|
-
"@angular/
|
41
|
-
"@angular/
|
40
|
+
"@angular/common": "^10.2.5",
|
41
|
+
"@angular/core": "^10.2.5",
|
42
|
+
"@angular/forms": "^10.2.5",
|
43
|
+
"@angular/platform-browser": "^10.2.5",
|
44
|
+
"jest": "^26.6.3",
|
45
|
+
"rollup": "^2.56.3",
|
46
|
+
"rxjs": "^6.6.7",
|
47
|
+
"typescript": "^4.0.8",
|
48
|
+
"zone.js": "^0.10.3"
|
42
49
|
},
|
43
50
|
"jest": {
|
44
51
|
"transform": {
|
@@ -54,5 +61,5 @@
|
|
54
61
|
],
|
55
62
|
"testURL": "http://localhost"
|
56
63
|
},
|
57
|
-
"gitHead": "
|
64
|
+
"gitHead": "5a5a9d8ff993f69679bbc03087ad1a94cd3851b0"
|
58
65
|
}
|
@@ -1,27 +1,27 @@
|
|
1
|
-
import { Directive, ElementRef } from '@angular/core'
|
2
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
1
|
+
import { Directive, ElementRef } from '@angular/core'
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
3
3
|
|
4
|
-
import { ValueAccessor } from './value-accessor'
|
4
|
+
import { ValueAccessor } from './value-accessor'
|
5
5
|
|
6
6
|
@Directive({
|
7
7
|
/* tslint:disable-next-line:directive-selector */
|
8
8
|
selector: '<VALUE_ACCESSOR_SELECTORS>',
|
9
9
|
host: {
|
10
|
-
'(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.
|
10
|
+
'(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
|
11
11
|
},
|
12
12
|
providers: [
|
13
13
|
{
|
14
14
|
provide: NG_VALUE_ACCESSOR,
|
15
15
|
useExisting: BooleanValueAccessor,
|
16
|
-
multi: true
|
17
|
-
}
|
18
|
-
]
|
16
|
+
multi: true,
|
17
|
+
},
|
18
|
+
],
|
19
19
|
})
|
20
20
|
export class BooleanValueAccessor extends ValueAccessor {
|
21
21
|
constructor(el: ElementRef) {
|
22
|
-
super(el)
|
22
|
+
super(el)
|
23
23
|
}
|
24
24
|
writeValue(value: any) {
|
25
|
-
this.el.nativeElement.checked = this.lastValue = value == null ? false : value
|
25
|
+
this.el.nativeElement.checked = this.lastValue = value == null ? false : value
|
26
26
|
}
|
27
27
|
}
|
@@ -1,29 +1,29 @@
|
|
1
|
-
import { Directive, ElementRef } from '@angular/core'
|
2
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
1
|
+
import { Directive, ElementRef } from '@angular/core'
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
3
3
|
|
4
|
-
import { ValueAccessor } from './value-accessor'
|
4
|
+
import { ValueAccessor } from './value-accessor'
|
5
5
|
|
6
6
|
@Directive({
|
7
7
|
/* tslint:disable-next-line:directive-selector */
|
8
8
|
selector: '<VALUE_ACCESSOR_SELECTORS>',
|
9
9
|
host: {
|
10
|
-
'(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.
|
10
|
+
'(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
|
11
11
|
},
|
12
12
|
providers: [
|
13
13
|
{
|
14
14
|
provide: NG_VALUE_ACCESSOR,
|
15
15
|
useExisting: NumericValueAccessor,
|
16
|
-
multi: true
|
17
|
-
}
|
18
|
-
]
|
16
|
+
multi: true,
|
17
|
+
},
|
18
|
+
],
|
19
19
|
})
|
20
20
|
export class NumericValueAccessor extends ValueAccessor {
|
21
21
|
constructor(el: ElementRef) {
|
22
|
-
super(el)
|
22
|
+
super(el)
|
23
23
|
}
|
24
24
|
registerOnChange(fn: (_: number | null) => void) {
|
25
25
|
super.registerOnChange(value => {
|
26
|
-
fn(value === '' ? null : parseFloat(value))
|
27
|
-
})
|
26
|
+
fn(value === '' ? null : parseFloat(value))
|
27
|
+
})
|
28
28
|
}
|
29
29
|
}
|
@@ -1,24 +1,24 @@
|
|
1
|
-
import { Directive, ElementRef } from '@angular/core'
|
2
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
1
|
+
import { Directive, ElementRef } from '@angular/core'
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
3
3
|
|
4
|
-
import { ValueAccessor } from './value-accessor'
|
4
|
+
import { ValueAccessor } from './value-accessor'
|
5
5
|
|
6
6
|
@Directive({
|
7
7
|
/* tslint:disable-next-line:directive-selector */
|
8
8
|
selector: '<VALUE_ACCESSOR_SELECTORS>',
|
9
9
|
host: {
|
10
|
-
'(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.
|
10
|
+
'(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
|
11
11
|
},
|
12
12
|
providers: [
|
13
13
|
{
|
14
14
|
provide: NG_VALUE_ACCESSOR,
|
15
15
|
useExisting: RadioValueAccessor,
|
16
|
-
multi: true
|
17
|
-
}
|
18
|
-
]
|
16
|
+
multi: true,
|
17
|
+
},
|
18
|
+
],
|
19
19
|
})
|
20
20
|
export class RadioValueAccessor extends ValueAccessor {
|
21
21
|
constructor(el: ElementRef) {
|
22
|
-
super(el)
|
22
|
+
super(el)
|
23
23
|
}
|
24
24
|
}
|
@@ -1,24 +1,24 @@
|
|
1
|
-
import { Directive, ElementRef } from '@angular/core'
|
2
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
1
|
+
import { Directive, ElementRef } from '@angular/core'
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
3
3
|
|
4
|
-
import { ValueAccessor } from './value-accessor'
|
4
|
+
import { ValueAccessor } from './value-accessor'
|
5
5
|
|
6
6
|
@Directive({
|
7
7
|
/* tslint:disable-next-line:directive-selector */
|
8
8
|
selector: '<VALUE_ACCESSOR_SELECTORS>',
|
9
9
|
host: {
|
10
|
-
'(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.
|
10
|
+
'(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
|
11
11
|
},
|
12
12
|
providers: [
|
13
13
|
{
|
14
14
|
provide: NG_VALUE_ACCESSOR,
|
15
15
|
useExisting: SelectValueAccessor,
|
16
|
-
multi: true
|
17
|
-
}
|
18
|
-
]
|
16
|
+
multi: true,
|
17
|
+
},
|
18
|
+
],
|
19
19
|
})
|
20
20
|
export class SelectValueAccessor extends ValueAccessor {
|
21
21
|
constructor(el: ElementRef) {
|
22
|
-
super(el)
|
22
|
+
super(el)
|
23
23
|
}
|
24
24
|
}
|
@@ -1,24 +1,24 @@
|
|
1
|
-
import { Directive, ElementRef } from '@angular/core'
|
2
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
1
|
+
import { Directive, ElementRef } from '@angular/core'
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms'
|
3
3
|
|
4
|
-
import { ValueAccessor } from './value-accessor'
|
4
|
+
import { ValueAccessor } from './value-accessor'
|
5
5
|
|
6
6
|
@Directive({
|
7
7
|
/* tslint:disable-next-line:directive-selector */
|
8
8
|
selector: '<VALUE_ACCESSOR_SELECTORS>',
|
9
9
|
host: {
|
10
|
-
'(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.
|
10
|
+
'(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)',
|
11
11
|
},
|
12
12
|
providers: [
|
13
13
|
{
|
14
14
|
provide: NG_VALUE_ACCESSOR,
|
15
15
|
useExisting: TextValueAccessor,
|
16
|
-
multi: true
|
17
|
-
}
|
18
|
-
]
|
16
|
+
multi: true,
|
17
|
+
},
|
18
|
+
],
|
19
19
|
})
|
20
20
|
export class TextValueAccessor extends ValueAccessor {
|
21
21
|
constructor(el: ElementRef) {
|
22
|
-
super(el)
|
22
|
+
super(el)
|
23
23
|
}
|
24
24
|
}
|