https://github.com/luggage66/jsx-xsl-fo

Build XSL-FO with a React-like API and JSX
https://github.com/luggage66/jsx-xsl-fo

fop jsx pdf-generation react xsl-fo

Last synced: 9 days ago
JSON representation

Build XSL-FO with a React-like API and JSX

• Host: GitHub
• URL: https://github.com/luggage66/jsx-xsl-fo
• Owner: luggage66
• License: mit
• Created: 2016-04-30T16:41:45.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-09-09T00:24:24.000Z (about 1 year ago)
• Last Synced: 2024-10-19T08:33:11.233Z (18 days ago)
• Topics: fop, jsx, pdf-generation, react, xsl-fo
• Language: TypeScript
• Homepage:
• Size: 433 KB
• Stars: 3
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Create your XSL-FO documents and reports in modern JavaScript (w/types)

## Usage

This library produces XML output in the [XSL FO](https://www.w3.org/TR/xsl11/) format. You then need to pass that through an FO render (e.g. [Apache FOP](https://xmlgraphics.apache.org/fop/)) ([Github](https://github.com/apache/xmlgraphics-fop)) to generate a PDF.

In this example the .fo output from this library is fed into `fop` to generate a PDF:

```sh

node ./my-report.js | fop -fo - -pdf output.pdf

```

### Minimal Example

More examples are available at [./packages/examples](./packages/examples/README.md)

```jsx

import { renderToStream } from "@jsx-xsl-fo/core";

renderToStream(

    

        

            

                

            

        

        

            

                Hello World!

            

        

    ,

    process.stdout

);

```

### Using high level components

There are some helper components to handle basic page structure

```jsx

import { renderToStream } from "@jsx-xsl-fo/core";

import { Report, PageSequence, PageContent, PageHeader, PageFooter } from 'jsx-xsl-fo/reporting';

renderToStream(

    

        

            

                page 

            

            

                Hello World

            

        

    ,

    process.stdout

);

```

### Custom Components

You can make your own components similar to React and other JSX libraries.

```jsx

// function components

function Greeting({ firstName, lastName }) {

    return Greetings, {firstName} {lastName}!;

}

// class components

class GoodBye extends Component {

    render() {

        return 

            So long, {this.props.children}

        ;

    }

}

// and build more complex documents with them

let myBlock = 

    

    Bob

;

```

### API

```jsx

import { renderToStream, renderToString } from "@jsx-xsl-fo/core";

// as a string (probably not good for large documents)

let aString = renderToString();

// to a stream.

renderToStream(, process.stdout);

```

### dangerouslySetInnerXML

If you need to embed some other xml (e.g. SVG) use `dangerouslySetInnerXML`.

```js

```

## Configuration

This library works as a jsx runtime compatible with Babel's `jsxImportSource` and TypeScript's `jsxImportSource`

### TypeScript `tsconfig.json`

```json

{

    "compilerOptions": {

        "jsx": "react-jsx",

        "jsxImportSource": "@jsx-xsl-fo/core",

    }

}

```

### Babel/TypeScript Comments:

```js

/** @jsxImportSource custom-jsx-library */

const foo = Hello;

```

## Development

### Prerequisites:

* Node.js 18+ (earlier may work but untested)

* pnpm

### Building:

```sh

pnpm install

pnpm run -r build

# run tests

pnpm run -r test

```

### Project Organization

* `packages/core` - The main library. This gets published to NPM

* `packages/cli` - A CLI tool for converting older files to the current version of jxs-xsl-fo

* `packages/examples` - Example uses of the main library