organic_ast_explorer/src/OrgAst.tsx

import React, { ReactNode, useState } from "react";
import {
  parse_org,
} from "../../organic/target/wasm32-unknown-unknown/js/wasm";
import styles from "./OrgAst.module.css";

const OrgAst = (props: {addHighlight: Function, value: string}) => {
  console.log(styles);
  const ast_tree = parse_org(props.value);
  console.log(JSON.stringify(ast_tree));

  if (ast_tree.status !== "success") {
    return (
      <div className={styles.OrgAst}>Error! {ast_tree.content}</div>
    );
  } else {
    return (
      <div className={styles.OrgAst}><OrgAstNode node={ast_tree.content}/></div>
    );

  }
}

const OrgAstNode = (props: {node: any}) => {
  return (
    <div className={styles.OrgAstNode}>
      <div className={styles.OrgAstNodeType}>{props.node["ast-node"]}</div>
      {Array.isArray(props.node.children) && props.node.children.length > 0 ? (<>
                                                                                 Has children
                                                                               </>) : null}
    </div>
  );
}

export default OrgAst;