Skip to content

Commit b5f607b

Browse files
LafferyLaffery
authored
feat(module:schematics): align with the updated style guide (#9295)
1 parent add21f7 commit b5f607b

56 files changed

Lines changed: 378 additions & 268 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI --code-coverage",
1212
"test:watch": "gulp test:watch --tags",
1313
"test:schematics": "gulp build:schematics && gulp test:schematics",
14+
"build:schematics": "gulp build:schematics",
1415
"build": "gulp build:release",
1516
"build:lib": "gulp build:library",
1617
"doc": "gulp build:preview",

‎schematics/README.md‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
添加 ng-zorro-antd 与它的依赖，并根据需要自动配置。
88

99
- 添加 ng-zorro-antd 到 `package.json`
10-
- 替换 `app.component.html` 引导内容
10+
- 替换 `app.html` 引导内容
1111
- 在根模块导入必要的模块
1212
- 进行国际化配置
1313
- 将用于自定义的 `theme.less` 或编译后的 css 导入 `angular.json`
@@ -18,21 +18,13 @@ $ ng add ng-zorro-antd [--locale=zh-CN] [--theme] [--skipPackageJson]
1818

1919
## 开发
2020

21-
### 脚本
22-
23-
- `npm run schematic:build` 编译到 publish 文件夹
24-
- `npm run schematic:demo` 从 demo 生成 schematics
25-
- `node ./schematics_script/set-version.js` 从 package.json 设置版本号
26-
- `node ./schematics_script/set-theme.js` 从 scripts/site/_site/doc/theme.less 设置自定义样式内容
27-
2821
### 首次运行
2922

30-
生成 publish 之后，创建一个新的 ng 项目。
23+
`npm run build:schematic` 编译到 publish 文件夹，创建一个新的 ng 项目。
3124

32-
1. 运行 `npm run generate` 生成 `publish` 文件夹
33-
2. `cd publish && npm link`
34-
3. `ng new schematic-debug`
35-
4. `cd schematic-debug && npm link ng-zorro-antd`
25+
1. `cd publish && npm link`
26+
2. `ng new schematic-debug`
27+
3. `cd schematic-debug && npm link ng-zorro-antd`
3628

3729
### 调试
3830

@@ -41,6 +33,8 @@ $ ng add ng-zorro-antd [--locale=zh-CN] [--theme] [--skipPackageJson]
4133
3. `git checkout . && git clean -fd` 还原更改
4234
4. `ng g ng-zorro-antd:[schematic]` 运行 schematic
4335

44-
发布
36+
比如，你可以运行 `ng g ng-zorro-antd:ng-add` 来测试 `ng-add`。
37+
38+
## 发布
4539

4640
原有发布流程不变，但是 `schematics/utils/custom-theme.ts` 和 `schematics/utils/lib-versions.ts` 内容为动态生成，不提交到版本管理。

‎schematics/ng-add/schema.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,8 @@
104104
"type": "list",
105105
"items": [
106106
"blank",
107-
"sidemenu"
107+
"sidemenu",
108+
"topnav"
108109
]
109110
}
110111
},

schematics/ng-component/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template renamed to schematics/ng-component/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template

File renamed without changes.

