Support some-name-element.js -> <app-some-name>

Author: codergeek121

app/assets/javascript/custom_elements-rails.js

@@ -1,7 +1,7 @@
 export function eagerDefineCustomElementsFrom(namespace, options = {}) {
   const importmap = document.querySelector('script[type="importmap"]')
   const { imports } = JSON.parse(importmap.textContent)
-  const regex = new RegExp(`${namespace}\/(.*?)_element`)
+  const regex = new RegExp(`${namespace}\/(.*?)[_-]element`)
   Object.entries(imports)
     .filter(([name, _]) => name.match(regex) )
     .map(([name, importPath]) => [name.match(regex)[1].replace('_', '-'), importPath])

test/custom_elements/integration_test.rb

@@ -12,4 +12,10 @@ class CustomElements::IntegrationTest < ApplicationSystemTestCase
 
     assert_text "connectedCallback(): foo_bar_element.js"
   end
+
+  test "some-name-element.js connects" do
+    visit elements_path
+
+    assert_text "connectedCallback(): some-name-element.js"
+  end
 end

test/dummy/app/javascript/custom_elements/some-name-element.js

@@ -0,0 +1,9 @@
+export default class extends HTMLElement {
+  constructor() {
+    super()
+  }
+
+  connectedCallback() {
+    this.textContent = "connectedCallback(): some-name-element.js"
+  }
+}

test/dummy/app/views/elements/show.html.erb

@@ -2,3 +2,4 @@
 
 <app-hello></app-hello>
 <app-foo-bar></app-foo-bar>
+<app-some-name></app-some-name>