sliftutils 0.12.0 → 0.14.0

package/.gitignore

@@ -35,4 +35,5 @@ test*.json
 center_channel.txt
 *.part
 *.ytdl
-cloudflare.json
+cloudflare.json
+data

package/index.d.ts

@@ -135,7 +135,6 @@ declare module "sliftutils/render-utils/Input" {
 declare module "sliftutils/render-utils/InputLabel" {
     import preact from "preact";
     import { InputProps } from "./Input";
-    import { URLParamStr } from "./URLParam";
     export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
         label?: preact.ComponentChild;
         number?: boolean;
@@ -164,7 +163,9 @@ declare module "sliftutils/render-utils/InputLabel" {
         render(): preact.JSX.Element;
     }
     export declare class InputLabelURL extends preact.Component<InputLabelProps & {
-        persisted: URLParamStr;
+        persisted: {
+            value: unknown;
+        };
     }> {
         render(): preact.JSX.Element;
     }
@@ -318,19 +319,23 @@ declare module "sliftutils/render-utils/Table" {
 }
 
 declare module "sliftutils/render-utils/URLParam" {
-    export declare class URLParamStr {
-        readonly urlKey: string;
-        private state;
-        lastSetValue: string;
-        constructor(urlKey: string);
-        forceUpdate(): void;
-        get(): string;
-        set(value: string): void;
-        get value(): string;
-        set value(value: string);
+    export declare class URLParam<T = unknown> {
+        readonly key: string;
+        private defaultValue;
+        constructor(key: string, defaultValue?: T);
+        valueSeqNum: {
+            value: number;
+        };
+        get(): T;
+        set(value: T): void;
+        reset(): void;
+        getOverride(value: T): [string, string];
+        get value(): T;
+        set value(value: T);
     }
-    export declare function batchUrlUpdate<T>(code: () => T): T;
-    export declare function createLink(params: [URLParamStr, string][]): string;
+    export declare function getResolvedParam(param: [URLParam, unknown] | [string, string]): [string, string];
+    export declare function batchURLParamUpdate(params: ([URLParam, unknown] | [string, string])[]): void;
+    export declare function getCurrentUrl(): string;
 
 }
 
@@ -356,6 +361,15 @@ declare module "sliftutils/render-utils/modal" {
 
 }
 
+declare module "sliftutils/render-utils/niceStringify" {
+    export declare const niceStringifyTrue = "";
+    export declare const niceStringifyNan = "{NaN}";
+    export declare const niceStringifyUndefined = "{Undefined}";
+    export declare function niceStringify(value: unknown): string;
+    export declare function niceParse(str: string | undefined, noSpecialTrue?: boolean): unknown;
+
+}
+
 declare module "sliftutils/render-utils/observer" {
     import * as preact from "preact";
     import { Reaction } from "mobx";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "0.12.0",
+    "version": "0.14.0",
     "main": "index.js",
     "license": "MIT",
     "files": [
@@ -12,6 +12,7 @@
         "update-types": "yarn emit-dts && yarn generate-index-dts",
         "emit-dts": "yarn tsc --project tsconfig.declarations.json || true",
         "generate-index-dts": "typenode ./builders/generateIndexDts.ts",
+        "prepublishOnly": "yarn update-types",
         "run-nodejs": "node ./build-nodejs/server.js",
         "run-nodejs-dev": "typenode ./nodejs/server.ts",
         "run-web": "node ./builders/webRun.js",

package/render-utils/Anchor.tsx

@@ -0,0 +1,62 @@
+import preact from "preact";
+import { URLParam, batchURLParamUpdate, getResolvedParam } from "./URLParam";
+import { css, isNode } from "typesafecss";
+
+export const AnchorClass = (
+    css.textDecoration("none").color("hsl(210, 75%, 65%)").opacity(0.8, "hover")
+);
+
+export class Anchor extends preact.Component<{
+    className?: string;
+    params: ([URLParam, unknown] | [string, string])[];
+    button?: boolean;
+} & Omit<preact.JSX.HTMLAttributes<HTMLAnchorElement>, "href">> {
+    render() {
+        const { params, button, className, ...remaining } = this.props;
+        let resolvedParams = params.map(getResolvedParam);
+        let searchObj = new URLSearchParams(window.location.search);
+        let selected = resolvedParams.every(([param, value]) => searchObj.get(param) === value);
+        let link = (
+            <a
+                {...remaining}
+                className={
+                    css.textDecoration("none")
+                        .opacity(0.8, "hover")
+                    + (selected && css.color("hsl(110, 75%, 65%)", "soft"))
+                    + (!selected && css.color("hsl(210, 75%, 65%)", "soft"))
+                    + className
+                }
+                href={createLink(resolvedParams)}
+                onClick={e => {
+                    if (this.props.target) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    batchURLParamUpdate(params);
+                }}
+            >
+                {this.props.children}
+            </a>
+        );
+        if (button) {
+            return <button className={css.button} onClick={() => {
+                batchURLParamUpdate(params);
+            }}>
+                {link}
+            </button>;
+        }
+        return link;
+    }
+}
+
+function createLink(params: ([string, string])[]) {
+    let searchParams = new URLSearchParams(isNode() ? "https://planquickly.com" : window.location.search);
+    for (let [param, value] of params) {
+        searchParams.set(param, value);
+    }
+    return "?" + searchParams.toString();
+}
+
+export function createLinkRaw(params: ([URLParam, unknown])[]) {
+    let paramsText = params.map(getResolvedParam);
+    return createLink(paramsText);
+}

package/render-utils/InputLabel.d.ts

@@ -1,6 +1,5 @@
 import preact from "preact";
 import { InputProps } from "./Input";
-import { URLParamStr } from "./URLParam";
 export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
     label?: preact.ComponentChild;
     number?: boolean;
@@ -29,7 +28,9 @@ export declare class InputLabel extends preact.Component<InputLabelProps> {
     render(): preact.JSX.Element;
 }
 export declare class InputLabelURL extends preact.Component<InputLabelProps & {
-    persisted: URLParamStr;
+    persisted: {
+        value: unknown;
+    };
 }> {
     render(): preact.JSX.Element;
 }

package/render-utils/InputLabel.tsx

@@ -1,7 +1,6 @@
 import preact from "preact";
 import { Input, InputProps } from "./Input";
 import { css } from "typesafecss";
-import { URLParamStr } from "./URLParam";
 import { lazy } from "socket-function/src/caching";
 import { observer } from "./observer";
 import { observable } from "mobx";
@@ -83,29 +82,21 @@ export class InputLabel extends preact.Component<InputLabelProps> {
 
         if ((!props.type || props.type === "number") && props.useDateUI) {
             let value = String(props.value);
-            if (
-                value === "date-1be2200d-9742-4e90-a6c2-e8a790277414"
-                || isJSNumber(value) && startGuessDateRange < +value && +value < endGuessDateRange
-                // NOTE: Showing the date selector is a problem, as there is not an easy way to undo this. So if the
-                //      user typed in "2020", it would return the input into a selector and not let them keeping type.
-                // || startGuessDateRange < +new Date(String(value)) && +new Date(String(value)) < endGuessDateRange
-            ) {
-                props.type = "datetime-local";
-                props.edit = false;
-                props.textarea = false;
-                props.number = false;
-                props.forceInputValueUpdatesWhenFocused = true;
-                // NOTE: When using forceInputValueUpdatesWhenFocused we need hot, otherwise the user's updates
-                //  won't be visible.
-                props.hot = true;
-                if (isJSNumber(value)) {
-                    value = formatDateTimeForInput(+value);
-                } else {
-                    value = "";
-                }
-                props.value = value;
-                addValueMapping(value => (+new Date(value).getTime() || "") + "");
+            props.type = "datetime-local";
+            props.edit = false;
+            props.textarea = false;
+            props.number = false;
+            props.forceInputValueUpdatesWhenFocused = true;
+            // NOTE: When using forceInputValueUpdatesWhenFocused we need hot, otherwise the user's updates
+            //  won't be visible.
+            props.hot = true;
+            if (isJSNumber(value)) {
+                value = formatDateTimeForInput(+value);
+            } else {
+                value = "";
             }
+            props.value = value;
+            addValueMapping(value => (+new Date(value).getTime() || "") + "");
         }
         if (props.fontSize !== undefined) {
             props.style = { ...props.style as any, fontSize: props.fontSize };
@@ -260,7 +251,7 @@ const pencilSVG = lazy(() => {
 
 @observer
 export class InputLabelURL extends preact.Component<InputLabelProps & {
-    persisted: URLParamStr;
+    persisted: { value: unknown };
 }> {
     render() {
         this.props.persisted.value;

package/render-utils/URLParam.d.ts

@@ -1,13 +1,17 @@
-export declare class URLParamStr {
-    readonly urlKey: string;
-    private state;
-    lastSetValue: string;
-    constructor(urlKey: string);
-    forceUpdate(): void;
-    get(): string;
-    set(value: string): void;
-    get value(): string;
-    set value(value: string);
+export declare class URLParam<T = unknown> {
+    readonly key: string;
+    private defaultValue;
+    constructor(key: string, defaultValue?: T);
+    valueSeqNum: {
+        value: number;
+    };
+    get(): T;
+    set(value: T): void;
+    reset(): void;
+    getOverride(value: T): [string, string];
+    get value(): T;
+    set value(value: T);
 }
-export declare function batchUrlUpdate<T>(code: () => T): T;
-export declare function createLink(params: [URLParamStr, string][]): string;
+export declare function getResolvedParam(param: [URLParam, unknown] | [string, string]): [string, string];
+export declare function batchURLParamUpdate(params: ([URLParam, unknown] | [string, string])[]): void;
+export declare function getCurrentUrl(): string;

package/render-utils/URLParam.ts

@@ -1,84 +1,101 @@
 import { isNode } from "typesafecss";
 import { observable } from "mobx";
+import { throttleFunction } from "socket-function/src/misc";
+import { niceParse, niceStringify } from "./niceStringify";
 
-let allParams: URLParamStr[] = [];
+let urlParamLookup = new Map<string, URLParam<unknown>>();
+let pauseUpdate = false;
 
-let updated: URLParamStr[] = [];
-
-export class URLParamStr {
-    private state = observable({
-        seqNum: 0
-    });
-    public lastSetValue = "";
-    constructor(public readonly urlKey: string) {
-        allParams.push(this);
+export class URLParam<T = unknown> {
+    constructor(public readonly key: string, private defaultValue: T = "" as any) {
+        urlParamLookup.set(key, this);
     }
-    public forceUpdate() {
-        this.state.seqNum++;
+    valueSeqNum = observable({ value: 1 });
+    public get(): T {
+        urlBackSeqNum.value;
+        this.valueSeqNum.value;
+        let value = new URL(getCurrentUrl()).searchParams.get(this.key);
+        if (value === null) {
+            return this.defaultValue;
+        }
+        return niceParse(value) as T;
     }
-
-    public get() {
-        this.state.seqNum;
-        return new URLSearchParams(window.location.search).get(this.urlKey) || "";
+    public set(value: T) {
+        let url = new URL(getCurrentUrl());
+        if (value === this.defaultValue) {
+            url.searchParams.delete(this.key);
+        } else {
+            url.searchParams.set(this.key, niceStringify(value));
+        }
+        if (!pauseUpdate) {
+            void throttledUrlPush(url.toString());
+            this.valueSeqNum.value++;
+        }
     }
-    public set(value: string) {
-        if (value === this.get()) return;
-        this.lastSetValue = value;
-        batchUrlUpdate(() => {
-            updated.push(this);
-        });
-        this.state.seqNum++;
+    public reset() {
+        let url = new URL(getCurrentUrl());
+        url.searchParams.delete(this.key);
+        if (!pauseUpdate) {
+            void throttledUrlPush(url.toString());
+            this.valueSeqNum.value++;
+        }
+    }
+
+    public getOverride(value: T): [string, string] {
+        return [this.key, value as any];
     }
 
     public get value() {
         return this.get();
     }
-    public set value(value: string) {
+    public set value(value: T) {
         this.set(value);
     }
 }
 
-let inBatchUpdate = false;
-export function batchUrlUpdate<T>(code: () => T): T {
-    if (inBatchUpdate) return code();
-    inBatchUpdate = true;
+export function getResolvedParam(param: [URLParam, unknown] | [string, string]): [string, string] {
+    if (typeof param[0] === "string") {
+        return [param[0], niceStringify(param[1])];
+    }
+    return [param[0].key, niceStringify(param[1])];
+}
+export function batchURLParamUpdate(params: ([URLParam, unknown] | [string, string])[]) {
+    let resolvedParams = params.map(getResolvedParam);
+    pauseUpdate = true;
+    let url = new URL(location.href);
     try {
-        return code();
-    } finally {
-        inBatchUpdate = false;
-
-        let prevUpdated = updated;
-        updated = [];
-        let searchParams = new URLSearchParams(window.location.search);
-        for (let obj of prevUpdated) {
-            searchParams.set(obj.urlKey, obj.lastSetValue);
-        }
-        let newURL = "?" + searchParams.toString();
-        if (window.location.hash) {
-            newURL += window.location.hash;
+        for (let [key, value] of resolvedParams) {
+            url.searchParams.set(key, value);
+            let urlParam = urlParamLookup.get(key);
+            urlParam?.set(niceParse(value));
         }
-        window.history.pushState({}, "", newURL);
+    } finally {
+        pauseUpdate = false;
     }
+    urlBackSeqNum.value++;
+    void throttledUrlPush(url.toString());
 }
 
-export function createLink(params: [URLParamStr, string][]) {
-    let searchParams = new URLSearchParams(window.location.search);
-    for (let [param, value] of params) {
-        searchParams.set(param.urlKey, value);
-    }
-    let newURL = "?" + searchParams.toString();
-    if (window.location.hash) {
-        newURL += window.location.hash;
-    }
-    return newURL;
+export function getCurrentUrl() {
+    return currentBatchedUrl ?? location.href;
 }
 
+
+let currentBatchedUrl: string | undefined;
+function throttledUrlPush(url: string) {
+    history.pushState({}, "", url);
+    //currentBatchedUrl = url;
+    // NOTE: Stopped throttling, so when you click on links, it immediately updates the selected state. 
+    //void throttledUrlPushBase(url);
+}
+const throttledUrlPushBase = throttleFunction(1000, (url: string) => {
+    currentBatchedUrl = undefined;
+    history.pushState({}, "", url);
+});
+
+let urlBackSeqNum = observable({ value: 1 });
 if (!isNode()) {
-    // Watch for url push states
     window.addEventListener("popstate", () => {
-        // Force all to update, in case their param changed
-        for (let param of allParams) {
-            param.forceUpdate();
-        }
+        urlBackSeqNum.value++;
     });
 }

package/render-utils/niceStringify.d.ts

@@ -0,0 +1,5 @@
+export declare const niceStringifyTrue = "";
+export declare const niceStringifyNan = "{NaN}";
+export declare const niceStringifyUndefined = "{Undefined}";
+export declare function niceStringify(value: unknown): string;
+export declare function niceParse(str: string | undefined, noSpecialTrue?: boolean): unknown;

package/render-utils/niceStringify.ts

@@ -0,0 +1,83 @@
+// true => ""
+// "" => JSON.stringify("")
+
+export const niceStringifyTrue = "";
+// Starting/ending with a JSON character means anything string that looks like this
+//  will be encoded like: `"{Nan`, and it is impossible for an object to serialize to look like this.
+export const niceStringifyNan = `{NaN}`;
+export const niceStringifyUndefined = `{Undefined}`;
+
+
+// BUG: This is actually broken for hex strings. Hex strings may sometimes be entirely numbers,
+//  which means they will randomly change type.
+function looksLikeJSON(str: string) {
+    return (
+        str === "null"
+        || str === "true"
+        || str === "false"
+        || str[0] === `"` && str[str.length - 1] === `"`
+        || str[0] === `[` && str[str.length - 1] === `]`
+        || str[0] === `{` && str[str.length - 1] === `}`
+        || (48 <= str.charCodeAt(0) && str.charCodeAt(0) <= 57)
+        || str.length > 1 && str[0] === "-" && (48 <= str.charCodeAt(1) && str.charCodeAt(1) <= 57)
+        || str === niceStringifyTrue
+        || str === niceStringifyUndefined
+    );
+}
+
+export function niceStringify(value: unknown): string {
+    if (value === undefined) {
+        return niceStringifyUndefined;
+    }
+    if (value === true) return niceStringifyTrue;
+    if (Number.isNaN(value)) return niceStringifyNan;
+
+    // Any strings that don't look like JSON, don't need to encoded as JSON, and can instead
+    //  just be stored as strings.
+    if (typeof value === "string" && !looksLikeJSON(value)) {
+        return value;
+    }
+
+
+    let str = JSON.stringify(value);
+    if (typeof value !== "object") {
+        let testParse = niceParse(str);
+        if (testParse !== value) {
+            console.log(`niceStringify did not reverse correctly. Should have received ${JSON.stringify(value)}, did received ${JSON.stringify(testParse)}`);
+            debugger;
+        }
+    }
+
+    return str;
+}
+
+export function niceParse(str: string | undefined, noSpecialTrue = false): unknown {
+    if (str === undefined) {
+        return undefined;
+    }
+    if (str === niceStringifyTrue && !noSpecialTrue) return true;
+    if (str === niceStringifyNan) return Number.NaN;
+    if (str === niceStringifyUndefined) return undefined;
+    if (str === "") return str;
+
+    if (looksLikeJSON(str)) {
+        try {
+            return JSON.parse(str);
+        } catch { }
+    }
+    return str;
+}
+
+/*
+
+function setFromUrlValue(key: string, valueJSON: string) {
+    if(isMaybeJSON(valueJSON)) {
+        try {
+            values[key] = JSON.parse(valueJSON);
+            return;
+        } catch { }
+    }
+    // Always set it, if it isn't JSON, just assume it is raw text.
+    values[key] = valueJSON;
+}
+*/

package/web/browser.tsx

@@ -4,6 +4,9 @@ import { observer } from "../render-utils/observer";
 import { css, isNode } from "typesafecss";
 import { list } from "socket-function/src/misc";
 import { enableHotReloading } from "../builders/hotReload";
+import { URLParam } from "../render-utils/URLParam";
+
+const exampleUrlParam = new URLParam("example", "");
 
 @observer
 class App extends preact.Component {