Enhanced precompile

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## [v0.4.12] 2018.09.05
+
+* 🌟 扩展标签函数的`options`参数中增加`attrs`参数。
+* 🌟 改进`precompile`方法，更好地配合`babel-plugin-nornj-in-jsx`做预编译。
+
 ## [v0.4.11] 2018.08.17
 
 * 🐞 修复渲染`<br style="color: #fff">`时的bug。[#17](https://github.com/joe-sky/nornj/issues/17)

README.md

@@ -279,10 +279,6 @@ console.log(html);
 
 * 可支持所有现代浏览器以及Internet Explorer 9+。
 
-## 谁在使用
-
-![who use](https://joe-sky.github.io/nornj-guide/images/y-dept.jpg?raw=true)
-
 ## License
 
 MIT

dist/nornj.common.js

@@ -3170,7 +3170,7 @@ var buildRuntime = (function (astContent, ast, useString) {
 
 var preAsts = nj.preAsts;
 
-var SPLIT_FLAG = '_nj_split';
+var SPLIT_FLAG = '_njParam';
 var TEXT_CONTENT = ['style', 'script', 'textarea', 'xmp', nj.textTag];
 var OMITTED_CLOSE_TAGS$1 = OMITTED_CLOSE_TAGS;
 
@@ -3272,22 +3272,22 @@ function compileStringTmpl(tmpl) {
     preAsts[tmplKey] = ret;
   }
 
-  var params = void 0,
-      args = arguments,
-      paramCount = ret._njParamCount;
-  if (paramCount > 0) {
-    params = {};
-    defineProp(params, '_njParam', {
-      value: true
-    });
+  var tmplFn = void 0;
+  if (!onlyParse) {
+    var params = void 0,
+        args = arguments,
+        paramCount = ret._njParamCount;
+    if (paramCount > 0) {
+      params = {};
+      defineProp(params, '_njParam', {
+        value: true
+      });
 
-    for (var i = 0; i < paramCount; i++) {
-      params[SPLIT_FLAG + i] = args[i + 1];
+      for (var i = 0; i < paramCount; i++) {
+        params[SPLIT_FLAG + i] = args[i + 1];
+      }
     }
-  }
 
-  var tmplFn = void 0;
-  if (!onlyParse) {
     tmplFn = params ? function () {
       return tmplMainFn.apply(this, arrayPush([params], arguments));
     } : function () {
@@ -3675,7 +3675,20 @@ function _createAstRoot() {
 function precompile(tmpl, outputH, tmplRule) {
   var root = _createAstRoot();
 
-  if (isString(tmpl)) {
+  if (tmpl.quasis) {
+    var _tmpl = tmpl,
+        quasis = _tmpl.quasis,
+        isExpresson = _tmpl.isExpresson,
+        isCss = _tmpl.isCss;
+
+    tmpl = compileStringTmpl.call({
+      tmplRule: tmplRule,
+      outputH: outputH,
+      onlyParse: true,
+      isMustache: isExpresson,
+      isCss: isCss
+    }, quasis);
+  } else if (isString(tmpl)) {
     tmpl = compileStringTmpl.call({ tmplRule: tmplRule, outputH: outputH, onlyParse: true }, tmpl);
   }
   checkElem(tmpl._njTmpl, root, tmplRule);

dist/nornj.esm.js

@@ -3166,7 +3166,7 @@ var buildRuntime = (function (astContent, ast, useString) {
 
 var preAsts = nj.preAsts;
 
-var SPLIT_FLAG = '_nj_split';
+var SPLIT_FLAG = '_njParam';
 var TEXT_CONTENT = ['style', 'script', 'textarea', 'xmp', nj.textTag];
 var OMITTED_CLOSE_TAGS$1 = OMITTED_CLOSE_TAGS;
 
@@ -3268,22 +3268,22 @@ function compileStringTmpl(tmpl) {
     preAsts[tmplKey] = ret;
   }
 
-  var params = void 0,
-      args = arguments,
-      paramCount = ret._njParamCount;
-  if (paramCount > 0) {
-    params = {};
-    defineProp(params, '_njParam', {
-      value: true
-    });
+  var tmplFn = void 0;
+  if (!onlyParse) {
+    var params = void 0,
+        args = arguments,
+        paramCount = ret._njParamCount;
+    if (paramCount > 0) {
+      params = {};
+      defineProp(params, '_njParam', {
+        value: true
+      });
 
-    for (var i = 0; i < paramCount; i++) {
-      params[SPLIT_FLAG + i] = args[i + 1];
+      for (var i = 0; i < paramCount; i++) {
+        params[SPLIT_FLAG + i] = args[i + 1];
+      }
     }
-  }
 
-  var tmplFn = void 0;
-  if (!onlyParse) {
     tmplFn = params ? function () {
       return tmplMainFn.apply(this, arrayPush([params], arguments));
     } : function () {
@@ -3671,7 +3671,20 @@ function _createAstRoot() {
 function precompile(tmpl, outputH, tmplRule) {
   var root = _createAstRoot();
 
-  if (isString(tmpl)) {
+  if (tmpl.quasis) {
+    var _tmpl = tmpl,
+        quasis = _tmpl.quasis,
+        isExpresson = _tmpl.isExpresson,
+        isCss = _tmpl.isCss;
+
+    tmpl = compileStringTmpl.call({
+      tmplRule: tmplRule,
+      outputH: outputH,
+      onlyParse: true,
+      isMustache: isExpresson,
+      isCss: isCss
+    }, quasis);
+  } else if (isString(tmpl)) {
     tmpl = compileStringTmpl.call({ tmplRule: tmplRule, outputH: outputH, onlyParse: true }, tmpl);
   }
   checkElem(tmpl._njTmpl, root, tmplRule);

dist/nornj.js

@@ -3172,7 +3172,7 @@ var buildRuntime = (function (astContent, ast, useString) {
 
 var preAsts = nj.preAsts;
 
-var SPLIT_FLAG = '_nj_split';
+var SPLIT_FLAG = '_njParam';
 var TEXT_CONTENT = ['style', 'script', 'textarea', 'xmp', nj.textTag];
 var OMITTED_CLOSE_TAGS$1 = OMITTED_CLOSE_TAGS;
 
@@ -3274,22 +3274,22 @@ function compileStringTmpl(tmpl) {
     preAsts[tmplKey] = ret;
   }
 
-  var params = void 0,
-      args = arguments,
-      paramCount = ret._njParamCount;
-  if (paramCount > 0) {
-    params = {};
-    defineProp(params, '_njParam', {
-      value: true
-    });
+  var tmplFn = void 0;
+  if (!onlyParse) {
+    var params = void 0,
+        args = arguments,
+        paramCount = ret._njParamCount;
+    if (paramCount > 0) {
+      params = {};
+      defineProp(params, '_njParam', {
+        value: true
+      });
 
-    for (var i = 0; i < paramCount; i++) {
-      params[SPLIT_FLAG + i] = args[i + 1];
+      for (var i = 0; i < paramCount; i++) {
+        params[SPLIT_FLAG + i] = args[i + 1];
+      }
     }
-  }
 
-  var tmplFn = void 0;
-  if (!onlyParse) {
     tmplFn = params ? function () {
       return tmplMainFn.apply(this, arrayPush([params], arguments));
     } : function () {
@@ -3677,7 +3677,20 @@ function _createAstRoot() {
 function precompile(tmpl, outputH, tmplRule) {
   var root = _createAstRoot();
 
-  if (isString(tmpl)) {
+  if (tmpl.quasis) {
+    var _tmpl = tmpl,
+        quasis = _tmpl.quasis,
+        isExpresson = _tmpl.isExpresson,
+        isCss = _tmpl.isCss;
+
+    tmpl = compileStringTmpl.call({
+      tmplRule: tmplRule,
+      outputH: outputH,
+      onlyParse: true,
+      isMustache: isExpresson,
+      isCss: isCss
+    }, quasis);
+  } else if (isString(tmpl)) {
     tmpl = compileStringTmpl.call({ tmplRule: tmplRule, outputH: outputH, onlyParse: true }, tmpl);
   }
   checkElem(tmpl._njTmpl, root, tmplRule);

packages/babel-plugin-nornj-in-jsx/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## [v0.4.7] 2018.09.05
+
+* 🌟 扩展表达式支持预编译模板。
+
 ## [v0.4.6] 2018.08.22
 
 * 🐞 修复`webpack 4`中构建时`nj`变量重复定义的bug。

packages/babel-plugin-nornj-in-jsx/README.md

@@ -342,29 +342,93 @@ class TestComponent extends Component {
 }
 ```
 
-### n-mobx-model
+### n-mobx-bind
 
-使用`n-mobx-model`可以在JSX中实现基于`Mobx`的双向数据绑定功能：
+类似于`Vue`的`v-model`指令，可以使用`n-mobx-bind`配合`Mobx`在`<input>`及`<textarea>`等表单元素上创建`双向数据绑定`，它会根据控件类型自动选取正确的方法来更新元素。
+
+* 基本使用方法
 
 ```js
 import { Component } from 'react';
 import { observable } from 'mobx';
-import nj from 'nornj';
 
 class TestComponent extends Component {
   @observable inputValue = '';
 
   render() {
-    return <input n-mobx-model="inputValue" />;
+    return <input n-mobx-bind="inputValue" />;
   }
 }
 ```
 
-`n-mobx-model`的详细文档请[查看这里](https://joe-sky.github.io/nornj-guide/templateSyntax/inlineExtensionTag.html#mobx-model)。
+如上所示，无需编写`<input>`标签的`onChange`事件，`inputValue`变量已自动和`<input>`标签建立了`双向数据绑定`的关系。
+
+* 实质上，`n-mobx-bind`的实现原理和`v-model`很类似，上述示例其实就是下面的语法糖形式：
 
-### n-mst-model
+```js
+class TestComponent extends Component {
+  @observable inputValue = '';
+  @autobind
+  onChange(e) {
+    this.inputValue = e.target.value;
+  }
+
+  render() {
+    return <input value={this.inputValue} onChange={this.onChange} />;
+  }
+}
+```
 
-`n-mst-model`即为`n-mobx-model`的`mobx-state-tree`版本：
+* `onChange`事件
+
+由于`n-mobx-bind`默认自动设置了组件的`onChange`事件，但有些情况下我们可能还是需要在`onChange`中做一些其他的操作：
+
+```js
+class TestComponent extends Component {
+  @observable inputValue = '1';
+
+  @autobind
+  onChange(e) {
+    console.log(e.target.value);
+  }
+
+  render() {
+    return <input n-mobx-bind="inputValue" onChange={this.onChange} />;
+  }
+}
+```
+
+如上所示，`onChange`事件的行为和标签原生的`onChange`完全相同，它会在文本框的值变化后执行。
+
+* 使用`action`更新变量
+
+在`mobx`开发中如果启动严格模式或者使用`mobx-state-tree`时，则须要使用`action`来更新变量。可按下面方式配置使用`action`：
+
+```js
+import { observable, action, configure } from 'mobx';
+
+// don't allow state modifications outside actions
+configure({enforceActions: true});
+
+class TestComponent extends Component {
+  @observable inputValue = '1';
+
+  @action.bound
+  setInputValue(v) {
+    this.inputValue = v;
+  }
+
+  render() {
+    return <input n-mobx-bind_action="inputValue" />;
+  }
+}
+```
+
+当有`action`修饰符时，`n-mobx-bind`会默认执行camel命名法(`set + 变量名`)定义的`action`，上例中为`setInputValue`。
+
+### n-mst-bind
+
+`n-mst-bind`即为`n-mobx-bind`的默认使用`action`来更新值的版本，用来配合`mobx-state-tree`的变量使用：
 
 store：
 
@@ -389,12 +453,14 @@ component：
 @observer
 class TestComponent extends Component {
   render() {
-    return <input n-mst-model={`${this}.props.rootStore.testStore.inputValue`} />;
+    return <input n-mst-bind={`${this}.props.rootStore.testStore`} />;
   }
 }
 ```
 
-`n-mst-model`的详细文档请[查看这里](https://joe-sky.github.io/nornj-guide/templateSyntax/inlineExtensionTag.html#mst-model)。
+如上，`n-mst-bind`会默认执行camel命名法(`set + 变量名`)定义的`action`来更新值，上例中为`setInputValue`。除此外`n-mst-bind`的其他特性与上述的`n-mobx-bind`完全相同。
+
+`n-mobx-bind`和`n-mst-bind`的更多详细文档请[查看这里](https://joe-sky.github.io/nornj-guide/templateSyntax/inlineExtensionTag.html#mobx-bind)。
 
 ## 扩展表达式
 

packages/babel-plugin-nornj-in-jsx/package.json

@@ -42,8 +42,8 @@
   "dependencies": {
     "babel-core": "^6.1.2",
     "babel-plugin-syntax-jsx": "^6.1.18",
-    "nornj": "^0.4.9",
-    "nornj-react": "^0.4.3"
+    "nornj": "^0.4.12",
+    "nornj-react": "^0.4.4"
   },
   "devDependencies": {
     "babel-eslint": "^6.0.3",