slate-hyperprint
A library to convert Slate models to their slate-hyperscript representation.
You can use slate-hyperprint
as a library to:
- Run a script to easily convert Slate tests written in Yaml/JSON to hyperscript.
- Improve the output of unit tests by comparing hyperscript strings instead of JSON values.
- Facilitate debugging and console logging of Slate values.
See the online demo, that converts a Slate JSON representation to a Slate hyperscript representation.
Setup
yarn add slate-hyperprint [--dev]
Usage
;; console;// <value>// <document>// <paragraph a={1}>// Hello// </paragraph>// </document>// </value> hyperprint// Equivalent to console.log(hyperprint(...))
Options
slate-hyperprint
accepts an option object:
;
preserveKeys: boolean = false
True to print node keysstrict: boolean = false
True to preserve empty texts and other things that the formatting would otherwise omit. Useful when using hyperprint compare values in tests, because the output is stricter.prettier: Object = { semi: false, singleQuote: true, tabWidth: 4 }
Prettier config to use when formatting the output JSX.
Test
yarn run test
Build
yarn run build
CLI
slate-hyperprint also export a command line interface tool that converts yaml files to jsx.
When installed globally (npm install slate-hyperprint --global
) it can be used like so:
$ slate-hyperprint document.yaml
It will load the file, create a Slate document and print it to the console in jsx.
Note: it will look for a value.document
, state.document
or document
property.
It will consider the whole content as the document if none are found.
You can write the output to a file like so slate-hyperprint input.yaml > output.js
Here is a command to convert a whole bunch of yaml files in a test folder:
$ for file in tests/**/*.yaml; do basename=$(echo $file | sed 's/\.yaml//'); slate-hyperprint $basename.yaml > $basename.js; done;
Thanks
The React equivalent react-element-to-jsx-string is and will remain a great source of inspiration.