refactor: portal

oku-ui · Aug 16, 2023 · b291126 · b291126
1 parent 7146a8f
commit b291126
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 114 deletions.
diff --git a/packages/components/portal/src/Portal.ts b/packages/components/portal/src/Portal.ts
@@ -1,34 +1,34 @@
-import { Primitive, PrimitiveProps } from '@oku-ui/primitive'
+import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import type {
   ComponentPublicInstanceRef,
   ElementType,
-  IPrimitiveProps,
-  MergeProps,
+  PrimitiveProps,
+
 } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
-import { defineComponent, h, ref, render, toRefs } from 'vue'
+import { Teleport, defineComponent, h, ref, toRefs } from 'vue'
 
 const PORTAL_NAME = 'OkuPortal'
 
-type PortalElement = ElementType<'div'>
-export type _PortalEl = HTMLDivElement
+export type PortalElementIntrinsicElement = ElementType<'div'>
+export type PortalElement = HTMLDivElement
 
-interface PortalProps extends IPrimitiveProps {
+interface PortalProps extends PrimitiveProps {
   /**
    * An optional container where the portaled content should be appended.
    */
   container?: HTMLElement | null
 }
 
-const Portal = defineComponent({
+const portal = defineComponent({
   name: PORTAL_NAME,
   inheritAttrs: false,
   props: {
     container: {
       type: Object as () => HTMLElement | null | undefined,
       default: () => globalThis.document.body,
     },
-    ...PrimitiveProps,
+    ...primitiveProps,
   },
   setup(props, { slots, attrs }) {
     const { asChild, container } = toRefs(props)
@@ -40,30 +40,23 @@ const Portal = defineComponent({
     const forwardedRef = useForwardRef()
     const composedRefs = useComposedRefs(portalRef, forwardedRef)
 
-    return () => {
-      if (container.value && slots.default) {
-        const content = h(
+    return () => container.value && slots.default
+      ? h(Teleport, { to: container.value }, [
+        h(
           Primitive.div,
           { ref: composedRefs, asChild: asChild.value, ...portalAttrs },
-          slots.default(),
-        )
-
-        const divElement = document.createElement('div')
-
-        render(content, divElement)
-
-        container.value.appendChild(divElement)
-      }
-
-      return null
-    }
+          {
+            default: () => slots.default?.(),
+          },
+        ),
+      ])
+      : null
   },
 })
 
-type _Portal = MergeProps<PortalProps, PortalElement>
-
-const OkuPortal = Portal as typeof Portal & (new () => { $props: _Portal })
-
-export { OkuPortal }
+export const OkuPortal = portal as typeof portal &
+(new () => {
+  $props: Partial<PortalElement>
+})
 
 export type { PortalProps }
diff --git a/packages/components/portal/src/index.ts b/packages/components/portal/src/index.ts
@@ -1,2 +1,8 @@
-export { OkuPortal } from './Portal'
-export type { PortalProps } from './Portal'
+export {
+  OkuPortal,
+} from './Portal'
+export type {
+  PortalProps,
+  PortalElement,
+  PortalElementIntrinsicElement,
+} from './Portal'
diff --git a/packages/components/portal/src/portal.test.ts b/packages/components/portal/src/portal.test.ts
@@ -1,13 +1,21 @@
 import { describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
+import type { Component } from 'vue'
+import { h } from 'vue'
 import { OkuPortal } from './Portal'
 
+const component = {
+  setup(props, { attrs, slots }) {
+    return () => h(OkuPortal, { ...attrs }, slots)
+  },
+} as Component
+
 describe('OkuPortal', () => {
   it('teleports content to the specified container', async () => {
     const container = document.createElement('div')
     document.body.appendChild(container)
 
-    const wrapper = mount(OkuPortal, {
+    const wrapper = mount(component, {
       props: {
         container,
       },
@@ -22,7 +30,7 @@ describe('OkuPortal', () => {
   })
 
   it('uses document body as the default container', async () => {
-    const wrapper = mount(OkuPortal, {
+    const wrapper = mount(component, {
       slots: {
         default: 'Portal Content',
       },
@@ -34,7 +42,7 @@ describe('OkuPortal', () => {
   })
 
   it('renders content as a child when asChild prop is provided', async () => {
-    const wrapper = mount(OkuPortal, {
+    const wrapper = mount(component, {
       props: {
         asChild: true,
       },

diff --git a/packages/components/slot/src/slot.ts b/packages/components/slot/src/slot.ts
@@ -34,8 +34,6 @@ const OkuSlot = defineComponent({
         })
       }
       else if (defaultSlot) {
-        if (defaultSlot.length > 1)
-          console.warn(`[OkuSlot] ${NAME} can only have one child`)
         const [child] = defaultSlot
         const slot = cloneVNode(child, { ...mergeProps(attrs, props), ref: composedRefs }, true)
 

diff --git a/packages/core/primitive/src/primitive.test.ts b/packages/core/primitive/src/primitive.test.ts
@@ -368,77 +368,4 @@ describe('Primitive', () => {
     })
     expect(wrapper.html()).toBe('<div id="test" class="text-red-500" disabled="true">Oku</div>')
   })
-
-  test('asChild with 2 children', () => {
-    const wrapper = () => mount(componentDiv, {
-      props: {
-        asChild: true,
-      },
-      slots: {
-        default: `
-          <div>Oku</div>
-          <div>Oku</div>
-        `,
-      },
-    })
-
-    expect(() => wrapper()).toThrowError(/can only have one child/)
-  })
-
-  test('asChild with 2 children and attrs', () => {
-    const wrapper = () => mount(componentDiv, {
-      props: {
-        asChild: true,
-        disabled: true,
-      },
-      attrs: {
-        id: 'test',
-        class: 'text-red-500',
-      },
-      slots: {
-        default: `
-          <div>Oku</div>
-          <div>Oku</div>
-        `,
-      },
-    })
-
-    expect(() => wrapper()).toThrowError(/can only have one child/)
-  })
-
-  test('asChild with default 3 children', () => {
-    const wrapper = () => mount(componentDiv, {
-      props: {
-        asChild: true,
-        disabled: true,
-        disabled2: true,
-      },
-      slots: {
-        default: `
-          <div>Oku</div>
-          <Hello>Oku</Hello>
-          <Another>Oku</Another>
-        `,
-      },
-    })
-    expect(() => wrapper()).toThrowError(/can only have one child/)
-  })
-
-  test('asChild with default 3 children', () => {
-    const wrapper = () => mount(componentDiv, {
-      props: {
-        asChild: true,
-        disabled: true,
-        disabled2: true,
-      },
-      slots: {
-        default: `
-          <div>Oku</div>
-          <Hello>Oku</Hello>
-          <Another>Oku</Another>
-        `,
-      },
-    })
-    expect(() => wrapper()).toThrowError(/can only have one child/)
-  })
 })
diff --git a/packages/core/primitive/src/primitive.ts b/packages/core/primitive/src/primitive.ts
@@ -30,11 +30,6 @@ const Primitive = NODES.reduce((primitive, node) => {
 
       const Tag: any = asChild ? OkuSlot : node
       return () => {
-        const defaultSlot = slots.default?.()
-
-        if (asChild && defaultSlot?.length && defaultSlot?.length > 1)
-          throw new Error(`The ${node} component can only have one child`)
-
         const mergedProps = mergeProps(attrs, primitiveProps)
         return createVNode(Tag, { ...mergedProps, ref: composedRefs }, {
           default: () => slots.default?.(),