turbo-mount 0.3.2 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a99bcba9d009ca4dc95d68bd54a8f98e724f487c8d25eff234f406feb01c56e
-  data.tar.gz: 186eb9a15926d54e14999febfe36c809dbf988d30857cf3d0ba29fd58b73eafc
+  metadata.gz: a1e390ef4fc7a3d329693a294437fa8f5d27c9157654b3a9b21621b26dd6c7c5
+  data.tar.gz: 591ea18f8b02da05da9a9d6dba5249eccdf01ec2b4d00477341df76166c0bd7d
 SHA512:
-  metadata.gz: 5ec1ca4c48650c82e92c1ff0419df6ef9d3c5f1ebaa9c8ac31a41c0ac043fe22c78169d60ce9589ee3067e5d7643b851fcd3b93118ee3e8e64e2caad1dda552a
-  data.tar.gz: c5c7639b39dcaa2443d29188e213c3592473eb3c9d83ca2d7278f37440e40f4daa7cdee4f357449a8ef9e08f9c4b0b0caa1f9f5837e0a810d09235cccc36f528
+  metadata.gz: fd306af35603685bebc4c2a7ef0fe31909fa56b521f0808562aeee3f8c90f2d5098aa846e6633356b716ced5aa51b8c5e6131252b97c5b91ccf14242aa90baff
+  data.tar.gz: 8a7221dad2c96c5c8c873e841a4007f1b45bcf6adada668af008692b035589590a230c411756f1cac86918d74521d0f6cec47d8c2125feddb1b5bfca91187ec3

data/CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning].
 
 ## [Unreleased]
 
+## [0.4.0] - 2024-11-03
+
+### Added
+
+- [BREAKING] Support Svelte 5. ([@skryukov])
+  `turbo-mount/svelte` is now the Svelte 5 plugin. The Svelte 4 plugin is now `turbo-mount/svelte4`.
+
+## [0.3.3] - 2024-09-24
+
+### Added
+
+- Support components in nested directories. ([@skryukov])
+- Support pnpm build tool. ([@jkogara])
+
 ## [0.3.2] - 2024-06-24
 
 ### Fixed
@@ -65,10 +79,13 @@ and this project adheres to [Semantic Versioning].
 
 - Initial implementation. ([@skryukov])
 
+[@jkogara]: https://github.com/jkogara
 [@skryukov]: https://github.com/skryukov
 
-[Unreleased]: https://github.com/skryukov/turbo-mount/compare/v0.3.2...HEAD
-[0.3.1]: https://github.com/skryukov/turbo-mount/compare/v0.3.1...v0.3.2
+[Unreleased]: https://github.com/skryukov/turbo-mount/compare/v0.4.0...HEAD
+[0.4.0]: https://github.com/skryukov/turbo-mount/compare/v0.3.3...v0.4.0
+[0.3.3]: https://github.com/skryukov/turbo-mount/compare/v0.3.2...v0.3.3
+[0.3.2]: https://github.com/skryukov/turbo-mount/compare/v0.3.1...v0.3.2
 [0.3.1]: https://github.com/skryukov/turbo-mount/compare/v0.3.0...v0.3.1
 [0.3.0]: https://github.com/skryukov/turbo-mount/compare/v0.2.3...v0.3.0
 [0.2.3]: https://github.com/skryukov/turbo-mount/compare/v0.2.2...v0.2.3

data/README.md

@@ -1,8 +1,12 @@
-# Turbo Mount
+<p align="center">
+  <img src="./assets/logo.svg" title="Turbo Mount logo" width="220" height="45">
+</p>
+
+<h1 align="center">Turbo Mount</h1>
 
 [![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 +25,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)
@@ -142,7 +147,8 @@ This will generate the following HTML:
 
 - React: `"turbo-mount/react"`
 - Vue: `"turbo-mount/vue"`
-- Svelte: `"turbo-mount/svelte"`
+- Svelte 4: `"turbo-mount/svelte4"`
+- Svelte 5: `"turbo-mount/svelte"`
 
 To add support for other frameworks, create a custom plugin. See included plugins for examples.
 
@@ -185,6 +191,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:

data/app/assets/javascripts/turbo-mount/svelte.js

@@ -1,12 +1,13 @@
 import { buildRegisterFunction } from 'turbo-mount';
 export { TurboMount } from 'turbo-mount';
+import { mount, unmount } from 'svelte';
 
 const plugin = {
     mountComponent: (mountProps) => {
         const { el, Component, props } = mountProps;
-        const component = new Component({ target: el, props });
+        const component = mount(Component, { target: el, props });
         return () => {
-            component.$destroy();
+            unmount(component);
         };
     },
 };

data/app/assets/javascripts/turbo-mount/svelte.min.js

@@ -1,2 +1,2 @@
-import{buildRegisterFunction as o}from"turbo-mount";export{TurboMount}from"turbo-mount";const t={mountComponent:o=>{const{el:t,Component:r,props:n}=o,e=new r({target:t,props:n});return()=>{e.$destroy()}}},r=o(t);export{t as default,r as registerComponent};
+import{buildRegisterFunction as o}from"turbo-mount";export{TurboMount}from"turbo-mount";import{mount as t,unmount as r}from"svelte";const n={mountComponent:o=>{const{el:n,Component:e,props:m}=o,p=t(e,{target:n,props:m});return()=>{r(p)}}},e=o(n);export{n as default,e as registerComponent};
 //# sourceMappingURL=svelte.min.js.map

data/app/assets/javascripts/turbo-mount/svelte.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"svelte.min.js","sources":["../../src/plugins/svelte/index.ts"],"sourcesContent":["import { buildRegisterFunction, Plugin, TurboMount } from \"turbo-mount\";\nimport { ComponentType } from \"svelte\";\n\nconst plugin: Plugin<ComponentType> = {\n  mountComponent: (mountProps) => {\n    const { el, Component, props } = mountProps;\n    const component = new Component({ target: el, props });\n\n    return () => {\n      component.$destroy();\n    };\n  },\n};\n\nconst registerComponent = buildRegisterFunction(plugin);\n\nexport { TurboMount, registerComponent };\n\nexport default plugin;\n"],"names":["plugin","mountComponent","mountProps","el","Component","props","component","target","$destroy","registerComponent","buildRegisterFunction"],"mappings":"wFAGA,MAAMA,EAAgC,CACpCC,eAAiBC,IACf,MAAMC,GAAEA,EAAEC,UAAEA,EAASC,MAAEA,GAAUH,EAC3BI,EAAY,IAAIF,EAAU,CAAEG,OAAQJ,EAAIE,UAE9C,MAAO,KACLC,EAAUE,UAAU,CACrB,GAICC,EAAoBC,EAAsBV"}
+{"version":3,"file":"svelte.min.js","sources":["../../src/plugins/svelte/index.ts"],"sourcesContent":["import { buildRegisterFunction, Plugin, TurboMount } from \"turbo-mount\";\nimport { Component, mount, unmount } from \"svelte\";\n\nconst plugin: Plugin<Component> = {\n  mountComponent: (mountProps) => {\n    const { el, Component, props } = mountProps;\n    const component = mount(Component, { target: el, props });\n    return () => {\n      unmount(component);\n    };\n  },\n};\n\nconst registerComponent = buildRegisterFunction(plugin);\n\nexport { TurboMount, registerComponent };\n\nexport default plugin;\n"],"names":["plugin","mountComponent","mountProps","el","Component","props","component","mount","target","unmount","registerComponent","buildRegisterFunction"],"mappings":"oIAGA,MAAMA,EAA4B,CAChCC,eAAiBC,IACf,MAAMC,GAAEA,EAAEC,UAAEA,EAASC,MAAEA,GAAUH,EAC3BI,EAAYC,EAAMH,EAAW,CAAEI,OAAQL,EAAIE,UACjD,MAAO,KACLI,EAAQH,EAAU,CACnB,GAICI,EAAoBC,EAAsBX"}

