Introducing 2.0!

In v0, the name was changed from prext to zely, and some code modifications were made accordingly, and in v1, features began to be added in earnest. This v2 also brought some changes.

#Changes

1. Context

First of all, the most important change is that zely handler no longer provide req and res as parameters, but only context.

// before
export function get(req, res) {
  // ...
}

import type { PageHandler } from 'zely';
 
export default [
  GET((ctx) => {
    ctx.send('Hello World!');
  }),
] satisfies PageHandler[];

Note: The context function is only supported in export default.

Just export will no longer be updated and only export default will be updated intensively.

2. Static Props

What if I want to get data from another API server?
Putting it in a handler like exports.get will likely slow down the server, and putting it in the top-level is... good, but what if the data is too big? Wouldn't this also cause the server to slow down? And what if you need to run an asynchronous function like fetch?

In that case, use staticProps. When the server starts, the value is loaded, saved to an external file, and then loaded and used when needed.

export const staticProps = async () => {
  const res = await fetch('https://my-api.com/.../so-many-users.json');
  const body = await res.json();
 
  return {
    props: {
      body,
    },
  };
};

import type { PageHandler } from 'zely';
 
export default [
  GET((ctx) => ({
    ...ctx.props.body.find(({ id }) => id === req.params.id),
  })),
] satisfies PageHandler[];

3. @zely/builder

While currently developing zely/builder, I discovered the following problem.

1. Bundle all node_modules into one file.

You can fix it with --bundle=false, but well... I don't think that's a good idea.

2. When developing zely, if a feature is added, the builder must also support this feature.

This has been a huge problem in the past.

To solve these problems, we developed @zely/builder.
This package turns off the watcher instead of running the zely dev server.
At first glance, it may seem worse than zely/builder, but it’s not! You can enjoy all of Zely's features, and the page load time is shortened by compiling all typescript files when building.

(CLI is not yet available.)

npm i --save-dev @zely/builder

const builder = require('@zely/builder');
const build = new builder.Builder({
  esbuild: {}, // esbuild options
  zely: {}, // zely options
  output: 'dist', // output directory
});
 
build.process().then(() => {
  console.log('done!');
}); // build app

4. create-zely

create-zely supports export default template!

npx create-zely
? Project name: my-app
? Directory: my-app
? Use Typescript: Yes
? Use Export Default: Yes

#New Documentation

Vitepress + custom theme(before) => Next.js(after)

#See Also