Vipu NPM | npm.io

Install

$ npm i vipu

What is this?

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.

Example

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>(require.resolve('./client.ts')).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 type { WindowHandle } from './index'
declare const window: WindowHandle
const server = window.vipu.server

;(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,
}

export default client
export type Client = typeof client

API

vipu

vipu

src/index.ts:47-164

Creates a vipu instance.

Parameters

entry string Entry file. Must be a full path, which can be obtained using require.resolve(). It can be anything Vite supports, .ts, .tsx work as well.
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)