Merge pull request #4 from peakchen90/dev

Dev

Author: peakchen90

CHANGELOG.md

@@ -1,28 +1,34 @@
 # CHANGELOG
 
+## 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.
+
 ## v1.0.2
 2019-11-23
 
-- Fix bug: 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
 
-- Added `x-model-hook` directive for **useState hook function**, and the `x-model` can only be used in **class component** now
-- In some cases use the runtime instead of the AST code
-- Fix some problem of `x-model`
-- Improved stability
+- **Feature**: Added `x-model-hook` directive for **useState hook function**, 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
 
 ## v0.1.1
 2019-10-17
 
-- Update some documents
+- **Optimization**: Update some documents
 
 
 ## v0.1.0
 2019-10-07
 
-- Features: Support for `x-if` and `x-else-if` and `x-else`
-- Features: Support for `x-show`
-- Features: Support for `x-for`
-- Features: Support for `x-model`
+- **Feature**: Support for `x-if` and `x-else-if` and `x-else`
+- **Feature**: Support for `x-show`
+- **Feature**: Support for `x-for`
+- **Feature**: Support for `x-model`

README.ZH-CN.md

@@ -21,6 +21,7 @@
   - [x-for](#toc-directives-x-for)
   - [x-model](#toc-directives-x-model)
   - [x-model-hook](#toc-directives-x-model-hook)
+  - [x-class](#toc-directives-x-class)
 - [相关资源](#toc-related-packages)
 - [已知问题](#toc-known-issues)
 - [更新日志](#toc-changeloog)
@@ -136,7 +137,7 @@ const foo = (
 )
 ```
 
-当然，它也会通过调用 [runtime function](./lib/runtime.js) 合并其他 `style`，例如：
+当然，它也会通过调用 [mergeProps 方法](./runtime/merge-props.js) 合并其他 `style` props，例如：
 ```jsx harmony
 const foo = (
   <div 
@@ -154,7 +155,7 @@ const foo = (
   <div
     {...extraProps}
     style={{
-      ...require("babel-plugin-react-directives/lib/runtime").mergeProps.call(this, "style", [
+      ...mergeProps.call(this, "style", [
         { style: { color: 'red' } },
         extraProps
       ]),
@@ -225,7 +226,7 @@ const foo = (
 
 ### <span id="toc-directives-x-model">x-model</span>
 `x-model` 是类似于 vue `v-model` 的语法糖，使用时绑定一个值到表单元素的 `value` prop 上，在表单元素更新时自动更新状态。
-通过调用 [runtime function](./lib/runtime.js) 获取更新的值（如果第一个参数 `arg` 不为空，且 `arg.target` 是一个对象，返回 `arg.target.value`，否则返回 `arg`）
+通过调用 [resolveValue 方法](./runtime/resolve-value.js) 获取更新的值（如果第一个参数 `arg` 不为空，且 `arg.target` 是一个对象，返回 `arg.target.value`，否则返回 `arg`）
 
 **例子:**
 ```jsx harmony
@@ -252,7 +253,7 @@ class Foo extends React.Component {
   render() {
     return (
       <input value={this.state.data} onChange={(..._args) => {
-        let _value = require("babel-plugin-react-directives/lib/runtime").resolveValue(_args);
+        let _value = resolveValue(_args);
 
         this.setState(_prevState => {
           return { data: _value };
@@ -263,7 +264,7 @@ class Foo extends React.Component {
 }
 ```
 
-当存在其他 `onChange` prop 时，将通过调用 [runtime function](./lib/runtime.js) 合并其他 `onChange` 方法:
+当存在其他 `onChange` prop 时，将通过调用 [invokeOnchange 方法](./runtime/invoke-onchange.js) 合并其他 `onChange` 方法:
 ```jsx harmony
 class Foo extends React.Component {
   constructor(props) {
@@ -305,13 +306,13 @@ class Foo extends React.Component {
         {...this.props}
         value={this.state.data}
         onChange={(..._args) => {
-          let _value = require("babel-plugin-react-directives/lib/runtime").resolveValue(_args);
+          let _value = resolveValue(_args);
 
           this.setState(_prevState => {
             return { data: _value };
           });
 
-          require("babel-plugin-react-directives/lib/runtime").invokeExtraOnChange.call(this, _args, [
+          invokeOnchange.call(this, _args, [
             { onChange: this.onChange.bind(this) },
             this.props
           ]);
@@ -356,7 +357,7 @@ class Foo extends React.Component {
       <input
         value={data.text}
         onChange={(..._args) => {
-          let _value = require("babel-plugin-react-directives/lib/runtime").resolveValue(_args);
+          let _value = resolveValue(_args);
 
           this.setState(_prevState => {
             let _val = {
@@ -391,7 +392,7 @@ function Foo() {
     <input
       value={data}
       onChange={(..._args) => {
-        let _value = require("babel-plugin-react-directives/lib/runtime").resolveValue(_args);
+        let _value = resolveValue(_args);
 
         setData(_value);
       }}
@@ -402,6 +403,50 @@ function Foo() {
 
 **提示**: 如果你在项目中使用了 [**ESLint**](https://eslint.org)，也许会提示你 `setData` 是一个从未使用的变量，请安装 [**eslint-plugin-react-directives**](https://github.com/peakchen90/eslint-plugin-react-directives) 来解决这个问题
 
+### <span id="toc-directives-x-class">x-class</span>
+
+> *1.1.0版本新增*
+
+`x-class` 通过 [classnames](https://github.com/JedWatson/classnames) 有条件的生成 className, 这对于动态生成 className 非常有用。
+用法与 [classnames](https://github.com/JedWatson/classnames) 相同，绑定值将作为参数传给 [`classNames`](https://github.com/JedWatson/classnames#usage) 方法。
+
+**例子:**
+```jsx harmony
+const foo = <div x-class={{ abc: true, def: false }}>
+```
+
+**转换成:**
+```jsx harmony
+const foo = <div className={classNames({ abc: true, def: false })}>
+// className="abc"
+```
+**提示**: `classNames` 方法引用于 [runtime/classnames.js](./runtime/classnames.js).
+
+当然，它也将合并其他的 `className` props, 例如:
+```jsx harmony
+const foo = <div x-class={{ abc: true, def: false }} className="xyz">
+```
+
+将被转换成:
+```jsx harmony
+const foo = <div className={classNames(["xyz", { abc: true, def: false }])}>
+// className="xyz abc"
+```
+
+`x-class` 也可以与 [css-modules](https://github.com/css-modules/css-modules) 一起使用，例如：
+```jsx harmony
+import styles from './style.css';
+
+const foo = (
+  <div 
+    className={styles.foo}
+    x-class={{ 
+      [styles.bar]: true,
+      [styles.qux]: false
+    }}
+  />
+)
+```
 
 ## <span id="toc-related-packages">相关资源</span>
 - [eslint-plugin-react-directives](https://github.com/peakchen90/eslint-plugin-react-directives)

README.md

@@ -8,7 +8,7 @@ A babel plugin that provides some directives for react(any JSX), similar to dire
 [![npm](https://img.shields.io/npm/v/babel-plugin-react-directives.svg)](https://www.npmjs.com/package/babel-plugin-react-directives)
 [![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/peakchen90/babel-plugin-react-directives/blob/master/LICENSE)
 
-> 🇨🇳 [**中文文档**](./README.ZH-CN.md)
+> [**中文文档**](./README.ZH-CN.md)
 
 ## Table of Contents
 - [Usage](#toc-usage)
@@ -22,6 +22,7 @@ A babel plugin that provides some directives for react(any JSX), similar to dire
   - [x-for](#toc-directives-x-for)
   - [x-model](#toc-directives-x-model)
   - [x-model-hook](#toc-directives-x-model-hook)
+  - [x-class](#toc-directives-x-class)
 - [Related Packages](#toc-related-packages)
 - [Known Issues](#toc-known-issues)
 - [CHANGELOG](#toc-changeloog)
@@ -137,7 +138,7 @@ const foo = (
 )
 ```
 
-Of course, it will also merge other `style` by calling the [runtime function](./lib/runtime.js), for example:
+Of course, it will also merge other `style` props by calling the [mergeProps method](./runtime/merge-props.js), for example:
 ```jsx harmony
 const foo = (
   <div 
@@ -155,7 +156,7 @@ const foo = (
   <div
     {...extraProps}
     style={{
-      ...require("babel-plugin-react-directives/lib/runtime").mergeProps.call(this, "style", [
+      ...mergeProps.call(this, "style", [
         { style: { color: 'red' } },
         extraProps
       ]),
@@ -228,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 [runtime function](./lib/runtime.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-empty, and `arg.target` is an object, return `arg.target.value`, otherwise return `arg`).
 
 **Example:**
 ```jsx harmony
@@ -255,7 +256,7 @@ class Foo extends React.Component {
   render() {
     return (
       <input value={this.state.data} onChange={(..._args) => {
-        let _value = require("babel-plugin-react-directives/lib/runtime").resolveValue(_args);
+        let _value = resolveValue(_args);
 
         this.setState(_prevState => {
           return { data: _value };
@@ -266,7 +267,7 @@ class Foo extends React.Component {
 }
 ```
 
-When there are other `onChange` props, merge them by calling the [runtime function](./lib/runtime.js):
+When there are other `onChange` props, merge them by calling the [invokeOnchange method](./runtime/invoke-onchange.js):
 ```jsx harmony
 class Foo extends React.Component {
   constructor(props) {
@@ -308,13 +309,13 @@ class Foo extends React.Component {
         {...this.props}
         value={this.state.data}
         onChange={(..._args) => {
-          let _value = require("babel-plugin-react-directives/lib/runtime").resolveValue(_args);
+          let _value = resolveValue(_args);
 
           this.setState(_prevState => {
             return { data: _value };
           });
 
-          require("babel-plugin-react-directives/lib/runtime").invokeExtraOnChange.call(this, _args, [
+          invokeOnchange.call(this, _args, [
             { onChange: this.onChange.bind(this) },
             this.props
           ]);
@@ -359,7 +360,7 @@ class Foo extends React.Component {
       <input
         value={data.text}
         onChange={(..._args) => {
-          let _value = require("babel-plugin-react-directives/lib/runtime").resolveValue(_args);
+          let _value = resolveValue(_args);
 
           this.setState(_prevState => {
             let _val = {
@@ -394,7 +395,7 @@ function Foo() {
     <input
       value={data}
       onChange={(..._args) => {
-        let _value = require("babel-plugin-react-directives/lib/runtime").resolveValue(_args);
+        let _value = resolveValue(_args);
 
         setData(_value);
       }}
@@ -406,6 +407,51 @@ function Foo() {
 **Note**: If you use [**ESLint**](https://eslint.org), you may receive an error that `setData` is defined but never used.
 Please install [**eslint-plugin-react-directives**](https://github.com/peakchen90/eslint-plugin-react-directives) plugin to solve it.
 
+### <span id="toc-directives-x-class">x-class</span>
+
+> *New in 1.1.0*
+
+The `x-class` for conditionally joining classNames together by [classnames](https://github.com/JedWatson/classnames), and it is useful for dynamically generating className.
+Usage is the same as [classnames](https://github.com/JedWatson/classnames), the binding value will be passed as a parameter to the [`classNames`](https://github.com/JedWatson/classnames#usage) method.
+
+**Example:**
+```jsx harmony
+const foo = <div x-class={{ abc: true, def: false }}>
+```
+
+**Convert to:**
+```jsx harmony
+const foo = <div className={classNames({ abc: true, def: false })}>
+// className="abc"
+```
+**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">
+```
+
+will be converted to:
+```jsx harmony
+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:
+```jsx harmony
+import styles from './style.css';
+
+const foo = (
+  <div 
+    className={styles.foo}
+    x-class={{ 
+      [styles.bar]: true,
+      [styles.qux]: false
+    }}
+  />
+)
+```
 
 ## <span id="toc-related-packages">Related Packages</span>
 - [eslint-plugin-react-directives](https://github.com/peakchen90/eslint-plugin-react-directives)

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "babel-plugin-react-directives",
-  "version": "1.0.2",
+  "version": "1.1.0-rc.1",
   "description": "A babel plugin that provides some directives for react(any JSX), similar to directive of vue.",
   "main": "src/index.js",
   "files": [
     "src",
-    "lib",
+    "runtime",
     "package.json",
     "README.md",
     "LICENSE"

package.json

@@ -321,7 +321,7 @@ function setOnChangeProp(path, attrPath, stateBindingStack, useType) {
         t.blockStatement([
 
           /**
-           * let _val = require('babel-plugin-react-directives').resolveValue(_args)
+           * let _val = require('babel-plugin-react-directives/runtime/resolve-value.js')(_args)
            */
           t.variableDeclaration('let', [
             t.variableDeclarator(
@@ -339,7 +339,7 @@ function setOnChangeProp(path, attrPath, stateBindingStack, useType) {
           ...setStateExpression,
 
           /**
-           * require("babel-plugin-react-directives/lib/runtime").invokeOnChange.call(this, _args, []);
+           * require('babel-plugin-react-directives/runtime/invoke-onchange.js').call(this, _args, []);
            */
           mergeItems.length > 0 && t.expressionStatement(
             builder.buildCallRuntimeExpression(