fix: generate code accessor scenario

修复 state accessor 出码的bug
opentiny · Dec 27, 2024 · d040e6b · d040e6b
1 parent 7f05029
commit d040e6b
Show file tree

Hide file tree

Showing 4 changed files with 196 additions and 2 deletions.
diff --git a/packages/vue-generator/src/generator/vue/sfc/generateAttribute.js b/packages/vue-generator/src/generator/vue/sfc/generateAttribute.js
@@ -379,7 +379,9 @@ export const handleTinyIconPropsHook = (schemaData, globalHooks, config) => {
 
 export const transformObjType = (obj, globalHooks, config) => {
   if (!obj || typeof obj !== 'object') {
-    return obj
+    return {
+      res: obj
+    }
   }
 
   let resStr = []
@@ -413,7 +415,18 @@ export const transformObjType = (obj, globalHooks, config) => {
     }
 
     if (hasAccessor(value?.accessor)) {
-      resStr.push(`${renderKey}${value.defaultValue || "''"}`)
+      if (typeof value.defaultValue === 'string') {
+        resStr.push(`${renderKey}"${value.defaultValue.replaceAll("'", "\\'").replaceAll(/"/g, "'")}"`)
+      } else {
+        const { res: tempRes, shouldBindToState: tempShouldBindToState } =
+          transformObjType(value.defaultValue, globalHooks, config) || {}
+
+        resStr.push(`${renderKey}${tempRes}`)
+
+        if (tempShouldBindToState) {
+          shouldBindToState = true
+        }
+      }
 
       if (isSetter(value?.accessor)) {
         globalHooks.addStatement({

diff --git a/packages/vue-generator/test/testcases/sfc/accessor/accessor.test.js b/packages/vue-generator/test/testcases/sfc/accessor/accessor.test.js
@@ -0,0 +1,11 @@
+import { expect, test } from 'vitest'
+import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
+import schema from './schema.json'
+import { formatCode } from '@/utils/formatCode'
+
+test('should validate tagName', async () => {
+  const res = genSFCWithDefaultPlugin(schema, [])
+  const formattedCode = formatCode(res, 'vue')
+
+  await expect(formattedCode).toMatchFileSnapshot('./expected/Accessor.vue')
+})
diff --git a/packages/vue-generator/test/testcases/sfc/accessor/expected/Accessor.vue b/packages/vue-generator/test/testcases/sfc/accessor/expected/Accessor.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <span class="page-header">测试 state accessor 出码场景</span>
+  </div>
+</template>
+
+<script setup>
+import * as vue from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { I18nInjectionKey } from 'vue-i18n'
+
+const props = defineProps({})
+
+const emit = defineEmits([])
+const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
+const wrap = lowcodeWrap(props, { emit })
+wrap({ stores })
+
+const state = vue.reactive({
+  firstName: 'Opentiny',
+  lastName: 'TinyEngine',
+  nullValue: null,
+  numberValue: 0,
+  emptyStr: '',
+  strVal: 'i am str.',
+  trueVal: true,
+  falseVal: false,
+  arrVal: [1, '2', { aaa: 'aaa' }, [3, 4], true, false],
+  objVal: { aaa: 'aaa', arr: [1, '2', true, false, 0], ccc: { bbb: 'bbb' }, d: 32432, e: '', f: null, g: false }
+})
+wrap({ state })
+
+vue.watchEffect(
+  wrap(function () {
+    this.state.nullValue = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
+vue.watchEffect(
+  wrap(function () {
+    this.state.numberValue = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
+vue.watchEffect(
+  wrap(function () {
+    this.state.emptyStr = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
+vue.watchEffect(
+  wrap(function () {
+    this.state.strVal = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
+vue.watchEffect(
+  wrap(function () {
+    this.state.trueVal = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
+vue.watchEffect(
+  wrap(function () {
+    this.state.falseVal = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
+vue.watchEffect(
+  wrap(function () {
+    this.state.arrVal = `${this.state.firstName} ${this.state.lastName}`
+  })
+)
+</script>
+<style scoped></style>
diff --git a/packages/vue-generator/test/testcases/sfc/accessor/schema.json b/packages/vue-generator/test/testcases/sfc/accessor/schema.json
@@ -0,0 +1,101 @@
+{
+  "componentName": "Page",
+  "fileName": "Accessor",
+  "css": "",
+  "props": {},
+  "children": [
+    {
+      "componentName": "Text",
+      "props": {
+        "className": "page-header",
+        "text": "测试 state accessor 出码场景"
+      }
+    }
+  ],
+  "state": {
+    "firstName": "Opentiny",
+    "lastName": "TinyEngine",
+    "nullValue": {
+      "defaultValue": null,
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.nullValue = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    },
+    "numberValue": {
+      "defaultValue": 0,
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.numberValue = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    },
+    "emptyStr": {
+      "defaultValue": "",
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.emptyStr = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    },
+    "strVal": {
+      "defaultValue": "i am str.",
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.strVal = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    },
+    "trueVal": {
+      "defaultValue": true,
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.trueVal = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    },
+    "falseVal": {
+      "defaultValue": false,
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.falseVal = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    },
+    "arrVal": {
+      "defaultValue": [1, "2", { "aaa": "aaa" }, [3, 4], true, false],
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.arrVal = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    },
+    "objVal": {
+      "defaultValue": {
+        "aaa": "aaa",
+        "arr": [1, "2", true, false, 0],
+        "ccc": { "bbb": "bbb" },
+        "d": 32432,
+        "e": "",
+        "f": null,
+        "g": false
+      },
+      "accessor": {
+        "getter": {
+          "type": "JSFunction",
+          "value": "function() { this.state.falseVal = `${this.state.firstName} ${this.state.lastName}` }"
+        }
+      }
+    }
+  },
+  "lifeCycles": {},
+  "methods": {}
+}