run things in vite headless with node/puppeteer and alice-bob typed rpc

🔧 Install · 🧩 Example · 📜 API docs · 🔥 Releases · 💪🏼 Contribute · 🖐️ Help

$ npm i vipu

Note: this project is WIP (work in progress) and its API will probably change.

This is a development tool combining vite + puppeteer + alice-bob designed for rapid iteration and testing of frontend solutions without having to switch to the browser. You can interop with Node using RPC which is already configured. Client side refreshes on change as usual with Vite and with a tool like onchange or nodemon you can configure the server side to refresh as well.

On the server (node.js):

import { vipu } from 'vipu'
import type { Client } from './client'

export interface Server {
  sayHi: ({ iam }: { iam: string }) => Promise<string>
  finish: () => Promise<void>
}

export interface WindowHandle {
  vipu: {
    server: Server
  }
}

vipu<Server, Client>().then(({ server, client, page, finish }) => {
  server.finish = finish
  server.sayHi = async ({ iam }) => `hello ${iam}`
  page.on('load', async () => {
    const result = await client.multiply(3, 4)
    console.log('from client:', result)
    // => from client: 12
  })
})

On the client:

import { ready } from 'vipu'
import type { VipuWindowInterface } from 'vipu'
import type { Server } from './server'
declare const window: VipuWindowInterface<Server, Client>
export type Client = typeof client
;(async () => {
  console.log('from server:', await server.sayHi({ iam: 'The Client' }))
  // => from server: hello The Client
})()

const client = {
  multiply: async (x: number, y: number) => x * y,
}

Object.assign(window.vipu.client, client)

• vipu

src/index.ts:57-156

Creates a vipu instance.

• config Config Configuration. (optional, default {})

  • config.rpc Passed to AliceBob agents. (optional, default {})
  • config.vite Vite configuration. Passed to vite createServer. (optional, default {})
  • config.puppeteer Puppeteer launch configuration. Passed to puppeteer.launch. (optional, default {})
  • config.info Whether to display info messages in console. (optional, default true)
  • config.log Log function that can be overriden. (optional, default vipuLog)

Returns Promise<Vipu<Server, Client>>

Fork or edit and submit a PR.

All contributions are welcome!

MIT © 2021 stagas