= {}
idsOfValue.forEach(id => (idMap[id] = null))
if (rawKey) idMap[rawKey] = null
if (rawIndex) idMap[rawIndex] = null
- destructureAssignmentFn = [
- '_state => {',
- INDENT_START,
- NEWLINE,
- 'const ',
+ const destructureAssignmentFn: CodeFragment[] = [
+ '(_state, ',
...genMulti(
DELIMITERS_ARRAY,
rawValue ? rawValue : rawKey || rawIndex ? '_' : undefined,
rawKey ? rawKey : rawIndex ? '__' : undefined,
rawIndex,
),
- ' = _state',
- NEWLINE,
- 'return ',
+ ' = _state) => ',
...genMulti(DELIMITERS_ARRAY, ...idsOfValue, rawKey, rawIndex),
- INDENT_END,
- NEWLINE,
- '}',
]
+
+ blockFn = genCall(
+ vaporHelper('withDestructure'),
+ destructureAssignmentFn,
+ blockFn,
+ )
}
return [
@@ -114,8 +109,7 @@ export function genFor(
getKeyFn,
false, // todo: getMemo
false, // todo: hydrationNode
- (once && 'true') || (destructureAssignmentFn && 'false'),
- destructureAssignmentFn,
+ once && 'true',
),
]
}
diff --git a/packages/runtime-vapor/__tests__/for.spec.ts b/packages/runtime-vapor/__tests__/for.spec.ts
index 2d028d069..c1d981cb2 100644
--- a/packages/runtime-vapor/__tests__/for.spec.ts
+++ b/packages/runtime-vapor/__tests__/for.spec.ts
@@ -7,6 +7,7 @@ import {
renderEffect,
shallowRef,
template,
+ withDestructure,
withDirectives,
} from '../src'
import { makeRender } from './_utils'
@@ -318,25 +319,24 @@ describe('createFor', () => {
const { host } = define(() => {
const n1 = createFor(
() => list.value,
- state => {
- const span = document.createElement('li')
- renderEffect(() => {
- const [name, key, index] = state
- span.innerHTML = `${key}. ${name}`
-
- // index should be undefined if source is not an object
- expect(index).toBe(undefined)
- })
- return span
- },
+ withDestructure(
+ state => {
+ const [{ name }, key, index] = state
+ return [name, key, index]
+ },
+ state => {
+ const span = document.createElement('li')
+ renderEffect(() => {
+ const [name, key, index] = state
+ span.innerHTML = `${key}. ${name}`
+
+ // index should be undefined if source is not an object
+ expect(index).toBe(undefined)
+ })
+ return span
+ },
+ ),
item => item.name,
- undefined,
- undefined,
- false,
- state => {
- const [{ name }, key, index] = state
- return [name, key, index]
- },
)
return n1
}).render()
diff --git a/packages/runtime-vapor/src/apiCreateFor.ts b/packages/runtime-vapor/src/apiCreateFor.ts
index 446141700..07bbd151f 100644
--- a/packages/runtime-vapor/src/apiCreateFor.ts
+++ b/packages/runtime-vapor/src/apiCreateFor.ts
@@ -26,7 +26,6 @@ import {
invokeWithUpdate,
} from './directivesChildFragment'
import type { DynamicSlot } from './componentSlots'
-import { destructuring } from './destructuring'
interface ForBlock extends Fragment {
scope: BlockEffectScope
@@ -49,7 +48,6 @@ export const createFor = (
getMemo?: (item: any, key: any, index?: number) => any[],
hydrationNode?: Node,
once?: boolean,
- assignment?: (state: any[]) => any[],
): Fragment => {
let isMounted = false
let oldBlocks: ForBlock[] = []
@@ -283,11 +281,7 @@ export const createFor = (
memo: getMemo && getMemo(item, key, index),
[fragmentKey]: true,
})
- const proxyState = proxyRefs(state)
- const itemCtx = assignment
- ? destructuring(scope, proxyState, assignment)
- : proxyState
- block.nodes = scope.run(() => renderItem(itemCtx))!
+ block.nodes = scope.run(() => renderItem(proxyRefs(state)))!
invokeWithMount(scope, () => {
// TODO v-memo
diff --git a/packages/runtime-vapor/src/destructure.ts b/packages/runtime-vapor/src/destructure.ts
new file mode 100644
index 000000000..20030dd32
--- /dev/null
+++ b/packages/runtime-vapor/src/destructure.ts
@@ -0,0 +1,19 @@
+import { shallowReactive } from '@vue/reactivity'
+import { renderEffect } from './renderEffect'
+
+export function withDestructure(
+ assign: (...args: P) => any[],
+ block: (ctx: any[]) => R,
+): (...args: P) => R {
+ return (...args: P) => {
+ const ctx = shallowReactive([])
+ renderEffect(() => {
+ const res = assign(...args)
+ const len = res.length
+ for (let i = 0; i < len; i++) {
+ ctx[i] = res[i]
+ }
+ })
+ return block(ctx)
+ }
+}
diff --git a/packages/runtime-vapor/src/destructuring.ts b/packages/runtime-vapor/src/destructuring.ts
deleted file mode 100644
index 255130dac..000000000
--- a/packages/runtime-vapor/src/destructuring.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { type EffectScope, shallowReactive } from '@vue/reactivity'
-import { renderEffect } from './renderEffect'
-
-export function destructuring(
- scope: EffectScope,
- state: any,
- fn: (state: any) => any[],
-) {
- const list = shallowReactive([])
- scope.run(() => {
- renderEffect(() => {
- const res = fn(state)
- const len = res.length
- for (let i = 0; i < len; i++) {
- list[i] = res[i]
- }
- })
- })
- return list
-}
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index 79a0b26a6..60810713e 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -135,6 +135,8 @@ export { createComponent } from './apiCreateComponent'
export { resolveComponent, resolveDirective } from './helpers/resolveAssets'
export { toHandlers } from './helpers/toHandlers'
+export { withDestructure } from './destructure'
+
// **Internal** DOM-only runtime directive helpers
export {
vModelText,