@nordcraft/runtime 1.0.0

package/dist/api/createAPIv2.js

@@ -0,0 +1,686 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { createApiEvent, createApiRequest, isApiError, requestHash, } from '@nordcraft/core/dist/api/api';
+import { isEventStreamHeader, isImageHeader, isJsonHeader, isJsonStreamHeader, isTextHeader, } from '@nordcraft/core/dist/api/headers';
+import { applyFormula } from '@nordcraft/core/dist/formula/formula';
+import { omitPaths, sortObjectEntries, } from '@nordcraft/core/dist/utils/collections';
+import { PROXY_URL_HEADER, validateUrl } from '@nordcraft/core/dist/utils/url';
+import { handleAction } from '../events/handleAction';
+/**
+ * Set up an api v2 for a component.
+ */
+export function createAPI(apiRequest, ctx) {
+    // If `__toddle` isn't found it is in a web component context. We behave as if the page isn't loaded.
+    let timer = null;
+    let api = { ...apiRequest };
+    function constructRequest(api) {
+        // Get baseUrl and validate it. (It wont be in web component context)
+        let baseUrl = window.origin;
+        try {
+            new URL(baseUrl);
+        }
+        catch {
+            baseUrl = undefined;
+        }
+        return createApiRequest({
+            api,
+            formulaContext: getFormulaContext(api),
+            baseUrl,
+            defaultHeaders: undefined,
+        });
+    }
+    // Create the formula context for the api
+    function getFormulaContext(api) {
+        // Use the general formula context to evaluate the arguments of the api
+        const formulaContext = {
+            data: ctx.dataSignal.get(),
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+        };
+        // Make sure inputs are also available in the formula context
+        const evaluatedInputs = Object.entries(api.inputs).reduce((acc, [key, value]) => {
+            acc[key] = applyFormula(value.formula, formulaContext);
+            return acc;
+        }, {});
+        const data = {
+            ...formulaContext.data,
+            ApiInputs: {
+                ...evaluatedInputs,
+            },
+        };
+        return {
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            data,
+            toddle: ctx.toddle,
+            env: ctx.env,
+        };
+    }
+    function handleRedirectRules(api) {
+        for (const [ruleName, rule] of sortObjectEntries(api.redirectRules ?? {}, ([_, rule]) => rule.index)) {
+            const location = applyFormula(rule.formula, {
+                ...getFormulaContext(api),
+                data: {
+                    ...getFormulaContext(api).data,
+                    Apis: {
+                        [api.name]: ctx.dataSignal.get().Apis?.[api.name],
+                    },
+                },
+            });
+            if (typeof location === 'string') {
+                const url = validateUrl(location, window.location.href);
+                if (url) {
+                    if (ctx.env.runtime === 'preview') {
+                        // Attempt to notify the parent about the failed navigation attempt
+                        window.parent?.postMessage({ type: 'blockedNavigation', url: url.href }, '*');
+                        return { name: ruleName, index: rule.index, url };
+                    }
+                    else {
+                        window.location.replace(url.href);
+                    }
+                }
+            }
+        }
+    }
+    function triggerActions(eventName, api, data) {
+        switch (eventName) {
+            case 'message': {
+                const event = createApiEvent('message', data.body);
+                api.client?.onMessage?.actions?.forEach((action) => {
+                    handleAction(action, {
+                        ...getFormulaContext(api).data,
+                        ...ctx.dataSignal.get(),
+                        Event: event,
+                    }, ctx, event);
+                });
+                break;
+            }
+            case 'success': {
+                const event = createApiEvent('success', data.body);
+                api.client?.onCompleted?.actions?.forEach((action) => {
+                    handleAction(action, {
+                        ...getFormulaContext(api).data,
+                        ...ctx.dataSignal.get(),
+                        Event: event,
+                    }, ctx, event);
+                });
+                break;
+            }
+            case 'failed': {
+                const event = createApiEvent('failed', {
+                    error: data.body,
+                    status: data.status,
+                });
+                api.client?.onFailed?.actions?.forEach((action) => {
+                    handleAction(action, {
+                        ...getFormulaContext(api).data,
+                        ...ctx.dataSignal.get(),
+                        Event: event,
+                    }, ctx, event);
+                });
+                break;
+            }
+        }
+    }
+    function apiSuccess(api, data, performance) {
+        const latestRequestStart = ctx.dataSignal.get().Apis?.[api.name]?.response?.performance?.requestStart;
+        if (typeof latestRequestStart === 'number' &&
+            latestRequestStart > (performance.requestStart ?? 0)) {
+            return;
+        }
+        ctx.dataSignal.set({
+            ...ctx.dataSignal.get(),
+            Apis: {
+                ...ctx.dataSignal.get().Apis,
+                [api.name]: {
+                    isLoading: false,
+                    data: data.body,
+                    error: null,
+                    response: {
+                        status: data.status,
+                        headers: data.headers,
+                        performance,
+                    },
+                },
+            },
+        });
+        const appliedRedirectRule = handleRedirectRules(api);
+        if (appliedRedirectRule) {
+            ctx.dataSignal.set({
+                ...ctx.dataSignal.get(),
+                Apis: {
+                    ...ctx.dataSignal.get().Apis,
+                    [api.name]: {
+                        isLoading: false,
+                        data: data.body,
+                        error: null,
+                        response: {
+                            status: data.status,
+                            headers: data.headers,
+                            performance,
+                            ...(ctx.env.runtime === 'preview'
+                                ? { debug: { appliedRedirectRule } }
+                                : {}),
+                        },
+                    },
+                },
+            });
+        }
+    }
+    function apiError(api, data, performance) {
+        const latestRequestStart = ctx.dataSignal.get().Apis?.[api.name]?.response?.performance?.requestStart;
+        if (typeof latestRequestStart === 'number' &&
+            latestRequestStart > (performance.requestStart ?? 0)) {
+            return;
+        }
+        ctx.dataSignal.set({
+            ...ctx.dataSignal.get(),
+            Apis: {
+                ...ctx.dataSignal.get().Apis,
+                [api.name]: {
+                    isLoading: false,
+                    data: null,
+                    error: data.body,
+                    response: {
+                        status: data.status,
+                        headers: data.headers,
+                        performance,
+                    },
+                },
+            },
+        });
+        const appliedRedirectRule = handleRedirectRules(api);
+        if (appliedRedirectRule) {
+            ctx.dataSignal.set({
+                ...ctx.dataSignal.get(),
+                Apis: {
+                    ...ctx.dataSignal.get().Apis,
+                    [api.name]: {
+                        isLoading: false,
+                        data: null,
+                        error: data.body,
+                        response: {
+                            status: data.status,
+                            headers: data.headers,
+                            performance,
+                            ...(ctx.env.runtime === 'preview'
+                                ? { debug: { appliedRedirectRule } }
+                                : {}),
+                        },
+                    },
+                },
+            });
+        }
+    }
+    // Execute the request - potentially to the cloudflare Query proxy
+    async function execute(api, url, requestSettings) {
+        const run = async () => {
+            const performance = {
+                requestStart: Date.now(),
+                responseStart: null,
+                responseEnd: null,
+            };
+            ctx.dataSignal.set({
+                ...ctx.dataSignal.get(),
+                Apis: {
+                    ...ctx.dataSignal.get().Apis,
+                    [api.name]: {
+                        isLoading: true,
+                        data: ctx.dataSignal.get().Apis?.[api.name]?.data ?? null,
+                        error: null,
+                    },
+                },
+            });
+            let response;
+            try {
+                const proxy = api.server?.proxy
+                    ? (applyFormula(api.server.proxy.enabled.formula, getFormulaContext(api)) ?? false)
+                    : false;
+                if (proxy === false) {
+                    response = await fetch(url, requestSettings);
+                }
+                else {
+                    const proxyUrl = `/.toddle/omvej/components/${encodeURIComponent(ctx.component.name)}/apis/${encodeURIComponent(ctx.component.name)}:${encodeURIComponent(api.name)}`;
+                    const headers = new Headers(requestSettings.headers);
+                    headers.set(PROXY_URL_HEADER, decodeURIComponent(url.href.replace(/\+/g, ' ')));
+                    requestSettings.headers = headers;
+                    response = await fetch(proxyUrl, requestSettings);
+                }
+                performance.responseStart = Date.now();
+                await handleResponse(api, response, performance);
+                return;
+            }
+            catch (error) {
+                const body = error.cause
+                    ? { message: error.message, data: error.cause }
+                    : error.message;
+                apiError(api, { body }, { ...performance, responseEnd: Date.now() });
+                triggerActions('failed', api, { body });
+                return Promise.reject(error);
+            }
+        };
+        // Debounce the request if needed
+        if (api.client?.debounce?.formula) {
+            return new Promise((resolve, reject) => {
+                if (typeof timer === 'number') {
+                    clearTimeout(timer);
+                }
+                timer = setTimeout(() => {
+                    run().then(resolve, reject);
+                }, applyFormula(api.client?.debounce?.formula, getFormulaContext(api)));
+            });
+        }
+        return run();
+    }
+    function handleResponse(api, res, performance) {
+        let parserMode = api.client?.parserMode ?? 'auto';
+        if (parserMode === 'auto') {
+            const contentType = res.headers.get('content-type');
+            if (isEventStreamHeader(contentType)) {
+                parserMode = 'event-stream';
+            }
+            else if (isJsonHeader(contentType)) {
+                parserMode = 'json';
+            }
+            else if (isTextHeader(contentType)) {
+                parserMode = 'text';
+            }
+            else if (isJsonStreamHeader(contentType)) {
+                parserMode = 'json-stream';
+            }
+            else if (isImageHeader(contentType)) {
+                parserMode = 'blob';
+            }
+            else {
+                parserMode = 'text';
+            }
+        }
+        switch (parserMode) {
+            case 'text':
+                return textStreamResponse(api, res, performance);
+            case 'json':
+                return jsonResponse(api, res, performance);
+            case 'event-stream':
+                return eventStreamingResponse(api, res, performance);
+            case 'json-stream':
+                return jsonStreamResponse(api, res, performance);
+            case 'blob':
+                return blobResponse(api, res, performance);
+            default:
+                return textStreamResponse(api, res, performance);
+        }
+    }
+    function textStreamResponse(api, res, performance) {
+        return handleStreaming({
+            api,
+            res,
+            performance,
+            streamType: 'text',
+            useTextDecoder: true,
+            parseChunk: (chunk) => chunk,
+            parseChunksForData: (chunks) => chunks.join(''),
+        });
+    }
+    function jsonStreamResponse(api, res, performance) {
+        const parseChunk = (chunk) => {
+            let parsedData = chunk;
+            try {
+                parsedData = JSON.parse(chunk);
+            }
+            catch {
+                throw new Error('Error occurred while parsing the json chunk.', {
+                    cause: parsedData,
+                });
+            }
+            return parsedData;
+        };
+        return handleStreaming({
+            api,
+            res,
+            performance,
+            streamType: 'json',
+            useTextDecoder: true,
+            parseChunk,
+            parseChunksForData: (chunks) => [...chunks],
+            delimiters: ['\r\n', '\n'],
+        });
+    }
+    async function jsonResponse(api, res, performance) {
+        const body = await res.json();
+        const status = {
+            data: body,
+            isLoading: false,
+            error: null,
+            response: {
+                status: res.status,
+                headers: Object.fromEntries(res.headers.entries()),
+            },
+        };
+        return endResponse(api, status, performance);
+    }
+    async function blobResponse(api, res, performance) {
+        const blob = await res.blob();
+        const status = {
+            isLoading: false,
+            data: URL.createObjectURL(blob),
+            error: null,
+            response: {
+                status: res.status,
+                headers: Object.fromEntries(res.headers.entries()),
+            },
+        };
+        return endResponse(api, status, performance);
+    }
+    function eventStreamingResponse(api, res, performance) {
+        const parseChunk = (chunk) => {
+            const event = chunk.match(/event: (.*)/)?.[1] ?? 'message';
+            const data = chunk.match(/data: (.*)/)?.[1] ?? '';
+            const id = chunk.match(/id: (.*)/)?.[1];
+            const retry = chunk.match(/retry: (.*)/)?.[1];
+            let parsedData = data;
+            try {
+                parsedData = JSON.parse(data ?? '');
+                // eslint-disable-next-line no-empty
+            }
+            catch { }
+            const returnData = {
+                event,
+                data: parsedData,
+                ...(id ? { id } : {}),
+                ...(retry ? { retry } : {}),
+            };
+            return returnData;
+        };
+        return handleStreaming({
+            api,
+            res,
+            performance,
+            streamType: 'event',
+            useTextDecoder: true,
+            parseChunk,
+            parseChunksForData: (chunks) => [...chunks],
+            delimiters: ['\n\n', '\r\n\r\n'],
+        });
+    }
+    async function handleStreaming({ api, res, performance, streamType, useTextDecoder, parseChunk, parseChunksForData, delimiters, // There can be various delimiters for the same stream. SSE might use both \n\n and \r\n\r\n
+     }) {
+        const chunks = {
+            chunks: [],
+            currentChunk: '',
+            // Function to add a chunk to the chunks array and emits the data to the onMessage event
+            add(chunk) {
+                const parsedChunk = parseChunk(chunk);
+                this.chunks.push(parsedChunk);
+                // Only emit the data if there are any listeners
+                if (parsedChunk) {
+                    ctx.dataSignal.set({
+                        ...ctx.dataSignal.get(),
+                        Apis: {
+                            ...ctx.dataSignal.get().Apis,
+                            [api.name]: {
+                                isLoading: true,
+                                data: parseChunksForData(this.chunks),
+                                error: null,
+                                response: {
+                                    headers: Object.fromEntries(res.headers.entries()),
+                                },
+                            },
+                        },
+                    });
+                    if ((api.client?.onMessage?.actions ?? []).length > 0) {
+                        triggerActions('message', api, { body: parsedChunk });
+                    }
+                }
+            },
+            // Function to process a chunk and split it by the delimiter.
+            processChunk(chunk) {
+                const delimiter = delimiters?.find((d) => chunk.includes(d));
+                const concatenated = this.currentChunk + chunk;
+                const split = delimiter ? concatenated.split(delimiter) : [concatenated];
+                this.currentChunk = split.pop() ?? '';
+                split.forEach((c) => this.add(c));
+            },
+        };
+        const reader = useTextDecoder
+            ? res.body?.pipeThrough(new TextDecoderStream()).getReader()
+            : res.body?.getReader();
+        while (reader) {
+            const { done, value } = await reader.read();
+            if (done) {
+                break;
+            }
+            if (delimiters) {
+                chunks.processChunk(value);
+            }
+            else {
+                chunks.add(value);
+            }
+        }
+        // First make sure theres no remaining chunk
+        if (chunks.currentChunk) {
+            chunks.add(chunks.currentChunk);
+        }
+        const status = {
+            isLoading: false,
+            data: chunks.chunks,
+            error: null,
+            response: {
+                status: res.status,
+                headers: Object.fromEntries(res.headers.entries()),
+            },
+        };
+        try {
+            if (streamType === 'json') {
+                const parsed = JSON.parse(chunks.chunks.join(''));
+                status.data = parsed;
+            }
+            else if (streamType === 'text') {
+                status.data = chunks.chunks.join('');
+            }
+        }
+        catch {
+            throw new Error('Error occurred while parsing the json chunk.', {
+                cause: chunks.chunks.join(''),
+            });
+        }
+        return endResponse(api, status, performance);
+    }
+    function endResponse(api, apiStatus, performance) {
+        performance.responseEnd = Date.now();
+        const data = {
+            body: apiStatus.data,
+            status: apiStatus.response?.status,
+            headers: apiStatus.response?.headers ?? undefined,
+        };
+        const isError = isApiError({
+            apiName: api.name,
+            response: {
+                body: data.body,
+                ok: Boolean(!apiStatus.error &&
+                    apiStatus.response?.status &&
+                    apiStatus.response.status < 400),
+                status: data.status,
+                headers: data.headers,
+            },
+            formulaContext: getFormulaContext(api),
+            errorFormula: api.isError,
+            performance,
+        });
+        if (isError) {
+            if (!data.body && apiStatus.error) {
+                data.body = apiStatus.error;
+            }
+            apiError(api, data, performance);
+            triggerActions('failed', api, data);
+        }
+        else {
+            apiSuccess(api, data, performance);
+            triggerActions('success', api, data);
+        }
+    }
+    function getApiForComparison(api) {
+        return omitPaths(api, [
+            ['client', 'onCompleted'],
+            ['client', 'onFailed'],
+            ['client', 'onMessage'],
+            ['service'],
+            ['server', 'ssr'],
+        ]);
+    }
+    let payloadSignal;
+    // eslint-disable-next-line prefer-const
+    payloadSignal = ctx.dataSignal.map((_) => {
+        const payloadContext = getFormulaContext(api);
+        return {
+            request: constructRequest(api),
+            api: getApiForComparison(api),
+            autoFetch: api.autoFetch
+                ? applyFormula(api.autoFetch, payloadContext)
+                : false,
+            proxy: applyFormula(api.server?.proxy?.enabled.formula, payloadContext),
+        };
+    });
+    payloadSignal.subscribe(async (_) => {
+        if (api.autoFetch && applyFormula(api.autoFetch, getFormulaContext(api))) {
+            // Ensure we only use caching if the page is currently loading
+            if ((window?.__toddle?.isPageLoaded ?? false) === false) {
+                const { url, requestSettings } = constructRequest(api);
+                const cacheKey = requestHash(url, requestSettings);
+                const cacheMatch = ctx.toddle.pageState.Apis?.[cacheKey];
+                if (cacheMatch) {
+                    if (cacheMatch.error) {
+                        apiError(api, {
+                            body: cacheMatch.error,
+                            status: cacheMatch.response?.status,
+                            headers: cacheMatch.response?.headers ?? undefined,
+                        }, {
+                            requestStart: cacheMatch.response?.performance?.requestStart ?? null,
+                            responseStart: cacheMatch.response?.performance?.responseStart ?? null,
+                            responseEnd: cacheMatch.response?.performance?.responseEnd ?? null,
+                        });
+                    }
+                    else {
+                        apiSuccess(api, {
+                            body: cacheMatch.data,
+                            status: cacheMatch.response?.status,
+                            headers: cacheMatch.response?.headers ?? undefined,
+                        }, {
+                            requestStart: cacheMatch.response?.performance?.requestStart ?? null,
+                            responseStart: cacheMatch.response?.performance?.responseStart ?? null,
+                            responseEnd: cacheMatch.response?.performance?.responseEnd ?? null,
+                        });
+                    }
+                }
+                else {
+                    // Execute will set the initial status of the api in the dataSignal
+                    await execute(api, url, requestSettings);
+                }
+            }
+            else {
+                // Execute will set the initial status of the api in the dataSignal
+                const { url, requestSettings } = constructRequest(api);
+                await execute(api, url, requestSettings);
+            }
+        }
+        else {
+            ctx.dataSignal.update((data) => {
+                return {
+                    ...data,
+                    Apis: {
+                        ...(data.Apis ?? {}),
+                        [api.name]: {
+                            isLoading: false,
+                            data: null,
+                            error: null,
+                        },
+                    },
+                };
+            });
+        }
+    });
+    return {
+        fetch: ({ actionInputs, actionModels, }) => {
+            // Inputs might already be evaluated. If they are we add them as a value formula to be evaluated later.
+            const inputs = Object.entries(actionInputs ?? {}).reduce((acc, [inputName, input]) => {
+                if (input !== null && typeof input === 'object' && 'formula' in input) {
+                    acc[inputName] = input;
+                }
+                else {
+                    acc[inputName] = {
+                        formula: { type: 'value', value: input },
+                    };
+                }
+                return acc;
+            }, {});
+            const apiWithInputsAndActions = {
+                ...api,
+                inputs: { ...api.inputs, ...inputs },
+                client: {
+                    ...api.client,
+                    parserMode: api.client?.parserMode ?? 'auto',
+                    onCompleted: {
+                        trigger: api.client?.onCompleted?.trigger ?? 'success',
+                        actions: [
+                            ...(api.client?.onCompleted?.actions ?? []),
+                            ...(actionModels?.onCompleted ?? []),
+                        ],
+                    },
+                    onFailed: {
+                        trigger: api.client?.onFailed?.trigger ?? 'failed',
+                        actions: [
+                            ...(api.client?.onFailed?.actions ?? []),
+                            ...(actionModels?.onFailed ?? []),
+                        ],
+                    },
+                    onMessage: {
+                        trigger: api.client?.onMessage?.trigger ?? 'message',
+                        actions: [
+                            ...(api.client?.onMessage?.actions ?? []),
+                            ...(actionModels?.onMessage ?? []),
+                        ],
+                    },
+                },
+            };
+            const { url, requestSettings } = constructRequest(apiWithInputsAndActions);
+            return execute(apiWithInputsAndActions, url, requestSettings);
+        },
+        update: (newApi) => {
+            api = newApi;
+            const updateContext = getFormulaContext(api);
+            const autoFetch = api.autoFetch && applyFormula(api.autoFetch, updateContext);
+            if (autoFetch) {
+                payloadSignal?.set({
+                    request: constructRequest(newApi),
+                    api: getApiForComparison(newApi),
+                    autoFetch,
+                    proxy: applyFormula(newApi.server?.proxy?.enabled.formula, updateContext),
+                });
+            }
+        },
+        triggerActions: () => {
+            const apiData = ctx.dataSignal.get().Apis?.[api.name];
+            if (apiData === undefined ||
+                (apiData.data === null && apiData.error === null)) {
+                return;
+            }
+            if (apiData.error) {
+                triggerActions('failed', api, {
+                    body: apiData.error,
+                    status: apiData.response?.status,
+                });
+            }
+            else {
+                triggerActions('success', api, {
+                    body: apiData.data,
+                });
+            }
+        },
+        destroy: () => payloadSignal?.destroy(),
+    };
+}
+//# sourceMappingURL=createAPIv2.js.map