Script

Script is a component from streak/components that serializes a function body to a string at build time and emits it as an inline <script> tag that executes as an IIFE in the browser.

Import

import { Script } from "streak/components";

Example

import { Script } from "streak/components";

<Script id="my-script" options={{ color: "#818cf8", delay: 800 }}>
  {(gDom: any, options: any) => {
    // This function body is serialized to a string at build time.
    // It executes in the browser as an IIFE.
    // gDom === window (plus Streak helpers)
    // options === the plain object passed to the options prop
    document.getElementById("el").style.color = options.color;
  }}
</Script>;

How It Works Internally

The Streak Script component implementation:

const Script = (t) => {
  let { children: e, options: o, ...r } = t;
  return x("script", {
    ...r,
    children: `((${e.toString()})(window${o ? `,${JSON.stringify(o)}` : ""}));`,
  });
};

The children function is converted to a string with .toString() and wrapped in an IIFE:

(function (gDom, options) {
  document.getElementById("el").style.color = options.color;
})(window, { color: "#818cf8", delay: 800 });

Props

gDom

Inside the children function, gDom is window extended with all helpers injected by app.js — loadPackage, loadDynamicComponent, onVisible, debounce, ftr, etc. The full interface is documented in the Runtime section under the gDom reference page.

Critical Rules

No closures. The function body is serialized with .toString(). Any variable from the outer scope at build time is not available at runtime.

// WRONG — outerVar is not available in the browser
const outerVar = "hello";
<Script id="s">
  {(gDom: any) => {
    console.log(outerVar); // undefined at runtime
  }}
</Script>

// CORRECT — pass values through options
<Script id="s" options={{ message: "hello" }}>
  {(gDom: any, options: any) => {
    console.log(options.message); // "hello"
  }}
</Script>

No imports. The function body is a plain string. ES module imports inside it will not work. Load third-party packages using gDom.loadPackage() instead.

id is required and must be unique on the page.

options must be JSON-serializable — it is passed through JSON.stringify.