Setup package lint

.github/workflows/main.yml

@@ -14,7 +14,7 @@ jobs:
     strategy:
       matrix:
         ruby:
-          - '3.2.3'
+          - "3.3"
 
     steps:
     - uses: actions/checkout@v4

.github/workflows/package.yml

@@ -0,0 +1,25 @@
+name: Package
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+
+jobs:
+  lint:
+    defaults:
+      run:
+        working-directory: "packages/turbo-mount"
+
+    runs-on: ubuntu-latest
+    name: Run CI Lint
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - run: npm install --ignore-scripts
+      - run: npm run ci

packages/turbo-mount/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2017,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  }
+}

packages/turbo-mount/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2
+}

packages/turbo-mount/package.json

@@ -13,11 +13,14 @@
     "url": "https://github.com/skryukov/turbo-mount/issues"
   },
   "scripts": {
+    "lint": "eslint 'src/**/*.ts'",
+    "format": "prettier --write 'src/**/*.ts'",
     "clean": "rm -rf dist",
     "types": "tsc --noEmit false --declaration true --emitDeclarationOnly true --outDir dist/types",
     "build": "npm run types && rollup -c",
     "prerelease": "npm run clean && npm run build && git --no-pager diff && echo && npm pack --dry-run",
-    "copy": "cp dist/{*.js,*.map} ../../app/assets/javascripts/ && mkdir -p ../../app/assets/javascripts/turbo-mount && cp dist/plugins/* ../../app/assets/javascripts/turbo-mount/"
+    "copy": "cp dist/{*.js,*.map} ../../app/assets/javascripts/ && mkdir -p ../../app/assets/javascripts/turbo-mount && cp dist/plugins/* ../../app/assets/javascripts/turbo-mount/",
+    "ci": "npm run lint && npm run build"
   },
   "module": "dist/turbo-mount.js",
   "types": "dist/types/index.d.ts",
@@ -37,6 +40,12 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "^3.2.5",
     "react": ">= 17.0",
     "react-dom": ">= 17.0",
     "rollup": "^2.79.1",

packages/turbo-mount/src/helpers.ts

@@ -1,3 +1,3 @@
 export const camelToKebabCase = (str: string) => {
-    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-}
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+};

packages/turbo-mount/src/index.ts

@@ -1,2 +1,2 @@
-export {TurboMountController} from "./turbo-mount-controller"
-export * from "./turbo-mount"
+export { TurboMountController } from "./turbo-mount-controller";
+export * from "./turbo-mount";

packages/turbo-mount/src/plugins/react/index.ts

@@ -1,10 +1,10 @@
-import {Plugin} from "turbo-mount";
+import { Plugin } from "turbo-mount";
 
-import {TurboMountReactController} from "./turbo-mount-react-controller";
+import { TurboMountReactController } from "./turbo-mount-react-controller";
 
 const plugin: Plugin = {
-    framework: "react",
-    controller: TurboMountReactController
-}
+  framework: "react",
+  controller: TurboMountReactController,
+};
 
 export default plugin;

packages/turbo-mount/src/plugins/react/turbo-mount-react-controller.ts

@@ -1,14 +1,16 @@
-import {ComponentType, createElement} from "react";
-import {createRoot} from "react-dom/client";
-import {TurboMountController} from "turbo-mount";
+import { ComponentType, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { TurboMountController } from "turbo-mount";
 
 export class TurboMountReactController extends TurboMountController<ComponentType> {
-    framework = "react"
+  framework = "react";
 
-    mountComponent(el: Element, Component: ComponentType, props: object) {
-        const root = createRoot(el);
-        root.render(createElement(Component, props))
+  mountComponent(el: Element, Component: ComponentType, props: object) {
+    const root = createRoot(el);
+    root.render(createElement(Component, props));
 
-        return () => { root.unmount() }
-    }
+    return () => {
+      root.unmount();
+    };
+  }
 }

packages/turbo-mount/src/plugins/svelte/index.ts

@@ -1,10 +1,10 @@
-import {Plugin} from "turbo-mount";
+import { Plugin } from "turbo-mount";
 
-import {TurboMountSvelteController} from "./turbo-mount-svelte-controller";
+import { TurboMountSvelteController } from "./turbo-mount-svelte-controller";
 
 const plugin: Plugin = {
-    framework: "svelte",
-    controller: TurboMountSvelteController
-}
+  framework: "svelte",
+  controller: TurboMountSvelteController,
+};
 
 export default plugin;

packages/turbo-mount/src/plugins/svelte/turbo-mount-svelte-controller.ts

@@ -1,12 +1,14 @@
-import {ComponentType} from "svelte";
-import {TurboMountController} from "turbo-mount";
+import { ComponentType } from "svelte";
+import { TurboMountController } from "turbo-mount";
 
 export class TurboMountSvelteController extends TurboMountController<ComponentType> {
-    framework = "svelte"
+  framework = "svelte";
 
-    mountComponent(el: Element, Component: ComponentType, props: object) {
-        const component = new Component({ target: el, props })
+  mountComponent(el: Element, Component: ComponentType, props: object) {
+    const component = new Component({ target: el, props });
 
-        return () => { component.$destroy() }
-    }
+    return () => {
+      component.$destroy();
+    };
+  }
 }

