turbo-mount 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a4e82785211d3df4bf66f934af1bdc026e9f7a9b0f3074749eda539fedca318b
-  data.tar.gz: 93f5c90a4e336851ded6f763fb5636b4423323594ce4db06a610761e8e30efd5
+  metadata.gz: 3565dc0d8e80907e11600573cfb18049fe5360c9551facefb9a22d871bebad2e
+  data.tar.gz: 2e82006304c22c3b663511abbefaee3a0fc8e96aa972b044e1fca640cfd9c262
 SHA512:
-  metadata.gz: 2eba5a80216047b8a5d1f20b938f1eb5b49ca34646dfb555e4563e053bde2029e62ad10fc88880b2256ee1dcabc0d77b66270740130c45d17d19e065200778f4
-  data.tar.gz: 82a3843e93c3b9c405344fd85145985ad4e2bf7cdf48bad43526fd264a004bb87c67ea79213066bf7b9c74ec25dc161dcc24123eb8828e590ffff95d1ba9fc48
+  metadata.gz: 2490534f21cf102b00c00524457be4b6b6f3d048e2d0477ad20bdbf2818704d5b39580bc9f71d5f33de6f39fcdd97faa20e0c0cc05a3c338225091e1096fa428
+  data.tar.gz: 6154769b9a73b2bf3e65e0c6a395a154109466d698f79dc5483378ed7f68cce060c41183725f240fff942a3cf09e03ac909b2f0d0f0da70a574a6712e28e1251

data/CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning].
 
 ## [Unreleased]
 
+## [0.3.0] - 2024-05-31
+
+### Added
+
+- Installation script. ([@skryukov])
+
+### Changed
+
+- [BREAKING] New API without controller inheritance. ([@skryukov])
+  To migrate to the new API:
+  - Replace `new TurboMountReact()` (or any other framework specific constructor) with `new TurboMount()`
+  - Replace `turboMount.register(...)` with `registerComponent(turboMount, ...)`
+  - Replace `turbo_mount_react_component` (or any other framework specific helper) with `turbo_mount`
+  - Also see the new API for plugins and custom controllers in the README.
+
+## [0.2.3] - 2024-05-12
+
+### Added
+
+- Add a mount target to the base controller. ([@skryukov])
+- Add `registerComponents` helper for vite. ([@skryukov])
+- Allow to omit the `application` property in the constructor. ([@skryukov])
+  `TurboMount` will try to find the application in the `window.Stimulus` and will initialize new one if not found.
+
 ## [0.2.2] - 2024-05-09
 
 ### Fixed
@@ -27,9 +51,11 @@ and this project adheres to [Semantic Versioning].
 
 [@skryukov]: https://github.com/skryukov
 
