Skip to content

Commit

Permalink
Updated README and tutorials (#136)
Browse files Browse the repository at this point in the history
* chore: Updated list of codemods written with @codemod-utils

* chore: Updated tutorials

---------

Co-authored-by: ijlee2 <ijlee2@users.noreply.github.com>
  • Loading branch information
ijlee2 and ijlee2 authored Sep 9, 2024
1 parent eb546f4 commit 612bf90
Show file tree
Hide file tree
Showing 7 changed files with 18 additions and 16 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,15 @@ npx @codemod-utils/cli <your-codemod-name>
## Tutorials

- [Main tutorial](./tutorials/ember-codemod-rename-test-modules/00-introduction.md)
- [Blueprints](./tutorials/blueprint-for-v2-addon/00-introduction.md)
- [Blueprints](./tutorials/blueprints-v2-addon/00-introduction.md)
- [`<template>`-tag components](./tutorials/template-tag-components/00-introduction.md)


## Codemods written with @codemod-utils

- `blueprint-for-v2-addon` (internal)
- [`analyze-ember-project-dependencies`](https://github.com/ijlee2/embroider-toolbox/tree/main/packages/analyze-ember-project-dependencies)
- [`blueprints-v2-addon`](https://github.com/ijlee2/embroider-toolbox/tree/main/packages/blueprints-v2-addon)
- [`create-v2-addon-repo`](https://github.com/ijlee2/embroider-toolbox/tree/main/packages/create-v2-addon-repo)
- [`ember-codemod-args-to-signature`](https://github.com/ijlee2/ember-codemod-args-to-signature)
- [`ember-codemod-css-modules`](https://github.com/simplepractice/ember-codemod-css-modules)
- [`ember-codemod-ember-render-helpers-to-v1`](https://github.com/buschtoens/ember-render-helpers/tree/master/packages/ember-codemod-ember-render-helpers-to-v1)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
> [!NOTE]
> This tutorial covers **blueprints**, files that you can use like a "stamp" to create or update certain files in a project. You will also learn how to transform a user's CLI options in the `create-options` step.
We will partially recreate `blueprint-for-v2-addon`, a codemod that helps [CLARK](https://www.clark.io/) write [v2 addons](https://rfcs.emberjs.com/id/0507-embroider-v2-package-format/). It creates an addon and a test app similarly to [`@embroider/addon-blueprint`](https://github.com/embroider-build/addon-blueprint), with some exceptions:
We will partially recreate [`blueprints-v2-addon`](https://github.com/ijlee2/embroider-toolbox/tree/main/packages/blueprints-v2-addon), a codemod that helps you write [v2 addons](https://rfcs.emberjs.com/id/0507-embroider-v2-package-format/). It creates an addon and a test app similarly to [`@embroider/addon-blueprint`](https://github.com/embroider-build/addon-blueprint), with some exceptions:

- We can customize files, lint configurations, and dependencies, and standardize these deviations.
- Upstream errors (from `ember-cli` and `@embroider/addon-blueprint`) have a little effect.
Expand All @@ -20,7 +20,7 @@ We will partially recreate `blueprint-for-v2-addon`, a codemod that helps [CLARK
```

```sh
# Average for blueprint-for-v2-addon
# Average for blueprints-v2-addon
time pnpm generate-addon --addon-name "@my-ui/button" --addon-location "ui/button"

1.86s user 0.23s system 133% cpu 1.565 total
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ Change the directory to a place where you like to keep projects. Then, run these

```sh
# Create project
npx @codemod-utils/cli blueprint-for-v2-addon --addon blueprints
npx @codemod-utils/cli blueprints-v2-addon --addon blueprints

# Install dependencies
cd blueprint-for-v2-addon
cd blueprints-v2-addon
pnpm install
```

Expand All @@ -27,10 +27,10 @@ pnpm install

## Folder structure

Let's take a look at how `blueprint-for-v2-addon` is structured as a tree. For simplicity, the tree only shows what's new, compared to that from [the main tutorial](ember-codemod-rename-test-modules/02-understand-the-folder-structure.md#folder-structure).
Let's take a look at how `blueprints-v2-addon` is structured as a tree. For simplicity, the tree only shows what's new, compared to that from [the main tutorial](ember-codemod-rename-test-modules/02-understand-the-folder-structure.md#folder-structure).

```sh
blueprint-for-v2-addon
blueprints-v2-addon
└── src
├── blueprints
│ └── .gitkeep
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Open the executable file in the `bin` folder.

<details>

<summary><code>bin/blueprint-for-v2-addon.ts</code></summary>
<summary><code>bin/blueprints-v2-addon.ts</code></summary>

```ts
#!/usr/bin/env node
Expand All @@ -56,7 +56,7 @@ import { runCodemod } from '../src/index.js';
import type { CodemodOptions } from '../src/types/index.js';

// Provide a title to the process in `ps`
process.title = 'blueprint-for-v2-addon';
process.title = 'blueprints-v2-addon';

// Set codemod options
const argv = yargs(hideBin(process.argv))
Expand Down Expand Up @@ -86,7 +86,7 @@ Study the documentation for [`.option()`](https://yargs.js.org/docs/#api-referen

<details>

<summary>Solution: <code>bin/blueprint-for-v2-addon.ts</code></summary>
<summary>Solution: <code>bin/blueprints-v2-addon.ts</code></summary>

```diff
#!/usr/bin/env node
Expand All @@ -99,7 +99,7 @@ import { runCodemod } from '../src/index.js';
import type { CodemodOptions } from '../src/types/index.js';

// Provide a title to the process in `ps`
process.title = 'blueprint-for-v2-addon';
process.title = 'blueprints-v2-addon';

// Set codemod options
const argv = yargs(hideBin(process.argv))
Expand Down Expand Up @@ -135,7 +135,7 @@ Recall that `argv` has the argument values. Update the executable file so that `

<details>

<summary>Solution: <code>bin/blueprint-for-v2-addon.ts</code></summary>
<summary>Solution: <code>bin/blueprints-v2-addon.ts</code></summary>

```diff
#!/usr/bin/env node
Expand All @@ -148,7 +148,7 @@ import { runCodemod } from '../src/index.js';
import type { CodemodOptions } from '../src/types/index.js';

// Provide a title to the process in `ps`
process.title = 'blueprint-for-v2-addon';
process.title = 'blueprints-v2-addon';

// Set codemod options
const argv = yargs(hideBin(process.argv))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ workspace-root
> To double-check, run `pnpm publish --dry-run` and review the files.
>
> ```sh
> npm notice 911B dist/bin/blueprint-for-v2-addon.js
> npm notice 911B dist/bin/blueprints-v2-addon.js
> npm notice 145B dist/src/blueprints/__addonLocation__/__gitignore__
> npm notice 109B dist/src/blueprints/__addonLocation__/.eslintignore
> npm notice 340B dist/src/blueprints/__addonLocation__/.eslintrc.js
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ You have learned how blueprints help you create or update files in a project. Th

You might also understand better why `codemodOptions` and `options` exist, as well as which related files to update, should you decide to provide users more codemod options.

For brevity, our `blueprint-for-v2-addon` created only 1 file in the addon and the test app. To familiarize yourself with delimiters (in particular, with evaluate and interpolate), I encourage you to extend the project and add more blueprint files. You can also explore how to write integration tests for the `create-files-from-blueprints` step.
For brevity, our `blueprints-v2-addon` created only 1 file in the addon and the test app. To familiarize yourself with delimiters (in particular, with evaluate and interpolate), I encourage you to extend the project and add more blueprint files. You can also explore how to write integration tests for the `create-files-from-blueprints` step.

0 comments on commit 612bf90

Please sign in to comment.