koota 0.4.2 → 0.4.4

package/README.md

@@ -7,6 +7,7 @@ Koota is an ECS-based state management library optimized for real-time apps, gam
 ```bash
 npm i koota
 ```
+
 👉 [Try the starter template](https://github.com/Ctrlmonster/r3f-koota-starter)
 
 ### First, define traits
@@ -14,18 +15,18 @@ npm i koota
 Traits are the building blocks of your state. They represent slices of data with specific meanings.
 
 ```js
-import { trait } from 'koota';
+import { trait } from 'koota'
 
 // Basic trait with default values
-const Position = trait({ x: 0, y: 0 });
-const Velocity = trait({ x: 0, y: 0 });
+const Position = trait({ x: 0, y: 0 })
+const Velocity = trait({ x: 0, y: 0 })
 
 // Trait with a callback for initial value
 // ⚠️ Must be an object
-const Mesh = trait(() => new THREE.Mesh());
+const Mesh = trait(() => new THREE.Mesh())
 
 // Tag trait (no data)
-const IsActive = trait();
+const IsActive = trait()
 ```
 
 ### Spawn entities
@@ -33,13 +34,13 @@ const IsActive = trait();
 Entities are spawned in a world. By adding traits to an entity they gain content.
 
 ```js
-import { createWorld } from 'koota';
+import { createWorld } from 'koota'
 
-const world = createWorld();
+const world = createWorld()
 
-const player = world.spawn(Position, Velocity);
+const player = world.spawn(Position, Velocity)
 // Initial values can be passed in to the trait by using it as a function
-const goblin = world.spawn(Position({ x: 10, y: 10 }), Velocity, Mesh);
+const goblin = world.spawn(Position({ x: 10, y: 10 }), Velocity, Mesh)
 ```
 
 ### Query and update data
@@ -49,9 +50,9 @@ Queries fetch entities sharing traits (archetypes). Use them to batch update ent
 ```js
 // Run this in a loop
 world.query(Position, Velocity).updateEach(([position, velocity]) => {
-    position.x += velocity.x * delta;
-    position.y += velocity.y * delta;
-});
+  position.x += velocity.x * delta
+  position.y += velocity.y * delta
+})
 ```
 
 ### Use in your React components
@@ -95,44 +96,44 @@ Use actions to safely modify Koota from inside of React in either effects or eve
 
 ```js
 import { createActions } from 'koota'
-import { useActions } from 'koota/react';
+import { useActions } from 'koota/react'
 
 const actions = createActions((world) => ({
-    spawnShip: (position) => world.spawn(Position(position), Velocity),
-    destroyAllShips: (world) => {
-        world.query(Position, Velocity).forEach((entity) => {
-            entity.destroy();
-        });
-    },
-}));
+  spawnShip: (position) => world.spawn(Position(position), Velocity),
+  destroyAllShips: (world) => {
+    world.query(Position, Velocity).forEach((entity) => {
+      entity.destroy()
+    })
+  },
+}))
 
 function DoomButton() {
-    const { spawnShip, destroyAllShips } = useActions(actions);
+  const { spawnShip, destroyAllShips } = useActions(actions)
 
-    // Spawn three ships on mount
-    useEffect(() => {
-        spawnShip({ x: 0, y: 1 });
-        spawnShip({ x: 1, y: 0 });
-        spawnShip({ x: 1, y: 1 });
+  // Spawn three ships on mount
+  useEffect(() => {
+    spawnShip({ x: 0, y: 1 })
+    spawnShip({ x: 1, y: 0 })
+    spawnShip({ x: 1, y: 1 })
 
-        // Destroy all ships during cleanup
-        return () => drestroyAllShips();
-    }, []);
+    // Destroy all ships during cleanup
+    return () => drestroyAllShips()
+  }, [])
 
-    // And destroy all ships on click!
-    return <button onClick={destroyAllShips}>Boom!</button>;
+  // And destroy all ships on click!
+  return <button onClick={destroyAllShips}>Boom!</button>
 }
 ```
 
 Or access world directly and use it.
 
 ```js
-const world = useWorld();
+const world = useWorld()
 
 useEffect(() => {
-    const entity = world.spawn(Velocity, Position);
-    return () => entity.destroy();
-});
+  const entity = world.spawn(Velocity, Position)
+  return () => entity.destroy()
+})
 ```
 
 ## Advanced
@@ -142,12 +143,12 @@ useEffect(() => {
 Koota supports relationships between entities using the `relation` function. Relationships allow you to create connections between entities and query them efficiently.
 
 ```js
-const ChildOf = relation();
+const ChildOf = relation()
 
-const parent = world.spawn();
-const child = world.spawn(ChildOf(parent));
+const parent = world.spawn()
+const child = world.spawn(ChildOf(parent))
 
-const entity = world.queryFirst(ChildOf(parent)); // Returns child
+const entity = world.queryFirst(ChildOf(parent)) // Returns child
 ```
 
 #### With data
@@ -155,12 +156,12 @@ const entity = world.queryFirst(ChildOf(parent)); // Returns child
 Relationships can contain data like any trait.
 
 ```js
-const Contains = relation({ store: { amount: 0 } });
+const Contains = relation({ store: { amount: 0 } })
 
-const inventory = world.spawn();
-const gold = world.spawn();
-inventory.add(Contains(gold));
-inventory.set(Contains(gold), { amount: 10 });
+const inventory = world.spawn()
+const gold = world.spawn()
+inventory.add(Contains(gold))
+inventory.set(Contains(gold), { amount: 10 })
 ```
 
 #### Auto remove target
@@ -168,15 +169,15 @@ inventory.set(Contains(gold), { amount: 10 });
 Relations can automatically remove target entities and their descendants.
 
 ```js
-const ChildOf = relation({ autoRemoveTarget: true });
+const ChildOf = relation({ autoRemoveTarget: true })
 
-const parent = world.spawn();
-const child = world.spawn(ChildOf(parent));
-const grandchild = world.spawn(ChildOf(child));
+const parent = world.spawn()
+const child = world.spawn(ChildOf(parent))
+const grandchild = world.spawn(ChildOf(child))
 
-parent.destroy();
+parent.destroy()
 
-world.has(child); // False, the child and grandchild are destroyed too
+world.has(child) // False, the child and grandchild are destroyed too
 ```
 
 #### Exclusive Relationships
@@ -184,17 +185,17 @@ world.has(child); // False, the child and grandchild are destroyed too
 Exclusive relationships ensure each entity can only have one target.
 
 ```js
-const Targeting = relation({ exclusive: true });
+const Targeting = relation({ exclusive: true })
 
-const hero = world.spawn();
-const rat = world.spawn();
-const goblin = world.spawn();
+const hero = world.spawn()
+const rat = world.spawn()
+const goblin = world.spawn()
 
-hero.add(Targeting(rat));
-hero.add(Targeting(goblin));
+hero.add(Targeting(rat))
+hero.add(Targeting(goblin))
 
-hero.has(Targeting(rat)); // False
-hero.has(Targeting(goblin)); // True
+hero.has(Targeting(rat)) // False
+hero.has(Targeting(goblin)) // True
 ```
 
 #### Querying relationships
@@ -202,18 +203,18 @@ hero.has(Targeting(goblin)); // True
 Relationships can be queried with specific targets, wildcard targets using `*` and even inverted wildcard searches with `Wildcard` to get all entities with a relationship targeting another entity.
 
 ```js
-const gold = world.spawn();
-const silver = world.spawn();
-const inventory = world.spawn(Contains(gold), Contains(silver));
+const gold = world.spawn()
+const silver = world.spawn()
+const inventory = world.spawn(Contains(gold), Contains(silver))
 
-const targets = inventory.targetsFor(Contains); // Returns [gold, silver]
+const targets = inventory.targetsFor(Contains) // Returns [gold, silver]
 
-const chest = world.spawn(Contains(gold));
-const dwarf = world.spawn(Desires(gold));
+const chest = world.spawn(Contains(gold))
+const dwarf = world.spawn(Desires(gold))
 
-const constainsSilver = world.query(Contains(silver)); // Returns [inventory]
-const containsAnything = world.query(Contains('*')); // Returns [inventory, chest]
-const relatesToGold = world.query(Wildcard(gold)); // Returns [inventory, chest, dwarf]
+const constainsSilver = world.query(Contains(silver)) // Returns [inventory]
+const containsAnything = world.query(Contains('*')) // Returns [inventory, chest]
+const relatesToGold = world.query(Wildcard(gold)) // Returns [inventory, chest, dwarf]
 ```
 
 ### Query modifiers
@@ -225,9 +226,9 @@ Modifiers are used to filter query results enabling powerful patterns. All modif
 The `Not` modifier excludes entities that have specific traits from the query results.
 
 ```js
-import { Not } from 'koota';
+import { Not } from 'koota'
 
-const staticEntities = world.query(Position, Not(Velocity));
+const staticEntities = world.query(Position, Not(Velocity))
 ```
 
 #### Or
@@ -235,9 +236,9 @@ const staticEntities = world.query(Position, Not(Velocity));
 By default all query parameters are combined with logical AND. The `Or` modifier enables using logical OR instead.
 
 ```js
-import { Or } from 'koota';
+import { Or } from 'koota'
 
-const movingOrVisible = world.query(Or(Velocity, Renderable));
+const movingOrVisible = world.query(Or(Velocity, Renderable))
 ```
 
 #### Added
@@ -245,12 +246,12 @@ const movingOrVisible = world.query(Or(Velocity, Renderable));
 The `Added` modifier tracks all entities that have added the specified traits since the last time the query was run. A new instance of the modifier must be created for tracking to be unique.
 
 ```js
-import { createAdded } from 'koota';
+import { createAdded } from 'koota'
 
-const Added = createAdded();
+const Added = createAdded()
 
 // This query will return entities that have just added the Position trait
-const newPositions = world.query(Added(Position));
+const newPositions = world.query(Added(Position))
 
 // After running the query, the Added modifier is reset
 ```
@@ -260,12 +261,12 @@ const newPositions = world.query(Added(Position));
 The `Removed` modifier tracks all entities that have removed the specified traits since the last time the query was run. This includes entities that have been destroyed. A new instance of the modifier must be created for tracking to be unique.
 
 ```js
-import { createRemoved } from 'koota';
+import { createRemoved } from 'koota'
 
-const Removed = createRemoved();
+const Removed = createRemoved()
 
 // This query will return entities that have just removed the Velocity trait
-const stoppedEntities = world.query(Removed(Velocity));
+const stoppedEntities = world.query(Removed(Velocity))
 
 // After running the query, the Removed modifier is reset
 ```
@@ -275,12 +276,12 @@ const stoppedEntities = world.query(Removed(Velocity));
 The `Changed` modifier tracks all entities that have had the specified traits values change since the last time the query was run. A new instance of the modifier must be created for tracking to be unique.
 
 ```js
-import { createChanged } from 'koota';
+import { createChanged } from 'koota'
 
-const Changed = createChanged();
+const Changed = createChanged()
 
 // This query will return entities whose Position has changed
-const movedEntities = world.query(Changed(Position));
+const movedEntities = world.query(Changed(Position))
 
 // After running the query, the Changed modifier is reset
 ```
@@ -296,29 +297,25 @@ Koota allows you to subscribe to add, remove, and change events for specific tra
 ```js
 // Subscribe to Position changes
 const unsub = world.onChange(Position, (entity) => {
-    console.log(`Entity ${entity} changed position`);
-});
+  console.log(`Entity ${entity} changed position`)
+})
 
 // Subscribe to Position additions
 const unsub = world.onAdd(Position, (entity) => {
-    console.log(`Entity ${entity} added position`);
-});
+  console.log(`Entity ${entity} added position`)
+})
 
 // Subscribe to Position removals
 const unsub = world.onRemove(Position, (entity) => {
-    console.log(`Entity ${entity} removed position`);
-});
+  console.log(`Entity ${entity} removed position`)
+})
 
 // Trigger events
-const entity = world.spawn(Position);
-entity.set(Position, { x: 10, y: 20 });
-entity.remove(Position);
+const entity = world.spawn(Position)
+entity.set(Position, { x: 10, y: 20 })
+entity.remove(Position)
 ```
 
-### Query all entities
-
-To get al queryable entities you simply query with not paramerters. Note, that not all entities are queryable. Any entity that has `IsExcluded` will not be able to be queried. This is used in Koota to exclude world entities, for example, but maybe used for other system level entities in the future. To get all entities regardless, use `world.entities`.
-
 ```js
 // Returns all queryable entities
 const allQueryableEntities = world.query()
@@ -330,12 +327,12 @@ By default, `updateEach` will automatically turn on change detection for traits
 
 ```js
 // Setting changeDetection to 'never' will silence it, triggering no change events
-world.query(Position, Velocity).updateEach(([position, velocity]) => {
-}, { changeDetection: 'never' });
+world.query(Position, Velocity).updateEach(([position, velocity]) => {}, { changeDetection: 'never' })
 
 // Setting changeDetection to 'always' will ignore selective tracking and always emit change events for all traits that are mutated
-world.query(Position, Velocity).updateEach(([position, velocity]) => {
-}, { changeDetection: 'always' });
+world
+  .query(Position, Velocity)
+  .updateEach(([position, velocity]) => {}, { changeDetection: 'always' })
 ```
 
 ### World traits
@@ -343,14 +340,15 @@ world.query(Position, Velocity).updateEach(([position, velocity]) => {
 For global data like time, these can be traits added to the world. **World traits do not appear in queries.**
 
 ```js
-const Time = trait({ delta: 0, current: 0 });
-world.add(Time);
+const Time = trait({ delta: 0, current: 0 })
+world.add(Time)
 
-const time = world.get(Time);
-world.set(Time, { current: performance.now() });
+const time = world.get(Time)
+world.set(Time, { current: performance.now() })
 ```
 
 ### Select traits on queries for updates
+
 Query filters entity results and `select` is used to choose what traits are fetched for `updateEach` and `useStore`. This can be useful if your query is wider than the data you want to modify.
 
 ```js
@@ -365,46 +363,22 @@ world.query(Position, Velocity, Mass)
   });
 ```
 
-### Modifying trait stores direclty
+### Modifying trait stores directly
 
 For performance-critical operations, you can modify trait stores directly using the `useStore` hook. This approach bypasses some of the safety checks and event triggers, so use it with caution. All stores are structure of arrays for performance purposes.
 
 ```js
 // Returns the SoA stores
 world.query(Position, Velocity).useStore(([position, velocity], entities) => {
-    // Write our own loop over the stores
-    for (let i = 0; i < entities.length; i++) {
-        // Get the entity ID to use as the array index
-        const eid = entities[i].id();
-        // Write to each array in the store
-        position.x[eid] += velocity.x[eid] * delta;
-        position.y[eid] += velocity.y[eid] * delta;
-    }
-});
-```
-
-### Caching queries
-
-Inline queries are great for readability and are optimized to be as fast as possible, but there is still some small overhead in hashing the query each time it is called.
-
-```js
-// Every time this query runs a hash for the query parameters (Position, Velocity) 
-// is created and then used to get the cached query internally
-function updateMovement(world) {
-  world.query(Position, Velocity).updateEach(([pos, vel]) => { })
-}
-```
-
-While this is not likely to be a bottleneck in your code compared to the actual update function, if you want to save these CPU cycles you can cache the query ahead of time and use the returned key. This will have the additional effect of creating the internal query immediately on a worlds, otherwise it will get created the first time it is run.
-
-```js
-// The internal query is created immediately before it is invoked
-const movementQuery = cacheQuery(Position, Velocity)
-
-// They query key is hashed ahead of time and we just use it
-function updateMovement(world) {
-  world.query(movementQuery).updateEach(([pos, vel]) => { })
-}
+  // Write our own loop over the stores
+  for (let i = 0; i < entities.length; i++) {
+    // Get the entity ID to use as the array index
+    const eid = entities[i].id()
+    // Write to each array in the store
+    position.x[eid] += velocity.x[eid] * delta
+    position.y[eid] += velocity.y[eid] * delta
+  }
+})
 ```
 
 ### Query tips for the curious
@@ -417,7 +391,7 @@ The standard pattern for `updateEach`, and handlers in general, uses an arrow fu
 
 ```js
 // Create the function once
