feat: change api for defining components, other api changes, refactors

.changeset/dirty-flies-approve.md

@@ -0,0 +1,6 @@
+---
+"@arancini/core": minor
+"arancini": minor
+---
+
+feat: rename world.destroy() to world.reset(), add world.destroy(entity: Entity)

.changeset/early-fans-ring.md

@@ -0,0 +1,18 @@
+---
+"@arancini/core": major
+"arancini": major
+---
+
+BREAKING CHANGE: the api for defining components has changed
+
+Object and Tag components are now defined with the `defineComponent` and `defineTagComponent` utilities:
+
+```js
+// this
+const MyComponent = Component.object<{ x: 0 }>()
+const MyTagComponent = Component.tag<{ x: 0 }>()
+
+// has changed to
+const MyComponent = defineComponent<{ x: 0 }>()
+const MyTagComponent = defineTagComponent()
+```

.changeset/funny-pigs-own.md

@@ -0,0 +1,6 @@
+---
+"@arancini/core": minor
+"arancini": minor
+---
+
+feat: refactor query manager

.changeset/great-flowers-doubt.md

@@ -0,0 +1,5 @@
+---
+"@arancini/react": patch
+---
+
+feat: export createECS return type, 'ECS'

.changeset/olive-dancers-itch.md

@@ -0,0 +1,5 @@
+---
+"@arancini/react": patch
+---
+
+feat: refactor useQuery component

.changeset/shy-rice-ring.md

@@ -0,0 +1,6 @@
+---
+"@arancini/core": minor
+"arancini": minor
+---
+
+feat: world.entities is now a list, was a map

.changeset/twelve-ghosts-leave.md

@@ -0,0 +1,17 @@
+---
+"arancini": major
+"@arancini/core": major
+---
+
+feat: class components are no longer object pooled by default, they must opted in with the `@objectPooled` annotation, or by setting the `objectPooled` property on the component definition
+
+```ts
+@objectPooled()
+class MyComponent extends Component { /* ... */ }
+
+// or
+
+= class MyComponent extends Component { /* ... */ };
+
+MyComponent.objectPooled = true;
+```

apps/benchmarks/src/arancini.js

@@ -1,25 +1,25 @@
-import { World, Component, System } from 'arancini'
+import { World, Component, System } from '@arancini/core'
 
 class Position extends Component {
   construct() {
     this.x = 0
     this.y = 0
   }
 }
+Position.objectPooled = true
 
 class Velocity extends Component {
   construct() {
     this.dx = Math.random() - 0.5
     this.dy = Math.random() - 0.5
   }
 }
