@altano/satori-fit-text 1.0.1 → 2.0.0

package/README.md

@@ -45,10 +45,16 @@ console.log(largestUsableFontSize);
 
 ## Example Uses
 
-- [React Component (sandbox)](https://codesandbox.io/s/altano-satori-fit-text-browser-example-j2gvk6)
-- [Next.js Open Graph Card - Simple (codesandbox)](https://codesandbox.io/p/sandbox/altano-satori-fit-text-next-js-demo-sv4flc)
+### Code Sandboxes
+
+- [Playground with controls](https://codesandbox.io/p/sandbox/github/altano/npm-packages/tree/main/examples/satori-fit-text-playground?file=%2Fpackage.json%3A1%2C1)
+- [React Component](https://codesandbox.io/s/altano-satori-fit-text-browser-example-j2gvk6)
+- [Node.js CLI App](https://codesandbox.io/p/sandbox/github/altano/npm-packages/tree/main/examples/satori-fit-text-node-cli?file=%2Fpackage.json%3A1%2C1)
+- [Next.js Open Graph Card - Simple](https://codesandbox.io/p/sandbox/altano-satori-fit-text-next-js-demo-sv4flc)
+
+### Code
+
 - [Next.js Open Graph Card - Complex](https://github.com/altano/alan.norbauer.com/blob/main/src/components/opengraph/image.tsx#L29-L35)
-- [Node.js CLI App (codesandbox)](https://codesandbox.io/p/sandbox/github/altano/npm-packages/tree/main/examples/satori-fit-text-node-cli?file=%2Fpackage.json%3A1%2C1)
 
 ## Implementation
 

package/dist/TextMeasurer/BrowserTextMeasurer.js

@@ -1,36 +1,41 @@
-import log from "../log.js";
+import log_default from "../log.js";
 import { TextMeasurer } from "./TextMeasurer.js";
-class BrowserTextMeasurer extends TextMeasurer {
-  #getSvgElement(svgText) {
-    const div = document.createElement("div");
-    div.style.position = "fixed";
-    div.innerHTML = svgText;
-    const svg = div.firstElementChild;
-    if (svg == null || !(svg instanceof SVGSVGElement)) {
-      throw new Error(`Child should be svg element`);
-    }
-    return svg;
-  }
-  async getDimensions(fontSize) {
-    const svgText = await this.generateSvg(fontSize);
-    const svg = this.#getSvgElement(svgText);
-    try {
-      document.body.appendChild(svg);
-      const dimensions = svg.getBBox();
-      const { width, height } = dimensions;
-      log({
-        fontSize,
-        width: `${width}px`,
-        height: `${height}px`,
-        widthFits: `${width}px ${width <= this.maxWidth ? "DOES" : "does NOT"} fit in ${this.maxWidth}`,
-        heightFits: `${height}px ${height <= this.maxHeight ? "DOES" : "does NOT"} fit in ${this.maxHeight}`
-      });
-      return dimensions;
-    } finally {
-      svg.parentElement?.removeChild?.(svg);
-    }
-  }
-}
-export {
-  BrowserTextMeasurer as default
+
+//#region src/TextMeasurer/BrowserTextMeasurer.ts
+var BrowserTextMeasurer = class extends TextMeasurer {
+	#createSvgElement(svgXML) {
+		const wrapper = document.createElement("div");
+		wrapper.innerHTML = svgXML;
+		const svg = wrapper.firstElementChild;
+		if (svg == null || !(svg instanceof SVGSVGElement)) throw new Error(`Child should be svg element`);
+		return svg;
+	}
+	async getDimensions(fontSize) {
+		const svgXML = await this.createSvgXmlString(fontSize);
+		const svg = this.#createSvgElement(svgXML);
+		try {
+			document.body.appendChild(svg);
+			const dimensions = svg.getBBox();
+			const width = dimensions.width + Math.min(dimensions.x, 0);
+			const height = dimensions.height + Math.min(dimensions.y, 0);
+			log_default({
+				fontSize,
+				width: `${width}px`,
+				height: `${height}px`,
+				widthFits: `${width}px ${width <= this.maxWidth ? "DOES" : "does NOT"} fit in ${this.maxWidth}`,
+				heightFits: `${height}px ${height <= this.maxHeight ? "DOES" : "does NOT"} fit in ${this.maxHeight}`
+			});
+			return {
+				width,
+				height
+			};
+		} finally {
+			svg.parentElement?.removeChild?.(svg);
+		}
+	}
 };
+/* v8 ignore stop */
+
+//#endregion
+export { BrowserTextMeasurer as default };
+//# sourceMappingURL=BrowserTextMeasurer.js.map

package/dist/TextMeasurer/HeadlessTextMeasurer.js

@@ -1,35 +1,42 @@
+import log_default from "../log.js";
+import { TextMeasurer } from "./TextMeasurer.js";
 import { SVG, registerWindow } from "@svgdotjs/svg.js";
 import { createSVGWindow } from "svgdom";
-import log from "../log.js";
-import { TextMeasurer } from "./TextMeasurer.js";
-class HeadlessTextMeasurer extends TextMeasurer {
-  #canvas;
-  constructor(text, font, maxWidth, maxHeight, lineHeight) {
-    super(text, font, maxWidth, maxHeight, lineHeight);
-    const window = createSVGWindow();
-    const document = window.document;
-    registerWindow(window, document);
-    this.#canvas = SVG(document.documentElement);
-  }
-  async getDimensions(fontSize) {
-    await this.#setFontSize(fontSize);
-    const dimensions = this.#canvas.bbox();
-    const { width, height } = dimensions;
-    log({
-      fontSize,
-      width: `${width}px`,
-      height: `${height}px`,
-      widthFits: `${width}px ${width <= this.maxWidth ? "DOES" : "does NOT"} fit in ${this.maxWidth}`,
-      heightFits: `${height}px ${height <= this.maxHeight ? "DOES" : "does NOT"} fit in ${this.maxHeight}`
-    });
-    return dimensions;
-  }
-  async #setFontSize(fontSize) {
-    const svgText = await this.generateSvg(fontSize);
-    this.#canvas.clear();
-    this.#canvas.svg(svgText);
-  }
-}
-export {
-  HeadlessTextMeasurer as default
+
+//#region src/TextMeasurer/HeadlessTextMeasurer.ts
+var HeadlessTextMeasurer = class extends TextMeasurer {
+	#canvas;
+	constructor(text, font, maxWidth, maxHeight, lineHeight) {
+		super(text, font, maxWidth, maxHeight, lineHeight);
+		const window = createSVGWindow();
+		const document = window.document;
+		registerWindow(window, document);
+		this.#canvas = SVG(document.documentElement);
+	}
+	async getDimensions(fontSize) {
+		await this.#setFontSize(fontSize);
+		const dimensions = this.#canvas.bbox();
+		const width = dimensions.width + Math.min(dimensions.x, 0);
+		const height = dimensions.height + Math.min(dimensions.y, 0);
+		log_default({
+			fontSize,
+			width: `${width}px`,
+			height: `${height}px`,
+			widthFits: `${width}px ${width <= this.maxWidth ? "DOES" : "does NOT"} fit in ${this.maxWidth}`,
+			heightFits: `${height}px ${height <= this.maxHeight ? "DOES" : "does NOT"} fit in ${this.maxHeight}`
+		});
+		return {
+			width,
+			height
+		};
+	}
+	async #setFontSize(fontSize) {
+		const svgXML = await this.createSvgXmlString(fontSize);
+		this.#canvas.clear();
+		this.#canvas.svg(svgXML);
+	}
 };
+
+//#endregion
+export { HeadlessTextMeasurer as default };
+//# sourceMappingURL=HeadlessTextMeasurer.js.map

package/dist/TextMeasurer/TextMeasurer.js

@@ -1,59 +1,50 @@
 import satori from "satori";
-class TextMeasurer {
-  constructor(text, font, maxWidth, maxHeight, lineHeight) {
-    this.text = text;
-    this.font = font;
-    this.maxWidth = maxWidth;
-    this.maxHeight = maxHeight;
-    this.lineHeight = lineHeight;
-    this.#fonts = [this.font];
-  }
-  #fonts;
-  async doesSizeFit(fontSize) {
-    const { width, height } = await this.getDimensions(fontSize);
-    return width <= this.maxWidth && height <= this.maxHeight;
-  }
-  async generateSvg(fontSize) {
-    const node = {
-      type: "div",
-      props: {
-        style: {
-          all: "initial",
-          display: "flex",
-          flexDirection: "column",
-          width: "100%",
-          height: "100%",
-          margin: 0,
-          padding: 0
-        },
-        children: [
-          {
-            type: "div",
-            props: {
-              style: {
-                // Static styles
-                margin: 0,
-                padding: 0,
-                boxSizing: "border-box",
-                // Dynamic styles based on input
-                fontSize,
-                fontFamily: this.font.name,
-                maxWidth: this.maxWidth,
-                lineHeight: this.lineHeight
-              },
-              children: this.text
-            }
-          }
-        ]
-      }
-    };
-    return satori(node, {
-      fonts: this.#fonts,
-      width: this.maxWidth * 2,
-      height: this.maxHeight * 2
-    });
-  }
-}
-export {
-  TextMeasurer
+
+//#region src/TextMeasurer/TextMeasurer.ts
+const epsilon = 1e-4;
+var TextMeasurer = class {
+	#fonts;
+	constructor(text, font, maxWidth, maxHeight, lineHeight) {
+		this.text = text;
+		this.font = font;
+		this.maxWidth = maxWidth;
+		this.maxHeight = maxHeight;
+		this.lineHeight = lineHeight;
+		this.#fonts = [this.font];
+	}
+	async doesSizeFit(fontSize) {
+		const { width, height } = await this.getDimensions(fontSize);
+		return width - epsilon <= this.maxWidth && height - epsilon <= this.maxHeight;
+	}
+	async createSvgXmlString(fontSize) {
+		const node = {
+			type: "div",
+			key: "satori-fit-text-measure-node",
+			props: {
+				style: {
+					background: "white",
+					color: "black",
+					display: "flex",
+					flex: 1,
+					boxSizing: "border-box",
+					margin: 0,
+					padding: 0,
+					fontSize,
+					fontFamily: this.font.name,
+					maxWidth: this.maxWidth,
+					lineHeight: this.lineHeight
+				},
+				children: this.text
+			}
+		};
+		return satori(node, {
+			fonts: this.#fonts,
+			width: this.maxWidth * 2,
+			height: this.maxHeight * 2
+		});
+	}
 };
+
+//#endregion
+export { TextMeasurer };
+//# sourceMappingURL=TextMeasurer.js.map

package/dist/TextMeasurer/getTextMeasurer.js

@@ -1,12 +1,15 @@
+//#region src/TextMeasurer/getTextMeasurer.ts
 async function getTextMeasurer(...args) {
-  if (typeof window !== "undefined") {
-    const Measurer = await import("./BrowserTextMeasurer.js");
-    return new Measurer.default(...args);
-  } else {
-    const Measurer = await import("./HeadlessTextMeasurer.js");
-    return new Measurer.default(...args);
-  }
+	/* v8 ignore next 3 */
+	if (typeof window !== "undefined") {
+		const Measurer = await import("./BrowserTextMeasurer.js");
+		return new Measurer.default(...args);
+	} else {
+		const Measurer = await import("./HeadlessTextMeasurer.js");
+		return new Measurer.default(...args);
+	}
 }
-export {
-  getTextMeasurer
-};
+
+//#endregion
+export { getTextMeasurer };
+//# sourceMappingURL=getTextMeasurer.js.map

package/dist/fitText.d.ts

@@ -1,43 +1,55 @@
-import type { Font } from "./types.js";
-export type FindOptions = {
-    /**
-     * The text you want to fit
-     */
-    text: string;
-    /**
-     * The font of your text. Options are the same as [those taken by
-     * Satori](https://github.com/vercel/satori#fonts), but only one font and not
-     * an array of fonts is accepted here.
-     */
-    font: Font;
-    /**
-     * The max width the text must be contained in
-     */
-    maxWidth: number;
-    /**
-     * The max height the text must be contained in
-     */
-    maxHeight: number;
-    /**
-     * Optional: the CSS line height factor to use, e.g. 1.1
-     */
-    lineHeight?: number | "normal";
-    /**
-     * The minimum font size that should be returned, even if smaller fonts fit
-     */
-    minFontSize?: number;
-    /**
-     * The maximum font size that should be returned, even if larger fonts fit
-     */
-    maxFontSize?: number;
-    /**
-     * The maximum number of font sizes to try before giving up. Defaults to 1000.
-     */
-    maxTries?: number;
+import { Font } from "./types.js";
+
+//#region src/fitText.d.ts
+type FindOptions = {
+  /**
+  * The text you want to fit
+  */
+  text: string;
+  /**
+  * The font of your text. Options are the same as [those taken by
+  * Satori](https://github.com/vercel/satori#fonts), but only one font and not
+  * an array of fonts is accepted here.
+  */
+  font: Font;
+  /**
+  * The max width the text must be contained in
+  */
+  maxWidth: number;
+  /**
+  * The max height the text must be contained in
+  */
+  maxHeight: number;
+  /**
+  * Optional: the CSS line height factor to use, e.g. 1.1
+  */
+  lineHeight?: number | "normal";
+  /**
+  * The minimum font size that should be returned, even if smaller fonts fit
+  */
+  minFontSize?: number;
+  /**
+  * The maximum font size that should be returned, even if larger fonts fit
+  */
+  maxFontSize?: number;
+  /**
+  * The maximum number of font sizes to try before giving up. Defaults to 1000.
+  */
+  maxTries?: number;
 };
 /**
- * Given text, dimensions, and some options, returns the largest font size that
- * would keep the text contained within the dimensions.
- */
-export declare function findLargestUsableFontSize({ text, font, maxWidth, maxHeight, lineHeight, minFontSize, maxFontSize, maxTries, }: FindOptions): Promise<number>;
+* Given text, dimensions, and some options, returns the largest font size that
+* would keep the text contained within the dimensions.
+*/
+declare function findLargestUsableFontSize({
+  text,
+  font,
+  maxWidth,
+  maxHeight,
+  lineHeight,
+  minFontSize,
+  maxFontSize,
+  maxTries
+}: FindOptions): Promise<number>; //#endregion
+export { FindOptions, findLargestUsableFontSize };
 //# sourceMappingURL=fitText.d.ts.map

package/dist/fitText.js

@@ -1,41 +1,24 @@
 import { getTextMeasurer } from "./TextMeasurer/getTextMeasurer.js";
-async function findLargestUsableFontSize({
-  text,
-  font,
-  maxWidth,
-  maxHeight,
-  lineHeight = "normal",
-  minFontSize = 1,
-  maxFontSize = 1e3,
-  maxTries = 1e3
-}) {
-  if (maxTries < 2) {
-    throw new Error("`maxTries` must be >= 2");
-  }
-  const textMeasurer = await getTextMeasurer(
-    text,
-    font,
-    maxWidth,
-    maxHeight,
-    lineHeight
-  );
-  for (let tries = 1, lower = minFontSize, upper = maxFontSize; tries < maxTries; ++tries) {
-    const searchCutoffThreshold = Math.min(1, lower);
-    if (upper - lower <= searchCutoffThreshold) {
-      return Math.floor(lower);
-    }
-    const sizeCandidate = Math.floor(lower + (upper - lower) / 2);
-    const doesFit = await textMeasurer.doesSizeFit(sizeCandidate);
-    if (doesFit) {
-      lower = sizeCandidate;
-    } else {
-      upper = sizeCandidate;
-    }
-  }
-  throw new Error(
-    `Could not find a valid font size in ${maxTries - 1} attempts. Giving up. Please try again after constraining the search space, e.g. by restricting the min/max font size difference.`
-  );
+
+//#region src/fitText.ts
+/**
+* Given text, dimensions, and some options, returns the largest font size that
+* would keep the text contained within the dimensions.
+*/
+async function findLargestUsableFontSize({ text, font, maxWidth, maxHeight, lineHeight = "normal", minFontSize = 1, maxFontSize = 1e3, maxTries = 1e3 }) {
+	if (maxTries < 2) throw new Error("`maxTries` must be >= 2");
+	const textMeasurer = await getTextMeasurer(text, font, maxWidth, maxHeight, lineHeight);
+	for (let tries = 1, lower = minFontSize, upper = maxFontSize; tries < maxTries; ++tries) {
+		const searchCutoffThreshold = Math.min(1, lower);
+		if (upper - lower <= searchCutoffThreshold) return Math.floor(lower);
+		const sizeCandidate = Math.floor(lower + (upper - lower) / 2);
+		const doesFit = await textMeasurer.doesSizeFit(sizeCandidate);
+		if (doesFit) lower = sizeCandidate;
+		else upper = sizeCandidate;
+	}
+	throw new Error(`Could not find a valid font size in ${maxTries - 1} attempts. Giving up. Please try again after constraining the search space, e.g. by restricting the min/max font size difference.`);
 }
-export {
-  findLargestUsableFontSize
-};
+
+//#endregion
+export { findLargestUsableFontSize };
+//# sourceMappingURL=fitText.js.map

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./fitText.js";
-export * from "./types.js";
-//# sourceMappingURL=index.d.ts.map
+import { Dimensions, Font } from "./types.js";
+import { FindOptions, findLargestUsableFontSize } from "./fitText.js";
+export { Dimensions, FindOptions, Font, findLargestUsableFontSize };

package/dist/index.js

@@ -1,2 +1,3 @@
-export * from "./fitText.js";
-export * from "./types.js";
+import { findLargestUsableFontSize } from "./fitText.js";
+
+export { findLargestUsableFontSize };

package/dist/log.d.ts

@@ -1,4 +1,8 @@
 import debug from "debug";
+
+//#region src/log.d.ts
 declare const log: debug.Debugger;
-export default log;
+
+//#endregion
+export { log as default };
 //# sourceMappingURL=log.d.ts.map

package/dist/log.js

@@ -1,6 +1,9 @@
 import debug from "debug";
+
+//#region src/log.ts
 const log = debug("satori-text-fit");
 var log_default = log;
-export {
-  log_default as default
-};
+
+//#endregion
+export { log_default as default };
+//# sourceMappingURL=log.js.map

package/dist/types.d.ts

@@ -1,4 +1,9 @@
-import type { Font as SatoriFont } from "satori";
-export type Dimensions = Pick<DOMRect, "width" | "height">;
-export type Font = SatoriFont;
+import { Font as Font$1 } from "satori";
+
+//#region src/types.d.ts
+type Dimensions = Pick<DOMRect, "width" | "height">;
+type Font = Font$1;
+
+//#endregion
+export { Dimensions, Font };
 //# sourceMappingURL=types.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/satori-fit-text",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Fit text to a bounding box in Node or the browser",
   "keywords": [
     "fit-text",
@@ -37,9 +37,9 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.17.4",
-    "@fontsource-variable/inter": "^5.2.5",
-    "@fontsource/inter": "^5.2.5",
-    "@playwright/test": "1.47.0",
+    "@fontsource-variable/inter": "5.2.6",
+    "@fontsource/inter": "5.2.6",
+    "@playwright/test": "1.51.1",
     "@resvg/resvg-js": "^2.6.2",
     "@types/debug": "^4.1.12",
     "@types/he": "^1.2.3",
@@ -48,27 +48,26 @@
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
     "@types/svgdom": "^0.1.2",
-    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.4",
     "depcheck": "^1.4.7",
     "jest-image-snapshot": "^6.4.0",
     "prettier": "^3.5.3",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "tsdown": "^0.12.3",
     "typescript": "^5.8.2",
-    "vite": "^6.2.4",
-    "vitest": "^3.1.1",
-    "@altano/assets": "0.0.0",
-    "@altano/build-config": "0.0.0",
-    "@altano/testing": "0.0.0",
-    "@altano/tsconfig": "0.0.0"
+    "vite": "^6.2.6",
+    "vitest": "^3.1.4",
+    "@altano/assets": "0.0.1",
+    "@altano/build-config": "0.0.1",
+    "@altano/testing": "0.0.1",
+    "@altano/tsconfig": "0.0.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsup --config build-config/tsup.config.node.ts",
-    "build:types": "tsc --project tsconfig.declarations.json",
-    "check:exports": "attw --pack . --profile esm-only",
+    "build": "tsdown --config ../build-config/tsdown.config.node.ts",
+    "check:exports": "attw --pack . --profile esm-only --quiet",
     "check:types:src": "tsc --noEmit",
     "check:types:test": "tsc --noEmit --project ./tests/tsconfig.json",
     "check:unused-dependencies": "depcheck",
@@ -80,7 +79,7 @@
     "lint:fix": "TIMING=1 pnpm lint --fix",
     "lint:timing": "TIMING=1 pnpm lint",
     "test:e2e": "playwright test",
-    "test:e2e:server": "vite --strictPort --port 3717 ./tests/e2e",
+    "test:e2e:server": "pnpm --dir ../../examples/satori-fit-text-playground start",
     "test:e2e:ui": "playwright test --ui",
     "test:unit": "vitest --run",
     "test:unit:benchmark": "vitest --run bench",

package/dist/TextMeasurer/BrowserTextMeasurer.d.ts

@@ -1,7 +0,0 @@
-import { TextMeasurer } from "./TextMeasurer.js";
-import type { Dimensions } from "../types.js";
-export default class BrowserTextMeasurer extends TextMeasurer {
-    #private;
-    getDimensions(fontSize: number): Promise<Dimensions>;
-}
-//# sourceMappingURL=BrowserTextMeasurer.d.ts.map

package/dist/TextMeasurer/HeadlessTextMeasurer.d.ts

@@ -1,9 +0,0 @@
-import type { Font } from "../types.js";
-import { TextMeasurer } from "./TextMeasurer.js";
-import { Dimensions } from "../types.js";
-export default class HeadlessTextMeasurer extends TextMeasurer {
-    #private;
-    constructor(text: string, font: Font, maxWidth: number, maxHeight: number, lineHeight: number | "normal");
-    getDimensions(fontSize: number): Promise<Dimensions>;
-}
-//# sourceMappingURL=HeadlessTextMeasurer.d.ts.map

package/dist/TextMeasurer/TextMeasurer.d.ts

@@ -1,14 +0,0 @@
-import type { Dimensions, Font } from "../types.js";
-export declare abstract class TextMeasurer {
-    #private;
-    protected text: string;
-    protected font: Font;
-    protected maxWidth: number;
-    protected maxHeight: number;
-    protected lineHeight: number | "normal";
-    constructor(text: string, font: Font, maxWidth: number, maxHeight: number, lineHeight: number | "normal");
-    abstract getDimensions(fontSize: number): Promise<Dimensions>;
-    doesSizeFit(fontSize: number): Promise<boolean>;
-    protected generateSvg(fontSize: number): Promise<string>;
-}
-//# sourceMappingURL=TextMeasurer.d.ts.map

package/dist/TextMeasurer/getTextMeasurer.d.ts

@@ -1,3 +0,0 @@
-import type { TextMeasurer } from "./TextMeasurer.js";
-export declare function getTextMeasurer(...args: ConstructorParameters<typeof TextMeasurer>): Promise<TextMeasurer>;
-//# sourceMappingURL=getTextMeasurer.d.ts.map