weasyprint-tsx 0.1.3 → 0.1.4

package/README.md

@@ -95,5 +95,5 @@ export default config;
 `@weasyprint-tsx/ui` provides print-optimized Preact components. See [`packages/ui/README.md`](packages/ui/README.md) for the full API.
 
 ```tsx
-import { H1, H2, Page, UL, LI, Table, Entry } from "@weasyprint-tsx/ui";
+import { H1, H2, Page, UL, LI, Table, Entry, Chart } from "@weasyprint-tsx/ui";
 ```

package/bun.lock

@@ -4,13 +4,10 @@
   "workspaces": {
     "": {
       "name": "@weasyprint-tsx/build",
-      "dependencies": {
-        "@fontsource-variable/public-sans": "^5.2.7",
-      },
     },
     "packages/build": {
       "name": "@weasyprint-tsx/build",
-      "version": "0.1.1",
+      "version": "0.1.5",
       "bin": {
         "weasyprint-tsx": "./src/cli.ts",
       },
@@ -31,15 +28,14 @@
       "bin": {
         "create-weasyprint-tsx": "cli.js",
       },
-      "dependencies": {
-        "highlight.js": "11.11.1",
-      },
     },
     "packages/ui": {
       "name": "@weasyprint-tsx/ui",
-      "version": "0.1.0",
+      "version": "0.1.7",
       "dependencies": {
-        "highlight.js": "^11.11.1",
+        "@napi-rs/canvas": "^1.0.0",
+        "chart.js": "^4.5.1",
+        "highlight.js": "11.11.1",
         "katex": "^0.16.47",
       },
     },
@@ -55,8 +51,6 @@
 
     "@csstools/utilities": ["@csstools/utilities@3.0.0", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-etDqA/4jYvOGBM6yfKCOsEXfH96BKztZdgGmGqKi2xHnDe0ILIBraRspwgYatJH9JsCZ5HCGoCst8w18EKOAdg=="],
 
-    "@fontsource-variable/public-sans": ["@fontsource-variable/public-sans@5.2.7", "", {}, "sha512-4mvade2J3slKkvwRkS+p8T3szet/0vhWoSnuUJTVU81Uo2pRpSZY/Y8bSLRqpSwzIPxjVmRJ53oq6JKP/l/PSg=="],
-
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -67,6 +61,32 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@kurkle/color": ["@kurkle/color@0.3.4", "", {}, "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="],
+
+    "@napi-rs/canvas": ["@napi-rs/canvas@1.0.0", "", { "optionalDependencies": { "@napi-rs/canvas-android-arm64": "1.0.0", "@napi-rs/canvas-darwin-arm64": "1.0.0", "@napi-rs/canvas-darwin-x64": "1.0.0", "@napi-rs/canvas-linux-arm-gnueabihf": "1.0.0", "@napi-rs/canvas-linux-arm64-gnu": "1.0.0", "@napi-rs/canvas-linux-arm64-musl": "1.0.0", "@napi-rs/canvas-linux-riscv64-gnu": "1.0.0", "@napi-rs/canvas-linux-x64-gnu": "1.0.0", "@napi-rs/canvas-linux-x64-musl": "1.0.0", "@napi-rs/canvas-win32-arm64-msvc": "1.0.0", "@napi-rs/canvas-win32-x64-msvc": "1.0.0" } }, "sha512-Jqxcy1XOIqj+lH9sl1GT+il6GR3uQv13vI2mrwubP3uT8Olak2ClDrK2RnxlQKjwv8BRr4b3ug0YR7c6hBX8wg=="],
+
+    "@napi-rs/canvas-android-arm64": ["@napi-rs/canvas-android-arm64@1.0.0", "", { "os": "android", "cpu": "arm64" }, "sha512-3hNKJObUK7JsCF9aJlVCs1J0/KE/gGfZNeK8MO1ge6bB3aicr5walGme9t9No1f/oyk9GgvdAT/rjSdsx3gbIw=="],
+
+    "@napi-rs/canvas-darwin-arm64": ["@napi-rs/canvas-darwin-arm64@1.0.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ZIja19/BiGz2puhki+WUYSRriwFeFJ8Mi9eK3hZdSS85w4Y60cuEAJVhMCfKwswQkKkUtrnzdKMBuO7TupvexA=="],
+
+    "@napi-rs/canvas-darwin-x64": ["@napi-rs/canvas-darwin-x64@1.0.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-hImggWc82jqZVpEsFR9S7PE9OQYjq/H/D7vwCGB6X1jRH+UVBP1+1niJTPBOat1B154T6GKK7/kcFtoWgjgFzQ=="],
+
+    "@napi-rs/canvas-linux-arm-gnueabihf": ["@napi-rs/canvas-linux-arm-gnueabihf@1.0.0", "", { "os": "linux", "cpu": "arm" }, "sha512-hlJRy6d+kWLKVOG/+1rEvNQVURZ0DxxRPJsLmEWwhwiXZUJc0BF5o9esALHSEP4CoJK4wChRtj3hnyBgVx2oWA=="],
+
+    "@napi-rs/canvas-linux-arm64-gnu": ["@napi-rs/canvas-linux-arm64-gnu@1.0.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-5Hru4T3RXkosRQafcjelv7AUzw9mXqmGYsxnzeDDOWveFCJyEPMSJltvGCM+jfH98seOCbfwm9KyFg6Jm5FhAA=="],
+
+    "@napi-rs/canvas-linux-arm64-musl": ["@napi-rs/canvas-linux-arm64-musl@1.0.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-LTUl9jS8WsLSUGaxQZKQkxfluOJRpgvBuxxdM4pYcjib+di8AU4OzQc6+L6SzGMLcKc9H0RAjojRatBhTMqYdg=="],
+
+    "@napi-rs/canvas-linux-riscv64-gnu": ["@napi-rs/canvas-linux-riscv64-gnu@1.0.0", "", { "os": "linux", "cpu": "none" }, "sha512-Iz931SAZf+WVDzpjk52Q3ffW3zw0YflFwEZMgs036Wfu1kX/LrwT9wGjsuSqyduqefUkl91/vTdAjn8hQu5ezA=="],
+
+    "@napi-rs/canvas-linux-x64-gnu": ["@napi-rs/canvas-linux-x64-gnu@1.0.0", "", { "os": "linux", "cpu": "x64" }, "sha512-pFEQ5eFK4JusgN1K6KkO9DKP/Hi1WMJOkF8Ch03/khTc4bFbCKkCCsJG4YcOMOW9bI4XbT2/eMAWxhO0xaWgPA=="],
+
+    "@napi-rs/canvas-linux-x64-musl": ["@napi-rs/canvas-linux-x64-musl@1.0.0", "", { "os": "linux", "cpu": "x64" }, "sha512-jnvr8NrLHiZ3NCiOKWqDbkI4Ah+QDrqtZ+sddPZBltEb1mQ2coSvCSJYfict+oAwcm0c970oTmVySpjKP/lnaA=="],
+
+    "@napi-rs/canvas-win32-arm64-msvc": ["@napi-rs/canvas-win32-arm64-msvc@1.0.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-y2j9/Gfd5joqiqxdP/L1smqjQ+uAx3C4N0EC7bDHrnZEEH8ToM/OC5p3uHvtj4Lq591aHj+ArL01UDLNwT5HgQ=="],
+
+    "@napi-rs/canvas-win32-x64-msvc": ["@napi-rs/canvas-win32-x64-msvc@1.0.0", "", { "os": "win32", "cpu": "x64" }, "sha512-qwdhh9N6Gge/hC4pL9S1tQp0iKwhSl/dYjg7+RGp9k26iRGRi5MqqUyKGOXIWli0zOcuy5Y2wIH/jk2ry6i/jA=="],
+
     "@tailwindcss/node": ["@tailwindcss/node@4.3.0", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.21.0", "jiti": "^2.6.1", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.0" } }, "sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g=="],
 
     "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.0", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.0", "@tailwindcss/oxide-darwin-arm64": "4.3.0", "@tailwindcss/oxide-darwin-x64": "4.3.0", "@tailwindcss/oxide-freebsd-x64": "4.3.0", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.0", "@tailwindcss/oxide-linux-arm64-musl": "4.3.0", "@tailwindcss/oxide-linux-x64-gnu": "4.3.0", "@tailwindcss/oxide-linux-x64-musl": "4.3.0", "@tailwindcss/oxide-wasm32-wasi": "4.3.0", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.0", "@tailwindcss/oxide-win32-x64-msvc": "4.3.0" } }, "sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg=="],
