Fleet

About

Fleet is an esbuild plugin that pre-renders html according to a specific project structure.

Tooling

Getting Started

Clone the example or follow the instructions below.

Run this command to initialize a skeleton project:

deno run https://deno.land/x/fleet/init/mod.ts new-project

File Types

+client

+client.ts/js files are included as entryPoints. Link to +client.js (since ts will be converted to js) in +index.html for the scripts to be utilized.

<!-- src/+index.html -->
<body>
   <!-- content -->
   <script type="module" src="./+client.js">
</body>

+prerender

If there is a +prerender.ts/js file in the same directory as a +index.html file, +prerender.ts/js will be run at build time and update +index.html with the new contents.

+prerender.ts/js files must export a prerender async function to be executed during the build. This function has document as a parameter, and must return the modified document. This modified document will be written to the output.

Document methods or other rendering techniques can be utilized to create new content and make updates. You can run this same code in +client.ts/js to have it rendered on the client instead.

// src/+prerender.ts
import { type Prerender } from "https://deno.land/x/fleet/mod.ts";

export const prerender: Prerender = async (document: Document) => {
    // fetch data...

    // update the DOM...
    const content = document.querySelector<HTMLDivElement>("#content");
    if (content) content.textContent = data;

    return document;
};

+styles

+styles.css files are included as entryPoints. Be sure to also link to the style sheet in +index.html.

<!-- src/+index.html -->
<head>
    <link rel="stylesheet" href="./+styles.css" />
</head>

Build

Fleet is an esbuild plugin. To build the project, import fleet and fleetEntryPoints and utilize them in your build.

// build.ts
import { context } from "https://deno.land/x/esbuild@v0.18.11/mod.js";
import { fleet, fleetEntryPoints } from "https://deno.land/x/fleet/mod.ts";

const outdir = "./public";

const ctx = await context({
    entryPoints: await fleetEntryPoints(),
    bundle: true,
    minify: true,
    sourcemap: true,
    outdir,
    plugins: [fleet],
});

await ctx.watch();

await ctx.serve({
    servedir: outdir,
    port: 8000,
});

console.log(`http://${host}:${port}`);

Create a build task in deno.jsonc to run this module.

// deno.jsonc example
{
    "tasks": {
        "dev": "deno run -A --watch=./src ./build.ts"
    },
    "fmt": {
        "useTabs": true,
        "indentWidth": 4
    },
    "compilerOptions": { "lib": ["dom", "deno.ns"] }
}

Execute deno task dev and inspect the contents of the outDir specified. Then navigate to localhost:8000 to view your build.