react-deepwatch 1.0.0

package/preserve.ts

@@ -0,0 +1,492 @@
+import {v} from "vitest/dist/reporters-yx5ZTtEV";
+import {visitReplace} from "./Util";
+import _ from "underscore";
+import {invalidateObject, deleteProperty} from "proxy-facades";
+
+const normalizeListsHint = `Hint: When this is fetched server data and having duplicate items in a list is intentional, you can pre-process it with the normalizeLists function first. See: import {normalizeLists, normalizeList} from "react-deepwatch"`
+
+export type PreserveDiagnosis = {
+    fromLoad?: boolean,
+    callStack?: Error;
+}
+
+export type PreserveOptions = {
+    /**
+     * Invalidates those objects under newObj that have become obsolete, by installing a proxy on them that throws an a Error when trying to use them. This makes sure, your code does not accidentally use them.
+     * <p>Default: true</p>
+     */
+    destroyObsolete?: boolean,
+
+    /**
+     * Ignores the "id" property and only uses the "key" property when re-identifying objects
+     * <p>Default: false</p>
+     */
+    ignoresIds?: boolean,
+
+    /**
+     * Ignores the "key" property and only uses the "id" property when re-identifying objects
+     * <p>Default: false</p>
+     */
+    ignoresKeys?: boolean,
+
+    /**
+     * Threats an object that was preserved and reoccurs on a completely differnt place (not the same parent) as the same = re-uses that instance.
+     * <p>Default: false</p>
+     * <p>Disabled by default because too much magic / behaviour flipping depending indirectly related data.</p>
+     */
+    preserveCircular?: boolean
+
+    /**
+     * Only for normalizeList(s) function
+     */
+    normalize_ignoreDifferent?: boolean
+}
+
+class PreserveCall {
+    options: PreserveOptions;
+    /**
+     * preserved/old -> new (obsolete) object
+     */
+    mergedToNew = new Map<object,object>();
+
+    /**
+     * new (obsolete) object -> preserved/old object
+     */
+    newToPreserved = new Map<object,object>();
+
+    possiblyObsoleteObjects = new Set<object>();
+
+    usedObjects = new WeakSet<object>();
+
+    /**
+     *
+     * @param value
+     */
+    markUsed(value: unknown) {
+        if(value !== null && typeof value === "object") {
+            this.usedObjects.add(value);
+        }
+    }
+
+    diagnosis?: PreserveDiagnosis
+
+    constructor(options: PreserveOptions, diagnosis?: PreserveDiagnosis) {
+        this.options = options;
+        this.diagnosis = diagnosis;
+    }
+}
+type ID = string | number;
+
+/**
+ * Registry for objects in the **same** Array / Set / Map
+ */
+class ObjRegistry {
+    preserveOptions: PreserveOptions;
+
+    objectsById = new Map<ID, object>();
+    objectsByKey = new Map<ID, object>();
+    objectsByIdAndKey = new Map<string, object>();
+
+
+    constructor(preserveOptions: PreserveOptions) {
+        this.preserveOptions = preserveOptions;
+    }
+
+    getIdAndKey(obj: object, diagnosis_path: string): {id?: ID, key?: ID} {
+        const diagnosis_getErrorDiag = () => `Trying to reidentify the object ${diagnisis_shortenValue(obj)} during a 'preserve' operation. Path: ${diagnosis_path}`;
+
+        const result: {id?: ID, key?: ID} = {};
+
+        for(const mode of [{propName: "id", map: this.objectsById, diag_other: this.objectsByKey}, {propName: "key", map: this.objectsByKey, diag_other: this.objectsById}]) {
+            const throwInconsistent = (map: Map<ID, object>) => {throw new PreserveError(`Objects must be consistent in either having an id or a key or both set, but found: ${diagnisis_shortenValue(obj)} and ${diagnisis_shortenValue(map.values().next().value)}. Path: ${diagnosis_path}`)};
+
+            //@ts-ignore
+            const value = obj[mode.propName]
+            if(value === undefined || value === null) {
+                if(mode.map.size > 0) {
+                    throwInconsistent(mode.map);
+                }
+                continue;
+            }
+            if(! (typeof value === "number" || typeof value === "string") ) {
+                throw new PreserveError(`${mode.propName} must be a number or a string. ${diagnosis_getErrorDiag()}`);
+            }
+
+            // safety check:
+            if(mode.map.size == 0 && mode.diag_other.size > 0) {
+                throwInconsistent(mode.diag_other);
+            }
+
+            //@ts-ignore
+            result[mode.propName] = value;
+        }
+
+        if(result.id === undefined && result.key === undefined) {
+            throw new PreserveError(`Object has no id or key set. ${diagnosis_getErrorDiag()}. Please specify 'id' or 'key' property or both on your data objects when using them in an Array/Set/Map`);
+        }
+
+        return result as any;
+    }
+
+    register(value: unknown, diagnosis_path: string) {
+        if (value === null || typeof value !== "object") { // not an object
+            return;
+        }
+
+        let idAndKey = this.getIdAndKey(value, diagnosis_path);
+        const idAndKeyString = this.idAndKeyToString(idAndKey);
+        const existing = this.objectsByIdAndKey.get(idAndKeyString);
+        if(existing !== undefined && existing !== value) {
+            throw new PreserveError(`Multiple items in an array have the same id+key: ${diagnisis_shortenValue(idAndKey)}. Path: ${diagnosis_path}.\n${normalizeListsHint}`)
+        }
+
+        // Add to maps:
+        this.objectsByIdAndKey.set(idAndKeyString, value);
+        if(idAndKey.id !== undefined) {
+            this.objectsById.set(idAndKey.id, value)
+        }
+        if(idAndKey.key !== undefined) {
+            this.objectsByKey.set(idAndKey.key, value)
+        }
+    }
+
+    get(value: object, diagnosis_path: string) {
+        return this.objectsByIdAndKey.get(this.idAndKeyToString(this.getIdAndKey(value, diagnosis_path)));
+    }
+
+    getPreserved(newValue: unknown, call: PreserveCall, diagnosis_path: string) {
+        if(newValue === undefined || newValue === null || typeof newValue !== "object") { // newValue is no object ?
+            return newValue;
+        }
+
+        const existing = this.get(newValue, diagnosis_path);
+        return preserve_inner(existing, newValue, call, diagnosis_path);
+    }
+
+    protected idAndKeyToString(ik: {id?: ID, key?: ID}) {
+        return `${ik.id}_${ik.key}`;
+    }
+}
+
+export function preserve<T>(oldValue: T, newValue: T, options: PreserveOptions = {}): T {
+    return _preserve(oldValue, newValue, options);
+}
+
+export function _preserve<T>(oldValue: T, newValue: T, options: PreserveOptions, diagnosis?: PreserveDiagnosis): T {
+    let call = new PreserveCall(options, diagnosis);
+    let result = preserve_inner(oldValue, newValue, call, "<root>");
+
+    // Invalidate obsolete objects
+    if(options.destroyObsolete !== false && call.possiblyObsoleteObjects.size > 0) {
+        const obsoleteCause = diagnosis?.callStack || new Error("Preserve was called");
+        call.possiblyObsoleteObjects.forEach(obj => {
+            if(call.usedObjects.has(obj)) {
+                return;
+            }
+            try {
+                invalidateObject(obj, "This object is obsolete. Another object is used in its place (which has all values copied to it =preserved), to keep constant object identities across data fetches. See cause. You can disable invalidation via the PreserveOptions#destroyObsolete flag.", obsoleteCause)
+            }
+            catch (e) {
+                throw new Error("Error during invalidation. You should disable invalidation via the PreserveOptions#destroyObsolete flag", {cause: e});
+            }
+        });
+    }
+    return result;
+}
+
+
+export function preserve_inner<T>(oldValue: T, newValue: T, call: PreserveCall, diagnosis_path: string): T {
+    const inner = () => {
+        if (newValue === null || typeof newValue !== "object") {
+            return newValue;
+        }
+
+        if (call.options.preserveCircular) {
+            const preserved = call.newToPreserved.get(newValue);
+            if (preserved !== undefined) {
+                return preserved as T;
+            }
+        }
+
+        if (!mergeable(oldValue, newValue)) {
+            return newValue;
+        }
+
+        // Narrow types:
+        if (oldValue === null || typeof oldValue !== "object" || newValue === null || typeof newValue !== "object") {
+            return newValue;
+        }
+
+
+        if (call.mergedToNew.has(oldValue)) { // Already merged or currently merging?
+            // Safety check:
+            if (call.mergedToNew.get(oldValue) !== newValue) {
+                throw new PreserveError(`Cannot replace object ${diagnisis_shortenValue(oldValue)} into ${diagnisis_shortenValue(newValue)} in: ${diagnosis_path}. It has already been replaced by another object: ${diagnisis_shortenValue(call.mergedToNew.get(oldValue))}. Please make your objects have a proper id or key and are not used in multiple places where these can be mistaken.\n${normalizeListsHint}`)
+            }
+
+            return oldValue;
+        }
+
+        // *** Merge: ****
+        call.mergedToNew.set(oldValue, newValue);
+        call.newToPreserved.set(newValue, oldValue);
+
+        if (Array.isArray(oldValue)) {
+            return preserve_array(oldValue as unknown[], newValue as unknown[], call, diagnosis_path) as T;
+        } else if (oldValue instanceof Set) {
+            return preserve_set(oldValue, newValue as any, call, diagnosis_path) as T;
+        } else if (oldValue instanceof Map) {
+            return preserve_map(oldValue, newValue as any, call, diagnosis_path) as T;
+        } else { // Plain objects (or class instances) ?
+            // ** merge objects **
+            // add new values:
+            for (const key of [...Object.getOwnPropertyNames(newValue), ...Object.getOwnPropertySymbols(newValue)]) { // iterate own keys of newValue
+                //@ts-ignore
+                oldValue[key] = preserve_inner(oldValue[key], newValue[key], call, diagnosis_path + diagnosis_jsonPath(key));
+            }
+
+            // remove keys not in newValue:
+            for (const key of [...Object.getOwnPropertyNames(oldValue), ...Object.getOwnPropertySymbols(oldValue)]) { // iterate own keys of oldValue
+                //@ts-ignore
+                if (Object.getOwnPropertyDescriptor(newValue, key) === undefined && newValue[key] === undefined) {
+                    //@ts-ignore
+                    deleteProperty(oldValue,key);
+                }
+            }
+        }
+        return oldValue;
+    }
+
+    const result = inner();
+    if(result !== newValue) { // old was preserved
+        call.possiblyObsoleteObjects.add(newValue as object);
+    }
+    else {
+        call.markUsed(newValue);
+    }
+
+    return result;
+}
+
+function preserve_array<T>(oldArray: Array<unknown>, newArray: Array<unknown>, call: PreserveCall, diagnosis_path: string): Array<unknown> {
+    const oldObjectRegistry = new ObjRegistry(call.options);
+    oldArray.forEach((v,i) => oldObjectRegistry.register(v, `${diagnosis_path}[${i}]`));
+
+    const indicesInNewArray = new Set<string>();
+
+    for(let i in newArray) {
+        indicesInNewArray.add(i);
+        const newValue = newArray[i];
+        oldArray[i] = oldObjectRegistry.getPreserved(newValue, call, `${diagnosis_path}[${i}]`);
+    }
+
+    for(let i in oldArray) {
+        if(!indicesInNewArray.has(i)) {
+            deleteProperty(oldArray,i as any); // This properly deletes the key as well, so a for...in iteration works consitent. Still it does not decrease oldArray.length
+        }
+    }
+
+    // Fix oldArray.length:
+    while (oldArray.length > newArray.length) {
+        oldArray.pop();
+    }
+
+    return oldArray;
+}
+
+
+function preserve_set<T>(oldSet: Set<unknown>, newSet: Set<unknown>, call: PreserveCall, diagnosis_path: string): Set<unknown> {
+
+    // Register old ids/keys:
+    const oldValuesRegistry = new ObjRegistry(call.options);
+    for(const value of oldSet.values()) {
+        oldValuesRegistry.register(value, `${diagnosis_path}`);
+    }
+
+    oldSet.clear();
+    for(const newValue of newSet.values()) {
+        oldSet.add(oldValuesRegistry.getPreserved(newValue, call, diagnosis_path));
+    }
+
+
+    return oldSet;
+}
+
+function preserve_map<T>(oldMap: Map<unknown, unknown>, newMap: Map<unknown, unknown>, call: PreserveCall, diagnosis_path: string): Map<unknown, unknown> {
+
+    // Register old ids/keys:
+    const oldKeysRegistry = new ObjRegistry(call.options);
+    for(const key of oldMap.keys()) {
+        oldKeysRegistry.register(key, `${diagnosis_path}`);
+    }
+    const oldValuesRegistry = new ObjRegistry(call.options);
+    for(const value of oldMap.values()) {
+        oldValuesRegistry.register(value, `${diagnosis_path}`);
+    }
+
+    oldMap.clear();
+    for(let newKey of newMap.keys()) {
+        let newValue = newMap.get(newKey);
+        oldMap.set(oldKeysRegistry.getPreserved(newKey, call, diagnosis_path), oldValuesRegistry.getPreserved(newValue, call, `${diagnosis_path}[${diagnisis_shortenValue(newKey)}]`));
+    }
+
+    return oldMap;
+}
+
+
+function isSameObjectType(a: object, b: object) {
+    return Object.getPrototypeOf(a) === Object.getPrototypeOf(b) || a.constructor === b.constructor;
+}
+
+function diagnosis_jsonPath(key: unknown) {
+    if(!Number.isNaN(Number(key))) {
+        return `[${key}]`;
+    }
+    return `.${key}`;
+}
+
+class PreserveError extends Error {
+
+}
+
+export function diagnisis_shortenValue(evil_value: any) : string {
+    if(evil_value === undefined) {
+        return "undefined";
+    }
+
+    if(evil_value === null) {
+        return "null";
+    }
+
+    let objPrefix = "";
+    if(typeof evil_value == "object" && evil_value.constructor?.name && evil_value.constructor?.name !== "Object") {
+        objPrefix = `class ${evil_value.constructor?.name} `;
+    }
+
+
+
+    function shorten(value: string) {
+        const MAX = 50;
+        if (value.length > MAX) {
+            return value.substring(0, MAX) + "..."
+        }
+        return value;
+    }
+
+    try {
+        return shorten(objPrefix + betterJsonStringify(evil_value));
+    }
+    catch (e) {
+    }
+
+    if(typeof evil_value == "string") {
+        return shorten(evil_value)
+    }
+    else if(typeof evil_value == "object") {
+        return `${objPrefix}{...}`;
+    }
+    else {
+        return "unknown"
+    }
+
+    /**
+     * Like JSON.stringify, but support for some additional types.
+     *
+     * @param value
+     */
+    function betterJsonStringify(value: unknown) {
+        return JSON.stringify(value,(key, val) => {
+            if(val === undefined){
+                return "undefined"
+            }
+            else if(typeof val === 'number' && isNaN(val)){
+                return "NaN";
+            }
+            else if(val !== null && JSON.stringify(val) === "null") {
+                return "-unknown type-";
+            }
+            else if(val instanceof Set) {
+                return "-Set(...)-";
+            }
+            else if(val instanceof Map) {
+                return "-Map(...)-";
+            }
+            else if(val instanceof RegExp) {
+                return "-Regexp(...)-";
+            }
+            return val;
+        });
+    }
+
+}
+
+function mergeable(oldValue: unknown, newValue: unknown) {
+    // Return if both are not compatible objects:
+    if(oldValue === undefined || oldValue === null || typeof oldValue !== "object") { // oldValue is no object ?
+        return false;
+    }
+    if(newValue === undefined || newValue === null || typeof newValue !== "object") { // new is no object ?
+        return false;
+    }
+    if(!isSameObjectType(oldValue, newValue)) {
+        return false;
+    }
+
+    if(oldValue === newValue) {
+        return false; // nothing to do
+    }
+
+    if(newValue instanceof WeakSet) {
+        return false; // Merging unsupported
+    }
+    else if(newValue instanceof WeakMap) {
+        return false; // Merging unsupported
+    }
+
+
+    return true;
+}
+
+/**
+ *
+ * Scans root deeply for Arrays and for each found array, it call normalizeList, which squeezes the items with the same id/key into one object instance.
+ * @see normalizeList
+ * @param root
+ * @param options
+ */
+export function normalizeLists<T extends object>(root: T, options: PreserveOptions = {}) {
+    return  visitReplace(root, (value, visitChilds, context) => {
+        if(Array.isArray(value)) {
+            normalizeList(value, options, context.diagnosis_path);
+        }
+        return visitChilds(value, context);
+    }, "onError");
+}
+
+/**
+ * Squeezes the items with the same id/key into one object instance.
+ * @param list
+ * @param options
+ * @param diagnosis_path internal
+ */
+export function normalizeList<T extends unknown[]>(list: T, options: PreserveOptions = {}, diagnosis_path?: string): T {
+    const objRegistry = new ObjRegistry(options);
+    for(let i in list) {
+        const value = list[i];
+        if(value === null || typeof value !== "object") { // value is no object ?
+            continue;
+        }
+        let existing = objRegistry.get(value, diagnosis_path || "<list>");
+        if(existing !== undefined) {
+            // Safety check:
+            if(!options.normalize_ignoreDifferent && !_.isEqual(existing, value)) {
+                throw new Error(`Array-items at indexes ${list.findIndex(v => v === existing)} and ${i} have the same id/key but different content: ${diagnisis_shortenValue(existing)} vs. ${diagnisis_shortenValue(value)}  Path: ${diagnosis_path}. You can set the normalize_ignoreDifferent option to ignore this.`)
+            }
+            //@ts-ignore
+            list[i] = existing;
+            continue;
+        }
+        objRegistry.register(value, diagnosis_path || "<list>");
+    }
+    return list;
+}

