Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(runtime-core): Select elements can preserve data types when stringified #7434

Closed
wants to merge 32 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
5e07023
fix(runtime-core): Select elements can preserve data types when strin…
baiwusanyu-c Dec 30, 2022
8bc8aea
fix(runtime-core): update stringifyStatic snap
baiwusanyu-c Dec 30, 2022
b499c5e
Merge branch 'vuejs:main' into bwsy/fix/stringify
baiwusanyu-c Jan 2, 2023
d773c93
Merge branch 'vuejs:main' into bwsy/fix/stringify
baiwusanyu-c Jan 9, 2023
3b18d57
Merge branch 'vuejs:main' into bwsy/fix/stringify
baiwusanyu-c Jan 14, 2023
f9db15c
Merge remote-tracking branch 'origin/main' into bwsy/fix/stringify
baiwusanyu-c Feb 4, 2023
ff6a84a
Merge remote-tracking branch 'origin/main' into bwsy/fix/stringify
baiwusanyu-c Feb 4, 2023
3639131
Merge remote-tracking branch 'origin/main' into bwsy/fix/stringify
baiwusanyu-c Feb 4, 2023
9474ad1
Merge branch 'vuejs:main' into bwsy/fix/stringify
baiwusanyu-c Feb 6, 2023
7f41475
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Feb 14, 2023
b127f26
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Feb 21, 2023
3c60a87
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Feb 22, 2023
c5a8eca
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Mar 17, 2023
30d0d43
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Mar 20, 2023
d24ba26
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Mar 23, 2023
c415819
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Mar 27, 2023
550e9d6
Merge remote-tracking branch 'origin/main' into bwsy/fix/stringify
baiwusanyu-c Apr 5, 2023
fe937e1
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Apr 6, 2023
c4e67e2
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Apr 10, 2023
cbda4c1
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Apr 12, 2023
fd55df5
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Apr 14, 2023
b9ba21e
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Apr 17, 2023
2c3e92f
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Apr 19, 2023
040d86d
Merge branch 'vuejs:main' into bwsy/fix/stringify
baiwusanyu-c Apr 20, 2023
a064272
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Apr 20, 2023
94bdb9f
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c May 4, 2023
b93d2e1
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c May 16, 2023
1003caa
Merge branch 'main' into bwsy/fix/stringify
baiwusanyu-c Jun 6, 2023
57b250d
Merge remote-tracking branch 'origin/main' into bwsy/fix/stringify
baiwusanyu-c Jan 3, 2024
c48ea87
[autofix.ci] apply automated fixes
autofix-ci[bot] Jan 3, 2024
f9fe1fb
chore: updaed unit test snap
baiwusanyu-c Jan 3, 2024
60a5b98
chore: updaed unit test snap
baiwusanyu-c Jan 3, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`stringify static html > Select elements can preserve data types when stringified 1`] = `
"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue

const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<option value=\\"string\\" v-stringify-type='string'>string</option><option value=\\"false\\" v-stringify-type='boolean'>boolean</option><option value=\\"1\\" v-stringify-type='number'>number 1</option><option value=\\"2\\" v-stringify-type='number'>number 2</option><option v-stringify-type='null'>null</option>", 5)

return function render(_ctx, _cache) {
return _hoisted_1
}"
`;

exports[`stringify static html > should bail on bindings that are hoisted but not stringifiable 1`] = `
"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue

Expand Down
13 changes: 13 additions & 0 deletions packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -485,4 +485,17 @@ describe('stringify static html', () => {
expect(code).toMatch(`<code>text1</code>`)
expect(code).toMatchSnapshot()
})

// #6568
test('Select elements can preserve data types when stringified', () => {
const { code } = compileWithStringify(`
<option :value="'string'">string</option>
<option :value="false">boolean</option>
<option :value="1">number 1</option>
<option :value="2">number 2</option>
<option :value="null">null</option>
`)

expect(code).toMatchSnapshot()
})
})
6 changes: 6 additions & 0 deletions packages/compiler-dom/src/transforms/stringifyStatic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,12 @@ function stringifyElement(
res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
evaluated,
)}"`
if (typeof evaluated !== 'object' && node.tag === 'option') {
res += ` v-stringify-type='${typeof evaluated}'`
}
}
if (evaluated === null && node.tag === 'option') {
res += ` v-stringify-type='${'null'}'`
}
} else if (p.name === 'html') {
// #5439 v-html with constant value
Expand Down
58 changes: 58 additions & 0 deletions packages/runtime-dom/__tests__/directives/vModel.spec.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
type VNode,
createStaticVNode,
defineComponent,
h,
nextTick,
Expand Down Expand Up @@ -1227,4 +1228,61 @@ describe('vModel', () => {
await nextTick()
expect(data.value).toEqual('使用拼音输入')
})

it(`After the select tag is stringified,
v-model can get the correct type`, async () => {
const hoist = createStaticVNode(
"<option value=\"string\" v-stringify-type='string'>string</option><option value=\"false\" v-stringify-type='boolean'>bool</option><option value=\"1\" v-stringify-type='number'>number</option><option value=\"2\" v-stringify-type='number'>number</option><option v-stringify-type='null'>null</option>",
5,
)
const component = defineComponent({
data() {
return { value: '' }
},
render() {
return [
withVModel(
h(
'select',
{
value: null,
'onUpdate:modelValue': setValue.bind(this),
},
[hoist],
),
this.value,
),
]
},
})
render(h(component), root)

await nextTick()
const input = root.querySelector('select')
const optionList = root.querySelectorAll('option')
const data = root._vnode.component.data

optionList[0].selected = true
triggerEvent('change', input)
await nextTick()
expect(data.value).toBe('string')

optionList[0].selected = false
optionList[1].selected = true
triggerEvent('change', input)
await nextTick()
expect(data.value).toBe(false)

optionList[1].selected = false
optionList[2].selected = true
triggerEvent('change', input)
await nextTick()
expect(data.value).toBe(1)

optionList[2].selected = false
optionList[4].selected = true
triggerEvent('change', input)
await nextTick()
expect(data.value).toBe(null)
})
})
13 changes: 12 additions & 1 deletion packages/runtime-dom/src/directives/vModel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,18 @@ function setSelected(el: HTMLSelectElement, value: any) {

// retrieve raw value set via :value bindings
function getValue(el: HTMLOptionElement | HTMLInputElement) {
return '_value' in el ? (el as any)._value : el.value
let value = '_value' in el ? (el as any)._value : el.value
let stringifyType = el.getAttribute('v-stringify-type')
if (stringifyType === 'number') {
return Number(value)
}
if (stringifyType === 'boolean') {
return value !== 'false'
}
if (stringifyType === 'null') {
return null
}
return value
}

// retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
Expand Down
Loading