-[Unreleased]: https://github.com/skryukov/turbo-mount/compare/v0.2.2...HEAD
-[0.2.2]: https://github.com/skryukov/turbo-mount/commits/v0.2.2
-[0.2.0]: https://github.com/skryukov/turbo-mount/commits/v0.2.0
+[Unreleased]: https://github.com/skryukov/turbo-mount/compare/v0.3.0...HEAD
+[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
+[0.2.2]: https://github.com/skryukov/turbo-mount/compare/v0.2.0...v0.2.2
+[0.2.0]: https://github.com/skryukov/turbo-mount/compare/v0.1.0...v0.2.0
 [0.1.0]: https://github.com/skryukov/turbo-mount/commits/v0.1.0
 
 [Keep a Changelog]: https://keepachangelog.com/en/1.0.0/

data/README.md

@@ -1,57 +1,143 @@
-# Turbo::Mount
+# Turbo Mount
 
 [![Gem Version](https://badge.fury.io/rb/turbo-mount.svg)](https://rubygems.org/gems/turbo-mount)
 
-`Turbo::Mount` is a simple gem that allows you to add highly interactive components from React, Vue, Svelte, and other frameworks 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.
+
+## Table of Contents
+- [Installation](#installation)
+  - [Importmaps](#importmaps)
+- [Usage](#usage)
+  - [Initialization](#initialization)
+    - [Standard Initialization](#standard-initialization)
+    - [Simplified Initialization](#simplified-initialization)
+    - [Plugin-Specific Initialization](#plugin-specific-initialization)
+  - [View Helpers](#view-helpers)
+  - [Supported Frameworks](#supported-frameworks)
+  - [Custom Controllers](#custom-controllers)
+  - [Vite Integration](#vite-integration)
+  - [Mount Target](#mount-target)
+- [License](#license)
+
+<a href="https://evilmartians.com/?utm_source=turbo-mount&utm_campaign=project_page">
+<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Built by Evil Martians" width="236" height="54">
+</a>
 
 ## Installation
 
-Install the gem and add to the application's Gemfile by executing:
+To install Turbo Mount, add the following line to your `Gemfile` and run `bundle install`:
 
-    $ bundle add turbo-mount
+```ruby
+gem "turbo-mount"
+```
+
+### Automatic Installation
+
+Run the following command to install the necessary files:
+
+```bash
+bin/rails generate turbo_mount:install
+```
+
+This will add `turbo-mount` package and framework dependencies to your `package.json` or `importmap.rb`, and create the Turbo Mount initialization file.
+
+### Manual Installation
+
+You can also install the necessary JavaScript files manually.
+
+If your project utilizes build tools such as [Vite](http://vite-ruby.netlify.app), also install the `turbo-mount` package:
+
+```bash
+npm install turbo-mount
+# or with yarn
+yarn add turbo-mount
 
-If bundler is not being used to manage dependencies, install the gem by executing:
+# and the desired framework
+npm install react react-dom
+# or
+npm install vue
+# or
+npm install svelte
+```
+
+If you're using Vite, don't forget to add [framework-specific plugins](https://vitejs.dev/plugins) to your `vite.config.js`.
+
+### Importmaps
+To use `TurboMount` with importmaps, you need to pin the necessary JavaScript files in your `config/importmap.rb`:
+
+```ruby
+pin "turbo-mount", to: "turbo-mount.min.js"
+pin "turbo-mount/react", to: "turbo-mount/react.min.js"
+```
+
+This ensures that `turbo-mount` and its plugins are available in your application.
+
+Also pin the desired framework:
+
+```bash
+bin/importmap pin react react-dom react-dom/client
+# or
+bin/importmap pin vue
+# or
+bin/importmap pin svelte
+```
 
-    $ gem install turbo-mount
+Note: Importmap-only mode is quite limited in terms of JavaScript dependencies. If you're using a more complex setup, consider using a bundler like Vite.
 
 ## Usage
 
-First, you need to initialize `TurboMount` and register the components you want to use:
+### Initialization
+
+To begin using `TurboMount`, start by initializing the library and registering the components you intend to use. Here's how to set it up with a React plugin:
 
 ```js
-import { Application } from "@hotwired/stimulus"
+import { TurboMount } from "turbo-mount";
+import { registerComponent } from "turbo-mount/react";
+import { HexColorPicker } from 'react-colorful';
 
-const application = Application.start()
+const turboMount = new TurboMount(); // or new TurboMount({ application })
 
-import { TurboMount } from "turbo-mount"
-import plugin from "turbo-mount/react"
+registerComponent(turboMount, "HexColorPicker", HexColorPicker);
+```
 
-// Initialize TurboMount and register the react stimulus controller
-const turboMount = new TurboMount({application, plugin});
+If you prefer not to specify the `application` explicitly, `TurboMount` can automatically detect or initialize it. Turbo Mount uses the `window.Stimulus` if available; otherwise, it initializes a new Stimulus application.
 
-// Register the components you want to use
-import { SketchPicker } from 'react-color'
-turboMount.register('SketchPicker', SketchPicker);
-```
+### View Helpers
 
-Now you can use view helpers to mount the components:
+Use the following helpers to mount components in your views:
 
 ```erb
-<%= turbo_mount_component("SketchPicker", framework: "react", props: {color: "#034"}) %>
+<%= turbo_mount("HexColorPicker", props: {color: "#034"}, class: "mb-5") %>
+```
 
-<%# or using alias %>
+This will generate the following HTML:
 
-<%= turbo_mount_react_component("SketchPicker", props: {color: "#430"}) %>
+```html
+<div data-controller="turbo-mount-hex-color-picker"
+     data-turbo-mount-hex-color-picker-component-value="HexColorPicker"
+     data-turbo-mount-hex-color-picker-props-value="{&quot;color&quot;:&quot;#034&quot;}"
+     class="mb-5">
+</div>
 ```
 
-In case you need to customize the component's behavior, or pass functions as props, you can create a custom controller:
+### Supported Frameworks
 
-```js
-// javascript/controllers/turbo_mount_react_sketch_picker_controller.js
+`TurboMount` supports the following frameworks:
 
-import { TurboMountReactController } from "turbo-mount"
+- React: `"turbo-mount/react"`
+- Vue: `"turbo-mount/vue"`
+- Svelte: `"turbo-mount/svelte"`
+
+To add support for other frameworks, create a custom plugin. See included plugins for examples.
+
+### Custom Controllers
+
+To customize component behavior or pass functions as props, create a custom controller:
+
+```js
+import { TurboMountController } from "turbo-mount";
 
-export default class extends TurboMountReactController {
+export default class extends TurboMountController {
   get componentProps() {
     return {
       ...this.propsValue,
@@ -60,26 +146,50 @@ export default class extends TurboMountReactController {
   }
 
   onChange = (color) => {
-    this.propsValue = { ...this.propsValue, color: color.hex };
+    // same as this.propsValue = { ...this.propsValue, color };
+    // but skips the rerendering of the component:
+    this.componentProps = { ...this.propsValue, color };
   };
 }
 ```
 
-Then pass this controller the register method:
+Then pass this controller to the `registerComponent` method:
 
 ```js
-turboMount.register('SketchPicker', SketchPicker, TurboMountReactController);
+import HexColorPickerController from "controllers/turbo_mount/hex_color_picker_controller";
+
+registerComponent(turboMount, "HexColorPicker", HexColorPicker, HexColorPickerController);
 ```
 
-## Development
+### Vite Integration
+
+`TurboMount` includes a `registerComponents` function that automates the loading of components (requires the `stimulus-vite-helpers` package). It also accepts an optional `controllers` property to autoload customized controllers:
 
-After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+```js
+import { TurboMount } from "turbo-mount/react";
+import { registerComponents } from "turbo-mount/registerComponents/react";
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+const controllers = import.meta.glob("./**/*_controller.js", { eager: true });
+const components = import.meta.glob("/components/**/*.jsx", { eager: true });
+
+const turboMount = new TurboMount();
+registerComponents({ turboMount, components, controllers });
+```
 
-## Contributing
+The `registerComponents` helper searches for controllers in the following paths:
+- `controllers/turbo-mount/${controllerName}`
+- `controllers/turbo-mount-${controllerName}`
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/skryukov/turbo-mount.
+### Mount Target
+
+To specify a non-root mount target, use the `data-<%= controller_name %>-target="mount"` attribute:
+
+```erb
+<%= turbo_mount("HexColorPicker", props: {color: "#430"}) do |controller_name| %>
+  <h3>Color picker</h3>
+  <div data-<%= controller_name %>-target="mount"></div>
+<% end %>
+```
 
 ## License
 

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

@@ -1,22 +1,18 @@
+import { buildRegisterFunction } from 'turbo-mount';
+export { TurboMount } from 'turbo-mount';
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
-import { TurboMountController } from 'turbo-mount';
 
-class TurboMountReactController extends TurboMountController {
-    constructor() {
-        super(...arguments);
-        this.framework = "react";
-    }
-    mountComponent(el, Component, props) {
+const plugin = {
+    mountComponent: (mountProps) => {
+        const { el, Component, props } = mountProps;
         const root = createRoot(el);
         root.render(createElement(Component, props));
-        return () => { root.unmount(); };
-    }
-}
-
-const plugin = {
-    framework: "react",
-    controller: TurboMountReactController
+        return () => {
+            root.unmount();
+        };
+    },
 };
+const registerComponent = buildRegisterFunction(plugin);
 
-export { plugin as default };
+export { plugin as default, registerComponent };

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

@@ -1,2 +1,2 @@
-import{createElement as r}from"react";import{createRoot as t}from"react-dom/client";import{TurboMountController as o}from"turbo-mount";const e={framework:"react",controller:class extends o{constructor(){super(...arguments),this.framework="react"}mountComponent(o,e,n){const m=t(o);return m.render(r(e,n)),()=>{m.unmount()}}}};export{e as default};
+import{buildRegisterFunction as o}from"turbo-mount";export{TurboMount}from"turbo-mount";import{createElement as t}from"react";import{createRoot as r}from"react-dom/client";const n={mountComponent:o=>{const{el:n,Component:m,props:e}=o,u=r(n);return u.render(t(m,e)),()=>{u.unmount()}}},m=o(n);export{n as default,m as registerComponent};
 //# sourceMappingURL=react.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"react.min.js","sources":["../../src/plugins/react/index.ts","../../src/plugins/react/turbo-mount-react-controller.ts"],"sourcesContent":["import {Plugin} from \"turbo-mount\";\n\nimport {TurboMountReactController} from \"./turbo-mount-react-controller\";\n\nconst plugin: Plugin = {\n    framework: \"react\",\n    controller: TurboMountReactController\n}\n\nexport default plugin;\n","import {ComponentType, createElement} from \"react\";\nimport {createRoot} from \"react-dom/client\";\nimport {TurboMountController} from \"turbo-mount\";\n\nexport class TurboMountReactController extends TurboMountController<ComponentType> {\n    framework = \"react\"\n\n    mountComponent(el: Element, Component: ComponentType, props: object) {\n        const root = createRoot(el);\n        root.render(createElement(Component, props))\n\n        return () => { root.unmount() }\n    }\n}\n"],"names":["plugin","framework","controller","TurboMountController","constructor","this","mountComponent","el","Component","props","root","createRoot","render","createElement","unmount"],"mappings":"uIAIA,MAAMA,EAAiB,CACnBC,UAAW,QACXC,WCFE,cAAyCC,EAA/C,WAAAC,uBACIC,KAASJ,UAAG,OAQf,CANG,cAAAK,CAAeC,EAAaC,EAA0BC,GAClD,MAAMC,EAAOC,EAAWJ,GAGxB,OAFAG,EAAKE,OAAOC,EAAcL,EAAWC,IAE9B,KAAQC,EAAKI,SAAS,CAChC"}
+{"version":3,"file":"react.min.js","sources":["../../src/plugins/react/index.ts"],"sourcesContent":["import { buildRegisterFunction, Plugin, TurboMount } from \"turbo-mount\";\nimport { ComponentType, createElement } from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\nconst plugin: Plugin<ComponentType> = {\n  mountComponent: (mountProps) => {\n    const { el, Component, props } = mountProps;\n    const root = createRoot(el);\n    root.render(createElement(Component, props));\n\n    return () => {\n      root.unmount();\n    };\n  },\n};\n\nconst registerComponent = buildRegisterFunction(plugin);\n\nexport { TurboMount, registerComponent };\n\nexport default plugin;\n"],"names":["plugin","mountComponent","mountProps","el","Component","props","root","createRoot","render","createElement","unmount","registerComponent","buildRegisterFunction"],"mappings":"4KAIA,MAAMA,EAAgC,CACpCC,eAAiBC,IACf,MAAMC,GAAEA,EAAEC,UAAEA,EAASC,MAAEA,GAAUH,EAC3BI,EAAOC,EAAWJ,GAGxB,OAFAG,EAAKE,OAAOC,EAAcL,EAAWC,IAE9B,KACLC,EAAKI,SAAS,CACf,GAICC,EAAoBC,EAAsBZ"}

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

@@ -1,19 +1,15 @@
-import { TurboMountController } from 'turbo-mount';
-
-class TurboMountSvelteController extends TurboMountController {
-    constructor() {
-        super(...arguments);
-        this.framework = "svelte";
-    }
-    mountComponent(el, Component, props) {
-        const component = new Component({ target: el, props });
-        return () => { component.$destroy(); };
-    }
-}
+import { buildRegisterFunction } from 'turbo-mount';
+export { TurboMount } from 'turbo-mount';
 
 const plugin = {
-    framework: "svelte",
-    controller: TurboMountSvelteController
+    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 };
+export { plugin as default, registerComponent };

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

@@ -1,2 +1,2 @@
-import{TurboMountController as t}from"turbo-mount";const o={framework:"svelte",controller:class extends t{constructor(){super(...arguments),this.framework="svelte"}mountComponent(t,o,r){const e=new o({target:t,props:r});return()=>{e.$destroy()}}}};export{o as default};
+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=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","../../src/plugins/svelte/turbo-mount-svelte-controller.ts"],"sourcesContent":["import {Plugin} from \"turbo-mount\";\n\nimport {TurboMountSvelteController} from \"./turbo-mount-svelte-controller\";\n\nconst plugin: Plugin = {\n    framework: \"svelte\",\n    controller: TurboMountSvelteController\n}\n\nexport default plugin;\n","import {ComponentType} from \"svelte\";\nimport {TurboMountController} from \"turbo-mount\";\n\nexport class TurboMountSvelteController extends TurboMountController<ComponentType> {\n    framework = \"svelte\"\n\n    mountComponent(el: Element, Component: ComponentType, props: object) {\n        const component = new Component({ target: el, props })\n\n        return () => { component.$destroy() }\n    }\n}\n"],"names":["plugin","framework","controller","TurboMountController","constructor","this","mountComponent","el","Component","props","component","target","$destroy"],"mappings":"mDAIA,MAAMA,EAAiB,CACnBC,UAAW,SACXC,WCHE,cAA0CC,EAAhD,WAAAC,uBACIC,KAASJ,UAAG,QAOf,CALG,cAAAK,CAAeC,EAAaC,EAA0BC,GAClD,MAAMC,EAAY,IAAIF,EAAU,CAAEG,OAAQJ,EAAIE,UAE9C,MAAO,KAAQC,EAAUE,UAAU,CACtC"}
+{"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"}

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

@@ -1,21 +1,17 @@
+import { buildRegisterFunction } from 'turbo-mount';
+export { TurboMount } from 'turbo-mount';
 import { createApp } from 'vue';
-import { TurboMountController } from 'turbo-mount';
 
-class TurboMountVueController extends TurboMountController {
-    constructor() {
-        super(...arguments);
-        this.framework = "vue";
-    }
-    mountComponent(el, Component, props) {
+const plugin = {
+    mountComponent: (mountProps) => {
+        const { el, Component, props } = mountProps;
         const app = createApp(Component, props);
         app.mount(el);
-        return () => { app.unmount(); };
-    }
-}
-
-const plugin = {
-    framework: "vue",
-    controller: TurboMountVueController
+        return () => {
+            app.unmount();
+        };
+    },
 };
+const registerComponent = buildRegisterFunction(plugin);
 
-export { plugin as default };
+export { plugin as default, registerComponent };

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

@@ -1,2 +1,2 @@
-import{createApp as o}from"vue";import{TurboMountController as t}from"turbo-mount";const r={framework:"vue",controller:class extends t{constructor(){super(...arguments),this.framework="vue"}mountComponent(t,r,e){const n=o(r,e);return n.mount(t),()=>{n.unmount()}}}};export{r as default};
+import{buildRegisterFunction as o}from"turbo-mount";export{TurboMount}from"turbo-mount";import{createApp as t}from"vue";const n={mountComponent:o=>{const{el:n,Component:r,props:u}=o,m=t(r,u);return m.mount(n),()=>{m.unmount()}}},r=o(n);export{n as default,r as registerComponent};
 //# sourceMappingURL=vue.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"vue.min.js","sources":["../../src/plugins/vue/index.ts","../../src/plugins/vue/turbo-mount-vue-controller.ts"],"sourcesContent":["import {Plugin} from \"turbo-mount\";\n\nimport {TurboMountVueController} from \"./turbo-mount-vue-controller\";\n\nconst plugin: Plugin = {\n    framework: \"vue\",\n    controller: TurboMountVueController\n}\n\nexport default plugin;\n","import { createApp, App } from \"vue\";\nimport {TurboMountController} from \"turbo-mount\";\n\nexport class TurboMountVueController extends TurboMountController<App> {\n    framework = \"vue\"\n\n    mountComponent(el: Element, Component: App, props: object) {\n        const app = createApp(Component, props as Record<string, unknown>);\n        app.mount(el)\n\n        return () => { app.unmount() }\n    }\n}\n"],"names":["plugin","framework","controller","TurboMountController","constructor","this","mountComponent","el","Component","props","app","createApp","mount","unmount"],"mappings":"mFAIA,MAAMA,EAAiB,CACnBC,UAAW,MACXC,WCHE,cAAuCC,EAA7C,WAAAC,uBACIC,KAASJ,UAAG,KAQf,CANG,cAAAK,CAAeC,EAAaC,EAAgBC,GACxC,MAAMC,EAAMC,EAAUH,EAAWC,GAGjC,OAFAC,EAAIE,MAAML,GAEH,KAAQG,EAAIG,SAAS,CAC/B"}
+{"version":3,"file":"vue.min.js","sources":["../../src/plugins/vue/index.ts"],"sourcesContent":["import { buildRegisterFunction, Plugin, TurboMount } from \"turbo-mount\";\nimport { App, createApp } from \"vue\";\n\nconst plugin: Plugin<App> = {\n  mountComponent: (mountProps) => {\n    const { el, Component, props } = mountProps;\n    const app = createApp(Component, props as Record<string, unknown>);\n    app.mount(el);\n\n    return () => {\n      app.unmount();\n    };\n  },\n};\n\nconst registerComponent = buildRegisterFunction(plugin);\n\nexport { TurboMount, registerComponent };\n\nexport default plugin;\n"],"names":["plugin","mountComponent","mountProps","el","Component","props","app","createApp","mount","unmount","registerComponent","buildRegisterFunction"],"mappings":"wHAGA,MAAMA,EAAsB,CAC1BC,eAAiBC,IACf,MAAMC,GAAEA,EAAEC,UAAEA,EAASC,MAAEA,GAAUH,EAC3BI,EAAMC,EAAUH,EAAWC,GAGjC,OAFAC,EAAIE,MAAML,GAEH,KACLG,EAAIG,SAAS,CACd,GAICC,EAAoBC,EAAsBX"}

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

@@ -1,6 +1,10 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller, Application } from '@hotwired/stimulus';
 
 class TurboMountController extends Controller {
+    constructor() {
+        super(...arguments);
+        this.skipPropsChangeCallback = false;
+    }
     connect() {
         this._umountComponentCallback || (this._umountComponentCallback = this.mountComponent(this.mountElement, this.resolvedComponent, this.componentProps));
     }
@@ -8,6 +12,10 @@ class TurboMountController extends Controller {
         this.umountComponent();
     }
     propsValueChanged() {
+        if (this.skipPropsChangeCallback) {
+            this.skipPropsChangeCallback = false;
+            return;
+        }
         this.umountComponent();
         this._umountComponentCallback || (this._umountComponentCallback = this.mountComponent(this.mountElement, this.resolvedComponent, this.componentProps));
     }
@@ -15,46 +23,65 @@ class TurboMountController extends Controller {
         return this.propsValue;
     }
     get mountElement() {
-        return this.element;
+        return this.hasMountTarget ? this.mountTarget : this.element;
     }
     get resolvedComponent() {
-        return this.resolveComponent(this.componentValue);
+        return this.resolveMounted(this.componentValue).component;
+    }
+    get resolvedPlugin() {
+        return this.resolveMounted(this.componentValue).plugin;
     }
     umountComponent() {
         this._umountComponentCallback && this._umountComponentCallback();
         this._umountComponentCallback = undefined;
     }
-    resolveComponent(component) {
+    mountComponent(el, Component, props) {
+        return this.resolvedPlugin.mountComponent({ el, Component, props });
+    }
+    resolveMounted(component) {
         const app = this.application;
-        return app.turboMount[this.framework].resolve(component);
+        return app.turboMount.resolve(component);
+    }
+    setComponentProps(props) {
+        this.skipPropsChangeCallback = true;
+        this.propsValue = props;
     }
 }
 TurboMountController.values = {
     props: Object,
-    component: String
+    component: String,
+};
+TurboMountController.targets = ["mount"];
+
+const camelToKebabCase = (str) => {
+    return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 };
 
 class TurboMount {
-    constructor(props) {
-        var _a;
+    constructor(props = {}) {
         this.components = new Map();
-        this.application = props.application;
-        this.framework = props.plugin.framework;
-        this.baseController = props.plugin.controller;
-        (_a = this.application).turboMount || (_a.turboMount = {});
-        this.application.turboMount[this.framework] = this;
-        if (this.baseController) {
-            this.application.register(`turbo-mount-${this.framework}`, this.baseController);
-        }
+        this.application = this.findOrStartApplication(props.application);
+        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")) {
+                target.setAttribute("data-turbo-mount-props-value", detail.newElement.getAttribute("data-turbo-mount-props-value") ||
+                    "{}");
+                event.preventDefault();
+            }
+        });
     }
-    register(name, component, controller) {
-        controller || (controller = this.baseController);
+    register(plugin, name, component, controller) {
+        controller || (controller = TurboMountController);
         if (this.components.has(name)) {
             throw new Error(`Component '${name}' is already registered.`);
         }
-        this.components.set(name, component);
+        this.components.set(name, { component, plugin });
         if (controller) {
-            const controllerName = `turbo-mount-${this.framework}-${this.camelToKebabCase(name)}`;
+            const controllerName = `turbo-mount-${camelToKebabCase(name)}`;
             this.application.register(controllerName, controller);
         }
     }
@@ -65,9 +92,19 @@ class TurboMount {
         }
         return component;
     }
-    camelToKebabCase(str) {
-        return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    findOrStartApplication(hydratedApp) {
+        let application = hydratedApp || window.Stimulus;
+        if (!application) {
+            application = Application.start();
+            window.Stimulus = application;
+        }
+        return application;
     }
 }
+function buildRegisterFunction(plugin) {
+    return (turboMount, name, component, controller) => {
+        turboMount.register(plugin, name, component, controller);
+    };
+}
 
-export { TurboMount, TurboMountController };
+export { TurboMount, TurboMountController, buildRegisterFunction };

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

@@ -1,2 +1,2 @@
-import{Controller as t}from"@hotwired/stimulus";class o extends t{connect(){this._umountComponentCallback||(this._umountComponentCallback=this.mountComponent(this.mountElement,this.resolvedComponent,this.componentProps))}disconnect(){this.umountComponent()}propsValueChanged(){this.umountComponent(),this._umountComponentCallback||(this._umountComponentCallback=this.mountComponent(this.mountElement,this.resolvedComponent,this.componentProps))}get componentProps(){return this.propsValue}get mountElement(){return this.element}get resolvedComponent(){return this.resolveComponent(this.componentValue)}umountComponent(){this._umountComponentCallback&&this._umountComponentCallback(),this._umountComponentCallback=void 0}resolveComponent(t){return this.application.turboMount[this.framework].resolve(t)}}o.values={props:Object,component:String};class n{constructor(t){var o;this.components=new Map,this.application=t.application,this.framework=t.plugin.framework,this.baseController=t.plugin.controller,(o=this.application).turboMount||(o.turboMount={}),this.application.turboMount[this.framework]=this,this.baseController&&this.application.register(`turbo-mount-${this.framework}`,this.baseController)}register(t,o,n){if(n||(n=this.baseController),this.components.has(t))throw new Error(`Component '${t}' is already registered.`);if(this.components.set(t,o),n){const o=`turbo-mount-${this.framework}-${this.camelToKebabCase(t)}`;this.application.register(o,n)}}resolve(t){const o=this.components.get(t);if(!o)throw new Error(`Unknown component: ${t}`);return o}camelToKebabCase(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}}export{n as TurboMount,o as TurboMountController};
+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"];class e{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:s}=n;(null===(o=e.getAttribute("data-controller"))||void 0===o?void 0:o.includes("turbo-mount"))&&(e.setAttribute("data-turbo-mount-props-value",s.newElement.getAttribute("data-turbo-mount-props-value")||"{}"),t.preventDefault())}))}register(t,o,e,s){if(s||(s=n),this.components.has(o))throw new Error(`Component '${o}' is already registered.`);if(this.components.set(o,{component:e,plugin:t}),s){const t=`turbo-mount-${r=o,r.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}`;this.application.register(t,s)}var r}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,s)=>{o.register(t,n,e,s)}}export{e as TurboMount,n as TurboMountController,s as buildRegisterFunction};
 //# 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/turbo-mount.ts"],"sourcesContent":["import {Controller} from \"@hotwired/stimulus\"\nimport {ApplicationWithTurboMount} from \"./turbo-mount\";\n\nexport abstract class TurboMountController<T> extends Controller {\n    static values = {\n        props: Object,\n        component: String\n    }\n    declare readonly propsValue: object;\n    declare readonly componentValue: string;\n\n    abstract framework: string;\n\n    abstract mountComponent(el: Element, Component: T, props: object): () => void;\n\n    _umountComponentCallback?: () => void;\n\n    connect() {\n        this._umountComponentCallback ||= this.mountComponent(this.mountElement, this.resolvedComponent, this.componentProps);\n    }\n\n    disconnect() {\n        this.umountComponent();\n    }\n\n    propsValueChanged() {\n        this.umountComponent();\n        this._umountComponentCallback ||= this.mountComponent(this.mountElement, this.resolvedComponent, this.componentProps);\n    }\n\n    get componentProps() {\n        return this.propsValue;\n    }\n\n    get mountElement() {\n        return this.element;\n    }\n\n    get resolvedComponent() {\n        return this.resolveComponent(this.componentValue);\n    }\n\n    umountComponent() {\n        this._umountComponentCallback && this._umountComponentCallback();\n        this._umountComponentCallback = undefined;\n    }\n\n    resolveComponent(component: string): T {\n        const app = this.application as ApplicationWithTurboMount<T>\n        return app.turboMount[this.framework].resolve(component);\n    }\n}\n\n\n","import {Application, ControllerConstructor} from '@hotwired/stimulus';\n\nexport interface ApplicationWithTurboMount<T> extends Application {\n    turboMount: { [framework: string]: TurboMount<T> };\n}\n\nexport type Plugin = {\n    framework: string;\n    controller: ControllerConstructor;\n}\n\nexport class TurboMount<T> {\n    components: Map<string, T>;\n    application: ApplicationWithTurboMount<T>;\n    framework: string;\n    baseController?: ControllerConstructor;\n\n    constructor(props: { application: Application, plugin: Plugin }) {\n        this.components = new Map();\n        this.application = props.application as ApplicationWithTurboMount<T>;\n        this.framework = props.plugin.framework;\n        this.baseController = props.plugin.controller;\n\n        this.application.turboMount ||= {};\n        this.application.turboMount[this.framework] = this;\n\n        if (this.baseController) {\n            this.application.register(`turbo-mount-${this.framework}`, this.baseController);\n        }\n    }\n\n    register(name: string, component: T, controller?: ControllerConstructor) {\n        controller ||= this.baseController;\n        if (this.components.has(name)) {\n            throw new Error(`Component '${name}' is already registered.`);\n        }\n        this.components.set(name, component);\n\n        if (controller) {\n            const controllerName = `turbo-mount-${this.framework}-${this.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    camelToKebabCase(str: string) {\n        return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n    }\n}\n"],"names":["TurboMountController","Controller","connect","this","_umountComponentCallback","mountComponent","mountElement","resolvedComponent","componentProps","disconnect","umountComponent","propsValueChanged","propsValue","element","resolveComponent","componentValue","undefined","component","application","turboMount","framework","resolve","values","props","Object","String","TurboMount","constructor","components","Map","plugin","baseController","controller","_a","register","name","has","Error","set","controllerName","camelToKebabCase","get","str","replace","toLowerCase"],"mappings":"gDAGM,MAAgBA,UAAgCC,EAclD,OAAAC,GACIC,KAAKC,2BAALD,KAAKC,yBAA6BD,KAAKE,eAAeF,KAAKG,aAAcH,KAAKI,kBAAmBJ,KAAKK,gBACzG,CAED,UAAAC,GACIN,KAAKO,iBACR,CAED,iBAAAC,GACIR,KAAKO,kBACLP,KAAKC,2BAALD,KAAKC,yBAA6BD,KAAKE,eAAeF,KAAKG,aAAcH,KAAKI,kBAAmBJ,KAAKK,gBACzG,CAED,kBAAIA,GACA,OAAOL,KAAKS,UACf,CAED,gBAAIN,GACA,OAAOH,KAAKU,OACf,CAED,qBAAIN,GACA,OAAOJ,KAAKW,iBAAiBX,KAAKY,eACrC,CAED,eAAAL,GACIP,KAAKC,0BAA4BD,KAAKC,2BACtCD,KAAKC,8BAA2BY,CACnC,CAED,gBAAAF,CAAiBG,GAEb,OADYd,KAAKe,YACNC,WAAWhB,KAAKiB,WAAWC,QAAQJ,EACjD,EA9CMjB,EAAAsB,OAAS,CACZC,MAAOC,OACPP,UAAWQ,cCKNC,EAMT,WAAAC,CAAYJ,SACRpB,KAAKyB,WAAa,IAAIC,IACtB1B,KAAKe,YAAcK,EAAML,YACzBf,KAAKiB,UAAYG,EAAMO,OAAOV,UAC9BjB,KAAK4B,eAAiBR,EAAMO,OAAOE,YAEnCC,EAAA9B,KAAKe,aAAYC,aAAAc,EAAAd,WAAe,CAAA,GAChChB,KAAKe,YAAYC,WAAWhB,KAAKiB,WAAajB,KAE1CA,KAAK4B,gBACL5B,KAAKe,YAAYgB,SAAS,eAAe/B,KAAKiB,YAAajB,KAAK4B,eAEvE,CAED,QAAAG,CAASC,EAAclB,EAAce,GAEjC,GADAA,IAAAA,EAAe7B,KAAK4B,gBAChB5B,KAAKyB,WAAWQ,IAAID,GACpB,MAAM,IAAIE,MAAM,cAAcF,6BAIlC,GAFAhC,KAAKyB,WAAWU,IAAIH,EAAMlB,GAEtBe,EAAY,CACZ,MAAMO,EAAiB,eAAepC,KAAKiB,aAAajB,KAAKqC,iBAAiBL,KAC9EhC,KAAKe,YAAYgB,SAASK,EAAgBP,EAC7C,CACJ,CAED,OAAAX,CAAQc,GACJ,MAAMlB,EAAYd,KAAKyB,WAAWa,IAAIN,GACtC,IAAKlB,EACD,MAAM,IAAIoB,MAAM,sBAAsBF,KAE1C,OAAOlB,CACV,CAED,gBAAAuB,CAAiBE,GACb,OAAOA,EAAIC,QAAQ,kBAAmB,SAASC,aAClD"}
+{"version":3,"file":"turbo-mount.min.js","sources":["../src/turbo-mount-controller.ts","../src/turbo-mount.ts","../src/helpers.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","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","export const camelToKebabCase = (str: string) => {\n  return str.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\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","TurboMount","components","Map","findOrStartApplication","register","document","addEventListener","event","turboMorphEvent","target","detail","_a","getAttribute","includes","setAttribute","newElement","preventDefault","name","controller","has","Error","set","controllerName","str","replace","toLowerCase","get","hydratedApp","window","Stimulus","Application","start","buildRegisterFunction"],"mappings":"iEAGM,MAAOA,UAA6BC,EAA1C,WAAAC,uBAOUC,KAAuBC,yBAAG,CAsEnC,CA7DC,OAAAC,GACEF,KAAKG,2BAALH,KAAKG,yBAA6BH,KAAKI,eACrCJ,KAAKK,aACLL,KAAKM,kBACLN,KAAKO,gBAER,CAED,UAAAC,GACER,KAAKS,iBACN,CAED,iBAAAC,GAEMV,KAAKC,wBACPD,KAAKC,yBAA0B,GAIjCD,KAAKS,kBACLT,KAAKG,2BAALH,KAAKG,yBAA6BH,KAAKI,eACrCJ,KAAKK,aACLL,KAAKM,kBACLN,KAAKO,iBAER,CAED,kBAAIA,GACF,OAAOP,KAAKW,UACb,CAED,gBAAIN,GACF,OAAOL,KAAKY,eAAiBZ,KAAKa,YAAcb,KAAKc,OACtD,CAED,qBAAIR,GACF,OAAON,KAAKe,eAAef,KAAKgB,gBAAgBC,SACjD,CAED,kBAAIC,GACF,OAAOlB,KAAKe,eAAef,KAAKgB,gBAAgBG,MACjD,CAED,eAAAV,GACET,KAAKG,0BAA4BH,KAAKG,2BACtCH,KAAKG,8BAA2BiB,CACjC,CAED,cAAAhB,CAAeiB,EAAaC,EAAoBC,GAC9C,OAAOvB,KAAKkB,eAAed,eAAe,CAAEiB,KAAIC,YAAWC,SAC5D,CAED,cAAAR,CAAeE,GAEb,OADYjB,KAAKwB,YACNC,WAAWC,QAAQT,EAC/B,CAED,iBAAAU,CAAkBJ,GAChBvB,KAAKC,yBAA0B,EAC/BD,KAAKW,WAAaY,CACnB,EA3EM1B,EAAA+B,OAAS,CACdL,MAAOM,OACPZ,UAAWa,QAENjC,EAAAkC,QAAU,CAAC,eC8BPC,EAKX,WAAAjC,CAAYwB,EAAyB,IACnCvB,KAAKiC,WAAa,IAAIC,IACtBlC,KAAKwB,YAAcxB,KAAKmC,uBAAuBZ,EAAMC,aACrDxB,KAAKwB,YAAYC,WAAazB,KAC9BA,KAAKwB,YAAYY,SAAS,cAAevC,GAEzCwC,SAASC,iBAAiB,8BAA+BC,UACvD,MAAMC,EAAkBD,GAClBE,OAAEA,EAAMC,OAAEA,GAAWF,GAEe,QAAtCG,EAAAF,EAAOG,aAAa,0BAAkB,IAAAD,OAAA,EAAAA,EAAEE,SAAS,kBACnDJ,EAAOK,aACL,+BACAJ,EAAOK,WAAWH,aAAa,iCAC7B,MAEJL,EAAMS,iBACP,GAEJ,CAED,QAAAZ,CACEjB,EACA8B,EACAhC,EACAiC,GAGA,GADAA,IAAAA,EAAerD,GACXG,KAAKiC,WAAWkB,IAAIF,GACtB,MAAM,IAAIG,MAAM,cAAcH,6BAIhC,GAFAjD,KAAKiC,WAAWoB,IAAIJ,EAAM,CAAEhC,YAAWE,WAEnC+B,EAAY,CACd,MAAMI,EAAiB,eC7EIC,ED6E4BN,EC5EpDM,EAAIC,QAAQ,kBAAmB,SAASC,gBD6E3CzD,KAAKwB,YAAYY,SAASkB,EAAgBJ,EAC3C,CC/E2B,IAACK,CDgF9B,CAED,OAAA7B,CAAQuB,GACN,MAAMhC,EAAYjB,KAAKiC,WAAWyB,IAAIT,GACtC,IAAKhC,EACH,MAAM,IAAImC,MAAM,sBAAsBH,KAExC,OAAOhC,CACR,CAEO,sBAAAkB,CAAuBwB,GAC7B,IAAInC,EAAcmC,GAAeC,OAAOC,SAMxC,OAJKrC,IACHA,EAAcsC,EAAYC,QAC1BH,OAAOC,SAAWrC,GAEbA,CACR,EAGG,SAAUwC,EAAyB7C,GACvC,MAAO,CACLM,EACAwB,EACAhC,EACAiC,KAEAzB,EAAWW,SAASjB,EAAQ8B,EAAMhC,EAAWiC,EAAW,CAE5D"}

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

@@ -0,0 +1,18 @@
+import { TurboMount } from "turbo-mount";
+import { registerComponent } from "turbo-mount/<%= framework %>";
+
+const turboMount = new TurboMount();
+
+// to register a component use:
+// registerComponent(turboMount, "Hello", Hello); // where Hello is the imported the component
+
+// to override the default controller use:
+// registerComponent(turboMount, "Hello", Hello, HelloController); // where HelloController is a Stimulus controller extended from TurboMountController
+<%- if vite? -%>
+
+// 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 });
+// registerComponents({ turboMount, components, controllers });
+<%- end -%>

data/lib/generators/turbo_mount/install_generator.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+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
+
+      source_root File.expand_path("install", __dir__)
+
+      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
+
+        if importmap?
+          install_importmap
+        else
+          install_nodejs
+        end
+
+        say "Turbo Mount successfully installed", :green
+      end
+
+      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
+
+        say "Creating Turbo Mount initializer"
+        template "turbo-mount.js", File.join("app/javascript/turbo-mount.js")
+        append_to_file "app/javascript/entrypoints/application.js", %(import "./turbo-mount"\n)
+        warn_about_vite_plugin if vite?
+      end
+
+      def install_importmap
+        say "Creating Turbo Mount initializer"
+        template "turbo-mount.js", File.join("app/javascript/turbo-mount-initializer.js")
+        append_to_file "app/javascript/application.js", %(import "turbo-mount-initializer"\n)
+
+        say "Pinning Turbo Mount to the importmap"
+        append_to_file "config/importmap.rb", %(pin "turbo-mount", to: "turbo-mount.min.js"\n)
+        append_to_file "config/importmap.rb", %(pin "turbo-mount/#{framework}", to: "turbo-mount/#{framework}.min.js"\n)
+        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 vite?
+        Dir.glob(Rails.root.join("vite.config.*")).any?
+      end
+
+      def importmap?
+        build_tool == "importmap"
+      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
+      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
+      end
+
+      def framework
+        @framework ||= ask("What framework do you want to use with Turbo Mount?", limited_to: FRAMEWORKS.keys, default: "react")
+      end
+    end
+  end
+end

data/lib/turbo/mount/helpers.rb

@@ -3,28 +3,20 @@
 module Turbo
   module Mount
     module Helpers
-      def turbo_mount_component(component_name, framework:, props: {}, tag: "div", **attrs)
+      def turbo_mount(component_name, props: {}, tag: "div", **attrs, &block)
         raise TypeError, "Component name expected" unless component_name.is_a? String
 
-        attrs["data-controller"] = "turbo-mount-#{framework}-#{component_name.underscore.dasherize}"
-        prefix = "data-#{attrs["data-controller"]}"
+        controller_name = "turbo-mount-#{component_name.underscore.dasherize}"
+        attrs["data-controller"] = controller_name
+        prefix = "data-#{controller_name}"
         attrs["#{prefix}-component-value"] = component_name
         attrs["#{prefix}-props-value"] = json_escape(props.to_json) if props.present?
 
-        content_tag(tag, nil, attrs)
-      end
-
-      def turbo_mount_react_component(component_name, **attrs)
-        turbo_mount_component(component_name, framework: "react", **attrs)
-      end
-
-      def turbo_mount_svelte_component(component_name, **attrs)
-        turbo_mount_component(component_name, framework: "svelte", **attrs)
-      end
+        return content_tag(tag, nil, attrs) unless block
 
-      def turbo_mount_vue_component(component_name, **attrs)
-        turbo_mount_component(component_name, framework: "vue", **attrs)
+        content_tag(tag, nil, attrs) { capture(controller_name, &block) }
       end
+      alias_method :turbo_mount_component, :turbo_mount
     end
   end
 end

data/lib/turbo/mount/version.rb

@@ -2,6 +2,6 @@
 
 module Turbo
   module Mount
-    VERSION = "0.2.2"
+    VERSION = "0.3.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo-mount
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.0
 platform: ruby
 authors:
 - Svyatoslav Kryukov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-05-09 00:00:00.000000000 Z
+date: 2024-05-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -47,6 +47,8 @@ files:
 - 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/install/turbo-mount.js.tt
+- lib/generators/turbo_mount/install_generator.rb
 - lib/turbo/mount.rb
 - lib/turbo/mount/engine.rb
 - lib/turbo/mount/helpers.rb