Enforce Prettier formatting (stimulus-use#151)

.github/workflows/lint.yml

@@ -0,0 +1,33 @@
+name: Lint
+
+on: [push, pull_request]
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '12.x'
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v1
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Yarn install
+        run: yarn install
+
+      - name: Run prettier
+        run: yarn lint

package.json

@@ -16,6 +16,8 @@
     "test": "NODE_ENV=test karma start",
     "test:watch": "NODE_ENV=test karma start --auto-watch --no-single-run",
     "test:treeshake": "$npm_execpath run agadoo",
+    "lint": "prettier --check *.js **/*.js **/*.ts src/**/*.ts spec/**/*.js playground/**/*.js",
+    "format": "prettier --write *.js **/*.js **/*.ts src/**/*.ts spec/**/*.js playground/**/*.js",
     "dev": "tsc -b -w",
     "clean": "rimraf dist *.tsbuildinfo coverage",
     "doc": "docsify serve ./docs",
@@ -59,6 +61,7 @@
     "np": "^6.5.0",
     "postcss": "^8.1.10",
     "postcss-loader": "^4.1.0",
+    "prettier": "^2.3.1",
     "rimraf": "^3.0.2",
     "sinon": "^9.0.3",
     "sinon-chai": "^3.5.0",

playground/controllers/lazy-load_controller.js

@@ -3,7 +3,7 @@ import { LazyLoadController } from 'stimulus-use'
 
 export default class extends LazyLoadController {
   options = {
-    rootMargin: '150px',
+    rootMargin: '150px'
   }
 
   loading(src) {

playground/controllers/modal_controller.js

@@ -4,7 +4,7 @@ import { ClickOutsideController } from 'stimulus-use'
 export default class extends ClickOutsideController {
   static targets = ['content']
   options = {
-    dispatchEvent: false,
+    dispatchEvent: false
   }
 
   clickOutside(e) {

spec/use-memo/use-memo_spec.js

@@ -20,11 +20,11 @@ const scenarios = [
 
 scenarios.forEach(scenario => {
   controllers.forEach(Controller => {
-    describe(`MemoController tests scenario : ${scenario.name} controller type ${Controller.type}`, function() {
+    describe(`MemoController tests scenario : ${scenario.name} controller type ${Controller.type}`, function () {
       let application
       let testLogger
 
-      before('initialize controller', async function() {
+      before('initialize controller', async function () {
         application = Application.start()
         testLogger = new TestLogger()
         application.testLogger = testLogger
@@ -34,17 +34,17 @@ scenarios.forEach(scenario => {
         await nextFrame()
       })
 
-      after('stop application', async function() {
+      after('stop application', async function () {
         await application.stop()
       })
 
-      describe('Memoization of getters', async function() {
-        it('invokes getters a and b only once', async function() {
+      describe('Memoization of getters', async function () {
+        it('invokes getters a and b only once', async function () {
           expect(testLogger.eventsFilter({ type: ['getter:invoke'], name: ['a'] }).length).to.equal(1)
           expect(testLogger.eventsFilter({ type: ['getter:invoke'], name: ['b'] }).length).to.equal(1)
         })
 
-        it('invokes getter c twice', async function() {
+        it('invokes getter c twice', async function () {
           expect(testLogger.eventsFilter({ type: ['getter:invoke'], name: ['c'] }).length).to.equal(2)
         })
       })

src/stimulus-use.ts

@@ -1,5 +1,5 @@
 import { Controller } from 'stimulus'
-import { Logger } from "./logger"
+import { Logger } from './logger'
 
 export interface StimulusUseOptions {
   debug?: boolean
@@ -13,7 +13,7 @@ const defaultOptions = {
   debug: false,
   logger: console,
   dispatchEvent: true,
-  eventPrefix: true,
+  eventPrefix: true
 }
 
 export class StimulusUse {
@@ -28,7 +28,6 @@ export class StimulusUse {
   eventPrefix?: boolean | string
   targetElement: Element
 
-
   constructor(controller: Controller, options: StimulusUseOptions = {}) {
     this.debug = options?.debug ?? (controller.application as any).stimulusUseDebug ?? defaultOptions.debug
     this.logger = options?.logger ?? defaultOptions.logger
@@ -83,7 +82,7 @@ export class StimulusUse {
       bubbles,
       cancelable,
       composed,
-      detail,
+      detail
     })
     return customEvent
   }

src/support/index.ts

@@ -30,20 +30,19 @@ export const extendedEvent = (type: string, event: Event | null, detail: object)
     bubbles,
     cancelable,
     composed,
-    detail,
+    detail
   })
   return customEvent
 }
 
 export function isElementInViewport(el: Element) {
   const rect = el.getBoundingClientRect()
 
-  const windowHeight = (window.innerHeight || document.documentElement.clientHeight)
-  const windowWidth = (window.innerWidth || document.documentElement.clientWidth)
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight
+  const windowWidth = window.innerWidth || document.documentElement.clientWidth
 
-  const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0)
-  const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0)
+  const vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0
+  const horInView = rect.left <= windowWidth && rect.left + rect.width >= 0
 
-  return (vertInView && horInView)
+  return vertInView && horInView
 }
-

src/use-application/application-controller.ts

@@ -1,14 +1,13 @@
 import { Controller, Context } from 'stimulus'
 import { useApplication } from './use-application'
-import { DispatchOptions } from "../use-dispatch"
+import { DispatchOptions } from '../use-dispatch'
 
 export class ApplicationController extends Controller {
   options?: DispatchOptions
   readonly isPreview: boolean = false
   readonly isConnected: boolean = false
   readonly csrfToken: string = ''
 
-
   constructor(context: Context) {
     super(context)
     useApplication(this, this.options)

src/use-application/use-application.ts

@@ -1,12 +1,15 @@
 import { Controller } from 'stimulus'
 import { useDispatch, DispatchOptions } from '../use-dispatch/index'
 
-export const useApplication = (controller: Controller, options: DispatchOptions= {}) => {
+export const useApplication = (controller: Controller, options: DispatchOptions = {}) => {
   // getter to detect Turbolinks preview
   Object.defineProperty(controller, 'isPreview', {
     get(): boolean {
-      return document.documentElement.hasAttribute('data-turbolinks-preview') || document.documentElement.hasAttribute('data-turbo-preview')
-    },
+      return (
+        document.documentElement.hasAttribute('data-turbolinks-preview') ||
+        document.documentElement.hasAttribute('data-turbo-preview')
+      )
+    }
   })
 
   // getter to detect if a Stimulus controller is connected
@@ -20,7 +23,7 @@ export const useApplication = (controller: Controller, options: DispatchOptions=
   Object.defineProperty(controller, 'csrfToken', {
     get(): boolean {
       return this.metaValue('csrf-token')
-    },
+    }
   })
 
   useDispatch(controller, options)
@@ -29,6 +32,6 @@ export const useApplication = (controller: Controller, options: DispatchOptions=
     metaValue(name: string) {
       const element = document.head.querySelector(`meta[name="${name}"]`)
       return element && element.getAttribute('content')
-    },
+    }
   })
 }

src/use-click-outside/use-click-outside.ts

@@ -13,7 +13,7 @@ const defaultOptions = {
   events: ['click', 'touchend'],
   onlyVisible: true,
   dispatchEvent: true,
-  eventPrefix: true,
+  eventPrefix: true
 }
 
 export const useClickOutside = (controller: ClickOutsideComposableController, options: ClickOutsideOptions = {}) => {
@@ -60,7 +60,7 @@ export const useClickOutside = (controller: ClickOutsideComposableController, op
     disconnect() {
       unobserve()
       controllerDisconnect()
-    },
+    }
   })
 
   observe()

src/use-debounce/use-debounce.ts

@@ -15,8 +15,8 @@ const debounce = (fn: Function, wait: number = defaultWait) => {
   let timeoutId: ReturnType<typeof setTimeout> | null = null
 
   return function (this: any): any {
-    const args = arguments;
-    const context = this;
+    const args = arguments
+    const context = this
 
     const callback = () => fn.apply(context, args)
     if (timeoutId) {
@@ -30,14 +30,14 @@ export const useDebounce = (controller: DebounceController, options: DebounceOpt
   const constructor = controller.constructor as any
 
   constructor.debounces?.forEach((func: string | DebounceOptions) => {
-    if (typeof func === "string") {
-      (controller as any)[func] = debounce((controller as any)[func] as Function, options?.wait)
+    if (typeof func === 'string') {
+      ;(controller as any)[func] = debounce((controller as any)[func] as Function, options?.wait)
     }
 
-    if (typeof func === "object") {
+    if (typeof func === 'object') {
       const { name, wait } = func as DebounceOptions
       if (!name) return
-      (controller as any)[name] = debounce((controller as any)[name] as Function, wait || options?.wait)
+      ;(controller as any)[name] = debounce((controller as any)[name] as Function, wait || options?.wait)
     }
   })
 }

src/use-dispatch/use-dispatch.ts

@@ -12,7 +12,7 @@ export interface DispatchOptions extends StimulusUseOptions {
 const defaultOptions = {
   eventPrefix: true,
   bubbles: true,
-  cancelable: true,
+  cancelable: true
 }
 
 export class UseDispatch extends StimulusUse {
@@ -44,13 +44,13 @@ export class UseDispatch extends StimulusUse {
     const event = new CustomEvent(eventNameWithPrefix, {
       detail,
       bubbles,
-      cancelable,
+      cancelable
     })
 
     // dispatch the event from the given element or by default from the root element of the controller
     targetElement.dispatchEvent(event)
 
-    log("dispatch", { eventName: eventNameWithPrefix, detail, bubbles, cancelable })
+    log('dispatch', { eventName: eventNameWithPrefix, detail, bubbles, cancelable })
 
     return event
   }

src/use-hover/hover-controller.ts

@@ -2,8 +2,8 @@ import { Context, Controller } from 'stimulus'
 import { HoverOptions, useHover } from './use-hover'
 
 export class HoverComposableController extends Controller {
-  declare mouseEnter?: () => void;
-  declare mouseLeave?: () => void;
+  declare mouseEnter?: () => void
+  declare mouseLeave?: () => void
 }
 
 export class HoverController extends HoverComposableController {
@@ -17,6 +17,6 @@ export class HoverController extends HoverComposableController {
     })
   }
 
-  declare observe: () => void;
-  declare unobserve: () => void;
+  declare observe: () => void
+  declare unobserve: () => void
 }

src/use-hover/use-hover.ts

@@ -26,14 +26,14 @@ export class UseHover extends StimulusUse {
   }
 
   private onEnter = (event: Event) => {
-    this.call("mouseEnter", event)
+    this.call('mouseEnter', event)
     this.log('mouseEnter', { hover: true })
 
     this.dispatch('mouseEnter', { hover: false })
   }
 
   private onLeave = (event: Event) => {
-    this.call("mouseLeave", event)
+    this.call('mouseLeave', event)
     this.log('mouseLeave', { hover: false })
 
     this.dispatch('mouseLeave', { hover: false })

src/use-idle/idle-controller.ts

@@ -20,5 +20,4 @@ export class IdleController extends IdleComposableController {
 
   declare observe: () => void
   declare unobserve: () => void
-
 }

src/use-idle/use-idle.ts

@@ -17,7 +17,7 @@ const defaultOptions = {
   initialState: false,
   events: defaultEvents,
   dispatchEvent: true,
-  eventPrefix: true,
+  eventPrefix: true
 }
 
 export const useIdle = (controller: IdleComposableController, options: IdleOptions = {}) => {
@@ -94,7 +94,7 @@ export const useIdle = (controller: IdleComposableController, options: IdleOptio
     disconnect() {
       unobserve()
       controllerDisconnect()
-    },
+    }
   })
 
   observe()

src/use-intersection/intersection-controller.ts

@@ -20,5 +20,4 @@ export class IntersectionController extends IntersectionComposableController {
 
   declare observe: () => void
   declare unobserve: () => void
-
 }

src/use-intersection/use-intersection.ts

@@ -9,7 +9,7 @@ export interface IntersectionOptions extends IntersectionObserverInit {
 
 const defaultOptions = {
   dispatchEvent: true,
-  eventPrefix: true,
+  eventPrefix: true
 }
 
 export const useIntersection = (controller: IntersectionComposableController, options: IntersectionOptions = {}) => {
@@ -70,7 +70,7 @@ export const useIntersection = (controller: IntersectionComposableController, op
     disconnect() {
       unobserve()
       controllerDisconnect()
-    },
+    }
   })
 
   observe()

src/use-lazy-load/lazy-load-controller.ts

@@ -21,5 +21,4 @@ export class LazyLoadController extends LazyLoadComposableController {
 
   declare observe: () => void
   declare unobserve: () => void
-
 }

src/use-lazy-load/useLazyLoad.ts

@@ -47,7 +47,7 @@ export const useLazyLoad = (controller: LazyLoadComposableController, options?:
     disconnect() {
       unobserve()
       controllerDisconnect()
-    },
+    }
   })
 
   observe()

src/use-memo/use-memo.ts

@@ -6,7 +6,7 @@ const memoize = (controller: Controller, name: string, value: any) => {
 }
 
 export const useMemo = (controller: Controller) => {
-  (controller.constructor as any).memos?.forEach((getter: string) => {
+  ;(controller.constructor as any).memos?.forEach((getter: string) => {
     memoize(controller, getter, (controller as any)[getter])
   })
 }