Merge pull request #5 from peakchen90/dev

Dev

Author: peakchen90

CHANGELOG.md

@@ -3,18 +3,18 @@
 ## v1.1.0
 2019-12-01
 
-- **Feature**: Added `x-class` directive for conditionally joining classNames together.
-- **Optimization**: Split the runtime into multiple independent files to reduce runtime bundle size.
+- **Feature**: Added `x-class` directive for conditionally joining classNames together
+- **Optimization**: Split the runtime into multiple independent files to reduce runtime bundle size
 
 ## v1.0.2
 2019-11-23
 
-- **Bug**: fix bug that when `x-if` is nested under `x-else` and `x-else-if`, an error is reported.
+- **Bug**: fix bug that when `x-if` is nested under `x-else` and `x-else-if`, an error is reported
 
 ## v1.0.0
 2019-10-20
 
-- **Feature**: Added `x-model-hook` directive for **useState hook function**, and the `x-model` can only be used in **class component** now
+- **Feature**: Added `x-model-hook` directive for function component with *useState hook*, and the `x-model` can only be used in *class component* now
 - **Optimization**: In some cases use the runtime instead of the AST code
 - **Optimization**: Fix some problem of `x-model`
 - **Optimization**: Improved stability

README.ZH-CN.md

@@ -13,7 +13,7 @@
 - [开始使用](#toc-usage)
   - [安装](#toc-installation)
   - [添加配置 `.babelrc`](#toc-configuring)
-  - [或使用插件options](#toc-or-use-options)
+  - [插件options](#toc-plugin-options)
 - [指令](#toc-directives)
   - [x-if](#toc-directives-x-if)
   - [x-else-if 和 x-else](#toc-directives-x-else-if-and-x-else)
@@ -51,7 +51,7 @@ yarn add --dev babel-plugin-react-directives
 }
 ```
 
-### <span id="toc-or-use-options">或使用插件options (<a target="_blank" href="https://babeljs.io/docs/en/plugins#plugin-options">配置说明</a>)</span>
+### <span id="toc-plugin-options">插件options</span>
 
 ```json
 {
@@ -226,7 +226,7 @@ const foo = (
 
 ### <span id="toc-directives-x-model">x-model</span>
 `x-model` 是类似于 vue `v-model` 的语法糖，使用时绑定一个值到表单元素的 `value` prop 上，在表单元素更新时自动更新状态。
-通过调用 [resolveValue 方法](./runtime/resolve-value.js) 获取更新的值（如果第一个参数 `arg` 不为空，且 `arg.target` 是一个对象，返回 `arg.target.value`，否则返回 `arg`）
+通过调用 [resolveValue 方法](./runtime/resolve-value.js) 获取更新的值（如果第一个参数 `arg` 不为空，且 `arg.target` 是一个 HTMLElement, 返回 `arg.target.value`，否则返回 `arg`）
 
 **例子:**
 ```jsx harmony
@@ -374,7 +374,7 @@ class Foo extends React.Component {
 ```
 
 ### <span id="toc-directives-x-model-hook">x-model-hook</span>
-`x-model-hook` 与 `x-model` 非常相似，区别在于 `x-model-hook` 用于 **useState hook function**，而 `x-model` 用于 **class component** 
+`x-model-hook` 与 `x-model` 非常相似，区别在于 `x-model-hook` 用于使用了 *useState hook* 的函数组件，而 `x-model` 用于 *class component* 
 
 **例子:**
 ```jsx harmony

README.md

@@ -14,7 +14,7 @@ A babel plugin that provides some directives for react(any JSX), similar to dire
 - [Usage](#toc-usage)
   - [Installation](#toc-installation)
   - [Configuring via `.babelrc`](#toc-configuring)
-  - [Or use options](#toc-or-use-options)
+  - [Plugin options](#toc-plugin-options)
 - [Directives](#toc-directives)
   - [x-if](#toc-directives-x-if)
   - [x-else-if and x-else](#toc-directives-x-else-if-and-x-else)
@@ -52,7 +52,7 @@ yarn add --dev babel-plugin-react-directives
 }
 ```
 
-### <span id="toc-or-use-options">Or use options (<a target="_blank" href="https://babeljs.io/docs/en/plugins#plugin-options">Babel plugin options</a>)</span>
+### <span id="toc-plugin-options">Plugin options</span>
 
 ```json
 {
@@ -68,7 +68,7 @@ yarn add --dev babel-plugin-react-directives
 }
 ```
 
-- `prefix`: JSX props prefix for directives. Default: "x", usage example: `x-if`
+- `prefix`: JSX props prefix for directives. Default: "x", example usage: `x-if`
 - `pragmaType`: Help internal to correctly identify some syntax, such as hooks. Default: "React"
 
 ## <span id="toc-directives">Directives</span>
@@ -120,7 +120,7 @@ const foo = (
 ```
 
 ### <span id="toc-directives-x-show">x-show</span>
-The `x-show` controls the display or hiding of elements by the `display` of the `style` prop. If the `x-show` value is **falsy**, will set `style.display = "none"`, otherwise do nothing.
+The `x-show` controls the display or hiding of elements through the `display` of the `style` prop. If the `x-show` value is **falsy**, will set `style.display = "none"`, otherwise do nothing.
 
 
 **Example:**
@@ -229,7 +229,7 @@ const foo = (
 
 ### <span id="toc-directives-x-model">x-model</span>
 The `x-model` is a syntax sugar similar to vue `v-model`, which binds a state to the `value` prop of the **form element** and automatically updates the state when the element is updated.
-It resolves the updated value by calling the [resolveValue method](./runtime/resolve-value.js) (If the first argument `arg` is non-empty, and `arg.target` is an object, return `arg.target.value`, otherwise return `arg`).
+It resolves the updated value by calling the [resolveValue method](./runtime/resolve-value.js) (If the first argument `arg` is non-null, and `arg.target` is a HTMLElement, return `arg.target.value`, otherwise return `arg`).
 
 **Example:**
 ```jsx harmony
@@ -377,7 +377,7 @@ class Foo extends React.Component {
 ```
 
 ### <span id="toc-directives-x-model-hook">x-model-hook</span>
-The `x-model-hook` is similar to the `x-model`, the difference is that the `x-model-hook` is used in the **useState hook function**, and the `x-model` is used in the **class component**.
+The `x-model-hook` is similar to the `x-model`, the difference is that the `x-model-hook` is used in the function component with *useState hook*, and the `x-model` is used in the *class component*.
 
 **Example:**
 ```jsx harmony
@@ -427,7 +427,6 @@ const foo = <div className={classNames({ abc: true, def: false })}>
 **Note**: `classNames` method references [runtime/classnames.js](./runtime/classnames.js).
 
 Of course, it will also merge other `className` props, for example:
-**Example:**
 ```jsx harmony
 const foo = <div x-class={{ abc: true, def: false }} className="xyz">
 ```
@@ -438,7 +437,7 @@ const foo = <div className={classNames(["xyz", { abc: true, def: false }])}>
 // className="xyz abc"
 ```
 
-The `x-class` can also be used with [css-modules](https://github.com/css-modules/css-modules), for example:
+The `x-class` can also be used with [css-modules](https://github.com/css-modules/css-modules), the usage is as follows:
 ```jsx harmony
 import styles from './style.css';
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-directives",
-  "version": "1.1.0-rc.1",
+  "version": "1.1.0-rc.2",
   "description": "A babel plugin that provides some directives for react(any JSX), similar to directive of vue.",
   "main": "src/index.js",
   "files": [

package.json

@@ -1,7 +1,9 @@
 function resolveValue(args) {
-  return args[0] && args[0].target && typeof args[0].target === 'object'
-    ? args[0].target.value
-    : args[0];
+  var target = args[0] && args[0].target;
+  if(target && target.nodeType === 1) {
+    return target.value;
+  }
+  return args[0];
 }
 
 module.exports = resolveValue;

runtime/resolve-value.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { createInputNode } from '../util';
 
 class Demo1 extends React.Component {
   constructor(props) {
@@ -62,30 +63,30 @@ function Demo4({ fn, extraProps }) {
 }
 
 describe('directive: model', () => {
-  test('in class', () => {
+  test('use in class: x-model', () => {
     const wrapper = mount(<Demo1/>);
-    wrapper.find('input').simulate('change', { target: { value: 'new value' } });
+    wrapper.find('input').simulate('change', createInputNode('new value'));
     expect(wrapper.find('.text').text()).toBe('new value');
     expect(wrapper.find('.extra').text()).toBe('B');
   });
 
-  test('use hook', () => {
+  test('use in hook: x-model-hook', () => {
     const wrapper = mount(<Demo2/>);
-    wrapper.find('input').simulate('change', { target: { value: 'new value' } });
+    wrapper.find('input').simulate('change', createInputNode('new value'));
     expect(wrapper.find('.text').text()).toBe('new value');
     expect(wrapper.find('.extra').text()).toBe('foo');
   });
 
   test('custom onChange event', () => {
     const wrapper = mount(<Demo3/>);
-    wrapper.find('input').simulate('change', { target: { value: 'custom value' } });
+    wrapper.find('input').simulate('change', createInputNode('custom value'));
     expect(wrapper.find('.text').text()).toBe('custom value');
   });
 
   test('merge onChange', () => {
     const fn = jest.fn();
     const wrapper = mount(<Demo4 fn={fn}/>);
-    wrapper.find('input').simulate('change', { target: { value: 'custom value' } });
+    wrapper.find('input').simulate('change', createInputNode('custom value'));
     expect(wrapper.find('.text').text()).toBe('custom value');
     expect(fn.mock.calls.length).toBe(1);
     expect(fn.mock.calls[0][0].target.value).toBe('custom value');
@@ -98,7 +99,7 @@ describe('directive: model', () => {
       onChange: fn2
     };
     const wrapper = mount(<Demo4 fn={fn} extraProps={extraProps}/>);
-    wrapper.find('input').simulate('change', { target: { value: 'custom value' } });
+    wrapper.find('input').simulate('change', createInputNode('custom value'));
     expect(wrapper.find('.text').text()).toBe('custom value');
     expect(fn.mock.calls.length).toBe(0);
     expect(fn2.mock.calls.length).toBe(1);

test/e2e/specs/model.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { createInputNode } from '../util';
 
 class Todo extends React.Component {
   constructor(props) {
@@ -55,23 +56,23 @@ describe('Todo Component', () => {
   const wrapper = mount(<Todo/>);
 
   test('add todo', () => {
-    wrapper.find('.input').simulate('change', { target: { value: 'First Todo' } });
+    wrapper.find('.input').simulate('change', createInputNode('First Todo'));
     wrapper.find('.add').simulate('click');
     expect(wrapper.find('.todo-item .todo-text').at(0).text()).toBe('First Todo');
     expect(wrapper.find('.clear').prop('style').display).toBe(undefined);
   });
 
   test('search todo', () => {
-    wrapper.find('.input').simulate('change', { target: { value: 'Second Todo' } });
+    wrapper.find('.input').simulate('change', createInputNode('Second Todo'));
     wrapper.find('.add').simulate('click');
 
-    wrapper.find('.input').simulate('change', { target: { value: 'First' } });
+    wrapper.find('.input').simulate('change', createInputNode('First'));
     expect(wrapper.find('.todo-item .todo-text').length).toBe(1);
     expect(wrapper.find('.todo-item .todo-text').at(0).text()).toBe('First Todo');
   });
 
   test('clear todo', () => {
-    wrapper.find('.input').simulate('change', { target: { value: '' } });
+    wrapper.find('.input').simulate('change', createInputNode(''));
     expect(wrapper.find('.todo-item .todo-text').length).toBe(2);
 
     wrapper.find('.todo-item .remove').at(0).simulate('click');

test/e2e/specs/todo.test.js

@@ -8,3 +8,17 @@ export function sleep(ms) {
     setTimeout(resolve, ms);
   });
 }
+
+/**
+ * 创建类Input Node节点对象
+ * @param value
+ */
+export function createInputNode(value) {
+  const node = {};
+  node.target = {
+    nodeName: 'INPUT',
+    nodeType: 1,
+    value
+  };
+  return node;
+}