@pistonite/pure 0.26.8 → 0.27.1

package/src/memory/async_erc.ts

@@ -3,6 +3,8 @@
  * operations are asynchronous.
  *
  * See {@link makeErcType} for how to use
+ *
+ * @deprecated use Emp
  */
 export type AsyncErc<TName, TRepr = number> = {
     readonly type: TName;
@@ -55,6 +57,8 @@ export type AsyncErc<TName, TRepr = number> = {
  * Weak reference to an externally ref-counted object.
  *
  * See {@link makeErcType} for how to use
+ *
+ * @deprecated use Emp
  */
 export type AsyncErcRef<TName, TRepr = number> = {
     readonly type: TName;
@@ -74,11 +78,15 @@ export type AsyncErcRef<TName, TRepr = number> = {
     getStrong: () => Promise<AsyncErc<TName, TRepr>>;
 };
 
+/**
+ * @deprecated use Emp
+ */
 export type AsyncErcRefType<T> =
-    T extends AsyncErc<infer TName, infer TRepr>
-        ? AsyncErcRef<TName, TRepr>
-        : never;
+    T extends AsyncErc<infer TName, infer TRepr> ? AsyncErcRef<TName, TRepr> : never;
 
+/**
+ * @deprecated use Emp
+ */
 export type AsyncErcTypeConstructor<TName, TRepr> = {
     /**
      * A marker value for the underlying object type.
@@ -101,7 +109,9 @@ export type AsyncErcTypeConstructor<TName, TRepr> = {
     addRef: (value: TRepr) => Promise<TRepr> | TRepr;
 };
 
-/** See {@link makeErcType} */
+/**
+ * @deprecated use Emp
+ */
 export const makeAsyncErcType = <TName, TRepr>({
     marker,
     free,
@@ -109,12 +119,9 @@ export const makeAsyncErcType = <TName, TRepr>({
 }: AsyncErcTypeConstructor<TName, TRepr>): ((
     value: TRepr | undefined,
 ) => AsyncErc<TName, TRepr>) => {
-    const createStrongRef = (
-        value: TRepr | undefined,
-    ): AsyncErc<TName, TRepr> => {
-        let weakRef:
-            | (AsyncErcRef<TName, TRepr> & { invalidate: () => void })
-            | undefined = undefined;
+    const createStrongRef = (value: TRepr | undefined): AsyncErc<TName, TRepr> => {
+        let weakRef: (AsyncErcRef<TName, TRepr> & { invalidate: () => void }) | undefined =
+            undefined;
         const invalidateWeakRef = () => {
             if (!weakRef) {
                 return;

package/src/memory/cell.ts

@@ -14,10 +14,7 @@ export type CellConstructor<T> = {
 export type Cell<T> = {
     get(): T;
     set(value: T): void;
-    subscribe(
-        callback: (value: T) => void,
-        notifyImmediately?: boolean,
-    ): () => void;
+    subscribe(callback: (value: T) => void, notifyImmediately?: boolean): () => void;
 };
 
 class CellImpl<T> implements Cell<T> {
@@ -41,10 +38,7 @@ class CellImpl<T> implements Cell<T> {
         }
     }
 
-    public subscribe(
-        callback: (value: T) => void,
-        notifyImmediately?: boolean,
-    ): () => void {
+    public subscribe(callback: (value: T) => void, notifyImmediately?: boolean): () => void {
         this.subscribers.push(callback);
         const unsubscribe = () => {
             const index = this.subscribers.indexOf(callback);

package/src/memory/emp.ts

@@ -0,0 +1,88 @@
+/**
+ * A non-null, **E**ngine-**m**anaged **P**ointer
+ *
+ * This uses the ECMA FinalizationRegistry, to free the resource,
+ * once this object is garbage-collected.
+ *
+ * The free function may be async.
+ *
+ * ## Use case
+ * When JS interoperates with a system language like C/C++ or Rust,
+ * it is often needed to transfer objects into JS context. If the object
+ * is big, copy-transfer could be expensive, so the more ideal solution
+ * is to transfer a "handle", or a pointer, to JS, and leaving the actual
+ * object in the native memory. Then, JS code and pass the pointer to external
+ * code to use or extract data from the object when needed.
+ *
+ * This approach is just like passing raw pointers in C, which means it is
+ * extremely succeptible to memory corruption bugs like double-free or
+ * use-after-free. Unlike C++ or Rust, JS also doesn't have destructors
+ * that run when an object leaves the scope (proposal for the `using` keyword exists,
+ * but you can actually double-free the object with `using`).
+ *
+ * C-style manual memory management might be sufficient for simple bindings,
+ * but for more complex scenarios, automatic memory management is needed,
+ * by tying the free call to the GC of a JS object.
+ *
+ * ## Recommended practice
+ * 1. The external code should transfer the ownership of the object
+ *    to JS when passing it to JS. JS will then put the handle into an Emp
+ *    to be automatically managed. This means the external code should now
+ *    never free the object, and let JS free it instead.
+ * 2. The inner value of the Emp must only be used for calling
+ *    external code, and the Emp must be kept alive for all runtimes, including
+ *    those with heavy optimization that may reclaim the Emp during the call,
+ *    if it's not referenced afterwards. See {@link scopedCapture}.
+ *    The inner value must not dangle around outside of the Emp that owns it.
+ *
+ * ## Pointer Size
+ * In 32-bit context like WASM32, the inner value can be a `number`.
+ * In 64-bit context, `number` might be fine for some systems, but `bigint`
+ * is recommended.
+ */
+export type Emp<T, TRepr> = {
+    /** The type marker for T. This only marks the type for TypeScript and does not exist at runtime */
+    readonly __phantom: T;
+    /** The underlying pointer value */
+    readonly value: TRepr;
+};
+
+export type EmpConstructor<T, TRepr> = {
+    /**
+     * The marker for the Emp type, used to distinguish between multiple types
+     *
+     * Typically, this is a unique symbol:
+     * ```typescript
+     * const MyNativeType = Symbol("MyNativeType");
+     * export type MyNativeType = typeof MyNativeType;
+     *
+     * const makeMyNativeTypeEmp = makeEmpType({
+     *     marker: MyNativeType,
+     *     free: (ptr) => void freeMyNativeType(ptr)
+     * })
+     * ```
+     *
+     * Note that this is not used in runtime, but just used for type inference,
+     * so you can also skip passing it and specify the type parameter instead
+     */
+    marker?: T;
+
+    /**
+     * Function to free the underlying object. Called when this Emp is garbage-collected
+     */
+    free: (ptr: TRepr) => void | Promise<void>;
+};
+
+/**
+ * Create a factory function for an {@link Emp} type.
+ */
+export const makeEmpType = <T, TRepr>({
+    free,
+}: EmpConstructor<T, TRepr>): ((ptr: TRepr) => Emp<T, TRepr>) => {
+    const registry = new FinalizationRegistry(free);
+    return (ptr: TRepr) => {
+        const obj = Object.freeze({ value: ptr });
+        registry.register(obj, ptr);
+        return obj as Emp<T, TRepr>;
+    };
+};

package/src/memory/erc.test.ts

@@ -119,143 +119,140 @@ describe.each`
     indirection | allocator
     ${"single"} | ${new Allocator(false)}
     ${"double"} | ${new Allocator(true)}
-`(
-    "Erc - $indirection indirection",
-    ({ allocator }: { allocator: Allocator }) => {
-        afterEach(() => {
-            allocator.cleanup();
-        });
+`("Erc - $indirection indirection", ({ allocator }: { allocator: Allocator }) => {
+    afterEach(() => {
+        allocator.cleanup();
+    });
 
-        it("allocate and deallocate correctly", () => {
-            const test = allocator.makeTestErc(allocator.allocValue("Hello"));
-            expect(allocator.getValue(test.value)).toBe("Hello");
-            test.free();
-            allocator.expectNoLeak();
-        });
+    it("allocate and deallocate correctly", () => {
+        const test = allocator.makeTestErc(allocator.allocValue("Hello"));
+        expect(allocator.getValue(test.value)).toBe("Hello");
+        test.free();
+        allocator.expectNoLeak();
+    });
 
-        it("frees if assigned new value", () => {
-            const test = allocator.makeTestErc(allocator.allocValue("Hello"));
-            test.assign(allocator.allocValue("World"));
-            expect(allocator.getValue(test.value)).toBe("World");
-            test.free();
-            allocator.expectNoLeak();
-        });
+    it("frees if assigned new value", () => {
+        const test = allocator.makeTestErc(allocator.allocValue("Hello"));
+        test.assign(allocator.allocValue("World"));
+        expect(allocator.getValue(test.value)).toBe("World");
+        test.free();
+        allocator.expectNoLeak();
+    });
 
-        it("does not free when taking value", () => {
-            const test = allocator.makeTestErc(allocator.allocValue("Hello"));
-            const raw = test.take();
-            expect(allocator.getValue(raw)).toBe("Hello");
-            expect(test.value).toBeUndefined();
-            if (raw === undefined) {
-                throw new Error("Raw value is undefined");
-            }
-            allocator.makeTestErc(raw).free();
-            allocator.expectNoLeak();
-        });
+    it("does not free when taking value", () => {
+        const test = allocator.makeTestErc(allocator.allocValue("Hello"));
+        const raw = test.take();
+        expect(allocator.getValue(raw)).toBe("Hello");
+        expect(test.value).toBeUndefined();
+        if (raw === undefined) {
+            throw new Error("Raw value is undefined");
+        }
+        allocator.makeTestErc(raw).free();
+        allocator.expectNoLeak();
+    });
 
-        it("invalidates weak references on free", () => {
-            const test = allocator.makeTestErc(allocator.allocValue("Hello"));
-            const testWeak = test.getWeak();
-            expect(allocator.getValue(testWeak.value)).toBe("Hello");
-            test.free();
-            expect(testWeak.value).toBeUndefined();
-            allocator.expectNoLeak();
-        });
+    it("invalidates weak references on free", () => {
+        const test = allocator.makeTestErc(allocator.allocValue("Hello"));
+        const testWeak = test.getWeak();
+        expect(allocator.getValue(testWeak.value)).toBe("Hello");
+        test.free();
+        expect(testWeak.value).toBeUndefined();
+        allocator.expectNoLeak();
+    });
 
-        it("invalidates weak references on assign", () => {
-            const test = allocator.makeTestErc(allocator.allocValue("Hello"));
-            const testWeak = test.getWeak();
-            expect(allocator.getValue(testWeak.value)).toBe("Hello");
-            test.assign(allocator.allocValue("World"));
-            expect(testWeak.value).toBeUndefined();
-            test.free();
-            allocator.expectNoLeak();
-        });
+    it("invalidates weak references on assign", () => {
+        const test = allocator.makeTestErc(allocator.allocValue("Hello"));
+        const testWeak = test.getWeak();
+        expect(allocator.getValue(testWeak.value)).toBe("Hello");
+        test.assign(allocator.allocValue("World"));
+        expect(testWeak.value).toBeUndefined();
+        test.free();
+        allocator.expectNoLeak();
+    });
 
-        it("handles assign and take of different references correctly", () => {
-            const test1 = allocator.makeTestErc(allocator.allocValue("Hello"));
-            const test2 = allocator.makeTestErc(allocator.allocValue("World"));
-            expect(allocator.getValue(test1.value)).toBe("Hello");
-            expect(allocator.getValue(test2.value)).toBe("World");
-            test1.assign(test2.take());
-            expect(allocator.getValue(test1.value)).toBe("World");
-            test1.free();
-            allocator.expectNoLeak();
-        });
+    it("handles assign and take of different references correctly", () => {
+        const test1 = allocator.makeTestErc(allocator.allocValue("Hello"));
+        const test2 = allocator.makeTestErc(allocator.allocValue("World"));
+        expect(allocator.getValue(test1.value)).toBe("Hello");
+        expect(allocator.getValue(test2.value)).toBe("World");
+        test1.assign(test2.take());
+        expect(allocator.getValue(test1.value)).toBe("World");
+        test1.free();
+        allocator.expectNoLeak();
+    });
 
-        it("handles assign and take of same references correctly", () => {
-            const test1 = allocator.makeTestErc(allocator.allocValue("Hello"));
-            const test2 = test1.getStrong();
-            test1.assign(test2.take());
-            expect(allocator.getValue(test1.value)).toBe("Hello");
-            test1.free();
-            test2.free(); // should be no-op
-            allocator.expectNoLeak();
-        });
+    it("handles assign and take of same references correctly", () => {
+        const test1 = allocator.makeTestErc(allocator.allocValue("Hello"));
+        const test2 = test1.getStrong();
+        test1.assign(test2.take());
+        expect(allocator.getValue(test1.value)).toBe("Hello");
+        test1.free();
+        test2.free(); // should be no-op
+        allocator.expectNoLeak();
+    });
 
-        it("assigning another Erc directly should cause double free", async () => {
-            const test1 = allocator.makeTestErc(allocator.allocValue("Hello"));
-            const test2 = test1.getStrong();
-            test1.assign(test2.value);
-            expect(allocator.getValue(test1.value)).toBe("Hello");
-            test1.free();
+    it("assigning another Erc directly should cause double free", async () => {
+        const test1 = allocator.makeTestErc(allocator.allocValue("Hello"));
+        const test2 = test1.getStrong();
+        test1.assign(test2.value);
+        expect(allocator.getValue(test1.value)).toBe("Hello");
+        test1.free();
 
-            const freeTest2 = async () => {
-                test2.free();
-            };
-            await expect(freeTest2).rejects.toThrow("Double free detected");
-            allocator.expectNoLeak();
-        });
+        const freeTest2 = async () => {
+            test2.free();
+        };
+        await expect(freeTest2).rejects.toThrow("Double free detected");
+        allocator.expectNoLeak();
+    });
 
-        it("handles assign and take of same references correctly (same Erc)", () => {
-            const test1 = allocator.makeTestErc(allocator.allocValue("Hello"));
-            test1.assign(test1.take());
-            expect(allocator.getValue(test1.value)).toBe("Hello");
-            test1.free();
-            allocator.expectNoLeak();
-        });
+    it("handles assign and take of same references correctly (same Erc)", () => {
+        const test1 = allocator.makeTestErc(allocator.allocValue("Hello"));
+        test1.assign(test1.take());
+        expect(allocator.getValue(test1.value)).toBe("Hello");
+        test1.free();
+        allocator.expectNoLeak();
+    });
 
-        it("assigning another Erc directly should cause double free (same Erc)", async () => {
-            const test1 = allocator.makeTestErc(allocator.allocValue("Hello"));
-            test1.assign(test1.value);
-            const getTest1Value = async () => {
-                allocator.getValue(test1.value);
-            };
-            await expect(getTest1Value).rejects.toThrow("Dangling pointer");
+    it("assigning another Erc directly should cause double free (same Erc)", async () => {
+        const test1 = allocator.makeTestErc(allocator.allocValue("Hello"));
+        test1.assign(test1.value);
+        const getTest1Value = async () => {
+            allocator.getValue(test1.value);
+        };
+        await expect(getTest1Value).rejects.toThrow("Dangling pointer");
 
-            const freeTest1 = async () => {
-                test1.free();
-            };
-            await expect(freeTest1).rejects.toThrow("Double free detected");
-            allocator.expectNoLeak();
-        });
+        const freeTest1 = async () => {
+            test1.free();
+        };
+        await expect(freeTest1).rejects.toThrow("Double free detected");
+        allocator.expectNoLeak();
+    });
 
-        it("inc ref count with strong reference", () => {
-            const test = allocator.makeTestErc(allocator.allocValue("Hello"));
-            const test2 = test.getStrong();
-            expect(allocator.getValue(test.value)).toBe("Hello");
-            expect(allocator.getValue(test2.value)).toBe("Hello");
-            test.free();
-            expect(allocator.getValue(test2.value)).toBe("Hello");
-            test2.free();
-            allocator.expectNoLeak();
-        });
+    it("inc ref count with strong reference", () => {
+        const test = allocator.makeTestErc(allocator.allocValue("Hello"));
+        const test2 = test.getStrong();
+        expect(allocator.getValue(test.value)).toBe("Hello");
+        expect(allocator.getValue(test2.value)).toBe("Hello");
+        test.free();
+        expect(allocator.getValue(test2.value)).toBe("Hello");
+        test2.free();
+        allocator.expectNoLeak();
+    });
 
-        it("inc ref count with strong reference from weak reference", () => {
-            const test = allocator.makeTestErc(allocator.allocValue("Hello"));
-            const testWeak = test.getWeak();
-            expect(allocator.getValue(testWeak.value)).toBe("Hello");
-            const test2 = testWeak.getStrong();
-            expect(allocator.getValue(testWeak.value)).toBe("Hello");
-            expect(allocator.getValue(test2.value)).toBe("Hello");
-            const test2Weak = test2.getWeak();
-            test.free();
-            expect(testWeak.value).toBeUndefined();
-            expect(allocator.getValue(test2.value)).toBe("Hello");
-            expect(allocator.getValue(test2Weak.value)).toBe("Hello");
-            test2.free();
-            expect(test2Weak.value).toBeUndefined();
-            allocator.expectNoLeak();
-        });
-    },
-);
+    it("inc ref count with strong reference from weak reference", () => {
+        const test = allocator.makeTestErc(allocator.allocValue("Hello"));
+        const testWeak = test.getWeak();
+        expect(allocator.getValue(testWeak.value)).toBe("Hello");
+        const test2 = testWeak.getStrong();
+        expect(allocator.getValue(testWeak.value)).toBe("Hello");
+        expect(allocator.getValue(test2.value)).toBe("Hello");
+        const test2Weak = test2.getWeak();
+        test.free();
+        expect(testWeak.value).toBeUndefined();
+        expect(allocator.getValue(test2.value)).toBe("Hello");
+        expect(allocator.getValue(test2Weak.value)).toBe("Hello");
+        test2.free();
+        expect(test2Weak.value).toBeUndefined();
+        allocator.expectNoLeak();
+    });
+});

package/src/memory/erc.ts

@@ -2,6 +2,7 @@
  * A holder for an externally ref-counted object.
  *
  * See {@link makeErcType} for how to use
+ * @deprecated use Emp
  */
 export type Erc<TName, TRepr = number> = {
     readonly type: TName;
@@ -54,6 +55,7 @@ export type Erc<TName, TRepr = number> = {
  * Weak reference to an externally ref-counted object.
  *
  * See {@link makeErcType} for how to use
+ * @deprecated use Emp
  */
 export type ErcRef<TName, TRepr = number> = {
     readonly type: TName;
@@ -73,9 +75,14 @@ export type ErcRef<TName, TRepr = number> = {
     getStrong: () => Erc<TName, TRepr>;
 };
 
-export type ErcRefType<T> =
-    T extends Erc<infer TName, infer TRepr> ? ErcRef<TName, TRepr> : never;
+/**
+ * @deprecated use Emp
+ */
+export type ErcRefType<T> = T extends Erc<infer TName, infer TRepr> ? ErcRef<TName, TRepr> : never;
 
+/**
+ * @deprecated use Emp
+ */
 export type ErcTypeConstructor<TName, TRepr> = {
     /**
      * A marker value for the underlying object type.
@@ -241,18 +248,15 @@ export type ErcTypeConstructor<TName, TRepr> = {
  * myFoo1.assign(myFoo1.value); // this will free the value since ref count is 0, and result in a dangling pointer
  * ```
  *
+ * @deprecated use Emp
  */
 export const makeErcType = <TName, TRepr>({
     marker,
     free,
     addRef,
-}: ErcTypeConstructor<TName, TRepr>): ((
-    value: TRepr | undefined,
-) => Erc<TName, TRepr>) => {
+}: ErcTypeConstructor<TName, TRepr>): ((value: TRepr | undefined) => Erc<TName, TRepr>) => {
     const createStrongRef = (value: TRepr | undefined): Erc<TName, TRepr> => {
-        let weakRef:
-            | (ErcRef<TName, TRepr> & { invalidate: () => void })
-            | undefined = undefined;
+        let weakRef: (ErcRef<TName, TRepr> & { invalidate: () => void }) | undefined = undefined;
         const invalidateWeakRef = () => {
             if (!weakRef) {
                 return;

package/src/memory/index.ts

@@ -6,6 +6,7 @@
  */
 export { cell, type CellConstructor, type Cell } from "./cell.ts";
 export { persist, type PersistConstructor, type Persist } from "./persist.ts";
-export * from "./erc.ts";
 export * from "./async_erc.ts";
+export * from "./emp.ts";
+export * from "./erc.ts";
 export * from "./idgen.ts";

package/src/memory/persist.ts

@@ -106,10 +106,7 @@ class PersistImpl<T> implements Persist<T> {
         this.cell.set(value);
     }
 
-    public subscribe(
-        callback: (value: T) => void,
-        notifyImmediately?: boolean,
-    ): () => void {
+    public subscribe(callback: (value: T) => void, notifyImmediately?: boolean): () => void {
         return this.cell.subscribe(callback, notifyImmediately);
     }
 

package/src/pref/device.ts

@@ -0,0 +1,118 @@
+import { ilog } from "../log/internal.ts";
+import { cell } from "../memory";
+
+let cachedIsMobile: boolean | undefined = undefined;
+
+/** Check if the current UserAgent is a mobile device */
+export const isMobile = (): boolean => {
+    // just very primitive UA parsing for now,
+    // we don't need to take another dependency just to detect
+    // a few platforms
+    if (cachedIsMobile === undefined) {
+        const ua = navigator?.userAgent || "";
+        if (ua.match(/(Windows NT|Macintosh|)/i)) {
+            cachedIsMobile = false;
+        } else if (ua.match(/(Mobil|iPhone|Android|iPod|iPad)/)) {
+            cachedIsMobile = true;
+        } else if (ua.includes("Linux")) {
+            cachedIsMobile = false;
+        } else {
+            ilog.warn("unable to determine device type, assuming desktop");
+            cachedIsMobile = true;
+        }
+    }
+    return cachedIsMobile;
+};
+
+// stores current display mode
+const displayMode = cell({ initial: "" });
+
+/**
+ * Options for display mode detection
+ *
+ * See {@link initDisplayMode}
+ */
+export type DisplayModeOptions<T extends string> = {
+    /**
+     * Set the initial value, if the platform doesn't support detecting
+     * the display mode. `detect()` will be used instead if supported
+     */
+    initial?: T;
+    /**
+     * Function to determine the display mode based on viewport width and height,
+     * and if the device is mobile
+     */
+    detect: (width: number, height: number, isMobile: boolean) => T;
+};
+
+/**
+ * Initialize display mode detection for the app.
+ *
+ * The display mode may be based on the viewport dimensions
+ * and if the device is mobile. Also note that you can use {@link isMobile}
+ * without the display mode framework.
+ *
+ * The display modes are strings that should be passed as a type parameter
+ * to {@link initDisplayMode}. You can create an alias in your code for
+ * getting the typed version of {@link addDisplayModeSubscriber}, {@link getDisplayMode},
+ * and {@link useDisplayMode} from `pure-react`.
+ *
+ * ```typescript
+ * import {
+ *     addDisplayModeSubscriber as pureAddDisplayModeSubscriber,
+ *     getDisplayMode as pureGetDisplayMode,
+ * } from "@pistonite/pure/pref";
+ * import { useDisplayMode as pureUseDisplayMode } from "@pistonite/pure-react";
+ *
+ * export const MyDisplayModes = ["mode1", "mode2"] as const;
+ * export type MyDisplayMode = (typeof MyDisplayModes)[number];
+ *
+ * export const addDisplayModeSubscriber = pureAddDisplayModeSubscriber<MyDisplayMode>;
+ * export const getDisplayMode = pureGetDisplayMode<MyDisplayMode>;
+ * export const useDisplayMode = pureUseDisplayMode<MyDisplayMode>;
+ * ```
+ *
+ * Note that this is not necessary in some simple use cases. For example,
+ * adjusting styles based on the viewport width can be done with CSS:
+ * ```css
+ * @media screen and (max-width: 800px) {
+ *    /* styles for narrow mode * /
+ * }
+ * ```
+ *
+ * Use this only if the display mode needs to be detected programmatically.
+ */
+export const initDisplayMode = <T extends string>(options: DisplayModeOptions<T>) => {
+    const detectCallback = () => {
+        const mode = options.detect(window.innerWidth, window.innerHeight, isMobile());
+        displayMode.set(mode);
+    };
+    if (
+        window &&
+        window.addEventListener &&
+        window.innerWidth !== undefined &&
+        window.innerHeight !== undefined
+    ) {
+        window.addEventListener("resize", detectCallback);
+        detectCallback();
+    } else if (options.initial !== undefined) {
+        displayMode.set(options.initial);
+    } else {
+        ilog.warn(
+            "display mode cannot be initialized, since detection is not supported and initial is not set",
+        );
+    }
+};
+
+/** Subscribe to display mode changes */
+export const addDisplayModeSubscriber = <T extends string>(
+    subscriber: (mode: T) => void,
+    notifyImmediately?: boolean,
+) => {
+    return displayMode.subscribe(subscriber as (x: string) => void, notifyImmediately);
+};
+
+/** Get the current display mode */
+export const getDisplayMode = <T extends string>(): T => {
+    return displayMode.get() as T;
+};

package/src/pref/index.ts

@@ -10,3 +10,4 @@
 export * from "./dark.ts";
 export * from "./inject_style.ts";
 export * from "./locale.ts";
+export * from "./device.ts";