ember-codemod-remove-ember-css-modules 0.1.4 → 0.2.0-alpha.1

package/README.md

@@ -67,7 +67,12 @@ To better meet your needs, consider cloning the repo and running the codemod loc
 
 ```sh
 cd <path/to/cloned/repo>
-./bin/ember-codemod-remove-ember-css-modules.js --root=<path/to/your/project>
+
+# Compile TypeScript
+pnpm build
+
+# Run codemod
+./dist/bin/ember-codemod-remove-ember-css-modules.js --root=<path/to/your/project>
 ```
 
 

package/{bin → dist/bin}/ember-codemod-remove-ember-css-modules.js

@@ -1,34 +1,26 @@
 #!/usr/bin/env node
+// eslint-disable-next-line n/shebang
 'use strict';
-
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-
 import { removeEmberCssModules } from '../src/index.js';
-
 // Provide a title to the process in `ps`
 process.title = 'ember-codemod-remove-ember-css-modules';
-
 // Set codemod options
-const { argv } = yargs(hideBin(process.argv))
-  .option('component-structure', {
+const argv = yargs(hideBin(process.argv))
+    .option('component-structure', {
     choices: ['flat', 'nested'],
     default: 'flat',
     describe: 'Component structure (how your components are colocated)',
     type: 'string',
-  })
-  .option('root', {
+})
+    .option('root', {
     describe: 'Location of your Ember project',
     type: 'string',
-  });
-
-function castEmptyStringToUndefined(string) {
-  return string === '' ? undefined : string;
-}
-
+})
+    .parseSync();
 const codemodOptions = {
-  componentStructure: castEmptyStringToUndefined(argv['component-structure']),
-  projectRoot: argv['root'] ?? process.cwd(),
+    componentStructure: argv['component-structure'],
+    projectRoot: argv['root'] ?? process.cwd(),
 };
-
 removeEmberCssModules(codemodOptions);

package/{src → dist/src}/index.js

@@ -1,5 +1,4 @@
 import { migrateEmberApp } from './migration/index.js';
-
 export function removeEmberCssModules(codemodOptions) {
-  migrateEmberApp(codemodOptions);
+    migrateEmberApp(codemodOptions);
 }

package/dist/src/migration/ember-app/index.js

@@ -0,0 +1,21 @@
+import { analyzeApp, createOptions, importStylesInComponents, importStylesInRoutes, moveStylesheets, updateAppAppJs, updateComponentTemplates, updatePackageJson, updateRouteTemplates, } from './steps/index.js';
+export function migrateEmberApp(codemodOptions) {
+    const options = createOptions(codemodOptions);
+    const { hasEmberCssModules } = options.project;
+    // Guarantee idempotency
+    if (!hasEmberCssModules) {
+        return;
+    }
+    // Prepare for migration
+    const context = analyzeApp(options);
+    // Import styles in classes
+    moveStylesheets(options);
+    importStylesInComponents(context, options);
+    importStylesInRoutes(context, options);
+    // Update templates
+    updateComponentTemplates(context, options);
+    updateRouteTemplates(context, options);
+    // Fine-tune individual files
+    updateAppAppJs(options);
+    updatePackageJson(options);
+}

package/dist/src/migration/ember-app/steps/analyze-app.js

