⚡ 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

The HMR is the same as

vite

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