@statorjs/stator 1.0.0

package/src/compiler/regions.ts

@@ -0,0 +1,79 @@
+import ts from 'typescript'
+import { splitStator } from './split.ts'
+
+/**
+ * Lightweight analysis of a `.stator` file's *public composition surface* — the
+ * named `<children name="x"/>` regions it declares — without a full compile.
+ * Used for cross-file named-child validation: when compiling a caller, we
+ * resolve each `<Component>` to its file and check every `child="x"` against the
+ * callee's declared regions.
+ *
+ * Cheap and side-effect-free: parse the template body, collect `<children
+ * name=…>` literals. (`default` is always implicitly available.)
+ */
+export function declaredRegions(source: string): Set<string> {
+  const { template } = splitStator(source)
+  const sf = ts.createSourceFile(
+    'regions.tsx',
+    `const __t = (<>${template.replace(/^\s*<!doctype[^>]*>/i, '')}</>);`,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX,
+  )
+  const regions = new Set<string>()
+  const visit = (node: ts.Node): void => {
+    const tagName = ts.isJsxElement(node)
+      ? node.openingElement.tagName.getText(sf)
+      : ts.isJsxSelfClosingElement(node)
+        ? node.tagName.getText(sf)
+        : undefined
+    if (tagName === 'children') {
+      const attrs = ts.isJsxElement(node)
+        ? node.openingElement.attributes
+        : (node as ts.JsxSelfClosingElement).attributes
+      for (const attr of attrs.properties) {
+        if (
+          ts.isJsxAttribute(attr) &&
+          !ts.isJsxNamespacedName(attr.name) &&
+          attr.name.getText(sf) === 'name' &&
+          attr.initializer &&
+          ts.isStringLiteral(attr.initializer)
+        ) {
+          regions.add(attr.initializer.text)
+        }
+      }
+    }
+    ts.forEachChild(node, visit)
+  }
+  visit(sf)
+  return regions
+}
+
+/**
+ * Map a component identifier used in a file to the `.stator` file it's imported
+ * from, by reading the file's frontmatter import declarations. Returns the
+ * resolved import specifier (e.g. `'./customer-layout.stator'`) or null if the
+ * identifier isn't a default import of a `.stator` module.
+ */
+export function componentImportSpecifier(
+  frontmatter: string,
+  componentName: string,
+): string | null {
+  const sf = ts.createSourceFile(
+    'fm.ts',
+    frontmatter,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TS,
+  )
+  for (const stmt of sf.statements) {
+    if (!ts.isImportDeclaration(stmt)) continue
+    const clause = stmt.importClause
+    if (!clause || clause.isTypeOnly) continue
+    if (clause.name && clause.name.text === componentName) {
+      const spec = stmt.moduleSpecifier
+      if (ts.isStringLiteral(spec) && spec.text.endsWith('.stator')) return spec.text
+    }
+  }
+  return null
+}

package/src/compiler/split.ts

