COMPUTED: Computed instances now work properly with react hook

DEBUG: Logs improved across the board
GENERAL: Instances now have an instanceId as wellas an id.
+ started weeding out redundant cloned props
DATA: Data instances now mount on initialization

packages/plexus-core/src/collection/collection.ts

@@ -60,7 +60,14 @@ export class CollectionInstance<DataType, Groups extends GroupMap<DataType>, Sel
 	 * The internal ID of the collection
 	 */
 	get id(): string {
-		return this._internalStore._internalId
+		return `${this._internalStore._internalId}`
+	}
+	/**
+	 * The internal id of the collection with an instance prefix
+	 */
+	get instanceId(): string {
+		// return this._internalStore._internalId
+		return `coll_${this._internalStore._internalId}`
 	}
 
 	constructor(instance: () => PlexusInstance, _config: PlexusCollectionConfig<DataType> = { primaryKey: "id", defaultGroup: false } as const) {
@@ -109,7 +116,7 @@ export class CollectionInstance<DataType, Groups extends GroupMap<DataType>, Sel
 	private mount() {
 		if (!this.instance()._collections.has(this)) {
 			this.instance()._collections.add(this)
-			this.instance().runtime.log("info", `Hoisting collection ${this.id} to instance`)
+			this.instance().runtime.log("info", `Hoisting collection ${this.instanceId} to instance`)
 			if (this._internalStore.persist) {
 				this.instance().storage?.sync()
 			}

packages/plexus-core/src/collection/data.ts

@@ -32,17 +32,27 @@ export class CollectionDataInstance<DataType extends DataObjectType<PK> = any, P
 			_wDestroyers: new Set<() => void>(),
 		}
 		// this.value = value
+		this.mount()
+	}
+	/**
+	 * The internal id of the state with an instance prefix
+	 */
+	get id(): string {
+		// return this._internalStore._internalId
+		return `${this._watchableStore._internalId}`
+	}
+	/**
+	 * The internal id of the state with an instance prefix
+	 */
+	get instanceId(): string {
+		// return this._internalStore._internalId
+		return `dat_${this._watchableStore._internalId}`
 	}
 
 	private mount() {
 		if (!this.instance()._collectionData.has(this)) {
 			this.instance()._collectionData.add(this)
-			this.instance().runtime.log(
-				"info",
-				`Hoisting collection data ${this._watchableStore._internalId} with value`,
-				this._watchableStore._value,
-				`to instance`
-			)
+			this.instance().runtime.log("info", `Hoisting collection data ${this.instanceId} with value`, this._watchableStore._value, `to instance`)
 			// if (this._internalStore._persist) {
 			// 	this.instance().storage?.sync()
 			// }

packages/plexus-core/src/collection/group.ts

@@ -29,6 +29,13 @@ export class CollectionGroup<DataType = any> extends Watchable<DataType[]> {
 	 * The internal ID of the Group
 	 */
 	get id() {
+		return `${this._watchableStore._internalId}`
+	}
+	/**
+	 * The internal id of the group with an instance prefix
+	 */
+	get instanceId(): string {
+		// return this._internalStore._internalId
 		return `grp_${this._watchableStore._internalId}`
 	}
 
@@ -52,7 +59,7 @@ export class CollectionGroup<DataType = any> extends Watchable<DataType[]> {
 		}
 	}
 	private runWatchers() {
-		this.instance().runtime.log("info", `Running watchers on group ${this._internalStore._name}(${this.id})...`)
+		this.instance().runtime.log("info", `Running watchers on group ${this._internalStore._name}(${this.instanceId})...`)
 		// this._internalStore._groupWatchers.forEach((callback) => {
 		// 	callback(this.value)
 		// })
@@ -62,7 +69,7 @@ export class CollectionGroup<DataType = any> extends Watchable<DataType[]> {
 		this.instance().runtime.broadcast(this.id, this.value)
 	}
 	private rebuildDataWatchers() {
-		this.instance().runtime.log("info", `Rebuilding data watcher connections on group ${this._internalStore._name}(${this.id})...`)
+		this.instance().runtime.log("info", `Rebuilding data watcher connections on group ${this._internalStore._name}(${this.instanceId})...`)
 		this._internalStore._dataWatcherDestroyers.forEach((destroyer) => destroyer())
 		this._internalStore._dataWatcherDestroyers.clear()
 

packages/plexus-core/src/collection/selector.ts

@@ -25,6 +25,13 @@ export class CollectionSelector<ValueType extends Record<string, any>> extends W
 	get id() {
 		return `${this._watchableStore._internalId}`
 	}
+	/**
+	 * The internal id of the Selector with an instance prefix
+	 */
+	get instanceId(): string {
+		// return this._internalStore._internalId
+		return `sel_${this._watchableStore._internalId}`
+	}
 	constructor(instance: () => PlexusInstance, collection: () => PlexusCollectionInstance<ValueType>, name: string) {
 		super(instance, {} as ValueType)
 		this._internalStore = {
@@ -39,7 +46,7 @@ export class CollectionSelector<ValueType extends Record<string, any>> extends W
 	}
 	private runWatchers() {
 		this._internalStore._watchers.forEach((callback) => {
-			this.instance().runtime.log("info", `Running watchers on selector ${this.id}...`)
+			this.instance().runtime.log("info", `Running watchers on selector ${this.instanceId}...`)
 			callback(this.value)
 		})
 	}
@@ -55,7 +62,7 @@ export class CollectionSelector<ValueType extends Record<string, any>> extends W
 	 */
 	select(key: DataKey) {
 		if (key === this._internalStore._key) {
-			this.instance().runtime.log("warn", `Tried selecting the same key, skipping selection on selector ${this.id}...`)
+			this.instance().runtime.log("warn", `Tried selecting the same key, skipping selection on selector ${this.instanceId}...`)
 			return
 		}
 		this._internalStore._dataWatcherDestroyer?.()

packages/plexus-core/src/computed.ts

@@ -2,7 +2,7 @@
 import { deepClone, deepMerge, isObject } from "./helpers"
 import { PlexusInstance } from "./instance"
 import { PlexusStateType, StateInstance, _state } from "./state"
-import { Watchable, WatchableMutable } from "./watchable"
+import { PlexusWatcher, Watchable, WatchableMutable } from "./watchable"
 
 export type PlexusComputedStateInstance<ValueType extends PlexusStateType = any> = ComputedStateInstance<ValueType>
 
@@ -16,9 +16,18 @@ export class ComputedStateInstance<ValueType extends PlexusStateType = any> exte
 	}
 	private instance: () => PlexusInstance
 	private computeFn: () => ValueType
-
+	/**
+	 * The internal id of the computed state
+	 */
 	get id(): string {
-		return this._watchableStore._internalId
+		return `${this._watchableStore._internalId}`
+	}
+	/**
+	 * The internal id of the computed state with an instance prefix
+	 */
+	get instanceId(): string {
+		// return this._internalStore._internalId
+		return `comp_${this._watchableStore._internalId}`
 	}
 
 	constructor(instance: () => PlexusInstance, computeFn: () => ValueType, deps: WatchableMutable<any>[]) {
@@ -52,20 +61,32 @@ export class ComputedStateInstance<ValueType extends PlexusStateType = any> exte
 	private refreshDeps() {
 		this._internalStore._depsDestroyers.forEach((destroyer) => destroyer())
 		this._internalStore._depsDestroyers.clear()
-
+		this.instance().runtime.log("info", `Mounting Dependencies for Computed state ${this.instanceId}`)
 		Array.from(this._internalStore._deps.values()).forEach((dep, i) => {
+			this.instance().runtime.log("debug", `Mounting Dependency(${i}) to Computed state ${this.instanceId}`)
 			const destroyer = dep.watch(() => {
+				this.instance().runtime.log("info", `Computed state ${this.instanceId} dependency ${i} changed`)
 				const value = this.computeFn()
-				// console.log(
-				// 	`${dep.name} changed; updating computed state to "${value}"; current value is "${_internalStore._state.value}"`,
-				// 	JSON.stringify(Array.from(_internalStore._deps.values()), null, 2)
-				// )
+
 				// this._internalStore._state.set(value)
 				this.set(value)
 			})
 			this._internalStore._depsDestroyers.set(dep, destroyer)
 		})
 	}
+	/**
+	 * Watch for changes on this computed state
+	 * @param callback The callback to run when the state changes
+	 * @returns The remove function to stop watching
+	 */
+	watch(callback: PlexusWatcher<ValueType>): () => void {
+		const destroyer = super.watch(callback)
+		this.refreshDeps()
+		return () => {
+			destroyer()
+			this.refreshDeps()
+		}
+	}
 
 	/**
 	 * @internal
@@ -93,7 +114,7 @@ export class ComputedStateInstance<ValueType extends PlexusStateType = any> exte
 
 		// update the runtime conductor
 		this.mount()
-		this._instance().runtime.broadcast(this._watchableStore._internalId, value)
+		this._instance().runtime.broadcast(this.id, value)
 	}
 	/**
 	 *	Adds a dependency to the computed state

packages/plexus-core/src/state.ts

@@ -18,7 +18,7 @@ export interface StateStore<Value> {
 	_name: string
 	_persist: boolean
 	_interval: NodeJS.Timer | null
-	_internalId: string
+	// _internalId: string
 	_ready: boolean
 }
 export type PlexusStateInstance<Value extends PlexusStateType = any> = StateInstance<Value>
@@ -35,11 +35,18 @@ export class StateInstance<StateValue extends PlexusStateType> extends Watchable
 		// return this._internalStore._internalId
 		return `${this._watchableStore._internalId}`
 	}
+	/**
+	 * The internal id of the state with an instance prefix
+	 */
+	get instanceId(): string {
+		// return this._internalStore._internalId
+		return `ste_${this._watchableStore._internalId}`
+	}
 	constructor(instance: () => PlexusInstance, init: StateValue) {
 		super(instance, init)
 		this.instance = instance
 		this._internalStore = {
-			_internalId: this._watchableStore._internalId,
+			// _internalId: this._watchableStore._internalId,
 			// _nextValue: init,
 			// _value: init,
 			// _publicValue: init,
@@ -57,12 +64,7 @@ export class StateInstance<StateValue extends PlexusStateType> extends Watchable
 	private mount() {
 		if (!this.instance()._states.has(this)) {
 			this.instance()._states.add(this)
-			this.instance().runtime.log(
-				"info",
-				`Hoisting state ${this._watchableStore._internalId} with value`,
-				this._watchableStore._value,
-				`to instance`
-			)
+			this.instance().runtime.log("debug", `Hoisting state ${this.instanceId} with value`, this._watchableStore._value, `to instance`)
 			if (this._internalStore._persist) {
 				this.instance().storage?.sync()
 			}
@@ -94,10 +96,10 @@ export class StateInstance<StateValue extends PlexusStateType> extends Watchable
 		// update the runtime conductor
 		// if (this._internalStore._persist) this.instance().storage?.set(this._internalStore._name, this._internalStore._value)
 		// this.instance().runtime.broadcast(this._internalStore._internalId, value)
-		super.set(value)
 		this.mount()
+		super.set(value)
 		if (this._internalStore._persist) this.instance().storage?.set(this._internalStore._name, this._watchableStore._value)
-		this.instance().runtime.broadcast(this._watchableStore._internalId, value)
+		// this.instance().runtime.broadcast(this.id, value)
 
 		return this
 	}
@@ -127,19 +129,19 @@ export class StateInstance<StateValue extends PlexusStateType> extends Watchable
 	 */
 	watch(callback: PlexusWatcher<StateValue>): () => void {
 		// add to internal list of named watchers
-		// const destroyer = this.instance().runtime.subscribe(this._watchableStore._internalId, callback, { type: "state" })
+		// const destroyer = this.instance().runtime.subscribe(this.id, callback, { type: "state" })
 		// this._internalStore._watchers.add(destroyer)
 		// // return keyOrCallback
 		// return () => {
-		// 	this.instance().runtime.log("info", `Killing a watcher from state ${this._watchableStore._internalId}`)
+		// 	this.instance().runtime.log("info", `Killing a watcher from state ${this.id}`)
 		// 	destroyer()
 		// 	this._internalStore._watchers.delete(destroyer)
 		// 	// this.watcherRemovers.value
 		// }
 
 		const destroyer = super.watch(callback)
 		return () => {
-			this.instance().runtime.log("info", `Killing a watcher from state ${this._watchableStore._internalId}`)
+			this.instance().runtime.log("info", `Killing a watcher from state ${this.instanceId}`)
 			destroyer()
 		}
 	}
@@ -228,7 +230,7 @@ export class StateInstance<StateValue extends PlexusStateType> extends Watchable
 	 * The value of the state
 	 */
 	get value() {
-		this.instance().runtime.log("info", `getting value; persist ${this._internalStore._persist ? "enabled" : "disabled"}`)
+		this.instance().runtime.log("debug", `Accessing Stateful value ${this.instanceId}${this._internalStore._persist ? "; Persist Enabled" : ""}`)
 		this.mount()
 
 		// return deepClone(this._internalStore._value)
@@ -249,7 +251,7 @@ export class StateInstance<StateValue extends PlexusStateType> extends Watchable
 		return this._internalStore._name
 	}
 	get watcherRemovers() {
-		return this.instance().runtime.getWatchers(this._watchableStore._internalId)
+		return this.instance().runtime.getWatchers(this.id)
 	}
 	/**
 	 * The next value to apply to the state

packages/plexus-core/src/watchable.ts

@@ -28,7 +28,7 @@ export class Watchable<ValueType = any> {
 	}
 
 	watch<Value extends ValueType = ValueType>(callback: PlexusWatcher<ValueType>): () => void {
-		this._instance().runtime.log("debug", `Watching ${this._watchableStore._internalId}`)
+		this._instance().runtime.log("debug", `Watching Instance ${this._watchableStore._internalId}`)
 		const destroyer = this._instance().runtime.subscribe(this._watchableStore._internalId, callback)
 		this._watchableStore._watchers.add(destroyer)
 
@@ -68,6 +68,7 @@ export class WatchableMutable<ValueType = any> extends Watchable<ValueType> {
 
 		// update the runtime conductor
 		// this.mount()
+		this._instance().runtime.log("debug", `Broadcasting to Instance ${this._watchableStore._internalId}`)
 		this._instance().runtime.broadcast(this._watchableStore._internalId, value)
 	}
 }