[API] UMD Packaging (#1078)

* [Bundle] load filter with requirejs

* [Build] Use almond, wrap in UMD

Use almond for built version of application and wrap in UMD so that
it supports requirejs, commonjs, and basic browser loading.

* [Main] Can choose where to load app

MCT.run allows you to specify a dom element to load application
within.  If element is not specified, will use body.

* [MCT] set class on injected div

Set class on injected div so extra markup is not required.

* [Build] Re-enable optimize

* Add minimal bootstrap example
This commit is contained in:
Pete Richards 2016-07-07 14:25:23 -07:00 committed by GitHub
parent b55668426d
commit d7ddb96c4e
8 changed files with 45 additions and 7 deletions

View File

@ -20,6 +20,7 @@
"FileSaver.js": "^0.0.2",
"zepto": "^1.1.6",
"eventemitter3": "^1.2.0",
"lodash": "3.10.1"
"lodash": "3.10.1",
"almond": "~0.3.2"
}
}

View File

@ -54,7 +54,12 @@ var gulp = require('gulp'),
},
options = {
requirejsOptimize: {
name: paths.main.replace(/\.js$/, ''),
name: 'bower_components/almond/almond.js',
include: paths.main.replace('.js', ''),
wrap: {
startFile: "src/start.frag",
endFile: "src/end.frag"
},
mainConfigFile: paths.main,
wrapShim: true
},

View File

@ -39,7 +39,7 @@
], function (grootify, todoPlugin) {
grootify(mct);
todoPlugin(mct);
mct.start();
mct.run();
})
});
</script>
@ -55,7 +55,5 @@
<div class="l-splash-holder s-splash-holder">
<div class="l-splash s-splash"></div>
</div>
<div ng-view></div>
</body>
</html>

View File

@ -105,7 +105,14 @@ define([
var mct = new MCT();
mct.legacyRegistry = legacyRegistry;
mct.run = mct.start;
mct.run = function (domElement) {
if (!domElement) { domElement = document.body; }
var appDiv = document.createElement('div');
appDiv.setAttribute('ng-view', '');
appDiv.className = 'user-environ';
domElement.appendChild(appDiv);
mct.start();
};
mct.on('start', function () {
return new Main().run(legacyRegistry);
});

View File

@ -48,6 +48,7 @@ define([
"./src/directives/MCTSplitPane",
"./src/directives/MCTSplitter",
"./src/directives/MCTTree",
"./src/filters/ReverseFilter.js",
"text!./res/templates/bottombar.html",
"text!./res/templates/controls/action-button.html",
"text!./res/templates/controls/input-filter.html",
@ -96,6 +97,7 @@ define([
MCTSplitPane,
MCTSplitter,
MCTTree,
ReverseFilter,
bottombarTemplate,
actionButtonTemplate,
inputFilterTemplate,
@ -158,7 +160,7 @@ define([
],
"filters": [
{
"implementation": "filters/ReverseFilter.js",
"implementation": ReverseFilter,
"key": "reverse"
}
],

3
src/end.frag Normal file
View File

@ -0,0 +1,3 @@
return require('main');
}));

9
src/start.frag Normal file
View File

@ -0,0 +1,9 @@
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.MCT = factory();
}
}(this, function() {

13
test-api.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal Test</title>
<script src="dist/main.js"></script>
</head>
<body>
<script>
MCT.run();
</script>
</body>
</html>