weasyprint-tsx 0.1.1 → 0.1.3

package/README.md

@@ -10,7 +10,7 @@ Write PDFs in TSX. Uses [Bun](https://bun.sh) to bundle your Preact components i
 ## Quick start
 
 ```bash
-bunx create-weasyprint-tsx my-doc
+bunx @weasyprint-tsx/create my-doc
 cd my-doc
 bun install
 bun run dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weasyprint-tsx",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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.1",
+  "version": "0.1.5",
   "main": "./src/index.ts",
   "exports": { ".": "./src/index.ts" },
   "types": "./src/index.ts",

package/packages/build/src/config.ts

@@ -11,7 +11,7 @@ export interface Config {
     stylesheets?: string[];
   };
   weasyprint?: {
-    path: string;
+    path?: string;
     verbose?: boolean;
     pdf_forms?: boolean;
     optimize_images?: boolean;
@@ -48,7 +48,7 @@ const defaultConfig = {
   },
 } satisfies Config;
 
-export type DConfig = typeof defaultConfig & Config;
+export type DConfig = Config & typeof defaultConfig;
 
 export function isObject(item: any) {
   return item && typeof item === "object" && !Array.isArray(item);
@@ -81,7 +81,7 @@ export async function loadConfig(): Promise<DConfig> {
   let config = defaultConfig;
   try {
     const { default: userConfig } = await import(`${configPath}`);
-    config = mergeDeep(config, userConfig) as unknown as DConfig;
+    config = mergeDeep(config, userConfig) as Config as DConfig;
   } catch (e) {
     process.stdout.write(
       `No config file at ${configPath} found, using default.`,

package/packages/build/src/orchestrator.ts

@@ -7,17 +7,9 @@ import { bumpPing, startServer } from "./server";
 export async function buildOnce(output?: string) {
   const cfg = await loadConfig();
   if (output) cfg.io.output = output;
-  let t0 = performance.now();
 
   await buildHTML(cfg);
-  process.stdout.write(
-    `Bun HTML build -- ${(performance.now() - t0).toFixed(2)} ms`,
-  );
   await buildPDF(cfg);
-  t0 = performance.now();
-  process.stdout.write(
-    `Weasyprint PDF build -- ${(performance.now() - t0).toFixed(2)} ms → ${cfg.io.output}`,
-  );
 }
 
 export async function devMode(output?: string) {
@@ -25,7 +17,7 @@ export async function devMode(output?: string) {
   const WATCH_DIRS = cfg.dev.watch.map((p) => join(process.cwd(), p));
 
   if (output) cfg.io.output = cfg.io.output ?? output;
-  process.stdout.write(`Dev: http://localhost:${cfg.dev.port}`);
+  process.stdout.write(`Dev: http://localhost:${cfg.dev.port}\n`);
 
   let pdfBusy = false;
   let lastHash: number | BigInt = 0;

package/packages/ui/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@weasyprint-tsx/ui",
-  "version": "0.1.1",
+  "version": "0.1.7",
   "exports": {
     ".": "./src/index.ts"
   },
   "types": "./src/index.ts",
   "dependencies": {
-    "highlight.js": "11.11.1"
+    "highlight.js": "11.11.1",
+    "katex": "^0.16.47"
   }
 }

package/packages/ui/src/BlockBox.tsx

@@ -2,7 +2,7 @@ import { ComponentProps, toChildArray, VNode } from "preact";
 import styles from "./BlockBox.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-interface BlockBoxProps extends ComponentProps<"div"> {
