0.3.1 • Published 6 years ago
jsx-xsl-fo v0.3.1
A JSX to XSL-FO templating tool with react-like API w/ TypeScript typess
This library generates xsl-fo output from a react-like API. It may turn into a react renderer in the future, but for now, it's standalone.
/** @jsx XSLFO.createElement */
import XSLFO, { XSLFO } from 'jsx-xsl-fo';
// create an element
var element = XLSFO.createElement('block', { "border-top": "0.5pt solid black" }, "Hello World.");
// or use JSX
var element2 = <block border-top="0.5pt solid black">Hello World.</block>;
// make components as functions
function Greeting(props) {
return <block>Greetings, {props.firstName} {props.lastName}!</block>;
}
// or as an ES6 class (here we use props.children)
class GoodBye extends Component {
render() {
return <block>
So long, <inline font-weight="bold">{this.props.children}</inline>
</block>;
}
}
// and build more complex documents with them
let message = {
to: {
firstName: "Jimbo",
lastName: "Jones"
},
body: {
"Ha ha!"
}
};
let element3 = <block>
<Greeting {...message.to} />
<GoodBye>{message.to.firstName}</GoodBye>
</block>;
// components can be nested and manipulate their children with a
// react-like API (e.g. XSLFO.Children.map() and XSLFO.cloneElement()).
// examples coming.
Now, you may want to get some output, eventually..
// as a string (probably not good for large documents)
let aString = XLSFO.renderToString(element);
// to a stream.
XLSFO.renderToStream(element, process.stdout);
More examples
More examples can be seen at: https://github.com/luggage66/jsx-xsl-fo-examples
Helper components
I am also working on a library of helper components to handle some of the setup. e.g.
/** @jsx XSLFO.createElement */
import XSLFO, { Component } from 'jsx-xsl-fo';
import {
Report,
PageSequence,
PageContent,
PageHeader,
PageFooter
} from 'jsx-xsl-fo/reporting';
let myReport = <Report>
<PageSequence>
<PageHeader>
<block text-align="end">Page <pageNumber /></block>
</PageHeader>
<PageContent>
"Hello World."
</PageContent>
</PageSequence>
</Report>;
XSLFO.renderToStream(myReport, process.stdout);
This will render to:
<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master master-name="101c0990-4460-4307-8507-7d2d1ddcae68" page-height="29.7cm" page-width="21.0cm" margin="2cm">
<fo:region-body/>
<fo:region-before/>
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="101c0990-4460-4307-8507-7d2d1ddcae68">
<fo:static-content flow-name="xsl-region-before">
<fo:block text-align="end">Page
<fo:page-number/>
</fo:block>
</fo:static-content>
<fo:flow flow-name="xsl-region-body">"Hello World."</fo:flow>
</fo:page-sequence>
</fo:root>
If you need to embed some other xml (e.g. SVG) use dangerouslySetInnerXML
.
<instream-foreign-object dangerouslySetInnerXML={{__xml: logoLarge}}>
</instream-foreign-object>
Changes
2.1: ?
3.0:
- JSX namespace no longer global.
This style of import works (For JSX)
/* @jsx createReportElement */
import { createElement as createReportElement } from 'jsx-xsl-fo';
This does NOT work.
/* @jsx XSLFO.createElement */
import * as XSLFO from 'jsx-xsl-fo';
Future Plans
- Medium Term
- More helpful Components for common reporting tasks