feat(compiler): support conditional & logical expression

Author: zhiyuanzmj

.changeset/tidy-dryers-yawn.md

@@ -0,0 +1,5 @@
+---
+'unplugin-vue-jsx-vapor': patch
+---
+
+support conditional & logical expression

.github/workflows/release.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - main
-      - beta
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

.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
 }

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',

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",

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>
       </>
     )
   },

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>

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)

pnpm-lock.yaml

@@ -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'
+  )
 }