sliftutils 0.6.6 → 0.7.1

package/builders/webBuild.ts

@@ -9,8 +9,8 @@ import { getAllFiles } from "../misc/fs";
 async function main() {
     let time = Date.now();
     let yargObj = yargs(process.argv)
-        .option("entryPoint", { type: "string", default: "./browser.tsx", desc: `Path to the entry point file` })
-        .option("indexHtml", { type: "string", default: "./index.html", desc: `Path to the index.html file` })
+        .option("entryPoint", { type: "string", default: "./web/browser.tsx", desc: `Path to the entry point file` })
+        .option("indexHtml", { type: "string", default: "./web/index.html", desc: `Path to the index.html file` })
         .option("assetsFolder", { type: "string", default: "./assets", desc: `Path to the assets folder` })
         .option("outputFolder", { type: "string", default: "./build-web", desc: `Output folder` })
         .argv || {}

package/builders/webRun.js

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

package/bundler/bundleEntry.ts

@@ -1,22 +1,19 @@
 import path from "path";
 import { bundle } from "./bundler";
 import fs from "fs";
-import yargs from "yargs";
 
 async function main() {
-    let yargObj = yargs(process.argv)
-        .option("entryPoint", { type: "string", desc: `Path to the entry point file` })
-        .option("outputFolder", { type: "string", desc: `Path to the output folder` })
-        .argv || {}
-        ;
-    let entryPoint = yargObj.entryPoint;
-    let outputFolder = yargObj.outputFolder;
+    // NOTE: Using yargs added ~0.5s to the time to run this, and considering we run in ~1s... that's just too much 
+    let entryPoint = process.argv[2];
+    let outputFolder = process.argv[3];
     if (!entryPoint) {
         throw new Error("No entry point provided. Please use the --entryPoint option.");
     }
     if (!outputFolder) {
         throw new Error("No output folder provided. Please use the --outputFolder option.");
     }
+    // We prefer production, as this is what the bundler uses internally. This ensures that in the build and when run, we will have the same environment, which will result in the same requires being called. 
+    process.env.NODE_ENV = process.env.NODE_ENV || "production";
     require(entryPoint);
 
     let name = path.basename(entryPoint);
@@ -32,6 +29,17 @@ async function main() {
         rootPath: path.resolve("."),
         entryPoints: [entryPoint],
     });
-    await fs.promises.writeFile(`${yargObj.outputFolder}/${name}`, bundled.bundle);
+
+    let finalPath = `${outputFolder}/${name}`;
+    let tempPath = `${finalPath}.tmp`;
+
+    try {
+        await fs.promises.writeFile(tempPath, bundled.bundle);
+        await fs.promises.rename(tempPath, finalPath);
+    } finally {
+        try {
+            await fs.promises.unlink(tempPath);
+        } catch { }
+    }
 }
 main().catch(console.error).finally(() => process.exit());

package/bundler/bundleEntryCaller.ts

