turbo-mount 0.2.0 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1b885def4f5b0da21d8937c2f17af9ee780454f7ffd56e8aa5cd30c89ca0e22e
-  data.tar.gz: c5ae1bf2a8e3abb49ffeb44323526a6adb2b96456b2ad39b1b179cc8dec414eb
+  metadata.gz: '0318ba2497956b4a56bc035a5a39e617bf0b171b039823fd61fe131294ca5815'
+  data.tar.gz: 6a078a433b9766915496ac9d86d9df81782eec209c495ccefcb978643c810a39
 SHA512:
-  metadata.gz: b7d2163fe0dfe8a1cbb3297dd00f7460c50b95c96cf99952fde4c2683b02477c34ac2f96c12eff3f6c4f641e09c1f8b5fe9ccb179f51ed4858a2384069cd625b
-  data.tar.gz: e00ff7429ae63e63d9ae0a9b2572ad144b11c2531b2ac849bb52ed3c100934fb2d0de041f519844c92aab0cc9a4f90ed87a22e8079134d056e9e063d99714d73
+  metadata.gz: 75dd9c6f8b0760791c40d3db5b07cf95056bc199550d95c5a86cec1686a8f11eb0594ad7e1d4d4c015867289371f18e2b1cc7f1ccb6738e24b8342a42e7b8f1c
+  data.tar.gz: 1ac86acfbb7d0e5c01e61c791e6ba058d78ae01092bdd1dc5cdd0059a5309922888a59cd0afad63541c2c517c478f159d351ef2e0da326ddddf1b48d6c9de534

data/CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning].
 
 ## [Unreleased]
 
+## [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
+
+- Export plugins. ([@skryukov])
+
 ## [0.2.0] - 2024-05-09
 
 ### Added
@@ -21,7 +36,9 @@ and this project adheres to [Semantic Versioning].
 
 [@skryukov]: https://github.com/skryukov
 
