@baloise/angular-output-target 1.0.24 → 1.1.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +42 -0
- package/dist/generate-angular-directives-file.js +2 -2
- package/dist/generate-angular-module.d.ts +5 -0
- package/dist/generate-angular-module.js +56 -0
- package/dist/index.cjs.js +97 -8
- package/dist/index.js +97 -8
- package/dist/output-angular.d.ts +1 -0
- package/dist/output-angular.js +40 -6
- package/dist/types.d.ts +12 -0
- package/dist/utils.js +1 -1
- package/package.json +2 -2
- package/resources/control-value-accessors/boolean-value-accessor.ts +1 -1
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,48 @@
|
|
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.1.1](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.1.0...@baloise/angular-output-target@1.1.1) (2022-01-31)
|
7
|
+
|
8
|
+
|
9
|
+
### Bug Fixes
|
10
|
+
|
11
|
+
* **angular:** add common module ([6387334](https://github.com/baloise/stencil-ds-output-targets/commit/63873341511fe0dfe9490fda06bb785df3fc1404))
|
12
|
+
* **angular:** add common module ([10798bb](https://github.com/baloise/stencil-ds-output-targets/commit/10798bb22e435a87cf12d0ccd6d868ff0314f685))
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
|
17
|
+
|
18
|
+
# [1.1.0](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.26...@baloise/angular-output-target@1.1.0) (2022-01-31)
|
19
|
+
|
20
|
+
|
21
|
+
### Features
|
22
|
+
|
23
|
+
* **angular:** add modules for each component ([e6a5cd2](https://github.com/baloise/stencil-ds-output-targets/commit/e6a5cd209dd0d61a4bcbc8855fae965b0ff6f815))
|
24
|
+
|
25
|
+
|
26
|
+
|
27
|
+
|
28
|
+
|
29
|
+
## [1.0.26](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.25...@baloise/angular-output-target@1.0.26) (2022-01-24)
|
30
|
+
|
31
|
+
**Note:** Version bump only for package @baloise/angular-output-target
|
32
|
+
|
33
|
+
|
34
|
+
|
35
|
+
|
36
|
+
|
37
|
+
## [1.0.25](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.24...@baloise/angular-output-target@1.0.25) (2022-01-08)
|
38
|
+
|
39
|
+
|
40
|
+
### Bug Fixes
|
41
|
+
|
42
|
+
* **angular:** change checked to value to add more components than the checkbox ([ff96e74](https://github.com/baloise/stencil-ds-output-targets/commit/ff96e742f1dcb1c8427a67f3a0c96dfe4baf75c5))
|
43
|
+
|
44
|
+
|
45
|
+
|
46
|
+
|
47
|
+
|
6
48
|
## [1.0.24](https://github.com/baloise/stencil-ds-output-targets/compare/@baloise/angular-output-target@1.0.23...@baloise/angular-output-target@1.0.24) (2022-01-08)
|
7
49
|
|
8
50
|
**Note:** Version bump only for package @baloise/angular-output-target
|
@@ -6,8 +6,8 @@ export function generateAngularDirectivesFile(compilerCtx, components, outputTar
|
|
6
6
|
}
|
7
7
|
const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
|
8
8
|
const directives = components
|
9
|
-
.map(
|
10
|
-
.map(
|
9
|
+
.map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
|
10
|
+
.map(className => `d.${className}`)
|
11
11
|
.join(',\n ');
|
12
12
|
const c = `
|
13
13
|
import * as d from '${proxyPath}';
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import { dashToPascalCase } from './utils';
|
2
|
+
export const createComponentModule = (groups = {}) => (cmpMeta) => {
|
3
|
+
const isPrivate = Object.values(groups)
|
4
|
+
.flat()
|
5
|
+
.map(o => o.components)
|
6
|
+
.flat()
|
7
|
+
.some(tag => tag === cmpMeta.tagName);
|
8
|
+
if (isPrivate) {
|
9
|
+
return '';
|
10
|
+
}
|
11
|
+
const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
|
12
|
+
let cmpImports = [];
|
13
|
+
let cmpDefines = [];
|
14
|
+
if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].components) {
|
15
|
+
const children = groups[cmpMeta.tagName].components;
|
16
|
+
if (children) {
|
17
|
+
cmpImports = children.map(tag => `${dashToPascalCase(tag)}`);
|
18
|
+
cmpDefines = children.map(tag => ` define${dashToPascalCase(tag)}();`);
|
19
|
+
}
|
20
|
+
}
|
21
|
+
let providers = [];
|
22
|
+
let providerImports = [];
|
23
|
+
if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].providers) {
|
24
|
+
const children = groups[cmpMeta.tagName].providers;
|
25
|
+
if (children) {
|
26
|
+
providerImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
|
27
|
+
providers = children.map(p => p.name);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
let declarations = [];
|
31
|
+
let declarationImports = [];
|
32
|
+
if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].declarations) {
|
33
|
+
const children = groups[cmpMeta.tagName].declarations;
|
34
|
+
if (children) {
|
35
|
+
declarationImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
|
36
|
+
declarations = children.map(p => p.name);
|
37
|
+
}
|
38
|
+
}
|
39
|
+
const finalText = `
|
40
|
+
${providerImports.join('\n ')}
|
41
|
+
${declarationImports.join('\n ')}
|
42
|
+
|
43
|
+
@NgModule({
|
44
|
+
declarations: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
|
45
|
+
exports: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
|
46
|
+
providers: [${providers.join(', ')}],
|
47
|
+
imports: [CommonModule],
|
48
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
49
|
+
})
|
50
|
+
export class ${tagNameAsPascal}Module {
|
51
|
+
constructor() {
|
52
|
+
${[` define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
|
53
|
+
}
|
54
|
+
}`;
|
55
|
+
return finalText;
|
56
|
+
};
|
package/dist/index.cjs.js
CHANGED
@@ -15,7 +15,7 @@ const readFile = util.promisify(fs__default['default'].readFile);
|
|
15
15
|
const toLowerCase = (str) => str.toLowerCase();
|
16
16
|
const dashToPascalCase = (str) => toLowerCase(str)
|
17
17
|
.split('-')
|
18
|
-
.map(
|
18
|
+
.map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
|
19
19
|
.join('');
|
20
20
|
function sortBy(array, prop) {
|
21
21
|
return array.slice().sort((a, b) => {
|
@@ -167,8 +167,8 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
|
|
167
167
|
}
|
168
168
|
const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
|
169
169
|
const directives = components
|
170
|
-
.map(
|
171
|
-
.map(
|
170
|
+
.map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
|
171
|
+
.map(className => `d.${className}`)
|
172
172
|
.join(',\n ');
|
173
173
|
const c = `
|
174
174
|
import * as d from '${proxyPath}';
|
@@ -235,20 +235,78 @@ const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
|
|
235
235
|
const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
|
236
236
|
const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
|
237
237
|
|
238
|
+
const createComponentModule = (groups = {}) => (cmpMeta) => {
|
239
|
+
const isPrivate = Object.values(groups)
|
240
|
+
.flat()
|
241
|
+
.map(o => o.components)
|
242
|
+
.flat()
|
243
|
+
.some(tag => tag === cmpMeta.tagName);
|
244
|
+
if (isPrivate) {
|
245
|
+
return '';
|
246
|
+
}
|
247
|
+
const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
|
248
|
+
let cmpImports = [];
|
249
|
+
let cmpDefines = [];
|
250
|
+
if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].components) {
|
251
|
+
const children = groups[cmpMeta.tagName].components;
|
252
|
+
if (children) {
|
253
|
+
cmpImports = children.map(tag => `${dashToPascalCase(tag)}`);
|
254
|
+
cmpDefines = children.map(tag => ` define${dashToPascalCase(tag)}();`);
|
255
|
+
}
|
256
|
+
}
|
257
|
+
let providers = [];
|
258
|
+
let providerImports = [];
|
259
|
+
if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].providers) {
|
260
|
+
const children = groups[cmpMeta.tagName].providers;
|
261
|
+
if (children) {
|
262
|
+
providerImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
|
263
|
+
providers = children.map(p => p.name);
|
264
|
+
}
|
265
|
+
}
|
266
|
+
let declarations = [];
|
267
|
+
let declarationImports = [];
|
268
|
+
if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].declarations) {
|
269
|
+
const children = groups[cmpMeta.tagName].declarations;
|
270
|
+
if (children) {
|
271
|
+
declarationImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
|
272
|
+
declarations = children.map(p => p.name);
|
273
|
+
}
|
274
|
+
}
|
275
|
+
const finalText = `
|
276
|
+
${providerImports.join('\n ')}
|
277
|
+
${declarationImports.join('\n ')}
|
278
|
+
|
279
|
+
@NgModule({
|
280
|
+
declarations: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
|
281
|
+
exports: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
|
282
|
+
providers: [${providers.join(', ')}],
|
283
|
+
imports: [CommonModule],
|
284
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
285
|
+
})
|
286
|
+
export class ${tagNameAsPascal}Module {
|
287
|
+
constructor() {
|
288
|
+
${[` define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
|
289
|
+
}
|
290
|
+
}`;
|
291
|
+
return finalText;
|
292
|
+
};
|
293
|
+
|
238
294
|
async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
|
239
295
|
const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
|
240
296
|
const rootDir = config.rootDir;
|
241
297
|
const pkgData = await readPackageJson(rootDir);
|
242
298
|
const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
|
299
|
+
const allComponentModule = generateAllComponentModule(filteredComponents, outputTarget);
|
243
300
|
await Promise.all([
|
244
301
|
compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
|
302
|
+
compilerCtx.fs.writeFile(outputTarget.directivesProxyFile.replace('.ts', '.module.ts'), allComponentModule),
|
245
303
|
copyResources(config, outputTarget),
|
246
304
|
generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
|
247
305
|
generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
|
248
306
|
]);
|
249
307
|
}
|
250
308
|
function getFilteredComponents(excludeComponents = [], cmps) {
|
251
|
-
return sortBy(cmps,
|
309
|
+
return sortBy(cmps, cmp => cmp.tagName).filter(c => !excludeComponents.includes(c.tagName) && !c.internal);
|
252
310
|
}
|
253
311
|
async function copyResources(config, outputTarget) {
|
254
312
|
if (!config.sys || !config.sys.copy || !config.sys.glob) {
|
@@ -265,23 +323,54 @@ async function copyResources(config, outputTarget) {
|
|
265
323
|
},
|
266
324
|
], srcDirectory);
|
267
325
|
}
|
326
|
+
function generateAllComponentModule(components, outputTarget) {
|
327
|
+
const childComponent = Object.values(outputTarget.componentGroups || {})
|
328
|
+
.flat()
|
329
|
+
.map(o => o.components)
|
330
|
+
.flat();
|
331
|
+
const moduleImports = components
|
332
|
+
.map(c => c.tagName)
|
333
|
+
.filter(c => !childComponent.includes(c))
|
334
|
+
.map(c => ` ${dashToPascalCase(c)}Module,`);
|
335
|
+
return `/* tslint:disable */
|
336
|
+
/* auto-generated angular directive proxies */
|
337
|
+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
|
338
|
+
import { CommonModule } from '@angular/common';
|
339
|
+
import {
|
340
|
+
${moduleImports.join('\n')}
|
341
|
+
} from './proxies'
|
342
|
+
|
343
|
+
const modules = [
|
344
|
+
${moduleImports.join('\n')}
|
345
|
+
]
|
346
|
+
|
347
|
+
@NgModule({
|
348
|
+
imports: [CommonModule, ...modules],
|
349
|
+
exports: [...modules],
|
350
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
351
|
+
})
|
352
|
+
export class BalAllComponentModule {}
|
353
|
+
`;
|
354
|
+
}
|
268
355
|
function generateProxies(components, pkgData, outputTarget, rootDir) {
|
269
356
|
const distTypesDir = path__default['default'].dirname(pkgData.types);
|
270
357
|
const dtsFilePath = path__default['default'].join(rootDir, distTypesDir, GENERATED_DTS);
|
271
358
|
const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
|
272
359
|
const imports = `/* tslint:disable */
|
273
360
|
/* auto-generated angular directive proxies */
|
274
|
-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter } from '@angular/core';
|
361
|
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
362
|
+
import { CommonModule } from '@angular/common';
|
275
363
|
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
|
364
|
+
const componentImports = components.map(c => `import { defineCustomElement as define${dashToPascalCase(c.tagName)} } from '${normalizePath(outputTarget.componentCorePackage || '')}/dist/components/${c.tagName}';`);
|
276
365
|
const typeImports = !outputTarget.componentCorePackage
|
277
366
|
? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
|
278
367
|
: `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
|
279
368
|
const final = [
|
280
369
|
imports,
|
281
370
|
typeImports,
|
282
|
-
|
283
|
-
|
284
|
-
|
371
|
+
componentImports.join('\n'),
|
372
|
+
components.map(createComponentDefinition(outputTarget.componentCorePackage)).join('\n'),
|
373
|
+
components.map(createComponentModule(outputTarget.componentGroups)).join('\n'),
|
285
374
|
];
|
286
375
|
return final.join('\n') + '\n';
|
287
376
|
}
|
package/dist/index.js
CHANGED
@@ -6,7 +6,7 @@ const readFile = promisify(fs.readFile);
|
|
6
6
|
const toLowerCase = (str) => str.toLowerCase();
|
7
7
|
const dashToPascalCase = (str) => toLowerCase(str)
|
8
8
|
.split('-')
|
9
|
-
.map(
|
9
|
+
.map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
|
10
10
|
.join('');
|
11
11
|
function sortBy(array, prop) {
|
12
12
|
return array.slice().sort((a, b) => {
|
@@ -158,8 +158,8 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
|
|
158
158
|
}
|
159
159
|
const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
|
160
160
|
const directives = components
|
161
|
-
.map(
|
162
|
-
.map(
|
161
|
+
.map(cmpMeta => dashToPascalCase(cmpMeta.tagName))
|
162
|
+
.map(className => `d.${className}`)
|
163
163
|
.join(',\n ');
|
164
164
|
const c = `
|
165
165
|
import * as d from '${proxyPath}';
|
@@ -226,20 +226,78 @@ const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
|
|
226
226
|
const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
|
227
227
|
const VALUE_ACCESSOR_EVENTTARGETS = ` '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.detail)'`;
|
228
228
|
|
229
|
+
const createComponentModule = (groups = {}) => (cmpMeta) => {
|
230
|
+
const isPrivate = Object.values(groups)
|
231
|
+
.flat()
|
232
|
+
.map(o => o.components)
|
233
|
+
.flat()
|
234
|
+
.some(tag => tag === cmpMeta.tagName);
|
235
|
+
if (isPrivate) {
|
236
|
+
return '';
|
237
|
+
}
|
238
|
+
const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
|
239
|
+
let cmpImports = [];
|
240
|
+
let cmpDefines = [];
|
241
|
+
if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].components) {
|
242
|
+
const children = groups[cmpMeta.tagName].components;
|
243
|
+
if (children) {
|
244
|
+
cmpImports = children.map(tag => `${dashToPascalCase(tag)}`);
|
245
|
+
cmpDefines = children.map(tag => ` define${dashToPascalCase(tag)}();`);
|
246
|
+
}
|
247
|
+
}
|
248
|
+
let providers = [];
|
249
|
+
let providerImports = [];
|
250
|
+
if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].providers) {
|
251
|
+
const children = groups[cmpMeta.tagName].providers;
|
252
|
+
if (children) {
|
253
|
+
providerImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
|
254
|
+
providers = children.map(p => p.name);
|
255
|
+
}
|
256
|
+
}
|
257
|
+
let declarations = [];
|
258
|
+
let declarationImports = [];
|
259
|
+
if (groups[cmpMeta.tagName] && groups[cmpMeta.tagName].declarations) {
|
260
|
+
const children = groups[cmpMeta.tagName].declarations;
|
261
|
+
if (children) {
|
262
|
+
declarationImports = children.map(p => `import { ${p.name} } from '../${p.import.replace('.ts', '')}'`);
|
263
|
+
declarations = children.map(p => p.name);
|
264
|
+
}
|
265
|
+
}
|
266
|
+
const finalText = `
|
267
|
+
${providerImports.join('\n ')}
|
268
|
+
${declarationImports.join('\n ')}
|
269
|
+
|
270
|
+
@NgModule({
|
271
|
+
declarations: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
|
272
|
+
exports: [${[tagNameAsPascal, ...cmpImports, ...declarations].join(', ')}],
|
273
|
+
providers: [${providers.join(', ')}],
|
274
|
+
imports: [CommonModule],
|
275
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
276
|
+
})
|
277
|
+
export class ${tagNameAsPascal}Module {
|
278
|
+
constructor() {
|
279
|
+
${[` define${tagNameAsPascal}();`, ...cmpDefines].join('\n')}
|
280
|
+
}
|
281
|
+
}`;
|
282
|
+
return finalText;
|
283
|
+
};
|
284
|
+
|
229
285
|
async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
|
230
286
|
const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
|
231
287
|
const rootDir = config.rootDir;
|
232
288
|
const pkgData = await readPackageJson(rootDir);
|
233
289
|
const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
|
290
|
+
const allComponentModule = generateAllComponentModule(filteredComponents, outputTarget);
|
234
291
|
await Promise.all([
|
235
292
|
compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
|
293
|
+
compilerCtx.fs.writeFile(outputTarget.directivesProxyFile.replace('.ts', '.module.ts'), allComponentModule),
|
236
294
|
copyResources(config, outputTarget),
|
237
295
|
generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
|
238
296
|
generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
|
239
297
|
]);
|
240
298
|
}
|
241
299
|
function getFilteredComponents(excludeComponents = [], cmps) {
|
242
|
-
return sortBy(cmps,
|
300
|
+
return sortBy(cmps, cmp => cmp.tagName).filter(c => !excludeComponents.includes(c.tagName) && !c.internal);
|
243
301
|
}
|
244
302
|
async function copyResources(config, outputTarget) {
|
245
303
|
if (!config.sys || !config.sys.copy || !config.sys.glob) {
|
@@ -256,23 +314,54 @@ async function copyResources(config, outputTarget) {
|
|
256
314
|
},
|
257
315
|
], srcDirectory);
|
258
316
|
}
|
317
|
+
function generateAllComponentModule(components, outputTarget) {
|
318
|
+
const childComponent = Object.values(outputTarget.componentGroups || {})
|
319
|
+
.flat()
|
320
|
+
.map(o => o.components)
|
321
|
+
.flat();
|
322
|
+
const moduleImports = components
|
323
|
+
.map(c => c.tagName)
|
324
|
+
.filter(c => !childComponent.includes(c))
|
325
|
+
.map(c => ` ${dashToPascalCase(c)}Module,`);
|
326
|
+
return `/* tslint:disable */
|
327
|
+
/* auto-generated angular directive proxies */
|
328
|
+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
|
329
|
+
import { CommonModule } from '@angular/common';
|
330
|
+
import {
|
331
|
+
${moduleImports.join('\n')}
|
332
|
+
} from './proxies'
|
333
|
+
|
334
|
+
const modules = [
|
335
|
+
${moduleImports.join('\n')}
|
336
|
+
]
|
337
|
+
|
338
|
+
@NgModule({
|
339
|
+
imports: [CommonModule, ...modules],
|
340
|
+
exports: [...modules],
|
341
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
342
|
+
})
|
343
|
+
export class BalAllComponentModule {}
|
344
|
+
`;
|
345
|
+
}
|
259
346
|
function generateProxies(components, pkgData, outputTarget, rootDir) {
|
260
347
|
const distTypesDir = path.dirname(pkgData.types);
|
261
348
|
const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
|
262
349
|
const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
|
263
350
|
const imports = `/* tslint:disable */
|
264
351
|
/* auto-generated angular directive proxies */
|
265
|
-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter } from '@angular/core';
|
352
|
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
353
|
+
import { CommonModule } from '@angular/common';
|
266
354
|
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
|
355
|
+
const componentImports = components.map(c => `import { defineCustomElement as define${dashToPascalCase(c.tagName)} } from '${normalizePath(outputTarget.componentCorePackage || '')}/dist/components/${c.tagName}';`);
|
267
356
|
const typeImports = !outputTarget.componentCorePackage
|
268
357
|
? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
|
269
358
|
: `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
|
270
359
|
const final = [
|
271
360
|
imports,
|
272
361
|
typeImports,
|
273
|
-
|
274
|
-
|
275
|
-
|
362
|
+
componentImports.join('\n'),
|
363
|
+
components.map(createComponentDefinition(outputTarget.componentCorePackage)).join('\n'),
|
364
|
+
components.map(createComponentModule(outputTarget.componentGroups)).join('\n'),
|
276
365
|
];
|
277
366
|
return final.join('\n') + '\n';
|
278
367
|
}
|
package/dist/output-angular.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import type { CompilerCtx, ComponentCompilerMeta, Config } from '@stencil/core/internal';
|
2
2
|
import type { OutputTargetAngular, PackageJSON } from './types';
|
3
3
|
export declare function angularDirectiveProxyOutput(compilerCtx: CompilerCtx, outputTarget: OutputTargetAngular, components: ComponentCompilerMeta[], config: Config): Promise<void>;
|
4
|
+
export declare function generateAllComponentModule(components: ComponentCompilerMeta[], outputTarget: OutputTargetAngular): string;
|
4
5
|
export declare function generateProxies(components: ComponentCompilerMeta[], pkgData: PackageJSON, outputTarget: OutputTargetAngular, rootDir: string): string;
|
package/dist/output-angular.js
CHANGED
@@ -1,22 +1,25 @@
|
|
1
1
|
import path from 'path';
|
2
|
-
import { relativeImport, normalizePath, sortBy, readPackageJson } from './utils';
|
2
|
+
import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase } from './utils';
|
3
3
|
import { createComponentDefinition } from './generate-angular-component';
|
4
4
|
import { generateAngularDirectivesFile } from './generate-angular-directives-file';
|
5
5
|
import generateValueAccessors from './generate-value-accessors';
|
6
|
+
import { createComponentModule } from './generate-angular-module';
|
6
7
|
export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
|
7
8
|
const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
|
8
9
|
const rootDir = config.rootDir;
|
9
10
|
const pkgData = await readPackageJson(rootDir);
|
10
11
|
const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
|
12
|
+
const allComponentModule = generateAllComponentModule(filteredComponents, outputTarget);
|
11
13
|
await Promise.all([
|
12
14
|
compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
|
15
|
+
compilerCtx.fs.writeFile(outputTarget.directivesProxyFile.replace('.ts', '.module.ts'), allComponentModule),
|
13
16
|
copyResources(config, outputTarget),
|
14
17
|
generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
|
15
18
|
generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
|
16
19
|
]);
|
17
20
|
}
|
18
21
|
function getFilteredComponents(excludeComponents = [], cmps) {
|
19
|
-
return sortBy(cmps,
|
22
|
+
return sortBy(cmps, cmp => cmp.tagName).filter(c => !excludeComponents.includes(c.tagName) && !c.internal);
|
20
23
|
}
|
21
24
|
async function copyResources(config, outputTarget) {
|
22
25
|
if (!config.sys || !config.sys.copy || !config.sys.glob) {
|
@@ -33,23 +36,54 @@ async function copyResources(config, outputTarget) {
|
|
33
36
|
},
|
34
37
|
], srcDirectory);
|
35
38
|
}
|
39
|
+
export function generateAllComponentModule(components, outputTarget) {
|
40
|
+
const childComponent = Object.values(outputTarget.componentGroups || {})
|
41
|
+
.flat()
|
42
|
+
.map(o => o.components)
|
43
|
+
.flat();
|
44
|
+
const moduleImports = components
|
45
|
+
.map(c => c.tagName)
|
46
|
+
.filter(c => !childComponent.includes(c))
|
47
|
+
.map(c => ` ${dashToPascalCase(c)}Module,`);
|
48
|
+
return `/* tslint:disable */
|
49
|
+
/* auto-generated angular directive proxies */
|
50
|
+
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
|
51
|
+
import { CommonModule } from '@angular/common';
|
52
|
+
import {
|
53
|
+
${moduleImports.join('\n')}
|
54
|
+
} from './proxies'
|
55
|
+
|
56
|
+
const modules = [
|
57
|
+
${moduleImports.join('\n')}
|
58
|
+
]
|
59
|
+
|
60
|
+
@NgModule({
|
61
|
+
imports: [CommonModule, ...modules],
|
62
|
+
exports: [...modules],
|
63
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
64
|
+
})
|
65
|
+
export class BalAllComponentModule {}
|
66
|
+
`;
|
67
|
+
}
|
36
68
|
export function generateProxies(components, pkgData, outputTarget, rootDir) {
|
37
69
|
const distTypesDir = path.dirname(pkgData.types);
|
38
70
|
const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
|
39
71
|
const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
|
40
72
|
const imports = `/* tslint:disable */
|
41
73
|
/* auto-generated angular directive proxies */
|
42
|
-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter } from '@angular/core';
|
74
|
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
75
|
+
import { CommonModule } from '@angular/common';
|
43
76
|
import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
|
77
|
+
const componentImports = components.map(c => `import { defineCustomElement as define${dashToPascalCase(c.tagName)} } from '${normalizePath(outputTarget.componentCorePackage || '')}/dist/components/${c.tagName}';`);
|
44
78
|
const typeImports = !outputTarget.componentCorePackage
|
45
79
|
? `import { ${IMPORT_TYPES} } from '${normalizePath(componentsTypeFile)}';`
|
46
80
|
: `import { ${IMPORT_TYPES} } from '${normalizePath(outputTarget.componentCorePackage)}';`;
|
47
81
|
const final = [
|
48
82
|
imports,
|
49
83
|
typeImports,
|
50
|
-
|
51
|
-
|
52
|
-
|
84
|
+
componentImports.join('\n'),
|
85
|
+
components.map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir)).join('\n'),
|
86
|
+
components.map(createComponentModule(outputTarget.componentGroups)).join('\n'),
|
53
87
|
];
|
54
88
|
return final.join('\n') + '\n';
|
55
89
|
}
|
package/dist/types.d.ts
CHANGED
@@ -5,6 +5,18 @@ export interface OutputTargetAngular {
|
|
5
5
|
directivesUtilsFile?: string;
|
6
6
|
valueAccessorConfigs?: ValueAccessorConfig[];
|
7
7
|
excludeComponents?: string[];
|
8
|
+
componentGroups?: {
|
9
|
+
[key: string]: ComponentGroup;
|
10
|
+
};
|
11
|
+
}
|
12
|
+
export interface ComponentGroup {
|
13
|
+
components?: string[];
|
14
|
+
providers?: ComponentProvider[];
|
15
|
+
declarations?: ComponentProvider[];
|
16
|
+
}
|
17
|
+
export interface ComponentProvider {
|
18
|
+
import: string;
|
19
|
+
name: string;
|
8
20
|
}
|
9
21
|
export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
|
10
22
|
export interface ValueAccessorConfig {
|
package/dist/utils.js
CHANGED
@@ -5,7 +5,7 @@ const readFile = promisify(fs.readFile);
|
|
5
5
|
export const toLowerCase = (str) => str.toLowerCase();
|
6
6
|
export const dashToPascalCase = (str) => toLowerCase(str)
|
7
7
|
.split('-')
|
8
|
-
.map(
|
8
|
+
.map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
|
9
9
|
.join('');
|
10
10
|
export function sortBy(array, prop) {
|
11
11
|
return array.slice().sort((a, b) => {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@baloise/angular-output-target",
|
3
|
-
"version": "1.
|
3
|
+
"version": "1.1.1",
|
4
4
|
"description": "Angular output target for @stencil/core components.",
|
5
5
|
"main": "dist/index.cjs.js",
|
6
6
|
"module": "dist/index.js",
|
@@ -61,5 +61,5 @@
|
|
61
61
|
],
|
62
62
|
"testURL": "http://localhost"
|
63
63
|
},
|
64
|
-
"gitHead": "
|
64
|
+
"gitHead": "e8aa34e51d9d5669d6e036c16b17cbcf9d32a617"
|
65
65
|
}
|
@@ -22,6 +22,6 @@ export class BooleanValueAccessor extends ValueAccessor {
|
|
22
22
|
super(el)
|
23
23
|
}
|
24
24
|
writeValue(value: any) {
|
25
|
-
this.el.nativeElement.
|
25
|
+
this.el.nativeElement.value = this.lastValue = value == null ? false : value
|
26
26
|
}
|
27
27
|
}
|