sliftutils 0.6.6 → 0.7.0

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/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);
+

package/package.json

@@ -1,17 +1,31 @@
 {
     "name": "sliftutils",
-    "version": "0.6.6",
+    "version": "0.7.0",
     "main": "index.js",
     "license": "MIT",
     "scripts": {
         "type": "yarn tsc --noEmit",
-        "build-nodejs": "yarn typenode ./builders/nodeJSBuild.ts",
+        "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",
         "build-extension": "./builders/extensionBuildRun.js",
-        "build-web": "./builders/webBuildRun.js"
+        "build-web": "./builders/webBuildRun.js",
+        "build-electron": "./builders/electronBuildRun.js",
+        "slift-watch": "./builders/watchRun.js",
+        "slift-setup": "./builders/setupRun.js"
     },
     "dependencies": {
         "@types/shell-quote": "^1.7.5",
@@ -22,12 +36,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/browser.tsx

@@ -0,0 +1,31 @@
+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);
+

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/spec.txt

@@ -1,66 +1,38 @@
-TODO:
-
 
-    4) New project with:
+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. 
 
-        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?
+- 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 
 
-        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
+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
 
-        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/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>
+