Skip to content

Commit

Permalink
Merge pull request #70 from opf/update-documentations-for-using-contr…
Browse files Browse the repository at this point in the history
…oller

Change documentations for adding a Catalyst controller to the component
  • Loading branch information
HDinger authored Jan 31, 2024
2 parents 0ed1b9e + d6c0d89 commit 4bc5691
Showing 1 changed file with 21 additions and 0 deletions.
21 changes: 21 additions & 0 deletions docs/contributors/adding-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,27 @@ The generator script has several flags:
- `inline` creates a `#call` method instead of generating an ERB template
- `js` can be passed the name of an npm package dependency

### JavaScript controllers

If your component needs a JavaScript controller, you can pass `@github/catalyst` to the `js` flag.

```sh
bundle exec thor component_generator my_component_name --js='@github/catalyst'
```

[Catalyst](https://catalyst.rocks/) is a small library for developing Web Components and is very similar to [Stimulus](https://stimulus.hotwired.dev/).

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:

```ts
import {controller, target} from '@github/catalyst';

@controller
class MyComponentNameElement extends HTMLElement {
@target button: HTMLElement
}
```

### Generated files

Running the component generator script creates several files across the codebase:
Expand Down

0 comments on commit 4bc5691

Please sign in to comment.