merge between master and branch modules

 module.exports = function (grunt) {
 module.exports = function (grunt) {
     "use strict";
     "use strict";
+    
+    let shim = function(obj) { return `\nexport default ${obj};\n`; };
 
 
 // Project configuration.
 // Project configuration.
     grunt.initConfig({
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
         pkg: grunt.file.readJSON('package.json'),
+        copy: {
+            dist: {
+                files:[
+                    {src: 'src/arcs_browser.js', dest: 'build/arcs_browser.js'},
+                    {src: 'src/arcs_node.mjs', dest: 'build/arcs_node.mjs'}
+                ]
+                
+            }            
+        },
         jsdoc: {
         jsdoc: {
             dist: {
             dist: {
                 src: ['src/*.js', 'docs/Readme.md'], //, 'components/*.js'],
                 src: ['src/*.js', 'docs/Readme.md'], //, 'components/*.js'],
@@ -43,16 +54,13 @@ module.exports = function (grunt) {
                 }
                 }
             }
             }
         },
         },
-        uglify: {
+        terser: {
             build: {
             build: {
-                options: {
-                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
-                },            
                 files: { 
                 files: { 
                     'build/arcs.min.js': [
                     'build/arcs.min.js': [
                         'build/arcs.js'
                         'build/arcs.js'
                     ],
                     ],
-                    'build/arcs_browser.js': [
+                    'build/arcs_browser.min.js': [
                         'src/arcs_browser.js'
                         'src/arcs_browser.js'
                     ],
                     ],
                     'build/arcseditor.min.js': [
                     'build/arcseditor.min.js': [
@@ -74,7 +82,38 @@ module.exports = function (grunt) {
             }
             }
             
             
         },
         },
-	concat: {
+        file_append: {
+            default_options: {
+                files: [
+                    {
+                        append: shim('AR'),
+                        prepend: `import CV from '../cv/index.js';\n`,
+                        input: './deps/aruco/index.js'
+                    },
+                    {
+                        append: shim('CV'), 
+                        input: './deps/cv/index.js'
+                    }
+                ]
+            }            
+        },
+        'string-replace': {
+            dist: {
+                files: {
+                    'deps/objloader/objloader.js': 'deps/objloader/index.js',
+                    'deps/mtlloader/mtlloader.js': 'deps/mtlloader/index.js',
+                    'deps/ddsloader/ddsloader.js': 'deps/ddsloader/index.js'
+                },
+                options: {
+                    replacements:[{                      
+                        pattern: '../../../build/three.module.js',
+                        replacement: '../three.js/index.js'
+                    }]                    
+                }                
+                
+            }                        
+        },        
+	    concat: {
             dist: {
             dist: {
                 src: [
                 src: [
                         'src/arcs.js',
                         'src/arcs.js',
@@ -88,7 +127,6 @@ module.exports = function (grunt) {
                         'src/transitionnetwork.js',
                         'src/transitionnetwork.js',
                         'src/statemachine.js',
                         'src/statemachine.js',
                         'src/application.js',
                         'src/application.js',
-                        'src/arcs_module.js',
                         'src/exports.js'
                         'src/exports.js'
                     ],
                     ],
                 dest: 'build/arcs.js'
                 dest: 'build/arcs.js'
@@ -106,21 +144,24 @@ module.exports = function (grunt) {
                 dest: 'build/arcseditor.js'
                 dest: 'build/arcseditor.js'
             }
             }
 
 
-	}
+	    }
 	
 	
-
     });
     });
 
 
-// Load the plugin that provides the "uglify" task.
-    grunt.loadNpmTasks('grunt-contrib-uglify');
+    // Load the plugin that provides the "uglify" task.
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-jsdoc');
     grunt.loadNpmTasks('grunt-jsdoc');
     grunt.loadNpmTasks('grunt-jslint');
     grunt.loadNpmTasks('grunt-jslint');
+    grunt.loadNpmTasks('grunt-terser');
     grunt.loadNpmTasks('grunt-bower-task');
     grunt.loadNpmTasks('grunt-bower-task');
+    grunt.loadNpmTasks('grunt-file-append');
+    grunt.loadNpmTasks('grunt-string-replace');
 
 
-
-// Default task(s).
-    grunt.registerTask('default', ['concat','uglify']);
+    // Default task(s).
+    grunt.registerTask('default', ['concat','copy','terser']);
     grunt.registerTask('lint', ['jslint']);
     grunt.registerTask('lint', ['jslint']);
     grunt.registerTask('doc', ['jsdoc']);
     grunt.registerTask('doc', ['jsdoc']);
+    grunt.registerTask('install-deps', ['bower', 'file_append', 'string-replace']);
+    
 };
 };

 {
 {
     "name": "ARCS",
     "name": "ARCS",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "Augmented Reality Component System in web browser and node environment",
     "description": "Augmented Reality Component System in web browser and node environment",
     "main": "build/arcs.js",
     "main": "build/arcs.js",
     "keywords": [
     "keywords": [
@@ -10,12 +10,11 @@
     "author": "Jean-Yves Didier",
     "author": "Jean-Yves Didier",
     "license": "GPL",
     "license": "GPL",
     "dependencies": {
     "dependencies": {
-        "requirejs": "*",
         "tracking.js": "*",
         "tracking.js": "*",
-        "three.js": "https://raw.githubusercontent.com/mrdoob/three.js/r68/build/three.min.js",
-        "objloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/OBJLoader.js",
-        "mtlloader": "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/MTLLoader.js",
-        "objmtlloader": "https://raw.githubusercontent.com/mrdoob/three.js/r68/examples/js/loaders/OBJMTLLoader.js",
+        "three.js": "https://raw.githubusercontent.com/mrdoob/three.js/r116/build/three.module.js",
+        "objloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/OBJLoader.js",
+        "mtlloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/MTLLoader.js",
+        "ddsloader" : "https://raw.githubusercontent.com/mrdoob/three.js/r116/examples/jsm/loaders/DDSLoader.js",
         "aruco": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/aruco.js",
         "aruco": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/aruco.js",
         "cv": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/cv.js",
         "cv": "https://raw.githubusercontent.com/jcmellado/js-aruco/master/src/cv.js",
         "codemirror" : "*",
         "codemirror" : "*",

@@ -22,22 +22,14 @@ var ARCS =  ARCS || {};
  * Helper functions to determine environment
  * Helper functions to determine environment
  * ***************************************************************************/
  * ***************************************************************************/
 
 
-
 /**
 /**
  * @return {boolean} true if ARCS is run in a node.js environment
  * @return {boolean} true if ARCS is run in a node.js environment
  */
  */
 ARCS.isInNode = function () {
 ARCS.isInNode = function () {
-    return (typeof require === 'function' && require.resolve);
+     return (typeof require === 'function' && require.resolve);
 };
 };
 
 
 
 
-/**
- * @return {boolean} true if ARCS is run with require.js
- */
-ARCS.isInRequire = function () {
-    return (typeof define === 'function' && define.amd);
-};
-
 
 
 /******************************************************************************
 /******************************************************************************
  * Component implementation
  * Component implementation
@@ -241,7 +233,7 @@ ARCS.Context = function( ctx ) {
     var constants = {};
     var constants = {};
     var factories = {};
     var factories = {};
     var libraries = [];
     var libraries = [];
-    var depLibPromises=[];
+    //var depLibPromises=[];
     var self = this;
     var self = this;
     var loadLibraries;
     var loadLibraries;
     var loadDataFile;
     var loadDataFile;
@@ -255,6 +247,7 @@ ARCS.Context = function( ctx ) {
     if (ctx !== undefined) {
     if (ctx !== undefined) {
         libraries = ctx.libraries;
         libraries = ctx.libraries;
     
     
+        var p;
         for (p in ctx.components) {
         for (p in ctx.components) {
             if (ctx.components.hasOwnProperty(p)) {
             if (ctx.components.hasOwnProperty(p)) {
                 components[p] = ctx.components[p];
                 components[p] = ctx.components[p];
@@ -271,8 +264,7 @@ ARCS.Context = function( ctx ) {
         
         
     }
     }
 
 
-    
-    loadDataFile = function(fileName) {
+    var loadDataFile =async function(fileName) {
         var dataPromise ;
         var dataPromise ;
                 
                 
         if (ARCS.isInNode()) {
         if (ARCS.isInNode()) {
@@ -285,59 +277,12 @@ ARCS.Context = function( ctx ) {
                 }
                 }
             });
             });
         } else {
         } else {
-            return new Promise(function(resolve, reject) {
-                var client = new XMLHttpRequest();
-                client.open('GET',fileName,true);
-                client.overrideMimeType("application/json");
-                client.send();
-                
-                client.onload = function() {
-                    if (this.status >= 200 && this.status < 300) {
-                        resolve(JSON.parse(this.responseText));
-                    } else {
-                        console.error(this.statusText);
-                        reject(this.statusText);
-                    }                
-                };
-                client.onerror = function() {
-                    console.error(this.statusText);
-                    reject(this.statusText);
-                };
-            });
+            var client = await fetch(fileName);
+            return client.json();
         }
         }
     };
     };
-    
-    this.addLibraryPromise = function(p) {
-        depLibPromises.push(p);
-    };
-            
-    promiseLibrary = function(libName) {
-        return new Promise(function(resolve, reject) {
-            if (libName.substr(-3) === '.js') {
-                reject(libName);
-            }            
-            
-            if (ARCS.isInNode()) {
-                if (require("./" + libraries[i] + ".js") === undefined) {
-                    reject(libName);
-                } else {
-                    resolve();
-                }                
-            } else {
-                require([libName], 
-                        function() {
-                            resolve(); 
-                        }, 
-                        function(err) { 
-                            reject(libName,err); 
-                            
-                        }
-                );
-            }            
-        });        
-    };
-    
-    loadLibraries = function () {
+        
+    var loadLibraries = function () {
         var i;
         var i;
         // we will use different instances of require either the one of node 
         // we will use different instances of require either the one of node 
         // or the one from require.js
         // or the one from require.js
@@ -345,14 +290,13 @@ ARCS.Context = function( ctx ) {
         
         
         var res=[];
         var res=[];
         for(i=0; i < libraries.length; i++) {
         for(i=0; i < libraries.length; i++) {
-            res.push(promiseLibrary(libraries[i]));
+            res.push(self.loadLibrary(libraries[i]));
         }
         }
         return Promise.all(res);        
         return Promise.all(res);        
     };
     };
     
     
-    instanciateComponents = function() {
+    var instanciateComponents = function() {
         var p, promises=[];
         var p, promises=[];
-        console.log(components);
         
         
         for (p in components) {
         for (p in components) {
            if (components.hasOwnProperty(p)) {
            if (components.hasOwnProperty(p)) {
@@ -361,7 +305,7 @@ ARCS.Context = function( ctx ) {
                     console.error("[ARCS] Context dump follows: ", libraries, components, constants);
                     console.error("[ARCS] Context dump follows: ", libraries, components, constants);
                     return ;
                     return ;
                 }                    
                 }                    
-                factory = factories[components[p].type];
+                var factory = factories[components[p].type];
                 //console.log("instanciating ", p);
                 //console.log("instanciating ", p);
                 try {
                 try {
                 if (components[p].value !== undefined || components[p].url !== undefined || components[p].ref !== undefined) {                
                 if (components[p].value !== undefined || components[p].url !== undefined || components[p].ref !== undefined) {                
@@ -410,13 +354,23 @@ ARCS.Context = function( ctx ) {
             libActualName = libName.name;
             libActualName = libName.name;
             libUrl = libName.url;
             libUrl = libName.url;
         }
         }
-                
-        libraries.push(libActualName);
-        promiseLibrary(libUrl).then( function() {
+
+        if (libraries.indexOf(libActualName) < 0) {
+            libraries.push(libActualName);
+        }
+        // TODO promisify call to cbFunction
+        return import(libUrl).then( function(module) {
+            // TODO insert here component factories
+            for (p in module.default) {
+                if (module.default.hasOwnProperty(p)) {
+                    ARCS.Context.currentContext.setFactory(p,module.default[p]);
+                }
+            }
+
             if (cbFunction !== undefined) {
             if (cbFunction !== undefined) {
                 cbFunction();
                 cbFunction();
             }
             }
-        });
+        }).catch( function(msg) { console.error("[ARCS] Trouble loading '",libUrl,"' with reason -", msg) });
     };
     };
     
     
     /**
     /**
@@ -533,9 +487,9 @@ ARCS.Context = function( ctx ) {
 
 
     // this should return a promise  !
     // this should return a promise  !
     this.instanciate = function () {
     this.instanciate = function () {
-        return loadLibraries().then(function() { return Promise.all(depLibPromises); })
-                              .then(instanciateComponents)
-                              .catch(function(msg) { console.log("[ARCS] Trouble instanciating context", msg); });
+        //! TODO
+        return loadLibraries().then(instanciateComponents)
+                    .catch(function(msg) { console.error("[ARCS] Trouble instanciating context", msg); });
         
         
     };
     };
     
     
@@ -1697,7 +1651,7 @@ ARCS.TransitionNetwork.build = function(tree, tokenEvents) {
     }
     }
     
     
     res = ARCS.TransitionNetwork.build(tree[0],tokenEvents);
     res = ARCS.TransitionNetwork.build(tree[0],tokenEvents);
-    
+    var i;
     for (i=1; i < tree.length; i++) {
     for (i=1; i < tree.length; i++) {
         if (tree[i].hasOwnProperty('and')) {
         if (tree[i].hasOwnProperty('and')) {
             rightTN = ARCS.TransitionNetwork.build(tree[i]['and'], tokenEvents); 
             rightTN = ARCS.TransitionNetwork.build(tree[i]['and'], tokenEvents); 
@@ -2083,7 +2037,7 @@ ARCS.Application = function () {
      * Starts the application
      * Starts the application
      */
      */
     this.start = function () {
     this.start = function () {
-        console.log("[ARCS] Starting application");
+        console.log("[ARCS] Starting application...");
         context.instanciate().then(preProcess);
         context.instanciate().then(preProcess);
     };
     };
 };
 };
@@ -2099,116 +2053,6 @@ ARCS.Application.slot("setSheet");
 ARCS.Application.slot("finish");
 ARCS.Application.slot("finish");
 
 
 
 
-/**
- * definition of the main module function: 
- * it takes an anonymous function as a parameter
- * the anonymous function has one parameter: the object encompassing 
- * ARCS definitions (in order to able to use ARCS.Component.create, ...)
- * @param moduleDefinition {function} main function of the module. 
- * It should return a list of components
- * @param deps {mixed[]} dependencies
- */
-
-// reimplementation using native promises
-arcs_module = function(moduleDefinition, deps) {
-    var storeComponents, i;
-    
-    if (typeof module !== 'undefined') {
-        if (module.parent.exports) {
-            ARCS = module.exports; 
-        }
-    }
-    
-    if (deps === undefined) { deps = []; }
-    
-    storeComponents = function (deps) {
-        var mdef, p;
-        // we should insert ARCS at the beginning of deps !
-        deps.unshift(ARCS);
-        
-        mdef = (typeof moduleDefinition === 'function') ?
-                moduleDefinition.apply(this, deps) : moduleDefinition;
-
-        if (mdef === undefined) {
-            throw new Error("[ARCS] Your module is undefined. Did you forget to export components?\nCode of module follows:\n" +moduleDefinition);
-        }
+// no longer needed with the use of imports
 
 
-        for (p in mdef) {
-            if (mdef.hasOwnProperty(p) && ARCS.Context.currentContext != null) {
-                ARCS.Context.currentContext.setFactory(p,mdef[p]); //.setFactory(ARCS.Application.currentApplication, p, mdef[p]);
-            }
-        }
-        
-        return Promise.resolve();
-    };
-    // until now, it is the very same code.
-    
-    // here we create a promise to solve dependency
-    // reject has the dependency name, while resolve has the object
-    var depResolve = function(dep) {
-        return new Promise(function(resolve, reject) {  
-            var d,shimConfig;
-            if (ARCS.isInNode()) {
-                d = require(dep);
-                if (d === undefined) {
-                    reject(dep);
-                } else {
-                    resolve(d);
-                }
-            } else {
-                // this one a little bit trickier since we have to shim.
-                if (dep.name !== undefined) {
-                    shimConfig = { shim: {} };
-                    shimConfig.shim[dep.name] = { exports: dep.exports };
-                    if (dep.deps !== undefined) {
-                        shimConfig.shim[dep.name].deps = dep.deps;
-                    }
-                    require.config(shimConfig);
-                    dep = dep.name;
-                }
-                // shim performed
-                require([dep], 
-                        function(d) { resolve(d); },
-                        function(err) { console.log("[ARCS] Trouble with module ", dep); reject(dep, err); }
-                );
-            }
-        });            
-    };
-        
-    var depResolves = [];
-    for (i=0; i<deps.length; i++) {
-        depResolves[i] = depResolve(deps[i]);
-    }
-    
- 
-    
-        ARCS.Context.currentContext.addLibraryPromise(
-            Promise.all(depResolves).then(storeComponents,
-            function(reason) { console.error("[ARCS] Failed to load dependency ", reason ); })
-        
-        );
-    
-}
-
-// ARCS is then defined as a node.js module
-if (!ARCS.isInNode()) {
-    var exports = {};
-}
-
-exports.Component = ARCS.Component;
-exports.Connection = ARCS.Connection;
-exports.Invocation = ARCS.Invocation;
-exports.Statemachine = ARCS.Statemachine;
-exports.Sheet = ARCS.Sheet;
-exports.Application = ARCS.Application;
-exports.EventLogicParser = ARCS.EventLogicParser;
-exports.TransitionSystem = ARCS.TransitionSystem;
-exports.isInNode = ARCS.isInNode;
-exports.isInRequire = ARCS.isInRequire;
-
-// hack for require.js
-// ARCS is then defined as a require.js module.
-if (ARCS.isInRequire()) {
-    //console.log("module ARCS in require.js");
-    define(exports);
-}
+export { ARCS as default};
\ No newline at end of file

-/*! ARCS 2017-07-17 */
-var ARCS=ARCS||{};if(ARCS.isInNode=function(){return"function"==typeof require&&require.resolve},ARCS.isInRequire=function(){return"function"==typeof define&&define.amd},ARCS.Component={SourceIsNotComponent:{message:"Source is not a component"},UndefinedSignal:{message:"Signal is not defined"},UndefinedSlot:{message:"Slot is not defined"},create:function(a,b,c){return void 0===a.prototype?(console.error("Cannot create such a component"),0):(a.prototype.slots=[],a.prototype.signals={},a.slotList=function(){return a.prototype.slots},a.prototype.slotList=function(){return a.prototype.slots},a.prototype.signalList=function(){var b,c=[];for(b in a.prototype.signals)c.push(b);return c},a.signalList=function(){return a.prototype.signalList()},a.prototype.emit=function(a){var b,c,d,e=Array.prototype.slice.call(arguments,1);for(b in this.signals[a])c=this.signals[a][b].func,d=this.signals[a][b].obj,c.apply(d,e)},a.slot=function(b,c){var d;if(b instanceof Array)for(d=0;d<b.length;d++)a.prototype.slots.push(b[d]);else a.prototype.slots.push(b),void 0!==c&&(a.prototype[b]=c)},a.signal=function(b){var c;if(b instanceof Array)for(c=0;c<b.length;c++)a.prototype.signals[b[c]]=1;else a.prototype.signals[b]=1},void 0!==b&&a.slot(b),void 0!==c&&a.signal(c),a)},check:function(a){return void 0!==a.prototype&&(void 0!==a.prototype.signals&&void 0!==a.prototype.slots)},connect:function(a,b,c,d){var e,f;if(void 0===a.signals)throw ARCS.Component.SourceIsNotComponent;if(void 0===a.signals[b])throw ARCS.Component.UndefinedSignal;if(void 0===c[d])throw ARCS.Component.UndefinedSlot;if(!a.hasOwnProperty("signals")){e=a.signals,a.signals={};for(f in e)a.signals[f]=[]}a.signals[b].push({obj:c,func:c[d]})},disconnect:function(a,b,c,d){var e;for(e=0;e<a.signals[b].length;e++)a.signals[b][e].obj===c&&a.signals[b][e].func===c[d]&&(a.signals[b].splice(e,1),e--)},invoke:function(a,b,c){if(void 0===a[b])throw ARCS.Component.UndefinedSlot;var d=a[b];d.apply(a,c)},config:function(a,b){"function"==typeof a.config&&a.config(b)}},ARCS.Context=function(a){var b,c,d,e,f={},g={},h={},j=[],k=[],l=this;if(h.StateMachine=ARCS.Statemachine,void 0!==a){j=a.libraries;for(p in a.components)a.components.hasOwnProperty(p)&&(f[p]=a.components[p]);if(void 0!==a.constants)for(p in a.constants)a.constants.hasOwnProperty(p)&&(g[p]=a.constants[p])}c=function(a){return ARCS.isInNode()?new Promise(function(b,c){var d=require(a);void 0!==d?b(d):c("[ARCS] File not found")}):new Promise(function(b,c){var d=new XMLHttpRequest;d.open("GET",a,!0),d.overrideMimeType("application/json"),d.send(),d.onload=function(){this.status>=200&&this.status<300?b(JSON.parse(this.responseText)):(console.error(this.statusText),c(this.statusText))},d.onerror=function(){console.error(this.statusText),c(this.statusText)}})},this.addLibraryPromise=function(a){k.push(a)},d=function(a){return new Promise(function(b,c){".js"===a.substr(-3)&&c(a),ARCS.isInNode()?void 0===require("./"+j[i]+".js")?c(a):b():require([a],function(){b()},function(b){c(a,b)})})},b=function(){var a;ARCS.Context.currentContext=l;var b=[];for(a=0;a<j.length;a++)b.push(d(j[a]));return Promise.all(b)},e=function(){var a,b=[];console.log(f);for(a in f)if(f.hasOwnProperty(a)){if(void 0===h[f[a].type])return console.error("[ARCS] Factory "+f[a].type+" not found."),void console.error("[ARCS] Context dump follows: ",j,f,g);factory=h[f[a].type];try{if(void 0!==f[a].value||void 0!==f[a].url||void 0!==f[a].ref){if(void 0!==f[a].value&&(f[a].instance=new factory(f[a].value)),void 0!==f[a].url){var d=function(a,b){return function(c){return f[a].instance=new b(c),Promise.resolve()}};b.push(c(f[a].url).then(d(a,factory)))}void 0!==f[a].ref&&void 0!==g[f[a].ref]&&(f[a].instance=new factory(g[f[a].ref]))}else f[a].instance=new factory}catch(b){console.error("[ARCS] Component of type ",a," not instanciated.",b)}}return Promise.all(b)},this.loadLibrary=function(a,b){var c=a,e=a;ARCS.Context.currentContext=l,"string"!=typeof a&&(e=a.name,c=a.url),j.push(e),d(c).then(function(){void 0!==b&&b()})},this.getComponentList=function(){var a,b=Object.keys(f);for(a=0;a<b.length;a++)f.hasOwnProperty(b[a])||b.splice(a--,1);return b},this.getConstant=function(a){return g[a]},this.getComponentType=function(a){if(void 0!==f[a])return f[a].type},this.getComponentValue=function(a){if(void 0!==f[a])return f[a].value},this.getComponent=function(a){if(void 0!==f[a])return f[a].instance},this.getComponentName=function(a){var b,c;for(c=f.getComponentList(),b=0;b<c.length;b++)if(f[c[b]].instance===a)return c[b]},this.setFactory=function(a,b){h[a]=b},this.toJSON=function(){var a,b={};for(a in f)f.hasOwnProperty(a)&&(b[a]={type:f[a].type,value:f[a].value});return b},this.setComponentValue=function(a,b){f[a].value=b},this.addComponent=function(a,b,c){var d;f[a]={},f[a].type=b,f[a].value=c;var e=h[b];void 0!==e&&(d=new e(c)),f[a].instance=d},this.removeComponent=function(a){delete f[a]},this.getFactory=function(a){return h[a]},this.getFactoryList=function(){return Object.keys(h)},this.instanciate=function(){return b().then(function(){return Promise.all(k)}).then(e).catch(function(a){console.log("[ARCS] Trouble instanciating context",a)})};var m=function(a,b){var c,d=Object.create(b);for(c in a)a.hasOwnProperty(c)&&(d[c]=a[c]);return d};this.chain=function(a,b,c){return[m(a,f),m(b,g),m(c,h)]},this.setParent=function(a){if(void 0!==a){var b=a.chain(f,g,h);f=b[0],g=b[1],h=b[2]}}},ARCS.Context.currentContext=null,ARCS.Invocation=function(a,b,c){this.getDestination=function(){return a},this.getSlot=function(){return b},this.getValue=function(){return c},this.invoke=function(){var d=a[b];return void 0===d?void console.error("Undefined slot %s of component %s",b,a):void d.apply(a,c)}},ARCS.Invocation.cast=function(a,b){if(void 0!==a.value){var c=b.getComponent(a.destination);return void 0===c&&console.error("[ARCS] Destination ",a.destination," is undefined"),new ARCS.Invocation(c,a.slot,a.value)}if(void 0!==a.ref)return new ARCS.Invocation(b.getComponent(a.destination),a.slot,b.getConstant(a.ref))},ARCS.Invocation.PRE_CONNECTION=0,ARCS.Invocation.POST_CONNECTION=1,ARCS.Invocation.CLEAN_UP=2,ARCS.Connection=function(a,b,c,d){this.connect=function(){try{ARCS.Component.connect(a,b,c,d)}catch(e){console.log(e,a,b,c,d)}},this.disconnect=function(){ARCS.Component.disconnect(a,b,c,d)},this.getSource=function(){return a},this.getDestination=function(){return c},this.getSlot=function(){return d},this.getSignal=function(){return b}},ARCS.Connection.cast=function(a,b){return new ARCS.Connection(b.getComponent(a.source),a.signal,b.getComponent(a.destination),a.slot)},ARCS.Sheet=function(a){var b,c,d,e,f,g=new ARCS.Context,h=[],i=[],j=[],k=[],l=0,m=0,n=0,o=0;b=function(){var a;for(a=0;a<h.length;a++)h[a].invoke()},c=function(){var a;for(a=0;a<i.length;a++)i[a].invoke()},d=function(){var a;for(a=0;a<j.length;a++)j[a].invoke()},e=function(){var a;for(a=0;a<k.length;a++)k[a].connect()},f=function(){var a;for(a=0;a<k.length;a++)k[a].disconnect()},this.setContext=function(a){g=a},this.activate=function(){g.instanciate().then(function(){b(),e(),c()})},this.deactivate=function(){f(),d()},this.addPreConnection=function(a){var b=ARCS.Invocation.cast(a,g);return b.id=l++,h.push(b),b.id},this.addPostConnection=function(a){var b=ARCS.Invocation.cast(a,g);return b.id=m++,i.push(b),b.id},this.addCleanup=function(a){var b=ARCS.Invocation.cast(a,g);return b.id=n++,j.push(b),b.id},this.addConnection=function(a){var b=ARCS.Connection.cast(a,g);return b.id=o++,k.push(b),b.id};var p=function(a,b){for(var c=b.length;c--&&b[c].id!==a;);c>=0?b.splice(c,1):console.warn("Could not remove data with id",a)};this.removePreConnection=function(a){p(a,h)},this.removePostConnection=function(a){p(a,i)},this.removeCleanup=function(a){p(a,j)};var q=function(a,b,c){for(var d=c.length;d--&&c[d].id!==a;);d>=0&&(c[d].value=b)};this.changePreConnection=function(a,b){q(a,b,h)},this.changePostConnection=function(a,b){q(a,b,i)},this.changeCleanup=function(a,b){q(a,b,j)},this.removeConnection=function(a){p(a,k)};var r=function(a,b,c){for(var d,e=c.length,f=c.length;e--&&c[e].id!==a;);for(;f--&&c[f].id!==b;);e>=0&&f>=0&&(d=c[e],c[e]=c[f],c[f]=d,c[e].id=a,c[f].id=b)};this.swapConnections=function(a,b){r(a,b,k)},this.swapCleanups=function(a,b){r(a,b,j)},this.swapPreConnections=function(a,b){r(a,b,h)},this.swapPostConnections=function(a,b){r(a,b,i)};var s=function(a){var b=0,c=ARCS.Invocation.cast,d=ARCS.Connection.cast;for(b=0;b<a.preconnections.length;b++)h.push(c(a.preconnections[b],g));for(b=0;b<a.postconnections.length;b++)i.push(c(a.postconnections[b],g));for(b=0;b<a.cleanups.length;b++)j.push(c(a.cleanups[b],g));for(b=0;b<a.connections.length;b++)k.push(d(a.connections[b],g))};this.import=function(b){b.hasOwnProperty("context")&&(g=new ARCS.Context(b.context),g.setParent(a)),g.instanciate().then(function(){s(b)})};var t=function(a){return{destination:g.getComponentName(a.getDestination()),slot:a.getSlot(),value:a.getValue()}},u=function(a){return{source:g.getComponentName(a.getSource()),signal:a.getSignal(),destination:g.getComponentName(a.getDestination()),slot:a.getSlot()}};this.toJSON=function(){var a,b=[],c=[],d=[],e=[];for(a=0;a<k.length;a++)d.push(u(k[a]));for(a=0;a<h.length;a++)b.push(t(h[a]));for(a=0;a<i.length;a++)c.push(t(i[a]));for(a=0;a<j.length;a++)e.push(t(j[a]));return{preconnections:b,postconnections:c,connections:d,cleanups:e}},g.setParent(a)},ARCS.EventLogicParser=function(){function a(a,b){function c(){this.constructor=a}c.prototype=b.prototype,a.prototype=new c}function b(a,b,c,d,e,f){this.message=a,this.expected=b,this.found=c,this.offset=d,this.line=e,this.column=f,this.name="SyntaxError"}function c(a){function c(b){function c(b,c,d){var e,f;for(e=c;e<d;e++)f=a.charAt(e),"\n"===f?(b.seenCR||b.line++,b.column=1,b.seenCR=!1):"\r"===f||"\u2028"===f||"\u2029"===f?(b.line++,b.column=1,b.seenCR=!0):(b.column++,b.seenCR=!1)}return R!==b&&(R>b&&(R=0,S={line:1,column:1,seenCR:!1}),c(S,R,b),R=b),S}function d(a){P<T||(P>T&&(T=P,U=[]),U.push(a))}function e(d,e,f){function g(a){var b=1;for(a.sort(function(a,b){return a.description<b.description?-1:a.description>b.description?1:0});b<a.length;)a[b-1]===a[b]?a.splice(b,1):b++}function h(a,b){function c(a){function b(a){return a.charCodeAt(0).toString(16).toUpperCase()}return a.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\x08/g,"\\b").replace(/\t/g,"\\t").replace(/\n/g,"\\n").replace(/\f/g,"\\f").replace(/\r/g,"\\r").replace(/[\x00-\x07\x0B\x0E\x0F]/g,function(a){return"\\x0"+b(a)}).replace(/[\x10-\x1F\x80-\xFF]/g,function(a){return"\\x"+b(a)}).replace(/[\u0180-\u0FFF]/g,function(a){return"\\u0"+b(a)}).replace(/[\u1080-\uFFFF]/g,function(a){return"\\u"+b(a)})}var d,e,f,g=new Array(a.length);for(f=0;f<a.length;f++)g[f]=a[f].description;return d=a.length>1?g.slice(0,-1).join(", ")+" or "+g[a.length-1]:g[0],e=b?'"'+c(b)+'"':"end of input","Expected "+d+" but "+e+" found."}var i=c(f),j=f<a.length?a.charAt(f):null;return null!==e&&g(e),new b(null!==d?d:h(e,j),e,j,f,i.line,i.column)}function f(){var a;return a=g()}function g(){var a,b,c,d;if(a=P,b=i(),b!==q){if(c=[],d=h(),d!==q)for(;d!==q;)c.push(d),d=h();else c=t;c!==q?(Q=a,b=u(b,c),a=b):(P=a,a=t)}else P=a,a=t;return a===q&&(a=i()),a}function h(){var a,b,c;return a=P,b=l(),b!==q?(c=i(),c!==q?(Q=a,b=v(c),a=b):(P=a,a=t)):(P=a,a=t),a===q&&(a=P,b=m(),b!==q?(c=i(),c!==q?(Q=a,b=w(c),a=b):(P=a,a=t)):(P=a,a=t)),a}function i(){var b,c,e,f;return b=P,c=j(),c!==q&&(Q=b,c=x(c)),b=c,b===q&&(b=P,40===a.charCodeAt(P)?(c=y,P++):(c=q,0===V&&d(z)),c!==q?(e=g(),e!==q?(41===a.charCodeAt(P)?(f=A,P++):(f=q,0===V&&d(B)),f!==q?(Q=b,c=C(e),b=c):(P=b,b=t)):(P=b,b=t)):(P=b,b=t)),b}function j(){var b,c,e;return V++,b=P,c=P,e=k(),e!==q&&(e=a.substring(c,P)),c=e,c!==q&&(Q=b,c=E(c)),b=c,V--,b===q&&(c=q,0===V&&d(D)),b}function k(){var b,c,e,f,g;if(b=P,c=n(),c!==q)if(F.test(a.charAt(P))?(e=a.charAt(P),P++):(e=q,0===V&&d(G)),e!==q){for(f=[],H.test(a.charAt(P))?(g=a.charAt(P),P++):(g=q,0===V&&d(I));g!==q;)f.push(g),H.test(a.charAt(P))?(g=a.charAt(P),P++):(g=q,0===V&&d(I));f!==q?(g=n(),g!==q?(c=[c,e,f,g],b=c):(P=b,b=t)):(P=b,b=t)}else P=b,b=t;else P=b,b=t;return b}function l(){var b,c,e,f;return b=P,c=n(),c!==q?(38===a.charCodeAt(P)?(e=J,P++):(e=q,0===V&&d(K)),e!==q?(f=n(),f!==q?(c=[c,e,f],b=c):(P=b,b=t)):(P=b,b=t)):(P=b,b=t),b}function m(){var b,c,e,f;return b=P,c=n(),c!==q?(124===a.charCodeAt(P)?(e=L,P++):(e=q,0===V&&d(M)),e!==q?(f=n(),f!==q?(c=[c,e,f],b=c):(P=b,b=t)):(P=b,b=t)):(P=b,b=t),b}function n(){var b,c;for(b=[],N.test(a.charAt(P))?(c=a.charAt(P),P++):(c=q,0===V&&d(O));c!==q;)b.push(c),N.test(a.charAt(P))?(c=a.charAt(P),P++):(c=q,0===V&&d(O));return b}var o,p=arguments.length>1?arguments[1]:{},q={},r={start:f},s=f,t=q,u=function(a,b){return[a].concat(b)},v=function(a){return{and:a}},w=function(a){return{or:a}},x=function(a){return a},y="(",z={type:"literal",value:"(",description:'"("'},A=")",B={type:"literal",value:")",description:'")"'},C=function(a){return[a]},D={type:"other",description:"id"},E=function(a){return a.trim()},F=/^[_a-zA-Z]/,G={type:"class",value:"[_a-zA-Z]",description:"[_a-zA-Z]"},H=/^[_a-zA-Z0-9]/,I={type:"class",value:"[_a-zA-Z0-9]",description:"[_a-zA-Z0-9]"},J="&",K={type:"literal",value:"&",description:'"&"'},L="|",M={type:"literal",value:"|",description:'"|"'},N=/^[ \r\n\t]/,O={type:"class",value:"[ \\r\\n\\t]",description:"[ \\r\\n\\t]"},P=0,Q=0,R=0,S={line:1,column:1,seenCR:!1},T=0,U=[],V=0;if("startRule"in p){if(!(p.startRule in r))throw new Error("Can't start parsing from rule \""+p.startRule+'".');s=r[p.startRule]}if(o=s(),o!==q&&P===a.length)return o;throw o!==q&&P<a.length&&d({type:"end",description:"end of input"}),e(null,U,T)}return a(b,Error),{SyntaxError:b,parse:c}}(),ARCS.TokenEvent=function(){var a,b;this.promise=new Promise(function(c,d){a=c,b=d}),this.accept=function(){a()},this.abort=function(){b()}},ARCS.TransitionNetwork=function(){this.promise={},this.and=function(a){return this.promise=Promise.all([this.promise,a.promise]),this},this.or=function(a){return this.promise=Promise.race([this.promise,a.promise]),this}},ARCS.TransitionNetwork.build=function(a,b){var c,d,e;if("string"==typeof a){var f;b.hasOwnProperty(a)?f=b[a]:b[a]=f=new ARCS.TokenEvent;var g=new ARCS.TransitionNetwork;return g.promise=f.promise,g}for(c=ARCS.TransitionNetwork.build(a[0],b),i=1;i<a.length;i++)a[i].hasOwnProperty("and")?(e=ARCS.TransitionNetwork.build(a[i].and,b),d=c.and(e)):a[i].hasOwnProperty("or")?(e=ARCS.TransitionNetwork.build(a[i].or,b),d=c.or(e)):console.warn("[ARCS] Illegal tree"),c=d;return c},ARCS.Statemachine=new ARCS.Component.create(function(a){var b="",c="",d={},e="",f=this,g={},h={},i={},j=function(a){f.slots.indexOf(a)<0&&(f.slots.push(a),f[a]=function(a){return function(){f.setToken(a)}}(a))},k=function(a){var b;if(d.hasOwnProperty(a)){h={};for(b in d[a])d[a].hasOwnProperty(b)&&(i=ARCS.TransitionNetwork.build(g[b],h).promise,i.then(function(){var c;for(c in h)h.hasOwnProperty(c)&&h[c].abort();k(d[a][b])}))}e=a,f.emit("requestSheet",e),e===c&&f.emit("requestTermination")};this.setInitialState=function(a){b=a,e=b},this.setFinalState=function(a){c=a},this.addTransition=function(a,b,c){var e,f,h=/([A-Za-z_]\w*)/g;try{var f=ARCS.EventLogicParser.parse(b);if("string"==typeof f)j(f);else for(;null!==(e=h.exec(b));)j(e[0]);g[b]=f,void 0===d[a]&&(d[a]={}),d[a][b]=c}catch(a){}},this.setToken=function(a){h.hasOwnProperty(a)&&h[a].accept()},this.setTransitions=function(a){var b,c;for(b in a)if(a.hasOwnProperty(b))for(c in a[b])a[b].hasOwnProperty(c)&&this.addTransition(b,c,a[b][c])},this.start=function(){console.log("statemachine",this,b,a),k(b)},void 0!==a&&(b=a.initial,c=a.final,this.setTransitions(a.transitions),e="")},["setToken"],["requestSheet","requestTermination"]),ARCS.Application=function(){var a,b=new ARCS.Context,c={},d={},e=[],f=this,g="";this.export=function(){var a={context:b,controller:b.getComponentName(d),sheets:c};return a},this.getContext=function(){return b},this.getSheetList=function(){return Object.keys(c)},this.getSheet=function(a){return c[a]},this.addSheet=function(a,d){c[a]=d,d.setContext(b)},this.removeSheet=function(a){delete c[a]},a=function(){var a,e,g;for(e=b.getComponent(d),d=e,g=Object.keys(c),a=0;a<g.length;a++)e=new ARCS.Sheet(b),e.import(c[g[a]],b),c[g[a]]=e;ARCS.Component.connect(d,"requestSheet",f,"setSheet"),ARCS.Component.connect(d,"requestTermination",f,"finish"),d.start()},this.setController=function(a){d=b.getComponent(a)},this.setSheet=function(a){c.hasOwnProperty(a)?(g&&c[g].deactivate(),g=a,c[g].activate()):console.warn("[ARCS] Tried to activate hollow sheet named: "+a)},this.finish=function(){g&&c[g].deactivate()},this.import=function(a){b=new ARCS.Context(a.context),c=a.sheets,d=a.controller,void 0===d&&console.error("[ARCS] Undefined controller. Cannot start application.")},this.setFactory=function(a,b){factories[a]=b},this.setDependency=function(a){e[a]={}},this.start=function(){console.log("[ARCS] Starting application"),b.instanciate().then(a)}},ARCS.Application.setDependency=function(a,b){a.setDependency(b)},ARCS.Component.create(ARCS.Application),ARCS.Application.slot("setSheet"),ARCS.Application.slot("finish"),arcs_module=function(a,b){var c,d;"undefined"!=typeof module&&module.parent.exports&&(ARCS=module.exports),void 0===b&&(b=[]),c=function(b){var c,d;if(b.unshift(ARCS),c="function"==typeof a?a.apply(this,b):a,void 0===c)throw new Error("[ARCS] Your module is undefined. Did you forget to export components?\nCode of module follows:\n"+a);for(d in c)c.hasOwnProperty(d)&&null!=ARCS.Context.currentContext&&ARCS.Context.currentContext.setFactory(d,c[d]);return Promise.resolve()};var e=function(a){return new Promise(function(b,c){var d,e;ARCS.isInNode()?(d=require(a),void 0===d?c(a):b(d)):(void 0!==a.name&&(e={shim:{}},e.shim[a.name]={exports:a.exports},void 0!==a.deps&&(e.shim[a.name].deps=a.deps),require.config(e),a=a.name),require([a],function(a){b(a)},function(b){console.log("[ARCS] Trouble with module ",a),c(a,b)}))})},f=[];for(d=0;d<b.length;d++)f[d]=e(b[d]);ARCS.Context.currentContext.addLibraryPromise(Promise.all(f).then(c,function(a){console.error("[ARCS] Failed to load dependency ",a)}))},!ARCS.isInNode())var exports={};exports.Component=ARCS.Component,exports.Connection=ARCS.Connection,exports.Invocation=ARCS.Invocation,exports.Statemachine=ARCS.Statemachine,exports.Sheet=ARCS.Sheet,exports.Application=ARCS.Application,exports.EventLogicParser=ARCS.EventLogicParser,exports.TransitionSystem=ARCS.TransitionSystem,exports.isInNode=ARCS.isInNode,exports.isInRequire=ARCS.isInRequire,ARCS.isInRequire()&&define(exports);
\ No newline at end of file
+var ARCS=ARCS||{};ARCS.isInNode=function(){return"function"==typeof require&&require.resolve},ARCS.Component={SourceIsNotComponent:{message:"Source is not a component"},UndefinedSignal:{message:"Signal is not defined"},UndefinedSlot:{message:"Slot is not defined"},create:function(n,t,e){return void 0===n.prototype?(console.error("Cannot create such a component"),0):(n.prototype.slots=[],n.prototype.signals={},n.slotList=function(){return n.prototype.slots},n.prototype.slotList=function(){return n.prototype.slots},n.prototype.signalList=function(){var t,e=[];for(t in n.prototype.signals)e.push(t);return e},n.signalList=function(){return n.prototype.signalList()},n.prototype.emit=function(n){var t,e,o,i=Array.prototype.slice.call(arguments,1);for(t in this.signals[n])e=this.signals[n][t].func,o=this.signals[n][t].obj,e.apply(o,i)},n.slot=function(t,e){var o;if(t instanceof Array)for(o=0;o<t.length;o++)n.prototype.slots.push(t[o]);else n.prototype.slots.push(t),void 0!==e&&(n.prototype[t]=e)},n.signal=function(t){var e;if(t instanceof Array)for(e=0;e<t.length;e++)n.prototype.signals[t[e]]=1;else n.prototype.signals[t]=1},void 0!==t&&n.slot(t),void 0!==e&&n.signal(e),n)},check:function(n){return void 0!==n.prototype&&(void 0!==n.prototype.signals&&void 0!==n.prototype.slots)},connect:function(n,t,e,o){var i,r;if(void 0===n.signals)throw ARCS.Component.SourceIsNotComponent;if(void 0===n.signals[t])throw ARCS.Component.UndefinedSignal;if(void 0===e[o])throw ARCS.Component.UndefinedSlot;if(!n.hasOwnProperty("signals"))for(r in i=n.signals,n.signals={},i)n.signals[r]=[];n.signals[t].push({obj:e,func:e[o]})},disconnect:function(n,t,e,o){var i;for(i=0;i<n.signals[t].length;i++)n.signals[t][i].obj===e&&n.signals[t][i].func===e[o]&&(n.signals[t].splice(i,1),i--)},invoke:function(n,t,e){if(void 0===n[t])throw ARCS.Component.UndefinedSlot;n[t].apply(n,e)},config:function(n,t){"function"==typeof n.config&&n.config(t)}},ARCS.Context=function(n){var t={},e={},o={},i=[],r=this;if(o.StateMachine=ARCS.Statemachine,void 0!==n){var s;for(s in i=n.libraries,n.components)n.components.hasOwnProperty(s)&&(t[s]=n.components[s]);if(void 0!==n.constants)for(s in n.constants)n.constants.hasOwnProperty(s)&&(e[s]=n.constants[s])}var c=async function(n){return ARCS.isInNode()?new Promise((function(t,e){var o=require(n);void 0!==o?t(o):e("[ARCS] File not found")})):(await fetch(n)).json()},a=function(){var n,r=[];for(n in t)if(t.hasOwnProperty(n)){if(void 0===o[t[n].type])return console.error("[ARCS] Factory "+t[n].type+" not found."),void console.error("[ARCS] Context dump follows: ",i,t,e);var s=o[t[n].type];try{if(void 0!==t[n].value||void 0!==t[n].url||void 0!==t[n].ref){if(void 0!==t[n].value&&(t[n].instance=new s(t[n].value)),void 0!==t[n].url){console.log("loading data file",t[n].url),r.push(c(t[n].url).then(function(n,e){return function(o){return console.log("instanciating from data file"),t[n].instance=new e(o),Promise.resolve()}}(n,s)))}void 0!==t[n].ref&&void 0!==e[t[n].ref]&&(t[n].instance=new s(e[t[n].ref]))}else t[n].instance=new s}catch(t){console.error("[ARCS] Component of type ",n," not instanciated.",t)}}return Promise.all(r)};this.loadLibrary=function(n,t){var e=n,o=n;return ARCS.Context.currentContext=r,"string"!=typeof n&&(o=n.name,e=n.url),i.indexOf(o)<0&&i.push(o),import(e).then((function(n){for(s in n.default)n.default.hasOwnProperty(s)&&ARCS.Context.currentContext.setFactory(s,n.default[s]);void 0!==t&&t()})).catch((function(n){console.error("[ARCS] Trouble loading '",e,"' with reason -",n)}))},this.getComponentList=function(){var n,e=Object.keys(t);for(n=0;n<e.length;n++)t.hasOwnProperty(e[n])||e.splice(n--,1);return e},this.getConstant=function(n){return e[n]},this.getComponentType=function(n){if(void 0!==t[n])return t[n].type},this.getComponentValue=function(n){if(void 0!==t[n])return t[n].value},this.getComponent=function(n){if(void 0!==t[n])return t[n].instance},this.getComponentName=function(n){var e,o;for(o=t.getComponentList(),e=0;e<o.length;e++)if(t[o[e]].instance===n)return o[e]},this.setFactory=function(n,t){o[n]=t},this.toJSON=function(){var n,e={};for(n in t)t.hasOwnProperty(n)&&(e[n]={type:t[n].type,value:t[n].value});return e},this.setComponentValue=function(n,e){t[n].value=e},this.addComponent=function(n,e,i){var r;t[n]={},t[n].type=e,t[n].value=i;var s=o[e];void 0!==s&&(r=new s(i)),t[n].instance=r},this.removeComponent=function(n){delete t[n]},this.getFactory=function(n){return o[n]},this.getFactoryList=function(){return Object.keys(o)},this.instanciate=function(){
+//! TODO
+return function(){var n;ARCS.Context.currentContext=r;var t=[];for(n=0;n<i.length;n++)t.push(r.loadLibrary(i[n]));return Promise.all(t)}().then(a).catch((function(n){console.error("[ARCS] Trouble instanciating context",n)}))};var u=function(n,t){var e,o=Object.create(t);for(e in n)n.hasOwnProperty(e)&&(o[e]=n[e]);return o};this.chain=function(n,i,r){return[u(n,t),u(i,e),u(r,o)]},this.setParent=function(n){if(void 0!==n){var i=n.chain(t,e,o);t=i[0],e=i[1],o=i[2]}}},ARCS.Context.currentContext=null,ARCS.Invocation=function(n,t,e){this.getDestination=function(){return n},this.getSlot=function(){return t},this.getValue=function(){return e},this.invoke=function(){var o=n[t];void 0!==o?o.apply(n,e):console.error("Undefined slot %s of component %s",t,n)}},ARCS.Invocation.cast=function(n,t){if(void 0!==n.value){var e=t.getComponent(n.destination);return void 0===e&&console.error("[ARCS] Destination ",n.destination," is undefined"),new ARCS.Invocation(e,n.slot,n.value)}if(void 0!==n.ref)return new ARCS.Invocation(t.getComponent(n.destination),n.slot,t.getConstant(n.ref))},ARCS.Invocation.PRE_CONNECTION=0,ARCS.Invocation.POST_CONNECTION=1,ARCS.Invocation.CLEAN_UP=2,ARCS.Connection=function(n,t,e,o){this.connect=function(){try{ARCS.Component.connect(n,t,e,o)}catch(i){console.log(i,n,t,e,o)}},this.disconnect=function(){ARCS.Component.disconnect(n,t,e,o)},this.getSource=function(){return n},this.getDestination=function(){return e},this.getSlot=function(){return o},this.getSignal=function(){return t}},ARCS.Connection.cast=function(n,t){return new ARCS.Connection(t.getComponent(n.source),n.signal,t.getComponent(n.destination),n.slot)},ARCS.Sheet=function(n){var t,e,o,i,r,s=new ARCS.Context,c=[],a=[],u=[],f=[],l=0,p=0,h=0,C=0;t=function(){var n;for(n=0;n<c.length;n++)c[n].invoke()},e=function(){var n;for(n=0;n<a.length;n++)a[n].invoke()},o=function(){var n;for(n=0;n<u.length;n++)u[n].invoke()},i=function(){var n;for(n=0;n<f.length;n++)f[n].connect()},r=function(){var n;for(n=0;n<f.length;n++)f[n].disconnect()},this.setContext=function(n){s=n},this.activate=function(){s.instanciate().then((function(){t(),i(),e()}))},this.deactivate=function(){r(),o()},this.addPreConnection=function(n){var t=ARCS.Invocation.cast(n,s);return t.id=l++,c.push(t),t.id},this.addPostConnection=function(n){var t=ARCS.Invocation.cast(n,s);return t.id=p++,a.push(t),t.id},this.addCleanup=function(n){var t=ARCS.Invocation.cast(n,s);return t.id=h++,u.push(t),t.id},this.addConnection=function(n){var t=ARCS.Connection.cast(n,s);return t.id=C++,f.push(t),t.id};var d=function(n,t){for(var e=t.length;e--&&t[e].id!==n;);e>=0?t.splice(e,1):console.warn("Could not remove data with id",n)};this.removePreConnection=function(n){d(n,c)},this.removePostConnection=function(n){d(n,a)},this.removeCleanup=function(n){d(n,u)};var v=function(n,t,e){for(var o=e.length;o--&&e[o].id!==n;);o>=0&&(e[o].value=t)};this.changePreConnection=function(n,t){v(n,t,c)},this.changePostConnection=function(n,t){v(n,t,a)},this.changeCleanup=function(n,t){v(n,t,u)},this.removeConnection=function(n){d(n,f)};var g=function(n,t,e){for(var o,i=e.length,r=e.length;i--&&e[i].id!==n;);for(;r--&&e[r].id!==t;);i>=0&&r>=0&&(o=e[i],e[i]=e[r],e[r]=o,e[i].id=n,e[r].id=t)};this.swapConnections=function(n,t){g(n,t,f)},this.swapCleanups=function(n,t){g(n,t,u)},this.swapPreConnections=function(n,t){g(n,t,c)},this.swapPostConnections=function(n,t){g(n,t,a)};this.import=function(t){t.hasOwnProperty("context")&&(s=new ARCS.Context(t.context)).setParent(n),s.instanciate().then((function(){!function(n){var t=0,e=ARCS.Invocation.cast,o=ARCS.Connection.cast;for(t=0;t<n.preconnections.length;t++)c.push(e(n.preconnections[t],s));for(t=0;t<n.postconnections.length;t++)a.push(e(n.postconnections[t],s));for(t=0;t<n.cleanups.length;t++)u.push(e(n.cleanups[t],s));for(t=0;t<n.connections.length;t++)f.push(o(n.connections[t],s))}(t)}))};var S=function(n){return{destination:s.getComponentName(n.getDestination()),slot:n.getSlot(),value:n.getValue()}};this.toJSON=function(){var n,t,e=[],o=[],i=[],r=[];for(n=0;n<f.length;n++)i.push((t=f[n],{source:s.getComponentName(t.getSource()),signal:t.getSignal(),destination:s.getComponentName(t.getDestination()),slot:t.getSlot()}));for(n=0;n<c.length;n++)e.push(S(c[n]));for(n=0;n<a.length;n++)o.push(S(a[n]));for(n=0;n<u.length;n++)r.push(S(u[n]));return{preconnections:e,postconnections:o,connections:i,cleanups:r}},s.setParent(n)},ARCS.EventLogicParser=function(){function n(n,t,e,o,i,r){this.message=n,this.expected=t,this.found=e,this.offset=o,this.line=i,this.column=r,this.name="SyntaxError"}return function(n,t){function e(){this.constructor=n}e.prototype=t.prototype,n.prototype=new e}(n,Error),{SyntaxError:n,parse:function(t){var e,o=arguments.length>1?arguments[1]:{},i={},r={start:U},s=U,c=i,a=function(n,t){return[n].concat(t)},u=function(n){return{and:n}},f=function(n){return{or:n}},l=function(n){return n},p="(",h={type:"literal",value:"(",description:'"("'},C=")",d={type:"literal",value:")",description:'")"'},v=function(n){return[n]},g={type:"other",description:"id"},S=function(n){return n.trim()},A=/^[_a-zA-Z]/,m={type:"class",value:"[_a-zA-Z]",description:"[_a-zA-Z]"},y=/^[_a-zA-Z0-9]/,R={type:"class",value:"[_a-zA-Z0-9]",description:"[_a-zA-Z0-9]"},w="&",x={type:"literal",value:"&",description:'"&"'},P="|",O={type:"literal",value:"|",description:'"|"'},T=/^[ \r\n\t]/,N={type:"class",value:"[ \\r\\n\\t]",description:"[ \\r\\n\\t]"},b=0,k=0,F={line:1,column:1,seenCR:!1},I=0,E=[],L=0;if("startRule"in o){if(!(o.startRule in r))throw new Error("Can't start parsing from rule \""+o.startRule+'".');s=r[o.startRule]}function j(n){return k!==n&&(k>n&&(k=0,F={line:1,column:1,seenCR:!1}),function(n,e,o){var i,r;for(i=e;i<o;i++)"\n"===(r=t.charAt(i))?(n.seenCR||n.line++,n.column=1,n.seenCR=!1):"\r"===r||"\u2028"===r||"\u2029"===r?(n.line++,n.column=1,n.seenCR=!0):(n.column++,n.seenCR=!1)}(F,k,n),k=n),F}function _(n){b<I||(b>I&&(I=b,E=[]),E.push(n))}function q(e,o,i){var r=j(i),s=i<t.length?t.charAt(i):null;return null!==o&&function(n){var t=1;for(n.sort((function(n,t){return n.description<t.description?-1:n.description>t.description?1:0}));t<n.length;)n[t-1]===n[t]?n.splice(t,1):t++}(o),new n(null!==e?e:function(n,t){var e,o=new Array(n.length);for(e=0;e<n.length;e++)o[e]=n[e].description;return"Expected "+(n.length>1?o.slice(0,-1).join(", ")+" or "+o[n.length-1]:o[0])+" but "+(t?'"'+function(n){function t(n){return n.charCodeAt(0).toString(16).toUpperCase()}return n.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\x08/g,"\\b").replace(/\t/g,"\\t").replace(/\n/g,"\\n").replace(/\f/g,"\\f").replace(/\r/g,"\\r").replace(/[\x00-\x07\x0B\x0E\x0F]/g,(function(n){return"\\x0"+t(n)})).replace(/[\x10-\x1F\x80-\xFF]/g,(function(n){return"\\x"+t(n)})).replace(/[\u0180-\u0FFF]/g,(function(n){return"\\u0"+t(n)})).replace(/[\u1080-\uFFFF]/g,(function(n){return"\\u"+t(n)}))}(t)+'"':"end of input")+" found."}(o,s),o,s,i,r.line,r.column)}function U(){return D()}function D(){var n,t,e,o;if(n=b,(t=Z())!==i){if(e=[],(o=z())!==i)for(;o!==i;)e.push(o),o=z();else e=c;e!==i?(n,n=t=a(t,e)):(b=n,n=c)}else b=n,n=c;return n===i&&(n=Z()),n}function z(){var n,t;return n=b,B()!==i&&(t=Z())!==i?(n,n=u(t)):(b=n,n=c),n===i&&(n=b,M()!==i&&(t=Z())!==i?(n,n=f(t)):(b=n,n=c)),n}function Z(){var n,e,o,r;return n=b,(e=V())!==i&&(n,e=l(e)),(n=e)===i&&(n=b,40===t.charCodeAt(b)?(e=p,b++):(e=i,0===L&&_(h)),e!==i&&(o=D())!==i?(41===t.charCodeAt(b)?(r=C,b++):(r=i,0===L&&_(d)),r!==i?(n,n=e=v(o)):(b=n,n=c)):(b=n,n=c)),n}function V(){var n,e,o;return L++,n=b,e=b,(o=J())!==i&&(o=t.substring(e,b)),(e=o)!==i&&(n,e=S(e)),L--,(n=e)===i&&(e=i,0===L&&_(g)),n}function J(){var n,e,o,r,s;if(n=b,(e=G())!==i)if(A.test(t.charAt(b))?(o=t.charAt(b),b++):(o=i,0===L&&_(m)),o!==i){for(r=[],y.test(t.charAt(b))?(s=t.charAt(b),b++):(s=i,0===L&&_(R));s!==i;)r.push(s),y.test(t.charAt(b))?(s=t.charAt(b),b++):(s=i,0===L&&_(R));r!==i&&(s=G())!==i?n=e=[e,o,r,s]:(b=n,n=c)}else b=n,n=c;else b=n,n=c;return n}function B(){var n,e,o,r;return n=b,(e=G())!==i?(38===t.charCodeAt(b)?(o=w,b++):(o=i,0===L&&_(x)),o!==i&&(r=G())!==i?n=e=[e,o,r]:(b=n,n=c)):(b=n,n=c),n}function M(){var n,e,o,r;return n=b,(e=G())!==i?(124===t.charCodeAt(b)?(o=P,b++):(o=i,0===L&&_(O)),o!==i&&(r=G())!==i?n=e=[e,o,r]:(b=n,n=c)):(b=n,n=c),n}function G(){var n,e;for(n=[],T.test(t.charAt(b))?(e=t.charAt(b),b++):(e=i,0===L&&_(N));e!==i;)n.push(e),T.test(t.charAt(b))?(e=t.charAt(b),b++):(e=i,0===L&&_(N));return n}if((e=s())!==i&&b===t.length)return e;throw e!==i&&b<t.length&&_({type:"end",description:"end of input"}),q(null,E,I)}}}(),ARCS.TokenEvent=function(){var n,t;this.promise=new Promise((function(e,o){n=e,t=o})),this.accept=function(){n()},this.abort=function(){t()}},ARCS.TransitionNetwork=function(){this.promise={},this.and=function(n){return this.promise=Promise.all([this.promise,n.promise]),this},this.or=function(n){return this.promise=Promise.race([this.promise,n.promise]),this}},ARCS.TransitionNetwork.build=function(n,t){var e,o,i,r;if("string"==typeof n){var s;t.hasOwnProperty(n)?s=t[n]:t[n]=s=new ARCS.TokenEvent;var c=new ARCS.TransitionNetwork;return c.promise=s.promise,c}for(e=ARCS.TransitionNetwork.build(n[0],t),r=1;r<n.length;r++)n[r].hasOwnProperty("and")?(i=ARCS.TransitionNetwork.build(n[r].and,t),o=e.and(i)):n[r].hasOwnProperty("or")?(i=ARCS.TransitionNetwork.build(n[r].or,t),o=e.or(i)):console.warn("[ARCS] Illegal tree"),e=o;return e},ARCS.Statemachine=new ARCS.Component.create((function(n){var t="",e="",o={},i="",r=this,s={},c={},a=function(n){var t;r.slots.indexOf(n)<0&&(r.slots.push(n),r[n]=(t=n,function(){r.setToken(t)}))},u=function(n){var t;if(o.hasOwnProperty(n))for(t in c={},o[n])o[n].hasOwnProperty(t)&&ARCS.TransitionNetwork.build(s[t],c).promise.then((function(){var e;for(e in c)c.hasOwnProperty(e)&&c[e].abort();u(o[n][t])}));i=n,r.emit("requestSheet",i),i===e&&r.emit("requestTermination")};this.setInitialState=function(n){i=t=n},this.setFinalState=function(n){e=n},this.addTransition=function(n,t,e){var i,r=/([A-Za-z_]\w*)/g;try{var c;if("string"==typeof(c=ARCS.EventLogicParser.parse(t)))a(c);else for(;null!==(i=r.exec(t));)a(i[0]);s[t]=c,void 0===o[n]&&(o[n]={}),o[n][t]=e}catch(n){}},this.setToken=function(n){c.hasOwnProperty(n)&&c[n].accept()},this.setTransitions=function(n){var t,e;for(t in n)if(n.hasOwnProperty(t))for(e in n[t])n[t].hasOwnProperty(e)&&this.addTransition(t,e,n[t][e])},this.start=function(){console.log("statemachine",this,t,n),u(t)},void 0!==n&&(t=n.initial,e=n.final,this.setTransitions(n.transitions),i="")}),["setToken"],["requestSheet","requestTermination"]),ARCS.Application=function(){var n,t=new ARCS.Context,e={},o={},i=[],r=this,s="";this.export=function(){return{context:t,controller:t.getComponentName(o),sheets:e}},this.getContext=function(){return t},this.getSheetList=function(){return Object.keys(e)},this.getSheet=function(n){return e[n]},this.addSheet=function(n,o){e[n]=o,o.setContext(t)},this.removeSheet=function(n){delete e[n]},n=function(){var n,i,s;for(i=t.getComponent(o),o=i,s=Object.keys(e),n=0;n<s.length;n++)(i=new ARCS.Sheet(t)).import(e[s[n]],t),e[s[n]]=i;ARCS.Component.connect(o,"requestSheet",r,"setSheet"),ARCS.Component.connect(o,"requestTermination",r,"finish"),o.start()},this.setController=function(n){o=t.getComponent(n)},this.setSheet=function(n){e.hasOwnProperty(n)?(s&&e[s].deactivate(),e[s=n].activate()):console.warn("[ARCS] Tried to activate hollow sheet named: "+n)},this.finish=function(){s&&e[s].deactivate()},this.import=function(n){t=new ARCS.Context(n.context),e=n.sheets,void 0===(o=n.controller)&&console.error("[ARCS] Undefined controller. Cannot start application.")},this.setFactory=function(n,t){factories[n]=t},this.setDependency=function(n){i[n]={}},this.start=function(){console.log("[ARCS] Starting application..."),t.instanciate().then(n)}},ARCS.Application.setDependency=function(n,t){n.setDependency(t)},ARCS.Component.create(ARCS.Application),ARCS.Application.slot("setSheet"),ARCS.Application.slot("finish");export{ARCS as default};
\ No newline at end of file

+{ "type": "module"}

-arcs_module(
-    function (ARCS) {
-        var Animator;
+        
+import ARCS from '../build/arcs.js';        
+        
+var Animator;
 
 
-        /**
-         * @class Animator
-         * @classdesc A component that request new frames for animation.
-         * This component is useful when you want to create animations in the 
-         * context of a web browser.
-         */        
-        Animator = ARCS.Component.create( 
-            function() {
-                var paused = false;
-                var self=this;
-                
-                var tick = function () {
-                    if (paused === false) {
-                        requestAnimationFrame(tick);
-                        self.emit("onAnimationFrame");
-                    }
-                }
-                
-                /** 
-                 * Starts requesting frames for animation. As soon as it is started, 
-                 * the signal <b>onAnimationFrame</b> is periodically triggered.
-                 * @slot
-                 * @emits onAnimationFrame
-                 * @function Animator#start
-                 */
-                this.start = function () {
-                    paused = false;
-                    tick();
-                };
-                
-                /** 
-                 * Stops requesting frames for animation.
-                 * @slot
-                 * @function Animator#stop
-                 */                
-                this.stop = function () {
-                    paused = true;
-                };
-                
-                /** 
-                 * Signals that an animation frame is ready.
-                 * @signal
-                 * @function Animator#onAnimationFrame
-                 */
-            },
-            ['start','stop'],
-            'onAnimationFrame'
-        );
+/**
+    * @class Animator
+    * @classdesc A component that request new frames for animation.
+    * This component is useful when you want to create animations in the 
+    * context of a web browser.
+    */        
+Animator = ARCS.Component.create( 
+    function() {
+        var paused = false;
+        var self=this;
+        
+        var tick = function () {
+            if (paused === false) {
+                requestAnimationFrame(tick);
+                self.emit("onAnimationFrame");
+            }
+        }
+        
+        /** 
+            * Starts requesting frames for animation. As soon as it is started, 
+            * the signal <b>onAnimationFrame</b> is periodically triggered.
+            * @slot
+            * @emits onAnimationFrame
+            * @function Animator#start
+            */
+        this.start = function () {
+            paused = false;
+            tick();
+        };
+        
+        /** 
+            * Stops requesting frames for animation.
+            * @slot
+            * @function Animator#stop
+            */                
+        this.stop = function () {
+            paused = true;
+        };
+        
+        /** 
+            * Signals that an animation frame is ready.
+            * @signal
+            * @function Animator#onAnimationFrame
+            */
+    },
+    ['start','stop'],
+    'onAnimationFrame'
+);
 
 
-        return {Animator: Animator};
-    }
-);
\ No newline at end of file
+export default {Animator: Animator};

-arcs_module(
-    function (ARCS, CV, AR) {
-        var ARUCODetector;
+import ARCS from '../build/arcs.js';
+import CV from '../deps/cv/index.js';
+import AR from '../deps/aruco/index.js';
+
+var ARUCODetector;
         
         
-        /**
-         * @class ARUCODetector
-         * @classdesc Component that detects ARUCO markers in images
-         * This component encapsulate the {@link https://github.com/jcmellado/js-aruco|js-aruco} library.
-         */        
-        ARUCODetector = ARCS.Component.create(
-            function() {
-                var detector ;
+/**
+    * @class ARUCODetector
+    * @classdesc Component that detects ARUCO markers in images
+    * This component encapsulate the {@link https://github.com/jcmellado/js-aruco|js-aruco} library.
+    */        
+ARUCODetector = ARCS.Component.create(
+    function() {
+        var detector ;
 
 
-                /*1 Instanciate here the detector */
-                detector = new AR.Detector();
+        /*1 Instanciate here the detector */
+        detector = new AR.Detector();
 
 
-                /**
-                 * Detects ARUCO markers in the given image.
-                 * If markers are detected, this slot triggers the signal <b>onMarkers</b>.
-                 * @param image {obj} the image in which markers should be detected
-                 * @emits onMarkers
-                 * @function ARUCODetector#detect
-                 * @slot
-                 */
-                this.detect = function (image) {                    
-                    /*1 recover markers from image 
-                     *  then send they will be sent through onMarkers event
-                     */
-                    var markers = detector.detect(image);
-                    this.emit("onMarkers",markers);
-                };
-                
-                /**
-                 * Signal that is emitted when markers are detected in an image.
-                 * @function ARUCODetector#onMarkers
-                 * @param markers {Marker[]} Array of detected markers.
-                 * @signal
-                 */
-                
-                /**
-                 * @typedef {Object} Marker
-                 * @property {number} id - marker id
-                 * @property {Object} pose - computed pose for the marker
-                 * @property {number[]} pose.rotation - rotation matrix (3x3)
-                 * @property {number[]} pose.position - translation (3 components)
-                 */  
-                
-            },
-            'detect',
-            ['onMarkers']
-        );
+        /**
+            * Detects ARUCO markers in the given image.
+            * If markers are detected, this slot triggers the signal <b>onMarkers</b>.
+            * @param image {obj} the image in which markers should be detected
+            * @emits onMarkers
+            * @function ARUCODetector#detect
+            * @slot
+            */
+        this.detect = function (image) {                    
+            /*1 recover markers from image 
+                *  then send they will be sent through onMarkers event
+                */
+            var markers = detector.detect(image);
+            this.emit("onMarkers",markers);
+        };
+        
+        /**
+            * Signal that is emitted when markers are detected in an image.
+            * @function ARUCODetector#onMarkers
+            * @param markers {Marker[]} Array of detected markers.
+            * @signal
+            */
+        
+        /**
+            * @typedef {Object} Marker
+            * @property {number} id - marker id
+            * @property {Object} pose - computed pose for the marker
+            * @property {number[]} pose.rotation - rotation matrix (3x3)
+            * @property {number[]} pose.position - translation (3 components)
+            */  
         
         
-        return {ARUCODetector: ARUCODetector};
     },
     },
-    [
-        {name:"deps/cv/index", exports:"CV"},
-        {name:"deps/aruco/index",exports:"AR"}
-    ]
-);
\ No newline at end of file
+    'detect',
+    ['onMarkers']
+);
+
+export default {ARUCODetector: ARUCODetector};

-arcs_module( 
-    function(ARCS, three) {
-        var ARViewer;
         
         
-        /** 
-         * @class ARViewer 
-         * @classdesc Simple compositing viewer for augmented reality
-         */        
-        ARViewer = ARCS.Component.create(
-            /** @lends ARViewer.prototype */
-            function () {
-                var container, sourceAspectRatio, sourceHeight;
+import ARCS from '../build/arcs.js';
+import * as THREE from '../deps/three.js/index.js';
+import FrustumCamera from '../deps/three.js/frustumcamera.js';
+        
+var ARViewer;
+
+/** 
+    * @class ARViewer 
+    * @classdesc Simple compositing viewer for augmented reality
+    */        
+ARViewer = ARCS.Component.create(
+    /** @lends ARViewer.prototype */
+    function () {
+        var container, sourceAspectRatio, sourceHeight;
+    
+        var renderer, scene2d, scene3d, camera2d, camera3d, videoSource, videoTexture;
+        
+        var aspectRatioKept = true;
+        
+        var sceneId;
+        
+        
+        // scenegraph initializations
+        scene2d = new THREE.Scene();
+        camera2d = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5);
+        scene2d.add(camera2d);
+        
+        scene3d = new THREE.Scene();
+
+        /**
+            * Initializes the widgets (HTML elements) needed as a basis 
+            * for the viewer.
+            * @param cName {string} id of the container that will enclose the scene renderer
+            * @param vName {string} id of the element at the source of the video stream
+            * @slot
+            * @function ARViewer#setWidgets
+            */
+        this.setWidgets = function(cName,vName) {
+            container = document.getElementById(cName);
+            videoSource = document.getElementById(vName);
+            var containerStyle = window.getComputedStyle(container);
+            var videoStyle = window.getComputedStyle(videoSource);
+            sourceAspectRatio = parseInt(videoStyle.width) / parseInt(videoStyle.height);
+            sourceHeight = parseInt(videoStyle.height);
             
             
-                var renderer, scene2d, scene3d, camera2d, camera3d, videoSource, videoTexture;
-                
-                var aspectRatioKept = true;
-                
-                var sceneId;
-                
-                
-                // scenegraph initializations
-                scene2d = new THREE.Scene();
-                camera2d = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5);
-                scene2d.add(camera2d);
-                
-                scene3d = new THREE.Scene();
+            container.width = parseInt(containerStyle.width);
+            container.height = parseInt(containerStyle.height);
 
 
-                /**
-                 * Initializes the widgets (HTML elements) needed as a basis 
-                 * for the viewer.
-                 * @param cName {string} id of the container that will enclose the scene renderer
-                 * @param vName {string} id of the element at the source of the video stream
-                 * @slot
-                 * @function ARViewer#setWidgets
-                 */
-                this.setWidgets = function(cName,vName) {
-                    container = document.getElementById(cName);
-                    videoSource = document.getElementById(vName);
-                    var containerStyle = window.getComputedStyle(container);
-                    var videoStyle = window.getComputedStyle(videoSource);
-                    sourceAspectRatio = parseInt(videoStyle.width) / parseInt(videoStyle.height);
-                    sourceHeight = parseInt(videoStyle.height);
-                    
-                    container.width = parseInt(containerStyle.width);
-                    container.height = parseInt(containerStyle.height);
+            renderer = new THREE.WebGLRenderer();
+            renderer.setClearColor(0x000000, 1);
+            renderer.setSize(container.width, container.height);
+            container.appendChild(renderer.domElement);
 
 
-                    renderer = new THREE.WebGLRenderer();
-                    renderer.setClearColor(0x000000, 1);
-                    renderer.setSize(container.width, container.height);
-                    container.appendChild(renderer.domElement);
-    
-                    var theta = 45; //2*Math.atan2(container.height/2,focalLength)*180/3.14159265;
-                    camera3d = new THREE.PerspectiveCamera(theta, container.width / container.height, 0.01, 10000);
-                    scene3d.add(camera3d);
-  
-                    var _light = new THREE.DirectionalLight(0xffffff);
-                    _light.position.set(0,5,5);
-  
-                    scene3d.add(_light);
-                    
-                    if ( THREE.VideoTexture !== undefined) {
-                        console.log("Using video texture since it is available");
-                        videoTexture = new THREE.VideoTexture(videoSource);
-                    } else {
-                        console.log("Falling back on simple texture");
-                        videoTexture = new THREE.Texture(videoSource);
-                    }
-                    var geometry = new THREE.PlaneGeometry(1.0, 1.0);
-                    var material = new THREE.MeshBasicMaterial( {map: videoTexture, depthTest: false, depthWrite: false} );
-                    var mesh = new THREE.Mesh(geometry, material);
-                    var textureObject = new THREE.Object3D();
-                    textureObject.position.z = -1;
-                    textureObject.add(mesh);
-                    scene2d.add(textureObject);
-                    
-                    updateAspectRatio();
-                };
- 
-                /**
-                 * Set the focal length of the virtual camera for very simple 
-                 * camera models.
-                 * @param focal {numeric} focal length (in pixels) of the camera.
-                 * @slot
-                 * @function ARViewer#setFocal
-                 */
-                this.setFocal = function (focal) {
-                    var theta = 2*Math.atan(0.5*sourceHeight/focal)*180/Math.PI;
-                    camera3d.fov = theta;
-                    console.log(theta);
-                    //camera3d.updateProjectionMatrix();
-                    updateAspectRatio();
-                };
+            var theta = 45; //2*Math.atan2(container.height/2,focalLength)*180/3.14159265;
+            camera3d = new THREE.PerspectiveCamera(theta, container.width / container.height, 0.01, 10000);
+            scene3d.add(camera3d);
+
+            var _light = new THREE.DirectionalLight(0xffffff);
+            _light.position.set(0,5,5);
+
+            scene3d.add(_light);
             
             
-                
-                /**
-                 * Set intrinsic camera parameters for the virtual camera
-                 * @param intrinsics {array} linearized array of camera parameters
-                 * @slot
-                 * @function ARViewer#setIntrinsics
-                 */                
-                this.setIntrinsics = function (parameters) {
-                    /*3 set here the intrinsic parameters of camera3d
-                     *  camera3d should be of type THREE.FrustumCamera
-                     * you should frustum accordingly to intrinsic parameters
-                     */
-                    
-                    // camera3d = new THREE.FrustumCamera( ... ) ;
-                    
-                    
-                };
-                
-                
-                /**
-                 * Set extrinsic camera parameters for the virtual camera
-                 * @param markers {array} an array of markers 
-                 * @slot
-                 * @function ARViewer#setExtrinsics
-                 */
-                this.setExtrinsics = function (markers) {
-                    /*2 set here the extrinsic parameters of camera3d
-                     *  Each marker has 3 major properties :
-                     *  - id is the marker id;
-                     *  - pose.rotation gives its orientation using a rotation matrix
-                     *    and is a 3x3 array
-                     *  - pose.position gives its position with respect to the camera
-                     *    and is a vector with 3 components.
-                     */
-                    var i ;
-                    for ( i = 0; i < markers.length; i++) {
-                        if ( markers[i].id === sceneId ) {
-                             // put here the code to set orientation and position of object camera3d
-                             // see also documentation of Object3D (API Three.js)
-                             // since a camera is an Object3D
+            if ( THREE.VideoTexture !== undefined) {
+                console.log("Using video texture since it is available");
+                videoTexture = new THREE.VideoTexture(videoSource);
+            } else {
+                console.log("Falling back on simple texture");
+                videoTexture = new THREE.Texture(videoSource);
+            }
+            var geometry = new THREE.PlaneGeometry(1.0, 1.0);
+            var material = new THREE.MeshBasicMaterial( {map: videoTexture, depthTest: false, depthWrite: false} );
+            var mesh = new THREE.Mesh(geometry, material);
+            var textureObject = new THREE.Object3D();
+            textureObject.position.z = -1;
+            textureObject.add(mesh);
+            scene2d.add(textureObject);
+            
+            updateAspectRatio();
+        };
 
 
-                            var rotation = markers[i].pose.rotation;
-                            var translation = markers[i].pose.position;
-                            var matrix = new THREE.Matrix4(
-                                rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
-                                rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
-                                rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
-                                0 , 0, 0, 1);
+        /**
+            * Set the focal length of the virtual camera for very simple 
+            * camera models.
+            * @param focal {numeric} focal length (in pixels) of the camera.
+            * @slot
+            * @function ARViewer#setFocal
+            */
+        this.setFocal = function (focal) {
+            var theta = 2*Math.atan(0.5*sourceHeight/focal)*180/Math.PI;
+            camera3d.fov = theta;
+            console.log(theta);
+            //camera3d.updateProjectionMatrix();
+            updateAspectRatio();
+        };
+    
+        
+        /**
+            * Set intrinsic camera parameters for the virtual camera
+            * @param intrinsics {array} linearized array of camera parameters
+            * @slot
+            * @function ARViewer#setIntrinsics
+            */                
+        this.setIntrinsics = function (parameters) {
+            /*3 set here the intrinsic parameters of camera3d
+                *  camera3d should be of type THREE.FrustumCamera
+                * you should frustum accordingly to intrinsic parameters
+                */
+            
+            // camera3d = new THREE.FrustumCamera( ... ) ;
+            
+            
+        };
+        
         
         
-                            /*var r = new THREE.Euler();
-                            r.setFromRotationMatrix(matrix);        
-                            camera3d.rotation.x = r.x;
-                            camera3d.rotation.y = r.y;
-                            camera3d.rotation.z = r.z;*/
-                            
-                            camera3d.position.x = translation[0];
-                            camera3d.position.y = translation[1];
-                            camera3d.position.z = translation[2];
-                            
-                            /*objRoot.scale.x = 1;
-                            objRoot.scale.y = 1;
-                            objRoot.scale.z = 1;*/
-                            
-                            
-                        }
-                    }
+        /**
+            * Set extrinsic camera parameters for the virtual camera
+            * @param markers {array} an array of markers 
+            * @slot
+            * @function ARViewer#setExtrinsics
+            */
+        this.setExtrinsics = function (markers) {
+            /*2 set here the extrinsic parameters of camera3d
+                *  Each marker has 3 major properties :
+                *  - id is the marker id;
+                *  - pose.rotation gives its orientation using a rotation matrix
+                *    and is a 3x3 array
+                *  - pose.position gives its position with respect to the camera
+                *    and is a vector with 3 components.
+                */
+            var i ;
+            for ( i = 0; i < markers.length; i++) {
+                if ( markers[i].id === sceneId ) {
+                        // put here the code to set orientation and position of object camera3d
+                        // see also documentation of Object3D (API Three.js)
+                        // since a camera is an Object3D
+                        console.log("viewing");
+
+                    var rotation = markers[i].pose.rotation;
+                    var translation = markers[i].pose.position;
+                    var matrix = new THREE.Matrix4(
+                        rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
+                        rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
+                        rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
+                        0 , 0, 0, 1);
+
+                    /*var r = new THREE.Euler();
+                    r.setFromRotationMatrix(matrix);        
+                    camera3d.rotation.x = r.x;
+                    camera3d.rotation.y = r.y;
+                    camera3d.rotation.z = r.z;*/
                     
                     
+                    camera3d.position.x = translation[0];
+                    camera3d.position.y = translation[1];
+                    camera3d.position.z = translation[2];
+                    
+                    /*objRoot.scale.x = 1;
+                    objRoot.scale.y = 1;
+                    objRoot.scale.z = 1;*/
                     
                     
-                };
-                
-                /**
-                 * Set the scene id in case we should set extrinsic parameters.
-                 * @param id {number} the id of the scene
-                 * @function ARViewer#setSceneId
-                 * @slot
-                 */
-                this.setSceneId = function (id) {
-                    sceneId = id;                    
-                };
-                
-                /**
-                 * Sets the size of the viewport in pixels to render the scene
-                 * @param width {number} width of the viewport
-                 * @param height {number} height of the viewport
-                 * @slot
-                 * @function ARViewer#setSize
-                 */
-                this.setSize = function(width, height) {
-                    var W = width|0;
-                    var H = height|0;
                     
                     
-                    container.width = width;
-                    container.height = height;
-                    renderer.setSize(W,H);
+                }
+            }
+            
+            
+        };
+        
+        /**
+            * Set the scene id in case we should set extrinsic parameters.
+            * @param id {number} the id of the scene
+            * @function ARViewer#setSceneId
+            * @slot
+            */
+        this.setSceneId = function (id) {
+            sceneId = id;                    
+        };
+        
+        /**
+            * Sets the size of the viewport in pixels to render the scene
+            * @param width {number} width of the viewport
+            * @param height {number} height of the viewport
+            * @slot
+            * @function ARViewer#setSize
+            */
+        this.setSize = function(width, height) {
+            var W = width|0;
+            var H = height|0;
+            
+            container.width = width;
+            container.height = height;
+            renderer.setSize(W,H);
 
 
-                    updateAspectRatio();
-                };
+            updateAspectRatio();
+        };
+    
+        /** 
+            * Tells to keep the aspect ratio of the camera. 
+            * It avoids deformations of the augmented scene.
+            * @param b {boolean} set it to <tt>true</tt> to keep aspect ratio, <tt>false</tt> otherwise
+            * @slot
+            * @function ARViewer#keepAspectRatio
+            */
+        this.keepAspectRatio = function (b) {
+            aspectRatioKept = b;
+        };
+        
+        var updateAspectRatio = function () {
+            var cAspectRatio = container.width / container.height;
+            var actualWidth, actualHeight;
+            var xoff, yoff;
             
             
-                /** 
-                 * Tells to keep the aspect ratio of the camera. 
-                 * It avoids deformations of the augmented scene.
-                 * @param b {boolean} set it to <tt>true</tt> to keep aspect ratio, <tt>false</tt> otherwise
-                 * @slot
-                 * @function ARViewer#keepAspectRatio
-                 */
-                this.keepAspectRatio = function (b) {
-                    aspectRatioKept = b;
-                };
+            if (aspectRatioKept == true) {
+                // cameras have the source aspect ratio
+                camera2d.aspect = sourceAspectRatio;
+                camera2d.updateProjectionMatrix();
+                camera3d.aspect = sourceAspectRatio;
+                camera3d.updateProjectionMatrix();
+                // then, we should adjust viewport accordingly.
+                if (cAspectRatio > sourceAspectRatio) {
+                    actualHeight = container.height;
+                    actualWidth = actualHeight * sourceAspectRatio; 
+                } else {
+                    actualWidth = container.width;
+                    actualHeight = actualWidth / sourceAspectRatio;
+                }
                 
                 
-                var updateAspectRatio = function () {
-                    var cAspectRatio = container.width / container.height;
-                    var actualWidth, actualHeight;
-                    var xoff, yoff;
-                    
-                    if (aspectRatioKept == true) {
-                        // cameras have the source aspect ratio
-                        camera2d.aspect = sourceAspectRatio;
-                        camera2d.updateProjectionMatrix();
-                        camera3d.aspect = sourceAspectRatio;
-                        camera3d.updateProjectionMatrix();
-                        // then, we should adjust viewport accordingly.
-                        if (cAspectRatio > sourceAspectRatio) {
-                            actualHeight = container.height;
-                            actualWidth = actualHeight * sourceAspectRatio; 
-                        } else {
-                            actualWidth = container.width;
-                            actualHeight = actualWidth / sourceAspectRatio;
-                        }
-                        
-                        xoff = (container.width - actualWidth) / 2 ;
-                        yoff = (container.height - actualHeight) / 2;                        
-                        renderer.setViewport(xoff, yoff, actualWidth, actualHeight);
-                    } else {
-                        // for 3D camera, we will have to recompute the actual
-                        // aspect ratio.
-                        
-                        // but first reset viewport, just in case
-                        renderer.setViewport(0, 0, container.width, container.height);
-                        camera2d.aspect = cAspectRatio ;
-                        camera2d.updateProjectionMatrix();
-                        camera3d.aspect = sourceAspectRatio;  
-                        camera3d.updateProjectionMatrix();
-                        console.log(camera3d.projectionMatrix);
-                    }
-                    
-                };
+                xoff = (container.width - actualWidth) / 2 ;
+                yoff = (container.height - actualHeight) / 2;                        
+                renderer.setViewport(xoff, yoff, actualWidth, actualHeight);
+            } else {
+                // for 3D camera, we will have to recompute the actual
+                // aspect ratio.
                 
                 
-                /**
-                 * Adds new objects to the current 3D scene
-                 * @param scene {object} 3D object as defined by Three.js to add to the scene.
-                 * @slot
-                 * @function ARViewer#addScene
-                 */
-                this.addScene = function (scene) {
-                    scene3d.add(scene);
-                };
+                // but first reset viewport, just in case
+                renderer.setViewport(0, 0, container.width, container.height);
+                camera2d.aspect = cAspectRatio ;
+                camera2d.updateProjectionMatrix();
+                camera3d.aspect = sourceAspectRatio;  
+                camera3d.updateProjectionMatrix();
+                console.log(camera3d.projectionMatrix);
+            }
             
             
-                /**
-                 * Removes an object from the current 3D scene
-                 * @param scene {object} 3D object as defined by Three.js to remove from the scene.
-                 * @slot
-                 * @function ARViewer#removeScene
-                 */
-                this.removeScene = function (scene) {
-                    scene3d.remove(scene);
-                };
-                
-                /**
-                 * Triggers the rendering of the composite scene
-                 * @function ARViewer#render
-                 * @slot
-                 */
-                this.render = function () {
-                    videoTexture.needsUpdate = true;
-                    renderer.autoClear = false;
-                    renderer.clear();
-                    renderer.render(scene2d, camera2d);
-                    renderer.render(scene3d, camera3d);
-                };
-                
-                /**
-                 * Computes the ideal camera position to see the whole 3D scene.
-                 * Mainly useful for debugging
-                 * @function ARViewer#viewAll
-                 * @slot
-                 */                
-                this.viewAll = function () {
-                    var box = new THREE.Box3();                    
-                    box.setFromObject(scene3d);
-                    var center = box.center();
-                    var radius = box.getBoundingSphere().radius;
-                    
-                    camera3d.position.x = center.x ;
-                    camera3d.position.y = center.y ;
-                    var c = Math.cos(camera3d.fov/2);
-                    var s = Math.sin(camera3d.fov/2);
-                    
-                    camera3d.position.z = center.z + 1.2 * radius*s*( 1 + s / c ) ;
-                };
-                
-                /**
-                 * Resets the position of the camera to the origin of the scene coordinate system
-                 * @slot
-                 * @function ARViewer#resetCamera
-                 */                
-                this.resetCamera = function () {
-                    camera3d.position.x = camera3d.position.y = camera3d.position.z = 0;
-                    camera3d.up = THREE.Object3D.DefaultUp.clone();
-                }
+        };
+        
+        /**
+            * Adds new objects to the current 3D scene
+            * @param scene {object} 3D object as defined by Three.js to add to the scene.
+            * @slot
+            * @function ARViewer#addScene
+            */
+        this.addScene = function (scene) {
+            scene3d.add(scene);
+        };
+    
+        /**
+            * Removes an object from the current 3D scene
+            * @param scene {object} 3D object as defined by Three.js to remove from the scene.
+            * @slot
+            * @function ARViewer#removeScene
+            */
+        this.removeScene = function (scene) {
+            scene3d.remove(scene);
+        };
+        
+        /**
+            * Triggers the rendering of the composite scene
+            * @function ARViewer#render
+            * @slot
+            */
+        this.render = function () {
+            videoTexture.needsUpdate = true;
+            renderer.autoClear = false;
+            renderer.clear();
+            renderer.render(scene2d, camera2d);
+            renderer.render(scene3d, camera3d);
+        };
+        
+        /**
+            * Computes the ideal camera position to see the whole 3D scene.
+            * Mainly useful for debugging
+            * @function ARViewer#viewAll
+            * @slot
+            */                
+        this.viewAll = function () {
+            var box = new THREE.Box3();                    
+            box.setFromObject(scene3d);
+            var center = box.center();
+            var sphere = new THREE.Sphere();
+            box.getBoundingSphere(sphere);
+            var radius = sphere.radius;
             
             
-            },
-            /** @lends ARViewer.slots */
-            [
-                'setWidgets','setFocal','viewAll','setSize','addScene',
-                'resetCamera','removeScene','render','keepAspectRatio',
-                'setExtrinsics', 'setIntrinsics'
-                
-            ],
-            []
-        );
-        return {ARViewer: ARViewer}; 
+            camera3d.position.x = center.x ;
+            camera3d.position.y = center.y ;
+            var c = Math.cos(camera3d.fov/2);
+            var s = Math.sin(camera3d.fov/2);
+            
+            camera3d.position.z = center.z + 1.2 * radius*s*( 1 + s / c ) ;
+        };
+        
+        /**
+            * Resets the position of the camera to the origin of the scene coordinate system
+            * @slot
+            * @function ARViewer#resetCamera
+            */                
+        this.resetCamera = function () {
+            camera3d.position.x = camera3d.position.y = camera3d.position.z = 0;
+            camera3d.up = THREE.Object3D.DefaultUp.clone();
+        }
+    
     },
     },
+<<<<<<< HEAD
     [ 'deps/three.js/index','deps/three.js/frustumcamera']
     [ 'deps/three.js/index','deps/three.js/frustumcamera']
-);
\ No newline at end of file
+);
+=======
+    /** @lends ARViewer.slots */
+    [
+        'setWidgets','setFocal','viewAll','setSize','addScene',
+        'resetCamera','removeScene','render','keepAspectRatio',
+        'setExtrinsics', 'setIntrinsics'
+        
+    ],
+    []
+);
+
+export default {ARViewer: ARViewer}; 
+
+>>>>>>> modules

 /* ugly hack in order to display data in web page instead of console */
 /* ugly hack in order to display data in web page instead of console */
+import ARCS from '../build/arcs.js';
 
 
+var Console;
+/**
+    * @class Console
+    * @classdesc Redirects console messages to a given HTML element in the page.
+    * @param id {string} id of the HTML element in which console messages will be added.
+    */
+Console = ARCS.Component.create(
+    function (id) {
+        if (id === undefined) {
+            return ;
+        }
+        
+        var output = document.getElementById(id);
+        
+        if (output) {
+            window.console = {
+                timeRef: new Date().getTime(),
+                output : output,
+                display: function(color,args) {
+                    var s = document.createElement("span");
+                    s.style.color=color;
+                    var elapsed = (new Date().getTime() - this.timeRef);
 
 
-arcs_module(
-    function(ARCS) {
-        var Console;
-        /**
-         * @class Console
-         * @classdesc Redirects console messages to a given HTML element in the page.
-         * @param id {string} id of the HTML element in which console messages will be added.
-         */
-        Console = ARCS.Component.create(
-            function (id) {
-                if (id === undefined) {
-                    return ;
+                    s.innerHTML = '<span class="marker">' + (elapsed/1000).toFixed(3) + '</span> ' + Array.prototype.join.call(args, ' '); 
+                    output.appendChild(s);
+                    output.appendChild(document.createElement("br"));
+                },
+                log: function () {
+                    this.display('green',arguments);
+                },
+                error: function () {
+                    this.display('red',arguments);        
+                },
+                warn: function () {
+                    this.display('orange',arguments);        
                 }
                 }
-                
-                var output = document.getElementById(id);
-                
-                if (output) {
-                    window.console = {
-                        timeRef: new Date().getTime(),
-                        output : output,
-                        display: function(color,args) {
-                            var s = document.createElement("span");
-                            s.style.color=color;
-                            var elapsed = (new Date().getTime() - this.timeRef);
-
-                            s.innerHTML = '<span class="marker">' + (elapsed/1000).toFixed(3) + '</span>' + Array.prototype.join.call(args, ' '); 
-                            output.appendChild(s);
-                            output.appendChild(document.createElement("br"));
-                        },
-                        log: function () {
-                            this.display('green',arguments);
-                        },
-                        error: function () {
-                            this.display('red',arguments);        
-                        },
-                        warn: function () {
-                            this.display('orange',arguments);        
-                        }
-                    };
-                }
-            }
-        );
-        return { Console: Console};
+            };
+        }
     }
     }
+);
+
 
 
-);
\ No newline at end of file
+export default { Console: Console};

@@ -5,102 +5,99 @@
  * @file
  * @file
  */
  */
 
 
-arcs_module(function (ARCS) {
-    var Loop, DisplayInt, Sum;
-    /** @exports loop */
-    //console.log("loop: ", ARCS);
-    /**
-     * @class Loop
-     * @classdesc loop component creation using a compact style.
-     * This component iterates for a given number of times
-     */
-    Loop = ARCS.Component.create(
-        function () {
-        /**
-         * Sets the number of times the component should iterate.
-         * It starts the iterations. At each iteration, a signal newIteration is 
-         * emitted, then, at the end of the iterations, a signal sendToken is 
-         * eventually triggered.
-         * @param n {numeric} number of iterations
-         * @function Loop#setIterations
-         * @slot
-         * @emits newIteration
-         * @emits sendToken
-         */
-            this.setIterations = function (n) {
-                var i;
-                for (i = 0; i < n; i++) {
-                    console.log("Loop : emitting ", i);
-                    this.emit("newIteration", i);
-                }
-                this.emit("endLoop");
-            };
-            
-            /** @function Loop#newIteration
-             * @signal
-             * @param n {number} current iteration number.             
-             */ 
-            
-            /** @function Loop#sendToken
-             * @signal
-             * @param s {string} token to emit.
-             */
-            
-        },
-        "setIterations", //slotList 
-        ["endLoop", "newIteration"] // signalList
-    );
-
+import ARCS from '../build/arcs.js';
 
 
-    /** 
-     * @class DisplayInt 
-     * @classdesc displayInt component creation using a variation with defined slots
-     * in the constructor (a slot is a function). DisplayInt will display an integer
-     * received on its display slot.
-     */
-    DisplayInt = function () {
+/**
+    * @class Loop
+    * @classdesc loop component creation using a compact style.
+    * This component iterates for a given number of times
+    */
+var Loop = ARCS.Component.create(
+    function () {
     /**
     /**
-     * @param n {numeric} number to display
-     * @function DisplayInt#display
-     * @slot
-     */
-        this.display = function (n) {
-            console.log("  DisplayInt : " + n);
+        * Sets the number of times the component should iterate.
+        * It starts the iterations. At each iteration, a signal newIteration is 
+        * emitted, then, at the end of the iterations, a signal sendToken is 
+        * eventually triggered.
+        * @param n {numeric} number of iterations
+        * @function Loop#setIterations
+        * @slot
+        * @emits newIteration
+        * @emits sendToken
+        */
+        this.setIterations = function (n) {
+            var i;
+            for (i = 0; i < n; i++) {
+                console.log("Loop : emitting ", i);
+                this.emit("newIteration", i);
+            }
+            this.emit("endLoop");
         };
         };
-    };
+        
+        /** @function Loop#newIteration
+            * @signal
+            * @param n {number} current iteration number.             
+            */ 
+        
+        /** @function Loop#sendToken
+            * @signal
+            * @param s {string} token to emit.
+            */
+        
+    },
+    "setIterations", //slotList 
+    ["endLoop", "newIteration"] // signalList
+);
 
 
-    ARCS.Component.create(DisplayInt);
-    DisplayInt.slot("display");
 
 
-
-    /**
-     * @class Sum
-     * @classdec Sum is a component summing integers passed to its slot "add" 
-     * and the result is sent back by signal "sum".
-     * This component is declared in two different phases: declaration of the 
-     * constructor and declaration of the slot "add".
-     */
-    Sum = function () {
-        this.total = 0;
+/** 
+    * @class DisplayInt 
+    * @classdesc displayInt component creation using a variation with defined slots
+    * in the constructor (a slot is a function). DisplayInt will display an integer
+    * received on its display slot.
+    */
+var DisplayInt = function () {
+/**
+    * @param n {numeric} number to display
+    * @function DisplayInt#display
+    * @slot
+    */
+    this.display = function (n) {
+        console.log("  DisplayInt : " + n);
     };
     };
+};
+
+ARCS.Component.create(DisplayInt);
+DisplayInt.slot("display");
 
 
-    ARCS.Component.create(Sum);
-    /**
-     * This slot adds its parameter to its internal sum and send it back by using 
-     * the signal "sum".
-     * @param n {integer} add n to the internal sum of the component.
-     * @function Sum#add
-     * @slot
-     */
-    Sum.slot("add", function (n) {
-        this.total = this.total + n;
-        this.emit("sum", this.total); //console.log("  Total : " + this.total);
-    });
-    Sum.signal("sum");
 
 
-    // the anonymous function must return the components in one object:
-    // keys are factory names, value are actual constructors modified by 
-    // ARCS.Component.create
+/**
+    * @class Sum
+    * @classdec Sum is a component summing integers passed to its slot "add" 
+    * and the result is sent back by signal "sum".
+    * This component is declared in two different phases: declaration of the 
+    * constructor and declaration of the slot "add".
+    */
+var Sum = function () {
+    this.total = 0;
+};
 
 
-    return {Loop: Loop, DisplayInt: DisplayInt, Sum: Sum};
+ARCS.Component.create(Sum);
+/**
+    * This slot adds its parameter to its internal sum and send it back by using 
+    * the signal "sum".
+    * @param n {integer} add n to the internal sum of the component.
+    * @function Sum#add
+    * @slot
+    */
+Sum.slot("add", function (n) {
+    this.total = this.total + n;
+    this.emit("sum", this.total); //console.log("  Total : " + this.total);
 });
 });
+Sum.signal("sum");
+
+// the anonymous function must return the components in one object:
+// keys are factory names, value are actual constructors modified by 
+// ARCS.Component.create
+
+export default {Loop: Loop, DisplayInt: DisplayInt, Sum: Sum};

+import ARCS from '../build/arcs.js';
+import POS from '../deps/pose/square_pose.js';
 
 
+var MarkerLocator;
 
 
-arcs_module(
-    function (ARCS, POS) {
-        var MarkerLocator;
+
+MarkerLocator = ARCS.Component.create(
+    function () { 
+        var square_pose = new POS.SquareFiducial();
+        
+        this.setFocalLength = function (focalLength) {
+            square_pose.setFocalLength(focalLength);
+        };
+        
+        this.setModelSize = function (modelSize) {
+            square_pose.setModelSize(modelSize);
+        };
+        
+        this.setIntrinsics = function (intrinsics) {
+            square_pose.setMatrix(intrinsics);
+        };
         
         
+        this.setImageSource = function (id) {
+            var imageSource = document.getElementById(id);
+            if (id === undefined) {
+                return;
+            }
+            
+            var imageSourceStyle = window.getComputedStyle(imageSource);
+            square_pose.setImageSize(parseInt(imageSourceStyle.width),parseInt( imageSourceStyle.height));
+            
+        };
         
         
-        MarkerLocator = ARCS.Component.create(
-            function () { 
-                var square_pose = new POS.SquareFiducial();
-                
-                this.setFocalLength = function (focalLength) {
-                    square_pose.setFocalLength(focalLength);
-                };
-                
-                this.setModelSize = function (modelSize) {
-                    square_pose.setModelSize(modelSize);
-                };
-                
-                this.setIntrinsics = function (intrinsics) {
-                    square_pose.setMatrix(intrinsics);
-                };
-                
-                this.setImageSource = function (id) {
-                    var imageSource = document.getElementById(id);
-                    if (id === undefined) {
-                        return;
-                    }
-                    
-                    var imageSourceStyle = window.getComputedStyle(imageSource);
-                    square_pose.setImageSize(parseInt(imageSourceStyle.width),parseInt( imageSourceStyle.height));
-                    
-                };
-                
-                this.locateMarkers = function (markers) {
-                    var k, pose;
-                    for (k=0; k < markers.length; k++) {      
-                        corners = markers[k].corners;
-                        markers[k].pose = square_pose.pose(corners);
-                    }
-              
-                    this.emit("onLocatedMarkers",markers);
-                };
-            },
-            ['locateMarkers','setFocalLength','setModelSize','setImageSource'],
-            ['onLocatedMarkers']
-        );
+        this.locateMarkers = function (markers) {
+            var k, pose;
+            for (k=0; k < markers.length; k++) {      
+                corners = markers[k].corners;
+                markers[k].pose = square_pose.pose(corners);
+            }
+        
+            this.emit("onLocatedMarkers",markers);
+        };
+    },
+    ['locateMarkers','setFocalLength','setModelSize','setImageSource'],
+    ['onLocatedMarkers']
+);
 
 
 
 
-        return { MarkerLocator: MarkerLocator };
-    },
-    [ {name: "deps/pose/square_pose", exports: "POS"} ]
-);
\ No newline at end of file
+export default { MarkerLocator: MarkerLocator };

-arcs_module(
-    function(ARCS,_three) {
-        var ObjectTransform ;
+import ARCS from '../build/arcs.js';
+import * as THREE from '../deps/three.js/index.js';
 
 
-        /** 
-         * @class ObjectTransform
-         * @classdesc Apply transformations to objects
-         */
-        ObjectTransform = ARCS.Component.create(
-            function() {
-                var objRoot;
-                var refMat;
-                var id = -1;
+var ObjectTransform ;
 
 
-                /**
-                 * Sets the object of interest on which we would like to apply transforms.
-                 * @param obj {object} a Three.js Object3D
-                 * @function ObjectTransform#setObject
-                 */
-                this.setObject = function (obj) {
-                    objRoot = new THREE.Object3D();
-                    obj.parent.add(objRoot);
-                    obj.parent.remove(obj);
-                    objRoot.add(obj);
-                    
-                    var box = new THREE.Box3;
-                    box.setFromObject(obj);
-                    var s = box.size();
-                    var scale = MAX3(s.x, s.y, s.z);
-                    console.log(scale);
-                    obj.add(new THREE.AxisHelper(scale / 2));
-                };
-                
-                var MAX3 = function (a,b,c) {
-                    if ( a >= b ) {
-                         if ( a >= c) {
-                             return a;
-                         } else {
-                             return c;
-                         }
-                    } else {
-                         if (b >= c) {
-                             return b;
-                         } else {
-                             return c;
-                         }
-                    }
-                };
+/** 
+    * @class ObjectTransform
+    * @classdesc Apply transformations to objects
+    */
+ObjectTransform = ARCS.Component.create(
+    function() {
+        var objRoot;
+        var refMat;
+        var id = -1;
 
 
-                
-                
-                // right now, we make something compatible with aruco markers
-                // it may evolve in the future
-                
-                /**
-                 * Takes an array of markers and then applies transformations 
-                 * to the referenced object.
-                 * @function ObjectTransform#setTransform
-                 * @param arr {Marker[]} an array of detected markers.
-                 */                
-                this.setTransform = function ( arr ) {
-                    /*2 set here the transformation we should apply on objRoot
-                     *  Each marker has 3 major properties :
-                     *  - id is the marker id;
-                     *  - pose.rotation gives its orientation using a rotation matrix
-                     *    and is a 3x3 array
-                     *  - pose.position gives its position with respect to the camera
-                     *    and is a vector with 3 components.
-                     */
-                    if (objRoot === undefined) { return ; }
-                    var i ;
-                    for ( i = 0; i < arr.length; i++) {
-                        if ( arr[i].id === id ) {
-                            // insert your code here.
-                            
-                            //<--
-                            var rotation = arr[i].pose.rotation;
-                            var translation = arr[i].pose.position;
-                            /*var matrix = new THREE.Matrix4(
-                                rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
-                                rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
-                                rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
-                                0 , 0, 0, 1);
+        /**
+            * Sets the object of interest on which we would like to apply transforms.
+            * @param obj {object} a Three.js Object3D
+            * @function ObjectTransform#setObject
+            */
+        this.setObject = function (obj) {
+            objRoot = new THREE.Object3D();
+            obj.parent.add(objRoot);
+            obj.parent.remove(obj);
+            objRoot.add(obj);
+            
+            var box = new THREE.Box3;
+            box.setFromObject(obj);
+            var s = box.size();
+            var scale = MAX3(s.x, s.y, s.z);
+            console.log(scale);
+            obj.add(new THREE.AxisHelper(scale / 2));
+        };
         
         
-                            var r = new THREE.Euler();
-                            r.setFromRotationMatrix(matrix);        
-                            objRoot.rotation.x = r.x;
-                            objRoot.rotation.y = r.y;
-                            objRoot.rotation.z = r.z;
-                            
-                            objRoot.position.x = translation[0];
-                            objRoot.position.y = translation[1];
-                            objRoot.position.z = translation[2];
-                            
-                            objRoot.scale.x = 1;
-                            objRoot.scale.y = 1;
-                            objRoot.scale.z = 1;*/
-                            
-                            objRoot.rotation.x = -Math.asin(-rotation[1][2]);
-                            objRoot.rotation.y = -Math.atan2(rotation[0][2], rotation[2][2]);
-                            objRoot.rotation.z = Math.atan2(rotation[1][0], rotation[1][1]);
-
-                            objRoot.position.x = translation[0];
-                            objRoot.position.y = translation[1];
-                            objRoot.position.z = -translation[2];
-                            //-->
-                                                        
-                        }
+        var MAX3 = function (a,b,c) {
+            if ( a >= b ) {
+                    if ( a >= c) {
+                        return a;
+                    } else {
+                        return c;
+                    }
+            } else {
+                    if (b >= c) {
+                        return b;
+                    } else {
+                        return c;
                     }
                     }
-                };
-                
-                this.setId = function (i) {
-                    id = i;
-                };
-            },
-            ['setObject', 'setTransform', 'setId'],
-            []
-        );
+            }
+        };
 
 
+        
+        
+        // right now, we make something compatible with aruco markers
+        // it may evolve in the future
+        
+        /**
+            * Takes an array of markers and then applies transformations 
+            * to the referenced object.
+            * @function ObjectTransform#setTransform
+            * @param arr {Marker[]} an array of detected markers.
+            */                
+        this.setTransform = function ( arr ) {
+            /*2 set here the transformation we should apply on objRoot
+                *  Each marker has 3 major properties :
+                *  - id is the marker id;
+                *  - pose.rotation gives its orientation using a rotation matrix
+                *    and is a 3x3 array
+                *  - pose.position gives its position with respect to the camera
+                *    and is a vector with 3 components.
+                */
+            if (objRoot === undefined) { return ; }
+            var i ;
+            for ( i = 0; i < arr.length; i++) {
+                if ( arr[i].id === id ) {
+                    // insert your code here.
+                    
+                    //<--
+                    var rotation = arr[i].pose.rotation;
+                    var translation = arr[i].pose.position;
+                    /*var matrix = new THREE.Matrix4(
+                        rotation[0][0], rotation[0][1], rotation[0][2], translation[0],
+                        rotation[1][0], rotation[1][1], rotation[1][2], translation[1],
+                        rotation[2][0], rotation[2][1], rotation[2][2], translation[2],
+                        0 , 0, 0, 1);
 
 
+                    var r = new THREE.Euler();
+                    r.setFromRotationMatrix(matrix);        
+                    objRoot.rotation.x = r.x;
+                    objRoot.rotation.y = r.y;
+                    objRoot.rotation.z = r.z;
+                    
+                    objRoot.position.x = translation[0];
+                    objRoot.position.y = translation[1];
+                    objRoot.position.z = translation[2];
+                    
+                    objRoot.scale.x = 1;
+                    objRoot.scale.y = 1;
+                    objRoot.scale.z = 1;*/
+                    
+                    objRoot.rotation.x = -Math.asin(-rotation[1][2]);
+                    objRoot.rotation.y = -Math.atan2(rotation[0][2], rotation[2][2]);
+                    objRoot.rotation.z = Math.atan2(rotation[1][0], rotation[1][1]);
 
 
-        return { ObjectTransform : ObjectTransform };
+                    objRoot.position.x = translation[0];
+                    objRoot.position.y = translation[1];
+                    objRoot.position.z = -translation[2];
+                    //-->
+                                                
+                }
+            }
+        };
+        
+        this.setId = function (i) {
+            id = i;
+        };
     },
     },
-    [ "deps/three.js/index" ]
-);
\ No newline at end of file
+    ['setObject', 'setTransform', 'setId'],
+    []
+);
+
+export default { ObjectTransform : ObjectTransform };

-arcs_module(
-    function(ARCS, three, _objloader, _mtlloader, _objmtlloader) {
-        var OBJLoader;
+import ARCS from '../build/arcs.js';
+import * as THREE from '../deps/three.js/index.js';
+import { OBJLoader } from '../deps/objloader/objloader.js';
+import { MTLLoader } from '../deps/mtlloader/mtlloader.js';
+//import { DDSLoader } from '../deps/ddsloader/ddsloader.js';
 
 
+
+var internalOBJLoader;
+
+
+internalOBJLoader = ARCS.Component.create(
+    function() {
+        var self = this;
+        var innerObject; 
         
         
-        OBJLoader = ARCS.Component.create(
-            function() {
-                var self = this;
-                var innerObject; 
-                
-                var onLoadWrapper = function(obj) {
-                    innerObject = obj;
-                    console.log("[OBJLoader] object has %d components", obj.children.length); 
-                    //console.log(obj);
-                    self.emit("onLoad", obj);
-                };
+        var onLoadWrapper = function(obj) {
+            innerObject = obj;
+            console.log("[OBJLoader] object has %d components", obj.children.length); 
+            //console.log(obj);
+            self.emit("onLoad", obj);
+        };
 
 
-                var onLoadJSON = function(geom, mat) {
-                    innerObject = new THREE.Mesh(geom, new THREE.MeshFaceMaterial(mat));
-                    
-                    self.emit("onLoad", innerObject);
-                };
-                
-                var progress = function ( xhr ) { 
-                    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); 
-                };
-                
-                var error = function ( xhr ) { 
-                    console.log( 'An error happened' ); 
-                };
-                
-                this.load = function(objURL, mtlURL) {
-                    var loader;
-                    // we may use a string tokenizer to determine file types 
-                    // then all would be in the same loading slot.
-                    
-                    
-                    console.log("loading objects", objURL, mtlURL);
-                    if (mtlURL === undefined) {
-                        //console.log("using loader");
-                        loader = new THREE.OBJLoader();
-                        loader.load(objURL, onLoadWrapper, progress, error);                        
+        var onLoadJSON = function(geom, mat) {
+            innerObject = new THREE.Mesh(geom, new THREE.MeshFaceMaterial(mat));
+            
+            self.emit("onLoad", innerObject);
+        };
+        
+        var progress = function ( xhr ) { 
+            console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); 
+        };
+        
+        var error = function ( xhr ) { 
+            console.log( 'An error happened' ); 
+        };
+        
+        this.load = function(objURL, mtlURL) {
+            var loader;
+            // we may use a string tokenizer to determine file types 
+            // then all would be in the same loading slot.
+            
+            //console.log("loading objects", objURL, mtlURL);
+            var manager = new THREE.LoadingManager();
+            //manager.addHandler( /\.dds$/i, new DDSLoader() );
+            
+            if (mtlURL === undefined) {
+                //console.log("using loader");
+                loader = new OBJLoader(manager);
+                loader.load(objURL, onLoadWrapper, progress, error);                        
+            } else {
+                //console.log("using mtl loader");
+                loader = new MTLLoader(manager);
+                loader.load(mtlURL, function(materials) {
+                        materials.preload();
+                        console.log(materials);
+                        new OBJLoader(manager)
+                            .setMaterials(materials)
+                            .load(objURL, onLoadWrapper, progress, error);                        
+                    }, progress, error);                        
+            }
+        };
+        
+        this.loadJSON = function(jsonURL) {
+            var loader;
+            //console.log("loading objects", jsonURL);
+            loader = new THREE.ObjectLoader();
+            loader.load(jsonURL, onLoadJSON); //, progress, error);                         
+            
+            
+        };
+        
+        var MAX3 = function (a,b,c) {
+            if ( a >= b ) {
+                    if ( a >= c) {
+                        return a;
                     } else {
                     } else {
-                        //console.log("using mtl loader");
-                        loader = new THREE.OBJMTLLoader();
-                        loader.load(objURL, mtlURL, onLoadWrapper, progress, error);                        
+                        return c;
                     }
                     }
-                };
-                
-                this.loadJSON = function(jsonURL) {
-                    var loader;
-                    //console.log("loading objects", jsonURL);
-                    loader = new THREE.JSONLoader();
-                    loader.load(jsonURL, onLoadJSON); //, progress, error);                         
-                    
-                    
-                };
-                
-                var MAX3 = function (a,b,c) {
-                    if ( a >= b ) {
-                         if ( a >= c) {
-                             return a;
-                         } else {
-                             return c;
-                         }
+            } else {
+                    if (b >= c) {
+                        return b;
                     } else {
                     } else {
-                         if (b >= c) {
-                             return b;
-                         } else {
-                             return c;
-                         }
+                        return c;
                     }
                     }
-                };
-                
-                this.unitize = function() {
-                    if (innerObject === undefined) { return ; }
-                    var box = new THREE.Box3(); 
-                    box.setFromObject(innerObject);
-                    var s = box.size();
-                    var c = box.center();
-                    var scale = 1 / MAX3(s.x, s.y, s.z);                    
-                    innerObject.scale.x = innerObject.scale.y = innerObject.scale.z = scale;
-                };
-                
-                this.resize = function(s) {
-                    this.unitize();
-                    if (innerObject === undefined) { return ; }
-                    innerObject.scale.x *= s;
-                    innerObject.scale.y *= s;
-                    innerObject.scale.z *= s;
-                };
-                
-            },
-            ["load","unitize", "resize"],
-            ["onLoad"]
-        );
+            }
+        };
+        
+        this.unitize = function() {
+            if (innerObject === undefined) { return ; }
+            var box = new THREE.Box3(); 
+            box.setFromObject(innerObject);
+            var s = box.size();
+            var c = box.center();
+            var scale = 1 / MAX3(s.x, s.y, s.z);                    
+            innerObject.scale.x = innerObject.scale.y = innerObject.scale.z = scale;
+        };
+        
+        this.resize = function(s) {
+            this.unitize();
+            if (innerObject === undefined) { return ; }
+            innerObject.scale.x *= s;
+            innerObject.scale.y *= s;
+            innerObject.scale.z *= s;
+        };
         
         
-        return { OBJLoader: OBJLoader}; 
     },
     },
-    [ 'deps/three.js/index', 'deps/objloader/index', 'deps/mtlloader/index','deps/objmtlloader/index' ]
-);
\ No newline at end of file
+    ["load","unitize", "resize"],
+    ["onLoad"]
+);
+        
+export default { OBJLoader: internalOBJLoader}; 

+{ "type": "module"}

-arcs_module(function(ARCS) {
-    var TokenSender;
+import ARCS from '../build/arcs.js';        
 
 
-    TokenSender = ARCS.Component.create(
-        function( arr ) {
-            var i;
-            var self = this;
-            for (i=0; i< arr.length; i++) {
-                 if (typeof arr[i] === "string") {
-                     this.slots.push(arr[i]);
-                     //TokenSender.prototype.slots.push(arr[i]);
-                     this[arr[i]] = function( s ) {
-                         return function() {
-                            console.log("[TokenSender] emitting %s", s);
-                            this.emit("sendToken",s);
-                         };
-                     } (arr[i]);
-                 }
-            }
-        }, 
-        [],
-        ['sendToken']
-    );
+var TokenSender;
 
 
-    return { TokenSender : TokenSender };
-});
\ No newline at end of file
+TokenSender = ARCS.Component.create(
+    function( arr ) {
+        var i;
+        var self = this;
+        for (i=0; i< arr.length; i++) {
+                if (typeof arr[i] === "string") {
+                    this.slots.push(arr[i]);
+                    //TokenSender.prototype.slots.push(arr[i]);
+                    this[arr[i]] = function( s ) {
+                        return function() {
+                        console.log("[TokenSender] emitting %s", s);
+                        this.emit("sendToken",s);
+                        };
+                    } (arr[i]);
+                }
+        }
+    }, 
+    [],
+    ['sendToken']
+);
+
+export default { TokenSender : TokenSender };

-arcs_module(function(ARCS) {
-    var LiveSource, VideoSource;
-    LiveSource = ARCS.Component.create(
-        function () {
-            var context, canvas, video, imageData;
-            var defaultWidth = 320;
-            var defaultHeight = 240;
-            var self = this;
-            
-            var handleMediaStream = function(stream) {
-                if (window.webkitURL) {
-                    video.src = window.webkitURL.createObjectURL(stream);
-                } else if (video.mozSrcObject !== undefined) {
-                    video.mozSrcObject = stream;
-                } else if (video.srcObject !== undefined) {
-                    video.srcObject = stream;
-                } else {
-                    video.src = stream;
-                }                
-                video.videoWidth=defaultWidth;                
-                video.videoHeight=defaultHeight;
-                self.emit("onReady");
-            };
-            
-            var errorMediaStream = function(error) {
-                console.error("Cannot initialize video component:", error.code);
-            };
-            
-            var setUserMedia = function() {
-                console.log("video test");
-                if (navigator.mediaDevices !== undefined) {
-                    navigator.mediaDevices.getUserMedia({video:{facingMode : "environment"}})
-                        .then(handleMediaStream)
-                        .catch(errorMediaStream);
-                } else {                    
-                    var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-                    if (getUserMedia !== undefined) {
-											console.log(getUserMedia(), handleMediaStream, errorMediaStream); 
-                        /*getUserMedia({video:true}, handleMediaStream,
-                            errorMediaStream
-                        );*/
-                        getUserMedia({video:true}).then(handleMediaStream);
-                    }
-                }
-            };
-            
-            this.grabFrame = function () {
-                if ( context === undefined || canvas === undefined || video === undefined)
-                    return;
-                if (video.readyState === video.HAVE_ENOUGH_DATA) {
-                    context.drawImage(video, 0, 0, canvas.width, canvas.height);
-                    imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-                    this.emit("onImage",imageData);
+import ARCS from '../build/arcs.js';    
+        
+var LiveSource, VideoSource;
+LiveSource = ARCS.Component.create(
+    function () {
+        var context, canvas, video, imageData;
+        var defaultWidth = 320;
+        var defaultHeight = 240;
+        var self = this;
+        
+        var handleMediaStream = function(stream) {
+            console.log(video,stream);
+            if (window.webkitURL) {
+                video.src = window.webkitURL.createObjectURL(stream);
+            } else if (video.mozSrcObject !== undefined) {
+                video.mozSrcObject = stream;
+            } else if (video.srcObject !== undefined) {
+                video.srcObject = stream;
+            } else {
+                video.src = stream;
+            }                
+            /*video.videoWidth=defaultWidth;                
+            video.videoHeight=defaultHeight;*/
+            self.emit("onReady");
+        };
+        
+        var errorMediaStream = function(error) {
+            console.error("Cannot initialize video component:", error.code);
+        };
+        
+        var setUserMedia = function() {
+            if (navigator.mediaDevices !== undefined) {
+                navigator.mediaDevices.getUserMedia({video: {facingMode: "environment", width: defaultWidth, height: defaultHeight}})
+                    .then(handleMediaStream)
+                    .catch(errorMediaStream);
+            } else {                    
+                var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+                if (getUserMedia !== undefined) {
+                    getUserMedia({video:true}).then(handleMediaStream);
                 }
                 }
-            };
+            }
+        };
+        
+        this.grabFrame = function () {
+            if ( context === undefined || canvas === undefined || video === undefined)
+                return;
+            if (video.readyState === video.HAVE_ENOUGH_DATA) {
+                context.drawImage(video, 0, 0, canvas.width, canvas.height);
+                imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+                this.emit("onImage",imageData);
+            }
+        };
+        
+        this.setSize = function(x,y) {
             
             
-            this.setSize = function(x,y) {
-                
-            };
+        };
+        
+        this.setWidgets = function (videoId, canvasId) {
+            video = document.getElementById(videoId);
+            canvas = document.getElementById(canvasId);
             
             
-            this.setWidgets = function (videoId, canvasId) {
-                video = document.getElementById(videoId);
-                canvas = document.getElementById(canvasId);
-                
-                if (video === undefined || canvas === undefined) {
-                    console.log("video elements not defined");
-                    return;
-                }
-                context = canvas.getContext("2d");
-                var canvasStyle= window.getComputedStyle(canvas);
-                canvas.width=parseInt(canvasStyle.width);
-                canvas.height=parseInt(canvasStyle.height);
-                setUserMedia();
-            };
-        },
-        ['grabFrame','setWidgets'],
-        ['onReady','onImage']
-    );
-    
-    
-    VideoSource = ARCS.Component.create(
-        function() {
-            var context, canvas, video, imageData;    
-            var defaultWidth=320;
-            var defaultHeight=240;
-            var self=this;
+            if (video === undefined || canvas === undefined) {
+                console.log("video elements not defined");
+                return;
+            }
+            context = canvas.getContext("2d");
+            var canvasStyle= window.getComputedStyle(canvas);
+            canvas.width=parseInt(canvasStyle.width);
+            canvas.height=parseInt(canvasStyle.height);
+            setUserMedia();
+        };
+    },
+    ['grabFrame','setWidgets'],
+    ['onReady','onImage']
+);
+
+
+VideoSource = ARCS.Component.create(
+    function() {
+        var context, canvas, video, imageData;    
+        var defaultWidth=320;
+        var defaultHeight=240;
+        var self=this;
+        
+        this.setWidgets = function (videoId, canvasId) {
+            video = document.getElementById(videoId);
+            canvas = document.getElementById(canvasId);
             
             
-            this.setWidgets = function (videoId, canvasId) {
-                video = document.getElementById(videoId);
-                canvas = document.getElementById(canvasId);
-                
-                if (video === undefined || canvas === undefined) {
-                    return;
-                }
-                context = canvas.getContext("2d");
-                var canvasStyle= window.getComputedStyle(canvas);
-                canvas.width=parseInt(canvasStyle.width);
-                canvas.height=parseInt(canvasStyle.height);
+            if (video === undefined || canvas === undefined) {
+                return;
+            }
+            context = canvas.getContext("2d");
+            var canvasStyle= window.getComputedStyle(canvas);
+            canvas.width=parseInt(canvasStyle.width);
+            canvas.height=parseInt(canvasStyle.height);
 
 
-                if (video.paused || video.ended) {
-                    video.addEventListener('play', function() {
-                        self.emit("onReady");
-                    });
-                } else {
+            if (video.paused || video.ended) {
+                video.addEventListener('play', function() {
                     self.emit("onReady");
                     self.emit("onReady");
-                }
-                
-                
-            };
+                });
+            } else {
+                self.emit("onReady");
+            }
             
             
-            this.grabFrame = function () {
-                if ( context === undefined || canvas === undefined || video === undefined)
-                    return;
-                if (video.paused || video.ended) {
-                    return;
-                }
-                
-                context.drawImage(video, 0, 0, canvas.width, canvas.height);
-                imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-                this.emit("onImage",imageData);
-            };
             
             
+        };
+        
+        this.grabFrame = function () {
+            if ( context === undefined || canvas === undefined || video === undefined)
+                return;
+            if (video.paused || video.ended) {
+                return;
+            }
+            
+            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+            imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+            this.emit("onImage",imageData);
+        };
         
         
-        },
-        ['grabFrame', 'setWidgets'],
-        ['onReady', 'onImage']        
-    );
-    
     
     
-    return {LiveSource: LiveSource, VideoSource: VideoSource};
-});
+    },
+    ['grabFrame', 'setWidgets'],
+    ['onReady', 'onImage']        
+);
+        
+export default {LiveSource: LiveSource, VideoSource: VideoSource};

-arcs_module(
-    function (ARCS) {
-        var WindowEvent;
+import ARCS from '../build/arcs.js';        
 
 
-        WindowEvent = ARCS.Component.create( 
-            function () {
-                var self= this;
-                                
-                window.onresize = function() { 
-                    self.emit("onResize",window.innerWidth, window.innerHeight);
-                };
-            },
-            [],
-            ["onResize"]
-        );
+let WindowEvent;
+
+WindowEvent = ARCS.Component.create( 
+    function () {
+        let self= this;
+                        
+        window.onresize = function() { 
+            self.emit("onResize",window.innerWidth, window.innerHeight);
+        };
+    },
+    [],
+    ["onResize"]
+);
         
         
-        return { WindowEvent: WindowEvent};
-    }
-);
\ No newline at end of file
+
+export default { WindowEvent: WindowEvent};

@@ -493,3 +493,5 @@ Mat3.prototype.row = function(index){
   
   
   return new Vec3( m[index][0], m[index][1], m[index][2] );
   return new Vec3( m[index][0], m[index][1], m[index][2] );
 };
 };
