Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated README and tutorials #136

Merged
merged 2 commits into from
Sep 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.