Esc

Asset Worker

The asset worker pipeline is the mechanism Streak uses to load third-party JS and CSS files at runtime. It consists of three parts: app.js, asset-worker-handler.js (main thread), and asset-worker.js (Web Worker).


Full Pipeline

gDom.loadPackage("js/motion.js")
        │
        ▼
app.js — window.loadPackage(path)
  → injects asset-worker-handler.js via addResourceToBody
  → calls loadAsset("js/motion.js", callback)
        │
        ▼
asset-worker-handler.js — window.loadAsset(name, cb)
  → checks in-memory cache (Map) — if cached, re-injects immediately
  → if not cached, sends postMessage to asset-worker.js Web Worker:
      { type: "LOAD_ASSET", assetId: "js/motion.js", id: "uniqueId" }
        │
        ▼
asset-worker.js (runs on separate thread)
  → strips leading slashes from path
  → fetch("/assets/js/motion.js")
  → reads response.text() + Content-Type header
  → posts back: { type: "ASSET_LOADED", data: { content, type } }
        │
        ▼
asset-worker-handler.js (main thread, message handler)
  → if Content-Type is "application/javascript" → creates <script> in <head>
  → if Content-Type is "text/css"               → creates <style> in <head>
  → stores result in cache Map for future calls
  → calls all queued callbacks
        │
        ▼
Promise resolves
  const { animate, inView, scroll, stagger, spring } = gDom.Motion

File Location Rule

loadPackage("js/motion.js") fetches /assets/js/motion.js. The worker always prepends /assets/ to the path. The file must therefore be at:

public/assets/js/motion.js

Caching

asset-worker-handler.js caches loaded assets in a Map keyed by asset path. Calling loadPackage for the same file a second time re-injects it immediately without hitting the network or the worker.


Content-Type Handling

Content-Type returned by serverInjected as
application/javascript<script> tag in <head>
text/css<style> tag in <head>

Why a Web Worker

The asset fetch runs on a separate thread so that network I/O does not block the main thread during page startup. Once the content is fetched, the worker posts the result back to the main thread, which injects it into the document.