@@ -0,0 +1,168 @@
+/**
+ * Stage 1 of the `.stator` compiler: split a source file into its regions.
+ *
+ * A `.stator` file has up to four regions:
+ *   - `---` frontmatter fence (server: type-only machine imports, props)
+ *   - the JSX-flavored template body (server-rendered)
+ *   - one or more `<style>` blocks (scoped styles)
+ *   - one or more bare `<script>` blocks (client code; processed in 3b)
+ *
+ * Region detection is intentionally string-level here — the JSX *inside* the
+ * template is handed to the TypeScript parser in a later stage. Splitting is the
+ * only job of this module.
+ *
+ * Script disambiguation: an **inline** `<script>` is the component's client
+ * code — it's pulled out as a region and (in a later stage) compiled to a
+ * `StatorElement`. Two explicit forms opt out and stay in the template as
+ * literal document markup, emitted verbatim:
+ *   - `<script src="...">`  — an external reference is never an inline component.
+ *   - `<script is:inline>`  — opt-out directive for a verbatim inline script.
+ * Note the rule keys off *presence* of `src` / `is:inline`, not "has any
+ * attribute": `<script type="module">` or `<script lang="ts">` are still
+ * compiled as components, so an incidental attribute can't silently demote a
+ * component to dead markup. (`<style>` still uses the older bare-vs-attributed
+ * rule; aligning it on `is:inline` is a follow-up.)
+ */
+
+export interface ParsedStator {
+  /** TS/JS between the `---` fences. Empty string when there's no fence. */
+  frontmatter: string
+  /** The template body with `<style>` and bare `<script>` regions removed. */
+  template: string
+  /** Contents of each bare `<style>` region, in source order. */
+  styles: string[]
+  /** Contents of each inline `<script>` region (client code), in source order. */
+  scripts: string[]
+  /** Character offset in the original source of each captured `<script>` region's
+   *  opening tag, parallel to `scripts` — used to locate diagnostics. */
+  scriptOffsets: number[]
+  /** Character offset in the original source where the (trimmed) template body
+   *  begins — used to map template diagnostics back to original positions.
+   *  Assumes `<style>`/`<script>` regions follow the template body (the
+   *  convention), so leading offset is unaffected by their removal. */
+  templateOffset: number
+}
+
+const FRONTMATTER_RE = /^---[ \t]*\r?\n([\s\S]*?)\r?\n---[ \t]*\r?\n?/
+const STYLE_RE = /<style>([\s\S]*?)<\/style>/g
+const SCRIPT_RE = /<script\b([^>]*)>([\s\S]*?)<\/script>/g
+
+/** True if `attrs` (the text between `<script` and `>`) carries `name` as a
+ *  whole attribute token — so `src` matches `src="x"` but not `data-src`. */
+function hasAttr(attrs: string, name: string): boolean {
+  const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return new RegExp(`(?:^|\\s)${escaped}(?=[\\s=/]|$)`, 'i').test(attrs)
+}
+
+export function splitStator(source: string): ParsedStator {
+  let rest = source
+  let frontmatter = ''
+  let frontmatterLen = 0
+
+  const fm = rest.match(FRONTMATTER_RE)
+  if (fm) {
+    frontmatter = (fm[1] ?? '').trim()
+    frontmatterLen = fm[0].length
+    rest = rest.slice(frontmatterLen)
+  }
+
+  // Leading whitespace before the template body (after the frontmatter).
+  const leadingWs = rest.length - rest.trimStart().length
+  const templateOffset = frontmatterLen + leadingWs
+
+  // Scripts before styles so the captured offsets are relative to the
+  // post-frontmatter text (style removal hasn't shifted anything yet).
+  const scripts: string[] = []
+  const scriptOffsets: number[] = []
+  rest = rest.replace(SCRIPT_RE, (match, attrs: string, js: string, offset: number) => {
+    // `src` / `is:inline` mark a literal script — leave it in the template.
+    if (hasAttr(attrs, 'src') || hasAttr(attrs, 'is:inline')) return match
+    scripts.push(js.trim())
+    scriptOffsets.push(frontmatterLen + offset)
+    return ''
+  })
+
+  const styles: string[] = []
+  rest = rest.replace(STYLE_RE, (_m, css: string) => {
+    styles.push(css.trim())
+    return ''
+  })
+
+  return {
+    frontmatter,
+    template: rest.trim(),
+    styles,
+    scripts,
+    scriptOffsets,
+    templateOffset,
+  }
+}
+
+/** A region's inner text plus the absolute source offset where that text begins.
+ *  Unlike `splitStator` (which trims and drops offsets), this keeps exact
+ *  positions so the language-server emit can map generated code back to source. */
+export interface SourceRegion {
+  contentOffset: number
+  content: string
+}
+
+export interface ScannedRegions {
+  /** The `---` frontmatter content (server TS), or null when there's no fence. */
+  frontmatter: SourceRegion | null
+  /** The contiguous template body — everything from the body start up to the
+   *  first trailing `<style>` / component `<script>` block. Assumes the
+   *  conventional layout (template first, blocks after). */
+  template: SourceRegion
+  /** Each bare `<style>` block's CSS content, in source order. */
+  styles: SourceRegion[]
+  /** Each component (non-literal) `<script>` block's TS content, in source order.
+   *  `src` / `is:inline` scripts are excluded — same classification as `splitStator`. */
+  scripts: SourceRegion[]
+}
+
+/**
+ * Scan a `.stator` source into regions with exact source offsets — the
+ * position-preserving companion to `splitStator`, used by the language-server
+ * emit. Shares this module's patterns + `hasAttr` classification so the LS and
+ * the runtime compiler never disagree about what's a region.
+ */
+export function scanRegions(source: string): ScannedRegions {
+  let bodyStart = 0
+  let frontmatter: SourceRegion | null = null
+  const fm = FRONTMATTER_RE.exec(source)
+  if (fm) {
+    const prefix = /^---[ \t]*\r?\n/.exec(fm[0])![0]
+    frontmatter = { contentOffset: prefix.length, content: fm[1] ?? '' }
+    bodyStart = fm[0].length
+  }
+
+  let firstBlock = source.length
+  const styles: SourceRegion[] = []
+  for (const m of source.matchAll(STYLE_RE)) {
+    const start = m.index
+    styles.push({
+      contentOffset: start + '<style>'.length,
+      content: m[1] ?? '',
+    })
+    if (start < firstBlock) firstBlock = start
+  }
+  const scripts: SourceRegion[] = []
+  for (const m of source.matchAll(SCRIPT_RE)) {
+    if (hasAttr(m[1] ?? '', 'src') || hasAttr(m[1] ?? '', 'is:inline')) continue
+    const start = m.index
+    const openLen = m[0].indexOf('>') + 1
+    scripts.push({ contentOffset: start + openLen, content: m[2] ?? '' })
+    if (start < firstBlock) firstBlock = start
+  }
+
+  const templateEnd = Math.max(bodyStart, firstBlock)
+  return {
+    frontmatter,
+    template: {
+      contentOffset: bodyStart,
+      content: source.slice(bodyStart, templateEnd),
+    },
+    styles,
+    scripts,
+  }
+}

