-import type { EffectScope, ShallowRef } from '@vue/reactivity'
-import type { Block, Fragment } from './block'
-
-interface ForBlock extends Fragment {
- scope: EffectScope
- state: [
- item: ShallowRef<any>,
- key: ShallowRef<any>,
- index: ShallowRef<number | undefined>,
- ]
+import { EffectScope, type ShallowRef, shallowRef } from '@vue/reactivity'
+import { getSequence, isArray, isObject, isString } from '@vue/shared'
+import { createComment, createTextNode } from './dom/node'
+import { type Block, Fragment, insert, remove as removeBlock } from './block'
+import { warn } from '@vue/runtime-dom'
+import { currentInstance, isVaporComponent } from './component'
+import type { DynamicSlot } from './componentSlots'
+import { renderEffect } from './renderEffect'
+
+type ForBlockState = [
+ item: ShallowRef<any>,
+ key: ShallowRef<any>,
+ index: ShallowRef<number | undefined>,
+]
+
+class ForBlock extends Fragment {
+ scope: EffectScope | undefined
+ state: ForBlockState
key: any
+
+ constructor(
+ nodes: Block,
+ scope: EffectScope | undefined,
+ state: ForBlockState,
+ key: any,
+ ) {
+ super(nodes)
+ this.scope = scope
+ this.state = state
+ this.key = key
+ }
}
type Source = any[] | Record<any, any> | number | Set<any> | Map<any, any>
+/*! #__NO_SIDE_EFFECTS__ */
export const createFor = (
src: () => Source,
renderItem: (block: ForBlock['state']) => Block,
getKey?: (item: any, key: any, index?: number) => any,
- container?: ParentNode,
- hydrationNode?: Node,
+ /**
+ * Whether this v-for is used directly on a component. If true, we can avoid
+ * creating an extra fragment / scope for each block
+ */
+ isComponent = false,
once?: boolean,
+ // hydrationNode?: Node,
): Fragment => {
- return [] as any
+ let isMounted = false
+ let oldBlocks: ForBlock[] = []
+ let newBlocks: ForBlock[]
+ let parent: ParentNode | undefined | null
+ const parentAnchor = __DEV__ ? createComment('for') : createTextNode()
+ const ref = new Fragment(oldBlocks)
+ const instance = currentInstance!
+
+ if (__DEV__ && !instance) {
+ warn('createFor() can only be used inside setup()')
+ }
+
+ const renderList = () => {
+ const source = src()
+ const newLength = getLength(source)
+ const oldLength = oldBlocks.length
+ newBlocks = new Array(newLength)
+
+ if (!isMounted) {
+ isMounted = true
+ for (let i = 0; i < newLength; i++) {
+ mount(source, i)
+ }
+ } else {
+ parent = parent || parentAnchor!.parentNode
+ if (!oldLength) {
+ // fast path for all new
+ for (let i = 0; i < newLength; i++) {
+ mount(source, i)
+ }
+ } else if (!newLength) {
+ // fast path for clearing
+ for (let i = 0; i < oldLength; i++) {
+ unmount(oldBlocks[i])
+ }
+ } else if (!getKey) {
+ // unkeyed fast path
+ const commonLength = Math.min(newLength, oldLength)
+ for (let i = 0; i < commonLength; i++) {
+ const [item] = getItem(source, i)
+ update((newBlocks[i] = oldBlocks[i]), item)
+ }
+ for (let i = oldLength; i < newLength; i++) {
+ mount(source, i)
+ }
+ for (let i = newLength; i < oldLength; i++) {
+ unmount(oldBlocks[i])
+ }
+ } else {
+ let i = 0
+ let e1 = oldLength - 1 // prev ending index
+ let e2 = newLength - 1 // next ending index
+
+ // 1. sync from start
+ // (a b) c
+ // (a b) d e
+ while (i <= e1 && i <= e2) {
+ if (tryPatchIndex(source, i)) {
+ i++
+ } else {
+ break
+ }
+ }
+
+ // 2. sync from end
+ // a (b c)
+ // d e (b c)
+ while (i <= e1 && i <= e2) {
+ if (tryPatchIndex(source, i)) {
+ e1--
+ e2--
+ } else {
+ break
+ }
+ }
+
+ // 3. common sequence + mount
+ // (a b)
+ // (a b) c
+ // i = 2, e1 = 1, e2 = 2
+ // (a b)
+ // c (a b)
+ // i = 0, e1 = -1, e2 = 0
+ if (i > e1) {
+ if (i <= e2) {
+ const nextPos = e2 + 1
+ const anchor =
+ nextPos < newLength
+ ? normalizeAnchor(newBlocks[nextPos].nodes)
+ : parentAnchor
+ while (i <= e2) {
+ mount(source, i, anchor)
+ i++
+ }
+ }
+ }
+
+ // 4. common sequence + unmount
+ // (a b) c
+ // (a b)
+ // i = 2, e1 = 2, e2 = 1
+ // a (b c)
+ // (b c)
+ // i = 0, e1 = 0, e2 = -1
+ else if (i > e2) {
+ while (i <= e1) {
+ unmount(oldBlocks[i])
+ i++
+ }
+ }
+
+ // 5. unknown sequence
+ // [i ... e1 + 1]: a b [c d e] f g
+ // [i ... e2 + 1]: a b [e d c h] f g
+ // i = 2, e1 = 4, e2 = 5
+ else {
+ const s1 = i // prev starting index
+ const s2 = i // next starting index
+
+ // 5.1 build key:index map for newChildren
+ const keyToNewIndexMap = new Map()
+ for (i = s2; i <= e2; i++) {
+ keyToNewIndexMap.set(getKey(...getItem(source, i)), i)
+ }
+
+ // 5.2 loop through old children left to be patched and try to patch
+ // matching nodes & remove nodes that are no longer present
+ let j
+ let patched = 0
+ const toBePatched = e2 - s2 + 1
+ let moved = false
+ // used to track whether any node has moved
+ let maxNewIndexSoFar = 0
+ // works as Map<newIndex, oldIndex>
+ // Note that oldIndex is offset by +1
+ // and oldIndex = 0 is a special value indicating the new node has
+ // no corresponding old node.
+ // used for determining longest stable subsequence
+ const newIndexToOldIndexMap = new Array(toBePatched).fill(0)
+
+ for (i = s1; i <= e1; i++) {
+ const prevBlock = oldBlocks[i]
+ if (patched >= toBePatched) {
+ // all new children have been patched so this can only be a removal
+ unmount(prevBlock)
+ } else {
+ const newIndex = keyToNewIndexMap.get(prevBlock.key)
+ if (newIndex == null) {
+ unmount(prevBlock)
+ } else {
+ newIndexToOldIndexMap[newIndex - s2] = i + 1
+ if (newIndex >= maxNewIndexSoFar) {
+ maxNewIndexSoFar = newIndex
+ } else {
+ moved = true
+ }
+ update(
+ (newBlocks[newIndex] = prevBlock),
+ ...getItem(source, newIndex),
+ )
+ patched++
+ }
+ }
+ }
+
+ // 5.3 move and mount
+ // generate longest stable subsequence only when nodes have moved
+ const increasingNewIndexSequence = moved
+ ? getSequence(newIndexToOldIndexMap)
+ : []
+ j = increasingNewIndexSequence.length - 1
+ // looping backwards so that we can use last patched node as anchor
+ for (i = toBePatched - 1; i >= 0; i--) {
+ const nextIndex = s2 + i
+ const anchor =
+ nextIndex + 1 < newLength
+ ? normalizeAnchor(newBlocks[nextIndex + 1].nodes)
+ : parentAnchor
+ if (newIndexToOldIndexMap[i] === 0) {
+ // mount new
+ mount(source, nextIndex, anchor)
+ } else if (moved) {
+ // move if:
+ // There is no stable subsequence (e.g. a reverse)
+ // OR current node is not among the stable sequence
+ if (j < 0 || i !== increasingNewIndexSequence[j]) {
+ insert(newBlocks[nextIndex].nodes, parent!, anchor)
+ } else {
+ j--
+ }
+ }
+ }
+ }
+ }
+ }
+
+ ref.nodes = [(oldBlocks = newBlocks)]
+ if (parentAnchor) {
+ ref.nodes.push(parentAnchor)
+ }
+ }
+
+ const mount = (
+ source: any,
+ idx: number,
+ anchor: Node | undefined = parentAnchor,
+ ): ForBlock => {
+ const [item, key, index] = getItem(source, idx)
+ const state = [
+ shallowRef(item),
+ shallowRef(key),
+ shallowRef(index),
+ ] as ForBlock['state']
+
+ let nodes: Block
+ let scope: EffectScope | undefined
+ if (isComponent) {
+ // component already has its own scope so no outer scope needed
+ nodes = renderItem(state)
+ } else {
+ scope = new EffectScope()
+ nodes = scope.run(() => renderItem(state))!
+ }
+
+ const block = (newBlocks[idx] = new ForBlock(
+ nodes,
+ scope,
+ state,
+ getKey && getKey(item, key, index),
+ ))
+
+ if (parent) insert(block.nodes, parent, anchor)
+
+ return block
+ }
+
+ const tryPatchIndex = (source: any, idx: number) => {
+ const block = oldBlocks[idx]
+ const [item, key, index] = getItem(source, idx)
+ if (block.key === getKey!(item, key, index)) {
+ update((newBlocks[idx] = block), item)
+ return true
+ }
+ }
+
+ const update = (
+ block: ForBlock,
+ newItem: any,
+ newKey = block.state[1].value,
+ newIndex = block.state[2].value,
+ ) => {
+ const [item, key, index] = block.state
+ if (
+ newItem !== item.value ||
+ newKey !== key.value ||
+ newIndex !== index.value
+ ) {
+ item.value = newItem
+ key.value = newKey
+ index.value = newIndex
+ }
+ }
+
+ const unmount = ({ nodes, scope }: ForBlock) => {
+ removeBlock(nodes, parent!)
+ scope && scope.stop()
+ }
+
+ once ? renderList() : renderEffect(renderList)
+ return ref
+}
+
+export function createForSlots(
+ source: any[] | Record<any, any> | number | Set<any> | Map<any, any>,
+ getSlot: (item: any, key: any, index?: number) => DynamicSlot,
+): DynamicSlot[] {
+ const sourceLength = getLength(source)
+ const slots = new Array<DynamicSlot>(sourceLength)
+ for (let i = 0; i < sourceLength; i++) {
+ const [item, key, index] = getItem(source, i)
+ slots[i] = getSlot(item, key, index)
+ }
+ return slots
+}
+
+function getLength(source: any): number {
+ if (isArray(source) || isString(source)) {
+ return source.length
+ } else if (typeof source === 'number') {
+ if (__DEV__ && !Number.isInteger(source)) {
+ warn(`The v-for range expect an integer value but got ${source}.`)
+ }
+ return source
+ } else if (isObject(source)) {
+ if (source[Symbol.iterator as any]) {
+ return Array.from(source as Iterable<any>).length
+ } else {
+ return Object.keys(source).length
+ }
+ }
+ return 0
+}
+
+function getItem(
+ source: any,
+ idx: number,
+): [item: any, key: any, index?: number] {
+ if (isArray(source) || isString(source)) {
+ return [source[idx], idx, undefined]
+ } else if (typeof source === 'number') {
+ return [idx + 1, idx, undefined]
+ } else if (isObject(source)) {
+ if (source[Symbol.iterator as any]) {
+ source = Array.from(source as Iterable<any>)
+ return [source[idx], idx, undefined]
+ } else {
+ const key = Object.keys(source)[idx]
+ return [source[key], key, idx]
+ }
+ }
+ return null!
+}
+
+function normalizeAnchor(node: Block): Node {
+ if (node instanceof Node) {
+ return node
+ } else if (isArray(node)) {
+ return normalizeAnchor(node[0])
+ } else if (isVaporComponent(node)) {
+ return normalizeAnchor(node.block!)
+ } else {
+ return normalizeAnchor(node.nodes!)
+ }
}
projects / thirdparty / vuejs / core.git / commitdiff
