@times-components/markup-forest

Markup Forest

The exported renderTree and renderTrees methods take AST data as the first argument, and a renderer object as the second argument. Each renderer should return an object with an element property (the component to be rendered), and an optional shouldRenderChildren boolean that can ensure the renderer does not render that node's children.

renderTrees is used typically because an AST is a list of trees, however renderTree can be used if it's known that it is a single tree being traversed.

For most usages you will want to use the markup package which provides renderers out of the box for all simple elements. These functions will only render elements which have a renderer with no fallback.

How to use

renderTrees

import { renderTrees } from "@times-components/markup-forest";
import coreRenderers from "@times-components/markup";

const trees = [
  {
    "name": "paragraph",
    "attributes": {},
    "children": [
      {
        "name": "text",
        "attributes": {
          "value": "I am one paragraph"
        }
        "children": []
      }
    ]
  },
  {
    "name": "paragraph",
    "attributes": {},
    "children": [
      {
        "name": "text",
        "attributes": {
          "value": "I am another paragraph"
        }
        "children": []
      }
    ]
  }
];


// element is now
// <View>
//   <Text key="1">I am one paragraph</Text>
//   <Text key="2">I am another paragraph</Text>
// </View>
const element = <View>{renderTrees(trees, coreRenderers)}<View>

renderTree

import { renderTree } from "@times-components/markup-forest";
import coreRenderers from "@times-components/markup";

const tree = {
  "name": "bold",
  "attributes": {},
  "children": [
    {
      "name": "text",
      "attributes": {
        "value": "I am bold"
      }
      "children": []
    }
  ]
}

// element is now
// <Text style={{fontWeight: bold}}>
//   I am bold
// </Text>
const element = renderTree(tree, coreRenderers)

Contributing

Please read CONTRIBUTING.md before contributing to this package

Running the code

Please see our main README.md to get the project running locally

Development

The code can be formatted and linted in accordance with the agreed standards.

yarn fmt
yarn lint

Testing

Testing can be done on each platform individually

yarn test