Dynamic

Dynamic is a component from streak-forge/components that strips its children from the initial HTML payload at build time. The content is injected into the DOM on demand via gDom.loadDynamicComponent().

Import

import { Dynamic } from "streak-forge/components";

Example

import { Dynamic } from "streak-forge/components";

<Dynamic id="my-panel">
  <div>This content is deferred</div>
</Dynamic>

What It Does

At build time: the content inside Dynamic is stripped out and stored separately so it can be fetched later. The element is rendered as a placeholder <div> with three attributes:

• component-placeholder — marker attribute
• component-type="c" — the resource type for a Dynamic block
• component-id="my-panel" — the id prop passed to Dynamic

At runtime: calling gDom.loadDynamicComponent("my-panel", callback) fetches the stripped content and replaces the placeholder element's outerHTML with it, then calls callback once the swap is done. Any <script> tags that were inside the Dynamic block are appended to the document alongside it.

Pattern — Always Paired with a Script

Dynamic is always used together with a Script that triggers the injection. The script decides when to call loadDynamicComponent.

<Dynamic id="my-panel">
  <ExpensiveComponent />
</Dynamic>

<Script id="my-panel-loader">
  {(gDom: any) => {
    document.getElementById("trigger-btn")
      .addEventListener("click", () => {
        gDom.loadDynamicComponent("my-panel", () => {
          console.info("panel injected into DOM");
        });
      });
  }}
</Script>

Attributes on the Placeholder Element

Use Cases

• Navigation submenus that open on interaction
• Modals whose content should not be in the initial payload
• Below-the-fold sections loaded after user scroll
• Any content that should not be part of the initial HTML for performance reasons

Dynamic vs lazy

Dynamic and loadingStrategy: "lazy" are different mechanisms: