weasyprint-tsx 0.0.1

package/packages/ui/src/Table.tsx

@@ -0,0 +1,164 @@
+import {
+  ComponentChild,
+  ComponentProps,
+  toChildArray,
+  VNode
+} from "preact";
+import styles from "./Table.module.css";
+import { joinClasses, mergeStyle } from "./utils";
+
+
+
+export interface TableEntryProps extends ComponentProps<"th"> {
+  content: ComponentChild[];
+  contentClass?: string;
+  headerBg?: string;
+  cellBg?: string;
+  headerFontSize?: string;
+  cellFontSize?: string;
+}
+
+export function Entry(_props: TableEntryProps): null {
+  return null;
+}
+
+interface TableProps extends ComponentProps<"table"> {
+  orientation?: "col" | "row";
+  contentClass?: string;
+  headerClass?: string;
+  headerBg?: string;
+  cellBg?: string;
+  headerFontSize?: string;
+  cellFontSize?: string;
+  borderWidth?: string;
+  borderColor?: string;
+  children: VNode<TableEntryProps> | VNode<TableEntryProps>[];
+}
+
+
+export function Table({
+  children,
+  orientation = "col",
+  className,
+  style,
+  contentClass: parentContentClass = "",
+  headerClass,
+  headerBg,
+  cellBg,
+  headerFontSize,
+  cellFontSize,
+  borderWidth,
+  borderColor,
+  ...props
+}: TableProps) {
+  const headers = toChildArray(children)
+    .filter((child) => (child as VNode).type === Entry)
+    .map((child) => (child as VNode<TableEntryProps>).props);
+
+  const tableClass = joinClasses(
+    className,
+    styles.table,
+    styles[orientation],
+  ).trim();
+
+  const tableStyle = mergeStyle(style, {
+    "--table-header-color": headerBg,
+    "--table-cell-color": cellBg,
+    "--table-header-fontsize": headerFontSize,
+    "--table-cell-fontsize": cellFontSize,
+    "--table-border-width": borderWidth,
+    "--table-border-color": borderColor,
+  });
+
+  if (orientation === "row") {
+    return (
+      <table className={tableClass} style={tableStyle} {...props}>
+        <tbody>
+          {headers.map(
+            ({
+              children,
+              content,
+              className,
+              contentClass,
+              style,
+              headerBg,
+              cellBg,
+              headerFontSize,
+              cellFontSize,
+              ...props
+            }, i) => (
+              <tr key={i}>
+                <th
+                  scope="row"
+                  className={joinClasses(className, headerClass)}
+                  style={mergeStyle(style, {
+                    "--table-header-color": headerBg,
+                    "--table-header-fontsize": headerFontSize,
+                  })}
+                  {...props}
+                >
+                  {children}
+                </th>
+                {content.map((cell, j) => (
+                  <td
+                    key={j}
+                    className={joinClasses(contentClass, parentContentClass)}
+                    style={{ "--table-cell-color": cellBg, "--table-cell-fontsize": cellFontSize }}
+                  >
+                    {cell}
+                  </td>
+                ))}
+              </tr>
+            ),
+          )}
+        </tbody>
+      </table>
+    );
+  }
+
+  const rowCount = Math.max(...headers.map((h) => h.content.length));
+  return (
+    <table className={tableClass} style={tableStyle} {...props}>
+      <thead>
+        <tr>
+          {headers.map(
+            (
+              { children, content, className, contentClass, style, headerBg, cellBg, headerFontSize, cellFontSize, ...props },
+              i,
+            ) => (
+              <th
+                key={i}
+                className={joinClasses(className, headerClass)}
+                style={mergeStyle(style, {
+                  "--table-header-color": headerBg,
+                  "--table-header-fontsize": headerFontSize,
+                })}
+                {...props}
+              >
+                {children}
+              </th>
+            ),
+          )}
+        </tr>
+      </thead>
+      <tbody>
+        {Array.from({ length: rowCount }, (_, rowIdx) => (
+          <tr key={rowIdx}>
+            {headers.map(
+              ({ content, children, contentClass = "", cellBg, cellFontSize, ...props }, colIdx) => (
+                <td
+                  key={colIdx}
+                  {...props}
+                  className={joinClasses(contentClass, parentContentClass)}
+                  style={{ "--table-cell-color": cellBg, "--table-cell-fontsize": cellFontSize }}
+                >
+                  {content[rowIdx]}
+                </td>
+              ),
+            )}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/packages/ui/src/Title.module.css

@@ -0,0 +1,75 @@
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  &::before {
+    float: left;
+    clear: left;
+  }
+  &[data-marker]::before {
+    content: attr(data-marker);
+  }
+}
+
+
+.h1 {
+  color: var(--h1-color, inherit);
+  font-size: var(--h1-fontsize, inherit);
+  counter-reset: count-h2 count-h3 count-h4 count-h5 count-h6;
+  counter-increment: count-h1;
+  &::before {
+    content: counter(count-h1, upper-roman) ". ";
+  }
+}
+
+.h2 {
+  color: var(--h2-color, inherit);
+  font-size: var(--h2-fontsize, inherit);
+  counter-reset: count-h3 count-h4 count-h5 count-h6;
+  counter-increment: count-h2;
+  &::before {
+    content: counter(count-h2, decimal) ". ";
+  }
+}
+
+.h3 {
+  color: var(--h3-color, inherit);
+  font-size: var(--h3-fontsize, inherit);
+  counter-reset: count-h4 count-h5 count-h6;
+  counter-increment: count-h3;
+  &::before {
+    content: counter(count-h3, lower-alpha) ". ";
+  }
+}
+
+.h4 {
+  color: var(--h4-color, inherit);
+  font-size: var(--h4-fontsize, inherit);
+  counter-reset: count-h5 count-h6;
+  counter-increment: count-h4;
+  &::before {
+    content: counter(count-h4, lower-alpha) ". ";
+  }
+}
+
+.h5 {
+  color: var(--h5-color, inherit);
+  font-size: var(--h5-fontsize, inherit);
+  counter-reset: count-h6;
+  counter-increment: count-h5;
+  &::before {
+    content: counter(count-h5, lower-alpha) ". ";
+  }
+}
+
+.h6 {
+  color: var(--h6-color, inherit);
+  font-size: var(--h6-fontsize, inherit);
+  counter-increment: count-h6;
+  &::before {
+    content: counter(count-h6, lower-alpha) ". ";
+  }
+}

package/packages/ui/src/Titles.tsx

@@ -0,0 +1,105 @@
+import { ComponentProps, ComponentType } from "preact";
+import styles from "./Title.module.css";
+import { joinClasses, mergeStyle } from "./utils";
+
+type Htype = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+type Hprops<h extends Htype> = ComponentProps<h> & {
+  marker?: string;
+  color?: string;
+  fontSize?: string;
+};
+
+export function H1({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h1">) {
+  return (
+    <h1
+      data-marker={marker}
+      className={joinClasses(className, styles.h1)}
+      style={mergeStyle(style, { "--h1-color": color, "--h1-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+export function H2({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h2">) {
+  return (
+    <h2
+      data-marker={marker}
+      className={joinClasses(className, styles.h2)}
+      style={mergeStyle(style, { "--h2-color": color, "--h2-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+export function H3({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h3">) {
+  return (
+    <h3
+      data-marker={marker}
+      className={joinClasses(className, styles.h3)}
+      style={mergeStyle(style, { "--h3-color": color, "--h3-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+export function H4({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h4">) {
+  return (
+    <h4
+      data-marker={marker}
+      className={joinClasses(className, styles.h4)}
+      style={mergeStyle(style, { "--h4-color": color, "--h4-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+export function H5({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h5">) {
+  return (
+    <h5
+      data-marker={marker}
+      className={joinClasses(className, styles.h5)}
+      style={mergeStyle(style, { "--h5-color": color, "--h5-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+export function H6({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h6">) {
+  return (
+    <h6
+      data-marker={marker}
+      className={joinClasses(className, styles.h6)}
+      style={mergeStyle(style, { "--h6-color": color, "--h6-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+
+const TAG_MAP = { h1: H1, h2: H2, h3: H3, h4: H4, h5: H5, h6: H6 };
+
+type TitleProps<h extends Htype> = Hprops<h> & { type: h };
+export function Title<h extends Htype>({ type, ...props }: TitleProps<h>) {
+  const Tag = TAG_MAP[type] as ComponentType<Hprops<h>>;
+  return <Tag {...(props as Hprops<h>)} />;
+}
+
+export function ResetCounter({
+  type,
+  value,
+}: {
+  type: Htype | Htype[];
+  value?: number | (number | null)[];
+}) {
+  const types = Array.isArray(type) ? type : [type];
+  const values = Array.isArray(value) ? value : [value];
+  return (
+    <div
+      style={{
+        counterReset: types
+          .map((t, k) =>
+            `count-${t} ${(values[k % types.length] ?? 1) - 1}`.trim(),
+          )
+          .join(" "),
+        visibility: "hidden",
+        height: 0,
+        width: 0,
+      }}
+    />
+  );
+}

package/packages/ui/src/index.ts

@@ -0,0 +1,9 @@
+export { Block, BlockBox } from "./BlockBox";
+export { CodeBlock } from "./CodeBlock";
+export { DotLine } from "./DotLine";
+export { Equation } from "./Equation";
+export { LI, OL, UL } from "./List";
+export { Page, PageBreak } from "./Page";
+export { Entry, Table } from "./Table";
+export { H1, H2, H3, H4, H5, H6, ResetCounter, Title } from "./Titles";
+

package/packages/ui/src/utils.tsx

@@ -0,0 +1,26 @@
+import { CSSProperties, SignalLike, Signalish } from "preact";
+
+export const cssString = (v: string | undefined) =>
+  v !== undefined ? `"${v}"` : undefined;
+
+export function joinClasses(
+  ...classes: (string | SignalLike<string | undefined> | undefined)[]
+): string {
+  return classes.join(" ").trim();
+}
+
+export function mergeStyle(
+  base: Signalish<string | CSSProperties | undefined>,
+  extra: CSSProperties,
+): CSSProperties | string {
+  if (typeof base === "string") {
+    const extraStr = Object.entries(extra)
+      .filter(([, v]) => v != null)
+      .map(
+        ([k, v]) => `${k.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}:${v}`,
+      )
+      .join(";");
+    return extraStr ? `${base};${extraStr}` : base;
+  }
+  return { ...(base?.value as CSSProperties), ...extra };
+}

package/src/index.tsx

@@ -0,0 +1,16 @@
+import { H1 } from "@weasyprint-tsx/ui";
+import "./index.css";
+
+export default function Document() {
+  return (
+    <html>
+      <head>
+        <title>Weasyprint-tsx - ReadMe</title>
+        <link rel="stylesheet" href="index.css" />
+      </head>
+      <body>
+        <H1>HEHE</H1>
+      </body>
+    </html>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "types": ["bun-types"],
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "paths": {
+      "@weasyprint-tsx/ui": ["./packages/ui/src"],
+      "@weasyprint-tsx/ui/*": ["./packages/ui/src/*"],
+      "@weasyprint-tsx/build": ["./packages/build/src"]
+    }
+  }
+}

package/weasyprint-tsx.config.ts

@@ -0,0 +1,7 @@
+import { Config } from "./packages/build/src/config";
+
+export default {
+  io: {
+    output: "ReadMe.pdf",
+  },
+} satisfies Config;