@altano/satori-fit-text 3.0.0 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/TextMeasurer/BrowserTextMeasurer.js.map +1 -1
- package/dist/TextMeasurer/HeadlessTextMeasurer.js.map +1 -1
- package/dist/TextMeasurer/TextMeasurer.js +3 -2
- package/dist/TextMeasurer/TextMeasurer.js.map +1 -1
- package/dist/fitText.d.ts +2 -3
- package/dist/types.d.ts +2 -3
- package/package.json +17 -17
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrowserTextMeasurer.js","names":[
|
|
1
|
+
{"version":3,"file":"BrowserTextMeasurer.js","names":[],"sources":["../../src/TextMeasurer/BrowserTextMeasurer.ts"],"sourcesContent":["/// <reference lib=\"dom\" />\n\n// TODO Factor this out to a separate project so it doesn't infect the whole\n// project with the dom lib\n\n/* v8 ignore start */\nimport log from \"../log.js\";\nimport { TextMeasurer } from \"./TextMeasurer.js\";\nimport type { Dimensions } from \"../types.js\";\n\nexport default class BrowserTextMeasurer extends TextMeasurer {\n #createSvgElement(svgXML: string): SVGSVGElement {\n const wrapper = document.createElement(\"div\");\n wrapper.innerHTML = svgXML;\n const svg = wrapper.firstElementChild;\n if (svg == null || !(svg instanceof SVGSVGElement)) {\n throw new Error(`Child should be svg element`);\n }\n return svg;\n }\n\n async getDimensions(fontSize: number): Promise<Dimensions> {\n const svgXML = await this.createSvgXmlString(fontSize);\n const svg = this.#createSvgElement(svgXML);\n\n try {\n document.body.appendChild(svg);\n const dimensions = svg.getBBox();\n const width = dimensions.width + Math.min(dimensions.x, 0);\n const height = dimensions.height + Math.min(dimensions.y, 0);\n\n log({\n fontSize,\n width: `${width}px`,\n height: `${height}px`,\n widthFits: `${width}px ${width <= this.maxWidth ? \"DOES\" : \"does NOT\"} fit in ${this.maxWidth}`,\n heightFits: `${height}px ${height <= this.maxHeight ? \"DOES\" : \"does NOT\"} fit in ${this.maxHeight}`,\n });\n\n return { width, height };\n } finally {\n svg.parentElement?.removeChild?.(svg);\n }\n }\n}\n/* v8 ignore stop */\n"],"mappings":";;;;;AAUA,IAAqB,sBAArB,cAAiD,aAAa;CAC5D,kBAAkB,QAA+B;EAC/C,MAAM,UAAU,SAAS,cAAc,KAAK;EAC5C,QAAQ,YAAY;EACpB,MAAM,MAAM,QAAQ;EACpB,IAAI,OAAO,QAAQ,EAAE,eAAe,gBAClC,MAAM,IAAI,MAAM,6BAA6B;EAE/C,OAAO;CACT;CAEA,MAAM,cAAc,UAAuC;EACzD,MAAM,SAAS,MAAM,KAAK,mBAAmB,QAAQ;EACrD,MAAM,MAAM,KAAK,kBAAkB,MAAM;EAEzC,IAAI;GACF,SAAS,KAAK,YAAY,GAAG;GAC7B,MAAM,aAAa,IAAI,QAAQ;GAC/B,MAAM,QAAQ,WAAW,QAAQ,KAAK,IAAI,WAAW,GAAG,CAAC;GACzD,MAAM,SAAS,WAAW,SAAS,KAAK,IAAI,WAAW,GAAG,CAAC;GAE3D,IAAI;IACF;IACA,OAAO,GAAG,MAAM;IAChB,QAAQ,GAAG,OAAO;IAClB,WAAW,GAAG,MAAM,KAAK,SAAS,KAAK,WAAW,SAAS,WAAW,UAAU,KAAK;IACrF,YAAY,GAAG,OAAO,KAAK,UAAU,KAAK,YAAY,SAAS,WAAW,UAAU,KAAK;GAC3F,CAAC;GAED,OAAO;IAAE;IAAO;GAAO;EACzB,UAAU;GACR,IAAI,eAAe,cAAc,GAAG;EACtC;CACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeadlessTextMeasurer.js","names":[
|
|
1
|
+
{"version":3,"file":"HeadlessTextMeasurer.js","names":[],"sources":["../../src/TextMeasurer/HeadlessTextMeasurer.ts"],"sourcesContent":["/// <reference no-default-lib=\"true\"/>\n\nimport { SVG, registerWindow, type Svg } from \"@svgdotjs/svg.js\";\nimport { createSVGWindow } from \"svgdom\";\nimport log from \"../log.js\";\nimport type { Dimensions, Font } from \"../types.js\";\nimport { TextMeasurer } from \"./TextMeasurer.js\";\n\nexport default class HeadlessTextMeasurer extends TextMeasurer {\n #canvas: Svg;\n\n constructor(\n text: string,\n font: Font,\n maxWidth: number,\n maxHeight: number,\n lineHeight: number | \"normal\",\n ) {\n super(text, font, maxWidth, maxHeight, lineHeight);\n\n // register window and document\n const window = createSVGWindow();\n const document = window.document;\n registerWindow(window, document);\n\n // create canvas\n this.#canvas = SVG<SVGSVGElement>(document.documentElement);\n }\n\n async getDimensions(fontSize: number): Promise<Dimensions> {\n await this.#setFontSize(fontSize);\n const dimensions = this.#canvas.bbox();\n const width = dimensions.width + Math.min(dimensions.x, 0);\n const height = dimensions.height + Math.min(dimensions.y, 0);\n\n log({\n fontSize,\n width: `${width}px`,\n height: `${height}px`,\n widthFits: `${width}px ${\n width <= this.maxWidth ? \"DOES\" : \"does NOT\"\n } fit in ${this.maxWidth}`,\n heightFits: `${height}px ${\n height <= this.maxHeight ? \"DOES\" : \"does NOT\"\n } fit in ${this.maxHeight}`,\n });\n\n return { width, height };\n }\n\n async #setFontSize(fontSize: number): Promise<void> {\n const svgXML = await this.createSvgXmlString(fontSize);\n this.#canvas.clear();\n this.#canvas.svg(svgXML);\n }\n}\n"],"mappings":";;;;;;AAQA,IAAqB,uBAArB,cAAkD,aAAa;CAC7D;CAEA,YACE,MACA,MACA,UACA,WACA,YACA;EACA,MAAM,MAAM,MAAM,UAAU,WAAW,UAAU;EAGjD,MAAM,SAAS,gBAAgB;EAC/B,MAAM,WAAW,OAAO;EACxB,eAAe,QAAQ,QAAQ;EAG/B,KAAK,UAAU,IAAmB,SAAS,eAAe;CAC5D;CAEA,MAAM,cAAc,UAAuC;EACzD,MAAM,KAAK,aAAa,QAAQ;EAChC,MAAM,aAAa,KAAK,QAAQ,KAAK;EACrC,MAAM,QAAQ,WAAW,QAAQ,KAAK,IAAI,WAAW,GAAG,CAAC;EACzD,MAAM,SAAS,WAAW,SAAS,KAAK,IAAI,WAAW,GAAG,CAAC;EAE3D,IAAI;GACF;GACA,OAAO,GAAG,MAAM;GAChB,QAAQ,GAAG,OAAO;GAClB,WAAW,GAAG,MAAM,KAClB,SAAS,KAAK,WAAW,SAAS,WACnC,UAAU,KAAK;GAChB,YAAY,GAAG,OAAO,KACpB,UAAU,KAAK,YAAY,SAAS,WACrC,UAAU,KAAK;EAClB,CAAC;EAED,OAAO;GAAE;GAAO;EAAO;CACzB;CAEA,MAAM,aAAa,UAAiC;EAClD,MAAM,SAAS,MAAM,KAAK,mBAAmB,QAAQ;EACrD,KAAK,QAAQ,MAAM;EACnB,KAAK,QAAQ,IAAI,MAAM;CACzB;AACF"}
|
|
@@ -22,7 +22,7 @@ var TextMeasurer = class {
|
|
|
22
22
|
return width - epsilon <= this.maxWidth && height - epsilon <= this.maxHeight;
|
|
23
23
|
}
|
|
24
24
|
async createSvgXmlString(fontSize) {
|
|
25
|
-
|
|
25
|
+
const node = {
|
|
26
26
|
type: "div",
|
|
27
27
|
key: "satori-fit-text-measure-node",
|
|
28
28
|
props: {
|
|
@@ -41,7 +41,8 @@ var TextMeasurer = class {
|
|
|
41
41
|
},
|
|
42
42
|
children: this.text
|
|
43
43
|
}
|
|
44
|
-
}
|
|
44
|
+
};
|
|
45
|
+
return satori(node, {
|
|
45
46
|
fonts: this.#fonts,
|
|
46
47
|
width: this.maxWidth * 2,
|
|
47
48
|
height: this.maxHeight * 2
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextMeasurer.js","names":[
|
|
1
|
+
{"version":3,"file":"TextMeasurer.js","names":[],"sources":["../../src/TextMeasurer/TextMeasurer.ts"],"sourcesContent":["import satori from \"satori\";\n\nimport type React from \"react\";\nimport type { Dimensions, Font } from \"../types.js\";\n\n// getBBox seems to be off by a very tiny fraction with certain versions of\n// Inter. Maybe that makes sense... maybe there's a better way of measuring\n// things. But for now, fudge it...\nconst epsilon = 0.0001;\n\nexport abstract class TextMeasurer {\n protected text: string;\n protected font: Font;\n protected maxWidth: number;\n protected maxHeight: number;\n protected lineHeight: number | \"normal\";\n\n #fonts: Font[];\n\n constructor(\n text: string,\n font: Font,\n maxWidth: number,\n maxHeight: number,\n lineHeight: number | \"normal\",\n ) {\n this.text = text;\n this.font = font;\n this.maxWidth = maxWidth;\n this.maxHeight = maxHeight;\n this.lineHeight = lineHeight;\n\n // Satori keeps a WeakMap of fonts arrays. Adding a new font is very\n // expensive, so let's make sure we always return the (referentially) same\n // array if the font is the same, to improve performance.\n this.#fonts = [this.font];\n }\n\n abstract getDimensions(fontSize: number): Promise<Dimensions>;\n\n async doesSizeFit(fontSize: number): Promise<boolean> {\n const { width, height } = await this.getDimensions(fontSize);\n return (\n width - epsilon <= this.maxWidth && height - epsilon <= this.maxHeight\n );\n }\n\n protected async createSvgXmlString(fontSize: number): Promise<string> {\n const node: React.ReactElement = {\n type: \"div\",\n key: \"satori-fit-text-measure-node\",\n props: {\n style: {\n // Static styles\n background: \"white\",\n color: \"black\",\n display: \"flex\",\n flex: 1,\n boxSizing: \"border-box\",\n margin: 0,\n padding: 0,\n\n // Dynamic styles based on input\n fontSize,\n fontFamily: this.font.name,\n maxWidth: this.maxWidth,\n lineHeight: this.lineHeight,\n },\n children: this.text,\n },\n } as const;\n\n // vnode => svg\n return satori(node, {\n fonts: this.#fonts,\n width: this.maxWidth * 2,\n height: this.maxHeight * 2,\n });\n }\n}\n"],"mappings":";;;AAQA,MAAM,UAAU;AAEhB,IAAsB,eAAtB,MAAmC;CACjC,AAAU;CACV,AAAU;CACV,AAAU;CACV,AAAU;CACV,AAAU;CAEV;CAEA,YACE,MACA,MACA,UACA,WACA,YACA;EACA,KAAK,OAAO;EACZ,KAAK,OAAO;EACZ,KAAK,WAAW;EAChB,KAAK,YAAY;EACjB,KAAK,aAAa;EAKlB,KAAK,SAAS,CAAC,KAAK,IAAI;CAC1B;CAIA,MAAM,YAAY,UAAoC;EACpD,MAAM,EAAE,OAAO,WAAW,MAAM,KAAK,cAAc,QAAQ;EAC3D,OACE,QAAQ,WAAW,KAAK,YAAY,SAAS,WAAW,KAAK;CAEjE;CAEA,MAAgB,mBAAmB,UAAmC;EACpE,MAAM,OAA2B;GAC/B,MAAM;GACN,KAAK;GACL,OAAO;IACL,OAAO;KAEL,YAAY;KACZ,OAAO;KACP,SAAS;KACT,MAAM;KACN,WAAW;KACX,QAAQ;KACR,SAAS;KAGT;KACA,YAAY,KAAK,KAAK;KACtB,UAAU,KAAK;KACf,YAAY,KAAK;IACnB;IACA,UAAU,KAAK;GACjB;EACF;EAGA,OAAO,OAAO,MAAM;GAClB,OAAO,KAAK;GACZ,OAAO,KAAK,WAAW;GACvB,QAAQ,KAAK,YAAY;EAC3B,CAAC;CACH;AACF"}
|
package/dist/fitText.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Font } from "./types.js";
|
|
2
2
|
//#region src/fitText.d.ts
|
|
3
|
-
type FindOptions = {
|
|
3
|
+
export type FindOptions = {
|
|
4
4
|
/**
|
|
5
5
|
* The text you want to fit
|
|
6
6
|
*/
|
|
@@ -40,7 +40,6 @@ type FindOptions = {
|
|
|
40
40
|
* Given text, dimensions, and some options, returns the largest font size that
|
|
41
41
|
* would keep the text contained within the dimensions.
|
|
42
42
|
*/
|
|
43
|
-
declare function findLargestUsableFontSize({ text, font, maxWidth, maxHeight, lineHeight, minFontSize, maxFontSize, maxTries }: FindOptions): Promise<number>;
|
|
43
|
+
export declare function findLargestUsableFontSize({ text, font, maxWidth, maxHeight, lineHeight, minFontSize, maxFontSize, maxTries }: FindOptions): Promise<number>;
|
|
44
44
|
//#endregion
|
|
45
|
-
export { FindOptions, findLargestUsableFontSize };
|
|
46
45
|
//# sourceMappingURL=fitText.d.ts.map
|
package/dist/types.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Font as Font$1 } from "satori";
|
|
2
2
|
//#region src/types.d.ts
|
|
3
|
-
type Dimensions = Pick<DOMRect, "width" | "height">;
|
|
4
|
-
type Font = Font$1;
|
|
3
|
+
export type Dimensions = Pick<DOMRect, "width" | "height">;
|
|
4
|
+
export type Font = Font$1;
|
|
5
5
|
//#endregion
|
|
6
|
-
export { Dimensions, Font };
|
|
7
6
|
//# sourceMappingURL=types.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@altano/satori-fit-text",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.0",
|
|
4
4
|
"description": "Fit text to a bounding box in Node or the browser",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"fit-text",
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
"dist/**/*.d.ts"
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@svgdotjs/svg.js": "^3.2.
|
|
34
|
+
"@svgdotjs/svg.js": "^3.2.8",
|
|
35
35
|
"debug": "^4.4.3",
|
|
36
|
-
"satori": "^0.
|
|
37
|
-
"svgdom": "^0.1.
|
|
36
|
+
"satori": "^0.63.2",
|
|
37
|
+
"svgdom": "^0.1.29"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@arethetypeswrong/cli": "^0.18.5",
|
|
@@ -44,24 +44,24 @@
|
|
|
44
44
|
"@resvg/resvg-js": "^2.6.2",
|
|
45
45
|
"@types/debug": "^4.1.13",
|
|
46
46
|
"@types/he": "^1.2.3",
|
|
47
|
-
"@types/jest-image-snapshot": "^6.4.
|
|
48
|
-
"@types/node": "^26.
|
|
49
|
-
"@types/react": "^19.
|
|
50
|
-
"@types/react-dom": "^19.
|
|
47
|
+
"@types/jest-image-snapshot": "^6.4.2",
|
|
48
|
+
"@types/node": "^26.6.4",
|
|
49
|
+
"@types/react": "^19.3.0",
|
|
50
|
+
"@types/react-dom": "^19.3.0",
|
|
51
51
|
"@types/svgdom": "^0.1.2",
|
|
52
|
-
"@vitest/coverage-v8": "^
|
|
52
|
+
"@vitest/coverage-v8": "^5.0.3",
|
|
53
53
|
"depcheck": "^1.4.7",
|
|
54
54
|
"jest-image-snapshot": "^6.5.2",
|
|
55
|
-
"prettier": "3.9.
|
|
56
|
-
"react": "^19.
|
|
57
|
-
"tsdown": "^0.
|
|
55
|
+
"prettier": "3.9.9",
|
|
56
|
+
"react": "^19.3.0",
|
|
57
|
+
"tsdown": "^0.23.0",
|
|
58
58
|
"typescript": "^6.0.3",
|
|
59
|
-
"vite": "^8.
|
|
60
|
-
"vitest": "^
|
|
59
|
+
"vite": "^8.3.2",
|
|
60
|
+
"vitest": "^5.0.3",
|
|
61
61
|
"@altano/assets": "0.0.1",
|
|
62
|
+
"@altano/tsconfig": "0.0.1",
|
|
62
63
|
"@altano/build-config": "0.0.1",
|
|
63
|
-
"@altano/testing": "0.0.1"
|
|
64
|
-
"@altano/tsconfig": "0.0.1"
|
|
64
|
+
"@altano/testing": "0.0.1"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
67
|
"@types/react": "19.x.x"
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"test:e2e:server": "pnpm --dir ../../examples/satori-fit-text-playground start",
|
|
87
87
|
"test:e2e:ui": "playwright test --ui",
|
|
88
88
|
"test:unit": "vitest --run",
|
|
89
|
-
"test:unit:benchmark": "vitest --run
|
|
89
|
+
"test:unit:benchmark": "vitest bench --run",
|
|
90
90
|
"test:unit:watch": "vitest"
|
|
91
91
|
}
|
|
92
92
|
}
|