@phreshos/react 0.1.20 → 0.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -1
- package/dist/desktop-provider.d.ts +4 -4
- package/dist/desktop-provider.js +5 -5
- package/dist/main.d.ts +1 -1
- package/dist/main.js +1 -1
- package/dist/use-process-state.d.ts +1 -3
- package/dist/use-process-state.js +2 -9
- package/dist/use-window-state.js +5 -5
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -26,7 +26,7 @@ their React lifecycle.
|
|
|
26
26
|
| Bun | `bun add @phreshos/react` |
|
|
27
27
|
| Yarn | `yarn add @phreshos/react` |
|
|
28
28
|
|
|
29
|
-
`@phreshos/core` and
|
|
29
|
+
`@phreshos/core` and `react` are peer dependencies.
|
|
30
30
|
|
|
31
31
|
```tsx
|
|
32
32
|
import {
|
|
@@ -55,6 +55,12 @@ bun run verify
|
|
|
55
55
|
`verify` checks the contracts, tests the adapters, builds the package, and
|
|
56
56
|
validates its published shape.
|
|
57
57
|
|
|
58
|
+
`check` performs static checks, `build` creates distributable output, and `test`
|
|
59
|
+
runs Vitest assertions from `tests/`. Run `build` before testing built artifacts.
|
|
60
|
+
`verify` runs `check`, `build`, and `test` in order. Operational tooling belongs
|
|
61
|
+
in `scripts/`; tests and their fixtures belong in `tests/`. Verification uses
|
|
62
|
+
the committed dependency graph without local package substitutions.
|
|
63
|
+
|
|
58
64
|
## Related repositories
|
|
59
65
|
|
|
60
66
|
- [`@phreshos/core`](https://github.com/PhreshOS/core) owns every contract
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
|
-
import type { Desktop, DesktopPreferences,
|
|
2
|
+
import type { Desktop, DesktopPreferences, DesktopViewportSnapshot } from "@phreshos/core";
|
|
3
3
|
import LiveSnapshot from "./live-snapshot.js";
|
|
4
4
|
/** Provides one complete Client Desktop environment to a React tree. */
|
|
5
5
|
export default function DesktopProvider({ children, desktop, fallback }: DesktopProviderProperties): string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").FunctionComponentElement<import("react").ProviderProps<Readonly<{
|
|
6
6
|
desktop: Desktop;
|
|
7
|
-
|
|
7
|
+
viewport: LiveSnapshot<DesktopViewportSnapshot>;
|
|
8
8
|
preferences: LiveSnapshot<DesktopPreferences>;
|
|
9
9
|
}> | null>> | null;
|
|
10
10
|
/** Returns the complete Desktop supplied by the nearest provider. */
|
|
11
11
|
export declare function useDesktop(): Desktop;
|
|
12
|
-
/** Resolves and follows the current Desktop
|
|
13
|
-
export declare function
|
|
12
|
+
/** Resolves and follows the current Desktop viewport. */
|
|
13
|
+
export declare function useDesktopViewport(): DesktopViewportSnapshot;
|
|
14
14
|
/** Resolves and follows the effective Desktop preferences. */
|
|
15
15
|
export declare function useDesktopPreferences(): DesktopPreferences;
|
|
16
16
|
export type DesktopProviderProperties = Readonly<{
|
package/dist/desktop-provider.js
CHANGED
|
@@ -6,10 +6,10 @@ const DesktopContext = createContext(null);
|
|
|
6
6
|
export default function DesktopProvider({ children, desktop, fallback = null }) {
|
|
7
7
|
const value = useMemo(() => ({
|
|
8
8
|
desktop,
|
|
9
|
-
|
|
9
|
+
viewport: new LiveSnapshot(() => desktop.viewport.snapshot(), subscriber => desktop.viewport.subscribe("resize", subscriber)),
|
|
10
10
|
preferences: new LiveSnapshot(() => desktop.preferences.snapshot(), subscriber => desktop.preferences.subscribe("change", subscriber))
|
|
11
11
|
}), [desktop]);
|
|
12
|
-
const stores = useMemo(() => [value.
|
|
12
|
+
const stores = useMemo(() => [value.viewport, value.preferences], [value]);
|
|
13
13
|
const ready = useProviderResolution(stores);
|
|
14
14
|
return ready ? createElement(DesktopContext.Provider, { value }, children) : fallback;
|
|
15
15
|
}
|
|
@@ -17,9 +17,9 @@ export default function DesktopProvider({ children, desktop, fallback = null })
|
|
|
17
17
|
export function useDesktop() {
|
|
18
18
|
return useValue().desktop;
|
|
19
19
|
}
|
|
20
|
-
/** Resolves and follows the current Desktop
|
|
21
|
-
export function
|
|
22
|
-
const store = useValue().
|
|
20
|
+
/** Resolves and follows the current Desktop viewport. */
|
|
21
|
+
export function useDesktopViewport() {
|
|
22
|
+
const store = useValue().viewport;
|
|
23
23
|
return useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot);
|
|
24
24
|
}
|
|
25
25
|
/** Resolves and follows the effective Desktop preferences. */
|
package/dist/main.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as ContextProvider, useContext, useParent, useProcess, useProgram, type ContextProviderProperties } from "./context-provider.js";
|
|
2
2
|
export { default as SystemProvider, useSystem, useSystemAppearance, type SystemProviderProperties } from "./system-provider.js";
|
|
3
|
-
export { default as DesktopProvider, useDesktop,
|
|
3
|
+
export { default as DesktopProvider, useDesktop, useDesktopViewport, useDesktopPreferences, type DesktopProviderProperties } from "./desktop-provider.js";
|
|
4
4
|
export { default as useSubscribe } from "./use-subscribe.js";
|
|
5
5
|
export { default as useProgramState, type ProgramState } from "./use-program-state.js";
|
|
6
6
|
export { default as useProcessState, type ProcessState } from "./use-process-state.js";
|
package/dist/main.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as ContextProvider, useContext, useParent, useProcess, useProgram } from "./context-provider.js";
|
|
2
2
|
export { default as SystemProvider, useSystem, useSystemAppearance } from "./system-provider.js";
|
|
3
|
-
export { default as DesktopProvider, useDesktop,
|
|
3
|
+
export { default as DesktopProvider, useDesktop, useDesktopViewport, useDesktopPreferences } from "./desktop-provider.js";
|
|
4
4
|
export { default as useSubscribe } from "./use-subscribe.js";
|
|
5
5
|
export { default as useProgramState } from "./use-program-state.js";
|
|
6
6
|
export { default as useProcessState } from "./use-process-state.js";
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import type { Process } from "@phreshos/core";
|
|
2
|
-
/** Mutable lifecycle state of one Process
|
|
2
|
+
/** Mutable lifecycle state of one Process. */
|
|
3
3
|
export type ProcessState = Readonly<{
|
|
4
4
|
exited: boolean;
|
|
5
|
-
serverExists: boolean;
|
|
6
|
-
clientExists: boolean;
|
|
7
5
|
}>;
|
|
8
6
|
/** Explicitly reads and follows one Process while this hook is mounted. */
|
|
9
7
|
export default function useProcessState(process: Process): ProcessState | undefined;
|
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
import { useMemo, useSyncExternalStore } from "react";
|
|
2
|
-
import LiveState
|
|
2
|
+
import LiveState from "./live-state.js";
|
|
3
3
|
/** Explicitly reads and follows one Process while this hook is mounted. */
|
|
4
4
|
export default function useProcessState(process) {
|
|
5
|
-
const state = useMemo(() => new LiveState(async () => {
|
|
6
|
-
const [exited, serverExists, clientExists] = await Promise.all([
|
|
7
|
-
process.exited(),
|
|
8
|
-
process.server.exists(),
|
|
9
|
-
process.client.exists()
|
|
10
|
-
]);
|
|
11
|
-
return { exited, serverExists, clientExists };
|
|
12
|
-
}, reduce => combineCleanups(process.server.lifecycle.subscribe("start", () => reduce(current => current.serverExists ? current : { ...current, serverExists: true })), process.server.lifecycle.subscribe("stop", () => reduce(current => current.serverExists ? { ...current, serverExists: false } : current)), process.client.lifecycle.subscribe("start", () => reduce(current => current.clientExists ? current : { ...current, clientExists: true })), process.client.lifecycle.subscribe("stop", () => reduce(current => current.clientExists ? { ...current, clientExists: false } : current)), process.subscribe("exit", () => reduce(current => ({ ...current, exited: true, serverExists: false, clientExists: false }))))), [process]);
|
|
5
|
+
const state = useMemo(() => new LiveState(async () => ({ exited: await process.exited() }), reduce => process.subscribe("exit", () => reduce(current => current.exited ? current : { exited: true }))), [process]);
|
|
13
6
|
return useSyncExternalStore(state.subscribe, state.snapshot, state.snapshot);
|
|
14
7
|
}
|
package/dist/use-window-state.js
CHANGED
|
@@ -3,16 +3,16 @@ import LiveState, { combineCleanups } from "./live-state.js";
|
|
|
3
3
|
/** Explicitly reads and follows one live Client Window while mounted. */
|
|
4
4
|
export default function useWindowState(window) {
|
|
5
5
|
const state = useMemo(() => new LiveState(async () => {
|
|
6
|
-
const [title, position, size, minimized, front, layer
|
|
6
|
+
const [title, position, size, minimized, maximized, front, layer] = await Promise.all([
|
|
7
7
|
window.title(),
|
|
8
8
|
window.position(),
|
|
9
9
|
window.size(),
|
|
10
10
|
window.minimized(),
|
|
11
|
+
window.maximized(),
|
|
11
12
|
window.front(),
|
|
12
|
-
window.layer()
|
|
13
|
-
window.location()
|
|
13
|
+
window.layer()
|
|
14
14
|
]);
|
|
15
|
-
return { title, position, size, minimized, front, layer
|
|
16
|
-
}, reduce => combineCleanups(window.subscribe("move", position => reduce(current => ({ ...current, position }))), window.subscribe("resize", size => reduce(current => ({ ...current, size }))), window.subscribe("minimize", minimized => reduce(current => ({ ...current, minimized }))), window.subscribe("changeTitle", title => reduce(current => ({ ...current, title }))), window.subscribe("front", front => reduce(current => ({ ...current, front }))))), [window]);
|
|
15
|
+
return { title, position, size, minimized, maximized, front, layer };
|
|
16
|
+
}, reduce => combineCleanups(window.subscribe("move", position => reduce(current => ({ ...current, position }))), window.subscribe("resize", size => reduce(current => ({ ...current, size }))), window.subscribe("minimize", minimized => reduce(current => ({ ...current, minimized }))), window.subscribe("maximize", maximized => reduce(current => ({ ...current, maximized }))), window.subscribe("changeTitle", title => reduce(current => ({ ...current, title }))), window.subscribe("front", front => reduce(current => ({ ...current, front }))))), [window]);
|
|
17
17
|
return useSyncExternalStore(state.subscribe, state.snapshot, state.snapshot);
|
|
18
18
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phreshos/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.22",
|
|
4
4
|
"description": "Runtime-neutral React adapters for PhreshOS contracts.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -40,18 +40,18 @@
|
|
|
40
40
|
"scripts": {
|
|
41
41
|
"clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
|
|
42
42
|
"check": "tsc --noEmit && tsc -p tsconfig.test.json",
|
|
43
|
-
"test": "vitest run --
|
|
43
|
+
"test": "vitest run --project default",
|
|
44
44
|
"build": "node --run clean && tsc --noEmit false --outDir dist --rootDir source",
|
|
45
|
-
"verify
|
|
46
|
-
"
|
|
47
|
-
"prepack": "node --run test && node --run build"
|
|
45
|
+
"verify": "node --run check && node --run build && node --run test",
|
|
46
|
+
"prepack": "node --run build"
|
|
48
47
|
},
|
|
49
48
|
"peerDependencies": {
|
|
50
|
-
"@phreshos/core": "^0.1.
|
|
49
|
+
"@phreshos/core": "^0.1.43",
|
|
51
50
|
"react": "^19.2.0"
|
|
52
51
|
},
|
|
53
52
|
"devDependencies": {
|
|
54
|
-
"@phreshos/core": "^0.1.
|
|
53
|
+
"@phreshos/core": "^0.1.43",
|
|
54
|
+
"@testing-library/dom": "^10.4.1",
|
|
55
55
|
"@testing-library/react": "^16.3.0",
|
|
56
56
|
"@types/react": "^19.2.18",
|
|
57
57
|
"@types/react-dom": "^19.2.4",
|
|
@@ -59,6 +59,6 @@
|
|
|
59
59
|
"react": "^19.2.8",
|
|
60
60
|
"react-dom": "^19.2.8",
|
|
61
61
|
"typescript": "^6.0.3",
|
|
62
|
-
"vitest": "^4.1.
|
|
62
|
+
"vitest": "^4.1.10"
|
|
63
63
|
}
|
|
64
64
|
}
|