sliftutils 0.7.0 → 0.7.2

package/README.md

@@ -0,0 +1,100 @@
+# sliftutils
+
+A build system and utility library for MobX + Preact projects.
+
+## Getting Started
+
+### 1. Setup
+
+The first thing you should do is call the setup function. They will give you a lot of boilerplate code which you can delete or keep (I recommend commiting first, so you can pick which boilerplate changes you want):
+
+```bash
+npx slift-setup
+# or
+npx sliftsetup
+```
+
+### 2. Build or Watch
+
+After setup, you can either **build** your project or **watch** for changes:
+
+#### Build Commands
+```bash
+npx build-nodejs      # Build Node.js application
+npx build-web         # Build web application
+npx build-extension   # Build browser extension
+npx build-electron    # Build Electron application
+```
+
+#### Watch Commands
+```bash
+npx slift-watch --port 9876 "nodejs/*.ts" "nodejs/*.tsx" "yarn build-nodejs"
+npx slift-watch --port 9877 "web/*.ts" "web/*.tsx" "yarn build-web"
+npx slift-watch --port 9878 "extension/*.ts" "extension/*.tsx" "yarn build-extension"
+npx slift-watch --port 9879 "electron/*.ts" "electron/*.tsx" "yarn build-electron"
+```
+
+### 3. Run
+
+After building, you can call the run functions:
+
+```bash
+node ./build-nodejs/server.js     # Run built Node.js app
+node ./builders/webRun.js         # Run web application
+node ./node_modules/electron/cli.js ./build-electron/electronMain.js  # Run Electron app
+```
+
+Or you can add your own scripts with special parameters if you want.
+
+## Hot Reloading
+
+### Optional Hot Reloading Function
+
+You can optionally call the hot reloading function in your code if you want automatic reloading during development:
+
+```typescript
+import { enableHotReloading } from "sliftutils/builders/hotReload";
+
+async function main() {
+    await enableHotReloading();
+    // Your application code here
+}
+
+main().catch(console.error);
+```
+
+### Running Node.js Scripts Directly
+
+Node.js scripts can be called directly with **typenode** without needing to bundle them:
+
+```bash
+typenode ./nodejs/server.ts
+```
+
+When you call scripts directly with typenode, you can use hot reloading which allows you to hot reload per file by setting the `module.hotreload` flag or adding a `hotreload.flag` file.
+
+#### Per-File Hot Reloading
+
+To enable hot reloading for specific files, set the `module.hotreload` flag at the top of your file:
+
+```typescript
+// Either set this flag on the files you want to hot reload
+module.hotreload = true;
+
+export function exampleFunction() {
+    return "Hello from exampleFile.ts";
+}
+```
+
+Alternatively, you can add a file called `hotreload.flag` in a folder, and everything in that folder and all child files will hot reload.
+
+See `nodejs/exampleFile.ts` for an example of how to use the hot reload flag.
+
+## Utilities
+
+This package includes many utilities for MobX + Preact projects. To see what utilities are available, read the `index.d.ts` file in the package. The utilities will work with any MobX + Preact type projects.
+
+## License
+
+MIT
+

package/builders/generateIndexDts.js

@@ -0,0 +1,50 @@
+const fs = require("fs");
+const path = require("path");
+
+function getAllDtsFiles(dir, fileList = []) {
+    const files = fs.readdirSync(dir);
+
+    for (const file of files) {
+        const filePath = path.join(dir, file);
+        const stat = fs.statSync(filePath);
+
+        if (stat.isDirectory()) {
+            getAllDtsFiles(filePath, fileList);
+        } else if (file.endsWith(".d.ts")) {
+            fileList.push(filePath);
+        }
+    }
+
+    return fileList;
+}
+
+function generateIndexDts() {
+    const renderUtilsPath = path.join(__dirname, "..", "render-utils");
+    const dtsFiles = getAllDtsFiles(renderUtilsPath);
+
+    const modules = dtsFiles
+        .map(filePath => {
+            const relativePath = path.relative(renderUtilsPath, filePath);
+            const withoutExt = relativePath.replace(/\.d\.ts$/, "");
+            const modulePath = "sliftutils/render-utils/" + withoutExt.replace(/\\/g, "/");
+
+            const content = fs.readFileSync(filePath, "utf8");
+            const indentedContent = content
+                .split("\n")
+                .map(line => line ? "    " + line : line)
+                .join("\n");
+
+            return `declare module "${modulePath}" {\n${indentedContent}\n}`;
+        })
+        .sort()
+        .join("\n\n");
+
+    const outputPath = path.join(__dirname, "..", "index.d.ts");
+    const header = `// Auto-generated file. Do not edit manually.\n// Generated by: yarn generate-index-dts\n\n`;
+
+    fs.writeFileSync(outputPath, header + modules + "\n", "utf8");
+    console.log(`Generated ${outputPath} with ${dtsFiles.length} module declarations`);
+}
+
+generateIndexDts();
+

