@nordcraft/runtime 1.0.0

package/dist/utils/nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodes.js","sourceRoot":"","sources":["../../src/utils/nodes.ts"],"names":[],"mappings":"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"}

package/dist/utils/omitStyle.d.ts

@@ -0,0 +1,2 @@
+import type { Component } from '@nordcraft/core/dist/component/component.types';
+export declare function omitSubnodeStyleForComponent<T extends Component | undefined>(component: T): T;

package/dist/utils/omitStyle.js

@@ -0,0 +1,13 @@
+export function omitSubnodeStyleForComponent(component) {
+    const clone = structuredClone(component);
+    Object.entries(clone?.nodes ?? {}).forEach(([nodeId, node]) => {
+        if ((node.type === 'element' || node.type === 'component') &&
+            nodeId !== 'root') {
+            delete node.style;
+            delete node.variants;
+            delete node.animations;
+        }
+    });
+    return clone;
+}
+//# sourceMappingURL=omitStyle.js.map

package/dist/utils/omitStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"omitStyle.js","sourceRoot":"","sources":["../../src/utils/omitStyle.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,4BAA4B,CAC1C,SAAY;IAEZ,MAAM,KAAK,GAAG,eAAe,CAAC,SAAS,CAAC,CAAA;IACxC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE;QAC5D,IACE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC;YACtD,MAAM,KAAK,MAAM,EACjB,CAAC;YACD,OAAO,IAAI,CAAC,KAAK,CAAA;YACjB,OAAO,IAAI,CAAC,QAAQ,CAAA;YACpB,OAAO,IAAI,CAAC,UAAU,CAAA;QACxB,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,KAAK,CAAA;AACd,CAAC"}

package/dist/utils/rectHasPoint.d.ts

@@ -0,0 +1,2 @@
+import type { Point } from '../editor/types';
+export declare function rectHasPoint(rect: DOMRect, { x, y }: Point): boolean;

package/dist/utils/rectHasPoint.js

@@ -0,0 +1,4 @@
+export function rectHasPoint(rect, { x, y }) {
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}
+//# sourceMappingURL=rectHasPoint.js.map

package/dist/utils/rectHasPoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rectHasPoint.js","sourceRoot":"","sources":["../../src/utils/rectHasPoint.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,YAAY,CAAC,IAAa,EAAE,EAAE,CAAC,EAAE,CAAC,EAAS;IACzD,OAAO,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,CAAA;AAC/E,CAAC"}

package/dist/utils/setAttribute.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Some attributes need special handling.
+ */
+export declare function setAttribute(elem: HTMLElement | SVGElement | MathMLElement, attr: string, value: any): void;

package/dist/utils/setAttribute.js

@@ -0,0 +1,57 @@
+import { isDefined, toBoolean } from '@nordcraft/core/dist/utils/util';
+/**
+ * Some attributes need special handling.
+ */
+export function setAttribute(elem, attr, value) {
+    switch (attr) {
+        case 'srcObject':
+        case 'src':
+            if (elem instanceof HTMLMediaElement) {
+                ;
+                elem[attr] = value;
+            }
+            else {
+                elem.setAttribute(attr, String(value));
+            }
+            break;
+        case 'value':
+        case 'type': {
+            let val = value;
+            if (elem instanceof HTMLProgressElement) {
+                // An HTMLProgressElement will break other elements in our editor if the value is not a (finite) number
+                // See docs here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value
+                // and original issue here https://discord.com/channels/972416966683926538/1317827591230722048
+                if (!isDefined(value) || !Number.isFinite(Number(value))) {
+                    val = 0;
+                }
+            }
+            ;
+            elem[attr] = toBoolean(val) ? String(val) : undefined;
+            break;
+        }
+        case 'muted':
+        case 'autoplay':
+            if (elem instanceof HTMLMediaElement) {
+                ;
+                elem[attr] = toBoolean(value);
+            }
+            else {
+                elem.setAttribute(attr, String(value));
+            }
+            break;
+        default:
+            if (toBoolean(value)) {
+                elem.setAttribute(attr, String(value));
+                if (
+                // autofocus often does not work in the editor
+                attr === 'autofocus' &&
+                    document.body.getAttribute('data-mode') !== 'design') {
+                    setTimeout(() => elem.focus(), 100);
+                }
+            }
+            else {
+                elem.removeAttribute(attr);
+            }
+    }
+}
+//# sourceMappingURL=setAttribute.js.map

