visible graph in cytoscape, fix some bundling issues

.vscode/launch.json

@@ -9,6 +9,7 @@
             // Debug current file in VSCode
             "program": "${workspaceFolder}/server/bin/www.js",
 
+            "cwd": "${workspaceFolder}/server/",
             /*
             Path to tsx binary
             Assuming locally installed
@@ -35,4 +36,4 @@
             ],
         }
     ]
-}
+}

frontend/src/graph.ts

@@ -0,0 +1,21 @@
+import * as cytoscape from "cytoscape";
+
+export class ThingGraph {
+    private cy;
+    public constructor() {
+        this.cy = cytoscape({
+            container: document.getElementById("cy"),
+            elements: [
+                { data: { id: "a" } },
+                { data: { id: "b" } },
+                {
+                    data: {
+                        id: "ab",
+                        source: "a",
+                        target: "b",
+                    },
+                },
+            ],
+        });
+    }
+}

frontend/src/index.ts

@@ -1,3 +1,5 @@
+import { ThingGraph } from "./graph";
+
 function component() {
     const element = document.createElement("div");
 
@@ -7,5 +9,6 @@ function component() {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+    const g = new ThingGraph();
     document.body.appendChild(component());
 });

frontend/webpack.config.js

@@ -7,22 +7,14 @@ module.exports = {
         rules: [
             {
                 test: /\.tsx?$/,
-                use: "ts-loader",
+                use: require.resolve("ts-loader"),
                 exclude: /node_modules/,
             },
         ],
     },
     resolve: {
         extensions: [".tsx", ".ts", ".js"],
-        modules: [
-            path.resolve(__dirname, "node_modules"),
-            path.resolve(__dirname, "./"),
-        ],
-    },
-    resolveLoader: {
-        extensions: [".js", ".json"],
-        mainFields: ["loader", "main"],
-        modules: [path.resolve(__dirname, "node_modules")],
+        symlinks: true,
     },
     output: {
         filename: "main.js",

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 packages:
-  - server
+  - server
+  - frontend