@@ -0,0 +1,98 @@
+import { join, parse } from 'node:path';
+import { findFiles, renamePathByDirectory } from '@codemod-utils/files';
+function analyzeFilePaths(filePaths) {
+    const entities = new Map();
+    filePaths.forEach((filePath) => {
+        const { dir, ext, name } = parse(filePath);
+        const entityName = join(dir, name);
+        if (entities.has(entityName)) {
+            entities.get(entityName).add(ext);
+            return;
+        }
+        entities.set(entityName, new Set([ext]));
+    });
+    return entities;
+}
+function analyzeComponents(options) {
+    const { componentStructure, projectRoot } = options;
+    const classFilePaths = findFiles('app/components/**/*.{js,ts}', {
+        ignoreList: ['app/components/**/*.d.ts'],
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/components',
+            to: '',
+        });
+    });
+    const stylesheetFilePaths = findFiles('app/components/**/*.css', {
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/components',
+            to: '',
+        });
+    });
+    const templateFilePaths = findFiles('app/components/**/*.hbs', {
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/components',
+            to: '',
+        });
+    });
+    const filePaths = [
+        ...classFilePaths,
+        ...stylesheetFilePaths,
+        ...templateFilePaths,
+    ].sort();
+    const entities = analyzeFilePaths(filePaths);
+    if (componentStructure === 'nested') {
+        return new Map(Array.from(entities.entries()).map(([entityName, extensions]) => {
+            const newEntityName = entityName.replace(/\/index$/, '');
+            return [newEntityName, extensions];
+        }));
+    }
+    return entities;
+}
+function analyzeRoutes(options) {
+    const { projectRoot } = options;
+    const classFilePaths = findFiles('app/controllers/**/*.{js,ts}', {
+        ignoreList: ['app/controllers/**/*.d.ts'],
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/controllers',
+            to: '',
+        });
+    });
+    const stylesheetFilePaths = findFiles('app/styles/**/*.css', {
+        ignoreList: ['app/styles/app.css'],
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/styles',
+            to: '',
+        });
+    });
+    const templateFilePaths = findFiles('app/templates/**/*.hbs', {
+        ignoreList: ['app/templates/components/**/*'],
+        projectRoot,
+    }).map((filePath) => {
+        return renamePathByDirectory(filePath, {
+            from: 'app/templates',
+            to: '',
+        });
+    });
+    const filePaths = [
+        ...classFilePaths,
+        ...stylesheetFilePaths,
+        ...templateFilePaths,
+    ].sort();
+    return analyzeFilePaths(filePaths);
+}
+export function analyzeApp(options) {
+    return {
+        components: analyzeComponents(options),
+        routes: analyzeRoutes(options),
+    };
+}

package/dist/src/migration/ember-app/steps/create-options.js

@@ -0,0 +1,24 @@
+import { readPackageJson } from '@codemod-utils/json';
+function analyzePackageJson(codemodOptions) {
+    const { dependencies, devDependencies } = readPackageJson(codemodOptions);
+    const projectDependencies = new Map([
+        ...Object.entries(dependencies ?? {}),
+        ...Object.entries(devDependencies ?? {}),
+    ]);
+    return {
+        dependencies: projectDependencies,
+        hasEmberCssModules: projectDependencies.has('ember-css-modules'),
+        hasGlint: projectDependencies.has('@glint/core'),
+        hasTypeScript: projectDependencies.has('typescript'),
+    };
+}
+export function createOptions(codemodOptions) {
+    const project = analyzePackageJson(codemodOptions);
+    const options = {
+        __styles__: 'styles',
+        componentStructure: codemodOptions.componentStructure,
+        project,
+        projectRoot: codemodOptions.projectRoot,
+    };
+    return options;
+}

package/dist/src/migration/ember-app/steps/import-styles-in-components.js

@@ -0,0 +1,35 @@
+import { join } from 'node:path';
+import { importStyles } from './shared/import-styles.js';
+function getBlueprintFilePaths(options) {
+    const { project } = options;
+    if (project.hasTypeScript) {
+        return ['ember-cli/component/typescript.ts'];
+    }
+    return ['ember-cli/component/javascript.js'];
+}
+function getFilePath(options) {
+    const { componentStructure, project } = options;
+    return function (entityName) {
+        let filePath = join('app/components', entityName);
+        if (componentStructure === 'nested') {
+            filePath += '/index';
+        }
+        if (project.hasTypeScript) {
+            filePath += '.ts';
+        }
+        else {
+            filePath += '.js';
+        }
+        return filePath;
+    };
+}
+export function importStylesInComponents(context, options) {
+    const customizations = {
+        blueprintFilePaths: getBlueprintFilePaths(options),
+        getFilePath: getFilePath(options),
+    };
+    importStyles(context.components, {
+        customizations,
+        options,
+    });
+}

