@intrig/next 0.0.7 → 0.0.8

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intrig/next",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "main": "./index.esm.js",
   "module": "./index.esm.js",
@@ -38,9 +38,5 @@
       "import": "./index.esm.js",
       "default": "./index.esm.js"
     }
-  },
-  "files": [
-    ".",
-    "!**/*.tsbuildinfo"
-  ]
+  }
 }

package/project.json

@@ -0,0 +1,15 @@
+{
+  "name": "@intrig/next",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "lib/next-client/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project @intrig/next --web",
+  "targets": {},
+  "nx-release-publish": {
+    "executor": "@nx/js:release-publish",
+    "options": {
+      "packageRoot": "dist/lib/next-client"
+    }
+  }
+}

package/rollup.config.cjs

@@ -0,0 +1,31 @@
+const { withNx } = require('@nx/rollup/with-nx');
+const url = require('@rollup/plugin-url');
+const svg = require('@svgr/rollup');
+
+module.exports = withNx(
+  {
+    main: './src/index.ts',
+    outputPath: '../../dist/lib/next-client',
+    tsConfig: './tsconfig.lib.json',
+    compiler: 'babel',
+    external: ['react', 'react-dom', 'react/jsx-runtime'],
+    format: ['esm'],
+    assets: [
+      { input: 'lib/next-client', output: '.', glob: 'README.md' },
+      { input: 'lib/next-client', output: '.', glob: 'package.json' }
+    ],
+  },
+  {
+    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+    plugins: [
+      svg({
+        svgo: false,
+        titleProp: true,
+        ref: true,
+      }),
+      url({
+        limit: 10000, // 10kB
+      }),
+    ],
+  },
+);

package/src/extra.ts

