WIP: Allow renderjs from JS only, without initial gadget-tag/script-tag

• In order to integrate renderjs and jupyter I need to be able to load everything-renderjs from a javascript interface. The inital loaded HTML does not contain anything of renderjs and gets added only after pageload.
  I thus added functionallity to renderjs to initialize manually, after pageload. See the forum entry here.

• Instead of registering init() for the DOMContentLoaded event directly, a deferred promise is used which gets resolve either by the event, or by a manual call of rJS.manualBootstrap().

• An additional change is required to prevent renderjs bootstrapping multiple times when first loaded via $.getScript, and later included in a gadget via <script> (Line 685). I am not sure if this is the best way to do things though and if it breaks other stuff.

• I am generally new to this library and RSVP so this might be flawed and so, please comment. @romain @klaus

dist/renderjs-0.10.0.js

Node, FileReader, Blob, navigator, Event) {
"use strict";
+

dist/renderjs-0.10.0.js

            Node, FileReader, Blob, navigator, Event) {
   "use strict";
 
+  // Necessary in the following scenario:
+  //   > renderjs / rsvp are loaded from js (e.g. with $.getScript)
+  //     without a <script> tag in the parent-html
+  //   > the gadget(s) contain a <script> tag with renderjs which would
+  //     lead to repeated bootstrap and so on
+  if (window.hasOwnProperty("renderJS")) {
+    return;
+  }
+
   function readBlobAsDataURL(blob) {
     var fr = new FileReader();
     return new RSVP.Promise(function (resolve, reject) {
     scope_increment = 0,
     isAbsoluteOrDataURL = new RegExp('^(?:[a-z]+:)?//|data:', 'i'),
     is_page_unloaded = false,
-    error_list = [];
+    error_list = [],
+    bootstrap_deferred_object = new RSVP.defer();
 
   window.addEventListener('error', function (error) {
     error_list.push(error);
   // Bootstrap process. Register the self gadget.
   ///////////////////////////////////////////////////
 
+  // Manually initializes the self gadget if the DOMContentLoaded event
+  // is triggered before everything was ready.
+  // (For instance, the HTML-tag for the self gadget gets inserted after
+  //  page load)
+  renderJS.manualBootstrap = function () {
+    bootstrap_deferred_object.resolve();
+  };
+
   function bootstrap() {
     var url = removeHash(window.location.href),
       tmp_constructor,
             throw e;
           });
       }
-      document.addEventListener('DOMContentLoaded', init, false);
+      document.addEventListener('DOMContentLoaded',
+                                bootstrap_deferred_object.resolve, false);
+      return new RSVP.Queue()
+        .push(function () {
+          return bootstrap_deferred_object.promise;
+        })
+        .push(function () {
+          return init();
+        });
     });
 
     loading_gadget_promise

dist/renderjs-latest.js

            Node, FileReader, Blob, navigator, Event) {
   "use strict";
 
+  // Necessary in the following scenario:
+  //   > renderjs / rsvp are loaded from js (e.g. with $.getScript)
+  //     without a <script> tag in the parent-html
+  //   > the gadget(s) contain a <script> tag with renderjs which would
+  //     lead to repeated bootstrap and so on
+  if (window.hasOwnProperty("renderJS")) {
+    return;
+  }
+
   function readBlobAsDataURL(blob) {
     var fr = new FileReader();
     return new RSVP.Promise(function (resolve, reject) {
     scope_increment = 0,
     isAbsoluteOrDataURL = new RegExp('^(?:[a-z]+:)?//|data:', 'i'),
     is_page_unloaded = false,
-    error_list = [];
+    error_list = [],
+    bootstrap_deferred_object = new RSVP.defer();
 
   window.addEventListener('error', function (error) {
     error_list.push(error);
   // Bootstrap process. Register the self gadget.
   ///////////////////////////////////////////////////
 
+  // Manually initializes the self gadget if the DOMContentLoaded event
+  // is triggered before everything was ready.
+  // (For instance, the HTML-tag for the self gadget gets inserted after
+  //  page load)
+  renderJS.manualBootstrap = function () {
+    bootstrap_deferred_object.resolve();
+  };
+
   function bootstrap() {
     var url = removeHash(window.location.href),
       tmp_constructor,
             throw e;
           });
       }
-      document.addEventListener('DOMContentLoaded', init, false);
+      document.addEventListener('DOMContentLoaded',
+                                bootstrap_deferred_object.resolve, false);
+      return new RSVP.Queue()
+        .push(function () {
+          return bootstrap_deferred_object.promise;
+        })
+        .push(function () {
+          return init();
+        });
     });
 
     loading_gadget_promise

[Romain Courteaud]

Please do not need to commit "dist" files.

Could you please add a test to ensure you get the expected result with your change?

[Romain Courteaud]

This change is about another issue. Please add it in another commit if really needed, with related tests.

But I think it is more an issue of the Jupyter plugin. One way to easily bypass this is to load the renderJS gadget with an iframe. Otherwise, the gadget will also load CSS for example.

[Sebastian]

Alright I discussed with Klaus and we concluded that using an iframe is better. In that case no modifications are necessary as far as I can tell now.
Are you interested in the modificatios I made here or should I close the merge request once the iframe approach is working?

[Romain Courteaud]

Yes, I'm interested in the manual bootstrap method.

When I said use iframe, I meant use: declareGadget(... sandbox: iframe ...). That will be the only way to call gadget method with parameter date calculated from Jupyter. In this case, you still need to inject RSVP and renderJS in the page manually (if you can not include it by default in Jupyter page).

[Romain Courteaud]

@Kreisel any news on this topic? When you have time to work on it, please do not include the renderjs built files in the merge request.