package/dist/src/migration/ember-app/steps/import-styles-in-routes.js

@@ -0,0 +1,32 @@
+import { join } from 'node:path';
+import { importStyles } from './shared/import-styles.js';
+function getBlueprintFilePaths(options) {
+    const { project } = options;
+    if (project.hasTypeScript) {
+        return ['ember-cli/controller/typescript.ts'];
+    }
+    return ['ember-cli/controller/javascript.js'];
+}
+function getFilePath(options) {
+    const { project } = options;
+    return function (entityName) {
+        let filePath = join('app/controllers', entityName);
+        if (project.hasTypeScript) {
+            filePath += '.ts';
+        }
+        else {
+            filePath += '.js';
+        }
+        return filePath;
+    };
+}
+export function importStylesInRoutes(context, options) {
+    const customizations = {
+        blueprintFilePaths: getBlueprintFilePaths(options),
+        getFilePath: getFilePath(options),
+    };
+    importStyles(context.routes, {
+        customizations,
+        options,
+    });
+}

package/dist/src/migration/ember-app/steps/move-stylesheets.js

@@ -0,0 +1,35 @@
+import { createFiles, findFiles, mapFilePaths, moveFiles, } from '@codemod-utils/files';
+function moveRouteStylesheets(options) {
+    const { projectRoot } = options;
+    const filePaths = findFiles('app/styles/**/*.css', {
+        ignoreList: ['app/styles/app.css'],
+        projectRoot,
+    });
+    const pathMapping = mapFilePaths(filePaths, {
+        from: 'app/styles',
+        to: 'app/controllers',
+    });
+    moveFiles(pathMapping, options);
+}
+function moveAppCssToAssets(options) {
+    const { projectRoot } = options;
+    const filePaths = findFiles('app/styles/app.css', {
+        projectRoot,
+    });
+    const pathMapping = mapFilePaths(filePaths, {
+        from: 'app/styles',
+        to: 'app/assets',
+    });
+    moveFiles(pathMapping, options);
+    const fileMap = new Map([
+        [
+            'app/styles/app.css',
+            '/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */\n',
+        ],
+    ]);
+    createFiles(fileMap, options);
+}
+export function moveStylesheets(options) {
+    moveRouteStylesheets(options);
+    moveAppCssToAssets(options);
+}

package/dist/src/migration/ember-app/steps/shared/import-styles.js

