README

⚡ ZIPE ⚡

Vite but prerender

⚠️ EXPERIMENTAL - Currently only supporting render entry file, no special SSR handling, that will be in the works for the next versions

vite is "fast"⚡ but how fast can it render on the server?

zipe will compile the components on the fly and cache them, if the component change it will refresh the cache, making it super quick to render.

The HMR is the same as vite so no more page reloads, only the changed component updates.

Working

Proof of concept
SSR with HMR
importing js/ts files in SFC
CSS scoped
Async imports

NOT working

HMR on the first file change, only works when is more than 1 save
No build support for now
No router
No source maps
css modules
css scope seems not to be working when doing SSR
No JSX/TSX support
Custom HTML index file or vue-router

No support

web_modules not supported on the server side, it will try to import by name. eg: import('lodash')

TODO

Custom HTML template
vue-router support (some limitations, for example adding new routes on the fly and such)
source-maps currently source maps don't exist, may need help here.
lifecycle hooks with composition-api
some composables to get request info, etc.
Building SPA and static
SSR serve
Add option to disable HMR and some dev cache features to be able to run this in a server
Tests

Installing

# install with yarn
yarn add zipe

# install with npm
npm install zipe

Usage

Create a plugin and provide the entry file for the SSR

const { createViteSSR } = require("zipe");
const { createServer } = require("vite");

const SSR = createViteSSR(({ app, zipeSSR }) => {
  app.use(async (ctx, next) => {
    if (ctx.path === "/") {
      // return the HTML
      ctx.body = await zipeSSR("/App.vue"); // component path relative to root
      return;
    }
    if (ctx.path === "/output") {
      ctx.body = await zipeSSR("/views/Test.vue");
      return;
    }

    await next();
  });
});

createServer({
  plugins: [SSR],
}).listen(4242);

Development


git clone https://github.com/pikax/zipe

cd zipe

yarn

yarn dev & yarn playground

# edit /App.vue
# or go to src/_playground.ts and change

Usage no npm install needed!