Support foo_bar -> <app-foo-bar>

Author: codergeek121

app/assets/javascript/custom_elements-rails.js

@@ -4,7 +4,7 @@ export function eagerDefineCustomElementsFrom(namespace, options = {}) {
   const regex = new RegExp(`${namespace}\/(.*?)_element`)
   Object.entries(imports)
     .filter(([name, _]) => name.match(regex) )
-    .map(([name, importPath]) => [name.match(regex)[1], importPath])
+    .map(([name, importPath]) => [name.match(regex)[1].replace('_', '-'), importPath])
     .forEach(([name, importPath]) => {
       import(importPath)
         .then((module) => {

test/custom_elements/integration_test.rb

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

test/dummy/app/javascript/custom_elements/foo_bar_element.js

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

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

@@ -1,3 +1,4 @@
 <h1>Elements#show</h1>
 
 <app-hello></app-hello>
+<app-foo-bar></app-foo-bar>