Skip to content

fix(schematics): properly indent inline files #12317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,12 @@ import { FormBuilder, Validators } from '@angular/forms';
selector: '<%= selector %>',
<% if(inlineTemplate) { %>
template: `
<%= resolvedFiles.template %>
<%= indentTextContent(resolvedFiles.template, 4) %>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
styles: [
`
<%= resolvedFiles.stylesheet %>
`
],<% } else { %>
styles: [`
<%= indentTextContent(resolvedFiles.stylesheet, 4) %>
`],<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if(!!viewEncapsulation) { %>
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,12 @@ import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
template: `
<%= resolvedFiles.template %>
<%= indentTextContent(resolvedFiles.template, 4) %>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
styles: [
`
<%= resolvedFiles.stylesheet %>
`
],<% } else { %>
styles: [`
<%= indentTextContent(resolvedFiles.stylesheet, 4) %>
`],<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if(!!viewEncapsulation) { %>
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,12 @@ import { map } from 'rxjs/operators';
@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
template: `
<%= resolvedFiles.template %>
<%= indentTextContent(resolvedFiles.template, 4) %>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
styles: [
`
<%= resolvedFiles.stylesheet %>
`
],<% } else { %>
styles: [`
<%= indentTextContent(resolvedFiles.stylesheet, 4) %>
`],<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if(!!viewEncapsulation) { %>
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { <%= classify(name) %>DataSource } from './<%= dasherize(name) %>-dataso
@Component({
selector: '<%= selector %>',<% if(inlineTemplate) { %>
template: `
<%= resolvedFiles.template %>
<%= indentTextContent(resolvedFiles.template, 4) %>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
styles: []<% } else { %>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,12 @@ export interface FlatTreeNode {
@Component({
selector: '<%= selector %>',<% if (inlineTemplate) { %>
template: `
<%= resolvedFiles.template %>
<%= indentTextContent(resolvedFiles.template, 4) %>
`,<% } else { %>
templateUrl: './<%= dasherize(name) %>.component.html',<% } if (inlineStyle) { %>
styles: [
`
<%= resolvedFiles.stylesheet %>
`
],<% } else { %>
styles: [`
<%= indentTextContent(resolvedFiles.stylesheet, 4) %>
`],<% } else { %>
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if (!!viewEncapsulation) { %>
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
Expand Down
3 changes: 2 additions & 1 deletion src/lib/schematics/utils/devkit-utils/README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# NOTE
This code is directly taken from [angular schematics package](https://github.com/angular/devkit/tree/master/packages/schematics/angular/utility).

The base utility functions are taken from [angular schematics package](https://github.com/angular/angular-cli/tree/master/packages/schematics/angular/utility).
18 changes: 17 additions & 1 deletion src/lib/schematics/utils/devkit-utils/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,17 @@ function buildSelector(options: any, projectPrefix: string) {
return selector;
}

/**
* Indents the text content with the amount of specified spaces. The spaces will be added after
* every line-break. This utility function can be used inside of EJS templates to properly
* include the additional files.
*/
function indentTextContent(text: string, numSpaces: number): string {
// In the Material project there should be only LF line-endings, but the schematic files
// are not being linted and therefore there can be also use CRLF or just CR line-endings.
return text.replace(/(\r\n|\r|\n)/g, `$1${' '.repeat(numSpaces)}`);
}

/**
* Rule that copies and interpolates the files that belong to this schematic context. Additionally
* a list of file paths can be passed to this rule in order to expose them inside the EJS
Expand All @@ -113,7 +124,9 @@ function buildSelector(options: any, projectPrefix: string) {
* This allows inlining the external template or stylesheet files in EJS without having
* to manually duplicate the file content.
*/
export function buildComponent(options: any, additionalFiles?: {[key: string]: string}): Rule {
export function buildComponent(options: any,
additionalFiles: {[key: string]: string} = {}): Rule {

return (host: Tree, context: FileSystemSchematicContext) => {
const workspace = getWorkspace(host);

Expand Down Expand Up @@ -166,6 +179,7 @@ export function buildComponent(options: any, additionalFiles?: {[key: string]: s
options.inlineStyle ? filter(path => !path.endsWith('.__styleext__')) : noop(),
options.inlineTemplate ? filter(path => !path.endsWith('.html')) : noop(),
template({
indentTextContent,
resolvedFiles,
...baseTemplateContext
}),
Expand All @@ -180,3 +194,5 @@ export function buildComponent(options: any, additionalFiles?: {[key: string]: s
])(host, context);
};
}

// TODO(paul): move this utility out of the `devkit-utils` because it's no longer taken from there.