Merge branch 'develop' of github.com:thecodingmachine/workadventure into develop_vite

.github/workflows/continuous_integration.yml

@@ -56,6 +56,14 @@ jobs:
           ADMIN_URL: "//localhost:80"
         working-directory: "front"
 
+      - name: "Build iframe-api"
+        run: yarn run build-iframe-api
+        working-directory: "front"
+
+      - name: "Typecheck"
+        run: yarn run typecheck
+        working-directory: "front"
+
       - name: "Svelte check"
         run: yarn run svelte-check
         working-directory: "front"
@@ -165,4 +173,3 @@ jobs:
       - name: "Prettier"
         run: yarn run pretty-check
         working-directory: "back"
-

.github/workflows/push-to-npm.yml

@@ -22,31 +22,10 @@ jobs:
         run: cat package.json
         working-directory: "front/packages/iframe-api-typings"
 
-      - name: Install Protoc
-        uses: arduino/setup-protoc@v1
-        with:
-          version: '3.x'
-
       - name: "Install dependencies"
         run: yarn install
         working-directory: "front"
 
-      - name: "Install messages dependencies"
-        run: yarn install
-        working-directory: "messages"
-
-      - name: "Build proto messages"
-        run: yarn run ts-proto && yarn run copy-to-front-ts-proto && yarn run json-copy-to-front
-        working-directory: "messages"
-
-      - name: "Create index.html"
-        run: ./templater.sh
-        working-directory: "front"
-
-      - name: "Generate i18n files"
-        run: yarn run typesafe-i18n
-        working-directory: "front"
-
       - name: "Build"
         run: yarn run build-typings
         env:
@@ -54,13 +33,6 @@ jobs:
           ADMIN_URL: "//localhost:80"
         working-directory: "front"
 
-      # We build the front to generate the typings of iframe_api, then we copy those typings in a separate package.
-      - name: Copy typings to package dir
-        run: cp front/dist/src/iframe_api.d.ts front/packages/iframe-api-typings/iframe_api.d.ts
-
-      - name: Copy typings to package dir (2)
-        run: cp -R front/dist/src/Api front/packages/iframe-api-typings/Api
-
       - name: Install dependencies in package
         run: yarn install
         working-directory: "front/packages/iframe-api-typings"

docker-compose.yaml

@@ -52,7 +52,6 @@ services:
       MAX_USERNAME_LENGTH: "$MAX_USERNAME_LENGTH"
       DISABLE_ANONYMOUS: "$DISABLE_ANONYMOUS"
       OPID_LOGIN_SCREEN_PROVIDER: "$OPID_LOGIN_SCREEN_PROVIDER"
-      LIVE_RELOAD: "$LIVE_RELOAD:-true"
     command: yarn run start
     volumes:
       - ./front:/usr/src/app

front/.gitignore

@@ -1,16 +1,7 @@
 /node_modules/