+
+export default POS;

@@ -529,3 +529,5 @@ POS.Pose = function(error1, rotation1, translation1, error2, rotation2, translat
   this.alternativeRotation = rotation2;
   this.alternativeRotation = rotation2;
   this.alternativeTranslation = translation2;
   this.alternativeTranslation = translation2;
 };
 };
+
+export default POS;

@@ -129,4 +129,6 @@ POS.SquareFiducial.prototype.crossProduct = function(a,b) {
 POS.SimplePose = function(pos, rot) {
 POS.SimplePose = function(pos, rot) {
     this.position = pos;
     this.position = pos;
     this.rotation = rot;
     this.rotation = rot;
-};
\ No newline at end of file
+};
+
+export default POS;

@@ -281,3 +281,5 @@ SVD.pythag = function(a, b){
 SVD.sign = function(a, b){
 SVD.sign = function(a, b){
   return b >= 0.0? Math.abs(a): -Math.abs(a);
   return b >= 0.0? Math.abs(a): -Math.abs(a);
 };
 };
+
+export default SVD;

-arcs_module(function(ARCS) {
-THREE.FrustumCamera = function (  left, right, bottom, top, near, far ) {
+import * as THREE from './index.js';
+
+let FrustumCamera = function (  left, right, bottom, top, near, far ) {
 
 
     THREE.Camera.call( this );
     THREE.Camera.call( this );
 
 
@@ -17,22 +18,22 @@ THREE.FrustumCamera = function (  left, right, bottom, top, near, far ) {
 
 
 };
 };
 
 
-THREE.FrustumCamera.prototype = Object.create( THREE.Camera.prototype );
-THREE.FrustumCamera.prototype.constructor = THREE.FrustumCamera;
+FrustumCamera.prototype = Object.create( THREE.Camera.prototype );
+FrustumCamera.prototype.constructor = FrustumCamera;
 
 
 
 
 
 
 
 
-THREE.FrustumCamera.prototype.updateProjectionMatrix = function () {
+FrustumCamera.prototype.updateProjectionMatrix = function () {
 
 
     this.projectionMatrix.makeFrustum(
     this.projectionMatrix.makeFrustum(
         this.left, this.right, this.bottom, this.top, this.near, this.far
         this.left, this.right, this.bottom, this.top, this.near, this.far
     );
     );
 };
 };
 
 
-THREE.FrustumCamera.prototype.clone = function () {
+FrustumCamera.prototype.clone = function () {
 
 
-    var camera = new THREE.FrustumCamera();
+    var camera = new FrustumCamera();
 
 
     THREE.Camera.prototype.clone.call( this, camera );
     THREE.Camera.prototype.clone.call( this, camera );
 
 
@@ -51,6 +52,4 @@ THREE.FrustumCamera.prototype.clone = function () {
 
 
 };
 };
 
 
-return {};
-}, ['deps/three.js/index']
-);	
+export default FrustumCamera;

@@ -11,14 +11,17 @@
     "Reality"
     "Reality"
   ],
   ],
   "author": "Jean-Yves Didier",
   "author": "Jean-Yves Didier",
-  "license": "GPL",
+  "license": "GPL-3.0-or-later",
   "devDependencies": {
   "devDependencies": {
     "bower": ">=1.3.9",
     "bower": ">=1.3.9",
     "grunt": ">=0.4.5",
     "grunt": ">=0.4.5",
     "grunt-jslint": ">=1.1.12",
     "grunt-jslint": ">=1.1.12",
-    "grunt-contrib-uglify": ">=0.5.1",
+    "grunt-terser": "*",
     "grunt-jsdoc": ">=0.5.6",
     "grunt-jsdoc": ">=0.5.6",
     "grunt-bower-task": ">=0.4.0",
     "grunt-bower-task": ">=0.4.0",
-    "grunt-contrib-concat": ">=0.5.0"
+    "grunt-contrib-concat": ">=0.5.0",
+    "grunt-contrib-copy": ">=1.0.0",
+    "grunt-file-append": ">=0.0.7",
+    "grunt-string-replace": ">=1.3.1"
   }
   }
 }
 }

