Skip to content

Commit da356e1

Browse files
chilinglingchilingling
authored
fix: generate code accessor scenario (opentiny#972)
* fix: generate code accessor scenario 修复 state accessor 出码的bug * fix: objectVal gettter value
1 parent 88986b6 commit da356e1

File tree

4 files changed

+201
-2
lines changed

4 files changed

+201
-2
lines changed

‎packages/vue-generator/src/generator/vue/sfc/generateAttribute.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,9 @@ export const handleTinyIconPropsHook = (schemaData, globalHooks, config) => {
379379

380380
export const transformObjType = (obj, globalHooks, config) => {
381381
if (!obj || typeof obj !== 'object') {
382-
return obj
382+
return {
383+
res: obj
384+
}
383385
}
384386

385387
let resStr = []
@@ -413,7 +415,18 @@ export const transformObjType = (obj, globalHooks, config) => {
413415
}
414416

415417
if (hasAccessor(value?.accessor)) {
416-
resStr.push(`${renderKey}${value.defaultValue || "''"}`)
418+
if (typeof value.defaultValue === 'string') {
419+
resStr.push(`${renderKey}"${value.defaultValue.replaceAll("'", "\\'").replaceAll(/"/g, "'")}"`)
420+
} else {
421+
const { res: tempRes, shouldBindToState: tempShouldBindToState } =
422+
transformObjType(value.defaultValue, globalHooks, config) || {}
423+
424+
resStr.push(`${renderKey}${tempRes}`)
425+
426+
if (tempShouldBindToState) {
427+
shouldBindToState = true
428+
}
429+
}
417430

418431
if (isSetter(value?.accessor)) {
419432
globalHooks.addStatement({

‎packages/vue-generator/test/testcases/sfc/accessor/accessor.test.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { expect, test } from 'vitest'
2+
import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
3+
import schema from './schema.json'
4+
import { formatCode } from '@/utils/formatCode'
5+
6+
test('should validate tagName', async () => {
7+
const res = genSFCWithDefaultPlugin(schema, [])
8+
const formattedCode = formatCode(res, 'vue')
9+
10+
await expect(formattedCode).toMatchFileSnapshot('./expected/Accessor.vue')
11+
})

‎packages/vue-generator/test/testcases/sfc/accessor/expected/Accessor.vue‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div>
3+
<span class="page-header">测试 state accessor 出码场景</span>
4+
</div>
5+
</template>
6+
7+
<script setup>
8+
import * as vue from 'vue'
9+
import { defineProps, defineEmits } from 'vue'
10+
import { I18nInjectionKey } from 'vue-i18n'
11+
12+
const props = defineProps({})
13+
14+
const emit = defineEmits([])
15+
const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
16+
const wrap = lowcodeWrap(props, { emit })
17+
wrap({ stores })
18+
19+
const state = vue.reactive({
20+
firstName: 'Opentiny',
21+
lastName: 'TinyEngine',
22+
nullValue: null,
23+
numberValue: 0,
24+
emptyStr: '',
25+
strVal: 'i am str.',
26+
trueVal: true,
27+
falseVal: false,
28+
arrVal: [1, '2', { aaa: 'aaa' }, [3, 4], true, false],
29+
objVal: { aaa: 'aaa', arr: [1, '2', true, false, 0], ccc: { bbb: 'bbb' }, d: 32432, e: '', f: null, g: false }
30+
})
31+
wrap({ state })
32+
33+
vue.watchEffect(
34+
wrap(function () {
35+
this.state.nullValue = `${this.state.firstName} ${this.state.lastName}`
36+
})
37+
)
38+
vue.watchEffect(
39+
wrap(function () {
40+
this.state.numberValue = `${this.state.firstName} ${this.state.lastName}`
41+
})
42+
)
43+
vue.watchEffect(
44+
wrap(function () {
45+
this.state.emptyStr = `${this.state.firstName} ${this.state.lastName}`
46+
})
47+
)
48+
vue.watchEffect(
49+
wrap(function () {
50+
this.state.strVal = `${this.state.firstName} ${this.state.lastName}`
51+
})
52+
)
53+
vue.watchEffect(
54+
wrap(function () {
55+
this.state.trueVal = `${this.state.firstName} ${this.state.lastName}`
56+
})
57+
)
58+
vue.watchEffect(
59+
wrap(function () {
60+
this.state.falseVal = `${this.state.firstName} ${this.state.lastName}`
61+
})
62+
)
63+
vue.watchEffect(
64+
wrap(function () {
65+
this.state.arrVal = `${this.state.firstName} ${this.state.lastName}`
66+
})
67+
)
68+
vue.watchEffect(
69+
wrap(function () {
70+
this.state.objVal = `${this.state.firstName} ${this.state.lastName}`
71+
})
72+
)
73+
</script>
74+
<style scoped></style>

‎packages/vue-generator/test/testcases/sfc/accessor/schema.json‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"componentName": "Page",
3+
"fileName": "Accessor",
4+
"css": "",
5+
"props": {},
6+
"children": [
7+
{
8+
"componentName": "Text",
9+
"props": {
10+
"className": "page-header",
11+
"text": "测试 state accessor 出码场景"
12+
}
13+
}
14+
],
15+
"state": {
16+
"firstName": "Opentiny",
17+
"lastName": "TinyEngine",
18+
"nullValue": {
19+
"defaultValue": null,
20+
"accessor": {
21+
"getter": {
22+
"type": "JSFunction",
23+
"value": "function() { this.state.nullValue = `${this.state.firstName} ${this.state.lastName}` }"
24+
}
25+
}
26+
},
27+
"numberValue": {
28+
"defaultValue": 0,
29+
"accessor": {
30+
"getter": {
31+
"type": "JSFunction",
32+
"value": "function() { this.state.numberValue = `${this.state.firstName} ${this.state.lastName}` }"
33+
}
34+
}
35+
},
36+
"emptyStr": {
37+
"defaultValue": "",
38+
"accessor": {
39+
"getter": {
40+
"type": "JSFunction",
41+
"value": "function() { this.state.emptyStr = `${this.state.firstName} ${this.state.lastName}` }"
42+
}
43+
}
44+
},
45+
"strVal": {
46+
"defaultValue": "i am str.",
47+
"accessor": {
48+
"getter": {
49+
"type": "JSFunction",
50+
"value": "function() { this.state.strVal = `${this.state.firstName} ${this.state.lastName}` }"
51+
}
52+
}
53+
},
54+
"trueVal": {
55+
"defaultValue": true,
56+
"accessor": {
57+
"getter": {
58+
"type": "JSFunction",
59+
"value": "function() { this.state.trueVal = `${this.state.firstName} ${this.state.lastName}` }"
60+
}
61+
}
62+
},
63+
"falseVal": {
64+
"defaultValue": false,
65+
"accessor": {
66+
"getter": {
67+
"type": "JSFunction",
68+
"value": "function() { this.state.falseVal = `${this.state.firstName} ${this.state.lastName}` }"
69+
}
70+
}
71+
},
72+
"arrVal": {
73+
"defaultValue": [1, "2", { "aaa": "aaa" }, [3, 4], true, false],
74+
"accessor": {
75+
"getter": {
76+
"type": "JSFunction",
77+
"value": "function() { this.state.arrVal = `${this.state.firstName} ${this.state.lastName}` }"
78+
}
79+
}
80+
},
81+
"objVal": {
82+
"defaultValue": {
83+
"aaa": "aaa",
84+
"arr": [1, "2", true, false, 0],
85+
"ccc": { "bbb": "bbb" },
86+
"d": 32432,
87+
"e": "",
88+
"f": null,
89+
"g": false
90+
},
91+
"accessor": {
92+
"getter": {
93+
"type": "JSFunction",
94+
"value": "function() { this.state.objVal = `${this.state.firstName} ${this.state.lastName}` }"
95+
}
96+
}
97+
}
98+
},
99+
"lifeCycles": {},
100+
"methods": {}
101+
}

0 commit comments

Comments
 (0)