Frequently Asked Questions

Is there something like a context object similar to React?

Yes, Jeasx provides a context object via this which gets automagically propagated to sub-components. You can populate the context in an endpoint (e.g., a guard):

export default function RootGuard({ request, reply }) {
  this.date = new Date();
}

Later, you can access the context in any sub-component which gets called via an endpoint:

export default function CurrentDate() {
  return <p>The current date is {this.date.toISOString()}</p>;
}

Have a look at the demo to see how things work using the context as them provider.

How can I provide user friendly error messages?

To set up an error handler, simply register it in a route of your choice:

this.errorHandler = async (error) => {
  // You can decide if you want to create a log entry.
  // console.error("❌", error);
  return <h1>Internal server error</h1>;
}

How can I modifiy the resulting response (e.g. post-process HTML)?

For example, if you want to prettify the HTML output, you can wire up a response handler in any endpoint (e.g., a guard). The response handler takes the resulting payload as a parameter and returns the modified payload.

import * as prettier from "prettier";
...
export default function RootGuard({ request, reply }) {
  this.responseHandler = async (payload) => {
    return typeof payload === "string" &&
      String(reply.getHeader("content-type")).startsWith("text/html")
      ? await prettier.format(payload, { parser: "html" })
      : payload;
  };
}

Is there a way to set the document title in a sub-component (aka Helmet)?

Yes, have a look at the head example which demonstrates how easily this can be achieved with a guard.

Is it possible to use CSS-Frameworks like SASS or Tailwind?

Certainly! Please have a look at the package.json of this website to see how things should be wired for Tailwind. Same approach works for SASS too.

How to use a Browsersync with Jeasx?

If you want to reload CSS automagically, start Browsersync in proxy-mode in a second terminal:

npx -y browser-sync start -w -f "dist/**/index.css" -p localhost:3000