Support components in nested directories

README.md

@@ -2,7 +2,7 @@
 
 [![Gem Version](https://badge.fury.io/rb/turbo-mount.svg)](https://rubygems.org/gems/turbo-mount)
 
-`TurboMount` is a simple library that allows you to add highly interactive components from React, Vue, Svelte, and other gframeworks to your Hotwire application.
+`TurboMount` is a simple library that allows you to add highly interactive components from React, Vue, Svelte, and other frameworks to your Hotwire application.
 
 ### Learn more
 
@@ -21,6 +21,7 @@
   - [Supported Frameworks](#supported-frameworks)
   - [Custom Controllers](#custom-controllers)
   - [Auto-Loading Components](#auto-loading-components)
+    - [Components in Nested Directories](#components-in-nested-directories)
     - [Vite Integration](#vite-integration)
     - [ESBuild Integration](#esbuild-integration)
   - [Mount Target](#mount-target)
@@ -185,6 +186,28 @@ The `registerComponents` helpers search for controllers in the following paths:
 - `controllers/turbo-mount/${controllerName}`
 - `controllers/turbo-mount-${controllerName}`
 
+#### Components in Nested Directories
+
+Turbo Mount supports components located in nested directories. For example, if you have a component structure like:
+
+```
+components/
+├── Dashboard/
+│ └── WeatherWidget.tsx
+└── ...
+```
+
+You can use the following helper to mount the component:
+
+```erb
+<%= turbo_mount("Dashboard/WeatherWidget") %>
+```
+
+For nested components, controllers are searched in these paths:
+
+- `controllers/turbo_mount/dashboard/weather_widget_controller.js`
+- `controllers/turbo_mount_dashboard__weather_widget_controller.js`
+
 #### Vite Integration
 
 Vite helper requires the `stimulus-vite-helpers` package to load components and controllers. Here's how to set it up:

lib/turbo/mount/helpers.rb

@@ -6,7 +6,7 @@ module Helpers
       def turbo_mount(component_name, props: {}, tag: "div", **attrs, &block)
         raise TypeError, "Component name expected" unless component_name.is_a? String
 
-        controller_name = "turbo-mount-#{component_name.underscore.dasherize}"
+        controller_name = "turbo-mount-#{component_name.underscore.dasherize.gsub("/", "--")}"
         attrs["data-controller"] = controller_name
         prefix = "data-#{controller_name}"
         attrs["#{prefix}-component-value"] = component_name

packages/turbo-mount/src/registerComponentsBase.ts

@@ -18,7 +18,7 @@ type RegisterComponentsProps<T> = {
 };
 
 const identifierNames = (name: string) => {
-  const controllerName = camelToKebabCase(name);
+  const controllerName = camelToKebabCase(name).replace("/", "--");
 
   return [`turbo-mount--${controllerName}`, `turbo-mount-${controllerName}`];
 };

packages/turbo-mount/src/turbo-mount.ts

@@ -75,7 +75,7 @@ export class TurboMount {
     this.components.set(name, { component, plugin });
 
     if (controller) {
-      const controllerName = `turbo-mount-${camelToKebabCase(name)}`;
+      const controllerName = `turbo-mount-${camelToKebabCase(name).replace("/", "--")}`;
       this.application.register(controllerName, controller);
     }
   }