rename backend to environment

this will soon be exposed for (1) configuring how paint fonts are
registered (to support skia-canvas etc) and (2) configuring how
fonts are loaded into a buffer, since that's kind of messed up
right now and (3) to merge setWasmLocator into

package.json

@@ -50,10 +50,9 @@
       "browser": "./dist/src/api-wasm-locator-browser.js",
       "default": "./dist/src/api-wasm-locator-node.js"
     },
-    "#backend": {
-      "buildtime": "./src/backend-node.js",
-      "browser": "./dist/src/backend-browser.js",
-      "default": "./dist/src/backend-node.js"
+    "#register-default-environment": {
+      "browser": "./dist/src/environment-browser.js",
+      "default": "./dist/src/environment-node.js"
     }
   },
   "scripts": {

src/api.ts

@@ -1,3 +1,4 @@
+import '#register-default-environment';
 import {HTMLElement, TextNode} from './dom.js';
 import {DeclaredStyle, getOriginStyle, computeElementStyle} from './style.js';
 import {registerFont, unregisterFont, getFontUrls, RegisterFontOptions} from './text-font.js';

src/environment-browser.ts

@@ -0,0 +1,17 @@
+import {environment, defaultEnvironment} from './environment.js';
+
+// TypeScript does not support different possibilities of runtime environments,
+// so the types loaded are for node. To add the browser environment too would
+// add too many globals.
+//
+// https://gist.github.com/RyanCavanaugh/702ebd1ca2fc060e58e634b4e30c1c1c
+declare const document: any;
+declare const FontFace: any;
+
+if (environment.registerFont === defaultEnvironment.registerFont) {
+  environment.registerFont = function (match, buffer, url) {
+    const descriptor = match.toCssDescriptor();
+    const face = new FontFace(descriptor.family, buffer, descriptor);
+    document.fonts.add(face);
+  };
+}

src/environment-node.ts

@@ -0,0 +1,22 @@
+import {environment, defaultEnvironment} from './environment.js';
+import {fileURLToPath} from 'url';
+
+const alreadyRegistered = new Set<string>();
+
+let canvas: typeof import('canvas') | undefined;
+
+try {
+  canvas = await import('canvas');
+} catch (e) {
+}
+
+if (canvas?.registerFont && environment.registerFont === defaultEnvironment.registerFont) {
+  environment.registerFont = (match, buffer, url) => {
+    const filename = fileURLToPath(url);
+    if (canvas?.registerFont && !alreadyRegistered.has(filename)) {
+      const descriptor = match.toCssDescriptor();
+      canvas.registerFont(filename, descriptor);
+      alreadyRegistered.add(filename);
+    }
+  };
+}

src/environment.ts

@@ -0,0 +1,13 @@
+import type {FaceMatch} from './text-font.js';
+
+export interface Environment {
+  registerFont(match: FaceMatch, buffer: Uint8Array, url: URL): void;
+}
+
+export const defaultEnvironment: Environment = {
+  registerFont() {
+    throw new Error('Invalid build! Your bundler needs to support "exports" in package.json.');
+  }
+};
+
+export const environment = {...defaultEnvironment};

src/text-font.ts

@@ -2,7 +2,7 @@ import * as hb from './text-harfbuzz.js';
 import langCoverage from '../gen/lang-script-coverage.js';
 import wasm from './wasm.js';
 import {HbSet, hb_tag, HB_OT_TAG_GSUB, HB_OT_TAG_GPOS, HB_OT_LAYOUT_DEFAULT_LANGUAGE_INDEX} from './text-harfbuzz.js';
-import {registerPaintFont} from '#backend';
+import {environment} from './environment.js';
 import {nameToCode, tagToCode} from '../gen/script-names.js';
 import subsetIdToUrls from '../gen/system-fonts-database.js';
 import UnicodeTrie from './text-unicode-trie.js';
@@ -511,7 +511,7 @@ export async function registerFont(
 
     const match = new FaceMatch(blob, 0, stringUrl);
 
-    if (options.paint) registerPaintFont(match, buffer, url);
+    if (options.paint) environment.registerFont(match, buffer, url);
 
     registeredFonts.set(stringUrl, match);