refactor: convert to class (#174)

* change to class

* style: simplify path function

* move options to object

* fix merge

* add comment

* revert move out

* style: comment

* comment

* chire: comment

* move funcs

* remove unneeded class variables

* fix removeMouseHelper

* style: comment

Author: bvandrc

README.md

@@ -65,14 +65,14 @@ const route = path(from, to, { useTimestamps: true })
 Usage with puppeteer:
 
 ```js
-import { createCursor } from "ghost-cursor"
+import { GhostCursor } from "ghost-cursor"
 import puppeteer from "puppeteer"
 
 const run = async (url) => {
   const selector = "#sign-up button"
   const browser = await puppeteer.launch({ headless: false });
   const page = await browser.newPage()
-  const cursor = createCursor(page)
+  const cursor = new GhostCursor(page)
   await page.goto(url)
   await page.waitForSelector(selector)
   await cursor.click(selector)
@@ -97,9 +97,9 @@ hovering over the exact center of the element.
 
 ## Methods
 
-#### `createCursor(page: puppeteer.Page, start?: Vector, performRandomMoves?: boolean, defaultOptions?: DefaultOptions, visible?: boolean = false): GhostCursor`
+#### `new GhostCursor(page: puppeteer.Page, { start?: Vector, performRandomMoves?: boolean, defaultOptions?: DefaultOptions, visible?: boolean = false }): GhostCursor`
 
-Creates the ghost cursor. Returns cursor action functions described below.
+Creates the ghost cursor that contains the action functions described below.
 
 - **page:** Puppeteer `page`.
 - **start (optional):** Cursor start position. Default is `{ x: 0, y: 0 }`.

src/__debug__/browser-debug.ts

@@ -1,4 +1,4 @@
-import { type ClickOptions, createCursor } from '../spoof'
+import { type ClickOptions, GhostCursor } from '../spoof'
 import { join } from 'path'
 import { promises as fs } from 'fs'
 import puppeteer from 'puppeteer'
@@ -22,13 +22,16 @@ const cursorDefaultOptions = {
 puppeteer.launch({ headless: false }).then(async (browser) => {
   const page = await browser.newPage()
 
-  const cursor = createCursor(page, undefined, undefined, {
-    move: cursorDefaultOptions,
-    moveTo: cursorDefaultOptions,
-    click: cursorDefaultOptions,
-    scroll: cursorDefaultOptions,
-    getElement: cursorDefaultOptions
-  }, true)
+  const cursor = new GhostCursor(page, {
+    visible: true,
+    defaultOptions: {
+      move: cursorDefaultOptions,
+      moveTo: cursorDefaultOptions,
+      click: cursorDefaultOptions,
+      scroll: cursorDefaultOptions,
+      getElement: cursorDefaultOptions
+    }
+  })
 
   const html = await fs.readFile(join(__dirname, 'custom-page.html'), 'utf8')
 
@@ -41,6 +44,8 @@ puppeteer.launch({ headless: false }).then(async (browser) => {
 
     await cursor.click('#box2')
 
+    await cursor.removeMouseHelper()
+
     await cursor.click('#box3')
 
     await cursor.click('#box1')

src/__test__/spoof.spec.ts

@@ -1,5 +1,5 @@
 import type { ElementHandle, Page } from 'puppeteer'
-import { type ClickOptions, createCursor, GhostCursor } from '../spoof'
+import { type ClickOptions, GhostCursor } from '../spoof'
 import { join } from 'path'
 import { readFileSync } from 'fs'
 import { installMouseHelper } from '../mouse-helper'
@@ -35,10 +35,12 @@ describe('Mouse movements', () => {
       waitUntil: 'networkidle2'
     })
 
-    cursor = createCursor(page, undefined, undefined, {
-      move: cursorDefaultOptions,
-      click: cursorDefaultOptions,
-      moveTo: cursorDefaultOptions
+    cursor = new GhostCursor(page, {
+      defaultOptions: {
+        move: cursorDefaultOptions,
+        click: cursorDefaultOptions,
+        moveTo: cursorDefaultOptions
+      }
     })
   })
 

src/mouse-helper.ts

@@ -1,5 +1,9 @@
 import type { Page } from 'puppeteer'
 
+interface WindowWithMouseHelper extends Window {
+  removeMouseHelper?: () => void
+}
+
 /**
  * This injects a box into the page that moves with the mouse.
  * Useful for debugging.
@@ -8,8 +12,6 @@ import type { Page } from 'puppeteer'
  */
 export async function installMouseHelper (page: Page):
 Promise<{ removeMouseHelper: () => Promise<void> }> {
-  let _removeMouseHelper: undefined | (() => void)
-
   const { identifier: evaluateOnNewDocumentId } = await page.evaluateOnNewDocument(() => {
     const attachListener = (): void => {
       const box = document.createElement('p-mouse-pointer')
@@ -99,7 +101,7 @@ Promise<{ removeMouseHelper: () => Promise<void> }> {
       document.addEventListener('mouseleave', onMouseLeave, true)
       document.addEventListener('mouseenter', onMouseEnter, true)
 
-      _removeMouseHelper = () => {
+      ;(window as WindowWithMouseHelper).removeMouseHelper = () => {
         document.removeEventListener('mousemove', onMouseMove, true)
         document.removeEventListener('mousedown', onMouseDown, true)
         document.removeEventListener('mouseup', onMouseUp, true)
@@ -118,11 +120,9 @@ Promise<{ removeMouseHelper: () => Promise<void> }> {
   })
 
   async function removeMouseHelper (): Promise<void> {
-    if (_removeMouseHelper !== undefined) {
-      await page.evaluate(() => {
-        _removeMouseHelper?.()
-      })
-    }
+    await page.evaluate(() => {
+      ;(window as WindowWithMouseHelper).removeMouseHelper?.()
+    })
 
     await page.removeScriptToEvaluateOnNewDocument(evaluateOnNewDocumentId)
   }