@vivliostyle/react/dist/react-vivliostyle.modern.mjs.map

React component for Vivliostyle

{"version":3,"file":"react-vivliostyle.modern.mjs","sources":["../src/renderer.tsx","../src/epage.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n  CoreViewer,\n  Navigation,\n  PageViewMode,\n  Payload,\n  ReadyState,\n} from \"@vivliostyle/core\";\nimport React, { useEffect, useRef } from \"react\";\nimport { epageFromPageNumber } from \"./epage\";\n\nexport type MessageType = \"debug\" | \"info\" | \"warn\";\nexport type NavigationPayload = Omit<Payload, \"internal\" | \"href\" | \"content\">;\nexport type HyperlinkPayload = Pick<Payload, \"internal\" | \"href\">;\n\ninterface VolatileState {\n  docTitle: string;\n  epage: number;\n  epageCount: number;\n  metadata: unknown;\n}\n\ntype ChildrenFunction = ({\n  container,\n  reload,\n}: {\n  container: JSX.Element;\n  reload: () => void;\n}) => React.ReactNode;\n\ninterface RendererProps {\n  source: string;\n  page?: number;\n  zoom?: number;\n  bookMode?: boolean;\n  renderAllPages?: boolean;\n  autoResize?: boolean;\n  pageViewMode?: PageViewMode;\n  defaultPaperSize?: {\n    width: number;\n    height: number;\n  };\n  pageBorderWidth?: number;\n  fitToScreen?: boolean;\n  fontSize?: number;\n  background?: string;\n  userStyleSheet?: string;\n  authorStyleSheet?: string;\n  style?: React.CSSProperties;\n  onMessage?: (message: string, type: MessageType) => void;\n  onError?: (error: string) => void;\n  onReadyStateChange?: (state: ReadyState) => void;\n  onLoad?: (state: VolatileState) => void;\n  onNavigation?: (state: VolatileState) => void;\n  onHyperlink?: (payload: HyperlinkPayload) => void;\n  children?: React.ReactNode | ChildrenFunction;\n}\n\nexport const Renderer = ({\n  source,\n  page = 1,\n  zoom = 1,\n  bookMode = true,\n  fontSize = 16,\n  background = \"#ececec\",\n  renderAllPages = true,\n  autoResize = true,\n  pageViewMode = PageViewMode.SINGLE_PAGE,\n  defaultPaperSize,\n  pageBorderWidth = 1,\n  fitToScreen = false,\n  userStyleSheet,\n  authorStyleSheet,\n  style,\n  onMessage,\n  onError,\n  onReadyStateChange,\n  onLoad,\n  onNavigation,\n  onHyperlink,\n  children,\n}: RendererProps): ReturnType<ChildrenFunction> | JSX.Element => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const instanceRef = useRef<CoreViewer>();\n  const stateRef = React.useRef<VolatileState>();\n\n  function setViewerOptions() {\n    const viewerOptions = {\n      fontSize,\n      pageViewMode,\n      renderAllPages,\n      autoResize,\n      defaultPaperSize,\n      pageBorderWidth,\n    };\n    instanceRef.current!.setOptions(viewerOptions);\n  }\n\n  function loadSource() {\n    const instance = instanceRef.current!;\n    const documentOptions = {\n      ...(userStyleSheet\n        ? {\n            userStyleSheet: [\n              {\n                [userStyleSheet.endsWith(\".css\") ? \"url\" : \"text\"]:\n                  userStyleSheet,\n              },\n            ],\n          }\n        : null),\n      ...(authorStyleSheet\n        ? {\n            authorStyleSheet: [\n              {\n                [authorStyleSheet.endsWith(\".css\") ? \"url\" : \"text\"]:\n                  authorStyleSheet,\n              },\n            ],\n          }\n        : null),\n    };\n\n    if (bookMode) {\n      instance.loadPublication(source, documentOptions);\n    } else {\n      instance.loadDocument({ url: source }, documentOptions, {\n        fontSize,\n        pageViewMode,\n        zoom,\n        renderAllPages,\n        autoResize,\n        defaultPaperSize,\n        pageBorderWidth,\n        fitToScreen,\n      });\n    }\n  }\n\n  function registerEventHandlers() {\n    const getMessage = (payload: Payload) =>\n      payload.content.error?.toString() ?? payload.content.messages.join(\"\\n\");\n\n    function handleMessage(payload: Payload, type: MessageType) {\n      onMessage && onMessage(getMessage(payload), type);\n    }\n\n    const handleDebug = (payload: Payload) => handleMessage(payload, \"debug\");\n    const handleInfo = (payload: Payload) => handleMessage(payload, \"info\");\n    const handleWarn = (payload: Payload) => handleMessage(payload, \"warn\");\n\n    function handleError(payload: Payload) {\n      onError && onError(getMessage(payload));\n    }\n\n    function handleReadyStateChange() {\n      const { readyState } = instanceRef.current!;\n      onReadyStateChange && onReadyStateChange(readyState);\n    }\n\n    function handleLoaded() {\n      onLoad && onLoad(stateRef.current!);\n    }\n\n    function handleNavigation(payload: NavigationPayload) {\n      const { docTitle, epageCount, epage, metadata } = payload;\n      const currentState = {\n        docTitle,\n        epageCount,\n        epage: epage as number,\n        metadata,\n      };\n      stateRef.current = currentState;\n      onNavigation && onNavigation(currentState);\n    }\n\n    function handleHyperlink(payload: HyperlinkPayload) {\n      onHyperlink && onHyperlink(payload);\n    }\n\n    const instance = instanceRef.current!;\n    instance.addListener(\"debug\", handleDebug);\n    instance.addListener(\"info\", handleInfo);\n    instance.addListener(\"warn\", handleWarn);\n    instance.addListener(\"error\", handleError);\n    instance.addListener(\"readystatechange\", handleReadyStateChange);\n    instance.addListener(\"loaded\", handleLoaded);\n    instance.addListener(\"nav\", handleNavigation);\n    instance.addListener(\"hyperlink\", handleHyperlink);\n\n    return () => {\n      onReadyStateChange && onReadyStateChange(ReadyState.LOADING);\n      instance.removeListener(\"debug\", handleDebug);\n      instance.removeListener(\"info\", handleInfo);\n      instance.removeListener(\"warn\", handleWarn);\n      instance.removeListener(\"error\", handleError);\n      instance.removeListener(\"readystatechange\", handleReadyStateChange);\n      instance.removeListener(\"loaded\", handleLoaded);\n      instance.removeListener(\"nav\", handleNavigation);\n      instance.removeListener(\"hyperlink\", handleHyperlink);\n    };\n  }\n\n  function initInstance() {\n    instanceRef.current = new CoreViewer({\n      viewportElement: containerRef.current!,\n    });\n  }\n\n  // initialize document and event handlers\n  useEffect(() => {\n    initInstance();\n    setViewerOptions();\n\n    const cleanup = registerEventHandlers();\n    return cleanup;\n  }, []);\n\n  useEffect(() => {\n    loadSource();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [source, authorStyleSheet, userStyleSheet, zoom, fitToScreen]);\n\n  useEffect(() => {\n    setViewerOptions();\n  }, [\n    fontSize,\n    pageViewMode,\n    renderAllPages,\n    autoResize,\n    defaultPaperSize,\n    pageBorderWidth,\n  ]);\n\n  // sync location\n  useEffect(() => {\n    const epage = epageFromPageNumber(page);\n    instanceRef.current?.navigateToPage(Navigation.EPAGE, epage);\n  }, [page]);\n\n  const container = (\n    <Container ref={containerRef} style={style} background={background} />\n  );\n\n  if (typeof children === \"function\" && children instanceof Function) {\n    return children({ container, reload: loadSource });\n  }\n\n  return container;\n};\n\nconst Container = styled.div<Pick<RendererProps, \"background\">>`\n  overflow: scroll;\n  background: ${({ background }) => background} !important;\n`;\n","export function epageToPageNumber(epage: number): number {\n  return Math.round(epage + 1);\n}\n\nexport function epageFromPageNumber(pageNumber: number): number {\n  return pageNumber - 1;\n}\n"],"names":["Renderer","source","page","zoom","bookMode","fontSize","background","renderAllPages","autoResize","pageViewMode","PageViewMode","SINGLE_PAGE","defaultPaperSize","pageBorderWidth","fitToScreen","userStyleSheet","authorStyleSheet","style","onMessage","onError","onReadyStateChange","onLoad","onNavigation","onHyperlink","children","containerRef","useRef","instanceRef","stateRef","React","setViewerOptions","current","setOptions","loadSource","instance","documentOptions","_extends","endsWith","loadPublication","loadDocument","url","useEffect","CoreViewer","viewportElement","getMessage","payload","_payload$content$erro","_payload$content$erro2","content","error","toString","messages","join","handleMessage","type","handleDebug","handleInfo","handleWarn","handleError","handleReadyStateChange","readyState","handleLoaded","handleNavigation","docTitle","epageCount","epage","metadata","currentState","handleHyperlink","addListener","ReadyState","LOADING","removeListener","registerEventHandlers","_instanceRef$current","navigateToPage","Navigation","EPAGE","container","Container","ref","Function","reload","styled","div","_t"],"mappings":"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"}