+Velocity.objectPooled = true
 
 let updateCount = 0
 
 class MovementSystem extends System {
-  onInit() {
-    this.movement = this.query([Velocity, Position])
-  }
+  movement = this.query([Velocity, Position])
 
   onUpdate() {
     for (let i = 0; i < this.movement.entities.length; i++) {

apps/react-demo/src/App.tsx

@@ -1,15 +1,9 @@
 import { Canvas, useFrame } from '@react-three/fiber'
-import { Component, System, World } from 'arancini'
+import { Component, System, World, defineObjectComponent } from 'arancini'
 import { createECS } from 'arancini/react'
-import { Object3D, Vector3, Vector3Tuple } from 'three'
+import { Vector3, Vector3Tuple } from 'three'
 
-class ThreeComponent extends Component {
-  object!: Object3D
-
-  construct(object: Object3D) {
-    this.object = object
-  }
-}
+const Object3DComponent = defineObjectComponent<THREE.Object3D>('Object3D')
 
 class AngularVelocity extends Component {
   linvel!: Vector3
@@ -20,11 +14,11 @@ class AngularVelocity extends Component {
 }
 
 class LinearVelocitySystem extends System {
-  linvel = this.query([AngularVelocity, ThreeComponent])
+  linvel = this.query([AngularVelocity, Object3DComponent])
 
   onUpdate(delta: number): void {
     for (const entity of this.linvel) {
-      const { object } = entity.get(ThreeComponent)
+      const object = entity.get(Object3DComponent)
       const { linvel } = entity.get(AngularVelocity)
 
       object.rotation.x += linvel.x * delta
@@ -36,7 +30,7 @@ class LinearVelocitySystem extends System {
 
 const world = new World()
 
-world.registerComponent(ThreeComponent)
+world.registerComponent(Object3DComponent)
 world.registerComponent(AngularVelocity)
 world.registerSystem(LinearVelocitySystem)
 world.init()
@@ -51,7 +45,7 @@ const App = () => {
   return (
     <>
       <ECS.Entity>
-        <ECS.Component type={ThreeComponent}>
+        <ECS.Component type={Object3DComponent}>
           <mesh>
             <boxGeometry />
             <meshStandardMaterial color="orange" />

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

@@ -1,21 +1,31 @@
-import { Component, Entity, System, World } from '@arancini/core'
+import {
+  Entity,
+  System,
+  World,
+  defineObjectComponent,
+  defineTagComponent,
+} from '@arancini/core'
 import React, { useEffect } from 'react'
 
 import './find-the-bomb.css'
 
-const GameState = Component.object<{ clicks: number; foundBomb: boolean }>('GameState')
+const GameState = defineObjectComponent<{ clicks: number; foundBomb: boolean }>(
+  'GameState'
+)
 
-const Emoji = Component.object<{
+const Emoji = defineObjectComponent<{
   revealed: boolean
   dirty: boolean
   domElement: HTMLElement
 }>('Emoji')
 
-const Position = Component.object<{ x: number; y: number }>('Position')
+const Position = defineObjectComponent<{ x: number; y: number }>('Position')
 
-const DistanceToTarget = Component.object<{ distance: number }>('DistanceToTarget')
+const DistanceToTarget = defineObjectComponent<{ distance: number }>(
+  'DistanceToTarget'
+)
 
-const Target = Component.tag('Target')
+const Target = defineTagComponent('Target')
 
 class EmojiRendererSystem extends System {
   queries = {
@@ -219,7 +229,7 @@ export const FindTheBomb = () => {
       }
 
       return () => {
-        world.destroy()
+        world.reset()
       }
     }
 
@@ -257,7 +267,7 @@ export const FindTheBomb = () => {
 
     return () => {
       running = false
-      world.destroy()
+      world.reset()
     }
   })
 

packages/arancini-core/.storybook/stories/overlapping-circles/components.ts

@@ -1,6 +1,7 @@
-import { Component } from '@arancini/core'
+import { Component, objectPooled } from '@arancini/core'
 import { Vector2 } from './utils'
 
+@objectPooled()
 export class Movement extends Component {
   velocity: Vector2
   acceleration: Vector2
@@ -11,6 +12,7 @@ export class Movement extends Component {
   }
 }
 
+@objectPooled()
 export class Circle extends Component {
   position: Vector2
   radius: number

packages/arancini-core/.storybook/stories/overlapping-circles/overlapping-circles.stories.tsx

@@ -76,7 +76,7 @@ export const OverlappingCircles = () => {
 
     return () => {
       running = false
-      world.destroy()
+      world.reset()
     }
   })
 

packages/arancini-core/.storybook/stories/player-inventory.stories.tsx

@@ -100,7 +100,7 @@ export const PlayerInventoryEvents = () => {
 
     return () => {
       running = false
-      world.destroy()
+      world.reset()
     }
   })
 

packages/arancini-core/.storybook/stories/random-walkers.stories.tsx

@@ -1,10 +1,16 @@
-import { Component, System, World } from '@arancini/core'
+import {
+  Component,
+  System,
+  World,
+  defineObjectComponent,
+  defineTagComponent,
+} from '@arancini/core'
 import React, { useEffect } from 'react'
 
-const Position = Component.object<{ x: number; y: number }>('Position')
+const Position = defineObjectComponent<{ x: number; y: number }>('Position')
 
-const Red = Component.tag('Red')
-const Blue = Component.tag('Blue')
+const Red = defineTagComponent('Red')
+const Blue = defineTagComponent('Blue')
 
 class CanvasContext extends Component {
   ctx!: CanvasRenderingContext2D
@@ -187,7 +193,7 @@ export const RandomColorChangingWalkers = () => {
 
     return () => {
       running = false
-      world.destroy()
+      world.reset()
     }
   })