-[Unreleased]: https://github.com/skryukov/turbo-mount/compare/v0.2.0...HEAD
+[Unreleased]: https://github.com/skryukov/turbo-mount/compare/v0.2.3...HEAD
+[0.2.3]: https://github.com/skryukov/turbo-mount/commits/v0.2.3
+[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
 [0.1.0]: https://github.com/skryukov/turbo-mount/commits/v0.1.0
 

data/README.md

@@ -6,35 +6,72 @@
 
 ## Installation
 
-Install the gem and add to the application's Gemfile by executing:
+Add the following line to your Gemfile:
 
-    $ bundle add turbo-mount
+```ruby
+gem "turbo-mount"
+```
 
-If bundler is not being used to manage dependencies, install the gem by executing:
+For projects utilizing build tools such as [Vite](http://vite-ruby.netlify.app), also install `turbo-mount` package:
 
-    $ gem install turbo-mount
+```bash
+npm install turbo-mount
+# or with yarn
+yarn add turbo-mount
+```
 
 ## 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. Below are the steps to set up `TurboMount` with different configurations.
+
+#### Standard Initialization
+
+Import the necessary modules and initialize ```TurboMount``` with your application and the desired plugin. Here's how to set it up with a React plugin:
+
+```js
+import { Application } from "@hotwired/stimulus";
+import { TurboMount } from "turbo-mount";
+import plugin from "turbo-mount/react";
+import { SketchPicker } from 'react-color';
+
+const application = Application.start();
+const turboMount = new TurboMount({ application, plugin });
+
+turboMount.register('SketchPicker', SketchPicker);
+```
+
+#### Simplified Initialization
+
+If you prefer not to specify the `application` explicitly, `TurboMount` can automatically detect or initialize it. This approach uses the `window.Stimulus` if available; otherwise, it initializes a new Stimulus application:
 
 ```js
-import { Application } from "@hotwired/stimulus"
+import { TurboMount } from "turbo-mount";
+import plugin from "turbo-mount/react";
+import { SketchPicker } from 'react-color';
+
+const turboMount = new TurboMount({ plugin });
+
+turboMount.register('SketchPicker', SketchPicker);
+```
 
-const application = Application.start()
+#### Plugin-Specific Initialization
 
-import { TurboMount } from "turbo-mount"
-import plugin from "turbo-mount/react"
+For a more streamlined setup, you can directly import a specialized version of `TurboMount`:
 
-// Initialize TurboMount and register the react stimulus controller
-const turboMount = new TurboMount({application, plugin});
+```js
+import { TurboMountReact } from "turbo-mount/react";
+import { SketchPicker } from 'react-color';
+
+const turboMount = new TurboMountReact();
 
-// Register the components you want to use
-import { SketchPicker } from 'react-color'
 turboMount.register('SketchPicker', SketchPicker);
 ```
 
-Now you can use view helpers to mount the components:
+### View Helpers
+
+Use the following helpers to mount components in your views:
 
 ```erb
 <%= turbo_mount_component("SketchPicker", framework: "react", props: {color: "#034"}) %>
@@ -44,11 +81,21 @@ Now you can use view helpers to mount the components:
 <%= turbo_mount_react_component("SketchPicker", props: {color: "#430"}) %>
 ```
 
-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:
+
+- React `"turbo-mount/react"`
+- Vue `"turbo-mount/vue"`
+- Svelte `"turbo-mount/svelte"`
+
+It's possible to add support for other frameworks by creating custom controller class extending `TurboMountController` and providing a plugin. See included plugins for examples.
+
+### Custom Controllers
+
+To customize component behavior or pass functions as props, create a custom controller:
 
+```js
 import { TurboMountReactController } from "turbo-mount"
 
 export default class extends TurboMountReactController {
@@ -68,7 +115,42 @@ export default class extends TurboMountReactController {
 Then pass this controller the register method:
 
 ```js
-turboMount.register('SketchPicker', SketchPicker, TurboMountReactController);
+import SketchController from "controllers/turbo_mount/sketch_picker_controller"
+
+turboMount.register('SketchPicker', SketchPicker, SketchController);
+```
+
+### Vite Integration
+
+`TurboMount` includes a `registerComponents` function that automates the loading of components (requires `stimulus-vite-helpers` package). It also accepts an optional `controllers` property to autoload customized controllers:
+
+```js
+import { TurboMount } from "turbo-mount/react";
+import { registerComponents } from "turbo-mount/vite";
+
+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 });
+```
+
+The `registerComponents` helper searches for controllers in the following paths:
+- `controllers/turbo-mount/${framework}/${controllerName}`
+- `controllers/turbo-mount/${framework}-${controllerName}`
+- `controllers/turbo-mount-${framework}-${controllerName}`
+- `controllers/turbo-mount/${controllerName}`
+- `controllers/turbo-mount-${controllerName}`
+
+### Mount target
+
+To specify a non-root mount target, use the `data-<%= controller_name %>-target="mount"` attribute:
+
+```erb
+<%= turbo_mount_react_component("SketchPicker", props: {color: "#430"}) do |controller_name| %>
+  <h3>Color picker</h3>
+  <div data-<%= controller_name %>-target="mount"></div>
+<% end %>
 ```
 
 ## Development

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

@@ -1,6 +1,6 @@
+import { TurboMountController, TurboMount } from 'turbo-mount';
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
-import { TurboMountController } from 'turbo-mount';
 
 class TurboMountReactController extends TurboMountController {
     constructor() {
@@ -10,13 +10,20 @@ class TurboMountReactController extends TurboMountController {
     mountComponent(el, Component, props) {
         const root = createRoot(el);
         root.render(createElement(Component, props));
-        return () => { root.unmount(); };
+        return () => {
+            root.unmount();
+        };
     }
 }
 
 const plugin = {
     framework: "react",
-    controller: TurboMountReactController
+    controller: TurboMountReactController,
 };
+class TurboMountReact extends TurboMount {
+    constructor(props) {
+        super(Object.assign(Object.assign({}, props), { plugin }));
+    }
+}
 
-export { plugin as default };
+export { TurboMountReact as TurboMount, TurboMountReact, plugin as default };

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{TurboMountController as r,TurboMount as t}from"turbo-mount";import{createElement as o}from"react";import{createRoot as e}from"react-dom/client";const n={framework:"react",controller:class extends r{constructor(){super(...arguments),this.framework="react"}mountComponent(r,t,n){const s=e(r);return s.render(o(t,n)),()=>{s.unmount()}}}};class s extends t{constructor(r){super(Object.assign(Object.assign({},r),{plugin:n}))}}export{s as TurboMount,s as TurboMountReact,n as default};
 //# 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","../../src/plugins/react/turbo-mount-react-controller.ts"],"sourcesContent":["import { Plugin, TurboMount, TurboMountProps } from \"turbo-mount\";\n\nimport { TurboMountReactController } from \"./turbo-mount-react-controller\";\n\nconst plugin: Plugin = {\n  framework: \"react\",\n  controller: TurboMountReactController,\n};\n\nexport class TurboMountReact<T> extends TurboMount<T> {\n  constructor(props: Omit<TurboMountProps, \"plugin\">) {\n    super({ ...props, plugin });\n  }\n}\n\nexport { TurboMountReact as TurboMount };\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 () => {\n      root.unmount();\n    };\n  }\n}\n"],"names":["plugin","framework","controller","TurboMountController","constructor","this","mountComponent","el","Component","props","root","createRoot","render","createElement","unmount","TurboMountReact","TurboMount","super","Object","assign"],"mappings":"uJAIA,MAAMA,EAAiB,CACrBC,UAAW,QACXC,WCFI,cAAyCC,EAA/C,WAAAC,uBACEC,KAASJ,UAAG,OAUb,CARC,cAAAK,CAAeC,EAAaC,EAA0BC,GACpD,MAAMC,EAAOC,EAAWJ,GAGxB,OAFAG,EAAKE,OAAOC,EAAcL,EAAWC,IAE9B,KACLC,EAAKI,SAAS,CAEjB,IDLG,MAAOC,UAA2BC,EACtC,WAAAZ,CAAYK,GACVQ,MAAWC,OAAAC,OAAAD,OAAAC,OAAA,GAAAV,GAAO,CAAAT,WACnB"}

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

@@ -1,4 +1,4 @@
-import { TurboMountController } from 'turbo-mount';
+import { TurboMountController, TurboMount } from 'turbo-mount';
 
 class TurboMountSvelteController extends TurboMountController {
     constructor() {
@@ -7,13 +7,20 @@ class TurboMountSvelteController extends TurboMountController {
     }
     mountComponent(el, Component, props) {
         const component = new Component({ target: el, props });
-        return () => { component.$destroy(); };
+        return () => {
+            component.$destroy();
+        };
     }
 }
 
 const plugin = {
     framework: "svelte",
-    controller: TurboMountSvelteController
+    controller: TurboMountSvelteController,
 };
+class TurboMountSvelte extends TurboMount {
+    constructor(props) {
+        super(Object.assign(Object.assign({}, props), { plugin }));
+    }
+}
 
-export { plugin as default };
+export { TurboMountSvelte as TurboMount, TurboMountSvelte, plugin as default };

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{TurboMountController as t,TurboMount as s}from"turbo-mount";const e={framework:"svelte",controller:class extends t{constructor(){super(...arguments),this.framework="svelte"}mountComponent(t,s,e){const o=new s({target:t,props:e});return()=>{o.$destroy()}}}};class o extends s{constructor(t){super(Object.assign(Object.assign({},t),{plugin:e}))}}export{o as TurboMount,o as TurboMountSvelte,e as default};
 //# 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","../../src/plugins/svelte/turbo-mount-svelte-controller.ts"],"sourcesContent":["import { Plugin, TurboMount, TurboMountProps } from \"turbo-mount\";\n\nimport { TurboMountSvelteController } from \"./turbo-mount-svelte-controller\";\n\nconst plugin: Plugin = {\n  framework: \"svelte\",\n  controller: TurboMountSvelteController,\n};\n\nexport class TurboMountSvelte<T> extends TurboMount<T> {\n  constructor(props: Omit<TurboMountProps, \"plugin\">) {\n    super({ ...props, plugin });\n  }\n}\n\nexport { TurboMountSvelte as TurboMount };\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 () => {\n      component.$destroy();\n    };\n  }\n}\n"],"names":["plugin","framework","controller","TurboMountController","constructor","this","mountComponent","el","Component","props","component","target","$destroy","TurboMountSvelte","TurboMount","super","Object","assign"],"mappings":"mEAIA,MAAMA,EAAiB,CACrBC,UAAW,SACXC,WCHI,cAA0CC,EAAhD,WAAAC,uBACEC,KAASJ,UAAG,QASb,CAPC,cAAAK,CAAeC,EAAaC,EAA0BC,GACpD,MAAMC,EAAY,IAAIF,EAAU,CAAEG,OAAQJ,EAAIE,UAE9C,MAAO,KACLC,EAAUE,UAAU,CAEvB,IDHG,MAAOC,UAA4BC,EACvC,WAAAV,CAAYK,GACVM,MAAWC,OAAAC,OAAAD,OAAAC,OAAA,GAAAR,GAAO,CAAAT,WACnB"}

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

@@ -1,5 +1,5 @@
+import { TurboMountController, TurboMount } from 'turbo-mount';
 import { createApp } from 'vue';
-import { TurboMountController } from 'turbo-mount';
 
 class TurboMountVueController extends TurboMountController {
     constructor() {
@@ -9,13 +9,20 @@ class TurboMountVueController extends TurboMountController {
     mountComponent(el, Component, props) {
         const app = createApp(Component, props);
         app.mount(el);
-        return () => { app.unmount(); };
+        return () => {
+            app.unmount();
+        };
     }
 }
 
 const plugin = {
     framework: "vue",
-    controller: TurboMountVueController
+    controller: TurboMountVueController,
 };
+class TurboMountVue extends TurboMount {
+    constructor(props) {
+        super(Object.assign(Object.assign({}, props), { plugin }));
+    }
+}
 
-export { plugin as default };
+export { TurboMountVue as TurboMount, TurboMountVue, plugin as default };

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{TurboMountController as o,TurboMount as t}from"turbo-mount";import{createApp as r}from"vue";const n={framework:"vue",controller:class extends o{constructor(){super(...arguments),this.framework="vue"}mountComponent(o,t,n){const s=r(t,n);return s.mount(o),()=>{s.unmount()}}}};class s extends t{constructor(o){super(Object.assign(Object.assign({},o),{plugin:n}))}}export{s as TurboMount,s as TurboMountVue,n as default};
 //# 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","../../src/plugins/vue/turbo-mount-vue-controller.ts"],"sourcesContent":["import { Plugin, TurboMount, TurboMountProps } from \"turbo-mount\";\n\nimport { TurboMountVueController } from \"./turbo-mount-vue-controller\";\n\nconst plugin: Plugin = {\n  framework: \"vue\",\n  controller: TurboMountVueController,\n};\n\nexport class TurboMountVue<T> extends TurboMount<T> {\n  constructor(props: Omit<TurboMountProps, \"plugin\">) {\n    super({ ...props, plugin });\n  }\n}\n\nexport { TurboMountVue as TurboMount };\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 () => {\n      app.unmount();\n    };\n  }\n}\n"],"names":["plugin","framework","controller","TurboMountController","constructor","this","mountComponent","el","Component","props","app","createApp","mount","unmount","TurboMountVue","TurboMount","super","Object","assign"],"mappings":"mGAIA,MAAMA,EAAiB,CACrBC,UAAW,MACXC,WCHI,cAAuCC,EAA7C,WAAAC,uBACEC,KAASJ,UAAG,KAUb,CARC,cAAAK,CAAeC,EAAaC,EAAgBC,GAC1C,MAAMC,EAAMC,EAAUH,EAAWC,GAGjC,OAFAC,EAAIE,MAAML,GAEH,KACLG,EAAIG,SAAS,CAEhB,IDJG,MAAOC,UAAyBC,EACpC,WAAAX,CAAYK,GACVO,MAAWC,OAAAC,OAAAD,OAAAC,OAAA,GAAAT,GAAO,CAAAT,WACnB"}

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

@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus';
+import { Controller, Application } from '@hotwired/stimulus';
 
 class TurboMountController extends Controller {
     connect() {
@@ -15,7 +15,7 @@ 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);
@@ -31,22 +31,35 @@ class TurboMountController extends Controller {
 }
 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) {
+    constructor({ application, plugin }) {
         var _a;
         this.components = new Map();
-        this.application = props.application;
-        this.framework = props.plugin.framework;
-        this.baseController = props.plugin.controller;
+        this.application = this.findOrStartApplication(application);
+        this.framework = plugin.framework;
+        this.baseController = 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);
         }
     }
+    findOrStartApplication(hydratedApp) {
+        let application = hydratedApp || window.Stimulus;
+        if (!application) {
+            application = Application.start();
+            window.Stimulus = application;
+        }
+        return application;
+    }
     register(name, component, controller) {
         controller || (controller = this.baseController);
         if (this.components.has(name)) {
@@ -54,7 +67,7 @@ class TurboMount {
         }
         this.components.set(name, component);
         if (controller) {
-            const controllerName = `turbo-mount-${this.framework}-${this.camelToKebabCase(name)}`;
+            const controllerName = `turbo-mount-${this.framework}-${camelToKebabCase(name)}`;
             this.application.register(controllerName, controller);
         }
     }
@@ -65,9 +78,6 @@ class TurboMount {
         }
         return component;
     }
-    camelToKebabCase(str) {
-        return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-    }
 }
 
 export { TurboMount, TurboMountController };

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{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.hasMountTarget?this.mountTarget: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)}}n.values={props:Object,component:String},n.targets=["mount"];class e{constructor({application:t,plugin:o}){var n;this.components=new Map,this.application=this.findOrStartApplication(t),this.framework=o.framework,this.baseController=o.controller,(n=this.application).turboMount||(n.turboMount={}),this.application.turboMount[this.framework]=this,this.baseController&&this.application.register(`turbo-mount-${this.framework}`,this.baseController)}findOrStartApplication(t){let n=t||window.Stimulus;return n||(n=o.start(),window.Stimulus=n),n}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}-${e=t,e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}`;this.application.register(o,n)}var e}resolve(t){const o=this.components.get(t);if(!o)throw new Error(`Unknown component: ${t}`);return o}}export{e as TurboMount,n as TurboMountController};
 //# 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 abstract class TurboMountController<T> extends Controller {\n  static values = {\n    props: Object,\n    component: String,\n  };\n  static targets = [\"mount\"];\n\n  declare readonly propsValue: object;\n  declare readonly componentValue: string;\n  declare readonly hasMountTarget: boolean;\n  declare readonly mountTarget: Element;\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(\n      this.mountElement,\n      this.resolvedComponent,\n      this.componentProps,\n    );\n  }\n\n  disconnect() {\n    this.umountComponent();\n  }\n\n  propsValueChanged() {\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.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","import { Application, ControllerConstructor } from \"@hotwired/stimulus\";\n\nimport { camelToKebabCase } from \"./helpers\";\n\ndeclare global {\n  interface Window {\n    Stimulus?: Application;\n  }\n}\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 type TurboMountProps = {\n  application?: Application;\n  plugin: Plugin;\n};\n\nexport class TurboMount<T> {\n  components: Map<string, T>;\n  application: ApplicationWithTurboMount<T>;\n  framework: string;\n  baseController?: ControllerConstructor;\n\n  constructor({ application, plugin }: TurboMountProps) {\n    this.components = new Map();\n    this.application = this.findOrStartApplication(application);\n    this.framework = plugin.framework;\n    this.baseController = plugin.controller;\n\n    this.application.turboMount ||= {};\n    this.application.turboMount[this.framework] = this;\n\n    if (this.baseController) {\n      this.application.register(\n        `turbo-mount-${this.framework}`,\n        this.baseController,\n      );\n    }\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<T>;\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}-${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","export const camelToKebabCase = (str: string) => {\n  return str.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n};\n"],"names":["TurboMountController","Controller","connect","this","_umountComponentCallback","mountComponent","mountElement","resolvedComponent","componentProps","disconnect","umountComponent","propsValueChanged","propsValue","hasMountTarget","mountTarget","element","resolveComponent","componentValue","undefined","component","application","turboMount","framework","resolve","values","props","Object","String","targets","TurboMount","constructor","plugin","components","Map","findOrStartApplication","baseController","controller","_a","register","hydratedApp","window","Stimulus","Application","start","name","has","Error","set","controllerName","str","replace","toLowerCase","get"],"mappings":"iEAGM,MAAgBA,UAAgCC,EAkBpD,OAAAC,GACEC,KAAKC,2BAALD,KAAKC,yBAA6BD,KAAKE,eACrCF,KAAKG,aACLH,KAAKI,kBACLJ,KAAKK,gBAER,CAED,UAAAC,GACEN,KAAKO,iBACN,CAED,iBAAAC,GACER,KAAKO,kBACLP,KAAKC,2BAALD,KAAKC,yBAA6BD,KAAKE,eACrCF,KAAKG,aACLH,KAAKI,kBACLJ,KAAKK,gBAER,CAED,kBAAIA,GACF,OAAOL,KAAKS,UACb,CAED,gBAAIN,GACF,OAAOH,KAAKU,eAAiBV,KAAKW,YAAcX,KAAKY,OACtD,CAED,qBAAIR,GACF,OAAOJ,KAAKa,iBAAiBb,KAAKc,eACnC,CAED,eAAAP,GACEP,KAAKC,0BAA4BD,KAAKC,2BACtCD,KAAKC,8BAA2Bc,CACjC,CAED,gBAAAF,CAAiBG,GAEf,OADYhB,KAAKiB,YACNC,WAAWlB,KAAKmB,WAAWC,QAAQJ,EAC/C,EA1DMnB,EAAAwB,OAAS,CACdC,MAAOC,OACPP,UAAWQ,QAEN3B,EAAA4B,QAAU,CAAC,eCgBPC,EAMX,WAAAC,EAAYV,YAAEA,EAAWW,OAAEA,UACzB5B,KAAK6B,WAAa,IAAIC,IACtB9B,KAAKiB,YAAcjB,KAAK+B,uBAAuBd,GAC/CjB,KAAKmB,UAAYS,EAAOT,UACxBnB,KAAKgC,eAAiBJ,EAAOK,YAE7BC,EAAAlC,KAAKiB,aAAYC,aAAAgB,EAAAhB,WAAe,CAAA,GAChClB,KAAKiB,YAAYC,WAAWlB,KAAKmB,WAAanB,KAE1CA,KAAKgC,gBACPhC,KAAKiB,YAAYkB,SACf,eAAenC,KAAKmB,YACpBnB,KAAKgC,eAGV,CAEO,sBAAAD,CAAuBK,GAC7B,IAAInB,EAAcmB,GAAeC,OAAOC,SAMxC,OAJKrB,IACHA,EAAcsB,EAAYC,QAC1BH,OAAOC,SAAWrB,GAEbA,CACR,CAED,QAAAkB,CAASM,EAAczB,EAAciB,GAEnC,GADAA,IAAAA,EAAejC,KAAKgC,gBAChBhC,KAAK6B,WAAWa,IAAID,GACtB,MAAM,IAAIE,MAAM,cAAcF,6BAIhC,GAFAzC,KAAK6B,WAAWe,IAAIH,EAAMzB,GAEtBiB,EAAY,CACd,MAAMY,EAAiB,eAAe7C,KAAKmB,aCjEhB2B,EDiE8CL,EChEtEK,EAAIC,QAAQ,kBAAmB,SAASC,gBDiE3ChD,KAAKiB,YAAYkB,SAASU,EAAgBZ,EAC3C,CCnE2B,IAACa,CDoE9B,CAED,OAAA1B,CAAQqB,GACN,MAAMzB,EAAYhB,KAAK6B,WAAWoB,IAAIR,GACtC,IAAKzB,EACH,MAAM,IAAI2B,MAAM,sBAAsBF,KAExC,OAAOzB,CACR"}

