ronantakizawa/codereview-bench huggingface dataset:
Repository: vuejs/vue-next
File: packages/reactivity/src/watch.ts (TypeScript)

Code before:
          activeWatcher = currentEffect
        }
      }
    }
  } else {
    getter = NOOP
    __DEV__ && warnInvalidSource(source)
  }

  if (cb && deep) {
    const baseGetter = getter
    const depth = deep === true ? Infinity : deep
    getter = () => traverse(baseGetter(), depth)
  }

  const scope = getCurrentScope()
  const watchHandle: WatchHandle = () => {
    effect.stop()
    if (scope) {
      remove(scope.effects, effect)
      remove(scope.cleanups, watchHandle)
    }
  }
  if (scope) {
    scope.cleanups.push(watchHandle)
  }

  if (once && cb) {
    const _cb = cb
    cb = (...args) => {
      _cb(...args)
      watchHandle()
    }
  }

  let oldValue: any = isMultiSource
    ? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE)
    : INITIAL_WATCHER_VALUE

  const job = (immediateFirstRun?: boolean) => {
    if (
      !(effect.flags & EffectFlags.ACTIVE) ||
      (!effect.dirty && !immediateFirstRun)
    ) {
      return
    }
    if (cb) {
      // watch(source, cb)
      const newValue = effect.run()
      if (
        deep ||

Review comment (suggestion):
Just a nit, could replace with `onScopeDispose(watchHandle)`

Code after:
          activeWatcher = currentEffect
        }
      }
    }
  } else {
    getter = NOOP
    __DEV__ && warnInvalidSource(source)
  }

  if (cb && deep) {
    const baseGetter = getter
    const depth = deep === true ? Infinity : deep
    getter = () => traverse(baseGetter(), depth)
  }

  const scope = getCurrentScope()
  const watchHandle: WatchHandle = () => {
    effect.stop()
    if (scope && scope.active) {
      remove(scope.effects, effect)
    }
  }

  if (once && cb) {
    const _cb = cb
    cb = (...args) => {
      _cb(...args)
      watchHandle()
    }
  }

  let oldValue: any = isMultiSource
    ? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE)
    : INITIAL_WATCHER_VALUE

  const job = (immediateFirstRun?: boolean) => {
    if (
      !(effect.flags & EffectFlags.ACTIVE) ||
      (!effect.dirty && !immediateFirstRun)
    ) {
      return
    }
    if (cb) {
      // watch(source, cb)
      const newValue = effect.run()
      if (
        deep ||
        forceTrigger ||
        (isMultiSource
          ? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i]))
          : hasChanged(newValue, oldValue))
Repository: vuejs/vue-next
File: packages/vue-compat/__tests__/misc.spec.ts (TypeScript)

Code before:

  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
  expect(vm.$el.getAttribute('draggable')).toBe('false')
  expect(vm.$el.getAttribute('spellcheck')).toBe('true')
  expect(vm.$el.getAttribute('contenteditable')).toBe('true')
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('draggable', null, 'false'),
  ).toHaveBeenWarned()
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('spellcheck', 0, 'true'),
  ).toHaveBeenWarned()
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('contenteditable', 'foo', 'true'),
  ).toHaveBeenWarned()
})

test('ATTR_ENUMERATED_COERCION: true', () => {
  const vm = new Vue({
    compatConfig: { ATTR_ENUMERATED_COERCION: true },
    template: `<div><div draggable="false">hello</div></div>`,
  }).$mount()
  expect(vm.$el.innerHTML).toBe(`<div draggable="false">hello</div>`)
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('draggable', 'false', 'false'),
  ).toHaveBeenWarned()
})


Review comment (suggestion):
The test name should be more specific. Something like:
```suggestion
test('ATTR_ENUMERATED_COERCION, coercing "false"', () => {
```

Code after:

  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
  expect(vm.$el.getAttribute('draggable')).toBe('false')
  expect(vm.$el.getAttribute('spellcheck')).toBe('true')
  expect(vm.$el.getAttribute('contenteditable')).toBe('true')
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('draggable', null, 'false'),
  ).toHaveBeenWarned()
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('spellcheck', 0, 'true'),
  ).toHaveBeenWarned()
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('contenteditable', 'foo', 'true'),
  ).toHaveBeenWarned()
})

