npm - @awarebydefault/display-case - Versions diffs - 1.0.0 - Mend

@awarebydefault/display-case 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (254) hide show

package/src/render/collect-styles.test.tsx ADDED Viewed

@@ -0,0 +1,72 @@
+import { describe, expect, test } from 'bun:test'
+import type { StyleEngine } from '../index'
+import { renderWithStyles } from './collect-styles'
+/** A stub engine that wraps the tree in a marker element and emits a tagged
+ *  `<style>` whose body echoes a per-instance counter — so a fresh instance per
+ *  render is observable (isolation), as is the wrap actually being applied. */
+function markerEngine(key: string, counter: { n: number }): StyleEngine {
+  return () => {
+    const id = ++counter.n
+    return {
+      wrap: (node) => (
+        <div data-wrapped={key} data-instance={id}>
+          {node}
+        </div>
+      ),
+      collect: (html) =>
+        `<style data-engine="${key}" data-instance="${id}" data-saw-wrap="${html.includes(
+          `data-wrapped="${key}"`,
+        )}"></style>`,
+    }
+  }
+}
+describe('renderWithStyles', () => {
+  test('no engines: plain render, empty headStyles (inert when unused)', () => {
+    const { html, headStyles } = renderWithStyles(<p>hi</p>, undefined)
+    expect(html).toBe('<p>hi</p>')
+    expect(headStyles).toBe('')
+  })
+  test('empty engine array is also inert', () => {
+    const { html, headStyles } = renderWithStyles(<p>hi</p>, [])
+    expect(html).toBe('<p>hi</p>')
+    expect(headStyles).toBe('')
+  })
+  test('applies wrap and captures collect output (which saw the wrapped markup)', () => {
+    const counter = { n: 0 }
+    const { html, headStyles } = renderWithStyles(<p>hi</p>, [
+      markerEngine('emotion', counter),
+    ])
+    expect(html).toContain('data-wrapped="emotion"')
+    expect(headStyles).toContain('data-engine="emotion"')
+    // collect() received the rendered markup including the wrapper.
+    expect(headStyles).toContain('data-saw-wrap="true"')
+  })
+  test('multiple engines nest in array order and concatenate their output', () => {
+    const counter = { n: 0 }
+    const { html, headStyles } = renderWithStyles(<p>hi</p>, [
+      markerEngine('outer', counter),
+      markerEngine('inner', counter),
+    ])
+    // First engine is outermost: <div outer><div inner><p/></div></div>.
+    expect(html.indexOf('data-wrapped="outer"')).toBeLessThan(
+      html.indexOf('data-wrapped="inner"'),
+    )
+    expect(headStyles).toContain('data-engine="outer"')
+    expect(headStyles).toContain('data-engine="inner"')
+  })
+  test('factory runs once per render — a fresh, isolated store each time', () => {
+    const counter = { n: 0 }
+    const engine = markerEngine('x', counter)
+    const a = renderWithStyles(<p>a</p>, [engine])
+    const b = renderWithStyles(<p>b</p>, [engine])
+    // Distinct instance ids prove the factory was re-invoked (not a shared store).
+    expect(a.headStyles).toContain('data-instance="1"')
+    expect(b.headStyles).toContain('data-instance="2"')
+  })
+})

package/src/render/collect-styles.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react'
+import { renderToString } from 'react-dom/server'
+import type { StyleEngine } from '../index'
+/**
+ * Render a tree to markup, applying any configured style engines so render-time
+ * (CSS-in-JS) styling is collected and delivered before scripting.
+ *
+ * Each engine is a factory invoked **once per render** (see {@link StyleEngine}),
+ * giving every render an isolated style store — one case's styling can never leak
+ * into another's document. Engines wrap the tree in array order (the first is
+ * outermost); after `renderToString`, each collector's `collect(html)` output is
+ * concatenated into a single `headStyles` string for the document `<head>`.
+ *
+ * With no engines configured, the tree is rendered unwrapped and `headStyles` is
+ * `''`, so the resulting document is byte-identical to its engine-free form.
+ */
+export function renderWithStyles(
+  tree: ReactNode,
+  engines: StyleEngine[] | undefined,
+): { html: string; headStyles: string } {
+  const collectors = (engines ?? []).map((make) => make())
+  let wrapped = tree
+  // Apply from last to first so the first engine ends up outermost.
+  for (let i = collectors.length - 1; i >= 0; i--) {
+    wrapped = collectors[i].wrap(wrapped)
+  }
+  const html = renderToString(wrapped)
+  const headStyles = collectors
+    .map((collector) => collector.collect(html))
+    .join('')
+  return { html, headStyles }
+}