‎schematics/ng-component/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.spec.ts.template‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import <% if(!exportDefault) { %>{ <% }%><%= classify(name) %><%= classify(type) %> <% if(!exportDefault) {%>} <% }%>from './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>';
4+
5+
describe('<%= classify(name) %><%= classify(type) %>', () => {
6+
let component: <%= classify(name) %><%= classify(type) %>;
7+
let fixture: ComponentFixture<<%= classify(name) %><%= classify(type) %>>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
<%= standalone ? 'imports' : 'declarations' %>: [<%= classify(name) %><%= classify(type) %>]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(<%= classify(name) %><%= classify(type) %>);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

schematics/ng-component/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template renamed to schematics/ng-component/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%>Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%> } from '@angular/core';
22

3-
@Component({
4-
selector: '<%= selector %>',<% if(standalone) { %>
5-
imports: [],<% } else { %>
6-
standalone: false,<% } %><% if(inlineTemplate) { %>
3+
@Component({<% if(!skipSelector) {%>
4+
selector: '<%= selector %>',<%}%><% if(standalone) {%>
5+
imports: [],<%} else { %>
6+
standalone: false,<% }%><% if(inlineTemplate) { %>
77
template: `
88
<p>
99
<%= dasherize(name) %> works!
1010
</p>
1111
`<% } else { %>
12-
templateUrl: './<%= dasherize(name) %>.component.html'<% } if(inlineStyle) { %>,
12+
templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %><%= ngext %>.html'<% } if(inlineStyle) { %>,
1313
styles: `<% if(displayBlock){ %>
1414
:host {
1515
display: block;
1616
}
1717
<% } %>`<% } else if (style !== 'none') { %>,
18-
styleUrl: './<%= dasherize(name) %>.component.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
18+
styleUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
1919
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
2020
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
2121
})
22-
export class <%= classify(name) %>Component {
23-
24-
}
22+
export <% if(exportDefault) {%>default <%}%>class <%= classify(name) %><%= classify(type) %> {}

schematics/ng-component/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template renamed to schematics/ng-component/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize____ngext__.html.template

File renamed without changes.

‎schematics/ng-component/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎schematics/ng-component/index.spec.ts‎

Lines changed: 61 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const defaultOptions = {
2525
inlineTemplate: false,
2626
changeDetection: ChangeDetection.Default,
2727
style: Style.Less,
28+
type: 'Component',
2829
skipTests: false,
2930
module: undefined,
3031
export: false,
@@ -42,7 +43,7 @@ export class ${moduleName} {}
4243
`;
4344
}
4445

45-
describe('ng-component schematic', () => {
46+
describe('[schematic] ng-component', () => {
4647
let runner: SchematicTestRunner;
4748
let appTree: Tree;
4849

@@ -66,11 +67,63 @@ describe('ng-component schematic', () => {
6667
);
6768
});
6869

70+
it('should respect the type option', async () => {
71+
const options = { ...defaultOptions, type: 'container' };
72+
const tree = await runner.runSchematic('component', options, appTree);
73+
const files = tree.files;
74+
75+
expect(files).toEqual(
76+
jasmine.arrayContaining([
77+
'/projects/ng-zorro/src/app/test/test.container.less',
78+
'/projects/ng-zorro/src/app/test/test.container.html',
79+
'/projects/ng-zorro/src/app/test/test.container.spec.ts',
80+
'/projects/ng-zorro/src/app/test/test.container.ts'
81+
])
82+
);
83+
});
84+
85+
it('should allow empty string in the type option', async () => {
86+
const options = { ...defaultOptions, type: '' };
87+
const tree = await runner.runSchematic('component', options, appTree);
88+
const files = tree.files;
89+
90+
expect(files).toEqual(
91+
jasmine.arrayContaining([
92+
'/projects/ng-zorro/src/app/test/test.less',
93+
'/projects/ng-zorro/src/app/test/test.html',
94+
'/projects/ng-zorro/src/app/test/test.spec.ts',
95+
'/projects/ng-zorro/src/app/test/test.ts'
96+
])
97+
);
98+
});
99+
100+
it('should not use `.ng.html` extension when ngHtml is false', async () => {
101+
const options = { ...defaultOptions, ngHtml: false };
102+
const tree = await runner.runSchematic('component', options, appTree);
103+
const content = tree.readContent('/projects/ng-zorro/src/app/test/test.component.ts');
104+
const files = tree.files;
105+
106+
expect(content).toContain('test.component.html');
107+
expect(files).toContain('/projects/ng-zorro/src/app/test/test.component.less');
108+
expect(files).toContain('/projects/ng-zorro/src/app/test/test.component.html');
109+
});
110+
111+
it('should use `.ng.html` extension when ngHtml is true', async () => {
112+
const options = { ...defaultOptions, ngHtml: true };
113+
const tree = await runner.runSchematic('component', options, appTree);
114+
const content = tree.readContent('/projects/ng-zorro/src/app/test/test.component.ts');
115+
const files = tree.files;
116+
117+
expect(content).toContain('test.component.ng.html');
118+
expect(files).toContain('/projects/ng-zorro/src/app/test/test.component.less');
119+
expect(files).toContain('/projects/ng-zorro/src/app/test/test.component.ng.html');
120+
});
121+
69122
describe('style', () => {
70123
it('should create specified style', async () => {
71124
const options = { ...defaultOptions, style: Style.Sass };
72125
const tree = await runner.runSchematic('component', options, appTree);
73-
const files = tree.files.filter(file => file.startsWith('/projects/ng-zorro/src/app/test/'));
126+
const files = tree.files;
74127

75128
expect(files).toEqual(
76129
jasmine.arrayContaining([
@@ -85,31 +138,31 @@ describe('ng-component schematic', () => {
85138
it('should not create style file when inlineStyle is true', async () => {
86139
const options = { ...defaultOptions, inlineStyle: true };
87140
const tree = await runner.runSchematic('component', options, appTree);
88-
const files = tree.files.filter(file => file.startsWith('/projects/ng-zorro/src/app/test/'));
141+
const files = tree.files;
89142

90-
expect(files.length).toEqual(3);
91143
expect(files).toEqual(
92144
jasmine.arrayContaining([
93145
'/projects/ng-zorro/src/app/test/test.component.html',
94146
'/projects/ng-zorro/src/app/test/test.component.spec.ts',
95147
'/projects/ng-zorro/src/app/test/test.component.ts'
96148
])
97149
);
150+
expect(files).not.toContain('/projects/ng-zorro/src/app/test/test.component.less');
98151
});
99152

100153
it('should not create style file when style is none', async () => {
101154
const options = { ...defaultOptions, style: Style.None };
102155
const tree = await runner.runSchematic('component', options, appTree);
103-
const files = tree.files.filter(file => file.startsWith('/projects/ng-zorro/src/app/test/'));
156+
const files = tree.files;
104157

105-
expect(files.length).toEqual(3);
106158
expect(files).toEqual(
107159
jasmine.arrayContaining([
108160
'/projects/ng-zorro/src/app/test/test.component.html',
109161
'/projects/ng-zorro/src/app/test/test.component.spec.ts',
110162
'/projects/ng-zorro/src/app/test/test.component.ts'
111163
])
112164
);
165+
expect(files).not.toContain('/projects/ng-zorro/src/app/test/test.component.less');
113166
});
114167
});
115168

@@ -151,7 +204,7 @@ describe('ng-component schematic', () => {
151204
describe('classnameWithModule', () => {
152205
it('should find the closest module', async () => {
153206
const options = { ...defaultOptions, standalone: false };
154-
const closestModule = '/projects/ng-zorro/src/app/test/test.module.ts';
207+
const closestModule = '/projects/ng-zorro/src/app/test/test-module.ts';
155208

156209
appTree.create(
157210
closestModule,
@@ -165,7 +218,7 @@ describe('ng-component schematic', () => {
165218

166219
it('should set classname with the closest module', async () => {
167220
const options = { ...defaultOptions, classnameWithModule: true, standalone: false };
168-
const testModule = '/projects/ng-zorro/src/app/test/test.module.ts';
221+
const testModule = '/projects/ng-zorro/src/app/test/test-module.ts';
169222

170223
appTree.create(
171224
testModule,

‎schematics/ng-component/schema.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,10 @@
8989
"none"
9090
]
9191
},
92+
"type": {
93+
"type": "string",
94+
"description": "Append a custom type to the component's filename. For example, if you set the type to `container`, the file will be named `my-component.container.ts`."
95+
},
9296
"skipTests": {
9397
"type": "boolean",
9498
"description": "When true, does not create \"spec.ts\" test files for the new component.",
@@ -109,6 +113,11 @@
109113
"format": "html-selector",
110114
"description": "The selector to use for the component."
111115
},
116+
"skipSelector": {
117+
"type": "boolean",
118+
"default": false,
119+
"description": "Skip the generation of an HTML selector for the component."
120+
},
112121
"module": {
113122
"type": "string",
114123
"description": "Allows specification of the declaring module.",
@@ -119,6 +128,16 @@
119128
"default": false,
120129
"description": "When true, the declaring NgModule exports this component."
121130
},
131+
"exportDefault": {
132+
"type": "boolean",
133+
"default": false,
134+
"description": "Use a default export for the component in its TypeScript file instead of a named export."
135+
},
136+
"ngHtml": {
137+
"type": "boolean",
138+
"default": false,
139+
"description": "Generate component template files with an '.ng.html' file extension instead of '.html'."
140+
},
122141
"entryComponent": {
123142
"type": "boolean",
124143
"default": false,

0 commit comments

Comments
 (0)