# jsx-xsl-fo

> Use JSX as a template language to generate XSL-FO documents.

Latest version **0.3.1** (published 2018-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install jsx-xsl-fo
pnpm add jsx-xsl-fo
yarn add jsx-xsl-fo
bun add jsx-xsl-fo
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2018-10-15 |
| First published | 2016-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 145.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Donald Mull Jr. |
| Maintainers | luggage66 |
| Keywords | fop, xsl-fo, jsx, reporting, documents |

## Links

- npm: https://www.npmjs.com/package/jsx-xsl-fo
- Repository: https://github.com/luggage66/jsx-xsl-fo
- Homepage: https://github.com/luggage66/jsx-xsl-fo#readme
- Issues: https://github.com/luggage66/jsx-xsl-fo/issues
- npm.io page: https://npm.io/package/jsx-xsl-fo

## Dependencies (3)

- [uuid](https://npm.io/package/uuid.md) ^3.3.2
- [decamelize](https://npm.io/package/decamelize.md) ^2.0.0
- [xml-writer](https://npm.io/package/xml-writer.md) ^1.7.0

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2018-10-15
- 0.2.1 (next) — 2017-04-24
- 0.3.0 — 2018-10-13
- 0.2.0 — 2017-04-23
- 0.1.0 — 2017-04-21
- 0.0.7 — 2017-04-17
- 0.0.6 — 2017-03-30
- 0.0.5 — 2016-07-26
- 0.0.4 — 2016-07-11
- 0.0.3 — 2016-05-19
- 0.0.2 — 2016-05-13
- 0.0.1 — 2016-05-11

## README

A JSX to XSL-FO templating tool with react-like API w/ TypeScript typess

[![Join the chat at https://gitter.im/luggage66/jsx-xsl-fo](https://badges.gitter.im/luggage66/jsx-xsl-fo.svg)](https://gitter.im/luggage66/jsx-xsl-fo?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

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.

```js
/** @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..

```js

// 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.

```js
/** @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
<?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`.

```js
<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)

```ts
/* @jsx createReportElement */
import { createElement as createReportElement } from 'jsx-xsl-fo';
```

This does NOT work.

```ts
/* @jsx XSLFO.createElement */
import * as XSLFO from 'jsx-xsl-fo';
```


# Future Plans

* Medium Term
  * More helpful Components for common reporting tasks

---
_Source: https://npm.io/package/jsx-xsl-fo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._