package/src/render/documents.test.ts ADDED Viewed

@@ -0,0 +1,184 @@
+import { describe, expect, test } from 'bun:test'
+import type { Manifest } from '../core/manifest'
+import { type DocAssets, primerDoc, renderDoc, shellDoc } from './documents'
+const assets: DocAssets = {
+  browser: '/assets/browser-abc123.js',
+  render: '/assets/render-def456.js',
+  primer: '/assets/primer-ghi789.js',
+}
+const manifest: Manifest = {
+  title: 'My Showcase',
+  components: [],
+  primer: true,
+  landing: 'primer',
+}
+describe('shellDoc', () => {
+  const doc = () =>
+    shellDoc({
+      title: 'My Showcase',
+      tokensCss: '.tok{}',
+      globalCss: '.glob{}',
+      vitrineCss: '.vit{}',
+      theme: 'dark',
+      markup: '<header>chrome</header>',
+      ssr: true,
+      manifest,
+      a11y: false,
+      assets,
+    })
+  test('is a themed HTML document carrying the title and pre-rendered markup', () => {
+    const html = doc()
+    expect(html.startsWith('<!doctype html>')).toBe(true)
+    expect(html).toContain('data-theme="dark"')
+    expect(html).toContain('<title>My Showcase</title>')
+    expect(html).toContain('<header>chrome</header>')
+  })
+  test('inlines all of the supplied CSS layers', () => {
+    const html = doc()
+    expect(html).toContain('.tok{}')
+    expect(html).toContain('.glob{}')
+    expect(html).toContain('.vit{}')
+  })
+  test('seeds the manifest, theme, and a11y flag for hydration', () => {
+    const html = doc()
+    expect(html).toContain('window.__dcSeed=')
+    expect(html).toContain('"My Showcase"')
+    expect(html).toContain('"theme":"dark"')
+    expect(html).toContain('"a11y":false')
+  })
+  test('marks the root server-rendered and references the browser entry', () => {
+    expect(doc()).toContain('data-ssr="1"')
+    expect(doc()).toContain('src="/assets/browser-abc123.js"')
+  })
+  test('marks the root as client-only when ssr is false', () => {
+    const html = shellDoc({
+      title: 'X',
+      tokensCss: '',
+      globalCss: '',
+      vitrineCss: '',
+      theme: 'light',
+      markup: '',
+      ssr: false,
+      manifest,
+      a11y: false,
+      assets,
+    })
+    expect(html).toContain('data-ssr="0"')
+  })
+  test('carries no dev live-reload machinery', () => {
+    expect(doc()).not.toContain('__livereload')
+    expect(doc().toLowerCase()).not.toContain('eventsource')
+  })
+})
+describe('renderDoc', () => {
+  const doc = (over: Partial<Parameters<typeof renderDoc>[0]> = {}) =>
+    renderDoc({
+      globalCss: '.g{}',
+      vitrineCss: '.vit{}',
+      theme: 'light',
+      transparent: false,
+      fit: false,
+      markup: '<button>x</button>',
+      ssr: true,
+      assets,
+      ...over,
+    })
+  test('renders the isolated case markup with both theme attributes', () => {
+    const html = doc()
+    expect(html).toContain('data-theme="light"')
+    expect(html).toContain('data-theme-pref="light"')
+    expect(html).toContain('<button>x</button>')
+    expect(html).toContain('src="/assets/render-def456.js"')
+  })
+  test('inlines the global and Vitrine CSS so a dogfooded case is styled pre-script', () => {
+    const html = doc()
+    expect(html).toContain('.g{}')
+    expect(html).toContain('.vit{}')
+  })
+  test('a transparent exhibit decorates the body and clears its background', () => {
+    const html = doc({ transparent: true })
+    expect(html).toContain('data-decorated')
+    expect(html).toContain('background:transparent')
+  })
+  test('a fitted exhibit shrink-wraps the root to its content width', () => {
+    expect(doc({ fit: true })).toContain('width:fit-content')
+    expect(doc({ fit: false })).not.toContain('width:fit-content')
+  })
+  test('reflects the ssr flag on the root', () => {
+    expect(doc({ ssr: true })).toContain('data-ssr="1"')
+    expect(doc({ ssr: false })).toContain('data-ssr="0"')
+  })
+  test('omitting headStyles is byte-identical to passing empty (inert when unused)', () => {
+    expect(doc({})).toBe(doc({ headStyles: '' }))
+  })
+  test('style-engine output is a discrete tag after the static <style> block', () => {
+    const tag = '<style data-emotion="css 1ab2">.x{}</style>'
+    const html = doc({ headStyles: tag })
+    expect(html).toContain(tag)
+    // Placed after the base block closes, before the head closes — not folded
+    // into the static <style> (so emotion's data-emotion adoption markers survive).
+    expect(html).toContain(`</style>${tag}</head>`)
+  })
+})
+describe('primerDoc', () => {
+  const doc = () =>
+    primerDoc({
+      tokensCss: '.tok{}',
+      globalCss: '.glob{}',
+      vitrineCss: '.vit{}',
+      theme: 'dark',
+      markup: '<article>primer</article>',
+      ssr: true,
+      assets,
+    })
+  test('is the themed primer reading page with its markup and entry', () => {
+    const html = doc()
+    expect(html).toContain('<title>Primer</title>')
+    expect(html).toContain('data-theme="dark"')
+    expect(html).toContain('data-theme-pref="dark"')
+    expect(html).toContain('<article>primer</article>')
+    expect(html).toContain('src="/assets/primer-ghi789.js"')
+  })
+  test('inlines the token, global, and Vitrine CSS and marks the ssr root', () => {
+    const html = doc()
+    expect(html).toContain('.tok{}')
+    expect(html).toContain('.glob{}')
+    expect(html).toContain('.vit{}')
+    expect(html).toContain('data-ssr="1"')
+  })
+  test('style-engine output is a discrete tag after the static <style> block', () => {
+    const tag = '<style data-emotion="css 9zz">.y{}</style>'
+    const html = primerDoc({
+      tokensCss: '.tok{}',
+      globalCss: '.glob{}',
+      vitrineCss: '.vit{}',
+      theme: 'dark',
+      markup: '<article>primer</article>',
+      ssr: true,
+      headStyles: tag,
+      assets,
+    })
+    expect(html).toContain(`</style>${tag}</head>`)
+  })
+})

