EPUB JSX
Preact JSX bindings for generating files in EPUB archives.
I wrote this library to address my own need, therefore it is not intended to be a full implementation of the spec. If you would like to collaborate and push it towards full EPUB spec compliance, I'd be happy to look at PRs.
Setup
npm install --save @wyvernzora/epub-jsx
Examples
toc.ncx
import { NCX, NCXProps, NavMap, NavPoint, renderToXmlString } from '@wyvernzora/epub-jsx'
const ncx =
<NCX id='n9669bk' title='無職転生' author='理不尽な孫の手' metadata={}>
<NavMap>
<NavPoint id='chapter01' playOrder={1} label='第1章 幼年期' link='chapter01/index.xhtml'>
<NavPoint id='epusode01' playOrder={2} label='プロローグ' link='chapter01/episode01.xhtml' />
</NavPoint>
</NavMap>
</NCX>
renderToXmlString(ncx) // Generates toc.ncx contents
package.opf
import { OPF, renderToXmlString } from '@wyvernzora/epub-jsx'
const opf =
<OPF
metadata={{
id: 'n9669bk',
title: '無職転生',
author: '理不尽な孫の手',
updatedAt: new Date(),
language: 'ja_JP'
}}
manifest={{
items: [
{ id: 'toc', href: 'toc.xhtml', mediaType: 'application/xhtml+xml', properties: 'nav' },
{ id: 'chapter01', href: 'chapter01/index.xhtml', mediaType: 'application/xhtml+xml' },
{ id: 'episode01', href: 'chapter01/episode01.xhtml', mediaType: 'application/xhtml+xml' }
]
}}
spine={{
items: [
{ idref: 'toc' },
{ idref: 'chapter01' },
{ idref: 'episode01' }
]
}}
guide={{
references: [{ type: 'toc', title: 'Table of Contents', href: 'toc.xhtml' }]
}}
/>
renderToXmlString(opf) // Generates package.opf contents
toc.xhtml
import { TableOfContents, Links, Link, renderToXhtmlString } from '@wyvernzora/epub-jsx'
const toc =
<TableOfContents className='toc__wrapper'>
<Links label='第1章 幼年期' href='chapter01/index.xhtml'>
<Link label='プロローグ' href='chapter01/episode01.xhtml' />
</Links>
</TableOfContents>
renderToXhtmlString(toc) // Generates toc.xhtml contents
General XHTML file
import { Xhtml, renderToXhtmlString } from '@wyvernzora/epub-jsx'
const pageWithPreactContent =
<Xhtml title='プロローグ' language='ja_JP' stylesheets={[ '../../styles.css' ]}>
<h1>プロローグ</h1>
<p>...</p>
</Xhtml>
renderToXhtmlString(pageWithPreactContent)
const pageWithStringContent =
<Xhtml title='プロローグ' language='ja_JP' stylesheets={[ '../../styles.css' ]}>
{'<h1>プロローグ</h1><p>...</p>'}
</Xhtml>
renderToXhtmlString(pageWithStringContent)
License
MIT