Introduce fromGlob helper

bin/build.ts

@@ -1,3 +1,3 @@
 import { articles } from "../lib/tasks/articles.js";
 
-articles().then(() => console.log("Done."));
+(async () => await articles())();

lib/rx-utils.ts

@@ -1,21 +1,10 @@
-import { Observable, from, map } from "rxjs";
+import { Observable, Subscriber, from, mergeMap } from "rxjs";
 import File from "vinyl";
-import { Glob } from "glob";
 import { readFile } from "node:fs/promises";
 import { join, dirname } from "node:path";
 import { existsSync } from "node:fs";
 import { writeFile, mkdir } from "node:fs/promises";
-
-export function src(glob: string | string[]): Observable<Promise<File>> {
-    return from(new Glob(glob, {})).pipe(
-        map(async (path) => new File({ path, contents: await readFile(path) })),
-    );
-}
-
-export function then<T, U>(f: (v: T) => Promise<U>) {
-    return (observable: Observable<Promise<T>>): Observable<Promise<U>> =>
-        observable.pipe(map((v) => v.then(f)));
-}
+import { Glob } from "glob";
 
 export function dest(prefix: string) {
     return async (file: File) => {
@@ -30,30 +19,26 @@ export function dest(prefix: string) {
     };
 }
 
-export function synchronise<T>() {
-    return (observable: Observable<Promise<T>>): Observable<T> =>
-        new Observable<T>((subscriber) => {
-            const runningPromises = new Set<Promise<void>>();
-            let done = false;
-
+export function onComplete<T>(f: (sink: Subscriber<T>) => Promise<void>) {
+    return (observable: Observable<T>) =>
+        new Observable<T>((subscriber) =>
             observable.subscribe({
                 next(value) {
-                    const promise = value.then((v) => {
-                        runningPromises.delete(promise);
-
-                        subscriber.next(v);
-                        if (runningPromises.size === 0 && done) {
-                            subscriber.complete();
-                        }
-                    });
-                    runningPromises.add(promise);
+                    subscriber.next(value);
+                },
+                error(err) {
+                    subscriber.error(err);
                 },
                 complete() {
-                    done = true;
-                    if (runningPromises.size === 0) {
+                    f(subscriber);
                     subscriber.complete();
-                    }
                 },
-            });
-        });
+            }),
+        );
 }
+
+const loadFile = async (path: string): Promise<File> =>
+    new File({ path, contents: await readFile(path) });
+
+export const fromGlob = (paths: string | string[]): Observable<File> =>
+    from(new Glob(paths, {})).pipe(mergeMap(loadFile));

lib/tasks/articles.ts

@@ -1,4 +1,4 @@
-import { readFileSync, existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { readFileSync } from "node:fs";
 import { join, basename, dirname } from "node:path";
 import asciidoctor from "asciidoctor";
 import File from "vinyl";
@@ -18,8 +18,8 @@ import { renderToStaticMarkup } from "preact-render-to-string";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../constants.js";
 import { JSX } from "preact/jsx-runtime";
 import { reloadAssets } from "../assets.js";
-import { lastValueFrom } from "rxjs";
-import { src, synchronise, dest, then } from "../rx-utils.js";
+import { mergeMap, Observable, Subscriber } from "rxjs";
+import { dest, fromGlob, onComplete } from "../rx-utils.js";
 
 const Asciidoctor = asciidoctor();
 const EXTENSION_REGISTRY = Asciidoctor.Extensions.create();
@@ -33,7 +33,7 @@ EXTENSION_REGISTRY.inlineMacro("abbr", function () {
     });
 });
 
