What's New in Bluejay 0.7.0?

Install

$ bun add https://github.com/apacheli/bluejay

We've been experimenting with other templating languages such as Svelte since 0.3.0. We're happy to say support for Svelte has arrived 🎉. However, you may need to change how your rendering method works as Bluejay is no longer bound to MDX.

Previously you could write this in Bluejay 0.6.0:

import { start } from "bluejay";

await start({
    render: (page, pages) => {
        return <Page><page.mod.default /></Page>;
    },
});

In Bluejay 0.7.0, your code must be updated to the following:

import { start } from "bluejay";
import { renderToStaticMarkup } from "preact-render-to-string";

await start({
    render: (page, pages) => {
        return renderToStaticMarkup(<Page><page.mod.default /></Page>);
    },
});

This change grants us more flexibility by not having Bluejay bound to a specific templating language. We've also updated the Bluejay template to help make the process easier.

Support for Svelte

As mentioned earlier, Svelte components are now handled by Bluejay.

In your bunfig.toml, add the following preloader:

preload = ["bluejay/svelte"]

Install the following packages:

bun add svelte mdsvex

That's it! You can now import .svelte files. Bluejay will automatically compile and cache them to .bluejay/svelte.

Note

Bluejay compiles all Svelte components as "server" components.

In your main render method, include the following:

import { start, BLUEJAY_DEV } from "bluejay";
import { render } from "svelte/server";

await start({
    render: (page, pages) => {
        const { head, body } = render(page.mod.default);
        return `<html lang="en"><head>${head}</head><body>${body}${BLUEJAY_DEV}</body></html>`;
    },
});

If you want to try out the demo, see the Svelte template for Bluejay.

Browser Open Fix

Bluejay now opens the browser after all your pages have been loaded. Bluejay would previously preload opening the browser which would result in responsiveness issues.

WebSocket Fix

BLUEJAY_DEV is now a string. If you're using JSX, use BLUEJAY_JSX instead of BLUEJAY_DEV for watching page updates:

- <BLUEJAY_DEV />
+ <BLUEJAY_JSX />

Contributors

We love contributions! Check out our GitHub for more details.