Need help with zipe?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

pikax
152 Stars 3 Forks 32 Commits 13 Opened issues

Description

Vite + SSR = :zap: Zipe :heart:

Services available

!
?

Need anything else?

Contributors list

# 99,887
TypeScr...
HTML
Visual ...
vue3
32 commits

⚡ 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.