package/dist/utils/setAttribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setAttribute.js","sourceRoot":"","sources":["../../src/utils/setAttribute.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAA;AAEtE;;GAEG;AACH,MAAM,UAAU,YAAY,CAC1B,IAA8C,EAC9C,IAAY,EACZ,KAAU;IAEV,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,WAAW,CAAC;QACjB,KAAK,KAAK;YACR,IAAI,IAAI,YAAY,gBAAgB,EAAE,CAAC;gBACrC,CAAC;gBAAC,IAAY,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;YAC9B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;YACxC,CAAC;YACD,MAAK;QACP,KAAK,OAAO,CAAC;QACb,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,IAAI,GAAG,GAAG,KAAK,CAAA;YACf,IAAI,IAAI,YAAY,mBAAmB,EAAE,CAAC;gBACxC,uGAAuG;gBACvG,yFAAyF;gBACzF,8FAA8F;gBAC9F,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;oBACzD,GAAG,GAAG,CAAC,CAAA;gBACT,CAAC;YACH,CAAC;YACD,CAAC;YAAC,IAAY,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAC/D,MAAK;QACP,CAAC;QACD,KAAK,OAAO,CAAC;QACb,KAAK,UAAU;YACb,IAAI,IAAI,YAAY,gBAAgB,EAAE,CAAC;gBACrC,CAAC;gBAAC,IAAY,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;YACzC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;YACxC,CAAC;YACD,MAAK;QACP;YACE,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;gBACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;gBACtC;gBACE,8CAA8C;gBAC9C,IAAI,KAAK,WAAW;oBACpB,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,QAAQ,EACpD,CAAC;oBACD,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAA;gBACrC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;IACL,CAAC;AACH,CAAC"}

package/dist/utils/tryStartViewTransition.d.ts

@@ -0,0 +1,5 @@
+export declare function tryStartViewTransition(updateCallback: () => void, options?: {
+    skipPrefersReducedMotionCheck?: boolean;
+}): {
+    finished: Promise<void>;
+};

package/dist/utils/tryStartViewTransition.js

@@ -0,0 +1,14 @@
+export function tryStartViewTransition(updateCallback, options) {
+    const startViewTransition = document
+        .startViewTransition;
+    if (!startViewTransition ||
+        (options?.skipPrefersReducedMotionCheck !== true &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches)) {
+        updateCallback();
+        return {
+            finished: Promise.resolve(),
+        };
+    }
+    return startViewTransition.call(document, updateCallback);
+}
+//# sourceMappingURL=tryStartViewTransition.js.map

package/dist/utils/tryStartViewTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tryStartViewTransition.js","sourceRoot":"","sources":["../../src/utils/tryStartViewTransition.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,sBAAsB,CACpC,cAA0B,EAC1B,OAEC;IAID,MAAM,mBAAmB,GAAI,QAAuC;SACjE,mBAAmB,CAAA;IAEtB,IACE,CAAC,mBAAmB;QACpB,CAAC,OAAO,EAAE,6BAA6B,KAAK,IAAI;YAC9C,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC,EAChE,CAAC;QACD,cAAc,EAAE,CAAA;QAChB,OAAO;YACL,QAAQ,EAAE,OAAO,CAAC,OAAO,EAAE;SAC5B,CAAA;IACH,CAAC;IAED,OAAO,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAA;AAC3D,CAAC"}

package/dist/utils/url.d.ts

@@ -0,0 +1,2 @@
+import type { Location } from '../types';
+export declare const getLocationUrl: ({ query, page, route, params, hash, }: Location) => string;

package/dist/utils/url.js

@@ -0,0 +1,36 @@
+import { isDefined } from '@nordcraft/core/dist/utils/util';
+import { compile } from 'path-to-regexp';
+export const getLocationUrl = ({ query, page, route, params, hash, }) => {
+    let path;
+    if (route) {
+        const pathSegments = [];
+        for (const segment of route.path) {
+            if (segment.type === 'static') {
+                pathSegments.push(segment.name);
+            }
+            else {
+                const segmentValue = params[segment.name];
+                if (isDefined(segmentValue)) {
+                    pathSegments.push(segmentValue);
+                }
+                else {
+                    // If a param is missing, we can't build the rest of the path
+                    break;
+                }
+            }
+        }
+        path = '/' + pathSegments.join('/');
+    }
+    else {
+        path = compile(page, { encode: encodeURIComponent })(params);
+    }
+    const hashString = hash === undefined || hash === '' ? '' : '#' + hash;
+    const queryString = Object.entries(query)
+        .filter(([_, q]) => q !== null)
+        .map(([key, value]) => {
+        return `${encodeURIComponent(route?.query[key]?.name ?? key)}=${encodeURIComponent(String(value))}`;
+    })
+        .join('&');
+    return `${path}${hashString}${queryString.length > 0 ? '?' + queryString : ''}`;
+};
+//# sourceMappingURL=url.js.map

