@prairielearn/compiled-assets 1.0.2 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @prairielearn/compiled-assets
 
+## 2.0.1
+
+### Patch Changes
+
+- 8fd47d928: Upgrade all dependencies
+- Updated dependencies [8fd47d928]
+  - @prairielearn/html@3.0.1
+
+## 2.0.0
+
+### Major Changes
+
+- f71a12d41: Add support for stylesheets; use esbuild asset server in dev mode
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/cli.js

@@ -13,32 +13,37 @@ const commander_1 = require("commander");
 const index_js_1 = require("./index.js");
 const gzip = (0, util_1.promisify)(zlib_1.default.gzip);
 const brotli = (0, util_1.promisify)(zlib_1.default.brotliCompress);
-commander_1.program.command('build <source> <destination>').action(async (source, destination) => {
-    const metafile = await (0, index_js_1.build)(source, destination);
-    // Write gzip and brotli versions of the output files. Record size information
-    // so we can show it to the user.
+async function writeCompressedAssets(destination, manifest) {
     const compressedSizes = {};
-    await Promise.all(Object.keys(metafile.outputs).map(async (outputPath) => {
-        const contents = await fs_extra_1.default.readFile(outputPath);
+    await Promise.all(Object.values(manifest).map(async (filePath) => {
+        const destinationFilePath = path_1.default.resolve(destination, filePath);
+        const contents = await fs_extra_1.default.readFile(destinationFilePath);
         const gzipCompressed = await gzip(contents);
         const brotliCompressed = await brotli(contents);
-        await fs_extra_1.default.writeFile(`${outputPath}.gz`, gzipCompressed);
-        await fs_extra_1.default.writeFile(`${outputPath}.br`, brotliCompressed);
-        compressedSizes[outputPath] = {
+        await fs_extra_1.default.writeFile(`${destinationFilePath}.gz`, gzipCompressed);
+        await fs_extra_1.default.writeFile(`${destinationFilePath}.br`, brotliCompressed);
+        compressedSizes[filePath] = {
+            raw: contents.length,
             gzip: gzipCompressed.length,
             brotli: brotliCompressed.length,
         };
     }));
+    return compressedSizes;
+}
+commander_1.program.command('build <source> <destination>').action(async (source, destination) => {
+    const manifest = await (0, index_js_1.build)(source, destination);
+    // Write gzip and brotli versions of the output files. Record size information
+    // so we can show it to the user.
+    const compressedSizes = await writeCompressedAssets(destination, manifest);
     // Format the output into an object that we can pass to `console.table`.
     const results = {};
-    Object.entries(metafile.outputs).forEach(([outputPath, meta]) => {
-        if (!meta.entryPoint)
-            return;
-        results[path_1.default.basename(meta.entryPoint)] = {
-            'Output file': path_1.default.basename(outputPath),
-            Size: (0, pretty_bytes_1.default)(meta.bytes),
-            'Size (gzip)': (0, pretty_bytes_1.default)(compressedSizes[outputPath].gzip),
-            'Size (brotli)': (0, pretty_bytes_1.default)(compressedSizes[outputPath].brotli),
+    Object.entries(manifest).forEach(([entryPoint, assetPath]) => {
+        const sizes = compressedSizes[assetPath];
+        results[entryPoint] = {
+            'Output file': assetPath,
+            Size: (0, pretty_bytes_1.default)(sizes.raw),
+            'Size (gzip)': (0, pretty_bytes_1.default)(sizes.gzip),
+            'Size (brotli)': (0, pretty_bytes_1.default)(sizes.brotli),
         };
     });
     console.table(results);

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";;;;;;AACA,wDAA0B;AAC1B,gEAAuC;AACvC,gDAAwB;AACxB,+BAAiC;AACjC,gDAAwB;AACxB,yCAAoC;AAEpC,yCAAmC;AAEnC,MAAM,IAAI,GAAG,IAAA,gBAAS,EAAC,cAAI,CAAC,IAAI,CAAC,CAAC;AAClC,MAAM,MAAM,GAAG,IAAA,gBAAS,EAAC,cAAI,CAAC,cAAc,CAAC,CAAC;AAE9C,mBAAO,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE;IACnF,MAAM,QAAQ,GAAG,MAAM,IAAA,gBAAK,EAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAElD,8EAA8E;IAC9E,iCAAiC;IACjC,MAAM,eAAe,GAA2C,EAAE,CAAC;IACnE,MAAM,OAAO,CAAC,GAAG,CACf,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE;QACrD,MAAM,QAAQ,GAAG,MAAM,kBAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QAC/C,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,MAAM,gBAAgB,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,kBAAE,CAAC,SAAS,CAAC,GAAG,UAAU,KAAK,EAAE,cAAc,CAAC,CAAC;QACvD,MAAM,kBAAE,CAAC,SAAS,CAAC,GAAG,UAAU,KAAK,EAAE,gBAAgB,CAAC,CAAC;QACzD,eAAe,CAAC,UAAU,CAAC,GAAG;YAC5B,IAAI,EAAE,cAAc,CAAC,MAAM;YAC3B,MAAM,EAAE,gBAAgB,CAAC,MAAM;SAChC,CAAC;IACJ,CAAC,CAAC,CACH,CAAC;IAEF,wEAAwE;IACxE,MAAM,OAAO,GAAwB,EAAE,CAAC;IACxC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;QAC9D,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC7B,OAAO,CAAC,cAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG;YACxC,aAAa,EAAE,cAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;YACxC,IAAI,EAAE,IAAA,sBAAW,EAAC,IAAI,CAAC,KAAK,CAAC;YAC7B,aAAa,EAAE,IAAA,sBAAW,EAAC,eAAe,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC;YAC5D,eAAe,EAAE,IAAA,sBAAW,EAAC,eAAe,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC;SACjE,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACzB,CAAC,CAAC,CAAC;AAEH,mBAAO,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;IAC7C,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC"}
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";;;;;;AACA,wDAA0B;AAC1B,gEAAuC;AACvC,gDAAwB;AACxB,+BAAiC;AACjC,gDAAwB;AACxB,yCAAoC;AAEpC,yCAAmC;AAEnC,MAAM,IAAI,GAAG,IAAA,gBAAS,EAAC,cAAI,CAAC,IAAI,CAAC,CAAC;AAClC,MAAM,MAAM,GAAG,IAAA,gBAAS,EAAC,cAAI,CAAC,cAAc,CAAC,CAAC;AAI9C,KAAK,UAAU,qBAAqB,CAClC,WAAmB,EACnB,QAAgC;IAEhC,MAAM,eAAe,GAAoB,EAAE,CAAC;IAC5C,MAAM,OAAO,CAAC,GAAG,CACf,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;QAC7C,MAAM,mBAAmB,GAAG,cAAI,CAAC,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAChE,MAAM,QAAQ,GAAG,MAAM,kBAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QACxD,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,MAAM,gBAAgB,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,kBAAE,CAAC,SAAS,CAAC,GAAG,mBAAmB,KAAK,EAAE,cAAc,CAAC,CAAC;QAChE,MAAM,kBAAE,CAAC,SAAS,CAAC,GAAG,mBAAmB,KAAK,EAAE,gBAAgB,CAAC,CAAC;QAClE,eAAe,CAAC,QAAQ,CAAC,GAAG;YAC1B,GAAG,EAAE,QAAQ,CAAC,MAAM;YACpB,IAAI,EAAE,cAAc,CAAC,MAAM;YAC3B,MAAM,EAAE,gBAAgB,CAAC,MAAM;SAChC,CAAC;IACJ,CAAC,CAAC,CACH,CAAC;IACF,OAAO,eAAe,CAAC;AACzB,CAAC;AAED,mBAAO,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE;IACnF,MAAM,QAAQ,GAAG,MAAM,IAAA,gBAAK,EAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAElD,8EAA8E;IAC9E,iCAAiC;IACjC,MAAM,eAAe,GAAG,MAAM,qBAAqB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IAE3E,wEAAwE;IACxE,MAAM,OAAO,GAAwB,EAAE,CAAC;IACxC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,EAAE;QAC3D,MAAM,KAAK,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,CAAC,UAAU,CAAC,GAAG;YACpB,aAAa,EAAE,SAAS;YACxB,IAAI,EAAE,IAAA,sBAAW,EAAC,KAAK,CAAC,GAAG,CAAC;YAC5B,aAAa,EAAE,IAAA,sBAAW,EAAC,KAAK,CAAC,IAAI,CAAC;YACtC,eAAe,EAAE,IAAA,sBAAW,EAAC,KAAK,CAAC,MAAM,CAAC;SAC3C,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACzB,CAAC,CAAC,CAAC;AAEH,mBAAO,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;IAC7C,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import type { RequestHandler } from 'express';
-import esbuild from 'esbuild';
 import { HtmlSafeString } from '@prairielearn/html';
+type AssetsManifest = Record<string, string>;
 export interface CompiledAssetsOptions {
     /**
-     * Whether the app is running in dev mode. If dev modde is enabled, then
+     * Whether the app is running in dev mode. If dev mode is enabled, then
      * assets will be built on the fly as they're requested. Otherwise, assets
      * should have been pre-compiled to the `buildDirectory` directory.
      */
@@ -15,9 +15,16 @@ export interface CompiledAssetsOptions {
     /** The path that assets will be served from, e.g. `/build/`. */
     publicPath?: string;
 }
-export declare function init(newOptions: Partial<CompiledAssetsOptions>): void;
+export declare function init(newOptions: Partial<CompiledAssetsOptions>): Promise<void>;
+/**
+ * Shuts down the development assets compiler if it is running.
+ */
+export declare function close(): Promise<void>;
 export declare function assertConfigured(): void;
 export declare function handler(): RequestHandler;
 export declare function compiledScriptPath(sourceFile: string): string;
+export declare function compiledStylesheetPath(sourceFile: string): string;
 export declare function compiledScriptTag(sourceFile: string): HtmlSafeString;
-export declare function build(sourceDirectory: string, buildDirectory: string): Promise<esbuild.Metafile>;
+export declare function compiledStylesheetTag(sourceFile: string): HtmlSafeString;
+export declare function build(sourceDirectory: string, buildDirectory: string): Promise<AssetsManifest>;
+export {};

package/dist/index.js

@@ -3,12 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.build = exports.compiledScriptTag = exports.compiledScriptPath = exports.handler = exports.assertConfigured = exports.init = void 0;
+exports.build = exports.compiledStylesheetTag = exports.compiledScriptTag = exports.compiledStylesheetPath = exports.compiledScriptPath = exports.handler = exports.assertConfigured = exports.close = exports.init = void 0;
 const express_static_gzip_1 = __importDefault(require("express-static-gzip"));
 const esbuild_1 = __importDefault(require("esbuild"));
 const path_1 = __importDefault(require("path"));
 const globby_1 = __importDefault(require("globby"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
+const node_http_1 = __importDefault(require("node:http"));
 const html_1 = require("@prairielearn/html");
 const DEFAULT_OPTIONS = {
     dev: process.env.NODE_ENV !== 'production',
@@ -17,7 +18,9 @@ const DEFAULT_OPTIONS = {
     publicPath: '/build/',
 };
 let options = { ...DEFAULT_OPTIONS };
-function init(newOptions) {
+let esbuildContext = null;
+let esbuildServer = null;
+async function init(newOptions) {
     options = {
         ...DEFAULT_OPTIONS,
         ...newOptions,
@@ -25,8 +28,39 @@ function init(newOptions) {
     if (!options.publicPath.endsWith('/')) {
         options.publicPath += '/';
     }
+    if (options.dev) {
+        // Use esbuild's asset server in development.
+        //
+        // Note that esbuild doesn't support globs, so the server will not pick up
+        // new entrypoints that are added while the server is running.
+        const sourceGlob = path_1.default.join(options.sourceDirectory, '*', '*.{js,ts,css}');
+        const sourcePaths = await (0, globby_1.default)(sourceGlob);
+        esbuildContext = await esbuild_1.default.context({
+            entryPoints: sourcePaths,
+            target: 'es6',
+            format: 'iife',
+            sourcemap: 'inline',
+            bundle: true,
+            write: false,
+            loader: {
+                '.woff': 'file',
+                '.woff2': 'file',
+            },
+            outbase: options.sourceDirectory,
+            outdir: options.buildDirectory,
+            entryNames: '[dir]/[name]',
+        });
+        esbuildServer = await esbuildContext.serve();
+    }
 }
 exports.init = init;
+/**
+ * Shuts down the development assets compiler if it is running.
+ */
+async function close() {
+    esbuildContext?.dispose();
+}
+exports.close = close;
 function assertConfigured() {
     if (!options) {
         throw new Error('@prairielearn/compiled-assets was not configured');
@@ -49,77 +83,68 @@ function handler() {
             },
         });
     }
+    if (!esbuildServer) {
+        throw new Error('esbuild server not initialized');
+    }
+    const { host, port } = esbuildServer;
     // We're running in dev mode, so we need to boot up ESBuild to start building
     // and watching our assets.
     return function (req, res) {
-        // Strip leading slash from `req.url`.
-        let assetPath = req.url;
-        if (assetPath.startsWith('/')) {
-            assetPath = assetPath.slice(1);
-        }
-        const resolvedSourceDirectory = path_1.default.resolve(options?.sourceDirectory);
-        const resolvedAssetPath = path_1.default.resolve(resolvedSourceDirectory, assetPath);
-        if (!resolvedAssetPath.startsWith(resolvedSourceDirectory)) {
-            // Probably path traversal.
-            res.status(404).send('Not found');
-            return;
-        }
-        // esbuild should be fast enough that we can just build everything on the
-        // fly as it's requested! This is probably just for prototyping though. We
-        // should use some kind of caching to ensure that local dev stays fast.
-        esbuild_1.default
-            .build({
-            entryPoints: [resolvedAssetPath],
-            target: 'es6',
-            format: 'iife',
-            sourcemap: 'inline',
-            bundle: true,
-            write: false,
-        })
-            .then((buildResult) => {
-            res
-                .setHeader('Content-Type', 'application/javascript; charset=UTF-8')
-                .status(200)
-                .send(buildResult.outputFiles[0].text);
-        }, (buildError) => {
-            res.status(500).send(buildError.message);
+        const proxyReq = node_http_1.default.request({
+            hostname: host,
+            port,
+            path: req.url,
+            method: req.method,
+            headers: req.headers,
+        }, (proxyRes) => {
+            res.writeHead(proxyRes.statusCode ?? 500, proxyRes.headers);
+            proxyRes.pipe(res, { end: true });
         });
+        req.pipe(proxyReq, { end: true });
     };
 }
 exports.handler = handler;
-let cachedScriptsManifest = null;
-function readScriptsManifest() {
+let cachedManifest = null;
+function readManifest() {
     assertConfigured();
-    if (!cachedScriptsManifest) {
-        const manifestPath = path_1.default.join(options.buildDirectory, 'scripts', 'manifest.json');
-        cachedScriptsManifest = fs_extra_1.default.readJSONSync(manifestPath);
+    if (!cachedManifest) {
+        const manifestPath = path_1.default.join(options.buildDirectory, 'manifest.json');
+        cachedManifest = fs_extra_1.default.readJSONSync(manifestPath);
     }
-    return cachedScriptsManifest;
+    return cachedManifest;
 }
-function compiledScriptPath(sourceFile) {
+function compiledPath(type, sourceFile) {
     assertConfigured();
+    const sourceFilePath = `${type}/${sourceFile}`;
     if (options.dev) {
-        return options.publicPath + 'scripts/' + sourceFile;
+        return options.publicPath + sourceFilePath.replace(/\.(js|ts)x?$/, '.js');
     }
-    const scriptsManifest = readScriptsManifest();
-    const scriptPath = scriptsManifest[sourceFile];
-    if (!scriptPath) {
-        throw new Error(`Unknown script: ${sourceFile}`);
+    const manifest = readManifest();
+    const assetPath = manifest[sourceFilePath];
+    if (!assetPath) {
+        throw new Error(`Unknown ${type} asset: ${sourceFile}`);
     }
-    return options.publicPath + 'scripts/' + scriptPath;
+    return `${options.publicPath}/${assetPath}`;
+}
+function compiledScriptPath(sourceFile) {
+    return compiledPath('scripts', sourceFile);
 }
 exports.compiledScriptPath = compiledScriptPath;
+function compiledStylesheetPath(sourceFile) {
+    return compiledPath('stylesheets', sourceFile);
+}
+exports.compiledStylesheetPath = compiledStylesheetPath;
 function compiledScriptTag(sourceFile) {
     return (0, html_1.html) `<script src="${compiledScriptPath(sourceFile)}"></script>`;
 }
 exports.compiledScriptTag = compiledScriptTag;
-async function build(sourceDirectory, buildDirectory) {
-    // Remove existing assets to ensure that no stale assets are left behind.
-    await fs_extra_1.default.remove(buildDirectory);
-    const scriptsSourceRoot = path_1.default.resolve(sourceDirectory, 'scripts');
-    const scriptsBuildRoot = path_1.default.resolve(buildDirectory, 'scripts');
-    await fs_extra_1.default.ensureDir(scriptsBuildRoot);
-    const files = await (0, globby_1.default)(path_1.default.join(scriptsSourceRoot, '*.{js,jsx,ts,tsx}'));
+function compiledStylesheetTag(sourceFile) {
+    return (0, html_1.html) `<link rel="stylesheet" href="${compiledStylesheetPath(sourceFile)}" />`;
+}
+exports.compiledStylesheetTag = compiledStylesheetTag;
+async function buildAssets(sourceDirectory, buildDirectory) {
+    await fs_extra_1.default.ensureDir(buildDirectory);
+    const files = await (0, globby_1.default)(path_1.default.join(sourceDirectory, '*/*.{js,jsx,ts,tsx,css}'));
     const buildResult = await esbuild_1.default.build({
         entryPoints: files,
         target: 'es6',
@@ -127,24 +152,36 @@ async function build(sourceDirectory, buildDirectory) {
         sourcemap: 'linked',
         bundle: true,
         minify: true,
-        entryNames: '[name]-[hash]',
-        outdir: scriptsBuildRoot,
+        loader: {
+            '.woff': 'file',
+            '.woff2': 'file',
+        },
+        entryNames: '[dir]/[name]-[hash]',
+        outbase: sourceDirectory,
+        outdir: buildDirectory,
         metafile: true,
     });
-    // Write asset manifest so that we can map from "input" names to built names
-    // at runtime.
-    const { metafile } = buildResult;
+    return buildResult.metafile;
+}
+function makeManifest(metafile, sourceDirectory, buildDirectory) {
     const manifest = {};
     Object.entries(metafile.outputs).forEach(([outputPath, meta]) => {
         if (!meta.entryPoint)
             return;
-        const entryPath = path_1.default.basename(meta.entryPoint);
-        const assetPath = path_1.default.basename(outputPath);
+        const entryPath = path_1.default.relative(sourceDirectory, meta.entryPoint);
+        const assetPath = path_1.default.relative(buildDirectory, outputPath);
         manifest[entryPath] = assetPath;
     });
-    const manifestPath = path_1.default.join(scriptsBuildRoot, 'manifest.json');
+    return manifest;
+}
+async function build(sourceDirectory, buildDirectory) {
+    // Remove existing assets to ensure that no stale assets are left behind.
+    await fs_extra_1.default.remove(buildDirectory);
+    const metafile = await buildAssets(sourceDirectory, buildDirectory);
+    const manifest = makeManifest(metafile, sourceDirectory, buildDirectory);
+    const manifestPath = path_1.default.join(buildDirectory, 'manifest.json');
     await fs_extra_1.default.writeJSON(manifestPath, manifest);
-    return metafile;
+    return manifest;
 }
 exports.build = build;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.test.js

@@ -13,18 +13,25 @@ const node_fetch_1 = __importDefault(require("node-fetch"));
 const index_1 = require("./index");
 async function testProject(options) {
     await tmp_promise_1.default.withDir(async (dir) => {
-        const scriptsRoot = path_1.default.join(dir.path, 'assets', 'scripts');
+        // macOS does weird things with symlinks in its tmp directories. Resolve
+        // the real path so that our asset-building machinery doesn't get confused.
+        const tmpDir = await fs_extra_1.default.realpath(dir.path);
+        const scriptsRoot = path_1.default.join(tmpDir, 'assets', 'scripts');
         await fs_extra_1.default.ensureDir(scriptsRoot);
+        const stylesRoot = path_1.default.join(tmpDir, 'assets', 'stylesheets');
+        await fs_extra_1.default.ensureDir(stylesRoot);
         const jsScriptPath = path_1.default.join(scriptsRoot, 'foo.js');
+        await fs_extra_1.default.writeFile(jsScriptPath, 'console.log("foo")');
         const tsScriptPath = path_1.default.join(scriptsRoot, 'bar.ts');
-        fs_extra_1.default.writeFile(jsScriptPath, 'console.log("foo")');
-        fs_extra_1.default.writeFile(tsScriptPath, 'interface Foo {};\n\nconsole.log("bar")');
+        await fs_extra_1.default.writeFile(tsScriptPath, 'interface Foo {};\n\nconsole.log("bar")');
+        const stylesPath = path_1.default.join(stylesRoot, 'baz.css');
+        await fs_extra_1.default.writeFile(stylesPath, 'body { color: red; }');
         if (!options.dev) {
-            await (0, index_1.build)(path_1.default.join(dir.path, 'assets'), path_1.default.join(dir.path, 'public', 'build'));
+            await (0, index_1.build)(path_1.default.join(tmpDir, 'assets'), path_1.default.join(tmpDir, 'public', 'build'));
         }
-        (0, index_1.init)({
-            sourceDirectory: path_1.default.join(dir.path, 'assets'),
-            buildDirectory: path_1.default.join(dir.path, 'public', 'build'),
+        await (0, index_1.init)({
+            sourceDirectory: path_1.default.join(tmpDir, 'assets'),
+            buildDirectory: path_1.default.join(tmpDir, 'public', 'build'),
             publicPath: '/build',
             ...options,
         });
@@ -33,9 +40,14 @@ async function testProject(options) {
         app.use('/build', (0, index_1.handler)());
         const server = app.listen(port);
         try {
-            const res = await (0, node_fetch_1.default)(`http://localhost:${port}${(0, index_1.compiledScriptPath)('foo.js')}`);
-            chai_1.assert.isTrue(res.ok);
-            chai_1.assert.match(await res.text(), /console\.log\("foo"\)/);
+            const jsRes = await (0, node_fetch_1.default)(`http://localhost:${port}${(0, index_1.compiledScriptPath)('foo.js')}`);
+            chai_1.assert.isTrue(jsRes.ok);
+            chai_1.assert.match(await jsRes.text(), /console\.log\("foo"\)/);
+            const cssRes = await (0, node_fetch_1.default)(`http://localhost:${port}${(0, index_1.compiledStylesheetPath)('baz.css')}`);
+            chai_1.assert.isTrue(cssRes.ok);
+            const cssText = await cssRes.text();
+            chai_1.assert.match(cssText, /body\s*\{/);
+            chai_1.assert.match(cssText, /color:\s*red/);
         }
         finally {
             server.close();
@@ -45,6 +57,7 @@ async function testProject(options) {
     });
 }
 describe('compiled-assets', () => {
+    afterEach(async () => (0, index_1.close)());
     it('works in dev mode', async () => {
         await testProject({ dev: true });
     });

package/dist/index.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":";;;;;AAAA,8DAA8B;AAC9B,wDAA0B;AAC1B,gDAAwB;AACxB,wDAA+B;AAC/B,+BAA8B;AAC9B,sDAA8B;AAC9B,4DAA+B;AAE/B,mCAA0F;AAE1F,KAAK,UAAU,WAAW,CAAC,OAA8B;IACvD,MAAM,qBAAG,CAAC,OAAO,CACf,KAAK,EAAE,GAAG,EAAE,EAAE;QACZ,MAAM,WAAW,GAAG,cAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;QAC7D,MAAM,kBAAE,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QAEhC,MAAM,YAAY,GAAG,cAAI,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACtD,MAAM,YAAY,GAAG,cAAI,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACtD,kBAAE,CAAC,SAAS,CAAC,YAAY,EAAE,oBAAoB,CAAC,CAAC;QACjD,kBAAE,CAAC,SAAS,CAAC,YAAY,EAAE,yCAAyC,CAAC,CAAC;QAEtE,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE;YAChB,MAAM,IAAA,aAAK,EAAC,cAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAE,cAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;SACpF;QAED,IAAA,YAAI,EAAC;YACH,eAAe,EAAE,cAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC;YAC9C,cAAc,EAAE,cAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC;YACtD,UAAU,EAAE,QAAQ;YACpB,GAAG,OAAO;SACX,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,MAAM,IAAA,kBAAO,GAAE,CAAC;QAC7B,MAAM,GAAG,GAAG,IAAA,iBAAO,GAAE,CAAC;QACtB,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAA,eAAO,GAAE,CAAC,CAAC;QAC7B,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAEhC,IAAI;YACF,MAAM,GAAG,GAAG,MAAM,IAAA,oBAAK,EAAC,oBAAoB,IAAI,GAAG,IAAA,0BAAkB,EAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACnF,aAAM,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YACtB,aAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,EAAE,uBAAuB,CAAC,CAAC;SACzD;gBAAS;YACR,MAAM,CAAC,KAAK,EAAE,CAAC;SAChB;IACH,CAAC,EACD;QACE,aAAa,EAAE,IAAI;KACpB,CACF,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;QACjC,MAAM,WAAW,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;QAClC,MAAM,WAAW,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prairielearn/compiled-assets",
-  "version": "1.0.2",
+  "version": "2.0.1",
   "main": "dist/index.js",
   "bin": "dist/cli.js",
   "repository": {
@@ -14,9 +14,9 @@
     "test": "mocha --no-config --require ts-node/register src/index.test.ts"
   },
   "dependencies": {
-    "@prairielearn/html": "^3.0.0",
-    "commander": "^10.0.0",
-    "esbuild": "^0.17.15",
+    "@prairielearn/html": "^3.0.1",
+    "commander": "^10.0.1",
+    "esbuild": "^0.17.19",
     "express": "^4.18.2",
     "express-static-gzip": "^2.1.7",
     "fs-extra": "^11.1.1",
@@ -25,13 +25,13 @@
     "tmp-promise": "^3.0.3"
   },
   "devDependencies": {
-    "@prairielearn/tsconfig": "*",
-    "@types/node": "^18.15.11",
+    "@prairielearn/tsconfig": "^0.0.0",
+    "@types/node": "^18.16.16",
     "chai": "^4.3.7",
     "get-port": "^5.1.1",
     "mocha": "^10.2.0",
-    "node-fetch": "^2.6.9",
+    "node-fetch": "^2.6.11",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.3"
   }
 }

package/src/cli.ts

@@ -11,35 +11,47 @@ import { build } from './index.js';
 const gzip = promisify(zlib.gzip);
 const brotli = promisify(zlib.brotliCompress);
 
-program.command('build <source> <destination>').action(async (source, destination) => {
-  const metafile = await build(source, destination);
+type CompressedSizes = Record<string, Record<string, number>>;
 
-  // Write gzip and brotli versions of the output files. Record size information
-  // so we can show it to the user.
-  const compressedSizes: Record<string, Record<string, number>> = {};
+async function writeCompressedAssets(
+  destination: string,
+  manifest: Record<string, string>
+): Promise<CompressedSizes> {
+  const compressedSizes: CompressedSizes = {};
   await Promise.all(
-    Object.keys(metafile.outputs).map(async (outputPath) => {
-      const contents = await fs.readFile(outputPath);
+    Object.values(manifest).map(async (filePath) => {
+      const destinationFilePath = path.resolve(destination, filePath);
+      const contents = await fs.readFile(destinationFilePath);
       const gzipCompressed = await gzip(contents);
       const brotliCompressed = await brotli(contents);
-      await fs.writeFile(`${outputPath}.gz`, gzipCompressed);
-      await fs.writeFile(`${outputPath}.br`, brotliCompressed);
-      compressedSizes[outputPath] = {
+      await fs.writeFile(`${destinationFilePath}.gz`, gzipCompressed);
+      await fs.writeFile(`${destinationFilePath}.br`, brotliCompressed);
+      compressedSizes[filePath] = {
+        raw: contents.length,
         gzip: gzipCompressed.length,
         brotli: brotliCompressed.length,
       };
     })
   );
+  return compressedSizes;
+}
+
+program.command('build <source> <destination>').action(async (source, destination) => {
+  const manifest = await build(source, destination);
+
+  // Write gzip and brotli versions of the output files. Record size information
+  // so we can show it to the user.
+  const compressedSizes = await writeCompressedAssets(destination, manifest);
 
   // Format the output into an object that we can pass to `console.table`.
   const results: Record<string, any> = {};
-  Object.entries(metafile.outputs).forEach(([outputPath, meta]) => {
-    if (!meta.entryPoint) return;
-    results[path.basename(meta.entryPoint)] = {
-      'Output file': path.basename(outputPath),
-      Size: prettyBytes(meta.bytes),
-      'Size (gzip)': prettyBytes(compressedSizes[outputPath].gzip),
-      'Size (brotli)': prettyBytes(compressedSizes[outputPath].brotli),
+  Object.entries(manifest).forEach(([entryPoint, assetPath]) => {
+    const sizes = compressedSizes[assetPath];
+    results[entryPoint] = {
+      'Output file': assetPath,
+      Size: prettyBytes(sizes.raw),
+      'Size (gzip)': prettyBytes(sizes.gzip),
+      'Size (brotli)': prettyBytes(sizes.brotli),
     };
   });
   console.table(results);

package/src/index.test.ts

@@ -6,26 +6,45 @@ import { assert } from 'chai';
 import express from 'express';
 import fetch from 'node-fetch';
 
-import { init, compiledScriptPath, handler, CompiledAssetsOptions, build } from './index';
+import {
+  init,
+  close,
+  handler,
+  build,
+  compiledScriptPath,
+  compiledStylesheetPath,
+  type CompiledAssetsOptions,
+} from './index';
 
 async function testProject(options: CompiledAssetsOptions) {
   await tmp.withDir(
     async (dir) => {
-      const scriptsRoot = path.join(dir.path, 'assets', 'scripts');
+      // macOS does weird things with symlinks in its tmp directories. Resolve
+      // the real path so that our asset-building machinery doesn't get confused.
+      const tmpDir = await fs.realpath(dir.path);
+
+      const scriptsRoot = path.join(tmpDir, 'assets', 'scripts');
       await fs.ensureDir(scriptsRoot);
 
+      const stylesRoot = path.join(tmpDir, 'assets', 'stylesheets');
+      await fs.ensureDir(stylesRoot);
+
       const jsScriptPath = path.join(scriptsRoot, 'foo.js');
+      await fs.writeFile(jsScriptPath, 'console.log("foo")');
+
       const tsScriptPath = path.join(scriptsRoot, 'bar.ts');
-      fs.writeFile(jsScriptPath, 'console.log("foo")');
-      fs.writeFile(tsScriptPath, 'interface Foo {};\n\nconsole.log("bar")');
+      await fs.writeFile(tsScriptPath, 'interface Foo {};\n\nconsole.log("bar")');
+
+      const stylesPath = path.join(stylesRoot, 'baz.css');
+      await fs.writeFile(stylesPath, 'body { color: red; }');
 
       if (!options.dev) {
-        await build(path.join(dir.path, 'assets'), path.join(dir.path, 'public', 'build'));
+        await build(path.join(tmpDir, 'assets'), path.join(tmpDir, 'public', 'build'));
       }
 
-      init({
-        sourceDirectory: path.join(dir.path, 'assets'),
-        buildDirectory: path.join(dir.path, 'public', 'build'),
+      await init({
+        sourceDirectory: path.join(tmpDir, 'assets'),
+        buildDirectory: path.join(tmpDir, 'public', 'build'),
         publicPath: '/build',
         ...options,
       });
@@ -36,9 +55,15 @@ async function testProject(options: CompiledAssetsOptions) {
       const server = app.listen(port);
 
       try {
-        const res = await fetch(`http://localhost:${port}${compiledScriptPath('foo.js')}`);
-        assert.isTrue(res.ok);
-        assert.match(await res.text(), /console\.log\("foo"\)/);
+        const jsRes = await fetch(`http://localhost:${port}${compiledScriptPath('foo.js')}`);
+        assert.isTrue(jsRes.ok);
+        assert.match(await jsRes.text(), /console\.log\("foo"\)/);
+
+        const cssRes = await fetch(`http://localhost:${port}${compiledStylesheetPath('baz.css')}`);
+        assert.isTrue(cssRes.ok);
+        const cssText = await cssRes.text();
+        assert.match(cssText, /body\s*\{/);
+        assert.match(cssText, /color:\s*red/);
       } finally {
         server.close();
       }
@@ -50,6 +75,8 @@ async function testProject(options: CompiledAssetsOptions) {
 }
 
 describe('compiled-assets', () => {
+  afterEach(async () => close());
+
   it('works in dev mode', async () => {
     await testProject({ dev: true });
   });

package/src/index.ts

@@ -1,9 +1,10 @@
 import type { RequestHandler } from 'express';
 import expressStaticGzip from 'express-static-gzip';
-import esbuild from 'esbuild';
+import esbuild, { Metafile } from 'esbuild';
 import path from 'path';
 import globby from 'globby';
 import fs from 'fs-extra';
+import http from 'node:http';
 import { html, HtmlSafeString } from '@prairielearn/html';
 
 const DEFAULT_OPTIONS = {
@@ -13,9 +14,11 @@ const DEFAULT_OPTIONS = {
   publicPath: '/build/',
 };
 
+type AssetsManifest = Record<string, string>;
+
 export interface CompiledAssetsOptions {
   /**
-   * Whether the app is running in dev mode. If dev modde is enabled, then
+   * Whether the app is running in dev mode. If dev mode is enabled, then
    * assets will be built on the fly as they're requested. Otherwise, assets
    * should have been pre-compiled to the `buildDirectory` directory.
    */
@@ -29,15 +32,51 @@ export interface CompiledAssetsOptions {
 }
 
 let options: Required<CompiledAssetsOptions> = { ...DEFAULT_OPTIONS };
+let esbuildContext: esbuild.BuildContext | null = null;
+let esbuildServer: esbuild.ServeResult | null = null;
 
-export function init(newOptions: Partial<CompiledAssetsOptions>): void {
+export async function init(newOptions: Partial<CompiledAssetsOptions>): Promise<void> {
   options = {
     ...DEFAULT_OPTIONS,
     ...newOptions,
   };
+
   if (!options.publicPath.endsWith('/')) {
     options.publicPath += '/';
   }
+
+  if (options.dev) {
+    // Use esbuild's asset server in development.
+    //
+    // Note that esbuild doesn't support globs, so the server will not pick up
+    // new entrypoints that are added while the server is running.
+    const sourceGlob = path.join(options.sourceDirectory, '*', '*.{js,ts,css}');
+    const sourcePaths = await globby(sourceGlob);
+    esbuildContext = await esbuild.context({
+      entryPoints: sourcePaths,
+      target: 'es6',
+      format: 'iife',
+      sourcemap: 'inline',
+      bundle: true,
+      write: false,
+      loader: {
+        '.woff': 'file',
+        '.woff2': 'file',
+      },
+      outbase: options.sourceDirectory,
+      outdir: options.buildDirectory,
+      entryNames: '[dir]/[name]',
+    });
+
+    esbuildServer = await esbuildContext.serve();
+  }
+}
+
+/**
+ * Shuts down the development assets compiler if it is running.
+ */
+export async function close() {
+  esbuildContext?.dispose();
 }
 
 export function assertConfigured(): void {
@@ -64,94 +103,81 @@ export function handler(): RequestHandler {
     });
   }
 
+  if (!esbuildServer) {
+    throw new Error('esbuild server not initialized');
+  }
+
+  const { host, port } = esbuildServer;
+
   // We're running in dev mode, so we need to boot up ESBuild to start building
   // and watching our assets.
   return function (req, res) {
-    // Strip leading slash from `req.url`.
-    let assetPath = req.url;
-    if (assetPath.startsWith('/')) {
-      assetPath = assetPath.slice(1);
-    }
-
-    const resolvedSourceDirectory = path.resolve(options?.sourceDirectory);
-    const resolvedAssetPath = path.resolve(resolvedSourceDirectory, assetPath);
-
-    if (!resolvedAssetPath.startsWith(resolvedSourceDirectory)) {
-      // Probably path traversal.
-      res.status(404).send('Not found');
-      return;
-    }
-
-    // esbuild should be fast enough that we can just build everything on the
-    // fly as it's requested! This is probably just for prototyping though. We
-    // should use some kind of caching to ensure that local dev stays fast.
-    esbuild
-      .build({
-        entryPoints: [resolvedAssetPath],
-        target: 'es6',
-        format: 'iife',
-        sourcemap: 'inline',
-        bundle: true,
-        write: false,
-      })
-      .then(
-        (buildResult) => {
-          res
-            .setHeader('Content-Type', 'application/javascript; charset=UTF-8')
-            .status(200)
-            .send(buildResult.outputFiles[0].text);
-        },
-        (buildError: Error) => {
-          res.status(500).send(buildError.message);
-        }
-      );
+    const proxyReq = http.request(
+      {
+        hostname: host,
+        port,
+        path: req.url,
+        method: req.method,
+        headers: req.headers,
+      },
+      (proxyRes) => {
+        res.writeHead(proxyRes.statusCode ?? 500, proxyRes.headers);
+        proxyRes.pipe(res, { end: true });
+      }
+    );
+    req.pipe(proxyReq, { end: true });
   };
 }
 
-let cachedScriptsManifest: Record<string, string> | null = null;
-function readScriptsManifest(): Record<string, string> {
+let cachedManifest: AssetsManifest | null = null;
+function readManifest(): AssetsManifest {
   assertConfigured();
 
-  if (!cachedScriptsManifest) {
-    const manifestPath = path.join(options.buildDirectory, 'scripts', 'manifest.json');
-    cachedScriptsManifest = fs.readJSONSync(manifestPath) as Record<string, string>;
+  if (!cachedManifest) {
+    const manifestPath = path.join(options.buildDirectory, 'manifest.json');
+    cachedManifest = fs.readJSONSync(manifestPath) as AssetsManifest;
   }
 
-  return cachedScriptsManifest;
+  return cachedManifest;
 }
 
-export function compiledScriptPath(sourceFile: string): string {
+function compiledPath(type: 'scripts' | 'stylesheets', sourceFile: string): string {
   assertConfigured();
+  const sourceFilePath = `${type}/${sourceFile}`;
 
   if (options.dev) {
-    return options.publicPath + 'scripts/' + sourceFile;
+    return options.publicPath + sourceFilePath.replace(/\.(js|ts)x?$/, '.js');
   }
 
-  const scriptsManifest = readScriptsManifest();
-  const scriptPath = scriptsManifest[sourceFile];
-  if (!scriptPath) {
-    throw new Error(`Unknown script: ${sourceFile}`);
+  const manifest = readManifest();
+  const assetPath = manifest[sourceFilePath];
+  if (!assetPath) {
+    throw new Error(`Unknown ${type} asset: ${sourceFile}`);
   }
 
-  return options.publicPath + 'scripts/' + scriptPath;
+  return `${options.publicPath}/${assetPath}`;
+}
+
+export function compiledScriptPath(sourceFile: string): string {
+  return compiledPath('scripts', sourceFile);
+}
+
+export function compiledStylesheetPath(sourceFile: string): string {
+  return compiledPath('stylesheets', sourceFile);
 }
 
 export function compiledScriptTag(sourceFile: string): HtmlSafeString {
   return html`<script src="${compiledScriptPath(sourceFile)}"></script>`;
 }
 
-export async function build(
-  sourceDirectory: string,
-  buildDirectory: string
-): Promise<esbuild.Metafile> {
-  // Remove existing assets to ensure that no stale assets are left behind.
-  await fs.remove(buildDirectory);
+export function compiledStylesheetTag(sourceFile: string): HtmlSafeString {
+  return html`<link rel="stylesheet" href="${compiledStylesheetPath(sourceFile)}" />`;
+}
 
-  const scriptsSourceRoot = path.resolve(sourceDirectory, 'scripts');
-  const scriptsBuildRoot = path.resolve(buildDirectory, 'scripts');
-  await fs.ensureDir(scriptsBuildRoot);
+async function buildAssets(sourceDirectory: string, buildDirectory: string) {
+  await fs.ensureDir(buildDirectory);
 
-  const files = await globby(path.join(scriptsSourceRoot, '*.{js,jsx,ts,tsx}'));
+  const files = await globby(path.join(sourceDirectory, '*/*.{js,jsx,ts,tsx,css}'));
   const buildResult = await esbuild.build({
     entryPoints: files,
     target: 'es6',
@@ -159,25 +185,46 @@ export async function build(
     sourcemap: 'linked',
     bundle: true,
     minify: true,
-    entryNames: '[name]-[hash]',
-    outdir: scriptsBuildRoot,
+    loader: {
+      '.woff': 'file',
+      '.woff2': 'file',
+    },
+    entryNames: '[dir]/[name]-[hash]',
+    outbase: sourceDirectory,
+    outdir: buildDirectory,
     metafile: true,
   });
 
-  // Write asset manifest so that we can map from "input" names to built names
-  // at runtime.
-  const { metafile } = buildResult;
+  return buildResult.metafile;
+}
+
+function makeManifest(
+  metafile: Metafile,
+  sourceDirectory: string,
+  buildDirectory: string
+): Record<string, string> {
   const manifest: Record<string, string> = {};
   Object.entries(metafile.outputs).forEach(([outputPath, meta]) => {
     if (!meta.entryPoint) return;
 
-    const entryPath = path.basename(meta.entryPoint);
-    const assetPath = path.basename(outputPath);
-
+    const entryPath = path.relative(sourceDirectory, meta.entryPoint);
+    const assetPath = path.relative(buildDirectory, outputPath);
     manifest[entryPath] = assetPath;
   });
-  const manifestPath = path.join(scriptsBuildRoot, 'manifest.json');
+  return manifest;
+}
+
+export async function build(
+  sourceDirectory: string,
+  buildDirectory: string
+): Promise<AssetsManifest> {
+  // Remove existing assets to ensure that no stale assets are left behind.
+  await fs.remove(buildDirectory);
+
+  const metafile = await buildAssets(sourceDirectory, buildDirectory);
+  const manifest = makeManifest(metafile, sourceDirectory, buildDirectory);
+  const manifestPath = path.join(buildDirectory, 'manifest.json');
   await fs.writeJSON(manifestPath, manifest);
 
-  return metafile;
+  return manifest;
 }

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@prairielearn/tsconfig",
+  "extends": "@prairielearn/tsconfig/tsconfig.package.json",
   "compilerOptions": {
     "outDir": "./dist",
     "rootDir": "./src",