package/src/compiler/styles.ts

@@ -0,0 +1,200 @@
+import postcss from 'postcss'
+import selectorParser from 'postcss-selector-parser'
+
+/**
+ * Scope a component's `<style>` content with the attribute approach.
+ *
+ *   - Each rule's subject compound gets `[data-s-<hash>]` appended, so it only
+ *     matches this component's elements (which the compiler marks with the same
+ *     attribute). Subject-only scoping (Vue-style) keeps descendant selectors
+ *     working without over-constraining ancestors.
+ *   - `:global(...)` is unwrapped; if the *subject* is global, that selector is
+ *     left unscoped (the escape hatch for reaching outside the component).
+ *   - `@keyframes` names are renamed per-hash (and `animation`/`animation-name`
+ *     references rewritten) so animations don't leak or collide.
+ *
+ * Pure function — the Vite plugin calls it, then Vite's own CSS pipeline handles
+ * url()/nesting/minify on the result.
+ */
+export interface ScopeCssOptions {
+  /**
+   * Client components scope by DESCENDANT of their custom-element root
+   * (`[data-s-h] .swatch`) instead of per-element attributes — an island has
+   * exactly one root carrying the attr, and its class may create DOM at
+   * runtime that per-element stamping could never reach. Selectors whose
+   * first compound is the root tag itself get the attr on that compound
+   * (`variant-picker[data-s-h] …`).
+   */
+  strategy?: 'per-element' | 'descendant'
+  /** The custom-element tag, required for 'descendant'. */
+  rootTag?: string
+}
+
+export function scopeCss(css: string, hash: string, opts: ScopeCssOptions = {}): string {
+  const attr = `data-s-${hash}`
+  const root = postcss.parse(css)
+
+  // 1. Rename @keyframes and rewrite references.
+  const renamed = new Map<string, string>()
+  root.walkAtRules((at) => {
+    if (/^(-\w+-)?keyframes$/i.test(at.name)) {
+      const from = at.params.trim()
+      const to = `${from}-${hash}`
+      renamed.set(from, to)
+      at.params = to
+    }
+  })
+  if (renamed.size > 0) {
+    root.walkDecls((decl) => {
+      if (decl.prop === 'animation-name') {
+        decl.value = decl.value
+          .split(',')
+          .map((n) => renamed.get(n.trim()) ?? n.trim())
+          .join(', ')
+      } else if (decl.prop === 'animation') {
+        decl.value = decl.value
+          .split(',')
+          .map((part) =>
+            part
+              .trim()
+              .split(/\s+/)
+              .map((tok) => renamed.get(tok) ?? tok)
+              .join(' '),
+          )
+          .join(', ')
+      }
+    })
+  }
+
+  // 2. Scope each rule's selectors (skip keyframe step selectors).
+  root.walkRules((rule) => {
+    const parent = rule.parent
+    if (parent && parent.type === 'atrule' && /keyframes$/i.test((parent as postcss.AtRule).name)) {
+      return
+    }
+    rule.selector =
+      opts.strategy === 'descendant'
+        ? scopeSelectorListDescendant(rule.selector, attr, opts.rootTag ?? '')
+        : scopeSelectorList(rule.selector, attr)
+  })
+
+  return root.toString()
+}
+
+function scopeSelectorListDescendant(selector: string, attr: string, rootTag: string): string {
+  const transform = selectorParser((selectors) => {
+    selectors.each((sel) => {
+      // Descendant mode: `:global` anywhere means the author owns the whole
+      // selector — unwrap it and scope nothing. (Per-element mode has finer
+      // subject rules; descendant prefixing would mangle global ancestors.)
+      let hasGlobal = false
+      sel.walkPseudos((pseudo) => {
+        if (pseudo.value === ':global') {
+          hasGlobal = true
+          const inner = pseudo.nodes[0]
+          if (inner && inner.nodes.length > 0) {
+            pseudo.replaceWith(...inner.nodes.map((n) => n.clone()))
+          } else {
+            pseudo.remove()
+          }
+        }
+      })
+      if (hasGlobal) return
+
+      const attrNode = selectorParser.attribute({
+        attribute: attr,
+        value: undefined,
+        raws: {},
+        quoteMark: null,
+      } as never)
+
+      // Root-targeting selector (`variant-picker`, `variant-picker:hover`):
+      // the attr belongs ON the root compound, not on an ancestor.
+      const first = sel.nodes[0]
+      if (first && first.type === 'tag' && first.value === rootTag) {
+        // insert after the first compound's last simple selector
+        let insertAfter: selectorParser.Node = first
+        for (const node of sel.nodes.slice(1)) {
+          if (node.type === 'combinator') break
+          if (node.type === 'pseudo' && node.value.startsWith('::')) break
+          insertAfter = node
+        }
+        sel.insertAfter(insertAfter as never, attrNode)
+        return
+      }
+
+      // Everything else: descendant of the scoped root.
+      const combinator = selectorParser.combinator({ value: ' ' } as never)
+      if (sel.nodes[0]) {
+        sel.insertBefore(sel.nodes[0] as never, combinator)
+        sel.insertBefore(sel.nodes[0] as never, attrNode)
+      } else {
+        sel.append(attrNode)
+      }
+    })
+  })
+  return transform.processSync(selector)
+}
+
+function scopeSelectorList(selector: string, attr: string): string {
+  const transform = selectorParser((selectors) => {
+    selectors.each((sel) => {
+      // Is the subject (last compound) inside :global()? Compute before unwrap.
+      const subjectIsGlobal = isSubjectGlobal(sel)
+
+      // Unwrap every :global(...) to its inner nodes.
+      sel.walkPseudos((pseudo) => {
+        if (pseudo.value === ':global') {
+          const inner = pseudo.nodes[0]
+          if (inner && inner.nodes.length > 0) {
+            pseudo.replaceWith(...inner.nodes.map((n) => n.clone()))
+          } else {
+            pseudo.remove()
+          }
+        }
+      })
+
+      if (subjectIsGlobal) return
+
+      // Insert the scope attribute after the subject's last simple selector,
+      // before any trailing pseudo-elements (::before, ::after).
+      const nodes = sel.nodes
+      let insertAfter: selectorParser.Node | undefined
+      for (const node of nodes) {
+        if (node.type === 'combinator') {
+          insertAfter = undefined // reset at each combinator; track the subject only
+          continue
+        }
+        if (node.type === 'pseudo' && node.value.startsWith('::')) continue // pseudo-element stays last
+        insertAfter = node
+      }
+      const attrNode = selectorParser.attribute({
+        attribute: attr,
+        value: undefined,
+        raws: {},
+        quoteMark: null,
+      } as never)
+      if (insertAfter) sel.insertAfter(insertAfter as never, attrNode)
+      else sel.append(attrNode)
+    })
+  })
+  return transform.processSync(selector)
+}
+
+/** True when the selector's subject compound (after the last combinator) is
+ *  inside a `:global(...)`. */
+function isSubjectGlobal(sel: selectorParser.Selector): boolean {
+  const nodes = sel.nodes
+  let lastCombinator = -1
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    if (nodes[i]!.type === 'combinator') {
+      lastCombinator = i
+      break
+    }
+  }
+  for (let i = lastCombinator + 1; i < nodes.length; i++) {
+    const n = nodes[i]!
+    if (n.type === 'pseudo' && n.value === ':global') return true
+  }
+  return false
+}

