socket-function 0.8.3 → 0.8.6

package/SocketFunctionTypes.ts

@@ -1,3 +1,5 @@
+module.allowclient = true;
+
 import debugbreak from "debugbreak";
 import * as tls from "tls";
 

package/hot/HotReloadController.ts

@@ -1,10 +1,12 @@
+module.allowclient = true;
+
 import { SocketFunction } from "../SocketFunction";
 import { cache, lazy } from "../src/caching";
 import * as fs from "fs";
 
 /** Hot reloads server and client files, just trigger a refresh clientside,
  *      while triggering per file re-evaluation and export updates serverside.
- *      - Requires HotReloadController to be exposed.
+ *      - Requires HotReloadController to be exposed both serverside and clientside.
  */
 export function watchFilesAndTriggerHotReloading() {
     setInterval(() => {
@@ -43,6 +45,8 @@ function triggerClientSideReload() {
 }
 
 class HotReloadControllerBase {
+    // TODO: Also hot reload when we reconnect to the server, as it is likely setup will need to
+    //  be rerun in that case as well (for example, we need to call watchFiles again!)
     async watchFiles() {
         let callerId = HotReloadController.context.caller?.nodeId;
         if (!callerId) {

package/mobx/UrlParam.ts

@@ -0,0 +1,40 @@
+import { observable } from "mobx";
+import { isNode } from "../src/misc";
+
+// TODO: Batch url state changes
+// TODO: Create actual links, that a tag can use
+//  - Then after that, support not reloading the page, instead just setting the observables,
+//      for faster navigation.
+
+export class UrlParam<T> {
+    constructor(private key: string, private defaultValue: T) { }
+    valueSeqNum = observable({ value: 1 });
+    public get(): T {
+        urlBackSeqNum.value;
+        this.valueSeqNum.value;
+        let value = new URL(location.href).searchParams.get(this.key);
+        if (value === null) {
+            return this.defaultValue;
+        }
+        return JSON.parse(value) as T;
+    }
+    public set(value: T) {
+        let url = new URL(location.href);
+        url.searchParams.set(this.key, JSON.stringify(value));
+        history.pushState({}, "", url.toString());
+        this.valueSeqNum.value++;
+    }
+    public reset() {
+        let url = new URL(location.href);
+        url.searchParams.delete(this.key);
+        history.pushState({}, "", url.toString());
+        this.valueSeqNum.value++;
+    }
+}
+
+let urlBackSeqNum = observable({ value: 1 });
+if (!isNode()) {
+    window.addEventListener("popstate", () => {
+        urlBackSeqNum.value++;
+    });
+}

package/mobx/observer.tsx

@@ -0,0 +1,50 @@
+import type preact from "preact";
+import { setFlag } from "../require/compileFlags";
+
+import { observable, Reaction } from "mobx";
+
+setFlag(require, "mobx", "allowclient", true);
+setFlag(require, "preact", "allowclient", true);
+
+let globalConstructOrder = 0;
+
+export function observer<
+    T extends {
+        new(...args: any[]): {
+            render(): preact.ComponentChild;
+            forceUpdate(callback?: () => void): void;
+            componentWillUnmount?(): void;
+        }
+    }
+>(
+    Constructor: T
+) {
+    let name = Constructor.name;
+    return class extends Constructor {
+        // NOTE: This is completely valid javascript. For some reason (https://github.com/microsoft/TypeScript/pull/12065#issuecomment-270205513)
+        //  the typescript team decided, whatever, just make it an error, even though it isn't in es6 ("we should simplify ES6' semantics").
+        //  So, instead of simplifying ES6 semantics, lets give ourself better info for debugging...
+        // @ts-ignore
+        static get name() { return Constructor.name; }
+
+        // It is always true, that a parent has a constructOrder < a child's constructOrder
+        constructOrder = globalConstructOrder++;
+
+        reaction = new Reaction(`render.${name}.${this.constructOrder}`, () => {
+            super.forceUpdate();
+        });
+
+        componentWillUnmount() {
+            this.reaction.dispose();
+            super.componentWillUnmount?.();
+        }
+
+        render() {
+            let output: preact.ComponentChild;
+            this.reaction.track(() => {
+                output = super.render();
+            });
+            return output;
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "socket-function",
-	"version": "0.8.3",
+	"version": "0.8.6",
 	"main": "index.js",
 	"license": "MIT",
 	"dependencies": {
@@ -9,6 +9,8 @@
 		"@types/ws": "^8.5.3",
 		"cookie": "^0.5.0",
 		"debugbreak": "^0.6.5",
+		"mobx": "^6.6.2",
+		"preact": "^10.10.6",
 		"typenode": "^0.5.6",
 		"ws": "^8.8.0"
 	},