react-ecmason-view

React component for inspecting modern ES objects

Usage no npm install needed!

<script type="module">
  import reactEcmasonView from 'https://cdn.skypack.dev/react-ecmason-view';
</script>

README

react-ecmason-view

React component for inspecting modern ES objects

NPM JavaScript Style Guide

image

Install

npm install --save react-ecmason-view

yarn add react-ecmason-view

Usage

import { View } from 'react-ecmason-view';

// Supports Map
const a = new Map([
  // Supports RegExp and Date 
  [/Hello World/, new Date()],
  // Supports Promise and Functions
  [Promise.resolve(), function exampleCallback() {}],
]);

// Support for plain objects
const object = {
  a,
  // Support for Set
  b: new Set([
    // Support for NaN
    NaN,
    // Support for undefined
    undefined,
    // Support for infinity
    Infinity,
    -Infinity,
  ]),
  c: [
    // Support for signed zeroes
    -0,
    null,
  ],
  // Support for Errors
  d: new SyntaxError('This is an error'),
};

// Support for recursion
a.set('recursive', object);

// Create our inspector
<View
  value={object}
/>

Features

Modern ES Objects Parser

react-ecmason-view uses ecmason to serialize objects and display their values in context. On top of the current features of ecmason, react-ecmason-view adds custom transformers to be able to display functions and Promises.

Base16 Schemes

react-ecmason-view uses base16-ts as a peer dependency for the color scheme of the component.

You can install base16-ts to gain access to more themes.

yarn add base16-ts

import { schemes } from 'base16-ts'

<View
  theme={schemes.monokai}
/>

SSR

react-ecmason-view uses cxs to generate dynamic classes. You can import styles from react-ecmason-view to pre-render classes specially on ReactSSR.

import { styles } from 'react-ecmason-view';

// Ensure cache is free
styles.reset();
const html = ReactDOMServer.renderToString(<App />)
const css = styles.render()

const doc = `<!DOCTYPE html>
<style>${css}</style>
${html}
`
// Reset the cache for the next render
styles.reset()

Custom Tags

To be added.

Prior Art

License

MIT © lxsmnsyc