Add typescript

package-lock.json

@@ -23,6 +23,16 @@
         "resolve": "^1.17.0"
       }
     },
+    "@rollup/plugin-typescript": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-5.0.2.tgz",
+      "integrity": "sha512-CkS028Itwjqm1uLbFVfpJgtVtnNvZ+og/m6UlNRR5wOOnNTWPcVQzOu5xGdEX+WWJxdvWIqUq2uR/RBt2ZipWg==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.1",
+        "resolve": "^1.14.1"
+      }
+    },
     "@rollup/pluginutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -133,6 +143,18 @@
       "requires": {
         "fsevents": "~2.1.2"
       }
+    },
+    "tslib": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+      "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==",
+      "dev": true
+    },
+    "typescript": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.2.tgz",
+      "integrity": "sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==",
+      "dev": true
     }
   }
 }

package.json

@@ -12,7 +12,10 @@
   "license": "ISC",
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^9.0.0",
-    "rollup": "^2.26.4"
+    "@rollup/plugin-typescript": "^5.0.2",
+    "rollup": "^2.26.4",
+    "tslib": "^2.0.1",
+    "typescript": "^4.0.2"
   },
   "dependencies": {
     "@mdi/js": "^5.5.55",

rollup.config.js

@@ -1,4 +1,5 @@
 import resolve from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
 
 export default {
   input: "./src/main.js",
@@ -8,5 +9,5 @@ export default {
       format: "cjs"
     }
   ],
-  plugins: [resolve()]
+  plugins: [resolve(), typescript()]
 };

src/script-graph.ts

@@ -45,12 +45,21 @@ const ICONS = {
 
 class ScriptGraph extends LitElement {
 
-  static get properties() {
-    return {
-      tree: {},
-      selected: {},
-    };
-  }
+  /*
+   * GOAL:
+   * Tree Node Structure
+   * {
+   *    icon: svg,
+   *    end: false
+   *    children: [[TreeNode],...]
+   *    click: callback,undefined
+   *    add: callback,undefined
+   * }
+   */
+
+  @property() selected = undefined;
+  @property() tree;
+
 
   _select(idx) {
     this.selected = idx;

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": false
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}