Core Runtime Functions

Beta — This page is a work in progress. Content may be incomplete or change.

Streak's client runtime registers a set of helper functions on window during page startup. Inside a Script block, the first argument (gDom) is window — so every function listed here is also available as gDom.functionName.

loadPackage

window.loadPackage(name: string): Promise<void>

Loads a JS or CSS file from your project's public/assets/ directory. Repeat calls for the same name reuse the cached promise — the file is only fetched once per page session.

await gDom.loadPackage("js/motion.js");
// window.Motion is now available

Files must be committed to public/assets/ — they are not generated by any build step. See Best Practices for details.

loadDynamicComponent

window.loadDynamicComponent(id: string, callback?: () => void): void

Fetches and injects a <Dynamic id="..."> block into the page. Use this to load a component on demand — for example, on user interaction rather than at page startup.

document.getElementById("open-btn")?.addEventListener("click", () => {
  gDom.loadDynamicComponent("share-panel", () => {
    // share panel is now in the DOM
    document.getElementById("share-panel-root")?.classList.add("open");
  });
});

onVisible

window.onVisible(
  target: Element,
  callback: (isIntersecting: boolean, el: Element, metadata: any) => void,
  options: { onlyOnce?: boolean },
  metadata: any
): void

Wraps IntersectionObserver — fires callback whenever target enters or leaves the viewport. Pass onlyOnce: true to disconnect after the first intersection.

const img = document.getElementById("hero-img");
gDom.onVisible(img, (visible) => {
  if (visible) img.src = img.dataset.src;
}, { onlyOnce: true }, null);

debounce

window.debounce<T extends (...args: any[]) => void>(fn: T, delay: number): T

Returns a version of fn that only executes once delay milliseconds have elapsed since the last call. Useful for scroll, resize, and input handlers.

const onScroll = gDom.debounce(() => {
  const el = document.getElementById("header");
  el?.classList.toggle("scrolled", window.scrollY > 80);
}, 50);

window.addEventListener("scroll", onScroll, { passive: true });

stall

window.stall(ms: number): Promise<void>

Returns a Promise that resolves after ms milliseconds. Use inside async patterns where you need a plain delay.

await gDom.stall(300);
el?.classList.remove("animating");

setCookie / getCookie

window.setCookie(name: string, value: string, days?: number): void
window.getCookie(name: string): string | null

Thin wrappers around document.cookie. setCookie writes a cookie with an optional expiry in days (omit for a session cookie). getCookie returns the value or null if not set.

if (!gDom.getCookie("banner-dismissed")) {
  document.getElementById("banner")?.classList.remove("hidden");
}

document.getElementById("dismiss-btn")?.addEventListener("click", () => {
  gDom.setCookie("banner-dismissed", "1", 30);
  document.getElementById("banner")?.classList.add("hidden");
});

geById

window.geById(id: string): HTMLElement | null

Shorthand for document.getElementById. Available on window after app.js initializes.

const el = gDom.geById("my-element");