@equinor/fusion-framework-module-http 0.0.0-next-20230915111233

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@equinor/fusion-framework-module-http",
+  "version": "0.0.0-next-20230915111233",
+  "description": "",
+  "main": "dist/esm/index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": "./dist/esm/index.js",
+    "./client": "./dist/esm/lib/client/index.js",
+    "./operators": "./dist/esm/lib/operators/index.js",
+    "./selectors": "./dist/esm/lib/selectors/index.js"
+  },
+  "typesVersions": {
+    ">=4.2": {
+      "*": [
+        "dist/types/*"
+      ],
+      "client": [
+        "dist/types/lib/client/index.d.ts"
+      ],
+      "operators": [
+        "dist/types/lib/operators/index.d.ts"
+      ],
+      "selectors": [
+        "dist/types/lib/selectors/index.d.ts"
+      ]
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/equinor/fusion-framework.git",
+    "directory": "packages/modules/http"
+  },
+  "dependencies": {
+    "rxjs": "^7.8.1",
+    "@equinor/fusion-framework-module": "^4.2.4",
+    "@equinor/fusion-framework-module-msal": "^3.0.6"
+  },
+  "devDependencies": {
+    "typescript": "^5.1.3"
+  },
+  "scripts": {
+    "build": "tsc -b"
+  }
+}

package/src/configurator.ts

@@ -0,0 +1,131 @@
+import { HttpRequestHandler } from './lib/operators';
+
+import type { FetchRequest, IHttpClient } from './lib/client';
+import type { IHttpRequestHandler, IHttpResponseHandler } from './lib/operators';
+
+interface HttpClientConstructorOptions<TInit extends FetchRequest> {
+    requestHandler: IHttpRequestHandler<TInit>;
+}
+
+interface HttpClientConstructor<TClient extends IHttpClient> {
+    new (
+        uri: string,
+        options: HttpClientConstructorOptions<HttpClientRequestInitType<TClient>>,
+    ): TClient;
+}
+
+export interface HttpClientOptions<TClient extends IHttpClient = IHttpClient> {
+    baseUri?: string;
+    defaultScopes?: string[];
+    ctor?: HttpClientConstructor<TClient>;
+    onCreate?: (client: TClient) => void;
+    requestHandler?: IHttpRequestHandler<HttpClientRequestInitType<TClient>>;
+    responseHandler?: IHttpResponseHandler<HttpClientRequestInitType<TClient>>;
+}
+
+export type HttpClientRequestInitType<T extends IHttpClient> = T extends IHttpClient<infer U>
+    ? U
+    : never;
+
+/**
+ * Instance for configuring http client
+ * @template TClient base type of client that the provider will create
+ */
+export interface IHttpClientConfigurator<TClient extends IHttpClient = IHttpClient> {
+    readonly clients: Record<string, HttpClientOptions<TClient>>;
+    readonly defaultHttpClientCtor: HttpClientConstructor<TClient>;
+    readonly defaultHttpRequestHandler: IHttpRequestHandler<HttpClientRequestInitType<TClient>>;
+
+    /**
+     * Configure a client with arguments
+     * @param name name of the client
+     * @param args option that are used cor creating a client
+     * @example
+     * ```ts
+     * configurator.http.configureClient('foo',{
+     *   baseUri: 'https://foo.bar',
+     *   defaultScopes: ['foobar/.default']
+     * });
+     * ```
+     */
+    configureClient<T extends TClient>(
+        name: string,
+        args: HttpClientOptions<T>,
+    ): IHttpClientConfigurator<TClient>;
+
+    /**
+     * Configure a simple client by name to an endpoint
+     * @param name name of the client
+     * @param uri base endpoint for the client
+     */
+    configureClient(name: string, uri: string): IHttpClientConfigurator<TClient>;
+
+    /**
+     * Creates a client with callback configuration
+     * @param name name of the client
+     * @param onCreate callback when a client is created
+     * ```ts
+     * configurator.http.configureClient('foo',(client) => {
+     *   client.requestHandler.add('logger', (request) => console.log(request));
+     * });
+     * ```
+     */
+    configureClient<T extends TClient>(
+        name: string,
+        onCreate: (client: T) => void,
+    ): HttpClientConfigurator<TClient>;
+
+    /**
+     * Check if there is a configuration for provided name
+     */
+    hasClient(name: string): boolean;
+}
+
+/** @inheritdoc */
+export class HttpClientConfigurator<TClient extends IHttpClient>
+    implements IHttpClientConfigurator<TClient>
+{
+    protected _clients: Record<string, HttpClientOptions<TClient>> = {};
+
+    /** Get a clone of all configured clients */
+    public get clients(): Record<string, HttpClientOptions<TClient>> {
+        return { ...this._clients };
+    }
+
+    /** default class for creation of http clients */
+    readonly defaultHttpClientCtor: HttpClientConstructor<TClient>;
+
+    /** default request handler for http clients, applied on creation */
+    readonly defaultHttpRequestHandler = new HttpRequestHandler<
+        HttpClientRequestInitType<TClient>
+    >();
+
+    /**
+     * Create a instance of http configuration
+     * @param client defaultHttpRequestHandler
+     */
+    constructor(client: HttpClientConstructor<TClient>) {
+        this.defaultHttpClientCtor = client;
+    }
+
+    /** @inheritdoc */
+    hasClient(name: string): boolean {
+        return Object.keys(this._clients).includes(name);
+    }
+
+    /** @inheritdoc */
+    configureClient<T extends TClient>(
+        name: string,
+        args: string | HttpClientOptions<T> | HttpClientOptions<T>['onCreate'],
+    ): HttpClientConfigurator<TClient> {
+        const argFn = typeof args === 'string' ? (x: T) => (x.uri = String(args)) : args;
+        const options = typeof argFn === 'function' ? { onCreate: argFn } : argFn;
+        this._clients[name] = {
+            ...this._clients[name],
+            ...(options as unknown as HttpClientOptions<TClient>),
+        };
+        return this;
+    }
+}
+
+export default HttpClientConfigurator;

