turbo-mount 0.1.0 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f99f1305fc0312f04a390c3d7992e5dba4d8aba4bf14349a022cd2af528b5ff
-  data.tar.gz: b29a4f83ee2f6a3ef7b069908644273df3d07d656dee5b963cdc983c6aeebc39
+  metadata.gz: a4e82785211d3df4bf66f934af1bdc026e9f7a9b0f3074749eda539fedca318b
+  data.tar.gz: 93f5c90a4e336851ded6f763fb5636b4423323594ce4db06a610761e8e30efd5
 SHA512:
-  metadata.gz: ef8a6e260eadec1dad5aa2aff35770d5713c80d31a6a84d0956b7af835cfa5eb994506173cc215dd04cde9da9f3a1a8db15320c95842d21f759eaf6e5453c2fc
-  data.tar.gz: 2d6975c85965b3772089a43e8a6a998537f2c2e15c3dcb41e69e00851fc069eadbac021b44eed119bc11644ffb290b0f26036f11658bb79473c10eedce058179
+  metadata.gz: 2eba5a80216047b8a5d1f20b938f1eb5b49ca34646dfb555e4563e053bde2029e62ad10fc88880b2256ee1dcabc0d77b66270740130c45d17d19e065200778f4
+  data.tar.gz: 82a3843e93c3b9c405344fd85145985ad4e2bf7cdf48bad43526fd264a004bb87c67ea79213066bf7b9c74ec25dc161dcc24123eb8828e590ffff95d1ba9fc48

data/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning].
 
 ## [Unreleased]
 
+## [0.2.2] - 2024-05-09
+
+### Fixed
+
+- Export plugins. ([@skryukov])
+
+## [0.2.0] - 2024-05-09
+
+### Added
+
+- New API with plugins. ([@skryukov])
+
 ## [0.1.0] - 2024-05-07
 
 ### Added
@@ -15,7 +27,9 @@ and this project adheres to [Semantic Versioning].
 
 [@skryukov]: https://github.com/skryukov
 
-[Unreleased]: https://github.com/skryukov/turbo-mount/compare/v0.1.0...HEAD
+[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
 [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

@@ -20,12 +20,14 @@ First, you need to initialize `TurboMount` and register the components you want
 
 ```js
 import { Application } from "@hotwired/stimulus"
-import { TurboMount } from "turbo-mount"
 
 const application = Application.start()
 
+import { TurboMount } from "turbo-mount"
+import plugin from "turbo-mount/react"
+
 // Initialize TurboMount and register the react stimulus controller
-const turboMount = new TurboMount({application, framework: "react"});
+const turboMount = new TurboMount({application, plugin});
 
 // Register the components you want to use
 import { SketchPicker } from 'react-color'
@@ -63,6 +65,12 @@ export default class extends TurboMountReactController {
 }
 ```
 
+Then pass this controller the register method:
+
+```js
+turboMount.register('SketchPicker', SketchPicker, TurboMountReactController);
+```
+
 ## Development
 
 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.

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

@@ -0,0 +1,22 @@
+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 root = createRoot(el);
+        root.render(createElement(Component, props));
+        return () => { root.unmount(); };
+    }
+}
+
+const plugin = {
+    framework: "react",
+    controller: TurboMountReactController
+};
+
+export { plugin as default };

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

@@ -0,0 +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};
+//# sourceMappingURL=react.min.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,19 @@
+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(); };
+    }
+}
+
+const plugin = {
+    framework: "svelte",
+    controller: TurboMountSvelteController
+};
+
+export { plugin as default };

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

@@ -0,0 +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};
+//# sourceMappingURL=svelte.min.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +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};
+//# sourceMappingURL=vue.min.js.map

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

@@ -0,0 +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"}

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

@@ -1,7 +1,4 @@
 import { Controller } from '@hotwired/stimulus';