package/readme.md

@@ -0,0 +1,109 @@
+# React Deepwatch - no more setState and less
+
+
+**Deeply watches your state-object and props** for changes. **Re-renders** automatically😎 and makes you write less code 😊.
+- **Performance friendly**  
+  React Deepwatch uses [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) facades to **watch only for those properties that are actually used** in your component function. It doesn't matter how complex and deep the graph behind your state or props is.
+- **Can watch your -model- as well**  
+  If a (used) property in props points to your model, a change there will also trigger a re-render. In fact, you can [watch anything](#watched) ;)
+
+# Install
+````bash
+npm install --save react-deepwatch
+````
+
+# Usage
+## no more setState
+````jsx
+import {watchedComponent, watched, useWatchedState} from "react-deepwatch"
+          
+const MyComponent = watchedComponent(props => {
+    const state = useWatchedState( {myDeep: {counter: 0, b: 2}}, {/* WatchedOptions (optional) */} );
+
+    return <div>
+        Counter is: {state.myDeep.counter}
+      <button onClick={ () => state.myDeep.counter++ /* will trigger a rerender */ }>Increase counter</button>
+    </div>
+}, {/* WatchedComponentOptions (optional) */});
+
+<MyComponent/> // Use MyComponent
+````
+
+## and less... loading code
+Now that we already have the ability to deeply record our reads, let's see if there's also a way to **cut away the boilerplate code for `useEffect`**.
+
+````jsx
+import {watchedComponent, load, poll, isLoading, loadFailed, preserve} from "react-deepwatch"
+
+const MyComponent = watchedComponent(props => {
+
+    return <div>
+        Here's something fetched from the Server: {  load( async () => await myFetchFromServer(props.myProperty), {/* LoadOptions (optional) */} )  }
+    </div>
+});
+
+<MyComponent/> // Use MyComponent
+````
+**`load(...)` re-executes `myFetchFromServer`, when a dependent value changes**. That means, it records all reads from previous code in your component function plus the reads immediately inside the `load(...)` call. _Here: props.myProperty._
+The returned Promise will be await'ed and the component will be put into [suspense](https://react.dev/reference/react/Suspense) that long.  
+👍 load(...) can be inside a conditional block or a loop. Then it has already recorded the condition + everything else that leads to the computation of load(...)'s point in time and state 😎._
+For this mechanic to work, **make sure, all sources are watched**: `props` and `load(...)`'s result are already automatically watched; For state, use `useWatchedState(...)`; For context, use  `watched(useContext(...))`.
+
+### Show a 🌀loading spinner
+To show a 🌀loading spinner / placeholder during load, either...
+ - **wrap your component in a [`<Suspense fallback={<div>🌀</div>}>...<MyComponent/>...</Suspense>`](https://react.dev/reference/react/Suspense)**. It can be wrapped at any parent level😎. _Or..._
+ - **call isLoading()** inside your component, to probe if any or a certain `load(...)`statement is loading. _See jsDoc for usage example. Mind the caveat of not using it for a condition to cut off a load statement._ _and/or..._   
+ - **specify a fallback** value via `load(..., {fallback:"🌀"})`.
+
+### Handle errors
+either...
+ - **wrap your component in a** [`<ErrorBoundary fallback={<div>Something went wrong</div>}>...<MyComponent/>...</ErrorBoundary>`](https://github.com/bvaughn/react-error-boundary) from the [react-error-boundary](https://github.com/bvaughn/react-error-boundary) package. It can be wrapped at any parent level😎.  
+   It tries to recover from errors and re- runs the `loaderFn`, whenever a dependency changes. Note that recovering works only with the mentioned [react-error-boundary 4.x](https://github.com/bvaughn/react-error-boundary) and not with 3rd party error-boundary libraries. _Or..._
+ - **try/catch around the load(...)** statement. Caveat: You must check, if caught is `instanceof Promise` and re-throw it then. _Because this is the way for `load` to signal, that things are loading._ _Or..._
+ - **call** the **loadFailed()** probing function. This looks more elegant than the above. _See jsDoc for usage example._
+
+### Performance optimization for load(...)
+To reduce the number of expensive `myFetchFromServer` calls, try the following:
+- Move the load(...) call as upwards in the code as possible, so it depends on fewer props / state / watched objects.
+- See the `LoadOptions#fallback`, `LoadOptions#silent` and `LoadOptions#critical` settings.
+- Use the `preserve` function on all your fetched data, to smartly ensure non-changing object instances in your app (`newFetchResult` **===** `oldFetchResult`; Triple-equals. Also for the deep result_). Changed object instances can either cascade to a lot of re-loads or result in your component still watching the old instance.
+  _Think of it like: The preserve function does for your data, what React does for your component tree: It smartly remembers the instances, if needed with the help of an id or key, and re-applies the re-fetched/re-rendered properties to them, so the object-identity/component-state stays the same._  
+  👍 `load(...)` does call `preserve` by default to enforce this paradigm and give you the best, trouble free experience.
+
+### Caveats
+- The component function might return and empty `</>` on the first load and **produce a short screen flicker**. This is [because React's Suspense mechasim is not able to remeber state at that time](https://react.dev/reference/react/Suspense#caveats). To circumvent this, specify `WatchedComponentOptions#fallback`.
+- `<Suspense>` and `<ErrorBoundary>` inside your component function do not handle/catch loads in that **same** function. _Means: You must place them outside to handle/catch them._
+- If your app is a mixed scenario with non-watchedComponents and relies on the old way of fully re-rendering the whole tree to pass deep model data (=more than using shallow, primitive props) to the leaves, mind disabling the WatchedComponentOptions#memo flag.
+- SSR is not supported.
+- [startTransition](https://react.dev/reference/react/startTransition) is not supported (has no effect).
+- As said: Keep in mind that `load(...)` calls `preserve` on its result. It also invalidates (destroys) the "unused" objects. _When they're not really unused any you are trying to access them, You'll get the proper error message how to disable it_.
+
+# [Deeper explaining the mechanics](mechanics.md)
+
+# Playground [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/fork/github/bogeeee/react-deepwatch/tree/1.x/example?title=react-deepwatch%20example&file=index.ts)
+TODO
+
+# Further notes
+
+### watched
+You can also use `watched` similarly  to `useWatchedState` to watch any global object. _But in React paradigm, this is rather rare, because values are usually passed as props into your component function._
+
+### poll
+Besides `load`, there's also the `poll` function, which works similar, but re-loads in regular intervals. _See jsDoc_
+
+### Simplify the server side as well
+If you like, how this library simplifies things for you and want to write the backend (http) endpoints behind your load(...) statements simply as typescript methods, have a look at my flagship project [Restfuncs](https://github.com/bogeeee/restfuncs).
+Example: 
+````typescript
+// In your watchedComponent function:
+return <div>The greeting's result from server is: {  load( async () => await myRemoteSession.greet(state.name) )  }</div>
+
+// On the server:
+...
+@remote greet(name: string) {
+    return `Hello ${name}` 
+}
+...
+````
+_The example leaves away all the the setup-once boilerplate code.  
+Also in your tsx, you can enjoy type awareness / type safety and IDE's code completion around `myRemoteSession.greet` and all its parameters and returned types, which is a feature that only rpc libraries can offer (Restfuncs is such one)😎_