@@ -199,7 +199,7 @@ ARCS.Application = function () {
      * Starts the application
      * Starts the application
      */
      */
     this.start = function () {
     this.start = function () {
-        console.log("[ARCS] Starting application");
+        console.log("[ARCS] Starting application...");
         context.instanciate().then(preProcess);
         context.instanciate().then(preProcess);
     };
     };
 };
 };

@@ -22,19 +22,11 @@ var ARCS =  ARCS || {};
  * Helper functions to determine environment
  * Helper functions to determine environment
  * ***************************************************************************/
  * ***************************************************************************/
 
 
-
 /**
 /**
  * @return {boolean} true if ARCS is run in a node.js environment
  * @return {boolean} true if ARCS is run in a node.js environment
  */
  */
 ARCS.isInNode = function () {
 ARCS.isInNode = function () {
-    return (typeof require === 'function' && require.resolve);
+     return (typeof require === 'function' && require.resolve);
 };
 };
 
 
 
 
-/**
- * @return {boolean} true if ARCS is run with require.js
- */
-ARCS.isInRequire = function () {
-    return (typeof define === 'function' && define.amd);
-};
-

@@ -6,43 +6,31 @@ import ARCS from './arcs.js';
  * It relies on require.js to get the job done.
  * It relies on require.js to get the job done.
  * @file
  * @file
  */
  */
