@literal-jsx/parser

    0.1.7 • Public • Published

    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")

    Install

    npm i @literal-jsx/parser

    DownloadsWeekly Downloads

    25

    Version

    0.1.7

    License

    MIT

    Unpacked Size

    147 kB

    Total Files

    7

    Last publish

    Collaborators

    • kelleyvanevert