@altano/satori-fit-text 1.0.1 → 1.0.2

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,23 +1,23 @@
 import log 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;
+  #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 svgText = await this.generateSvg(fontSize);
-    const svg = this.#getSvgElement(svgText);
+    const svgXML = await this.createSvgXmlString(fontSize);
+    const svg = this.#createSvgElement(svgXML);
     try {
       document.body.appendChild(svg);
       const dimensions = svg.getBBox();
-      const { width, height } = dimensions;
+      const width = dimensions.width + Math.min(dimensions.x, 0);
+      const height = dimensions.height + Math.min(dimensions.y, 0);
       log({
         fontSize,
         width: `${width}px`,
@@ -25,7 +25,7 @@ class BrowserTextMeasurer extends TextMeasurer {
         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;
+      return { width, height };
     } finally {
       svg.parentElement?.removeChild?.(svg);
     }

package/dist/TextMeasurer/HeadlessTextMeasurer.js

@@ -14,7 +14,8 @@ class HeadlessTextMeasurer extends TextMeasurer {
   async getDimensions(fontSize) {
     await this.#setFontSize(fontSize);
     const dimensions = this.#canvas.bbox();
-    const { width, height } = dimensions;
+    const width = dimensions.width + Math.min(dimensions.x, 0);
+    const height = dimensions.height + Math.min(dimensions.y, 0);
     log({
       fontSize,
       width: `${width}px`,
@@ -22,12 +23,12 @@ class HeadlessTextMeasurer extends TextMeasurer {
       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;
+    return { width, height };
   }
   async #setFontSize(fontSize) {
-    const svgText = await this.generateSvg(fontSize);
+    const svgXML = await this.createSvgXmlString(fontSize);
     this.#canvas.clear();
-    this.#canvas.svg(svgText);
+    this.#canvas.svg(svgXML);
   }
 }
 export {

package/dist/TextMeasurer/TextMeasurer.d.ts

@@ -9,6 +9,6 @@ export declare abstract class TextMeasurer {
     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>;
+    protected createSvgXmlString(fontSize: number): Promise<string>;
 }
 //# sourceMappingURL=TextMeasurer.d.ts.map

package/dist/TextMeasurer/TextMeasurer.js

@@ -13,38 +13,27 @@ class TextMeasurer {
     const { width, height } = await this.getDimensions(fontSize);
     return width <= this.maxWidth && height <= this.maxHeight;
   }
-  async generateSvg(fontSize) {
+  async createSvgXmlString(fontSize) {
     const node = {
       type: "div",
+      key: "satori-fit-text-measure-node",
       props: {
         style: {
-          all: "initial",
+          // Static styles
+          background: "white",
+          color: "black",
           display: "flex",
-          flexDirection: "column",
-          width: "100%",
-          height: "100%",
+          flex: 1,
+          boxSizing: "border-box",
           margin: 0,
-          padding: 0
+          padding: 0,
+          // Dynamic styles based on input
+          fontSize,
+          fontFamily: this.font.name,
+          maxWidth: this.maxWidth,
+          lineHeight: this.lineHeight
         },
-        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
-            }
-          }
-        ]
+        children: this.text
       }
     };
     return satori(node, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/satori-fit-text",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Fit text to a bounding box in Node or the browser",
   "keywords": [
     "fit-text",
@@ -53,9 +53,8 @@
     "jest-image-snapshot": "^6.4.0",
     "prettier": "^3.5.3",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0",
     "typescript": "^5.8.2",
-    "vite": "^6.2.4",
+    "vite": "^6.2.5",
     "vitest": "^3.1.1",
     "@altano/assets": "0.0.0",
     "@altano/build-config": "0.0.0",
@@ -68,7 +67,7 @@
   "scripts": {
     "build": "tsup --config build-config/tsup.config.node.ts",
     "build:types": "tsc --project tsconfig.declarations.json",
-    "check:exports": "attw --pack . --profile esm-only",
+    "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",