PageScript

Include a page-specific browser entry point with SSG path resolution, bundling and native script attributes.

PageScript

View source · API reference

Enhance existing content

This plain DOM script calculates a reading-time estimate for the paragraph. Use RegorApp when the feature is a component app.

PureStack brings content, components and theme styles together. A small browser entry point can enhance existing HTML when a full component app is unnecessary.

Calculating reading time…
<section aria-label="Reading-time example">
  <p id="reading-time-content">
    PureStack brings content, components and theme styles together. A small browser
    entry point can enhance existing HTML when a full component app is unnecessary.
  </p>
  <output id="reading-time-result" aria-live="polite">Calculating reading time…</output>
</section>
<PageScript src="./reading-time.ts" />
const output = document.querySelector<HTMLOutputElement>('#reading-time-result')
const text = document.querySelector('#reading-time-content')?.textContent ?? ''
const words = text.trim().split(/\s+/).filter(Boolean).length
if (output)
  output.textContent = `${words} words · about ${Math.max(1, Math.ceil(words / 200))} minute to read`

Behavior and accessibility

The default script type is module and the default teleport destination is body. Local entries are resolved from the MDX source and bundled; external URLs remain external script URLs. Keep IDs and event bindings scoped when a page has several independent enhancements.

API reference

PageScript contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

teleport

string
Default
body

DOM selector receiving the script.

src

string
Default
required

Browser entry point. A relative path resolves from the current MDX page. SSG records and bundles local scripts.

sourceRelPath

string
Default
detected from the current page

Optional source-resolution override. Omit it for ordinary colocated MDX and TypeScript files.

type

string
Default
module

Native script type. Module scripts have browser module loading semantics.

async

unknown
Default
not set

Native async attribute. Use only when the entry point is independent of execution order.

defer

unknown
Default
not set

Native defer attribute. Modules already defer by default.

integrity

string
Default
not set

Subresource integrity metadata for a resource whose bytes you control.

nonce

string
Default
not set

Content Security Policy nonce forwarded to the script.

crossOrigin

string
Default
not set

Native crossorigin request setting.

referrerPolicy

string
Default
not set

Native script referrerpolicy value.

noModule

unknown
Default
not set

Native nomodule attribute for scripts intended for non-module browsers.

Composition

No slots. This is an SSG component. For a Regor component application, use RegorApp instead of manually pairing a mount element with PageScript.