How to pass a hast tree as prop to an mdxJsxFlowElement

[cjroebuck]

Say I have a hast tree and I want to insert a react component, and then pass the hast subtree as a prop to that component (rather than via children - because there are multiple subtrees that i want to have control over within the component), how could I do that?

e.g.. tried doing this:

    node.type = "mdxJsxFlowElement";
    node.name = component;
    node.attributes = [
      { type: "mdxJsxAttribute", name: "title", value: title },
      { type: "mdxJsxAttribute", name: "language", value: lang },
    ];
    node.children = []

Object.entries(trees).forEach(([mode, tree]) => {
      // tree is a hast subtree..
      const pre = tree.children[0];
      const code = pre.children[0];
      node.attributes.push({
          type: "mdxJsxAttribute",
          name: mode,
          value: code, // <- a hast tree
      });

hast tree for code variable above

{
      type: 'element',
      tagName: 'code',
      properties: {},
      children: [...etc...],
      position: ...bla..
}

which works fine if i assign code.children to node.children, but wanting to know how i can pass the hast tree into the component as a custom prop, do I need to convert the hast to some kind of expression?

[wooorm]

Either:
a) don‘t, how are you getting several subtrees anyway?
b) Wrap in different components, and then in your component at runtime, access the different slots in children
c) Turn the non-children children into a JS expression: https://github.com/syntax-tree/hast-util-to-estree, pass the result of that as an attribute expression value

Also:

• don’t assign fields to a node. Replace it with a new one.