-import { createElement } from 'react';
-import { createRoot } from 'react-dom/client';
-import { createApp } from 'vue';
 
 class TurboMountController extends Controller {
     connect() {
@@ -12,7 +9,7 @@ class TurboMountController extends Controller {
     }
     propsValueChanged() {
         this.umountComponent();
-        this._umountComponentCallback = this.mountComponent(this.mountElement, this.resolvedComponent, this.componentProps);
+        this._umountComponentCallback || (this._umountComponentCallback = this.mountComponent(this.mountElement, this.resolvedComponent, this.componentProps));
     }
     get componentProps() {
         return this.propsValue;
@@ -37,54 +34,15 @@ TurboMountController.values = {
     component: String
 };
 
-class TurboMountReactController extends TurboMountController {
-    constructor() {
-        super(...arguments);
-        this.framework = "react";
-    }
-    mountComponent(el, Component, props) {
-        const root = createRoot(el);
-        root.render(createElement(Component, props));
-        return root.unmount;
-    }
-}
-
-class TurboMountSvelteController extends TurboMountController {
-    constructor() {
-        super(...arguments);
-        this.framework = "svelte";
-    }
-    mountComponent(el, Component, props) {
-        const component = new Component({ target: el, props });
-        return component.$destroy;
-    }
-}
-
-class TurboMountVueController extends TurboMountController {
-    constructor() {
-        super(...arguments);
-        this.framework = "vue";
-    }
-    mountComponent(el, Component, props) {
-        const app = createApp(Component, props);
-        app.mount(el);
-        return app.unmount;
-    }
-}
-
 class TurboMount {
     constructor(props) {
         var _a;
         this.components = new Map();
         this.application = props.application;
-        this.framework = props.framework;
-        this.baseController = undefined;
-        if (!this.framework) {
-            throw new Error('framework is required');
-        }
+        this.framework = props.plugin.framework;
+        this.baseController = props.plugin.controller;
         (_a = this.application).turboMount || (_a.turboMount = {});
         this.application.turboMount[this.framework] = this;
-        this.baseController = TurboMount.frameworkControllers.get(this.framework);
         if (this.baseController) {
             this.application.register(`turbo-mount-${this.framework}`, this.baseController);
         }
@@ -111,9 +69,5 @@ class TurboMount {
         return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
     }
 }
-TurboMount.frameworkControllers = new Map();
-TurboMount.frameworkControllers.set("react", TurboMountReactController);
-TurboMount.frameworkControllers.set("svelte", TurboMountSvelteController);
-TurboMount.frameworkControllers.set("vue", TurboMountVueController);
 
-export { TurboMount, TurboMountController, TurboMountReactController, TurboMountSvelteController, TurboMountVueController };
+export { TurboMount, TurboMountController };

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

@@ -1,2 +1,2 @@
-import{Controller as t}from"@hotwired/stimulus";import{createElement as o}from"react";import{createRoot as e}from"react-dom/client";import{createApp as r}from"vue";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.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)}}n.values={props:Object,component:String};class s extends n{constructor(){super(...arguments),this.framework="react"}mountComponent(t,r,n){const s=e(t);return s.render(o(r,n)),s.unmount}}class m extends n{constructor(){super(...arguments),this.framework="svelte"}mountComponent(t,o,e){return new o({target:t,props:e}).$destroy}}class i extends n{constructor(){super(...arguments),this.framework="vue"}mountComponent(t,o,e){const n=r(o,e);return n.mount(t),n.unmount}}class a{constructor(t){var o;if(this.components=new Map,this.application=t.application,this.framework=t.framework,this.baseController=void 0,!this.framework)throw new Error("framework is required");(o=this.application).turboMount||(o.turboMount={}),this.application.turboMount[this.framework]=this,this.baseController=a.frameworkControllers.get(this.framework),this.baseController&&this.application.register(`turbo-mount-${this.framework}`,this.baseController)}register(t,o,e){if(e||(e=this.baseController),this.components.has(t))throw new Error(`Component '${t}' is already registered.`);if(this.components.set(t,o),e){const o=`turbo-mount-${this.framework}-${this.camelToKebabCase(t)}`;this.application.register(o,e)}}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()}}a.frameworkControllers=new Map,a.frameworkControllers.set("react",s),a.frameworkControllers.set("svelte",m),a.frameworkControllers.set("vue",i);export{a as TurboMount,n as TurboMountController,s as TurboMountReactController,m as TurboMountSvelteController,i as TurboMountVueController};
+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};
 //# 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/controllers/turbo-mount-controller.ts","../src/controllers/turbo-mount-react-controller.ts","../src/turbo-mount.ts"],"sourcesContent":["import {Controller, ControllerConstructor} 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: string, props: object): () => void;\n\n    umountComponentCallback?: () => void;\n\n    connect() {\n        this.umountComponentCallback ||= this.mountComponent(this.element, this.componentValue, this.propsValue);\n    }\n\n    disconnect() {\n        this.umountComponent();\n    }\n\n    propsValueChanged() {\n        this.umountComponent();\n        this.umountComponentCallback = this.mountComponent(this.element, this.componentValue, this.componentProps);\n    }\n\n    get componentProps() {\n        return this.propsValue;\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    static shouldRegister(controllerConstructor: ControllerConstructor, identifier: string, application: ApplicationWithTurboMount<any>) {\n        const framework = identifier.split('-')[2];\n        console.log({\n            framework,\n            identifier,\n            modules: application.router.modules.map(m => m.identifier)\n        })\n        if (framework && identifier.startsWith(`turbo-mount-${framework}-`)\n            && application.router.modules.find(m => m.identifier === identifier)) {\n            console.log(controllerConstructor, application.turboMount[framework].baseController)\n            return controllerConstructor !== application.turboMount[framework].baseController;\n        }\n\n        return true;\n    }\n}\n\n\n","import {createElement, ComponentType} from \"react\";\nimport {createRoot} from \"react-dom/client\";\n\nimport {TurboMountController} from \"./turbo-mount-controller\";\n\nexport class TurboMountReactController extends TurboMountController<ComponentType> {\n    framework = \"react\"\n\n    mountComponent(el: Element, component: string, props: object) {\n        const Component = this.resolveComponent(component);\n        const root = createRoot(el);\n\n        root.render(createElement(Component, props))\n\n        return () => {\n            root.unmount()\n        }\n    }\n}\n","import {Application, ControllerConstructor} from '@hotwired/stimulus';\nimport {TurboMountReactController} from \"./controllers\";\n\nexport interface ApplicationWithTurboMount<T> extends Application {\n    turboMount: { [framework: string]: TurboMount<T> };\n}\n\nexport class TurboMount<T> {\n    static frameworkControllers: Map<string, ControllerConstructor> = new Map();\n\n    components: Map<string, T>;\n    application: ApplicationWithTurboMount<T>;\n    framework: string;\n    baseController?: ControllerConstructor;\n\n    constructor(props: { application: Application, framework: string }) {\n        this.components = new Map();\n        this.application = props.application as ApplicationWithTurboMount<T>;\n        this.framework = props.framework;\n        this.baseController = undefined;\n\n        if (!this.framework) {\n            throw new Error('framework is required');\n        }\n\n        this.application.turboMount ||= {};\n        this.application.turboMount[this.framework] = this;\n\n        this.baseController = TurboMount.frameworkControllers.get(this.framework);\n\n        if (this.baseController) {\n            this.application.register(`turbo-mount-${this.framework}`, this.baseController);\n        }\n    }\n\n    camelToKebabCase(str: string) {\n        return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n    }\n\n    register(name: string, component: T) {\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 (this.baseController) {\n            const controllerName = `turbo-mount-${this.framework}-${this.camelToKebabCase(name)}`;\n            if (!this.application.router.modules.find(m => m.identifier === controllerName)) {\n                this.application.register(controllerName, this.baseController);\n            }\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\nTurboMount.frameworkControllers.set(\"react\", TurboMountReactController)\n"],"names":["TurboMountController","Controller","connect","this","umountComponentCallback","mountComponent","element","componentValue","propsValue","disconnect","umountComponent","propsValueChanged","componentProps","undefined","resolveComponent","component","application","turboMount","framework","resolve","shouldRegister","controllerConstructor","identifier","split","console","log","modules","router","map","m","startsWith","find","baseController","values","props","Object","String","TurboMountReactController","constructor","el","Component","root","createRoot","render","createElement","unmount","TurboMount","components","Map","Error","_a","frameworkControllers","get","register","camelToKebabCase","str","replace","toLowerCase","name","has","set","controllerName"],"mappings":"oIAGM,MAAgBA,UAAgCC,EAclD,OAAAC,GACIC,KAAKC,0BAALD,KAAKC,wBAA4BD,KAAKE,eAAeF,KAAKG,QAASH,KAAKI,eAAgBJ,KAAKK,YAChG,CAED,UAAAC,GACIN,KAAKO,iBACR,CAED,iBAAAC,GACIR,KAAKO,kBACLP,KAAKC,wBAA0BD,KAAKE,eAAeF,KAAKG,QAASH,KAAKI,eAAgBJ,KAAKS,eAC9F,CAED,kBAAIA,GACA,OAAOT,KAAKK,UACf,CAED,eAAAE,GACIP,KAAKC,yBAA2BD,KAAKC,0BACrCD,KAAKC,6BAA0BS,CAClC,CAED,gBAAAC,CAAiBC,GAEb,OADYZ,KAAKa,YACNC,WAAWd,KAAKe,WAAWC,QAAQJ,EACjD,CAED,qBAAOK,CAAeC,EAA8CC,EAAoBN,GACpF,MAAME,EAAYI,EAAWC,MAAM,KAAK,GAMxC,OALAC,QAAQC,IAAI,CACRP,YACAI,aACAI,QAASV,EAAYW,OAAOD,QAAQE,KAAIC,GAAKA,EAAEP,iBAE/CJ,GAAaI,EAAWQ,WAAW,eAAeZ,OAC/CF,EAAYW,OAAOD,QAAQK,MAAKF,GAAKA,EAAEP,aAAeA,OACzDE,QAAQC,IAAIJ,EAAuBL,EAAYC,WAAWC,GAAWc,gBAC9DX,IAA0BL,EAAYC,WAAWC,GAAWc,eAI1E,EAtDMhC,EAAAiC,OAAS,CACZC,MAAOC,OACPpB,UAAWqB,QCDb,MAAOC,UAAkCrC,EAA/C,WAAAsC,uBACInC,KAASe,UAAG,OAYf,CAVG,cAAAb,CAAekC,EAAaxB,EAAmBmB,GAC3C,MAAMM,EAAYrC,KAAKW,iBAAiBC,GAClC0B,EAAOC,EAAWH,GAIxB,OAFAE,EAAKE,OAAOC,EAAcJ,EAAWN,IAE9B,KACHO,EAAKI,SAAS,CAErB,QCVQC,EAQT,WAAAR,CAAYJ,SAMR,GALA/B,KAAK4C,WAAa,IAAIC,IACtB7C,KAAKa,YAAckB,EAAMlB,YACzBb,KAAKe,UAAYgB,EAAMhB,UACvBf,KAAK6B,oBAAiBnB,GAEjBV,KAAKe,UACN,MAAM,IAAI+B,MAAM,0BAGpBC,EAAA/C,KAAKa,aAAYC,aAAAiC,EAAAjC,WAAe,CAAA,GAChCd,KAAKa,YAAYC,WAAWd,KAAKe,WAAaf,KAE9CA,KAAK6B,eAAiBc,EAAWK,qBAAqBC,IAAIjD,KAAKe,WAE3Df,KAAK6B,gBACL7B,KAAKa,YAAYqC,SAAS,eAAelD,KAAKe,YAAaf,KAAK6B,eAEvE,CAED,gBAAAsB,CAAiBC,GACb,OAAOA,EAAIC,QAAQ,kBAAmB,SAASC,aAClD,CAED,QAAAJ,CAASK,EAAc3C,GACnB,GAAIZ,KAAK4C,WAAWY,IAAID,GACpB,MAAM,IAAIT,MAAM,cAAcS,6BAIlC,GAFAvD,KAAK4C,WAAWa,IAAIF,EAAM3C,GAEtBZ,KAAK6B,eAAgB,CACrB,MAAM6B,EAAiB,eAAe1D,KAAKe,aAAaf,KAAKmD,iBAAiBI,KACzEvD,KAAKa,YAAYW,OAAOD,QAAQK,MAAKF,GAAKA,EAAEP,aAAeuC,KAC5D1D,KAAKa,YAAYqC,SAASQ,EAAgB1D,KAAK6B,eAEtD,CACJ,CAED,OAAAb,CAAQuC,GACJ,MAAM3C,EAAYZ,KAAK4C,WAAWK,IAAIM,GACtC,IAAK3C,EACD,MAAM,IAAIkC,MAAM,sBAAsBS,KAE1C,OAAO3C,CACV,EAnDM+B,EAAAK,qBAA2D,IAAIH,IAsD1EF,EAAWK,qBAAqBS,IAAI,QAASvB"}
