Merge pull request #757 from parallaxinc/merge_1.0.7

Release 1.7.0

.github/workflows/solo-develop.yml

@@ -1,4 +1,4 @@
-name: Solo Test
+name: Solo-Test
 
 on:
   push:

.gitignore

@@ -29,3 +29,6 @@ dist
 # SASS outputs
 src/scss/*.css
 src/scss/*.map
+
+# Shell scripts
+*.sh

package.json

@@ -1,16 +1,16 @@
 {
   "name": "blocklyprop-solo",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "A simplified implementation of Google's Blockly project configured to support Parallax robots and sensors.",
-  "main": "load_images.js",
+  "main": "./index.js",
   "scripts": {
-    "compile:sass": "sass sass/main.scss dist/main.css -w",
-    "dev": "npm run build:sass; webpack --config webpack/dev.config.js --node-env development --watch",
+    "compile:sass": "sass src/scss/main.scss dist/main.css",
+    "dev": "rm -rdf ./dist/*; npm run build:sass; webpack --config webpack/dev.config.js --node-env development",
     "dev:analyze": "npm run dev -- --env.addons=bundleanalyzer",
-    "build": "webpack --config webpack/prod.config.js --node-env production --stats",
-    "build:deploy": "rm -rdf ./dist/*; npm run build:sass;  webpack --config webpack/prod.config.js --node-env production --stats",
+    "build": "SOLO_DEV_MODE=false; SOLO_RELEASE=1.7.0; npm run build:sass; webpack --config webpack/prod.config.js --node-env production --stats",
+    "build:deploy": "rm -rdf ./dist/*; npm run build:sass; SOLO_DEV_MODE=false webpack --config webpack/prod.config.js --node-env production --stats",
     "build:analyze": "npm run build -- --env.addons=bundleanalyzer",
-    "build:sass": "npx sass src/scss/main.scss dist/main.css",
+    "build:sass": "npx sass src/scss/main.scss src/scss/main.css",
     "build:test": "ls ./dist/*",
     "lint": "eslint \"src/modules/**/*.js\"",
     "profile": "webpack --profile --json --config webpack/dev.config.js > stats.json",
@@ -33,56 +33,67 @@
   },
   "homepage": "https://github.com/parallaxinc/solo#readme",
   "dependencies": {
-    "@mapbox/node-pre-gyp": "^1.0.4",
-    "@sentry/browser": "^6.10.0",
-    "@sentry/tracing": "^6.10.0",
+    "@mapbox/node-pre-gyp": "^1.0.7",
     "ace-builds": "^1.4.8",
-    "blockly": "^3.20191014.4",
-    "bootbox": "^5.4.0",
-    "bootstrap": "^3.4.1",
+    "blockly": "^3.20200924.4",
+    "bootbox": "^5.5.3",
     "chartist": "^0.11.4",
-    "dotenv": "^8.2.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "dotenv": "^8.6.0",
     "file-saver": "^2.0.5",
-    "jquery": "^3.5.1",
-    "jquery-validation": "^1.19.3",
-    "jszip": "^3.3.0",
+    "jquery": "^3.6.1",
+    "jquery-validation": "^1.19.5",
+    "jszip": "^3.10.0",
     "node-chartist": "^1.0.5",
     "stream": "0.0.2",
-    "websocket-extensions": ">=0.1.4"
+    "websocket-extensions": ">=0.1.4",
+    "workbox-background-sync": "6.5.4",
+    "workbox-broadcast-update": "6.5.4",
+    "workbox-cacheable-response": "6.5.4",
+    "workbox-core": "6.5.4",
+    "workbox-expiration": "6.5.4",
+    "workbox-navigation-preload": "6.5.4",
+    "workbox-precaching": "6.5.4",
+    "workbox-routing": "6.5.4",
+    "workbox-strategies": "6.5.4",
+    "workbox-window": "6.5.4"
   },
   "devDependencies": {
     "@types/ace": "0.0.43",
     "acorn": "^7.1.1",
-    "chai": "^4.3.4",
+    "chai": "^4.3.6",
+    "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "^7.0.0",
-    "css-loader": "^5.2.4",
+    "css-loader": "^5.2.7",
     "elliptic": "^6.5.4",
-    "eslint": "^6.6.0",
+    "eslint": "^6.8.0",
     "eslint-config-google": "^0.14.0",
-    "html-webpack-plugin": "^5.3.1",
-    "mini-css-extract-plugin": "^2.1.0",
-    "minimist": "^1.2.5",
-    "mocha": "^8.3.2",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "minimist": "^1.2.6",
+    "mocha": "^10.1.0",
     "node-env-webpack-plugin": "^1.1.0",
-    "postcss-loader": "^6.1.1",
-    "postcss-preset-env": "^6.7.0",
-    "sass": "^1.36.0",
-    "sass-loader": "^12.1.0",
-    "selenium-standalone": "^6.23.0",
-    "selenium-webdriver": "^4.0.0-alpha.7",
-    "selfsigned": "^1.10.8",
-    "sinon": "^10.0.1",
-    "style-loader": "^1.1.3",
-    "terser-webpack-plugin": "^5.1.2",
-    "urijs": "^1.19.7",
+    "postcss-loader": "^6.2.1",
+    "postcss-preset-env": "^6.7.1",
+    "sass": "^1.52.3",
+    "sass-loader": "^12.6.0",
+    "selenium-standalone": "^6.24.0",
+    "selenium-webdriver": "^4.2.0",
+    "selfsigned": "^2.0.1",
+    "sinon": "^13.0.2",
+    "style-loader": "^1.3.0",
+    "terser-webpack-plugin": "^5.3.3",
+    "urijs": "^1.19.11",
     "watchpack-chokidar2": "^2.0.1",
-    "webdriverio": "^7.5.3",
-    "webpack": "^5.47.0",
-    "webpack-bundle-analyzer": "^4.4.1",
-    "webpack-cli": "^4.7.0",
-    "webpack-merge": "^5.7.3"
+    "webdriverio": "^7.20.2",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-merge": "^5.8.0",
+    "workbox-build": "6.5.4",
+    "workbox-webpack-plugin": "^6.5.4"
   },
   "optionalDependencies": {
-    "fsevents": "^2.1.3"
+    "fsevents": "^2.3.2"
   }
 }

