├── .babelrc ├── .gitignore ├── README.md ├── config.js ├── gulpfile.js ├── index.html ├── package.json ├── src ├── cat.js ├── main.js └── zoo.js ├── target ├── 1.bundle.js ├── 1.bundle.js.map ├── main.bundle.js └── main.bundle.js.map └── test ├── cat.spec.js └── zoo.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | jspm_packages -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # lazy-load-es2015-systemjs 2 | Lazy-loading ES2015 modules in the browser with JSPM, Babel and System.js 3 | 4 | # Usage 5 | ``` 6 | npm install 7 | jspm install 8 | npm run build 9 | npm test 10 | npm run start 11 | ``` -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | System.config({ 2 | defaultJSExtensions: true, 3 | transpiler: "babel", 4 | babelOptions: { 5 | "optional": [ 6 | "runtime", 7 | "optimisation.modules.system" 8 | ] 9 | }, 10 | paths: { 11 | "github:*": "../jspm_packages/github/*", 12 | "npm:*": "../jspm_packages/npm/*" 13 | }, 14 | bundles: { 15 | "target/1.bundle.js": [ 16 | "src/zoo.js", 17 | "npm:babel-runtime@5.8.34/helpers/class-call-check", 18 | "npm:babel-runtime@5.8.34/helpers/create-class", 19 | "npm:babel-runtime@5.8.34/core-js/object/define-property", 20 | "npm:core-js@1.2.6/library/fn/object/define-property", 21 | "npm:core-js@1.2.6/library/modules/$" 22 | ] 23 | }, 24 | 25 | map: { 26 | "babel": "npm:babel-core@5.8.34", 27 | "babel-runtime": "npm:babel-runtime@5.8.34", 28 | "core-js": "npm:core-js@1.2.6", 29 | "github:jspm/nodelibs-assert@0.1.0": { 30 | "assert": "npm:assert@1.3.0" 31 | }, 32 | "github:jspm/nodelibs-path@0.1.0": { 33 | "path-browserify": "npm:path-browserify@0.0.0" 34 | }, 35 | "github:jspm/nodelibs-process@0.1.2": { 36 | "process": "npm:process@0.11.2" 37 | }, 38 | "github:jspm/nodelibs-util@0.1.0": { 39 | "util": "npm:util@0.10.3" 40 | }, 41 | "npm:assert@1.3.0": { 42 | "util": "npm:util@0.10.3" 43 | }, 44 | "npm:babel-runtime@5.8.34": { 45 | "process": "github:jspm/nodelibs-process@0.1.2" 46 | }, 47 | "npm:core-js@1.2.6": { 48 | "fs": "github:jspm/nodelibs-fs@0.1.2", 49 | "path": "github:jspm/nodelibs-path@0.1.0", 50 | "process": "github:jspm/nodelibs-process@0.1.2", 51 | "systemjs-json": "github:systemjs/plugin-json@0.1.0" 52 | }, 53 | "npm:inherits@2.0.1": { 54 | "util": "github:jspm/nodelibs-util@0.1.0" 55 | }, 56 | "npm:path-browserify@0.0.0": { 57 | "process": "github:jspm/nodelibs-process@0.1.2" 58 | }, 59 | "npm:process@0.11.2": { 60 | "assert": "github:jspm/nodelibs-assert@0.1.0" 61 | }, 62 | "npm:util@0.10.3": { 63 | "inherits": "npm:inherits@2.0.1", 64 | "process": "github:jspm/nodelibs-process@0.1.2" 65 | } 66 | } 67 | }); 68 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var mocha = require('gulp-mocha'); 3 | var connect = require('gulp-connect'); 4 | require('babel-core/register'); 5 | 6 | gulp.task('test', function() { 7 | return gulp.src('test/*.js') 8 | .pipe(mocha()) 9 | .on('error', function() { 10 | gulp.emit('end'); 11 | }); 12 | }); 13 | 14 | gulp.task('connect', function() { 15 | connect.server({ 16 | root: '.' 17 | }); 18 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lazy-load-es2015-systemjs", 3 | "version": "1.0.0", 4 | "description": "Lazy-loading ES2015 modules in the browser with JSPM, Babel and System.js ", 5 | "main": "src/main.js", 6 | "scripts": { 7 | "build": "jspm bundle-sfx src/main.js target/main.bundle.js && jspm bundle src/zoo.js target/1.bundle.js --inject", 8 | "test": "gulp test", 9 | "start": "gulp connect" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/tiagorg/lazy-load-es2015-systemjs.git" 14 | }, 15 | "author": "Tiago Garcia", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/tiagorg/lazy-load-es2015-systemjs/issues" 19 | }, 20 | "homepage": "https://github.com/tiagorg/lazy-load-es2015-systemjs#readme", 21 | "jspm": { 22 | "devDependencies": { 23 | "babel": "npm:babel-core@^5.8.24", 24 | "babel-runtime": "npm:babel-runtime@^5.8.24", 25 | "core-js": "npm:core-js@^1.1.4" 26 | } 27 | }, 28 | "devDependencies": { 29 | "babel-core": "^6.4.0", 30 | "babel-preset-es2015": "^6.3.13", 31 | "chai": "^3.4.1", 32 | "gulp": "^3.9.0", 33 | "gulp-connect": "^2.3.1", 34 | "gulp-mocha": "^2.2.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/cat.js: -------------------------------------------------------------------------------- 1 | export default class Cat { 2 | constructor( name ) { 3 | this.name = name; 4 | } 5 | 6 | meow() { 7 | return `${this.name}: You gotta be kidding that I'll obey you, right?`; 8 | } 9 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // Importing Cat module synchronously 2 | import Cat from './cat'; 3 | 4 | // DOM content node 5 | let contentNode = document.getElementById( 'content' ); 6 | 7 | // Rendering cat 8 | let myCat = new Cat( 'Bugsy' ); 9 | contentNode.innerHTML += myCat.meow(); 10 | 11 | // Button to lazy load Zoo 12 | contentNode.innerHTML += `

