Labs/Bespin/DesignDocs/EditorComponent/Packaging

Plan for packaging embedded Bespin Editor component

Problem

We need to offer developers one script src link to get to our embedded component with ease. Due to the loading fun that we have, we need to tweak things and have a custom build that makes that happen.

Here are the steps:

Setup the build profile

The first layer sucks in Dojo itself. The second brings in the component piece.

   dependencies: {
    layers: {
      {
        name: "dojo.js",
        dependencies: [ "bespin.editor.component"]
      },
      {
        name: "../bespin/editor/component.js",
        dependencies: [ "bespin.editor.component"]
      },
  
      .....
    }
   }

The embed.js

The embed should use the scopedMap to make sure that there aren't Dojo collisions for people that suck it in. Maybe we actually have a couple of versions here?

• Assumes Dojo: Tries to use dojo, and if it doesn't exist, then load one
• Hides our Dojo: Uses scope map to hide our Dojo to something else

It would look like:

   ;(function(){
   
   var oldConfig = typeof djConfig != "undefined" ? djConfig : null;
   
   djConfig = {
     //scopeMap changes dojo to use the global name "bespindojo" etc.
    //instead of dojo to avoid conflicts. However inside your module code
    //you still just use "dojo". Just outside code, in the HTML file
   itself, or code
    //that is not loaded via the dojo loader would use "bespindojo".
     scopeMap: [
       ["dojo", "bespindojo"],
       ["dijit", "bespindijit"],
       ["dojox", "bespindojox"]
     ],
    modulePaths: {
      "bespin": "https://bespin.mozilla.com/js/bespin"
    },
    require: [
      "bespin.editor.component"
    ]
   };
   
   document.write('<script
   src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js"></script>');
   
   if(oldConfig){
    djConfig = oldConfig;
   }
   })();

Some comments on that script:

Notice the document.write in there. :) This helps make sure the dojo file is loaded synchronously, before page load, and the djConfig gets bound to it correctly so then you can reset the djConfig after the document.write block. Actually, most recent versions of Dojo (1.1+ I believe) do not need the djConfig after the dojo.js processes it, so you can probably get away with *not* resetting the djConfig, if you prefer not to have the document.write.

However, not using a document.write can lead to scenarios where Dojo will get loaded after the page load. In that case you will want to add a djConfig.afterOnLoad = true, to tell Dojo to not wait for the page load event (really the approximation of DOMContentLoaded). But if you use afterOnLoad, you should really make sure Dojo is loaded *always* after the page loads, by waiting for the window.onload event, then adding the script tag.