https://github.com/stagas/vipu

run things in vite headless with node/puppeteer and alice-bob typed rpc
https://github.com/stagas/vipu

headless puppeteer rpc vite

Last synced: 15 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/stagas/vipu
• Owner: stagas
• Created: 2021-11-08T09:24:58.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-22T16:39:12.000Z (almost 3 years ago)
• Last Synced: 2024-10-06T21:45:25.775Z (about 1 month ago)
• Topics: headless, puppeteer, rpc, vite
• Language: TypeScript
• Homepage:
• Size: 271 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
vipu




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





           🔧 Install

 ·         🧩 Example

 ·             📜 API docs

 ·  🔥 Releases

 ·      💪🏼 Contribute

 ·    🖐️ Help



***

## Install

```sh

$ 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`](https://vitejs.dev/) + [`puppeteer`](https://pptr.dev/) + [`alice-bob`](https://github.com/stagas/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`](https://github.com/Qard/onchange) or `nodemon` you can configure the server side to refresh as well.

## Example

On the server (node.js):

```ts

import { vipu } from 'vipu'

import type { Client } from './client'

export interface Server {

  sayHi: ({ iam }: { iam: string }) => Promise

  finish: () => Promise

}

export interface WindowHandle {

  vipu: {

    server: Server

  }

}

vipu().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:

```ts

import { ready } from 'vipu'

import type { VipuWindowInterface } from 'vipu'

import type { Server } from './server'

declare const window: VipuWindowInterface

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)

```

## API

#### Table of Contents

*   [vipu](#vipu)

### vipu

[src/index.ts:57-156](https://github.com/stagas/vipu/blob/9b8a8ca85198f7978985e4fb45877e85d0f9de33/src/index.ts#L57-L156 "Source code on GitHub")

Creates a vipu instance.

#### Parameters

*   `config` **Config** Configuration. (optional, default `{}`)

    *   `config.rpc`  Passed to AliceBob [`agents`](https://github.com/stagas/alice-bob/#agents). (optional, default `{}`)

    *   `config.vite`  Vite configuration. Passed to vite [`createServer`](https://vitejs.dev/guide/api-javascript.html#createserver). (optional, default `{}`)

    *   `config.puppeteer`  Puppeteer launch configuration. Passed to [`puppeteer.launch`](https://pptr.dev/#?product=Puppeteer\&version=v11.0.0\&show=api-puppeteerlaunchoptions). (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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)\>** 

## Contribute

[Fork](https://github.com/stagas/vipu/fork) or

[edit](https://github.dev/stagas/vipu) and submit a PR.

All contributions are welcome!

## License

MIT © 2021

[stagas](https://github.com/stagas)