Format the code.

old/src/App.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import { render, screen } from '@testing-library/react';
+import { render, screen } from "@testing-library/react";
-import App from './App';
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

old/src/App.tsx

@@ -1,5 +1,5 @@
-import './App.css';
+import "./App.css";
-import Editor from './Editor';
+import Editor from "./Editor";
 
 function App() {
   return (

old/src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

old/src/index.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import './index.css';
+import "./index.css";
-import App from './App';
+import App from "./App";
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

old/src/reportWebVitals.ts

@@ -1,8 +1,8 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from "web-vitals";
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);

old/src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

old/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,9 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
   },
-  "include": [
+  "include": ["src"],
-    "src"
-  ]
 }

src/Editor.tsx

@@ -15,7 +15,7 @@ function Editor({ defaultValue = "I have a text value." }) {
 
   function addHighlight(start: number, end: number) {
     let new_highlights = [...highlights, new Highlight(start, end)];
-    new_highlights.sort(function (a,b) {
+    new_highlights.sort(function (a, b) {
       if (a.start < b.start) return -1;
       if (a.start > b.start) return 1;
       return 0;

src/OrgAst.tsx

@@ -1,35 +1,32 @@
 import React, { ReactNode, useState } from "react";
-import {
+import { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
-  parse_org,
-} from "../../organic/target/wasm32-unknown-unknown/js/wasm";
 import styles from "./OrgAst.module.css";
 
-const OrgAst = (props: {addHighlight: Function, value: string}) => {
+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 (
+    return <div className={styles.OrgAst}>Error! {ast_tree.content}</div>;
-      <div className={styles.OrgAst}>Error! {ast_tree.content}</div>
-    );
   } else {
     return (
-      <div className={styles.OrgAst}><OrgAstNode node={ast_tree.content}/></div>
+      <div className={styles.OrgAst}>
+        <OrgAstNode node={ast_tree.content} />
+      </div>
     );
-
   }
-}
+};
 
-const OrgAstNode = (props: {node: any}) => {
+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 ? (<>
+      {Array.isArray(props.node.children) && props.node.children.length > 0 ? (
-                                                                                 Has children
+        <>Has children</>
-                                                                               </>) : null}
+      ) : null}
     </div>
   );
-}
+};
 
 export default OrgAst;

src/shadow.tsx

@@ -9,7 +9,10 @@ function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
   let buffer = "";
   for (let chr of text) {
     if (state == ShadowState.Text) {
-      if (remaining_highlights.length > 0 && i == remaining_highlights[0].start) {
+      if (
+        remaining_highlights.length > 0 &&
+        i == remaining_highlights[0].start
+      ) {
         // Start a span
         output.push(buffer);
         buffer = chr;
@@ -35,9 +38,9 @@ function buildShadow(highlights: Highlight[], text: string): ReactNode[] {
 
   if (buffer.length > 0) {
     if (state == ShadowState.Text) {
-        output.push(buffer);
+      output.push(buffer);
     } else if (state == ShadowState.Highlight) {
-        output.push(<span className="highlighted">{buffer}</span>);
+      output.push(<span className="highlighted">{buffer}</span>);
     }
   }
   return output;
@@ -64,6 +67,4 @@ const enum ShadowState {
   Highlight,
 }
 
-export {
+export { buildShadow };
-buildShadow
-}

webpack.config.js

@@ -5,10 +5,10 @@ const CSSModuleLoader = {
   loader: "css-loader",
   options: {
     importLoaders: 2,
-      sourceMap: true,
+    sourceMap: true,
-      modules: {
+    modules: {
-          localIdentName: '[name]_[local]_[hash:base64:5]',
+      localIdentName: "[name]_[local]_[hash:base64:5]",
-      }
+    },
   },
 };