@comapeo/core-react 8.0.0 → 9.0.0

package/dist/esm/contexts/MapServer.d.ts

@@ -0,0 +1,69 @@
+import { type QueryClient } from '@tanstack/react-query';
+import { type EventSourceClient, type EventSourceOptions } from 'eventsource-client';
+import { type Context, type JSX, type PropsWithChildren } from 'react';
+import { createHttp } from '../lib/http.js';
+export type MapServerApiOptions = {
+    getBaseUrl(): Promise<URL>;
+    /**
+     * We assume the passed fetch implementation will only accept a `string` as
+     * input, not a `URL` or `Request`, because right now the expo/fetch
+     * implementation will only accept a `string`. Adding this restriction will
+     * catch potential issues if we try to pass a URL in our code. Can be relaxed
+     * when https://github.com/expo/expo/issues/43193 is fixed upstream.
+     */
+    fetch?(input: string, options?: RequestInit): Promise<Response>;
+};
+export type MapServerApi = ReturnType<typeof createHttp> & {
+    createEventSource(options: EventSourceOptions): EventSourceClient;
+    getMapStyleJsonUrl(mapId: string): Promise<string>;
+};
+/**
+ * Utility function to create a MapServerApi instance.
+ * Only exported for unit testing purposes.
+ * @private
+ *
+ * @param opts.getBaseUrl A function that returns a promise that resolves to the base URL of the map server.
+ * @param opts.fetch An optional custom fetch function to use for making requests to the map server. If not provided, the global `fetch` will be used.
+ */
+export declare function createMapServerApi({ getBaseUrl, fetch, }: MapServerApiOptions): MapServerApi;
+export declare const MapServerContext: Context<MapServerApi | null>;
+export type MapServerProviderProps = PropsWithChildren<MapServerApiOptions & {
+    queryClient: QueryClient;
+}>;
+/**
+ * Create a context provider that holds a `MapServerFetch` function, which waits
+ * for the map server to be ready before making requests.
+ *
+ * @param opts.children React children node
+ * @param opts.getBaseUrl A function that returns a promise that resolves to the base URL of the map server.
+ * @param opts.fetch An optional custom fetch function to use for making requests to the map server. If not provided, the global `fetch` will be used.
+ *
+ * @example
+ * ```tsx
+ * import { createServer } from '@comapeo/map-server'
+ *
+ * const server = createServer()
+ * const listenPromise = server.listen()
+ *
+ * const getBaseUrl = async () => {
+ *   const { localPort } = await listenPromise
+ *   return new URL(`http://localhost:${localPort}/`)
+ * }
+ *
+ * const mapServerApi = createMapServerApi({ getBaseUrl })
+ *
+ * function App() {
+ *   return (
+ *     <MapServerProvider mapServerApi={mapServerApi}>
+ *       <MyApp />
+ *     </MapServerProvider>
+ *   )
+ * }
+ * ```
+ */
+export declare function MapServerProvider({ children, getBaseUrl, fetch, queryClient, }: MapServerProviderProps): JSX.Element;
+/**
+ * Internal hook to get the MapServerApi (instance of ky) from context.
+ * Throws if used outside of MapServerProvider.
+ */
+export declare function useMapServerApi(): MapServerApi;

package/dist/esm/contexts/MapServer.js