+export interface BlockBoxProps extends ComponentProps<"div"> {
   children: VNode<BlockProps>[] | VNode<BlockProps>;
   gap?: string;
   basis?: number;
@@ -10,7 +10,7 @@ interface BlockBoxProps extends ComponentProps<"div"> {
   align?: "middle" | "top" | "bottom";
 }
 
-interface BlockProps extends ComponentProps<"div"> {
+export interface BlockProps extends ComponentProps<"div"> {
   ratio?: number;
   centered?: boolean;
   align?: "middle" | "top" | "bottom";

package/packages/ui/src/CodeBlock.tsx

@@ -4,7 +4,7 @@ import { ComponentProps } from "preact";
 import styles from "./CodeBlock.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-interface CodeBlockProps extends Omit<ComponentProps<"code">, "children"> {
+export interface CodeBlockProps extends Omit<ComponentProps<"code">, "children"> {
   language: string;
   code: string;
   bgColor?: string;

package/packages/ui/src/DotLine.tsx

@@ -2,7 +2,7 @@ import { ComponentProps } from "preact";
 import styles from "./DotLine.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-interface DotLineProps extends ComponentProps<"span"> {
+export interface DotLineProps extends ComponentProps<"span"> {
   num?: number;
   width?: number | string;
   inline?: boolean;

package/packages/ui/src/Equation.tsx

@@ -5,11 +5,12 @@ import { ComponentProps } from "preact";
 import styles from "./Equation.module.css";
 import { joinClasses } from "./utils";
 
-interface EquationProps extends Omit<ComponentProps<"span">, "children"> {
+export interface EquationProps extends Omit<ComponentProps<"span">, "children"> {
   tex: string;
   displayMode?: boolean;
   aligned?: boolean;
   chemical?: boolean;
+  numberFormat?: boolean;
 }
 export function Equation({
   tex,
@@ -17,15 +18,16 @@ export function Equation({
   className = "",
   aligned = false,
   chemical = false,
+  numberFormat = true,
   ...props
 }: EquationProps) {
+  const numberFormated = numberFormat ? formatNumber(tex) : tex;
   const alignedCode = aligned
     ? `\\begin{aligned}
-${tex}
+${numberFormated}
 \\end{aligned}`
-    : tex;
+    : numberFormated;
   const chemCode = chemical ? `\\ce{${alignedCode}}` : alignedCode;
-
   return (
     <span
       dangerouslySetInnerHTML={{
@@ -36,3 +38,50 @@ ${tex}
     />
   );
 }
+
+export interface SymbolProps {
+  children?: string;
+}
+
+export function symbolFactory(
+  fn: (txt?: string, children?: string) => string | undefined,
+  txt?: string,
+  init?: string,
+) {
+  return function ({ children = init }: SymbolProps) {
+    return <Equation tex={fn(txt, children) ?? ""} />;
+  };
+}
+
+export function underscriptFactory(txt: string, init?: string) {
+  return symbolFactory(
+    (txt, children) => (children ? `${txt}_{${children}}` : `${txt}`),
+    txt,
+    init,
+  );
+}
+
+export function functionFactory(txt: string, init: string = "x") {
+  return symbolFactory(
+    (txt, children) => (children ? `${txt}(${children})` : `${txt}`),
+    txt,
+    init,
+  );
+}
+
+function formatNumber(tex: string | undefined) {
+  if (!tex) return "";
+  return tex.replace(/\d+(?:\.\d+)?/g, (match) => {
+    const [intPart, decPart] = match.split(".");
+    const formattedInt = intPart.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1\\,");
+    if (decPart === undefined) return formattedInt;
+    const formattedDec = decPart.replace(/(\d{3})(?=\d)/g, "$1\\,");
+    return `${formattedInt},${formattedDec}\\:`;
+  });
+}
+
+export function LtX(props: SymbolProps) {
+  return symbolFactory((_, children) => {
+    return formatNumber(children);
+  })(props);
+}

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

@@ -1,5 +1,5 @@
 .ol {
-  & > .li {
+  .li {
     counter-increment: list-items;
     &::before {
       content: var(--ol-marker-pre, "") counter(list-items, decimal)

package/packages/ui/src/List.tsx

@@ -9,24 +9,24 @@ export type CounterType =
   | "lower-roman"
   | "upper-roman";
 
-interface ListItemProps extends ComponentProps<"div"> {
+export interface ListItemProps extends ComponentProps<"div"> {
   count?: number;
   marker?: string;
 }
 
-interface ListProps extends ComponentProps<"div"> {
+export interface ListProps extends ComponentProps<"div"> {
   pre?: ComponentChildren;
   gap?: string | number;
 }
 
-interface OLProps extends ListProps {
+export interface OLProps extends ListProps {
   start?: number;
   counterType?: CounterType;
   markerPre?: string;
   markerPost?: string;
 }
 
-interface ULProps extends ListProps {
+export interface ULProps extends ListProps {
   marker?: string;
 }
 

package/packages/ui/src/Page.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps } from "preact";
 import styles from "./Page.module.css";
 import { joinClasses, mergeStyle } from "./utils";
-interface PageProps {
+export interface PageProps {
   page?: string;
 }
 

package/packages/ui/src/Stack.tsx

@@ -2,7 +2,7 @@ import { ComponentProps } from "preact";
 import styles from "./Stack.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-interface StackProps extends ComponentProps<"div"> {
+export interface StackProps extends ComponentProps<"div"> {
   gap?: number | string;
   align?: "left" | "right";
 }

package/packages/ui/src/Table.tsx

@@ -22,7 +22,7 @@ export function Entry(_props: TableEntryProps): null {
   return null;
 }
 
-interface TableProps extends ComponentProps<"table"> {
+export interface TableProps extends ComponentProps<"table"> {
   orientation?: "col" | "row";
   contentClass?: string;
   headerClass?: string;

package/packages/ui/src/Titles.tsx

@@ -2,9 +2,9 @@ import { ComponentProps, ComponentType } from "preact";
 import styles from "./Title.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-type Htype = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type Htype = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
-type Hprops<h extends Htype> = ComponentProps<h> & {
+export type Hprops<h extends Htype> = ComponentProps<h> & {
   marker?: string;
   color?: string;
   fontSize?: string;
@@ -73,7 +73,7 @@ export function H6({ className = "", marker, color, fontSize, style, ...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 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>)} />;

package/packages/ui/src/index.ts

@@ -1,10 +1,24 @@
 export { Block, BlockBox } from "./BlockBox";
+export type { BlockBoxProps, BlockProps } from "./BlockBox";
 export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock";
 export { DotLine } from "./DotLine";
-export { Equation } from "./Equation";
+export type { DotLineProps } from "./DotLine";
+export {
+    Equation,
+    functionFactory, LtX, symbolFactory,
+    underscriptFactory
+} from "./Equation";
+export type { EquationProps, SymbolProps } from "./Equation";
 export { LI, OL, UL } from "./List";
+export type { CounterType, ListItemProps, ListProps, OLProps, ULProps } from "./List";
 export { Page, PageBreak } from "./Page";
+export type { PageProps } from "./Page";
 export { Stack } from "./Stack";
+export type { StackProps } from "./Stack";
 export { Entry, Table } from "./Table";
+export type { TableEntryProps, TableProps } from "./Table";
 export { H1, H2, H3, H4, H5, H6, ResetCounter, Title } from "./Titles";
+export type { Hprops, Htype, TitleProps } from "./Titles";
+export * from "./utils";
 

package/src/index.tsx

@@ -82,11 +82,9 @@ export default function Document() {
             </UL>
           </div>
           <div className="w-1/2">
-            <H3 color="#1e40af">
-              Quick start
-            </H3>
+            <H3 color="#1e40af">Quick start</H3>
             <OL>
-              <LI>bunx create-weasyprint-tsx my-doc</LI>
+              <LI>bunx @weasyprint-tsx/create my-doc</LI>
               <LI>cd my-doc &amp;&amp; bun install</LI>
               <LI>bun run dev</LI>
             </OL>

package/testUI/index.tsx

@@ -1,6 +1,8 @@
-import { Stack } from "@weasyprint-tsx/ui";
+import { Eq, Equation, functionFactory } from "@weasyprint-tsx/ui";
 import "./index.css";
 
+const S = functionFactory("S" , "x")
+
 export default function Document() {
   return (
     <html>
@@ -10,10 +12,10 @@ export default function Document() {
         <link rel="stylesheet" href="index.css" />
       </head>
       <body>
-        <Stack gap={"1cm"} className="border-2 border-solid h-125 py-5">
-          <div className="bg-green-800 size-50"></div>
-          <div className="bg-blue-800 size-50"></div>
-        </Stack>
+        <Equation tex="C_m = 50000.0000000000000000001 g/L"></Equation>
+        <Eq>151545312313513.13543545345343 a151515131 .13513513</Eq>
+        <S/>
+        <S>g</S>
       </body>
     </html>
   );