feat: rename createECS to createReactAPI, rename Component 'data' pro…

…p to 'value'

.changeset/cool-tigers-deny.md

@@ -0,0 +1,5 @@
+---
+"@arancini/react": minor
+---
+
+feat: rename createECS to createReactAPI

.changeset/nice-chefs-hear.md

@@ -0,0 +1,5 @@
+---
+"@arancini/react": minor
+---
+
+feat(Component): rename 'data' prop to 'value'

packages/arancini-react/.storybook/stories/existing-world.stories.tsx

@@ -1,8 +1,8 @@
 import { World } from '@arancini/core'
+import { createReactAPI } from '@arancini/react'
 import { Html } from '@react-three/drei'
 import React, { useEffect, useState } from 'react'
 import { Lifetime, Repeat } from 'timeline-composer'
-import { createECS } from '../../src'
 import { Setup } from '../setup'
 
 export default {
@@ -13,7 +13,7 @@ const world = new World()
 
 world.init()
 
-const { Entity } = createECS(world)
+const { Entity } = createReactAPI(world)
 
 export const ExistingWorld = () => {
   const [worldStats, setWorldStats] = useState('')

packages/arancini-react/.storybook/stories/external-physics-library.stories.tsx

@@ -1,5 +1,5 @@
 import { System, World } from '@arancini/core'
-import { createECS } from '@arancini/react'
+import { createReactAPI } from '@arancini/react'
 import { Canvas, useFrame } from '@react-three/fiber'
 import * as P2 from 'p2-es'
 import React, { useMemo } from 'react'
@@ -66,7 +66,7 @@ world.registerSystem(PhysicsSystem)
 
 world.init()
 
-const { step, Entity, Component, QueryEntities } = createECS(world)
+const { step, Entity, Component, QueryEntities } = createReactAPI(world)
 
 const Plane = () => {
   const planeBody = useMemo(() => {

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

@@ -1,9 +1,9 @@
 import { World } from '@arancini/core'
+import { createReactAPI } from '@arancini/react'
 import { Bounds, PerspectiveCamera, Text } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import React, { useEffect, useMemo, useState } from 'react'
 import * as THREE from 'three'
-import { createECS } from '../../src'
 import { Setup } from '../setup'
 
 export default {
@@ -44,7 +44,7 @@ const world = new World<EntityType>({
 
 world.init()
 
-const { Entity, Component, QueryEntities } = createECS(world)
+const { Entity, Component, QueryEntities } = createReactAPI(world)
 
 const queries = {
   paddles: world.query((e) => e.has('paddle', 'input', 'position', 'velocity')),

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

@@ -2,7 +2,7 @@ import { System, World } from '@arancini/core'
 import { OrbitControls } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
 import React from 'react'
-import { createECS } from '../../src'
+import { createReactAPI } from '@arancini/react'
 import { Setup } from '../setup'
 
 export default {
@@ -40,7 +40,7 @@ world.registerSystem(WalkingSystem)
 
 world.init()
 
-const { step, Entity, QueryEntities, Component } = createECS(world)
+const { step, Entity, QueryEntities, Component } = createReactAPI(world)
 
 const App = () => {
   useFrame((_, delta) => {

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

@@ -1,9 +1,9 @@
 import { System, World } from '@arancini/core'
+import { createReactAPI } from '@arancini/react'
 import { Bounds, PerspectiveCamera } from '@react-three/drei'
 import { Vector3, useFrame } from '@react-three/fiber'
 import React, { useState } from 'react'
 import * as THREE from 'three'
-import { createECS } from '../../src'
 import { Setup } from '../setup'
 
 export default {
@@ -50,7 +50,7 @@ world.registerSystem(CameraSystem)
 
 world.init()
 
-const { step, useCurrentEntity, Component, Entity } = createECS(world)
+const { step, useCurrentEntity, Component, Entity } = createReactAPI(world)
 
 const SelectableBox = (props: JSX.IntrinsicElements['mesh']) => {
   const entity = useCurrentEntity()

packages/arancini-react/README.md

@@ -10,11 +10,11 @@ React glue for the [arancini](https://github.com/isaac-mason/arancini/tree/main/
 
 ## Creating the React glue
 
-To get started, use `createECS` to get glue components and hooks scoped to a given arancini world. Because the react glue is scoped, libraries can use @arancini/react without worrying about context conflicts.
+To get started, use `createReactAPI` to get glue components and hooks scoped to a given arancini world. Because the react glue is scoped, libraries can use @arancini/react without worrying about context conflicts.
 
 ```ts
 import { World } from '@arancini/core'
-import { createECS } from '@arancini/react'
+import { createReactAPI } from '@arancini/react'
 
 type EntityType = {
   health?: number
@@ -29,7 +29,7 @@ world.registerSystem(MySystem)
 
 world.init()
 
-const ECS = createECS(world)
+const ECS = createReactAPI(world)
 ```
 
 ## Entities and Components
@@ -64,7 +64,7 @@ If a child is passed to `Component`, it will be captured and used as the value o
 
 ```tsx
 const world = new A.World()
-const ECS = createECS(world)
+const ECS = createReactAPI(world)
 
 const Example = () => (
   <ECS.Entity>
@@ -122,7 +122,7 @@ const Example = () => {
 
 ```tsx
 const world = new World()
-const ECS = createECS(world)
+const ECS = createReactAPI(world)
 
 const SimpleExample = () => (
   <ECS.QueryEntities query={(e) => e.with('exampleTag')}>
@@ -198,9 +198,9 @@ You can use the `useCurrentEntitiy` hook to access the current entity in a React
 
 ```tsx
 import { Component } from '@arancini/core'
-import { createECS } from '@arancini/react'
+import { createReactAPI } from '@arancini/react'
 
-const ECS = createECS()
+const ECS = createReactAPI()
 
 const Example = () => {
   const entity = useCurrentEntity()
@@ -215,4 +215,4 @@ const App = () => (
 )
 ```
 
-For extra advanced usage, `createECS` also returns the entity react context `entityContext`.
+For extra advanced usage, `createReactAPI` also returns the entity react context `entityContext`.

packages/arancini-react/src/index.tsx

@@ -18,10 +18,6 @@ import { useIsomorphicLayoutEffect } from './hooks'
 
 type EntityProviderContext<Entity extends A.AnyEntity> = Entity | undefined
 
-export type WorldProps = {
-  children?: React.ReactNode
-}
-
 export type EntityProps<Entity extends A.AnyEntity> = {
   entity?: Entity
   children?: React.ReactNode
@@ -44,13 +40,15 @@ export type QueryEntitiesProps<E extends A.AnyEntity, QueryResult> = {
 
 export type ComponentProps<E, C extends keyof E> = {
   name: C
-  data?: E[C]
+  value?: E[C]
   children?: ReactNode
 }
 
-export type ECS<E extends A.AnyEntity> = ReturnType<typeof createECS<E>>
+export type ReactAPI<E extends A.AnyEntity> = ReturnType<
+  typeof createReactAPI<E>
+>
 
-export const createECS = <E extends A.AnyEntity>(world: A.World<E>) => {
+export const createReactAPI = <E extends A.AnyEntity>(world: A.World<E>) => {
   const entityContext = createContext(null! as EntityProviderContext<E>)
 
   const step = (delta: number) => {
@@ -129,8 +127,8 @@ export const createECS = <E extends A.AnyEntity>(world: A.World<E>) => {
     )
   }
 
-  const Entity = memo(forwardRef(RawEntity)) as <D extends E>(
-    props: PropsWithRef<EntityProps<D> & { ref?: ForwardedRef<D> }>
+  const Entity = memo(forwardRef(RawEntity)) as <T extends E>(
+    props: PropsWithRef<EntityProps<T> & { ref?: ForwardedRef<T> }>
   ) => ReactElement
 
   const Entities = <T extends E>({ entities, children }: EntitiesProps<T>) => (
@@ -143,15 +141,15 @@ export const createECS = <E extends A.AnyEntity>(world: A.World<E>) => {
     </>
   )
 
-  const useQuery = <R extends E>(q: A.QueryDescription<E, R>) => {
+  const useQuery = <T extends E>(q: A.QueryDescription<E, T>) => {
     const queryDescription = useMemo(() => q, [])
 
     const query = useMemo(() => {
       if (q instanceof A.Query) {
         return q
       }
 
-      return world.query<R>(queryDescription)
+      return world.query<T>(queryDescription)
     }, [queryDescription])
 
     const [, setVersion] = useState(-1)
@@ -172,21 +170,21 @@ export const createECS = <E extends A.AnyEntity>(world: A.World<E>) => {
 
     useIsomorphicLayoutEffect(rerender, [])
 
-    return query as A.Query<R>
+    return query as A.Query<T>
   }
 
-  const QueryEntities = <QueryResult extends E>({
+  const QueryEntities = <T extends E>({
     query: q,
     children,
-  }: QueryEntitiesProps<E, QueryResult>) => {
+  }: QueryEntitiesProps<E, T>) => {
     const query = useQuery(q)
 
     return <Entities entities={[...query.entities]} children={children} />
   }
 
   const Component = <C extends keyof E>({
     name,
-    data,
+    value,
     children,
   }: ComponentProps<E, C>) => {
     const [childRef, setChildRef] = useState<never>(null!)
@@ -204,7 +202,7 @@ export const createECS = <E extends A.AnyEntity>(world: A.World<E>) => {
         componentData = childRef as never
       } else {
         // otherwise, use the args prop
-        componentData = data!
+        componentData = value!
       }
 
       world.add(entity, name, componentData!)
@@ -214,7 +212,7 @@ export const createECS = <E extends A.AnyEntity>(world: A.World<E>) => {
           world.remove(entity, name)
         }
       }
-    }, [entity, childRef, name, data])
+    }, [entity, childRef, name, value])
 
     // capture ref of child
     if (children) {