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-projectFile 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/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 ./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.