Merge branch 'master' of https://github.com/Tencent/omi

README.CN.md

@@ -1,7 +1,7 @@
 [English](./README.md) | 简体中文 | [한국어](./README.KR.md)
 
 <p align="right">Omi <strong>v5.0.22</strong></p>
-<p align="right">Omio <strong>v1.3.4</strong></p>
+<p align="right">Omio <strong>v1.3.5</strong></p>
 <p align="center"><img src="./assets/omi-logo2019.svg" alt="omi" width="300"/></p>
 <h2 align="center">Omi - 下一代 Web 框架，去万物糟粕，合精华为一点点 JS</h2>
 <p align="center"><b>基于 Web Components 并使用 omio 兼容老浏览器(IE8+)</b></p>

README.KR.md

@@ -1,7 +1,7 @@
 [English](./README.md) | [简体中文](./README.CN.md) | 한국어
 
 <p align="right">Omi <strong>v5.0.22</strong></p>
-<p align="right">Omio <strong>v1.3.4</strong></p>
+<p align="right">Omio <strong>v1.3.5</strong></p>
 <p align="center"><img src="./assets/omi-logo2019.svg" alt="omi" width="300"/></p>
 <h2 align="center">Omi - Web Components를 사용한 차세대 웹 프레임워크. 구 버전 브라우저 지원(IE8+) by Omio. 4kb 경량의 자바스크립트 프레임워크. MVVM 하기 쉬움 </h2>
 

README.md

@@ -1,7 +1,7 @@
 English | [简体中文](./README.CN.md) | [한국어](./README.KR.md)
 
 <p align="right">Omi <strong>v5.0.22</strong></p>
-<p align="right">Omio <strong>v1.3.4</strong></p>
+<p align="right">Omio <strong>v1.3.5</strong></p>
 <p align="center"><img src="./assets/omi-logo2019.svg" alt="omi" width="300"/></p>
 <h2 align="center">Omi - Next generation web framework using web components with omio fallback(IE8+) in tiny js.</h2>
 

packages/omio/dist/omi.dev.js

@@ -1,5 +1,5 @@
 /**
- * omi v1.3.4  http://omijs.org
+ * omi v1.3.5  http://omijs.org
  * Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.
  * By dntzhang https://github.com/dntzhang
  * Github: https://github.com/Tencent/omi
@@ -1832,7 +1832,7 @@
   }
 
   /** The default export is an alias of `render()`. */
-  function renderToString(vnode, store, opts, isSvgMode) {
+  function renderToString(vnode, opts, store, isSvgMode, css) {
     if (vnode == null || typeof vnode === 'boolean') {
       return '';
     }
@@ -1841,7 +1841,9 @@
         attributes = vnode.attributes,
         isComponent = false;
     store = store || {};
-    opts = opts || {};
+    opts = Object.assign({
+      scopedCSS: true
+    }, opts);
 
     var pretty = true && opts.pretty,
         indentChar = pretty && typeof pretty === 'string' ? pretty : '\t';
@@ -1867,8 +1869,24 @@
       if (c.install) c.install();
       if (c.beforeRender) c.beforeRender();
       rendered = c.render(c.props, c.data, c.store);
+      var tempCss;
+      if (opts.scopedCSS) {
 
-      return renderToString(rendered, store, opts);
+        if (c.css) {
+          var cssStr = 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));
+        }
+
+        c.scopedCSSAttr = vnode.css;
+        scopeHost(rendered, c.scopedCSSAttr);
+      }
+
+      return renderToString(rendered, opts, store, false, tempCss);
     }
 
     // render JSX to HTML
@@ -1948,7 +1966,7 @@
         var child = vnode.children[i];
         if (child != null && child !== false) {
           var childSvgMode = nodeName === 'svg' ? true : nodeName === 'foreignObject' ? false : isSvgMode,
-              ret = renderToString(child, store, opts, childSvgMode);
+              ret = renderToString(child, opts, store, childSvgMode);
           if (pretty && !hasLarge && isLargeString(ret)) hasLarge = true;
           if (ret) pieces.push(ret);
         }
@@ -1971,6 +1989,7 @@
       s += '</' + nodeName + '>';
     }
 
+    if (css) return css + s;
     return s;
   }
 
@@ -2022,7 +2041,7 @@
     renderToString: renderToString
   };
   options.root.omi = Omi;
