@openpageflip/react 0.1.0 → 0.1.2

package/README.md

@@ -2,35 +2,61 @@
 
 React 19 bindings for [`@openpageflip/core`](https://www.npmjs.com/package/@openpageflip/core). Successor to [`react-pageflip`](https://www.npmjs.com/package/react-pageflip).
 
-Pre-1.0. The plan, decisions and status live in the [repository's SPEC.md](https://github.com/benhonda/openpageflip/blob/main/SPEC.md).
+Docs, live demos, the API reference and the changelog: <!-- homepage -->**[openpageflip.shittylittleapps.com](https://openpageflip.shittylittleapps.com)**<!-- /homepage -->
 
 ```sh
 bun add @openpageflip/core @openpageflip/react
 ```
 
+Every direct child of `FlipBook` is a page. `Page` marks the hard ones and styles the page element itself. `ref` is the core `Book`.
+
+<!-- example: apps/docs/src/examples/react/Quickstart.tsx -->
 ```tsx
 import "@openpageflip/core/styles.css";
-import { FlipBook, Page, type Book } from "@openpageflip/react";
+import { type Book, FlipBook, Page } from "@openpageflip/react";
 import { useRef } from "react";
 
-export function Album() {
+export default function Quickstart() {
   const book = useRef<Book>(null);
   return (
     <>
-      <button onClick={() => book.current?.flipNext()}>Next</button>
-      <FlipBook ref={book} width={400} height={600} size="stretch" cover onFlip={(e) => console.log(e.page)}>
-        <Page density="hard">Cover</Page>
-        <Page>One</Page>
-        <Photo src="two.jpg" /> {/* any child is a page; no refs needed */}
-        <Page density="hard">Back</Page>
+      <FlipBook ref={book} className="book" width={400} height={560} size="stretch" cover>
+        <Page density="hard" className="page page-cover">
+          <h2>OpenPageFlip</h2>
+          <p>A page-turn effect for React</p>
+        </Page>
+        <Page className="page">
+          <h3>Every child is a page</h3>
+          <p>Wrap one in Page to make it hard or to style the page element itself.</p>
+        </Page>
+        <Page className="page">
+          <h3>No refs on pages</h3>
+          <p>The book owns the page elements. Your components render inside them.</p>
+        </Page>
+        <Page className="page">
+          <h3>Props are options</h3>
+          <p>Change one and the book rebuilds on the same page. Children can change freely.</p>
+        </Page>
+        <Page className="page">
+          <h3>Renders on the server</h3>
+          <p>This page was server-rendered by the docs site, then hydrated.</p>
+        </Page>
+        <Page density="hard" className="page page-cover">
+          <p>The end</p>
+        </Page>
       </FlipBook>
+      <p className="controls">
+        <button type="button" onClick={() => book.current?.flipPrev()}>
+          Previous
+        </button>
+        <button type="button" onClick={() => book.current?.flipNext()}>
+          Next
+        </button>
+      </p>
     </>
   );
 }
 ```
+<!-- /example -->
 
-- Every direct child is a page. Use `Page` to mark hard pages or to put a class or style on the page element itself.
-- `ref` gives you the core `Book` (`flipNext`, `flipTo`, `page`, `on`, ...).
-- `page` makes the book controlled: change it and the book flips there. `onFlip` reports the first page of the spread that landed.
-- Options are props. Changing one rebuilds the book on the same page. Children can change freely.
-- Requires React 19. The component is a client component and ships with `"use client"`; it renders on the server.
+The code above is the docs site's own example and runs in its test suite. Pre-1.0: the plan, decisions and status live in the repository's [SPEC.md](https://github.com/benhonda/openpageflip/blob/main/SPEC.md).

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import { Book, Book as Book$1, BookEvents, BookEvents as BookEvents$1, BookOptio
 import { CSSProperties, HTMLAttributes, ReactElement, ReactNode, Ref } from "react";
 //#region src/FlipBook.d.ts
 /** `onFlip`, `onChangeState`, ... one prop per core event, typed from the core's event map. */
-type EventProps = { [K in keyof BookEvents$1 as `on${Capitalize<K>}`]?: (event: BookEvents$1[K]) => void; };
-type FlipBookProps = Omit<BookOptions$1, "pages"> & EventProps & {
+type FlipBookEventProps = { [K in keyof BookEvents$1 as `on${Capitalize<K>}`]?: (event: BookEvents$1[K]) => void; };
+type FlipBookProps = Omit<BookOptions$1, "pages"> & FlipBookEventProps & {
   /** The book's API, available from the moment the component mounts. */
   ref?: Ref<Book$1>;
   /** Each child is a page. Use `Page` to mark hard pages or style the page element. */
@@ -27,5 +27,5 @@ type PageProps = HTMLAttributes<HTMLDivElement> & {
  */
 declare function Page({ density, children, ...rest }: PageProps): ReactElement;
 //#endregion
-export { type Book, type BookEvents, type BookOptions, type BookRect, FlipBook, type FlipBookProps, type FlipCorner, type FlipState, type Layout, type Orientation, Page, type PageDensity, type PageProps };
+export { type Book, type BookEvents, type BookOptions, type BookRect, FlipBook, type FlipBookEventProps, type FlipBookProps, type FlipCorner, type FlipState, type Layout, type Orientation, Page, type PageDensity, type PageProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -93,7 +93,7 @@ function FlipBook({ ref, children, page, className, style, onInit, onUpdate, onF
 		if (book === null || el === null) return;
 		const pages = collectPages(el);
 		if (sameElements(pages, pagesRef.current)) {
-			book.update();
+			book.redraw();
 			return;
 		}
 		pagesRef.current = pages;
@@ -144,10 +144,17 @@ function handleFor(bookRef) {
 		turnPrev: () => live().turnPrev(),
 		setPages: (pages) => live().setPages(pages),
 		update: () => live().update(),
+		redraw: () => live().redraw(),
 		destroy: () => live().destroy()
 	};
 }
 //#endregion
+//#region src/index.ts
+/**
+* React 19 bindings: `FlipBook`, `Page`, and the core types they use.
+* @module @openpageflip/react
+*/
+//#endregion
 export { FlipBook, Page };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/Page.tsx","../src/FlipBook.tsx"],"sourcesContent":["import type { PageDensity } from \"@openpageflip/core\";\nimport type { HTMLAttributes, ReactElement, ReactNode } from \"react\";\n\nexport type PageProps = HTMLAttributes<HTMLDivElement> & {\n  /** `hard` pages turn as a rigid sheet. @default \"soft\" */\n  density?: PageDensity;\n  children?: ReactNode;\n};\n\n/**\n * One page of a `FlipBook`. Any child of `FlipBook` becomes a page; `Page` is the way to say\n * which are hard and to put a class or style on the page element itself.\n */\nexport function Page({ density, children, ...rest }: PageProps): ReactElement {\n  return (\n    <div data-density={density} {...rest}>\n      {children}\n    </div>\n  );\n}\n","\"use client\";\n\nimport {\n  type Book,\n  type BookEvents,\n  type BookOptions,\n  createBook,\n  FlipCorner,\n} from \"@openpageflip/core\";\nimport {\n  Children,\n  type CSSProperties,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport { Page, type PageProps } from \"./Page.tsx\";\n\n/** `onFlip`, `onChangeState`, ... one prop per core event, typed from the core's event map. */\ntype EventProps = {\n  [K in keyof BookEvents as `on${Capitalize<K>}`]?: (event: BookEvents[K]) => void;\n};\n\nexport type FlipBookProps = Omit<BookOptions, \"pages\"> &\n  EventProps & {\n    /** The book's API, available from the moment the component mounts. */\n    ref?: Ref<Book>;\n    /** Each child is a page. Use `Page` to mark hard pages or style the page element. */\n    children: ReactNode;\n    /** Controlled page: when it changes, the book flips there. Pair with `onFlip`. */\n    page?: number;\n    className?: string;\n    style?: CSSProperties;\n  };\n\nconst PAGE_ATTR = \"data-opf-page\";\n\n/** Page elements rendered by this component, in order, skipping the core's transient clone. */\nfunction collectPages(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(`:scope > [${PAGE_ATTR}]:not([data-opf-clone])`),\n  );\n}\n\nfunction sameElements(a: readonly HTMLElement[], b: readonly HTMLElement[]): boolean {\n  return a.length === b.length && a.every((el, i) => el === b[i]);\n}\n\nfunction renderPage(child: ReactNode): ReactElement | null {\n  if (child === null || child === undefined || typeof child === \"boolean\") return null;\n  if (isValidElement<PageProps>(child) && child.type === Page) {\n    const { density, children, ...rest } = child.props;\n    return (\n      <div {...rest} {...{ [PAGE_ATTR]: \"\" }} data-density={density}>\n        {children}\n      </div>\n    );\n  }\n  return <div {...{ [PAGE_ATTR]: \"\" }}>{child}</div>;\n}\n\nexport function FlipBook({\n  ref,\n  children,\n  page,\n  className,\n  style,\n  onInit,\n  onUpdate,\n  onFlip,\n  onChangeState,\n  onChangeOrientation,\n  ...options\n}: FlipBookProps): ReactElement {\n  const container = useRef<HTMLDivElement>(null);\n  const bookRef = useRef<Book | null>(null);\n  const pagesRef = useRef<HTMLElement[]>([]);\n\n  // Callbacks and the easing function are read live, so new closures each render do not rebuild the book.\n  const latest = useRef({\n    onInit,\n    onUpdate,\n    onFlip,\n    onChangeState,\n    onChangeOrientation,\n    easing: options.easing,\n  });\n  useLayoutEffect(() => {\n    latest.current = {\n      onInit,\n      onUpdate,\n      onFlip,\n      onChangeState,\n      onChangeOrientation,\n      easing: options.easing,\n    };\n  });\n\n  // Everything else about the book is fixed at creation, so a change means a new book.\n  const { easing: _easing, startPage, ...settings } = options;\n  const settingsKey = JSON.stringify(settings);\n  const initialPage = page ?? startPage;\n\n  // `initialPage` only seeds a new book; the controlled `page` effect below handles changes.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: settingsKey is the serialised settings\n  useLayoutEffect(() => {\n    const el = container.current;\n    if (el === null) return;\n    const pages = collectPages(el);\n    pagesRef.current = pages;\n    // `settings` is the value from the render that changed `settingsKey`, so it is current here.\n    const book = createBook(el, {\n      ...settings,\n      easing: (t) => latest.current.easing?.(t) ?? t,\n      pages,\n      // Keep the page a previous book was on when only settings changed.\n      startPage: Math.min(bookRef.current?.page ?? initialPage ?? 0, pages.length - 1),\n    });\n    book.on(\"init\", (e) => latest.current.onInit?.(e));\n    book.on(\"update\", (e) => latest.current.onUpdate?.(e));\n    book.on(\"flip\", (e) => latest.current.onFlip?.(e));\n    book.on(\"changeState\", (e) => latest.current.onChangeState?.(e));\n    book.on(\"changeOrientation\", (e) => latest.current.onChangeOrientation?.(e));\n    bookRef.current = book;\n    return () => {\n      book.destroy();\n      bookRef.current = null;\n    };\n  }, [settingsKey]);\n\n  // After every commit: adopt added or removed pages, and re-apply the book's own classes and\n  // layout in case React rewrote a page's attributes.\n  useLayoutEffect(() => {\n    const book = bookRef.current;\n    const el = container.current;\n    if (book === null || el === null) return;\n    const pages = collectPages(el);\n    if (sameElements(pages, pagesRef.current)) {\n      book.update();\n      return;\n    }\n    pagesRef.current = pages;\n    book.setPages(pages);\n  });\n\n  useEffect(() => {\n    const book = bookRef.current;\n    if (book === null || page === undefined || page === book.page) return;\n    void book.flipTo(page);\n  }, [page]);\n\n  useImperativeHandle(ref, () => handleFor(bookRef), []);\n\n  return (\n    <div ref={container} className={className} style={style}>\n      {Children.map(children, renderPage)}\n    </div>\n  );\n}\n\n/** A `Book` that always talks to the current instance and says so when there is none. */\nfunction handleFor(bookRef: { current: Book | null }): Book {\n  const live = (): Book => {\n    if (bookRef.current === null) throw new Error(\"@openpageflip/react: FlipBook is not mounted\");\n    return bookRef.current;\n  };\n  return {\n    get page() {\n      return live().page;\n    },\n    get pageCount() {\n      return live().pageCount;\n    },\n    get orientation() {\n      return live().orientation;\n    },\n    get state() {\n      return live().state;\n    },\n    get rect() {\n      return live().rect;\n    },\n    on: (name, listener, options) => live().on(name, listener, options),\n    off: (name, listener) => live().off(name, listener),\n    flipNext: (corner = FlipCorner.top) => live().flipNext(corner),\n    flipPrev: (corner = FlipCorner.top) => live().flipPrev(corner),\n    flipTo: (page, corner = FlipCorner.top) => live().flipTo(page, corner),\n    turnTo: (page) => live().turnTo(page),\n    turnNext: () => live().turnNext(),\n    turnPrev: () => live().turnPrev(),\n    setPages: (pages) => live().setPages(pages),\n    update: () => live().update(),\n    destroy: () => live().destroy(),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/Page.tsx","../src/FlipBook.tsx","../src/index.ts"],"sourcesContent":["import type { PageDensity } from \"@openpageflip/core\";\nimport type { HTMLAttributes, ReactElement, ReactNode } from \"react\";\n\nexport type PageProps = HTMLAttributes<HTMLDivElement> & {\n  /** `hard` pages turn as a rigid sheet. @default \"soft\" */\n  density?: PageDensity;\n  children?: ReactNode;\n};\n\n/**\n * One page of a `FlipBook`. Any child of `FlipBook` becomes a page; `Page` is the way to say\n * which are hard and to put a class or style on the page element itself.\n */\nexport function Page({ density, children, ...rest }: PageProps): ReactElement {\n  return (\n    <div data-density={density} {...rest}>\n      {children}\n    </div>\n  );\n}\n","\"use client\";\n\nimport {\n  type Book,\n  type BookEvents,\n  type BookOptions,\n  createBook,\n  FlipCorner,\n} from \"@openpageflip/core\";\nimport {\n  Children,\n  type CSSProperties,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport { Page, type PageProps } from \"./Page.tsx\";\n\n/** `onFlip`, `onChangeState`, ... one prop per core event, typed from the core's event map. */\nexport type FlipBookEventProps = {\n  [K in keyof BookEvents as `on${Capitalize<K>}`]?: (event: BookEvents[K]) => void;\n};\n\nexport type FlipBookProps = Omit<BookOptions, \"pages\"> &\n  FlipBookEventProps & {\n    /** The book's API, available from the moment the component mounts. */\n    ref?: Ref<Book>;\n    /** Each child is a page. Use `Page` to mark hard pages or style the page element. */\n    children: ReactNode;\n    /** Controlled page: when it changes, the book flips there. Pair with `onFlip`. */\n    page?: number;\n    className?: string;\n    style?: CSSProperties;\n  };\n\nconst PAGE_ATTR = \"data-opf-page\";\n\n/** Page elements rendered by this component, in order, skipping the core's transient clone. */\nfunction collectPages(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(`:scope > [${PAGE_ATTR}]:not([data-opf-clone])`),\n  );\n}\n\nfunction sameElements(a: readonly HTMLElement[], b: readonly HTMLElement[]): boolean {\n  return a.length === b.length && a.every((el, i) => el === b[i]);\n}\n\nfunction renderPage(child: ReactNode): ReactElement | null {\n  if (child === null || child === undefined || typeof child === \"boolean\") return null;\n  if (isValidElement<PageProps>(child) && child.type === Page) {\n    const { density, children, ...rest } = child.props;\n    return (\n      <div {...rest} {...{ [PAGE_ATTR]: \"\" }} data-density={density}>\n        {children}\n      </div>\n    );\n  }\n  return <div {...{ [PAGE_ATTR]: \"\" }}>{child}</div>;\n}\n\nexport function FlipBook({\n  ref,\n  children,\n  page,\n  className,\n  style,\n  onInit,\n  onUpdate,\n  onFlip,\n  onChangeState,\n  onChangeOrientation,\n  ...options\n}: FlipBookProps): ReactElement {\n  const container = useRef<HTMLDivElement>(null);\n  const bookRef = useRef<Book | null>(null);\n  const pagesRef = useRef<HTMLElement[]>([]);\n\n  // Callbacks and the easing function are read live, so new closures each render do not rebuild the book.\n  const latest = useRef({\n    onInit,\n    onUpdate,\n    onFlip,\n    onChangeState,\n    onChangeOrientation,\n    easing: options.easing,\n  });\n  useLayoutEffect(() => {\n    latest.current = {\n      onInit,\n      onUpdate,\n      onFlip,\n      onChangeState,\n      onChangeOrientation,\n      easing: options.easing,\n    };\n  });\n\n  // Everything else about the book is fixed at creation, so a change means a new book.\n  const { easing: _easing, startPage, ...settings } = options;\n  const settingsKey = JSON.stringify(settings);\n  const initialPage = page ?? startPage;\n\n  // `initialPage` only seeds a new book; the controlled `page` effect below handles changes.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: settingsKey is the serialised settings\n  useLayoutEffect(() => {\n    const el = container.current;\n    if (el === null) return;\n    const pages = collectPages(el);\n    pagesRef.current = pages;\n    // `settings` is the value from the render that changed `settingsKey`, so it is current here.\n    const book = createBook(el, {\n      ...settings,\n      easing: (t) => latest.current.easing?.(t) ?? t,\n      pages,\n      // Keep the page a previous book was on when only settings changed.\n      startPage: Math.min(bookRef.current?.page ?? initialPage ?? 0, pages.length - 1),\n    });\n    book.on(\"init\", (e) => latest.current.onInit?.(e));\n    book.on(\"update\", (e) => latest.current.onUpdate?.(e));\n    book.on(\"flip\", (e) => latest.current.onFlip?.(e));\n    book.on(\"changeState\", (e) => latest.current.onChangeState?.(e));\n    book.on(\"changeOrientation\", (e) => latest.current.onChangeOrientation?.(e));\n    bookRef.current = book;\n    return () => {\n      book.destroy();\n      bookRef.current = null;\n    };\n  }, [settingsKey]);\n\n  // After every commit: adopt added or removed pages, and re-apply the book's own classes and\n  // layout in case React rewrote a page's attributes.\n  useLayoutEffect(() => {\n    const book = bookRef.current;\n    const el = container.current;\n    if (book === null || el === null) return;\n    const pages = collectPages(el);\n    if (sameElements(pages, pagesRef.current)) {\n      book.redraw();\n      return;\n    }\n    pagesRef.current = pages;\n    book.setPages(pages);\n  });\n\n  useEffect(() => {\n    const book = bookRef.current;\n    if (book === null || page === undefined || page === book.page) return;\n    void book.flipTo(page);\n  }, [page]);\n\n  useImperativeHandle(ref, () => handleFor(bookRef), []);\n\n  return (\n    <div ref={container} className={className} style={style}>\n      {Children.map(children, renderPage)}\n    </div>\n  );\n}\n\n/** A `Book` that always talks to the current instance and says so when there is none. */\nfunction handleFor(bookRef: { current: Book | null }): Book {\n  const live = (): Book => {\n    if (bookRef.current === null) throw new Error(\"@openpageflip/react: FlipBook is not mounted\");\n    return bookRef.current;\n  };\n  return {\n    get page() {\n      return live().page;\n    },\n    get pageCount() {\n      return live().pageCount;\n    },\n    get orientation() {\n      return live().orientation;\n    },\n    get state() {\n      return live().state;\n    },\n    get rect() {\n      return live().rect;\n    },\n    on: (name, listener, options) => live().on(name, listener, options),\n    off: (name, listener) => live().off(name, listener),\n    flipNext: (corner = FlipCorner.top) => live().flipNext(corner),\n    flipPrev: (corner = FlipCorner.top) => live().flipPrev(corner),\n    flipTo: (page, corner = FlipCorner.top) => live().flipTo(page, corner),\n    turnTo: (page) => live().turnTo(page),\n    turnNext: () => live().turnNext(),\n    turnPrev: () => live().turnPrev(),\n    setPages: (pages) => live().setPages(pages),\n    update: () => live().update(),\n    redraw: () => live().redraw(),\n    destroy: () => live().destroy(),\n  };\n}\n","/**\n * React 19 bindings: `FlipBook`, `Page`, and the core types they use.\n * @module @openpageflip/react\n */\n\"use client\";\n\nexport type {\n  Book,\n  BookEvents,\n  BookOptions,\n  BookRect,\n  FlipCorner,\n  FlipState,\n  Layout,\n  Orientation,\n  PageDensity,\n} from \"@openpageflip/core\";\nexport { FlipBook, type FlipBookEventProps, type FlipBookProps } from \"./FlipBook.tsx\";\nexport { Page, type PageProps } from \"./Page.tsx\";\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpageflip/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "React 19 bindings for @openpageflip/core. Successor to react-pageflip.",
   "license": "MIT",
   "type": "module",
@@ -10,7 +10,7 @@
     "url": "git+https://github.com/benhonda/openpageflip.git",
     "directory": "packages/react"
   },
-  "homepage": "https://github.com/benhonda/openpageflip#readme",
+  "homepage": "https://openpageflip.shittylittleapps.com",
   "bugs": "https://github.com/benhonda/openpageflip/issues",
   "keywords": [
     "react",
@@ -27,7 +27,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@openpageflip/core": "^0.0.1",
+    "@openpageflip/core": "^0.2.1",
     "react": "^19.2.8"
   },
   "devDependencies": {