custom_elements-rails 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 22d257cc2e8c052814180e03810ed19525ffaae2989826a5660dc0306dfc3df2
-  data.tar.gz: 2661b7ce42c1a797e0d52fd8deb91922e6af03b8045a31656ec4c59c2f392dc5
+  metadata.gz: b77ebf93580a7eb3cb83365dc83ba086f6d3bb1f20e173020039c08c5234669c
+  data.tar.gz: fc62a709561eeeefdae11cac69983062664d21065e058b376932258d3d1a522a
 SHA512:
-  metadata.gz: c92ca66bdfd4c7a9bc5eb90bb383506716bf0efbe1ec977371695a45362578e15292bf22321381f04ba48ea4cb49699fa797b64ecf0d16f19f2d4c53316a5876
-  data.tar.gz: fa02fa675a3a96445063e0eb5a825c942c6e85658c587d6b70ca2ef6858c3e5eb892c11114715e42aebdee0d5418a46821054b01c2fa09e5ff827b76fdf9e77a
+  metadata.gz: bb09a978e032b95385a14b5a2e7ef060edd995981466eb941cef16c423bf27ba00ab012f9169e9502ea40c60308014b19fcdc8e3d1601b3f57c847d830cd276b
+  data.tar.gz: b7dc6b1f79854aa70ae148222eb8093d772cb647f927dc7d73f4d8a7b0202389c4f5f80db1f2645bb21c8982e4785aa1097365fd521521d12a9670b3100a8ebf

data/README.md

@@ -1,6 +1,6 @@
 # Custom Elements with Rails
 
-This gem provides a small helper and installation scripts to use custom elements in conjunction with `importmap-rails`.
+This gem provides a small js-helper, installation and generators to use custom elements in conjunction with `importmap-rails`.
 
 ## Usage
 
@@ -33,14 +33,44 @@ app/javascript
     └── index.js
 ```
 
-You can now add the `<app-hello>` custom element in your app. No build step needed.
+You can now add the `<app-hello>` custom element in your HTML. No build step needed.
+
+## How it works
+
+`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.
+
+```
+custom_elements/hello_element.js // will register <app-hello>
+```
+
+Your `_element.js` files have to `export default` custom elements for this to work.
+
+> [!WARNING]  
+> Only single word elements are support currently.
+
 
 ## Add a custom element
 
-TODO
+Generate a new custom element with:
+
+```bash
+$ rails generate custom_element test 
+```
+
+This will generate 
+
+```
+app/javascript
+└── custom_elements
+    └── test_element.js
+```
+
+which in turn will register a `<app-test></app-test>` custom element.
 
 ## Contributing
-Contribution directions go here.
+
+TODO
 
 ## License
+
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/lib/custom_elements/rails/version.rb

@@ -1,5 +1,5 @@
 module CustomElements
   module Rails
-    VERSION = "0.1.1"
+    VERSION = "0.1.2"
   end
 end

data/lib/generators/custom_element_generator.rb

@@ -0,0 +1,8 @@
+class CustomElementGenerator < Rails::Generators::NamedBase
+  source_root File.expand_path("templates", __dir__)
+
+  def copy_custom_element
+    template "custom_element.js", "app/javascript/custom_elements/#{file_name}_element.js"
+  end
+end
+

data/lib/generators/templates/custom_element.js.tt

@@ -0,0 +1,9 @@
+export default class extends HTMLElement {
+  constructor() {
+    super()
+  }
+
+  connectedCallback() {
+    console.log("<%= file_name %>")
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: custom_elements-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Niklas Häusele
@@ -38,6 +38,8 @@ files:
 - lib/custom_elements/rails.rb
 - lib/custom_elements/rails/railtie.rb
 - lib/custom_elements/rails/version.rb
+- lib/generators/custom_element_generator.rb
+- lib/generators/templates/custom_element.js.tt
 - lib/install/install.rb
 - lib/tasks/custom_elements/rails_tasks.rake
 homepage: https://github.com/codergeek121/custom_elements-rails