package/src/compiler/virtual-code.ts

@@ -0,0 +1,184 @@
+/**
+ * Language-server emit: turn a `.stator` file into **mapped virtual code** the
+ * editor tooling can hand to real language services (TS for the script/template,
+ * CSS for styles), with every generated position mapped back to the source so
+ * completions, hover, and diagnostics land in the right place.
+ *
+ * This is a *second* emit target, distinct from the runtime `compile()`:
+ *   - `compile()` rewrites the template to `html\`…\`` for execution.
+ *   - `toVirtualCode()` preserves the template as JSX so TS's own JSX service
+ *     gives intelligence, and preserves source offsets for mapping.
+ *
+ * It shares the front end (`scanRegions`) with the compiler so the two never
+ * disagree about `.stator` syntax — the drift trap in embedded-language tooling.
+ *
+ * v1 scope: correct region mappings + a useful TSX shell. The ambient typing
+ * (`Stator`, JSX intrinsics — see `STATOR_AMBIENT`) is intentionally permissive
+ * on JSX and refined against real in-editor feedback; the mappings are the
+ * load-bearing part.
+ */
+
+import { analyzeScriptClasses } from './client-script.ts'
+import { componentPropsType, extractFrontmatterTypes } from './dts.ts'
+import { type ScannedRegions, scanRegions } from './split.ts'
+
+/** A contiguous run mapping generated code back to source, 1:1 over its length. */
+export interface VirtualMapping {
+  sourceOffset: number
+  generatedOffset: number
+  length: number
+}
+
+export interface VirtualFile {
+  lang: 'tsx' | 'css'
+  code: string
+  mappings: VirtualMapping[]
+}
+
+export interface VirtualCodeResult {
+  /** The TSX shell: frontmatter + template (server component) or the client
+   *  `<script>` module (client component). */
+  tsx: VirtualFile
+  /** One CSS virtual file per `<style>` block. */
+  styles: VirtualFile[]
+}
+
+const TEMPLATE_IMPORTS =
+  "import { read, each, when, match, on, classList, styleList, raw } from '@statorjs/stator/template';\n"
+const CLIENT_IMPORTS =
+  "import { StatorElement, use, machine, defineElement, bind, effect, dispatch } from '@statorjs/stator/client';\n"
+// Aliased so they never collide with a component's own `InstanceOf` import.
+// NOTE: `InstanceOf` comes from /template, not /machine — the template flavor
+// includes `send`/`state`/`snapshot` (what a route-level binding actually is,
+// and what authors type props with). The engine flavor is selectors-only (the
+// read-only view actions get via `helpers.reads`) and would make every
+// `Stator.reads` binding unassignable to component props.
+const AMBIENT_TYPE_IMPORTS =
+  "import type { AnyMachineDef as __SMachineDef } from '@statorjs/stator/machine';\n" +
+  "import type { InstanceOf as __SInstanceOf } from '@statorjs/stator/template';\n"
+
+/**
+ * Per-file ambient scaffold prepended to every virtual TSX. `Stator` (the macro
+ * surface, module-scoped) makes `Stator.props`/`reads`/… resolve — `reads` typed
+ * through `InstanceOf` so a route's bindings infer their machine instance types.
+ * The **global** JSX namespace is permissive (`extends Record<string, any>`), so
+ * directives + custom elements don't flood false errors; it must be `declare
+ * global` because TS resolves `JSX.IntrinsicElements` globally, and `extends
+ * Record` (rather than an own index signature) lets every file's copy merge
+ * without a duplicate-index-signature clash. Real per-element JSX typing — the
+ * Astro `astro-jsx.d.ts` approach — is a Phase 2 refinement.
+ */
+const STATOR_AMBIENT = `declare const Stator: {
+  props<P>(): P;
+  reads<const T extends readonly __SMachineDef[]>(defs: T): { -readonly [K in keyof T]: __SInstanceOf<T[K]> };
+  request: any;
+  response: { status: number; headers: Record<string, string>; cookies: any };
+};
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends Record<string, any> {}
+  }
+}
+`
+
+const DOCTYPE_RE = /^\s*<!doctype[^>]*>/i
+
+export function toVirtualCode(source: string): VirtualCodeResult {
+  const regions = scanRegions(source)
+  const isClient =
+    regions.scripts.length > 0 &&
+    analyzeScriptClasses(regions.scripts.map((s) => s.content).join('\n')).length > 0
+
+  return {
+    tsx: isClient ? buildClientTsx(regions) : buildServerTsx(regions),
+    styles: regions.styles.map(buildCssFile),
+  }
+}
+
+/** Server component: frontmatter (module scope) + template as a JSX fragment, so
+ *  template expressions see the frontmatter's bindings. */
+function buildServerTsx(regions: ScannedRegions): VirtualFile {
+  const mappings: VirtualMapping[] = []
+  let code = TEMPLATE_IMPORTS + AMBIENT_TYPE_IMPORTS + STATOR_AMBIENT
+
+  if (regions.frontmatter?.content.trim()) {
+    push(
+      mappings,
+      regions.frontmatter.contentOffset,
+      code.length,
+      regions.frontmatter.content.length,
+    )
+    code += `${regions.frontmatter.content}\n`
+  }
+
+  // A leading <!doctype> is static HTML, not JSX — drop it from the shell (no
+  // intelligence lost) and advance the template mapping past it.
+  let tplOffset = regions.template.contentOffset
+  let tpl = regions.template.content
+  const doctype = DOCTYPE_RE.exec(tpl)
+  if (doctype) {
+    tplOffset += doctype[0].length
+    tpl = tpl.slice(doctype[0].length)
+  }
+
+  // `export default function` gives importers a default export (`import X from
+  // './x.stator'`) and puts the template in a scope that closes over the
+  // frontmatter bindings. The param is typed from `Stator.props<P>()` (same
+  // extraction as the .d.ts generator), so `<Component bad={...}/>` in OTHER
+  // .stator files is checked in-editor — TS validates value-based JSX against
+  // the component function's first parameter. Named prop types resolve
+  // because the frontmatter is emitted into this same module above.
+  const propsT = componentPropsType(
+    extractFrontmatterTypes(regions.frontmatter?.content ?? '').propsType,
+    regions.template.content,
+  )
+  code += `export default function (_props: ${propsT}) {\n  return (<>`
+  push(mappings, tplOffset, code.length, tpl.length)
+  code += tpl
+  code += '</>);\n}\n'
+
+  return { lang: 'tsx', code, mappings }
+}
+
+/** Client component: the `<script>` is the module. Emit it as TS so the class,
+ *  `use()`/`machine()`, and imports get full intelligence. (Template-member
+ *  resolution — `bind:text={theme.label}` → the class field — is a later phase.) */
+function buildClientTsx(regions: ScannedRegions): VirtualFile {
+  const mappings: VirtualMapping[] = []
+  let code = TEMPLATE_IMPORTS + CLIENT_IMPORTS + AMBIENT_TYPE_IMPORTS + STATOR_AMBIENT
+
+  for (const script of regions.scripts) {
+    push(mappings, script.contentOffset, code.length, script.content.length)
+    code += `${script.content}\n`
+  }
+
+  // A client component is also used as `<Tag/>` elsewhere, so its importers need
+  // a default export too. The named class export above still gets full TS
+  // intelligence; this stub just satisfies the import.
+  code += '\nexport default function (_props: any) { return null as any; }\n'
+
+  return { lang: 'tsx', code, mappings }
+}
+
+function buildCssFile(style: { contentOffset: number; content: string }): VirtualFile {
+  return {
+    lang: 'css',
+    code: style.content,
+    mappings: [
+      {
+        sourceOffset: style.contentOffset,
+        generatedOffset: 0,
+        length: style.content.length,
+      },
+    ],
+  }
+}
+
+function push(
+  mappings: VirtualMapping[],
+  sourceOffset: number,
+  generatedOffset: number,
+  length: number,
+): void {
+  if (length > 0) mappings.push({ sourceOffset, generatedOffset, length })
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export type { JsonLdProps } from './json-ld.ts'
+export { JsonLd, ldToString } from './json-ld.ts'