{
  "id": "@typed/template#render",
  "canonicalId": "@typed/template#render",
  "symbol": {
    "id": "@typed/template#render",
    "packageName": "@typed/template",
    "moduleName": ".",
    "exportName": "render",
    "kind": "constant",
    "signatures": [
      "export declare const render: {\n    (where: HTMLElement): <const T extends Renderable.Any>(renderable: T) => Fx.Fx<ToRenderedRenderable<T>, Renderable.Error<T>, Renderable.Services<T>>;\n    <const T extends Renderable.Any>(renderable: T, where: HTMLElement): Fx.Fx<ToRenderedRenderable<T>, Renderable.Error<T>, Renderable.Services<T>>;\n};"
    ],
    "summary": "Mounts any `Renderable` to a specific DOM element.\n\nThis function lifts primitives, arrays, Effects, Streams, and Fx values into a\nrender stream and keeps the target DOM element updated. It handles:\n- Mounting the initial content.\n- Updating the content as new events are emitted.\n- Hydrating the content if hydration context is provided.",
    "sections": {
      "Why": "`render` makes the root ownership boundary explicit. It connects any\n`Renderable` to one concrete element while preserving the Renderable's typed\nfailures and Effect service requirements. The source can be a primitive,\ntemplate, Effect, Stream, Fx, or existing RenderEvent.",
      "Ownership and lifetime": "Calling `render` returns an Fx and starts no work. The Scope that runs that Fx\nowns dynamic subscriptions and cleanup. The renderer tracks only the rendered\nvalue associated with `where`; it does not claim the document, overwrite\nunrelated class names, or remove nodes outside its dynamic ownership.",
      "DOM updates and hydration": "Scalar template parts retain direct targets and update without traversing a\nvirtual tree. Structural output reconciles only its bounded range. Existing\nserver-rendered nodes can be hydrated through `HydrateContext` instead of\nreplaced, preserving their identity and native browser state."
    },
    "examples": [
      {
        "language": "ts",
        "code": "import { Effect, Layer } from \"effect\"\nimport { html } from \"@typed/template\"\nimport { DomRenderTemplate, render } from \"@typed/template/Render\"\nimport { Fx } from \"@typed/fx\"\nimport { RefSubject } from \"@typed/fx/RefSubject\"\n\nconst program = Effect.gen(function* () {\n  const count = yield* RefSubject.make(0)\n\n  const template = html`<div>\n    <p>Count: ${count}</p>\n    <button onclick=${RefSubject.increment(count)}>Increment</button>\n  </div>`\n\n  // Render to document.body\n  return yield* render(template, document.body).pipe(\n    Fx.drainLayer,\n    Layer.provide(DomRenderTemplate),\n    Layer.launch\n  )\n})\n\n// Can also use pipe syntax\nconst program2 = Effect.gen(function* () {\n  const template = html`<div>Hello</div>`\n\n  yield* template.pipe(\n    render(document.body),\n    Fx.drainLayer,\n    Layer.provide(DomRenderTemplate),\n    Layer.launch\n  )\n})"
      }
    ],
    "relations": [],
    "source": {
      "file": "packages/template/src/Render.ts",
      "line": 466
    },
    "since": "1.0.0",
    "category": "DOM mounting"
  },
  "exposure": {
    "recordKind": "declaration",
    "id": "@typed/template#render",
    "packageName": "@typed/template",
    "packageVersion": "1.0.0-beta.13",
    "moduleName": ".",
    "consumerSpecifier": "@typed/template",
    "exportName": "render",
    "qualifiedName": "render",
    "declarationKey": "declaration:4b8a746063d5d80f4302897c",
    "family": "variable",
    "signatures": [
      "export declare const render: {\n    (where: HTMLElement): <const T extends Renderable.Any>(renderable: T) => Fx.Fx<ToRenderedRenderable<T>, Renderable.Error<T>, Renderable.Services<T>>;\n    <const T extends Renderable.Any>(renderable: T, where: HTMLElement): Fx.Fx<ToRenderedRenderable<T>, Renderable.Error<T>, Renderable.Services<T>>;\n};"
    ],
    "sourceSpans": [
      {
        "file": "packages/template/src/Render.ts",
        "start": {
          "line": 466,
          "column": 14
        },
        "end": {
          "line": 489,
          "column": 3
        }
      },
      {
        "file": "packages/template/src/Render.ts",
        "start": {
          "line": 467,
          "column": 3
        },
        "end": {
          "line": 471,
          "column": 84
        }
      },
      {
        "file": "packages/template/src/Render.ts",
        "start": {
          "line": 472,
          "column": 3
        },
        "end": {
          "line": 475,
          "column": 82
        }
      }
    ],
    "aliases": [
      "@typed/template/Render#render"
    ],
    "isAlias": false,
    "static": false
  },
  "declaration": {
    "declarationKey": "declaration:4b8a746063d5d80f4302897c",
    "name": "render",
    "family": "variable",
    "facets": [
      {
        "family": "variable",
        "syntaxKind": "VariableDeclaration",
        "signatures": [
          "export declare const render: {\n    (where: HTMLElement): <const T extends Renderable.Any>(renderable: T) => Fx.Fx<ToRenderedRenderable<T>, Renderable.Error<T>, Renderable.Services<T>>;\n    <const T extends Renderable.Any>(renderable: T, where: HTMLElement): Fx.Fx<ToRenderedRenderable<T>, Renderable.Error<T>, Renderable.Services<T>>;\n};"
        ],
        "typeParameters": [],
        "sourceSpans": [
          {
            "file": "packages/template/src/Render.ts",
            "start": {
              "line": 466,
              "column": 14
            },
            "end": {
              "line": 489,
              "column": 3
            }
          }
        ],
        "static": false,
        "readonly": false,
        "optional": false
      },
      {
        "family": "call-signature",
        "syntaxKind": "CallSignature",
        "signatures": [
          "(where: HTMLElement): <const T extends Renderable.Any>(renderable: T) => Fx.Fx<ToRenderedRenderable<T>, Renderable.Error<T>, Renderable.Services<T>>;",
          "<const T extends Renderable.Any>(renderable: T, where: HTMLElement): Fx.Fx<ToRenderedRenderable<T>, Renderable.Error<T>, Renderable.Services<T>>;"
        ],
        "typeParameters": [
          "const T extends Renderable.Any"
        ],
        "sourceSpans": [
          {
            "file": "packages/template/src/Render.ts",
            "start": {
              "line": 467,
              "column": 3
            },
            "end": {
              "line": 471,
              "column": 84
            }
          },
          {
            "file": "packages/template/src/Render.ts",
            "start": {
              "line": 472,
              "column": 3
            },
            "end": {
              "line": 475,
              "column": 82
            }
          }
        ],
        "static": false,
        "readonly": false,
        "optional": false
      }
    ],
    "signatures": [
      "export declare const render: {\n    (where: HTMLElement): <const T extends Renderable.Any>(renderable: T) => Fx.Fx<ToRenderedRenderable<T>, Renderable.Error<T>, Renderable.Services<T>>;\n    <const T extends Renderable.Any>(renderable: T, where: HTMLElement): Fx.Fx<ToRenderedRenderable<T>, Renderable.Error<T>, Renderable.Services<T>>;\n};"
    ],
    "typeParameters": [
      "const T extends Renderable.Any"
    ],
    "summary": "Mounts any `Renderable` to a specific DOM element.\n\nThis function lifts primitives, arrays, Effects, Streams, and Fx values into a\nrender stream and keeps the target DOM element updated. It handles:\n- Mounting the initial content.\n- Updating the content as new events are emitted.\n- Hydrating the content if hydration context is provided.",
    "sections": {
      "Why": "`render` makes the root ownership boundary explicit. It connects any\n`Renderable` to one concrete element while preserving the Renderable's typed\nfailures and Effect service requirements. The source can be a primitive,\ntemplate, Effect, Stream, Fx, or existing RenderEvent.",
      "Ownership and lifetime": "Calling `render` returns an Fx and starts no work. The Scope that runs that Fx\nowns dynamic subscriptions and cleanup. The renderer tracks only the rendered\nvalue associated with `where`; it does not claim the document, overwrite\nunrelated class names, or remove nodes outside its dynamic ownership.",
      "DOM updates and hydration": "Scalar template parts retain direct targets and update without traversing a\nvirtual tree. Structural output reconciles only its bounded range. Existing\nserver-rendered nodes can be hydrated through `HydrateContext` instead of\nreplaced, preserving their identity and native browser state."
    },
    "examples": [
      {
        "language": "ts",
        "code": "import { Effect, Layer } from \"effect\"\nimport { html } from \"@typed/template\"\nimport { DomRenderTemplate, render } from \"@typed/template/Render\"\nimport { Fx } from \"@typed/fx\"\nimport { RefSubject } from \"@typed/fx/RefSubject\"\n\nconst program = Effect.gen(function* () {\n  const count = yield* RefSubject.make(0)\n\n  const template = html`<div>\n    <p>Count: ${count}</p>\n    <button onclick=${RefSubject.increment(count)}>Increment</button>\n  </div>`\n\n  // Render to document.body\n  return yield* render(template, document.body).pipe(\n    Fx.drainLayer,\n    Layer.provide(DomRenderTemplate),\n    Layer.launch\n  )\n})\n\n// Can also use pipe syntax\nconst program2 = Effect.gen(function* () {\n  const template = html`<div>Hello</div>`\n\n  yield* template.pipe(\n    render(document.body),\n    Fx.drainLayer,\n    Layer.provide(DomRenderTemplate),\n    Layer.launch\n  )\n})"
      }
    ],
    "sourceSpans": [
      {
        "file": "packages/template/src/Render.ts",
        "start": {
          "line": 466,
          "column": 14
        },
        "end": {
          "line": 489,
          "column": 3
        }
      },
      {
        "file": "packages/template/src/Render.ts",
        "start": {
          "line": 467,
          "column": 3
        },
        "end": {
          "line": 471,
          "column": 84
        }
      },
      {
        "file": "packages/template/src/Render.ts",
        "start": {
          "line": 472,
          "column": 3
        },
        "end": {
          "line": 475,
          "column": 82
        }
      }
    ],
    "since": "1.0.0",
    "category": "DOM mounting"
  }
}