Skip to content

feat: generate stylesheets when migrating components and modules #128

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.

Sign up for GitHub

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
merged 2 commits into from
Oct 10, 2018
Merged

feat: generate stylesheets when migrating components and modules #128

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
594f738
Generate stylesheets when migrating components and modules
sebawita Oct 10, 2018
655e9bf
Add a comment to the style template
sebawita Oct 10, 2018
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
Empty file added src/migrate-component/_ns-style/__path__/__styleFileName@addNsExtension__
View file
Open in desktop
Empty file.
27 changes: 25 additions & 2 deletions src/migrate-component/component-info-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export interface ComponentInfo {
modulePath: string;
componentPath: string;
componentHtmlPath: string;
// componentStylePath: string;
componentStylePath: string;
}

let projectSettings: AngularProjectSettings;
Expand All @@ -33,11 +33,14 @@ export const parseComponentInfo = (options: MigrateComponentSchema) => (tree: Tr
const componentPath = findComponentPath(className, modulePath, options, tree);
const componentHtmlPath = findTemplateUrl(componentPath, className, tree);

const componentStylePath = findStyleUrl(componentPath, className, tree);

const componentInfo: ComponentInfo = {
className,
modulePath,
componentPath,
componentHtmlPath
componentHtmlPath,
componentStylePath
}

context.logger.info(`ComponentInfo
Expand Down Expand Up @@ -179,3 +182,23 @@ const findTemplateUrl = (componentPath: string, componentClassName: string, tree
}
}

const findStyleUrl = (componentPath: string, componentClassName: string, tree: Tree): string => {
const source = getSourceFile(tree, componentPath);

const node = findDecoratorPropertyNode(source, componentClassName, 'Component', 'styleUrls');
if (node === null) {
return '';
}

if (ts.isArrayLiteralExpression(node) && node.elements.length > 0) {
const stylePath = (node.elements[0] as ts.StringLiteral).text;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if there are multiple stylesheets for the same component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought about that, but 99.9% of the cases would use just a single stylesheet. And in the cases that there are more it would probably be better to handle it manually


return join(
dirname(componentPath),
stylePath
);
}

return '';
}

24 changes: 24 additions & 0 deletions src/migrate-component/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
branchAndMerge,
mergeWith,
SchematicsException,
noop,
} from '@angular-devkit/schematics';
import { InsertChange } from '@schematics/angular/utility/change';
import { addDeclarationToModule } from '@schematics/angular/utility/ast-utils';
Expand Down Expand Up @@ -40,6 +41,9 @@ export default function(options: MigrateComponentSchema): Rule {
(tree: Tree, context: SchematicContext) =>
addNsFiles(componentInfo, options)(tree, context),

(tree: Tree, context: SchematicContext) =>
addNsStyle(componentInfo, options)(tree, context),

(tree: Tree) =>
addComponentToNsModuleProviders(componentInfo, options)(tree)
]);
Expand Down Expand Up @@ -104,3 +108,23 @@ or if you just want to update the component without updating its module, then re
);
tree.commitUpdate(recorder);
}

const addNsStyle = (componentInfo: ComponentInfo, options: MigrateComponentSchema) => (tree: Tree, context: SchematicContext) => {
if (!componentInfo.componentStylePath || !options.style) {
return noop;
}

context.logger.info('Adding {N} StyleSheet');

const templateOptions = {
path: dirname(componentInfo.componentHtmlPath),
styleFileName: basename(componentInfo.componentStylePath),

addNsExtension: (path: string) => addExtension(path, extensions.ns),
};

const templateSource = apply(url('./_ns-style'), [
template(templateOptions)
]);
return branchAndMerge(mergeWith(templateSource))(tree, context);
}
2 changes: 2 additions & 0 deletions src/migrate-component/index_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ describe('Migrate component schematic', () => {
const options: MigrateComponentOptions = {
project,
name: componentName,
style: true
};
const htmlComponentPath = `/src/app/${componentName}/${componentName}.component.html`;
const xmlComponentPath = `/src/app/${componentName}/${componentName}.component.tns.html`;
Expand Down Expand Up @@ -70,6 +71,7 @@ describe('Migrate component schematic', () => {
project,
name: componentName,
module: moduleName,
style: true
};
const htmlComponentPath = `/src/app/${componentName}/${componentName}.component.html`;
const xmlComponentPath = `/src/app/${componentName}/${componentName}.component.tns.html`;
Expand Down
5 changes: 4 additions & 1 deletion src/migrate-component/schema.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ export interface Schema {
* Notifies us that the component doesn't belong to any module.
*/
skipModule?: boolean;

/**
* Specifies whether stylesheets should be generated.
*/
style: boolean;
nsext?: string;
webext?: string;
/**
Expand Down
4 changes: 4 additions & 0 deletions src/migrate-component/schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
"skipModule": {
"type": "boolean"
},
"style": {
"type": "boolean",
"default": true
},
"nsext": {
"type": "string"
},
Expand Down
7 changes: 4 additions & 3 deletions src/migrate-module/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function(options: MigrateModuleSchema): Rule {

addModuleFile(options.name, options.project),

(tree, context) => migrateComponents(moduleInfo, options.project)(tree, context),
(tree, context) => migrateComponents(moduleInfo, options)(tree, context),
migrateProviders()
]);
}
Expand All @@ -55,7 +55,7 @@ const addModuleFile =
common: true,
})(tree, context);

const migrateComponents = (moduleInfo: ModuleInfo, project: string) => {
const migrateComponents = (moduleInfo: ModuleInfo, options: MigrateModuleSchema) => {
const components = moduleInfo.declarations.filter(d => d.name.endsWith('Component'));

return chain(
Expand All @@ -64,7 +64,8 @@ const migrateComponents = (moduleInfo: ModuleInfo, project: string) => {
name: component.name,
modulePath: moduleInfo.modulePath,
nsext,
project,
project: options.project,
style: options.style
}
return schematic<MigrateComponentSchema>('migrate-component', convertComponentOptions);
}),
Expand Down
1 change: 1 addition & 0 deletions src/migrate-module/index_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ describe('Migrate module Schematic', () => {
const defaultOptions: MigrateModuleOptions = {
name: moduleName,
project,
style: true
};
const nsModulePath = '/src/app/admin/admin.module.tns.ts';
const webModulePath = '/src/app/admin/admin.module.ts';
Expand Down
4 changes: 4 additions & 0 deletions src/migrate-module/schema.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export interface Schema {
* Specifies the module path.
*/
modulePath?: string;
/**
* Specifies whether stylesheets should be generated for all components.
*/
style: boolean;
nsext?: string;
/**
* Allows specification of the project to be updated
Expand Down
4 changes: 4 additions & 0 deletions src/migrate-module/schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
"type": "string",
"alias": "p"
},
"style": {
"type": "boolean",
"default": true
},
"nsext": {
"type": "string"
},
Expand Down