@sorane/font 0.2.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@sorane/font",
+  "version": "0.2.0",
+  "description": "Per-page WOFF2 font subsetting for sorane (bunsen WASM)",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/masanork/sorane.git",
+    "directory": "packages/font"
+  },
+  "homepage": "https://sorane.dev",
+  "bugs": "https://github.com/masanork/sorane/issues",
+  "files": [
+    "src",
+    "wasm"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "engines": {
+    "node": ">=23.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/baseline-charset.ts

@@ -0,0 +1,26 @@
+function range(start: number, endInclusive: number): number[] {
+  const out: number[] = [];
+  for (let cp = start; cp <= endInclusive; cp++) out.push(cp);
+  return out;
+}
+
+const PUNCT_AND_SYMBOLS: readonly string[] = [
+  "、", "。", "〈", "〉", "《", "》", "「", "」", "『", "』",
+  "【", "】", "〒", "〓", "〔", "〕", "〜", "・", "…", "‥",
+  "―", "─",
+  "〇", "々", "〆", "ヶ", "※",
+  "：", "；", "！", "？", "（", "）", "｛", "｝",
+  "［", "］", "＜", "＞",
+];
+
+const codepoints = new Set<number>();
+for (const cp of range(0x0020, 0x007e)) codepoints.add(cp);
+for (const cp of range(0x3041, 0x3096)) codepoints.add(cp);
+for (const cp of range(0x30a1, 0x30f6)) codepoints.add(cp);
+for (const cp of range(0xff10, 0xff19)) codepoints.add(cp);
+for (const cp of range(0xff21, 0xff3a)) codepoints.add(cp);
+for (const cp of range(0xff41, 0xff5a)) codepoints.add(cp);
+for (const cp of range(0xff66, 0xff9d)) codepoints.add(cp);
+for (const ch of PUNCT_AND_SYMBOLS) codepoints.add(ch.codePointAt(0)!);
+
+export const BASELINE_CODEPOINTS: ReadonlySet<number> = codepoints;

package/src/extract-charset.ts

@@ -0,0 +1,24 @@
+import { BASELINE_CODEPOINTS } from "./baseline-charset.ts";
+
+/** HTML からタグを除いた可視テキスト（フォントサブセット用） */
+export function plainTextFromHtml(html: string): string {
+  return html
+    .replace(/<script[\s\S]*?<\/script>/gi, "")
+    .replace(/<style[\s\S]*?<\/style>/gi, "")
+    .replace(/<[^>]*>/g, "");
+}
+
+export function extractCharset(
+  body: string,
+  title = "",
+  baseline: ReadonlySet<number> = BASELINE_CODEPOINTS,
+  extra = "",
+): string {
+  const codepoints = new Set<number>(baseline);
+  for (const ch of title + body + extra) {
+    const cp = ch.codePointAt(0);
+    if (cp !== undefined) codepoints.add(cp);
+  }
+  const sorted = [...codepoints].sort((a, b) => a - b);
+  return String.fromCodePoint(...sorted);
+}

package/src/font-face.ts

@@ -0,0 +1,35 @@
+export interface FontFaceEntry {
+  readonly family: string;
+  readonly url: string;
+  readonly weight: string;
+  readonly format?: "woff2" | "truetype" | "opentype";
+}
+
+function fontFaceRule(entry: FontFaceEntry): string {
+  const format = entry.format ?? "woff2";
+  return (
+    `@font-face {\n` +
+    `  font-family: '${entry.family}';\n` +
+    `  src: url('${entry.url}') format('${format}');\n` +
+    `  font-weight: ${entry.weight};\n` +
+    `  font-style: normal;\n` +
+    `  font-display: swap;\n` +
+    `}`
+  );
+}
+
+/** 単一フォント（後方互換）。 */
+export function buildFontFaceCss(family: string, woff2Url: string, weight = "450"): string {
+  return (
+    `<style>\n` +
+    `${fontFaceRule({ family, url: woff2Url, weight })}\n` +
+    `body { font-family: '${family}', system-ui, sans-serif; font-weight: ${weight}; }\n` +
+    `</style>`
+  );
+}
+
+/** 複数フォントスタック。本文の font-family は main.css 側で定義する。 */
+export function buildFontStackCss(faces: readonly FontFaceEntry[]): string {
+  if (faces.length === 0) return "";
+  return `<style>\n${faces.map(fontFaceRule).join("\n")}\n</style>`;
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export { BASELINE_CODEPOINTS } from "./baseline-charset.ts";
+export { extractCharset, plainTextFromHtml } from "./extract-charset.ts";
+export { buildFontFaceCss, buildFontStackCss, type FontFaceEntry } from "./font-face.ts";
+export {
+  createFontProcessor,
+  type FontConfig,
+  type FontProcessor,
+  type FontRoles,
+  type FontSourceSpec,
+} from "./processor.ts";

package/src/processor.ts

@@ -0,0 +1,226 @@
+import { createHash } from "node:crypto";
+import {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  writeFileSync,
+} from "node:fs";
+import { basename, join, resolve } from "node:path";
+import { extractCharset } from "./extract-charset.ts";
+import { buildFontFaceCss, buildFontStackCss } from "./font-face.ts";
+import { subsetWoff2 } from "./wasm-subsetter.ts";
+
+export interface FontSourceSpec {
+  readonly source: string;
+  readonly weight?: string;
+  /** subset（既定）または dist へそのままコピーする static */
+  readonly embed?: "subset" | "static";
+}
+
+export interface FontRoles {
+  readonly body: readonly string[];
+  readonly heading?: readonly string[];
+  readonly code?: readonly string[];
+}
+
+export interface FontConfig {
+  readonly enabled: boolean;
+  readonly cache_dir: string;
+  readonly skip_key: string;
+  /** 単一フォント（後方互換） */
+  readonly family?: string;
+  readonly source?: string;
+  readonly weight?: string;
+  /** 複数フォントスタック */
+  readonly roles?: FontRoles;
+  readonly sources?: Readonly<Record<string, FontSourceSpec>>;
+}
+
+export interface FontProcessor {
+  fontCssForPage(opts: {
+    body: string;
+    title: string;
+    /** レンダリング済み HTML 由来の追加文字（index 等） */
+    extraText?: string;
+    frontmatter: Record<string, unknown>;
+    rootPrefix: string;
+  }): Promise<string | undefined>;
+}
+
+interface LoadedFont {
+  readonly family: string;
+  readonly bytes: Uint8Array;
+  readonly weight: string;
+  readonly embed: "subset" | "static";
+  readonly sourcePath: string;
+}
+
+function sha256Hex(bytes: Uint8Array): string {
+  return createHash("sha256").update(bytes).digest("hex");
+}
+
+function textHash(text: string): string {
+  return createHash("sha256").update(text, "utf8").digest("hex").slice(0, 16);
+}
+
+function familySlug(family: string): string {
+  return family.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+
+function collectFamilies(config: FontConfig): readonly string[] {
+  if (!config.roles) return [];
+  const out = new Set<string>();
+  for (const list of [config.roles.body, config.roles.heading, config.roles.code]) {
+    if (list) for (const family of list) out.add(family);
+  }
+  return [...out];
+}
+
+function loadFonts(cwd: string, config: FontConfig): LoadedFont[] | null {
+  if (config.sources && config.roles) {
+    const families = collectFamilies(config);
+    const loaded: LoadedFont[] = [];
+    for (const family of families) {
+      const spec = config.sources[family];
+      if (!spec) {
+        process.stderr.write(`[sorane] font source spec missing for family: ${family}\n`);
+        continue;
+      }
+      const sourcePath = resolve(cwd, spec.source);
+      if (!existsSync(sourcePath)) {
+        process.stderr.write(`[sorane] font source not found: ${sourcePath} (skipping ${family})\n`);
+        continue;
+      }
+      loaded.push({
+        family,
+        bytes: new Uint8Array(readFileSync(sourcePath)),
+        weight: spec.weight ?? "400",
+        embed: spec.embed ?? "subset",
+        sourcePath,
+      });
+    }
+    return loaded.length > 0 ? loaded : null;
+  }
+
+  if (!config.family || !config.source) return null;
+  const sourcePath = resolve(cwd, config.source);
+  if (!existsSync(sourcePath)) {
+    process.stderr.write(`[sorane] font source not found: ${sourcePath} (skipping subset)\n`);
+    return null;
+  }
+  return [{
+    family: config.family,
+    bytes: new Uint8Array(readFileSync(sourcePath)),
+    weight: config.weight ?? "450",
+    embed: "subset",
+    sourcePath,
+  }];
+}
+
+export async function createFontProcessor(
+  cwd: string,
+  config: FontConfig,
+  outDir: string,
+): Promise<FontProcessor | null> {
+  if (!config.enabled) return null;
+
+  const fonts = loadFonts(cwd, config);
+  if (!fonts || fonts.length === 0) return null;
+
+  const stackMode = Boolean(config.sources && config.roles);
+  const cacheDir = resolve(cwd, config.cache_dir);
+  const distFontDir = join(outDir, "assets", "fonts");
+  mkdirSync(cacheDir, { recursive: true });
+  mkdirSync(distFontDir, { recursive: true });
+
+  const subsetFonts = fonts.filter((f) => f.embed === "subset");
+  if (subsetFonts.length > 0) {
+    try {
+      await subsetWoff2(subsetFonts[0]!.bytes, "Aa"); // warm WASM
+    } catch {
+      // ウォームアップ失敗は本番サブセット処理に委ねる
+    }
+  }
+
+  const written = new Map<string, string>();
+  const staticFaces: Array<{ family: string; url: string; weight: string; format: "woff2" | "truetype" | "opentype" }> = [];
+
+  for (const font of fonts) {
+    if (font.embed !== "static") continue;
+    const distName = basename(font.sourcePath);
+    const distPath = join(distFontDir, distName);
+    if (!existsSync(distPath)) {
+      copyFileSync(font.sourcePath, distPath);
+    }
+    const ext = distName.split(".").pop()?.toLowerCase();
+    const format = ext === "otf" ? "opentype" : "truetype";
+    staticFaces.push({
+      family: font.family,
+      url: `assets/fonts/${distName}`,
+      weight: font.weight,
+      format,
+    });
+  }
+
+  return {
+    async fontCssForPage(opts) {
+      if (opts.frontmatter[config.skip_key] === true) {
+        return undefined;
+      }
+
+      const text = extractCharset(opts.body, opts.title, undefined, opts.extraText ?? "");
+      const key = textHash(text);
+      const faces: Array<{ family: string; url: string; weight: string; format?: "woff2" | "truetype" | "opentype" }> = [
+        ...staticFaces.map((f) => ({
+          ...f,
+          url: `${opts.rootPrefix}${f.url}`,
+        })),
+      ];
+
+      for (const font of fonts) {
+        if (font.embed === "static") continue;
+
+        const cacheKey = `${familySlug(font.family)}:${key}`;
+        let distName = written.get(cacheKey);
+
+        if (!distName) {
+          const cachePath = join(cacheDir, `${familySlug(font.family)}-${key}.woff2`);
+          let woff2: Uint8Array;
+          if (existsSync(cachePath)) {
+            woff2 = new Uint8Array(readFileSync(cachePath));
+          } else {
+            try {
+              woff2 = await subsetWoff2(font.bytes, text);
+            } catch {
+              // Ext/PUP などページ内に該当グリフが無い書体はスキップ
+              continue;
+            }
+            writeFileSync(cachePath, woff2);
+          }
+          const hash = sha256Hex(woff2).slice(0, 12);
+          distName = `${familySlug(font.family)}-${hash}.woff2`;
+          const distPath = join(distFontDir, distName);
+          if (!existsSync(distPath)) {
+            writeFileSync(distPath, woff2);
+          }
+          written.set(cacheKey, distName);
+        }
+
+        faces.push({
+          family: font.family,
+          url: `${opts.rootPrefix}assets/fonts/${distName}`,
+          weight: font.weight,
+          format: "woff2",
+        });
+      }
+
+      if (stackMode) {
+        return buildFontStackCss(faces);
+      }
+
+      const primary = faces[0]!;
+      return buildFontFaceCss(primary.family, primary.url, primary.weight);
+    },
+  };
+}

package/src/wasm-subsetter.ts

@@ -0,0 +1,33 @@
+import { readFileSync } from "node:fs";
+// @ts-expect-error wasm-bindgen glue
+import * as bg from "../wasm/bunsen_font_subsetter_bg.js";
+
+let initPromise: Promise<void> | null = null;
+
+async function ensureInit(): Promise<void> {
+  if (initPromise) return initPromise;
+  initPromise = (async () => {
+    const url = new URL("../wasm/bunsen_font_subsetter_bg.wasm", import.meta.url);
+    const bytes = readFileSync(url);
+    const imports = {
+      "./bunsen_font_subsetter_bg.js": bg as unknown as Record<string, WebAssembly.ImportValue>,
+    };
+    const result = await WebAssembly.instantiate(bytes, imports);
+    const instance = "instance" in result ? result.instance : result;
+    bg.__wbg_set_wasm(instance.exports);
+    const exports = instance.exports as Record<string, unknown>;
+    if (typeof exports.__wbindgen_start === "function") {
+      (exports.__wbindgen_start as () => void)();
+    }
+  })();
+  return initPromise;
+}
+
+export async function subsetWoff2(fontBytes: Uint8Array, text: string): Promise<Uint8Array> {
+  await ensureInit();
+  const out = bg.subset_font(fontBytes, text) as Uint8Array;
+  if (out.length === 0) {
+    throw new Error("font subsetter returned empty bytes");
+  }
+  return out;
+}

package/wasm/bunsen_font_subsetter_bg.js

@@ -0,0 +1,149 @@
+/**
+ * Encode raw font data to WOFF2 format.
+ * @param {Uint8Array} font_data
+ * @returns {Uint8Array}
+ */
+export function compress_woff2(font_data) {
+    const ptr0 = passArray8ToWasm0(font_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.compress_woff2(ptr0, len0);
+    var v2 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v2;
+}
+
+/**
+ * Check if a font has glyphs for all base characters in the text.
+ * @param {Uint8Array} font_data
+ * @param {string} text
+ * @returns {boolean}
+ */
+export function font_has_glyphs(font_data, text) {
+    const ptr0 = passArray8ToWasm0(font_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ptr1 = passStringToWasm0(text, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len1 = WASM_VECTOR_LEN;
+    const ret = wasm.font_has_glyphs(ptr0, len0, ptr1, len1);
+    return ret !== 0;
+}
+
+/**
+ * Subset a font to only include glyphs needed for the given text,
+ * with IVS (cmap format 14) support, then compress to WOFF2 format.
+ * @param {Uint8Array} font_data
+ * @param {string} text
+ * @returns {Uint8Array}
+ */
+export function subset_font(font_data, text) {
+    const ptr0 = passArray8ToWasm0(font_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ptr1 = passStringToWasm0(text, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len1 = WASM_VECTOR_LEN;
+    const ret = wasm.subset_font(ptr0, len0, ptr1, len1);
+    var v3 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v3;
+}
+
+/**
+ * Subset a font without WOFF2 compression (returns raw OTF).
+ * @param {Uint8Array} font_data
+ * @param {string} text
+ * @returns {Uint8Array}
+ */
+export function subset_font_raw(font_data, text) {
+    const ptr0 = passArray8ToWasm0(font_data, wasm.__wbindgen_malloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ptr1 = passStringToWasm0(text, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len1 = WASM_VECTOR_LEN;
+    const ret = wasm.subset_font_raw(ptr0, len0, ptr1, len1);
+    var v3 = getArrayU8FromWasm0(ret[0], ret[1]).slice();
+    wasm.__wbindgen_free(ret[0], ret[1] * 1, 1);
+    return v3;
+}
+export function __wbindgen_init_externref_table() {
+    const table = wasm.__wbindgen_externrefs;
+    const offset = table.grow(4);
+    table.set(0, undefined);
+    table.set(offset + 0, undefined);
+    table.set(offset + 1, null);
+    table.set(offset + 2, true);
+    table.set(offset + 3, false);
+}
+function getArrayU8FromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
+}
+
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+    if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+        cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachedUint8ArrayMemory0;
+}
+
+function passArray8ToWasm0(arg, malloc) {
+    const ptr = malloc(arg.length * 1, 1) >>> 0;
+    getUint8ArrayMemory0().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+
+function passStringToWasm0(arg, malloc, realloc) {
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length, 1) >>> 0;
+        getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len, 1) >>> 0;
+
+    const mem = getUint8ArrayMemory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+        const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+        const ret = cachedTextEncoder.encodeInto(arg, view);
+
+        offset += ret.written;
+        ptr = realloc(ptr, len, offset, 1) >>> 0;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+const cachedTextEncoder = new TextEncoder();
+
+if (!('encodeInto' in cachedTextEncoder)) {
+    cachedTextEncoder.encodeInto = function (arg, view) {
+        const buf = cachedTextEncoder.encode(arg);
+        view.set(buf);
+        return {
+            read: arg.length,
+            written: buf.length
+        };
+    };
+}
+
+let WASM_VECTOR_LEN = 0;
+
+
+let wasm;
+export function __wbg_set_wasm(val) {
+    wasm = val;
+}