Skip to content

Commit d6c0d89

Browse files
committed
Fine-tuning documentation changes
1 parent 56735fb commit d6c0d89

1 file changed

Lines changed: 7 additions & 6 deletions

File tree

docs/contributors/adding-components.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,21 @@ The generator script has several flags:
3434
- `inline` creates a `#call` method instead of generating an ERB template
3535
- `js` can be passed the name of an npm package dependency
3636

37-
If you need to develop your component with Javascript, you can pass `@github/catalyst` to `js` flag
37+
### JavaScript controllers
38+
39+
If your component needs a JavaScript controller, you can pass `@github/catalyst` to the `js` flag.
3840

3941
```sh
4042
bundle exec thor component_generator my_component_name --js='@github/catalyst'
4143
```
4244

43-
[Catalyst](https://catalyst.rocks/) is a small library for developing Web Components and is very similar to [Stimulus](https://stimulus.hotwired.dev/)
44-
Catalyst has controller and target decorators, in order to use them, you should import them from `@github/catalyst` into `app/components/<status>/<component_name>.ts`
45-
`import {controller, target} from '@github/catalyst'`
45+
[Catalyst](https://catalyst.rocks/) is a small library for developing Web Components and is very similar to [Stimulus](https://stimulus.hotwired.dev/).
4646

47-
then you can use them like this:
47+
Catalyst has `controller` and `target` decorators which you have to import from `@github/catalyst` inside `app/components/<status>/<component_name>.ts`. It can then be used like this:
4848

4949
```ts
50+
import {controller, target} from '@github/catalyst';
51+
5052
@controller
5153
class MyComponentNameElement extends HTMLElement {
5254
@target button: HTMLElement
@@ -75,7 +77,6 @@ The script also edits some files:
7577
- The component is added to the list of components in `test/component/component_test.rb`, in that you need to add examples for all the required arguments of the component
7678
- The pcss file is added to the list in `app/components/primer/primer.pcss`
7779
- The js file is added to the list in `app/components/primer/primer.ts` if the `js` flag is passed
78-
and since then you can add any npm package dependency by just importing it in `app/components/<status>/<component_name>.ts`
7980

8081
### Playwright testing
8182

0 commit comments

Comments
 (0)