custom_elements-rails 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +86 -8
- data/Rakefile +4 -1
- data/lib/custom_elements/rails/railtie.rb +3 -1
- data/lib/custom_elements/rails/version.rb +1 -1
- data/lib/generators/custom_element_generator.rb +10 -0
- data/lib/generators/templates/custom_element.js.tt +18 -0
- metadata +20 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 00a594ba7a841b984e65721f217af0248ba150fe032038db7d6501606900fc14
|
4
|
+
data.tar.gz: 9db69aa3b4a6f8e621631dc22dad1640af90aafc2b6ec2fbc090089cb28d69e4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 47d8050c6e7e08715d63169ed4040f3d422652ba69140d84d2d269941184d0270281115b77f5f1413e4de62b7ba1efffcc0f78da3004fa95095c1a83e4efd907
|
7
|
+
data.tar.gz: 6b52ed941852c7543bbf0f9f82d5f6631bf06ea956248ac828d8660511894a7e189a9f0a459439053f7fd461d228c097db6d5ad16481c50fca7ea59013d0053f
|
data/README.md
CHANGED
@@ -1,10 +1,11 @@
|
|
1
|
-
# Custom Elements
|
1
|
+
# Custom Elements Rails
|
2
2
|
|
3
|
-
|
3
|
+
[](https://github.com/codergeek121/custom_elements-rails/actions/workflows/ruby.yml)
|
4
4
|
|
5
|
-
|
5
|
+
This gem adds a simple way to automatically register custom elements in your `importmap-rails` app. No build step required!
|
6
6
|
|
7
7
|
## Installation
|
8
|
+
|
8
9
|
Add this line to your application's Gemfile:
|
9
10
|
|
10
11
|
```ruby
|
@@ -23,7 +24,7 @@ Run the initial setup:
|
|
23
24
|
$ rails custom_elements:install
|
24
25
|
```
|
25
26
|
|
26
|
-
This will setup and add the following files:
|
27
|
+
This will setup and edit add the following files:
|
27
28
|
|
28
29
|
```
|
29
30
|
app/javascript
|
@@ -33,14 +34,91 @@ app/javascript
|
|
33
34
|
└── index.js
|
34
35
|
```
|
35
36
|
|
36
|
-
|
37
|
+
The `<app-hello>` custom element can be used in the views now.
|
37
38
|
|
38
|
-
|
39
|
+
You can generate a new custom element with `rails g custom_element abc`.
|
39
40
|
|
40
|
-
|
41
|
+
## How it works
|
42
|
+
|
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
|
+
|
46
|
+
```
|
47
|
+
custom_elements/hello_element.js // will register <app-hello> automatically
|
48
|
+
```
|
49
|
+
|
50
|
+
Your `*_element.js` files have to `export default` custom elements for this to work properly.
|
51
|
+
|
52
|
+
> [!WARNING]
|
53
|
+
> Only single word elements are supported currently. See https://github.com/codergeek121/custom_elements-rails/issues/1
|
54
|
+
|
55
|
+
## Add a custom element with the built-in generator
|
56
|
+
|
57
|
+
This gem adds a generator to generate new custom elements with:
|
58
|
+
|
59
|
+
```bash
|
60
|
+
$ rails generate custom_element test
|
61
|
+
```
|
62
|
+
|
63
|
+
This will generate
|
64
|
+
|
65
|
+
```javascript
|
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
|
+
```
|
77
|
+
|
78
|
+
which in turn will register a `<app-test></app-test>` custom element automatically in your app.
|
79
|
+
|
80
|
+
```bash
|
81
|
+
$ rails generate custom_element test
|
82
|
+
```
|
83
|
+
|
84
|
+
To observe changes in your custom element's attributes, you need to set a static array of attribute names. The generator also supports setting those automatically:
|
85
|
+
|
86
|
+
```bash
|
87
|
+
$ rails generate custom_element test attribute1
|
88
|
+
```
|
89
|
+
|
90
|
+
will generate
|
91
|
+
|
92
|
+
```javascript
|
93
|
+
export default class extends HTMLElement {
|
94
|
+
static observedAttributes = ["attribute1"]
|
95
|
+
|
96
|
+
constructor() {
|
97
|
+
super()
|
98
|
+
}
|
99
|
+
|
100
|
+
connectedCallback() {
|
101
|
+
console.log("test_element.js")
|
102
|
+
}
|
103
|
+
|
104
|
+
get attribute1() {
|
105
|
+
return this.getAttribute("attribute1")
|
106
|
+
}
|
107
|
+
}
|
108
|
+
```
|
109
|
+
|
110
|
+
## Documentation
|
111
|
+
|
112
|
+
`eagerDefineCustomElementsFrom(under, options)`
|
113
|
+
|
114
|
+
Currently supported `options`:
|
115
|
+
|
116
|
+
* `prefix`: The custom elements namespace/prefix.
|
41
117
|
|
42
118
|
## Contributing
|
43
|
-
|
119
|
+
|
120
|
+
TODO
|
44
121
|
|
45
122
|
## License
|
123
|
+
|
46
124
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
data/Rakefile
CHANGED
@@ -2,7 +2,9 @@ module CustomElements
|
|
2
2
|
module Rails
|
3
3
|
class Railtie < ::Rails::Engine
|
4
4
|
initializer "custom_elements-rails.assets.precompile" do |app|
|
5
|
-
app.config.assets
|
5
|
+
if app.config.respond_to? :assets
|
6
|
+
app.config.assets.precompile += %w( custom_elements-rails.js )
|
7
|
+
end
|
6
8
|
end
|
7
9
|
end
|
8
10
|
end
|
@@ -0,0 +1,10 @@
|
|
1
|
+
class CustomElementGenerator < Rails::Generators::NamedBase
|
2
|
+
source_root File.expand_path("templates", __dir__)
|
3
|
+
|
4
|
+
argument :attributes, type: :array, default: [], banner: "Observed attributes"
|
5
|
+
|
6
|
+
def copy_custom_element
|
7
|
+
template "custom_element.js", "app/javascript/custom_elements/#{file_name}_element.js"
|
8
|
+
end
|
9
|
+
end
|
10
|
+
|
@@ -0,0 +1,18 @@
|
|
1
|
+
export default class extends HTMLElement {
|
2
|
+
<% if attributes.any? %>
|
3
|
+
static observedAttributes = <%= attributes.map { _1.name } %>
|
4
|
+
<% end %>
|
5
|
+
constructor() {
|
6
|
+
super()
|
7
|
+
}
|
8
|
+
|
9
|
+
connectedCallback() {
|
10
|
+
console.log("<%= file_name %>")
|
11
|
+
}
|
12
|
+
<% attributes.each do |attribute| -%>
|
13
|
+
|
14
|
+
get <%= attribute.name %>() {
|
15
|
+
return this.getAttribute("<%= attribute.name %>")
|
16
|
+
}
|
17
|
+
<% end -%>
|
18
|
+
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: custom_elements-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Niklas Häusele
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-
|
11
|
+
date: 2024-05-09 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -16,14 +16,28 @@ dependencies:
|
|
16
16
|
requirements:
|
17
17
|
- - ">="
|
18
18
|
- !ruby/object:Gem::Version
|
19
|
-
version:
|
19
|
+
version: 7.0.0
|
20
20
|
type: :runtime
|
21
21
|
prerelease: false
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
23
23
|
requirements:
|
24
24
|
- - ">="
|
25
25
|
- !ruby/object:Gem::Version
|
26
|
-
version:
|
26
|
+
version: 7.0.0
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: appraisal
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ">="
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '0'
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ">="
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '0'
|
27
41
|
description: 'A simple way to use custom elements to your Rails app. #nobuild'
|
28
42
|
email:
|
29
43
|
- niklas.haeusele@hey.com
|
@@ -38,6 +52,8 @@ files:
|
|
38
52
|
- lib/custom_elements/rails.rb
|
39
53
|
- lib/custom_elements/rails/railtie.rb
|
40
54
|
- lib/custom_elements/rails/version.rb
|
55
|
+
- lib/generators/custom_element_generator.rb
|
56
|
+
- lib/generators/templates/custom_element.js.tt
|
41
57
|
- lib/install/install.rb
|
42
58
|
- lib/tasks/custom_elements/rails_tasks.rake
|
43
59
|
homepage: https://github.com/codergeek121/custom_elements-rails
|