Add observed attributes generator (#8)

Support observedAttributes with the generator.

Author: codergeek121

Gemfile

@@ -6,12 +6,8 @@ gemspec
 
 gem "importmap-rails"
 gem "propshaft"
-
 gem "puma"
-
 gem "sqlite3", "~> 1.4"
-
-# Start debugger with binding.b [https://github.com/ruby/debug]
-# gem "debug", ">= 1.0.0"
+gem "debug", ">= 1.0.0"
 gem "capybara"
 gem "selenium-webdriver"

Gemfile.lock

@@ -103,6 +103,9 @@ GEM
     connection_pool (2.4.1)
     crass (1.0.6)
     date (3.3.4)
+    debug (1.9.2)
+      irb (~> 1.10)
+      reline (>= 0.3.8)
     drb (2.2.1)
     erubi (1.12.0)
     globalid (1.2.1)
@@ -229,6 +232,7 @@ DEPENDENCIES
   appraisal
   capybara
   custom_elements-rails!
+  debug (>= 1.0.0)
   importmap-rails
   propshaft
   puma

README.md

@@ -52,7 +52,7 @@ Your `*_element.js` files have to `export default` custom elements for this to w
 > [!WARNING]  
 > Only single word elements are supported currently. See https://github.com/codergeek121/custom_elements-rails/issues/1
 
-## Add a custom element
+## Add a custom element with the built-in generator
 
 This gem adds a generator to generate new custom elements with:
 
@@ -73,11 +73,40 @@ export default class extends HTMLElement {
     console.log("test_element.js")
   }
 }
-
 ```
 
 which in turn will register a `<app-test></app-test>` custom element automatically in your app.
 
+```bash
+$ rails generate custom_element test 
+```
+
+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:
+
+```bash
+$ rails generate custom_element test attribute1
+```
+
+will generate
+
+```javascript
+export default class extends HTMLElement {
+  static observedAttributes = ["attribute1"]
+
+  constructor() {
+    super()
+  }
+
+  connectedCallback() {
+    console.log("test_element.js")
+  }
+
+  get attribute1() {
+    return this.getAttribute("attribute1")
+  }
+}
+```
+
 ## Documentation
 
 `eagerDefineCustomElementsFrom(under, options)`

lib/generators/custom_element_generator.rb

@@ -1,6 +1,8 @@
 class CustomElementGenerator < Rails::Generators::NamedBase
   source_root File.expand_path("templates", __dir__)
 
+  argument :attributes, type: :array, default: [], banner: "Observed attributes"
+
   def copy_custom_element
     template "custom_element.js", "app/javascript/custom_elements/#{file_name}_element.js"
   end

lib/generators/templates/custom_element.js.tt

@@ -1,9 +1,18 @@
 export default class extends HTMLElement {
+<% if attributes.any? %>
+  static observedAttributes = <%= attributes.map { _1.name } %>
+<% end %>
   constructor() {
     super()
   }
 
   connectedCallback() {
     console.log("<%= file_name %>")
   }
+<% attributes.each do |attribute| -%>
+
+  get <%= attribute.name %>() {
+    return this.getAttribute("<%= attribute.name %>")
+  }
+<% end -%>
 }