fix(packages/vue): 修复类型声明报错

Author: hezhengxu2018

.changeset/six-buckets-heal.md

@@ -0,0 +1,5 @@
+---
+'@silver-formily/vue': patch
+---
+
+修复类型声明错误

packages/vue/src/components/RecursionField.ts

@@ -1,6 +1,8 @@
 import type { GeneralField } from '@formily/core'
 import type { Slots, VNode } from 'vue'
 import type { IRecursionFieldProps, SchemaExpressionScope } from '../types'
+import type { RecursionFieldProps } from '../utils/recursionFieldProps'
+import type { NamedSlotMap } from '../utils/slotMap'
 import { Schema } from '@formily/json-schema'
 import { isFn, isValid, lazyMerge } from '@formily/shared'
 import { computed, defineComponent, Fragment, h, inject, markRaw, provide, shallowRef, watch } from 'vue'
@@ -15,13 +17,13 @@ import VoidField from './VoidField'
 
 type PropertyRenderFn = (field?: GeneralField) => VNode
 interface ScopedSlotPayload { field?: GeneralField }
-type SlotRender = (payload?: ScopedSlotPayload) => VNode[] | undefined
-type SlotMap = Record<string, SlotRender>
+type SlotRender = (payload?: ScopedSlotPayload) => VNode[]
+type SlotMap = NamedSlotMap<SlotRender>
 
 function resolveEmptySlot(slots: SlotMap) {
   const slotKeys = Object.keys(slots)
   if (!slotKeys.length)
-    return undefined
+    return null
   const children = slotKeys.reduce<VNode[]>((acc, key) => {
     const slot = slots[key]
     if (!slot)
@@ -34,15 +36,15 @@ function resolveEmptySlot(slots: SlotMap) {
     return acc
   }, [])
   if (!children.length)
-    return undefined
+    return null
   return h(Fragment, null, children)
 }
 
 const RecursionField = defineComponent({
   name: 'RecursionField',
   inheritAttrs: false,
   props: recursionFieldProps,
-  setup(props: IRecursionFieldProps) {
+  setup(props: RecursionFieldProps) {
     const parentRef = useField()
     const optionsRef = inject(SchemaOptionsSymbol)
     const scopeRef = inject(SchemaExpressionScopeSymbol)
@@ -52,7 +54,7 @@ const RecursionField = defineComponent({
     }
     const createSchema = (schemaProp: IRecursionFieldProps['schema']) =>
       markRaw(Schema.isSchemaInstance(schemaProp) ? schemaProp : new Schema(schemaProp))
-    const fieldSchemaRef = computed(() => createSchema(props.schema))
+    const fieldSchemaRef = computed<Schema>(() => createSchema(props.schema ?? {}))
 
     const getPropsFromSchema = (schema: Schema) =>
       schema?.toFieldProps?.({
@@ -173,9 +175,6 @@ const RecursionField = defineComponent({
         })
       }
 
-      if (!fieldSchemaRef.value)
-        return
-
       return render()
     }
   },

packages/vue/src/components/SchemaField.ts

@@ -1,11 +1,10 @@
 import type { ISchema, SchemaTypes } from '@formily/json-schema'
+import type { VNode } from 'vue'
 import type {
-  ISchemaFieldProps,
   ISchemaFieldVueFactoryOptions,
   SchemaExpressionScope,
   SchemaVueComponents,
 } from '../types'
-import type { MarkupSchemaProps } from '../utils/schemaFieldProps'
 import { Schema } from '@formily/json-schema'
 import { lazyMerge } from '@formily/shared'
 import { computed, defineComponent, Fragment, h, inject, provide, shallowRef, watch } from 'vue'
@@ -14,6 +13,9 @@ import { resolveSchemaProps } from '../utils/resolveSchemaProps'
 import { markupSchemaProps, schemaFieldProps } from '../utils/schemaFieldProps'
 import RecursionField from './RecursionField'
 
+type SchemaFieldProps = import('../utils/schemaFieldProps').SchemaFieldProps
+type MarkupSchemaProps = import('../utils/schemaFieldProps').MarkupSchemaProps
+
 const env = {
   nonameId: 0,
 }
@@ -29,8 +31,8 @@ export function createSchemaField<Components extends SchemaVueComponents = Schem
     name: 'SchemaField',
     inheritAttrs: false,
     props: schemaFieldProps,
-    setup(props: ISchemaFieldProps, { slots }) {
-      const schemaRef = computed(() =>
+    setup(props: SchemaFieldProps, { slots }) {
+      const schemaRef = computed<Schema>(() =>
         Schema.isSchemaInstance(props.schema)
           ? props.schema
           : new Schema({
@@ -43,7 +45,7 @@ export function createSchemaField<Components extends SchemaVueComponents = Schem
         lazyMerge({} as SchemaExpressionScope, options.scope ?? {}, props.scope ?? {}),
       )
 
-      const optionsRef = computed(() => ({
+      const optionsRef = computed<ISchemaFieldVueFactoryOptions>(() => ({
         ...options,
         components: {
           ...options.components,
@@ -58,12 +60,7 @@ export function createSchemaField<Components extends SchemaVueComponents = Schem
       return () => {
         env.nonameId = 0
 
-        const slotContent = slots.default?.()
-        const normalizedSlots = Array.isArray(slotContent)
-          ? slotContent
-          : slotContent
-            ? [slotContent]
-            : []
+        const normalizedSlots = slots.default?.() ?? []
 
         const recursionNode = h(RecursionField, {
           ...props,
@@ -83,37 +80,40 @@ export function createSchemaField<Components extends SchemaVueComponents = Schem
     },
     setup(props: MarkupSchemaProps, { slots }) {
       const parentRef = inject(SchemaMarkupSymbol, null)
-      if (!parentRef || !parentRef.value)
-        return () => null
-
-      const name = props.name || getRandomName()
-      const appendArraySchema = (schema: ISchema) => {
-        if (parentRef.value.items) {
-          return parentRef.value.addProperty(name, schema)
-        }
-        else {
-          return parentRef.value.setItems(resolveSchemaProps(props))
-        }
-      }
-
-      const schemaRef = shallowRef()
+      let render: () => VNode | null = () => null
 
-      watch(
-        parentRef,
-        () => {
-          if (parentRef.value.type === 'object' || parentRef.value.type === 'void') {
-            schemaRef.value = parentRef.value.addProperty(name, resolveSchemaProps(props))
+      if (parentRef?.value) {
+        const name = props.name || getRandomName()
+        const appendArraySchema = (schema: ISchema) => {
+          if (parentRef.value.items) {
+            return parentRef.value.addProperty(name, schema)
           }
-          else if (parentRef.value.type === 'array') {
-            const schema = appendArraySchema(resolveSchemaProps(props))
-            schemaRef.value = Array.isArray(schema) ? schema[0] : schema
+          else {
+            return parentRef.value.setItems(resolveSchemaProps(props))
           }
-        },
-        { immediate: true, flush: 'sync' },
-      )
-      provide(SchemaMarkupSymbol, schemaRef)
+        }
+
+        const schemaRef = shallowRef<Schema>(parentRef.value)
+
+        watch(
+          parentRef,
+          () => {
+            if (parentRef.value.type === 'object' || parentRef.value.type === 'void') {
+              schemaRef.value = parentRef.value.addProperty(name, resolveSchemaProps(props))
+            }
+            else if (parentRef.value.type === 'array') {
+              const schema = appendArraySchema(resolveSchemaProps(props))
+              schemaRef.value = Array.isArray(schema) ? schema[0] : schema
+            }
+          },
+          { immediate: true, flush: 'sync' },
+        )
+        provide(SchemaMarkupSymbol, schemaRef)
+
+        render = () => h(Fragment, null, slots.default?.() ?? [])
+      }
 
-      return () => h(Fragment, null, slots.default?.() ?? [])
+      return render
     },
   })
 

packages/vue/src/utils/reactiveFieldHelpers.ts

@@ -1,5 +1,6 @@
 import type { GeneralField } from '@formily/core'
 import type { Component, Slot, Slots, VNode } from 'vue'
+import type { NamedSlotMap } from './slotMap'
 import { createTextVNode, Fragment, h } from 'vue'
 
 interface VueLikeOptions {
@@ -9,7 +10,7 @@ interface VueLikeOptions {
 }
 
 type SlotContent = string | Component | null | undefined
-type SlotContentMap = Record<string, SlotContent>
+type SlotContentMap = NamedSlotMap<SlotContent>
 type FieldContent = SlotContent | SlotContentMap | null | undefined
 
 type EventHandler = (...args: unknown[]) => unknown
@@ -140,7 +141,7 @@ export function mergeSlots(field: GeneralField, slots: Slots, content: FieldCont
         return slots[slotName]?.({ field, form: field.form, ...scopedProps }) ?? []
       }
 
-  const patchedSlots: Record<string, Slot> = {}
+  const patchedSlots: NamedSlotMap<Slot> = {}
   slotNames.forEach((name) => {
     patchedSlots[name] = patchSlot(name)
   })

packages/vue/src/utils/slotMap.ts

@@ -0,0 +1 @@
+export type NamedSlotMap<T> = Record<string, T>