test('ATTR_ENUMERATED_COERCION, coercing "false"', () => {
  const vm = new Vue({
    template: `<div><div draggable="false" :spellcheck="false">hello</div></div>`,
  }).$mount()
  expect(vm.$el.innerHTML).toBe(
    `<div draggable="false" spellcheck="false">hello</div>`,
  )
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('draggable', 'false', 'false'),
  ).toHaveBeenWarned()
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('spellcheck', 'false', 'false'),
  ).toHaveBeenWarned()
})
Repository: vuejs/vue-next
File: packages/vue-compat/__tests__/misc.spec.ts (TypeScript)

Code before:
  expect(vm.$el.getAttribute('spellcheck')).toBe('true')
  expect(vm.$el.getAttribute('contenteditable')).toBe('true')
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('draggable', null, 'false'),
  ).toHaveBeenWarned()
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('spellcheck', 0, 'true'),
  ).toHaveBeenWarned()
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('contenteditable', 'foo', 'true'),
  ).toHaveBeenWarned()
})

test('ATTR_ENUMERATED_COERCION: true', () => {
  const vm = new Vue({
    compatConfig: { ATTR_ENUMERATED_COERCION: true },
    template: `<div><div draggable="false">hello</div></div>`,
  }).$mount()
  expect(vm.$el.innerHTML).toBe(`<div draggable="false">hello</div>`)
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('draggable', 'false', 'false'),
  ).toHaveBeenWarned()
})


Review comment (suggestion):
I think we should also test boolean `false`. e.g.:
```suggestion
    template: `<div><div draggable="false" :spellcheck="false">hello</div></div>`,
```
Plus the relevant assertions.

Code after:
  expect(vm.$el.getAttribute('spellcheck')).toBe('true')
  expect(vm.$el.getAttribute('contenteditable')).toBe('true')
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('draggable', null, 'false'),
  ).toHaveBeenWarned()
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('spellcheck', 0, 'true'),
  ).toHaveBeenWarned()
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('contenteditable', 'foo', 'true'),
  ).toHaveBeenWarned()
})

test('ATTR_ENUMERATED_COERCION, coercing "false"', () => {
  const vm = new Vue({
    template: `<div><div draggable="false" :spellcheck="false">hello</div></div>`,
  }).$mount()
  expect(vm.$el.innerHTML).toBe(
    `<div draggable="false" spellcheck="false">hello</div>`,
  )
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('draggable', 'false', 'false'),
  ).toHaveBeenWarned()
  expect(
    (
      deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
        .message as Function
    )('spellcheck', 'false', 'false'),
  ).toHaveBeenWarned()
})
Repository: vuejs/vue-next
File: packages/reactivity/src/collectionHandlers.ts (TypeScript)

Code before:
    !isReadonly &&
      track(
        rawTarget,
        TrackOpTypes.ITERATE,
        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY,
      )
    // return a wrapped iterator which returns observed versions of the
    // values emitted from the real iterator
    return extend(
      // inheriting all iterator properties
      Object.create(innerIterator),
      {
        // iterator protocol
        next() {
          const { value, done } = innerIterator.next()
          return done
            ? { value, done }
            : {
                value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
                done,
              }
        },
        // iterable protocol
        [Symbol.iterator]() {
          return this
        },
      },
    )
  }
}

function createReadonlyMethod(type: TriggerOpTypes): Function {
  return function (this: CollectionTypes, ...args: unknown[]) {
    if (__DEV__) {
      const key = args[0] ? `on key "${args[0]}" ` : ``
      warn(
        `${capitalize(type)} operation ${key}failed: target is readonly.`,
        toRaw(this),
      )
    }
    return type === TriggerOpTypes.DELETE
      ? false
      : type === TriggerOpTypes.CLEAR
        ? undefined
        : this
  }
}

type Instrumentations = Record<string | symbol, Function | number>

function createInstrumentations(

Review comment (suggestion):
Can this part be removed? I think the inherited method will already return the appropriate `this` value.

Code after:
    !isReadonly &&
      track(
        rawTarget,
        TrackOpTypes.ITERATE,
        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY,
      )
    // return a wrapped iterator which returns observed versions of the
    // values emitted from the real iterator
    return extend(
      // inheriting all iterator properties
      Object.create(innerIterator),
      {
        // iterator protocol
        next() {
          const { value, done } = innerIterator.next()
          return done
            ? { value, done }
            : {
                value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
                done,
              }
        },
      },
    )
  }
}

function createReadonlyMethod(type: TriggerOpTypes): Function {
  return function (this: CollectionTypes, ...args: unknown[]) {
    if (__DEV__) {
      const key = args[0] ? `on key "${args[0]}" ` : ``
      warn(
        `${capitalize(type)} operation ${key}failed: target is readonly.`,
        toRaw(this),
      )
    }
    return type === TriggerOpTypes.DELETE
      ? false
      : type === TriggerOpTypes.CLEAR
        ? undefined
        : this
  }
}

