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 server | Injected 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.