Add installation script and basic loading script

Author: codergeek121

Gemfile.lock

@@ -1,8 +1,8 @@
 PATH
   remote: .
   specs:
-    custom_elements-rails (0.1.0)
-      rails (>= 7.1.3.2)
+    custom_elements-rails (0.1.1)
+      rails (>= 7)
 
 GEM
   remote: https://rubygems.org/

README.md

@@ -1,8 +1,8 @@
-# CustomElements::Rails
-Short description and motivation.
+# Custom Elements with Rails
+
+This gem provides a small helper and installation scripts 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,16 +11,34 @@ Add this line to your application's Gemfile:
 gem "custom_elements-rails"
 ```
 
-And then execute:
+Install the gem:
+
 ```bash
-$ bundle
+$ bundle install
 ```
 
-Or install it yourself as:
+Run the initial setup:
+
 ```bash
-$ gem install custom_elements-rails
+$ 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 app. No build step needed.
+
+## Add a custom element
+
+TODO
+
 ## Contributing
 Contribution directions go here.
 

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
+        })
+    })
+}

custom_elements-rails.gemspec

@@ -6,8 +6,8 @@ Gem::Specification.new do |spec|
   spec.authors     = ["Niklas Häusele"]
   spec.email       = ["[email protected]"]
   spec.homepage    = "https://github.com/codergeek121/custom_elements-rails"
-  spec.summary     = "custom elements + Rails = 🎉"
-  spec.description = "A simple way to use custom elements and importmaps"
+  spec.summary     = "Custom Elements + Rails + Importmaps = 🎉"
+  spec.description = "A simple way to use custom elements to your Rails app. #nobuild"
   spec.license     = "MIT"
 
   spec.metadata["homepage_uri"] = spec.homepage
@@ -19,6 +19,5 @@ Gem::Specification.new do |spec|
     Dir["{app,config,db,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.md"]
   end
 
-  # TODO
-  spec.add_dependency "rails", ">= 7.1.3.2"
+  spec.add_dependency "rails", ">= 7"
 end

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

lib/custom_elements/rails/version.rb

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

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

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