refactor(core): use SFC for components

### Description

- Replace looped components pattern with `SFC` for colliders

Author: Neosoulink

src/components/RigidBody.vue

@@ -15,7 +15,7 @@ import type { ShallowRef } from 'vue'
 import { useRapierContext } from '../composables'
 import { createColliderPropsFromObject, createRigidBody } from '../core'
 import { makePropsWatcherRB } from '../utils/props'
-import { BaseCollider } from './colliders'
+import { Collider } from './colliders'
 import type {
   ColliderProps,
   ExposedRigidBody,
@@ -164,7 +164,7 @@ onUnmounted(() => {
 
 <template>
   <TresGroup ref="bodyGroup">
-    <BaseCollider
+    <Collider
       v-for="(_props, id) in autoColliderProps"
       :key="id"
       :shape="_props.shape"

src/components/colliders/BallCollider.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Collider from './BaseCollider.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape'>>>()
+</script>
+
+<template>
+  <Collider shape="ball" v-bind="props" />
+</template>

src/components/colliders/CapsuleCollider.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Collider from './BaseCollider.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape'>>>()
+</script>
+
+<template>
+  <Collider shape="capsule" v-bind="props" />
+</template>

src/components/colliders/ConeCollider.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Collider from './BaseCollider.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape'>>>()
+</script>
+
+<template>
+  <Collider shape="cone" v-bind="props" />
+</template>

src/components/colliders/CuboidCollider.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Collider from './BaseCollider.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape'>>>()
+</script>
+
+<template>
+  <Collider shape="cuboid" v-bind="props" />
+</template>

src/components/colliders/CylinderCollider.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Collider from './BaseCollider.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape'>>>()
+</script>
+
+<template>
+  <Collider shape="cylinder" v-bind="props" />
+</template>

src/components/colliders/HeightfieldCollider.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Collider from './BaseCollider.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape'>>>()
+</script>
+
+<template>
+  <Collider shape="heightfield" v-bind="props" />
+</template>

src/components/colliders/HullCollider.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Collider from './BaseCollider.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape'>>>()
+</script>
+
+<template>
+  <Collider shape="hull" v-bind="props" />
+</template>

src/components/colliders/TrimeshCollider.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Collider from './BaseCollider.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape'>>>()
+</script>
+
+<template>
+  <Collider shape="trimesh" v-bind="props" />
+</template>

src/components/colliders/index.ts

@@ -1,70 +1,26 @@
-import type { Component } from 'vue'
-
-import BaseCollider from './BaseCollider.vue'
-import type { ColliderProps, ColliderShape } from '../../types'
-
-const shapePrefixes: ColliderShape[] = [
-  'ball',
-  'cuboid',
-  'capsule',
-  'cone',
-  'cylinder',
-  'hull',
-  'trimesh',
-  'heightfield',
-]
-const otherColliders = {} as Record<
-  Capitalize<`${ColliderShape}Collider`>,
-  Component<Omit<ColliderProps, 'shape'>>
->
-
-for (const shape of shapePrefixes) {
-  otherColliders[
-    `${
-      (shape.charAt(0).toUpperCase()
-        + shape.slice(1)) as Capitalize<ColliderShape>
-    }Collider`
-  ] = {
-    extends: BaseCollider,
-    props: {
-      ...BaseCollider.props,
-      shape: undefined,
-    },
-    setup(props, ctx) {
-      return {
-        ...BaseCollider?.setup?.(
-          { ...props, shape } as Parameters<
-            Exclude<(typeof BaseCollider)['setup'], undefined>
-          >['0'],
-          ctx,
-        ),
-      }
-    },
-  }
-}
-
 /** @description `Collider` with the shape set to `ball` */
-export const BallCollider = otherColliders.BallCollider
+export { default as BallCollider } from './BallCollider.vue'
+
+/** @description `Collider` with no shape set */
+export { default as Collider } from './BaseCollider.vue'
 
 /** @description `Collider` with the shape set to `capsule` */
-export const CapsuleCollider = otherColliders.CapsuleCollider
+export { default as CapsuleCollider } from './CapsuleCollider.vue'
 
 /** @description `Collider` with the shape set to `cone` */
-export const ConeCollider = otherColliders.ConeCollider
+export { default as ConeCollider } from './ConeCollider.vue'
 
 /** @description `Collider` with the shape set to `cuboid` */
-export const CuboidCollider = otherColliders.CuboidCollider
+export { default as CuboidCollider } from './CuboidCollider.vue'
 
 /** @description `Collider` with the shape set to `cylinder` */
-export const CylinderCollider = otherColliders.CylinderCollider
+export { default as CylinderCollider } from './CylinderCollider.vue'
 
 /** @description `Collider` with the shape set to `heightfield` */
-export const HeightfieldCollider = otherColliders.HeightfieldCollider
+export { default as HeightfieldCollider } from './HeightfieldCollider.vue'
 
 /** @description `Collider` with the shape set to `hull` */
-export const HullCollider = otherColliders.HullCollider
+export { default as HullCollider } from './HullCollider.vue'
 
 /** @description `Collider` with the shape set to `trimesh` */
-export const TrimeshCollider = otherColliders.TrimeshCollider
-
-export { default as BaseCollider } from './BaseCollider.vue'
+export { default as TrimeshCollider } from './TrimeshCollider.vue'