@warp-drive-mirror/react 5.8.0-alpha.3 → 5.8.0-alpha.32

package/dist/unpkg/dev-deprecated/install.js

@@ -0,0 +1,104 @@
+import { use } from 'react';
+import { Signal } from 'signal-polyfill';
+import { setupSignals } from '@warp-drive-mirror/core/configure';
+import { W as WatcherContext } from "./reactive-context-ClTRYXie.js";
+import { macroCondition, getGlobalConfig } from '@embroider/macros';
+
+/**
+ * {@include ./install.md}
+ * @module
+ */
+
+function tryConsumeContext(signal) {
+  // eslint-disable-next-line no-console
+  const logError = console.error;
+  try {
+    // eslint-disable-next-line no-console
+    console.error = () => {};
+    // ensure signals are watched by our closest watcher
+    const watcher = use(WatcherContext);
+    // eslint-disable-next-line no-console
+    console.error = logError;
+    watcher?.watcher.watch(signal);
+    if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+      if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+        // eslint-disable-next-line no-console
+        console.log(`[WarpDrive] Consumed Context Signal`, signal, watcher);
+      }
+    }
+  } catch {
+    // eslint-disable-next-line no-console
+    console.error = logError;
+    // if we are not in a React context, we will Error
+    // so we just ignore it.
+    if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+      if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+        // eslint-disable-next-line no-console
+        console.log(`[WarpDrive] No Context Available To Consume Signal`, signal);
+      }
+    }
+  }
+}
+let pending;
+async function settled() {
+  if (macroCondition(getGlobalConfig().WarpDriveMirror.env.TESTING)) {
+    // in testing mode we provide a test waiter integration
+    if (!pending || !pending.length) return;
+    const current = pending ?? [];
+    pending = [];
+    await Promise.allSettled(current);
+    await Promise.resolve();
+    await Promise.resolve();
+    await Promise.resolve();
+    return settled();
+  }
+}
+function buildSignalConfig(options) {
+  return {
+    createSignal: (obj, key) => new Signal.State(macroCondition(getGlobalConfig().WarpDriveMirror.env.DEBUG) ? {
+      obj,
+      key
+    } : null, {
+      equals: () => false
+    }),
+    notifySignal: signal => {
+      if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+        if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+          if (Signal.subtle.hasSinks(signal)) {
+            // eslint-disable-next-line no-console
+            console.log(`[WarpDrive] Notifying Signal`, signal);
+          } else {
+            // eslint-disable-next-line no-console
+            console.log(`[WarpDrive] Notified Signal That Has No Watcher`, signal);
+          }
+        }
+      }
+      signal.set(signal.get());
+    },
+    consumeSignal: signal => {
+      tryConsumeContext(signal);
+      void signal.get();
+    },
+    createMemo: (object, key, fn) => {
+      const memo = new Signal.Computed(fn);
+      return () => {
+        tryConsumeContext(memo);
+        return memo.get();
+      };
+    },
+    waitFor: promise => {
+      if (macroCondition(getGlobalConfig().WarpDriveMirror.env.TESTING)) {
+        pending = pending || [];
+        const newPromise = promise.finally(() => {
+          pending = pending.filter(p => p !== newPromise);
+        });
+        pending.push(newPromise);
+        return newPromise;
+      }
+      return promise;
+    },
+    willSyncFlushWatchers: () => false
+  };
+}
+setupSignals(buildSignalConfig);
+export { buildSignalConfig, settled };

package/dist/unpkg/dev-deprecated/reactive-context-ClTRYXie.js

