It's already been 3 months since v1.0 was released.

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.

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) {
  // ...
}

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

import type { PageHandler } from 'zely';

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

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.

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,
    },
  };
};

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[];

import type { PageHandler } from 'zely';

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

@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

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

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

too many bugs ​

It hasn't stabilized yet. And not all features have been added yet.

Still, if you want to try it, enter the following script.

npm i --save-dev zely@next

npm i --save-dev zely@next