diff --git a/src/migrate-component/_ns-style/__path__/__styleFileName@addNsExtension__ b/src/migrate-component/_ns-style/__path__/__styleFileName@addNsExtension__ new file mode 100644 index 0000000..2092f08 --- /dev/null +++ b/src/migrate-component/_ns-style/__path__/__styleFileName@addNsExtension__ @@ -0,0 +1,5 @@ +/* +Add your NativeScript specific styles here. +To learn more about styling in NativeScript see: +https://docs.nativescript.org/angular/ui/styling +*/ \ No newline at end of file diff --git a/src/migrate-component/component-info-utils.ts b/src/migrate-component/component-info-utils.ts index ad7805e..f08686c 100644 --- a/src/migrate-component/component-info-utils.ts +++ b/src/migrate-component/component-info-utils.ts @@ -15,7 +15,7 @@ export interface ComponentInfo { modulePath: string; componentPath: string; componentHtmlPath: string; - // componentStylePath: string; + componentStylePath: string; } let projectSettings: AngularProjectSettings; @@ -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 @@ -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; + + return join( + dirname(componentPath), + stylePath + ); + } + + return ''; +} + diff --git a/src/migrate-component/index.ts b/src/migrate-component/index.ts index 9882528..c248182 100644 --- a/src/migrate-component/index.ts +++ b/src/migrate-component/index.ts @@ -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'; @@ -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) ]); @@ -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); +} diff --git a/src/migrate-component/index_spec.ts b/src/migrate-component/index_spec.ts index f51f647..39a888b 100644 --- a/src/migrate-component/index_spec.ts +++ b/src/migrate-component/index_spec.ts @@ -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`; @@ -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`; diff --git a/src/migrate-component/schema.d.ts b/src/migrate-component/schema.d.ts index a35ded7..4f97505 100644 --- a/src/migrate-component/schema.d.ts +++ b/src/migrate-component/schema.d.ts @@ -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; /** diff --git a/src/migrate-component/schema.json b/src/migrate-component/schema.json index ff95d20..f75ae75 100644 --- a/src/migrate-component/schema.json +++ b/src/migrate-component/schema.json @@ -22,6 +22,10 @@ "skipModule": { "type": "boolean" }, + "style": { + "type": "boolean", + "default": true + }, "nsext": { "type": "string" }, diff --git a/src/migrate-module/index.ts b/src/migrate-module/index.ts index cc47134..7acdf4c 100644 --- a/src/migrate-module/index.ts +++ b/src/migrate-module/index.ts @@ -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() ]); } @@ -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( @@ -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('migrate-component', convertComponentOptions); }), diff --git a/src/migrate-module/index_spec.ts b/src/migrate-module/index_spec.ts index a32553e..0023f5b 100644 --- a/src/migrate-module/index_spec.ts +++ b/src/migrate-module/index_spec.ts @@ -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'; diff --git a/src/migrate-module/schema.d.ts b/src/migrate-module/schema.d.ts index 58de062..4f6f2af 100644 --- a/src/migrate-module/schema.d.ts +++ b/src/migrate-module/schema.d.ts @@ -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 diff --git a/src/migrate-module/schema.json b/src/migrate-module/schema.json index 4dd5adc..76c3de6 100644 --- a/src/migrate-module/schema.json +++ b/src/migrate-module/schema.json @@ -12,6 +12,10 @@ "type": "string", "alias": "p" }, + "style": { + "type": "boolean", + "default": true + }, "nsext": { "type": "string" },