src/index.js

@@ -0,0 +1,233 @@
+/*
+ *   TERMS OF USE: MIT License
+ *
+ *   Permission is hereby granted, free of charge, to any person obtaining a
+ *   copy of this software and associated documentation files (the "Software"),
+ *   to deal in the Software without restriction, including without limitation
+ *   the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ *   and/or sell copies of the Software, and to permit persons to whom the
+ *   Software is furnished to do so, subject to the following conditions:
+ *
+ *   The above copyright notice and this permission notice shall be included in
+ *   all copies or substantial portions of the Software.
+ *
+ *   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ *   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ *   FITNESS FOR A PARTICULAR PURPOSE AND NONINFINGEMENT. IN NO EVENT SHALL
+ *   THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ *   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ *   FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ *   DEALINGS IN THE SOFTWARE.
+ */
+
+import {initToolbarIcons} from './modules/load_images';
+import {Workbox} from 'workbox-window';
+import {logConsoleMessage} from './modules/utility';
+
+
+/**
+ * Initialize deferredPrompt for use later to show browser install prompt.
+* @type {BeforeInstallPromptEvent}
+ */
+export let deferredPrompt;
+
+/**
+ * Flag to indicate that the app is installed and active.
+ * @type {boolean}
+ */
+export let pwaActive = false;
+
+
+// Load the service worker if the browser supports it.
+if ("serviceWorker" in navigator) {
+  // Register the service worker only after the page load is complete. This
+  // will ensure that all page assets have been loaded before the service worker
+  // is registered. The service worker will begin loading assets into a local
+  // cache once it is registered.
+  window.addEventListener("load", () => {
+    logConsoleMessage(`Page has been loaded. Register the root service worker.`)
+    // Do nothing if the app is already installed
+    if (pwaActive) {
+      return;
+    }
+
+    const installButtonElement = document.getElementById('btn-install-pwa');
+    let wb = null;
+
+    pwaBeforeInstall();
+
+    try {
+      logConsoleMessage(`Newing a WorkBox object`);
+      wb = new Workbox("./sw.js");
+      logConsoleMessage(`Workbox object created`);
+    } catch (err) {
+      logConsoleMessage(`Workbox init failed: ${err.message}`);
+      return;
+    }
+
+    installButtonElement.addEventListener('click', async () => {
+      console.log(`User clicked the install app button.`)
+
+      // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
+      deferredPrompt.prompt();
+
+      // Find out whether the user confirmed the installation or not
+      const {outcome} = await deferredPrompt.userChoice;
+
+      // The deferredPrompt can only be used once.
+      deferredPrompt = null;
+
+      // Act on the user's choice
+      if (outcome === 'accepted') {
+        console.log('User accepted the install prompt.');
+      } else if (outcome === 'dismissed') {
+        console.log('User dismissed the install prompt');
+      }
+
+      // Hide the 'Install' button
+      pwaInstallButton(false);
+    });
+
+    // Fires when the registered service worker has installed but is waiting to activate.
+    wb.addEventListener("waiting", (event) => {
+      logConsoleMessage(`Service worker is installed but waiting to activate...`);
+      logConsoleMessage(`Waiting event: ${event}`);
+
+      // Hide the 'install' button
+      pwaInstallButton(false);
+
+      const button = document.getElementById('btn-install-pwa');
+      button.addEventListener("click", (event) => {
+        console.log(`Install button clicked.`, event)
+
+        // Set up a listener that will reload the page as soon as the previously
+        // waiting service worker has taken control.
+        wb.addEventListener("controlling", () => {
+          window.location.reload();
+        });
+
+        // Send a message telling the service worker to skip waiting.
+        // This will trigger the `controlling` event handler above.
+        wb.messageSW({type: "SKIP_WAITING"});
+
+        // It may seem that this is the same as registering a service worker yourself using
+        // navigator.serviceWorker.register. However, Workbox.register takes care of waiting
+        // until the window load event before registering the service worker. This is desirable
+        // in situations where precaching is involved so bandwidth contention that may delay
+        // page startup can be avoided.
+        wb.register();
+      });
+    });
+
+    // Intercept the browser's prompt to install the application
+//
+// The 'beforeinstallprompt' event fires on devices when a user is about to
+// be prompted to "install" a web application. It may be saved for later
+// and used to prompt the user at a more suitable time.
+//
+// Here, the event details are stored in a global variable, deferredPrompt,
+// that will be referenced later.
+// ----------------------------------------------------------------------------
+    window.addEventListener('beforeinstallprompt', (e) => {
+      console.log(`Before install prompt fires...`);
+
+      // Log the platforms that the beforeinstallprompt event was sent to.
+      // The platforms property is an array of strings. Typically, it should
+      // contain a single element, 'web', when the site is viewed from a web
+      // browser.
+      console.log(`Platforms: ${e.platforms}`);
+
+      // Prevent the mini-info bar from appearing on mobile
+      e.preventDefault();
+
+      // Stash the event so it can be triggered later.
+      deferredPrompt = e;
+
+      // Update UI notify the user they can install the PWA
+      // showInstallPromotion();
+
+      return false;
+    });
+  });
+}
+
+/**
+ * Install listener for the 'beforeinstallprompt' event.
+ * @param {HTMLElement} button
+ */
+function pwaBeforeInstall() {
+  window.addEventListener('beforeinstallprompt', (event) => {
+    console.log(`BeforeInstallPrompt...`)
+
+    // Prevent the mini-info bar from appearing on mobile.
+    event.preventDefault();
+
+    // Stash the event so it can be triggered later.
+    window.deferredPrompt = event;
+
+    // Remove the 'hidden' class from the 'install' button container.
+    console.log(`Show the install button on the toolbar`)
+
+    // Temporarily disable the 'install' button while the details of updating
+    // a pwa are addressed.
+    // pwaInstallButton(true);
+    pwaInstallButton(false);
+  });
+}
+
+function showInstallPromotion() {
+  console.log(`Prompt the user to install the application.`)
+}
+
+/**
+ * Unregister the application from the browser.
+ */
+function serviceWorkerUnregister() {
+  navigator.serviceWorker.getRegistrations()
+      .then(function(registrations) {
+    for(let registration of registrations) {
+      registration.unregister()
+    }
+  });
+}
+
+/**
+ * Set the state of the PWA installation button
+ * @param {boolean} enable
+ */
+export function pwaInstallButton(enable) {
+  const installButtonElement = document.getElementById('btn-install-pwa');
+  if (enable) {
+    logConsoleMessage(`Showing PWA Install button`);
+    installButtonElement.classList.remove("hidden");
+  } else {
+    logConsoleMessage(`Hiding PWA Install button`);
+    installButtonElement.classList.add("hidden");
+  }
+}
+
+
+/**
+ * Set the state of the PWA update button
+ * @param {boolean} enable
+ */
+function pwaUpdateButton(enable) {
+
+}
+
+
+function getPWADisplayMode() {
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+  if (document.referrer.startsWith('android-app://')) {
+    return 'twa';
+  } else if (navigator.standalone || isStandalone) {
+    return 'standalone';
+  }
+  return 'browser';
+}
+
+initToolbarIcons();
+
+logConsoleMessage(`Starting the editor...`);
+
+import './modules/editor';