# @gitbook/slate-hyperprint

> A Slate plugin to print Slate models to their slate-hyperscript representation.

Latest version **2.3.0** (published 2018-11-28) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @gitbook/slate-hyperprint
pnpm add @gitbook/slate-hyperprint
yarn add @gitbook/slate-hyperprint
bun add @gitbook/slate-hyperprint
```

Provides the command `slate-hyperprint`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2018-11-28 |
| First published | 2018-09-18 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Maintainers | gitbook-bot, jpreynat, samypesse, soreine |
| Keywords | slate, hyperscript, print, jsx |

## Links

- npm: https://www.npmjs.com/package/@gitbook/slate-hyperprint
- Repository: https://github.com/GitbookIO/slate-hyperprint
- Homepage: https://github.com/GitbookIO/slate-hyperprint#readme
- Issues: https://github.com/GitbookIO/slate-hyperprint/issues
- npm.io page: https://npm.io/package/@gitbook/slate-hyperprint

## Dependencies (6)

- [meow](https://npm.io/package/meow.md) ^5.0.0
- [js-yaml](https://npm.io/package/js-yaml.md) ^3.12.0
- [prettier](https://npm.io/package/prettier.md) 1.13.6
- [indent-string](https://npm.io/package/indent-string.md) ^3.2.0
- [is-plain-object](https://npm.io/package/is-plain-object.md) ^2.0.4
- [stringify-object](https://npm.io/package/stringify-object.md) ^3.2.2

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 2.3.0 (latest) — 2018-11-28
- 2.2.6 — 2018-09-18

## README

# slate-hyperprint

[![NPM version](https://badge.fury.io/js/slate-hyperprint.svg)](http://badge.fury.io/js/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](https://soreine.github.io/slate-hyperprint), that converts a Slate JSON representation to a Slate hyperscript representation.

> ⚠️  This repository is now using GitBook's fork of [ianstormtaylor/slate](https://github.com/ianstormtaylor/slate).
> Previous versions are still [available on NPM](https://www.npmjs.com/package/slate-hyperprint)
> 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](https://github.com/GitbookIO/slate/blob/master/Readme.md)

# Setup

```
yarn add slate-hyperprint [--dev]
```

# Usage

```js
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:

```js
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](https://github.com/algolia/react-element-to-jsx-string) is and will remain a great source of inspiration.

---
_Source: https://npm.io/package/@gitbook/slate-hyperprint · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._