`; 13 | 14 | // Listener to lazy load Zoo 15 | document.getElementById( 'loadZoo' ).addEventListener( 'click', e => { 16 | 17 | // Importing Zoo module asynchronously 18 | System.import( 'src/zoo' ).then( Zoo => { 19 | 20 | // Rendering dog 21 | let myDog = new Zoo.Dog( 'Sherlock', 'beagle' ); 22 | contentNode.innerHTML += `${myDog.bark()}`; 23 | 24 | // Rendering wolf 25 | let myWolf = new Zoo.Wolf( 'Direwolf' ); 26 | contentNode.innerHTML += `
${myWolf.bark()}`; 27 | 28 | } ); 29 | 30 | } ); -------------------------------------------------------------------------------- /src/zoo.js: -------------------------------------------------------------------------------- 1 | let getBarkStyle = function ( isHowler ) { 2 | return isHowler ? 'woooooow!' : 'woof, woof!'; 3 | }; 4 | 5 | export class Dog { 6 | constructor( name, breed ) { 7 | this.name = name; 8 | this.breed = breed; 9 | } 10 | 11 | bark() { 12 | return `${this.name}: ${getBarkStyle(this.breed === 'husky')}`; 13 | } 14 | } 15 | 16 | export class Wolf { 17 | constructor( name ) { 18 | this.name = name; 19 | } 20 | 21 | bark() { 22 | return `${this.name}: ${getBarkStyle(true)}`; 23 | } 24 | } -------------------------------------------------------------------------------- /target/1.bundle.js: -------------------------------------------------------------------------------- 1 | System.registerDynamic("npm:babel-runtime@5.8.34/helpers/class-call-check", [], true, function(req, exports, module) { 2 | ; 3 | var global = this, 4 | __define = global.define; 5 | global.define = undefined; 6 | "use strict"; 7 | exports["default"] = function(instance, Constructor) { 8 | if (!(instance instanceof Constructor)) { 9 | throw new TypeError("Cannot call a class as a function"); 10 | } 11 | }; 12 | exports.__esModule = true; 13 | global.define = __define; 14 | return module.exports; 15 | }); 16 | 17 | System.registerDynamic("npm:core-js@1.2.6/library/modules/$", [], true, function(req, exports, module) { 18 | ; 19 | var global = this, 20 | __define = global.define; 21 | global.define = undefined; 22 | var $Object = Object; 23 | module.exports = { 24 | create: $Object.create, 25 | getProto: $Object.getPrototypeOf, 26 | isEnum: {}.propertyIsEnumerable, 27 | getDesc: $Object.getOwnPropertyDescriptor, 28 | setDesc: $Object.defineProperty, 29 | setDescs: $Object.defineProperties, 30 | getKeys: $Object.keys, 31 | getNames: $Object.getOwnPropertyNames, 32 | getSymbols: $Object.getOwnPropertySymbols, 33 | each: [].forEach 34 | }; 35 | global.define = __define; 36 | return module.exports; 37 | }); 38 | 39 | System.registerDynamic("npm:core-js@1.2.6/library/fn/object/define-property", ["npm:core-js@1.2.6/library/modules/$"], true, function(req, exports, module) { 40 | ; 41 | var global = this, 42 | __define = global.define; 43 | global.define = undefined; 44 | var $ = req('npm:core-js@1.2.6/library/modules/$'); 45 | module.exports = function defineProperty(it, key, desc) { 46 | return $.setDesc(it, key, desc); 47 | }; 48 | global.define = __define; 49 | return module.exports; 50 | }); 51 | 52 | System.registerDynamic("npm:babel-runtime@5.8.34/core-js/object/define-property", ["npm:core-js@1.2.6/library/fn/object/define-property"], true, function(req, exports, module) { 53 | ; 54 | var global = this, 55 | __define = global.define; 56 | global.define = undefined; 57 | module.exports = { 58 | "default": req('npm:core-js@1.2.6/library/fn/object/define-property'), 59 | __esModule: true 60 | }; 61 | global.define = __define; 62 | return module.exports; 63 | }); 64 | 65 | System.registerDynamic("npm:babel-runtime@5.8.34/helpers/create-class", ["npm:babel-runtime@5.8.34/core-js/object/define-property"], true, function(req, exports, module) { 66 | ; 67 | var global = this, 68 | __define = global.define; 69 | global.define = undefined; 70 | "use strict"; 71 | var _Object$defineProperty = req('npm:babel-runtime@5.8.34/core-js/object/define-property')["default"]; 72 | exports["default"] = (function() { 73 | function defineProperties(target, props) { 74 | for (var i = 0; i < props.length; i++) { 75 | var descriptor = props[i]; 76 | descriptor.enumerable = descriptor.enumerable || false; 77 | descriptor.configurable = true; 78 | if ("value" in descriptor) 79 | descriptor.writable = true; 80 | _Object$defineProperty(target, descriptor.key, descriptor); 81 | } 82 | } 83 | return function(Constructor, protoProps, staticProps) { 84 | if (protoProps) 85 | defineProperties(Constructor.prototype, protoProps); 86 | if (staticProps) 87 | defineProperties(Constructor, staticProps); 88 | return Constructor; 89 | }; 90 | })(); 91 | exports.__esModule = true; 92 | global.define = __define; 93 | return module.exports; 94 | }); 95 | 96 | System.register('src/zoo.js', ['npm:babel-runtime@5.8.34/helpers/create-class', 'npm:babel-runtime@5.8.34/helpers/class-call-check'], function (_export) { 97 | var _createClass, _classCallCheck, getBarkStyle, Dog, Wolf; 98 | 99 | return { 100 | setters: [function (_npmBabelRuntime5834HelpersCreateClass) { 101 | _createClass = _npmBabelRuntime5834HelpersCreateClass['default']; 102 | }, function (_npmBabelRuntime5834HelpersClassCallCheck) { 103 | _classCallCheck = _npmBabelRuntime5834HelpersClassCallCheck['default']; 104 | }], 105 | execute: function () { 106 | 'use strict'; 107 | 108 | getBarkStyle = function getBarkStyle(isHowler) { 109 | return isHowler ? 'woooooow!' : 'woof, woof!'; 110 | }; 111 | 112 | Dog = (function () { 113 | function Dog(name, breed) { 114 | _classCallCheck(this, Dog); 115 | 116 | this.name = name; 117 | this.breed = breed; 118 | } 119 | 120 | _createClass(Dog, [{ 121 | key: 'bark', 122 | value: function bark() { 123 | return this.name + ': ' + getBarkStyle(this.breed === 'husky'); 124 | } 125 | }]); 126 | 127 | return Dog; 128 | })(); 129 | 130 | _export('Dog', Dog); 131 | 132 | Wolf = (function () { 133 | function Wolf(name) { 134 | _classCallCheck(this, Wolf); 135 | 136 | this.name = name; 137 | } 138 | 139 | _createClass(Wolf, [{ 140 | key: 'bark', 141 | value: function bark() { 142 | return this.name + ': ' + getBarkStyle(true); 143 | } 144 | }]); 145 | 146 | return Wolf; 147 | })(); 148 | 149 | _export('Wolf', Wolf); 150 | } 151 | }; 152 | }); 153 | //# sourceMappingURL=1.bundle.js.map -------------------------------------------------------------------------------- /target/1.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../jspm_packages/npm/babel-runtime@5.8.34/helpers/class-call-check.js","../jspm_packages/npm/core-js@1.2.6/library/modules/$.js","../jspm_packages/npm/core-js@1.2.6/library/fn/object/define-property.js","../jspm_packages/npm/babel-runtime@5.8.34/core-js/object/define-property.js","../jspm_packages/npm/babel-runtime@5.8.34/helpers/create-class.js","../src/zoo.js"],"names":[],"mappings":"AAAA;AAAA;AACI;AAAmB;AACnB;AADJ;AAEA;AACE;AACE;IACF;AAAA;AAGF;AATA;AACI;AAAa;AAQQ;ACTzB;AAAA;AACI;AAAmB;AACnB;AADJ;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAqB;AAZvB;AACI;AAAa;AAYhB;ACbD;AAAA;AACI;AAAmB;AACnB;AADJ;AACA;AACE;EACF;AAJA;AACI;AAAa;AAIjB;ACLA;AAAA;AACI;AAAmB;AACnB;AADJ;AAAmB;AAAiE;AAAe;AADnG;AACI;AAAa;AAAqF;ACDtG;AAAA;AACI;AAAmB;AACnB;AADJ;AACA;AACA;AACE;AACE;AACE;AACA;AACA;AACA;AACE;AAA0B;MAE9B;AAAA;AACF;AAEE;AACE;AAAmD;AAEnD;AAA0C;IAE9C;EACF;AACA;AAtBA;AACI;AAAa;AAsBjB;;qCCvBI,YAAY,EAIH,GAAG,EAWH,IAAI;;;;;;;;;;;AAfb,kBAAY,GAAG,SAAf,YAAY,CAAc,QAAQ,EAAG;AACvC,eAAO,QAAQ,GAAG,WAAW,GAAG,aAAa,CAAC;OAC/C;;AAEY,SAAG;AACH,iBADA,GAAG,CACD,IAAI,EAAE,KAAK,EAAG;gCADhB,GAAG;;AAEZ,cAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AACjB,cAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACpB;;qBAJU,GAAG;;iBAMV,gBAAG;AACL,mBAAU,IAAI,CAAC,IAAI,UAAK,YAAY,CAAC,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAG;WAChE;;;eARU,GAAG;;;;;AAWH,UAAI;AACJ,iBADA,IAAI,CACF,IAAI,EAAG;gCADT,IAAI;;AAEb,cAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;;qBAHU,IAAI;;iBAKX,gBAAG;AACL,mBAAU,IAAI,CAAC,IAAI,UAAK,YAAY,CAAC,IAAI,CAAC,CAAG;WAC9C;;;eAPU,IAAI","file":"1.bundle.js"} -------------------------------------------------------------------------------- /target/main.bundle.js: -------------------------------------------------------------------------------- 1 | "format global"; 2 | (function(global) { 3 | 4 | var defined = {}; 5 | 6 | // indexOf polyfill for IE8 7 | var indexOf = Array.prototype.indexOf || function(item) { 8 | for (var i = 0, l = this.length; i < l; i++) 9 | if (this[i] === item) 10 | return i; 11 | return -1; 12 | } 13 | 14 | var getOwnPropertyDescriptor = true; 15 | try { 16 | Object.getOwnPropertyDescriptor({ a: 0 }, 'a'); 17 | } 18 | catch(e) { 19 | getOwnPropertyDescriptor = false; 20 | } 21 | 22 | var defineProperty; 23 | (function () { 24 | try { 25 | if (!!Object.defineProperty({}, 'a', {})) 26 | defineProperty = Object.defineProperty; 27 | } 28 | catch (e) { 29 | defineProperty = function(obj, prop, opt) { 30 | try { 31 | obj[prop] = opt.value || opt.get.call(obj); 32 | } 33 | catch(e) {} 34 | } 35 | } 36 | })(); 37 | 38 | function register(name, deps, declare) { 39 | if (arguments.length === 4) 40 | return registerDynamic.apply(this, arguments); 41 | doRegister(name, { 42 | declarative: true, 43 | deps: deps, 44 | declare: declare 45 | }); 46 | } 47 | 48 | function registerDynamic(name, deps, executingRequire, execute) { 49 | doRegister(name, { 50 | declarative: false, 51 | deps: deps, 52 | executingRequire: executingRequire, 53 | execute: execute 54 | }); 55 | } 56 | 57 | function doRegister(name, entry) { 58 | entry.name = name; 59 | 60 | // we never overwrite an existing define 61 | if (!(name in defined)) 62 | defined[name] = entry; 63 | 64 | // we have to normalize dependencies 65 | // (assume dependencies are normalized for now) 66 | // entry.normalizedDeps = entry.deps.map(normalize); 67 | entry.normalizedDeps = entry.deps; 68 | } 69 | 70 | 71 | function buildGroups(entry, groups) { 72 | groups[entry.groupIndex] = groups[entry.groupIndex] || []; 73 | 74 | if (indexOf.call(groups[entry.groupIndex], entry) != -1) 75 | return; 76 | 77 | groups[entry.groupIndex].push(entry); 78 | 79 | for (var i = 0, l = entry.normalizedDeps.length; i < l; i++) { 80 | var depName = entry.normalizedDeps[i]; 81 | var depEntry = defined[depName]; 82 | 83 | // not in the registry means already linked / ES6 84 | if (!depEntry || depEntry.evaluated) 85 | continue; 86 | 87 | // now we know the entry is in our unlinked linkage group 88 | var depGroupIndex = entry.groupIndex + (depEntry.declarative != entry.declarative); 89 | 90 | // the group index of an entry is always the maximum 91 | if (depEntry.groupIndex === undefined || depEntry.groupIndex < depGroupIndex) { 92 | 93 | // if already in a group, remove from the old group 94 | if (depEntry.groupIndex !== undefined) { 95 | groups[depEntry.groupIndex].splice(indexOf.call(groups[depEntry.groupIndex], depEntry), 1); 96 | 97 | // if the old group is empty, then we have a mixed depndency cycle 98 | if (groups[depEntry.groupIndex].length == 0) 99 | throw new TypeError("Mixed dependency cycle detected"); 100 | } 101 | 102 | depEntry.groupIndex = depGroupIndex; 103 | } 104 | 105 | buildGroups(depEntry, groups); 106 | } 107 | } 108 | 109 | function link(name) { 110 | var startEntry = defined[name]; 111 | 112 | startEntry.groupIndex = 0; 113 | 114 | var groups = []; 115 | 116 | buildGroups(startEntry, groups); 117 | 118 | var curGroupDeclarative = !!startEntry.declarative == groups.length % 2; 119 | for (var i = groups.length - 1; i >= 0; i--) { 120 | var group = groups[i]; 121 | for (var j = 0; j < group.length; j++) { 122 | var entry = group[j]; 123 | 124 | // link each group 125 | if (curGroupDeclarative) 126 | linkDeclarativeModule(entry); 127 | else 128 | linkDynamicModule(entry); 129 | } 130 | curGroupDeclarative = !curGroupDeclarative; 131 | } 132 | } 133 | 134 | // module binding records 135 | var moduleRecords = {}; 136 | function getOrCreateModuleRecord(name) { 137 | return moduleRecords[name] || (moduleRecords[name] = { 138 | name: name, 139 | dependencies: [], 140 | exports: {}, // start from an empty module and extend 141 | importers: [] 142 | }) 143 | } 144 | 145 | function linkDeclarativeModule(entry) { 146 | // only link if already not already started linking (stops at circular) 147 | if (entry.module) 148 | return; 149 | 150 | var module = entry.module = getOrCreateModuleRecord(entry.name); 151 | var exports = entry.module.exports; 152 | 153 | var declaration = entry.declare.call(global, function(name, value) { 154 | module.locked = true; 155 | 156 | if (typeof name == 'object') { 157 | for (var p in name) 158 | exports[p] = name[p]; 159 | } 160 | else { 161 | exports[name] = value; 162 | } 163 | 164 | for (var i = 0, l = module.importers.length; i < l; i++) { 165 | var importerModule = module.importers[i]; 166 | if (!importerModule.locked) { 167 | for (var j = 0; j < importerModule.dependencies.length; ++j) { 168 | if (importerModule.dependencies[j] === module) { 169 | importerModule.setters[j](exports); 170 | } 171 | } 172 | } 173 | } 174 | 175 | module.locked = false; 176 | return value; 177 | }); 178 | 179 | module.setters = declaration.setters; 180 | module.execute = declaration.execute; 181 | 182 | // now link all the module dependencies 183 | for (var i = 0, l = entry.normalizedDeps.length; i < l; i++) { 184 | var depName = entry.normalizedDeps[i]; 185 | var depEntry = defined[depName]; 186 | var depModule = moduleRecords[depName]; 187 | 188 | // work out how to set depExports based on scenarios... 189 | var depExports; 190 | 191 | if (depModule) { 192 | depExports = depModule.exports; 193 | } 194 | else if (depEntry && !depEntry.declarative) { 195 | depExports = depEntry.esModule; 196 | } 197 | // in the module registry 198 | else if (!depEntry) { 199 | depExports = load(depName); 200 | } 201 | // we have an entry -> link 202 | else { 203 | linkDeclarativeModule(depEntry); 204 | depModule = depEntry.module; 205 | depExports = depModule.exports; 206 | } 207 | 208 | // only declarative modules have dynamic bindings 209 | if (depModule && depModule.importers) { 210 | depModule.importers.push(module); 211 | module.dependencies.push(depModule); 212 | } 213 | else 214 | module.dependencies.push(null); 215 | 216 | // run the setter for this dependency 217 | if (module.setters[i]) 218 | module.setters[i](depExports); 219 | } 220 | } 221 | 222 | // An analog to loader.get covering execution of all three layers (real declarative, simulated declarative, simulated dynamic) 223 | function getModule(name) { 224 | var exports; 225 | var entry = defined[name]; 226 | 227 | if (!entry) { 228 | exports = load(name); 229 | if (!exports) 230 | throw new Error("Unable to load dependency " + name + "."); 231 | } 232 | 233 | else { 234 | if (entry.declarative) 235 | ensureEvaluated(name, []); 236 | 237 | else if (!entry.evaluated) 238 | linkDynamicModule(entry); 239 | 240 | exports = entry.module.exports; 241 | } 242 | 243 | if ((!entry || entry.declarative) && exports && exports.__useDefault) 244 | return exports['default']; 245 | 246 | return exports; 247 | } 248 | 249 | function linkDynamicModule(entry) { 250 | if (entry.module) 251 | return; 252 | 253 | var exports = {}; 254 | 255 | var module = entry.module = { exports: exports, id: entry.name }; 256 | 257 | // AMD requires execute the tree first 258 | if (!entry.executingRequire) { 259 | for (var i = 0, l = entry.normalizedDeps.length; i < l; i++) { 260 | var depName = entry.normalizedDeps[i]; 261 | var depEntry = defined[depName]; 262 | if (depEntry) 263 | linkDynamicModule(depEntry); 264 | } 265 | } 266 | 267 | // now execute 268 | entry.evaluated = true; 269 | var output = entry.execute.call(global, function(name) { 270 | for (var i = 0, l = entry.deps.length; i < l; i++) { 271 | if (entry.deps[i] != name) 272 | continue; 273 | return getModule(entry.normalizedDeps[i]); 274 | } 275 | throw new TypeError('Module ' + name + ' not declared as a dependency.'); 276 | }, exports, module); 277 | 278 | if (output) 279 | module.exports = output; 280 | 281 | // create the esModule object, which allows ES6 named imports of dynamics 282 | exports = module.exports; 283 | 284 | if (exports && exports.__esModule) { 285 | entry.esModule = exports; 286 | } 287 | else { 288 | entry.esModule = {}; 289 | 290 | // don't trigger getters/setters in environments that support them 291 | if ((typeof exports == 'object' || typeof exports == 'function') && exports !== global) { 292 | if (getOwnPropertyDescriptor) { 293 | var d; 294 | for (var p in exports) 295 | if (d = Object.getOwnPropertyDescriptor(exports, p)) 296 | defineProperty(entry.esModule, p, d); 297 | } 298 | else { 299 | var hasOwnProperty = exports && exports.hasOwnProperty; 300 | for (var p in exports) { 301 | if (!hasOwnProperty || exports.hasOwnProperty(p)) 302 | entry.esModule[p] = exports[p]; 303 | } 304 | } 305 | } 306 | entry.esModule['default'] = exports; 307 | defineProperty(entry.esModule, '__useDefault', { 308 | value: true 309 | }); 310 | } 311 | } 312 | 313 | /* 314 | * Given a module, and the list of modules for this current branch, 315 | * ensure that each of the dependencies of this module is evaluated 316 | * (unless one is a circular dependency already in the list of seen 317 | * modules, in which case we execute it) 318 | * 319 | * Then we evaluate the module itself depth-first left to right 320 | * execution to match ES6 modules 321 | */ 322 | function ensureEvaluated(moduleName, seen) { 323 | var entry = defined[moduleName]; 324 | 325 | // if already seen, that means it's an already-evaluated non circular dependency 326 | if (!entry || entry.evaluated || !entry.declarative) 327 | return; 328 | 329 | // this only applies to declarative modules which late-execute 330 | 331 | seen.push(moduleName); 332 | 333 | for (var i = 0, l = entry.normalizedDeps.length; i < l; i++) { 334 | var depName = entry.normalizedDeps[i]; 335 | if (indexOf.call(seen, depName) == -1) { 336 | if (!defined[depName]) 337 | load(depName); 338 | else 339 | ensureEvaluated(depName, seen); 340 | } 341 | } 342 | 343 | if (entry.evaluated) 344 | return; 345 | 346 | entry.evaluated = true; 347 | entry.module.execute.call(global); 348 | } 349 | 350 | // magical execution function 351 | var modules = {}; 352 | function load(name) { 353 | if (modules[name]) 354 | return modules[name]; 355 | 356 | // node core modules 357 | if (name.substr(0, 6) == '@node/') 358 | return require(name.substr(6)); 359 | 360 | var entry = defined[name]; 361 | 362 | // first we check if this module has already been defined in the registry 363 | if (!entry) 364 | throw "Module " + name + " not present."; 365 | 366 | // recursively ensure that the module and all its 367 | // dependencies are linked (with dependency group handling) 368 | link(name); 369 | 370 | // now handle dependency execution in correct order 371 | ensureEvaluated(name, []); 372 | 373 | // remove from the registry 374 | defined[name] = undefined; 375 | 376 | // exported modules get __esModule defined for interop 377 | if (entry.declarative) 378 | defineProperty(entry.module.exports, '__esModule', { value: true }); 379 | 380 | // return the defined module object 381 | return modules[name] = entry.declarative ? entry.module.exports : entry.esModule; 382 | }; 383 | 384 | return function(mains, depNames, declare) { 385 | return function(formatDetect) { 386 | formatDetect(function(deps) { 387 | var System = { 388 | _nodeRequire: typeof require != 'undefined' && require.resolve && typeof process != 'undefined' && require, 389 | register: register, 390 | registerDynamic: registerDynamic, 391 | get: load, 392 | set: function(name, module) { 393 | modules[name] = module; 394 | }, 395 | newModule: function(module) { 396 | return module; 397 | } 398 | }; 399 | System.set('@empty', {}); 400 | 401 | // register external dependencies 402 | for (var i = 0; i < depNames.length; i++) (function(depName, dep) { 403 | if (dep && dep.__esModule) 404 | System.register(depName, [], function(_export) { 405 | return { 406 | setters: [], 407 | execute: function() { 408 | for (var p in dep) 409 | if (p != '__esModule' && !(typeof p == 'object' && p + '' == 'Module')) 410 | _export(p, dep[p]); 411 | } 412 | }; 413 | }); 414 | else 415 | System.registerDynamic(depName, [], false, function() { 416 | return dep; 417 | }); 418 | })(depNames[i], arguments[i]); 419 | 420 | // register modules in this bundle 421 | declare(System); 422 | 423 | // load mains 424 | var firstLoad = load(mains[0]); 425 | if (mains.length > 1) 426 | for (var i = 1; i < mains.length; i++) 427 | load(mains[i]); 428 | 429 | if (firstLoad.__useDefault) 430 | return firstLoad['default']; 431 | else 432 | return firstLoad; 433 | }); 434 | }; 435 | }; 436 | 437 | })(typeof self != 'undefined' ? self : global) 438 | /* (['mainModule'], ['external-dep'], function($__System) { 439 | System.register(...); 440 | }) 441 | (function(factory) { 442 | if (typeof define && define.amd) 443 | define(['external-dep'], factory); 444 | // etc UMD / module pattern 445 | })*/ 446 | 447 | (['1'], [], function($__System) { 448 | 449 | $__System.registerDynamic("2", [], true, function(req, exports, module) { 450 | ; 451 | var global = this, 452 | __define = global.define; 453 | global.define = undefined; 454 | "use strict"; 455 | exports["default"] = function(instance, Constructor) { 456 | if (!(instance instanceof Constructor)) { 457 | throw new TypeError("Cannot call a class as a function"); 458 | } 459 | }; 460 | exports.__esModule = true; 461 | global.define = __define; 462 | return module.exports; 463 | }); 464 | 465 | $__System.registerDynamic("3", [], true, function(req, exports, module) { 466 | ; 467 | var global = this, 468 | __define = global.define; 469 | global.define = undefined; 470 | var $Object = Object; 471 | module.exports = { 472 | create: $Object.create, 473 | getProto: $Object.getPrototypeOf, 474 | isEnum: {}.propertyIsEnumerable, 475 | getDesc: $Object.getOwnPropertyDescriptor, 476 | setDesc: $Object.defineProperty, 477 | setDescs: $Object.defineProperties, 478 | getKeys: $Object.keys, 479 | getNames: $Object.getOwnPropertyNames, 480 | getSymbols: $Object.getOwnPropertySymbols, 481 | each: [].forEach 482 | }; 483 | global.define = __define; 484 | return module.exports; 485 | }); 486 | 487 | $__System.registerDynamic("4", ["3"], true, function(req, exports, module) { 488 | ; 489 | var global = this, 490 | __define = global.define; 491 | global.define = undefined; 492 | var $ = req('3'); 493 | module.exports = function defineProperty(it, key, desc) { 494 | return $.setDesc(it, key, desc); 495 | }; 496 | global.define = __define; 497 | return module.exports; 498 | }); 499 | 500 | $__System.registerDynamic("5", ["4"], true, function(req, exports, module) { 501 | ; 502 | var global = this, 503 | __define = global.define; 504 | global.define = undefined; 505 | module.exports = { 506 | "default": req('4'), 507 | __esModule: true 508 | }; 509 | global.define = __define; 510 | return module.exports; 511 | }); 512 | 513 | $__System.registerDynamic("6", ["5"], true, function(req, exports, module) { 514 | ; 515 | var global = this, 516 | __define = global.define; 517 | global.define = undefined; 518 | "use strict"; 519 | var _Object$defineProperty = req('5')["default"]; 520 | exports["default"] = (function() { 521 | function defineProperties(target, props) { 522 | for (var i = 0; i < props.length; i++) { 523 | var descriptor = props[i]; 524 | descriptor.enumerable = descriptor.enumerable || false; 525 | descriptor.configurable = true; 526 | if ("value" in descriptor) 527 | descriptor.writable = true; 528 | _Object$defineProperty(target, descriptor.key, descriptor); 529 | } 530 | } 531 | return function(Constructor, protoProps, staticProps) { 532 | if (protoProps) 533 | defineProperties(Constructor.prototype, protoProps); 534 | if (staticProps) 535 | defineProperties(Constructor, staticProps); 536 | return Constructor; 537 | }; 538 | })(); 539 | exports.__esModule = true; 540 | global.define = __define; 541 | return module.exports; 542 | }); 543 | 544 | $__System.register("7", ["2", "6"], function (_export) { 545 | var _classCallCheck, _createClass, Cat; 546 | 547 | return { 548 | setters: [function (_2) { 549 | _classCallCheck = _2["default"]; 550 | }, function (_) { 551 | _createClass = _["default"]; 552 | }], 553 | execute: function () { 554 | "use strict"; 555 | 556 | Cat = (function () { 557 | function Cat(name) { 558 | _classCallCheck(this, Cat); 559 | 560 | this.name = name; 561 | } 562 | 563 | _createClass(Cat, [{ 564 | key: "meow", 565 | value: function meow() { 566 | return this.name + ": You gotta be kidding that I'll obey you, right?"; 567 | } 568 | }]); 569 | 570 | return Cat; 571 | })(); 572 | 573 | _export("default", Cat); 574 | } 575 | }; 576 | }); 577 | $__System.register('1', ['7'], function (_export) { 578 | // Importing Cat module synchronously 579 | 580 | // DOM content node 581 | 'use strict'; 582 | 583 | var Cat, contentNode, myCat; 584 | return { 585 | setters: [function (_) { 586 | Cat = _['default']; 587 | }], 588 | execute: function () { 589 | contentNode = document.getElementById('content'); 590 | 591 | // Rendering cat 592 | myCat = new Cat('Bugsy'); 593 | 594 | contentNode.innerHTML += myCat.meow(); 595 | 596 | // Button to lazy load Zoo 597 | contentNode.innerHTML += '

'; 598 | 599 | // Listener to lazy load Zoo 600 | document.getElementById('loadZoo').addEventListener('click', function (e) { 601 | 602 | // Importing Zoo module asynchronously 603 | System['import']('src/zoo').then(function (Zoo) { 604 | 605 | // Rendering dog 606 | var myDog = new Zoo.Dog('Sherlock', 'beagle'); 607 | contentNode.innerHTML += '' + myDog.bark(); 608 | 609 | // Rendering wolf 610 | var myWolf = new Zoo.Wolf('Direwolf'); 611 | contentNode.innerHTML += '
' + myWolf.bark(); 612 | }); 613 | }); 614 | } 615 | }; 616 | }); 617 | }) 618 | (function(factory) { 619 | factory(); 620 | }); 621 | //# sourceMappingURL=main.bundle.js.map -------------------------------------------------------------------------------- /target/main.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../jspm_packages/npm/babel-runtime@5.8.34/helpers/class-call-check.js","../jspm_packages/npm/core-js@1.2.6/library/modules/$.js","../jspm_packages/npm/core-js@1.2.6/library/fn/object/define-property.js","../jspm_packages/npm/babel-runtime@5.8.34/core-js/object/define-property.js","../jspm_packages/npm/babel-runtime@5.8.34/helpers/create-class.js","../src/cat.js","../src/main.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AACI;AAAmB;AACnB;AADJ;AAEA;AACE;AACE;IACF;AAAA;AAGF;AATA;AACI;AAAa;AAQQ;ACTzB;AAAA;AACI;AAAmB;AACnB;AADJ;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAqB;AAZvB;AACI;AAAa;AAYhB;ACbD;AAAA;AACI;AAAmB;AACnB;AADJ;AACA;AACE;EACF;AAJA;AACI;AAAa;AAIjB;ACLA;AAAA;AACI;AAAmB;AACnB;AADJ;AAAmB;AAAiE;AAAe;AADnG;AACI;AAAa;AAAqF;ACDtG;AAAA;AACI;AAAmB;AACnB;AADJ;AACA;AACA;AACE;AACE;AACE;AACA;AACA;AACA;AACE;AAA0B;MAE9B;AAAA;AACF;AAEE;AACE;AAAmD;AAEnD;AAA0C;IAE9C;EACF;AACA;AAtBA;AACI;AAAa;AAsBjB;;qCCvBqB,GAAG;;;;;;;;;;;AAAH,SAAG;AACX,iBADQ,GAAG,CACT,IAAI,EAAG;gCADD,GAAG;;AAEpB,cAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;;qBAHkB,GAAG;;iBAKlB,gBAAG;AACL,mBAAU,IAAI,CAAC,IAAI,uDAAoD;WACxE;;;eAPkB,GAAG;;;yBAAH,GAAG;;;;;;;;;;WCIpB,WAAW,EAGX,KAAK;;;;;;AAHL,iBAAW,GAAG,QAAQ,CAAC,cAAc,CAAE,SAAS,CAAE;;;AAGlD,WAAK,GAAG,IAAI,GAAG,CAAE,OAAO,CAAE;;AAC9B,iBAAW,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;;;AAGtC,iBAAW,CAAC,SAAS,iEAA+D,CAAC;;;AAGrF,cAAQ,CAAC,cAAc,CAAE,SAAS,CAAE,CAAC,gBAAgB,CAAE,OAAO,EAAE,UAAA,CAAC,EAAI;;;AAGnE,cAAM,UAAO,CAAE,SAAS,CAAE,CAAC,IAAI,CAAE,UAAA,GAAG,EAAI;;;AAGtC,cAAI,KAAK,GAAG,IAAI,GAAG,CAAC,GAAG,CAAE,UAAU,EAAE,QAAQ,CAAE,CAAC;AAChD,qBAAW,CAAC,SAAS,SAAO,KAAK,CAAC,IAAI,EAAE,AAAE,CAAC;;;AAG3C,cAAI,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAE,UAAU,CAAE,CAAC;AACxC,qBAAW,CAAC,SAAS,cAAY,MAAM,CAAC,IAAI,EAAE,AAAE,CAAC;SAElD,CAAE,CAAC;OAEL,CAAE,CAAC","file":"main.bundle.js"} -------------------------------------------------------------------------------- /test/cat.spec.js: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import Cat from '../src/cat'; 3 | 4 | describe( 'the cat module', () => { 5 | it( 'should instantiate a cat', () => { 6 | var cat = new Cat( 'Bugsy' ); 7 | expect( cat.meow() ).to.equal( 'Bugsy: You gotta be kidding that I\'ll obey you, right?' ); 8 | } ); 9 | } ); -------------------------------------------------------------------------------- /test/zoo.spec.js: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import { Dog, Wolf } from '../src/zoo'; 3 | 4 | describe( 'the zoo module', () => { 5 | it( 'should instantiate a regular dog', () => { 6 | var dog = new Dog( 'Sherlock', 'beagle' ); 7 | expect( dog.bark() ).to.equal( 'Sherlock: woof, woof!' ); 8 | } ); 9 | 10 | it( 'should instantiate a husky dog', () => { 11 | var dog = new Dog( 'Whisky', 'husky' ); 12 | expect( dog.bark() ).to.equal( 'Whisky: woooooow!' ); 13 | } ); 14 | 15 | it( 'should instantiate a wolf', () => { 16 | var wolf = new Wolf( 'Direwolf' ); 17 | expect( wolf.bark() ).to.equal( 'Direwolf: woooooow!' ); 18 | } ); 19 | } ); --------------------------------------------------------------------------------