-/dist/*.js
-/dist/*.js.map
-/dist/*.js.LICENSE.txt
-/dist/main.*.css
-/dist/main.*.css.map
-/dist/tests/
+dist/
 /yarn-error.log
 /package-lock.json
-/dist/webpack.config.js
-/dist/webpack.config.js.map
-/dist/src
-/dist/fonts
-/dist/*.png
 *.sh
 !templater.sh
+/public/iframe_api.js

front/dist/.gitignore

@@ -1,7 +0,0 @@
-index.html
-/js/
-/fonts/
-style.*.css
-!env-config.template.js
-*.png
-!/resources/**

front/dist/env-config.template.js

@@ -1,27 +0,0 @@
-window.env = {
-    SKIP_RENDER_OPTIMIZATIONS: '${SKIP_RENDER_OPTIMIZATIONS}',
-    DISABLE_NOTIFICATIONS: '${DISABLE_NOTIFICATIONS}',
-    PUSHER_URL: '${PUSHER_URL}',
-    UPLOADER_URL: '${UPLOADER_URL}',
-    ADMIN_URL: '${ADMIN_URL}',
-    CONTACT_URL: '${CONTACT_URL}',
-    PROFILE_URL: '${PROFILE_URL}',
-    ICON_URL: '${ICON_URL}',
-    DEBUG_MODE: '${DEBUG_MODE}',
-    STUN_SERVER: '${STUN_SERVER}',
-    TURN_SERVER: '${TURN_SERVER}',
-    TURN_USER: '${TURN_USER}',
-    TURN_PASSWORD: '${TURN_PASSWORD}',
-    JITSI_URL: '${JITSI_URL}',
-    JITSI_PRIVATE_MODE: '${JITSI_PRIVATE_MODE}',
-    START_ROOM_URL: '${START_ROOM_URL}',
-    MAX_USERNAME_LENGTH: '${MAX_USERNAME_LENGTH}',
-    MAX_PER_GROUP: '${MAX_PER_GROUP}',
-    DISPLAY_TERMS_OF_USE: '${DISPLAY_TERMS_OF_USE}',
-    POSTHOG_API_KEY: '${POSTHOG_API_KEY}',
-    POSTHOG_URL: '${POSTHOG_URL}',
-    NODE_ENV: '${NODE_ENV}',
-    DISABLE_ANONYMOUS: '${DISABLE_ANONYMOUS}',
-    OPID_LOGIN_SCREEN_PROVIDER: '${OPID_LOGIN_SCREEN_PROVIDER}',
-    FALLBACK_LOCALE: '${FALLBACK_LOCALE}',
-};

front/dist/iframe.html

@@ -1,22 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <script src="/iframe_api.js" ></script>
-    <script>
-        // Note: this is a huge XSS flow as we allow anyone to load a Javascript file in our domain.
-        // This file must ABSOLUTELY be removed from the Docker images/deployments and is only here
-        // for development purpose (because dynamically generated iframes are not working with
-        // webpack hot reload due to an issue with rights)
-        const urlParams = new URLSearchParams(window.location.search);
-        const scriptUrl = urlParams.get('script');
-        const script = document.createElement('script');
-        script.type = "module";
-        script.src = scriptUrl;
-
-        if (urlParams.get('moduleMode') === 'true') {
-            script.type = "module";
-        }
-        document.head.append(script);
-    </script>
-    </head>
-</html>

front/dist/resources/fonts/fonts.css

@@ -1,5 +0,0 @@
-/*This file is a workaround to allow phaser to load directly this font */
-@font-face {
-    font-family: "Press Start 2P";
-    src: url("/fonts/press-start-2p-latin-400-normal.woff2") format('woff2');
-}

front/iframe-api.vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+
+export default defineConfig({
+    publicDir: false,
+    build: {
+        outDir: "public",
+        emptyOutDir: false,
+        lib: {
+            entry: resolve(__dirname, "src/iframe_api.ts"),
+            name: "iframe_api",
+            formats: ["cjs"],
+            fileName: () => "iframe_api.js",
+        },
+    },
+});

front/index.html

@@ -27,8 +27,8 @@
         <meta name="msapplication-TileImage" content="static/images/favicons/ms-icon-144x144.png">
         <meta name="theme-color" content="#000000">
 
-        <script src="/env-config.js"></script>
         <base href="/">
+        <style>/*hide cowebsite container before scss is loaded*/#cowebsite { visibility: collapse };</style>
 
         <title>Partey</title>
     </head>
@@ -63,5 +63,6 @@
             </div>
             <div id="cowebsite-buffer"></div>
         </div>
+        <script type="module" src="/src/index.ts"></script>
     </body>
 </html>

front/package.json

