123 lines
4.4 KiB
TypeScript
123 lines
4.4 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.dev/license
|
|
*/
|
|
|
|
import {chain, noop, Rule, SchematicContext, Tree, callRule} from '@angular-devkit/schematics';
|
|
import {getProjectFromWorkspace, getProjectStyleFile} from '@angular/cdk/schematics';
|
|
import {getWorkspace} from '@schematics/angular/utility/workspace';
|
|
import {addRootProvider} from '@schematics/angular/utility';
|
|
import {ProjectType} from '@schematics/angular/utility/workspace-models';
|
|
import {of as observableOf} from 'rxjs';
|
|
import {catchError} from 'rxjs/operators';
|
|
import {addFontsToIndex} from './fonts/material-fonts';
|
|
import {Schema} from './schema';
|
|
import {addThemeToAppStyles, addTypographyClass} from './theming/theming';
|
|
|
|
/**
|
|
* Scaffolds the basics of a Angular Material application, this includes:
|
|
* - Add Packages to package.json
|
|
* - Adds pre-built themes to styles.ext
|
|
* - Adds Browser Animation to app.module
|
|
*/
|
|
export default function (options: Schema): Rule {
|
|
return async (host: Tree, context: SchematicContext) => {
|
|
const workspace = await getWorkspace(host);
|
|
const project = getProjectFromWorkspace(workspace, options.project);
|
|
|
|
if (project.extensions['projectType'] === ProjectType.Application) {
|
|
return chain([
|
|
addAnimations(options),
|
|
addThemeToAppStyles(options),
|
|
addFontsToIndex(options),
|
|
addMaterialAppStyles(options),
|
|
addTypographyClass(options),
|
|
]);
|
|
}
|
|
context.logger.warn(
|
|
'Angular Material has been set up in your workspace. There is no additional setup ' +
|
|
'required for consuming Angular Material in your library project.\n\n' +
|
|
'If you intended to run the schematic on a different project, pass the `--project` ' +
|
|
'option.',
|
|
);
|
|
return;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Adds custom Material styles to the project style file. The custom CSS sets up the Roboto font
|
|
* and reset the default browser body margin.
|
|
*/
|
|
function addMaterialAppStyles(options: Schema) {
|
|
return async (host: Tree, context: SchematicContext) => {
|
|
const workspace = await getWorkspace(host);
|
|
const project = getProjectFromWorkspace(workspace, options.project);
|
|
const styleFilePath = getProjectStyleFile(project);
|
|
const logger = context.logger;
|
|
|
|
if (!styleFilePath) {
|
|
logger.error(`Could not find the default style file for this project.`);
|
|
logger.info(`Consider manually adding the Roboto font to your CSS.`);
|
|
logger.info(`More information at https://fonts.google.com/specimen/Roboto`);
|
|
return;
|
|
}
|
|
|
|
const buffer = host.read(styleFilePath);
|
|
|
|
if (!buffer) {
|
|
logger.error(
|
|
`Could not read the default style file within the project ` + `(${styleFilePath})`,
|
|
);
|
|
logger.info(`Please consider manually setting up the Roboto font.`);
|
|
return;
|
|
}
|
|
|
|
const htmlContent = buffer.toString();
|
|
const insertion =
|
|
'\n' +
|
|
`html, body { height: 100%; }\n` +
|
|
`body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }\n`;
|
|
|
|
if (htmlContent.includes(insertion)) {
|
|
return;
|
|
}
|
|
|
|
const recorder = host.beginUpdate(styleFilePath);
|
|
|
|
recorder.insertLeft(htmlContent.length, insertion);
|
|
host.commitUpdate(recorder);
|
|
};
|
|
}
|
|
|
|
/** Adds the animations package to the project based on the conffiguration. */
|
|
function addAnimations(options: Schema): Rule {
|
|
return (host: Tree, context: SchematicContext) => {
|
|
const animationsRule =
|
|
options.animations === 'excluded'
|
|
? noop()
|
|
: addRootProvider(options.project, ({code, external}) => {
|
|
return code`${external(
|
|
'provideAnimationsAsync',
|
|
'@angular/platform-browser/animations/async',
|
|
)}(${options.animations === 'disabled' ? `'noop'` : ''})`;
|
|
});
|
|
|
|
// The `addRootProvider` rule can throw in some custom scenarios (see #28640).
|
|
// Add some error handling around it so the setup isn't interrupted.
|
|
return callRule(animationsRule, host, context).pipe(
|
|
catchError(() => {
|
|
context.logger.error(
|
|
'Failed to add animations to project. Continuing with the Angular Material setup.',
|
|
);
|
|
context.logger.info(
|
|
'Read more about setting up the animations manually: https://angular.dev/guide/animations',
|
|
);
|
|
return observableOf(host);
|
|
}),
|
|
);
|
|
};
|
|
}
|