package/src/render/documents.ts ADDED Viewed

@@ -0,0 +1,88 @@
+import type { Manifest } from '../core/manifest'
+import type { Theme } from '../ui/shell-core'
+/**
+ * Production HTML document templates for a published build. They mirror the dev
+ * server's documents but drop every development-only inject — no live-reload SSE
+ * client, no `process/Bun is not defined` error overlay — and reference the
+ * content-hashed asset URLs the production bundle emits (so a host can cache them
+ * indefinitely). The React trees themselves are produced by the *shared*
+ * renderers (`ssr-shell`, `ssr-render`, `ssr-primer`); only the envelope here
+ * differs from dev, by necessity (hashed assets vs. a fixed dev path).
+ */
+const FONT_LINKS =
+  '<link rel="preconnect" href="https://fonts.googleapis.com"/>' +
+  '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>' +
+  '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"/>'
+/** Content-hashed entry URLs the production build emitted (already base-prefixed). */
+export interface DocAssets {
+  browser: string
+  render: string
+  primer: string
+}
+/** The browse shell document: pre-rendered chrome + inlined seed, hydrated by the
+ *  browser entry. No dev injects. */
+export function shellDoc(opts: {
+  title: string
+  tokensCss: string
+  globalCss: string
+  vitrineCss: string
+  theme: Theme
+  markup: string
+  ssr: boolean
+  manifest: Manifest
+  a11y: boolean
+  assets: DocAssets
+}): string {
+  const reset = 'html,body{margin:0;height:100%;background:var(--dc-bg)}'
+  const seed = JSON.stringify({
+    manifest: opts.manifest,
+    theme: opts.theme,
+    a11y: opts.a11y,
+  })
+  return `<!doctype html><html lang="en" data-theme="${opts.theme}"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>${opts.title}</title>${FONT_LINKS}<style>${opts.tokensCss}\n${opts.globalCss}\n${reset}\n${opts.vitrineCss}</style></head><body><div id="root" data-ssr="${opts.ssr ? '1' : '0'}">${opts.markup}</div><script>window.__dcSeed=${seed}</script><script type="module" src="${opts.assets.browser}"></script></body></html>`
+}
+/** The isolated case render document. */
+export function renderDoc(opts: {
+  globalCss: string
+  vitrineCss: string
+  theme: Theme
+  transparent: boolean
+  fit: boolean
+  markup: string
+  ssr: boolean
+  /** Style-engine output, placed after the static <style> block. `''` when none. */
+  headStyles?: string
+  assets: DocAssets
+}): string {
+  const exhibitCenter =
+    'body[data-decorated] #root>*{justify-content:center;align-content:center}'
+  const bodyAttrs = opts.transparent
+    ? ' data-decorated style="background:transparent"'
+    : ''
+  const rootAttrs = `${opts.fit ? ' style="width:fit-content"' : ''} data-ssr="${opts.ssr ? '1' : '0'}"`
+  // The Vitrine stylesheet follows globalCss so a dogfooded design-system case
+  // paints before scripts; for a non-dogfooding consumer these are inert chrome
+  // rules in a dev-time-only preview document (see server.ts renderHtml).
+  return `<!doctype html><html lang="en" data-theme="${opts.theme}" data-theme-pref="${opts.theme}"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Display Case render</title><style>html,body{margin:0}body{background:var(--color-bg);color:var(--color-fg);font-family:var(--font-sans, ui-sans-serif, system-ui, sans-serif)}${exhibitCenter}${opts.globalCss}\n${opts.vitrineCss}</style>${opts.headStyles ?? ''}</head><body${bodyAttrs}><main id="root"${rootAttrs}>${opts.markup}</main><script type="module" src="${opts.assets.render}"></script></body></html>`
+}
+/** The primer reading-page document. */
+export function primerDoc(opts: {
+  tokensCss: string
+  globalCss: string
+  vitrineCss: string
+  theme: Theme
+  markup: string
+  ssr: boolean
+  /** Style-engine output, placed after the static <style> block. `''` when none. */
+  headStyles?: string
+  assets: DocAssets
+}): string {
+  const reset = 'html,body{margin:0;height:100%;background:var(--dc-bg)}'
+  return `<!doctype html><html lang="en" data-theme="${opts.theme}" data-theme-pref="${opts.theme}"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Primer</title>${FONT_LINKS}<style>${opts.tokensCss}\n${opts.globalCss}\n${reset}\n${opts.vitrineCss}</style>${opts.headStyles ?? ''}</head><body><main id="root" data-ssr="${opts.ssr ? '1' : '0'}">${opts.markup}</main><script type="module" src="${opts.assets.primer}"></script></body></html>`
+}

