custom_elements-rails 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 39d267fc030b1d1ed3a68c7d74ee8c5d00617ddd8157703d31ffa35392202422
-  data.tar.gz: '03929ce117a70a29b1b88371b39eb241aa462dffb46361d8aa71b2196f9a9ba1'
+  metadata.gz: b77ebf93580a7eb3cb83365dc83ba086f6d3bb1f20e173020039c08c5234669c
+  data.tar.gz: fc62a709561eeeefdae11cac69983062664d21065e058b376932258d3d1a522a
 SHA512:
-  metadata.gz: 2a636bee1c939de478ec43a50f8c51e2956500060cbdd0808aa7d3ff99b2654fb07a9baa55d271a2672e337741053cd7d348a7471aa63d79fd0150c5dc10433a
-  data.tar.gz: f1284e5448b9d4e31c014b32da14a711ba5aa6b5682d60db812cc3d2f2a44b2702d8229b9323b6371b83f4b22a81e510c6482437513b9950faaecd7ffc09aee8
+  metadata.gz: bb09a978e032b95385a14b5a2e7ef060edd995981466eb941cef16c423bf27ba00ab012f9169e9502ea40c60308014b19fcdc8e3d1601b3f57c847d830cd276b
+  data.tar.gz: b7dc6b1f79854aa70ae148222eb8093d772cb647f927dc7d73f4d8a7b0202389c4f5f80db1f2645bb21c8982e4785aa1097365fd521521d12a9670b3100a8ebf

data/README.md

@@ -1,8 +1,8 @@
-# CustomElements::Rails
-Short description and motivation.
+# Custom Elements with Rails
+
+This gem provides a small js-helper, installation and generators to use custom elements in conjunction with `importmap-rails`.
 
 ## Usage
-How to use my plugin.
 
 ## Installation
 Add this line to your application's Gemfile:
@@ -11,18 +11,66 @@ Add this line to your application's Gemfile:
 gem "custom_elements-rails"
 ```
 
-And then execute:
+Install the gem:
+
 ```bash
-$ bundle
+$ bundle install
+```
+
+Run the initial setup:
+
+```bash
+$ rails custom_elements:install
+```
+
+This will setup and add the following files:
+
+```
+app/javascript
+├── application.js
+└── custom_elements
+    ├── hello_element.js
+    └── index.js
+```
+
+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>
 ```
 
-Or install it yourself as:
+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
+
+Generate a new custom element with:
+
 ```bash
-$ gem install custom_elements-rails
+$ 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/app/assets/javascript/custom_elements-rails.js

@@ -0,0 +1,18 @@
+export function eagerDefineCustomElementsFrom(namespace, options = {}) {
+  const importmap = document.querySelector('script[type="importmap"]')
+  const { imports } = JSON.parse(importmap.textContent)
+  const regex = new RegExp(`${namespace}\/(.*?)_element`)
+  Object.entries(imports)
+    .filter(([name, _]) => name.match(regex) )
+    .map(([name, importPath]) => [name.match(regex)[1], importPath])
+    .forEach(([name, importPath]) => {
+      import(importPath)
+        .then((module) => {
+          customElements.define(`${options.prefix}-${name}`, module.default)
+        })
+        .catch((error) => {
+          console.error(`custom_elements-rails: Could not import custom element <${options.prefix}-${name}>`)
+          throw error
+        })
+    })
+}

data/lib/custom_elements/rails/railtie.rb

@@ -1,6 +1,9 @@
 module CustomElements
   module Rails
-    class Railtie < ::Rails::Railtie
+    class Railtie < ::Rails::Engine
+      initializer "custom_elements-rails.assets.precompile" do |app|
+        app.config.assets.precompile += %w( custom_elements-rails.js )
+      end
     end
   end
 end

data/lib/custom_elements/rails/version.rb

@@ -1,5 +1,5 @@
 module CustomElements
   module Rails
-    VERSION = "0.1.0"
+    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 %>")
+  }
+}

data/lib/install/install.rb

@@ -0,0 +1,31 @@
+add_file "app/javascript/custom_elements/index.js", <<~JS
+  import { eagerDefineCustomElementsFrom } from "custom_elements-rails"
+
+  eagerDefineCustomElementsFrom("custom_elements", { prefix: "app" })
+JS
+
+# add hello world element
+add_file "app/javascript/custom_elements/hello_element.js", <<~JS
+  export default class extends HTMLElement {
+    constructor() {
+      super()
+    }
+
+    connectedCallback() {
+      console.log("hello world")
+    }
+  }
+JS
+
+# add import to application.js
+append_to_file('app/javascript/application.js', 'import "custom_elements"')
+
+# pin basic eager loading script
+append_to_file('config/importmap.rb', <<~RUBY)
+  pin "custom_elements-rails"
+RUBY
+
+# pin custom elements folder to importmap
+append_to_file('config/importmap.rb', <<~RUBY)
+  pin_all_from "app/javascript/custom_elements", under: "custom_elements"
+RUBY

data/lib/tasks/custom_elements/rails_tasks.rake

@@ -1,4 +1,7 @@
-# desc "Explaining what the task does"
-# task :custom_elements_rails do
-#   # Task goes here
-# end
+namespace :custom_elements do
+  desc "Installation"
+  task :install do
+    puts "Installing custom_elements-rails"
+    system "rails app:template LOCATION=#{File.expand_path('../../install/install.rb', __dir__)}"
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: custom_elements-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Niklas Häusele
@@ -16,15 +16,15 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 7.1.3.2
+        version: '7'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 7.1.3.2
-description: A simple way to use custom elements and importmaps
+        version: '7'
+description: 'A simple way to use custom elements to your Rails app. #nobuild'
 email:
 - niklas.haeusele@hey.com
 executables: []
@@ -34,9 +34,13 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/javascript/custom_elements-rails.js
 - 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
 licenses:
@@ -62,5 +66,5 @@ requirements: []
 rubygems_version: 3.5.9
 signing_key:
 specification_version: 4
-summary: "custom elements + Rails = \U0001F389"
+summary: "Custom Elements + Rails + Importmaps = \U0001F389"
 test_files: []