@oxide/react-asciidoc NPM

React AsciiDoc

Warning Work in progress, not ready for use

A React renderer for AsciiDoc. Built on top of Asciidoctor.js. Designed to be equivalent in output of the built-in HTML5 converter. Will allow for custom components to be passed in similar to Custom converters in Asciidoctor.js and custom block types.

Currently just a proof of concept, working towards style parity with the built-in converter.

Installing

To view any of the examples first install all necessary modules:

npm install

Previewing

You can then preview any of the examples by running npm run dev and visting http://localhost:8000/?example=[EXAMPLE]&renderer=[RENDERER]. See here for the example names. Use renderer=react for the React renderer and renderer=html for the HTML one.

Note The example name must be identical to the file name without the file ending, it is case sensitive

Running tests

Before running the full set of tests we must first generate the screenshots. The tests are running a visual diff on the original renderer and the React one. You must therefore run the following command first:

npm run test:init

This will produce an error on first run; this is expected, as it needs to generate the screenshots. You should then run the following command, which runs all of the React renderer tests, comparing them to the baseline.

npm run test:run

GIF of the visual diff tests

Limitations

We do not have access to the inline nodes. They can be customised but not with React. You can write a standard asciidoctor.js custom converter instead. Using a JSX to string converter is planned to make it easier to create converters for inline nodes.