Added callback to get preview.executeScript result (#177)

* preview.executeScript() supports a callback that receives the return value of the code executed in the preview
* Includes unit test for preview.executeScript()
* Added messenger.cleanup() to stop listening for messages
* Fixed preview.executeScript tests
* Moved preview test from unit_tests to core_tests
* Removed unnecessary token use in messenger
* Removed debugging

Author: adamcarheden

src/cache/cache.js

@@ -33,6 +33,7 @@ goog.require('cwc.utils.mime.getTypeByExtension');
  * @constructor
  * @struct
  * @final
+ * @export
  */
 cwc.Cache = function(helper) {
   /** @type {string} */
@@ -62,6 +63,7 @@ cwc.Cache = function(helper) {
 
 /**
  * @async
+ * @export
  */
 cwc.Cache.prototype.prepare = async function() {
   await this.database_.open(this.databaseConfig_);
@@ -175,6 +177,7 @@ cwc.Cache.prototype.preloadFile = function(name) {
 /**
  * @param {!Array} files
  * @return {!Promise}
+ * @export
  */
 cwc.Cache.prototype.preloadFiles = function(files) {
   let promises = files.map(this.preloadFile.bind(this));

src/frameworks/internal/messenger/messenger.js

@@ -188,18 +188,41 @@ cwc.framework.Messenger.prototype.postMessage = function(name, value) {
  * @private
  */
 cwc.framework.Messenger.prototype.executeCode_ = function(code) {
-  if (!code || typeof code !== 'string') {
-    return;
-  }
-  // Remove trailing ";"" to avoid syntax errors for simple one liner
-  if (code.endsWith(';')) {
-    code = code.slice(0, -1);
-  }
-  // Skip the return parameter for more complex code
-  if ((code.includes(';') && !code.includes('let')) || code.includes('{')) {
-    console.log('>>' + Function(code)());
-  } else {
-    console.log('>>' + Function('return (' + code + ');')());
+  let runCode = function(codeString) {
+    // Skip the return parameter for more complex code
+    let result = ((codeString.includes(';') && !codeString.includes('let')) ||
+      codeString.includes('{')) ? Function(codeString)() :
+      Function('return (' + codeString + ');')();
+    console.log('>>' + result);
+    return result;
+  };
+
+  let result; // Declared here to apease jslint
+  switch (typeof code) {
+    case 'string':
+      runCode(code);
+      break;
+    case 'object':
+      if (!code.hasOwnProperty('code')) {
+        console.error('Argument to executeCode_ missing property \'code\':',
+          code);
+        return;
+      }
+      if ((typeof code['code']) !== 'string') {
+        console.error('\'code\' property of argument to executeCode_ is not a'
+          + ' string:', code);
+        return;
+      }
+      result = runCode(code['code']);
+      if (code.hasOwnProperty('id') && (typeof code['id']) === 'string') {
+        this.send('__exec_result__', {
+          'id': code['id'],
+          'result': result,
+        });
+      }
+      break;
+    default:
+      console.warn('Ignoring code due to unknown type', code);
   }
 };
 

src/renderer/helper.js

@@ -28,6 +28,7 @@ goog.require('soydata');
  * @constructor
  * @struct
  * @final
+ * @export
  */
 cwc.renderer.Helper = function() {};
 
@@ -209,6 +210,7 @@ cwc.renderer.Helper.prototype.getHTMLRunner = function(body, header,
  * @param {string} html
  * @param {string=} header
  * @return {string}
+ * @export
  */
 cwc.renderer.Helper.prototype.getRawHTML = function(html, header) {
   if (!html) {
@@ -397,6 +399,7 @@ cwc.renderer.Helper.prototype.getCacheFileHeader = function(name, cache) {
  * @param {!Array} names
  * @param {!cwc.Cache} cache
  * @return {string}
+ * @export
  */
 cwc.renderer.Helper.prototype.getCacheFilesHeader = function(names, cache) {
   let headers = '';

src/ui/preview/preview.js

@@ -33,6 +33,7 @@ goog.require('goog.dom.ViewportSizeMonitor');
 goog.require('goog.events.EventTarget');
 goog.require('goog.events.EventType');
 goog.require('goog.soy');
+goog.require('goog.string');
 goog.require('goog.ui.Component.EventType');
 
 
@@ -41,6 +42,7 @@ goog.require('goog.ui.Component.EventType');
  * @constructor
  * @struct
  * @final
+ * @export
  */
 cwc.ui.Preview = function(helper) {
   /** @type {string} */
@@ -102,6 +104,8 @@ cwc.ui.Preview = function(helper) {
 
   /** @private {!cwc.Messenger} */
   this.messenger_ = new cwc.Messenger(this.eventHandler_);
+  this.messenger_.addListener('__exec_result__', this.handleExecResponse_,
+    this);
 
   /** @private {string} */
   this.partition_ = 'preview';
@@ -111,12 +115,16 @@ cwc.ui.Preview = function(helper) {
 
   /** @private {!cwc.utils.Logger|null} */
   this.log_ = new cwc.utils.Logger(this.name);
+
+  /** @private {!Object<string, Function>} */
+  this.pendingExecCallbacks = {};
 };
 
 
 /**
  * Decorates the given node and adds the preview window.
  * @param {Element=} node The target node to add the preview window.
+ * @export
  */
 cwc.ui.Preview.prototype.decorate = function(node) {
   this.node = node || goog.dom.getElement(this.prefix + 'chrome');
@@ -345,6 +353,7 @@ cwc.ui.Preview.prototype.terminate = function() {
 
 /**
  * @return {Object}
+ * @export
  */
 cwc.ui.Preview.prototype.getContent = function() {
   return this.content;
@@ -367,6 +376,7 @@ cwc.ui.Preview.prototype.getContentUrl = function() {
 
 /**
  * @param {string} url
+ * @export
  */
 cwc.ui.Preview.prototype.setContentUrl = function(url) {
   if (!url || !this.content) {
@@ -463,11 +473,83 @@ cwc.ui.Preview.prototype.focus = function() {
 /**
  * Injects and executes the passed code in the preview content, if supported.
  * @param {!(string|Function)} code
+ * @param {Number} timeout
+ * @return {!Promise}
+ * @export
+ * @TODO([email protected]): Move logic to messenger instance.
  */
-cwc.ui.Preview.prototype.executeScript = function(code) {
+cwc.ui.Preview.prototype.executeScript = function(code, timeout = 250) {
   this.log_.info('Execute script', code);
-  this.messenger_.send('__exec__',
-    typeof code === 'function' ? code.toString() : code);
+  let execSpec = {
+    'code': typeof code === 'function' ? code.toString() : code,
+    'id': false,
+  };
+  let id = goog.string.createUniqueString();
+  let promise = new Promise(function(resolve, reject) {
+    this.pendingExecCallbacks[id] = resolve;
+    setTimeout(function() {
+      if (this.pendingExecCallbacks.hasOwnProperty(id)) {
+        this.pendingExecCallbacks[id] = false;
+        reject(`Preview script timed out after ${timeout}ms`);
+      }
+    }.bind(this), timeout);
+  }.bind(this));
+  execSpec['id'] = id;
+  this.messenger_.send('__exec__', execSpec);
+  return promise;
+};
+
+/**
+ * Calls the callback registered for the script execution
+ * @param {Object} response
+ * @private
+ * @TODO([email protected]): Move logic to messenger instance.
+ */
+cwc.ui.Preview.prototype.handleExecResponse_ = function(response) {
+  if ((typeof response) !== 'object') {
+    this.log_.warn('Received non-object as response from script execution',
+      response);
+    return;
+  }
+  if (!response.hasOwnProperty('id')) {
+    this.log_.warn('executeScript response has no \'id\', can\'t match to a '+
+      'callback');
+    return;
+  }
+  if ((typeof response['id']) !== 'string') {
+    this.log_.warn('Ignorning executeScript response with non-string id',
+      response);
+    return;
+  }
+  // The callback is called from setTimeout() to give the executeScript timeout
+  // a chance to run first. When run in a WebView, the preview runs in a
+  // separate thread and the executeScript timeout will have already triggered
+  // if the user's functon exceeded the timeout. However, iframes run in the
+  // same thread, so a long-running script will prevent the executeScript
+  // timeout from firing until the it completes.
+  // This does make timeouts ineffective for iframes, but ensuring the correct
+  // order allows test logic to execute correctly in karma/chrome (which only
+  // supports iframes).
+  setTimeout(() => {
+    if (!this.pendingExecCallbacks.hasOwnProperty(response['id'])) {
+      this.log_.warn('Callback for executeScript response', response['id'],
+        'missing. Response was', response);
+      return;
+    }
+    let callback = this.pendingExecCallbacks[response['id']];
+    delete this.pendingExecCallbacks[response['id']];
+    if (callback === false) {
+      this.log_.info('executeScript ', response['id'], 'timed out');
+      return;
+    }
+    let result;
+    if (response.hasOwnProperty('result')) {
+      result = response['result'];
+    }
+    this.log_.info('Executing callback ', response['id'], 'with result',
+      result);
+    callback(result);
+  }, 0);
 };
 
 

test/.eslintrc

@@ -1,5 +1,6 @@
 {
   'globals': {
+    'afterAll': true,
     'afterEach': true,
     'beforeAll': true,
     'beforeEach': true,

test/core_tests/.eslintrc

@@ -0,0 +1,7 @@
+{
+  'rules': {
+    'no-unused-vars': [2, {
+      'varsIgnorePattern': '^i18soy$'
+    }]
+  }
+}