DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

resolve the same component to generate multiple scoped CSS

This commit is contained in:
dntzhang 2017-03-28 18:56:46 +08:00
parent d51aa8ad77
commit b5d64696e9
13 changed files with 435 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -66,10 +66,10 @@ $ npm install omi
## CDN
* [https://unpkg.com/omi@1.1.7/dist/omi.min.js](https://unpkg.com/omi@1.1.7/dist/omi.min.js)
* [https://unpkg.com/omi@1.1.7/dist/omi.js](https://unpkg.com/omi@1.1.7/dist/omi.js)
* [https://unpkg.com/omi@1.1.7/dist/omi.lite.min.js](https://unpkg.com/omi@1.1.7/dist/omi.lite.min.js)
* [https://unpkg.com/omi@1.1.7/dist/omi.lite.js](https://unpkg.com/omi@1.1.7/dist/omi.lite.js)
* [https://unpkg.com/omi@1.1.8/dist/omi.min.js](https://unpkg.com/omi@1.1.8/dist/omi.min.js)
* [https://unpkg.com/omi@1.1.8/dist/omi.js](https://unpkg.com/omi@1.1.8/dist/omi.js)
* [https://unpkg.com/omi@1.1.8/dist/omi.lite.min.js](https://unpkg.com/omi@1.1.8/dist/omi.lite.min.js)
* [https://unpkg.com/omi@1.1.8/dist/omi.lite.js](https://unpkg.com/omi@1.1.8/dist/omi.lite.js)
## 感谢
@ -130,10 +130,10 @@ if using 'omi.lite.js' (without [mustache.js](https://github.com/janl/mustache.j
## CDN
* [https://unpkg.com/omi@1.1.7/dist/omi.min.js](https://unpkg.com/omi@1.1.7/dist/omi.min.js)
* [https://unpkg.com/omi@1.1.7/dist/omi.js](https://unpkg.com/omi@1.1.7/dist/omi.js)
* [https://unpkg.com/omi@1.1.7/dist/omi.lite.min.js](https://unpkg.com/omi@1.1.7/dist/omi.lite.min.js)
* [https://unpkg.com/omi@1.1.7/dist/omi.lite.js](https://unpkg.com/omi@1.1.7/dist/omi.lite.js)
* [https://unpkg.com/omi@1.1.8/dist/omi.min.js](https://unpkg.com/omi@1.1.8/dist/omi.min.js)
* [https://unpkg.com/omi@1.1.8/dist/omi.js](https://unpkg.com/omi@1.1.8/dist/omi.js)
* [https://unpkg.com/omi@1.1.8/dist/omi.lite.min.js](https://unpkg.com/omi@1.1.8/dist/omi.lite.min.js)
* [https://unpkg.com/omi@1.1.8/dist/omi.lite.js](https://unpkg.com/omi@1.1.8/dist/omi.lite.js)
## Thanks

106
dist/omi.js vendored
View File

@ -1,5 +1,5 @@
/*!
* Omi v1.1.7 By dntzhang
* Omi v1.1.8 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
@ -110,6 +110,8 @@ return /******/ (function(modules) { // webpackBootstrap
Omi.STYLEPREFIX = "omi_style_";
Omi.STYLESCOPEDPREFIX = "omi_scoped_";
Omi.style = {};
Omi.componentConstructor = {};
//fix ie bug
@ -1088,8 +1090,10 @@ return /******/ (function(modules) { // webpackBootstrap
ignoreStoreData: false,
preventSelfUpdate: false,
selfDataFirst: false,
domDiffDisabled: false
domDiffDisabled: false,
scopedSelfCSS: false
}, option);
this._omi_scopedSelfCSS = componentOption.scopedSelfCSS;
this._omi_preventSelfUpdate = componentOption.preventSelfUpdate;
this._omi_domDiffDisabled = componentOption.domDiffDisabled;
this._omi_ignoreStoreData = componentOption.ignoreStoreData;
@ -1508,15 +1512,19 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_generateHTMLCSS',
value: function _generateHTMLCSS() {
this.CSS = (this.style() || '').replace(/<\/?style>/g, '');
var shareAttr = this.___omi_constructor_name ? _omi2['default'].STYLESCOPEDPREFIX + this.___omi_constructor_name.toLowerCase() : this._omi_scoped_attr;
if (this.CSS) {
this.CSS = _style2['default'].scoper(this.CSS, "[" + this._omi_scoped_attr + "]");
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
_style2['default'].addStyle(this.CSS, this.id);
this._preCSS = this.CSS;
if (this._omi_scopedSelfCSS || !_omi2['default'].style[shareAttr]) {
this.CSS = _style2['default'].scoper(this.CSS, this._omi_scopedSelfCSS ? "[" + this._omi_scoped_attr + "]" : "[" + shareAttr + "]");
_omi2['default'].style[shareAttr] = this.CSS;
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
_style2['default'].addStyle(this.CSS, this.id);
this._preCSS = this.CSS;
}
}
}
var tpl = this.render();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), this._omi_scoped_attr).trim();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), this._omi_scoped_attr, shareAttr).trim();
if (this._omi_server_rendering) {
this.HTML = '\r\n<style id="' + _omi2['default'].STYLEPREFIX + this.id + '">\r\n' + this.CSS + '\r\n</style>\r\n' + this.HTML;
this.HTML += '\r\n<input type="hidden" data-omi-id="' + this.id + '" class="' + _omi2['default'].STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n';
@ -1524,16 +1532,22 @@ return /******/ (function(modules) { // webpackBootstrap
}
}, {
key: '_scopedAttr',
value: function _scopedAttr(html, id) {
value: function _scopedAttr(html, id, shareAtrr) {
var _this9 = this;
return html.replace(/<[^/]([A-Za-z]*)[^>]*>/g, function (m) {
var str = m.split(" ")[0].replace(">", "");
return m.replace(str, str + " " + id);
if (_this9._omi_scopedSelfCSS || !_this9.___omi_constructor_name) {
return m.replace(str, str + " " + id);
} else {
return m.replace(str, str + " " + id + " " + shareAtrr);
}
});
}
}, {
key: '_getDataset',
value: function _getDataset(childStr) {
var _this9 = this;
var _this10 = this;
var json = (0, _html2json2['default'])(childStr);
var attr = json.child[0].attr;
@ -1541,20 +1555,20 @@ return /******/ (function(modules) { // webpackBootstrap
Object.keys(attr).forEach(function (key) {
var value = attr[key];
if (key.indexOf('on') === 0) {
var handler = _this9.parent[value];
var handler = _this10.parent[value];
if (handler) {
baseData[key] = handler.bind(_this9.parent);
baseData[key] = handler.bind(_this10.parent);
}
} else if (key.indexOf('data-') === 0) {
_this9._dataset[_this9._capitalize(key.replace('data-', ''))] = value;
_this10._dataset[_this10._capitalize(key.replace('data-', ''))] = value;
} else if (key.indexOf(':data-') === 0) {
_this9._dataset[_this9._capitalize(key.replace(':data-', ''))] = eval('(' + value + ')');
_this10._dataset[_this10._capitalize(key.replace(':data-', ''))] = eval('(' + value + ')');
} else if (key === ':data') {
_this9._dataset = eval('(' + value + ')');
_this10._dataset = eval('(' + value + ')');
} else if (key === 'data') {
_this9._dataset = _this9._extractPropertyFromString(value, _this9.parent);
_this10._dataset = _this10._extractPropertyFromString(value, _this10.parent);
} else if (key === 'group-data') {
_this9._dataset = _this9._extractPropertyFromString(value, _this9.parent)[_this9._omi_groupDataIndex];
_this10._dataset = _this10._extractPropertyFromString(value, _this10.parent)[_this10._omi_groupDataIndex];
}
});
@ -1583,30 +1597,6 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_extractChildrenString',
value: function _extractChildrenString(child) {
var _this10 = this;
if (_omi2['default'].customTags.length === 0) return;
child.HTML = this._replaceTags(_omi2['default'].customTags, child.HTML);
var arr = child.HTML.match(/<child[^>][\s\S]*?tag=['|"](\S*)['|"][\s\S]*?><\/child>/g);
if (arr) {
arr.forEach(function (childStr, i) {
var json = (0, _html2json2['default'])(childStr);
var attr = json.child[0].attr;
var name = attr.tag;
delete attr.tag;
var cmi = _this10.children[i];
if (cmi && cmi.___omi_constructor_name === name) {
cmi._omiChildStr = childStr;
}
});
}
}
}, {
key: '_extractChildren',
value: function _extractChildren(child) {
var _this11 = this;
if (_omi2['default'].customTags.length === 0) return;
@ -1622,6 +1612,30 @@ return /******/ (function(modules) { // webpackBootstrap
var name = attr.tag;
delete attr.tag;
var cmi = _this11.children[i];
if (cmi && cmi.___omi_constructor_name === name) {
cmi._omiChildStr = childStr;
}
});
}
}
}, {
key: '_extractChildren',
value: function _extractChildren(child) {
var _this12 = this;
if (_omi2['default'].customTags.length === 0) return;
child.HTML = this._replaceTags(_omi2['default'].customTags, child.HTML);
var arr = child.HTML.match(/<child[^>][\s\S]*?tag=['|"](\S*)['|"][\s\S]*?><\/child>/g);
if (arr) {
arr.forEach(function (childStr, i) {
var json = (0, _html2json2['default'])(childStr);
var attr = json.child[0].attr;
var name = attr.tag;
delete attr.tag;
var cmi = _this12.children[i];
//if not first time to invoke _extractChildren method
if (cmi && cmi.___omi_constructor_name === name) {
cmi._omiChildStr = childStr;
@ -1654,15 +1668,15 @@ return /******/ (function(modules) { // webpackBootstrap
child._omiGroupDataCounter[value] = 0;
}
groupDataIndex = child._omiGroupDataCounter[value];
dataset = _this11._extractPropertyFromString(value, child)[groupDataIndex];
dataset = _this12._extractPropertyFromString(value, child)[groupDataIndex];
} else if (key.indexOf('data-') === 0) {
dataset[_this11._capitalize(key.replace('data-', ''))] = value;
dataset[_this12._capitalize(key.replace('data-', ''))] = value;
} else if (key.indexOf(':data-') === 0) {
dataset[_this11._capitalize(key.replace(':data-', ''))] = eval('(' + value + ')');
dataset[_this12._capitalize(key.replace(':data-', ''))] = eval('(' + value + ')');
} else if (key === ':data') {
dataset = eval('(' + value + ')');
} else if (key === 'data') {
dataset = _this11._extractPropertyFromString(value, child);
dataset = _this12._extractPropertyFromString(value, child);
} else if (key === 'preventSelfUpdate' || key === 'psu') {
_omi_option.preventSelfUpdate = true;
} else if (key === 'selfDataFirst' || key === 'sdf') {
@ -1671,6 +1685,8 @@ return /******/ (function(modules) { // webpackBootstrap
_omi_option.domDiffDisabled = true;
} else if (key === 'ignoreStoreData' || key === 'isd') {
_omi_option.ignoreStoreData = true;
} else if (key === 'scopedSelfCSS' || key === 'ssc') {
_omi_option.scopedSelfCSS = true;
}
});

106
dist/omi.lite.js vendored
View File

@ -1,5 +1,5 @@
/*!
* Omi v1.1.7 By dntzhang
* Omi v1.1.8 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
@ -109,6 +109,8 @@ return /******/ (function(modules) { // webpackBootstrap
Omi.STYLEPREFIX = "omi_style_";
Omi.STYLESCOPEDPREFIX = "omi_scoped_";
Omi.style = {};
Omi.componentConstructor = {};
//fix ie bug
@ -472,8 +474,10 @@ return /******/ (function(modules) { // webpackBootstrap
ignoreStoreData: false,
preventSelfUpdate: false,
selfDataFirst: false,
domDiffDisabled: false
domDiffDisabled: false,
scopedSelfCSS: false
}, option);
this._omi_scopedSelfCSS = componentOption.scopedSelfCSS;
this._omi_preventSelfUpdate = componentOption.preventSelfUpdate;
this._omi_domDiffDisabled = componentOption.domDiffDisabled;
this._omi_ignoreStoreData = componentOption.ignoreStoreData;
@ -892,15 +896,19 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_generateHTMLCSS',
value: function _generateHTMLCSS() {
this.CSS = (this.style() || '').replace(/<\/?style>/g, '');
var shareAttr = this.___omi_constructor_name ? _omi2['default'].STYLESCOPEDPREFIX + this.___omi_constructor_name.toLowerCase() : this._omi_scoped_attr;
if (this.CSS) {
this.CSS = _style2['default'].scoper(this.CSS, "[" + this._omi_scoped_attr + "]");
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
_style2['default'].addStyle(this.CSS, this.id);
this._preCSS = this.CSS;
if (this._omi_scopedSelfCSS || !_omi2['default'].style[shareAttr]) {
this.CSS = _style2['default'].scoper(this.CSS, this._omi_scopedSelfCSS ? "[" + this._omi_scoped_attr + "]" : "[" + shareAttr + "]");
_omi2['default'].style[shareAttr] = this.CSS;
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
_style2['default'].addStyle(this.CSS, this.id);
this._preCSS = this.CSS;
}
}
}
var tpl = this.render();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), this._omi_scoped_attr).trim();
this.HTML = this._scopedAttr(_omi2['default'].template(tpl ? tpl : "", this.data), this._omi_scoped_attr, shareAttr).trim();
if (this._omi_server_rendering) {
this.HTML = '\r\n<style id="' + _omi2['default'].STYLEPREFIX + this.id + '">\r\n' + this.CSS + '\r\n</style>\r\n' + this.HTML;
this.HTML += '\r\n<input type="hidden" data-omi-id="' + this.id + '" class="' + _omi2['default'].STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n';
@ -908,16 +916,22 @@ return /******/ (function(modules) { // webpackBootstrap
}
}, {
key: '_scopedAttr',
value: function _scopedAttr(html, id) {
value: function _scopedAttr(html, id, shareAtrr) {
var _this9 = this;
return html.replace(/<[^/]([A-Za-z]*)[^>]*>/g, function (m) {
var str = m.split(" ")[0].replace(">", "");
return m.replace(str, str + " " + id);
if (_this9._omi_scopedSelfCSS || !_this9.___omi_constructor_name) {
return m.replace(str, str + " " + id);
} else {
return m.replace(str, str + " " + id + " " + shareAtrr);
}
});
}
}, {
key: '_getDataset',
value: function _getDataset(childStr) {
var _this9 = this;
var _this10 = this;
var json = (0, _html2json2['default'])(childStr);
var attr = json.child[0].attr;
@ -925,20 +939,20 @@ return /******/ (function(modules) { // webpackBootstrap
Object.keys(attr).forEach(function (key) {
var value = attr[key];
if (key.indexOf('on') === 0) {
var handler = _this9.parent[value];
var handler = _this10.parent[value];
if (handler) {
baseData[key] = handler.bind(_this9.parent);
baseData[key] = handler.bind(_this10.parent);
}
} else if (key.indexOf('data-') === 0) {
_this9._dataset[_this9._capitalize(key.replace('data-', ''))] = value;
_this10._dataset[_this10._capitalize(key.replace('data-', ''))] = value;
} else if (key.indexOf(':data-') === 0) {
_this9._dataset[_this9._capitalize(key.replace(':data-', ''))] = eval('(' + value + ')');
_this10._dataset[_this10._capitalize(key.replace(':data-', ''))] = eval('(' + value + ')');
} else if (key === ':data') {
_this9._dataset = eval('(' + value + ')');
_this10._dataset = eval('(' + value + ')');
} else if (key === 'data') {
_this9._dataset = _this9._extractPropertyFromString(value, _this9.parent);
_this10._dataset = _this10._extractPropertyFromString(value, _this10.parent);
} else if (key === 'group-data') {
_this9._dataset = _this9._extractPropertyFromString(value, _this9.parent)[_this9._omi_groupDataIndex];
_this10._dataset = _this10._extractPropertyFromString(value, _this10.parent)[_this10._omi_groupDataIndex];
}
});
@ -967,30 +981,6 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_extractChildrenString',
value: function _extractChildrenString(child) {
var _this10 = this;
if (_omi2['default'].customTags.length === 0) return;
child.HTML = this._replaceTags(_omi2['default'].customTags, child.HTML);
var arr = child.HTML.match(/<child[^>][\s\S]*?tag=['|"](\S*)['|"][\s\S]*?><\/child>/g);
if (arr) {
arr.forEach(function (childStr, i) {
var json = (0, _html2json2['default'])(childStr);
var attr = json.child[0].attr;
var name = attr.tag;
delete attr.tag;
var cmi = _this10.children[i];
if (cmi && cmi.___omi_constructor_name === name) {
cmi._omiChildStr = childStr;
}
});
}
}
}, {
key: '_extractChildren',
value: function _extractChildren(child) {
var _this11 = this;
if (_omi2['default'].customTags.length === 0) return;
@ -1006,6 +996,30 @@ return /******/ (function(modules) { // webpackBootstrap
var name = attr.tag;
delete attr.tag;
var cmi = _this11.children[i];
if (cmi && cmi.___omi_constructor_name === name) {
cmi._omiChildStr = childStr;
}
});
}
}
}, {
key: '_extractChildren',
value: function _extractChildren(child) {
var _this12 = this;
if (_omi2['default'].customTags.length === 0) return;
child.HTML = this._replaceTags(_omi2['default'].customTags, child.HTML);
var arr = child.HTML.match(/<child[^>][\s\S]*?tag=['|"](\S*)['|"][\s\S]*?><\/child>/g);
if (arr) {
arr.forEach(function (childStr, i) {
var json = (0, _html2json2['default'])(childStr);
var attr = json.child[0].attr;
var name = attr.tag;
delete attr.tag;
var cmi = _this12.children[i];
//if not first time to invoke _extractChildren method
if (cmi && cmi.___omi_constructor_name === name) {
cmi._omiChildStr = childStr;
@ -1038,15 +1052,15 @@ return /******/ (function(modules) { // webpackBootstrap
child._omiGroupDataCounter[value] = 0;
}
groupDataIndex = child._omiGroupDataCounter[value];
dataset = _this11._extractPropertyFromString(value, child)[groupDataIndex];
dataset = _this12._extractPropertyFromString(value, child)[groupDataIndex];
} else if (key.indexOf('data-') === 0) {
dataset[_this11._capitalize(key.replace('data-', ''))] = value;
dataset[_this12._capitalize(key.replace('data-', ''))] = value;
} else if (key.indexOf(':data-') === 0) {
dataset[_this11._capitalize(key.replace(':data-', ''))] = eval('(' + value + ')');
dataset[_this12._capitalize(key.replace(':data-', ''))] = eval('(' + value + ')');
} else if (key === ':data') {
dataset = eval('(' + value + ')');
} else if (key === 'data') {
dataset = _this11._extractPropertyFromString(value, child);
dataset = _this12._extractPropertyFromString(value, child);
} else if (key === 'preventSelfUpdate' || key === 'psu') {
_omi_option.preventSelfUpdate = true;
} else if (key === 'selfDataFirst' || key === 'sdf') {
@ -1055,6 +1069,8 @@ return /******/ (function(modules) { // webpackBootstrap
_omi_option.domDiffDisabled = true;
} else if (key === 'ignoreStoreData' || key === 'isd') {
_omi_option.ignoreStoreData = true;
} else if (key === 'scopedSelfCSS' || key === 'ssc') {
_omi_option.scopedSelfCSS = true;
}
});

4
dist/omi.lite.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
dist/omi.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "omi",
"version": "1.1.7",
"version": "1.1.8",
"description": "Open and modern framework for building user interfaces.",
"main": "dist/omi.js",
"scripts": {

13
plugins/omi-router/example/simple/about.js Normal file
View File

@ -0,0 +1,13 @@
import Omi from 'omi';
class About extends Omi.Component {
render() {
return `
<div >About</div>
`;
}
}
Omi.tag('About',About)
export default About

286
plugins/omi-router/example/simple/bundler.js
View File

@ -56,6 +56,18 @@
var _index2 = _interopRequireDefault(_index);
var _home = __webpack_require__(6);
var _home2 = _interopRequireDefault(_home);
var _about = __webpack_require__(7);
var _about2 = _interopRequireDefault(_about);
var _user = __webpack_require__(8);
var _user2 = _interopRequireDefault(_user);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -64,87 +76,26 @@
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Home = function (_Omi$Component) {
_inherits(Home, _Omi$Component);
var App = function (_Omi$Component) {
_inherits(App, _Omi$Component);
function Home() {
_classCallCheck(this, Home);
return _possibleConstructorReturn(this, (Home.__proto__ || Object.getPrototypeOf(Home)).apply(this, arguments));
}
_createClass(Home, [{
key: 'render',
value: function render() {
return '\n \t<div >Home</div>\n \t\t';
}
}]);
return Home;
}(_omi2.default.Component);
var About = function (_Omi$Component2) {
_inherits(About, _Omi$Component2);
function About() {
_classCallCheck(this, About);
return _possibleConstructorReturn(this, (About.__proto__ || Object.getPrototypeOf(About)).apply(this, arguments));
}
_createClass(About, [{
key: 'render',
value: function render() {
return '\n \t<div >About</div>\n \t\t';
}
}]);
return About;
}(_omi2.default.Component);
var User = function (_Omi$Component3) {
_inherits(User, _Omi$Component3);
function User() {
_classCallCheck(this, User);
return _possibleConstructorReturn(this, (User.__proto__ || Object.getPrototypeOf(User)).apply(this, arguments));
}
_createClass(User, [{
key: 'beforeRender',
value: function beforeRender() {
this.data.name = this.$store.data[1];
}
}, {
key: 'render',
value: function render() {
return '\n \t<div >{{name}}</div>\n \t\t';
}
}]);
return User;
}(_omi2.default.Component);
_omi2.default.tag('Home', Home);
_omi2.default.tag('About', About);
_omi2.default.tag('User', User);
_index2.default.init({
routes: [{ path: '/', component: Home }, { path: '/about', component: About }, { path: '/user/:name', component: User }],
renderTo: "#view"
});
var App = function (_Omi$Component4) {
_inherits(App, _Omi$Component4);
function App(data) {
function App() {
_classCallCheck(this, App);
return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, data));
return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments));
}
_createClass(App, [{
key: 'install',
value: function install() {
_index2.default.init({
routes: [{ path: '/', component: _home2.default }, { path: '/about', component: _about2.default }, { path: '/user/:name', component: _user2.default }],
renderTo: "#view"
});
_omi2.default.render(new _home2.default(), "#view");
}
}, {
key: 'style',
value: function style() {
return '\n ul{\n border-bottom: 1px solid #ccc;\n padding-bottom:5px;\n }\n li{\n display:inline-block;\n }\n ';
@ -159,7 +110,6 @@
return App;
}(_omi2.default.Component);
_omi2.default.render(new Home(), "#view");
_omi2.default.render(new App(), "#links");
/***/ },
@ -3133,16 +3083,19 @@
var OmiRouter = {};
var Omi = true ? __webpack_require__(1) : window.Omi;
var parser = __webpack_require__(4);
var parser = __webpack_require__(4),
routes = null,
renderTo = null;
OmiRouter.init = function (option) {
routes = option.routes;
renderTo = option.renderTo;
option.routes.forEach(function (route) {
route.reg = parser(route.path);
});
Omi.extendPlugin('omi-router', function (dom, instance) {
dom.setAttribute('href', '##');
dom.setAttribute('href', 'javascript:void(0)');
dom.addEventListener('click', function () {
var to = dom.getAttribute('to');
@ -3150,6 +3103,8 @@
option.routes.every(function (route) {
var arr = to.match(route.reg);
if (arr) {
//preIndex = index
pushState(to);
Omi.render(new route.component(), option.renderTo, {
store: { data: arr }
});
@ -3165,6 +3120,29 @@
delete Omi.plugins['omi-finger'];
};
window.addEventListener('hashchange', function () {
hashMapping(window.location.hash.replace('#', ''), renderTo);
}, false);
function hashMapping(to, renderTo) {
routes.every(function (route) {
var arr = to.match(route.reg);
if (arr) {
//preIndex = index
pushState(to);
Omi.render(new route.component(), renderTo, {
store: { data: arr }
});
return false;
}
return true;
});
}
function pushState(route) {
window.location.hash = route;
}
if (( false ? 'undefined' : _typeof(exports)) == "object") {
module.exports = OmiRouter;
} else if (true) {
@ -3176,10 +3154,6 @@
}
})();
//<2F>ı<EFBFBD>url
//֧<>ֺ<EFBFBD><D6BA><EFBFBD>
//dist<73><74><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
@ -3624,5 +3598,151 @@
return Object.prototype.toString.call(arr) == '[object Array]';
};
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _omi = __webpack_require__(1);
var _omi2 = _interopRequireDefault(_omi);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Home = function (_Omi$Component) {
_inherits(Home, _Omi$Component);
function Home() {
_classCallCheck(this, Home);
return _possibleConstructorReturn(this, (Home.__proto__ || Object.getPrototypeOf(Home)).apply(this, arguments));
}
_createClass(Home, [{
key: 'render',
value: function render() {
return '\n \t<div >Home</div>\n \t\t';
}
}]);
return Home;
}(_omi2.default.Component);
_omi2.default.tag('Home', Home);
exports.default = Home;
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _omi = __webpack_require__(1);
var _omi2 = _interopRequireDefault(_omi);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var About = function (_Omi$Component) {
_inherits(About, _Omi$Component);
function About() {
_classCallCheck(this, About);
return _possibleConstructorReturn(this, (About.__proto__ || Object.getPrototypeOf(About)).apply(this, arguments));
}
_createClass(About, [{
key: 'render',
value: function render() {
return '\n \t<div >About</div>\n \t\t';
}
}]);
return About;
}(_omi2.default.Component);
_omi2.default.tag('About', About);
exports.default = About;
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _omi = __webpack_require__(1);
var _omi2 = _interopRequireDefault(_omi);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var User = function (_Omi$Component) {
_inherits(User, _Omi$Component);
function User() {
_classCallCheck(this, User);
return _possibleConstructorReturn(this, (User.__proto__ || Object.getPrototypeOf(User)).apply(this, arguments));
}
_createClass(User, [{
key: 'beforeRender',
value: function beforeRender() {
this.data.name = this.$store.data[1];
}
}, {
key: 'render',
value: function render() {
return '\n \t<div >{{name}}</div>\n \t\t';
}
}]);
return User;
}(_omi2.default.Component);
_omi2.default.tag('User', User);
exports.default = User;
/***/ }
/******/ ]);

13
plugins/omi-router/example/simple/home.js Normal file
View File

@ -0,0 +1,13 @@
import Omi from 'omi';
class Home extends Omi.Component {
render() {
return `
<div >Home</div>
`;
}
}
Omi.tag('Home',Home)
export default Home

4
plugins/omi-router/example/simple/index.html
View File

@ -14,8 +14,8 @@
</div>
<a href="https://github.com/AlloyTeam/omi/tree/master/plugins/omi-finger" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="../../../../asset/github.png" style="width: 100px;" alt="" />
<a href="https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="../../../../asset/github.png" alt="" />
</a>
<script src="bundler.js"></script>
</body>

60
plugins/omi-router/example/simple/main.js
View File

@ -1,52 +1,23 @@
import Omi from 'omi';
import OmiRouter from '../../index.js';
class Home extends Omi.Component {
render() {
return `
<div >Home</div>
`;
}
}
class About extends Omi.Component {
render() {
return `
<div >About</div>
`;
}
}
class User extends Omi.Component {
beforeRender(){
this.data.name = this.$store.data[1]
}
render() {
return `
<div >{{name}}</div>
`;
}
}
Omi.tag('Home',Home)
Omi.tag('About',About)
Omi.tag('User',User)
OmiRouter.init({
routes : [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/user/:name', component: User },
],
renderTo:"#view"
});
import Home from './home.js';
import About from './about.js';
import User from './user.js';
class App extends Omi.Component {
constructor(data) {
super(data);
install(){
OmiRouter.init({
routes : [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/user/:name', component: User }
],
renderTo:"#view"
});
Omi.render(new Home(),"#view");
}
style(){
@ -73,5 +44,4 @@ class App extends Omi.Component {
}
Omi.render(new Home(),"#view");
Omi.render(new App(),"#links");

19
plugins/omi-router/example/simple/user.js Normal file
View File

@ -0,0 +1,19 @@
import Omi from 'omi';
class User extends Omi.Component {
beforeRender(){
this.data.name = this.$store.data[1]
}
render() {
return `
<div >{{name}}</div>
`;
}
}
Omi.tag('User',User)
export default User

43
plugins/omi-router/index.js
View File

@ -7,22 +7,24 @@
;(function () {
var OmiRouter = {};
var OmiRouter = {}
var Omi = typeof require === 'function'
? require('omi')
: window.Omi;
var parser = require('path-to-regexp');
: window.Omi
var parser = require('path-to-regexp'),
routes = null,
renderTo = null
OmiRouter.init = function (option) {
routes = option.routes
renderTo = option.renderTo
option.routes.forEach(function (route) {
route.reg = parser(route.path)
})
Omi.extendPlugin('omi-router', function (dom, instance) {
dom.setAttribute('href', '##')
dom.setAttribute('href', 'javascript:void(0)')
dom.addEventListener('click', function () {
var to = dom.getAttribute('to')
@ -30,6 +32,8 @@
option.routes.every(function (route) {
var arr = to.match(route.reg);
if (arr) {
//preIndex = index
pushState(to)
Omi.render(new route.component(), option.renderTo, {
store: {data: arr}
})
@ -37,9 +41,7 @@
}
return true
})
}, false)
})
}
@ -47,6 +49,29 @@
delete Omi.plugins['omi-finger']
}
window.addEventListener('hashchange', function() {
hashMapping(window.location.hash.replace('#',''), renderTo)
}, false);
function hashMapping(to,renderTo) {
routes.every(function (route) {
var arr = to.match(route.reg);
if (arr) {
//preIndex = index
pushState(to)
Omi.render(new route.component(), renderTo, {
store: {data: arr}
})
return false
}
return true
})
}
function pushState(route){
window.location.hash = route
}
if (typeof exports == "object") {
module.exports = OmiRouter
} else if (typeof define == "function" && define.amd) {
@ -57,4 +82,4 @@
window.OmiRouter = OmiRouter
}
})()
})()