+"use strict";
+
+// basically, here we start by importing the module ARCS
+import ARCS from './arcs.js';
 
 
-console.log("Bootstrapping ARCS...");
+
+console.log("[ARCS] Bootstrapping...");
 
 
 var baseUrl, appDescription, requireMarkup, xhr;
 var baseUrl, appDescription, requireMarkup, xhr;
 
 
-requireMarkup = document.querySelector('[data-main]');
+requireMarkup = document.querySelector('[data-arcsapp]');
 if (requireMarkup !== undefined) {
 if (requireMarkup !== undefined) {
         baseUrl = requireMarkup.dataset.baseUrl ;
         baseUrl = requireMarkup.dataset.baseUrl ;
         appDescription = requireMarkup.dataset.arcsapp || "arcsapp.json";    
         appDescription = requireMarkup.dataset.arcsapp || "arcsapp.json";    
 }
 }
 
 
-// do not move these lines: xhr.open must be performed before require
-// changes paths.
-xhr = new XMLHttpRequest();
-xhr.open('GET',appDescription,true);
-xhr.overrideMimeType("application/json");
-xhr.onerror = function (e) { 
-    console.error("[ARCS] Failed to get app description (",appDescription,"):",e.target.status,e.message); 
-};
-
-xhr.onreadystatechange = function() {
-    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
-        try {
-            console.log("ARCS application description loaded");
-            var applicationObject = JSON.parse(xhr.responseText);
-            if (baseUrl) {
-                // TODO change this line below 
-                require.config( { baseUrl: baseUrl });
-            }
-            var aap = new ARCS.Application();
-            aap.import(applicationObject);
-            console.log("Starting application...");
-            aap.start();
-        } catch (e) {
-            console.error("[ARCS] Error while parsing JSON:",e); 
-        }
-    }
-};
-    
-xhr.send();
+
+(async function toto() {
+var description = await(fetch(appDescription));
+var applicationObject = await(description.json());
+
+
+console.log("[ARCS] Application description loaded");
+
+var aap = new ARCS.Application();
+aap.import(applicationObject);
+aap.start();
+})();