data/lib/turbo/mount/helpers.rb

@@ -3,27 +3,30 @@
 module Turbo
   module Mount
     module Helpers
-      def turbo_mount_component(component_name, framework:, props: {}, tag: "div", **attrs)
+      def turbo_mount_component(component_name, framework:, 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-#{framework}-#{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)
+        return content_tag(tag, nil, attrs) unless block
+
+        content_tag(tag, nil, attrs) { capture(controller_name, &block) }
       end
 
-      def turbo_mount_react_component(component_name, **attrs)
-        turbo_mount_component(component_name, framework: "react", **attrs)
+      def turbo_mount_react_component(component_name, **attrs, &block)
+        turbo_mount_component(component_name, framework: "react", **attrs, &block)
       end
 
-      def turbo_mount_svelte_component(component_name, **attrs)
-        turbo_mount_component(component_name, framework: "svelte", **attrs)
+      def turbo_mount_svelte_component(component_name, **attrs, &block)
+        turbo_mount_component(component_name, framework: "svelte", **attrs, &block)
       end
 
-      def turbo_mount_vue_component(component_name, **attrs)
-        turbo_mount_component(component_name, framework: "vue", **attrs)
+      def turbo_mount_vue_component(component_name, **attrs, &block)
+        turbo_mount_component(component_name, framework: "vue", **attrs, &block)
       end
     end
   end

data/lib/turbo/mount/version.rb

@@ -2,6 +2,6 @@
 
 module Turbo
   module Mount
-    VERSION = "0.2.0"
+    VERSION = "0.2.3"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo-mount
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.3
 platform: ruby
 authors:
 - Svyatoslav Kryukov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-05-09 00:00:00.000000000 Z
+date: 2024-05-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties