Convert to typescript

.babelrc

@@ -1,9 +1,13 @@
 {
   "presets": [
-    ["env", {
-      "modules": false
-    }],
-    "stage-0",
-    "react"
-  ]
-}
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}

.eslintrc

@@ -3,5 +3,9 @@
   "globals": {
     "cy": true,
     "Cypress": true
+  },
+  "plugins": ["eslint-plugin-tsdoc"],
+  "rules": {
+    "tsdoc/syntax": "warn"
   }
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

docs/docs/saving-nodes.mdx

@@ -15,6 +15,12 @@ import config from './config'
 
 const App = () => {
   const [nodes, setNodes] = React.useState({})
+
+  React.useCallback((nodes) => {
+    // Do whatever you want with the nodes
+    setNodes(nodes)
+  }, [])
+
   return (
     <div style={{width: 800, height: 600}}>
       <NodeEditor
@@ -30,6 +36,11 @@ const App = () => {
 
 The `onChange` handler will be called any time any of the nodes change? This includes any time their position or control values change.
 
+:::warning
+It's critical to note that the `onChange` handler **MUST** be memoized. If you don't memoize the handler you will get an infinite loop.
+:::
+
+
 ## `getNodes`
 
 Because the `onChange` handler may be called quite often, there are times you may want to only get out the nodes when the user is done editing. For these times the node editor provides an imperative handler for extracting the nodes.

example/package.json

@@ -6,6 +6,10 @@
   "dependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.15.3",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "axios": "^0.19.2",
     "decode-query-string": "^0.1.2",
     "docz": "^2.3.1",
@@ -17,8 +21,9 @@
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
     "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "5.0.1"
+    "react-router-dom": "5.3.3",
+    "react-scripts": "^5.0.1",
+    "typescript": "^5.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -29,6 +34,12 @@
     "docz:build": "DOCZ_SOURCE=./src docz build",
     "docz:serve": "DOCZ_SOURCE=./src docz build && docz serve"
   },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -40,5 +51,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }

example/src/App.js → example/src/App.tsx

@@ -6,7 +6,8 @@ import {
   Controls,
   Colors,
   RootEngine,
-  useRootEngine
+  useRootEngine,
+  NodeMap
 } from "node-editor";
 
 const colors = [
@@ -212,7 +213,7 @@ flumeConfig
     type: "multiColor",
     name: "multiColor",
     label: "Multicolor",
-    multiColor: Colors.grey,
+    // multiColor: Colors.grey,
     controls: [
       Controls.multiselect({
         name: "multiColor",
@@ -635,7 +636,7 @@ const App = () => {
                     border: "none",
                     padding: 0,
                     fontSize: 14,
-                    color: '#222'
+                    color: "#222"
                   }}
                   onClick={actions.openMenu}
                 >
@@ -645,7 +646,7 @@ const App = () => {
             </Wrapper>
           );
         }}
-        // debug
+        debug
       />
       <div style={{ marginTop: 30 }}>
         <Website nodes={nodes} />
@@ -656,25 +657,38 @@ const App = () => {
 
 export default App;
 
-const useInfiniteEngine = (nodes, engine, context, options = {}) =>
-  Object.keys(nodes).length ? engine.resolveRootNode(nodes, { context, ...options }) : {};
+const useInfiniteEngine = <T extends { [inputName: string]: any }>(
+  nodes: NodeMap,
+  engine: RootEngine,
+  context: any,
+  options = {}
+): T =>
+  Object.keys(nodes).length
+    ? engine.resolveRootNode<T>(nodes, { context, ...options })
+    : ({} as T);
 
-const Website = ({ nodes }) => {
+const Website = ({ nodes }: { nodes: NodeMap }) => {
   const {
     title,
     description,
     showDashboard,
-    showContactForm,
-    showLoginButton
-  } = useInfiniteEngine(nodes, engine, { someContext: true }, { maxLoops: 10 });
+    showBody,
+    showLogin
+  } = useInfiniteEngine<{
+    title: string;
+    description: string;
+    showDashboard: boolean;
+    showBody: boolean;
+    showLogin: boolean;
+  }>(nodes, engine, { someContext: true }, { maxLoops: 10 });
 
   return (
     <div className="website-wrapper">
       <h1>{title}</h1>
       <p>{description}</p>
       {showDashboard && <div>Dashboard</div>}
-      {showContactForm && <div>Contact Form</div>}
-      {showLoginButton && <button>Login</button>}
+      {showBody && <div>Contact Form</div>}
+      {showLogin && <button>Login</button>}
     </div>
   );
 };

example/src/TestRoutes/TestEditor.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import "normalize.css";
+
+import { Controls, FlumeConfig, NodeEditor } from "node-editor";
+
+const Log = console.log;
+
+const config = new FlumeConfig()
+  .addPortType({
+    type: "number",
+    name: "number",
+    label: "Number",
+    controls: [
+      Controls.number({
+        name: "number"
+      })
+    ]
+  })
+  .addNodeType({
+    type: "number",
+    label: "Number",
+    initialWidth: 150,
+    inputs: ports => [ports.number()],
+    outputs: ports => [ports.number()]
+  })
+  .addNodeType({
+    type: "addNumbers",
+    label: "Add Numbers",
+    initialWidth: 150,
+    inputs: ports => [
+      ports.number({
+        name: "num1"
+      }),
+      ports.number({
+        name: "num2"
+      })
+    ],
+    outputs: ports => [
+      ports.number({
+        name: "result"
+      })
+    ]
+  });
+
+const TestEditor = () => {
+  const [output, setOutput] = React.useState<string | undefined>();
+
+  React.useEffect(() => {
+    console.log = log => {
+      Log(log);
+      if (typeof log === "object") {
+        setOutput(JSON.stringify(log));
+      }
+    };
+    return () => {
+      console.log = Log;
+    };
+  });
+  return (
+    <div className="wrapper" style={{ width: 800, height: 600 }}>
+      <NodeEditor
+        portTypes={config.portTypes}
+        nodeTypes={config.nodeTypes}
+        nodes={{}}
+        debug
+      />
+      <div id="OUTPUT" style={{ display: "none" }}>
+        {output}
+      </div>
+    </div>
+  );
+};
+
+export default TestEditor;