@@ -0,0 +1,268 @@
+'use client';
+import {
+  BinaryFunctionHook,
+  BinaryHookOptions,
+  BinaryProduceHook,
+  ConstantHook,
+  error,
+  init,
+  IntrigHook,
+  IntrigHookOptions,
+  isError,
+  isSuccess,
+  isValidationError,
+  NetworkState,
+  pending,
+  success,
+  UnaryFunctionHook,
+  UnaryHookOptions,
+  UnaryProduceHook,
+  UnitHook,
+  UnitHookOptions,
+} from './network-state';
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useIntrigContext } from './intrig-context';
+
+/**
+ * Converts a given hook into a promise-based function.
+ *
+ * @param {IntrigHook<P, B, T>} hook - The hook function to be converted.
+ * @param options
+ *
+ * @return {[(...params: Parameters<ReturnType<IntrigHook<P, B, T>>[1]>) => Promise<T>, () => void]}
+ * Returns a tuple containing a function that invokes the hook as a promise and a function to clear the state.
+ */
+export function useAsPromise<E>(
+  hook: UnitHook<E>,
+  options: UnitHookOptions,
+): [() => Promise<never>, () => void];
+export function useAsPromise<T, E>(
+  hook: ConstantHook<T, E>,
+  options: UnitHookOptions,
+): [() => Promise<T>, () => void];
+export function useAsPromise<P, E>(
+  hook: UnaryProduceHook<P, E>,
+  options?: UnaryHookOptions<P>,
+): [(params: P) => Promise<never>, () => void];
+export function useAsPromise<P, T, E>(
+  hook: UnaryFunctionHook<P, T, E>,
+  options?: UnaryHookOptions<P>,
+): [(params: P) => Promise<T>, () => void];
+export function useAsPromise<P, B, E>(
+  hook: BinaryProduceHook<P, B, E>,
+  options?: BinaryHookOptions<P, B>,
+): [(body: B, params: P) => Promise<never>, () => void];
+export function useAsPromise<P, B, T, E>(
+  hook: BinaryFunctionHook<P, B, T, E>,
+  options?: BinaryHookOptions<P, B>,
+): [(body: B, params: P) => Promise<T>, () => void];
+
+// **Implementation**
+export function useAsPromise<P, B, T, E>(
+  hook: IntrigHook<P, B, T, E>,
+  options?: IntrigHookOptions<P, B>,
+): [(...args: any[]) => Promise<T>, () => void] {
+  // <- Compatible return type
+  const resolveRef = useRef<(value: T) => void>(() => {
+    // intentionally kept empty
+  });
+  const rejectRef = useRef<(reason?: any) => void>(() => {
+    // intentionally kept empty
+  });
+
+  const [state, dispatch, clear] = hook(options as any);
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      resolveRef.current?.(state.data);
+      clear();
+    } else if (isError(state)) {
+      rejectRef.current?.(state.error);
+      clear();
+    }
+  }, [state]);
+
+  const promiseFn = useCallback(
+    (...args: any[]) => {
+      return new Promise<T>((resolve, reject) => {
+        resolveRef.current = resolve;
+        rejectRef.current = reject;
+
+        const dispatchState = (dispatch as any)(...args);
+        if (isValidationError(dispatchState)) {
+          reject(dispatchState.error);
+        }
+      });
+    },
+    [dispatch],
+  );
+
+  return [promiseFn, clear];
+}
+
+/**
+ * A custom hook that manages and returns the network state of a promise-based function,
+ * providing a way to execute the function and clear its state.
+ *
+ * @param fn The promise-based function whose network state is to be managed. It should be a function that returns a promise.
+ * @param key An optional identifier for the network state. Defaults to 'default'.
+ * @return A tuple containing the current network state, a function to execute the promise, and a function to clear the state.
+ */
+export function useAsNetworkState<T, F extends (...args: any) => Promise<T>>(
+  fn: F,
+  key = 'default',
+): [NetworkState<T>, (...params: Parameters<F>) => void, () => void] {
+  const id = useId();
+
+  const context = useIntrigContext();
+
+  const networkState = useMemo(() => {
+    return context.state?.[`promiseState:${id}:${key}`] ?? init();
+  }, [context.state?.[`promiseState:${id}:${key}`]]);
+
+  const dispatch = useCallback(
+    (state: NetworkState<T>) => {
+      context.dispatch({ key, operation: id, source: 'promiseState', state });
+    },
+    [key, context.dispatch],
+  );
+
+  const execute = useCallback((...args: Parameters<F>) => {
+    dispatch(pending());
+    return fn(...args).then(
+      (data) => {
+        dispatch(success(data));
+      },
+      (e) => {
+        dispatch(error(e));
+      },
+    );
+  }, []);
+
+  const clear = useCallback(() => {
+    dispatch(init());
+  }, []);
+
+  return [networkState, execute, clear];
+}
+
+/**
+ * A custom hook that resolves the value from the provided hook's state and updates it whenever the state changes.
+ *
+ * @param {IntrigHook<P, B, T>} hook - The hook that provides the state to observe and resolve data from.
+ * @param options
+ * @return {T | undefined} The resolved value from the hook's state or undefined if the state is not successful.
+ */
+export function useResolvedValue<E>(
+  hook: UnitHook<E>,
+  options: UnitHookOptions,
+): undefined;
+
+export function useResolvedValue<T, E>(
+  hook: ConstantHook<T, E>,
+  options: UnitHookOptions,
+): T | undefined;
+
+export function useResolvedValue<P, E>(
+  hook: UnaryProduceHook<P, E>,
+  options: UnaryHookOptions<P>,
+): undefined;
+
+export function useResolvedValue<P, T, E>(
+  hook: UnaryFunctionHook<P, T, E>,
+  options: UnaryHookOptions<P>,
+): T | undefined;
+
+export function useResolvedValue<P, B, E>(
+  hook: BinaryProduceHook<P, B, E>,
+  options: BinaryHookOptions<P, B>,
+): undefined;
+
+export function useResolvedValue<P, B, T, E>(
+  hook: BinaryFunctionHook<P, B, T, E>,
+  options: BinaryHookOptions<P, B>,
+): T | undefined;
+
+// **Implementation**
+export function useResolvedValue<P, B, T, E>(
+  hook: IntrigHook<P, B, T, E>,
+  options: IntrigHookOptions<P, B>,
+): T | undefined {
+  const [value, setValue] = useState<T | undefined>();
+
+  const [state] = hook(options as any); // Ensure compatibility with different hook types
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      setValue(state.data);
+    } else {
+      setValue(undefined);
+    }
+  }, [state]);
+
+  return value;
+}
+
+/**
+ * A custom hook that resolves and caches the value from a successful state provided by the given hook.
+ * The state is updated only when it is in a successful state.
+ *
+ * @param {IntrigHook<P, B, T>} hook - The hook that provides the state to observe and cache data from.
+ * @param options
+ * @return {T | undefined} The cached value from the hook's state or undefined if the state is not successful.
+ */
+export function useResolvedCachedValue<E>(
+  hook: UnitHook<E>,
+  options: UnitHookOptions,
+): undefined;
+
+export function useResolvedCachedValue<T, E>(
+  hook: ConstantHook<T, E>,
+  options: UnitHookOptions,
+): T | undefined;
+
+export function useResolvedCachedValue<P, E>(
+  hook: UnaryProduceHook<P, E>,
+  options: UnaryHookOptions<P>,
+): undefined;
+
+export function useResolvedCachedValue<P, T, E>(
+  hook: UnaryFunctionHook<P, T, E>,
+  options: UnaryHookOptions<P>,
+): T | undefined;
+
+export function useResolvedCachedValue<P, B, E>(
+  hook: BinaryProduceHook<P, B, E>,
+  options: BinaryHookOptions<P, B>,
+): undefined;
+
+export function useResolvedCachedValue<P, B, T, E>(
+  hook: BinaryFunctionHook<P, B, T, E>,
+  options: BinaryHookOptions<P, B>,
+): T | undefined;
+
+// **Implementation**
+export function useResolvedCachedValue<P, B, T, E>(
+  hook: IntrigHook<P, B, T, E>,
+  options: IntrigHookOptions<P, B>,
+): T | undefined {
+  const [cachedValue, setCachedValue] = useState<T | undefined>();
+
+  const [state] = hook(options as any); // Ensure compatibility with different hook types
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      setCachedValue(state.data);
+    }
+    // Do not clear cached value if state is unsuccessful
+  }, [state]);
+
+  return cachedValue;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './intrig-provider';
+export * from './intrig-layout';
+export * from './network-state';
+export * from './extra';

