support different filepatterns

Author: codergeek121

Gemfile

@@ -10,3 +10,4 @@ gem "puma"
 gem "debug", ">= 1.0.0"
 gem "capybara"
 gem "selenium-webdriver"
+gem "sqlite3", "~> 1.4"

app/assets/javascript/custom_elements-rails.js

@@ -1,14 +1,18 @@
 export function eagerDefineCustomElementsFrom(namespace, options = {}) {
+  const pathToElementName = (path) => {
+    const parts = path.split('/').map(p => p.replace(/_/g, '-'));
+    return `${options.prefix}-${parts.slice(0, -1).join('--')}${parts.length > 1 ? '--' : ''}${parts.at(-1)}`;
+  }
   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])
+    .map(([name, importPath]) => { return [pathToElementName(name.match(regex)[1]), importPath] })
     .forEach(([name, importPath]) => {
       import(importPath)
         .then((module) => {
-          customElements.define(`${options.prefix}-${name}`, module.default)
+          customElements.define(name, module.default)
         })
         .catch((error) => {
           console.error(`custom_elements-rails: Could not import custom element <${options.prefix}-${name}>`)

test/custom_elements/integration_test.rb

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

test/dummy/app/javascript/custom_elements/namespace/demo_element.js

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

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

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