Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ignacemaes/ember-codemod-template-tag
Codemod to convert Glimmer components to the <template> tag authoring format in .gjs and .gts
https://github.com/ignacemaes/ember-codemod-template-tag
codemod ember gjs gts
Last synced: 3 months ago
JSON representation
Codemod to convert Glimmer components to the <template> tag authoring format in .gjs and .gts
- Host: GitHub
- URL: https://github.com/ignacemaes/ember-codemod-template-tag
- Owner: IgnaceMaes
- License: mit
- Created: 2023-10-29T09:32:38.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-19T14:59:11.000Z (6 months ago)
- Last Synced: 2024-11-07T10:04:00.967Z (3 months ago)
- Topics: codemod, ember, gjs, gts
- Language: TypeScript
- Homepage:
- Size: 129 KB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://github.com/IgnaceMaes/ember-codemod-template-tag/actions/workflows/ci.yml)
# ember-codemod-template-tag
Codemod to convert Glimmer components to the `` tag authoring format in `.gjs` and `.gts`.
> [!WARNING]
> This codemod is not actively being worked on as there is now [an official codemod maintained within the Embroider project](https://github.com/embroider-build/embroider/pull/1842).
> [!NOTE]
> This codemod is far from feature complete. Currently it only handles converting `*-test.js` files which use the `hbs` helper.
## Functionality
### Features
- Rewrites the `hbs` template helper to the `` tag
- Adds imports for components and removes `hbs` import
- Supports nested component paths (e.g. `Cards::CardHeader` will be used as `CardHeader`)
- Adds imports for built-in helpers (`concat`, `array`, `fn`, `get`, `hash`)
- Supports JavaScript and TypeScript
### Example
Given a file `foo-test.js`:
```sh
npx ember-codemod-template-tag --app-name example-app
```
```js
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'example-app/tests/helpers/component-test';
module('Integration | Component | foo', function (hooks) {
setupRenderingTest(hooks);
test('bar', async function (assert) {
await render(hbs``);
});
});
```
The codemod will rewrite this to `foo-test.gts`:
```js
import { array } from '@ember/helper';
import Bar from 'example-app/components/foo/bar';
import { render } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'example-app/tests/helpers/component-test';
module('Integration | Component | foo', function (hooks) {
setupRenderingTest(hooks);
test('bar', async function (assert) {
await render();
});
});
```
## Usage
> **WARNING**
> As with most codemods, changes are made in place, meaning it will overwrite existing files. Make sure to run this codemod on a codebase that has been checked into version control to avoid losing progress.
### Arguments
You must pass the app name as an argument to the codemod. This value is used to provide import statements:
```sh
npx ember-codemod-template-tag --app-name
```
Optional: Specify the project root
Pass `--root` to run the codemod somewhere else (i.e. not in the current directory).
```sh
npx ember-codemod-template-tag --root
```
## Compatibility
- Node.js v18 or above
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).