Fixed js error with missing workspace xml.

Make sure that predefined assets url are handled correctly according their running env like test, local and prod.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coding-with-chrome",
-  "version": "10.3.1",
+  "version": "10.3.2",
   "description": "Educational Coding Development Environment",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
   "devDependencies": {
     "@babel/cli": "^7.22.9",
     "@babel/core": "^7.22.9",
-    "@babel/node": "^7.22.5",
+    "@babel/node": "^7.22.6",
     "@babel/plugin-syntax-jsx": "^7.22.5",
     "@babel/plugin-transform-runtime": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
@@ -27,14 +27,14 @@
     "@codemirror/state": "^6.2.1",
     "@emotion/styled": "^11.11.0",
     "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
-    "@mui/icons-material": "^5.14.0",
-    "@mui/material": "^5.14.0",
+    "@mui/icons-material": "^5.14.1",
+    "@mui/material": "^5.14.1",
     "@mui/styled-engine": "^5.13.2",
     "@svgr/webpack": "^8.0.1",
     "@types/react": "^18.2.15",
     "@types/serviceworker-webpack-plugin": "^1.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
     "@uiw/react-codemirror": "^4.21.7",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
@@ -43,8 +43,8 @@
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "emoji-picker-react": "^4.4.9",
-    "eslint": "^8.44.0",
+    "emoji-picker-react": "^4.4.10",
+    "eslint": "^8.45.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-compat": "^4.1.4",
@@ -72,14 +72,14 @@
     "mini-css-extract-plugin": "^2.7.6",
     "npm": "^9.8.0",
     "phaser": "^3.60.0",
-    "playwright": "^1.36.0",
+    "playwright": "^1.36.1",
     "prettier": "^3.0.0",
     "react": "^18.2.0",
     "react-blockly": "^7.2.2",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.0.2",
     "react-mosaic-component": "^6.0.1",
-    "react-router-dom": "^6.14.1",
+    "react-router-dom": "^6.14.2",
     "react-winbox": "^1.5.0",
     "sass": "^1.63.6",
     "sass-loader": "^13.3.2",
@@ -90,7 +90,7 @@
     "uglify-js": "^3.17.4",
     "url-loader": "^4.1.1",
     "uuid": "^9.0.0",
-    "webpack": "^5.88.1",
+    "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0",

src/components/BlockEditor/BlockEditor.js

@@ -205,15 +205,17 @@ export class BlockEditor extends React.PureComponent {
   }
 
   /**
-   * Refresh the block editor workspace
+   * Refresh the block editor workspace, if any.
    */
   refreshWorkspace() {
     if (this.state.blocklyWorkspace) {
       const xml = this.getXML();
-      Blockly.Xml.clearWorkspaceAndLoadFromXml(
-        Blockly.utils.xml.textToDom(xml),
-        this.getBlocklyWorkspace(),
-      );
+      if (xml) {
+        Blockly.Xml.clearWorkspaceAndLoadFromXml(
+          Blockly.utils.xml.textToDom(xml),
+          this.getBlocklyWorkspace(),
+        );
+      }
     }
   }
 

src/components/BlockEditor/blocks/StaticFilesBlocks.js

@@ -22,6 +22,8 @@
 import Blockly, { Blocks } from 'blockly';
 import { javascriptGenerator } from 'blockly/javascript';
 
+import { APP_ASSETS_BASE_PATH } from '../../../constants/index.js';
+
 /**
  * Static audio block for default embedded audios.
  */
@@ -88,8 +90,14 @@ Blocks['static_image_file'] = {
  * @return {any[]}
  */
 javascriptGenerator.forBlock['static_image_file'] = function (block) {
+  const url = block.getFieldValue('url');
+  const assetURL = url.startsWith(APP_ASSETS_BASE_PATH)
+    ? url
+    : (APP_ASSETS_BASE_PATH + url)
+        .replace('//assets', '/assets')
+        .replace('assets/assets', 'assets');
   return [
-    block.getFieldValue('url') || block.getFieldValue('urlData'),
+    assetURL || block.getFieldValue('urlData'),
     javascriptGenerator.ORDER_NONE,
   ];
 };

src/components/GameEditor/dialog/OpenGameProject.js

@@ -88,7 +88,6 @@ export class OpenGameProject extends React.PureComponent {
    */
   handleOpenProject(event) {
     if (event.currentTarget && event.currentTarget.getAttribute('value')) {
-      console.log(event.currentTarget.getAttribute('value'));
       // Update url with new project id and project name.
       window.location.hash = `#/game_editor/${event.currentTarget.getAttribute(
         'value',

src/components/Preview/Preview.js

@@ -149,7 +149,7 @@ export class Preview extends React.PureComponent {
     if (
       this.contentIframe.current.contentWindow.location.href != 'about:blank'
     ) {
-      console.log('Iframe Content Loaded:', event);
+      console.debug('Iframe Content Loaded:', event);
       this.setState({ loaded: true, loading: false });
     }
   }
@@ -189,7 +189,7 @@ export class Preview extends React.PureComponent {
       delete this.timer.handleReload;
     }
     this.timer.handleReload = window.setTimeout(() => {
-      console.log('Reloading Iframe ...');
+      console.debug('Reloading Iframe ...');
       this.setState({ loaded: false, loading: true });
       this.contentIframe.current.contentWindow.location.reload();
     }, 100);
@@ -202,7 +202,7 @@ export class Preview extends React.PureComponent {
     if (!this.contentIframe) {
       return;
     }
-    console.log('Stopping Iframe ...');
+    console.debug('Stopping Iframe ...');
     this.contentIframe.current.contentWindow.stop();
     this.contentIframe.current.contentWindow.location = 'about:blank';
     this.setState({ loaded: false, loading: false });

src/components/Settings/SettingScreen.js

@@ -77,10 +77,9 @@ export class SettingScreen extends React.PureComponent {
   }
 
   /**
-   * @param {*} event
+   *
    */
-  handleSave(event) {
-    console.log('Change Event:', event);
+  handleSave() {
     this.close();
   }
 

src/constants/index.js

@@ -24,6 +24,7 @@ export const APP_BASE_PATH =
   location && location.host.endsWith('.github.io')
     ? location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1)
     : '/';
+export const APP_ASSETS_BASE_PATH = APP_BASE_PATH + 'assets/';
 export const APP_VERSION = VERSION || 'M.B.?';
 export const PREVIEW_BASE_PATH = location
   ? location.origin + APP_BASE_PATH
@@ -34,8 +35,9 @@ export const CACHE_SERVICE_WORKER_CACHE_NAME = 'Cache';
 export const PREVIEW_SERVICE_WORKER_CACHE_NAME = 'PreviewCache';
 
 export default {
-  APP_NAME,
+  APP_ASSETS_BASE_PATH,
   APP_BASE_PATH,
+  APP_NAME,
   APP_VERSION,
   CACHE_SERVICE_WORKER_CACHE_NAME,
   PREVIEW_SERVICE_WORKER_CACHE_NAME,

src/utils/db/Database.js

@@ -87,7 +87,7 @@ export class Database {
       }
 
       // Open database and handle events.
-      console.log(
+      console.debug(
         `Opening database ${this.name_} with ${
           this.version_ || 'auto version'
         } ...`,
@@ -185,7 +185,7 @@ export class Database {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         const database = event.target.result;
-        console.log(
+        console.debug(
           `Upgrading database ${this.name_} to version ${database.version}`,
         );
         this.knownObjectStores_.forEach((objetStoreName) => {
@@ -214,7 +214,7 @@ export class Database {
         );
       }
       this.open().then(() => {
-        console.log(
+        console.debug(
           `[${this.name_}:${
             group || this.defaultObjectStore_
           }] Executing ${command}(${params})`,