fleuron-react 0.1.0

package/README.md

@@ -0,0 +1,28 @@
+# fleuron-react
+
+The [fleuron](https://fleuron.typeworks.dev/) preview, as a
+React component.
+
+```sh
+npm install fleuron-react fleuron react
+```
+
+```jsx
+import { Preview } from 'fleuron-react';
+
+<Preview markdown={markdown} css={css} page={page} zoom={1.5} />;
+```
+
+The manuscript and the stylesheet are props, so a keystroke is a
+re-render and the engine is handed the one input that changed. A
+render the reader has already typed past paints nothing.
+
+`onMount` hands back the preview itself, for the page count, the
+warnings and the PDF export.
+
+There is no engine logic in here. This package hands `fleuron`'s
+`Preview` an element and passes props along to it. React stays out of
+the binding package, and deleting this one leaves a preview a plain
+page can still mount.
+
+MIT or Apache-2.0.

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The fleuron preview, as a React component.
+ *
+ * There is no engine logic in here and there is not meant to be:
+ * everything this file knows how to do is hand `fleuron`'s
+ * `Preview` an element and pass props along to it. React stays out
+ * of the binding package for the same reason, that a host which does
+ * not use it should not download it, and a host that deletes this one
+ * still has a preview a plain page can mount.
+ */
+import { Preview as Mounted, type PreviewOptions } from 'fleuron';
+import { type CSSProperties } from 'react';
+/** What the component takes, over what a preview takes. */
+export interface PreviewProps extends PreviewOptions {
+    /** The manuscript, as markdown. */
+    markdown?: string;
+    /** The author stylesheet, as CSS text. */
+    css?: string;
+    /** What the manuscript is called, which is what an edit replaces. */
+    name?: string;
+    /** The page to show, counting from 1. */
+    page?: number;
+    /** Points to CSS pixels. */
+    zoom?: number;
+    /**
+     * The images the manuscript refers to, by the url it names them
+     * by. One that arrives after the book does is registered when it
+     * arrives, and the pages are laid out again around it.
+     */
+    images?: Record<string, Uint8Array>;
+    /** Passed to the element the preview mounts into. */
+    className?: string;
+    /** The same. */
+    style?: CSSProperties;
+    /** The preview itself, once it is mounted. */
+    onMount?: (preview: Mounted) => void;
+}
+/**
+ * A book on screen. The manuscript and the stylesheet are props, so
+ * a keystroke is a re-render and the engine is handed the one input
+ * that changed.
+ */
+export declare function Preview(props: PreviewProps): React.ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAA+B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAExE,2DAA2D;AAC3D,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACpC,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB;IAChB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,YAAY,CA6D/D"}

package/dist/index.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The fleuron preview, as a React component.
+ *
+ * There is no engine logic in here and there is not meant to be:
+ * everything this file knows how to do is hand `fleuron`'s
+ * `Preview` an element and pass props along to it. React stays out
+ * of the binding package for the same reason, that a host which does
+ * not use it should not download it, and a host that deletes this one
+ * still has a preview a plain page can mount.
+ */
+import { Preview as Mounted } from 'fleuron';
+import { useEffect, useRef, useState } from 'react';
+/**
+ * A book on screen. The manuscript and the stylesheet are props, so
+ * a keystroke is a re-render and the engine is handed the one input
+ * that changed.
+ */
+export function Preview(props) {
+    const { markdown, css, name, page, zoom, images, className, style, onMount, ...options } = props;
+    const element = useRef(null);
+    const [preview, setPreview] = useState(null);
+    // Mounted once. The options a preview is opened with are fixed for
+    // its life; everything that can change afterwards is a prop below.
+    useEffect(() => {
+        let wanted = true;
+        let opened = null;
+        void Mounted.mount(element.current, options).then((mounted) => {
+            opened = mounted;
+            if (!wanted) {
+                mounted.destroy();
+                return;
+            }
+            setPreview(mounted);
+            onMount?.(mounted);
+        });
+        return () => {
+            wanted = false;
+            opened?.destroy();
+        };
+    }, []);
+    useEffect(() => {
+        if (preview !== null && css !== undefined) {
+            void preview.setStyle(css);
+        }
+    }, [preview, css]);
+    useEffect(() => {
+        if (preview !== null && markdown !== undefined) {
+            void preview.setMarkdown(markdown, name);
+        }
+    }, [preview, markdown, name]);
+    useEffect(() => {
+        if (preview !== null && page !== undefined) {
+            preview.page = page;
+        }
+    }, [preview, page]);
+    useEffect(() => {
+        if (preview !== null && zoom !== undefined) {
+            preview.zoom = zoom;
+        }
+    }, [preview, zoom]);
+    // Images are registered rather than passed at mount, so one that
+    // arrives after the manuscript still reaches the page. A url the
+    // session already holds costs no layout.
+    useEffect(() => {
+        if (preview !== null && images !== undefined) {
+            for (const [url, bytes] of Object.entries(images)) {
+                void preview.addImage(url, bytes);
+            }
+        }
+    }, [preview, images]);
+    return _jsx("div", { ref: element, className: className, style: style });
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAuB,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAsB,MAAM,OAAO,CAAC;AA4BxE;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC;IACjG,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAE7D,mEAAmE;IACnE,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,GAAG,IAAI,CAAC;QAClB,IAAI,MAAM,GAAmB,IAAI,CAAC;QAClC,KAAK,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,OAAkB,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;YACvE,MAAM,GAAG,OAAO,CAAC;YACjB,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,OAAO,CAAC,OAAO,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YACD,UAAU,CAAC,OAAO,CAAC,CAAC;YACpB,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,KAAK,CAAC;YACf,MAAM,EAAE,OAAO,EAAE,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YAC1C,KAAK,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IAEnB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC/C,KAAK,OAAO,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YAC3C,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YAC3C,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,iEAAiE;IACjE,iEAAiE;IACjE,yCAAyC;IACzC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;YAC7C,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;gBAClD,KAAK,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YACpC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtB,OAAO,cAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;AACnE,CAAC"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "fleuron-react",
+  "version": "0.1.0",
+  "description": "The fleuron preview as a React component, and nothing else",
+  "license": "MIT OR Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zachhannum/fleuron.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://fleuron.typeworks.dev/",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "npm run build && node test/wrapper.mjs"
+  },
+  "peerDependencies": {
+    "fleuron": "0.1.0",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "fleuron": "file:../../crates/fleuron-wasm/npm",
+    "@types/react": "^19.2.2",
+    "react": "^19.2.0",
+    "typescript": "^5.9.2"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}