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 */; // create an elementvar element = XLSFO; // or use JSXvar element2 = <block border-top="0.5pt solid black">Hello World</block>; // make components as functions { return <block>Greetings propsfirstName propslastName!</block>;} // or as an ES6 class (here we use props.children) { return <block> So long <inline font-weight="bold">thispropschildren</inline> </block>; } // and build more complex documents with themlet message = to: firstName: "Jimbo" lastName: "Jones" body: "Ha ha!" ; let element3 = <block> <Greeting ...messageto /> <GoodBye>messagetofirstName</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; // to a stream.XLSFO;
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 */;; let myReport = <Report> <PageSequence> <PageHeader> <block text-align="end">Page <pageNumber /></block> </PageHeader> <PageContent> "Hello World." </PageContent> </PageSequence></Report>; XSLFO;
This will render to:
Page "Hello World."
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 */;
This does NOT work.
/* @jsx XSLFO.createElement */;
Future Plans
- Medium Term
- More helpful Components for common reporting tasks