package/src/intrig-context.ts

@@ -0,0 +1,72 @@
+'use client';
+import { NetworkAction, NetworkState } from './network-state';
+import { AxiosProgressEvent, CreateAxiosDefaults } from 'axios';
+import { ZodSchema } from 'zod';
+import { createContext, useContext } from 'react';
+
+export interface DefaultConfigs extends CreateAxiosDefaults {
+  debounceDelay?: number;
+}
+
+type GlobalState = Record<string, NetworkState>;
+
+interface RequestType<T = any> {
+  method: 'get' | 'post' | 'put' | 'delete';
+  url: string;
+  headers?: Record<string, string>;
+  params?: Record<string, any>;
+  data?: any; // This allows transformations, while retaining flexibility.
+  originalData?: T; // Keeps track of the original data type.
+  onUploadProgress?: (event: AxiosProgressEvent) => void;
+  onDownloadProgress?: (event: AxiosProgressEvent) => void;
+  signal?: AbortSignal;
+  key: string;
+}
+
+/**
+ * Defines the ContextType interface for managing global state, dispatching actions,
+ * and holding a collection of Axios instances.
+ *
+ * @interface ContextType
+ * @property {GlobalState} state - The global state of the application.
+ * @property {React.Dispatch<NetworkAction<unknown>>} dispatch - The dispatch function to send network actions.
+ * @property {Record<string, AxiosInstance>} axios - A record of Axios instances for making HTTP requests.
+ */
+export interface ContextType {
+  state: GlobalState;
+  filteredState: GlobalState;
+  dispatch: React.Dispatch<NetworkAction<unknown, unknown>>;
+  configs: DefaultConfigs;
+  execute: <T, E = unknown>(
+    request: RequestType,
+    dispatch: (state: NetworkState<T, E>) => void,
+    schema: ZodSchema<T> | undefined,
+    errorSchema: ZodSchema<E> | undefined,
+  ) => Promise<void>;
+}
+
+/**
+ * Context object created using `createContext` function. Provides a way to share state, dispatch functions,
+ * and axios instance across components without having to pass props down manually at every level.
+ *
+ * @type {ContextType}
+ */
+const Context = createContext<ContextType>({
+  state: {},
+  filteredState: {},
+  dispatch() {
+    // intentionally kept empty
+  },
+  configs: {},
+  async execute() {
+    // intentionally kept empty
+  },
+});
+
+export function useIntrigContext() {
+  return useContext(Context);
+}
+
+export {Context};
+export type { GlobalState, RequestType };
+