-/**
- * definition of the main module function: 
- * it takes an anonymous function as a parameter
- * the anonymous function has one parameter: the object encompassing 
- * ARCS definitions (in order to able to use ARCS.Component.create, ...)
- * @param moduleDefinition {function} main function of the module. 
- * It should return a list of components
- * @param deps {mixed[]} dependencies
- */
-
-// TODO remove dependency handling
-
-
-// reimplementation using native promises
-arcs_module = function(moduleDefinition) {
-    var storeComponents, i;
-    
-    // TODO verify if this is still needed
-    if (typeof module !== 'undefined') {
-        if (module.parent.exports) {
-            ARCS = module.exports; 
-        }
-    }
-    
-    
-    storeComponents = function () {
-        var mdef, p;
-        // we should insert ARCS at the beginning of deps !
-        
-        mdef = (typeof moduleDefinition === 'function') ?
-                moduleDefinition.apply(this) : moduleDefinition;
-
-        if (mdef === undefined) {
-            throw new Error("[ARCS] Your module is undefined. Did you forget to export components?\nCode of module follows:\n" +moduleDefinition);
-        }
-
-        for (p in mdef) {
-            if (mdef.hasOwnProperty(p) && ARCS.Context.currentContext != null) {
-                ARCS.Context.currentContext.setFactory(p,mdef[p]); //.setFactory(ARCS.Application.currentApplication, p, mdef[p]);
-            }
-        }
-        
-        return Promise.resolve();
-    };
-    // until now, it is the very same code.
-    
-    
-        ARCS.Context.currentContext.addLibraryPromise(
-            storeComponents,
-            function(reason) { console.error("[ARCS] Failed to load dependency ", reason ); })
-        
-        );
-    
-}

