feat: support v-if

Author: zhiyuanzmj

eslint.config.js

@@ -1,7 +1,9 @@
 import antfu from '@antfu/eslint-config'
 
 export default antfu({
+  ignores: ['playground'],
   rules: {
+    'curly': 'off',
     'style/object-property-newline': 'off',
     'style/jsx-max-props-per-line': 'off',
     'style/jsx-curly-newline': 'off',

playground/App.vue

@@ -6,6 +6,61 @@ export default defineComponent({
   setup() {
     const count = ref(1)
 
+    const Comp = () => count.value
+      ? count.value && <div>2</div>
+      : (<div>1</div>)
+
+    const Comp1 = () => {
+      return (count.value
+        ? (Array.from({ length: count.value }).map((_, index) => (
+            index && (
+              <span>
+                {index}
+              </span>
+            )
+          )))
+        : null
+      )
+    }
+
+    const Comp2 = () => {
+      return (count.value && (
+        count.value > 9
+          ? count.value > 2 && <div>null</div>
+          : (
+            <div>
+              12333
+            </div>
+            )
+      ))
+    }
+
+    const Comp3 = () => {
+      return count.value > 1
+        ? count.value
+          ? (
+            <div>
+              1
+            </div>
+            )
+          : <div>null</div>
+        : (
+          <div>
+            2
+          </div>
+          )
+    }
+
+    const Comp4 = () => {
+      return count.value > 1
+        ? (
+          <span>
+            {count.value}
+          </span>
+          )
+        : <div>null</div>
+    }
+
     return (
       <>
         <form onSubmit_prevent>
@@ -14,6 +69,18 @@ export default defineComponent({
             onInput={count.value = $event.target.value}
           />
 
+          <div>
+            v-show:
+            <span v-show={count.value}>
+              {count.value > 1 ? 2 : 3}
+            </span>
+          </div>
+
+          <div>
+            v-text:
+            <span v-text={count.value} />
+          </div>
+
           <div>
             v-text:
             <span v-text={count.value} />
@@ -47,14 +114,59 @@ export default defineComponent({
 
           <div>
             v-for:
+
+            {
+              count.value
+              && count.value > 1
+              && (count.value === 5
+                ? (
+                  <span>
+                    1
+                  </span>
+                  )
+                : count.value === 6
+                  ? (count.value && Array.from({ length: 10 }).map(() => (
+                    <span>
+                      2
+                    </span>
+                    )))
+                  : (
+                    <div>
+                      3
+                    </div>
+                    )
+              )
+            }
+
+            {
+              Array.from({ length: 10 }).map(() => (
+                <span>
+                  1
+                </span>
+              ))
+            }
+          </div>
+
+          <div>
+            v-if:
+            {
+              count.value > 1
+                ? <span>lg 1</span>
+                : count.value > 2
+                  ? <span>lg 2</span>
+                  : <span>lt 1</span>
+            }
+            {count.value && <span> 123 </span>}
+            {count.value && Array.from({ length: 10 }).map(() => (
+              <span>
+                1
+              </span>
+            ))}
             {
-             Array.from({ length: 10 }).map(() => {
-               return (
-                 <span>
-                   1
-                 </span>
-               )
-             })
+              count.value && count.value > 1 && count.value > 2
+              && (count.value > 9
+                ? (<div>123</div>)
+                : null)
             }
           </div>
         </form>

src/core/common.ts

@@ -0,0 +1,80 @@
+import type { CallExpression, ConditionalExpression, LogicalExpression, Node } from '@babel/types'
+import type { MagicString } from '@vue-macros/common'
+
+export function addAttribute(
+  node: Node,
+  str: string,
+  s: MagicString,
+) {
+  const end = node.type === 'JSXElement'
+    ? node.openingElement.name.end!
+    : node.type === 'JSXFragment'
+      ? node.openingFragment.end! - 1
+      : null
+  if (end)
+    s.appendRight(end, str)
+}
+
+export function overwrite(
+  start: number | undefined,
+  end: number | undefined,
+  content: string,
+  s: MagicString,
+) {
+  if (start === end) {
+    s.appendRight(start!, content)
+  }
+  else {
+    s.overwrite(start!, end!, content)
+  }
+}
+
+export function getReturnExpression(
+  node: Node,
+) {
+  if (
+    node.type === 'FunctionExpression'
+    || node.type === 'ArrowFunctionExpression'
+  ) {
+    if (node.body.type !== 'BlockStatement') {
+      return node.body
+    }
+    else {
+      for (const statement of node.body.body) {
+        if (statement.type === 'ReturnStatement' && statement.argument)
+          return statement.argument
+      }
+    }
+  }
+}
+
+export function isJSXElement(node?: Node): boolean {
+  return !!node && (node.type === 'JSXElement'
+    || node.type === 'JSXFragment'
+    || isConditionalExpression(node)
+    || isLogicalExpression(node)
+    || isMapCallExpression(node)
+  )
+}
+
+export function isMapCallExpression(node: Node): node is CallExpression {
+  return node.type === 'CallExpression'
+    && node.callee.type === 'MemberExpression'
+    && node.callee.property.type === 'Identifier'
+    && node.callee.property.name === 'map'
+    && isJSXElement(
+      getReturnExpression(node.arguments[0]),
+    )
+}
+
+export function isConditionalExpression(node: Node): node is ConditionalExpression {
+  return node.type === 'ConditionalExpression' && (
+    isJSXElement(node.consequent)
+    || isJSXElement(node.alternate)
+  )
+}
+
+export function isLogicalExpression(node: Node): node is LogicalExpression {
+  return node.type === 'LogicalExpression'
+    && isJSXElement(node.right)
+}