type Instrumentations = Record<string | symbol, Function | number>

function createInstrumentations(
  readonly: boolean,
  shallow: boolean,
): Instrumentations {
  const instrumentations: Instrumentations = {
Repository: vuejs/vue-next
File: packages-private/dts-test/ref.test-d.ts (TypeScript)

Code before:
      ref('baz'),
      computed(() => 'hi'),
    ),
  )
})

// unref
// #8747
declare const unref1: number | Ref<number> | ComputedRef<number>
expectType<number>(unref(unref1))

// #11356
declare const unref2:
  | MaybeRef<string>
  | ShallowRef<string>
  | ComputedRef<string>
  | WritableComputedRef<string>
expectType<string>(unref(unref2))

// toValue
expectType<number>(toValue(unref1))
expectType<string>(toValue(unref2))

// useTemplateRef
const tRef = useTemplateRef('foo')
expectType<TemplateRef<unknown>>(tRef)

const tRef2 = useTemplateRef<HTMLElement>('bar')
expectType<TemplateRef<HTMLElement | null>>(tRef2)


Review comment (suggestion):
```diff
- expectType<TemplateRef<unknown>>(tRef)
+ expectType<TemplateRef>(tRef)
```

Code after:
      ref('baz'),
      computed(() => 'hi'),
    ),
  )
})

// unref
// #8747
declare const unref1: number | Ref<number> | ComputedRef<number>
expectType<number>(unref(unref1))

// #11356
declare const unref2:
  | MaybeRef<string>
  | ShallowRef<string>
  | ComputedRef<string>
  | WritableComputedRef<string>
expectType<string>(unref(unref2))

// toValue
expectType<number>(toValue(unref1))
expectType<string>(toValue(unref2))

// useTemplateRef
const tRef = useTemplateRef('foo')
expectType<TemplateRef>(tRef)

const tRef2 = useTemplateRef<HTMLElement>('bar')
expectType<TemplateRef<HTMLElement>>(tRef2)
Repository: vuejs/vue-next
File: packages-private/dts-test/ref.test-d.ts (TypeScript)

Code before:
  )
})

// unref
// #8747
declare const unref1: number | Ref<number> | ComputedRef<number>
expectType<number>(unref(unref1))

// #11356
declare const unref2:
  | MaybeRef<string>
  | ShallowRef<string>
  | ComputedRef<string>
  | WritableComputedRef<string>
expectType<string>(unref(unref2))

// toValue
expectType<number>(toValue(unref1))
expectType<string>(toValue(unref2))

// useTemplateRef
const tRef = useTemplateRef('foo')
expectType<TemplateRef<unknown>>(tRef)

const tRef2 = useTemplateRef<HTMLElement>('bar')
expectType<TemplateRef<HTMLElement | null>>(tRef2)


Review comment (suggestion):
```diff
- expectType<TemplateRef<HTMLElement | null>>(tRef2)
+ expectType<TemplateRef<HTMLElement>>(tRef2)
```

Code after:
  )
})

// unref
// #8747
declare const unref1: number | Ref<number> | ComputedRef<number>
expectType<number>(unref(unref1))

// #11356
declare const unref2:
  | MaybeRef<string>
  | ShallowRef<string>
  | ComputedRef<string>
  | WritableComputedRef<string>
expectType<string>(unref(unref2))

// toValue
expectType<number>(toValue(unref1))
expectType<string>(toValue(unref2))

// useTemplateRef
const tRef = useTemplateRef('foo')
expectType<TemplateRef>(tRef)

const tRef2 = useTemplateRef<HTMLElement>('bar')
expectType<TemplateRef<HTMLElement>>(tRef2)
Repository: vuejs/vue-next
File: packages/runtime-core/src/helpers/useTemplateRef.ts (TypeScript)

Code before:
import { type ShallowRef, readonly, shallowRef } from '@vue/reactivity'
import { getCurrentInstance } from '../component'
import { warn } from '../warning'
import { EMPTY_OBJ } from '@vue/shared'

export const knownTemplateRefs: WeakSet<ShallowRef> = new WeakSet()

export type TemplateRef<T = unknown> = Readonly<ShallowRef<T | null>>

