Support more filenames + folders (#10)

Author: codergeek121

Gemfile

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

README.md

@@ -49,8 +49,33 @@ custom_elements/hello_element.js // will register <app-hello> automatically
 
 Your `*_element.js` files have to `export default` custom elements for this to work properly.
 
-> [!WARNING]  
-> Only single word elements are supported currently. See https://github.com/codergeek121/custom_elements-rails/issues/1
+### Naming Convention for Custom Elements
+
+When defining custom elements from files, their filenames are used to generate the element names automatically. The following rules and examples clarify how file paths are converted to custom element names:
+
+#### Usage
+
+Register all files in the `custom_elements` folder as custom elements using a prefix (e.g., `app`):
+
+```js
+eagerDefineCustomElementsFrom("custom_elements", { prefix: "app" });
+```
+
+#### Conversion Rules
+
+- Filenames are transformed into kebab-case (lowercase with hyphens).
+- Words are separated by underscores (`_`) or hyphens (`-`) in the filename.
+- The folder structure is reflected in the name using double hyphens (`--`) to separate folder names from the file name.
+- A prefix (e.g., `app`) is added to the beginning of each custom element name.
+
+#### Examples
+
+| Filepath                            | Generated Custom Element Name |
+|-------------------------------------|--------------------------------|
+| `custom_elements/demo_element.js`   | `<app-demo>`                  |
+| `custom_elements/demo-element.js`   | `<app-demo>`                  |
+| `custom_elements/foo_bar_element.js`| `<app-foo-bar>`               |
+| `custom_elements/folder/foo_bar_element.js` | `<app-folder--foo-bar>` |
 
 ## Add a custom element with the built-in generator
 

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], 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

@@ -6,4 +6,22 @@ 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
+
+  test "some-name-element.js connects" do
+    visit elements_path
+
+    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/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/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/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

@@ -1,3 +1,6 @@
 <h1>Elements#show</h1>
 
 <app-hello></app-hello>
+<app-foo-bar></app-foo-bar>
+<app-some-name></app-some-name>
+<app-namespace--demo></app-namespace--demo>