@@ -0,0 +1,86 @@
+import { createEventSource, } from 'eventsource-client';
+import { createContext, createElement, useContext, useMemo, } from 'react';
+import { useClientApi } from '../hooks/client.js';
+import { createHttp } from '../lib/http.js';
+import { ReceivedMapSharesProvider, SentMapSharesProvider, } from './MapShares.js';
+/**
+ * Utility function to create a MapServerApi instance.
+ * Only exported for unit testing purposes.
+ * @private
+ *
+ * @param opts.getBaseUrl A function that returns a promise that resolves to the base URL of the map server.
+ * @param opts.fetch An optional custom fetch function to use for making requests to the map server. If not provided, the global `fetch` will be used.
+ */
+export function createMapServerApi({ getBaseUrl, fetch = globalThis.fetch, }) {
+    const wrappedFetch = async (input, init) => {
+        const baseUrl = await getBaseUrl();
+        return fetch(new URL(input, baseUrl).href, init);
+    };
+    const api = createHttp(wrappedFetch);
+    Object.defineProperty(api, 'createEventSource', {
+        value: (options) => {
+            return createEventSource({
+                ...options,
+                fetch: async (input, init) => {
+                    const baseUrl = await getBaseUrl();
+                    return fetch(new URL(input, baseUrl).href, init);
+                },
+            });
+        },
+    });
+    Object.defineProperty(api, 'getMapStyleJsonUrl', {
+        value: async (mapId) => {
+            const baseUrl = await getBaseUrl();
+            return new URL(`/maps/${mapId}/style.json`, baseUrl).href;
+        },
+    });
+    return api;
+}
+export const MapServerContext = createContext(null);
+/**
+ * Create a context provider that holds a `MapServerFetch` function, which waits
+ * for the map server to be ready before making requests.
+ *
+ * @param opts.children React children node
+ * @param opts.getBaseUrl A function that returns a promise that resolves to the base URL of the map server.
+ * @param opts.fetch An optional custom fetch function to use for making requests to the map server. If not provided, the global `fetch` will be used.
+ *
+ * @example
+ * ```tsx
+ * import { createServer } from '@comapeo/map-server'
+ *
+ * const server = createServer()
+ * const listenPromise = server.listen()
+ *
+ * const getBaseUrl = async () => {
+ *   const { localPort } = await listenPromise
+ *   return new URL(`http://localhost:${localPort}/`)
+ * }
+ *
+ * const mapServerApi = createMapServerApi({ getBaseUrl })
+ *
+ * function App() {
+ *   return (
+ *     <MapServerProvider mapServerApi={mapServerApi}>
+ *       <MyApp />
+ *     </MapServerProvider>
+ *   )
+ * }
+ * ```
+ */
+export function MapServerProvider({ children, getBaseUrl, fetch, queryClient, }) {
+    const clientApi = useClientApi();
+    const mapServerApi = useMemo(() => createMapServerApi({ getBaseUrl, fetch }), [getBaseUrl, fetch]);
+    return createElement(MapServerContext.Provider, { value: mapServerApi }, createElement(SentMapSharesProvider, { clientApi, mapServerApi }, createElement(ReceivedMapSharesProvider, { clientApi, mapServerApi, queryClient }, children)));
+}
+/**
+ * Internal hook to get the MapServerApi (instance of ky) from context.
+ * Throws if used outside of MapServerProvider.
+ */
+export function useMapServerApi() {
+    const api = useContext(MapServerContext);
+    if (!api) {
+        throw new Error('useMapServerApi must be used within a MapServerProvider');
+    }
+    return api;
+}

package/dist/esm/contexts/MapShares.d.ts