export function useTemplateRef<T = unknown, Keys extends string = string>(
  key: Keys,
): TemplateRef<T | null> {
  const i = getCurrentInstance()
  const r = shallowRef(null)
  if (i) {
    const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs
    let desc: PropertyDescriptor | undefined
    if (
      __DEV__ &&
      (desc = Object.getOwnPropertyDescriptor(refs, key)) &&
      !desc.configurable
    ) {
      warn(`useTemplateRef('${key}') already exists.`)
    } else {
      Object.defineProperty(refs, key, {
        enumerable: true,
        get: () => r.value,
        set: val => (r.value = val),
      })
    }
  } else if (__DEV__) {
    warn(
      `useTemplateRef() is called when there is no active component ` +
        `instance to be associated with.`,
    )
  }
  const ret = __DEV__ ? readonly(r) : r

Review comment (suggestion):
```diff
- TemplateRef<T | null>
+ TemplateRef<T>
```

Code after:
import { type ShallowRef, readonly, shallowRef } from '@vue/reactivity'
import { getCurrentInstance } from '../component'
import { warn } from '../warning'
import { EMPTY_OBJ } from '@vue/shared'

export const knownTemplateRefs: WeakSet<ShallowRef> = new WeakSet()

export type TemplateRef<T = unknown> = Readonly<ShallowRef<T | null>>

export function useTemplateRef<T = unknown, Keys extends string = string>(
  key: Keys,
): TemplateRef<T> {
  const i = getCurrentInstance()
  const r = shallowRef(null)
  if (i) {
    const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs
    let desc: PropertyDescriptor | undefined
    if (
      __DEV__ &&
      (desc = Object.getOwnPropertyDescriptor(refs, key)) &&
      !desc.configurable
    ) {
      warn(`useTemplateRef('${key}') already exists.`)
    } else {
      Object.defineProperty(refs, key, {
        enumerable: true,
        get: () => r.value,
        set: val => (r.value = val),
      })
    }
  } else if (__DEV__) {
    warn(
      `useTemplateRef() is called when there is no active component ` +
        `instance to be associated with.`,
    )
  }
  const ret = __DEV__ ? readonly(r) : r
Repository: vuejs/vue-next
File: packages/runtime-core/src/helpers/useTemplateRef.ts (TypeScript)

Code before:
        set: val => (r.value = val),
      })
    }
  } else if (__DEV__) {
    warn(
      `useTemplateRef() is called when there is no active component ` +
        `instance to be associated with.`,
    )
  }
  const ret = __DEV__ ? readonly(r) : r
  if (__DEV__) {
    knownTemplateRefs.add(ret)
  }
  return ret
}

export function isUseTemplateRefKey(refs: Data, key: string): boolean {
  let desc: PropertyDescriptor | undefined
  if (
    (desc = Object.getOwnPropertyDescriptor(refs, key)) &&
    !desc.configurable
  ) {
    return true
  }

  return false
}


Review comment (suggestion):
```suggestion
  return (desc = Object.getOwnPropertyDescriptor(refs, key)) &&
    !desc.configurable
```

Code after:
import { type ShallowRef, readonly, shallowRef } from '@vue/reactivity'
import { type Data, getCurrentInstance } from '../component'
import { warn } from '../warning'
import { EMPTY_OBJ } from '@vue/shared'

export const knownTemplateRefs: WeakSet<ShallowRef> = new WeakSet()

export type TemplateRef<T = unknown> = Readonly<ShallowRef<T | null>>

export function useTemplateRef<T = unknown, Keys extends string = string>(
  key: Keys,
): TemplateRef<T> {
  const i = getCurrentInstance()
  const r = shallowRef(null)
  if (i) {
    const refs = i.refs === EMPTY_OBJ ? (i.refs = {}) : i.refs
    if (__DEV__ && isTemplateRefKey(refs, key)) {
      warn(`useTemplateRef('${key}') already exists.`)
    } else {
      Object.defineProperty(refs, key, {
        enumerable: true,
        get: () => r.value,
        set: val => (r.value = val),
      })
    }
  } else if (__DEV__) {
    warn(
      `useTemplateRef() is called when there is no active component ` +
        `instance to be associated with.`,
    )
  }
  const ret = __DEV__ ? readonly(r) : r
  if (__DEV__) {
    knownTemplateRefs.add(ret)
  }
  return ret
}

