@altano/satori-fit-text 0.1.1 → 0.1.3

package/README.md

@@ -15,13 +15,13 @@ yarn add @altano/satori-fit-text
 pnpm add @altano/satori-fit-text
 ```
 
-## Example Usage
+## Basic Example
 
 ```ts
 import { findLargestUsableFontSize, type Font } from "@altano/satori-fit-text";
 
 async function getInter(): Promise<Font> {
-  const interSemiBoldBuffer = await fetch(`https://rsms.me/inter/font-files/Inter-SemiBold.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 = {
     name: "Inter",
@@ -41,9 +41,12 @@ const largestUsableFontSize = await findLargestUsableFontSize({
 console.log(largestUsableFontSize);
 ```
 
-## Potential Uses
+## Example Uses
 
-Because this measures the maximum font size using Satori, the ideal use of this library is to determine the largest possible font size in something like an [Open Graph card](https://ogp.me/). If you dynamically generate Open Graph cards with text (e.g. the title of your blog post) you may want the text to fill the card's area as best as possible without overflowing. This library can help you achieve that.
+- [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)
 
 ## Implementation
 

package/dist/{BrowserTextMeasurer-TCSGQHDB.js → TextMeasurer/BrowserTextMeasurer.js}

@@ -1,11 +1,7 @@
-import {
-  TextMeasurer,
-  getWidthAdjustedForInlineBleed,
-  log_default
-} from "./chunk-JIONCYY3.js";
-
-// src/TextMeasurer/BrowserTextMeasurer.ts
-var BrowserTextMeasurer = class extends TextMeasurer {
+import log from "../log";
+import { TextMeasurer } from "./TextMeasurer";
+import getWidthAdjustedForInlineBleed from "./getWidthAdjustedForInlineBleed";
+class BrowserTextMeasurer extends TextMeasurer {
   #getSvgElement(svgText) {
     const div = document.createElement("div");
     div.style.position = "fixed";
@@ -23,7 +19,7 @@ var BrowserTextMeasurer = class extends TextMeasurer {
       document.body.appendChild(svg);
       const { width, height } = svg.getBBox();
       const widthAdjusted = getWidthAdjustedForInlineBleed(svg, width);
-      log_default({
+      log({
         fontSize,
         width,
         widthAdjusted,
@@ -36,7 +32,7 @@ var BrowserTextMeasurer = class extends TextMeasurer {
       svg.parentElement?.removeChild?.(svg);
     }
   }
-};
+}
 export {
   BrowserTextMeasurer as default
 };

package/dist/{HeadlessTextMeasurer-46CHWL7H.js → TextMeasurer/HeadlessTextMeasurer.js}

@@ -1,13 +1,9 @@
-import {
-  TextMeasurer,
-  getWidthAdjustedForInlineBleed,
-  log_default
-} from "./chunk-JIONCYY3.js";
-
-// src/TextMeasurer/HeadlessTextMeasurer.ts
 import { SVG, registerWindow } from "@svgdotjs/svg.js";
 import { createSVGWindow } from "svgdom";
-var HeadlessTextMeasurer = class extends TextMeasurer {
+import log from "../log";
+import { TextMeasurer } from "./TextMeasurer";
+import getWidthAdjustedForInlineBleed from "./getWidthAdjustedForInlineBleed";
+class HeadlessTextMeasurer extends TextMeasurer {
   #canvas;
   constructor(text, font, maxWidth, maxHeight, lineHeight) {
     super(text, font, maxWidth, maxHeight, lineHeight);
@@ -23,7 +19,7 @@ var HeadlessTextMeasurer = class extends TextMeasurer {
       this.#canvas.node,
       width
     );
-    log_default({
+    log({
       fontSize,
       width,
       widthAdjusted,
@@ -38,7 +34,7 @@ var HeadlessTextMeasurer = class extends TextMeasurer {
     this.#canvas.clear();
     this.#canvas.svg(svgText);
   }
-};
+}
 export {
   HeadlessTextMeasurer as default
 };

package/dist/{chunk-JIONCYY3.js → TextMeasurer/TextMeasurer.js}

@@ -1,11 +1,5 @@
-// src/log.ts
-import debug from "debug";
-var log = debug("satori-text-fit");
-var log_default = log;
-
-// src/TextMeasurer/TextMeasurer.ts
 import satori from "satori";
-var TextMeasurer = class {
+class TextMeasurer {
   constructor(text, font, maxWidth, maxHeight, lineHeight) {
     this.text = text;
     this.font = font;
@@ -66,26 +60,7 @@ var TextMeasurer = class {
       height: this.maxHeight * 2
     });
   }
-};
-
-// src/TextMeasurer/getWidthAdjustedForInlineBleed.ts
-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 {
-  log_default,
-  TextMeasurer,
-  getWidthAdjustedForInlineBleed
+  TextMeasurer
 };

package/dist/TextMeasurer/getTextMeasurer.js

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

package/dist/TextMeasurer/getWidthAdjustedForInlineBleed.js

@@ -0,0 +1,17 @@
+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
+};

package/dist/fitText.js

@@ -0,0 +1,41 @@
+import { getTextMeasurer } from "./TextMeasurer/getTextMeasurer";
+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
+};

package/dist/index.js

@@ -1,52 +1,2 @@
-// src/TextMeasurer/getTextMeasurer.ts
-async function getTextMeasurer(...args) {
-  if (typeof window !== "undefined") {
-    const Measurer = await import("./BrowserTextMeasurer-TCSGQHDB.js");
-    return new Measurer.default(...args);
-  } else {
-    const Measurer = await import("./HeadlessTextMeasurer-46CHWL7H.js");
-    return new Measurer.default(...args);
-  }
-}
-
-// src/fitText.ts
-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
-};
+export * from "./fitText";
+export * from "./types";

package/dist/log.js

@@ -0,0 +1,6 @@
+import debug from "debug";
+const log = debug("satori-text-fit");
+var log_default = log;
+export {
+  log_default as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/satori-fit-text",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Fit text to a bounding box in Node or the browser",
   "type": "module",
   "sideEffects": false,
@@ -35,45 +35,54 @@
   "dependencies": {
     "@svgdotjs/svg.js": "^3.2.0",
     "debug": "^4.3.4",
-    "he": "^1.2.0",
-    "satori": "^0.10.3",
+    "satori": "^0.10.13",
     "satori-html": "^0.3.2",
-    "svgdom": "^0.1.14"
+    "svgdom": "^0.1.19"
   },
   "devDependencies": {
-    "@resvg/resvg-js": "^2.4.1",
-    "@types/debug": "^4.1.8",
-    "@types/he": "^1.2.0",
-    "@types/jest-image-snapshot": "^6.2.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@types/svgdom": "^0.1.0",
-    "@vitest/coverage-v8": "^0.34.3",
-    "@vitest/ui": "^0.30.1",
-    "jest-image-snapshot": "^6.2.0",
+    "@fontsource-variable/inter": "^5.0.17",
+    "@fontsource/inter": "^5.0.17",
+    "@playwright/test": "1.40.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/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",
+    "jest-image-snapshot": "^6.4.0",
     "npm-run-all": "^4.1.5",
-    "react": "^18",
-    "react-dom": "^18",
-    "tsup": "^7.2.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.3",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.4.2",
+    "vite": "^5.2.4",
+    "vitest": "^1.4.0",
     "@altano/assets": "0.0.0",
-    "@altano/tsconfig": "0.0.0",
-    "@altano/tiny-async-pool": "1.0.2"
+    "@altano/tiny-async-pool": "3.0.0",
+    "@altano/tsconfig": "0.0.0"
   },
   "scripts": {
-    "build": "tsup",
-    "build:types": "tsc --emitDeclarationOnly --declaration",
-    "dev": "tsup --watch",
-    "lint": "eslint src/**/*.ts*",
-    "lint:timing": "TIMING=1 eslint src/**/*.ts*",
-    "lint:fix": "TIMING=1 eslint src/**/*.ts* --fix",
-    "format": "prettier --write src",
+    "build": "tsup --config build-config/tsup.config.node.ts",
+    "build:types": "tsc --project tsconfig.declarations.json",
     "clean": "rm -rf .turbo && rm -rf .tsbuildinfo && rm -rf node_modules && rm -rf dist",
-    "test": "run-s test:unit test:benchmark",
-    "test:unit": "vitest --run",
-    "test:benchmark": "vitest --run bench",
-    "test:watch": "vitest tests/"
+    "dev": "pnpm run build --watch",
+    "format": "prettier --check src",
+    "format:fix": "prettier --write src",
+    "lint": "eslint package.json src/**/*.ts*",
+    "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: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"
   }
 }