Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 127076a

Browse files
vogloblinskyvogloblinsky
committed
feat(app): Directive composition API for directives and components
fix #1340
1 parent 22a22ce commit 127076a

29 files changed

+251
-24
lines changed

‎src-refactored/core/use-cases/scan-files.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ describe('Use-cases - Should scan folders', () => {
66
it('should find files', async () => {
77
const testFolderpath = 'test/fixtures/todomvc-ng2';
88
const files = await ScanFiles.scan(testFolderpath);
9-
expect(files.length).equal(70);
9+
expect(files.length).equal(73);
1010
});
1111
});

‎src/app/compiler/angular/deps/component-dep.factory.ts

+2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export class ComponentDepFactory {
3434
template: this.helper.getComponentTemplate(props, srcFile),
3535
templateUrl: this.helper.getComponentTemplateUrl(props, srcFile),
3636
viewProviders: this.helper.getComponentViewProviders(props, srcFile),
37+
hostDirectives: [...this.helper.getComponentHostDirectives(props)],
3738
inputsClass: IO.inputs,
3839
outputsClass: IO.outputs,
3940
propertiesClass: IO.properties,
@@ -124,6 +125,7 @@ export interface IComponentDep extends IDep {
124125
entryComponents: Array<any>;
125126

126127
hostBindings: Array<any>;
128+
hostDirectives: Array<any>;
127129
hostListeners: Array<any>;
128130

129131
description: string;

‎src/app/compiler/angular/deps/directive-dep.factory.ts

+3
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export class DirectiveDepFactory {
2222
selector: this.helper.getComponentSelector(props, srcFile),
2323
providers: this.helper.getComponentProviders(props, srcFile),
2424
exportAs: this.helper.getComponentExportAs(props, srcFile),
25+
hostDirectives: [...this.helper.getComponentHostDirectives(props)],
2526

2627
standalone: this.helper.getComponentStandalone(props, srcFile) ? true : false,
2728

@@ -38,6 +39,7 @@ export class DirectiveDepFactory {
3839
methodsClass: IO.methods,
3940
exampleUrls: this.helper.getComponentExampleUrls(srcFile.getText())
4041
};
42+
4143
if (Configuration.mainData.disableLifeCycleHooks) {
4244
directiveDeps.methodsClass = cleanLifecycleHooksFromMethods(directiveDeps.methodsClass);
4345
}
@@ -79,6 +81,7 @@ export interface IDirectiveDep extends IDep {
7981
deprecationMessage: string;
8082

8183
hostBindings: any;
84+
hostDirectives: any;
8285
hostListeners: any;
8386

8487
propertiesClass: any;

‎src/app/compiler/angular/deps/helpers/class-helper.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -737,16 +737,16 @@ export class ClassHelper {
737737
} else if (outputDecorator && outputDecorator.length > 0) {
738738
outputs.push(this.visitOutput(member, outputDecorator[0], sourceFile));
739739
} else if (parsedHostBindings && parsedHostBindings.length > 0) {
740-
let k = 0,
741-
lenHB = parsedHostBindings.length;
740+
let k = 0;
741+
const lenHB = parsedHostBindings.length;
742742
for (k; k < lenHB; k++) {
743743
hostBindings.push(
744744
this.visitInputAndHostBinding(member, parsedHostBindings[k], sourceFile)
745745
);
746746
}
747747
} else if (parsedHostListeners && parsedHostListeners.length > 0) {
748-
let l = 0,
749-
lenHL = parsedHostListeners.length;
748+
let l = 0;
749+
const lenHL = parsedHostListeners.length;
750750
for (l; l < lenHL; l++) {
751751
hostListeners.push(
752752
this.visitHostListener(member, parsedHostListeners[l], sourceFile)

‎src/app/compiler/angular/deps/helpers/component-helper.ts

+72-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ts } from 'ts-morph';
1+
import { SyntaxKind, ts } from 'ts-morph';
22
import { detectIndent } from '../../../../../utils';
33
import { ClassHelper } from './class-helper';
44
import { IParseDeepIdentifierResult, SymbolHelper } from './symbol-helper';
@@ -44,6 +44,77 @@ export class ComponentHelper {
4444
return this.symbolHelper.getSymbolDeps(props, 'exportAs', srcFile).pop();
4545
}
4646

47+
public getComponentHostDirectives(
48+
props: ReadonlyArray<ts.ObjectLiteralElementLike>
49+
): Array<any> {
50+
const hostDirectiveSymbolParsed = this.symbolHelper.getSymbolDepsRaw(
51+
props,
52+
'hostDirectives'
53+
);
54+
let hostDirectiveSymbol = null;
55+
56+
if (hostDirectiveSymbolParsed.length > 0) {
57+
hostDirectiveSymbol = hostDirectiveSymbolParsed.pop();
58+
}
59+
60+
const result = [];
61+
62+
if (
63+
hostDirectiveSymbol &&
64+
hostDirectiveSymbol.initializer &&
65+
hostDirectiveSymbol.initializer.elements &&
66+
hostDirectiveSymbol.initializer.elements.length > 0
67+
) {
68+
hostDirectiveSymbol.initializer.elements.forEach(element => {
69+
if (element.kind === SyntaxKind.Identifier) {
70+
result.push({
71+
name: element.escapedText
72+
});
73+
} else if (
74+
element.kind === SyntaxKind.ObjectLiteralExpression &&
75+
element.properties &&
76+
element.properties.length > 0
77+
) {
78+
const parsedDirective: any = {
79+
name: '',
80+
inputs: [],
81+
outputs: []
82+
};
83+
84+
element.properties.forEach(property => {
85+
if (property.name.escapedText === 'directive') {
86+
parsedDirective.name = property.initializer.escapedText;
87+
} else if (property.name.escapedText === 'inputs') {
88+
if (
89+
property.initializer &&
90+
property.initializer.elements &&
91+
property.initializer.elements.length > 0
92+
) {
93+
property.initializer.elements.forEach(propertyElement => {
94+
parsedDirective.inputs.push(propertyElement.text);
95+
});
96+
}
97+
} else if (property.name.escapedText === 'outputs') {
98+
if (
99+
property.initializer &&
100+
property.initializer.elements &&
101+
property.initializer.elements.length > 0
102+
) {
103+
property.initializer.elements.forEach(propertyElement => {
104+
parsedDirective.outputs.push(propertyElement.text);
105+
});
106+
}
107+
}
108+
});
109+
110+
result.push(parsedDirective);
111+
}
112+
});
113+
}
114+
115+
return result;
116+
}
117+
47118
public getComponentHost(
48119
props: ReadonlyArray<ts.ObjectLiteralElementLike>
49120
): Map<string, string> {

‎src/locales/bg-BG.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_BG_BG = {
3838
guard: 'Guard',
3939
guards: 'Guards',
4040
hostbindings: 'HostBindings',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListeners',
4243
'html-element': 'HTML-елемент',
4344
'html-element-with-directive': 'HTML-елемент с директива',

‎src/locales/de-DE.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_DE_DE = {
3838
guard: 'Guard',
3939
guards: 'Guards',
4040
hostbindings: 'HostBindings',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListeners',
4243
'html-element': 'Html Element',
4344
'html-element-with-directive': 'Html-Element mit Direktive',

‎src/locales/en-US.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_EN_US = {
3838
guard: 'Guard',
3939
guards: 'Guards',
4040
hostbindings: 'HostBindings',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListeners',
4243
'html-element': 'Html element',
4344
'html-element-with-directive': 'Html element with directive',

‎src/locales/es-ES.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_ES_ES = {
3838
guard: 'Guardia',
3939
guards: 'Guardias',
4040
hostbindings: 'Fijaciones de Host',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'Escuchadores de Host',
4243
'html-element': 'Elemento Html',
4344
'html-element-with-directive': 'Elemento Html con directiva',

‎src/locales/fr-FR.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_FR_FR = {
3838
guard: 'Garde',
3939
guards: 'Gardes',
4040
hostbindings: 'HostBindings',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListeners',
4243
'html-element': 'Elément Html',
4344
'html-element-with-directive': 'Elément Html avec une directive',

‎src/locales/hu-HU.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_HU_HU = {
3838
guard: 'Guard',
3939
guards: 'Guardok',
4040
hostbindings: 'HostBindingok',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListenerek',
4243
'html-element': 'Html elem',
4344
'html-element-with-directive': 'Html elem direktívával',

‎src/locales/it-IT.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_IT_IT = {
3838
guard: 'Guardia',
3939
guards: 'Guardie',
4040
hostbindings: 'HostBindings',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListeners',
4243
'html-element': 'Elemento Html',
4344
'html-element-with-directive': 'Elemento html con direttive',

‎src/locales/ja-JP.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_JA_JP = {
3838
guard: 'ガード',
3939
guards: 'ガード',
4040
hostbindings: 'ホストバインディング',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'ホストリスナー',
4243
'html-element': 'Html要素',
4344
'html-element-with-directive': 'ディレクティブHtml要素',

‎src/locales/ko-KR.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_KO_KR = {
3838
guard: '가드',
3939
guards: '가드',
4040
hostbindings: 'HostBindings',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListeners',
4243
'html-element': 'HTML 요소',
4344
'html-element-with-directive': '지시어가 있는 HTML 요소',

‎src/locales/nl-NL.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_NL_NL = {
3838
guard: 'Guard',
3939
guards: 'Guards',
4040
hostbindings: 'HostBindings',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListeners',
4243
'html-element': 'Html element',
4344
'html-element-with-directive': 'Html element met directive',

‎src/locales/pl-PL.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_PL_PL = {
3838
guard: 'Guard',
3939
guards: "Guard'y",
4040
hostbindings: 'HostBindingi',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListenery',
4243
'html-element': 'Html element',
4344
'html-element-with-directive': 'Html element z dyrektywą',

‎src/locales/pt-BR.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_PT_BR = {
3838
guard: 'Guarda',
3939
guards: 'Guardas',
4040
hostbindings: 'HostBindings',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListeners',
4243
'html-element': 'Elemento HTML',
4344
'html-element-with-directive': 'Elemento HTML com diretiva',

‎src/locales/sk-SK.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_SK_SK = {
3838
guard: 'Guard',
3939
guards: 'Guards',
4040
hostbindings: 'HostBindings',
41+
hostdirectives: 'HostDirectives',
4142
hostlisteners: 'HostListeners',
4243
'html-element': 'HTML element',
4344
'html-element-with-directive': 'HTML element s direktívou',

‎src/locales/zh-CN.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_ZH_CN = {
3838
guard: '路由守卫',
3939
guards: '路由守卫列表',
4040
hostbindings: '宿主绑定',
41+
hostdirectives: 'Host Directives',
4142
hostlisteners: '宿主监听',
4243
'html-element': 'Html 元素',
4344
'html-element-with-directive': '带指令的Html元素',

‎src/locales/zh-TW.ts

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const TRANSLATION_ZH_TW = {
3838
guard: '路由守衛',
3939
guards: '路由守衛列表',
4040
hostbindings: 'Host Bindings',
41+
hostdirectives: 'Host Directives',
4142
hostlisteners: 'Host Listeners',
4243
'html-element': 'HTML 元素',
4344
'html-element-with-directive': '帶指令的 HTML 元素',

‎src/templates/partials/component-detail.hbs

+22-1
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,27 @@
8888
</tr>
8989
{{/if}}
9090

91+
{{#if component.hostDirectives}}
92+
<tr>
93+
<td class="col-md-3">{{t "hostdirectives" }}</td>
94+
<td class="col-md-9">
95+
{{#each component.hostDirectives}}
96+
{{> link-type type=name }}<br/>
97+
{{#if this.inputs}}
98+
{{#compare this.inputs.length ">" 0}}
99+
<div><i>&nbsp;{{t "inputs" }}</i> : {{#each inputs}}{{this}}&nbsp;{{/each}}</div>
100+
{{/compare}}
101+
{{/if}}
102+
{{#if this.outputs}}
103+
{{#compare this.outputs.length ">" 0}}
104+
<div><i>&nbsp;{{t "outputs" }}</i> : {{#each outputs}}{{this}}&nbsp;{{/each}}</div>
105+
{{/compare}}
106+
{{/if}}
107+
{{/each}}
108+
</td>
109+
</tr>
110+
{{/if}}
111+
91112
{{#if component.entryComponents}}
92113
<tr>
93114
<td class="col-md-3">entryComponents</td>
@@ -161,7 +182,7 @@
161182

162183
{{#if component.standalone}}
163184
<tr>
164-
<td class="col-md-3">standalone</td>
185+
<td class="col-md-3">{{t "standalone" }}</td>
165186
<td class="col-md-9"><code>{{component.standalone}}</code></td>
166187
</tr>
167188
{{/if}}

‎src/templates/partials/directive.hbs

+23-2
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
</div>
8080
{{/if}}
8181

82-
{{#orLength directive.selector directive.providers}}
82+
{{#orLength directive.selector directive.providers directive.standalone directive.hostDirectives}}
8383
<section data-compodoc="block-metadata">
8484
<h3>{{t "metadata" }}</h3>
8585
<table class="table table-sm table-hover metadata">
@@ -106,11 +106,32 @@
106106

107107
{{#if directive.standalone}}
108108
<tr>
109-
<td class="col-md-3">standalone</td>
109+
<td class="col-md-3">{{t "standalone" }}</td>
110110
<td class="col-md-9"><code>{{directive.standalone}}</code></td>
111111
</tr>
112112
{{/if}}
113113

114+
{{#if directive.hostDirectives}}
115+
<tr>
116+
<td class="col-md-3">{{t "hostdirectives" }}</td>
117+
<td class="col-md-9">
118+
{{#each directive.hostDirectives}}
119+
{{> link-type type=name }}<br/>
120+
{{#if this.inputs}}
121+
{{#compare this.inputs.length ">" 0}}
122+
<div><i>&nbsp;{{t "inputs" }}</i> : {{#each inputs}}{{this}}&nbsp;{{/each}}</div>
123+
{{/compare}}
124+
{{/if}}
125+
{{#if this.outputs}}
126+
{{#compare this.outputs.length ">" 0}}
127+
<div><i>&nbsp;{{t "outputs" }}</i> : {{#each outputs}}{{this}}&nbsp;{{/each}}</div>
128+
{{/compare}}
129+
{{/if}}
130+
{{/each}}
131+
</td>
132+
</tr>
133+
{{/if}}
134+
114135
{{#if directive.exportAs}}
115136
<tr>
116137
<td class="col-md-3">{{t "exportAs" }}</td>

‎src/templates/partials/pipe.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
{{/if}}
7979
{{#if pipe.standalone}}
8080
<tr>
81-
<td class="col-md-3">standalone</td>
81+
<td class="col-md-3">{{t "standalone" }}</td>
8282
<td class="col-md-9"><code>{{pipe.standalone}}</code></td>
8383
</tr>
8484
{{/if}}

0 commit comments

Comments
 (0)