ember-codemod-add-component-signatures

Codemod to add component signatures

What is it?

To introduce Glint, you will need to write the signature and template registry for each component. This can be an error-prone, onerous task for large projects.

You can run this codemod to get started.

Features

• Scaffolds signature for components
• Adds template registry for components
• Supports <template> tag components

Template-only components


Glimmer components

Usage

Step 1. Quickly migrate.

cd <path/to/your/project>
npx ember-codemod-add-component-signatures <arguments>

Step 2. Review the package.

• Fill in missing type information.
• Confirm that you can run all scripts in package.json.

For more information, please check the FAQ.

Prerequisites

Must:

• Migrate to the Octane layout (flat or nested). You can leverage the codemods for classic and pod layouts.

Nice to do:

• Refactor code (e.g. Glimmerize components, meet the linting rule no-implicit-this) to help the codemod parse code.

Arguments

You must pass --type to indicate what type of project you have.

npx ember-codemod-add-component-signatures --type app
npx ember-codemod-add-component-signatures --type v1-addon
npx ember-codemod-add-component-signatures --type v2-addon

Optional: Specify the component structure

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

npx ember-codemod-add-component-signatures --component-structure nested

Optional: Convert *.{js,gjs} files

By default, the codemod ignores component classes written in *.{js,gjs}. Pass --convert-javascript to allow the codemod to change the file extension to *.{ts,gts} and add the component signature.

npx ember-codemod-add-component-signatures --convert-javascript

Optional: Specify the project root

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

npx ember-codemod-add-component-signatures --root <path/to/your/project>

Limitations

The codemod is designed to cover typical cases. It is not designed to cover one-off cases. (Classic components are not supported.)

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-component-signatures.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.