@@ -0,0 +1,154 @@
+import { Signal } from 'signal-polyfill';
+import { createContext, useMemo, useSyncExternalStore } from 'react';
+import { macroCondition, getGlobalConfig } from '@embroider/macros';
+import { jsx } from 'react/jsx-runtime';
+let nextFlush = null;
+let watchers = [];
+let watcherId = 0;
+function clearWatcher(state) {
+  state.watcher.unwatch(...Signal.subtle.introspectSources(state.watcher));
+}
+function flush(state) {
+  state.pending = false;
+  if (state.destroyed) {
+    if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+      if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+        console.log(`[WarpDrive] Detected Watcher Destroyed During Notify Flush, clearing signals`);
+      }
+    }
+    state.snapshot = null;
+    clearWatcher(state);
+    return;
+  }
+  if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+    if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+      console.log(`[WarpDrive] Notifying React That WatcherContext:${state.watcherId} Has Updated`);
+      console.log("all signals", new Set(Signal.subtle.introspectSources(state.watcher)));
+      console.log("dirty signals", new Set(state.watcher.getPending()));
+    }
+  }
+
+  // any time signals have changed, we notify React that our store has updated
+  state.snapshot = {
+    watcher: state.watcher
+  };
+  if (state.notifyReact) state.notifyReact();
+
+  // tell the Watcher to start watching for changes again
+  // by signaling that notifications have been flushed.
+  state.watcher.watch();
+}
+function _createWatcher() {
+  const id = watcherId++;
+  if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+    if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+      console.log(`[WarpDrive] Creating a WatcherContext:${id}`);
+    }
+  }
+  const state = {
+    watcherId: id,
+    pending: false,
+    destroyed: false,
+    notifyReact: null,
+    watcher: null,
+    // the extra wrapper returned here ensures that the context value for the watcher
+    // changes causing a re-render when the watcher is updated.
+    snapshot: null
+  };
+  state.watcher = new Signal.subtle.Watcher((...args) => {
+    if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+      if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+        console.log(`watcher ${state.watcherId} notified`, args, state.watcher);
+      }
+    }
+    if (!state.pending && !state.destroyed) {
+      watchers.push(state);
+      state.pending = true;
+      if (!nextFlush) {
+        nextFlush = new Promise(resolve => {
+          queueMicrotask(() => {
+            queueMicrotask(() => {
+              queueMicrotask(() => {
+                watchers.forEach(flush);
+                if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+                  if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+                    console.log("Flushed watcher:", watchers.map(w => w.watcherId));
+                  }
+                }
+                watchers = [];
+                nextFlush = null;
+                resolve();
+              });
+            });
+          });
+        });
+      }
+    } else if (state.destroyed) {
+      if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+        if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+          console.log(`[WarpDrive] Detected Watcher Destroyed During Notify, clearing signals`);
+        }
+      }
+      // if we are destroyed, we clear the watcher signals
+      // so that it does not continue to watch for changes.
+      state.snapshot = null;
+      clearWatcher(state);
+    }
+  });
+
+  // The watcher won't begin watching until we call `watcher.watch()`
+  state.watcher.watch();
+  state.snapshot = {
+    watcher: state.watcher
+  };
+  return state;
+}
+function useWatcher() {
+  const state = useMemo(_createWatcher, []);
+  return useSyncExternalStore(notifyChanged => {
+    if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+      if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+        console.log(`[WarpDrive] Subscribing to Watcher`);
+      }
+    }
+    state.destroyed = false;
+    state.notifyReact = notifyChanged;
+
+    // The watcher won't begin watching until we call `watcher.watch()`
+    state.watcher.watch();
+    return () => {
+      if (macroCondition(getGlobalConfig().WarpDriveMirror.activeLogging.LOG_REACT_SIGNAL_INTEGRATION)) {
+        if (getGlobalConfig().WarpDriveMirror.debug.LOG_REACT_SIGNAL_INTEGRATION || globalThis.getWarpDriveRuntimeConfig().debug.LOG_REACT_SIGNAL_INTEGRATION) {
+          console.log(`[WarpDrive] Deactivating Watcher Subscription`);
+        }
+      }
+      state.destroyed = true;
+      state.notifyReact = null;
+    };
+  }, () => state.snapshot);
+}
+
+/**
+ * @category Contexts
+ */
+const WatcherContext = /*#__PURE__*/createContext(null);
+
+/**
+ *
+ * @category Components
+ */
+function ReactiveContext({
+  children
+}) {
+  const watcher = useWatcher();
+  /**
+   * Unlike other frameworks, React does not have a built-in way to provide
+   * a context value other than by rendering an extra component.
+   *
+   */
+  return /*#__PURE__*/jsx(WatcherContext, {
+    value: watcher,
+    children: children
+  });
+}
+export { ReactiveContext as R, WatcherContext as W };

package/dist/unpkg/prod/declarations/-private/reactive-context.d.ts

@@ -0,0 +1,18 @@
+import { Signal } from "signal-polyfill";
+import { type JSX, type ReactNode, type Context } from "react";
+export declare function useWatcher(): {
+	watcher: Signal.subtle.Watcher;
+} | null;
+/**
+* @category Contexts
+*/
+export declare const WatcherContext: Context<{
+	watcher: Signal.subtle.Watcher;
+} | null>;
+/**
+*
+* @category Components
+*/
+export declare function ReactiveContext({ children }: {
+	children: ReactNode;
+}): JSX.Element;

package/dist/unpkg/prod/declarations/-private/request.d.ts

