zipe
v0.0.4
Published
> Vite but prerender
Downloads
10
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 byname
. 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
andstatic
- 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