@indietabletop/appkit 0.1.0

package/README.md

@@ -0,0 +1,6 @@
+# Indie Tabletop Club's AppKit
+
+A collection of modules used in Indie Tabletop Club's apps.
+
+- [Hobgoblin App](https://hobgoblin.indietabletop.club)
+- [Eternøl App](https://eternol.indietabletop.club)

package/dist/use-media-query.d.ts

@@ -0,0 +1 @@
+export declare function useMediaQuery(query: string): boolean;

package/dist/use-media-query.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from "react";
+export function useMediaQuery(query) {
+    const [isMatch, setMatch] = useState(window.matchMedia(query).matches);
+    useEffect(() => {
+        const mql = window.matchMedia(query);
+        const handleChange = ({ matches }) => {
+            setMatch(matches);
+        };
+        mql.addEventListener("change", handleChange);
+        return () => {
+            mql.removeEventListener("change", handleChange);
+        };
+    }, [query]);
+    return isMatch;
+}

package/dist/use-scroll-restoration.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Handles scroll restoration on window.
+ *
+ * This hook behaves a little differently than the default browser scroll
+ * restoration. This is due to limitations of Wouter (our router of choice)
+ * as well the need to make the app feel more app-like.
+ *
+ * Every scroll position is remembered however the user has got to it (we
+ * don't differentiate between new entries in browser history and back
+ * navigation), but they are only restored if the user last visited the
+ * location less than 60 minutes ago.
+ */
+export declare function useScrollRestoration(
+/**
+ * The current path, provided by your router of choice.
+ */
+pathname: string, options?: {
+    /**
+     * A list of paths where scroll restoration should never be performed.
+     *
+     * This list should have stable identity for optimal performance. Make
+     * sure to use `useMemo` or define the list in module scope.
+     */
+    neverRestore?: string[];
+}): void;

package/dist/use-scroll-restoration.js

@@ -0,0 +1,67 @@
+import { useEffect, useLayoutEffect, useMemo } from "react";
+const scrollPositions = new Map();
+/**
+ * Handles scroll restoration on window.
+ *
+ * This hook behaves a little differently than the default browser scroll
+ * restoration. This is due to limitations of Wouter (our router of choice)
+ * as well the need to make the app feel more app-like.
+ *
+ * Every scroll position is remembered however the user has got to it (we
+ * don't differentiate between new entries in browser history and back
+ * navigation), but they are only restored if the user last visited the
+ * location less than 60 minutes ago.
+ */
+export function useScrollRestoration(
+/**
+ * The current path, provided by your router of choice.
+ */
+pathname, options) {
+    // Standardise pathname, making sure that paths ending with and without
+    // a slash are treated equally
+    const normalizedPathname = pathname.replace(/\/$/, "") || "/";
+    const neverRestore = useMemo(() => new Set(options?.neverRestore), [options?.neverRestore]);
+    // Record scroll position for given pathname on pushState/replaceState.
+    useEffect(() => {
+        const handleEvent = () => {
+            const x = window.scrollX;
+            const y = window.scrollY;
+            scrollPositions.set(normalizedPathname, [Date.now(), x, y]);
+            console.info(`Set scroll position for '${normalizedPathname}' (x: ${x}, y: ${y}).`);
+        };
+        // These events are provided by Wouter. They are not native browser events!
+        window.addEventListener("pushState", handleEvent);
+        window.addEventListener("replaceState", handleEvent);
+        return () => {
+            window.removeEventListener("pushState", handleEvent);
+            window.removeEventListener("replaceState", handleEvent);
+        };
+    }, [normalizedPathname]);
+    // Restore scroll position if last visit was less than 60 minutes ago.
+    useLayoutEffect(() => {
+        const maxDiff = 60000 * 60; // 60 minutes
+        const coordinates = scrollPositions.get(normalizedPathname);
+        if (coordinates) {
+            if (!neverRestore.has(normalizedPathname)) {
+                const now = Date.now();
+                const [ts, x, y] = coordinates;
+                if (now - ts < maxDiff) {
+                    window.scrollTo(x, y);
+                    console.info(`Restoring scroll position for '${normalizedPathname}' (x: ${x}, y: ${y}).`);
+                }
+                else {
+                    window.scrollTo(0, 0);
+                    console.info(`Not restoring scroll position for '${normalizedPathname}'. Last visit >60 min ago.`);
+                }
+            }
+            else {
+                window.scrollTo(0, 0);
+                console.info(`Not restoring scroll position for '${normalizedPathname}'. Page is set never to restore.`);
+            }
+        }
+        else {
+            window.scrollTo(0, 0);
+            console.info(`Not restoring scroll position for '${normalizedPathname}'. Page not visited yet.`);
+        }
+    }, [normalizedPathname]);
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@indietabletop/appkit",
+  "version": "0.1.0",
+  "description": "A collection of modules used in apps built by Indie Tabletop Club",
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "release": "np",
+    "build": "tsc",
+    "test": "echo 'No tests'"
+  },
+  "exports": {
+    "./*": "./dist/*.js"
+  },
+  "files": [
+    "/dist"
+  ],
+  "author": "Artur Müller",
+  "repository": "github:indietabletop/appkit",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "np": "^10.1.0",
+    "typescript": "^5.7.2"
+  }
+}