App Runtime

app.js is a tiny script injected into every generated page. It is the entire client-side runtime of Streak.js. It runs as an IIFE immediately on page load.

IIFE Structure

((window, config) => {
  const { lo, ve, ftrKey, size, wm, tat, dls, sc, wp } = config;
  // lo     = "__wlt__"        window load time key
  // ve     = "__vi"           visited cookie name
  // ftrKey = "ftr"            first-time render flag key
  // wm   = "w-m"              widget metadata element id
  // dls  = "__static__"       default loading strategy
  // sc   = "secondary-css.css"
  // wp   = "w"                widget path prefix
  // tat  = 1800               cookie TTL (seconds)
  // size = 1621               reference size for perf calculation
})(window, { ... })

Window Functions Injected by app.js

app.js injects the following utilities onto window. They are all accessible as gDom.* inside Script children functions.

Function	Signature	Description
`onVisible`	`(el, cb, opts?)`	`IntersectionObserver` wrapper — calls `cb` when `el` enters viewport
`debounce`	`(fn, delay)`	Returns a debounced version of `fn`
`geById`	`(id)`	`document.getElementById` bound shorthand
`stall`	`(ms)`	Returns a `Promise` that resolves after `ms` milliseconds
`setCookie`	`(name, val, days)`	Sets a browser cookie
`getCookie`	`(name)`	Gets a browser cookie value
`loadPackage`	`(name)`	Async JS/CSS loader via the asset worker
`loadAsset`	`(name, cb)`	Raw asset loader
`addWidgetToBody`	`(id, cb, type)`	Widget injector
`addResourceToBody`	`(url, opts, cb)`	Script/link injector
`loadDynamicComponent`	`(id, cb)`	Re-injects `Dynamic` content into its placeholder

Startup Sequence

1. Record load time

window["__wlt__"] is set to Date.now() at the earliest possible moment to track page load timing.

2. Inject utility functions

All helpers listed above are added to window.

3. Determine window.ftr (first-time render)

Checks for the __vi cookie
If no cookie: ftr = true, sets the __vi cookie for 30 minutes
Calculates a performance bucket from load time vs a reference size
window.ftr === true means this is the user's first page load in the current session

4. Read widget metadata

Reads the hidden <script id="w-m"> element embedded in the HTML, which contains a JSON object listing every widget's id and versioned asset path.

5. Load widgets sequentially

Calls addWidgetToBody for each widget in order, chaining callbacks so each widget loads after the previous one completes.

6. Load secondary CSS

If the w-m metadata contains a secondary-css entry, loads that CSS asset.

7. Load layout scripts

If the w-m metadata contains layout-scripts: true, loads the layout-level scripts.

window.ftr — First Time Render

const elapsed = now - window["__wlt__"];
const bucket  = [12,20,40,80,140,200,490,800]
                  .findIndex(t => t > elapsed);
const ftr     = !window.getCookie("__vi");

window["ftr"] = ftr;
if (ftr) window.setCookie("__vi", "1");

window.ftr is used by widgets to decide whether to delay animations. On first load (ftr === true), expensive visual work can be deferred:

if (gDom.ftr) {
  setTimeout(triggerScrollFadeLoad, 2000);
} else {
  triggerScrollFadeLoad();
}