@altano/satori-fit-text 0.1.3 → 1.0.0

package/README.md

@@ -21,9 +21,11 @@ pnpm add @altano/satori-fit-text
 import { findLargestUsableFontSize, type Font } from "@altano/satori-fit-text";
 
 async function getInter(): Promise<Font> {
-  const interSemiBoldBuffer = await fetch(`https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.17/files/inter-latin-600-normal.woff`).then((res) => res.arrayBuffer());
+  const interSemiBoldBuffer = await fetch(
+    `https://cdn.jsdelivr.net/npm/@fontsource/inter@5.0.17/files/inter-latin-600-normal.woff`,
+  ).then((res) => res.arrayBuffer());
 
-  const font = {
+  return {
     name: "Inter",
     data: interSemiBoldBuffer,
     weight: 600,
@@ -32,7 +34,7 @@ async function getInter(): Promise<Font> {
 
 const largestUsableFontSize = await findLargestUsableFontSize({
   lineHeight: 1,
-  font: await getFont(),
+  font: await getInter(),
   text: "Some text I want to be as big as possible",
   maxWidth: 1136,
   maxHeight: 429,
@@ -46,7 +48,7 @@ console.log(largestUsableFontSize);
 - [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)
 - [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/codesandboxes/satori-fit-text-node-cli?file=%2Fpackage.json%3A1%2C1)
+- [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.d.ts

@@ -1,4 +1,5 @@
-import { TextMeasurer, type Dimensions } from "./TextMeasurer";
+import { TextMeasurer } from "./TextMeasurer.js";
+import type { Dimensions } from "../types.js";
 export default class BrowserTextMeasurer extends TextMeasurer {
     #private;
     getDimensions(fontSize: number): Promise<Dimensions>;

package/dist/TextMeasurer/BrowserTextMeasurer.js

@@ -1,6 +1,5 @@
-import log from "../log";
-import { TextMeasurer } from "./TextMeasurer";
-import getWidthAdjustedForInlineBleed from "./getWidthAdjustedForInlineBleed";
+import log from "../log.js";
+import { TextMeasurer } from "./TextMeasurer.js";
 class BrowserTextMeasurer extends TextMeasurer {
   #getSvgElement(svgText) {
     const div = document.createElement("div");
@@ -17,17 +16,16 @@ class BrowserTextMeasurer extends TextMeasurer {
     const svg = this.#getSvgElement(svgText);
     try {
       document.body.appendChild(svg);
-      const { width, height } = svg.getBBox();
-      const widthAdjusted = getWidthAdjustedForInlineBleed(svg, width);
+      const dimensions = svg.getBBox();
+      const { width, height } = dimensions;
       log({
         fontSize,
-        width,
-        widthAdjusted,
-        height,
-        widthFits: widthAdjusted <= this.maxWidth,
-        heightFits: height <= this.maxHeight
+        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: widthAdjusted, height };
+      return dimensions;
     } finally {
       svg.parentElement?.removeChild?.(svg);
     }

package/dist/TextMeasurer/HeadlessTextMeasurer.d.ts

@@ -1,5 +1,6 @@
-import type { Font } from "../types";
-import { TextMeasurer, type Dimensions } from "./TextMeasurer";
+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");

package/dist/TextMeasurer/HeadlessTextMeasurer.js

@@ -1,8 +1,7 @@
 import { SVG, registerWindow } from "@svgdotjs/svg.js";
 import { createSVGWindow } from "svgdom";
-import log from "../log";
-import { TextMeasurer } from "./TextMeasurer";
-import getWidthAdjustedForInlineBleed from "./getWidthAdjustedForInlineBleed";
+import log from "../log.js";
+import { TextMeasurer } from "./TextMeasurer.js";
 class HeadlessTextMeasurer extends TextMeasurer {
   #canvas;
   constructor(text, font, maxWidth, maxHeight, lineHeight) {
@@ -14,20 +13,16 @@ class HeadlessTextMeasurer extends TextMeasurer {
   }
   async getDimensions(fontSize) {
     await this.#setFontSize(fontSize);
-    const { width, height } = this.#canvas.bbox();
-    const widthAdjusted = getWidthAdjustedForInlineBleed(
-      this.#canvas.node,
-      width
-    );
+    const dimensions = this.#canvas.bbox();
+    const { width, height } = dimensions;
     log({
       fontSize,
-      width,
-      widthAdjusted,
-      height,
-      widthFits: widthAdjusted <= this.maxWidth,
-      heightFits: height <= this.maxHeight
+      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: widthAdjusted, height };
+    return dimensions;
   }
   async #setFontSize(fontSize) {
     const svgText = await this.generateSvg(fontSize);

package/dist/TextMeasurer/TextMeasurer.d.ts

@@ -1,5 +1,4 @@
-import type { Font } from "../types";
-export type Dimensions = Pick<DOMRect, "width" | "height">;
+import type { Dimensions, Font } from "../types.js";
 export declare abstract class TextMeasurer {
     #private;
     protected text: string;

package/dist/TextMeasurer/TextMeasurer.js

@@ -35,13 +35,6 @@ class TextMeasurer {
                 margin: 0,
                 padding: 0,
                 boxSizing: "border-box",
-                // We render a border so that we measure the true dimensions of the text.
-                // Without one, the bounding box might not include significant whitespace.
-                // For example, if the last line of text has no descenders, the bounding box
-                // would only extend to the baseline of the last line. With a border, the
-                // bounding box will include all the whitespace between the baseline and the
-                // descent of the text.
-                border: "solid red 1px",
                 // Dynamic styles based on input
                 fontSize,
                 fontFamily: this.font.name,

package/dist/TextMeasurer/getTextMeasurer.d.ts

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

package/dist/TextMeasurer/getTextMeasurer.js

@@ -1,9 +1,9 @@
 async function getTextMeasurer(...args) {
   if (typeof window !== "undefined") {
-    const Measurer = await import("./BrowserTextMeasurer");
+    const Measurer = await import("./BrowserTextMeasurer.js");
     return new Measurer.default(...args);
   } else {
-    const Measurer = await import("./HeadlessTextMeasurer");
+    const Measurer = await import("./HeadlessTextMeasurer.js");
     return new Measurer.default(...args);
   }
 }

package/dist/fitText.d.ts

@@ -1,4 +1,4 @@
-import type { Font } from "./types";
+import type { Font } from "./types.js";
 export type FindOptions = {
     /**
      * The text you want to fit

package/dist/fitText.js

@@ -1,4 +1,4 @@
-import { getTextMeasurer } from "./TextMeasurer/getTextMeasurer";
+import { getTextMeasurer } from "./TextMeasurer/getTextMeasurer.js";
 async function findLargestUsableFontSize({
   text,
   font,

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./fitText";
-export * from "./types";
+export * from "./fitText.js";
+export * from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,2 +1,2 @@
-export * from "./fitText";
-export * from "./types";
+export * from "./fitText.js";
+export * from "./types.js";

package/dist/types.d.ts

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

package/package.json

@@ -1,88 +1,91 @@
 {
   "name": "@altano/satori-fit-text",
-  "version": "0.1.3",
+  "version": "1.0.0",
   "description": "Fit text to a bounding box in Node or the browser",
-  "type": "module",
-  "sideEffects": false,
-  "exports": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "author": {
-    "name": "Alan Norbauer",
-    "email": "altano@gmail.com",
-    "url": "https://alan.norbauer.com"
-  },
-  "license": "ISC",
+  "keywords": [
+    "fit-text",
+    "opengraph",
+    "satori",
+    "typography"
+  ],
+  "homepage": "https://github.com/altano/npm-packages/tree/main/packages/satori-fit-text",
   "repository": {
     "type": "git",
     "url": "https://github.com/altano/npm-packages",
     "directory": "packages/satori-fit-text"
   },
-  "homepage": "https://github.com/altano/npm-packages/tree/main/packages/satori-fit-text",
+  "license": "ISC",
+  "author": {
+    "name": "Alan Norbauer",
+    "email": "altano@gmail.com",
+    "url": "https://alan.norbauer.com"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "assets/",
     "dist/**/*.js",
     "dist/**/*.d.ts"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [
-    "typography",
-    "satori",
-    "opengraph",
-    "fit-text"
-  ],
   "dependencies": {
     "@svgdotjs/svg.js": "^3.2.0",
     "debug": "^4.3.4",
-    "satori": "^0.10.13",
-    "satori-html": "^0.3.2",
+    "satori": "^0.12.2",
     "svgdom": "^0.1.19"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.15.4",
     "@fontsource-variable/inter": "^5.0.17",
     "@fontsource/inter": "^5.0.17",
-    "@playwright/test": "1.40.0",
+    "@playwright/test": "1.47.0",
     "@resvg/resvg-js": "^2.6.0",
     "@types/debug": "^4.1.12",
     "@types/he": "^1.2.3",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^20.11.25",
+    "@types/node": "^22.13.10",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "@types/svgdom": "^0.1.2",
-    "@vitest/coverage-v8": "^1.4.0",
-    "@vitest/ui": "^1.4.0",
+    "@vitest/coverage-v8": "^3.0.9",
+    "depcheck": "^1.4.7",
     "jest-image-snapshot": "^6.4.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
     "react-dom": "^18.2.0",
-    "typescript": "^5.4.2",
-    "vite": "^5.2.4",
-    "vitest": "^1.4.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.3",
+    "vitest": "^3.0.9",
     "@altano/assets": "0.0.0",
-    "@altano/tiny-async-pool": "3.0.0",
-    "@altano/tsconfig": "0.0.0"
+    "@altano/build-config": "0.0.0",
+    "@altano/testing": "0.0.0",
+    "@altano/tiny-async-pool": "3.0.2",
+    "@altano/tsconfig": "0.0.0",
+    "@altano/vitest-plugins": "1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "scripts": {
     "build": "tsup --config build-config/tsup.config.node.ts",
     "build:types": "tsc --project tsconfig.declarations.json",
+    "check:exports": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
+    "check:types:src": "tsc --noEmit",
+    "check:types:test": "tsc --noEmit --project ./tests/tsconfig.json",
+    "check:unused-dependencies": "depcheck",
     "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist",
     "dev": "pnpm run build --watch",
     "format": "prettier --check src",
     "format:fix": "prettier --write src",
-    "lint": "eslint package.json src/**/*.ts*",
+    "lint": "eslint",
     "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:ui": "playwright test --ui",
-    "test:unit": "run-s test:unit:run test:unit:benchmark",
+    "test:unit": "vitest --run",
     "test:unit:benchmark": "vitest --run bench",
-    "test:unit:run": "vitest --run",
-    "test:unit:watch": "vitest tests/unit/",
-    "typecheck:src": "tsc --noEmit",
-    "typecheck:test": "tsc --noEmit --project ./tests/tsconfig.json"
+    "test:unit:watch": "vitest"
   }
 }

package/dist/TextMeasurer/getWidthAdjustedForInlineBleed.d.ts

@@ -1,16 +0,0 @@
-/**
- * Satori will sometimes render text slightly outside the div on the left (e.g.
- * x:-2). Having text slightly outside the box and drawing a border means we
- * will have a bounding box on the svg that is slightly larger than the actual
- * text size (by the amount of bleed).
- *
- * For example, if text starts at -2 and the div's bounding box is x:0 to
- * x:1200, the svg's bounding box will have width=1202px. And that won't
- * represent the actual width of the text.
- *
- * Let's account for this by just reducing the bounding box width by the amount
- * the text is bleeding outside the left or right and trust that Satori isn't
- * both letting the text bleed AND filling too much space.
- */
-export default function getWidthAdjustedForInlineBleed(svg: SVGSVGElement, svgWidth: number): number;
-//# sourceMappingURL=getWidthAdjustedForInlineBleed.d.ts.map

package/dist/TextMeasurer/getWidthAdjustedForInlineBleed.js

@@ -1,17 +0,0 @@
-function getWidthAdjustedForInlineBleed(svg, svgWidth) {
-  let smallestXValue = 0;
-  let largestYValue = svgWidth;
-  for (const child of svg.children) {
-    if ("getBBox" in child && typeof child["getBBox"] === "function") {
-      const { x, y } = child.getBBox();
-      smallestXValue = Math.min(smallestXValue, x);
-      largestYValue = Math.max(largestYValue, y);
-    }
-  }
-  const xAdjustment = Math.ceil(Math.abs(smallestXValue));
-  const yAdjustment = largestYValue <= svgWidth ? 0 : Math.ceil(largestYValue) - svgWidth;
-  return svgWidth - xAdjustment - yAdjustment;
-}
-export {
-  getWidthAdjustedForInlineBleed as default
-};