@@ -0,0 +1,136 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { readFileSync } from 'node:fs';
+import { join, parse } from 'node:path';
+import { ASTJavaScript as AST } from '@codemod-utils/ast';
+import { processTemplate } from '@codemod-utils/blueprints';
+import { createFiles } from '@codemod-utils/files';
+import { blueprintsRoot } from '../../../../utils/blueprints.js';
+import { parseEntityName } from '../../../../utils/string.js';
+function removeTemplateOnlyComponentMethod(file, data) {
+    const traverse = AST.traverse(data.isTypeScript);
+    const ast = traverse(file, {
+        visitCallExpression(path) {
+            if (path.value.callee.name !== 'templateOnlyComponent') {
+                return false;
+            }
+            const superClass = AST.builders.identifier('Component');
+            if (data.isTypeScript) {
+                superClass.typeAnnotation = path.value.typeParameters;
+            }
+            return AST.builders.classExpression(null, AST.builders.classBody([
+                AST.builders.classProperty(AST.builders.identifier(data.__styles__), AST.builders.identifier(data.__styles__)),
+            ]), superClass);
+        },
+        visitImportDeclaration(path) {
+            if (path.value.source.value !== '@ember/component/template-only') {
+                return false;
+            }
+            const defaultImport = path.value.specifiers.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
+            if (defaultImport?.local?.name !== 'templateOnlyComponent') {
+                return false;
+            }
+            return AST.builders.importDeclaration([
+                AST.builders.importDefaultSpecifier(AST.builders.identifier('Component')),
+            ], AST.builders.literal('@glimmer/component'));
+        },
+    });
+    return AST.print(ast);
+}
+function importStylesInClass(file, data) {
+    const traverse = AST.traverse(data.isTypeScript);
+    // Find the last import statement
+    let lastImportDeclarationPath;
+    const ast = traverse(file, {
+        visitImportDeclaration(path) {
+            if (!lastImportDeclarationPath) {
+                lastImportDeclarationPath = path;
+                // @ts-ignore: Assume that types from external packages are correct
+            }
+            else if (path.node.start > lastImportDeclarationPath.node.start) {
+                lastImportDeclarationPath = path;
+            }
+            return false;
+        },
+    });
+    // Append the styles import
+    // @ts-ignore: Assume that types from external packages are correct
+    const nodes = ast.program.body;
+    // @ts-ignore: Assume that types from external packages are correct
+    const index = lastImportDeclarationPath?.name ?? -1;
+    nodes.splice(index + 1, 0, AST.builders.importDeclaration([
+        AST.builders.importDefaultSpecifier(AST.builders.identifier(data.__styles__)),
+    ], AST.builders.literal(`./${data.fileName}.css`)));
+    return AST.print(ast);
+}
+function addStylesAsClassProperty(file, data) {
+    const traverse = AST.traverse(data.isTypeScript);
+    const ast = traverse(file, {
+        visitClassDeclaration(path) {
+            const { body } = path.node.body;
+            const nodesToAdd = [
+                AST.builders.classProperty(AST.builders.identifier(data.__styles__), AST.builders.identifier(data.__styles__)),
+            ];
+            if (body.length > 0) {
+                // @ts-ignore: Assume that types from external packages are correct
+                nodesToAdd.push(AST.builders.noop());
+            }
+            body.unshift(...nodesToAdd);
+            return false;
+        },
+    });
+    return AST.print(ast);
+}
+function createClass(entityName, { customizations, options }) {
+    const { blueprintFilePaths, getFilePath } = customizations;
+    const entity = parseEntityName(entityName);
+    const filePath = getFilePath(entityName);
+    const fileMap = new Map(blueprintFilePaths.map((blueprintFilePath) => {
+        const blueprintFile = readFileSync(join(blueprintsRoot, blueprintFilePath), 'utf8');
+        const file = processTemplate(blueprintFile, {
+            entity,
+            options,
+        });
+        return [filePath, file];
+    }));
+    createFiles(fileMap, options);
+}
+function updateClass(entityName, { customizations, options }) {
+    const { getFilePath } = customizations;
+    const { __styles__, projectRoot } = options;
+    const filePath = getFilePath(entityName);
+    const { ext: fileExtension, name: fileName } = parse(filePath);
+    const data = {
+        __styles__,
+        fileName,
+        isTypeScript: fileExtension === '.ts',
+    };
+    try {
+        let file = readFileSync(join(projectRoot, filePath), 'utf8');
+        file = removeTemplateOnlyComponentMethod(file, data);
+        file = importStylesInClass(file, data);
+        file = addStylesAsClassProperty(file, data);
+        const fileMap = new Map([[filePath, file]]);
+        createFiles(fileMap, options);
+    }
+    catch (error) {
+        let message = `WARNING: updateClass could not update \`${filePath}\`. Please update the file manually.`;
+        if (error instanceof Error) {
+            message += ` (${error.message})`;
+        }
+        console.warn(`${message}\n`);
+    }
+}
+export function importStyles(entities, options) {
+    for (const [entityName, extensions] of entities) {
+        const hasClass = extensions.has('.js') || extensions.has('.ts');
+        const hasStylesheet = extensions.has('.css');
+        if (!hasStylesheet) {
+            continue;
+        }
+        if (!hasClass) {
+            createClass(entityName, options);
+            continue;
+        }
+        updateClass(entityName, options);
+    }
+}