Improved file loading and renderer.

Author: MarkusBordihn

src/cache/cache.js

@@ -0,0 +1,166 @@
+/**
+ * @fileoverview Cache for the Coding with Chrome editor.
+ *
+ * @license Copyright 2018 The Coding with Chrome Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @author [email protected] (Markus Bordihn)
+ */
+goog.provide('cwc.Cache');
+
+goog.require('cwc.framework.External');
+goog.require('cwc.framework.Internal');
+goog.require('cwc.framework.StyleSheet');
+goog.require('cwc.renderer.Helper');
+goog.require('cwc.utils.Database');
+goog.require('cwc.utils.Logger');
+goog.require('cwc.utils.Resources');
+
+
+/**
+ * @param {!cwc.utils.Helper} helper
+ * @constructor
+ * @struct
+ * @final
+ */
+cwc.Cache = function(helper) {
+  /** @type {string} */
+  this.name = 'Cache';
+
+  /** @type {!cwc.utils.Helper} */
+  this.helper = helper;
+
+  /** @type {!cwc.renderer.Helper} */
+  this.rendererHelper = new cwc.renderer.Helper();
+
+  /** @private {cwc.utils.Database} */
+  this.cache_ = new cwc.utils.Database(this.name);
+
+  /** @private {!cwc.utils.Logger} */
+  this.log_ = new cwc.utils.Logger(this.name);
+
+  /** @private {!string} */
+  this.version_ = '2';
+};
+
+
+/**
+ * @return {Promise}
+ */
+cwc.Cache.prototype.prepare = function() {
+  return this.cache_.open().then(() => {
+    this.cache_.getFile('__version__').then((version) => {
+      this.update(version);
+    });
+  });
+};
+
+
+/**
+ * @param {!string|number} version
+ */
+cwc.Cache.prototype.update = function(version) {
+  if (this.version_ >= version) {
+    this.log_.info('No need for updates ...');
+  }
+  this.log_.info('Updating Cache to version', this.version_);
+
+  this.log_.info('Loading external frameworks ...');
+  this.loadFiles(cwc.framework.External);
+
+  this.log_.info('Loading internal frameworks ...');
+  this.loadFiles(cwc.framework.Internal);
+
+  this.log_.info('Loading Style Sheets ...');
+  this.loadFiles(cwc.framework.StyleSheet);
+
+  this.cache_.addFile('__version__', this.version_);
+};
+
+
+/**
+ * Loads files into cache.
+ * @param {!Object} files
+ */
+cwc.Cache.prototype.loadFiles = function(files) {
+  let fileFiles = [];
+  for (let file of Object.keys(files)) {
+    if (goog.isString(files[file])) {
+      fileFiles.push(files[file]);
+    } else {
+      for (let subFile of Object.keys(files[file])) {
+        fileFiles.push(files[file][subFile]);
+      }
+    }
+  }
+  fileFiles.forEach((file) => {
+    cwc.utils.Resources.getUriAsText('../' + file).then((content) => {
+      this.addFile(file, content);
+    });
+  });
+};
+
+
+/**
+ * @param {string!} name
+ * @param {string!} content
+ * @param {boolean=} optimize
+ */
+cwc.Cache.prototype.addFile = function(name, content, optimize = false) {
+  if (!content) {
+    this.log_.error('Received empty content for', name);
+    return;
+  }
+
+  // Add file to server instance if available.
+  let serverInstance = this.helper.getInstance('server');
+  if (serverInstance) {
+    serverInstance.addFile(name, content);
+  }
+
+  if (optimize && !name.includes('.min.') && content.length > 1000) {
+    // Try to optimize unminimized code by removing comments and white-spaces.
+    let originalContentLength = content.length;
+    content = content.replace(/\\n\\n/g, '\\n')
+      .replace(/ {4}/g, '  ')
+      .replace(/[ \t]?\/\/.+?\\n/g, '')
+      .replace(/[ \t]?\/\*.+?\*\/\\n/g, '')
+      .replace(/[ \t]+\\n/g, '\\n')
+      .replace(/(\\n){2,}/g, '\\n');
+    if (originalContentLength > content.length) {
+      let optimized = Math.ceil(((originalContentLength - content.length) /
+          originalContentLength) * 100);
+      if (optimized >= 5) {
+        this.log_.info('Optimized content from', originalContentLength, 'to',
+          content.length, 'by', optimized, '%');
+      }
+    }
+  }
+  let mimeType = cwc.file.getMimeTypeByExtension(name);
+  let fileContent = this.rendererHelper.getDataUrl(content, mimeType);
+  if (!fileContent) {
+    this.log_.error('Received empty file for', name);
+    return;
+  }
+  this.cache_.addFile(name, fileContent);
+};
+
+
+/**
+ * @param {string} name
+ * @return {Promise}
+ */
+cwc.Cache.prototype.getFile = function(name) {
+  return this.cache_.getFile(name);
+};

