feat: implement inheritAttrs

packages/compiler-vapor/__tests__/generators/__snapshots__/component.spec.ts.snap

@@ -0,0 +1,32 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generate component > generate multi root component 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent, template as _template } from 'vue/vapor';
+const t0 = _template("123")
+
+export function render(_ctx) {
+  const n1 = t0()
+  const n0 = _createComponent(_resolveComponent("Comp"))
+  return [n0, n1]
+}"
+`;
+
+exports[`generate component > generate single root component (with props) 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
+
+export function render(_ctx) {
+  const n0 = _createComponent(_resolveComponent("Comp"), [{
+    foo: () => (foo)
+  }], true)
+  return n0
+}"
+`;
+
+exports[`generate component > generate single root component (without props) 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
+
+export function render(_ctx) {
+  const n0 = _createComponent(_resolveComponent("Comp"), null, true)
+  return n0
+}"
+`;

packages/compiler-vapor/__tests__/generators/component.spec.ts

@@ -0,0 +1,18 @@
+import { compile } from '@vue/compiler-vapor'
+
+describe('generate component', () => {
+  test('generate single root component (without props)', () => {
+    const { code } = compile(`<Comp/>`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('generate single root component (with props)', () => {
+    const { code } = compile(`<Comp :foo="foo"/>`)
+    expect(code).toMatchSnapshot()
+  })
+
+  test('generate multi root component', () => {
+    const { code } = compile(`<Comp/>123`)
+    expect(code).toMatchSnapshot()
+  })
+})

packages/compiler-vapor/src/generators/component.ts

@@ -16,16 +16,29 @@ export function genCreateComponent(
   oper: CreateComponentIRNode,
   context: CodegenContext,
 ): CodeFragment[] {
-  const { vaporHelper } = context
+  const {
+    vaporHelper,
+    ir: {
+      node: { children },
+    },
+  } = context
 
   const tag = oper.resolve
     ? genCall(vaporHelper('resolveComponent'), JSON.stringify(oper.tag))
     : [oper.tag]
 
+  const singleRoot = children.length === 1
+  const props = genProps()
+
   return [
     NEWLINE,
     `const n${oper.id} = `,
-    ...genCall(vaporHelper('createComponent'), tag, genProps()),
+    ...genCall(
+      vaporHelper('createComponent'),
+      tag,
+      props || (singleRoot ? ['null'] : undefined),
+      singleRoot ? 'true' : undefined,
+    ),
   ]
 
   function genProps() {

packages/runtime-vapor/__tests__/componentAttrs.spec.ts

@@ -0,0 +1,155 @@
+import {
+  createComponent,
+  getCurrentInstance,
+  nextTick,
+  ref,
+  setText,
+  template,
+  watchEffect,
+} from '../src'
+import { setCurrentInstance } from '../src/component'
+import { makeRender } from './_utils'
+
+const define = makeRender<any>()
+
+describe('attribute fallthrough', () => {
+  it('should allow attrs to fallthrough', async () => {
+    const t0 = template('<div>')
+    const { component: Child } = define({
+      props: ['foo'],
+      render() {
+        const instance = getCurrentInstance()!
+        const n0 = t0()
+        watchEffect(() => setText(n0, instance.props.foo))
+        return n0
+      },
+    })
+
+    const foo = ref(1)
+    const id = ref('a')
+    const { instance, host } = define({
+      setup() {
+        return { foo, id }
+      },
+      render(_ctx: Record<string, any>) {
+        return createComponent(
+          Child,
+          {
+            foo: () => _ctx.foo,
+            id: () => _ctx.id,
+          },
+          true,
+        )
+      },
+    }).render()
+    const reset = setCurrentInstance(instance)
+    expect(host.innerHTML).toBe('<div id="a">1</div>')
+
+    foo.value++
+    await nextTick()
+    expect(host.innerHTML).toBe('<div id="a">2</div>')
+
+    id.value = 'b'
+    await nextTick()
+    expect(host.innerHTML).toBe('<div id="b">2</div>')
+    reset()
+  })
+
+  it('should not fallthrough if explicitly pass inheritAttrs: false', async () => {
+    const t0 = template('<div>')
+    const { component: Child } = define({
+      props: ['foo'],
+      inheritAttrs: false,
+      render() {
+        const instance = getCurrentInstance()!
+        const n0 = t0()
+        watchEffect(() => setText(n0, instance.props.foo))
+        return n0
+      },
+    })
+
+    const foo = ref(1)
+    const id = ref('a')
+    const { instance, host } = define({
+      setup() {
+        return { foo, id }
+      },
+      render(_ctx: Record<string, any>) {
+        return createComponent(
+          Child,
+          {
+            foo: () => _ctx.foo,
+            id: () => _ctx.id,
+          },
+          true,
+        )
+      },
+    }).render()
+    const reset = setCurrentInstance(instance)
+    expect(host.innerHTML).toBe('<div>1</div>')
+
+    foo.value++
+    await nextTick()
+    expect(host.innerHTML).toBe('<div>2</div>')
+
+    id.value = 'b'
+    await nextTick()
+    expect(host.innerHTML).toBe('<div>2</div>')
+    reset()
+  })
+
+  it('should pass through attrs in nested single root components', async () => {
+    const t0 = template('<div>')
+    const { component: Grandson } = define({
+      props: ['custom-attr'],
+      render() {
+        const instance = getCurrentInstance()!
+        const n0 = t0()
+        watchEffect(() => setText(n0, instance.attrs.foo))
+        return n0
+      },
+    })
+
+    const { component: Child } = define({
+      render() {
+        const n0 = createComponent(
+          Grandson,
+          {
+            'custom-attr': () => 'custom-attr',
+          },
+          true,
+        )
+        return n0
+      },
+    })
+
+    const foo = ref(1)
+    const id = ref('a')
+    const { instance, host } = define({
+      setup() {
+        return { foo, id }
+      },
+      render(_ctx: Record<string, any>) {
+        return createComponent(
+          Child,
+          {
+            foo: () => _ctx.foo,
+            id: () => _ctx.id,
+          },
+          true,
+        )
+      },
+    }).render()
+    const reset = setCurrentInstance(instance)
+    expect(host.innerHTML).toBe('<div foo="1" id="a">1</div>')
+
+    foo.value++
+    await nextTick()
+    expect(host.innerHTML).toBe('<div foo="2" id="a">2</div>')
+
+    id.value = 'b'
+    await nextTick()
+    expect(host.innerHTML).toBe('<div foo="2" id="b">2</div>')
+    reset()
+  })
+})

packages/runtime-vapor/__tests__/componentProps.spec.ts

@@ -222,6 +222,7 @@ describe('component: props', () => {
   test('optimized props updates', async () => {
     const t0 = template('<div>')
     const { component: Child } = define({
+      inheritAttrs: false,
       props: ['foo'],
       render() {
         const instance = getCurrentInstance()!
@@ -245,17 +246,14 @@ describe('component: props', () => {
       },
     }).render()
     const reset = setCurrentInstance(instance)
-    // expect(host.innerHTML).toBe('<div id="a">1</div>') // TODO: Fallthrough Attributes
     expect(host.innerHTML).toBe('<div>1</div>')
 
     foo.value++
     await nextTick()
-    // expect(host.innerHTML).toBe('<div id="a">2</div>') // TODO: Fallthrough Attributes
     expect(host.innerHTML).toBe('<div>2</div>')
 
     id.value = 'b'
     await nextTick()
-    // expect(host.innerHTML).toBe('<div id="b">2</div>') // TODO: Fallthrough Attributes
     reset()
   })
 
@@ -441,6 +439,7 @@ describe('component: props', () => {
   // #5016
   test('handling attr with undefined value', () => {
     const { render, host } = define({
+      inheritAttrs: false,
       render() {
         const instance = getCurrentInstance()!
         const t0 = template('<div></div>')

packages/runtime-vapor/src/apiCreateComponent.ts

@@ -5,11 +5,19 @@ import {
 } from './component'
 import { setupComponent } from './apiRender'
 import type { RawProps } from './componentProps'
+import { withAttrs } from './componentAttrs'
 
-export function createComponent(comp: Component, rawProps: RawProps = null) {
+export function createComponent(
+  comp: Component,
+  rawProps: RawProps = null,
+  singleRoot: boolean = false,
+) {
   const current = currentInstance!
-  const instance = createComponentInstance(comp, rawProps)
-  setupComponent(instance)
+  const instance = createComponentInstance(
+    comp,
+    singleRoot ? withAttrs(rawProps) : rawProps,
+  )
+  setupComponent(instance, singleRoot)
 
   // register sub-component with current component for lifecycle management
   current.comps.add(instance)

packages/runtime-vapor/src/apiRender.ts

@@ -5,17 +5,25 @@ import { flushPostFlushCbs, queuePostRenderEffect } from './scheduler'
 import { proxyRefs } from '@vue/reactivity'
 import { invokeLifecycle } from './componentLifecycle'
 import { VaporLifecycleHooks } from './apiLifecycle'
+import { fallThroughAttrs } from './componentAttrs'
 
 export const fragmentKey = Symbol(__DEV__ ? `fragmentKey` : ``)
+export const withAttrsKey = Symbol(__DEV__ ? `withAttrsKey` : ``)
 
-export type Block = Node | Fragment | Block[]
+export type Block = Node | WithAttrsNode | Fragment | Block[]
 export type Fragment = {
   nodes: Block
   anchor?: Node
   [fragmentKey]: true
 }
+export type WithAttrsNode = Node & {
+  [withAttrsKey]: number
+}
 
-export function setupComponent(instance: ComponentInternalInstance): void {
+export function setupComponent(
+  instance: ComponentInternalInstance,
+  singleRoot: boolean = false,
+): void {
   const reset = setCurrentInstance(instance)
   instance.scope.run(() => {
     const { component, props, emit, attrs } = instance
@@ -47,7 +55,9 @@ export function setupComponent(instance: ComponentInternalInstance): void {
       // TODO: warn no template
       block = []
     }
-    return (instance.block = block)
+    instance.block = block
+    fallThroughAttrs(instance, singleRoot)
+    return block
   })
   reset()
 }

packages/runtime-vapor/src/component.ts

@@ -28,6 +28,7 @@ export type FunctionalComponent = SetupFn & Omit<ObjectComponent, 'setup'>
 
 export interface ObjectComponent {
   props?: ComponentPropsOptions
+  inheritAttrs?: boolean
   emits?: EmitsOptions
   setup?: SetupFn
   render?(ctx: any): Block