feat: establish socket.io connection

Author: ngfelixl

NOTES.md

@@ -1,16 +1,19 @@
 These are notes for the stream implementation of Nodeplotlib.
 
 ## General
+
 - A plot window (**apps/web**) tries to connect to the server via a realtime api (e.g. websockets).
 - The server recognizes the count of connected apps.
 - If the user executes the `plot` function several times, it will only open a window if there is no
   open connection to a **apps/web**.
 
 ## Server lifecycle
+
 - The server starts with the execution of the `plot` function if there is no active server running.
 - The server stops if all **apps/web** are disconnected (and there were connections before).
 
 ## The plot function
+
 - The plot function can either handle a `Plot` or an `Observable<Plot>`.
   - It creates an `Observable<Plot>` by using Rxjs' `of` observable constructor.
 - The plot streams are saved in a Plots Set.
@@ -21,13 +24,25 @@ These are notes for the stream implementation of Nodeplotlib.
   the server as mentioned in the **server lifecycle** section.
 
 ## The stack function
+
 - Is the `stack` function really needed? Stack served the purpose that only one window opens which
   could display several plots.
 
 ## Backlog
+
 - The user can remove plots from the frontend. If that happened it submits a message to the
   backend so that the subscription can be cancelled and the plot stream can be removed from the plots set.
 
 ## Frontend only
+
 - The user has the possibility to rearrange plots per drag and drop.
-- The user can resize the individual plot windows.
+- The user can resize the individual plot windows.
+
+## Development
+
+To start the app for development purposes run
+
+```
+npm run build web -- --watch
+npm start dev-server
+```

angular.json

@@ -1,6 +1,39 @@
 {
   "version": 1,
   "projects": {
+    "core": {
+      "root": "libs/core",
+      "sourceRoot": "libs/core/src",
+      "projectType": "library",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/node:package",
+          "outputs": ["{options.outputPath}"],
+          "options": {
+            "outputPath": "dist/libs/core",
+            "tsConfig": "libs/core/tsconfig.lib.json",
+            "packageJson": "libs/core/package.json",
+            "main": "libs/core/src/index.ts",
+            "assets": ["libs/core/*.md"]
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "outputs": ["{options.outputFile}"],
+          "options": {
+            "lintFilePatterns": ["libs/core/**/*.ts"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/core"],
+          "options": {
+            "jestConfig": "libs/core/jest.config.js",
+            "passWithNoTests": true
+          }
+        }
+      }
+    },
     "dev-server": {
       "root": "apps/dev-server",
       "sourceRoot": "apps/dev-server/src",
@@ -13,7 +46,14 @@
             "outputPath": "dist/apps/dev-server",
             "main": "apps/dev-server/src/main.ts",
             "tsConfig": "apps/dev-server/tsconfig.app.json",
-            "assets": ["apps/dev-server/src/assets"]
+            "assets": [
+              "apps/dev-server/src/assets",
+              {
+                "glob": "**/*",
+                "input": "dist/apps/web",
+                "output": "web"
+              }
+            ]
           },
           "configurations": {
             "production": {
@@ -86,66 +126,54 @@
       }
     },
     "nodeplotlib": {
-      "root": "libs/nodeplotlib",
-      "sourceRoot": "libs/nodeplotlib/src",
-      "projectType": "library",
+      "root": "apps/nodeplotlib",
+      "sourceRoot": "apps/nodeplotlib/src",
+      "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@nrwl/node:package",
+          "builder": "@nrwl/node:build",
           "outputs": ["{options.outputPath}"],
           "options": {
-            "outputPath": "dist/libs/nodeplotlib",
-            "tsConfig": "libs/nodeplotlib/tsconfig.lib.json",
-            "packageJson": "libs/nodeplotlib/package.json",
-            "main": "libs/nodeplotlib/src/index.ts",
-            "assets": ["libs/nodeplotlib/*.md"]
-          }
-        },
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "outputs": ["{options.outputFile}"],
-          "options": {
-            "lintFilePatterns": ["libs/nodeplotlib/**/*.ts"]
+            "outputPath": "dist/apps/nodeplotlib",
+            "main": "apps/nodeplotlib/src/main.ts",
+            "tsConfig": "apps/nodeplotlib/tsconfig.app.json",
+            "assets": [
+              "apps/nodeplotlib/src/assets",
+              "apps/nodeplotlib/src/package.json"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "extractLicenses": true,
+              "inspect": false,
+              "fileReplacements": [
+                {
+                  "replace": "apps/nodeplotlib/src/environments/environment.ts",
+                  "with": "apps/nodeplotlib/src/environments/environment.prod.ts"
+                }
+              ]
+            }
           }
         },
-        "test": {
-          "builder": "@nrwl/jest:jest",
-          "outputs": ["coverage/libs/nodeplotlib"],
-          "options": {
-            "jestConfig": "libs/nodeplotlib/jest.config.js",
-            "passWithNoTests": true
-          }
-        }
-      }
-    },
-    "server": {
-      "root": "libs/server",
-      "sourceRoot": "libs/server/src",
-      "projectType": "library",
-      "architect": {
-        "build": {
-          "builder": "@nrwl/node:package",
-          "outputs": ["{options.outputPath}"],
+        "serve": {
+          "builder": "@nrwl/node:execute",
           "options": {
-            "outputPath": "dist/libs/server",
-            "tsConfig": "libs/server/tsconfig.lib.json",
-            "packageJson": "libs/server/package.json",
-            "main": "libs/server/src/index.ts",
-            "assets": ["libs/server/*.md"]
+            "buildTarget": "nodeplotlib:build"
           }
         },
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "outputs": ["{options.outputFile}"],
           "options": {
-            "lintFilePatterns": ["libs/server/**/*.ts"]
+            "lintFilePatterns": ["apps/nodeplotlib/**/*.ts"]
           }
         },
         "test": {
           "builder": "@nrwl/jest:jest",
-          "outputs": ["coverage/libs/server"],
+          "outputs": ["coverage/apps/nodeplotlib"],
           "options": {
-            "jestConfig": "libs/server/jest.config.js",
+            "jestConfig": "apps/nodeplotlib/jest.config.js",
             "passWithNoTests": true
           }
         }

apps/dev-server/src/main.ts

@@ -3,17 +3,6 @@
  * This is only a minimal backend to get started.
  */
 
-import { NestFactory } from '@nestjs/core';
-import { ServerModule } from '@npl/server';
+import { bootstrap, plot } from '@npl/core';
 
-async function bootstrap() {
-  const app = await NestFactory.create(ServerModule);
-  app.enableCors();
-  await app.listen(3333);
-  console.log(
-    'Server runnng at',
-    `http://localhost:${app.getHttpServer().address().port}`
-  );
-}
-
-bootstrap();
+plot([]);

libs/nodeplotlib/.eslintrc.json renamed to apps/nodeplotlib/.eslintrc.json

@@ -8,8 +8,8 @@ module.exports = {
   },
   testEnvironment: 'node',
   transform: {
-    '^.+\\.[tj]sx?$': 'ts-jest',
+    '^.+\\.[tj]s$': 'ts-jest',
   },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/libs/nodeplotlib',
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/apps/nodeplotlib',
 };

libs/nodeplotlib/jest.config.js renamed to apps/nodeplotlib/jest.config.js

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};

libs/.gitkeep renamed to apps/nodeplotlib/src/app/.gitkeep

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false,
+};

apps/nodeplotlib/src/assets/.gitkeep

@@ -0,0 +1 @@
+export { plot, Plot, Layout } from '@npl/core';