# jsx-runtime

> JSX IR Runtime

Latest version **1.2.0** (published 2015-07-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install jsx-runtime
pnpm add jsx-runtime
yarn add jsx-runtime
bun add jsx-runtime
```

## 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 | 1.2.0 |
| Published | 2015-07-20 |
| First published | 2015-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Arthur Stolyar |
| Maintainers | nekr |

## Links

- npm: https://www.npmjs.com/package/jsx-runtime
- Repository: https://github.com/jsx-ir/jsx-runtime
- Issues: https://github.com/jsx-ir/jsx-runtime/issues
- npm.io page: https://npm.io/package/jsx-runtime

## Dependencies (1)

- [object-assign](https://npm.io/package/object-assign.md) ^3.0.0

## Recent versions

- 1.2.0 (latest) — 2015-07-20
- 1.1.0 — 2015-07-15
- 1.0.2 — 2015-07-09
- 1.0.1 — 2015-07-06
- 1.0.0 — 2015-07-06
- 0.0.1 — 2015-06-29

## README

[![Build Status](https://travis-ci.org/jsx-ir/jsx-runtime.svg?branch=master)](https://travis-ci.org/jsx-ir/jsx-runtime)

## JSX IR Runtime

Runtime for rendering JSX-IR. Runtime does not renders JSX-IR, otherwise it provides common interfaces for Renderer to be implemented.

### Installation

```npm install jsx-runtime```

### Usage

This package does not really intended to be used by the end user, instead users should install Renderers which depends on this package.

Runtime 1 main and most important method,  registers an Renderer to the runtime:

```js
  jsx.register(rendererName, rendererConfig);
```

Simple Renderer may look like this:
```js
var jsx = require('../');

var renderer = jsx.register('jsx-unwrap', {
  tags: {
    '*': {
      enter: function(tag, props) {
        return {
          tag: tag,
          props: props || null,
          children: []
        };
      },
      leave: function(parent, tag) {
        if (!parent.children.length) {
          parent.children = null;
        }

        return parent;
      },
      child: function(child, parent) {
        parent.children.push(child);
        return parent;
      }
    }
  }
});

module.exports = renderer;
```
_https://github.com/jsx-ir/jsx-runtime/blob/master/tests/_unwrap-renderer.js_

This simple Renderer from tests just unwraps incoming data back to JSX-IR so it could be easy testable. Renderers could be used in many different ways, starting from generating simple string-markup to complex output of framework objects, bypassing string/dom parsing and initializing directly with passed values.

### API

_Definition in TypeScript format_
```typescript
/// <reference path="https://github.com/jsx-ir/spec/blob/master/spec.d.ts" />

interface Runtime {
  // Register Renderer
  register(name: string, config: RendererConfig): Renderer;
}

interface RendererConfig {
  // Method is called by the Renderer before tag handlers receives any signals
  // This allows to override passed data, or setup some props
  before(element: JSX.Element): JSX.Element;

  // Method is called by the Renderer after all JSX tree is handled by tag handlers
  // This allows post modification of generated output
  after(element: any): any;

  tags: {
    // Wildcard for any tag. Think about it as a default handler.
    // Is used when specific tag handler is not present
    '*': TagHandler;

    // Handlers of any tags, like 'div', 'span', 'SomethingCool', etc.
    [tag: string]: TagHandler;
  };
}

interface TagHandler {
  // [optional]
  // If present, is called with JSX.Props of JSX.Element.
  // Returns new value for props
  props?: (props: JSX.Props, tag: string) => any;

  // [optional]
  // If present, is called with JSX.Child of JSX.Element's children.
  // Return new value for child
  child?: (child: JSX.Child, parent: any, tag: string) => any;

  // This is mandatory signal. Takes tag name of currently handled tag,
  // and props value previously handled by "props" signal, if it was present
  enter: (tag: string, props: any) => any;

  // [optional]
  // If present, is called with "element" returned by "enter" signal.
  // Return new value for element
  leave?: (element: any, tag: string) => any;

  // [optional]
  // If present, is called with JSX.Children which is JSX.Element's children property
  // This method is called before any "child" signal is called.
  // Returns new array of children
  children?: (children: JSX.Children, parent: any, tag: string) => any[];

  // [optional]
  // If present, allows to override Runtime's internal handling of tags
  // captured form the scope, i.e. function-tags or component-tags
  custom?: (fn: Function, props: JSX.Props, children: JSX.Children, tag: string) => any;
}

interface Renderer {
  // Renders JSX.Element
  render(element: JSX.Element);

  // Computes JSX.Element from giving parameters and renders it as function-tag
  render(fn: Function, props?: JSX.Props, children?: JSX.Children);

  // Computes JSX.Element from giving parameters and renders simple tag
  render(tag: string, props?: JSX.Props, children?: JSX.Children);
}
```

### License

[MIT](LICENSE.md)

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