@phreshos/react 0.1.3 → 0.1.5
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 +6 -6
- package/dist/host-provider.d.ts +4 -4
- package/dist/host-provider.js +7 -7
- package/dist/main.d.ts +1 -1
- package/dist/main.js +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -20,7 +20,7 @@ It provides two kinds of adapter:
|
|
|
20
20
|
`provide` prop, then exposes them synchronously through `useProgram()`,
|
|
21
21
|
`useProcess()`, and `useParent()`.
|
|
22
22
|
- `HostProvider` subscribes before reading exactly the host values named by its
|
|
23
|
-
required `provide` prop. `useHostTheme()`, `
|
|
23
|
+
required `provide` prop. `useHostTheme()`, `useDesktopSize()`, and
|
|
24
24
|
`usePointerPosition()` expose those values synchronously after resolution.
|
|
25
25
|
- `useSubscribe()` and `useObserve()` own persistent ordinary-event
|
|
26
26
|
registrations for one mounted React consumer.
|
|
@@ -90,7 +90,7 @@ The ordinary-event and traffic hooks retain the latest value returned by their p
|
|
|
90
90
|
import { host } from "@phreshos/client"
|
|
91
91
|
import { useSubscribe } from "@phreshos/react"
|
|
92
92
|
|
|
93
|
-
const
|
|
93
|
+
const desktop = useSubscribe(host.desktop, "resize")
|
|
94
94
|
```
|
|
95
95
|
|
|
96
96
|
Host reads are asynchronous while subscriptions are live-only. `HostProvider`
|
|
@@ -98,17 +98,17 @@ subscribes before requesting each selected snapshot and prevents an older read
|
|
|
98
98
|
from overwriting a newer event:
|
|
99
99
|
|
|
100
100
|
```tsx
|
|
101
|
-
import { HostProvider,
|
|
101
|
+
import { HostProvider, useDesktopSize, useHostTheme } from "@phreshos/react"
|
|
102
102
|
|
|
103
103
|
function Content() {
|
|
104
104
|
const theme = useHostTheme()
|
|
105
|
-
const
|
|
105
|
+
const desktop = useDesktopSize()
|
|
106
106
|
|
|
107
|
-
return <p style={{ color: theme.foreground }}>{
|
|
107
|
+
return <p style={{ color: theme.foreground }}>{desktop.width} × {desktop.height}</p>
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
function App() {
|
|
111
|
-
return <HostProvider provide={["theme", "
|
|
111
|
+
return <HostProvider provide={["theme", "desktopSize"]} fallback={<p>Loading…</p>}>
|
|
112
112
|
<Content />
|
|
113
113
|
</HostProvider>
|
|
114
114
|
}
|
package/dist/host-provider.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
|
-
import { type
|
|
3
|
-
declare const provisionNames: readonly ["theme", "
|
|
2
|
+
import { type DesktopSize, type PointerPosition, type ThemeProperties } from "@phreshos/client";
|
|
3
|
+
declare const provisionNames: readonly ["theme", "desktopSize", "pointerPosition"];
|
|
4
4
|
/** Requests and follows only the host values explicitly selected by the program. */
|
|
5
5
|
export default function HostProvider(properties: HostProviderProperties): import("react").FunctionComponentElement<SelectedHostProviderProperties>;
|
|
6
6
|
/** Returns the selected Theme snapshot and follows future change events. */
|
|
7
7
|
export declare function useHostTheme(): Readonly<ThemeProperties>;
|
|
8
|
-
/** Returns the selected
|
|
9
|
-
export declare function
|
|
8
|
+
/** Returns the selected desktop size and follows future resize events. */
|
|
9
|
+
export declare function useDesktopSize(): DesktopSize;
|
|
10
10
|
/** Returns the selected Pointer position and follows future move events. */
|
|
11
11
|
export declare function usePointerPosition(): PointerPosition | null;
|
|
12
12
|
/** Values that HostProvider can request and follow. */
|
package/dist/host-provider.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createContext, createElement, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
|
|
2
2
|
import { host } from "@phreshos/client";
|
|
3
3
|
import LiveSnapshot from "./live-snapshot.js";
|
|
4
|
-
const provisionNames = ["theme", "
|
|
4
|
+
const provisionNames = ["theme", "desktopSize", "pointerPosition"];
|
|
5
5
|
const HostContext = createContext(null);
|
|
6
6
|
/** Requests and follows only the host values explicitly selected by the program. */
|
|
7
7
|
export default function HostProvider(properties) {
|
|
@@ -41,9 +41,9 @@ function SelectedHostProvider({ children, fallback, selection }) {
|
|
|
41
41
|
export function useHostTheme() {
|
|
42
42
|
return useProvided("theme");
|
|
43
43
|
}
|
|
44
|
-
/** Returns the selected
|
|
45
|
-
export function
|
|
46
|
-
return useProvided("
|
|
44
|
+
/** Returns the selected desktop size and follows future resize events. */
|
|
45
|
+
export function useDesktopSize() {
|
|
46
|
+
return useProvided("desktopSize");
|
|
47
47
|
}
|
|
48
48
|
/** Returns the selected Pointer position and follows future move events. */
|
|
49
49
|
export function usePointerPosition() {
|
|
@@ -65,8 +65,8 @@ function createStores(selection) {
|
|
|
65
65
|
case "theme":
|
|
66
66
|
stores.theme = new LiveSnapshot(() => host.theme.snapshot(), subscriber => host.theme.subscribe("change", subscriber));
|
|
67
67
|
break;
|
|
68
|
-
case "
|
|
69
|
-
stores.
|
|
68
|
+
case "desktopSize":
|
|
69
|
+
stores.desktopSize = new LiveSnapshot(() => host.desktop.size(), subscriber => host.desktop.subscribe("resize", subscriber));
|
|
70
70
|
break;
|
|
71
71
|
case "pointerPosition":
|
|
72
72
|
stores.pointerPosition = new LiveSnapshot(() => host.pointer.position(), subscriber => host.pointer.subscribe("move", subscriber));
|
|
@@ -90,6 +90,6 @@ function normalizeProvision(provide) {
|
|
|
90
90
|
}
|
|
91
91
|
const hookNames = {
|
|
92
92
|
theme: "useHostTheme",
|
|
93
|
-
|
|
93
|
+
desktopSize: "useDesktopSize",
|
|
94
94
|
pointerPosition: "usePointerPosition"
|
|
95
95
|
};
|
package/dist/main.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as CurrentProvider, useParent, useProcess, useProgram, type CurrentProvision, type CurrentProvisionName, type CurrentProviderProperties } from "./current-provider.js";
|
|
2
|
-
export { default as HostProvider, usePointerPosition,
|
|
2
|
+
export { default as HostProvider, usePointerPosition, useDesktopSize, useHostTheme, type HostProvision, type HostProvisionName, type HostProviderProperties } from "./host-provider.js";
|
|
3
3
|
export { default as useSubscribe } from "./use-subscribe.js";
|
|
4
4
|
export { default as useObserve } from "./use-observe.js";
|
|
5
5
|
export { default as useScale } from "./use-scale.js";
|
package/dist/main.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as CurrentProvider, useParent, useProcess, useProgram } from "./current-provider.js";
|
|
2
|
-
export { default as HostProvider, usePointerPosition,
|
|
2
|
+
export { default as HostProvider, usePointerPosition, useDesktopSize, useHostTheme } from "./host-provider.js";
|
|
3
3
|
export { default as useSubscribe } from "./use-subscribe.js";
|
|
4
4
|
export { default as useObserve } from "./use-observe.js";
|
|
5
5
|
export { default as useScale } from "./use-scale.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phreshos/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "React adapters for the Client SDK.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -47,13 +47,13 @@
|
|
|
47
47
|
"prepack": "node --run test && node --run build"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
|
-
"@phreshos/client": "^0.1.
|
|
51
|
-
"@phreshos/core": "^0.1.
|
|
50
|
+
"@phreshos/client": "^0.1.9",
|
|
51
|
+
"@phreshos/core": "^0.1.6",
|
|
52
52
|
"react": "^19.2.0"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
-
"@phreshos/client": "^0.1.
|
|
56
|
-
"@phreshos/core": "^0.1.
|
|
55
|
+
"@phreshos/client": "^0.1.9",
|
|
56
|
+
"@phreshos/core": "^0.1.6",
|
|
57
57
|
"@testing-library/react": "^16.3.0",
|
|
58
58
|
"@types/react": "^19.2.18",
|
|
59
59
|
"@types/react-dom": "^19.2.4",
|