-function extractImages(array: File[], articlePath: string) {
+function extractImages(sink: (image: File) => void, articlePath: string) {
     return function () {
         return function (tree) {
             visit(tree, "element", function (node: any) {
@@ -47,7 +47,7 @@ function extractImages(array: File[], articlePath: string) {
                     contents: readFileSync(imagePath),
                 });
 
-                array.push(image);
+                sink(image);
             });
         };
     };
@@ -57,25 +57,8 @@ function renderDocument(root: JSX.Element): Buffer {
     return Buffer.concat([Buffer.from("<!doctype html>"), Buffer.from(renderToStaticMarkup(root))]);
 }
 
-const output = (prefix: string) => (file: File) => {
-    const realPath = join(prefix, file.path);
-    if (!existsSync(dirname(realPath))) {
-        mkdirSync(dirname(realPath), { recursive: true });
-    }
-
-    console.log("[-] Outputting", join(prefix, file.path));
-    writeFileSync(realPath, file.contents as Buffer);
-};
-
-export async function articles(): Promise<void> {
-    reloadAssets();
-    const _output = output("dist");
-    const articles: Article[] = [];
-    const images: File[] = [];
-
-    await lastValueFrom(
-        src("articles/**/*.asciidoc").pipe(
-            then(async (file) => {
+const transformArticle =
+    (sink: (file: File) => void, articles: Article[]) => async (file: File) => {
         const slug = basename(file.path, ".asciidoc");
         const document = Asciidoctor.load(file.contents.toString(), {
             extension_registry: EXTENSION_REGISTRY,
@@ -84,13 +67,13 @@ export async function articles(): Promise<void> {
         const article = { path: file.path, slug, date, document };
 
         if (PRODUCTION && date.equals(DEFAULT_DATE)) {
-                    return null;
+            return;
         }
 
         const vfile = await unified()
             .use(rehypeParse)
             .use(rehypeExternalLinks, { rel: "noopener", target: "_blank" })
-                    .use(extractImages(images, file.path))
+            .use(extractImages(sink, file.path))
             .use(rehypePrism)
             .use(rehypePresetMinify)
             .use(rehypeStringify)
@@ -107,25 +90,17 @@ export async function articles(): Promise<void> {
                 "og:description": document.getAttribute("description"),
                 "og:site_name": SITE_TITLE,
             },
-                    Content: () =>
-                        renderArticleLayout({
-                            article,
-                            body: vfile.toString(),
-                        }),
+            Content: () => renderArticleLayout({ article, body: vfile.toString() }),
         });
 
         file.path = join(slug, "index.html");
         file.contents = renderDocument(content);
 
         articles.push(article);
-                return file;
-            }),
-            then(dest("dist")),
-            synchronise(),
-        ),
-    );
-    images.forEach(_output);
+        sink(file);
+    };
 
+const finalizeArticles = (articles: Article[]) => async (sink: Subscriber<File>) => {
     articles.sort(({ date: a }, { date: b }) => b.diff(a).toMillis());
     const contents = renderLayout({
         meta: {
@@ -137,10 +112,25 @@ export async function articles(): Promise<void> {
         Content: () => renderIndex({ articles }),
     });
 
-    _output(
-        new File({
-            path: "index.html",
-            contents: renderDocument(contents),
+    sink.next(new File({ path: "index.html", contents: renderDocument(contents) }));
+};
+
+export const articles = () => {
+    reloadAssets();
+    const articles = [];
+
+    return fromGlob("articles/**/*.asciidoc")
+        .pipe(
+            mergeMap(
+                (file) =>
+                    new Observable<File>((subscriber) => {
+                        transformArticle(
+                            (f) => subscriber.next(f),
+                            articles,
+                        )(file).then(() => subscriber.complete());
                     }),
-    );
-}
+            ),
+            onComplete(finalizeArticles(articles)),
+        )
+        .forEach(dest("dist"));
+};

lib/tasks/css.ts

@@ -1,13 +1,13 @@
 import postcss, { Result } from "postcss";
 import config from "../../postcss.config.js";
-import { src, then, synchronise, dest } from "../rx-utils.js";
-import { map, lastValueFrom } from "rxjs";
+import { dest, fromGlob } from "../rx-utils.js";
+import { lastValueFrom, mergeMap } from "rxjs";
 import hashPaths from "../hash.js";
 
 export const css = () =>
     lastValueFrom(
-        src("src/index.css").pipe(
-            then(
+        fromGlob("src/index.css").pipe(
+            mergeMap(
                 (file) =>
                     new Promise((resolve) =>
                         postcss(config.plugins)
@@ -20,8 +20,7 @@ export const css = () =>
                             }),
                     ),
             ),
-            synchronise(),
             hashPaths("css.manifest"),
-            map(dest("dist/_assets")),
+            mergeMap(dest("dist/_assets")),
         ),
     );

lib/tasks/fonts.ts

@@ -3,8 +3,8 @@ import tmp from "tmp";
 import { execFile } from "node:child_process";
 import { readFileSync, unlinkSync } from "node:fs";
 import hashPaths from "../hash.js";
-import { src, then, synchronise, dest } from "../rx-utils.js";
-import { map } from "rxjs";
+import { dest, fromGlob } from "../rx-utils.js";
+import { mergeMap } from "rxjs";
 
 const FONT_PRESETS = {
     mono: { ranges: ["20-7F", "2205", "2E22-2E25", "2713", "2717"] },
@@ -34,9 +34,6 @@ function compileFont(font: File): Promise<File> {
 }
 
 export const fonts = () =>
-    src("vendor/*.ttf").pipe(
-        then(compileFont),
-        synchronise(),
-        hashPaths("fonts.manifest"),
-        map(dest("dist/_assets")),
-    );
+    fromGlob("vendor/*.ttf")
+        .pipe(mergeMap(compileFont), hashPaths("fonts.manifest"))
+        .forEach(dest("dist/_assets"));

lib/tasks/images.ts

@@ -1,14 +1,11 @@
 import hashPaths from "../hash.js";
-import { src, then, synchronise, dest } from "../rx-utils.js";
-import { map } from "rxjs";
+import { dest, fromGlob } from "../rx-utils.js";
+import { mergeMap, tap } from "rxjs";
 
 export const images = () =>
-    src("src/*.avif").pipe(
-        then(async (file) => {
-            file.path = file.path.substring(4);
-            return file;
-        }),
-        synchronise(),
+    fromGlob("src/*.avif")
+        .pipe(
+            tap((f) => (f.path = f.path.substring(4))),
             hashPaths("images.manifest"),
-        map(dest("dist/_assets")),
-    );
+        )
+        .forEach(dest("dist/_assets"));

lib/tasks/svg.ts

@@ -1,4 +1,8 @@
-import { src, dest } from "gulp";
+import { tap } from "rxjs";
+import { dest, fromGlob } from "../rx-utils.js";
 
 // SVG `use` has no way of allowing cross-origin, so we need to keep them with the HTML files.
-export const svg = () => src("src/*.svg").pipe(dest("dist/"));
+export const svg = () =>
+    fromGlob("src/*.svg")
+        .pipe(tap((f) => (f.path = f.path.substring(4))))
+        .forEach(dest("dist"));