Skip to content

Commit e86e087

Browse files
authored
Update README.md
1 parent 919133e commit e86e087

File tree

1 file changed

+29
-14
lines changed

1 file changed

+29
-14
lines changed

Diff for: README.md

+29-14
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
# Custom Elements with Rails
1+
# Custom Elements Rails
22

33
[![Tests](https://github.com/codergeek121/custom_elements-rails/actions/workflows/ruby.yml/badge.svg?branch=main)](https://github.com/codergeek121/custom_elements-rails/actions/workflows/ruby.yml)
44

5-
This gem provides a small js-helper, installation scripts and generators to use custom elements in conjunction with the `importmap-rails` gem.
6-
7-
## Usage
5+
This gem adds a simple way to automatically register custom elements in your `importmap-rails` app. No build step required!
86

97
## Installation
108

@@ -36,26 +34,27 @@ app/javascript
3634
└── index.js
3735
```
3836

39-
You can now add the `<app-hello>` custom element in your HTML. No build step needed.
37+
The `<app-hello>` custom element can be used in the views now.
38+
39+
You can generate a new custom element with `rails g custom_element abc`.
4040

4141
## How it works
4242

43-
`eagerDefineCustomElementsFrom` will parse the JSON-importmap rendered by the `importmap-rails` gem.
44-
It registers custom elements with `customElements.define(...)` in the browser's registry based on the filename automatically.
43+
The setup will add a JS function call `eagerDefineCustomElementsFrom` that parses the importmap rendered by the `importmap-rails` gem.
44+
It registers custom elements with `customElements.define(...)` in the browser's registry based on the filenames in the `custom_elements` folder automatically.
4545

4646
```
47-
custom_elements/hello_element.js // will register <app-hello>
47+
custom_elements/hello_element.js // will register <app-hello> automatically
4848
```
4949

5050
Your `*_element.js` files have to `export default` custom elements for this to work properly.
5151

5252
> [!WARNING]
5353
> Only single word elements are supported currently. See https://github.com/codergeek121/custom_elements-rails/issues/1
5454
55-
5655
## Add a custom element
5756

58-
Generate a new custom element with:
57+
This gem adds a generator to generate new custom elements with:
5958

6059
```bash
6160
$ rails generate custom_element test
@@ -64,12 +63,28 @@ $ rails generate custom_element test
6463
This will generate
6564

6665
```
67-
app/javascript
68-
└── custom_elements
69-
└── test_element.js
66+
// app/javascript/custom_elements/test_element.js
67+
export default class extends HTMLElement {
68+
constructor() {
69+
super()
70+
}
71+
72+
connectedCallback() {
73+
console.log("test_element.js")
74+
}
75+
}
76+
7077
```
7178

72-
which in turn will register a `<app-test></app-test>` custom element.
79+
which in turn will register a `<app-test></app-test>` custom element automatically in your app.
80+
81+
## Documentation
82+
83+
`eagerDefineCustomElementsFrom(under, options)`
84+
85+
Currently supported `options`:
86+
87+
* `prefix`: The custom elements namespace/prefix.
7388

7489
## Contributing
7590

0 commit comments

Comments
 (0)