|
|
@@ -1,25 +1,382 @@
|
|
|
-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!)
|
|
|
+ }
|
|
|
}
|
Evan You