sliftutils 0.6.6 → 0.7.1

package/package.json

@@ -1,17 +1,39 @@
 {
     "name": "sliftutils",
-    "version": "0.6.6",
+    "version": "0.7.1",
     "main": "index.js",
     "license": "MIT",
     "scripts": {
         "type": "yarn tsc --noEmit",
-        "build-nodejs": "yarn typenode ./builders/nodeJSBuild.ts",
+        "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",
+        "run-electron": "node ./node_modules/electron/cli.js ./build-electron/electronMain.js",
+        "build-nodejs": "node ./builders/nodeJSBuildRun.js",
+        "build-web": "node ./builders/webBuildRun.js",
+        "build-extension": "node ./builders/extensionBuildRun.js",
+        "build-electron": "node ./builders/electronBuildRun.js",
+        "watch-nodejs": "node ./builders/watchRun.js --port 9876 \"nodejs/*.ts\" \"nodejs/*.tsx\" \"yarn build-nodejs\"",
+        "watch-web": "node ./builders/watchRun.js --port 9877 \"web/*.ts\" \"web/*.tsx\" \"yarn build-web\"",
+        "watch-extension": "node ./builders/watchRun.js --port 9878 \"extension/*.ts\" \"extension/*.tsx\" \"yarn build-extension\"",
+        "watch-electron": "node ./builders/watchRun.js --port 9879 \"electron/*.ts\" \"electron/*.tsx\" \"yarn build-electron\"",
         "notes": "mobx, preact, socket-function, typenode SHOULD be peerDependencies. But we want to use yarn (better dependency deduplication), so we can't use peerDependencies (as they aren't installed by default, which makes them a nightmare to use). If you want to override the versions, feel free to use overrides/resolutions."
     },
     "bin": {
         "build-nodejs": "./builders/nodeJSBuildRun.js",
+        "buildnodejs": "./builders/nodeJSBuildRun.js",
         "build-extension": "./builders/extensionBuildRun.js",
-        "build-web": "./builders/webBuildRun.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",
+        "sliftwatch": "./builders/watchRun.js",
+        "slift-setup": "./builders/setupRun.js",
+        "sliftsetup": "./builders/setupRun.js"
     },
     "dependencies": {
         "@types/shell-quote": "^1.7.5",
@@ -22,12 +44,15 @@
         "socket-function": "^0.155.0",
         "typenode": "^6.0.0",
         "typesafecss": "^0.26.0",
+        "ws": "^8.18.3",
         "yargs": "15.4.1"
     },
     "devDependencies": {
         "@types/chrome": "^0.0.237",
         "@types/yargs": "15.0.19",
         "debugbreak": "^0.9.9",
+        "electron": "^33.2.1",
+        "open": "^8.4.0",
         "typedev": "^0.1.1"
     }
 }

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/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Web App</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="./browser.js"></script>
+</body>
+</html>
+

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,66 +1,7 @@
-TODO:
-
-
-    4) New project with:
-
-        We need bins and entry points for the common types of builds
-            site
-                build site, copy it
-            electron
-                build main process, copy it
-                build render process, copy it
-                copy the json config file?
+Okay Omit our typings, and then I guess we have to merge them all into one file. Although, if they reference each other, that's going to be difficult. 
 
-        build-web
-            - I guess it's the same as the Node.js build.
-                - index.html file, which is optional. 
-                - Assets folder, which is optional. 
-        build-electron
+Fix our typings. 
+ALSO, go fix our typings in socket-function as well
 
-        watch helper script in bin
-            - And have it automatically ignore .gitignored files
-            - And have it also watch .watchignore
-            - accepts port argument to broadcast when the build changes
-
-        watcher port, and helper function for hot reloading (watchHotReload)
-            - accepts port argument
-            - if in the browser, refreshes
-                - warns if it can't connect to the socket, specifying the watch script that should be used
-            - in nodejs, instead use socket-function hot reloading
-                - import { onHotReload, watchFilesAndTriggerHotReloading } from "socket-function/hot/HotReloadController";
-            - in electron watches and refreshes (no per file reloading)
-            - in chrome extension
-                - errors if called in content script (must be called in background script)
-                - reloads extension
-                - option to refresh content script pages in overall watch function
-                    - On load, if reloaded in the last 10s, tells any pages which loaded content script to refresh their page
-        
-        - 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
+TODO:
+- vscode extension as well

package/storage/FileFolderAPI.tsx

@@ -1,7 +1,7 @@
 import preact from "preact";
 import { getFileSystemPointer, storeFileSystemPointer } from "./fileSystemPointer";
 import { observable } from "mobx";
-import { observer } from "../web/observer";
+import { observer } from "../render-utils/observer";
 import { cache, lazy } from "socket-function/src/caching";
 import { css, isNode } from "typesafecss";
 import { IStorageRaw } from "./IStorage";

package/storage/PendingManager.tsx

@@ -2,7 +2,7 @@ import { throttleFunction } from "socket-function/src/misc";
 import { observable } from "mobx";
 import preact from "preact";
 import { css } from "typesafecss";
-import { observer } from "../web/observer";
+import { observer } from "../render-utils/observer";
 import { formatTime } from "socket-function/src/formatting/format";
 
 let watchState = observable({

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/web/browser.tsx

@@ -0,0 +1,37 @@
+import * as preact from "preact";
+import { observable } from "mobx";
+import { observer } from "../render-utils/observer";
+import { css, isNode } from "typesafecss";
+import { list } from "socket-function/src/misc";
+import { enableHotReloading } from "../builders/hotReload";
+
+@observer
+class App extends preact.Component {
+    synced = observable({
+        count: 0,
+    });
+
+    render() {
+        return (
+            <div className={css.pad2(20)}>
+                <h1>Hello from Web! 3</h1>
+                <p>Count: {this.synced.count}</p>
+                <button onClick={() => this.synced.count++}>
+                    Increment
+                </button>
+                <div>
+                    {list(1000).map(x => <div key={x}>{x}</div>)}
+                </div>
+            </div>
+        );
+    }
+}
+
+async function main() {
+    if (isNode()) return;
+    await enableHotReloading({ port: 9877 });
+    preact.render(<App />, document.getElementById("app")!);
+}
+
+main().catch(console.error);
+

package/web/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Web App</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            box-sizing: border-box;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            word-break: break-word;
+        }
+        body {
+            margin: 0px;
+            padding: 0px;
+            background: hsl(0, 0%, 7%);
+            color: hsl(0, 0%, 100%);
+            font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+        }
+        body, button, textarea {
+            font-family: Inter;
+            font-size: 12px;
+        }
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="../browser.js"></script>
+</body>
+</html>
+