This is an example implementation of a Literal JSX parser, built with nearley.js + moo.

Literal JSX

Literal JSX is a lightweight format for interchanging content structures potentially rich in shape and data. It extends JSON by adding an "Element" node type, which is shaped as JSX, but which can only contain literal (JSON) data structures. For more information, see http://literal-jsx.org/.

Usage

import {
  // converts LJSX to an AST similar to Babel's output
  parseAST,

  // converts LJSX directly to a value
  // (you can optionally pass it a component hydration factory)
  parseValue,

  // create a moo lexer like the one used under the hood
  makeLexer,

  // the nearley.js generated grammar
  grammar,

  // for if you want to stream feed the nearley.js parser
  Parser
} from "literal-jsx";

Note: line/col numbers come from moo, and are 1-based; offsets are 0-based.

Literal JSX is a conservative extension of JSON, so in particular, it will parse any JSON data structure.

parseValue(`{ "normal": ["json", "data"] }`);
// { normal: ["json", "data"] }

Parse some typical JSX. By default, JSX elements are described by nodes of the shape { _JSXElement: true, name, attributes, children }.

parseValue(`<Button size="large" primary>Hi {"there"}</Button>`);
// { _JSXElement: true,
//   name: "Button",
//   attributes: { size: "large", primary: true },
//   children: ["Hi ", "there"] }

If you pass it a factory function (such as a simple wrapper around React.createElement that does a component lookup by name), it will use that factory function to hydrate the JSX. For example:

const components = {
  Button,
  NavBar
};

const h = (name, attrs, ...children) =>
  React.createElement(components[name] || name, attrs, ...children);

parseValue(`<Button size="large" primary>Hi {"there"}</Button>`, h);
// React.createElement(Button, { size: "large", primary: true }, "Hi ", "there")