-  options.root.Omi.version = 'omio-1.3.4';
+  options.root.Omi.version = 'omio-1.3.5';
 
   var Omi$1 = {
     h: h,

packages/omio/dist/omi.esm.js

@@ -1,5 +1,5 @@
 /**
- * omi v1.3.4  http://omijs.org
+ * omi v1.3.5  http://omijs.org
  * Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.
  * By dntzhang https://github.com/dntzhang
  * Github: https://github.com/Tencent/omi
@@ -1829,7 +1829,7 @@ function styleObjToCss(s) {
 }
 
 /** The default export is an alias of `render()`. */
-function renderToString(vnode, store, opts, isSvgMode) {
+function renderToString(vnode, opts, store, isSvgMode, css) {
   if (vnode == null || typeof vnode === 'boolean') {
     return '';
   }
@@ -1838,7 +1838,9 @@ function renderToString(vnode, store, opts, isSvgMode) {
       attributes = vnode.attributes,
       isComponent = false;
   store = store || {};
-  opts = opts || {};
+  opts = Object.assign({
+    scopedCSS: true
+  }, opts);
 
   var pretty = true && opts.pretty,
       indentChar = pretty && typeof pretty === 'string' ? pretty : '\t';
@@ -1864,8 +1866,24 @@ function renderToString(vnode, store, opts, isSvgMode) {
     if (c.install) c.install();
     if (c.beforeRender) c.beforeRender();
     rendered = c.render(c.props, c.data, c.store);
+    var tempCss;
+    if (opts.scopedCSS) {
 
-    return renderToString(rendered, store, opts);
+      if (c.css) {
+        var cssStr = 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));
+      }
+
+      c.scopedCSSAttr = vnode.css;
+      scopeHost(rendered, c.scopedCSSAttr);
+    }
+
+    return renderToString(rendered, opts, store, false, tempCss);
   }
 
   // render JSX to HTML
@@ -1945,7 +1963,7 @@ function renderToString(vnode, store, opts, isSvgMode) {
       var child = vnode.children[i];
       if (child != null && child !== false) {
         var childSvgMode = nodeName === 'svg' ? true : nodeName === 'foreignObject' ? false : isSvgMode,
-            ret = renderToString(child, store, opts, childSvgMode);
+            ret = renderToString(child, opts, store, childSvgMode);
         if (pretty && !hasLarge && isLargeString(ret)) hasLarge = true;
         if (ret) pieces.push(ret);
       }
@@ -1968,6 +1986,7 @@ function renderToString(vnode, store, opts, isSvgMode) {
     s += '</' + nodeName + '>';
   }
 
+  if (css) return css + s;
   return s;
 }
 
@@ -2019,7 +2038,7 @@ options.root.Omi = {
   renderToString: renderToString
 };
 options.root.omi = Omi;
-options.root.Omi.version = 'omio-1.3.4';
+options.root.Omi.version = 'omio-1.3.5';
 
 var omi = {
   h: h,

packages/omio/dist/omi.js

@@ -681,11 +681,13 @@
         }
         return str || void 0;
     }
-    function renderToString(vnode, store, opts, isSvgMode) {
+    function renderToString(vnode, opts, store, isSvgMode, css) {
         if (null == vnode || 'boolean' == typeof vnode) return '';
         var nodeName = vnode.nodeName, attributes = vnode.attributes, isComponent = !1;
         store = store || {};
-        opts = opts || {};
+        opts = Object.assign({
+            scopedCSS: !0
+        }, opts);
         var pretty = opts.pretty, indentChar = pretty && 'string' == typeof pretty ? pretty : '\t';
         if ('object' != typeof vnode && !nodeName) return encodeEntities(vnode);
         var ctor = mapping$1[nodeName];
@@ -699,7 +701,18 @@
             if (c.install) c.install();
             if (c.beforeRender) c.beforeRender();
             rendered = c.render(c.props, c.data, c.store);
-            return renderToString(rendered, store, opts);
+            var tempCss;
+            if (opts.scopedCSS) {
+                if (c.css) {
+                    var cssStr = 'function' == typeof c.css ? 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));
+                c.scopedCSSAttr = vnode.css;
+                scopeHost(rendered, c.scopedCSSAttr);
+            }
+            return renderToString(rendered, opts, store, !1, tempCss);
         }
         var html, s = '';
         if (attributes) {
@@ -746,7 +759,7 @@
             for (var i = 0; i < vnode.children.length; i++) {
                 var child = vnode.children[i];
                 if (null != child && !1 !== child) {
-                    var childSvgMode = 'svg' === nodeName ? !0 : 'foreignObject' === nodeName ? !1 : isSvgMode, ret = renderToString(child, store, opts, childSvgMode);
+                    var childSvgMode = 'svg' === nodeName ? !0 : 'foreignObject' === nodeName ? !1 : isSvgMode, ret = renderToString(child, opts, store, childSvgMode);
                     if (pretty && !hasLarge && isLargeString(ret)) hasLarge = !0;
                     if (ret) pieces.push(ret);
                 }
@@ -758,7 +771,7 @@
             if (pretty && ~s.indexOf('\n')) s += '\n';
             s += '</' + nodeName + '>';
         }
-        return s;
+        if (css) return css + s; else return s;
     }
     function assign$1(obj, props) {
         for (var i in props) obj[i] = props[i];
@@ -1063,7 +1076,7 @@
         renderToString: renderToString
     };
     options.root.omi = Omi;
-    options.root.Omi.version = 'omio-1.3.4';
+    options.root.Omi.version = 'omio-1.3.5';
     var Omi$1 = {
         h: h,
         createElement: h,

packages/omio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omio",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "Omi for old browsers(IE8+ and mobile browsers).",
   "main": "dist/omi.js",
   "jsnext:main": "dist/omi.esm.js",

packages/omio/src/omi.js

@@ -37,7 +37,7 @@ options.root.Omi = {
   renderToString
 }
 options.root.omi = Omi
-options.root.Omi.version = 'omio-1.3.4'
+options.root.Omi.version = 'omio-1.3.5'
 
 export default {
   h,

packages/omio/test/browser/render-to-string.js

@@ -0,0 +1,125 @@
+/*
+ * @Author: kinsonpeng 
+ * @Date: 2018-12-19 15:50:55 
+ * @Last Modified by: kinsonpeng
+ * @Last Modified time: 2018-12-20 16:11:35
+ */
+import { define, render, WeElement, renderToString } from '../../src/omi';
+
+describe('render()', () => {
+
+
+  define('todo-app', class extends WeElement {
+
+    data = { items: [], text: '' }
+
+    render() {
+      return (
+        <div>ab</div>
+      )
+    }
+  })
+  it('render to string without style', () => {
+    let str = renderToString(<todo-app />)
+
+    expect(str).to.equal('<div>ab</div>');
+  })
+
+  define('todo-app2', class extends WeElement {
+    css = 'h3 { color:red; }'
+
+    data = { items: [], text: '' }
+
+    render() {
+      return (
+        <div>ab</div>
+      )
+    }
+  })
+
+  it('render to string with style', () => {
+    let str = renderToString(<todo-app2 />)
+
+    expect(str).to.equal('<style type="text/css" id="_ss0">h3[_ss0]{ color:red; }</style><div _ss0>ab</div>');
+  })
+
+
+  it('render to string without style', () => {
+    let str = renderToString(<todo-app2 />, { scopedCSS: false })
+
+    expect(str).to.equal('<div>ab</div>');
+  })
+
+
+
+define('todo-list', class extends WeElement {
+  css = 'li { color:green; }'
+
+  render(props) {
+    return (
+      <ul>
+        {props.items.map(item => (
+          <li key={item.id}>{item.text}</li>
+        ))}
+      </ul>
+    )
+  }
+})
+
+define('todo-app3', class extends WeElement {
+  static observe = true
+  
+  css = 'h3 { color:red; }'
+
+  data = { items: [], text: '' }
+
+  render() {
+    return (
+      <div>
+        <h3>TODO</h3>
+        <todo-list items={this.data.items} />
+        <form onSubmit={this.handleSubmit}>
+          <input
+            id="new-todo"
+            onChange={this.handleChange}
+            value={this.data.text}
+          />
+          <button>Add #{this.data.items.length + 1}</button>
+        </form>
+      </div>
+    )
+  }
+
+  handleChange = e => {
+    this.data.text = e.target.value
+  }
+
+  handleSubmit = e => {
+    e.preventDefault()
+    if (!this.data.text.trim().length) {
+      return
+    }
+    this.data.items.push({
+      text: this.data.text,
+      id: Date.now()
+    })
+    this.data.text = ''
+  }
+})
+
+
+it('render to string with nest element', () => {
+  let str = renderToString(<todo-app3 />, { scopedCSS: false })
+
+  expect(str).to.equal('<div><h3>TODO</h3><ul></ul><form><input id="new-todo" value /><button>Add #1</button></form></div>');
+})
+
+
+
+it('render to string with nest element', () => {
+  let str = renderToString(<todo-app3 />, { scopedCSS: true })
+
+  expect(str).to.equal('<style type="text/css" id="_ss1">h3[_ss1]{ color:red; }</style><div _ss1><h3 _ss1>TODO</h3><style type="text/css" id="_ss2">li[_ss2]{ color:green; }</style><ul _ss2 _ss1></ul><form _ss1><input id="new-todo" value _ss1 /><button _ss1>Add #1</button></form></div>');
+})
+
+})