@comapeo/core-react 7.2.0 → 9.0.0

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

@@ -1,6 +1,11 @@
-import type { MapeoClientApi } from '@comapeo/ipc' with { 'resolution-mode': 'import' };
-import { type Context, type JSX, type ReactNode } from 'react';
+import type { MapeoClientApi } from '@comapeo/ipc' with {
+    'resolution-mode': 'import'
+};
+import { type Context, type JSX, type PropsWithChildren } from 'react';
 export declare const ClientApiContext: Context<MapeoClientApi | null>;
+export type ClientApiProviderProps = PropsWithChildren<{
+    clientApi: MapeoClientApi;
+}>;
 /**
  * Create a context provider that holds a CoMapeo API client instance.
  *
@@ -8,7 +13,4 @@ export declare const ClientApiContext: Context<MapeoClientApi | null>;
  * @param opts.clientApi Client API instance
  *
  */
-export declare function ClientApiProvider({ children, clientApi, }: {
-    children: ReactNode;
-    clientApi: MapeoClientApi;
-}): JSX.Element;
+export declare function ClientApiProvider({ children, clientApi, }: ClientApiProviderProps): JSX.Element;

package/dist/esm/contexts/ClientApi.js

@@ -1,4 +1,6 @@
-import { createContext, createElement, } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { createContext, createElement, useEffect, } from 'react';
+import { getInvitesQueryKey } from '../lib/react-query/invites.js';
 export const ClientApiContext = createContext(null);
 /**
  * Create a context provider that holds a CoMapeo API client instance.
@@ -8,5 +10,18 @@ export const ClientApiContext = createContext(null);
  *
  */
 export function ClientApiProvider({ children, clientApi, }) {
+    const queryClient = useQueryClient();
+    useEffect(() => {
+        function invalidateInviteCache() {
+            queryClient.invalidateQueries({ queryKey: getInvitesQueryKey() });
+        }
+        // Invite listeners
+        clientApi.invite.addListener('invite-received', invalidateInviteCache);
+        clientApi.invite.addListener('invite-updated', invalidateInviteCache);
+        return () => {
+            clientApi.invite.removeListener('invite-received', invalidateInviteCache);
+            clientApi.invite.removeListener('invite-updated', invalidateInviteCache);
+        };
+    }, [clientApi, queryClient]);
     return createElement(ClientApiContext.Provider, { value: clientApi }, children);
 }

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

@@ -0,0 +1,8 @@
+import { type JSX } from 'react';
+import { type ClientApiProviderProps } from './ClientApi.js';
+import { type MapServerProviderProps } from './MapServer.js';
+type ComapeoCoreProviderProps = ClientApiProviderProps & Omit<MapServerProviderProps, 'getBaseUrl'> & {
+    getMapServerBaseUrl(): Promise<URL>;
+};
+export declare function ComapeoCoreProvider({ children, clientApi, getMapServerBaseUrl, fetch, queryClient, }: ComapeoCoreProviderProps): JSX.Element;
+export {};

package/dist/esm/contexts/ComapeoCore.js

@@ -0,0 +1,6 @@
+import { createElement } from 'react';
+import { ClientApiProvider } from './ClientApi.js';
+import { MapServerProvider } from './MapServer.js';
+export function ComapeoCoreProvider({ children, clientApi, getMapServerBaseUrl, fetch, queryClient, }) {
+    return createElement(ClientApiProvider, { clientApi }, createElement(MapServerProvider, { getBaseUrl: getMapServerBaseUrl, fetch, queryClient }, children));
+}

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);
+}

package/dist/esm/hooks/client.d.ts

@@ -1,4 +1,6 @@
-import type { MapeoClientApi } from '@comapeo/ipc' with { 'resolution-mode': 'import' };
+import type { MapeoClientApi } from '@comapeo/ipc' with {
+    'resolution-mode': 'import'
+};
 /**
  * Access a client API instance. If a ClientApiContext provider is not
  * set up, it will throw an error.

package/dist/esm/hooks/documents.d.ts

@@ -1,4 +1,6 @@
-import type { Preset } from '@comapeo/schema' with { 'resolution-mode': 'import' };
+import type { Preset } from '@comapeo/schema' with {
+    'resolution-mode': 'import'
+};
 import type { WriteableDocumentType } from '../lib/types.js';
 /**
  * Retrieve a single document from the database based on the document's document ID.

package/dist/esm/hooks/invites.d.ts

@@ -1,19 +1,3 @@
-/**
- * Set up listeners for received and updated invites.
- * It is necessary to use this if you want the invites-related read hooks to update
- * based on invites that are received or changed in the background.
- *
- * @example
- * ```tsx
- * function App() {
- *   // Use this somewhere near the root of the application
- *   useSetUpInvitesListeners()
- *
- *   return <RestOfApp />
- * }
- * ```
- */
-export declare function useSetUpInvitesListeners(): void;
 /**
  * Get all invites that the device has received.
  *

package/dist/esm/hooks/invites.js

@@ -1,38 +1,7 @@
 import { useMutation, useQueryClient, useSuspenseQuery, } from '@tanstack/react-query';
-import { useEffect } from 'react';
-import { acceptInviteMutationOptions, getInviteByIdQueryOptions, getInvitesQueryKey, getInvitesQueryOptions, rejectInviteMutationOptions, requestCancelInviteMutationOptions, sendInviteMutationOptions, } from '../lib/react-query/invites.js';
+import { acceptInviteMutationOptions, getInviteByIdQueryOptions, getInvitesQueryOptions, rejectInviteMutationOptions, requestCancelInviteMutationOptions, sendInviteMutationOptions, } from '../lib/react-query/invites.js';
 import { useClientApi } from './client.js';
 import { useSingleProject } from './projects.js';
-/**
- * Set up listeners for received and updated invites.
- * It is necessary to use this if you want the invites-related read hooks to update
- * based on invites that are received or changed in the background.
- *
- * @example
- * ```tsx
- * function App() {
- *   // Use this somewhere near the root of the application
- *   useSetUpInvitesListeners()
- *
- *   return <RestOfApp />
- * }
- * ```
- */
-export function useSetUpInvitesListeners() {
-    const queryClient = useQueryClient();
-    const clientApi = useClientApi();
-    useEffect(() => {
-        function invalidateCache() {
-            queryClient.invalidateQueries({ queryKey: getInvitesQueryKey() });
-        }
-        clientApi.invite.addListener('invite-received', invalidateCache);
-        clientApi.invite.addListener('invite-updated', invalidateCache);
-        return () => {
-            clientApi.invite.removeListener('invite-received', invalidateCache);
-            clientApi.invite.removeListener('invite-updated', invalidateCache);
-        };
-    }, [clientApi, queryClient]);
-}
 /**
  * Get all invites that the device has received.
  *