Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-17 11:03:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(@schematics/angular): add opt in option 'displayBlock'

Browse Source
This commit is contained in:
Reto Ryter 2020-01-17 08:52:47 +01:00 committed by Douglas Parker
parent 1df5a72f8a
commit d6fa2bde93
5 changed files with 55 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/angular/cli/lib/config/schema.json
View File

@ -86,6 +86,12 @@
"default": "Default",
"alias": "c"
},
"displayBlock": {
"description": "Specifies if the style will contain `:host { display: block; }`.",
"type": "boolean",
"default": false,
"alias": "b"
},
"entryComponent": {
"type": "boolean",
"default": false,

6
packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template
View File

@ -0,0 +1,6 @@
<% if(displayBlock){ if(style != 'sass') { %>:host {
display: block;
}
<% } else { %>\:host
display: block;
<% }} %>

8
packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template
View File

@ -8,7 +8,13 @@ import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }
</p>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.<%= dasherize(type) %>.html',<% } if(inlineStyle) { %>
styles: []<% } else { %>
styles: [<% if(displayBlock){ %>
`
:host {
display: block;
}
`<% } %>
],<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.<%= dasherize(type) %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>

31
packages/schematics/angular/component/index_spec.ts
View File

@ -22,6 +22,7 @@ describe('Component Schematic', () => {
// path: 'src/app',
inlineStyle: false,
inlineTemplate: false,
displayBlock: false,
changeDetection: ChangeDetection.Default,
style: Style.Css,
type: 'Component',
@ -248,6 +249,34 @@ describe('Component Schematic', () => {
expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css');
});
it('should respect the displayBlock option when inlineStyle is `false`', async () => {
const options = { ...defaultOptions, displayBlock: true };
const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
const content = tree.readContent('/projects/bar/src/app/foo/foo.component.css');
expect(content).toMatch(/:host {\n display: block;\n}\n/);
});
it('should respect the displayBlock option when inlineStyle is `false` and use correct syntax for `scss`', async () => {
const options = { ...defaultOptions, displayBlock: true, style: 'scss' };
const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
const content = tree.readContent('/projects/bar/src/app/foo/foo.component.scss');
expect(content).toMatch(/:host {\n display: block;\n}\n/);
});
it('should respect the displayBlock option when inlineStyle is `false` and use correct syntax for `sass', async () => {
const options = { ...defaultOptions, displayBlock: true, style: 'sass' };
const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
const content = tree.readContent('/projects/bar/src/app/foo/foo.component.sass');
expect(content).toMatch(/\\:host\n display: block;\n/);
});
it('should respect the displayBlock option when inlineStyle is `true`', async () => {
const options = { ...defaultOptions, displayBlock: true, inlineStyle: true };
const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
expect(content).toMatch(/:host {\n(\s*)display: block;(\s*)}\n/);
});
it('should respect the style option', async () => {
const options = { ...defaultOptions, style: Style.Sass };
const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
@ -263,7 +292,7 @@ describe('Component Schematic', () => {
const content = tree.readContent('/projects/bar/src/app/foo/foo.route.ts');
const testContent = tree.readContent('/projects/bar/src/app/foo/foo.route.spec.ts');
expect(content).toContain('export class FooRoute implements OnInit');
expect(testContent).toContain('describe(\'FooRoute\'');
expect(testContent).toContain("describe('FooRoute'");
expect(tree.files).toContain('/projects/bar/src/app/foo/foo.route.css');
expect(tree.files).toContain('/projects/bar/src/app/foo/foo.route.html');
});

6
packages/schematics/angular/component/schema.json
View File

@ -27,6 +27,12 @@
},
"x-prompt": "What name would you like to use for the component?"
},
"displayBlock": {
"description": "Specifies if the style will contain `:host { display: block; }`.",
"type": "boolean",
"default": false,
"alias": "b"
},
"inlineStyle": {
"description": "When true, includes styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.",
"type": "boolean",