Adding Svelte to the project

front/package.json

@@ -4,12 +4,14 @@
   "main": "index.js",
   "license": "SEE LICENSE IN LICENSE.txt",
   "devDependencies": {
+    "@tsconfig/svelte": "^1.0.10",
     "@types/google-protobuf": "^3.7.3",
     "@types/jasmine": "^3.5.10",
     "@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",
@@ -18,6 +20,9 @@
     "node-polyfill-webpack-plugin": "^1.1.2",
     "sass": "^1.32.12",
     "sass-loader": "^11.1.0",
+    "svelte": "^3.38.2",
+    "svelte-loader": "^3.1.1",
+    "svelte-preprocess": "^4.7.3",
     "ts-loader": "^9.1.2",
     "ts-node": "^9.1.1",
     "typescript": "^4.2.4",

front/src/Components/App.svelte

@@ -0,0 +1,6 @@
+<script lang="typescript">
+
+</script>
+
+<div>
+</div>

front/src/index.ts

@@ -21,6 +21,8 @@ import { SelectCharacterMobileScene } from './Phaser/Login/SelectCharacterMobile
 import {HdpiManager} from "./Phaser/Services/HdpiManager";
 import {waScaleManager} from "./Phaser/Services/WaScaleManager";
 import {Game} from "./Phaser/Game/Game";
+import App from './Components/App.svelte';
+import {HtmlUtils} from "./WebRtc/HtmlUtils";
 
 const {width, height} = coWebsiteManager.getGameSize();
 
@@ -147,3 +149,10 @@ coWebsiteManager.onResize.subscribe(() => {
 });
 
 iframeListener.init();
+
+const app = new App({
+    target: document.body,
+    props: { },
+})
+
+export default app

front/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
     "outDir": "./dist/",
     "sourceMap": true,

front/webpack.config.ts

@@ -1,5 +1,7 @@
 import type {Configuration} from "webpack";
 import type WebpackDevServer from "webpack-dev-server";
+import SveltePreprocess from 'svelte-preprocess';
+import Autoprefixer from 'autoprefixer';
 
 const path = require('path');
 const webpack = require('webpack');
@@ -41,10 +43,54 @@ module.exports = {
                 test: /\.scss$/,
                 use: [MiniCssExtractPlugin.loader, 'css-loader?url=false', 'sass-loader'],
             },
+            {
+                test: /\.svelte$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'svelte-loader',
+                    options: {
+                        compilerOptions: {
+                            // Dev mode must be enabled for HMR to work!
+                            dev: isDevelopment
+                        },
+                        emitCss: isProduction,
+                        hotReload: isDevelopment,
+                        hotOptions: {
+                            // List of options and defaults: https://www.npmjs.com/package/svelte-loader-hot#usage
+                            noPreserveState: false,
+                            optimistic: true,
+                        },
+                        preprocess: SveltePreprocess({
+                            scss: true,
+                            sass: true,
+                            postcss: {
+                                plugins: [
+                                    Autoprefixer
+                                ]
+                            }
+                        })
+                    }
+                }
+            },
+
+            // Required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
+            // See: https://github.com/sveltejs/svelte-loader#usage
+            {
+                test: /node_modules\/svelte\/.*\.mjs$/,
+                resolve: {
+                    fullySpecified: false
+                }
+            },
+
         ],
     },
     resolve: {
-        extensions: [ '.tsx', '.ts', '.js' ],
+        /*alias: {
+            // Note: Later in this config file, we'll automatically add paths from `tsconfig.compilerOptions.paths`
+            svelte: path.resolve('node_modules', 'svelte')
+        },*/
+        extensions: [ '.tsx', '.ts', '.js', '.svelte' ],
+        //mainFields: ['svelte', 'browser', 'module', 'main']
     },
     output: {
         filename: (pathData) => {
@@ -98,5 +144,13 @@ module.exports = {
             'MAX_PER_GROUP': 4
         })
     ],
+    stats: {
+        chunks: false,
+        chunkModules: false,
+        modules: false,
+        assets: true,
+        entrypoints: false,
+        errorDetails: false
+    }
 
 } as Configuration & WebpackDevServer.Configuration;