-#!/usr/bin/env node
-
-var ARCS = require('./arcs.js');
-var application = require('./appli.json');
-var aap = new ARCS.Application();
-aap.import(application);
-aap.start();

+#!/usr/bin/env -S node --experimental-modules --experimental-json-modules
+
+import ARCS from './arcs.js';
+import process from 'process';
+import path from 'path';
+import fs from 'fs';
+//import application from './appli.json';
+
+function usage() {
+    let sp = process.argv[1].lastIndexOf(path.delimiter);
+    console.log("usage:");
+    console.log("\t",
+        process.argv[1],
+        "description.json"
+    );
+}
+
+if (process.argv.length < 3) {
+    usage();
+    process.exit(1);
+}
+
+
+var appDescription = fs.readFileSync(process.argv[2]);
+if (appDescription === '') {
+    console.error("File '"+process.argv[2]+"' is empty.");
+    process.exit(2);
+}
+
+var application = JSON.parse(appDescription);
+
+var aap = new ARCS.Application();
+aap.import(application);
+aap.start();

@@ -9,7 +9,7 @@ ARCS.Context = function( ctx ) {
     var constants = {};
     var constants = {};
     var factories = {};
     var factories = {};
     var libraries = [];
     var libraries = [];
-    var depLibPromises=[];
+    //var depLibPromises=[];
     var self = this;
     var self = this;
     var loadLibraries;
     var loadLibraries;
     var loadDataFile;
     var loadDataFile;
@@ -23,6 +23,7 @@ ARCS.Context = function( ctx ) {
     if (ctx !== undefined) {
     if (ctx !== undefined) {
         libraries = ctx.libraries;
         libraries = ctx.libraries;
     
     
+        var p;
         for (p in ctx.components) {
         for (p in ctx.components) {
             if (ctx.components.hasOwnProperty(p)) {
             if (ctx.components.hasOwnProperty(p)) {
                 components[p] = ctx.components[p];
                 components[p] = ctx.components[p];
@@ -39,8 +40,7 @@ ARCS.Context = function( ctx ) {
         
         
     }
     }
 
 
-    
-    loadDataFile = function(fileName) {
+    var loadDataFile =async function(fileName) {
         var dataPromise ;
         var dataPromise ;
                 
                 
         if (ARCS.isInNode()) {
         if (ARCS.isInNode()) {
@@ -53,59 +53,12 @@ ARCS.Context = function( ctx ) {
                 }
                 }
             });
             });
         } else {
         } else {
-            return new Promise(function(resolve, reject) {
-                var client = new XMLHttpRequest();
-                client.open('GET',fileName,true);
-                client.overrideMimeType("application/json");
-                client.send();
-                
-                client.onload = function() {
-                    if (this.status >= 200 && this.status < 300) {
-                        resolve(JSON.parse(this.responseText));
-                    } else {
-                        console.error(this.statusText);
-                        reject(this.statusText);
-                    }                
-                };
-                client.onerror = function() {
-                    console.error(this.statusText);
-                    reject(this.statusText);
-                };
-            });
+            var client = await fetch(fileName);
+            return client.json();
         }
         }
     };
     };
-    
-    this.addLibraryPromise = function(p) {
-        depLibPromises.push(p);
-    };
-            
-    promiseLibrary = function(libName) {
-        return new Promise(function(resolve, reject) {
-            if (libName.substr(-3) === '.js') {
-                reject(libName);
-            }            
-            
-            if (ARCS.isInNode()) {
-                if (require("./" + libraries[i] + ".js") === undefined) {
-                    reject(libName);
-                } else {
-                    resolve();
-                }                
-            } else {
-                require([libName], 
-                        function() {
-                            resolve(); 
-                        }, 
-                        function(err) { 
-                            reject(libName,err); 
-                            
-                        }
-                );
-            }            
-        });        
-    };
-    
-    loadLibraries = function () {
+        
+    var loadLibraries = function () {
         var i;
         var i;
         // we will use different instances of require either the one of node 
         // we will use different instances of require either the one of node 
         // or the one from require.js
         // or the one from require.js
@@ -113,14 +66,13 @@ ARCS.Context = function( ctx ) {
         
         
         var res=[];
         var res=[];
         for(i=0; i < libraries.length; i++) {
         for(i=0; i < libraries.length; i++) {
-            res.push(promiseLibrary(libraries[i]));
+            res.push(self.loadLibrary(libraries[i]));
         }
         }
         return Promise.all(res);        
         return Promise.all(res);        
     };
     };
     
     
-    instanciateComponents = function() {
+    var instanciateComponents = function() {
         var p, promises=[];
         var p, promises=[];
-        console.log(components);
         
         
         for (p in components) {
         for (p in components) {
            if (components.hasOwnProperty(p)) {
            if (components.hasOwnProperty(p)) {
@@ -129,7 +81,7 @@ ARCS.Context = function( ctx ) {
                     console.error("[ARCS] Context dump follows: ", libraries, components, constants);
                     console.error("[ARCS] Context dump follows: ", libraries, components, constants);
                     return ;
                     return ;
                 }                    
                 }                    
-                factory = factories[components[p].type];
+                var factory = factories[components[p].type];
                 //console.log("instanciating ", p);
                 //console.log("instanciating ", p);
                 try {
                 try {
                 if (components[p].value !== undefined || components[p].url !== undefined || components[p].ref !== undefined) {                
                 if (components[p].value !== undefined || components[p].url !== undefined || components[p].ref !== undefined) {                
@@ -140,11 +92,12 @@ ARCS.Context = function( ctx ) {
                         // we need currying here !
                         // we need currying here !
                         var delayInstanciation = function(p,factory) {
                         var delayInstanciation = function(p,factory) {
                             return function(obj) { 
                             return function(obj) { 
+                                console.log("instanciating from data file");
                                 components[p].instance = new factory(obj);
                                 components[p].instance = new factory(obj);
                                 return Promise.resolve();                                
                                 return Promise.resolve();                                
                             }
                             }
                         };
                         };
-
+                        console.log("loading data file", components[p].url);
                         promises.push(
                         promises.push(
                             loadDataFile(components[p].url).then(delayInstanciation(p,factory))
                             loadDataFile(components[p].url).then(delayInstanciation(p,factory))
                         );
                         );
@@ -177,13 +130,23 @@ ARCS.Context = function( ctx ) {
             libActualName = libName.name;
             libActualName = libName.name;
             libUrl = libName.url;
             libUrl = libName.url;
         }
         }
-                
-        libraries.push(libActualName);
-        promiseLibrary(libUrl).then( function() {
+
+        if (libraries.indexOf(libActualName) < 0) {
+            libraries.push(libActualName);
+        }
+        // TODO promisify call to cbFunction
+        return import(libUrl).then( function(module) {
+            // TODO insert here component factories
+            for (p in module.default) {
+                if (module.default.hasOwnProperty(p)) {
+                    ARCS.Context.currentContext.setFactory(p,module.default[p]);
+                }
+            }
+
             if (cbFunction !== undefined) {
             if (cbFunction !== undefined) {
                 cbFunction();
                 cbFunction();
             }
             }
-        });
+        }).catch( function(msg) { console.error("[ARCS] Trouble loading '",libUrl,"' with reason -", msg) });
     };
     };
     
     
     /**
     /**
@@ -300,9 +263,9 @@ ARCS.Context = function( ctx ) {
 
 
     // this should return a promise  !
     // this should return a promise  !
     this.instanciate = function () {
     this.instanciate = function () {
-        return loadLibraries().then(function() { return Promise.all(depLibPromises); })
-                              .then(instanciateComponents)
-                              .catch(function(msg) { console.log("[ARCS] Trouble instanciating context", msg); });
+        //! TODO
+        return loadLibraries().then(instanciateComponents)
+                    .catch(function(msg) { console.error("[ARCS] Trouble instanciating context", msg); });
         
         
     };
     };
     
     

+// no longer needed with the use of imports
 
 
-// ARCS is then defined as a node.js module
-if (!ARCS.isInNode()) {
-    var exports = {};
-}
-
-exports.Component = ARCS.Component;
-exports.Connection = ARCS.Connection;
-exports.Invocation = ARCS.Invocation;
-exports.Statemachine = ARCS.Statemachine;
-exports.Sheet = ARCS.Sheet;
-exports.Application = ARCS.Application;
-exports.EventLogicParser = ARCS.EventLogicParser;
-exports.TransitionSystem = ARCS.TransitionSystem;
-exports.isInNode = ARCS.isInNode;
-exports.isInRequire = ARCS.isInRequire;
-
-// hack for require.js
-// ARCS is then defined as a require.js module.
-if (ARCS.isInRequire()) {
-    //console.log("module ARCS in require.js");
-    define(exports);
-}
+export { ARCS as default};
\ No newline at end of file

@@ -35,7 +35,7 @@ ARCS.TransitionNetwork.build = function(tree, tokenEvents) {
     }
     }
     
     
     res = ARCS.TransitionNetwork.build(tree[0],tokenEvents);
     res = ARCS.TransitionNetwork.build(tree[0],tokenEvents);
-    
+    var i;
     for (i=1; i < tree.length; i++) {
     for (i=1; i < tree.length; i++) {
         if (tree[i].hasOwnProperty('and')) {
         if (tree[i].hasOwnProperty('and')) {
             rightTN = ARCS.TransitionNetwork.build(tree[i]['and'], tokenEvents); 
             rightTN = ARCS.TransitionNetwork.build(tree[i]['and'], tokenEvents); 

 {
 {
   "context": {
   "context": {
     "libraries": [
     "libraries": [
-      "components/arviewer","components/animator",
-      "components/objloader","components/video",
-      "components/arucodetector", "components/markerlocator",
-      "components/windowevent", "components/tokensender", "components/objecttransform"
+      "../components/arviewer.js","../components/animator.js",
+      "../components/objloader.js","../components/video.js",
+      "../components/arucodetector.js", "../components/markerlocator.js",
+      "../components/windowevent.js", "../components/tokensender.js", "../components/objecttransform.js"
     ],
     ],
     "components": {
     "components": {
       "viewer": { "type": "ARViewer"},
       "viewer": { "type": "ARViewer"},

@@ -2,15 +2,15 @@
     <head>
     <head>
         <title>ARCS: marker experiment</title>
         <title>ARCS: marker experiment</title>
             <link type="text/css" rel="stylesheet" href="arcs.css">
             <link type="text/css" rel="stylesheet" href="arcs.css">
-                <script data-main="../../build/arcs_browser" 
+                <script src="../../build/arcs_browser.js" 
                         data-base-url="../.." 
                         data-base-url="../.." 
                         data-arcsapp="arcsapp.json" 
                         data-arcsapp="arcsapp.json" 
-                        src="../../deps/requirejs/require.js">
+                        type="module">
                 </script>
                 </script>
             <meta charset="UTF-8"> 
             <meta charset="UTF-8"> 
     </head>
     </head>
     <body>
     <body>
-        <video id="video" width=320 height=240 autoplay="true" style="display: none;"></video>
+        <video id="video" width=640 height=480 autoplay="true" style="display: none;"></video>
         <canvas id="canvas"></canvas>
         <canvas id="canvas"></canvas>
         <div id="container" ></div>
         <div id="container" ></div>
         <div id="contents">
         <div id="contents">

 {
 {
   "context" : {
   "context" : {
-    "libraries" : [ "components/loop","components/console"],
+    "libraries" : [ "../components/loop.js","../components/console.js"],
     "components" : {
     "components" : {
       "loop": { "type": "Loop" },
       "loop": { "type": "Loop" },
       "dint": { "type": "DisplayInt" }, 
       "dint": { "type": "DisplayInt" }, 

 <html>
 <html>
 	<head>
 	<head>
 		<title>ARCS engine</title>
 		<title>ARCS engine</title>
-		<script data-main="../../build/arcs_browser" 
-                        data-base-url="../.." 
-                        data-arcsapp="arcsapp.json" 
-                        src="../../deps/requirejs/require.js">
-                </script>
+		<script data-base-url="../.." 
+                data-arcsapp="arcsapp.json" 
+                type="module"
+                src="../../build/arcs_browser.js">
+        </script>
+        <style>
+            body {
+                font-family: sans-serif;
+            }
+        </style>
 	</head>
 	</head>
 	<body>
 	<body>
 		<h1>ARCS in Web Browser</h1>
 		<h1>ARCS in Web Browser</h1>
-                <div style="height:100px; overflow: auto; border: solid 1px navy;">
-                    <p id="output" style="margin: 5px; padding: 5px;"></p>
+                <div style="height:80vh; overflow: auto; border: solid 1px navy;">
+                    <p id="output" style="margin: 5px; padding: 5px; font-family: monospace;"></p>
                 <div>
                 <div>
 	</body>
 	</body>
 </html>
 </html>