-import { h, transformHArgs, resetTransformHArgs } from '../src/h'
+import { h } 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.
-const testH = () => {
+describe('renderer: h', () => {
test('type only', () => {
expect(h('div')).toMatchObject(createVNode('div'))
})
})
)
})
-}
-
-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] // <h1>{{ name }}</h1>
- })
-
- const vm = createApp({
- // this will be the name of the component in the h1
- name: 'Root Component',
- render() {
- return h({
- // this code will never execute,
- // because it is overridden by the transformHArgs method
- render() {
- return h('h2', 'Stub Text')
- }
- })
- }
- })
-
- // we need to mount everything so that the instance passed to
- // transformHArgs isn't null
- vm.mount('body')
-
- expect(document.body.outerHTML).toContain('<h1>Root Component</h1>')
- })
})
Text,
cloneVNode,
mergeProps,
- normalizeVNode
+ normalizeVNode,
+ transformVNodeArgs
} from '../src/vnode'
import { Data } from '../src/component'
import { ShapeFlags, PatchFlags } from '@vue/shared'
+import { h } from '../src'
+import { createApp, nodeOps, serializeInner } from '@vue/runtime-test'
describe('vnode', () => {
test('create with just tag', () => {
expect(vnode.dynamicChildren).toStrictEqual([vnode1])
})
})
+
+ describe('transformVNodeArgs', () => {
+ afterEach(() => {
+ // reset
+ transformVNodeArgs()
+ })
+
+ test('no-op pass through', () => {
+ transformVNodeArgs(args => args)
+ const vnode = createVNode('div', { id: 'foo' }, 'hello')
+ expect(vnode).toMatchObject({
+ type: 'div',
+ props: { id: 'foo' },
+ children: 'hello',
+ shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN
+ })
+ })
+
+ test('direct override', () => {
+ transformVNodeArgs(() => ['div', { id: 'foo' }, 'hello'])
+ const vnode = createVNode('p')
+ expect(vnode).toMatchObject({
+ type: 'div',
+ props: { id: 'foo' },
+ children: 'hello',
+ shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN
+ })
+ })
+
+ test('receive component instance as 2nd arg', () => {
+ transformVNodeArgs((args, instance) => {
+ if (instance) {
+ return ['h1', null, instance.type.name]
+ } else {
+ return args
+ }
+ })
+ const App = {
+ // this will be the name of the component in the h1
+ name: 'Root Component',
+ render() {
+ return h('p') // this will be overwritten by the transform
+ }
+ }
+ const root = nodeOps.createElement('div')
+ createApp(App).mount(root)
+ expect(serializeInner(root)).toBe('<h1>Root Component</h1>')
+ })
+ })
})
ComponentOptions
} from './apiOptions'
import { ExtractPropTypes } from './componentProps'
-import { currentRenderingInstance } from './componentRenderUtils'
// `h` is a more user-friendly version of `createVNode` that allows omitting the
// props when possible. It is intended for manually written render functions.
// manually written render functions.
// element
-function _h(type: string, children?: RawChildren): VNode
-function _h(
+export function h(type: string, children?: RawChildren): VNode
+export function h(
type: string,
props?: RawProps | null,
children?: RawChildren
): VNode
// fragment
-function _h(type: typeof Fragment, children?: VNodeArrayChildren): VNode
-function _h(
+export function h(type: typeof Fragment, children?: VNodeArrayChildren): VNode
+export function h(
type: typeof Fragment,
props?: RawProps | null,
children?: VNodeArrayChildren
): VNode
// portal (target prop is required)
-function _h(
+export function h(
type: typeof Portal,
props: RawProps & PortalProps,
children: RawChildren
): VNode
// suspense
-function _h(type: typeof Suspense, children?: RawChildren): VNode
-function _h(
+export function h(type: typeof Suspense, children?: RawChildren): VNode
+export function h(
type: typeof Suspense,
props?: (RawProps & SuspenseProps) | null,
children?: RawChildren | RawSlots
): VNode
// functional component
-function _h(type: FunctionalComponent, children?: RawChildren): VNode
+export function h(type: FunctionalComponent, children?: RawChildren): VNode
type: FunctionalComponent<P>,
props?: (RawProps & P) | ({} extends P ? null : never),
children?: RawChildren | RawSlots
): VNode
// stateful component
-function _h(type: ComponentOptions, children?: RawChildren): VNode
-function _h(
+export function h(type: ComponentOptions, children?: RawChildren): VNode
+export function h(
type: ComponentOptionsWithoutProps | ComponentOptionsWithArrayProps,
props?: RawProps | null,
children?: RawChildren | RawSlots
): VNode
-function _h<O>(
+export function h<O>(
type: ComponentOptionsWithObjectProps<O>,
props?:
| (RawProps & ExtractPropTypes<O>)
): VNode
// fake constructor type returned by `defineComponent` or class component
-function _h(type: Constructor, children?: RawChildren): VNode
+export function h(type: Constructor, children?: RawChildren): VNode
type: Constructor<P>,
props?: (RawProps & P) | ({} extends P ? null : never),
children?: RawChildren | RawSlots
): VNode
// Actual implementation
-function _h(type: any, propsOrChildren?: any, children?: any): VNode {
+export function h(type: any, propsOrChildren?: any, children?: any): VNode {
if (arguments.length === 2) {
if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
// single vnode without props
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<typeof _h>))
-}
-
-export function transformHArgs(transformer: Function): void {
- argsTransformer = transformer
-}
-
-export function resetTransformHArgs(): void {
- argsTransformer = undefined
-}
// For integration with runtime compiler
export { registerRuntimeCompiler } from './component'
+// For test-utils
+export { transformVNodeArgs } from './vnode'
+
// SSR -------------------------------------------------------------------------
import { createComponentInstance, setupComponent } from './component'
return n1.type === n2.type && n1.key === n2.key
}
-export function createVNode(
+let vnodeArgsTransformer:
+ | ((
+ args: Parameters<typeof _createVNode>,
+ instance: ComponentInternalInstance | null
+ ) => Parameters<typeof _createVNode>)
+ | undefined
+
+// Internal API for registering an arguments transform for createVNode
+// used for creating stubs in the test-utils
+export function transformVNodeArgs(transformer?: typeof vnodeArgsTransformer) {
+ vnodeArgsTransformer = transformer
+}
+
+const createVNodeWithArgsTransform = (
+ ...args: Parameters<typeof _createVNode>
+): VNode => {
+ return _createVNode(
+ ...(vnodeArgsTransformer
+ ? vnodeArgsTransformer(args, currentRenderingInstance)
+ : args)
+ )
+}
+
+export const createVNode = __DEV__ ? createVNodeWithArgsTransform : _createVNode
+
+function _createVNode(
type: VNodeTypes | ClassComponent,
props: (Data & VNodeProps) | null = null,
children: unknown = null,
projects / thirdparty / vuejs / core.git / commitdiff
