State shortcuts: INC, TOGGLE, NUL, UPDATE, UNWATCH, WAIT, BLOCKED and CACHEPATH

jComponent 20 · jcomponent@20 jcomponentfrontendstateutilities Executed with jComponent 20

These functions work on the state of jComponent by path ('user.visits'), like SET() and GET(), and every one of them notifies the components and the watchers of the path.

INC(path, [value]) adds value (default 1) to a number; when the value is empty it starts from 0 and when it is a text it is read as a number first.
TOGGLE(path) changes a boolean (an empty value becomes true). NUL(path) and its alias NULL(path) set the value to null.
UPDATE(path) (alias UPD) notifies everybody who uses the path without changing the value: use it after you changed an object or an array in place.
UNWATCH(path, [fn]) removes the watchers of the path made with WATCH(); with fn only that one.
WAIT(fn or path, callback) runs callback as soon as the function returns something true, or the path has a value. It checks at once and then every 500 ms.
BLOCKED(key, timeout, [callback]) returns false the first time and true for the next timeout ms ('5 seconds' also works): it is a guard against a double click or a repeated request. The callback runs only when it is not blocked.
CACHEPATH(path, expire, [default]) keeps a value of the state in the cache (CACHE()): it sets the path to the cached value when there is one (or to default, which can be a function) and saves every change under the key path_path.
A path is a path in the state of the page, so a name like name or location is a property of window: use names of your own (person, prefs.mode).
setTimeout2(id, fn, ms, [limit], [param]) is a debounced setTimeout(): calling it again with the same id restarts the timer, so fn runs once, ms after the last call. With limit the timer is restarted at most that many times and the following calls are ignored until fn has run, so a stream of calls cannot postpone it forever. clearTimeout2(id) cancels it and returns true when there was one.
CLONE(value) makes a deep copy (dates stay dates), COPY(from, to) copies the properties of one object into another, deep, and returns to. NOOP is a function that does nothing and WARN(...) writes to console.warn.

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<p class="out"></p>
	<script>

		window.sample = { watched: 0 };

	</script>
</body>
</html>

Try it in your browser

Edit the example and run it. It runs in an isolated frame in your browser; nothing is sent to our server.

Code

Preview