You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
8
6
9
7
## Installation
10
8
@@ -36,26 +34,27 @@ app/javascript
36
34
└── index.js
37
35
```
38
36
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`.
40
40
41
41
## How it works
42
42
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.
45
45
46
46
```
47
-
custom_elements/hello_element.js // will register <app-hello>
47
+
custom_elements/hello_element.js // will register <app-hello> automatically
48
48
```
49
49
50
50
Your `*_element.js` files have to `export default` custom elements for this to work properly.
51
51
52
52
> [!WARNING]
53
53
> Only single word elements are supported currently. See https://github.com/codergeek121/custom_elements-rails/issues/1
54
54
55
-
56
55
## Add a custom element
57
56
58
-
Generate a new custom element with:
57
+
This gem adds a generator to generate new custom elements with:
59
58
60
59
```bash
61
60
$ rails generate custom_element test
@@ -64,12 +63,28 @@ $ rails generate custom_element test
64
63
This will generate
65
64
66
65
```
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
+
70
77
```
71
78
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.
0 commit comments