@@ -4,42 +4,32 @@
   "main": "index.js",
   "license": "SEE LICENSE IN LICENSE.txt",
   "devDependencies": {
+    "@geprog/vite-plugin-env-config": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
     "@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/uuidv4": "^5.0.0",
-    "@types/webpack-dev-server": "^3.11.4",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
-    "css-loader": "^5.2.4",
-    "css-minimizer-webpack-plugin": "^3.3.1",
     "eslint": "^8.4.1",
     "eslint-plugin-svelte3": "^3.2.1",
-    "fork-ts-checker-webpack-plugin": "^6.5.0",
-    "html-webpack-plugin": "^5.3.1",
     "jasmine": "^3.5.0",
     "lint-staged": "^11.0.0",
-    "mini-css-extract-plugin": "^1.6.0",
-    "node-polyfill-webpack-plugin": "^1.1.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.1",
     "prettier-plugin-svelte": "^2.5.0",
-    "sass": "^1.32.12",
-    "sass-loader": "^11.1.0",
-    "svelte": "^3.38.2",
+    "sass": "^1.49.7",
+    "svelte": "^3.46.3",
     "svelte-check": "^2.1.0",
-    "svelte-loader": "^3.1.1",
-    "svelte-preprocess": "^4.7.3",
-    "ts-loader": "^9.2.6",
+    "svelte-preprocess": "^4.10.2",
     "ts-node": "^10.4.0",
     "tsconfig-paths": "^3.9.0",
     "typescript": "^4.5.3",
-    "webpack": "^5.37.0",
-    "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2"
+    "vite": "^2.7.13",
+    "vite-plugin-rewrite-all": "^0.1.2"
   },
   "dependencies": {
     "@16bits/nes.css": "^2.3.2",
@@ -48,13 +38,13 @@
     "@types/simple-peer": "^9.11.1",
     "@types/socket.io-client": "^1.4.32",
     "axios": "^0.21.2",
+    "buffer": "^6.0.3",
     "cancelable-promise": "^4.2.1",
     "cross-env": "^7.0.3",
     "deep-copy-ts": "^0.5.0",
     "easystarjs": "^0.4.4",
-    "generic-type-guard": "^3.2.0",
+    "generic-type-guard": "^3.4.2",
     "google-protobuf": "^3.13.0",
-    "nes.css": "^2.3.0",
     "phaser": "^3.54.0",
     "phaser-animated-tiles": "workadventure/phaser-animated-tiles#da68bbededd605925621dd4f03bd27e69284b254",
     "phaser3-rex-plugins": "^1.1.42",
@@ -74,11 +64,13 @@
     "zod": "^3.11.6"
   },
   "scripts": {
-    "start": "run-p templater serve svelte-check-watch typesafe-i18n-watch",
+    "start": "run-p templater serve watch-iframe-api svelte-check-watch typesafe-i18n-watch",
     "templater": "cross-env ./templater.sh",
-    "serve": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
-    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production webpack",
-    "build-typings": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production BUILD_TYPINGS=1 webpack",
+    "serve": "cross-env vite --host",
+    "build": "cross-env vite build",
+    "build-iframe-api": "vite --config iframe-api.vite.config.ts build",
+    "watch-iframe-api": "yarn run build-iframe-api --watch",
+    "build-typings": "cross-env tsc --project tsconfig-for-iframe-api-typings.json",
     "test": "cross-env TS_NODE_PROJECT=\"tsconfig-for-jasmine.json\" ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
     "lint": "node_modules/.bin/eslint src/ tests/ --ext .ts,.svelte",
     "fix": "node_modules/.bin/eslint --fix src/ tests/ --ext .ts,.svelte",
@@ -87,6 +79,7 @@
     "svelte-check": "svelte-check --fail-on-warnings --fail-on-hints --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore,a11y-media-has-caption:ignore\"",
     "pretty": "yarn prettier --write 'src/**/*.{ts,svelte}'",
     "pretty-check": "yarn prettier --check 'src/**/*.{ts,svelte}'",
+    "typecheck": "tsc --noEmit",
     "typesafe-i18n": "typesafe-i18n  --no-watch",
     "typesafe-i18n-watch": "typesafe-i18n"
   },

front/packages/iframe-api-typings/.gitignore

@@ -1 +1 @@
-iframe_api.d.ts
+*.d.ts