custom_elements-rails 0.1.0 → 0.1.2
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 +56 -8
- data/app/assets/javascript/custom_elements-rails.js +18 -0
- data/lib/custom_elements/rails/railtie.rb +4 -1
- data/lib/custom_elements/rails/version.rb +1 -1
- data/lib/generators/custom_element_generator.rb +8 -0
- data/lib/generators/templates/custom_element.js.tt +9 -0
- data/lib/install/install.rb +31 -0
- data/lib/tasks/custom_elements/rails_tasks.rake +7 -4
- metadata +9 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b77ebf93580a7eb3cb83365dc83ba086f6d3bb1f20e173020039c08c5234669c
|
4
|
+
data.tar.gz: fc62a709561eeeefdae11cac69983062664d21065e058b376932258d3d1a522a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: bb09a978e032b95385a14b5a2e7ef060edd995981466eb941cef16c423bf27ba00ab012f9169e9502ea40c60308014b19fcdc8e3d1601b3f57c847d830cd276b
|
7
|
+
data.tar.gz: b7dc6b1f79854aa70ae148222eb8093d772cb647f927dc7d73f4d8a7b0202389c4f5f80db1f2645bb21c8982e4785aa1097365fd521521d12a9670b3100a8ebf
|
data/README.md
CHANGED
@@ -1,8 +1,8 @@
|
|
1
|
-
#
|
2
|
-
|
1
|
+
# Custom Elements with Rails
|
2
|
+
|
3
|
+
This gem provides a small js-helper, installation and generators to use custom elements in conjunction with `importmap-rails`.
|
3
4
|
|
4
5
|
## Usage
|
5
|
-
How to use my plugin.
|
6
6
|
|
7
7
|
## Installation
|
8
8
|
Add this line to your application's Gemfile:
|
@@ -11,18 +11,66 @@ Add this line to your application's Gemfile:
|
|
11
11
|
gem "custom_elements-rails"
|
12
12
|
```
|
13
13
|
|
14
|
-
|
14
|
+
Install the gem:
|
15
|
+
|
15
16
|
```bash
|
16
|
-
$ bundle
|
17
|
+
$ bundle install
|
18
|
+
```
|
19
|
+
|
20
|
+
Run the initial setup:
|
21
|
+
|
22
|
+
```bash
|
23
|
+
$ rails custom_elements:install
|
24
|
+
```
|
25
|
+
|
26
|
+
This will setup and add the following files:
|
27
|
+
|
28
|
+
```
|
29
|
+
app/javascript
|
30
|
+
├── application.js
|
31
|
+
└── custom_elements
|
32
|
+
├── hello_element.js
|
33
|
+
└── index.js
|
34
|
+
```
|
35
|
+
|
36
|
+
You can now add the `<app-hello>` custom element in your HTML. No build step needed.
|
37
|
+
|
38
|
+
## How it works
|
39
|
+
|
40
|
+
`eagerDefineCustomElementsFrom("custom_elements", { prefix: "app" })` will parse the JSON-importmap rendered by the `importmap-rails` gem and register custom elements with `customElements.define(...)` to the browser's custom element registry.
|
41
|
+
|
42
|
+
```
|
43
|
+
custom_elements/hello_element.js // will register <app-hello>
|
17
44
|
```
|
18
45
|
|
19
|
-
|
46
|
+
Your `_element.js` files have to `export default` custom elements for this to work.
|
47
|
+
|
48
|
+
> [!WARNING]
|
49
|
+
> Only single word elements are support currently.
|
50
|
+
|
51
|
+
|
52
|
+
## Add a custom element
|
53
|
+
|
54
|
+
Generate a new custom element with:
|
55
|
+
|
20
56
|
```bash
|
21
|
-
$
|
57
|
+
$ rails generate custom_element test
|
22
58
|
```
|
23
59
|
|
60
|
+
This will generate
|
61
|
+
|
62
|
+
```
|
63
|
+
app/javascript
|
64
|
+
└── custom_elements
|
65
|
+
└── test_element.js
|
66
|
+
```
|
67
|
+
|
68
|
+
which in turn will register a `<app-test></app-test>` custom element.
|
69
|
+
|
24
70
|
## Contributing
|
25
|
-
|
71
|
+
|
72
|
+
TODO
|
26
73
|
|
27
74
|
## License
|
75
|
+
|
28
76
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
@@ -0,0 +1,18 @@
|
|
1
|
+
export function eagerDefineCustomElementsFrom(namespace, options = {}) {
|
2
|
+
const importmap = document.querySelector('script[type="importmap"]')
|
3
|
+
const { imports } = JSON.parse(importmap.textContent)
|
4
|
+
const regex = new RegExp(`${namespace}\/(.*?)_element`)
|
5
|
+
Object.entries(imports)
|
6
|
+
.filter(([name, _]) => name.match(regex) )
|
7
|
+
.map(([name, importPath]) => [name.match(regex)[1], importPath])
|
8
|
+
.forEach(([name, importPath]) => {
|
9
|
+
import(importPath)
|
10
|
+
.then((module) => {
|
11
|
+
customElements.define(`${options.prefix}-${name}`, module.default)
|
12
|
+
})
|
13
|
+
.catch((error) => {
|
14
|
+
console.error(`custom_elements-rails: Could not import custom element <${options.prefix}-${name}>`)
|
15
|
+
throw error
|
16
|
+
})
|
17
|
+
})
|
18
|
+
}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
add_file "app/javascript/custom_elements/index.js", <<~JS
|
2
|
+
import { eagerDefineCustomElementsFrom } from "custom_elements-rails"
|
3
|
+
|
4
|
+
eagerDefineCustomElementsFrom("custom_elements", { prefix: "app" })
|
5
|
+
JS
|
6
|
+
|
7
|
+
# add hello world element
|
8
|
+
add_file "app/javascript/custom_elements/hello_element.js", <<~JS
|
9
|
+
export default class extends HTMLElement {
|
10
|
+
constructor() {
|
11
|
+
super()
|
12
|
+
}
|
13
|
+
|
14
|
+
connectedCallback() {
|
15
|
+
console.log("hello world")
|
16
|
+
}
|
17
|
+
}
|
18
|
+
JS
|
19
|
+
|
20
|
+
# add import to application.js
|
21
|
+
append_to_file('app/javascript/application.js', 'import "custom_elements"')
|
22
|
+
|
23
|
+
# pin basic eager loading script
|
24
|
+
append_to_file('config/importmap.rb', <<~RUBY)
|
25
|
+
pin "custom_elements-rails"
|
26
|
+
RUBY
|
27
|
+
|
28
|
+
# pin custom elements folder to importmap
|
29
|
+
append_to_file('config/importmap.rb', <<~RUBY)
|
30
|
+
pin_all_from "app/javascript/custom_elements", under: "custom_elements"
|
31
|
+
RUBY
|
@@ -1,4 +1,7 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
namespace :custom_elements do
|
2
|
+
desc "Installation"
|
3
|
+
task :install do
|
4
|
+
puts "Installing custom_elements-rails"
|
5
|
+
system "rails app:template LOCATION=#{File.expand_path('../../install/install.rb', __dir__)}"
|
6
|
+
end
|
7
|
+
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: custom_elements-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Niklas Häusele
|
@@ -16,15 +16,15 @@ dependencies:
|
|
16
16
|
requirements:
|
17
17
|
- - ">="
|
18
18
|
- !ruby/object:Gem::Version
|
19
|
-
version: 7
|
19
|
+
version: '7'
|
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: 7
|
27
|
-
description: A simple way to use custom elements
|
26
|
+
version: '7'
|
27
|
+
description: 'A simple way to use custom elements to your Rails app. #nobuild'
|
28
28
|
email:
|
29
29
|
- niklas.haeusele@hey.com
|
30
30
|
executables: []
|
@@ -34,9 +34,13 @@ files:
|
|
34
34
|
- MIT-LICENSE
|
35
35
|
- README.md
|
36
36
|
- Rakefile
|
37
|
+
- app/assets/javascript/custom_elements-rails.js
|
37
38
|
- lib/custom_elements/rails.rb
|
38
39
|
- lib/custom_elements/rails/railtie.rb
|
39
40
|
- lib/custom_elements/rails/version.rb
|
41
|
+
- lib/generators/custom_element_generator.rb
|
42
|
+
- lib/generators/templates/custom_element.js.tt
|
43
|
+
- lib/install/install.rb
|
40
44
|
- lib/tasks/custom_elements/rails_tasks.rake
|
41
45
|
homepage: https://github.com/codergeek121/custom_elements-rails
|
42
46
|
licenses:
|
@@ -62,5 +66,5 @@ requirements: []
|
|
62
66
|
rubygems_version: 3.5.9
|
63
67
|
signing_key:
|
64
68
|
specification_version: 4
|
65
|
-
summary: "
|
69
|
+
summary: "Custom Elements + Rails + Importmaps = \U0001F389"
|
66
70
|
test_files: []
|