feat(runtime-vapor): component attrs

[ubugeeei]

closes: #48

Summary

I have implemented attrs.
This branch is derived from the branch for implementing emits.
Please merge the emits PR first.

• main
  • feat(runtime-vapor): component props #40
    • feat(runtime-vapor): component emits #42
      • feat(runtime-vapor): component attrs #47 <- current
        • feat(runtime-vapor): component slots [WIP] #54

Points I'm unsure about

1. inheritAttrs
   Should be inheritAttrs option is implemented?
   If it seems necessary, I'll address it in a separate PR. (I've added base issue Todo)

How to confirm the operation

Since the compiler implementation is not yet available, I have written the expected JavaScript code as the compilation result in playground/src/attrs.js.

code

import { watch } from 'vue'
import {
  children,
  on,
  ref,
  template,
  watchEffect,
  setText,
  render as renderComponent // TODO:
} from '@vue/vapor'

export default {
  props: undefined,

  setup(_, {}) {
    const count = ref(1)
    const handleClick = () => {
      count.value++
    }

    const __returned__ = { count, handleClick }

    Object.defineProperty(__returned__, '__isScriptSetup', {
      enumerable: false,
      value: true
    })

    return __returned__
  },

  render(_ctx) {
    const t0 = template('<button></button>')
    const n0 = t0()
    const {
      0: [n1]
    } = children(n0)
    on(n1, 'click', _ctx.handleClick)
    watchEffect(() => {
      setText(n1, void 0, _ctx.count)
    })

    renderComponent(
      child,
      {
        get count() {
          return _ctx.count
        }
      },
      [],
      n0
    )

    return n0
  }
}

const child = {
  setup(_, { attrs }) {
    console.log('attrs: ', attrs)
    watch(
      () => attrs.count,
      v => console.log('attrs.count changed', v)
    )

    const __returned__ = {}

    Object.defineProperty(__returned__, '__isScriptSetup', {
      enumerable: false,
      value: true
    })

    return __returned__
  },

  render(_ctx) {
    const t0 = template('<p></p>')
    const n0 = t0()
    const {
      0: [n1]
    } = children(n0)
    watchEffect(() => {
      setText(n1, void 0, _ctx.$attrs.count + ' * 2 = ' + _ctx.$attrs.count * 2)
    })
    return n0
  }
}

2023-12-10.19.23.40.mov

[ubugeeei]

⚠️ Mark as draft until Emits PR is merged.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	91.1 kB	34.7 kB	31.2 kB
runtime-vapor.global.prod.js	28.3 kB (+1.15 kB)	10.8 kB (+401 B)	9.93 kB (+383 B)
vue-vapor.global.prod.js	66.9 kB (+1.15 kB)	23.3 kB (+426 B)	21 kB (+388 B)
vue.global.prod.js	148 kB	53.9 kB	48.1 kB

Usages

Name	Size	Gzip	Brotli
createApp	51.4 kB	20 kB	18.3 kB
createSSRApp	54.7 kB	21.3 kB	19.4 kB
defineCustomElement	53.7 kB	20.8 kB	19 kB
vapor	28.4 kB (+1.15 kB)	10.9 kB (+401 B)	9.99 kB (+393 B)
overall	65.1 kB	25.1 kB	22.7 kB

[ubugeeei]

Oh, I was under the impression that the render function would receive attrs as ctx, so I was trying to implement publicInstance, but it seems that this implementation was removed by this commit. What approach should I take for the implementation...? 🤔

efc32b7

[netlify]

✅ Deploy Preview for vapor-repl ready!

Name	Link
🔨 Latest commit	d90b7c8304c771c659aefca1b62a6c4b6625339c
🔍 Latest deploy log	https://app.netlify.com/sites/vapor-repl/deploys/65b6498b1f612e000860a3bf
😎 Deploy Preview	https://deploy-preview-47--vapor-repl.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.