feat: change api for defining object and tag components, paving the w…

…ay for future params

.changeset/lucky-dancers-play.md

@@ -0,0 +1,14 @@
+---
+"@arancini/core": minor
+"arancini": minor
+---
+
+feat: change api for defining object and tag components, paving the way for future params
+
+```
+// before:
+const Object3DComponent = Component.object<THREE.Object3D>("Object3D");
+
+// after:
+const Object3DComponent = Component.object({ name: "Object3D" });
+```

packages/arancini-core/.storybook/stories/find-the-bomb/find-the-bomb.stories.tsx

@@ -3,23 +3,25 @@ import React, { useEffect } from 'react'
 
 import './find-the-bomb.css'
 
-const GameState = Component.object<{ clicks: number; foundBomb: boolean }>(
-  'GameState'
-)
+const GameState = Component.object<{ clicks: number; foundBomb: boolean }>({
+  name: 'GameState',
+})
 
 const Emoji = Component.object<{
   revealed: boolean
   dirty: boolean
   domElement: HTMLElement
-}>('Emoji')
+}>({ name: 'Emoji' })
 
-const Position = Component.object<{ x: number; y: number }>('Position')
+const Position = Component.object<{ x: number; y: number }>({
+  name: 'Position',
+})
 
-const DistanceToTarget = Component.object<{ distance: number }>(
-  'DistanceToTarget'
-)
+const DistanceToTarget = Component.object<{ distance: number }>({
+  name: 'DistanceToTarget',
+})
 
-const Target = Component.tag('Target')
+const Target = Component.tag({ name: 'Target' })
 
 class EmojiRendererSystem extends System {
   emojisToRender = this.query((entities) =>

packages/arancini-core/src/component.ts

@@ -79,6 +79,14 @@ export type ComponentDefinitionArgs<T extends ComponentDefinition<unknown>> =
     ? []
     : never
 
+export type ObjectComponentDefinitionParams = {
+  name: string
+}
+
+export type TagComponentDefinitionParams = {
+  name: string
+}
+
 /**
  * The base class for class components.
  *
@@ -108,7 +116,7 @@ export type ComponentDefinitionArgs<T extends ComponentDefinition<unknown>> =
  *   onDestroy() {
  *     // called on destroying the component
  *   }
- * 
+ *
  *   // opt-in to object pooling
  *   static objectPooled = true
  * }
@@ -167,7 +175,7 @@ export class Component {
    * entity.add(PositionComponent, { x: 1, y: 2 })
    * ```
    */
-  static object<T>(name: string) {
+  static object<T>({ name }: ObjectComponentDefinitionParams) {
     const componentDefinition: ObjectComponentDefinition<T> = {
       name,
       type: ComponentDefinitionType.OBJECT,
@@ -197,7 +205,7 @@ export class Component {
    * entity.add(PoweredUpComponent)
    * ```
    */
-  static tag(name: string) {
+  static tag({ name }: TagComponentDefinitionParams) {
     const componentDefinition: TagComponentDefinition = {
       name,
       type: ComponentDefinitionType.TAG,

packages/arancini-core/tst/component-registry.spec.ts

@@ -43,16 +43,16 @@ describe('ComponentRegistry', () => {
   })
 
   it('should support registering tag components', () => {
-    const TagComponent = Component.tag('tag')
+    const TagComponent = Component.tag({ name: 'tag' })
     world.registerComponent(TagComponent)
 
     expect(TagComponent.componentIndex).toBe(0)
   })
 
   it('should support registering object components', () => {
-    const ObjectComponent = Component.object<{ x: number; y: number }>(
-      'Object Component'
-    )
+    const ObjectComponent = Component.object<{ x: number; y: number }>({
+      name: 'Object Component',
+    })
     world.registerComponent(ObjectComponent)
 
     expect(ObjectComponent.componentIndex).toBe(0)

packages/arancini-core/tst/entities-and-components.spec.ts

@@ -58,9 +58,9 @@ describe('Entities and Components', () => {
   })
 
   test('object component', () => {
-    const TestComponent = Component.object<{ x: number; y: number }>(
-      'TestComponent'
-    )
+    const TestComponent = Component.object<{ x: number; y: number }>({
+      name: 'TestComponent',
+    })
 
     world.registerComponent(TestComponent)
 
@@ -87,7 +87,7 @@ describe('Entities and Components', () => {
   })
 
   test('tag component', () => {
-    const TagComponent = Component.tag('TagComponent')
+    const TagComponent = Component.tag({ name: 'TagComponent' })
 
     world.registerComponent(TagComponent)
 
@@ -100,9 +100,9 @@ describe('Entities and Components', () => {
   })
 
   test('cloneComponentDefinition', () => {
-    const TestComponent = Component.object<{ x: number; y: number }>(
-      'TestComponent'
-    )
+    const TestComponent = Component.object<{ x: number; y: number }>({
+      name: 'TestComponent',
+    })
     const Clone = cloneComponentDefinition(TestComponent)
 
     world.registerComponent(TestComponent)

packages/arancini-react/.storybook/stories/ExternalPhysicsLibrary.stories.tsx

@@ -19,9 +19,9 @@ const boxBoxContactMaterial = new P2.ContactMaterial(
   { friction: 0.75 }
 )
 
-const Object3DComponent = Component.object<THREE.Object3D>('Object3D')
+const Object3DComponent = Component.object<THREE.Object3D>({ name: 'Object3D' })
 
-const RigidBodyComponent = Component.object<P2.Body>('RigidBody')
+const RigidBodyComponent = Component.object<P2.Body>({ name: 'RigidBody' })
 
 class PhysicsSystem extends System {
   bodiesQuery = this.query([RigidBodyComponent])

packages/arancini-react/.storybook/stories/RandomWalkers.stories.tsx

@@ -9,9 +9,9 @@ export default {
   title: 'Random Walkers',
 }
 
-const WalkingComponent = Component.tag('Walking')
+const WalkingComponent = Component.tag({ name: 'Walking' })
 
-const Object3DComponent = Component.object<THREE.Object3D>('Object3D')
+const Object3DComponent = Component.object<THREE.Object3D>({ name: 'Object3D' })
 
 class WalkingSystem extends System {
   walking = this.query([Object3DComponent, WalkingComponent])

packages/arancini-react/.storybook/stories/Selection.stories.tsx

@@ -12,11 +12,13 @@ export default {
 
 /* components */
 
-const SelectedComponent = Component.tag('Selected')
+const SelectedComponent = Component.tag({ name: 'Selected' })
 
-const CameraComponent = Component.object<THREE.PerspectiveCamera>('Camera')
+const CameraComponent = Component.object<THREE.PerspectiveCamera>({
+  name: 'Camera',
+})
 
-const Object3DComponent = Component.object<THREE.Object3D>('Object3D')
+const Object3DComponent = Component.object<THREE.Object3D>({ name: 'Object3D' })
 
 /* systems */