packages/turbo-mount/src/plugins/vue/index.ts

@@ -1,10 +1,10 @@
-import {Plugin} from "turbo-mount";
+import { Plugin } from "turbo-mount";
 
-import {TurboMountVueController} from "./turbo-mount-vue-controller";
+import { TurboMountVueController } from "./turbo-mount-vue-controller";
 
 const plugin: Plugin = {
-    framework: "vue",
-    controller: TurboMountVueController
-}
+  framework: "vue",
+  controller: TurboMountVueController,
+};
 
 export default plugin;

packages/turbo-mount/src/plugins/vue/turbo-mount-vue-controller.ts

@@ -1,13 +1,15 @@
 import { createApp, App } from "vue";
-import {TurboMountController} from "turbo-mount";
+import { TurboMountController } from "turbo-mount";
 
 export class TurboMountVueController extends TurboMountController<App> {
-    framework = "vue"
+  framework = "vue";
 
-    mountComponent(el: Element, Component: App, props: object) {
-        const app = createApp(Component, props as Record<string, unknown>);
-        app.mount(el)
+  mountComponent(el: Element, Component: App, props: object) {
+    const app = createApp(Component, props as Record<string, unknown>);
+    app.mount(el);
 
-        return () => { app.unmount() }
-    }
+    return () => {
+      app.unmount();
+    };
+  }
 }

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

@@ -1,58 +1,64 @@
-import {Controller} from "@hotwired/stimulus"
-import {ApplicationWithTurboMount} from "./turbo-mount";
+import { Controller } from "@hotwired/stimulus";
+import { ApplicationWithTurboMount } from "./turbo-mount";
 
 export abstract class TurboMountController<T> extends Controller {
-    static values = {
-        props: Object,
-        component: String
-    }
-    static targets = [ "mount" ]
+  static values = {
+    props: Object,
+    component: String,
+  };
+  static targets = ["mount"];
 
-    declare readonly propsValue: object;
-    declare readonly componentValue: string;
-    declare readonly hasMountTarget: boolean;
-    declare readonly mountTarget: Element;
+  declare readonly propsValue: object;
+  declare readonly componentValue: string;
+  declare readonly hasMountTarget: boolean;
+  declare readonly mountTarget: Element;
 
-    abstract framework: string;
+  abstract framework: string;
 
-    abstract mountComponent(el: Element, Component: T, props: object): () => void;
+  abstract mountComponent(el: Element, Component: T, props: object): () => void;
 
-    _umountComponentCallback?: () => void;
+  _umountComponentCallback?: () => void;
 
-    connect() {
-        this._umountComponentCallback ||= this.mountComponent(this.mountElement, this.resolvedComponent, this.componentProps);
-    }
+  connect() {
+    this._umountComponentCallback ||= this.mountComponent(
+      this.mountElement,
+      this.resolvedComponent,
+      this.componentProps,
+    );
+  }
 
-    disconnect() {
-        this.umountComponent();
-    }
+  disconnect() {
+    this.umountComponent();
+  }
 
-    propsValueChanged() {
-        this.umountComponent();
-        this._umountComponentCallback ||= this.mountComponent(this.mountElement, this.resolvedComponent, this.componentProps);
-    }
+  propsValueChanged() {
+    this.umountComponent();
+    this._umountComponentCallback ||= this.mountComponent(
+      this.mountElement,
+      this.resolvedComponent,
+      this.componentProps,
+    );
+  }
 
-    get componentProps() {
-        return this.propsValue;
-    }
+  get componentProps() {
+    return this.propsValue;
+  }
 
-    get mountElement() {
-        return this.hasMountTarget ? this.mountTarget : this.element;
-    }
+  get mountElement() {
+    return this.hasMountTarget ? this.mountTarget : this.element;
+  }
 
-    get resolvedComponent() {
-        return this.resolveComponent(this.componentValue);
-    }
+  get resolvedComponent() {
+    return this.resolveComponent(this.componentValue);
+  }
 
-    umountComponent() {
-        this._umountComponentCallback && this._umountComponentCallback();
-        this._umountComponentCallback = undefined;
-    }
+  umountComponent() {
+    this._umountComponentCallback && this._umountComponentCallback();
+    this._umountComponentCallback = undefined;
+  }
 
-    resolveComponent(component: string): T {
-        const app = this.application as ApplicationWithTurboMount<T>
-        return app.turboMount[this.framework].resolve(component);
-    }
+  resolveComponent(component: string): T {
+    const app = this.application as ApplicationWithTurboMount<T>;
+    return app.turboMount[this.framework].resolve(component);
+  }
 }
-
-