package/builders/hotReload.ts

@@ -1,3 +1,4 @@
+import { watchFilesAndTriggerHotReloading } from "socket-function/hot/HotReloadController";
 import { isInBrowser, isInChromeExtension, isInChromeExtensionBackground, isInChromeExtensionContentScript } from "../misc/environment";
 
 const DEFAULT_WATCH_PORT = 9876;
@@ -14,6 +15,8 @@ export async function enableHotReloading(config?: {
         watchPortHotReload(config?.port, () => {
             window.location.reload();
         });
+    } else {
+        watchFilesAndTriggerHotReloading();
     }
 }
 

package/builders/setup.ts

@@ -136,45 +136,35 @@ function updatePackageJson(packageJsonPath: string) {
         packageJson.scripts = {};
     }
 
-    // Add type script
+    // Add type script (copied from source)
     if (!packageJson.scripts.type) {
         packageJson.scripts.type = sourcePackageJson.scripts.type;
         console.log("  Added 'type' script");
     }
 
-    // Add run commands
-    let runCommands = ["run-nodejs", "run-nodejs-dev", "run-web", "run-electron"];
-    for (let cmd of runCommands) {
+    // Copy run commands from source (except run-web)
+    let copiedCommands = ["run-nodejs", "run-nodejs-dev", "run-electron"];
+    for (let cmd of copiedCommands) {
         if (!packageJson.scripts[cmd]) {
             packageJson.scripts[cmd] = sourcePackageJson.scripts[cmd];
             console.log(`  Added '${cmd}' script`);
         }
     }
 
-    // Add build commands using bin references
-    let buildCommands = {
+    // Add hard-coded commands
+    let hardCodedCommands: { [key: string]: string } = {
+        "run-web": "node ./node_modules/sliftutils/builders/webRun.js",
         "build-nodejs": "build-nodejs",
         "build-web": "build-web",
         "build-extension": "build-extension",
         "build-electron": "build-electron",
-    };
-
-    for (let [scriptName, binName] of Object.entries(buildCommands)) {
-        if (!packageJson.scripts[scriptName]) {
-            packageJson.scripts[scriptName] = binName;
-            console.log(`  Added '${scriptName}' script`);
-        }
-    }
-
-    // Add watch commands with ports
-    let watchCommands = {
         "watch-nodejs": "slift-watch --port 9876 \"nodejs/*.ts\" \"nodejs/*.tsx\" \"yarn build-nodejs\"",
         "watch-web": "slift-watch --port 9877 \"web/*.ts\" \"web/*.tsx\" \"yarn build-web\"",
         "watch-extension": "slift-watch --port 9878 \"extension/*.ts\" \"extension/*.tsx\" \"yarn build-extension\"",
         "watch-electron": "slift-watch --port 9879 \"electron/*.ts\" \"electron/*.tsx\" \"yarn build-electron\"",
     };
 
-    for (let [scriptName, command] of Object.entries(watchCommands)) {
+    for (let [scriptName, command] of Object.entries(hardCodedCommands)) {
         if (!packageJson.scripts[scriptName]) {
             packageJson.scripts[scriptName] = command;
             console.log(`  Added '${scriptName}' script`);

package/builders/webRun.js

@@ -1,4 +1,4 @@
 #!/usr/bin/env node
 const open = require("open");
-open("./build-web/web/index.html");
+void open("./build-web/web/index.html");
 

package/index.d.ts

@@ -0,0 +1,332 @@
+// Auto-generated file. Do not edit manually.
+// Generated by: yarn generate-index-dts
+
+declare module "sliftutils/render-utils/DropdownCustom" {
+    import preact from "preact";
+    import { LengthOrPercentage } from "typesafecss/cssTypes";
+    export declare class DropdownCustom<T> extends preact.Component<{
+        class?: string;
+        optionClass?: string;
+        title?: string;
+        value: T;
+        onChange: (value: T, index: number) => void;
+        maxWidth?: LengthOrPercentage;
+        options: {
+            value: T;
+            label: (isOpen: boolean) => preact.ComponentChild;
+        }[];
+    }> {
+        synced: {
+            isOpen: boolean;
+            tempIndexSelected: number | null;
+        };
+        onUnmount: (() => void)[];
+        componentDidMount(): void;
+        componentDidUnmount(): void;
+        render(): preact.JSX.Element;
+    }
+
+}
+
+declare module "sliftutils/render-utils/FullscreenModal" {
+    import preact from "preact";
+    export declare function showFullscreenModal(contents: preact.ComponentChildren): void;
+    export declare class FullscreenModal extends preact.Component<{
+        parentState?: {
+            open: boolean;
+        };
+        onCancel?: () => void;
+        style?: preact.JSX.CSSProperties;
+        outerStyle?: preact.JSX.CSSProperties;
+    }> {
+        render(): preact.JSX.Element;
+    }
+
+}
+
+declare module "sliftutils/render-utils/Input" {
+    import preact from "preact";
+    export type InputProps = (preact.JSX.HTMLAttributes<HTMLInputElement> & {
+        /** ONLY throttles onChangeValue */
+        throttle?: number;
+        flavor?: "large" | "small" | "none";
+        focusOnMount?: boolean;
+        textarea?: boolean;
+        /** Update on key stroke, not on blur (just does onInput = onChange, as onInput already does this) */
+        hot?: boolean;
+        /** Updates arrow keys with modifier behavior to use larger numbers, instead of decimals. */
+        integer?: boolean;
+        /** Only works with number/integer */
+        reverseArrowKeyDirection?: boolean;
+        inputRef?: (x: HTMLInputElement | null) => void;
+        /** Don't blur on enter key */
+        noEnterKeyBlur?: boolean;
+        noFocusSelect?: boolean;
+        inputKey?: string;
+        fillWidth?: boolean;
+        autocompleteValues?: string[];
+        /** Forces the input to update when focused. Usually we hold updates, to prevent the user's
+         *      typing to be interrupted by background updates.
+         *      NOTE: "hot" is usually required when using this.
+         */
+        forceInputValueUpdatesWhenFocused?: boolean;
+        onChangeValue?: (value: string) => void;
+    });
+    export declare class Input extends preact.Component<InputProps> {
+        onFocusText: string;
+        firstFocus: boolean;
+        elem: HTMLInputElement | null;
+        lastValue: unknown;
+        lastChecked: unknown;
+        onChangeThrottle: undefined | {
+            throttle: number;
+            run: (newValue: string) => void;
+        };
+        render(): preact.JSX.Element;
+    }
+
+}
+
+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;
+        /** A number, AND, an integer. Changes behavior arrow arrow keys as well */
+        integer?: boolean;
+        checkbox?: boolean;
+        edit?: boolean;
+        alwaysShowPencil?: boolean;
+        outerClass?: string;
+        maxDecimals?: number;
+        percent?: boolean;
+        editClass?: string;
+        fontSize?: number;
+        tooltip?: string;
+        fillWidth?: boolean;
+        useDateUI?: boolean;
+    };
+    export declare const startGuessDateRange: number;
+    export declare const endGuessDateRange: number;
+    export declare class InputLabel extends preact.Component<InputLabelProps> {
+        synced: {
+            editting: boolean;
+            editInputValue: string;
+            editUpdateSeqNum: number;
+        };
+        render(): preact.JSX.Element;
+    }
+    export declare class InputLabelURL extends preact.Component<InputLabelProps & {
+        persisted: URLParamStr;
+    }> {
+        render(): preact.JSX.Element;
+    }
+
+}
+
+declare module "sliftutils/render-utils/InputPicker" {
+    import preact from "preact";
+    export type InputOption<T> = {
+        value: T;
+        label?: preact.ComponentChild;
+        matchText?: string;
+    };
+    export type FullInputOption<T> = {
+        value: T;
+        label: preact.ComponentChild;
+        matchText: string;
+    };
+    export declare class InputPickerURL extends preact.Component<{
+        label?: preact.ComponentChild;
+        options: (string | InputOption<string>)[];
+        allowNonOptions?: boolean;
+        value: {
+            value: string;
+        };
+    }> {
+        render(): preact.JSX.Element;
+    }
+    export declare class InputPicker<T> extends preact.Component<{
+        label?: preact.ComponentChild;
+        picked: T[];
+        options: InputOption<T>[];
+        addPicked: (value: T) => void;
+        removePicked: (value: T) => void;
+        allowNonOptions?: boolean;
+    }> {
+        synced: {
+            pendingText: string;
+            focused: boolean;
+        };
+        render(): preact.JSX.Element;
+    }
+
+}
+
+declare module "sliftutils/render-utils/LocalStorageParam" {
+    export declare class LocalStorageParamStr {
+        readonly storageKey: string;
+        private defaultValue;
+        private state;
+        lastSetValue: string;
+        constructor(storageKey: string, defaultValue?: string);
+        forceUpdate(): void;
+        get(): string;
+        set(value: string): void;
+        get value(): string;
+        set value(value: string);
+    }
+
+}
+
+declare module "sliftutils/render-utils/SyncedController" {
+    import { SocketRegistered } from "socket-function/SocketFunctionTypes";
+    type RemapFunction<T> = T extends (...args: infer Args) => Promise<infer Return> ? {
+        (...args: Args): Return | undefined;
+        promise(...args: Args): Promise<Return>;
+        refresh(...args: Args): void;
+        refreshAll(): void;
+        reset(...args: Args): void;
+        resetAll(): void;
+        isLoading(...args: Args): boolean;
+        setCache(cache: {
+            args: Args;
+            result: Return;
+        }): void;
+    } : T;
+    export declare function getSyncedController<T extends SocketRegistered>(controller: T, config?: {
+        /** When a controller call for a write finishes, we refresh all readers.
+         *      - Invalidation is global, across all controllers.
+         */
+        reads?: {
+            [key in keyof T["nodes"][""]]?: string[];
+        };
+        writes?: {
+            [key in keyof T["nodes"][""]]?: string[];
+        };
+    }): {
+        (nodeId: string): {
+            [fnc in keyof T["nodes"][""]]: RemapFunction<T["nodes"][""][fnc]>;
+        } & {
+            resetAll(): void;
+            refreshAll(): void;
+            anyPending(): boolean;
+        };
+        resetAll(): void;
+        refreshAll(): void;
+        anyPending(): boolean;
+        rerenderAll(): void;
+    };
+    export {};
+
+}
+
+declare module "sliftutils/render-utils/SyncedLoadingIndicator" {
+    import * as preact from "preact";
+    export declare class SyncedLoadingIndicator extends preact.Component<{
+        controller: {
+            anyPending: () => boolean;
+        };
+    }> {
+        render(): preact.JSX.Element | null;
+    }
+
+}
+
+declare module "sliftutils/render-utils/Table" {
+    import preact from "preact";
+    import { JSXFormatter } from "./GenericFormat";
+    export type ColumnType<T = unknown, Row extends RowType = RowType> = undefined | null | {
+        center?: boolean;
+        title?: preact.ComponentChild;
+        formatter?: JSXFormatter<T, Row>;
+    };
+    export type RowType = {
+        [columnName: string]: unknown;
+    };
+    export type ColumnsType = {
+        [columnName: string]: ColumnType;
+    };
+    export type TableType<RowT extends RowType = RowType> = {
+        columns: {
+            [columnName in keyof RowT]?: ColumnType<RowT[columnName], RowT>;
+        };
+        rows: RowT[];
+    };
+    export declare class Table<RowT extends RowType> extends preact.Component<TableType<RowT> & {
+        class?: string;
+        cellClass?: string;
+        initialLimit?: number;
+        lineLimit?: number;
+        characterLimit?: number;
+        excludeEmptyColumns?: boolean;
+    }> {
+        state: {
+            limit: number;
+        };
+        render(): preact.JSX.Element;
+    }
+
+}
+
+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 function batchUrlUpdate<T>(code: () => T): T;
+    export declare function createLink(params: [URLParamStr, string][]): string;
+
+}
+
+declare module "sliftutils/render-utils/asyncObservable" {
+    export declare function asyncCache<Args, T>(getValue: (args: Args) => Promise<T>): {
+        (args: Args): T | undefined;
+    };
+
+}
+
+declare module "sliftutils/render-utils/mobxTyped" {
+    export declare function configureMobxNextFrameScheduler(): void;
+
+}
+
+declare module "sliftutils/render-utils/modal" {
+    import preact from "preact";
+    export declare function showModal(config: {
+        contents: preact.ComponentChildren;
+    }): {
+        close: () => void;
+    };
+
+}
+
+declare module "sliftutils/render-utils/observer" {
+    import * as preact from "preact";
+    import { Reaction } from "mobx";
+    export declare function observer<T extends {
+        new (...args: any[]): {
+            render(): preact.ComponentChild;
+            forceUpdate(callback?: () => void): void;
+            componentWillUnmount?(): void;
+        };
+    }>(Constructor: T): {
+        new (...args: any[]): {
+            reaction: Reaction;
+            componentWillUnmount(): void;
+            render(...args: any[]): preact.ComponentChild;
+            forceUpdate(callback?: () => void): void;
+        };
+        readonly name: string;
+    } & T;
+
+}

package/nodejs/exampleFile.ts

@@ -0,0 +1,6 @@
+// Either set this flag on the files you want to hot reload, or add a file called hotreload.flag and that folder, everything in it and all the child uh files will hot reload. 
+module.hotreload = true;
+
+export function exampleFunction() {
+    return "Hello from exampleFile.ts";
+}

package/nodejs/server.ts

@@ -1,15 +1,13 @@
-import http from "http";
+import { delay } from "socket-function/src/batching";
+import { exampleFunction } from "./exampleFile";
+import { enableHotReloading } from "../builders/hotReload";
 
 async function main() {
-    const server = http.createServer((req, res) => {
-        res.writeHead(200, { "Content-Type": "text/plain" });
-        res.end("Hello from Node.js!\n");
-    });
-
-    const port = 3000;
-    server.listen(port, () => {
-        console.log(`Server running at http://localhost:${port}/`);
-    });
+    await enableHotReloading();
+    while (true) {
+        console.log(exampleFunction());
+        await delay(1000);
+    }
 }
 
 main().catch(console.error);

package/package.json

@@ -1,10 +1,12 @@
 {
     "name": "sliftutils",
-    "version": "0.7.0",
+    "version": "0.7.2",
     "main": "index.js",
     "license": "MIT",
     "scripts": {
         "type": "yarn tsc --noEmit",
+        "emit-dts": "yarn tsc --project tsconfig.declarations.json",
+        "generate-index-dts": "node ./builders/generateIndexDts.js",
         "run-nodejs": "node ./build-nodejs/server.js",
         "run-nodejs-dev": "typenode ./nodejs/server.ts",
         "run-web": "node ./builders/webRun.js",
@@ -21,11 +23,17 @@
     },
     "bin": {
         "build-nodejs": "./builders/nodeJSBuildRun.js",
+        "buildnodejs": "./builders/nodeJSBuildRun.js",
         "build-extension": "./builders/extensionBuildRun.js",
+        "buildextension": "./builders/extensionBuildRun.js",
         "build-web": "./builders/webBuildRun.js",
+        "buildweb": "./builders/webBuildRun.js",
         "build-electron": "./builders/electronBuildRun.js",
+        "buildelectron": "./builders/electronBuildRun.js",
         "slift-watch": "./builders/watchRun.js",
-        "slift-setup": "./builders/setupRun.js"
+        "sliftwatch": "./builders/watchRun.js",
+        "slift-setup": "./builders/setupRun.js",
+        "sliftsetup": "./builders/setupRun.js"
     },
     "dependencies": {
         "@types/shell-quote": "^1.7.5",

package/render-utils/DropdownCustom.d.ts

@@ -0,0 +1,23 @@
+import preact from "preact";
+import { LengthOrPercentage } from "typesafecss/cssTypes";
+export declare class DropdownCustom<T> extends preact.Component<{
+    class?: string;
+    optionClass?: string;
+    title?: string;
+    value: T;
+    onChange: (value: T, index: number) => void;
+    maxWidth?: LengthOrPercentage;
+    options: {
+        value: T;
+        label: (isOpen: boolean) => preact.ComponentChild;
+    }[];
+}> {
+    synced: {
+        isOpen: boolean;
+        tempIndexSelected: number | null;
+    };
+    onUnmount: (() => void)[];
+    componentDidMount(): void;
+    componentDidUnmount(): void;
+    render(): preact.JSX.Element;
+}

package/render-utils/FullscreenModal.d.ts

@@ -0,0 +1,12 @@
+import preact from "preact";
+export declare function showFullscreenModal(contents: preact.ComponentChildren): void;
+export declare class FullscreenModal extends preact.Component<{
+    parentState?: {
+        open: boolean;
+    };
+    onCancel?: () => void;
+    style?: preact.JSX.CSSProperties;
+    outerStyle?: preact.JSX.CSSProperties;
+}> {
+    render(): preact.JSX.Element;
+}

package/render-utils/Input.d.ts

@@ -0,0 +1,39 @@
+import preact from "preact";
+export type InputProps = (preact.JSX.HTMLAttributes<HTMLInputElement> & {
+    /** ONLY throttles onChangeValue */
+    throttle?: number;
+    flavor?: "large" | "small" | "none";
+    focusOnMount?: boolean;
+    textarea?: boolean;
+    /** Update on key stroke, not on blur (just does onInput = onChange, as onInput already does this) */
+    hot?: boolean;
+    /** Updates arrow keys with modifier behavior to use larger numbers, instead of decimals. */
+    integer?: boolean;
+    /** Only works with number/integer */
+    reverseArrowKeyDirection?: boolean;
+    inputRef?: (x: HTMLInputElement | null) => void;
+    /** Don't blur on enter key */
+    noEnterKeyBlur?: boolean;
+    noFocusSelect?: boolean;
+    inputKey?: string;
+    fillWidth?: boolean;
+    autocompleteValues?: string[];
+    /** Forces the input to update when focused. Usually we hold updates, to prevent the user's
+     *      typing to be interrupted by background updates.
+     *      NOTE: "hot" is usually required when using this.
+     */
+    forceInputValueUpdatesWhenFocused?: boolean;
+    onChangeValue?: (value: string) => void;
+});
+export declare class Input extends preact.Component<InputProps> {
+    onFocusText: string;
+    firstFocus: boolean;
+    elem: HTMLInputElement | null;
+    lastValue: unknown;
+    lastChecked: unknown;
+    onChangeThrottle: undefined | {
+        throttle: number;
+        run: (newValue: string) => void;
+    };
+    render(): preact.JSX.Element;
+}

package/render-utils/InputLabel.d.ts

@@ -0,0 +1,35 @@
+import preact from "preact";
+import { InputProps } from "./Input";
+import { URLParamStr } from "./URLParam";
+export type InputLabelProps = Omit<InputProps, "label" | "title"> & {
+    label?: preact.ComponentChild;
+    number?: boolean;
+    /** A number, AND, an integer. Changes behavior arrow arrow keys as well */
+    integer?: boolean;
+    checkbox?: boolean;
+    edit?: boolean;
+    alwaysShowPencil?: boolean;
+    outerClass?: string;
+    maxDecimals?: number;
+    percent?: boolean;
+    editClass?: string;
+    fontSize?: number;
+    tooltip?: string;
+    fillWidth?: boolean;
+    useDateUI?: boolean;
+};
+export declare const startGuessDateRange: number;
+export declare const endGuessDateRange: number;
+export declare class InputLabel extends preact.Component<InputLabelProps> {
+    synced: {
+        editting: boolean;
+        editInputValue: string;
+        editUpdateSeqNum: number;
+    };
+    render(): preact.JSX.Element;
+}
+export declare class InputLabelURL extends preact.Component<InputLabelProps & {
+    persisted: URLParamStr;
+}> {
+    render(): preact.JSX.Element;
+}

package/render-utils/InputPicker.d.ts

@@ -0,0 +1,35 @@
+import preact from "preact";
+export type InputOption<T> = {
+    value: T;
+    label?: preact.ComponentChild;
+    matchText?: string;
+};
+export type FullInputOption<T> = {
+    value: T;
+    label: preact.ComponentChild;
+    matchText: string;
+};
+export declare class InputPickerURL extends preact.Component<{
+    label?: preact.ComponentChild;
+    options: (string | InputOption<string>)[];
+    allowNonOptions?: boolean;
+    value: {
+        value: string;
+    };
+}> {
+    render(): preact.JSX.Element;
+}
+export declare class InputPicker<T> extends preact.Component<{
+    label?: preact.ComponentChild;
+    picked: T[];
+    options: InputOption<T>[];
+    addPicked: (value: T) => void;
+    removePicked: (value: T) => void;
+    allowNonOptions?: boolean;
+}> {
+    synced: {
+        pendingText: string;
+        focused: boolean;
+    };
+    render(): preact.JSX.Element;
+}

package/render-utils/LocalStorageParam.d.ts

@@ -0,0 +1,12 @@
+export declare class LocalStorageParamStr {
+    readonly storageKey: string;
+    private defaultValue;
+    private state;
+    lastSetValue: string;
+    constructor(storageKey: string, defaultValue?: string);
+    forceUpdate(): void;
+    get(): string;
+    set(value: string): void;
+    get value(): string;
+    set value(value: string);
+}

package/render-utils/SyncedController.d.ts

@@ -0,0 +1,38 @@
+import { SocketRegistered } from "socket-function/SocketFunctionTypes";
+type RemapFunction<T> = T extends (...args: infer Args) => Promise<infer Return> ? {
+    (...args: Args): Return | undefined;
+    promise(...args: Args): Promise<Return>;
+    refresh(...args: Args): void;
+    refreshAll(): void;
+    reset(...args: Args): void;
+    resetAll(): void;
+    isLoading(...args: Args): boolean;
+    setCache(cache: {
+        args: Args;
+        result: Return;
+    }): void;
+} : T;
+export declare function getSyncedController<T extends SocketRegistered>(controller: T, config?: {
+    /** When a controller call for a write finishes, we refresh all readers.
+     *      - Invalidation is global, across all controllers.
+     */
+    reads?: {
+        [key in keyof T["nodes"][""]]?: string[];
+    };
+    writes?: {
+        [key in keyof T["nodes"][""]]?: string[];
+    };
+}): {
+    (nodeId: string): {
+        [fnc in keyof T["nodes"][""]]: RemapFunction<T["nodes"][""][fnc]>;
+    } & {
+        resetAll(): void;
+        refreshAll(): void;
+        anyPending(): boolean;
+    };
+    resetAll(): void;
+    refreshAll(): void;
+    anyPending(): boolean;
+    rerenderAll(): void;
+};
+export {};

package/render-utils/SyncedLoadingIndicator.d.ts

@@ -0,0 +1,8 @@
+import * as preact from "preact";
+export declare class SyncedLoadingIndicator extends preact.Component<{
+    controller: {
+        anyPending: () => boolean;
+    };
+}> {
+    render(): preact.JSX.Element | null;
+}

package/render-utils/Table.d.ts

@@ -0,0 +1,32 @@
+import preact from "preact";
+import { JSXFormatter } from "./GenericFormat";
+export type ColumnType<T = unknown, Row extends RowType = RowType> = undefined | null | {
+    center?: boolean;
+    title?: preact.ComponentChild;
+    formatter?: JSXFormatter<T, Row>;
+};
+export type RowType = {
+    [columnName: string]: unknown;
+};
+export type ColumnsType = {
+    [columnName: string]: ColumnType;
+};
+export type TableType<RowT extends RowType = RowType> = {
+    columns: {
+        [columnName in keyof RowT]?: ColumnType<RowT[columnName], RowT>;
+    };
+    rows: RowT[];
+};
+export declare class Table<RowT extends RowType> extends preact.Component<TableType<RowT> & {
+    class?: string;
+    cellClass?: string;
+    initialLimit?: number;
+    lineLimit?: number;
+    characterLimit?: number;
+    excludeEmptyColumns?: boolean;
+}> {
+    state: {
+        limit: number;
+    };
+    render(): preact.JSX.Element;
+}

package/render-utils/URLParam.d.ts

@@ -0,0 +1,13 @@
+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 function batchUrlUpdate<T>(code: () => T): T;
+export declare function createLink(params: [URLParamStr, string][]): string;

package/render-utils/asyncObservable.d.ts

@@ -0,0 +1,3 @@
+export declare function asyncCache<Args, T>(getValue: (args: Args) => Promise<T>): {
+    (args: Args): T | undefined;
+};

package/render-utils/mobxTyped.d.ts

@@ -0,0 +1 @@
+export declare function configureMobxNextFrameScheduler(): void;

package/render-utils/modal.d.ts

@@ -0,0 +1,6 @@
+import preact from "preact";
+export declare function showModal(config: {
+    contents: preact.ComponentChildren;
+}): {
+    close: () => void;
+};

package/render-utils/observer.d.ts

@@ -0,0 +1,17 @@
+import * as preact from "preact";
+import { Reaction } from "mobx";
+export declare function observer<T extends {
+    new (...args: any[]): {
+        render(): preact.ComponentChild;
+        forceUpdate(callback?: () => void): void;
+        componentWillUnmount?(): void;
+    };
+}>(Constructor: T): {
+    new (...args: any[]): {
+        reaction: Reaction;
+        componentWillUnmount(): void;
+        render(...args: any[]): preact.ComponentChild;
+        forceUpdate(callback?: () => void): void;
+    };
+    readonly name: string;
+} & T;

package/spec.txt

@@ -1,38 +1,4 @@
-
-1) Copy command (setup-proj?, copy-proj?), to copy all default files
-    - I think we will have to do some renaming so that when it references our lib files, it actually references our package instead of relative. 
-
-- HELPER bin to setup the project with:
-    (Only if the files don't exist)
-    tsconfig.json
-    .gitignore
-    .vscode (for format on save)
-    .eslintrc.js
-    .cursorrules
-    Add dependencies to package.json
-        (Any dependencies our helper project has should be dev dependencies)
-        - typenode
-        - socket-function
-        - typesafecss
-        - typedev
-    add the basic entry points for Node.js, the browser, the browser HTML file, and even some files for a Chrome extension, and even for an Electron app. 
-        - We'll make Electron optional though, and so they'll have to manually install Electron if they want to make an Electron app. We can check for this and warn if they try to build electron without having electron installed. 
-    Add build and type commands to package.json
-        - We have the binaries for the build commands, but adding them to packs.json makes it a lot more discoverable. 
-        - And it's just very good practice to add the type command to package.json. That way you could just say, what does this command do to the AI? and it'll tell you exactly what it does, instead of nesting 
-
-EXPOSE our helpers in our main export, in an index.ts file?
-- Will this let us just import them? Hmm...
-5) Test it in a new test repo
-- Test it with:
-    single html browser site
-    nodejs bundled running
-    electron
-    chrome extension
-- Make sure sourcemaps are preserved and work
-5.1) Use the new project and bundler in voice-cloner
-
-
+ALSO, go fix our typings in socket-function as well
 
 TODO:
 - vscode extension as well

package/tsconfig.declarations.json

@@ -0,0 +1,18 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "declaration": true,
+        "emitDeclarationOnly": true,
+        "outDir": "./render-utils",
+        "rootDir": "./render-utils"
+    },
+    "include": [
+        "render-utils/**/*.ts",
+        "render-utils/**/*.tsx"
+    ],
+    "exclude": [
+        "node_modules",
+        "*_venv"
+    ]
+}
+

package/render-utils/browser.tsx

@@ -1,31 +0,0 @@
-import * as preact from "preact";
-import { observable } from "mobx";
-import { observer } from "./observer";
-import { isNode } from "typesafecss";
-
-@observer
-class App extends preact.Component {
-    synced = observable({
-        count: 0,
-    });
-
-    render() {
-        return (
-            <div>
-                <h1>Hello from Web!</h1>
-                <p>Count: {this.synced.count}</p>
-                <button onClick={() => this.synced.count++}>
-                    Increment
-                </button>
-            </div>
-        );
-    }
-}
-
-async function main() {
-    if (isNode()) return;
-    preact.render(<App />, document.getElementById("app")!);
-}
-
-main().catch(console.error);
-