feat: restructure

Author: nicholaswmin

README.md

@@ -1,66 +1,81 @@
-[![test][test-badge]][test]  
+[![test][test-badge]][test]
 
-# pointerdriver  
+# pointerdriver
 
-> Synthesizes and dispatches events.  
-> Mimics the event stream as if it were executed  
-> by an actual human driving the interaction.  
+Synthesize pointer, touch, and gesture events on any page.
 
-```sh
-npm i github:TheProfs/pointerdriver
+```bash
+npx github:TheProfs/pointerdriver
 ```
 
-## Usage  
+## Import in browser console
+
+Open your project in the browser,
+then paste in the DevTools console:
 
 ```js
-import { 
-  DragMotion, GlideMotion, StrokeMotion, 
-  PinchMotion, TwistMotion 
-} from 'pointerdriver'
+const {
+  DragMotion, GlideMotion, StrokeMotion,
+  PinchMotion, TwistMotion
+} = await import('http://127.0.0.1:5619/pointerdriver.js')
+```
+
+## Drive the page
 
+```js
 await new DragMotion(document.querySelector('#el'), [
   [30, 50, 0],
   [60, 80, 16],
 ]).perform()
 
-await new PinchMotion(document.querySelector('#el'), 2, { 
-  x: 60, y: 80 
+await new PinchMotion(document.querySelector('#el'), 2, {
+  x: 60, y: 80
 }).perform()
 
-await new TwistMotion(document.querySelector('#el'), 45, { 
-  x: 60, y: 80 
+await new TwistMotion(document.querySelector('#el'), 45, {
+  x: 60, y: 80
 }).perform()
 ```
 
-- `DragMotion`, `GlideMotion` and `StrokeMotion` take points as `[x, y, ms]`.  
-- `ms` is the timestamp offset since the start of the motion; and must be 
-  *monotonically increasing* and *non-negative*.
-- `PinchMotion` takes `scale` and `{ x, y, distance, steps }`.  
-- `TwistMotion` takes `degrees` and `{ x, y, radius, steps }` (can be negative).  
+| Motion | Device | Gesture |
+|--------|--------|---------|
+| `DragMotion` | mouse | drag across surface |
+| `GlideMotion` | finger | finger draw on surface |
+| `StrokeMotion` | pen | stylus stroke on surface |
+| `PinchMotion` | 2 fingers | pinch together/apart |
+| `TwistMotion` | 2 fingers | rotate around center |
 
-## Spec  
+- `DragMotion`, `GlideMotion` and `StrokeMotion`
+  take points as `[x, y, ms]`.
+- `ms` is the timestamp offset since the start of the motion;
+  must be *monotonically increasing* and *non-negative*.
+- `PinchMotion` takes `scale` and `{ x, y, distance, steps }`.
+- `TwistMotion` takes `degrees` and `{ x, y, radius, steps }`.
 
-Full spec: `docs/spec/spec.md`.  
+## Demo
 
-## Server  
+A PaperJS sketch-pad for testing motions visually.
 
-Run a local static server:  
+1. Start the pointerdriver server: `npx github:TheProfs/pointerdriver`
+2. Start the demo: `cd docs/demo && npm start`
+3. Open the demo in a browser.
+4. Import `pointerdriver` in the browser console (see above).
+5. Drive the `<canvas>` with motions.
 
-```bash
-npx github:TheProfs/pointerdriver
-```
+## Spec
 
-Open `http://127.0.0.1:5619/`.  
+Full spec: `docs/spec/spec.md`.
 
-## Test  
+## Run tests
 
 ```bash
 npm test
 ```
 
-## License  
+## License
 
-MIT  
+[MIT][license]
 
-[test-badge]: https://github.com/TheProfs/pointerdriver/actions/workflows/test.yml/badge.svg  
+[test-badge]: https://github.com/TheProfs/pointerdriver/actions/workflows/test.yml/badge.svg
 [test]: https://github.com/TheProfs/pointerdriver/actions/workflows/test.yml
+[license]: https://opensource.org/licenses/MIT

bin/pointerdriver.js

@@ -1,39 +1,88 @@
 #!/usr/bin/env node
-import { spawn } from 'node:child_process'
-import { resolve } from 'node:path'
+
+import { createServer } from 'node:http'
+import { readFile } from 'node:fs/promises'
+import { extname, join, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-const here = fileURLToPath(new URL('.', import.meta.url))
-const root = resolve(here, '..')
+const root = resolve(fileURLToPath(import.meta.url), '../..')
+const flag = process.argv[2]
 
-const host = '127.0.0.1'
-const port = 5619
+if (['-h', '--help'].includes(flag)) {
+  console.log(`
+  pointerdriver
 
-const npx = process.platform === 'win32' ? 'npx.cmd' : 'npx'
+  Synthesize pointer, touch, and gesture events on any page.
 
-const args = [
-  '--yes',
-  'serve',
-  '--listen',
-  `tcp://${host}:${port}`,
-  '--cors',
-  root,
-]
+  Usage:
+    npx pointerdriver              start the module server
+    npx pointerdriver -s|--skill   print the agent skill reference
+    npx pointerdriver -h|--help    show this help
+  `)
+} else if (['-s', '--skill'].includes(flag)) {
+  const skill = resolve(root, 'bin/skill.md')
 
-const child = spawn(npx, args, { stdio: 'inherit' })
+  process.stdout.write(await readFile(skill, 'utf8'))
+} else {
 
-const exit = code =>
-  process.exit(typeof code === 'number' ? code : 1)
+const host = process.env.HOST || '127.0.0.1'
+const port = +process.env.PORT || 5619
 
-process.on('SIGINT', () => child.kill('SIGINT'))
-process.on('SIGTERM', () => child.kill('SIGTERM'))
+const types = {
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff2': 'font/woff2',
+}
 
-child.on('error', err => {
-  console.error(err?.message ?? String(err))
-  exit(1)
-})
+const rewriteImports = source => source
+  .replace(
+    /from\s+['"]#(\w+)['"]/g,
+    (_, name) => `from '/src/${name}/index.js'`
+  )
+
+const server = createServer(async (req, res) => {
+  const url = new URL(req.url, `http://${host}`)
+
+  const pathname = url.pathname === '/pointerdriver.js'
+    ? '/index.js'
+    : url.pathname === '/'
+      ? '/index.html'
+      : url.pathname
+
+  const path = join(root, pathname)
+
+  try {
+    const data = await readFile(path)
+    const mime = types[extname(path)] || 'application/octet-stream'
 
-child.on('exit', (code, signal) => {
-  if (signal) exit(1)
-  exit(code)
+    const body = mime === 'text/javascript'
+      ? rewriteImports(data.toString())
+      : data
+
+    res.writeHead(200, {
+      'Content-Type': mime,
+      'Access-Control-Allow-Origin': '*',
+    })
+
+    res.end(body)
+  } catch {
+    res.writeHead(404, { 'Content-Type': 'text/plain' })
+    res.end('Not found')
+  }
 })
+
+server.listen(port, host, () =>
+  console.log(`http://${host}:${port}/pointerdriver.js`))
+
+const shutdown = () => server.close()
+
+process
+  .on('SIGINT', shutdown)
+  .on('SIGTERM', shutdown)
+}