@vivliostyle/react 2.21.0 → 2.22.0

package/dist/react-vivliostyle.js

@@ -1,2 +1,2 @@
-function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var n,r=e(require("@emotion/styled")),t=require("@vivliostyle/core"),o=require("react"),i=e(o);function a(){return(a=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}var u,d,c=r.div(n||(u=["\n  overflow: scroll;\n  background: "," !important;\n"],d||(d=u.slice(0)),u.raw=d,n=u),function(e){return e.background});exports.Renderer=function(e){var n=e.source,r=e.page,u=void 0===r?1:r,d=e.zoom,s=void 0===d?1:d,f=e.fontSize,l=void 0===f?16:f,v=e.background,g=void 0===v?"#ececec":v,p=e.renderAllPages,h=void 0===p||p,y=e.autoResize,L=void 0===y||y,S=e.pageViewMode,m=void 0===S?t.PageViewMode.SINGLE_PAGE:S,b=e.defaultPaperSize,w=e.pageBorderWidth,P=void 0===w?1:w,z=e.fitToScreen,E=void 0!==z&&z,R=e.userStyleSheet,k=e.authorStyleSheet,A=e.style,M=e.onMessage,O=e.onError,T=e.onReadyStateChange,W=e.onLoad,j=e.onNavigation,V=e.onHyperlink,C=e.children,G=o.useRef(null),N=o.useRef(),q=i.useRef();function x(){N.current.setOptions({fontSize:l,pageViewMode:m,renderAllPages:h,autoResize:L,defaultPaperSize:b,pageBorderWidth:P})}function B(){var e,r,t=N.current,o=n.endsWith(".json"),i=a({},R?{userStyleSheet:[(e={},e[R.endsWith(".css")?"url":"text"]=R,e)]}:null,k?{authorStyleSheet:[(r={},r[k.endsWith(".css")?"url":"text"]=k,r)]}:null);o?t.loadPublication(n,i):t.loadDocument({url:n},i,{fontSize:l,pageViewMode:m,zoom:s,renderAllPages:h,autoResize:L,defaultPaperSize:b,pageBorderWidth:P,fitToScreen:E})}o.useEffect(function(){return N.current=new t.CoreViewer({viewportElement:G.current}),x(),function(){function e(e,n){M&&M(e.content,n)}var n=function(n){return e(n,"debug")},r=function(n){return e(n,"info")},o=function(n){return e(n,"warn")};function i(e){O&&O(e.content)}function a(){T&&T(N.current.readyState)}function u(){W&&W(q.current)}function d(e){var n={docTitle:e.docTitle,epageCount:e.epageCount,epage:e.epage,metadata:e.metadata};q.current=n,j&&j(n)}function c(e){V&&V(e)}var s=N.current;return s.addListener("debug",n),s.addListener("info",r),s.addListener("warn",o),s.addListener("error",i),s.addListener("readystatechange",a),s.addListener("loaded",u),s.addListener("nav",d),s.addListener("hyperlink",c),function(){T&&T(t.ReadyState.LOADING),s.removeListener("debug",n),s.removeListener("info",r),s.removeListener("warn",o),s.removeListener("error",i),s.removeListener("readystatechange",a),s.removeListener("loaded",u),s.removeListener("nav",d),s.removeListener("hyperlink",c),G.current.innerHTML=""}}()},[]),o.useEffect(function(){B()},[n,k,R,s,E]),o.useEffect(function(){x()},[l,m,h,L,b,P]),o.useEffect(function(){var e;null===(e=N.current)||void 0===e||e.navigateToPage(t.Navigation.EPAGE,u-1)},[u]);var D=i.createElement(c,{ref:G,style:A,background:g});return"function"==typeof C&&C instanceof Function?C({container:D,reload:B}):D};
+function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var n,t=e(require("@emotion/styled")),r=require("@vivliostyle/core"),o=require("react"),i=e(o);function a(){return(a=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var u,d,c=t.div(n||(u=["\n  overflow: scroll;\n  background: "," !important;\n"],d||(d=u.slice(0)),u.raw=d,n=u),function(e){return e.background});exports.Renderer=function(e){var n=e.source,t=e.page,u=void 0===t?1:t,d=e.zoom,s=void 0===d?1:d,f=e.fontSize,l=void 0===f?16:f,v=e.background,g=void 0===v?"#ececec":v,p=e.renderAllPages,h=void 0===p||p,y=e.autoResize,S=void 0===y||y,L=e.pageViewMode,m=void 0===L?r.PageViewMode.SINGLE_PAGE:L,b=e.defaultPaperSize,w=e.pageBorderWidth,P=void 0===w?1:w,z=e.fitToScreen,E=void 0!==z&&z,R=e.userStyleSheet,k=e.authorStyleSheet,A=e.style,O=e.onMessage,W=e.onError,j=e.onReadyStateChange,M=e.onLoad,T=e.onNavigation,V=e.onHyperlink,C=e.children,G=o.useRef(null),N=o.useRef(),q=i.useRef();function x(){N.current.setOptions({fontSize:l,pageViewMode:m,renderAllPages:h,autoResize:S,defaultPaperSize:b,pageBorderWidth:P})}function B(){var e,t,r=N.current,o=n.endsWith(".json"),i=a({},R?{userStyleSheet:[(e={},e[R.endsWith(".css")?"url":"text"]=R,e)]}:null,k?{authorStyleSheet:[(t={},t[k.endsWith(".css")?"url":"text"]=k,t)]}:null);o?r.loadPublication(n,i):r.loadDocument({url:n},i,{fontSize:l,pageViewMode:m,zoom:s,renderAllPages:h,autoResize:S,defaultPaperSize:b,pageBorderWidth:P,fitToScreen:E})}o.useEffect(function(){return N.current=new r.CoreViewer({viewportElement:G.current}),x(),function(){function e(e,n){O&&O(e.content,n)}var n=function(n){return e(n,"debug")},t=function(n){return e(n,"info")},o=function(n){return e(n,"warn")};function i(e){W&&W(e.content)}function a(){j&&j(N.current.readyState)}function u(){M&&M(q.current)}function d(e){var n={docTitle:e.docTitle,epageCount:e.epageCount,epage:e.epage,metadata:e.metadata};q.current=n,T&&T(n)}function c(e){V&&V(e)}var s=N.current;return s.addListener("debug",n),s.addListener("info",t),s.addListener("warn",o),s.addListener("error",i),s.addListener("readystatechange",a),s.addListener("loaded",u),s.addListener("nav",d),s.addListener("hyperlink",c),function(){j&&j(r.ReadyState.LOADING),s.removeListener("debug",n),s.removeListener("info",t),s.removeListener("warn",o),s.removeListener("error",i),s.removeListener("readystatechange",a),s.removeListener("loaded",u),s.removeListener("nav",d),s.removeListener("hyperlink",c)}}()},[]),o.useEffect(function(){B()},[n,k,R,s,E]),o.useEffect(function(){x()},[l,m,h,S,b,P]),o.useEffect(function(){var e;null===(e=N.current)||void 0===e||e.navigateToPage(r.Navigation.EPAGE,u-1)},[u]);var D=i.createElement(c,{ref:G,style:A,background:g});return"function"==typeof C&&C instanceof Function?C({container:D,reload:B}):D};
 //# sourceMappingURL=react-vivliostyle.js.map

package/dist/react-vivliostyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-vivliostyle.js","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  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: React.FC<RendererProps> = ({\n  source,\n  page = 1,\n  zoom = 1,\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}) => {\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 isPublication = source.endsWith(\".json\");\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 (isPublication) {\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    function handleMessage(payload: Payload, type: MessageType) {\n      onMessage && onMessage(payload.content, 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(payload.content);\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      containerRef.current!.innerHTML = \"\";\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":["styled","div","background","source","page","zoom","fontSize","renderAllPages","autoResize","pageViewMode","PageViewMode","SINGLE_PAGE","defaultPaperSize","pageBorderWidth","fitToScreen","userStyleSheet","authorStyleSheet","style","onMessage","onError","onReadyStateChange","onLoad","onNavigation","onHyperlink","children","useRef","React","instanceRef","current","setOptions","endsWith","isPublication","instance","loadPublication","documentOptions","loadDocument","url","useEffect","viewportElement","containerRef","setViewerOptions","payload","type","content","readyState","stateRef","docTitle","epageCount","epage","metadata","currentState","addListener","handleDebug","handleInfo","handleWarn","handleError","handleReadyStateChange","handleLoaded","handleNavigation","handleHyperlink","ReadyState","LOADING","removeListener","innerHTML","registerEventHandlers","loadSource","navigateToPage","Navigation","EPAGE","Container","ref","container","reload"],"mappings":"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"}
+{"version":3,"file":"react-vivliostyle.js","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  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  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 isPublication = source.endsWith(\".json\");\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 (isPublication) {\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    function handleMessage(payload: Payload, type: MessageType) {\n      onMessage && onMessage(payload.content, 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(payload.content);\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":["styled","div","background","source","page","zoom","fontSize","renderAllPages","autoResize","pageViewMode","PageViewMode","SINGLE_PAGE","defaultPaperSize","pageBorderWidth","fitToScreen","userStyleSheet","authorStyleSheet","style","onMessage","onError","onReadyStateChange","onLoad","onNavigation","onHyperlink","children","useRef","React","instanceRef","current","setOptions","endsWith","isPublication","instance","loadPublication","documentOptions","loadDocument","url","useEffect","viewportElement","containerRef","setViewerOptions","payload","type","content","readyState","stateRef","docTitle","epageCount","epage","metadata","currentState","addListener","handleDebug","handleInfo","handleWarn","handleError","handleReadyStateChange","handleLoaded","handleNavigation","handleHyperlink","ReadyState","LOADING","removeListener","registerEventHandlers","loadSource","navigateToPage","Navigation","EPAGE","Container","ref","container","reload"],"mappings":"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"}

package/dist/react-vivliostyle.modern.js

@@ -1,2 +1,2 @@
-import e from"@emotion/styled";import{ReadyState as n,Navigation as r,PageViewMode as t,CoreViewer as o}from"@vivliostyle/core";import i,{useRef as a,useEffect as u}from"react";function d(){return(d=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}var c,s,l,f=function(e){var c=e.source,s=e.page,l=void 0===s?1:s,f=e.zoom,g=void 0===f?1:f,p=e.fontSize,m=void 0===p?16:p,h=e.background,L=void 0===h?"#ececec":h,y=e.renderAllPages,S=void 0===y||y,b=e.autoResize,w=void 0===b||b,z=e.pageViewMode,P=void 0===z?t.SINGLE_PAGE:z,k=e.defaultPaperSize,E=e.pageBorderWidth,A=void 0===E?1:E,O=e.fitToScreen,T=void 0!==O&&O,W=e.userStyleSheet,M=e.authorStyleSheet,R=e.style,j=e.onMessage,G=e.onError,x=e.onReadyStateChange,B=e.onLoad,C=e.onNavigation,N=e.onHyperlink,V=e.children,D=a(null),H=a(),I=i.useRef();function F(){H.current.setOptions({fontSize:m,pageViewMode:P,renderAllPages:S,autoResize:w,defaultPaperSize:k,pageBorderWidth:A})}function _(){var e,n,r=H.current,t=c.endsWith(".json"),o=d({},W?{userStyleSheet:[(e={},e[W.endsWith(".css")?"url":"text"]=W,e)]}:null,M?{authorStyleSheet:[(n={},n[M.endsWith(".css")?"url":"text"]=M,n)]}:null);t?r.loadPublication(c,o):r.loadDocument({url:c},o,{fontSize:m,pageViewMode:P,zoom:g,renderAllPages:S,autoResize:w,defaultPaperSize:k,pageBorderWidth:A,fitToScreen:T})}u(function(){return H.current=new o({viewportElement:D.current}),F(),function(){function e(e,n){j&&j(e.content,n)}var r=function(n){return e(n,"debug")},t=function(n){return e(n,"info")},o=function(n){return e(n,"warn")};function i(e){G&&G(e.content)}function a(){x&&x(H.current.readyState)}function u(){B&&B(I.current)}function d(e){var n={docTitle:e.docTitle,epageCount:e.epageCount,epage:e.epage,metadata:e.metadata};I.current=n,C&&C(n)}function c(e){N&&N(e)}var s=H.current;return s.addListener("debug",r),s.addListener("info",t),s.addListener("warn",o),s.addListener("error",i),s.addListener("readystatechange",a),s.addListener("loaded",u),s.addListener("nav",d),s.addListener("hyperlink",c),function(){x&&x(n.LOADING),s.removeListener("debug",r),s.removeListener("info",t),s.removeListener("warn",o),s.removeListener("error",i),s.removeListener("readystatechange",a),s.removeListener("loaded",u),s.removeListener("nav",d),s.removeListener("hyperlink",c),D.current.innerHTML=""}}()},[]),u(function(){_()},[c,M,W,g,T]),u(function(){F()},[m,P,S,w,k,A]),u(function(){var e;null===(e=H.current)||void 0===e||e.navigateToPage(r.EPAGE,l-1)},[l]);var q=i.createElement(v,{ref:D,style:R,background:L});return"function"==typeof V&&V instanceof Function?V({container:q,reload:_}):q},v=e.div(c||(s=["\n  overflow: scroll;\n  background: "," !important;\n"],l||(l=s.slice(0)),s.raw=l,c=s),function(e){return e.background});export{f as Renderer};
+import e from"@emotion/styled";import{ReadyState as n,Navigation as r,PageViewMode as t,CoreViewer as o}from"@vivliostyle/core";import i,{useRef as a,useEffect as d}from"react";function u(){return(u=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e}).apply(this,arguments)}var c,s,l,f=function(e){var c=e.source,s=e.page,l=void 0===s?1:s,f=e.zoom,g=void 0===f?1:f,p=e.fontSize,m=void 0===p?16:p,h=e.background,y=void 0===h?"#ececec":h,L=e.renderAllPages,S=void 0===L||L,b=e.autoResize,w=void 0===b||b,z=e.pageViewMode,P=void 0===z?t.SINGLE_PAGE:z,k=e.defaultPaperSize,E=e.pageBorderWidth,A=void 0===E?1:E,O=e.fitToScreen,W=void 0!==O&&O,R=e.userStyleSheet,T=e.authorStyleSheet,j=e.style,G=e.onMessage,M=e.onError,x=e.onReadyStateChange,B=e.onLoad,C=e.onNavigation,N=e.onHyperlink,V=e.children,D=a(null),I=a(),F=i.useRef();function H(){I.current.setOptions({fontSize:m,pageViewMode:P,renderAllPages:S,autoResize:w,defaultPaperSize:k,pageBorderWidth:A})}function _(){var e,n,r=I.current,t=c.endsWith(".json"),o=u({},R?{userStyleSheet:[(e={},e[R.endsWith(".css")?"url":"text"]=R,e)]}:null,T?{authorStyleSheet:[(n={},n[T.endsWith(".css")?"url":"text"]=T,n)]}:null);t?r.loadPublication(c,o):r.loadDocument({url:c},o,{fontSize:m,pageViewMode:P,zoom:g,renderAllPages:S,autoResize:w,defaultPaperSize:k,pageBorderWidth:A,fitToScreen:W})}d(function(){return I.current=new o({viewportElement:D.current}),H(),function(){function e(e,n){G&&G(e.content,n)}var r=function(n){return e(n,"debug")},t=function(n){return e(n,"info")},o=function(n){return e(n,"warn")};function i(e){M&&M(e.content)}function a(){x&&x(I.current.readyState)}function d(){B&&B(F.current)}function u(e){var n={docTitle:e.docTitle,epageCount:e.epageCount,epage:e.epage,metadata:e.metadata};F.current=n,C&&C(n)}function c(e){N&&N(e)}var s=I.current;return s.addListener("debug",r),s.addListener("info",t),s.addListener("warn",o),s.addListener("error",i),s.addListener("readystatechange",a),s.addListener("loaded",d),s.addListener("nav",u),s.addListener("hyperlink",c),function(){x&&x(n.LOADING),s.removeListener("debug",r),s.removeListener("info",t),s.removeListener("warn",o),s.removeListener("error",i),s.removeListener("readystatechange",a),s.removeListener("loaded",d),s.removeListener("nav",u),s.removeListener("hyperlink",c)}}()},[]),d(function(){_()},[c,T,R,g,W]),d(function(){H()},[m,P,S,w,k,A]),d(function(){var e;null===(e=I.current)||void 0===e||e.navigateToPage(r.EPAGE,l-1)},[l]);var q=i.createElement(v,{ref:D,style:j,background:y});return"function"==typeof V&&V instanceof Function?V({container:q,reload:_}):q},v=e.div(c||(s=["\n  overflow: scroll;\n  background: "," !important;\n"],l||(l=s.slice(0)),s.raw=l,c=s),function(e){return e.background});export{f as Renderer};
 //# sourceMappingURL=react-vivliostyle.modern.js.map

package/dist/react-vivliostyle.modern.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-vivliostyle.modern.js","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  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: React.FC<RendererProps> = ({\n  source,\n  page = 1,\n  zoom = 1,\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}) => {\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 isPublication = source.endsWith(\".json\");\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 (isPublication) {\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    function handleMessage(payload: Payload, type: MessageType) {\n      onMessage && onMessage(payload.content, 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(payload.content);\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      containerRef.current!.innerHTML = \"\";\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":["source","page","zoom","fontSize","background","renderAllPages","autoResize","pageViewMode","PageViewMode","SINGLE_PAGE","defaultPaperSize","pageBorderWidth","fitToScreen","userStyleSheet","authorStyleSheet","style","onMessage","onError","onReadyStateChange","onLoad","onNavigation","onHyperlink","children","useRef","React","instanceRef","current","setOptions","endsWith","isPublication","instance","loadPublication","documentOptions","loadDocument","url","useEffect","viewportElement","containerRef","setViewerOptions","payload","type","content","readyState","stateRef","docTitle","epageCount","epage","metadata","currentState","addListener","handleDebug","handleInfo","handleWarn","handleError","handleReadyStateChange","handleLoaded","handleNavigation","handleHyperlink","ReadyState","LOADING","removeListener","innerHTML","registerEventHandlers","loadSource","navigateToPage","Navigation","EPAGE","Container","ref","container","reload","styled","div"],"mappings":"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"}
+{"version":3,"file":"react-vivliostyle.modern.js","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  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  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 isPublication = source.endsWith(\".json\");\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 (isPublication) {\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    function handleMessage(payload: Payload, type: MessageType) {\n      onMessage && onMessage(payload.content, 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(payload.content);\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":["source","page","zoom","fontSize","background","renderAllPages","autoResize","pageViewMode","PageViewMode","SINGLE_PAGE","defaultPaperSize","pageBorderWidth","fitToScreen","userStyleSheet","authorStyleSheet","style","onMessage","onError","onReadyStateChange","onLoad","onNavigation","onHyperlink","children","useRef","React","instanceRef","current","setOptions","endsWith","isPublication","instance","loadPublication","documentOptions","loadDocument","url","useEffect","viewportElement","containerRef","setViewerOptions","payload","type","content","readyState","stateRef","docTitle","epageCount","epage","metadata","currentState","addListener","handleDebug","handleInfo","handleWarn","handleError","handleReadyStateChange","handleLoaded","handleNavigation","handleHyperlink","ReadyState","LOADING","removeListener","registerEventHandlers","loadSource","navigateToPage","Navigation","EPAGE","Container","ref","container","reload","styled","div"],"mappings":"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"}

package/dist/renderer.d.ts

@@ -39,5 +39,5 @@ interface RendererProps {
     onHyperlink?: (payload: HyperlinkPayload) => void;
     children?: React.ReactNode | ChildrenFunction;
 }
-export declare const Renderer: React.FC<RendererProps>;
+export declare const Renderer: ({ source, page, zoom, fontSize, background, renderAllPages, autoResize, pageViewMode, defaultPaperSize, pageBorderWidth, fitToScreen, userStyleSheet, authorStyleSheet, style, onMessage, onError, onReadyStateChange, onLoad, onNavigation, onHyperlink, children, }: RendererProps) => ReturnType<ChildrenFunction> | JSX.Element;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vivliostyle/react",
   "description": "React component for Vivliostyle",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "author": "Yasuaki Uechi <y@uechi.io>",
   "scripts": {
     "build": "microbundle-crl --format modern,cjs && shx rm -rf dist/stories",
@@ -18,11 +18,11 @@
   "dependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
-    "@vivliostyle/core": "^2.21.0"
+    "@vivliostyle/core": "^2.22.0"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.0.21",
@@ -32,13 +32,13 @@
     "@storybook/preset-create-react-app": "^3.1.2",
     "@storybook/react": "^6.0.21",
     "@types/jest": "^26.0.3",
-    "@types/react": "^16.9.41",
+    "@types/react": "^18.0.27",
     "cross-env": "^7.0.2",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "^3.4.1",
     "shx": "^0.3.2"
   },
@@ -70,5 +70,5 @@
   "engines": {
     "node": ">=12"
   },
-  "gitHead": "fbec56207ae11d9403032396234a019f1a6f6823"
+  "gitHead": "cd08627c9f4b51912519b2033ea570675b215f95"
 }