-const handleMove = ([position, velocity]) => { }
+const handleMove = ([position, velocity]) => {}
 
 function updateMovement(world) {
   // Use it for the updateEach
@@ -430,13 +404,14 @@ function updateMovement(world) {
 A query result is just an array of entities with some extra methods. This means you can use `for of` instead of `forEach` to get a nice iterator. Additionally, this will save a little performance since `forEach` calls a function on each member, while `for of` will compile down to what is basically a for loop.
 
 ```js
-// This is nice and ergonomic but will cost some overhead since we are 
+// This is nice and ergonomic but will cost some overhead since we are
 // creating a fresh function for each entity and then calling it
-world.query().forEach((entity) => { })
+world.query().forEach((entity) => {})
 
-// By contrast, this compiles down to a for loop and will have a 
+// By contrast, this compiles down to a for loop and will have a
 // single block of code executed for each entity
-for (const entity of world.query()) { }
+for (const entity of world.query()) {
+}
 ```
 
 ## APIs in detail until I make docs
@@ -488,7 +463,7 @@ world.set(Time, { current: performance.now() })
 // Can take a callback with the previous state passed in
 world.set(Time, (prev) => ({
   current: performance.now(),
-  delta: performance.now() - prev.current
+  delta: performance.now() - prev.current,
 }))
 
 // Subscribe to add, remove or change events for entity traits
@@ -526,14 +501,14 @@ An entity is a number encoded with a world, generation and ID. Every entity is u
 
 ```js
 // Add a trait to the entity
-entity.add(Position) 
+entity.add(Position)
 
 // Remove a trait from the entity
 entity.remove(Position)
 
 // Checks if the entity has the trait
 // Return boolean
-const result = entity.has(Position) 
+const result = entity.has(Position)
 
 // Gets a snapshot instance of the trait
 // Return TraitInstance
@@ -544,7 +519,7 @@ entity.set(Position, { x: 10, y: 10 })
 // Can take a callback with the previous state passed in
 entity.set(Position, (prev) => ({
   x: prev + 1,
-  y: prev + 1
+  y: prev + 1,
 }))
 
 // Get the targets for a relationship
@@ -559,15 +534,25 @@ const target = entity.targetFor(Contains)
 // Return number
 const id = entity.id()
 
+// Get the entity generation
+// Return number
+const generation = entity.generation()
+
 // Destroys the entity making its number no longer valid
 entity.destroy()
 ```
 
+For introspection, `unpackEntity` can be used to get all of the encoded values. This can be useful for debugging.
+
+```js
+const { entityId, generation, worldId } = unpackEntity(entity)
+```
+
 ### Trait
 
-A trait is a specific block of data. They are added to entities to build up its overall data signature. If you are familiar with ECS, it is our version of a component. It is called a trait instead to not get confused with React or web components. 
+A trait is a specific block of data. They are added to entities to build up its overall data signature. If you are familiar with ECS, it is our version of a component. It is called a trait instead to not get confused with React or web components.
 
-A trait can be created with a schema that describes the kind of data it will hold. 
+A trait can be created with a schema that describes the kind of data it will hold.
 
 ```js
 const Position = trait({ x: 0, y: 0, z: 0 })
@@ -577,15 +562,15 @@ In cases where the data needs to be initialized for each instance of the trait c
 
 ```js
 // ❌ The items array will be shared between every instance of this trait
-const Inventory = trait({ 
-  items: [], 
-  max: 10, 
+const Inventory = trait({
+  items: [],
+  max: 10,
 })
 
 // ✅ With a lazy initializer, each instance will now get its own array
-const Inventory = trait({ 
-  items: () => [], 
-  max: 10, 
+const Inventory = trait({
+  items: () => [],
+  max: 10,
 })
 ```
 
@@ -622,10 +607,10 @@ const store = {
 
 #### Array of Structures (AoS) - Callback-based traits
 
-When using a callback, each entity's trait data is stored as an object in an array. This is best used for compatibiilty with third party libraries like Three, or class instnaces in general.
+When using a callback, each entity's trait data is stored as an object in an array. This is best used for compatibility with third party libraries like Three, or class instances in general.
 
 ```js
-const Velocity = trait(() => ({ x: 0, y: 0, z: 0 }));
+const Velocity = trait(() => ({ x: 0, y: 0, z: 0 }))
 
 // Internally, this creates a store structure like:
 const store = [
@@ -633,7 +618,7 @@ const store = [
   { x: 0, y: 0, z: 0 },
   { x: 0, y: 0, z: 0 },
   // ...
-];
+]
 
 // Similarly, this will create a new instance of Mesh in each index
 const Mesh = trait(() => new THREE.Mesh())
@@ -651,12 +636,15 @@ type AttackerSchema = {
   startedAt: number | null,
 }
 
-const Attacker = trait<AttackerSchema>({
-  continueCombo: null,
-  currentStageIndex: null,
-  stages: null,
-  startedAt: null,
-})
+const Attacker =
+  trait <
+  AttackerSchema >
+  {
+    continueCombo: null,
+    currentStageIndex: null,
+    stages: null,
+    startedAt: null,
+  }
 ```
 
 However, this will not work with interfaces without a workaround due to intended behavior in TypeScript: https://github.com/microsoft/TypeScript/issues/15300
@@ -679,41 +667,99 @@ const Attacker = trait<Pick<AttackerSchema, keyof AttackerSchema>>({
 })
 ```
 
+#### Accessing the store directly
+
+The store can be accessed with `getStore`, but this low-level access is risky as it bypasses Koota's guard rails. However, this can be useful for debugging where direct introspection of the store is needed. For direct store mutations, use the [`useStore` API](#modifying-trait-stores-direclty) instead.
+
+```js
+// Returns SoA or AoS depending on the trait
+const positions = getStore(world, Position)
+```
+
+### Query
+
+A Koota query is a lot like a database query. Parameters define how to find entities and efficiently process them in batches. Queries are the primary way to update and transform your app state, similar to how you'd use SQL to filter and modify database records.
+
+#### Caching queries
+
+Inline queries are great for readability and are optimized to be as fast as possible, but there is still some small overhead in hashing the query each time it is called.
+
+```js
+// Every time this query runs a hash for the query parameters (Position, Velocity)
+// is created and then used to get the cached query internally
+function updateMovement(world) {
+  world.query(Position, Velocity).updateEach(([pos, vel]) => {})
+}
+```
+
+While this is not likely to be a bottleneck in your code compared to the actual update function, if you want to save these CPU cycles you can cache the query ahead of time and use the returned key. This will have the additional effect of creating the internal query immediately on a worlds, otherwise it will get created the first time it is run.
+
+```js
+// The internal query is created immediately before it is invoked
+const movementQuery = cacheQuery(Position, Velocity)
+
+// They query key is hashed ahead of time and we just use it
+function updateMovement(world) {
+  world.query(movementQuery).updateEach(([pos, vel]) => {})
+}
+```
+
+#### Query all entities
+
+To get all queryable entities you simply query with no parameters.
+
+```js
+const allEntities = world.query()
+```
+
+This differs from `world.entities` which includes all entities, even system ones. Koota excludes its internal system entities from queries to keep userland queries from being polluted.
+
+#### Excluding entities from queries
+
+Any entity can be excluded from queries by adding the built-in tag `IsExcluded` to it. System entities get this tag added to them so that they do not interfere with the app.
+
+```js
+const entity = world.spawn(Position)
+// This entity can no longer be queried
+entity.add(IsExcluded)
+
+const entities = world.query(Position)
+entities.includes(entity) // This will always be false
+```
 
 ### React
 
-### `useQuery` 
+### `useQuery`
 
 Reactively updates when entities matching the query changes. Returns a `QueryResult`, which is like an array of entities.
 
 ```js
 // Get all entities with Position and Velocity traits
-const entities = useQuery(Position, Velocity);
+const entities = useQuery(Position, Velocity)
 
 // Render a view
 return (
   <>
-    {entities.map(entity => <View key={entity.id()} entity={entity} />)}
+    {entities.map((entity) => (
+      <View key={entity.id()} entity={entity} />
+    ))}
   </>
-);
+)
 ```
 
-### `usQueryFirst` 
+### `usQueryFirst`
 
 Works like `useQuery` but only returns the first result. Can either be an entity of undefined.
 
 ```js
 // Get the first entity with Player and Position traits
-const player = useQueryFirst(Player, Position);
+const player = useQueryFirst(Player, Position)
 
 // Render a view if an entity is found
-return player ? (
-  <View entity={player} />
-) : null;
-
+return player ? <View entity={player} /> : null
 ```
 
-### `useWorld` 
+### `useWorld`
 
 Returns the world held in context via `WorldProvider`.
 
@@ -729,13 +775,13 @@ useEffect(() => {
 
 ```
 
-### `WorldProvider` 
+### `WorldProvider`
 
 The provider for the world context. A world must be created and passed in.
 
 ```js
 // Create a world and pass it to the provider
-const world = createWorld();
+const world = createWorld()
 
 // All hooks will now use this world instead of the default
 function App() {
@@ -743,18 +789,17 @@ function App() {
     <WorldProvider world={world}>
       <Game />
     </WorldProvider>
-  );
+  )
 }
-
 ```
 
-### `useTrait` 
+### `useTrait`
 
 Observes an entity, or world, for a given trait and reactively updates when it is added, removed or changes value. The returned trait snapshot maybe `undefined` if the trait is no longer on the target. This can be used to conditionally render.
 
 ```js
 // Get the position trait from an entity and reactively updates when it changes
-const position = useTrait(entity, Position);
+const position = useTrait(entity, Position)
 
 // If position is removed from entity then it will be undefined
 if (!position) return null
@@ -764,7 +809,7 @@ return (
   <div>
     Position: {position.x}, {position.y}
   </div>
-);
+)
 ```
 
 The entity passed into `useTrait` can be `undefined` or `null`. This helps with situations where `useTrait` is combined with queries in the same component since hooks cannot be conditionally called. However, this means that result can be `undefined` if the trait is not on the entity or if the target is itself `undefined`. In most cases the distinction will not matter, but if it does you can disambiguate by testing the target.
@@ -773,7 +818,7 @@ The entity passed into `useTrait` can be `undefined` or `null`. This helps with
 // The entity may be undefined if there is no valid result
 const entity = useQueryFirst(Position, Velocity)
 // useTrait handles this by returned undefined if the target passed in does not exist
-const position = useTrait(entity, Position);
+const position = useTrait(entity, Position)
 
 // However, undefined here can mean no entity or no component on entity
 // To make the outcome no longer ambiguous you have to test the entity
@@ -786,29 +831,28 @@ return (
   <div>
     Position: {position.x}, {position.y}
   </div>
-);
+)
 ```
 
-### `useTraitEffect` 
+### `useTraitEffect`
 
 Subscribes a callback to a trait on an entity. This callback fires as an effect whenenver it is added, removed or changes value without rerendering.
 
 ```js
 // Subscribe to position changes on an entity and update a ref without causing a rerender
 useTraitEffect(entity, Position, (position) => {
-  if (!position) return;
-  meshRef.current.position.copy(position);
-});
+  if (!position) return
+  meshRef.current.position.copy(position)
+})
 
 // Subscribe to world-level traits
 useTraitEffect(world, GameState, (state) => {
-  if (!state) return;
-  console.log('Game state changed:', state);
-});
-
+  if (!state) return
+  console.log('Game state changed:', state)
+})
 ```
 
-### `useActions` 
+### `useActions`
 
 Returns actions bound to the world that is context. Use actions created by `createActions`.