@@ -10,5 +10,5 @@ export async function bundleEntryCaller(config: {
     entryPoint = path.resolve(entryPoint).replace(/\\/g, "/");
     outputFolder = path.resolve(outputFolder).replace(/\\/g, "/");
     let bundleEntryPath = path.resolve(__dirname, "bundleEntry.ts").replace(/\\/g, "/");
-    await runPromise(`yarn typenode ${JSON.stringify(bundleEntryPath)} --entryPoint ${JSON.stringify(entryPoint)} --outputFolder ${JSON.stringify(outputFolder)}`);
+    await runPromise(`node -r ./node_modules/typenode/index.js ${JSON.stringify(bundleEntryPath)} ${JSON.stringify(entryPoint)} ${JSON.stringify(outputFolder)}`);
 }

package/bundler/bundleRequire.ts

@@ -16,11 +16,9 @@ export function bundleRequire(config: BundleRequireConfig) {
     (globalThis as any).global = (globalThis as any).global || globalThis;
     (globalThis as any).setImmediate = (globalThis as any).setImmediate || globalThis.setTimeout;
 
-    // Set document, so isNode checks return false.
-    (globalThis as any).document = (globalThis as any).document || {};
     (globalThis as any).BOOTED_EDGE_NODE = undefined;
 
-    const builtInModuleExports = {
+    let builtInModuleExports: { [key: string]: unknown } = {
         worker_threads: {
             isMainThread: true,
         },
@@ -47,6 +45,26 @@ export function bundleRequire(config: BundleRequireConfig) {
         child_process: {},
         events: class EventEmitter { },
     };
+    // If is nodeJs
+    let allBuiltInModules = new Set<string>();
+    // Electron 
+    allBuiltInModules.add("electron");
+    allBuiltInModules.add("original-fs");
+    allBuiltInModules.add("vscode");
+    if (typeof document === "undefined" && typeof require !== "undefined") {
+        // Change the builts ins to use the actual built ins!
+        let { builtinModules } = require("node:module");
+        for (let key of builtinModules) {
+            allBuiltInModules.add(key);
+        }
+    }
+    for (let key of allBuiltInModules) {
+        Object.defineProperty(builtInModuleExports, key, {
+            get() {
+                return require(key);
+            },
+        });
+    }
 
     // Just path.resolve (but needs to be reimplemented, because we can't use imports)
     function pathResolve(...paths: string[]): string {

package/electron/electronIndex.html

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

package/electron/electronMain.ts

@@ -0,0 +1,29 @@
+import { app, BrowserWindow } from "electron";
+import { isInElectron } from "../misc/environment";
+
+function main() {
+    if (!isInElectron()) {
+        return;
+    }
+
+    app.whenReady().then(() => {
+        const mainWindow = new BrowserWindow({
+            width: 800,
+            height: 600,
+            webPreferences: {
+                nodeIntegration: false,
+                contextIsolation: true,
+            },
+        });
+
+        mainWindow.loadFile("./electronIndex.html");
+        mainWindow.webContents.openDevTools();
+    });
+
+    app.on("window-all-closed", () => {
+        app.quit();
+    });
+}
+
+main();
+

package/electron/electronRenderer.tsx

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

package/extension/extBackground.ts

@@ -0,0 +1,22 @@
+import { enableHotReloading } from "../builders/hotReload";
+import { isInChromeExtension } from "../misc/environment";
+
+async function main() {
+    if (!isInChromeExtension()) {
+        return;
+    }
+
+    await enableHotReloading({ port: 9878 });
+
+    chrome.runtime.onInstalled.addListener(() => {
+        console.log("Extension installed!");
+    });
+
+    chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+        console.log("Message received:", message, sender);
+        sendResponse({ status: "ok 26" });
+    });
+}
+
+main().catch(console.error);
+

package/extension/extContentScript.ts

@@ -0,0 +1,19 @@
+import { enableHotReloading } from "../builders/hotReload";
+import { isInChromeExtension } from "../misc/environment";
+
+async function main() {
+    if (!isInChromeExtension()) {
+        return;
+    }
+
+    await enableHotReloading({ port: 9878 });
+
+    console.log("Content script loaded! new");
+
+    chrome.runtime.sendMessage({ type: "contentScriptLoaded" }, (response) => {
+        console.log("Response from background:", response);
+    });
+}
+
+main().catch(console.error);
+

package/extension/manifest.json

@@ -0,0 +1,29 @@
+{
+    "manifest_version": 3,
+    "name": "Example Extension",
+    "version": "1.0.0",
+    "description": "Example Chrome extension",
+    "background": {
+        "service_worker": "extBackground.js"
+    },
+    "content_scripts": [
+        {
+            "matches": [
+                "*://*.wikipedia.org/*"
+            ],
+            "js": [
+                "extContentScript.js"
+            ]
+        }
+    ],
+    "permissions": [
+        "tabs",
+        "storage"
+    ],
+    "host_permissions": [
+        "*://*.wikipedia.org/*"
+    ],
+    "icons": {
+        "16": "assets/icon16.png"
+    }
+}

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/misc/environment.ts

@@ -2,10 +2,38 @@
 export function isInChromeExtension() {
     return typeof chrome !== "undefined" && chrome.runtime && chrome.runtime.id;
 }
+export function isInChromeExtensionBackground() {
+    if (!isInChromeExtension()) return false;
+
+    // Manifest V3: Service Worker context (has importScripts but no document)
+    if (typeof (globalThis as any).importScripts === "function" && typeof document === "undefined") {
+        return true;
+    }
+
+    // Manifest V2: Background page
+    if (typeof chrome.extension !== "undefined" && typeof chrome.extension.getBackgroundPage === "function") {
+        try {
+            return chrome.extension.getBackgroundPage() === window;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    return false;
+}
+export function isInChromeExtensionContentScript() {
+    return isInChromeExtension() && !isInChromeExtensionBackground();
+}
+export function isInElectron() {
+    return typeof process !== "undefined" && process.versions && process.versions.electron;
+}
 let isInBuildFlag = false;
 export function triggerIsInBuild() {
     isInBuildFlag = true;
 }
 export function isInBuild() {
     return isInBuildFlag;
+}
+export function isInBrowser() {
+    return typeof document !== "undefined";
 }

package/nodejs/server.ts

@@ -0,0 +1,16 @@
+import http from "http";
+
+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}/`);
+    });
+}
+
+main().catch(console.error);
+