Skip to content
This repository has been archived by the owner on Feb 15, 2022. It is now read-only.

A library to convert Slate models to their slate-hyperscript representation

License

Notifications You must be signed in to change notification settings

zarv1k/slate-hyperprint

 
 

Repository files navigation

@zarv1k/slate-hyperprint

NPM

A library to convert Slate models to their slate-hyperscript representation.

You can use @zarv1k/slate-hyperprint as a library to:

  • 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 @zarv1k/slate-hyperprint [--dev]

Usage

import Slate from 'slate';
import hyperprint from '@zarv1k/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)
  • preserveData: boolean = false True to print Slate Value's data
  • 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: 2 } Prettier config to use when formatting the output JSX.

Test

yarn test

Build

yarn build

Thanks

About

A library to convert Slate models to their slate-hyperscript representation

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 84.1%
  • CSS 13.2%
  • HTML 2.7%