package/dist/utils/url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.js","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAGxC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,GACK,EAAE,EAAE;IACb,IAAI,IAAY,CAAA;IAChB,IAAI,KAAK,EAAE,CAAC;QACV,MAAM,YAAY,GAAa,EAAE,CAAA;QACjC,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACjC,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC9B,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;YACjC,CAAC;iBAAM,CAAC;gBACN,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;gBACzC,IAAI,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;oBAC5B,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;gBACjC,CAAC;qBAAM,CAAC;oBACN,6DAA6D;oBAC7D,MAAK;gBACP,CAAC;YACH,CAAC;QACH,CAAC;QACD,IAAI,GAAG,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACrC,CAAC;SAAM,CAAC;QACN,IAAI,GAAG,OAAO,CAAC,IAAc,EAAE,EAAE,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;IACxE,CAAC;IACD,MAAM,UAAU,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAA;IACtE,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SACtC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC;SAC9B,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACpB,OAAO,GAAG,kBAAkB,CAC1B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,IAAI,GAAG,CAC/B,IAAI,kBAAkB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAA;IAC1C,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,OAAO,GAAG,IAAI,GAAG,UAAU,GACzB,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC,CAAC,EAC/C,EAAE,CAAA;AACJ,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,25 @@
+{
+"name": "@nordcraft/runtime",
+"license": "Apache-2.0",
+"type": "module",
+"homepage": "https://github.com/nordcraftengine/nordcraft",
+"dependencies": {
+"@nordcraft/core": "1.0.0",
+"@nordcraft/std-lib": "1.0.0",
+"fast-deep-equal": "3.1.3",
+"path-to-regexp": "6.3.0"
+},
+"devDependencies": {
+"@happy-dom/global-registrator": "17.4.4"
+},
+"scripts": {
+"build": "tsc && bun scripts/build.js",
+"npm-publish": "bun run build && bun publish --access public",
+"typecheck": "tsc --noEmit",
+"watch": "tsc -w"
+},
+"files": ["dist", "src"],
+"main": "dist/page.main.js",
+"types": "dist/page.main.d.ts",
+"version": "1.0.0"
+}

package/src/api/createAPI.ts

