@takumi-rs/wasm 2.0.0-rc.11 → 2.0.0-rc.13

package/README.md

@@ -1,7 +1,49 @@
+<div align="center">
+  <img src="https://takumi.kane.tw/logo.svg" alt="Takumi" width="64" />
+
 # @takumi-rs/wasm
 
-WebAssembly bindings for [Takumi](https://github.com/kane50613/takumi), a Rust image rendering engine.
+**WebAssembly bindings for [Takumi](https://github.com/kane50613/takumi), a Rust image rendering engine.**  
+Render OG cards, banners, and animations on Cloudflare Workers, edge runtimes, and browsers, no headless browser required.
+
+[Documentation](https://takumi.kane.tw/docs/) · [Playground](https://takumi.kane.tw/playground)
+
+</div>
+
+## Install
+
+```bash
+npm install @takumi-rs/wasm
+```
+
+## Quick start
+
+```ts
+import init, { Renderer } from "@takumi-rs/wasm";
+
+await init();
+
+const renderer = new Renderer();
+
+const png = await renderer.render(
+  {
+    type: "container",
+    children: [{ type: "text", text: "Hello from Takumi" }],
+  },
+  { width: 1200, height: 630 },
+);
+```
+
+Call `init()` once to load the WASM binary, then reuse the `Renderer`. Build node trees by hand, or generate them from JSX and HTML with [`@takumi-rs/helpers`](https://npmjs.com/package/@takumi-rs/helpers).
+
+## Documentation
+
+- Integration guide: <https://takumi.kane.tw/docs/integration>
+- API reference: <https://takumi.kane.tw/docs/api-reference>
+- Repository: <https://github.com/kane50613/takumi>
+
+For Node.js, use the native [@takumi-rs/core](https://npmjs.com/package/@takumi-rs/core) bindings.
 
-See the [Integration guide](https://takumi.kane.tw/docs/integration) for setup.
+## License
 
-For Node.js, use [@takumi-rs/core](https://npmjs.com/package/@takumi-rs/core).
+MIT or Apache-2.0

package/dist/export.cjs

@@ -2,7 +2,6 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-let _takumi_rs_helpers = require("@takumi-rs/helpers");
 let _takumi_rs_helpers_renderer = require("@takumi-rs/helpers/renderer");
 //#region pkg/takumi_wasm.js
 /**
@@ -522,70 +521,25 @@ var Renderer = class {
 	inner = new Renderer$1();
 	fonts = new _takumi_rs_helpers_renderer.FontRegistry((font) => this.inner.registerFont(font));
 	async render(node, options) {
-		const { fonts, fontFamilies, signal, images, ...rest } = options ?? {};
-		signal?.throwIfAborted();
-		const resolved = await this.fonts.resolveResources(fonts && (0, _takumi_rs_helpers.subsetFonts)({
-			fonts,
-			source: node
-		}), images, fontFamilies);
-		signal?.throwIfAborted();
-		return this.inner.render(node, {
-			...rest,
-			...resolved
-		});
+		const { options: opts } = await (0, _takumi_rs_helpers_renderer.prepareRenderInput)(this.fonts, options ?? {}, node);
+		return this.inner.render(node, opts);
 	}
 	async renderAsDataUrl(node, options) {
-		const { fonts, fontFamilies, signal, images, ...rest } = options ?? {};
-		signal?.throwIfAborted();
-		const resolved = await this.fonts.resolveResources(fonts && (0, _takumi_rs_helpers.subsetFonts)({
-			fonts,
-			source: node
-		}), images, fontFamilies);
-		signal?.throwIfAborted();
-		return this.inner.renderAsDataUrl(node, {
-			...rest,
-			...resolved
-		});
+		const { options: opts } = await (0, _takumi_rs_helpers_renderer.prepareRenderInput)(this.fonts, options ?? {}, node);
+		return this.inner.renderAsDataUrl(node, opts);
 	}
 	async renderSvg(node, options) {
-		const { fonts, fontFamilies, signal, images, ...rest } = options ?? {};
-		signal?.throwIfAborted();
-		const resolved = await this.fonts.resolveResources(fonts && (0, _takumi_rs_helpers.subsetFonts)({
-			fonts,
-			source: node
-		}), images, fontFamilies);
-		signal?.throwIfAborted();
-		return this.inner.renderSvg(node, {
-			...rest,
-			...resolved
-		});
+		const { options: opts } = await (0, _takumi_rs_helpers_renderer.prepareRenderInput)(this.fonts, options ?? {}, node);
+		return this.inner.renderSvg(node, opts);
 	}
 	async measure(node, options) {
-		const { fonts, fontFamilies, signal, images, ...rest } = options ?? {};
-		signal?.throwIfAborted();
-		const resolved = await this.fonts.resolveResources(fonts && (0, _takumi_rs_helpers.subsetFonts)({
-			fonts,
-			source: node
-		}), images, fontFamilies);
-		signal?.throwIfAborted();
-		return this.inner.measure(node, {
-			...rest,
-			...resolved
-		});
+		const { options: opts } = await (0, _takumi_rs_helpers_renderer.prepareRenderInput)(this.fonts, options ?? {}, node);
+		return this.inner.measure(node, opts);
 	}
 	async renderAnimation(options) {
-		const { fonts, fontFamilies, signal, images, ...rest } = options;
-		signal?.throwIfAborted();
 		const nodes = options.scenes.map((scene) => scene.node);
-		const resolved = await this.fonts.resolveResources(fonts && (0, _takumi_rs_helpers.subsetFonts)({
-			fonts,
-			source: nodes
-		}), images, fontFamilies);
-		signal?.throwIfAborted();
-		return this.inner.renderAnimation({
-			...rest,
-			...resolved
-		});
+		const { options: opts } = await (0, _takumi_rs_helpers_renderer.prepareRenderInput)(this.fonts, options, nodes);
+		return this.inner.renderAnimation(opts);
 	}
 	registerFont(font) {
 		return this.fonts.register(font);

package/dist/export.d.cts

@@ -1,15 +1,14 @@
 import { ContainerNode, ImageNode, Node, Node as Node$1, NodeMetadata, TextNode } from "@takumi-rs/helpers";
-import { Properties } from "csstype";
-import { AnimationOutputFormatOptions, AnimationOutputFormatOptions as AnimationOutputFormatOptions$1, FontLoader, FontLoader as FontLoader$1, ImageLoader, ImagesInput, ImagesInput as ImagesInput$1, OutputFormatOptions, OutputFormatOptions as OutputFormatOptions$1 } from "@takumi-rs/helpers/renderer";
+import { AnimationOutputFormatOptions, BackendAnimationOptions, BackendRenderOptions, BackendSvgOptions, FontLoader, FontLoader as FontLoader$1, ImageLoader, ImagesInput, OutputFormatOptions } from "@takumi-rs/helpers/renderer";
 
 //#region pkg/takumi_wasm.d.ts
 type ByteBuf = Uint8Array | ArrayBuffer | Buffer;
-type KeyframesMap = Record<string, Record<string, Properties>>;
+type KeyframesMap = Record<string, Record<string, CSSStyleDeclaration>>;
 type KeyframesRuleList = {
   name: string;
   keyframes: {
     offsets: number[];
-    declarations: Record<string, Properties>;
+    declarations: Record<string, CSSStyleDeclaration>;
   }[];
 }[];
 type Keyframes = KeyframesMap | KeyframesRuleList;
@@ -151,7 +150,7 @@ type ImageSource = {
 };
 type KeyframeRule = {
   offsets: number[];
-  declarations: Record<string, Properties>;
+  declarations: Record<string, CSSStyleDeclaration>;
 };
 type KeyframesRule = {
   name: string;
@@ -231,21 +230,9 @@ declare function __wbg_init(module_or_path?: {
 } | InitInput | Promise<InitInput>): Promise<InitOutput>;
 //#endregion
 //#region src/export.d.ts
-type RenderOptions = Omit<RenderOptions$1, "images" | "format" | "quality" | "lossless"> & OutputFormatOptions$1 & {
-  fonts?: FontLoader$1[];
-  signal?: AbortSignal;
-  images?: ImagesInput$1;
-};
-type RenderAnimationOptions = Omit<RenderAnimationOptions$1, "images" | "format" | "quality" | "lossless"> & AnimationOutputFormatOptions$1 & {
-  fonts?: FontLoader$1[];
-  signal?: AbortSignal;
-  images?: ImagesInput$1;
-};
-type SvgRenderOptions = Omit<SvgRenderOptions$1, "images"> & {
-  fonts?: FontLoader$1[];
-  signal?: AbortSignal;
-  images?: ImagesInput$1;
-};
+type RenderOptions = BackendRenderOptions<RenderOptions$1>;
+type RenderAnimationOptions = BackendAnimationOptions<RenderAnimationOptions$1>;
+type SvgRenderOptions = BackendSvgOptions<SvgRenderOptions$1>;
 declare class Renderer {
   private inner;
   private fonts;

package/dist/export.d.mts

@@ -1,15 +1,14 @@
+import { AnimationOutputFormatOptions, BackendAnimationOptions, BackendRenderOptions, BackendSvgOptions, FontLoader, FontLoader as FontLoader$1, ImageLoader, ImagesInput, OutputFormatOptions } from "@takumi-rs/helpers/renderer";
 import { ContainerNode, ImageNode, Node, Node as Node$1, NodeMetadata, TextNode } from "@takumi-rs/helpers";
-import { AnimationOutputFormatOptions, AnimationOutputFormatOptions as AnimationOutputFormatOptions$1, FontLoader, FontLoader as FontLoader$1, ImageLoader, ImagesInput, ImagesInput as ImagesInput$1, OutputFormatOptions, OutputFormatOptions as OutputFormatOptions$1 } from "@takumi-rs/helpers/renderer";
-import { Properties } from "csstype";
 
 //#region pkg/takumi_wasm.d.ts
 type ByteBuf = Uint8Array | ArrayBuffer | Buffer;
-type KeyframesMap = Record<string, Record<string, Properties>>;
+type KeyframesMap = Record<string, Record<string, CSSStyleDeclaration>>;
 type KeyframesRuleList = {
   name: string;
   keyframes: {
     offsets: number[];
-    declarations: Record<string, Properties>;
+    declarations: Record<string, CSSStyleDeclaration>;
   }[];
 }[];
 type Keyframes = KeyframesMap | KeyframesRuleList;
@@ -151,7 +150,7 @@ type ImageSource = {
 };
 type KeyframeRule = {
   offsets: number[];
-  declarations: Record<string, Properties>;
+  declarations: Record<string, CSSStyleDeclaration>;
 };
 type KeyframesRule = {
   name: string;
@@ -231,21 +230,9 @@ declare function __wbg_init(module_or_path?: {
 } | InitInput | Promise<InitInput>): Promise<InitOutput>;
 //#endregion
 //#region src/export.d.ts
-type RenderOptions = Omit<RenderOptions$1, "images" | "format" | "quality" | "lossless"> & OutputFormatOptions$1 & {
-  fonts?: FontLoader$1[];
-  signal?: AbortSignal;
-  images?: ImagesInput$1;
-};
-type RenderAnimationOptions = Omit<RenderAnimationOptions$1, "images" | "format" | "quality" | "lossless"> & AnimationOutputFormatOptions$1 & {
-  fonts?: FontLoader$1[];
-  signal?: AbortSignal;
-  images?: ImagesInput$1;
-};
-type SvgRenderOptions = Omit<SvgRenderOptions$1, "images"> & {
-  fonts?: FontLoader$1[];
-  signal?: AbortSignal;
-  images?: ImagesInput$1;
-};
+type RenderOptions = BackendRenderOptions<RenderOptions$1>;
+type RenderAnimationOptions = BackendAnimationOptions<RenderAnimationOptions$1>;
+type SvgRenderOptions = BackendSvgOptions<SvgRenderOptions$1>;
 declare class Renderer {
   private inner;
   private fonts;

package/dist/export.mjs

@@ -1,5 +1,4 @@
-import { subsetFonts } from "@takumi-rs/helpers";
-import { FontRegistry } from "@takumi-rs/helpers/renderer";
+import { FontRegistry, prepareRenderInput } from "@takumi-rs/helpers/renderer";
 //#region pkg/takumi_wasm.js
 /**
 * The main renderer for Takumi image rendering engine.
@@ -518,70 +517,25 @@ var Renderer = class {
 	inner = new Renderer$1();
 	fonts = new FontRegistry((font) => this.inner.registerFont(font));
 	async render(node, options) {
-		const { fonts, fontFamilies, signal, images, ...rest } = options ?? {};
-		signal?.throwIfAborted();
-		const resolved = await this.fonts.resolveResources(fonts && subsetFonts({
-			fonts,
-			source: node
-		}), images, fontFamilies);
-		signal?.throwIfAborted();
-		return this.inner.render(node, {
-			...rest,
-			...resolved
-		});
+		const { options: opts } = await prepareRenderInput(this.fonts, options ?? {}, node);
+		return this.inner.render(node, opts);
 	}
 	async renderAsDataUrl(node, options) {
-		const { fonts, fontFamilies, signal, images, ...rest } = options ?? {};
-		signal?.throwIfAborted();
-		const resolved = await this.fonts.resolveResources(fonts && subsetFonts({
-			fonts,
-			source: node
-		}), images, fontFamilies);
-		signal?.throwIfAborted();
-		return this.inner.renderAsDataUrl(node, {
-			...rest,
-			...resolved
-		});
+		const { options: opts } = await prepareRenderInput(this.fonts, options ?? {}, node);
+		return this.inner.renderAsDataUrl(node, opts);
 	}
 	async renderSvg(node, options) {
-		const { fonts, fontFamilies, signal, images, ...rest } = options ?? {};
-		signal?.throwIfAborted();
-		const resolved = await this.fonts.resolveResources(fonts && subsetFonts({
-			fonts,
-			source: node
-		}), images, fontFamilies);
-		signal?.throwIfAborted();
-		return this.inner.renderSvg(node, {
-			...rest,
-			...resolved
-		});
+		const { options: opts } = await prepareRenderInput(this.fonts, options ?? {}, node);
+		return this.inner.renderSvg(node, opts);
 	}
 	async measure(node, options) {
-		const { fonts, fontFamilies, signal, images, ...rest } = options ?? {};
-		signal?.throwIfAborted();
-		const resolved = await this.fonts.resolveResources(fonts && subsetFonts({
-			fonts,
-			source: node
-		}), images, fontFamilies);
-		signal?.throwIfAborted();
-		return this.inner.measure(node, {
-			...rest,
-			...resolved
-		});
+		const { options: opts } = await prepareRenderInput(this.fonts, options ?? {}, node);
+		return this.inner.measure(node, opts);
 	}
 	async renderAnimation(options) {
-		const { fonts, fontFamilies, signal, images, ...rest } = options;
-		signal?.throwIfAborted();
 		const nodes = options.scenes.map((scene) => scene.node);
-		const resolved = await this.fonts.resolveResources(fonts && subsetFonts({
-			fonts,
-			source: nodes
-		}), images, fontFamilies);
-		signal?.throwIfAborted();
-		return this.inner.renderAnimation({
-			...rest,
-			...resolved
-		});
+		const { options: opts } = await prepareRenderInput(this.fonts, options, nodes);
+		return this.inner.renderAnimation(opts);
 	}
 	registerFont(font) {
 		return this.fonts.register(font);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takumi-rs/wasm",
-  "version": "2.0.0-rc.11",
+  "version": "2.0.0-rc.13",
   "description": "WebAssembly bindings for Takumi, a Rust image rendering engine.",
   "keywords": [
     "css",
@@ -117,8 +117,7 @@
     "publish-lint": "attw --pack . && publint --strict ."
   },
   "dependencies": {
-    "@takumi-rs/helpers": "2.0.0-rc.11",
-    "csstype": "^3.2.3"
+    "@takumi-rs/helpers": "2.0.0-rc.13"
   },
   "devDependencies": {
     "@types/bun": "^1.3.14",