297 lines
15 KiB
JavaScript
297 lines
15 KiB
JavaScript
|
"use strict";
|
||
|
|
/**
|
||
|
|
* @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
|
||
|
|
*/
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.default = default_1;
|
||
|
|
const schematics_1 = require("@angular-devkit/schematics");
|
||
|
|
const posix_1 = require("node:path/posix");
|
||
|
|
const typescript_1 = __importDefault(require("../third_party/github.com/Microsoft/TypeScript/lib/typescript"));
|
||
|
|
const ast_utils_1 = require("../utility/ast-utils");
|
||
|
|
const change_1 = require("../utility/change");
|
||
|
|
const ng_ast_utils_1 = require("../utility/ng-ast-utils");
|
||
|
|
const util_1 = require("../utility/standalone/util");
|
||
|
|
const workspace_1 = require("../utility/workspace");
|
||
|
|
const workspace_models_1 = require("../utility/workspace-models");
|
||
|
|
const APP_SHELL_ROUTE = 'shell';
|
||
|
|
function getSourceFile(host, path) {
|
||
|
|
const content = host.readText(path);
|
||
|
|
const source = typescript_1.default.createSourceFile(path, content, typescript_1.default.ScriptTarget.Latest, true);
|
||
|
|
return source;
|
||
|
|
}
|
||
|
|
function getServerModulePath(host, sourceRoot, mainPath) {
|
||
|
|
const mainSource = getSourceFile(host, (0, posix_1.join)(sourceRoot, mainPath));
|
||
|
|
const allNodes = (0, ast_utils_1.getSourceNodes)(mainSource);
|
||
|
|
const expNode = allNodes.find((node) => typescript_1.default.isExportDeclaration(node));
|
||
|
|
if (!expNode) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const relativePath = expNode.moduleSpecifier;
|
||
|
|
const modulePath = (0, posix_1.join)(sourceRoot, `${relativePath.text}.ts`);
|
||
|
|
return modulePath;
|
||
|
|
}
|
||
|
|
function getComponentTemplateInfo(host, componentPath) {
|
||
|
|
const compSource = getSourceFile(host, componentPath);
|
||
|
|
const compMetadata = (0, ast_utils_1.getDecoratorMetadata)(compSource, 'Component', '@angular/core')[0];
|
||
|
|
return {
|
||
|
|
templateProp: getMetadataProperty(compMetadata, 'template'),
|
||
|
|
templateUrlProp: getMetadataProperty(compMetadata, 'templateUrl'),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function getComponentTemplate(host, compPath, tmplInfo) {
|
||
|
|
let template = '';
|
||
|
|
if (tmplInfo.templateProp) {
|
||
|
|
template = tmplInfo.templateProp.getFullText();
|
||
|
|
}
|
||
|
|
else if (tmplInfo.templateUrlProp) {
|
||
|
|
const templateUrl = tmplInfo.templateUrlProp.initializer.text;
|
||
|
|
const dir = (0, posix_1.dirname)(compPath);
|
||
|
|
const templatePath = (0, posix_1.join)(dir, templateUrl);
|
||
|
|
try {
|
||
|
|
template = host.readText(templatePath);
|
||
|
|
}
|
||
|
|
catch { }
|
||
|
|
}
|
||
|
|
return template;
|
||
|
|
}
|
||
|
|
function getBootstrapComponentPath(host, mainPath) {
|
||
|
|
let bootstrappingFilePath;
|
||
|
|
let bootstrappingSource;
|
||
|
|
let componentName;
|
||
|
|
if ((0, ng_ast_utils_1.isStandaloneApp)(host, mainPath)) {
|
||
|
|
// Standalone Application
|
||
|
|
const bootstrapCall = (0, util_1.findBootstrapApplicationCall)(host, mainPath);
|
||
|
|
componentName = bootstrapCall.arguments[0].getText();
|
||
|
|
bootstrappingFilePath = mainPath;
|
||
|
|
bootstrappingSource = getSourceFile(host, mainPath);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// NgModule Application
|
||
|
|
const modulePath = (0, ng_ast_utils_1.getAppModulePath)(host, mainPath);
|
||
|
|
const moduleSource = getSourceFile(host, modulePath);
|
||
|
|
const metadataNode = (0, ast_utils_1.getDecoratorMetadata)(moduleSource, 'NgModule', '@angular/core')[0];
|
||
|
|
const bootstrapProperty = getMetadataProperty(metadataNode, 'bootstrap');
|
||
|
|
const arrLiteral = bootstrapProperty.initializer;
|
||
|
|
componentName = arrLiteral.elements[0].getText();
|
||
|
|
bootstrappingSource = moduleSource;
|
||
|
|
bootstrappingFilePath = modulePath;
|
||
|
|
}
|
||
|
|
const componentRelativeFilePath = (0, ast_utils_1.getSourceNodes)(bootstrappingSource)
|
||
|
|
.filter(typescript_1.default.isImportDeclaration)
|
||
|
|
.filter((imp) => {
|
||
|
|
return (0, ast_utils_1.findNode)(imp, typescript_1.default.SyntaxKind.Identifier, componentName);
|
||
|
|
})
|
||
|
|
.map((imp) => {
|
||
|
|
const pathStringLiteral = imp.moduleSpecifier;
|
||
|
|
return pathStringLiteral.text;
|
||
|
|
})[0];
|
||
|
|
return (0, posix_1.join)((0, posix_1.dirname)(bootstrappingFilePath), componentRelativeFilePath + '.ts');
|
||
|
|
}
|
||
|
|
// end helper functions.
|
||
|
|
function validateProject(mainPath) {
|
||
|
|
return (host) => {
|
||
|
|
const routerOutletCheckRegex = /<router-outlet.*?>([\s\S]*?)(?:<\/router-outlet>)?/;
|
||
|
|
const componentPath = getBootstrapComponentPath(host, mainPath);
|
||
|
|
const tmpl = getComponentTemplateInfo(host, componentPath);
|
||
|
|
const template = getComponentTemplate(host, componentPath, tmpl);
|
||
|
|
if (!routerOutletCheckRegex.test(template)) {
|
||
|
|
throw new schematics_1.SchematicsException(`Prerequisite for application shell is to define a router-outlet in your root component.`);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function addAppShellConfigToWorkspace(options) {
|
||
|
|
return (host, context) => {
|
||
|
|
return (0, workspace_1.updateWorkspace)((workspace) => {
|
||
|
|
const project = workspace.projects.get(options.project);
|
||
|
|
if (!project) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const buildTarget = project.targets.get('build');
|
||
|
|
if (buildTarget?.builder === workspace_models_1.Builders.Application) {
|
||
|
|
// Application builder configuration.
|
||
|
|
const prodConfig = buildTarget.configurations?.production;
|
||
|
|
if (!prodConfig) {
|
||
|
|
throw new schematics_1.SchematicsException(`A "production" configuration is not defined for the "build" builder.`);
|
||
|
|
}
|
||
|
|
prodConfig.appShell = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// Webpack based builders configuration.
|
||
|
|
// Validation of targets is handled already in the main function.
|
||
|
|
// Duplicate keys means that we have configurations in both server and build builders.
|
||
|
|
const serverConfigKeys = project.targets.get('server')?.configurations ?? {};
|
||
|
|
const buildConfigKeys = project.targets.get('build')?.configurations ?? {};
|
||
|
|
const configurationNames = Object.keys({
|
||
|
|
...serverConfigKeys,
|
||
|
|
...buildConfigKeys,
|
||
|
|
});
|
||
|
|
const configurations = {};
|
||
|
|
for (const key of configurationNames) {
|
||
|
|
if (!serverConfigKeys[key]) {
|
||
|
|
context.logger.warn(`Skipped adding "${key}" configuration to "app-shell" target as it's missing from "server" target.`);
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
if (!buildConfigKeys[key]) {
|
||
|
|
context.logger.warn(`Skipped adding "${key}" configuration to "app-shell" target as it's missing from "build" target.`);
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
configurations[key] = {
|
||
|
|
browserTarget: `${options.project}:build:${key}`,
|
||
|
|
serverTarget: `${options.project}:server:${key}`,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
project.targets.add({
|
||
|
|
name: 'app-shell',
|
||
|
|
builder: workspace_models_1.Builders.AppShell,
|
||
|
|
defaultConfiguration: configurations['production'] ? 'production' : undefined,
|
||
|
|
options: {
|
||
|
|
route: APP_SHELL_ROUTE,
|
||
|
|
},
|
||
|
|
configurations,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function addRouterModule(mainPath) {
|
||
|
|
return (host) => {
|
||
|
|
const modulePath = (0, ng_ast_utils_1.getAppModulePath)(host, mainPath);
|
||
|
|
const moduleSource = getSourceFile(host, modulePath);
|
||
|
|
const changes = (0, ast_utils_1.addImportToModule)(moduleSource, modulePath, 'RouterModule', '@angular/router');
|
||
|
|
const recorder = host.beginUpdate(modulePath);
|
||
|
|
(0, change_1.applyToUpdateRecorder)(recorder, changes);
|
||
|
|
host.commitUpdate(recorder);
|
||
|
|
return host;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function getMetadataProperty(metadata, propertyName) {
|
||
|
|
const properties = metadata.properties;
|
||
|
|
const property = properties.filter(typescript_1.default.isPropertyAssignment).filter((prop) => {
|
||
|
|
const name = prop.name;
|
||
|
|
switch (name.kind) {
|
||
|
|
case typescript_1.default.SyntaxKind.Identifier:
|
||
|
|
return name.getText() === propertyName;
|
||
|
|
case typescript_1.default.SyntaxKind.StringLiteral:
|
||
|
|
return name.text === propertyName;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
})[0];
|
||
|
|
return property;
|
||
|
|
}
|
||
|
|
function addServerRoutes(options) {
|
||
|
|
return async (host) => {
|
||
|
|
// The workspace gets updated so this needs to be reloaded
|
||
|
|
const workspace = await (0, workspace_1.getWorkspace)(host);
|
||
|
|
const project = workspace.projects.get(options.project);
|
||
|
|
if (!project) {
|
||
|
|
throw new schematics_1.SchematicsException(`Invalid project name (${options.project})`);
|
||
|
|
}
|
||
|
|
const modulePath = getServerModulePath(host, project.sourceRoot || 'src', 'main.server.ts');
|
||
|
|
if (modulePath === null) {
|
||
|
|
throw new schematics_1.SchematicsException('Server module not found.');
|
||
|
|
}
|
||
|
|
let moduleSource = getSourceFile(host, modulePath);
|
||
|
|
if (!(0, ast_utils_1.isImported)(moduleSource, 'Routes', '@angular/router')) {
|
||
|
|
const recorder = host.beginUpdate(modulePath);
|
||
|
|
const routesChange = (0, ast_utils_1.insertImport)(moduleSource, modulePath, 'Routes', '@angular/router');
|
||
|
|
if (routesChange) {
|
||
|
|
(0, change_1.applyToUpdateRecorder)(recorder, [routesChange]);
|
||
|
|
}
|
||
|
|
const imports = (0, ast_utils_1.getSourceNodes)(moduleSource)
|
||
|
|
.filter((node) => node.kind === typescript_1.default.SyntaxKind.ImportDeclaration)
|
||
|
|
.sort((a, b) => a.getStart() - b.getStart());
|
||
|
|
const insertPosition = imports[imports.length - 1].getEnd();
|
||
|
|
const routeText = `\n\nconst routes: Routes = [ { path: '${APP_SHELL_ROUTE}', component: AppShellComponent }];`;
|
||
|
|
recorder.insertRight(insertPosition, routeText);
|
||
|
|
host.commitUpdate(recorder);
|
||
|
|
}
|
||
|
|
moduleSource = getSourceFile(host, modulePath);
|
||
|
|
if (!(0, ast_utils_1.isImported)(moduleSource, 'RouterModule', '@angular/router')) {
|
||
|
|
const recorder = host.beginUpdate(modulePath);
|
||
|
|
const routerModuleChange = (0, ast_utils_1.insertImport)(moduleSource, modulePath, 'RouterModule', '@angular/router');
|
||
|
|
if (routerModuleChange) {
|
||
|
|
(0, change_1.applyToUpdateRecorder)(recorder, [routerModuleChange]);
|
||
|
|
}
|
||
|
|
const metadataChange = (0, ast_utils_1.addSymbolToNgModuleMetadata)(moduleSource, modulePath, 'imports', 'RouterModule.forRoot(routes)');
|
||
|
|
if (metadataChange) {
|
||
|
|
(0, change_1.applyToUpdateRecorder)(recorder, metadataChange);
|
||
|
|
}
|
||
|
|
host.commitUpdate(recorder);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function addStandaloneServerRoute(options) {
|
||
|
|
return async (host) => {
|
||
|
|
const workspace = await (0, workspace_1.getWorkspace)(host);
|
||
|
|
const project = workspace.projects.get(options.project);
|
||
|
|
if (!project) {
|
||
|
|
throw new schematics_1.SchematicsException(`Project name "${options.project}" doesn't not exist.`);
|
||
|
|
}
|
||
|
|
const configFilePath = (0, posix_1.join)(project.sourceRoot ?? 'src', 'app/app.config.server.ts');
|
||
|
|
if (!host.exists(configFilePath)) {
|
||
|
|
throw new schematics_1.SchematicsException(`Cannot find "${configFilePath}".`);
|
||
|
|
}
|
||
|
|
let configSourceFile = getSourceFile(host, configFilePath);
|
||
|
|
if (!(0, ast_utils_1.isImported)(configSourceFile, 'ROUTES', '@angular/router')) {
|
||
|
|
const routesChange = (0, ast_utils_1.insertImport)(configSourceFile, configFilePath, 'ROUTES', '@angular/router');
|
||
|
|
const recorder = host.beginUpdate(configFilePath);
|
||
|
|
if (routesChange) {
|
||
|
|
(0, change_1.applyToUpdateRecorder)(recorder, [routesChange]);
|
||
|
|
host.commitUpdate(recorder);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
configSourceFile = getSourceFile(host, configFilePath);
|
||
|
|
const providersLiteral = (0, ast_utils_1.findNodes)(configSourceFile, typescript_1.default.isPropertyAssignment).find((n) => typescript_1.default.isArrayLiteralExpression(n.initializer) && n.name.getText() === 'providers')?.initializer;
|
||
|
|
if (!providersLiteral) {
|
||
|
|
throw new schematics_1.SchematicsException(`Cannot find the "providers" configuration in "${configFilePath}".`);
|
||
|
|
}
|
||
|
|
// Add route to providers literal.
|
||
|
|
const newProvidersLiteral = typescript_1.default.factory.updateArrayLiteralExpression(providersLiteral, [
|
||
|
|
...providersLiteral.elements,
|
||
|
|
typescript_1.default.factory.createObjectLiteralExpression([
|
||
|
|
typescript_1.default.factory.createPropertyAssignment('provide', typescript_1.default.factory.createIdentifier('ROUTES')),
|
||
|
|
typescript_1.default.factory.createPropertyAssignment('multi', typescript_1.default.factory.createIdentifier('true')),
|
||
|
|
typescript_1.default.factory.createPropertyAssignment('useValue', typescript_1.default.factory.createArrayLiteralExpression([
|
||
|
|
typescript_1.default.factory.createObjectLiteralExpression([
|
||
|
|
typescript_1.default.factory.createPropertyAssignment('path', typescript_1.default.factory.createIdentifier(`'${APP_SHELL_ROUTE}'`)),
|
||
|
|
typescript_1.default.factory.createPropertyAssignment('component', typescript_1.default.factory.createIdentifier('AppShellComponent')),
|
||
|
|
], true),
|
||
|
|
], true)),
|
||
|
|
], true),
|
||
|
|
]);
|
||
|
|
const recorder = host.beginUpdate(configFilePath);
|
||
|
|
recorder.remove(providersLiteral.getStart(), providersLiteral.getWidth());
|
||
|
|
const printer = typescript_1.default.createPrinter();
|
||
|
|
recorder.insertRight(providersLiteral.getStart(), printer.printNode(typescript_1.default.EmitHint.Unspecified, newProvidersLiteral, configSourceFile));
|
||
|
|
// Add AppShellComponent import
|
||
|
|
const appShellImportChange = (0, ast_utils_1.insertImport)(configSourceFile, configFilePath, 'AppShellComponent', './app-shell/app-shell.component');
|
||
|
|
(0, change_1.applyToUpdateRecorder)(recorder, [appShellImportChange]);
|
||
|
|
host.commitUpdate(recorder);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function default_1(options) {
|
||
|
|
return async (tree) => {
|
||
|
|
const browserEntryPoint = await (0, util_1.getMainFilePath)(tree, options.project);
|
||
|
|
const isStandalone = (0, ng_ast_utils_1.isStandaloneApp)(tree, browserEntryPoint);
|
||
|
|
return (0, schematics_1.chain)([
|
||
|
|
validateProject(browserEntryPoint),
|
||
|
|
(0, schematics_1.schematic)('server', options),
|
||
|
|
addAppShellConfigToWorkspace(options),
|
||
|
|
isStandalone ? (0, schematics_1.noop)() : addRouterModule(browserEntryPoint),
|
||
|
|
isStandalone ? addStandaloneServerRoute(options) : addServerRoutes(options),
|
||
|
|
(0, schematics_1.schematic)('component', {
|
||
|
|
name: 'app-shell',
|
||
|
|
module: 'app.module.server.ts',
|
||
|
|
project: options.project,
|
||
|
|
standalone: isStandalone,
|
||
|
|
}),
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
}
|