@@ -0,0 +1,375 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import type { LegacyComponentAPI } from '@nordcraft/core/dist/api/apiTypes'
+import type { ComponentData } from '@nordcraft/core/dist/component/component.types'
+import { applyFormula, isFormula } from '@nordcraft/core/dist/formula/formula'
+import { mapValues } from '@nordcraft/core/dist/utils/collections'
+import { parseJSONWithDate } from '@nordcraft/core/dist/utils/json'
+import { handleAction } from '../events/handleAction'
+import type { Signal } from '../signal/signal'
+import type { ComponentContext } from '../types'
+
+export type ApiRequest = {
+  url: string
+  method: 'GET' | 'POST' | 'DELETE' | 'PUT' | 'OPTION' | 'HEAD'
+  auth: { type: string } | undefined
+  headers: Record<string, string>
+  body: any
+}
+
+/**
+ * Set up an api for a component.
+ * API requests are either proxied through toddle's back-end
+ * or sent directly to the api endpoint (when api.proxy === false)
+ */
+export function createLegacyAPI(
+  api: LegacyComponentAPI,
+  ctx: ComponentContext,
+): { fetch: Function; destroy: Function } {
+  let timer: any = null
+
+  // Create the payload we send to toddle's back-end
+  // This includes url, headers, and content, sent in the body of a post request to /_query/<ComponentName>.<QueryName>
+  function constructPayload(
+    api: LegacyComponentAPI,
+    data: ComponentData,
+  ): ApiRequest {
+    const formulaContext = {
+      data,
+      component: ctx.component,
+      formulaCache: ctx.formulaCache,
+      root: ctx.root,
+      package: ctx.package,
+      toddle: ctx.toddle,
+      env: ctx.env,
+    }
+
+    // construct the url
+    const baseUrl = applyFormula(api.url, formulaContext) ?? ''
+    const urlPath =
+      api.path && api.path.length > 0
+        ? '/' +
+          api.path.map((p) => applyFormula(p.formula, formulaContext)).join('/')
+        : ''
+
+    // build querystring
+    const queryParams = Object.values(api.queryParams ?? {})
+    const queryString =
+      queryParams.length > 0
+        ? '?' +
+          queryParams
+            .map(
+              (param) =>
+                `${param.name}=${encodeURIComponent(
+                  applyFormula(param.formula, formulaContext),
+                )}`,
+            )
+            .join('&')
+        : ''
+    const headers = isFormula(api.headers) // this is supporting a few legacy cases where the whole header object was set as a formula. This is no longer possible
+      ? applyFormula(api.headers, {
+          data,
+          component: ctx.component,
+          formulaCache: ctx.formulaCache,
+          root: ctx.root,
+          package: ctx.package,
+          toddle: ctx.toddle,
+          env: ctx.env,
+        })
+      : mapValues(api.headers ?? {}, (value) =>
+          applyFormula(value, {
+            data,
+            component: ctx.component,
+            formulaCache: ctx.formulaCache,
+            root: ctx.root,
+            package: ctx.package,
+            toddle: ctx.toddle,
+            env: ctx.env,
+          }),
+        )
+    const contentType = String(
+      Object.entries(headers).find(
+        ([key]) => key.toLocaleLowerCase() === 'content-type',
+      )?.[1],
+    )
+    const method = api.method ?? 'GET'
+    const body =
+      api.body && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)
+        ? encodeBody(
+            applyFormula(api.body, {
+              data,
+              component: ctx.component,
+              formulaCache: ctx.formulaCache,
+              root: ctx.root,
+              package: ctx.package,
+              toddle: ctx.toddle,
+              env: ctx.env,
+            }),
+            contentType,
+          )
+        : undefined
+    return {
+      url: baseUrl + urlPath + queryString,
+      method,
+      auth: api.auth,
+      headers,
+      body,
+    }
+  }
+
+  // extract the response body
+  async function getBody(res: Response) {
+    const textBody = await res.text()
+    try {
+      return parseJSONWithDate(textBody)
+    } catch {
+      return textBody
+    }
+  }
+
+  function encodeBody(body: any, contentType?: string): FormData | string {
+    switch (contentType) {
+      case 'application/x-www-form-urlencoded': {
+        if (typeof body === 'object' && body !== null) {
+          return Object.entries(body)
+            .map(([key, value]) => {
+              if (Array.isArray(value)) {
+                return value
+                  .map(
+                    (v) =>
+                      `${encodeURIComponent(key)}=${encodeURIComponent(v)}`,
+                  )
+                  .join('&')
+              } else {
+                return `${encodeURIComponent(key)}=${encodeURIComponent(
+                  String(value),
+                )}`
+              }
+            })
+            .join('&')
+        }
+        return ''
+      }
+      case 'multipart/form-data': {
+        const formData = new FormData()
+        if (typeof body === 'object' && body !== null) {
+          Object.entries(body).forEach(([key, value]) => {
+            formData.set(key, value as string | Blob)
+          })
+        }
+        return formData
+      }
+      case 'text/plain':
+        return String(body)
+      default:
+        return JSON.stringify(body)
+    }
+  }
+
+  function apiSuccess(data: any) {
+    ctx.dataSignal.set({
+      ...ctx.dataSignal.get(),
+      Apis: {
+        ...ctx.dataSignal.get().Apis,
+        [api.name]: {
+          data,
+          error: null,
+          isLoading: false,
+        },
+      },
+    })
+    api.onCompleted?.actions?.forEach((action) => {
+      handleAction(action, ctx.dataSignal.get(), ctx)
+    })
+  }
+
+  function apiError(error: any) {
+    ctx.dataSignal.set({
+      ...ctx.dataSignal.get(),
+      Apis: {
+        ...ctx.dataSignal.get().Apis,
+        [api.name]: {
+          data: null,
+          isLoading: false,
+          error: error,
+        },
+      },
+    })
+    api.onFailed?.actions?.forEach((action) => {
+      handleAction(action, ctx.dataSignal.get(), ctx)
+    })
+  }
+
+  // Execute the request to the cloudflare Query proxy
+  async function execute(payload: ApiRequest) {
+    ctx.dataSignal.set({
+      ...ctx.dataSignal.get(),
+      Apis: {
+        ...ctx.dataSignal.get().Apis,
+        [api.name]: {
+          data: ctx.dataSignal.get().Apis?.[api.name]?.data ?? null,
+          isLoading: true,
+          error: null,
+        },
+      },
+    })
+    let response
+
+    try {
+      if (api.proxy === false) {
+        response = await fetch(payload.url, {
+          method: payload.method,
+          headers: payload.headers,
+          body: payload.body,
+        })
+      } else {
+        response = await fetch(
+          `/_query/${encodeURIComponent(
+            ctx.component.name,
+          )}.${encodeURIComponent(api.name)}`,
+          {
+            method: 'POST',
+            body: JSON.stringify(payload),
+            signal: ctx.abortSignal,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        )
+      }
+      const data = await getBody(response)
+      if (response.ok) {
+        apiSuccess(data)
+      } else {
+        throw data
+      }
+    } catch (error: any) {
+      apiError(error)
+      return Promise.reject(error)
+    }
+  }
+
+  // Handles throttle and debounce if set.
+  function trigger(body: ApiRequest) {
+    if (typeof api.debounce === 'number') {
+      return new Promise((resolve, reject) => {
+        if (typeof timer === 'number') {
+          clearTimeout(timer)
+        }
+        timer = setTimeout(() => {
+          execute(body).then(resolve, reject)
+        }, api.debounce as number)
+      })
+    } else if (typeof api.throttle === 'number') {
+      if (typeof timer === 'number') {
+        return new Promise(() => {})
+      }
+      timer = setTimeout(() => {
+        if (typeof timer === 'number') {
+          clearTimeout(timer)
+        }
+      }, api.throttle)
+      return execute(body)
+    } else {
+      return execute(body)
+    }
+  }
+
+  let payloadSignal: Signal<ApiRequest> | undefined
+  ctx.dataSignal.update((data) => {
+    return {
+      ...data,
+      Apis: {
+        ...(data.Apis ?? {}),
+        [api.name]: data.Apis?.[api.name] ?? {
+          data: null,
+          isLoading:
+            api.autoFetch &&
+            applyFormula(api.autoFetch, {
+              data: ctx.dataSignal.get(),
+              component: ctx.component,
+              formulaCache: ctx.formulaCache,
+              root: ctx.root,
+              package: ctx.package,
+              toddle: ctx.toddle,
+              env: ctx.env,
+            })
+              ? true
+              : false,
+          error: null,
+        },
+      },
+    }
+  })
+  if (api.autoFetch) {
+    payloadSignal = ctx.dataSignal.map((data) => constructPayload(api, data))
+    let firstRun = true
+    payloadSignal.subscribe((body) => {
+      if (
+        api.autoFetch &&
+        applyFormula(api.autoFetch, {
+          data: ctx.dataSignal.get(),
+          component: ctx.component,
+          formulaCache: ctx.formulaCache,
+          root: ctx.root,
+          package: ctx.package,
+          toddle: ctx.toddle,
+          env: ctx.env,
+        })
+      ) {
+        // We should only lookup cached data for pages since
+        // we don't fetch data for component APIs during SSR
+        if (firstRun && ctx.isRootComponent) {
+          firstRun = false
+          const cached = ctx.toddle?.pageState?.Apis?.[api.name]
+          if (cached && cached.data) {
+            if (typeof cached.data === 'string') {
+              // Mimic the behavior from getBody and parse
+              // the response to JSON if possible
+              apiSuccess(parseJSONWithDate(cached.data))
+            } else {
+              apiSuccess(cached.data)
+            }
+          } else {
+            trigger(body)
+          }
+        } else {
+          trigger(body)
+        }
+      }
+    })
+  }
+  return {
+    fetch: (request?: ApiRequest) => {
+      const apiPayload = constructPayload(api, ctx.dataSignal.get())
+      let body = apiPayload.body
+      // Use a Headers object since it's case insensitive
+      const headers = new Headers({
+        ...apiPayload.headers,
+        ...(request?.headers ?? {}),
+      })
+      if (request?.body) {
+        body = encodeBody(
+          request.body,
+          headers.get('Content-Type') ?? undefined,
+        )
+      }
+      if (body instanceof FormData) {
+        // Remove content type header if body is a FormData object
+        // Otherwise fetch won't do its magic when sending the request
+        headers.delete('Content-Type')
+      }
+      const payload: ApiRequest = {
+        url: request?.url ?? apiPayload.url,
+        method: request?.method ?? apiPayload.method,
+        auth: request?.auth ?? apiPayload.auth,
+        headers: [...headers.entries()].reduce<Record<string, string>>(
+          (acc, [key, value]) => ({ ...acc, [key]: value }),
+          {},
+        ),
+        body,
+      }
+      return trigger(payload)
+    },
+    destroy: () => payloadSignal?.destroy(),
+  }
+}