refactor: new directive API

Author: Amour1688

README-zh_CN.md

@@ -137,6 +137,28 @@ export default {
 }
 ```
 
+* 或者使用这种实现
+
+```jsx
+<input vModel={[val, ['trim']]} />
+```
+
+```jsx
+<A vModel={[val, 'foo', ['bar']]} />
+```
+
+会变编译成：
+
+```js
+h(A, {
+  'foo': val,
+  "fooModifiers": {
+    "bar": true
+  },
+  "onUpdate:foo": $event => val = $event
+})
+```
+
 自定义指令
 
 ```jsx
@@ -145,17 +167,15 @@ const App = {
   setup() {
     return () => (
       <a
-        vCustom={{
-          value: 123,
-          modifiers: { modifier: true },
-          arg: 'arg',
-        }}
+        vCustom={[val, 'arg', ['a', 'b']]}
       />
     );
   },
 }
 ```
 
+> 注意：如果想要使用 `arg`, 第二个参数需要为字符串
+
 ### 插槽 
 
 ```jsx

README.md

@@ -120,7 +120,7 @@ const App = {
 
 v-model
 
-* You should use underscore (`_`) instead of dot (`.`) for modifiers (`vModel_trim={this.test}`)
+* You can use underscore (`_`) instead of dot (`.`) for modifiers (`vModel_trim={this.test}`)
 
 ```jsx
 export default {
@@ -138,6 +138,28 @@ export default {
 }
 ```
 
+* Or you can use this proposal.
+
+```jsx
+<input vModel={[val, ['trim']]} />
+```
+
+```jsx
+<A vModel={[val, 'foo', ['bar']]} />
+```
+
+Will compile to:
+
+```js
+h(A, {
+  'foo': val,
+  "fooModifiers": {
+    "bar": true
+  },
+  "onUpdate:foo": $event => val = $event
+})
+```
+
 custom directive
 
 ```jsx
@@ -146,17 +168,15 @@ const App = {
   setup() {
     return () => (
       <a
-        vCustom={{
-          value: 123,
-          modifiers: { modifier: true },
-          arg: 'arg',
-        }}
+        vCustom={[val, 'arg', ['a', 'b']]}
       />
     );
   },
 }
 ```
 
+> Note: You should pass the second param as string for using `arg`.
+
 ### Slot 
 
 ```jsx

packages/babel-plugin-jsx/src/parseDirectives.ts

@@ -0,0 +1,131 @@
+import * as t from '@babel/types';
+import { NodePath } from '@babel/traverse';
+import { createIdentifier } from './utils';
+import { State, ExcludesBoolean } from './';
+
+/**
+ * Get JSX element type
+ *
+ * @param path Path<JSXOpeningElement>
+ */
+const getType = (path: NodePath<t.JSXOpeningElement>) => {
+  const typePath = path
+    .get('attributes')
+    .find((attribute) => {
+      if (!t.isJSXAttribute(attribute)) {
+        return false;
+      }
+      return t.isJSXIdentifier(attribute.get('name'))
+        && (attribute.get('name') as NodePath<t.JSXIdentifier>).get('name') === 'type'
+        && t.isStringLiteral(attribute.get('value'))
+      },
+    );
+
+  return typePath ? typePath.get('value.value') : '';
+};
+
+const parseModifiers = (value: t.Expression) => {
+  let modifiers: string[] = [];
+  if (t.isArrayExpression(value)) {
+    modifiers = (value as t.ArrayExpression).elements.map(el => t.isStringLiteral(el) ? el.value : '').filter(Boolean)
+  }
+  return modifiers;
+}
+
+const parseDirectives = (args: {
+  name: string,
+  path: NodePath<t.JSXAttribute>,
+  value: t.StringLiteral | t.Expression | null,
+  state: State,
+  tag: t.Identifier | t.MemberExpression | t.StringLiteral | t.CallExpression,
+  isComponent: boolean
+}) => {
+  const {
+    name, path, value, state, tag, isComponent,
+  } = args
+  let modifiers: string[] = name.split('_');
+  let arg;
+  let val;
+
+  const directiveName: string = modifiers.shift()
+    ?.replace(/^v/, '')
+    .replace(/^-/, '')
+    .replace(/^\S/, (s: string) => s.toLowerCase()) || '';
+
+  if (directiveName === 'model' && !t.isJSXExpressionContainer(path.get('value'))) {
+    throw new Error('You have to use JSX Expression inside your v-model');
+  }
+
+  const hasDirective = directiveName !== 'model' || (directiveName === 'model' && !isComponent);
+
+  if (t.isArrayExpression(value)) {
+    const { elements } = value as t.ArrayExpression;
+    const [first, second, third] = elements;
+    if (t.isStringLiteral(second)) {
+      arg = second;
+      modifiers = parseModifiers(third as t.Expression);
+    } else if (second) {
+      modifiers = parseModifiers(second as t.Expression);
+    }
+    val = first;
+  }
+
+  const modifiersSet = new Set(modifiers);
+
+  return {
+    directiveName,
+    modifiers: modifiersSet,
+    value: val || value,
+    arg,
+    directive: hasDirective ? [
+      resolveDirective(path, state, tag, directiveName),
+      val as t.Identifier,
+      !!modifiersSet.size && t.unaryExpression('void', t.numericLiteral(0), true),
+      !!modifiersSet.size && t.objectExpression(
+        [...modifiersSet].map(
+          (modifier) => t.objectProperty(
+            t.identifier(modifier as string),
+            t.booleanLiteral(true),
+          ),
+        ),
+      ),
+    ].filter(Boolean as any as ExcludesBoolean) : undefined,
+  };
+};
+
+const resolveDirective = (path: NodePath<t.JSXAttribute>, state: State, tag: any, directiveName: string) => {
+  if (directiveName === 'show') {
+    return createIdentifier(state, 'vShow');
+  }
+  if (directiveName === 'model') {
+    let modelToUse;
+    const type = getType(path.parentPath as NodePath<t.JSXOpeningElement>);
+    switch (tag.value) {
+      case 'select':
+        modelToUse = createIdentifier(state, 'vModelSelect');
+        break;
+      case 'textarea':
+        modelToUse = createIdentifier(state, 'vModelText');
+        break;
+      default:
+        switch (type) {
+          case 'checkbox':
+            modelToUse = createIdentifier(state, 'vModelCheckbox');
+            break;
+          case 'radio':
+            modelToUse = createIdentifier(state, 'vModelRadio');
+            break;
+          default:
+            modelToUse = createIdentifier(state, 'vModelText');
+        }
+    }
+    return modelToUse;
+  }
+  return t.callExpression(
+    createIdentifier(state, 'resolveDirective'), [
+      t.stringLiteral(directiveName),
+    ],
+  );
+};
+
+export default parseDirectives;

packages/babel-plugin-jsx/src/transform-vue-jsx.ts

@@ -10,10 +10,10 @@ import {
   getJSXAttributeName,
   transformJSXText,
   transformJSXExpressionContainer,
-  parseDirectives,
   isFragment,
   walksScope,
 } from './utils';
+import parseDirectives from './parseDirectives';
 import { PatchFlags, PatchFlagNames } from './patchFlags';
 import { State, ExcludesBoolean } from './';
 
@@ -198,14 +198,16 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
           return;
         }
         if (isDirective(name)) {
-          const { directive, modifiers, directiveName } = parseDirectives({
+          const { directive, modifiers, value, arg, directiveName } = parseDirectives({
             tag,
             isComponent,
             name,
             path: prop,
             state,
             value: attributeValue,
           });
+          const argVal = (arg as t.StringLiteral)?.value;
+          const propName = argVal || 'modelValue';
 
           if (directiveName === 'slots') {
             slots = attributeValue;
@@ -215,16 +217,16 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
           } else {
             // must be v-model and is a component
             properties.push(t.objectProperty(
-              t.stringLiteral('modelValue'),
+              arg || t.stringLiteral('modelValue'),
               // @ts-ignore
-              attributeValue,
+              value,
             ));
 
-            dynamicPropNames.add('modelValue');
+            dynamicPropNames.add(propName);
 
             if (modifiers.size) {
               properties.push(t.objectProperty(
-                t.stringLiteral('modelModifiers'),
+                t.stringLiteral(`${argVal || 'model'}Modifiers`),
                 t.objectExpression(
                   [...modifiers].map((modifier) => (
                     t.objectProperty(
@@ -237,17 +239,19 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
             }
           }
 
-          if (directiveName === 'model' && attributeValue) {
+          console.log(value)
+
+          if (directiveName === 'model' && value) {
             properties.push(t.objectProperty(
-              t.stringLiteral('onUpdate:modelValue'),
+              t.stringLiteral(`onUpdate:${propName}`),
               t.arrowFunctionExpression(
                 [t.identifier('$event')],
                 // @ts-ignore
-                t.assignmentExpression('=', attributeValue, t.identifier('$event')),
+                t.assignmentExpression('=', value, t.identifier('$event')),
               ),
             ));
 
-            dynamicPropNames.add('onUpdate:modelValue');
+            dynamicPropNames.add(`onUpdate:${propName}`);
           }
           return;
         }