export function isTemplateRefKey(refs: Data, key: string): boolean {
  let desc: PropertyDescriptor | undefined
  return !!(
    (desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable
  )
}
Repository: vuejs/vue-next
File: packages/reactivity/__tests__/readonly.spec.ts (TypeScript)

Code before:
    expect(() => {
      obj.ror = true
    }).toThrow()
    expect(obj.ror).toBe(false)
  })

  test('replacing a readonly ref nested in a reactive object with a new ref', () => {
    const r = ref(false)
    const ror = readonly(r)
    const obj = reactive({ ror })
    obj.ror = ref(true) as unknown as boolean
    expect(obj.ror).toBe(true)
    expect(toRaw(obj).ror).not.toBe(ror) // ref successfully replaced
  })

  test('setting readonly object to writable nested ref', () => {
    const r = ref<any>()
    const obj = reactive({ r })
    const ro = readonly({})
    obj.r = ro
    expect(obj.r).toBe(ro)
    expect(r.value).toBe(ro)
  })
})

test('should able to trigger on triggerRef', () => {
  const r = shallowRef({ a: 1 })
  const ror = readonly(r)
  let dummy
  effect(() => {
    dummy = ror.value.a
  })
  r.value.a = 2
  expect(dummy).toBe(1)
  triggerRef(ror)
  expect(dummy).toBe(2)
})


Review comment (suggestion):
```suggestion
test('should be able to trigger with triggerRef', () => {
```

Code after:
    expect(() => {
      obj.ror = true
    }).toThrow()
    expect(obj.ror).toBe(false)
  })

  test('replacing a readonly ref nested in a reactive object with a new ref', () => {
    const r = ref(false)
    const ror = readonly(r)
    const obj = reactive({ ror })
    obj.ror = ref(true) as unknown as boolean
    expect(obj.ror).toBe(true)
    expect(toRaw(obj).ror).not.toBe(ror) // ref successfully replaced
  })

  test('setting readonly object to writable nested ref', () => {
    const r = ref<any>()
    const obj = reactive({ r })
    const ro = readonly({})
    obj.r = ro
    expect(obj.r).toBe(ro)
    expect(r.value).toBe(ro)
  })
})

test('should be able to trigger with triggerRef', () => {
  const r = shallowRef({ a: 1 })
  const ror = readonly(r)
  let dummy
  effect(() => {
    dummy = ror.value.a
  })
  r.value.a = 2
  expect(dummy).toBe(1)
  triggerRef(ror)
  expect(dummy).toBe(2)
})
Repository: vuejs/vue-next
File: packages/runtime-core/src/renderer.ts (TypeScript)

Code before:
            optimized,
            internals,
          )
        } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
          ;(type as typeof SuspenseImpl).process(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            namespace,
            slotScopeIds,
            optimized,
            internals,
          )
        } else if (__DEV__) {
          warn('Invalid VNode type:', type, `(${typeof type})`)
        }
    }

    // set ref
    if (ref != null && parentComponent) {
      setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
    } else if (ref == null && n1 && n1.ref != null) {
      setRef(n1.ref, n1.ref, parentSuspense, n2 || n1, true)
    }
  }

  const processText: ProcessTextOrCommentFn = (n1, n2, container, anchor) => {
    if (n1 == null) {
      hostInsert(
        (n2.el = hostCreateText(n2.children as string)),
        container,
        anchor,
      )
    } else {
      const el = (n2.el = n1.el!)
      if (n2.children !== n1.children) {
        hostSetText(el, n2.children as string)
      }
    }
  }

  const processCommentNode: ProcessTextOrCommentFn = (
    n1,
    n2,
    container,
    anchor,
  ) => {
    if (n1 == null) {

Review comment (suggestion):
```suggestion
      setRef(n1.ref, null, parentSuspense, n1, true)
```
- `oldRawRef` can be set to `null` during unset ref
- `vnode` should be n1

Code after:
            slotScopeIds,
            optimized,
            internals,
          )
        } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
          ;(type as typeof SuspenseImpl).process(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            namespace,
            slotScopeIds,
            optimized,
            internals,
          )
        } else if (__DEV__) {
          warn('Invalid VNode type:', type, `(${typeof type})`)
        }
    }

    // set ref
    if (ref != null && parentComponent) {
      setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
    } else if (ref == null && n1 && n1.ref != null) {
      setRef(n1.ref, null, parentSuspense, n1, true)
    }
  }

  const processText: ProcessTextOrCommentFn = (n1, n2, container, anchor) => {
    if (n1 == null) {
      hostInsert(
        (n2.el = hostCreateText(n2.children as string)),
        container,
        anchor,
      )
    } else {
      const el = (n2.el = n1.el!)
      if (n2.children !== n1.children) {
        hostSetText(el, n2.children as string)
      }
    }
  }

  const processCommentNode: ProcessTextOrCommentFn = (
    n1,
    n2,
    container,
    anchor,
  ) => {