Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(runtime-vapor): component slot #143

Merged
merged 44 commits into from
Mar 24, 2024
Merged

feat(runtime-vapor): component slot #143

merged 44 commits into from
Mar 24, 2024

Conversation

ubugeeei
Copy link
Member

@ubugeeei ubugeeei commented Mar 4, 2024

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

@ubugeeei ubugeeei marked this pull request as draft March 4, 2024 14:41
Copy link

netlify bot commented Mar 4, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Mar 4, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

github-actions bot commented Mar 4, 2024

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 ubugeeei force-pushed the ubugeeei/feat/component-slot branch from 6922775 to e967ed1 Compare March 17, 2024 08:14
@ubugeeei ubugeeei force-pushed the ubugeeei/feat/component-slot branch from 68114ef to 0159af9 Compare March 17, 2024 11:09
This was referenced Mar 17, 2024
@ubugeeei ubugeeei marked this pull request as ready for review March 17, 2024 11:20
@ubugeeei ubugeeei requested a review from sxzz March 17, 2024 11:20
packages/runtime-vapor/src/apiCreateSlots.ts Outdated Show resolved Hide resolved
packages/runtime-vapor/src/apiCreateSlots.ts Outdated Show resolved Hide resolved
packages/runtime-vapor/src/apiCreateSlots.ts Outdated Show resolved Hide resolved
packages/runtime-vapor/src/apiCreateSlots.ts Outdated Show resolved Hide resolved
packages/runtime-vapor/src/apiCreateSlots.ts Outdated Show resolved Hide resolved
packages/runtime-vapor/src/componentSlots.ts Show resolved Hide resolved
packages/runtime-vapor/src/index.ts Outdated Show resolved Hide resolved
playground/src/slots.js Outdated Show resolved Hide resolved
@ubugeeei ubugeeei marked this pull request as draft March 23, 2024 05:05
@ubugeeei ubugeeei marked this pull request as ready for review March 23, 2024 11:41
@ubugeeei ubugeeei requested a review from sxzz March 23, 2024 11:41
@ubugeeei
Copy link
Member Author

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

packages/runtime-vapor/src/apiCreateComponent.ts Outdated Show resolved Hide resolved
packages/runtime-vapor/src/component.ts Outdated Show resolved Hide resolved
packages/runtime-vapor/src/componentSlots.ts Outdated Show resolved Hide resolved
@ubugeeei ubugeeei requested a review from sxzz March 23, 2024 15:19
packages/runtime-vapor/src/component.ts Outdated Show resolved Hide resolved
packages/runtime-vapor/src/component.ts Outdated Show resolved Hide resolved
@ubugeeei ubugeeei requested a review from sxzz March 23, 2024 17:41
@sxzz sxzz merged commit 78f74ce into main Mar 24, 2024
6 checks passed
@sxzz sxzz deleted the ubugeeei/feat/component-slot branch March 24, 2024 12:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Component Slots
2 participants