ember-codemod-remove-ember-css-modules 0.1.5 → 0.2.0

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

@@ -1,37 +0,0 @@
-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/src/migration/ember-app/steps/analyze-app.js

@@ -1,155 +0,0 @@
-import { join, parse } from 'node:path';
-
-import { findFiles, renamePathByDirectory } from '@codemod-utils/files';
-
-function findAndRenameFiles(findOptions, replaceOptions) {
-  const { globPattern, ignoreList, projectRoot } = findOptions;
-  const { from, to } = replaceOptions;
-
-  const filePaths = findFiles(globPattern, {
-    ignoreList,
-    projectRoot,
-  });
-
-  return filePaths.map((filePath) => {
-    return renamePathByDirectory(filePath, { from, to });
-  });
-}
-
-function analyzeEntities({
-  classFilePaths,
-  stylesheetFilePaths,
-  templateFilePaths,
-}) {
-  const filePaths = [
-    ...classFilePaths,
-    ...stylesheetFilePaths,
-    ...templateFilePaths,
-  ].sort();
-
-  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 = findAndRenameFiles(
-    {
-      globPattern: 'app/components/**/*.{js,ts}',
-      ignoreList: ['app/components/**/*.d.ts'],
-      projectRoot,
-    },
-    {
-      from: 'app/components',
-      to: '',
-    },
-  );
-
-  const stylesheetFilePaths = findAndRenameFiles(
-    {
-      globPattern: 'app/components/**/*.css',
-      projectRoot,
-    },
-    {
-      from: 'app/components',
-      to: '',
-    },
-  );
-
-  const templateFilePaths = findAndRenameFiles(
-    {
-      globPattern: 'app/components/**/*.hbs',
-      projectRoot,
-    },
-    {
-      from: 'app/components',
-      to: '',
-    },
-  );
-
-  const entities = analyzeEntities({
-    classFilePaths,
-    stylesheetFilePaths,
-    templateFilePaths,
-  });
-
-  if (componentStructure === 'nested') {
-    return new Map(
-      [...entities.entries()].map(([entityName, extensions]) => {
-        const newEntityName = entityName.replace(/\/index$/, '');
-
-        return [newEntityName, extensions];
-      }),
-    );
-  }
-
-  return entities;
-}
-
-function analyzeRoutes(options) {
-  const { projectRoot } = options;
-
-  const classFilePaths = findAndRenameFiles(
-    {
-      globPattern: 'app/controllers/**/*.{js,ts}',
-      ignoreList: ['app/controllers/**/*.d.ts'],
-      projectRoot,
-    },
-    {
-      from: 'app/controllers',
-      to: '',
-    },
-  );
-
-  const stylesheetFilePaths = findAndRenameFiles(
-    {
-      globPattern: 'app/styles/**/*.css',
-      ignoreList: ['app/styles/app.css'],
-      projectRoot,
-    },
-    {
-      from: 'app/styles',
-      to: '',
-    },
-  );
-
-  const templateFilePaths = findAndRenameFiles(
-    {
-      globPattern: 'app/templates/**/*.hbs',
-      ignoreList: ['app/templates/components/**/*'],
-      projectRoot,
-    },
-    {
-      from: 'app/templates',
-      to: '',
-    },
-  );
-
-  return analyzeEntities({
-    classFilePaths,
-    stylesheetFilePaths,
-    templateFilePaths,
-  });
-}
-
-export function analyzeApp(options) {
-  return {
-    components: analyzeComponents(options),
-    routes: analyzeRoutes(options),
-  };
-}

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

@@ -1,30 +0,0 @@
-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/src/migration/ember-app/steps/import-styles-in-components.js

@@ -1,43 +0,0 @@
-import { join } from 'node:path';
-
-import { importStyles } from './shared/index.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),
-    entities: context.components,
-    getFilePath: getFilePath(options),
-  };
-
-  importStyles(customizations, options);
-}

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

@@ -1,39 +0,0 @@
-import { join } from 'node:path';
-
-import { importStyles } from './shared/index.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),
-    entities: context.routes,
-    getFilePath: getFilePath(options),
-  };
-
-  importStyles(customizations, options);
-}

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

@@ -1,51 +0,0 @@
-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 fileMapping = 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(fileMapping, options);
-}
-
-export function moveStylesheets(options) {
-  moveRouteStylesheets(options);
-  moveAppCssToAssets(options);
-}

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

@@ -1,210 +0,0 @@
-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;
-      } else if (path.node.start > lastImportDeclarationPath.node.start) {
-        lastImportDeclarationPath = path;
-      }
-
-      return false;
-    },
-  });
-
-  // Append the styles import
-  const nodes = ast.program.body;
-  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) {
-        nodesToAdd.push(AST.builders.noop());
-      }
-
-      body.unshift(...nodesToAdd);
-
-      return false;
-    },
-  });
-
-  return AST.print(ast);
-}
-
-function createClass(customizations, options) {
-  const { blueprintFilePaths, entity, filePath } = customizations;
-
-  const fileMapping = new Map(
-    blueprintFilePaths.map((blueprintFilePath) => {
-      const blueprintFile = readFileSync(
-        join(blueprintsRoot, blueprintFilePath),
-        'utf8',
-      );
-
-      const file = processTemplate(blueprintFile, {
-        entity,
-        options,
-      });
-
-      return [filePath, file];
-    }),
-  );
-
-  createFiles(fileMapping, options);
-}
-
-function updateClass(customizations, options) {
-  const { filePath } = customizations;
-  const { __styles__, projectRoot } = options;
-
-  const { ext: fileExtension, name: fileName } = parse(filePath);
-  const isTypeScript = fileExtension === '.ts';
-
-  let file = readFileSync(join(projectRoot, filePath), 'utf8');
-
-  try {
-    file = removeTemplateOnlyComponentMethod(file, {
-      __styles__,
-      isTypeScript,
-    });
-
-    file = importStylesInClass(file, {
-      __styles__,
-      fileName,
-      isTypeScript,
-    });
-
-    file = addStylesAsClassProperty(file, {
-      __styles__,
-      isTypeScript,
-    });
-
-    const fileMapping = new Map([[filePath, file]]);
-
-    createFiles(fileMapping, options);
-  } catch (e) {
-    console.warn(
-      `WARNING: updateClass could not update \`${filePath}\`. Please update the file manually. (${e.message})\n`,
-    );
-  }
-}
-
-export function importStyles(customizations, options) {
-  const { blueprintFilePaths, entities, getFilePath } = customizations;
-
-  for (const [entityName, extensions] of entities) {
-    const hasClass = extensions.has('.js') || extensions.has('.ts');
-    const hasStylesheet = extensions.has('.css');
-
-    if (!hasStylesheet) {
-      continue;
-    }
-
-    const entity = parseEntityName(entityName);
-    const filePath = getFilePath(entityName);
-
-    if (!hasClass) {
-      createClass({ blueprintFilePaths, entity, filePath }, options);
-
-      continue;
-    }
-
-    updateClass({ filePath }, options);
-  }
-}

package/src/migration/ember-app/steps/shared/index.js

@@ -1,2 +0,0 @@
-export * from './import-styles.js';
-export * from './update-templates.js';