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;