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

omi v1.2.4 - support onInstalled method

This commit is contained in:
dntzhang 2017-04-04 10:17:27 +08:00
parent df79950f8b
commit 4eaf4a3def
27 changed files with 359 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dist/omi.js vendored
View File

@ -1,5 +1,5 @@
/*!
* Omi v1.2.2 By dntzhang
* Omi v1.2.4 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
@ -364,6 +364,7 @@ return /******/ (function(modules) { // webpackBootstrap
component._render(true);
component._childrenInstalled(component);
component.installed();
component._execInstalledHandlers();
return component;
};
@ -1123,11 +1124,13 @@ return /******/ (function(modules) { // webpackBootstrap
//this.BODY_ELEMENT = document.createElement('body')
this._preCSS = null;
this._omiGroupDataCounter = {};
this._omi_installedHandlers = null;
if (this._omi_server_rendering || isReRendering) {
this.install();
this._render(true);
this._childrenInstalled(this);
this.installed();
this._execInstalledHandlers();
}
}
@ -1137,6 +1140,21 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: 'installed',
value: function installed() {}
}, {
key: 'onInstalled',
value: function onInstalled(handler) {
if (!this._omi_installedHandlers) {
this._omi_installedHandlers = [];
}
this._omi_installedHandlers.push(handler);
}
}, {
key: '_execInstalledHandlers',
value: function _execInstalledHandlers() {
this._omi_installedHandlers && this._omi_installedHandlers.forEach(function (handler) {
handler();
});
}
}, {
key: 'uninstall',
value: function uninstall() {}
@ -1286,6 +1304,7 @@ return /******/ (function(modules) { // webpackBootstrap
this._omi_removed = false;
this.update();
this.installed();
this._execInstalledHandlers();
}
}, {
key: '_render',
@ -1440,6 +1459,7 @@ return /******/ (function(modules) { // webpackBootstrap
root.children.forEach(function (child) {
_this8._childrenInstalled(child);
child.installed();
child._execInstalledHandlers();
});
}
}, {

22
dist/omi.lite.js vendored
View File

@ -1,5 +1,5 @@
/*!
* Omi v1.2.2 By dntzhang
* Omi v1.2.4 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
@ -363,6 +363,7 @@ return /******/ (function(modules) { // webpackBootstrap
component._render(true);
component._childrenInstalled(component);
component.installed();
component._execInstalledHandlers();
return component;
};
@ -507,11 +508,13 @@ return /******/ (function(modules) { // webpackBootstrap
//this.BODY_ELEMENT = document.createElement('body')
this._preCSS = null;
this._omiGroupDataCounter = {};
this._omi_installedHandlers = null;
if (this._omi_server_rendering || isReRendering) {
this.install();
this._render(true);
this._childrenInstalled(this);
this.installed();
this._execInstalledHandlers();
}
}
@ -521,6 +524,21 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: 'installed',
value: function installed() {}
}, {
key: 'onInstalled',
value: function onInstalled(handler) {
if (!this._omi_installedHandlers) {
this._omi_installedHandlers = [];
}
this._omi_installedHandlers.push(handler);
}
}, {
key: '_execInstalledHandlers',
value: function _execInstalledHandlers() {
this._omi_installedHandlers && this._omi_installedHandlers.forEach(function (handler) {
handler();
});
}
}, {
key: 'uninstall',
value: function uninstall() {}
@ -670,6 +688,7 @@ return /******/ (function(modules) { // webpackBootstrap
this._omi_removed = false;
this.update();
this.installed();
this._execInstalledHandlers();
}
}, {
key: '_render',
@ -824,6 +843,7 @@ return /******/ (function(modules) { // webpackBootstrap
root.children.forEach(function (child) {
_this8._childrenInstalled(child);
child.installed();
child._execInstalledHandlers();
});
}
}, {

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

File diff suppressed because one or more lines are too long

7
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.2.3",
"version": "1.2.4",
"description": "Open and modern framework for building user interfaces.",
"main": "dist/omi.js",
"types": "index.d.ts",

35
plugins/omi-router/README.md
View File

@ -37,22 +37,9 @@ import OmiRouter from 'omi-router'
## 开始
先来看下HTML结构:
``` html
<div id="links">
</div>
<div id="view">
</div>
```
看下javascript代码:
```js
import Omi from 'omi'
import OmiRouter from '../../index.js'
import OmiRouter from 'omi-router'
import Home from './home.js'
import About from './about.js'
@ -60,7 +47,6 @@ import User from './user.js'
import UserList from './user-list.js'
class App extends Omi.Component {
install() {
OmiRouter.init({
routes: [
@ -70,23 +56,26 @@ class App extends Omi.Component {
{path: '/user/:name/category/:category', component: User}
],
renderTo: "#view",
defaultRoute: '/'
defaultRoute: '/',
root: this
})
}
render() {
return `
<ul>
<li><a omi-router to="/" >Home</a></li>
<li><a omi-router to="/about" >About</a></li>
<li><a omi-router to="/user-list" >UserList</a></li>
</ul>
<div>
<ul>
<li><a omi-router to="/" >Home</a></li>
<li><a omi-router to="/about" >About</a></li>
<li><a omi-router to="/user-list" >UserList</a></li>
</ul>
<div id="view"> </div>
</div>
`
}
}
Omi.render(new App(),"#links")
Omi.render(new App(),"#__omi")
```
这里详细说下 `OmiRouter.init` 传递的配置参数的意义:

6
plugins/omi-router/dist/omi-router.js vendored
View File

@ -1,5 +1,5 @@
/*!
* OmiRouter v0.1.1 By dntzhang
* OmiRouter v0.1.2 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
@ -99,7 +99,9 @@ return /******/ (function(modules) { // webpackBootstrap
var hash = window.location.hash.replace('#', '')
hashMapping(hash ? hash : routerOption.defaultRoute, renderTo)
if(hash) {
render()
option.root.onInstalled(function(){
render()
})
}
}

4
plugins/omi-router/dist/omi-router.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -95,25 +95,26 @@
_index2.default.init({
routes: [{ path: '/', component: _home2.default }, { path: '/about', component: _about2.default }, { path: '/user-list', component: _userList2.default }, { path: '/user/:name/category/:category', component: _user2.default }],
renderTo: "#view",
defaultRoute: '/'
defaultRoute: '/',
root: this
});
}
}, {
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 ';
return '\n ul{\n border-bottom: 1px solid #ccc;\n padding-bottom:5px;\n }\n li{\n display:inline-block;\n }\n #view li{\n display:block;\n }\n #view ul{\n border-width: 0px;\n }\n ';
}
}, {
key: 'render',
value: function render() {
return '\n <ul>\n <li><a omi-router to="/" >Home</a></li>\n <li><a omi-router to="/about" >About</a></li>\n <li><a omi-router to="/user-list" >UserList</a></li>\n </ul>\n ';
return '\n <div>\n <ul>\n <li><a omi-router to="/" >Home</a></li>\n <li><a omi-router to="/about" >About</a></li>\n <li><a omi-router to="/user-list" >UserList</a></li>\n </ul>\n <div id="view">\n\n </div>\n </div>\n ';
}
}]);
return App;
}(_omi2.default.Component);
_omi2.default.render(new App(), "#links");
_omi2.default.render(new App(), "#__omi");
/***/ },
/* 1 */
@ -124,7 +125,7 @@
var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
/*!
* Omi v1.2.0 By dntzhang
* Omi v1.2.3 By dntzhang
* Github: https://github.com/AlloyTeam/omi
* MIT Licensed.
*/
@ -491,6 +492,7 @@
component._render(true);
component._childrenInstalled(component);
component.installed();
component._execInstalledHandlers();
return component;
};
@ -1270,11 +1272,13 @@
//this.BODY_ELEMENT = document.createElement('body')
this._preCSS = null;
this._omiGroupDataCounter = {};
this._omi_installedHandlers = null;
if (this._omi_server_rendering || isReRendering) {
this.install();
this._render(true);
this._childrenInstalled(this);
this.installed();
this._execInstalledHandlers();
}
}
@ -1284,6 +1288,21 @@
}, {
key: 'installed',
value: function installed() {}
}, {
key: 'onInstalled',
value: function onInstalled(handler) {
if (!this._omi_installedHandlers) {
this._omi_installedHandlers = [];
}
this._omi_installedHandlers.push(handler);
}
}, {
key: '_execInstalledHandlers',
value: function _execInstalledHandlers() {
this._omi_installedHandlers && this._omi_installedHandlers.forEach(function (handler) {
handler();
});
}
}, {
key: 'uninstall',
value: function uninstall() {}
@ -1433,6 +1452,7 @@
this._omi_removed = false;
this.update();
this.installed();
this._execInstalledHandlers();
}
}, {
key: '_render',
@ -1587,6 +1607,7 @@
root.children.forEach(function (child) {
_this8._childrenInstalled(child);
child.installed();
child._execInstalledHandlers();
});
}
}, {
@ -1890,7 +1911,7 @@
/* 4 */
/***/function (module, exports, __webpack_require__) {
"use strict";
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
@ -1901,12 +1922,15 @@
var _omi2 = _interopRequireDefault(_omi);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { "default": obj };
return obj && obj.__esModule ? obj : { 'default': obj };
}
//many thanks to https://github.com/thomaspark/scoper/
function scoper(css, prefix) {
var re = new RegExp("([^\r\n,{}:]+)(:[^\r\n,{}]+)?(,(?=[^{]*{)|\s*{)", "g");
//https://www.w3.org/TR/css-syntax-3/#lexical
css = css.replace(/\/\*[^*]*\*+([^/][^*]*\*+)*\//g, '');
var re = new RegExp("([^\r\n,{}:]+)(:[^\r\n,{}]+)?(,(?=[^{}]*{)|\s*{)", "g");
/**
* Example:
*
@ -1921,10 +1945,6 @@
g2 = "";
}
if (g0.indexOf(';base64') !== -1 || g0.indexOf('/') !== -1) {
return g0;
}
if (g1.match(/^\s*(@media|@keyframes|to|from|@font-face)/)) {
return g1 + g2 + g3;
}
@ -1938,7 +1958,7 @@
}
function addStyle(cssText, id) {
var ele = document.getElementById(_omi2["default"].STYLEPREFIX + id),
var ele = document.getElementById(_omi2['default'].STYLEPREFIX + id),
head = document.getElementsByTagName('head')[0];
if (ele && ele.parentNode === head) {
head.removeChild(ele);
@ -1947,7 +1967,7 @@
var someThingStyles = document.createElement('style');
head.appendChild(someThingStyles);
someThingStyles.setAttribute('type', 'text/css');
someThingStyles.setAttribute('id', _omi2["default"].STYLEPREFIX + id);
someThingStyles.setAttribute('id', _omi2['default'].STYLEPREFIX + id);
if (!!window.ActiveXObject) {
someThingStyles.styleSheet.cssText = cssText;
} else {
@ -1955,7 +1975,7 @@
}
}
exports["default"] = {
exports['default'] = {
scoper: scoper,
addStyle: addStyle
};
@ -3165,7 +3185,9 @@
var hash = window.location.hash.replace('#', '');
hashMapping(hash ? hash : routerOption.defaultRoute, renderTo);
if (hash) {
render();
option.root.onInstalled(function () {
render();
});
}
};

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

@ -7,10 +7,7 @@
</head>
<body>
<h2>omi-router演示</h2>
<div id="links">
</div>
<div id="view">
<div id="__omi">
</div>

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

@ -17,7 +17,8 @@ class App extends Omi.Component {
{path: '/user/:name/category/:category', component: User}
],
renderTo: "#view",
defaultRoute: '/'
defaultRoute: '/',
root: this
})
}
@ -30,19 +31,30 @@ class App extends Omi.Component {
li{
display:inline-block;
}
#view li{
display:block;
}
#view ul{
border-width: 0px;
}
`
}
render() {
return `
<ul>
<li><a omi-router to="/" >Home</a></li>
<li><a omi-router to="/about" >About</a></li>
<li><a omi-router to="/user-list" >UserList</a></li>
</ul>
<div>
<ul>
<li><a omi-router to="/" >Home</a></li>
<li><a omi-router to="/about" >About</a></li>
<li><a omi-router to="/user-list" >UserList</a></li>
</ul>
<div id="view">
</div>
</div>
`
}
}
Omi.render(new App(),"#links")
Omi.render(new App(),"#__omi")

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

@ -38,7 +38,9 @@
var hash = window.location.hash.replace('#', '')
hashMapping(hash ? hash : routerOption.defaultRoute, renderTo)
if(hash) {
render()
option.root.onInstalled(function(){
render()
})
}
}

2
plugins/omi-router/package.json
View File

@ -1,6 +1,6 @@
{
"name": "omi-router",
"version": "0.1.1",
"version": "0.1.2",
"description": "Router for Omi.",
"main": "omi-router.js",
"scripts": {

17
src/component.js
View File

@ -43,11 +43,13 @@ class Component {
//this.BODY_ELEMENT = document.createElement('body')
this._preCSS = null
this._omiGroupDataCounter = {}
this._omi_installedHandlers = null
if (this._omi_server_rendering || isReRendering) {
this.install()
this._render(true)
this._childrenInstalled(this)
this.installed()
this._execInstalledHandlers()
}
}
@ -57,6 +59,19 @@ class Component {
installed() {
}
onInstalled(handler){
if(!this._omi_installedHandlers){
this._omi_installedHandlers = []
}
this._omi_installedHandlers.push(handler)
}
_execInstalledHandlers(){
this._omi_installedHandlers&&this._omi_installedHandlers.forEach((handler)=>{
handler()
})
}
uninstall(){
}
@ -195,6 +210,7 @@ class Component {
this._omi_removed = false
this.update()
this.installed()
this._execInstalledHandlers()
}
_render(isFirst, isSelf) {
@ -332,6 +348,7 @@ class Component {
root.children.forEach((child)=>{
this._childrenInstalled(child)
child.installed()
child._execInstalledHandlers()
})
}

1
src/omi.js
View File

@ -239,6 +239,7 @@ Omi.render = function(component , renderTo , incrementOrOption){
component._render(true)
component._childrenInstalled(component)
component.installed()
component._execInstalledHandlers()
return component
}

33
ssr/dist/index.html vendored
View File

File diff suppressed because one or more lines are too long

13
ssr/example/spa/src/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

13
ssr/example/spa/src/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

18
ssr/example/spa/src/index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title></title>
</head>
<body>
<h2>omi-router演示</h2>
<div id="links">
</div>
<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>
</html>

60
ssr/example/spa/src/main.js Normal file
View File

@ -0,0 +1,60 @@
import Omi from 'omi'
import OmiRouter from 'omi-router'
import Home from './home.js'
import About from './about.js'
import User from './user.js'
import UserList from './user-list.js'
class App extends Omi.Component {
install() {
OmiRouter.init({
routes: [
{path: '/', component: Home},
{path: '/about', component: About},
{path: '/user-list', component: UserList},
{path: '/user/:name/category/:category', component: User}
],
renderTo: "#view",
defaultRoute: '/',
root: this
})
}
style(){
return `
ul{
border-bottom: 1px solid #ccc;
padding-bottom:5px;
}
li{
display:inline-block;
}
#view li{
display:block;
}
#view ul{
border-width: 0px;
}
`
}
render() {
return `
<div>
<ul>
<li><a omi-router to="/" >Home</a></li>
<li><a omi-router to="/about" >About</a></li>
<li><a omi-router to="/user-list" >UserList</a></li>
</ul>
<div id="view">
</div>
</div>
`
}
}
Omi.render(new App(),"body")

19
ssr/example/spa/src/user-list.js Normal file
View File

@ -0,0 +1,19 @@
import Omi from 'omi';
class UserList extends Omi.Component {
render() {
return `
<ul>
<li><a omi-router to="/user/yanagao/category/js" >yanagao</a></li>
<li><a omi-router to="/user/vorshen/category/html" >vorshen</a></li>
<li><a omi-router to="/user/dntzhang/category/css" >dntzhang</a></li>
</ul>
`;
}
}
Omi.tag('UserList',UserList)
export default UserList

45
ssr/example/spa/src/user.js Normal file
View File

@ -0,0 +1,45 @@
import Omi from 'omi'
class User extends Omi.Component {
beforeRender(){
let params = this.$store.$route.params
this.data.name = params.name
this.data.category = params.category
this.info = this.queryInfo(this.data.name)
this.data.age = this.info.age
this.data.sex = this.info.sex
}
queryInfo(name) {
this.mockData = {
'yanagao': {age: 18, sex: 'female'},
'vorshen': {age: 20, sex: 'male'},
'dntzhang': {age: 22, sex: 'male'}
}
return this.mockData[name]
}
back(){
history.back()
}
render() {
return `
<div >
<button onclick="back">back</button>
<ul>
<li>name:{{name}}</li>
<li>age:{{age}}</li>
<li>sex:{{sex}}</li>
<li>category:{{category}}</li>
</ul>
</div>
`
}
}
Omi.tag('User',User)
export default User

3
ssr/package.json
View File

@ -7,7 +7,8 @@
"dist": "babel-node ./src/build.js"
},
"dependencies": {
"omi": "latest"
"omi": "latest",
"omi-router": "latest"
},
"devDependencies": {
"babel-core": "^6.22.1",

8
ssr/src/build.js
View File

@ -59,14 +59,16 @@ function cpLite(css, html) {
}
const content = fs.readFileSync('index.lite.js', 'utf-8')
const newContent = JSON.stringify({ component: content })
const pos = newContent.lastIndexOf('body')
let newContent = JSON.stringify({ component: content })
newContent = newContent.replace(/(\.render\([\s\S]*?\\['|"])(body)(\\['|"]\))/,()=>{
return RegExp.$1 + '#__omi' +RegExp.$3;
})
if (!fs.existsSync('dist')) {
fs.mkdirSync('dist')
}
let script = fs.readFileSync('./src/loadjs.js', 'utf-8');
fs.writeFileSync('dist/index.html', `<html><head>`+css+`</head><body>`+html+`<script>var __OMI_DATA__=` + ( newContent.substring(0, pos) + "#__omi" + newContent.substring(pos+4,newContent.length) ) + `</script><script>`+script+`</script></body></html>`, 'utf-8')
fs.writeFileSync('dist/index.html', `<html><head>`+css+`</head><body>`+html+`<script>var __OMI_DATA__=` + newContent + `</script><script>`+script+`</script></body></html>`, 'utf-8')
fs.unlinkSync('index.lite.js')
})
}

2
ssr/src/loadjs.js
View File

@ -1,6 +1,6 @@
(function () {
load('https://unpkg.com/omi@1.2.2/dist/omi.min.js',function (err) {
load('https://unpkg.com/omi@1.2.4/dist/omi.min.js',function (err) {
eval(__OMI_DATA__.component)
//diff

2
ssr/webpack.config.js
View File

@ -11,7 +11,7 @@ var ENV = process.env.npm_lifecycle_event;
var config = {
entry: {
index: './example/simple/main.js'
index: './example/spa/src/main.js'
},
//dist命令使用下面的config
//output: {

35
tutorial/omi-router-release.md
View File

@ -37,22 +37,9 @@ import OmiRouter from 'omi-router'
## 开始
先来看下HTML结构:
``` html
<div id="links">
</div>
<div id="view">
</div>
```
看下javascript代码:
```js
import Omi from 'omi'
import OmiRouter from '../../index.js'
import OmiRouter from 'omi-router'
import Home from './home.js'
import About from './about.js'
@ -60,7 +47,6 @@ import User from './user.js'
import UserList from './user-list.js'
class App extends Omi.Component {
install() {
OmiRouter.init({
routes: [
@ -70,23 +56,26 @@ class App extends Omi.Component {
{path: '/user/:name/category/:category', component: User}
],
renderTo: "#view",
defaultRoute: '/'
defaultRoute: '/',
root: this
})
}
render() {
return `
<ul>
<li><a omi-router to="/" >Home</a></li>
<li><a omi-router to="/about" >About</a></li>
<li><a omi-router to="/user-list" >UserList</a></li>
</ul>
<div>
<ul>
<li><a omi-router to="/" >Home</a></li>
<li><a omi-router to="/about" >About</a></li>
<li><a omi-router to="/user-list" >UserList</a></li>
</ul>
<div id="view"> </div>
</div>
`
}
}
Omi.render(new App(),"#links")
Omi.render(new App(),"#__omi")
```
这里详细说下 `OmiRouter.init` 传递的配置参数的意义: