Adding correct SCSS file integration with Svelte

front/dist/resources/style/cowebsite.scss

@@ -4,7 +4,7 @@
   position: fixed;
   transition: transform 0.5s;
   background-color: white;
-  
+
   &.loading {
     background-color: gray;
   }
@@ -15,7 +15,7 @@
       height: 100%;
     }
   }
-  
+
   aside {
     background: gray;
     align-items: center;
@@ -32,7 +32,7 @@
     position: absolute;
     background: none;
     border: none;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 
     img {
       height: 25px;

front/dist/resources/style/style.css

@@ -1,9 +1,9 @@
 *{
     font-family: 'Open Sans', sans-serif;
-    cursor: url('/resources/logos/cursor_normal.png'), auto;
+    cursor: url('../logos/cursor_normal.png'), auto;
 }
 * a, button, select{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 body{
     overflow: hidden;
@@ -39,7 +39,7 @@ body .message-info.warning{
     position: relative;
     transition: all 0.2s ease;
     background-color: #00000099;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 .video-container i{
     position: absolute;
@@ -75,7 +75,7 @@ body .message-info.warning{
 
 .video-container button.report{
     display: block;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     background: none;
     background-color: rgba(0, 0, 0, 0);
     border: none;
@@ -108,7 +108,7 @@ body .message-info.warning{
     left: 5px;
     margin: 0;
     padding: 0;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     width: 25px;
     height: 25px;
 }
@@ -118,7 +118,7 @@ body .message-info.warning{
     left: 36px;
     color: white;
     font-size: 16px;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 .video-container img.active {
     display: block !important;
@@ -126,7 +126,7 @@ body .message-info.warning{
 
 .video-container video{
     height: 100%;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 
 .video-container video:focus{
@@ -206,7 +206,7 @@ video#myCamVideo{
 }
 /*btn animation*/
 .btn-cam-action div{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     /*position: absolute;*/
     border: solid 0px black;
     width: 44px;
@@ -260,7 +260,7 @@ video#myCamVideo{
     top: calc(48px - 37px);
     left: calc(48px - 41px);
     position: relative;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 
 /* Spinner */
@@ -572,7 +572,7 @@ input[type=range]:focus::-ms-fill-upper {
     margin: 2%;
     flex-basis: 96%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     pointer-events: auto;
     /*flex-shrink: 2;*/
 }
@@ -590,7 +590,7 @@ input[type=range]:focus::-ms-fill-upper {
 .sidebar > div {
     margin: 2%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     border-radius: 15px 15px 15px 15px;
     pointer-events: auto;
 }
@@ -600,7 +600,7 @@ input[type=range]:focus::-ms-fill-upper {
 }
 
 .sidebar > div video {
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 
 /* Let's make sure videos are vertically centered if they need to be cropped */
@@ -625,7 +625,7 @@ input[type=range]:focus::-ms-fill-upper {
     margin: 1%;
     max-height: 96%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 
 .chat-mode > div:hover {
@@ -715,7 +715,7 @@ input[type=range]:focus::-ms-fill-upper {
     margin-top: 6px;
     width: 30px;
     height: 30px;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     padding: 0 5px;
     transition: all .5s ease;
     transform: rotateY(0);
@@ -739,7 +739,7 @@ input[type=range]:focus::-ms-fill-upper {
 
 .main-console div.console:hover,
 .message-container div.clear:hover {
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     top: calc(100% + 5px);
     transform: scale(1.2) translateY(3px);
 }
@@ -772,7 +772,7 @@ input[type=range]:focus::-ms-fill-upper {
     transition: all .2s ease;
 }
 .main-console .btn-action .btn:hover{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     background-color: #ffda01;
     color: black;
     border: 1px solid black;
@@ -787,7 +787,7 @@ input[type=range]:focus::-ms-fill-upper {
 
 .main-console .menu span {
     margin: 20px;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 
 .main-console .menu span.active {
@@ -821,10 +821,10 @@ input[type=range]:focus::-ms-fill-upper {
 }
 .main-console section div.upload label img{
     height: 150px;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 .main-console section div.upload label img{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 
 
@@ -917,7 +917,7 @@ div.modal-report-user{
     right: 0;
     left: auto;
     top: 0;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     width: 15px;
     height: 15px;
     margin: 10px;
@@ -936,7 +936,7 @@ div.modal-report-user{
     transition: all .2s ease;
 }
 .modal-report-user button:hover{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     background-color: #ffda01;
     color: black;
     border: 1px solid black;
@@ -979,7 +979,7 @@ div.modal-report-user{
 }
 .discussion .active-btn{
     display: none;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     height: 50px;
     width: 50px;
     background-color: #2d2d2dba;
@@ -1008,7 +1008,7 @@ div.modal-report-user{
     right: 10px;
     background: none;
     border: none;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 .discussion .close-btn img{
     height: 15px;
@@ -1033,7 +1033,7 @@ div.modal-report-user{
     background-color: #ffffff69;
     padding: 5px;
     border-radius: 15px;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
 }
 
 .discussion .participants .participant:hover{
@@ -1066,7 +1066,7 @@ div.modal-report-user{
 }
 
 .discussion .participants .participant button.report-btn{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     position: absolute;
     background-color: #2d2d2dba;
     right: 34px;
@@ -1176,7 +1176,7 @@ div.action.danger{
     animation-timing-function: ease-in-out;
 }
 div.action p.action-body{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('../logos/cursor_pointer.png'), pointer;
     padding: 10px;
     background-color: #2d2d2dba;
     color: #fff;

front/package.json

@@ -7,11 +7,12 @@
     "@tsconfig/svelte": "^1.0.10",
     "@types/google-protobuf": "^3.7.3",
     "@types/jasmine": "^3.5.10",
+    "@types/mini-css-extract-plugin": "^1.4.3",
+    "@types/node": "^15.3.0",
     "@types/quill": "^1.3.7",
     "@types/webpack-dev-server": "^3.11.4",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
-    "autoprefixer": "^10.2.5",
     "css-loader": "^5.2.4",
     "eslint": "^7.26.0",
     "html-webpack-plugin": "^5.3.1",
@@ -25,6 +26,7 @@
     "svelte-preprocess": "^4.7.3",
     "ts-loader": "^9.1.2",
     "ts-node": "^9.1.1",
+    "tsconfig-paths": "^3.9.0",
     "typescript": "^4.2.4",
     "webpack": "^5.37.0",
     "webpack-cli": "^4.7.0",
@@ -45,9 +47,9 @@
     "socket.io-client": "^2.3.0"
   },
   "scripts": {
-    "start": "webpack serve --open",
-    "build": "NODE_ENV=production webpack",
-    "test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
+    "start": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
+    "build": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production webpack",
+    "test": "TS_NODE_PROJECT=\"tsconfig-for-jasmine.json\" ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
     "lint": "node_modules/.bin/eslint src/ . --ext .ts",
     "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts"
   }

front/src/Components/Menu/MenuIcon.svelte

@@ -10,17 +10,17 @@
     </section>
 </main>
 
-<style>
+<style lang="scss">
     .menuIcon button {
         background-color: black;
         color: white;
         border-radius: 7px;
         padding: 2px 8px;
-    }
-    .menuIcon button img{
-        width: 14px;
-        padding-top: 0;
-        /*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/
+        img {
+            width: 14px;
+            padding-top: 0;
+            /*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/
+        }
     }
     .menuIcon section {
         margin: 10px;

front/src/WebRtc/Stores/RequestedConstraintsStore.ts

@@ -1,22 +0,0 @@
-import { derived, writable, Writable } from "svelte/store";
-
-class RequestedConstraintsStore {
-    constructor(
-        public camera: Writable<boolean> = writable(false),
-        public microphone: Writable<boolean> = writable(false),
-    ) { }
-
-    get fullname() {
-        // Use derived to access writable values and export as readonly
-        return derived(
-            [this.camera, this.microphone],
-            ([$camera, $microphone]) => {
-                console.log("cam or mic", $camera || $microphone)
-                return $camera || $microphone;
-            }
-        )
-    }
-}
-
-// Export a singleton
-export const myFormStore = new MyFormStore();

front/tsconfig-for-jasmine.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["./src/**/*", "./tests/**/*"],
+  "compilerOptions": {
+    "module": "CommonJS",
+    "lib": ["es2015","dom"],
+  }
+}

front/tsconfig-for-webpack.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "esModuleInterop": true
+  }
+}

front/tsconfig.json

@@ -1,10 +1,13 @@
 {
+//  "include": ["src/**/*", "webpack.config.ts"],
+
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
     "outDir": "./dist/",
     "sourceMap": true,
     "moduleResolution": "node",
-    "module": "CommonJS",
+    //"module": "CommonJS",
+    "module": "ESNext",
     "target": "ES2017",
     "declaration": false,
     "downlevelIteration": true,

front/webpack.config.ts

@@ -1,13 +1,21 @@
 import type {Configuration} from "webpack";
 import type WebpackDevServer from "webpack-dev-server";
-import SveltePreprocess from 'svelte-preprocess';
-import Autoprefixer from 'autoprefixer';
+//import SveltePreprocess from 'svelte-preprocess';
+//import Autoprefixer from 'autoprefixer';
+//import autoPreprocess from 'svelte-preprocess';
 
-const path = require('path');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
+import path from 'path';
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import sveltePreprocess from 'svelte-preprocess';
+import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
+
+//const path = require('path');
+//const webpack = require('webpack');
+//const HtmlWebpackPlugin = require('html-webpack-plugin');
+//const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+//const sveltePreprocess = require('svelte-preprocess');
 
 const mode = process.env.NODE_ENV ?? 'development';
 const isProduction = mode === 'production';
@@ -41,7 +49,27 @@ module.exports = {
             },
             {
                 test: /\.scss$/,
-                use: [MiniCssExtractPlugin.loader, 'css-loader?url=false', 'sass-loader'],
+                use: [
+                    MiniCssExtractPlugin.loader, {
+                        loader: 'css-loader',
+                        /*options: {
+                            url: false,
+                            sourceMap: true
+                        }*/
+                    }, 'sass-loader'],
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        /*options: {
+                            url: false,
+                            sourceMap: true
+                        }*/
+                    }
+                ]
             },
             {
                 test: /\.(html|svelte)$/,
@@ -60,13 +88,19 @@ module.exports = {
                             noPreserveState: false,
                             optimistic: true,
                         },
+                        //preprocess: autoPreprocess({}),
+                        preprocess: sveltePreprocess({
+                            scss: true,
+                            sass: true,
+                        })
+
                         // FIXME: SveltePreprocess does not work here
                         /*preprocess: SveltePreprocess({
                             scss: true,
                             sass: true,
                             postcss: {
                                 plugins: [
-                                    Autoprefixer
+                                    //Autoprefixer
                                 ]
                             }
                         })*/
@@ -82,7 +116,10 @@ module.exports = {
                     fullySpecified: false
                 }
             },
-
+            {
+                test: /\.(ttf|eot|svg|png|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                type: 'asset/resource'
+            }
         ],
     },
     resolve: {
@@ -105,7 +142,8 @@ module.exports = {
         require('webpack-require-http')
     ],*/
     plugins: [
-        new MiniCssExtractPlugin({filename: 'style.[contenthash].css'}),
+        new webpack.HotModuleReplacementPlugin(),
+        new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
         new HtmlWebpackPlugin(
             {
                 template: './dist/index.tmpl.html.tmp',
@@ -150,7 +188,7 @@ module.exports = {
         modules: false,
         assets: true,
         entrypoints: false,
-        errorDetails: false
+        errorDetails: false,
     }
 
 } as Configuration & WebpackDevServer.Configuration;