src/mode/modder.js

@@ -115,6 +115,12 @@ cwc.mode.Modder.prototype.setMode = function(mode) {
     guiInstance.showOverlay(false);
   }
 
+  // Close existing dialogs.
+  let dialogInstance = this.helper.getInstance('dialog');
+  if (dialogInstance) {
+    dialogInstance.close();
+  }
+
   this.log_.info('Initialize mode and decorate UI for', mode, '…');
   this.mode = mode;
   this.modder = modeConfig.getMod(this.helper);

src/protocol/low-level/tcp/http_server.js

@@ -341,17 +341,7 @@ cwc.protocol.tcp.HTTPServer.prototype.handleRecieve_ = function(receiveInfo) {
       this.getFile(requestPath).then((content) => {
         if (content !== undefined) {
           // File found handling
-          let contentType = 'text/plain';
-          if (requestPath.endsWith('.js')) {
-            contentType = 'text/javascript';
-          } else if (requestPath.endsWith('.css')) {
-            contentType = 'text/css';
-          } else if (requestPath.endsWith('.py')) {
-            contentType = 'text/x-python';
-          } else if (requestPath.endsWith('.html') ||
-              requestPath.endsWith('.htm')) {
-            contentType = 'text/html';
-          }
+          let contentType = cwc.file.getMimeTypeByExtension(requestPath);
           this.send200Response(socketId, content, contentType);
         } else {
           // File not found handling

src/renderer/external/arduino.js

@@ -50,31 +50,27 @@ cwc.renderer.external.Arduino.prototype.init = function() {
 
 /**
  * Arduino render logic.
- * @param {Object} editor_content
- * @param {Object} editor_flags
+ * @param {Object} editorContent
  * @param {cwc.file.Files} libraryFiles
  * @param {!cwc.file.Files} frameworks
- * @param {!cwc.file.Files} styleSheets
- * @param {cwc.renderer.Helper} renderer_helper
+ * @param {cwc.renderer.Helper} rendererHelper
  * @return {string}
  * @export
  */
 cwc.renderer.external.Arduino.prototype.render = function(
-    editor_content,
-    editor_flags,
+    editorContent,
     libraryFiles,
     frameworks,
-    styleSheets,
-    renderer_helper) {
-  let header = renderer_helper.getFrameworkHeader(
+    rendererHelper) {
+  let header = rendererHelper.getFrameworkHeader(
     /** @type {string} */ (cwc.framework.Internal.ARDUINO), frameworks);
   let body = '\n<script>' +
       '  let customCode = function(arduino) {\n' +
-      editor_content[cwc.ui.EditorContent.DEFAULT] +
+      editorContent[cwc.ui.EditorContent.DEFAULT] +
       '\n};\n' + '  let runner = new cwc.framework.Runner();\n' +
       '  let customFramework = new cwc.framework.Arduino(runner);\n' +
       '  customFramework.listen(customCode);\n' +
       '</script>\n';
 
-  return renderer_helper.getHTML(body, header);
+  return rendererHelper.getHTML(body, header);
 };

src/renderer/external/ev3.js

@@ -49,30 +49,26 @@ cwc.renderer.external.EV3.prototype.init = function() {
 
 
 /**
- * @param {Object} editor_content
- * @param {Object} editor_flags
+ * @param {Object} editorContent
  * @param {cwc.file.Files} libraryFiles
  * @param {!cwc.file.Files} frameworks
- * @param {!cwc.file.Files} styleSheets
- * @param {cwc.renderer.Helper} renderer_helper
+ * @param {cwc.renderer.Helper} rendererHelper
  * @return {string}
  * @export
  */
 cwc.renderer.external.EV3.prototype.render = function(
-    editor_content,
-    editor_flags,
+    editorContent,
     libraryFiles,
     frameworks,
-    styleSheets,
-    renderer_helper) {
-  let header = renderer_helper.getFrameworkHeader(
+    rendererHelper) {
+  let header = rendererHelper.getFrameworkHeader(
     /** @type {string} */ (cwc.framework.Internal.EV3), frameworks);
   let body = '\n<script>' +
       '  let code = function(ev3) {\n' +
-      editor_content[cwc.ui.EditorContent.JAVASCRIPT] +
+      editorContent[cwc.ui.EditorContent.JAVASCRIPT] +
       '\n};\n' +
       '  new cwc.framework.Ev3(code);\n' +
       '</script>\n';
 
-  return renderer_helper.getHTML(body, header);
+  return rendererHelper.getHTML(body, header);
 };

src/renderer/external/makeblock/mbot.js

@@ -49,31 +49,27 @@ cwc.renderer.external.makeblock.MBot.prototype.init = function() {
 
 
 /**
- * @param {Object} editor_content
- * @param {Object} editor_flags
+ * @param {Object} editorContent
  * @param {cwc.file.Files} libraryFiles
  * @param {!cwc.file.Files} frameworks
- * @param {!cwc.file.Files} styleSheets
- * @param {cwc.renderer.Helper} renderer_helper
+ * @param {cwc.renderer.Helper} rendererHelper
  * @return {string}
  * @export
  */
 cwc.renderer.external.makeblock.MBot.prototype.render = function(
-    editor_content,
-    editor_flags,
+    editorContent,
     libraryFiles,
     frameworks,
-    styleSheets,
-    renderer_helper) {
-  let header = renderer_helper.getFrameworkHeader(
+    rendererHelper) {
+  let header = rendererHelper.getFrameworkHeader(
     /** @type {string} */ (cwc.framework.Internal.MBOT), frameworks);
   let body = '\n<script>' +
       '  let code = function(mbot) {\n' +
-      editor_content[cwc.ui.EditorContent.JAVASCRIPT] +
+      editorContent[cwc.ui.EditorContent.JAVASCRIPT] +
       '\n};\n'+
       '  new cwc.framework.makeblock.mBot(code);\n' +
       '</script>\n';
 
-  let html = renderer_helper.getHTML(body, header);
+  let html = rendererHelper.getHTML(body, header);
   return html;
 };

src/renderer/external/makeblock/mbotRanger.js

@@ -49,29 +49,25 @@ cwc.renderer.external.makeblock.MBotRanger.prototype.init = function() {
 
 
 /**
- * @param {Object} editor_content
- * @param {Object} editor_flags
+ * @param {Object} editorContent
  * @param {cwc.file.Files} libraryFiles
  * @param {!cwc.file.Files} frameworks
- * @param {!cwc.file.Files} styleSheets
- * @param {cwc.renderer.Helper} renderer_helper
+ * @param {cwc.renderer.Helper} rendererHelper
  * @return {string}
  * @export
  */
 cwc.renderer.external.makeblock.MBotRanger.prototype.render = function(
-    editor_content,
-    editor_flags,
+    editorContent,
     libraryFiles,
     frameworks,
-    styleSheets,
-    renderer_helper) {
-  let header = renderer_helper.getFrameworkHeader(
+    rendererHelper) {
+  let header = rendererHelper.getFrameworkHeader(
     /** @type {string} */ (cwc.framework.Internal.MBOT_RANGER), frameworks);
-  let content = editor_content[cwc.ui.EditorContent.JAVASCRIPT];
+  let content = editorContent[cwc.ui.EditorContent.JAVASCRIPT];
   let body = '\n<script>' +
       '  let code = function(mBotRanger) {\n' + content + '\n};\n'+
       '  new cwc.framework.makeblock.mBotRanger(code);\n' +
       '</script>\n';
-  let html = renderer_helper.getHTML(body, header);
+  let html = rendererHelper.getHTML(body, header);
   return html;
 };

src/renderer/external/pencil_code.js

@@ -49,29 +49,25 @@ cwc.renderer.external.PencilCode.prototype.init = function() {
 
 
 /**
- * @param {Object} editor_content
- * @param {Object} editor_flags
+ * @param {Object} editorContent
  * @param {!cwc.file.Files} libraryFiles
  * @param {!cwc.file.Files} frameworks
- * @param {!cwc.file.Files} styleSheets
- * @param {cwc.renderer.Helper} renderer_helper
+ * @param {cwc.renderer.Helper} rendererHelper
  * @return {!string}
  * @export
  */
 cwc.renderer.external.PencilCode.prototype.render = function(
-    editor_content,
-    editor_flags,
+    editorContent,
     libraryFiles,
     frameworks,
-    styleSheets,
-    renderer_helper) {
-  let header = renderer_helper.getFrameworkHeaders([
+    rendererHelper) {
+  let header = rendererHelper.getFrameworkHeaders([
     cwc.framework.External.COFFEESCRIPT,
     cwc.framework.External.JQUERY.V2_2_4,
     cwc.framework.External.JQUERY_TURTLE,
   ], frameworks);
   let body = '\n<script type="text/coffeescript">\n' +
-    '$.turtle();\n' + editor_content[cwc.ui.EditorContent.COFFEESCRIPT] +
+    '$.turtle();\n' + editorContent[cwc.ui.EditorContent.COFFEESCRIPT] +
     '\n</script>\n';
-  return renderer_helper.getHTMLGrid(body, header);
+  return rendererHelper.getHTMLGrid(body, header);
 };