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

omio - support staitc css

This commit is contained in:
dntzhang 2019-03-04 10:21:59 +08:00
parent c21c4954fb
commit feab3ce822
10 changed files with 61 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
README.CN.md
View File

@ -35,7 +35,7 @@
| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Omi 原生支持 tap 事件（omi v4.0.24+）|
| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Omi 官方手势库|
| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|丝般顺滑的触摸运动|
| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)|把 web components 渲染到 native，比如 IOS 、Android|
| [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)|预渲染骨架屏|
|[omi-i18n](https://github.com/i18next/omi-i18n)| Omi 国际化解决方案 |
| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) | 基于 [page.js](https://github.com/visionmedia/page.js) 的 Omi 路由|
@ -65,18 +65,6 @@
|-|-|
| ![Omi](./assets/omi-render.jpg) | ![React](./assets/react-render.jpg) |
## omi-mp
> 通过微信小程序开发和一键生成 Web 的 H5 SPA (基于 omi + [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router))
看下官方模板的转换例子：
| **Index** | **Logs** |
| ------------------------------- | ----------------------------------- |
|![](./assets/mp1.jpg)| ![](./assets/mp2.jpg)|
因为 Web 里拉取不到用户登录态，更换了用户头像和名称。
## 必须收藏的资源
* [你必须收藏 ES6 Spread Operator 技巧](https://github.com/Tencent/omi/blob/master/tutorial/spread-operator.cn.md)
@ -230,11 +218,11 @@ import { render, WeElement, define } from 'omi'
define('my-counter', class extends WeElement {
static observe = true
css () {
return `span{
color: red;
//也支持不加 static ，直接 css = ..
static css = `
span{
color: red;
}`
}
data = {
count: 1
@ -262,7 +250,7 @@ define('my-counter', class extends WeElement {
render(<my-counter />, 'body')
```
也可以手动调用 `this.update`，这样你就可以选择最佳的时机进行更新，而且能够兼容 IE8。
也可以手动调用 `this.update`，这样你就可以选择最佳的时机进行更新， 比如:
```js
import { render, WeElement, define } from 'omi'
@ -272,10 +260,10 @@ define('my-counter', class extends WeElement {
count: 1
}
//也可以直接传递字符串
css = `span{
static css = `
span{
color: red;
}`
}`
sub = () => {
this.data.count--
@ -436,6 +424,7 @@ $ npm run build # release
| **Template Type**| **Command**| **Describe**|
| ------------ | -----------| ----------------- |
|基础模板(v3.3.0+)|`omi init my-app`| 基础模板，支持 omi 和 omio(IE8+)|
|小程序模板(v3.3.5+)|`omi init-p my-app`| Omi 开发小程序 |
|支持预渲染快照骨架的模板|`omi init-snap my-app`| 基础模板，支持 omi 和 omio(IE8+)，内置预渲染|
|TypeScript Template(omi-cli v3.3.0+)|`omi init-ts my-app`|使用 TypeScript 的模板|
|Mobile Template|`omi init-weui my-app`| 使用了 weui 和 omi-router 的移动 web app 模板|

13
README.EN.md
View File

@ -215,11 +215,10 @@ define('my-counter', class extends WeElement {
count: 1
}
css () {
return `span{
color: red;
static css = `
span{
color: red;
}`
}
sub = () => {
this.data.count--
@ -253,10 +252,10 @@ define('my-counter', class extends WeElement {
count: 1
}
//You can also pass strings directly
css = `span{
static css = `
span{
color: red;
}`
}`
sub = () => {
this.data.count--

16
README.md
View File

@ -218,11 +218,11 @@ import { render, WeElement, define } from 'omi'
define('my-counter', class extends WeElement {
static observe = true
css () {
return `span{
color: red;
//也支持不加 static ，直接 css = ..
static css = `
span{
color: red;
}`
}
data = {
count: 1
@ -250,7 +250,7 @@ define('my-counter', class extends WeElement {
render(<my-counter />, 'body')
```
也可以手动调用 `this.update`，这样你就可以选择最佳的时机进行更新，而且能够兼容 IE8。
也可以手动调用 `this.update`，这样你就可以选择最佳的时机进行更新， 比如:
```js
import { render, WeElement, define } from 'omi'
@ -260,10 +260,10 @@ define('my-counter', class extends WeElement {
count: 1
}
//也可以直接传递字符串
css = `span{
static css = `
span{
color: red;
}`
}`
sub = () => {
this.data.count--

44
packages/omio/examples/simple/b.js
View File

@ -178,7 +178,7 @@
return to;
}
if (!Element.prototype.addEventListener) {
if (typeof Element !== 'undefined' && !Element.prototype.addEventListener) {
var runListeners = function runListeners(oEvent) {
if (!oEvent) {
oEvent = window.event;
@ -758,8 +758,8 @@
while (c = mounts.pop()) {
if (options.afterMount) options.afterMount(c);
if (c.installed) c.installed();
if (c.css) {
addStyleToHead(typeof c.css === 'function' ? c.css() : c.css, '_s' + getCtorName(c.constructor));
if (c.constructor.css || c.css) {
addStyleToHead(c.constructor.css ? c.constructor.css : typeof c.css === 'function' ? c.css() : c.css, '_s' + getCtorName(c.constructor));
}
}
}
@ -1415,7 +1415,7 @@
rendered = component.render(props, data, context);
//don't rerender
if (component.css) {
if (component.constructor.css || component.css) {
addScopedAttrStatic(rendered, '_s' + getCtorName(component.constructor));
}
@ -1855,13 +1855,13 @@
var tempCss = void 0;
if (opts.scopedCSS) {
if (c.css) {
var cssStr = typeof c.css === 'function' ? c.css() : c.css;
if (c.constructor.css || c.css) {
var cssStr = c.constructor.css ? c.constructor.css : typeof c.css === 'function' ? c.css() : c.css;
var cssAttr = '_s' + getCtorName(c.constructor);
tempCss = '<style type="text/css" id="' + cssAttr + '">' + scoper(cssStr, cssAttr) + '</style>';
}
if (c.css) {
addScopedAttrStatic(rendered, '_s' + getCtorName(c.constructor));
}
@ -2023,8 +2023,10 @@
getHost: getHost,
renderToString: renderToString
};
options.root.omi = Omi;
options.root.Omi.version = 'omio-1.3.5';
options.root.omi = options.root.Omi;
options.root.Omi.version = 'omio-1.3.7';
var _class2, _temp2;
function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -2044,7 +2046,7 @@
_class.prototype.render = function render$$1() {
//can get the parent's div style, can't get the h3's style
return Omi.h(
'div',
'span',
null,
Omi.h(
'h3',
@ -2058,29 +2060,29 @@
return _class;
}(Component));
define('my-app', function (_Component2) {
_inherits$1(_class3, _Component2);
define('my-app', (_temp2 = _class2 = function (_Component2) {
_inherits$1(_class2, _Component2);
function _class3() {
function _class2() {
var _temp, _this2, _ret;
_classCallCheck$2(this, _class3);
_classCallCheck$2(this, _class2);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this2 = _possibleConstructorReturn$1(this, _Component2.call.apply(_Component2, [this].concat(args))), _this2), _this2.css = 'div{\n font-size:30px;\n }', _this2.handleTap = function (e) {
return _ret = (_temp = (_this2 = _possibleConstructorReturn$1(this, _Component2.call.apply(_Component2, [this].concat(args))), _this2), _this2.handleTap = function (e) {
_this2.name = 'Hello Omi !';
_this2.update();
}, _temp), _possibleConstructorReturn$1(_this2, _ret);
}
_class3.prototype.install = function install() {
_class2.prototype.install = function install() {
this.name = 'Omi';
};
_class3.prototype.installed = function installed() {
_class2.prototype.installed = function installed() {
var _this3 = this;
setTimeout(function () {
@ -2089,7 +2091,7 @@
}, 1000);
};
_class3.prototype.render = function render$$1() {
_class2.prototype.render = function render$$1() {
return Omi.h(
'div',
null,
@ -2102,8 +2104,8 @@
);
};
return _class3;
}(Component));
return _class2;
}(Component), _class2.css = 'div{\n font-size:20px;\n }\n ', _temp2));
render(Omi.h('my-app', null), 'body');

2
packages/omio/examples/simple/b.js.map
View File

File diff suppressed because one or more lines are too long

9
packages/omio/examples/simple/main.js
View File

@ -3,15 +3,16 @@ import { define, render, Component } from '../../src/omi'
define('my-hello', class extends Component {
render() {
//can get the parent's div style, can't get the h3's style
return <div><h3> {this.props.name}</h3></div>
return <span><h3> {this.props.name}</h3></span>
}
})
define('my-app', class extends Component {
css = `div{
font-size:30px;
}`
static css = `div{
font-size:20px;
}
`
install() {
this.name = 'Omi'

8
packages/omio/src/render-to-string.js
View File

@ -94,13 +94,13 @@ export function renderToString(vnode, opts, store, isSvgMode, css) {
let tempCss
if(opts.scopedCSS){
if(c.css){
const cssStr = typeof c.css === 'function' ? c.css() : c.css
if (c.constructor.css || c.css) {
const cssStr = c.constructor.css ? c.constructor.css : (typeof c.css === 'function' ? c.css() : c.css)
const cssAttr = '_s' + getCtorName(c.constructor)
tempCss = `<style type="text/css" id="${cssAttr}">${scoper(cssStr, cssAttr)}</style>`
}
if (c.css) {
addScopedAttrStatic(
rendered,
'_s' + getCtorName(c.constructor)

2
packages/omio/src/vdom/component.js
View File

@ -148,7 +148,7 @@ export function renderComponent(component, opts, mountAll, isChild) {
rendered = component.render(props, data, context)
//don't rerender
if (component.css) {
if (component.constructor.css || component.css) {
addScopedAttrStatic(
rendered,
'_s' + getCtorName(component.constructor)

4
packages/omio/src/vdom/diff.js
View File

@ -26,8 +26,8 @@ export function flushMounts() {
while ((c = mounts.pop())) {
if (options.afterMount) options.afterMount(c)
if (c.installed) c.installed()
if(c.css){
addStyleToHead(typeof c.css === 'function' ? c.css() : c.css, '_s' + getCtorName(c.constructor))
if (c.constructor.css || c.css) {
addStyleToHead(c.constructor.css ? c.constructor.css : (typeof c.css === 'function' ? c.css() : c.css), '_s' + getCtorName(c.constructor))
}
}
}

2
packages/omio/test/browser/render-to-string.js
View File

@ -26,7 +26,7 @@ describe('render()', () => {
})
define('todo-app2', class extends WeElement {
css = 'h3 { color:red; }'
static css = 'h3 { color:red; }'
data = { items: [], text: '' }