ember-codemod-add-template-tags

Codemod to add <template> tags

Why use it?

Introducing <template> tag to large projects can be tedious and error-prone. Run this codemod to get started.

The codemod:

• Statically analyzes code (no need to build projects)
• Supports v1 apps (classic, Webpack), v2 apps (Vite)
• Supports v1 addons, v2 addons
• Supports monorepos (convert all packages at once)
• Light and fast

Usage

Step 1. Quickly migrate.^1,2

cd <path/to/your/project>
pnpx ember-codemod-add-template-tags <arguments>

Step 2. Review the package.

• Fix format and lint errors.³
• Run tests.

You can check Troubleshoot if you encounter an issue.

^{1. The codemod assumes that your apps and addons follow the Octane layout (flat or nested). If not, you can run codemods to move away from classic and pod.}

^{2. To analyze external dependencies, the codemod reads your node_modules. Install your project's dependencies before running the codemod.}

^{3. If you need lint configs that support *.{gjs,gts}, you can install packages from @ijlee2-frontend-configs.}

Arguments

Optional: Limit types of files to consider

By default, the codemod considers components, routes, and tests. Pass --convert to consider a subset of these.

# Components and tests only
pnpx ember-codemod-add-template-tags --convert components tests

# Routes only
pnpx ember-codemod-add-template-tags --convert routes

Optional: Limit folders to consider

By default, the codemod considers all files and folders for components, routes, and tests. Pass --folder to limit the search to 1 folder. (You may use glob patterns to specify multiple folders.)

# `ui` folder only
pnpx ember-codemod-add-template-tags --folder ui

# `ui/form` folder only
pnpx ember-codemod-add-template-tags --folder ui/form

# `route1` and `route2` folders only
pnpx ember-codemod-add-template-tags --convert routes --folder "{route1,route2}"

Optional: Specify the component structure

By default, an Octane project has the flat component structure. Pass --component-structure to indicate otherwise.

pnpx ember-codemod-add-template-tags --component-structure nested

Optional: Specify the project root

Pass --root to run the codemod somewhere else (i.e. not in the current directory).

pnpx ember-codemod-add-template-tags --root <path/to/your/project>

Limitations

The codemod is designed to cover typical cases. It is not designed to cover one-off cases.

To better meet your needs, consider cloning the repo and running the codemod locally.

cd <path/to/cloned/repo>

# Compile TypeScript
pnpm build

# Run codemod
./dist/bin/ember-codemod-add-template-tags.js --root <path/to/your/project>

Compatibility

• Node.js v20 or above

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.