Migrate Repo to Typescript (#229)

* Upgraded rollup and added TS support

* Conversion in-progress

* Converted toasts reducer to TS

* Adds Toaster.tsx & css module support

* Converted context and textInput

* Converted cache, commentsReducer, constants, stageReducer

* Updated connectionCalculator

* Converted Draggable component

* Converted Checkbox

* Converted connections container

* Converted Connection

* Converted ContextMenu

* Converted Select

* Converted NodesReducer & Control

* Converted Comment

* Converted Stage

* Converted Color Picker

* Converted IoPorts

* Tightened up typebuilder types

* Converted Node

* Converted NodeEditor

* Stage cleanup

* Converted root engine

* Added basic documentation on types

* port type builder config is now optional

* v1.0.0-0

* Fixed types for control builders

* Moved useRootEngine to its own file

* v1.0.1-0

* Exported colors object now autocompletes correctly

* Context is now an optional prop of useRootEngine

* v1.0.2-0

* Fixed type for custom render functions

* v1.0.2-1

* v1.0.2-2

* Lightened default theme and updated docs

* Fixed bug preventing color picker

* Published 1.0.2-3

* v1.0.2-4

---------

Co-authored-by: Christopher Patty <[email protected]>

.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;