data/app/assets/javascripts/turbo-mount/svelte4.js

@@ -0,0 +1,15 @@
+import { buildRegisterFunction } from 'turbo-mount';
+export { TurboMount } from 'turbo-mount';
+
+const plugin = {
+    mountComponent: (mountProps) => {
+        const { el, Component, props } = mountProps;
+        const component = new Component({ target: el, props });
+        return () => {
+            component.$destroy();
+        };
+    },
+};
+const registerComponent = buildRegisterFunction(plugin);
+
+export { plugin as default, registerComponent };

data/app/assets/javascripts/turbo-mount/svelte4.min.js

@@ -0,0 +1,2 @@
+import{buildRegisterFunction as o}from"turbo-mount";export{TurboMount}from"turbo-mount";const t={mountComponent:o=>{const{el:t,Component:r,props:n}=o,e=new r({target:t,props:n});return()=>{e.$destroy()}}},r=o(t);export{t as default,r as registerComponent};
+//# sourceMappingURL=svelte4.min.js.map

data/app/assets/javascripts/turbo-mount/svelte4.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte4.min.js","sources":["../../src/plugins/svelte4/index.ts"],"sourcesContent":["import { buildRegisterFunction, Plugin, TurboMount } from \"turbo-mount\";\nimport { ComponentType } from \"svelte\";\n\nconst plugin: Plugin<ComponentType> = {\n  mountComponent: (mountProps) => {\n    const { el, Component, props } = mountProps;\n\n    const component = new Component({ target: el, props });\n\n    return () => {\n      component.$destroy();\n    };\n  },\n};\n\nconst registerComponent = buildRegisterFunction(plugin);\n\nexport { TurboMount, registerComponent };\n\nexport default plugin;\n"],"names":["plugin","mountComponent","mountProps","el","Component","props","component","target","$destroy","registerComponent","buildRegisterFunction"],"mappings":"wFAGA,MAAMA,EAAgC,CACpCC,eAAiBC,IACf,MAAMC,GAAEA,EAAEC,UAAEA,EAASC,MAAEA,GAAUH,EAE3BI,EAAY,IAAIF,EAAU,CAAEG,OAAQJ,EAAIE,UAE9C,MAAO,KACLC,EAAUE,UAAU,CACrB,GAICC,EAAoBC,EAAsBV"}

data/app/assets/javascripts/turbo-mount.js

