feat(compiler): support conditional & logical expression

zhiyuanzmj · zhiyuanzmj · commit e45feb70f5ec · 2024-06-30T19:01:36.000+08:00
diff --git a/.changeset/tidy-dryers-yawn.md b/.changeset/tidy-dryers-yawn.md
@@ -0,0 +1,5 @@
+---
+'unplugin-vue-jsx-vapor': patch
+---
+
+support conditional & logical expression
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - main
-      - beta
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,42 +1,3 @@
 {
-  // Enable the ESlint flat config support
-  "eslint.experimental.useFlatConfig": true,
-  "eslint.runtime": null,
-
-  // Disable the default formatter, use eslint instead
-  "prettier.enable": false,
-  "editor.formatOnSave": false,
-
-  // Auto fix
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "never"
-  },
-
-  // Silent the stylistic rules in you IDE, but still auto fix them
-  "eslint.rules.customizations": [
-    { "rule": "style/*", "severity": "off" },
-    { "rule": "*-indent", "severity": "off" },
-    { "rule": "*-spacing", "severity": "off" },
-    { "rule": "*-spaces", "severity": "off" },
-    { "rule": "*-order", "severity": "off" },
-    { "rule": "*-dangle", "severity": "off" },
-    { "rule": "*-newline", "severity": "off" },
-    { "rule": "*quotes", "severity": "off" },
-    { "rule": "*semi", "severity": "off" }
-  ],
-
-  // Enable eslint for all supported languages
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "vue",
-    "html",
-    "markdown",
-    "json",
-    "jsonc",
-    "yaml"
-  ]
+  "eslint.experimental.useFlatConfig": true
 }
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,7 +1,6 @@
 import { sxzz } from '@sxzz/eslint-config'
 
 export default sxzz({
-  ignores: ['playground'],
   rules: {
     'unicorn/filename-case': 'off',
     'import/no-default-export': 'off',
diff --git a/package.json b/package.json
@@ -126,6 +126,7 @@
   "dependencies": {
     "@babel/parser": "^7.24.7",
     "@vue-macros/common": "^1.10.4",
+    "@vue-vapor/compiler-core": "3.2024.0-4c28469",
     "@vue-vapor/compiler-dom": "3.2024.0-63dbc26",
     "@vue-vapor/compiler-vapor": "3.2024.0-63dbc26",
     "@vue-vapor/runtime-vapor": "3.2024.0-63dbc26",
diff --git a/playground/App.vue b/playground/App.vue
@@ -1,10 +1,11 @@
 <script lang="tsx">
 import { defineComponent, ref } from 'vue'
 import Count2 from './Count.vue'
+import If from './if.vue'
 
 export default defineComponent({
   setup() {
-    const count = ref(1)
+    const count = ref('1')
 
     const Count = (props) => {
       return <div>{props.value}</div>
@@ -16,14 +17,22 @@ export default defineComponent({
 
     return (
       <>
-        <input
-          value_prop={count.value}
-          onInput={(e) => (count.value = e.target.value)}
-        />
+        <fieldset>
+          <legend>Component</legend>
+          <input
+            value_prop={count.value}
+            onInput={(e) => (count.value = e.target.value)}
+          />
 
-        <Count value={count.value} />
-        <Count1 value={count.value} />
-        <Count2 value={count.value} />
+          <Count value={count.value} />
+          <Count1 value={count.value} />
+          <Count2 value={count.value} />
+        </fieldset>
+
+        <fieldset>
+          <legend>v-if</legend>
+          <If></If>
+        </fieldset>
       </>
     )
   },
diff --git a/playground/if.vue b/playground/if.vue
@@ -0,0 +1,28 @@
+<script lang="tsx">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const count = ref(1)
+
+    const Foo = () => <div style="color: red">2</div>
+
+    return (
+      <div>
+        <div>
+          {count.value === 1 ? (
+            <div>{1}</div>
+          ) : count.value === 2 ? (
+            <Foo />
+          ) : (
+            count.value >= 3 && <div>lg 3</div>
+          )}
+        </div>
+
+        <button onClick={() => count.value++}>+</button>
+        <button onClick={() => count.value--}>-</button>
+      </div>
+    )
+  },
+})
+</script>
diff --git a/playground/main.ts b/playground/main.ts
@@ -1,7 +1,7 @@
 import { createVaporApp } from 'vue/vapor'
 
-const modules = import.meta.glob<any>('./**/*.(vue|js)')
-const mod = (modules[`.${location.pathname}`] || modules['./App.vue'])()
+const modules = import.meta.glob<any>('./*.(vue|js)')
+const mod = (modules[`.${location.pathname}.vue`] || modules['./App.vue'])()
 
 mod.then(({ default: mod }) => {
   const app = createVaporApp(mod)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/core/compiler/transforms/transformText.ts b/src/core/compiler/transforms/transformText.ts
@@ -10,6 +10,7 @@ import {
   isConstantExpression,
   resolveExpression,
 } from '../utils'
+import { processConditionalExpression, processLogicalExpression } from './vIf'
 import type {
   JSXElement,
   JSXExpressionContainer,
@@ -41,7 +42,13 @@ export const transformText: NodeTransform = (node, context) => {
       context as TransformContext<JSXElement>,
     )
   } else if (node.type === 'JSXExpressionContainer') {
-    processTextLike(context as TransformContext<JSXExpressionContainer>)
+    if (node.expression.type === 'ConditionalExpression') {
+      return processConditionalExpression(node.expression, context)
+    } else if (node.expression.type === 'LogicalExpression') {
+      return processLogicalExpression(node.expression, context)
+    } else {
+      processTextLike(context as TransformContext<JSXExpressionContainer>)
+    }
   } else if (node.type === 'JSXText') {
     context.template += node.value
   }
@@ -99,5 +106,12 @@ function isAllTextLike(children: Node[]): children is TextLike[] {
 }
 
 function isTextLike(node: Node): node is TextLike {
-  return node.type === 'JSXExpressionContainer' || node.type === 'JSXText'
+  return (
+    (node.type === 'JSXExpressionContainer' &&
+      !(
+        node.expression.type === 'ConditionalExpression' ||
+        node.expression.type === 'LogicalExpression'
+      )) ||
+    node.type === 'JSXText'
+  )
 }
diff --git a/src/core/compiler/transforms/utils.ts b/src/core/compiler/transforms/utils.ts
@@ -4,6 +4,15 @@ import {
   IRNodeTypes,
 } from '@vue-vapor/compiler-vapor'
 import { createSimpleExpression } from '@vue-vapor/compiler-dom'
+import {
+  type Expression,
+  type JSXElement,
+  type JSXFragment,
+  jsxClosingFragment,
+  jsxExpressionContainer,
+  jsxFragment,
+  jsxOpeningFragment,
+} from '@babel/types'
 import type { BlockIRNode } from '../ir/index'
 
 export function newDynamic(): IRDynamicInfo {
@@ -24,4 +33,16 @@ export function newBlock(node: BlockIRNode['node']): BlockIRNode {
   }
 }
 
+export function wrapFragment(
+  node: JSXElement | JSXFragment | Expression,
+): JSXFragment {
+  if (node.type === 'JSXFragment') {
+    return node
+  }
+
+  return jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), [
+    node.type === 'JSXElement' ? node : jsxExpressionContainer(node),
+  ])
+}
+
 export const EMPTY_EXPRESSION = createSimpleExpression('', true)
diff --git a/src/core/compiler/transforms/vIf.ts b/src/core/compiler/transforms/vIf.ts
@@ -0,0 +1,96 @@
+import {
+  type BlockIRNode,
+  DynamicFlag,
+  IRNodeTypes,
+  type OperationNode,
+} from '../ir'
+import { resolveExpression } from '../utils'
+import { type TransformContext, transformNode } from '../transform'
+import { newBlock, wrapFragment } from './utils'
+import type { ConditionalExpression, LogicalExpression } from '@babel/types'
+
+export function processConditionalExpression(
+  node: ConditionalExpression,
+  context: TransformContext,
+) {
+  const { test, consequent, alternate } = node
+
+  context.dynamic.flags |= DynamicFlag.NON_TEMPLATE
+  context.dynamic.flags |= DynamicFlag.INSERT
+
+  const id = context.reference()
+  const condition = resolveExpression(test, context)
+  const [branch, onExit] = createIfBranch(consequent, context)
+  const operation: OperationNode = {
+    type: IRNodeTypes.IF,
+    id,
+    condition,
+    positive: branch,
+    once: context.inVOnce,
+  }
+
+  return [
+    () => {
+      onExit()
+      context.registerOperation(operation)
+    },
+    () => {
+      const [branch, onExit] = createIfBranch(alternate, context)
+      operation.negative = branch
+      transformNode(context)
+      onExit()
+    },
+  ]
+}
+
+export function processLogicalExpression(
+  node: LogicalExpression,
+  context: TransformContext,
+) {
+  const { left, right, operator } = node
+
+  context.dynamic.flags |= DynamicFlag.NON_TEMPLATE
+  context.dynamic.flags |= DynamicFlag.INSERT
+
+  const id = context.reference()
+  const condition = resolveExpression(left, context)
+  const [branch, onExit] = createIfBranch(
+    operator === '&&' ? right : left,
+    context,
+  )
+  const operation: OperationNode = {
+    type: IRNodeTypes.IF,
+    id,
+    condition,
+    positive: branch,
+    once: context.inVOnce,
+  }
+
+  return [
+    () => {
+      onExit()
+      context.registerOperation(operation)
+    },
+    () => {
+      const [branch, onExit] = createIfBranch(
+        operator === '&&' ? left : right,
+        context,
+      )
+      operation.negative = branch
+      transformNode(context)
+      onExit()
+    },
+  ]
+}
+
+export function createIfBranch(
+  node: Parameters<typeof wrapFragment>[0],
+  context: TransformContext,
+): [BlockIRNode, () => void] {
+  context.node = node = wrapFragment(node)
+
+  const branch: BlockIRNode = newBlock(node)
+  const exitBlock = context.enterBlock(branch)
+  context.reference()
+  return [branch, exitBlock]
+}
diff --git a/src/core/compiler/utils.ts b/src/core/compiler/utils.ts
@@ -18,10 +18,8 @@ import type { VaporDirectiveNode } from './ir'
 import type {
   BigIntLiteral,
   Expression,
-  JSXAttribute,
   JSXElement,
-  JSXIdentifier,
-  JSXText,
+  Node,
   NumericLiteral,
   SourceLocation,
   StringLiteral,
@@ -80,7 +78,7 @@ export function getLiteralExpressionValue(
 }
 
 export function resolveExpression(
-  node: JSXAttribute['value'] | JSXText | JSXIdentifier,
+  node: Node | undefined | null,
   context: TransformContext,
 ) {
   const isStatic =
@@ -101,7 +99,7 @@ export function resolveExpression(
                 node.expression.start!,
                 node.expression.end!,
               )
-          : ''
+          : context.ir.source.slice(node.start!, node.end!)
   const location = node ? node.loc : null
   let ast: false | ParseResult<Expression> = false
   if (!isStatic && context.options.prefixIdentifiers) {
diff --git a/src/core/transform.ts b/src/core/transform.ts
@@ -44,7 +44,7 @@ export function transformVueJsxVapor(
         prefixIdentifiers: false,
         inline: true,
       })
-      vaporHelpers.forEach((i) => importSet.add(`${i} as _${i}`))
+      vaporHelpers.forEach((i) => importSet.add(i))
       preamble = preamble.replace(/^[^\n]*;\n?/, '')
       if (preambles.length) {
         preamble = preamble.replaceAll(
@@ -59,7 +59,7 @@ export function transformVueJsxVapor(
   }
 
   s.prepend(
-    `import { ${Array.from(importSet).join(', ')} } from 'vue/vapor';\n${preambles.join(';\n')}`,
+    `import { ${Array.from(importSet).map((i) => `${i} as _${i}`)} } from 'vue/vapor';\n${preambles.join('\n')}`,
   )
 
   return generateTransform(s, id)
diff --git a/test/transforms/vBind.spec.ts b/test/transforms/vBind.spec.ts
diff --git a/test/transforms/vIf.spec.ts b/test/transforms/vIf.spec.ts
diff --git a/tsconfig.json b/tsconfig.json

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'unplugin-vue-jsx-vapor': patch
 +---
++
 +support conditional & logical expression