@gitbook/slate-hyperprint

    2.3.0 • Public • Published

    slate-hyperprint

    NPM version

    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.

    ⚠️ This repository is now using GitBook's fork of ianstormtaylor/slate. Previous versions are still available on NPM All the versions using GitBook's fork of slate are now published under the @gitbook NPM scope. To learn more about why we forked Slate, read our manifest

    Setup

    yarn add slate-hyperprint [--dev]
    

    Usage

    import Slate from 'slate';
    import hyperprint from 'slate-hyperprint';
     
    console.log(
        hyperprint(
            Slate.Value.create({
                document: Slate.Document.create({
                    nodes: [
                        Slate.Block.create({
                            type: 'paragraph',
                            data: { a: 1 },
                            nodes: [
                                Slate.Text.create('Hello')
                            ]
                        }
                    )]
                })
            })
        )
    );
    // <value>
    //   <document>
    //     <paragraph a={1}>
    //       Hello
    //     </paragraph>
    //   </document>
    // </value>
     
    hyperprint.log(...)
    // Equivalent to console.log(hyperprint(...))

    Options

    slate-hyperprint accepts an option object:

    hyperprint(value, options);
    • preserveKeys: boolean = false True to print node keys
    • strict: 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.

    Install

    npm i @gitbook/slate-hyperprint

    DownloadsWeekly Downloads

    399

    Version

    2.3.0

    License

    Apache-2.0

    Unpacked Size

    2.69 MB

    Total Files

    50

    Last publish

    Collaborators

    • hughrawlinson
    • gitbook-bot
    • samypesse
    • jpreynat
    • aymeric-gb
    • emmerich