+{"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"}

data/lib/turbo/mount/engine.rb

@@ -12,7 +12,10 @@ module Turbo
       # config.after_initialize do
       #   config.assets.precompile -= Turbo::Mount::Engine::PRECOMPILE_ASSETS
       # end
-      PRECOMPILE_ASSETS = %w[turbo-mount.js turbo-mount.min.js turbo-mount.min.js.map].freeze
+      FILES = %w[turbo-mount turbo-mount/react turbo-mount/vue turbo-mount/svelte].freeze
+      PRECOMPILE_ASSETS = FILES.flat_map do |framework|
+        %w[js min.js min.js.map].map { |type| "#{framework}.#{type}" }
+      end.freeze
 
       initializer "turbo-mount.assets" do
         if Rails.application.config.respond_to?(:assets)

data/lib/turbo/mount/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo-mount
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.2
 platform: ruby
 authors:
 - Svyatoslav Kryukov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-05-07 00:00:00.000000000 Z
+date: 2024-05-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -38,6 +38,15 @@ files:
 - app/assets/javascripts/turbo-mount.js
 - app/assets/javascripts/turbo-mount.min.js
 - app/assets/javascripts/turbo-mount.min.js.map
+- app/assets/javascripts/turbo-mount/react.js
+- app/assets/javascripts/turbo-mount/react.min.js
+- app/assets/javascripts/turbo-mount/react.min.js.map
+- app/assets/javascripts/turbo-mount/svelte.js
+- app/assets/javascripts/turbo-mount/svelte.min.js
+- app/assets/javascripts/turbo-mount/svelte.min.js.map
+- app/assets/javascripts/turbo-mount/vue.js
+- app/assets/javascripts/turbo-mount/vue.min.js
+- app/assets/javascripts/turbo-mount/vue.min.js.map
 - lib/turbo/mount.rb
 - lib/turbo/mount/engine.rb
 - lib/turbo/mount/helpers.rb