sliftutils 0.40.0 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "sliftutils",
-    "version": "0.40.0",
+    "version": "0.41.0",
     "main": "index.js",
     "license": "MIT",
     "files": [

package/web/ExamplePage.tsx

@@ -0,0 +1,48 @@
+import { observable } from "mobx";
+import { list } from "socket-function/src/misc";
+import { css } from "typesafecss";
+import { URLParam } from "../render-utils/URLParam";
+import { observer } from "../render-utils/observer";
+import * as preact from "preact";
+
+const exampleUrlParam = new URLParam("example", "");
+
+@observer
+export class ExamplePage extends preact.Component {
+    synced = observable({
+        count: 0,
+    });
+
+    onKeyDown = (e: KeyboardEvent) => {
+        // Skip if the current target is an ipnut
+        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+            return;
+        }
+        let hotkeySelector = `[data-hotkey="${e.code}"]`;
+        let elements = document.querySelectorAll(hotkeySelector);
+        for (let element of elements) {
+            (element as HTMLElement).click();
+        }
+    };
+    componentDidMount(): void {
+        document.addEventListener("keydown", this.onKeyDown);
+    }
+    componentWillUnmount(): void {
+        document.removeEventListener("keydown", this.onKeyDown);
+    }
+
+    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>
+        );
+    }
+}

package/web/Page.tsx

@@ -0,0 +1,59 @@
+import preact from "preact";
+import { css } from "typesafecss";
+import { Anchor } from "../render-utils/Anchor";
+import { URLParam } from "../render-utils/URLParam";
+import { observer } from "../render-utils/observer";
+import { ExamplePage } from "./ExamplePage";
+
+export const pageURL = new URLParam("page");
+
+@observer
+export class Page extends preact.Component {
+    onKeyDown = (e: KeyboardEvent) => {
+        // Ignore if it is for an input, text area, etc
+        let ignore = (
+            e.target instanceof HTMLInputElement ||
+            e.target instanceof HTMLTextAreaElement ||
+            e.target instanceof HTMLSelectElement
+        );
+        if (ignore) return;
+
+        console.log("Checking hotkey", e.key, e);
+        let key = e.key;
+        if (e.ctrlKey) key = "Ctrl+" + key;
+        if (e.shiftKey) key = "Shift+" + key;
+        let hotkeyDataAttribute = `[data-hotkey="${key}"]`;
+        let el = document.querySelector<HTMLElement>(hotkeyDataAttribute);
+        if (el) {
+            e.stopPropagation();
+            e.preventDefault();
+            console.log("Found hotkey", e.key, el);
+            el.click();
+        }
+    };
+    render() {
+        let pages = [
+            {
+                key: "example",
+                content: <ExamplePage />
+            },
+        ];
+
+        let page = pages.find(p => p.key === pageURL.value) || pages[0];
+
+        return (
+            <div className={css.size("100vw", "100vh").vbox(0)}>
+                <div className={css.hbox(12).pad2(20)}>
+                    {pages.map(p => (
+                        <Anchor key={p.key} params={[[pageURL, p.key]]}>
+                            {p.key}
+                        </Anchor>
+                    ))}
+                </div>
+                <div className={css.overflowAuto.fillBoth}>
+                    {page.content}
+                </div>
+            </div>
+        );
+    }
+}

package/web/browser.tsx

@@ -5,53 +5,13 @@ import { css, isNode } from "typesafecss";
 import { list } from "socket-function/src/misc";
 import { enableHotReloading } from "../builders/hotReload";
 import { URLParam } from "../render-utils/URLParam";
+import { Page } from "./Page";
 
-const exampleUrlParam = new URLParam("example", "");
-
-@observer
-class App extends preact.Component {
-    synced = observable({
-        count: 0,
-    });
-
-    onKeyDown = (e: KeyboardEvent) => {
-        // Skip if the current target is an ipnut
-        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
-            return;
-        }
-        let hotkeySelector = `[data-hotkey="${e.code}"]`;
-        let elements = document.querySelectorAll(hotkeySelector);
-        for (let element of elements) {
-            (element as HTMLElement).click();
-        }
-    };
-    componentDidMount(): void {
-        document.addEventListener("keydown", this.onKeyDown);
-    }
-    componentWillUnmount(): void {
-        document.removeEventListener("keydown", this.onKeyDown);
-    }
-
-    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")!);
+    preact.render(<Page />, document.getElementById("app")!);
 }
 
 main().catch(console.error);