feat: implement inheritAttrs

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

@@ -0,0 +1,44 @@
+// 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
+}"
+`;
+
+exports[`generate component > should not generate withAttrs if component is not the root of the template 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent, insert as _insert, template as _template } from 'vue/vapor';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n1 = t0()
+  const n0 = _createComponent(_resolveComponent("Comp"))
+  _insert(n0, n1)
+  return n1
+}"
+`;

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

@@ -0,0 +1,23 @@
+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()
+  })
+
+  test('should not generate withAttrs if component is not the root of the template', () => {
+    const { code } = compile(`<div><Comp/></div>`)
+    expect(code).toMatchSnapshot()
+  })
+})

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

@@ -22,10 +22,18 @@ export function genCreateComponent(
     ? genCall(vaporHelper('resolveComponent'), JSON.stringify(oper.tag))
     : [oper.tag]
 
+  const singleRoot = oper.isSingleRoot
+  const props = genProps()
+
   return [
     NEWLINE,
     `const n${oper.id} = `,
-    ...genCall(vaporHelper('createComponent'), tag, genProps()),
+    ...genCall(
+      vaporHelper('createComponent'),
+      tag,
+      props || (singleRoot ? 'null' : false),
+      singleRoot ? 'true' : undefined,
+    ),
   ]
 
   function genProps() {

packages/compiler-vapor/src/ir.ts

@@ -182,6 +182,7 @@ export interface CreateComponentIRNode extends BaseIRNode {
   // TODO slots
 
   resolve: boolean
+  isSingleRoot: boolean
 }
 
 export type IRNode = OperationNode | RootIRNode

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -1,5 +1,6 @@
 import {
   type AttributeNode,
+  type ComponentNode,
   type ElementNode,
   ElementTypes,
   ErrorCodes,
@@ -48,29 +49,39 @@ export const transformElement: NodeTransform = (node, context) => {
       context as TransformContext<ElementNode>,
     )
 
-    ;(isComponent ? transformComponentElement : transformNativeElement)(
-      tag,
-      propsResult,
-      context,
-    )
+    if (isComponent) {
+      transformComponentElement(
+        tag,
+        propsResult,
+        context,
+        node as ComponentNode,
+      )
+    } else {
+      transformNativeElement(tag, propsResult, context)
+    }
   }
 }
 
 function transformComponentElement(
   tag: string,
   propsResult: PropsResult,
   context: TransformContext,
+  node: ComponentNode,
 ) {
   const { bindingMetadata } = context.options
   const resolve = !bindingMetadata[tag]
   context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
+  const isSingleRoot =
+    context.root.node.children.length === 1 &&
+    context.root.node.children[0] === node
 
   context.registerOperation({
     type: IRNodeTypes.CREATE_COMPONENT_NODE,
     id: context.reference(),
     tag,
     props: propsResult[0] ? propsResult[1] : [propsResult[1]],
     resolve,
+    isSingleRoot,
   })
 }
 

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

@@ -0,0 +1,163 @@
+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

@@ -4,15 +4,23 @@ import {
   currentInstance,
 } from './component'
 import { setupComponent } from './apiRender'
-import type { RawProps } from './componentProps'
+import type { NormalizedRawProps } from './componentProps'
+import { withAttrs } from './componentAttrs'
 
-export function createComponent(comp: Component, rawProps: RawProps = null) {
+export function createComponent(
+  comp: Component,
+  rawProps: NormalizedRawProps | null = 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)
 
-  return instance.block
+  return instance
 }