feat(runtime-vapor): component slot

[ubugeeei]

closes #53

relates #4

---

I've implemented component slots (runtime only)
already followed up on the changes in #151.
and created compiler issue -> #154

• base impl
  • default slots
  • named slots
  • scoped slots
• dynamic slots

- [ ] warning ❌ (marked as TODO)

• tests
  ※ For now, I am implementing it based on runtime-core/test/componentSlots.spec.ts, but I was unsure about the necessary tests or test case names, and for parts I couldn't implement, I've added TODOs, so I'd like to ask for confirmation! 🙏
  Some things might be okay to delete. Please comment on anything unnecessary. I will delete them in this PR.

• refactor dynamic slots

Example...

2024-03-17.19.54.15.mov

import {
  children,
  createComponent,
  createSlots,
  defineComponent,
  getCurrentInstance,
  insert,
  on,
  ref,
  renderEffect,
  setText,
  template,
} from '@vue/vapor'

// <template #mySlot="{ message, changeMessage }">
//   <div clas="slotted">
//     <h1>{{ message }}</h1>
//     <button @click="changeMessage">btn parent</button>
//   </div>
// </template>
const t1 = template(
  '<div class="slotted"><h1><!></h1><button>parent btn</button></div>',
)

const Parent = defineComponent({
  vapor: true,
  setup(_) {
    return (() => {
      /** @type {any} */
      const n0 = createComponent(
        Child,
        {},
       {
          mySlot: ({ message, changeMessage }) => {
            const n1 = t1()
            const n2 = /** @type {any} */ (children(n1, 0))
            const n3 = /** @type {any} */ (children(n1, 1))
            renderEffect(() => {
              setText(n2, message())
            })
            on(n3, 'click', changeMessage)
            return n1
          },
          // e.g. default slot
          // default: () => {
          //   const n1 = t1()
          //   return n1
          // }
        },
      )
      return n0
    })()
  },
})

const t2 = template(
  '<div class="child-container"><button>child btn</button></div>',
)

const Child = defineComponent({
  vapor: true,
  setup(_, { expose: __expose }) {
    __expose()
    const message = ref('Hello World!')
    function changeMessage() {
      message.value += '!'
    }

    return (() => {
      const instance = /** @type {any} */ (getCurrentInstance())
      const { slots } = instance
      // <div>
      //   <slot name="mySlot" :message="msg" :changeMessage="changeMessage" />
      //   <button @click="changeMessage">button in child</button>
      // </div>
      const n0 = /** @type {any} */ (t2())
      const n1 = /** @type {any} */ (children(n0, 0))
      on(n1, 'click', () => changeMessage)
      const s0 = slots.mySlot?.({
        message: () => message.value,
        changeMessage: () => changeMessage,
      })
      insert(s0, n0, n1)
      return n0
    })()
  },
})

export default Parent

[netlify]

✅ Deploy Preview for vapor-template-explorer ready!

Name	Link
🔨 Latest commit	9510748
🔍 Latest deploy log	https://app.netlify.com/sites/vapor-template-explorer/deploys/66001c83b06c8a00082abc67
😎 Deploy Preview	https://deploy-preview-143--vapor-template-explorer.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.

[netlify]

✅ Deploy Preview for vapor-repl ready!

Name	Link
🔨 Latest commit	9510748
🔍 Latest deploy log	https://app.netlify.com/sites/vapor-repl/deploys/66001c834afd460008e4549d
😎 Deploy Preview	https://deploy-preview-143--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.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	80 kB	28.1 kB	24.7 kB
compiler-vapor.global.prod.js	48.9 kB	16.7 kB	15.1 kB
runtime-dom.global.prod.js	94.5 kB	35.6 kB	32 kB
runtime-vapor.global.prod.js	41.8 kB	15.6 kB	14.3 kB
vue-vapor.global.prod.js	88.3 kB	30.8 kB	27.9 kB
vue.global.prod.js	152 kB	54.9 kB	49 kB

Usages

Name	Size	Gzip	Brotli
createApp	54.8 kB	21 kB	19.2 kB
createSSRApp	58.1 kB	22.3 kB	20.4 kB
defineCustomElement	57.1 kB	21.8 kB	19.9 kB
vapor	42.1 kB	15.6 kB	14.3 kB
overall	68.5 kB	26.1 kB	23.6 kB

[ubugeeei]

Thank you for the very thorough review! 😄
I've made some adjustments based on your feedback.