@@ -107,6 +127,8 @@
 
     "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
 
+    "chart.js": ["chart.js@4.5.1", "", { "dependencies": { "@kurkle/color": "^0.3.0" } }, "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw=="],
+
     "commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weasyprint-tsx",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "bin": {
     "create-weasyprint-tsx": "bun packages/create/cli.ts",
     "build-weasyprint-tsx": "bun packages/build/src/cli.ts"

package/packages/build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasyprint-tsx/build",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "main": "./src/index.ts",
   "exports": { ".": "./src/index.ts" },
   "types": "./src/index.ts",

package/packages/build/src/orchestrator.ts

@@ -46,7 +46,7 @@ export async function devMode(output?: string) {
 
   WATCH_DIRS.forEach((dir) =>
     watch(dir, { recursive: true }, async (_, f) => {
-      process.stdout.write(`file changed ${f}`);
+      process.stdout.write(`file changed ${f}\n`);
       await rebuild();
     }),
   );

package/packages/create/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasyprint-tsx/create",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "bin": {
     "create-weasyprint-tsx": "cli.js"
   },

package/packages/create/template/AGENT.md

@@ -114,6 +114,5 @@ See the full API: https://github.com/weasyprint-tsx/weasyprint-tsx/blob/main/pac
 - **No `@media screen`** — the document is rendered in print media; use `@media print` or no media query
 - **Page geometry** belongs in `@page` rules, not on `html` or `body`
 - **All layout** should use CSS that WeasyPrint supports. Flexbox and CSS Grid have partial support — prefer block layout or the `BlockBox`/`Block` components for multi-column content
-- **Components are Preact**, not React — use `class` not `className` for raw HTML elements (Preact accepts both, but prefer `class`)
 - **Images** must be embedded as base64 data URIs or served by the dev server; external URLs may not resolve during build
 - **Fonts** must be declared in CSS with `@font-face` or imported via Tailwind; Google Fonts CDN links work at build time

package/packages/create/template/src/index.tsx

@@ -1,7 +1,6 @@
+import { Chart, H1, H2, LI, UL } from "@weasyprint-tsx/ui";
 import "./index.css";
 
-import { H1, H2, LI, UL } from "@weasyprint-tsx/ui";
-
 export default function Document() {
   return (
     <html lang="en">
@@ -13,12 +12,33 @@ export default function Document() {
       <body>
         <H1>My Document</H1>
         <H2>Introduction</H2>
-        <p>Edit <code>src/index.tsx</code> to start writing your document.</p>
+        <p>
+          Edit <code>src/index.tsx</code> to start writing your document.
+        </p>
         <UL>
-          <LI>Use components from <code>@weasyprint-tsx/ui</code></LI>
-          <LI>Style with Tailwind utility classes or plain CSS in <code>src/index.css</code></LI>
-          <LI>Run <code>bun run dev</code> for live preview</LI>
+          <LI>
+            Use components from <code>@weasyprint-tsx/ui</code>
+          </LI>
+          <LI>
+            Style with Tailwind utility classes or plain CSS in{" "}
+            <code>src/index.css</code>
+          </LI>
+          <LI>
+            Run <code>bun run dev</code> for live preview
+          </LI>
         </UL>
+        <H2>Chart Example</H2>
+        <Chart
+          config={{
+            type: "bar",
+            data: {
+              labels: ["Jan", "Feb", "Mar"],
+              datasets: [{ label: "Sales", data: [12, 8, 21] }],
+            },
+          }}
+          width={600}
+          height={300}
+        />
       </body>
     </html>
   );

package/packages/ui/README.md

@@ -276,3 +276,77 @@ LaTeX equation rendering via KaTeX.
 | `displayMode` | `boolean` | `false` | Render as block-level equation |
 | `aligned` | `boolean` | `false` | Wrap in `\begin{aligned}…\end{aligned}` |
 | `chemical` | `boolean` | `false` | Wrap in `\ce{…}` for chemical notation |
+
+---
+
+## Chart
+
+Renders a [chart.js](https://www.chartjs.org/) chart server-side as a base64-encoded PNG `<img>`.
+
+### `Chart`
+
+```tsx
+import type { ChartConfiguration } from "chart.js";
+import { Chart } from "@weasyprint-tsx/ui";
+
+const config: ChartConfiguration = {
+  type: "bar",
+  data: {
+    labels: ["Jan", "Feb", "Mar"],
+    datasets: [{ label: "Sales", data: [12, 8, 21] }],
+  },
+};
+
+<Chart config={config} width={600} height={300} />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `config` | `ChartConfiguration` | — | chart.js configuration object |
+| `width` | `number` | `800` | Canvas width in pixels |
+| `height` | `number` | `500` | Canvas height in pixels |
+| `...rest` | `Omit<ComponentProps<"img">, "src">` | — | All standard `<img>` attributes except `src` |
+
+---
+
+### `chartFunction`
+
+Samples a numeric function into a data array for chart datasets. Produces `sample + 1` values evaluated at `n * step` for `n` in `0..sample`.
+
+```ts
+chartFunction(func, options?)
+```
+
+| Param | Type | Default | Description |
+|-------|------|---------|-------------|
+| `func` | `(n: number) => number` | — | Function to sample |
+| `options.step` | `number` | `1` | Multiplier applied to the index before calling `func` |
+| `options.sample` | `number` | `100` | Number of intervals (yields `sample + 1` points) |
+
+```tsx
+import { Chart, chartFunction } from "@weasyprint-tsx/ui";
+
+<Chart config={{
+  type: "line",
+  data: {
+    labels: chartFunction(n => n, { step: 0.1 }),
+    datasets: [{ label: "sin(x)", data: chartFunction(Math.sin, { step: 0.1 }) }],
+  },
+}} />
+```
+
+---
+
+### `labelFunction`
+
+Same as `chartFunction` but the sampling function may return a `number` or `string`. Use to generate axis labels.
+
+```ts
+labelFunction(func, options?)
+```
+
+| Param | Type | Default | Description |
+|-------|------|---------|-------------|
+| `func` | `(n: number) => number \| string` | — | Function to sample |
+| `options.step` | `number` | `1` | Multiplier applied to the index |
+| `options.sample` | `number` | `100` | Number of intervals (yields `sample + 1` values) |

package/packages/ui/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@weasyprint-tsx/ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "exports": {
     ".": "./src/index.ts"
   },
   "types": "./src/index.ts",
   "dependencies": {
+    "@napi-rs/canvas": "^1.0.0",
+    "chart.js": "^4.5.1",
     "highlight.js": "11.11.1",
     "katex": "^0.16.47"
   }

package/packages/ui/src/Chart.tsx

@@ -0,0 +1,54 @@
+import { createCanvas } from "@napi-rs/canvas";
+import type { ChartConfiguration } from "chart.js";
+import { Chart as ChartJS } from "chart.js/auto";
+import { ComponentProps } from "preact";
+
+export interface ChartProps extends Omit<ComponentProps<"img">, "src"> {
+  config: ChartConfiguration;
+  width?: number;
+  height?: number;
+}
+
+export function Chart({
+  config,
+  width = 800,
+  height = 500,
+  ...props
+}: ChartProps) {
+  const canvas = createCanvas(width, height);
+
+  const chart = new ChartJS(canvas as unknown as HTMLCanvasElement, {
+    ...config,
+    options: {
+      ...config.options,
+      animation: false,
+      responsive: false,
+    },
+  });
+
+  const dataUrl = `data:image/png;base64,${canvas.toBuffer("image/png").toString("base64")}`;
+  chart.destroy();
+
+  return <img src={dataUrl} width={width} height={height} {...props} />;
+}
+
+type FunctionOptions = {
+  step?: number;
+  sample?: number;
+};
+
+export function chartFunction(
+  func: (n: number) => number,
+  options?: FunctionOptions,
+) {
+  const { sample = 100, step = 1 } = options ?? {};
+  return Array.from({ length: sample + 1 }, (_, n) => func(n * step));
+}
+
+export function labelFunction(
+  func: (n: number) => number | string,
+  options?: FunctionOptions
+) {
+  const { sample = 100, step = 1 } = options ?? {};
+  return Array.from({ length: sample + 1 }, (_, n) => func(n * step));
+}

package/packages/ui/src/index.ts

@@ -1,3 +1,5 @@
+export { Chart, chartFunction, labelFunction } from "./Chart";
+export type { ChartProps } from "./Chart";
 export { Block, BlockBox } from "./BlockBox";
 export type { BlockBoxProps, BlockProps } from "./BlockBox";
 export { CodeBlock } from "./CodeBlock";