diff --git a/packages/runtime-core/__tests__/h.spec.ts b/packages/runtime-core/__tests__/h.spec.ts index b55c9f4820b..4358043207f 100644 --- a/packages/runtime-core/__tests__/h.spec.ts +++ b/packages/runtime-core/__tests__/h.spec.ts @@ -1,9 +1,11 @@ -import { h } from '../src/h' +import { h, transformHArgs, resetTransformHArgs } from '../src/h' import { createVNode } from '../src/vnode' +import { ComponentInternalInstance } from '@vue/runtime-core' +import { createApp } from '@vue/runtime-dom' // Since h is a thin layer on top of createVNode, we are only testing its // own logic here. Details of vnode creation is tested in vnode.spec.ts. -describe('renderer: h', () => { +const testH = () => { test('type only', () => { expect(h('div')).toMatchObject(createVNode('div')) }) @@ -57,4 +59,62 @@ describe('renderer: h', () => { }) ) }) +} + +describe('renderer: h', testH) + +describe('renderer: transformHArgs', () => { + describe('no-op pass-through', () => { + beforeAll(() => { + transformHArgs((hArgs: unknown[]) => hArgs) + }) + + afterAll(resetTransformHArgs) + + testH() + }) + + describe('args is used directly, without merging', () => { + beforeAll(() => { + transformHArgs(() => ['h1', 'Hello World']) + }) + + afterAll(resetTransformHArgs) + + test('nodes become an h1 with text inside', () => { + expect(h('div')).toMatchObject(createVNode('h1', null, 'Hello World')) + }) + + test('resetting transformHArgs turns things back to normal', () => { + expect(h('div')).toMatchObject(createVNode('h1', null, 'Hello World')) + resetTransformHArgs() + expect(h('div')).toMatchObject(createVNode('div')) + }) + }) + + test('receives component instance as the 2nd arg', () => { + transformHArgs((_: unknown[], instance: ComponentInternalInstance) => { + return ['h1', instance.type.name] //
{ // manually written render functions. // element -export function h(type: string, children?: RawChildren): VNode -export function h( +function _h(type: string, children?: RawChildren): VNode +function _h( type: string, props?: RawProps | null, children?: RawChildren ): VNode // fragment -export function h(type: typeof Fragment, children?: VNodeArrayChildren): VNode -export function h( +function _h(type: typeof Fragment, children?: VNodeArrayChildren): VNode +function _h( type: typeof Fragment, props?: RawProps | null, children?: VNodeArrayChildren ): VNode // portal (target prop is required) -export function h( +function _h( type: typeof Portal, props: RawProps & PortalProps, children: RawChildren ): VNode // suspense -export function h(type: typeof Suspense, children?: RawChildren): VNode -export function h( +function _h(type: typeof Suspense, children?: RawChildren): VNode +function _h( type: typeof Suspense, props?: (RawProps & SuspenseProps) | null, children?: RawChildren | RawSlots ): VNode // functional component -export function h(type: FunctionalComponent, children?: RawChildren): VNode -export function h
( +function _h(type: FunctionalComponent, children?: RawChildren): VNode +function _h
( type: FunctionalComponent
,
props?: (RawProps & P) | ({} extends P ? null : never),
children?: RawChildren | RawSlots
): VNode
// stateful component
-export function h(type: ComponentOptions, children?: RawChildren): VNode
-export function h(
+function _h(type: ComponentOptions, children?: RawChildren): VNode
+function _h(
type: ComponentOptionsWithoutProps | ComponentOptionsWithArrayProps,
props?: RawProps | null,
children?: RawChildren | RawSlots
): VNode
-export function h (
+function _h(type: Constructor, children?: RawChildren): VNode
+function _h (
type: Constructor ,
props?: (RawProps & P) | ({} extends P ? null : never),
children?: RawChildren | RawSlots
): VNode
// Actual implementation
-export function h(type: any, propsOrChildren?: any, children?: any): VNode {
+function _h(type: any, propsOrChildren?: any, children?: any): VNode {
if (arguments.length === 2) {
if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
// single vnode without props
@@ -159,3 +160,24 @@ export function h(type: any, propsOrChildren?: any, children?: any): VNode {
return createVNode(type, propsOrChildren, children)
}
}
+
+export const h: typeof _h = __DEV__ ? (applyTransformedH as typeof _h) : _h
+
+let argsTransformer: Function | undefined
+
+// This is used to hook into the h function and transform its arguments
+// Useful for re-implementing behavior that was previously done with createElement in Vue 2
+function applyTransformedH(...args: unknown[]): VNode {
+ if (argsTransformer) {
+ args = argsTransformer(args, currentRenderingInstance)
+ }
+ return _h(...(args as Parameters