diff --git a/packages/compiler-vapor/__tests__/transforms/_utils.ts b/packages/compiler-vapor/__tests__/transforms/_utils.ts index f246f4e4c..1b6e3f18a 100644 --- a/packages/compiler-vapor/__tests__/transforms/_utils.ts +++ b/packages/compiler-vapor/__tests__/transforms/_utils.ts @@ -16,7 +16,6 @@ export function makeCompile(options: CompilerOptions = {}) { ir: RootIRNode code: string helpers: Set - helpers: Set } => { const ast = parse(template, { prefixIdentifiers: true, diff --git a/packages/compiler-vapor/src/generators/for.ts b/packages/compiler-vapor/src/generators/for.ts index 5ee350b25..d061ec0dc 100644 --- a/packages/compiler-vapor/src/generators/for.ts +++ b/packages/compiler-vapor/src/generators/for.ts @@ -47,6 +47,7 @@ export function genFor( ] blockFn = genCall( + // @ts-expect-error helper('withDestructure'), destructureAssignmentFn, blockFn, diff --git a/packages/compiler-vapor/src/transforms/vModel.ts b/packages/compiler-vapor/src/transforms/vModel.ts index 0be18bf1a..11927da74 100644 --- a/packages/compiler-vapor/src/transforms/vModel.ts +++ b/packages/compiler-vapor/src/transforms/vModel.ts @@ -14,7 +14,7 @@ import { isStaticArgOf, } from '@vue/compiler-dom' import type { DirectiveTransform } from '../transform' -import { IRNodeTypes, type VaporHelper } from '../ir' +import { IRNodeTypes } from '../ir' export const transformVModel: DirectiveTransform = (dir, node, context) => { const { exp, arg } = dir @@ -79,7 +79,8 @@ export const transformVModel: DirectiveTransform = (dir, node, context) => { ) const { tag } = node const isCustomElement = context.options.isCustomElement(tag) - let runtimeDirective: VaporHelper | undefined = 'vModelText' + let runtimeDirective: string | undefined = 'vModelText' + // TODO let runtimeDirective: VaporHelper | undefined = 'vModelText' if ( tag === 'input' || tag === 'textarea' || diff --git a/packages/runtime-vapor/__tests__/_utils.ts b/packages/runtime-vapor/__tests__/_utils.ts index 6900fa67d..a2f66f7b8 100644 --- a/packages/runtime-vapor/__tests__/_utils.ts +++ b/packages/runtime-vapor/__tests__/_utils.ts @@ -6,7 +6,7 @@ import type { RawProps } from '../src/componentProps' export interface RenderContext { component: VaporComponent host: HTMLElement - instance: Record | undefined + instance: VaporComponentInstance | undefined app: App create: (props?: RawProps) => RenderContext mount: (container?: string | ParentNode) => RenderContext diff --git a/packages/runtime-vapor/__tests__/apiCreateSelector.spec.ts b/packages/runtime-vapor/__tests__/apiCreateSelector.spec.ts index 05f95bf08..03bf9c0f7 100644 --- a/packages/runtime-vapor/__tests__/apiCreateSelector.spec.ts +++ b/packages/runtime-vapor/__tests__/apiCreateSelector.spec.ts @@ -18,7 +18,6 @@ describe.todo('api: createSelector', () => { const isSleected = createSelector(index) return createFor( () => list.value, - // @ts-expect-error ([item]) => { const span = document.createElement('li') renderEffect(() => { @@ -28,7 +27,6 @@ describe.todo('api: createSelector', () => { }) return span }, - // @ts-expect-error item => item.id, ) }).render() @@ -75,7 +73,6 @@ describe.todo('api: createSelector', () => { ) return createFor( () => list.value, - // @ts-expect-error ([item]) => { const span = document.createElement('li') renderEffect(() => { @@ -85,7 +82,6 @@ describe.todo('api: createSelector', () => { }) return span }, - // @ts-expect-error item => item.id, ) }).render() diff --git a/packages/runtime-vapor/__tests__/componentSlots.spec.ts b/packages/runtime-vapor/__tests__/componentSlots.spec.ts index 03c96dbc1..78be11ebe 100644 --- a/packages/runtime-vapor/__tests__/componentSlots.spec.ts +++ b/packages/runtime-vapor/__tests__/componentSlots.spec.ts @@ -2,7 +2,6 @@ import { createComponent, - // @ts-expect-error createForSlots, createSlot, createVaporApp, diff --git a/packages/runtime-vapor/__tests__/dom/templateRef.spec.ts b/packages/runtime-vapor/__tests__/dom/templateRef.spec.ts index f4fb1d077..5fc64782e 100644 --- a/packages/runtime-vapor/__tests__/dom/templateRef.spec.ts +++ b/packages/runtime-vapor/__tests__/dom/templateRef.spec.ts @@ -1,8 +1,6 @@ import type { NodeRef } from '../../src/dom/templateRef' import { - // @ts-expect-error createFor, - // @ts-expect-error createIf, insert, renderEffect, @@ -359,7 +357,6 @@ describe.todo('api: template ref', () => { const n1 = t0() const n2 = createFor( () => list, - // @ts-expect-error state => { const n1 = t1() setRef(n1 as Element, listRefs, undefined, true) @@ -418,7 +415,6 @@ describe.todo('api: template ref', () => { const n1 = t0() const n2 = createFor( () => list, - // @ts-expect-error state => { const n1 = t1() setRef(n1 as Element, 'listRefs', undefined, true) @@ -475,7 +471,6 @@ describe.todo('api: template ref', () => { const n2 = n1!.nextSibling! const n3 = createFor( () => list.value, - // @ts-expect-error state => { const n4 = t1() setRef(n4 as Element, 'listRefs', undefined, true) diff --git a/packages/runtime-vapor/__tests__/for.spec.ts b/packages/runtime-vapor/__tests__/for.spec.ts index 9f50781ac..7e1ff3853 100644 --- a/packages/runtime-vapor/__tests__/for.spec.ts +++ b/packages/runtime-vapor/__tests__/for.spec.ts @@ -1,13 +1,5 @@ -import { - createFor, - nextTick, - ref, - renderEffect, - shallowRef, - template, - triggerRef, - withDestructure, -} from '../src' +import { createFor, renderEffect } from '../src' +import { nextTick, ref, shallowRef, triggerRef } from '@vue/runtime-dom' import { makeRender } from './_utils' const define = makeRender() @@ -582,26 +574,24 @@ describe.todo('createFor', () => { expectCalledTimesToBe('Clear rows', 1, 0, 0, 0) }) - test('withDestructure', () => { - const list = ref([{ name: 'a' }, { name: 'b' }, { name: 'c' }]) - - const { host } = define(() => { - const n1 = createFor( - () => list.value, - withDestructure( - ([{ name }, index]) => [name, index], - ctx => { - const span = template(`
  • ${ctx[1]}. ${ctx[0]}
    • `)() - return span - }, - ), - item => item.name, - ) - return n1 - }).render() - - expect(host.innerHTML).toBe( - '
  • 0. a
  • 1. b
  • 2. c
    • ', - ) + test.todo('withDestructure', () => { + // const list = ref([{ name: 'a' }, { name: 'b' }, { name: 'c' }]) + // const { host } = define(() => { + // const n1 = createFor( + // () => list.value, + // withDestructure( + // ([{ name }, index]) => [name, index], + // ctx => { + // const span = template(`
  • ${ctx[1]}. ${ctx[0]}
    • `)() + // return span + // }, + // ), + // item => item.name, + // ) + // return n1 + // }).render() + // expect(host.innerHTML).toBe( + // '
  • 0. a
  • 1. b
  • 2. c
    • ', + // ) }) }) diff --git a/packages/runtime-vapor/__tests__/if.spec.ts b/packages/runtime-vapor/__tests__/if.spec.ts index 2c6554cbc..7acff485a 100644 --- a/packages/runtime-vapor/__tests__/if.spec.ts +++ b/packages/runtime-vapor/__tests__/if.spec.ts @@ -2,13 +2,13 @@ import { children, createIf, insert, - nextTick, - ref, renderEffect, setText, template, + // @ts-expect-error withDirectives, } from '../src' +import { nextTick, ref } from '@vue/runtime-dom' import type { Mock } from 'vitest' import { makeRender } from './_utils' import { unmountComponent } from '../src/component' diff --git a/packages/runtime-vapor/src/apiCreateFor.ts b/packages/runtime-vapor/src/apiCreateFor.ts new file mode 100644 index 000000000..e888546c8 --- /dev/null +++ b/packages/runtime-vapor/src/apiCreateFor.ts @@ -0,0 +1,25 @@ +import type { EffectScope, ShallowRef } from '@vue/reactivity' +import type { Block, Fragment } from './block' + +interface ForBlock extends Fragment { + scope: EffectScope + state: [ + item: ShallowRef, + key: ShallowRef, + index: ShallowRef, + ] + key: any +} + +type Source = any[] | Record | number | Set | Map + +export const createFor = ( + src: () => Source, + renderItem: (block: ForBlock['state']) => Block, + getKey?: (item: any, key: any, index?: number) => any, + container?: ParentNode, + hydrationNode?: Node, + once?: boolean, +): Fragment => { + return [] as any +} diff --git a/packages/runtime-vapor/src/apiCreateIf.ts b/packages/runtime-vapor/src/apiCreateIf.ts new file mode 100644 index 000000000..7e5661124 --- /dev/null +++ b/packages/runtime-vapor/src/apiCreateIf.ts @@ -0,0 +1,11 @@ +import type { BlockFn, Fragment } from './block' + +export function createIf( + condition: () => any, + b1: BlockFn, + b2?: BlockFn, + once?: boolean, + // hydrationNode?: Node, +): Fragment { + return [] as any +} diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts index 187565145..6eb365e00 100644 --- a/packages/runtime-vapor/src/componentSlots.ts +++ b/packages/runtime-vapor/src/componentSlots.ts @@ -132,3 +132,6 @@ export function createSlot( return fragment } + +// TODO +export function createForSlots(): any {} diff --git a/packages/runtime-vapor/src/dom/templateRef.ts b/packages/runtime-vapor/src/dom/templateRef.ts index 445b4a792..b17a7eea5 100644 --- a/packages/runtime-vapor/src/dom/templateRef.ts +++ b/packages/runtime-vapor/src/dom/templateRef.ts @@ -2,6 +2,7 @@ import { type Ref, isRef, onScopeDispose } from '@vue/reactivity' import { type VaporComponentInstance, currentInstance, + getExposed, isVaporComponent, } from '../component' import { @@ -31,15 +32,10 @@ export function setRef( oldRef?: NodeRef, refFor = false, ): NodeRef | undefined { - if (!currentInstance) return - // @ts-expect-error TODO - const { setupState, isUnmounted } = currentInstance + if (!currentInstance || currentInstance.isUnmounted) return - if (isUnmounted) { - return - } - - const refValue = isVaporComponent(el) ? el.exposed || el : el + const setupState = currentInstance.setupState || {} + const refValue = isVaporComponent(el) ? getExposed(el) || el : el const refs = currentInstance.refs === EMPTY_OBJ @@ -50,7 +46,7 @@ export function setRef( if (oldRef != null && oldRef !== ref) { if (isString(oldRef)) { refs[oldRef] = null - if (setupState && hasOwn(setupState, oldRef)) { + if (hasOwn(setupState, oldRef)) { setupState[oldRef] = null } } else if (isRef(oldRef)) { diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts index 6c22332af..ae7ea7cdb 100644 --- a/packages/runtime-vapor/src/index.ts +++ b/packages/runtime-vapor/src/index.ts @@ -6,7 +6,7 @@ export { defineVaporComponent } from './apiDefineComponent' export { insert, prepend, remove } from './block' export { createComponent, createComponentWithFallback } from './component' export { renderEffect } from './renderEffect' -export { createSlot } from './componentSlots' +export { createSlot, createForSlots } from './componentSlots' export { template, children, next } from './dom/template' export { createTextNode } from './dom/node' export { setStyle } from './dom/style' @@ -21,4 +21,6 @@ export { setDynamicProps, } from './dom/prop' export { on, delegate, delegateEvents, setDynamicEvents } from './dom/event' +export { createIf } from './apiCreateIf' +export { createFor } from './apiCreateFor' export { setRef } from './dom/templateRef'