alibaba / formily

📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://formilyjs.org/
MIT License
11.32k stars 1.48k forks source link

[Bug Report] patchStateFormSchema 时 vue @update:modelValue 事件失效 #3803

Open frehaiku opened 1 year ago

frehaiku commented 1 year ago

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Input中输入字符,控制台有打印

What is expected?

正常打印@update:modelValue回调的结果

What is actually happening?

未执行,component-props 中 @update:modelValue 被编译成了 @update

Package

@formily/json-schema@2.2.22


初步排查了下,@formily/json-schema 在 patchStateFormSchema 函数做 FormPath.parse 时,产生的缺陷

https://github.com/alibaba/formily/blob/0d187111cbb59e9d32ede663c396571fe4cd5947/packages/json-schema/src/shared.ts#L193

frehaiku commented 1 year ago

单测复现:

test('vue event', () => {
  const path = Path.parse([
    "x-component-props",
     "@update:modelValue"
  ])

  expect(path.segments).toEqual([
    "x-component-props",
     "@update:modelValue"
  ])
})
janryWang commented 1 year ago

问题原因是 : 是路径语法关键字,目前有几个方案:

  1. @update:modelValue 改成 @update\:modelValue,问题是用户需要知道哪些是特殊字符,单独做转义,理解成本较高
  2. 提供一个 unescape 函数,对特殊 key 做统一转义处理,问题是,用户可能需要在很多地方引用unescape,要提高可维护性的话,需要把转义后的 key 作为常量单独存放维护
  3. 想办法优化 tokenizer 逻辑,避开:,但可能有坑