package/src/render/render-node.test.tsx ADDED Viewed

@@ -0,0 +1,160 @@
+import { describe, expect, test } from 'bun:test'
+import type { ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { type DisplayCaseConfig, defineCases, tweak } from '../index'
+import {
+  type CaseTreeState,
+  caseTree,
+  encodeOverrides,
+  resolveTweaks,
+} from './render-node'
+const schema = {
+  label: tweak.text('Save'),
+  size: tweak.choice(['sm', 'lg'], 'sm'),
+  count: tweak.number(3),
+  on: tweak.boolean(false),
+}
+// `resolveTweaks` is typed over the wide `TweakSchema`, so its return widens to
+// an imprecise mapped type; assert against the concrete value shape this schema
+// produces.
+interface Resolved {
+  label: string
+  size: string
+  count: number
+  on: boolean
+}
+const resolve = (tweaks: Record<string, string>): Resolved =>
+  resolveTweaks(schema, tweaks) as unknown as Resolved
+const state = (over: Partial<CaseTreeState>): CaseTreeState => ({
+  componentId: 'button',
+  caseId: 'default',
+  width: null,
+  tweaks: {},
+  ...over,
+})
+const NO_CONFIG: DisplayCaseConfig = {} as DisplayCaseConfig
+describe('resolveTweaks', () => {
+  test('falls back to each descriptor default when the key is absent', () => {
+    expect(resolve({})).toEqual({
+      label: 'Save',
+      size: 'sm',
+      count: 3,
+      on: false,
+    })
+  })
+  test('decodes booleans from "1"/"true" and treats anything else as false', () => {
+    expect(resolve({ on: '1' }).on).toBe(true)
+    expect(resolve({ on: 'true' }).on).toBe(true)
+    expect(resolve({ on: '0' }).on).toBe(false)
+    expect(resolve({ on: 'nope' }).on).toBe(false)
+  })
+  test('coerces numbers and passes text/choice through verbatim', () => {
+    const v = resolve({ count: '42', label: 'Go', size: 'lg' })
+    expect(v.count).toBe(42)
+    expect(v.label).toBe('Go')
+    expect(v.size).toBe('lg')
+  })
+})
+describe('encodeOverrides', () => {
+  test('returns an empty map for no overrides', () => {
+    expect(encodeOverrides()).toEqual({})
+    expect(encodeOverrides(undefined)).toEqual({})
+  })
+  test('serializes booleans to "1"/"0" and stringifies the rest', () => {
+    expect(
+      encodeOverrides({ on: true, off: false, count: 7, label: 'Go' }),
+    ).toEqual({
+      on: '1',
+      off: '0',
+      count: '7',
+      label: 'Go',
+    })
+  })
+  test('round-trips numbers and booleans back through resolveTweaks', () => {
+    const decoded = resolve(encodeOverrides({ count: 42, on: true }))
+    expect(decoded.count).toBe(42)
+    expect(decoded.on).toBe(true)
+  })
+})
+describe('caseTree', () => {
+  const Noop = () => {}
+  test('renders the not-found node when no such case exists', () => {
+    const html = renderToStaticMarkup(
+      caseTree(
+        [],
+        NO_CONFIG,
+        state({ componentId: 'ghost', caseId: 'x' }),
+        Noop,
+      ),
+    )
+    expect(html).toContain('dc-render-missing')
+    expect(html).toContain('No such case: ghost/x')
+  })
+  test('invokes a simple thunk case', () => {
+    const modules = [
+      defineCases('Button', {
+        Default: () => <button type="button">Hi</button>,
+      }),
+    ]
+    const html = renderToStaticMarkup(
+      caseTree(modules, NO_CONFIG, state({}), Noop),
+    )
+    expect(html).toContain('<button')
+    expect(html).toContain('Hi')
+  })
+  test('passes resolved tweak values into a tweaked case render', () => {
+    const modules = [
+      defineCases('Button', {
+        Default: {
+          tweaks: { label: tweak.text('Save') },
+          render: (v) => <span>{v.label}</span>,
+        },
+      }),
+    ]
+    const html = renderToStaticMarkup(
+      caseTree(
+        modules,
+        NO_CONFIG,
+        state({ tweaks: { label: 'Custom' } }),
+        Noop,
+      ),
+    )
+    expect(html).toContain('<span>Custom</span>')
+  })
+  test('constrains the case to a max-width wrapper when width is set', () => {
+    const modules = [defineCases('Button', { Default: () => <i>x</i> })]
+    const html = renderToStaticMarkup(
+      caseTree(modules, NO_CONFIG, state({ width: 320 }), Noop),
+    )
+    expect(html).toContain('max-width:320px')
+  })
+  test('wraps the case in the configured decorator', () => {
+    const modules = [defineCases('Button', { Default: () => <i>x</i> })]
+    const config = {
+      decorator: ({ children }: { children: ReactNode }) => (
+        <div className="deco">{children}</div>
+      ),
+    } as DisplayCaseConfig
+    const html = renderToStaticMarkup(
+      caseTree(modules, config, state({}), Noop),
+    )
+    expect(html).toContain('class="deco"')
+    expect(html).toContain('<i>x</i>')
+  })
+})

package/src/render/render-node.tsx ADDED Viewed

@@ -0,0 +1,133 @@
+import type { ReactNode } from 'react'
+import { StrictMode } from 'react'
+import { findCase, slugify } from '../core/catalog'
+import type {
+  CaseModule,
+  DisplayCaseConfig,
+  FlowStep,
+  GotoFn,
+  TweakedCase,
+  TweakSchema,
+  TweakValues,
+} from '../index'
+/**
+ * The pure, DOM-free construction of a single case's React tree. Both the
+ * server (pre-rendering the isolated `/render` document to markup) and the
+ * client (hydrating, then driving in-place swaps/tweaks) build the tree through
+ * this one function, so the two can never disagree on markup — the prerequisite
+ * for hydration without mismatch. It touches no `window`/`document`: the
+ * document-level effects of a render (the theme on `<html>`, the body
+ * background, the mount width) are applied by the caller, not here.
+ */
+/** The slice of render state the React tree depends on (no theme/fit/transparent —
+ *  those are document-level, applied outside the tree). */
+export interface CaseTreeState {
+  componentId: string
+  caseId: string
+  width: number | null
+  tweaks: Record<string, string>
+}
+/** Decode the string tweak map (from the address) into typed render values. */
+export function resolveTweaks(
+  schema: TweakSchema,
+  tweaks: Record<string, string>,
+): TweakValues<TweakSchema> {
+  const values: Record<string, string | number | boolean> = {}
+  for (const [key, desc] of Object.entries(schema)) {
+    const raw = tweaks[key]
+    if (raw === undefined) {
+      values[key] = desc.default
+      continue
+    }
+    switch (desc.kind) {
+      case 'boolean':
+        values[key] = raw === '1' || raw === 'true'
+        break
+      case 'number':
+        values[key] = Number(raw)
+        break
+      default:
+        values[key] = raw
+    }
+  }
+  return values as TweakValues<TweakSchema>
+}
+/** Encode a step's `goto` overrides into the string tweak map used in URLs. */
+export function encodeOverrides(
+  overrides?: Record<string, string | number | boolean>,
+): Record<string, string> {
+  const out: Record<string, string> = {}
+  if (!overrides) return out
+  for (const [k, v] of Object.entries(overrides)) {
+    if (typeof v === 'boolean') out[k] = v ? '1' : '0'
+    else out[k] = String(v)
+  }
+  return out
+}
+/** A `goto` that does nothing — used when pre-rendering on the server, where a
+ *  flow step's initial paint is rendered but no interaction can occur. */
+export const NOOP_GOTO: GotoFn = () => {}
+/**
+ * Build the full React tree for a case: the case's node (simple thunk, tweaked
+ * render, or flow step), optionally width-constrained, wrapped in the configured
+ * decorator and `StrictMode`. A missing case yields the not-found node verbatim
+ * (no `StrictMode` wrapper), matching what the catalog reports. `goto` is wired
+ * into flow steps; pass {@link NOOP_GOTO} on the server.
+ */
+export function caseTree(
+  modules: CaseModule[],
+  config: DisplayCaseConfig,
+  state: CaseTreeState,
+  goto: GotoFn,
+): ReactNode {
+  const found = findCase(modules, state.componentId, state.caseId)
+  if (!found) {
+    return (
+      <div className="dc-render-missing">
+        No such case: {state.componentId}/{state.caseId}
+      </div>
+    )
+  }
+  let node: ReactNode
+  if (typeof found.case === 'function') {
+    node = found.case()
+  } else if (found.module.isFlow) {
+    const step = found.case as FlowStep
+    const values = resolveTweaks(step.tweaks ?? {}, state.tweaks)
+    node = step.render({ values, goto })
+  } else {
+    const tweaked = found.case as TweakedCase
+    node = tweaked.render(resolveTweaks(tweaked.tweaks, state.tweaks))
+  }
+  const wrapped = state.width ? (
+    <div style={{ maxWidth: `${state.width}px`, margin: '0 auto' }}>{node}</div>
+  ) : (
+    node
+  )
+  const Decorator = config.decorator
+  return (
+    <StrictMode>
+      {Decorator ? (
+        <Decorator
+          level={found.module.level}
+          sourcePath={found.module.sourcePath}
+          area={found.module.area}>
+          {wrapped}
+        </Decorator>
+      ) : (
+        wrapped
+      )}
+    </StrictMode>
+  )
+}
+export { slugify }