@@ -64,10 +64,9 @@ class TurboMount {
         this.application.turboMount = this;
         this.application.register("turbo-mount", TurboMountController);
         document.addEventListener("turbo:before-morph-element", (event) => {
-            var _a;
             const turboMorphEvent = event;
             const { target, detail } = turboMorphEvent;
-            if ((_a = target.getAttribute("data-controller")) === null || _a === void 0 ? void 0 : _a.includes("turbo-mount")) {
+            if (target.getAttribute("data-controller")?.includes("turbo-mount")) {
                 target.setAttribute("data-turbo-mount-props-value", detail.newElement.getAttribute("data-turbo-mount-props-value") ||
                     "{}");
                 event.preventDefault();
@@ -81,7 +80,7 @@ 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);
         }
     }
@@ -108,19 +107,18 @@ function buildRegisterFunction(plugin) {
 }
 
 const identifierNames = (name) => {
-    const controllerName = camelToKebabCase(name);
+    const controllerName = camelToKebabCase(name).replace("/", "--");
     return [`turbo-mount--${controllerName}`, `turbo-mount-${controllerName}`];
 };
 const registerComponentsBase = ({ plugin, turboMount, components, controllers, }) => {
-    var _a;
-    const controllerModules = controllers !== null && controllers !== void 0 ? controllers : [];
+    const controllerModules = controllers ?? [];
     for (const { module, filename } of components) {
         const name = filename
             .replace(/\.\w*$/, "")
             .replace(/^[./]*components\//, "");
         const identifiers = identifierNames(name);
         const controller = controllerModules.find(({ identifier }) => identifiers.includes(identifier));
-        const component = (_a = module.default) !== null && _a !== void 0 ? _a : module;
+        const component = module.default ?? module;
         if (controller) {
             turboMount.register(plugin, name, component, controller.controllerConstructor);
         }

data/app/assets/javascripts/turbo-mount.min.js

@@ -1,2 +1,2 @@
-import{Controller as t,Application as o}from"@hotwired/stimulus";class n extends t{constructor(){super(...arguments),this.skipPropsChangeCallback=!1}connect(){this._umountComponentCallback||(this._umountComponentCallback=this.mountComponent(this.mountElement,this.resolvedComponent,this.componentProps))}disconnect(){this.umountComponent()}propsValueChanged(){this.skipPropsChangeCallback?this.skipPropsChangeCallback=!1:(this.umountComponent(),this._umountComponentCallback||(this._umountComponentCallback=this.mountComponent(this.mountElement,this.resolvedComponent,this.componentProps)))}get componentProps(){return this.propsValue}get mountElement(){return this.hasMountTarget?this.mountTarget:this.element}get resolvedComponent(){return this.resolveMounted(this.componentValue).component}get resolvedPlugin(){return this.resolveMounted(this.componentValue).plugin}umountComponent(){this._umountComponentCallback&&this._umountComponentCallback(),this._umountComponentCallback=void 0}mountComponent(t,o,n){return this.resolvedPlugin.mountComponent({el:t,Component:o,props:n})}resolveMounted(t){return this.application.turboMount.resolve(t)}setComponentProps(t){this.skipPropsChangeCallback=!0,this.propsValue=t}}n.values={props:Object,component:String},n.targets=["mount"];const e=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();class r{constructor(t={}){this.components=new Map,this.application=this.findOrStartApplication(t.application),this.application.turboMount=this,this.application.register("turbo-mount",n),document.addEventListener("turbo:before-morph-element",(t=>{var o;const n=t,{target:e,detail:r}=n;(null===(o=e.getAttribute("data-controller"))||void 0===o?void 0:o.includes("turbo-mount"))&&(e.setAttribute("data-turbo-mount-props-value",r.newElement.getAttribute("data-turbo-mount-props-value")||"{}"),t.preventDefault())}))}register(t,o,r,s){if(s||(s=n),this.components.has(o))throw new Error(`Component '${o}' is already registered.`);if(this.components.set(o,{component:r,plugin:t}),s){const t=`turbo-mount-${e(o)}`;this.application.register(t,s)}}resolve(t){const o=this.components.get(t);if(!o)throw new Error(`Unknown component: ${t}`);return o}findOrStartApplication(t){let n=t||window.Stimulus;return n||(n=o.start(),window.Stimulus=n),n}}function s(t){return(o,n,e,r)=>{o.register(t,n,e,r)}}const i=t=>{const o=e(t);return[`turbo-mount--${o}`,`turbo-mount-${o}`]},u=({plugin:t,turboMount:o,components:n,controllers:e})=>{var r;const s=null!=e?e:[];for(const{module:e,filename:u}of n){const n=u.replace(/\.\w*$/,"").replace(/^[./]*components\//,""),l=i(n),p=s.find((({identifier:t})=>l.includes(t))),a=null!==(r=e.default)&&void 0!==r?r:e;p?o.register(t,n,a,p.controllerConstructor):o.register(t,n,a)}};export{r as TurboMount,n as TurboMountController,s as buildRegisterFunction,u as registerComponentsBase};
+import{Controller as t,Application as o}from"@hotwired/stimulus";class n extends t{constructor(){super(...arguments),this.skipPropsChangeCallback=!1}connect(){this._umountComponentCallback||(this._umountComponentCallback=this.mountComponent(this.mountElement,this.resolvedComponent,this.componentProps))}disconnect(){this.umountComponent()}propsValueChanged(){this.skipPropsChangeCallback?this.skipPropsChangeCallback=!1:(this.umountComponent(),this._umountComponentCallback||(this._umountComponentCallback=this.mountComponent(this.mountElement,this.resolvedComponent,this.componentProps)))}get componentProps(){return this.propsValue}get mountElement(){return this.hasMountTarget?this.mountTarget:this.element}get resolvedComponent(){return this.resolveMounted(this.componentValue).component}get resolvedPlugin(){return this.resolveMounted(this.componentValue).plugin}umountComponent(){this._umountComponentCallback&&this._umountComponentCallback(),this._umountComponentCallback=void 0}mountComponent(t,o,n){return this.resolvedPlugin.mountComponent({el:t,Component:o,props:n})}resolveMounted(t){return this.application.turboMount.resolve(t)}setComponentProps(t){this.skipPropsChangeCallback=!0,this.propsValue=t}}n.values={props:Object,component:String},n.targets=["mount"];const e=t=>t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();class r{constructor(t={}){this.components=new Map,this.application=this.findOrStartApplication(t.application),this.application.turboMount=this,this.application.register("turbo-mount",n),document.addEventListener("turbo:before-morph-element",(t=>{const o=t,{target:n,detail:e}=o;n.getAttribute("data-controller")?.includes("turbo-mount")&&(n.setAttribute("data-turbo-mount-props-value",e.newElement.getAttribute("data-turbo-mount-props-value")||"{}"),t.preventDefault())}))}register(t,o,r,s){if(s||(s=n),this.components.has(o))throw new Error(`Component '${o}' is already registered.`);if(this.components.set(o,{component:r,plugin:t}),s){const t=`turbo-mount-${e(o).replace("/","--")}`;this.application.register(t,s)}}resolve(t){const o=this.components.get(t);if(!o)throw new Error(`Unknown component: ${t}`);return o}findOrStartApplication(t){let n=t||window.Stimulus;return n||(n=o.start(),window.Stimulus=n),n}}function s(t){return(o,n,e,r)=>{o.register(t,n,e,r)}}const i=t=>{const o=e(t).replace("/","--");return[`turbo-mount--${o}`,`turbo-mount-${o}`]},u=({plugin:t,turboMount:o,components:n,controllers:e})=>{const r=e??[];for(const{module:e,filename:s}of n){const n=s.replace(/\.\w*$/,"").replace(/^[./]*components\//,""),u=i(n),p=r.find((({identifier:t})=>u.includes(t))),l=e.default??e;p?o.register(t,n,l,p.controllerConstructor):o.register(t,n,l)}};export{r as TurboMount,n as TurboMountController,s as buildRegisterFunction,u as registerComponentsBase};
 //# sourceMappingURL=turbo-mount.min.js.map

data/app/assets/javascripts/turbo-mount.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"turbo-mount.min.js","sources":["../src/turbo-mount-controller.ts","../src/helpers.ts","../src/turbo-mount.ts","../src/registerComponentsBase.ts"],"sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\nimport { ApplicationWithTurboMount } from \"./turbo-mount\";\n\nexport class TurboMountController extends Controller {\n  static values = {\n    props: Object,\n    component: String,\n  };\n  static targets = [\"mount\"];\n\n  private skipPropsChangeCallback = false;\n\n  declare propsValue: object;\n  declare componentValue: string;\n  declare readonly hasMountTarget: boolean;\n  declare readonly mountTarget: Element;\n\n  _umountComponentCallback?: () => void;\n\n  connect() {\n    this._umountComponentCallback ||= this.mountComponent(\n      this.mountElement,\n      this.resolvedComponent,\n      this.componentProps,\n    );\n  }\n\n  disconnect() {\n    this.umountComponent();\n  }\n\n  propsValueChanged() {\n    // Prevent re-mounting the component if the props are being set by the component itself\n    if (this.skipPropsChangeCallback) {\n      this.skipPropsChangeCallback = false;\n      return;\n    }\n\n    this.umountComponent();\n    this._umountComponentCallback ||= this.mountComponent(\n      this.mountElement,\n      this.resolvedComponent,\n      this.componentProps,\n    );\n  }\n\n  get componentProps() {\n    return this.propsValue;\n  }\n\n  get mountElement() {\n    return this.hasMountTarget ? this.mountTarget : this.element;\n  }\n\n  get resolvedComponent() {\n    return this.resolveMounted(this.componentValue).component;\n  }\n\n  get resolvedPlugin() {\n    return this.resolveMounted(this.componentValue).plugin;\n  }\n\n  umountComponent() {\n    this._umountComponentCallback && this._umountComponentCallback();\n    this._umountComponentCallback = undefined;\n  }\n\n  mountComponent(el: Element, Component: unknown, props: object) {\n    return this.resolvedPlugin.mountComponent({ el, Component, props });\n  }\n\n  resolveMounted(component: string) {\n    const app = this.application as ApplicationWithTurboMount;\n    return app.turboMount.resolve(component);\n  }\n\n  setComponentProps(props: object) {\n    this.skipPropsChangeCallback = true;\n    this.propsValue = props;\n  }\n}\n","export const camelToKebabCase = (str: string) => {\n  return str.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n};\n","import { Application, ControllerConstructor } from \"@hotwired/stimulus\";\n\nimport { camelToKebabCase } from \"./helpers\";\nimport { TurboMountController } from \"./turbo-mount-controller\";\n\ndeclare global {\n  interface Window {\n    Stimulus?: Application;\n  }\n}\n\nexport interface ApplicationWithTurboMount extends Application {\n  turboMount: TurboMount;\n}\n\nexport type MountComponentProps<T> = {\n  el: Element;\n  Component: T;\n  props: object;\n};\n\nexport type Plugin<T> = {\n  mountComponent: (props: MountComponentProps<T>) => () => void;\n};\n\nexport type TurboMountProps = {\n  application?: Application;\n};\n\ntype TurboMountComponents<T> = Map<string, { component: T; plugin: Plugin<T> }>;\n\ninterface TurboMorphEvent extends CustomEvent {\n  target: Element;\n  detail: {\n    newElement: Element;\n  };\n}\n\nexport class TurboMount {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  components: TurboMountComponents<any>;\n  application: ApplicationWithTurboMount;\n\n  constructor(props: TurboMountProps = {}) {\n    this.components = new Map();\n    this.application = this.findOrStartApplication(props.application);\n    this.application.turboMount = this;\n    this.application.register(\"turbo-mount\", TurboMountController);\n\n    document.addEventListener(\"turbo:before-morph-element\", (event) => {\n      const turboMorphEvent = event as unknown as TurboMorphEvent;\n      const { target, detail } = turboMorphEvent;\n\n      if (target.getAttribute(\"data-controller\")?.includes(\"turbo-mount\")) {\n        target.setAttribute(\n          \"data-turbo-mount-props-value\",\n          detail.newElement.getAttribute(\"data-turbo-mount-props-value\") ||\n            \"{}\",\n        );\n        event.preventDefault();\n      }\n    });\n  }\n\n  register<T>(\n    plugin: Plugin<T>,\n    name: string,\n    component: T,\n    controller?: ControllerConstructor,\n  ) {\n    controller ||= TurboMountController;\n    if (this.components.has(name)) {\n      throw new Error(`Component '${name}' is already registered.`);\n    }\n    this.components.set(name, { component, plugin });\n\n    if (controller) {\n      const controllerName = `turbo-mount-${camelToKebabCase(name)}`;\n      this.application.register(controllerName, controller);\n    }\n  }\n\n  resolve(name: string) {\n    const component = this.components.get(name);\n    if (!component) {\n      throw new Error(`Unknown component: ${name}`);\n    }\n    return component;\n  }\n\n  private findOrStartApplication(hydratedApp?: Application) {\n    let application = hydratedApp || window.Stimulus;\n\n    if (!application) {\n      application = Application.start();\n      window.Stimulus = application;\n    }\n    return application as ApplicationWithTurboMount;\n  }\n}\n\nexport function buildRegisterFunction<T>(plugin: Plugin<T>) {\n  return (\n    turboMount: TurboMount,\n    name: string,\n    component: T,\n    controller?: ControllerConstructor,\n  ) => {\n    turboMount.register(plugin, name, component, controller);\n  };\n}\n","import { Definition } from \"@hotwired/stimulus\";\n\nimport { TurboMount, Plugin } from \"./turbo-mount\";\nimport { camelToKebabCase } from \"./helpers\";\n\nexport type ComponentModule = { default: never } | never;\n\nexport type ComponentDefinition = {\n  filename: string;\n  module: ComponentModule;\n};\n\ntype RegisterComponentsProps<T> = {\n  plugin: Plugin<T>;\n  turboMount: TurboMount;\n  components: ComponentDefinition[];\n  controllers?: Definition[];\n};\n\nconst identifierNames = (name: string) => {\n  const controllerName = camelToKebabCase(name);\n\n  return [`turbo-mount--${controllerName}`, `turbo-mount-${controllerName}`];\n};\n\nexport const registerComponentsBase = <T>({\n  plugin,\n  turboMount,\n  components,\n  controllers,\n}: RegisterComponentsProps<T>) => {\n  const controllerModules = controllers ?? [];\n\n  for (const { module, filename } of components) {\n    const name = filename\n      .replace(/\\.\\w*$/, \"\")\n      .replace(/^[./]*components\\//, \"\");\n\n    const identifiers = identifierNames(name);\n\n    const controller = controllerModules.find(({ identifier }) =>\n      identifiers.includes(identifier),\n    );\n    const component = module.default ?? module;\n\n    if (controller) {\n      turboMount.register(\n        plugin,\n        name,\n        component,\n        controller.controllerConstructor,\n      );\n    } else {\n      turboMount.register(plugin, name, component);\n    }\n  }\n};\n"],"names":["TurboMountController","Controller","constructor","this","skipPropsChangeCallback","connect","_umountComponentCallback","mountComponent","mountElement","resolvedComponent","componentProps","disconnect","umountComponent","propsValueChanged","propsValue","hasMountTarget","mountTarget","element","resolveMounted","componentValue","component","resolvedPlugin","plugin","undefined","el","Component","props","application","turboMount","resolve","setComponentProps","values","Object","String","targets","camelToKebabCase","str","replace","toLowerCase","TurboMount","components","Map","findOrStartApplication","register","document","addEventListener","event","turboMorphEvent","target","detail","_a","getAttribute","includes","setAttribute","newElement","preventDefault","name","controller","has","Error","set","controllerName","get","hydratedApp","window","Stimulus","Application","start","buildRegisterFunction","identifierNames","registerComponentsBase","controllers","controllerModules","module","filename","identifiers","find","identifier","default","controllerConstructor"],"mappings":"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"}
+{"version":3,"file":"turbo-mount.min.js","sources":["../src/turbo-mount-controller.ts","../src/helpers.ts","../src/turbo-mount.ts","../src/registerComponentsBase.ts"],"sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\nimport { ApplicationWithTurboMount } from \"./turbo-mount\";\n\nexport class TurboMountController extends Controller {\n  static values = {\n    props: Object,\n    component: String,\n  };\n  static targets = [\"mount\"];\n\n  private skipPropsChangeCallback = false;\n\n  declare propsValue: object;\n  declare componentValue: string;\n  declare readonly hasMountTarget: boolean;\n  declare readonly mountTarget: Element;\n\n  _umountComponentCallback?: () => void;\n\n  connect() {\n    this._umountComponentCallback ||= this.mountComponent(\n      this.mountElement,\n      this.resolvedComponent,\n      this.componentProps,\n    );\n  }\n\n  disconnect() {\n    this.umountComponent();\n  }\n\n  propsValueChanged() {\n    // Prevent re-mounting the component if the props are being set by the component itself\n    if (this.skipPropsChangeCallback) {\n      this.skipPropsChangeCallback = false;\n      return;\n    }\n\n    this.umountComponent();\n    this._umountComponentCallback ||= this.mountComponent(\n      this.mountElement,\n      this.resolvedComponent,\n      this.componentProps,\n    );\n  }\n\n  get componentProps() {\n    return this.propsValue;\n  }\n\n  get mountElement() {\n    return this.hasMountTarget ? this.mountTarget : this.element;\n  }\n\n  get resolvedComponent() {\n    return this.resolveMounted(this.componentValue).component;\n  }\n\n  get resolvedPlugin() {\n    return this.resolveMounted(this.componentValue).plugin;\n  }\n\n  umountComponent() {\n    this._umountComponentCallback && this._umountComponentCallback();\n    this._umountComponentCallback = undefined;\n  }\n\n  mountComponent(el: Element, Component: unknown, props: object) {\n    return this.resolvedPlugin.mountComponent({ el, Component, props });\n  }\n\n  resolveMounted(component: string) {\n    const app = this.application as ApplicationWithTurboMount;\n    return app.turboMount.resolve(component);\n  }\n\n  setComponentProps(props: object) {\n    this.skipPropsChangeCallback = true;\n    this.propsValue = props;\n  }\n}\n","export const camelToKebabCase = (str: string) => {\n  return str.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n};\n","import { Application, ControllerConstructor } from \"@hotwired/stimulus\";\n\nimport { camelToKebabCase } from \"./helpers\";\nimport { TurboMountController } from \"./turbo-mount-controller\";\n\ndeclare global {\n  interface Window {\n    Stimulus?: Application;\n  }\n}\n\nexport interface ApplicationWithTurboMount extends Application {\n  turboMount: TurboMount;\n}\n\nexport type MountComponentProps<T> = {\n  el: Element;\n  Component: T;\n  props: object;\n};\n\nexport type Plugin<T> = {\n  mountComponent: (props: MountComponentProps<T>) => () => void;\n};\n\nexport type TurboMountProps = {\n  application?: Application;\n};\n\ntype TurboMountComponents<T> = Map<string, { component: T; plugin: Plugin<T> }>;\n\ninterface TurboMorphEvent extends CustomEvent {\n  target: Element;\n  detail: {\n    newElement: Element;\n  };\n}\n\nexport class TurboMount {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  components: TurboMountComponents<any>;\n  application: ApplicationWithTurboMount;\n\n  constructor(props: TurboMountProps = {}) {\n    this.components = new Map();\n    this.application = this.findOrStartApplication(props.application);\n    this.application.turboMount = this;\n    this.application.register(\"turbo-mount\", TurboMountController);\n\n    document.addEventListener(\"turbo:before-morph-element\", (event) => {\n      const turboMorphEvent = event as unknown as TurboMorphEvent;\n      const { target, detail } = turboMorphEvent;\n\n      if (target.getAttribute(\"data-controller\")?.includes(\"turbo-mount\")) {\n        target.setAttribute(\n          \"data-turbo-mount-props-value\",\n          detail.newElement.getAttribute(\"data-turbo-mount-props-value\") ||\n            \"{}\",\n        );\n        event.preventDefault();\n      }\n    });\n  }\n\n  register<T>(\n    plugin: Plugin<T>,\n    name: string,\n    component: T,\n    controller?: ControllerConstructor,\n  ) {\n    controller ||= TurboMountController;\n    if (this.components.has(name)) {\n      throw new Error(`Component '${name}' is already registered.`);\n    }\n    this.components.set(name, { component, plugin });\n\n    if (controller) {\n      const controllerName = `turbo-mount-${camelToKebabCase(name).replace(\"/\", \"--\")}`;\n      this.application.register(controllerName, controller);\n    }\n  }\n\n  resolve(name: string) {\n    const component = this.components.get(name);\n    if (!component) {\n      throw new Error(`Unknown component: ${name}`);\n    }\n    return component;\n  }\n\n  private findOrStartApplication(hydratedApp?: Application) {\n    let application = hydratedApp || window.Stimulus;\n\n    if (!application) {\n      application = Application.start();\n      window.Stimulus = application;\n    }\n    return application as ApplicationWithTurboMount;\n  }\n}\n\nexport function buildRegisterFunction<T>(plugin: Plugin<T>) {\n  return (\n    turboMount: TurboMount,\n    name: string,\n    component: T,\n    controller?: ControllerConstructor,\n  ) => {\n    turboMount.register(plugin, name, component, controller);\n  };\n}\n","import { Definition } from \"@hotwired/stimulus\";\n\nimport { TurboMount, Plugin } from \"./turbo-mount\";\nimport { camelToKebabCase } from \"./helpers\";\n\nexport type ComponentModule = { default: never } | never;\n\nexport type ComponentDefinition = {\n  filename: string;\n  module: ComponentModule;\n};\n\ntype RegisterComponentsProps<T> = {\n  plugin: Plugin<T>;\n  turboMount: TurboMount;\n  components: ComponentDefinition[];\n  controllers?: Definition[];\n};\n\nconst identifierNames = (name: string) => {\n  const controllerName = camelToKebabCase(name).replace(\"/\", \"--\");\n\n  return [`turbo-mount--${controllerName}`, `turbo-mount-${controllerName}`];\n};\n\nexport const registerComponentsBase = <T>({\n  plugin,\n  turboMount,\n  components,\n  controllers,\n}: RegisterComponentsProps<T>) => {\n  const controllerModules = controllers ?? [];\n\n  for (const { module, filename } of components) {\n    const name = filename\n      .replace(/\\.\\w*$/, \"\")\n      .replace(/^[./]*components\\//, \"\");\n\n    const identifiers = identifierNames(name);\n\n    const controller = controllerModules.find(({ identifier }) =>\n      identifiers.includes(identifier),\n    );\n    const component = module.default ?? module;\n\n    if (controller) {\n      turboMount.register(\n        plugin,\n        name,\n        component,\n        controller.controllerConstructor,\n      );\n    } else {\n      turboMount.register(plugin, name, component);\n    }\n  }\n};\n"],"names":["TurboMountController","Controller","constructor","this","skipPropsChangeCallback","connect","_umountComponentCallback","mountComponent","mountElement","resolvedComponent","componentProps","disconnect","umountComponent","propsValueChanged","propsValue","hasMountTarget","mountTarget","element","resolveMounted","componentValue","component","resolvedPlugin","plugin","undefined","el","Component","props","application","turboMount","resolve","setComponentProps","values","Object","String","targets","camelToKebabCase","str","replace","toLowerCase","TurboMount","components","Map","findOrStartApplication","register","document","addEventListener","event","turboMorphEvent","target","detail","getAttribute","includes","setAttribute","newElement","preventDefault","name","controller","has","Error","set","controllerName","get","hydratedApp","window","Stimulus","Application","start","buildRegisterFunction","identifierNames","registerComponentsBase","controllers","controllerModules","module","filename","identifiers","find","identifier","default","controllerConstructor"],"mappings":"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"}

data/lib/generators/turbo_mount/frameworks.yml

@@ -0,0 +1,23 @@
+react:
+  pins: "react react-dom react-dom/client"
+  npm_packages: "react react-dom"
+  vite_plugin: "@vitejs/plugin-react"
+  extension: "jsx"
+
+vue:
+  pins: "vue"
+  npm_packages: "vue"
+  vite_plugin: "@vitejs/plugin-vue"
+  extension: "vue"
+
+svelte4:
+  pins: "svelte"
+  npm_packages: "svelte@4"
+  vite_plugin: "@sveltejs/vite-plugin-svelte"
+  extension: "svelte"
+
+svelte:
+  pins: "svelte"
+  npm_packages: "svelte@5"
+  vite_plugin: "@sveltejs/vite-plugin-svelte"
+  extension: "svelte"

data/lib/generators/turbo_mount/helpers.rb

@@ -0,0 +1,61 @@
+module TurboMount
+  module Generators
+    module Helpers
+      ### FS Helpers
+      def js_destination_path
+        return ViteRuby.config.source_code_dir if defined?(ViteRuby)
+
+        if file?("config/vite.json")
+          source_code_dir = JSON.parse(File.read(file_path("config/vite.json"))).dig("all", "sourceCodeDir")
+          return source_code_dir || "app/frontend"
+        end
+
+        "app/javascript"
+      end
+
+      def js_destination_root
+        file_path(js_destination_path)
+      end
+
+      def js_entrypoint
+        if vite?
+          js_file_path "entrypoints/application.js"
+        else
+          js_file_path "application.js"
+        end
+      end
+
+      def js_file_path(*relative_path)
+        File.join(js_destination_root, *relative_path)
+      end
+
+      def file?(*relative_path)
+        File.file?(file_path(*relative_path))
+      end
+
+      def file_path(*relative_path)
+        File.join(destination_root, *relative_path)
+      end
+
+      def vite?
+        file?("config/vite.json") && Dir.glob(file_path("vite.config.*")).any?
+      end
+
+      # Interactivity Helpers
+      def ask(*)
+        unless options[:interactive]
+          say_error "Specify all options when running the generator non-interactively.", :red
+          exit(1)
+        end
+
+        super
+      end
+
+      def yes?(*)
+        return false unless options[:interactive]
+
+        super
+      end
+    end
+  end
+end

data/lib/generators/turbo_mount/install/turbo-mount.js.tt

@@ -13,6 +13,6 @@ const turboMount = new TurboMount();
 // If you want to automatically register components use:
 // import { registerComponents } from "turbo-mount/registerComponents/<%= framework %>";
 // const controllers = import.meta.glob("/controllers/**/*_controller.js", { eager: true });
-// const components = import.meta.glob("/components/**/*.jsx", { eager: true });
+// const components = import.meta.glob("/components/**/*.<%= extension %>", { eager: true });
 // registerComponents({ turboMount, components, controllers });
 <%- end -%>

data/lib/generators/turbo_mount/install_generator.rb

@@ -1,37 +1,39 @@
 # frozen_string_literal: true
 
+require "yaml"
+require "rails/generators"
+require "rails/generators/base"
+
+require_relative "helpers"
+require_relative "js_package_manager"
+
 module TurboMount
   module Generators
     class InstallGenerator < Rails::Generators::Base
-      FRAMEWORKS = {
-        "react" => {
-          pins: "react react-dom react-dom/client",
-          npm_packages: "react react-dom",
-          vite_plugin: "@vitejs/plugin-react"
-        },
-        "vue" => {
-          pins: "vue",
-          npm_packages: "vue",
-          vite_plugin: "@vitejs/plugin-vue"
-        },
-        "svelte" => {
-          pins: "svelte",
-          npm_packages: "svelte",
-          vite_plugin: "@sveltejs/vite-plugin-svelte"
-        }
-      }.freeze
+      include Helpers
+
+      FRAMEWORKS = YAML.load_file(File.expand_path("./frameworks.yml", __dir__))
 
       source_root File.expand_path("install", __dir__)
 
+      class_option :framework, type: :string,
+        desc: "The framework you want to use with Turbo Mount",
+        enum: FRAMEWORKS.keys,
+        default: nil
+
+      class_option :package_manager, type: :string, default: nil,
+        enum: JSPackageManager.package_managers,
+        desc: "The package manager you want to use to install Turbo Mount"
+
+      class_option :verbose, type: :boolean, default: false,
+        desc: "Run the generator in verbose mode"
+
       def install
         say "Installing Turbo Mount"
 
-        if build_tool.nil?
-          say "Could not find a package.json or config/importmap.rb file to add the turbo-mount dependency to, please add it manually.", :red
-          exit!
-        end
+        package_manager.validate!
 
-        if importmap?
+        if package_manager.importmap?
           install_importmap
         else
           install_nodejs
@@ -43,17 +45,10 @@ module TurboMount
       private
 
       def install_nodejs
-        case build_tool
-        when "npm"
-          run "npm install turbo-mount #{FRAMEWORKS[framework][:npm_packages]}"
-        when "yarn"
-          run "yarn add turbo-mount #{FRAMEWORKS[framework][:npm_packages]}"
-        when "bun"
-          run "bun add turbo-mount #{FRAMEWORKS[framework][:npm_packages]}"
-        end
+        package_manager.add_dependencies("turbo-mount", FRAMEWORKS[framework][:npm_packages])
 
         say "Creating Turbo Mount initializer"
-        template "turbo-mount.js", File.join("app/javascript/turbo-mount.js")
+        template "turbo-mount.js", js_file_path("turbo-mount.js")
         begin
           append_to_file js_entrypoint, %(import "./turbo-mount"\n)
         rescue
@@ -64,7 +59,7 @@ module TurboMount
 
       def install_importmap
         say "Creating Turbo Mount initializer"
-        template "turbo-mount.js", File.join("app/javascript/turbo-mount-initializer.js")
+        template "turbo-mount.js", js_file_path("turbo-mount-initializer.js")
         append_to_file "app/javascript/application.js", %(import "turbo-mount-initializer"\n)
 
         say "Pinning Turbo Mount to the importmap"
@@ -73,51 +68,23 @@ module TurboMount
         append_to_file "config/importmap.rb", %(pin "turbo-mount-initializer"\n)
 
         say "Pinning framework dependencies to the importmap"
-        run "bin/importmap pin #{FRAMEWORKS[framework][:pins]}"
-      end
-
-      def js_entrypoint
-        if vite?
-          "app/javascript/entrypoints/application.js"
-        else
-          "app/javascript/application.js"
-        end
-      end
-
-      def vite?
-        Dir.glob(Rails.root.join("vite.config.*")).any?
-      end
-
-      def importmap?
-        build_tool == "importmap"
+        package_manager.add_dependencies(FRAMEWORKS[framework][:pins])
       end
 
       def warn_about_vite_plugin
         say "Make sure to install and add #{FRAMEWORKS[framework][:vite_plugin]} to your Vite config", :yellow
       end
 
-      def build_tool
-        return @build_tool if defined?(@build_tool)
-
-        @build_tool = detect_build_tool
+      def package_manager
+        @package_manager ||= JSPackageManager.new(self)
       end
 
-      def detect_build_tool
-        if Rails.root.join("package.json").exist?
-          if Rails.root.join("package-lock.json").exist?
-            "npm"
-          elsif Rails.root.join("bun.config.js").exist?
-            "bun"
-          else
-            "yarn"
-          end
-        elsif Rails.root.join("config/importmap.rb").exist?
-          "importmap"
-        end
+      def extension
+        FRAMEWORKS[framework][:extension]
       end
 
       def framework
-        @framework ||= ask("What framework do you want to use with Turbo Mount?", limited_to: FRAMEWORKS.keys, default: "react")
+        @framework ||= options[:framework] || ask("What framework do you want to use with Turbo Mount?", :green, limited_to: FRAMEWORKS.keys, default: "react")
       end
     end
   end

data/lib/generators/turbo_mount/js_package_manager.rb

@@ -0,0 +1,57 @@
+module TurboMount
+  module Generators
+    class JSPackageManager
+      def self.package_managers
+        %w[npm yarn bun pnpm importmap]
+      end
+
+      def initialize(generator)
+        @generator = generator
+        @package_manager = generator.options[:package_manager] || detect_package_manager
+      end
+
+      def validate!
+        return if @package_manager.present?
+
+        @generator.say "Could not find a package.json or config/importmap.rb file to add the turbo-mount dependency to, please add it manually.", :red
+        exit(1)
+      end
+
+      def importmap?
+        @package_manager == "importmap"
+      end
+
+      def add_dependencies(*dependencies)
+        cmd =
+          if importmap?
+            "bin/importmap pin #{dependencies.join(" ")}"
+          else
+            "#{@package_manager} add #{dependencies.join(" ")}#{@generator.options[:verbose] ? "" : " --silent"}"
+          end
+        @generator.in_root { @generator.run cmd }
+      end
+
+      private
+
+      def detect_package_manager
+        if file?("package.json")
+          if file?("package-lock.json")
+            "npm"
+          elsif file?("pnpm-lock.yaml")
+            "pnpm"
+          elsif file?("bun.lockb")
+            "bun"
+          else
+            "yarn"
+          end
+        elsif file?("config/importmap.rb")
+          "importmap"
+        end
+      end
+
+      def file?(*relative_path)
+        @generator.file?(*relative_path)
+      end
+    end
+  end
+end

data/lib/turbo/mount/helpers.rb

@@ -6,7 +6,7 @@ module Turbo
       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

data/lib/turbo/mount/version.rb

@@ -2,6 +2,6 @@
 
 module Turbo
   module Mount
-    VERSION = "0.3.2"
+    VERSION = "0.4.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo-mount
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.4.0
 platform: ruby
 authors:
 - Svyatoslav Kryukov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-24 00:00:00.000000000 Z
+date: 2024-11-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -44,11 +44,17 @@ files:
 - app/assets/javascripts/turbo-mount/svelte.js
 - app/assets/javascripts/turbo-mount/svelte.min.js
 - app/assets/javascripts/turbo-mount/svelte.min.js.map
+- app/assets/javascripts/turbo-mount/svelte4.js
+- app/assets/javascripts/turbo-mount/svelte4.min.js
+- app/assets/javascripts/turbo-mount/svelte4.min.js.map
 - app/assets/javascripts/turbo-mount/vue.js
 - app/assets/javascripts/turbo-mount/vue.min.js
 - app/assets/javascripts/turbo-mount/vue.min.js.map
+- lib/generators/turbo_mount/frameworks.yml
+- lib/generators/turbo_mount/helpers.rb
 - lib/generators/turbo_mount/install/turbo-mount.js.tt
 - lib/generators/turbo_mount/install_generator.rb
+- lib/generators/turbo_mount/js_package_manager.rb
 - lib/turbo/mount.rb
 - lib/turbo/mount/engine.rb
 - lib/turbo/mount/helpers.rb
@@ -78,7 +84,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.7
+rubygems_version: 3.5.17
 signing_key:
 specification_version: 4
 summary: Use React, Vue, Svelte, and other components with Hotwire.