@visiwa/trucks

State Management is:
* An object singleton that is monitored for changes
	* Methods for checking if a particular change occurred to that object

Synonyms

monitored object, country management, union management, 
frontend database, browser database, state executivities

Install

npm install @visiwa/trucks

Example

This is essentially an internal component or singleton.

However, this truck file can be imported from
anywhere in the dapp.

This state manager can be used in any framework.
However, here is a svelte implementation example.
The implementation guide can be found after.

// $lib/trucks/truck_1/index.js


import { build_truck } from '@visiwa/trucks'

const trucks = {}

/*
	This adds a truck to the trucks object as trucks [1] = ...
	Such, the truck can then be deleted with the "destroy" method.
*/
export const make = () => {
	
	/*
		Freight is the "state" or the object that is
		is monitored.
	*/
	trucks [1] = build_truck ({
		freight: {
			leaf_name: "Leaf 1",
			leaves: {
				"Leaf 1": {
					alert_note: "This is leaf 1.",
					alert_success: "",
					alert_problem_1: "",
					alert_problem_2: ""	
				},
				"Leaf 2": {
					alert_note: "waiting for the flourish",
					alert_success: "",
					alert_problem_1: "",
					alert_problem_2: ""	
				}
			}
		}
	});
	
	/*
		Changes to the freight can be monitored here:
		
			* 	original_freight: 
					is the "freight" object that was passed to:
					build_truck ({ freight });

			* 	pro_freight:
					is the proxy object that encapsulates
					the original_freight for monitoring purposes.
			
			* 	bracket: the bracket or sub-bracket where the change occurred.
			
			* 	property: the property that changed
			* 	value: the value that changed
	*/
	let monitor = trucks [1].monitor (async ({
		original_freight,
		pro_freight, 
		//
		bracket,
		//
		property, 
		value
	}) => {
		try {
			// leaf name changed
			if (bracket === original_freight && property === "leaf_name") {
				console.info ("leaf name changed");
			}
			
			// Leaf 1 alert_success changed
			if (bracket === original_freight.leaves ["Leaf 1"] && property === "alert_success") {
				console.info ("Leaf 1 alert_success changed.");
			}
		}
		catch (imperfection) {
			console.error (imperfection);
		}
	});
}

export const destroy = () => {
	delete trucks [1];
}

export const retrieve = () => {
	return trucks [1];
}


/*
	Changes to the freight can also be monitored like this.
	This adds another monitor each time "monitor" is called.
	
	An example implementation can be found below.
*/
export const monitor = (action) => {	
	return trucks [1].monitor (envelope => { action (envelope); });
}

Make and Destroy of "Truck 1" in a root component (Svelte Example)

This is a Svelte example, but this can really be used in any framework.

// Regions/Parador/Lot.svelte

import { onMount, onDestroy } from 'svelte'
import * as Truck_1 from '$lib/trucks/truck_1/index.js'

onMount (async () => {	
	Truck_1.make ()
});
onDestroy (() => {
	Truck_1.destroy ()
});

Monitor and Monitor Stop in nested component.

If "Truck_1_Freight" is modified anywhere, the modification
is going to be noticed by each "monitor".

// Regions/Parador/Locations/Veranda.svelte

import { onMount, onDestroy } from 'svelte'
import * as Truck_1 from '$lib/trucks/truck_1/index.js'

let Truck_1_Monitor;
let Truck_1_Freight;
onMount (async () => {
	Truck_1_Freight = Truck_1.retrieve ().pro_freight; 
	
	Truck_1_Monitor = Truck_1.monitor (async ({
		original_freight,
		pro_freight, 
		//
		target,
		//
		property, 
		value
	}) => {
		try {
			// watch for changes to leaf_name
			if (target === original_freight && property === "leaf_name") {
				console.info ("leaf name changed");
				
			}
		}
		catch (imperfection) {
			console.error (imperfection);
		}
	});
	
	
	//
	//	This updates "leaf_name" and alerts each
	//	monitor.
	//
	Truck_1_Freight.leaf_name = "Leaf 2"
});

onDestroy (() => {
	Truck_1_Monitor.stop ()
}); 

Monitor and Monitor Stop

Svelte Truck_1 Singleton Component

This is an easier method of adding a monitor to a component with svelte.

/*
	import * as Truck_1 from '$lib/trucks/truck_1/index.js'
	import Truck_1_Ride from '$lib/trucks/truck_1/Ride.svelte'
	let Truck_1_Freight = false

	<Truck_1_Ride on_change={ ({ pro_freight }) => { Truck_1_Freight = pro_freight; } } />
	{#if typeof Truck_1_Freight === "object"}
	
	{/if}
*/

/*
	happening = "mounted"
	happening = "modulated"
*/
import { onMount, onDestroy } from 'svelte'
import { monitor_truck, retrieve_truck } from './index.js'

export let on_change = () => {}

let Truck_Monitor;
onMount (async () => {
	Truck_Monitor = monitor_truck (({ pro_freight }) => {
		on_change ({ 
			pro_freight, 
			happening: "modulated" 
		})
	})
	
	on_change ({ 
		pro_freight: retrieve_truck ().pro_freight, 
		happening: "mounted" 
	})
});
onDestroy (() => {
	Truck_Monitor.stop ()
});


</script>

<div style="position: absolute"></div>