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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 22d257cc2e8c052814180e03810ed19525ffaae2989826a5660dc0306dfc3df2
4
- data.tar.gz: 2661b7ce42c1a797e0d52fd8deb91922e6af03b8045a31656ec4c59c2f392dc5
3
+ metadata.gz: 00a594ba7a841b984e65721f217af0248ba150fe032038db7d6501606900fc14
4
+ data.tar.gz: 9db69aa3b4a6f8e621631dc22dad1640af90aafc2b6ec2fbc090089cb28d69e4
5
5
  SHA512:
6
- metadata.gz: c92ca66bdfd4c7a9bc5eb90bb383506716bf0efbe1ec977371695a45362578e15292bf22321381f04ba48ea4cb49699fa797b64ecf0d16f19f2d4c53316a5876
7
- data.tar.gz: fa02fa675a3a96445063e0eb5a825c942c6e85658c587d6b70ca2ef6858c3e5eb892c11114715e42aebdee0d5418a46821054b01c2fa09e5ff827b76fdf9e77a
6
+ metadata.gz: 47d8050c6e7e08715d63169ed4040f3d422652ba69140d84d2d269941184d0270281115b77f5f1413e4de62b7ba1efffcc0f78da3004fa95095c1a83e4efd907
7
+ data.tar.gz: 6b52ed941852c7543bbf0f9f82d5f6631bf06ea956248ac828d8660511894a7e189a9f0a459439053f7fd461d228c097db6d5ad16481c50fca7ea59013d0053f
data/README.md CHANGED
@@ -1,10 +1,11 @@
1
- # Custom Elements with Rails
1
+ # Custom Elements Rails
2
2
 
3
- This gem provides a small helper and installation scripts to use custom elements in conjunction with `importmap-rails`.
3
+ [![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)
4
4
 
5
- ## Usage
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
- You can now add the `<app-hello>` custom element in your app. No build step needed.
37
+ The `<app-hello>` custom element can be used in the views now.
37
38
 
38
- ## Add a custom element
39
+ You can generate a new custom element with `rails g custom_element abc`.
39
40
 
40
- TODO
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
- Contribution directions go here.
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
@@ -1,3 +1,6 @@
1
- require "bundler/setup"
1
+ APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
2
+ load "rails/tasks/engine.rake"
3
+
4
+ load "rails/tasks/statistics.rake"
2
5
 
3
6
  require "bundler/gem_tasks"
@@ -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.precompile += %w( custom_elements-rails.js )
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
@@ -1,5 +1,5 @@
1
1
  module CustomElements
2
2
  module Rails
3
- VERSION = "0.1.1"
3
+ VERSION = "0.2.0"
4
4
  end
5
5
  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.1.1
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-04-22 00:00:00.000000000 Z
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: '7'
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: '7'
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