@@ -0,0 +1,52 @@
+import type { MapeoClientApi } from '@comapeo/ipc';
+import type { QueryClient } from '@tanstack/react-query';
+import { type Context, type JSX, type PropsWithChildren } from 'react';
+import { type ReceivedMapSharesStore, type ReceivedMapShareState, type SentMapSharesStore, type SentMapShareState } from '../lib/map-shares-stores.js';
+import type { MapServerApi } from './MapServer.js';
+/**
+ * @internal
+ */
+export declare const ReceivedMapSharesContext: Context<ReceivedMapSharesStore | null>;
+/**
+ * @internal
+ */
+export declare const SentMapSharesContext: Context<SentMapSharesStore | null>;
+type MapSharesProviderProps = PropsWithChildren<{
+    clientApi: MapeoClientApi;
+    mapServerApi: MapServerApi;
+}>;
+/**
+ * @internal
+ */
+export declare function ReceivedMapSharesProvider({ children, clientApi, mapServerApi, queryClient, }: MapSharesProviderProps & {
+    queryClient: QueryClient;
+}): JSX.Element;
+/**
+ * @internal
+ */
+export declare function SentMapSharesProvider({ children, clientApi, mapServerApi, }: MapSharesProviderProps): JSX.Element;
+/**
+ * @internal
+ */
+export declare function useReceivedMapSharesActions(): {
+    download({ shareId }: import("../lib/map-shares-stores.js").DownloadMapShareOptions): Promise<void>;
+    decline({ shareId, reason }: import("../lib/map-shares-stores.js").DeclineMapShareOptions): Promise<void>;
+    abort({ shareId }: import("../lib/map-shares-stores.js").AbortMapShareOptions): Promise<void>;
+};
+/**
+ * @internal
+ */
+export declare function useReceivedMapSharesState(): Array<ReceivedMapShareState>;
+export declare function useReceivedMapSharesState<T>(selector: (state: Array<ReceivedMapShareState>) => T): T;
+/**
+ * @internal
+ */
+export declare function useSentMapSharesActions(): {
+    createAndSend({ projectId, receiverDeviceId, mapId, }: import("../lib/map-shares-stores.js").CreateAndSendMapShareOptions): Promise<import("@comapeo/map-server").MapShareState>;
+    cancel({ shareId }: import("../lib/map-shares-stores.js").CancelMapShareOptions): Promise<void>;
+};
+/**
+ * @internal
+ */
+export declare function useSentMapSharesState<T>(selector?: (state: Array<SentMapShareState>) => T): T;
+export {};

package/dist/esm/contexts/MapShares.js

@@ -0,0 +1,65 @@
+import { createContext, createElement, useCallback, useContext, useMemo, useSyncExternalStore, } from 'react';
+import { createReceivedMapSharesStore, createSentMapSharesStore, } from '../lib/map-shares-stores.js';
+/**
+ * @internal
+ */
+export const ReceivedMapSharesContext = createContext(null);
+/**
+ * @internal
+ */
+export const SentMapSharesContext = createContext(null);
+/**
+ * @internal
+ */
+export function ReceivedMapSharesProvider({ children, clientApi, mapServerApi, queryClient, }) {
+    const mapSharesStore = useMemo(() => createReceivedMapSharesStore({ clientApi, mapServerApi, queryClient }), [clientApi, mapServerApi, queryClient]);
+    return createElement(ReceivedMapSharesContext.Provider, { value: mapSharesStore }, children);
+}
+/**
+ * @internal
+ */
+export function SentMapSharesProvider({ children, clientApi, mapServerApi, }) {
+    const mapSharesStore = useMemo(() => createSentMapSharesStore({ clientApi, mapServerApi }), [clientApi, mapServerApi]);
+    return createElement(SentMapSharesContext.Provider, { value: mapSharesStore }, children);
+}
+const identity = (arg) => arg;
+/**
+ * Internal hook to get the MapSharesStore from context.
+ */
+function useMapSharesActions(context) {
+    const store = useContext(context);
+    if (!store) {
+        throw new Error('useMapSharesActions must be used within MapSharesProvider');
+    }
+    return store.actions;
+}
+function useMapSharesState(context, selector = identity) {
+    const store = useContext(context);
+    if (!store) {
+        throw new Error('useMapSharesState must be used within MapSharesProvider');
+    }
+    return useSyncExternalStore(store.subscribe, useCallback(
+    // Casting here because of TS not resolving generic conditional types correctly
+    () => selector(store.getSnapshot()), [selector, store]));
+}
+/**
+ * @internal
+ */
+export function useReceivedMapSharesActions() {
+    return useMapSharesActions(ReceivedMapSharesContext);
+}
+export function useReceivedMapSharesState(selector) {
+    return useMapSharesState(ReceivedMapSharesContext, selector);
+}
+/**
+ * @internal
+ */
+export function useSentMapSharesActions() {
+    return useMapSharesActions(SentMapSharesContext);
+}
+/**
+ * @internal
+ */
+export function useSentMapSharesState(selector) {
+    return useMapSharesState(SentMapSharesContext, selector);
+}