package/src/errors.ts

@@ -0,0 +1,9 @@
+export class HttpResponseError extends Error {
+    constructor(
+        public message: string,
+        public response: Response,
+        options?: ErrorOptions,
+    ) {
+        super(message, options);
+    }
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+/**
+ * [[include:module-http/README.MD]]
+ * @module
+ */
+
+export * from './configurator';
+export * from './provider';
+export * from './module';
+
+export * from './errors';
+
+export type { IHttpClient, FetchResponse } from './lib/client';
+
+export { default } from './module';

package/src/lib/client/client-msal.ts

@@ -0,0 +1,33 @@
+import type { Observable } from 'rxjs';
+import type { FetchRequestInit, FetchRequest, FetchResponse } from '.';
+import { HttpClient } from './client';
+
+/** Extends request init with scope  */
+type MsalFetchRequest = FetchRequest & { scopes?: string[] };
+type MsalFetchRequestInit<
+    TReturn = unknown,
+    TRequest = FetchRequest,
+    TResponse = FetchResponse,
+> = FetchRequestInit<TReturn, TRequest, TResponse> & Pick<MsalFetchRequest, 'scopes'>;
+
+/** Default Client for MSAL */
+export class HttpClientMsal<
+    TRequest extends MsalFetchRequest = MsalFetchRequest,
+    TResponse extends FetchResponse = FetchResponse,
+> extends HttpClient<TRequest, TResponse> {
+    /** Scope that will be applied to all request if no scope is provided in request object */
+    public defaultScopes: string[] = [];
+
+    /** @inheritdoc */
+    fetch$<T = TResponse>(
+        path: string,
+        init?: MsalFetchRequestInit<T, TRequest, TResponse>,
+    ): Observable<T> {
+        const args = Object.assign(init || {}, {
+            scopes: this.defaultScopes.concat(init?.scopes || []),
+        }) as FetchRequestInit<T, TRequest, TResponse>;
+        return super._fetch$(path, args);
+    }
+}
+
+export default HttpClientMsal;

package/src/lib/client/client.ts

@@ -0,0 +1,204 @@
+import { firstValueFrom, of, Subject } from 'rxjs';
+import { switchMap, takeUntil, tap } from 'rxjs/operators';
+import { fromFetch } from 'rxjs/fetch';
+
+import { HttpRequestHandler, HttpResponseHandler } from '../operators';
+import { blobSelector, jsonSelector } from '../selectors';
+
+import type { Observable, ObservableInput } from 'rxjs';
+import type { IHttpRequestHandler, IHttpResponseHandler } from '../operators';
+import type {
+    FetchRequest,
+    FetchRequestInit,
+    FetchResponse,
+    IHttpClient,
+    JsonRequest,
+    StreamResponse,
+} from '.';
+import { HttpResponseError } from '../../errors';
+
+export type HttpClientCreateOptions<
+    TRequest extends FetchRequest = FetchRequest,
+    TResponse = Response,
+> = {
+    requestHandler: IHttpRequestHandler<TRequest>;
+    responseHandler: IHttpResponseHandler<TResponse>;
+};
+
+/** Base http client for executing requests */
+export class HttpClient<
+    TRequest extends FetchRequest = FetchRequest,
+    TResponse extends FetchResponse = FetchResponse,
+> implements IHttpClient<TRequest, TResponse>
+{
+    readonly requestHandler: IHttpRequestHandler<TRequest>;
+
+    readonly responseHandler: IHttpResponseHandler<TResponse>;
+
+    /** stream of requests that are about to be executed  */
+    protected _request$ = new Subject<TRequest>();
+
+    /** stream of request responses */
+    protected _response$ = new Subject<TResponse>();
+
+    protected _abort$ = new Subject<void>();
+
+    public get request$(): Observable<TRequest> {
+        return this._request$.asObservable();
+    }
+
+    public get response$(): Observable<TResponse> {
+        return this._response$.asObservable();
+    }
+
+    constructor(
+        public uri: string,
+        options?: Partial<HttpClientCreateOptions<TRequest, TResponse>>,
+    ) {
+        this.requestHandler = options?.requestHandler ?? new HttpRequestHandler<TRequest>();
+        this.responseHandler = options?.responseHandler ?? new HttpResponseHandler<TResponse>();
+        this._init();
+    }
+
+    /** internal abstract method, for overriding instead of overriding constructor */
+    protected _init(): void {
+        // called by children for constructor setup
+    }
+
+    public fetch$<T = TResponse>(
+        path: string,
+        args?: FetchRequestInit<T, TRequest, TResponse>,
+    ): StreamResponse<T> {
+        return this._fetch$(path, args);
+    }
+
+    public fetch<T = TResponse>(
+        path: string,
+        args?: FetchRequestInit<T, TRequest, TResponse>,
+    ): Promise<T> {
+        return firstValueFrom(this.fetch$<T>(path, args));
+    }
+
+    /** @deprecated */
+    public fetchAsync<T = TResponse>(
+        path: string,
+        args?: FetchRequestInit<T, TRequest, TResponse>,
+    ): Promise<T> {
+        return this.fetch(path, args);
+    }
+
+    public json$<T = unknown>(
+        path: string,
+        args?: FetchRequestInit<T, JsonRequest<TRequest>, TResponse>,
+    ): StreamResponse<T> {
+        const body = typeof args?.body === 'object' ? JSON.stringify(args?.body) : args?.body;
+        const selector = args?.selector ?? jsonSelector;
+        const headers = new Headers(args?.headers);
+        headers.append('Accept', 'application/json');
+        headers.append('Content-Type', 'application/json');
+        return this.fetch$(path, {
+            ...args,
+            body,
+            selector,
+            headers,
+        } as FetchRequestInit<T, TRequest, TResponse>);
+    }
+
+    public json<T = unknown>(
+        path: string,
+        args?: FetchRequestInit<T, JsonRequest<TRequest>, TResponse>,
+    ): Promise<T> {
+        return firstValueFrom(this.json$<T>(path, args));
+    }
+
+    public blob$(
+        path: string,
+        args?: FetchRequestInit<Blob, TRequest, TResponse>,
+    ): StreamResponse<Blob> {
+        const selector = args?.selector ?? blobSelector;
+        return this.fetch$(path, {
+            ...args,
+            selector,
+        } as FetchRequestInit<Blob, TRequest, TResponse>);
+    }
+
+    public blob(path: string, args?: FetchRequestInit<Blob, TRequest, TResponse>): Promise<Blob> {
+        return firstValueFrom(this.blob$(path, args));
+    }
+
+    /** @deprecated */
+    public jsonAsync<T = unknown>(
+        path: string,
+        args?: FetchRequestInit<T, JsonRequest<TRequest>, TResponse>,
+    ): Promise<T> {
+        return this.json(path, args);
+    }
+
+    public execute<T = TResponse, TMethod extends 'fetch' | 'fetch$' | 'json' | 'json$' = 'fetch'>(
+        method: TMethod,
+        path: string,
+        init?: FetchRequestInit<T, TRequest, TResponse>,
+    ): ReturnType<IHttpClient[TMethod]> {
+        return this[method](path, init) as ReturnType<IHttpClient[TMethod]>;
+    }
+
+    public abort(): void {
+        this._abort$.next();
+    }
+
+    protected _fetch$<T = TResponse>(
+        path: string,
+        args?: FetchRequestInit<T, TRequest, TResponse>,
+    ): Observable<T> {
+        const { selector, ...options } = args || {};
+        const response$ = of({
+            ...options,
+            uri: this._resolveUrl(path),
+        } as TRequest).pipe(
+            /** prepare request, allow extensions to modify request  */
+            switchMap((x) => this._prepareRequest(x)),
+            /** push request to event buss */
+            tap((x) => this._request$.next(x)),
+            /** execute request */
+            switchMap(({ uri, path: _path, ...init }) => fromFetch(uri, init)),
+            /** prepare response, allow extensions to modify response  */
+            switchMap((x) => this._prepareResponse(x as unknown as TResponse)),
+            /** push response to event buss */
+            tap((x) => this._response$.next(x)),
+
+            /** execute selector */
+            switchMap((response) => {
+                if (selector) {
+                    try {
+                        return selector(response);
+                    } catch (err) {
+                        throw new HttpResponseError(
+                            'failed to execute response selector',
+                            response as Response,
+                            {
+                                cause: err,
+                            },
+                        );
+                    }
+                }
+                return of(response);
+            }),
+            /** cancel request on abort signal */
+            takeUntil(this._abort$),
+        );
+        return response$ as unknown as Observable<T>;
+    }
+
+    protected _prepareRequest(init: TRequest): ObservableInput<TRequest> {
+        return this.requestHandler.process(init);
+    }
+
+    protected _prepareResponse(response: TResponse): ObservableInput<TResponse> {
+        return this.responseHandler.process(response);
+    }
+
+    protected _resolveUrl(path: string): string {
+        const baseUrl = this.uri || window.location.origin;
+        return new URL(path, baseUrl).href;
+    }
+}

package/src/lib/client/index.ts

@@ -0,0 +1,4 @@
+export { HttpClient } from './client';
+export { HttpClientMsal } from './client-msal';
+
+export * from './types';

package/src/lib/client/types.ts

@@ -0,0 +1,168 @@
+import type { ObservableInput, Observable } from 'rxjs';
+import type { IHttpRequestHandler, IHttpResponseHandler } from '../operators/types';
+
+export type StreamResponse<T> = Observable<T>;
+
+export type FetchRequest = RequestInit & {
+    uri: string;
+    path: string;
+};
+
+export type JsonRequest<TRequest extends FetchRequest = FetchRequest> = Omit<TRequest, 'body'> & {
+    body?: object | string | null;
+};
+
+export type FetchResponse<T = unknown> = Response & {
+    json(): Promise<T>;
+};
+
+export type FetchRequestInit<
+    TReturn = unknown,
+    TRequest = FetchRequest,
+    TResponse = FetchResponse<TReturn>,
+> = Omit<TRequest, 'uri' | 'path'> & {
+    selector?: (response: TResponse) => ObservableInput<TReturn>;
+};
+
+export type ClientRequestInit<T extends IHttpClient, TReturn = unknown> = T extends IHttpClient<
+    infer TRequest,
+    infer TResponse
+>
+    ? FetchRequestInit<TReturn, TRequest, TResponse>
+    : never;
+
+export type ExecutionMethod = 'fetch' | 'fetch$' | 'json' | 'json$';
+
+export type ExecutionMethodParameters<
+    TMethod extends ExecutionMethod = 'fetch',
+    TClient extends IHttpClient = IHttpClient,
+> = Parameters<TClient[TMethod]>;
+
+export type ExecutionResponse<
+    TMethod extends ExecutionMethod = 'fetch',
+    TClient extends IHttpClient = IHttpClient,
+> = ReturnType<TClient[TMethod]>;
+
+/**
+ * @template TRequest request arguments @see {@link https://developer.mozilla.org/en-US/docs/Web/API/request|request}
+ * @template TResponse request arguments @see {@link https://developer.mozilla.org/en-US/docs/Web/API/response|response}
+ */
+export interface IHttpClient<TRequest extends FetchRequest = FetchRequest, TResponse = Response> {
+    uri: string;
+    /** pre-processor of requests */
+    readonly requestHandler: IHttpRequestHandler<TRequest>;
+    /** post-processor of requests */
+    readonly responseHandler: IHttpResponseHandler<TResponse>;
+
+    /** Observable stream of request */
+    request$: Observable<TRequest>;
+
+    /** Observable stream of responses */
+    response$: Observable<TResponse>;
+
+    /**
+     * Observable request.
+     * Simplifies execution of request and
+     * note: request will not be executed until subscribe!
+     *
+     * @see {@link https://rxjs.dev/api/fetch/fromFetch|RXJS}
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch|fetch}
+     * @example
+     * ```ts
+     * // Observer changes of a input field
+     * const client = modules.http.createClient('my-client');
+     * const input$ = fromEvent(document.getElementById('input'), 'input');
+     * input$.pipe(
+     *   // only call after no key input in .5s
+     *   debounceTime(500),
+     *   // extract value from event
+     *   map(x => x.currentTarget.value),
+     *   // only search when text longer than 2 characters
+     *   filter(x => x.length >=3),
+     *   // query api with input value
+     *   switchMap(x => client.fetch(`api/foo?q=${x}`).pipe(
+     *     // retry 2 times
+     *     retry(2)
+     *     // cancel request if new input
+     *     takeUntil(input$)
+     *   )),
+     *   // extract data from response
+     *   switchMap(x => x.json()),
+     *   // process error
+     *   catchError(x => of({error: e.message}))
+     * // write result to pre element
+     * ).subscribe(console.log);
+     * ```
+     */
+    fetch$<T = TResponse>(
+        path: string,
+        init?: FetchRequestInit<T, TRequest, TResponse>,
+    ): StreamResponse<T>;
+
+    /**
+     * Fetch a resource as an promise
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch|fetch}
+     * @example
+     * ```ts
+     * let controller: AbortController;
+     * const client = window.Fusion.createClient('my-client');
+     * const input = document.getElementById('input');
+     * input.addEventlistener('input', (e) => {
+     *  try{
+     *    // if a controller is defined, request might be ongoing
+     *    controller && controller.abort();
+     *    // create a new abort controller
+     *    controller = new AbortController();
+     *    // query api with
+     *    const response = await client.fetch({
+     *      path: `api/foo?q=${e.currentTarget.value}`,
+     *      signal: controller.signal,
+     *    });
+     *    const json = await response.json();
+     *    result.innerText = JSON.stringify(json, null, 2)
+     *  } catch(err){
+     *    result.innerText = 'an error occurred'
+     *  } finally{
+     *    delete controller;
+     *  }
+     * });
+     * ```
+     */
+    fetch<T = TResponse>(path: string, init?: FetchRequestInit<T, TRequest, TResponse>): Promise<T>;
+
+    fetchAsync<T = TResponse>(
+        path: string,
+        args?: FetchRequestInit<T, TRequest, TResponse>,
+    ): Promise<T>;
+
+    json$<T = unknown>(
+        path: string,
+        init?: FetchRequestInit<T, JsonRequest<TRequest>, TResponse>,
+    ): StreamResponse<T>;
+
+    json<T = unknown>(
+        path: string,
+        init?: FetchRequestInit<T, JsonRequest<TRequest>, TResponse>,
+    ): Promise<T>;
+
+    /** @deprecated */
+    jsonAsync<T = unknown>(
+        path: string,
+        args?: FetchRequestInit<T, JsonRequest<TRequest>, TResponse>,
+    ): Promise<T>;
+
+    blob(
+        path: string,
+        args?: FetchRequestInit<Blob, JsonRequest<TRequest>, TResponse>,
+    ): Promise<Blob>;
+
+    blob$(
+        path: string,
+        args?: FetchRequestInit<Blob, JsonRequest<TRequest>, TResponse>,
+    ): StreamResponse<Blob>;
+
+    /**
+     * Abort all ongoing request for current client
+     */
+    abort(): void;
+}

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './client';
+export * from './operators';
+export * from './selectors';

package/src/lib/operators/http-request-handler.ts

@@ -0,0 +1,21 @@
+import { ProcessOperators } from './process-operators';
+import { requestOperatorHeader } from './request-operator-header';
+
+import type { FetchRequest } from '../client';
+
+/**
+ * Extends @see {ProcessOperators} for pre-processing requests.
+ */
+export class HttpRequestHandler<T extends FetchRequest = FetchRequest> extends ProcessOperators<T> {
+    /**
+     * Set header that will apply on all requests done by consumer @see {HttpClient}
+     * @param key - name of header
+     * @param value  - header value
+     */
+    setHeader(key: string, value: string): HttpRequestHandler<T> {
+        const operator = requestOperatorHeader<T>(key, value);
+        return this.set('header-' + key, operator) as HttpRequestHandler<T>;
+    }
+}
+
+export default HttpRequestHandler;

package/src/lib/operators/http-response-handler.ts

@@ -0,0 +1,5 @@
+import { ProcessOperators } from './process-operators';
+
+export class HttpResponseHandler<T = Response> extends ProcessOperators<T> {}
+
+export default HttpResponseHandler;

package/src/lib/operators/index.ts

@@ -0,0 +1,5 @@
+export { HttpRequestHandler } from './http-request-handler';
+export { HttpResponseHandler } from './http-response-handler';
+export { ProcessOperators } from './process-operators';
+
+export * from './types';