@@ -0,0 +1,141 @@
+import { RequestArgs, type ContentFeatures, type RecoveryFeatures, type RequestLoadingState, type RequestState } from "@warp-drive-mirror/core/store/-private";
+import type { StructuredErrorDocument } from "@warp-drive-mirror/core/types/request";
+import { JSX, ReactNode } from "react";
+interface ChromeComponentProps<RT> {
+	children: ReactNode;
+	state: RequestState | null;
+	features: ContentFeatures<RT>;
+}
+export interface RequestProps<
+	RT,
+	E
+> extends RequestArgs<RT, E> {
+	chrome?: React.FC<ChromeComponentProps<RT>>;
+	states: RequestStates<RT, E>;
+}
+interface RequestStates<
+	RT,
+	E
+> {
+	/**
+	* The block to render when the component is idle and waiting to be given a request.
+	*
+	*/
+	idle?: React.FC<{}>;
+	/**
+	* The block to render when the request is loading.
+	*
+	*/
+	loading?: React.FC<{
+		state: RequestLoadingState;
+	}>;
+	/**
+	* The block to render when the request was cancelled.
+	*
+	*/
+	cancelled?: React.FC<{
+		/**
+		* The Error the request rejected with.
+		*/
+		error: StructuredErrorDocument<E>;
+		/**
+		* Utilities to assist in recovering from the error.
+		*/
+		features: RecoveryFeatures;
+	}>;
+	/**
+	* The block to render when the request failed. If this block is not provided,
+	* the error will be rethrown.
+	*
+	* Thus it is required to provide an error block and proper error handling if
+	* you do not want the error to crash the application.
+	*/
+	error: React.FC<{
+		/**
+		* The Error the request rejected with.
+		*/
+		error: StructuredErrorDocument<E>;
+		/**
+		* Utilities to assist in recovering from the error.
+		*/
+		features: RecoveryFeatures;
+	}>;
+	/**
+	* The block to render when the request succeeded.
+	*
+	*/
+	content: React.FC<{
+		result: RT;
+		features: ContentFeatures<RT>;
+	}>;
+}
+export declare function Throw({ error }: {
+	error: Error;
+}): never;
+/**
+* The `<Request />` component is a powerful tool for managing data fetching and
+* state in your React application. It provides a declarative approach to reactive
+* control-flow for managing requests and state in your application.
+*
+* The `<Request />` component is ideal for handling "boundaries", outside which some
+* state is still allowed to be unresolved and within which it MUST be resolved.
+*
+* ## Request States
+*
+* `<Request />` has five states, only one of which will be active and rendered at a time.
+*
+* - `idle`: The component is waiting to be given a request to monitor
+* - `loading`: The request is in progress
+* - `error`: The request failed
+* - `content`: The request succeeded
+* - `cancelled`: The request was cancelled
+*
+* Additionally, the `content` state has a `refresh` method that can be used to
+* refresh the request in the background, which is available as a sub-state of
+* the `content` state.
+*
+* ### Example Usage
+*
+* ```tsx
+* import { Request } from "@warp-drive-mirror/react";
+*
+* export function UserPreview($props: { id: string | null }) {
+*   return (
+*    <Request
+*       query={findRecord('user', $props.id)}
+*       states={{
+*         idle: () => <div>Waiting for User Selection</div>,
+*         loading: ({ state }) => <div>Loading user data...</div>,
+*         cancelled: ({ error, features }) => (
+*           <div>
+*             <p>Request Cancelled</p>
+*             <p><button onClick={features.retry}>Start Again?</button></p>
+*           </div>
+*         ),
+*         error: ({ error, features }) => (
+*           <div>
+*             <p>Error: {error.message}</p>
+*             <p><button onClick={features.retry}>Try Again?</button></p>
+*           </div>
+*         ),
+*         content: ({ result, features }) => (
+*           <div>
+*            <h2>User Details</h2>
+*            <p>ID: {result.id}</p>
+*            <p>Name: {result.name}</p>
+*          </div>
+*        ),
+*      }}
+*    />
+*   );
+* }
+*
+* ```
+*
+* @category Components
+*/
+export declare function Request<
+	RT,
+	E
+>($props: RequestProps<RT, E>): JSX.Element;
+export {};

package/dist/unpkg/prod/declarations/-private/store-provider.d.ts

@@ -0,0 +1,19 @@
+import { Store } from "@warp-drive-mirror/core";
+import { JSX, ReactNode } from "react";
+/**
+* @category Hooks
+*/
+export declare function useStore(): Store;
+type WithExistingStore = {
+	store: Store;
+	children: ReactNode;
+};
+type WithNewStore = {
+	Store: typeof Store;
+	children: ReactNode;
+};
+/**
+* @category Components
+*/
+export declare function StoreProvider($props: WithExistingStore | WithNewStore): JSX.Element;
+export {};

package/dist/unpkg/prod/declarations/index.d.ts

@@ -0,0 +1,7 @@
+/**
+* @module
+* @mergeModuleWith <project>
+*/
+export { ReactiveContext, WatcherContext } from "./-private/reactive-context.js";
+export { StoreProvider, useStore } from "./-private/store-provider.js";
+export { Request, Throw } from "./-private/request.js";

package/dist/unpkg/prod/declarations/install.d.ts

@@ -0,0 +1,3 @@
+import { type HooksOptions, type SignalHooks } from "@warp-drive-mirror/core/configure";
+export declare function settled(): Promise<void>;
+export declare function buildSignalConfig(options: HooksOptions): SignalHooks;