package/src/intrig-layout.tsx

@@ -0,0 +1,30 @@
+'use server';
+
+import { headers } from 'next/headers';
+import { IntrigProvider } from './intrig-provider';
+import { DefaultConfigs } from './intrig-context';
+
+export async function IntrigLayout({
+  children,
+  configs,
+}: {
+  children: React.ReactNode;
+  configs?: DefaultConfigs;
+}) {
+  const headersData = await headers();
+  const hydratedResponsesStr = headersData.get('INTRIG_HYDRATED');
+  const hydratedResponses = hydratedResponsesStr
+    ? JSON.parse(hydratedResponsesStr)
+    : {};
+  headersData.delete('INTRIG_HYDRATED');
+
+  return (
+    <>
+      <IntrigProvider configs={configs} initState={hydratedResponses}>
+        {children}
+      </IntrigProvider>
+    </>
+  );
+}
+
+export default IntrigLayout;

package/src/intrig-middleware.ts

@@ -0,0 +1,55 @@
+import axios, {AxiosInstance} from 'axios';
+import {headers} from 'next/headers';
+
+interface RequestContext {
+  headers?: Record<string, string>;
+}
+
+const CONTEXT = new WeakMap<Headers, RequestContext>();
+
+export async function addToHeaders(newHeaders: Record<string, string>) {
+  const _headers = await headers();
+
+  const ctx = CONTEXT.get(_headers) ?? {};
+  CONTEXT.set(_headers, {
+    ...ctx,
+    headers: {
+      ...ctx.headers,
+      ...newHeaders
+    }
+  });
+}
+
+export async function getHeaders() {
+  const _headers = await headers();
+  const ctx = CONTEXT.get(_headers) ?? {};
+  return ctx.headers;
+}
+
+const clients = new Map<string, AxiosInstance>();
+
+export async function getAxiosInstance(key: string) {
+  if (clients.has(key)) {
+    return clients.get(key)!;
+  }
+  const baseURL = process.env[`${key.toUpperCase()}_API_URL`];
+  if (!baseURL) {
+    throw new Error(
+      `Environment variable ${key.toUpperCase()}_API_URL is not defined.`,
+    );
+  }
+
+  const axiosInstance = axios.create({
+    baseURL
+  });
+  clients.set(key, axiosInstance);
+  return axiosInstance;
+}
+
+export async function addResponseToHydrate(key: string, responseData: any) {
+  const _headers = await headers();
+  const intrigHydrated = _headers.get('INTRIG_HYDRATED');
+  const ob = intrigHydrated ? JSON.parse(intrigHydrated) : {};
+  ob[key] = responseData;
+  _headers.set('INTRIG_HYDRATED', JSON.stringify(ob));
+}