{"_id":"@depup/hast-util-to-jsx-runtime","name":"@depup/hast-util-to-jsx-runtime","dist-tags":{"latest":"2.3.6-depup.54"},"versions":{"2.3.6-depup.54":{"author":{"name":"Titus Wormer","email":"tituswormer@gmail.com","url":"https://wooorm.com"},"bugs":{"url":"https://github.com/syntax-tree/hast-util-to-jsx-runtime/issues"},"contributors":[{"name":"Titus Wormer","email":"tituswormer@gmail.com","url":"https://wooorm.com"}],"dependencies":{"@types/estree":"^1.0.9","@types/hast":"^3.0.5","@types/unist":"^3.0.3","comma-separated-tokens":"^2.0.3","devlop":"^1.1.0","estree-util-is-identifier-name":"^3.0.0","hast-util-whitespace":"^3.0.0","mdast-util-mdx-expression":"^2.0.1","mdast-util-mdx-jsx":"^3.2.0","mdast-util-mdxjs-esm":"^2.0.1","property-information":"^7.2.0","space-separated-tokens":"^2.0.2","style-to-js":"^2.0.2","unist-util-position":"^5.0.0","vfile-message":"^4.0.3"},"description":"hast utility to transform to preact, react, solid, svelte, vue, etc (with updated dependencies)","devDependencies":{"@types/node":"^22.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","c8":"^10.0.0","esbuild":"^0.25.0","estree-util-visit":"^2.0.0","hastscript":"^9.0.0","prettier":"^3.0.0","react":"^19.0.0","react-dom":"^19.0.0","remark-cli":"^12.0.0","remark-preset-wooorm":"^11.0.0","sval":"^0.6.0","type-coverage":"^2.0.0","typescript":"^5.0.0","xo":"^0.60.0"},"exports":"./index.js","funding":{"type":"opencollective","url":"https://opencollective.com/unified"},"keywords":["hast-util-to-jsx-runtime","depup","updated-dependencies","security","latest","patched","hast-util","hast","html","preact","react","solid","svelte","unist","utility","util","vue"],"license":"MIT","name":"@depup/hast-util-to-jsx-runtime","prettier":{"bracketSpacing":false,"semi":false,"singleQuote":true,"tabWidth":2,"trailingComma":"none","useTabs":false},"remarkConfig":{"plugins":["remark-preset-wooorm"]},"repository":{"type":"git","url":"git+https://github.com/syntax-tree/hast-util-to-jsx-runtime.git"},"scripts":{"build":"tsc --build --clean && tsc --build && type-coverage","format":"remark --frail --output --quiet -- . && prettier --log-level warn --write -- . && xo --fix","generate":"esbuild --bundle --format=esm --minify --outfile=example/hast-util-to-jsx-runtime.min.js --target=es2020 .","test-api":"node --conditions development test/index.js","test-coverage":"c8 --100 --reporter lcov -- npm run test-api","test":"npm run generate && npm run build && npm run format && npm run test-coverage"},"sideEffects":false,"typeCoverage":{"atLeast":100,"detail":true,"ignoreCatch":true,"ignoreFiles":["example/**/*.js"],"strict":true},"type":"module","version":"2.3.6-depup.54","xo":{"overrides":[{"files":["**/*.d.ts"],"rules":{"@typescript-eslint/array-type":["error",{"default":"generic"}],"@typescript-eslint/ban-ts-comment":0,"@typescript-eslint/ban-types":["error",{"extendDefaults":true}],"@typescript-eslint/consistent-type-definitions":["error","interface"]}}],"prettier":true,"rules":{"logical-assignment-operators":"off","unicorn/prefer-at":"off","unicorn/prefer-string-replace-all":"off","unicorn/prevent-abbreviations":"off"}},"depup":{"changes":{"@types/estree":{"from":"^1.0.0","to":"^1.0.9"},"@types/hast":{"from":"^3.0.0","to":"^3.0.5"},"@types/unist":{"from":"^3.0.0","to":"^3.0.3"},"comma-separated-tokens":{"from":"^2.0.0","to":"^2.0.3"},"devlop":{"from":"^1.0.0","to":"^1.1.0"},"mdast-util-mdx-expression":{"from":"^2.0.0","to":"^2.0.1"},"mdast-util-mdx-jsx":{"from":"^3.0.0","to":"^3.2.0"},"mdast-util-mdxjs-esm":{"from":"^2.0.0","to":"^2.0.1"},"property-information":{"from":"^7.0.0","to":"^7.2.0"},"space-separated-tokens":{"from":"^2.0.0","to":"^2.0.2"},"style-to-js":{"from":"^1.0.0","to":"^2.0.2"},"vfile-message":{"from":"^4.0.0","to":"^4.0.3"}},"depsUpdated":12,"originalPackage":"hast-util-to-jsx-runtime","originalVersion":"2.3.6","processedAt":"2026-07-21T16:16:17.254Z","smokeTest":"passed"},"gitHead":"673800d2fbbfd939ca5bab559a50cbedacd10906","types":"./index.d.ts","_id":"@depup/hast-util-to-jsx-runtime@2.3.6-depup.54","homepage":"https://github.com/syntax-tree/hast-util-to-jsx-runtime#readme","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-ZX2Z+AmlRH9cNj6oTQBwnzZZJHWMFE9eHyrujo97dpxTF4tjWBNo42me1KEurFmEOFtaWs4HMxYHFKN7OAfcEA==","shasum":"17d622324cb0cd9f7cc3e12b4687f2d3dbcfcb24","tarball":"https://registry.npmjs.org/@depup/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6-depup.54.tgz","fileCount":12,"unpackedSize":60285,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC1zSHemNvwyiHdA978B717rYurerb0xaLy3+hzwQvnOgIhAN+UDmAnPDFNW+g7vtHSq81Sdb+fw/i8n5LhT1tEFRrf"}]},"_npmUser":{"name":"chiefmikey","email":"wolfemikl@gmail.com"},"directories":{},"maintainers":[{"name":"chiefmikey","email":"wolfemikl@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hast-util-to-jsx-runtime_2.3.6-depup.54_1784650579491_0.06641566135586352"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-21T16:16:19.304Z","2.3.6-depup.54":"2026-07-21T16:16:19.639Z","modified":"2026-07-21T16:16:19.955Z"},"maintainers":[{"name":"chiefmikey","email":"wolfemikl@gmail.com"}],"description":"hast utility to transform to preact, react, solid, svelte, vue, etc (with updated dependencies)","homepage":"https://github.com/syntax-tree/hast-util-to-jsx-runtime#readme","keywords":["hast-util-to-jsx-runtime","depup","updated-dependencies","security","latest","patched","hast-util","hast","html","preact","react","solid","svelte","unist","utility","util","vue"],"repository":{"type":"git","url":"git+https://github.com/syntax-tree/hast-util-to-jsx-runtime.git"},"contributors":[{"name":"Titus Wormer","email":"tituswormer@gmail.com","url":"https://wooorm.com"}],"author":{"name":"Titus Wormer","email":"tituswormer@gmail.com","url":"https://wooorm.com"},"bugs":{"url":"https://github.com/syntax-tree/hast-util-to-jsx-runtime/issues"},"license":"MIT","readme":"# hast-util-to-jsx-runtime\n\n[![Build][badge-build-image]][badge-build-url]\n[![Coverage][badge-coverage-image]][badge-coverage-url]\n[![Downloads][badge-downloads-image]][badge-downloads-url]\n[![Size][badge-size-image]][badge-size-url]\n\nhast utility to transform a tree to\npreact, react, solid, svelte, vue, etcetera,\nwith an automatic JSX runtime.\n\n## Contents\n\n* [What is this?](#what-is-this)\n* [When should I use this?](#when-should-i-use-this)\n* [Install](#install)\n* [Use](#use)\n* [API](#api)\n  * [`toJsxRuntime(tree, options)`](#tojsxruntimetree-options)\n  * [`Components`](#components)\n  * [`CreateEvaluater`](#createevaluater)\n  * [`ElementAttributeNameCase`](#elementattributenamecase)\n  * [`EvaluateExpression`](#evaluateexpression)\n  * [`EvaluateProgram`](#evaluateprogram)\n  * [`Evaluater`](#evaluater)\n  * [`ExtraProps`](#extraprops)\n  * [`Fragment`](#fragment)\n  * [`Jsx`](#jsx)\n  * [`JsxDev`](#jsxdev)\n  * [`Options`](#options)\n  * [`Props`](#props)\n  * [`Source`](#source)\n  * [`Space`](#space)\n  * [`StylePropertyNameCase`](#stylepropertynamecase)\n* [Errors](#errors)\n* [Examples](#examples)\n  * [Example: Preact](#example-preact)\n  * [Example: Solid](#example-solid)\n  * [Example: Svelte](#example-svelte)\n  * [Example: Vue](#example-vue)\n* [Syntax](#syntax)\n* [Compatibility](#compatibility)\n* [Security](#security)\n* [Related](#related)\n* [Contribute](#contribute)\n* [License](#license)\n\n## What is this?\n\nThis package is a utility that takes a [hast][github-hast] tree and an\n[automatic JSX runtime][reactjs-jsx-runtime] and turns the tree into anything\nyou wish.\n\n## When should I use this?\n\nYou can use this package when you have a hast syntax tree and want to use it\nwith whatever framework.\n\nThis package uses an automatic JSX runtime,\nwhich is a sort of lingua franca for frameworks to support JSX.\n\nNotably,\nautomatic runtimes have support for passing extra information in development,\nand have guaranteed support for fragments.\n\n## Install\n\nThis package is [ESM only][github-gist-esm].\nIn Node.js (version 16+),\ninstall with [npm][npmjs-install]:\n\n```sh\nnpm install hast-util-to-jsx-runtime\n```\n\nIn Deno with [`esm.sh`][esmsh]:\n\n```js\nimport {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2'\n```\n\nIn browsers with [`esm.sh`][esmsh]:\n\n```html\n<script type=\"module\">\n  import {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2?bundle'\n</script>\n```\n\n## Use\n\n```js\nimport {h} from 'hastscript'\nimport {toJsxRuntime} from 'hast-util-to-jsx-runtime'\nimport {Fragment, jsxs, jsx} from 'react/jsx-runtime'\nimport {renderToStaticMarkup} from 'react-dom/server'\n\nconst tree = h('h1', 'Hello, world!')\n\nconst doc = renderToStaticMarkup(toJsxRuntime(tree, {Fragment, jsxs, jsx}))\n\nconsole.log(doc)\n```\n\nYields:\n\n```html\n<h1>Hello, world!</h1>\n```\n\n> **Note**:\n> to add better type support,\n> register a global JSX namespace:\n>\n> ```ts\n> import type {JSX as Jsx} from 'react/jsx-runtime'\n>\n> declare global {\n>   namespace JSX {\n>     type ElementClass = Jsx.ElementClass\n>     type Element = Jsx.Element\n>     type IntrinsicElements = Jsx.IntrinsicElements\n>   }\n> }\n> ```\n\n## API\n\nThis package exports the identifier [`toJsxRuntime`][api-to-jsx-runtime].\nIt exports the [TypeScript][] types\n[`Components`][api-components],\n[`CreateEvaluater`][api-create-evaluater],\n[`ElementAttributeNameCase`][api-element-attribute-name-case],\n[`EvaluateExpression`][api-evaluate-expression],\n[`EvaluateProgram`][api-evaluate-program],\n[`Evaluater`][api-evaluater],\n[`ExtraProps`][api-extra-props],\n[`Fragment`][api-fragment],\n[`Jsx`][api-jsx],\n[`JsxDev`][api-jsx-dev],\n[`Options`][api-options],\n[`Props`][api-props],\n[`Source`][api-source],\n[`Space`][api-Space],\nand\n[`StylePropertyNameCase`][api-style-property-name-case].\nThere is no default export.\n\n### `toJsxRuntime(tree, options)`\n\nTransform a hast tree to\npreact, react, solid, svelte, vue, etcetera,\nwith an automatic JSX runtime.\n\n##### Parameters\n\n* `tree`\n  ([`Node`][github-hast-nodes])\n  — tree to transform\n* `options`\n  ([`Options`][api-options], required)\n  — configuration\n\n##### Returns\n\nResult from your configured JSX runtime\n(`JSX.Element` if defined,\notherwise `unknown` which you can cast yourself).\n\n### `Components`\n\nPossible components to use (TypeScript type).\n\nEach key is a tag name typed in `JSX.IntrinsicElements`,\nif defined.\nEach value is either a different tag name\nor a component accepting the corresponding props\n(and an optional `node` prop if `passNode` is on).\n\nYou can access props at `JSX.IntrinsicElements`.\nFor example,\nto find props for `a`,\nuse `JSX.IntrinsicElements['a']`.\n\n###### Type\n\n```ts\nimport type {Element} from 'hast'\n\ntype ExtraProps = {node?: Element | undefined}\n\ntype Components = {\n  [TagName in keyof JSX.IntrinsicElements]:\n    | Component<JSX.IntrinsicElements[TagName] & ExtraProps>\n    | keyof JSX.IntrinsicElements\n}\n\ntype Component<ComponentProps> =\n  // Class component:\n  | (new (props: ComponentProps) => JSX.ElementClass)\n  // Function component:\n  | ((props: ComponentProps) => JSX.Element | string | null | undefined)\n```\n\n### `CreateEvaluater`\n\nCreate an evaluator that turns ESTree ASTs from embedded MDX into values\n(TypeScript type).\n\n###### Parameters\n\nThere are no parameters.\n\n###### Returns\n\nEvaluater ([`Evaluater`][api-evaluater]).\n\n### `ElementAttributeNameCase`\n\nCasing to use for attribute names (TypeScript type).\n\nHTML casing is for example\n`class`, `stroke-linecap`, `xml:lang`.\nReact casing is for example\n`className`, `strokeLinecap`, `xmlLang`.\n\n###### Type\n\n```ts\ntype ElementAttributeNameCase = 'html' | 'react'\n```\n\n### `EvaluateExpression`\n\nTurn an MDX expression into a value (TypeScript type).\n\n###### Parameters\n\n* `expression` (`Expression` from `@types/estree`)\n  — estree expression\n\n###### Returns\n\nResult of expression (`unknown`).\n\n### `EvaluateProgram`\n\nTurn an MDX program (export/import statements) into a value (TypeScript type).\n\n###### Parameters\n\n* `program` (`Program` from `@types/estree`)\n  — estree program\n\n###### Returns\n\nResult of program (`unknown`);\nshould likely be `undefined` as ESM changes the scope but doesn’t yield\nsomething.\n\n### `Evaluater`\n\nEvaluator that turns ESTree ASTs from embedded MDX into values (TypeScript\ntype).\n\n###### Fields\n\n* `evaluateExpression` ([`EvaluateExpression`][api-evaluate-expression])\n  — evaluate an expression\n* `evaluateProgram` ([`EvaluateProgram`][api-evaluate-program])\n  — evaluate a program\n\n### `ExtraProps`\n\nExtra fields we pass (TypeScript type).\n\n###### Type\n\n```ts\ntype ExtraProps = {node?: Element | undefined}\n```\n\n### `Fragment`\n\nRepresent the children,\ntypically a symbol (TypeScript type).\n\n###### Type\n\n```ts\ntype Fragment = unknown\n```\n\n### `Jsx`\n\nCreate a production element (TypeScript type).\n\n###### Parameters\n\n* `type` (`unknown`)\n  — element type:\n  `Fragment` symbol,\n  tag name (`string`),\n  component\n* `props` ([`Props`][api-props])\n  — element props,\n  `children`,\n  and maybe `node`\n* `key` (`string` or `undefined`)\n  — dynamicly generated key to use\n\n###### Returns\n\nElement from your framework\n(`JSX.Element` if defined,\notherwise `unknown` which you can cast yourself).\n\n### `JsxDev`\n\nCreate a development element (TypeScript type).\n\n###### Parameters\n\n* `type` (`unknown`)\n  — element type:\n  `Fragment` symbol,\n  tag name (`string`),\n  component\n* `props` ([`Props`][api-props])\n  — element props,\n  `children`,\n  and maybe `node`\n* `key` (`string` or `undefined`)\n  — dynamicly generated key to use\n* `isStaticChildren` (`boolean`)\n  — whether two or more children are passed (in an array),\n  which is whether `jsxs` or `jsx` would be used\n* `source` ([`Source`][api-source])\n  — info about source\n* `self` (`undefined`)\n  — nothing (this is used by frameworks that have components,\n  we don’t)\n\n###### Returns\n\nElement from your framework\n(`JSX.Element` if defined,\notherwise `unknown` which you can cast yourself).\n\n### `Options`\n\nConfiguration (TypeScript type).\n\n###### Fields\n\n* `Fragment` ([`Fragment`][api-fragment], required)\n  — fragment\n* `jsxDEV` ([`JsxDev`][api-jsx-dev], required in development)\n  — development JSX\n* `jsxs` ([`Jsx`][api-jsx], required in production)\n  — static JSX\n* `jsx` ([`Jsx`][api-jsx], required in production)\n  — dynamic JSX\n* `components` ([`Partial<Components>`][api-components], optional)\n  — components to use\n* `createEvaluater` ([`CreateEvaluater`][api-create-evaluater], optional)\n  — create an evaluator that turns ESTree ASTs into values\n* `development` (`boolean`, default: `false`)\n  — whether to use `jsxDEV` when on or `jsx` and `jsxs` when off\n* `elementAttributeNameCase`\n  ([`ElementAttributeNameCase`][api-element-attribute-name-case],\n  default: `'react'`)\n  — specify casing to use for attribute names\n* `filePath` (`string`, optional)\n  — file path to the original source file,\n  passed in source info to `jsxDEV` when using the automatic runtime with\n  `development: true`\n* `passNode` (`boolean`, default: `false`)\n  — pass the hast element node to components\n* `space` ([`Space`][api-space], default: `'html'`)\n  — whether `tree` is in the `'html'` or `'svg'` space, when an `<svg>`\n  element is found in the HTML space,\n  this package already automatically switches to and from the SVG space when\n  entering and exiting it\n* `stylePropertyNameCase`\n  ([`StylePropertyNameCase`][api-style-property-name-case],\n  default: `'dom'`)\n  — specify casing to use for property names in `style` objects\n* `tableCellAlignToStyle`\n  (`boolean`, default: `true`)\n  — turn obsolete `align` props on `td` and `th` into CSS `style` props\n\n### `Props`\n\nProperties and children (TypeScript type).\n\n###### Type\n\n```ts\nimport type {Element} from 'hast'\n\ntype Props = {\n  [prop: string]:\n    | Array<JSX.Element | string | null | undefined> // For `children`.\n    | Record<string, string> // For `style`.\n    | Element // For `node`.\n    | boolean\n    | number\n    | string\n    | undefined\n  children: Array<JSX.Element | string | null | undefined> | undefined\n  node?: Element | undefined\n}\n```\n\n### `Source`\n\nInfo about source (TypeScript type).\n\n###### Fields\n\n* `columnNumber` (`number` or `undefined`)\n  — column where thing starts (0-indexed)\n* `fileName` (`string` or `undefined`)\n  — name of source file\n* `lineNumber` (`number` or `undefined`)\n  — line where thing starts (1-indexed)\n\n### `Space`\n\nNamespace (TypeScript type).\n\n> 👉 **Note**:\n> hast is not XML;\n> it supports SVG as embedded in HTML;\n> it does not support the features available in XML;\n> passing SVG might break but fragments of modern SVG should be fine;\n> use `xast` if you need to support SVG as XML.\n\n###### Type\n\n```ts\ntype Space = 'html' | 'svg'\n```\n\n### `StylePropertyNameCase`\n\nCasing to use for property names in `style` objects (TypeScript type).\n\nCSS casing is for example `background-color` and `-webkit-line-clamp`.\nDOM casing is for example `backgroundColor` and `WebkitLineClamp`.\n\n###### Type\n\n```ts\ntype StylePropertyNameCase = 'css' | 'dom'\n```\n\n## Errors\n\nThe following errors are thrown:\n\n###### ``Expected `Fragment` in options``\n\nThis error is thrown when either `options` is not passed at all or\nwhen `options.Fragment` is `undefined`.\n\nThe automatic JSX runtime needs a symbol for a fragment to work.\n\nTo solve the error,\nmake sure you are passing the correct fragment symbol from your framework.\n\n###### `` Expected `jsxDEV` in options when `development: true` ``\n\nThis error is thrown when `options.development` is turned on (`true`),\nbut when `options.jsxDEV` is not a function.\n\nThe automatic JSX runtime,\nin development,\nneeds this function.\n\nTo solve the error,\nmake sure you are importing the correct runtime functions\n(for example, `'react/jsx-dev-runtime'`),\nand pass `jsxDEV`.\n\n###### ``Expected `jsx` in production options``\n\n###### ``Expected `jsxs` in production options``\n\nThese errors are thrown when `options.development` is *not* turned on\n(`false` or not defined),\nand when `options.jsx` or `options.jsxs` are not functions.\n\nThe automatic JSX runtime,\nin production,\nneeds these functions.\n\nTo solve the error,\nmake sure you are importing the correct runtime functions\n(for example, `'react/jsx-runtime'`),\nand pass `jsx` and `jsxs`.\n\n###### `` Cannot handle MDX estrees without `createEvaluater` ``\n\nThis error is thrown when MDX nodes are passed that represent JavaScript\nprograms or expressions.\n\nSupporting JavaScript can be unsafe and requires a different project.\nTo support JavaScript,\npass a `createEvaluater` function in `options`.\n\n###### ``Cannot parse `style` attribute``\n\nThis error is thrown when a `style` attribute is found on an element,\nwhich cannot be parsed as CSS.\n\nMost frameworks don’t accept `style` as a string,\nso we need to parse it as CSS,\nand pass it as an object.\nBut when broken CSS is used,\nsuch as `style=\"color:red; /*\"`,\nwe crash.\n\nTo solve the error,\nmake sure authors write valid CSS.\nAlternatively,\npass `options.ignoreInvalidStyle: true` to swallow these errors.\n\n## Examples\n\n### Example: Preact\n\n> 👉 **Note**:\n> you must set `elementAttributeNameCase: 'html'` for preact.\n\nIn Node.js,\ndo:\n\n```js\nimport {h} from 'hastscript'\nimport {toJsxRuntime} from 'hast-util-to-jsx-runtime'\nimport {Fragment, jsx, jsxs} from 'preact/jsx-runtime'\nimport {render} from 'preact-render-to-string'\n\nconst result = render(\n  toJsxRuntime(h('h1', 'hi!'), {\n    Fragment,\n    jsx,\n    jsxs,\n    elementAttributeNameCase: 'html'\n  })\n)\n\nconsole.log(result)\n```\n\nYields:\n\n```html\n<h1>hi!</h1>\n```\n\nIn a browser,\ndo:\n\n```js\nimport {h} from 'https://esm.sh/hastscript@9'\nimport {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2'\nimport {Fragment, jsx, jsxs} from 'https://esm.sh/preact@10/jsx-runtime'\nimport {render} from 'https://esm.sh/preact@10'\n\nrender(\n  toJsxRuntime(h('h1', 'hi!'), {\n    Fragment,\n    jsx,\n    jsxs,\n    elementAttributeNameCase: 'html'\n  }),\n  document.getElementById('root')\n)\n```\n\nTo add better type support,\nregister a global JSX namespace:\n\n```ts\nimport type {JSX as Jsx} from 'preact/jsx-runtime'\n\ndeclare global {\n  namespace JSX {\n    type ElementClass = Jsx.ElementClass\n    type Element = Jsx.Element\n    type IntrinsicElements = Jsx.IntrinsicElements\n  }\n}\n```\n\n### Example: Solid\n\n> 👉 **Note**:\n> you must set `elementAttributeNameCase: 'html'` and\n> `stylePropertyNameCase: 'css'` for Solid.\n\nIn Node.js,\ndo:\n\n```js\nimport {h} from 'hastscript'\nimport {toJsxRuntime} from 'hast-util-to-jsx-runtime'\nimport {Fragment, jsx, jsxs} from 'solid-jsx/jsx-runtime'\n\nconsole.log(\n  toJsxRuntime(h('h1', 'hi!'), {\n    Fragment,\n    jsx,\n    jsxs,\n    elementAttributeNameCase: 'html',\n    stylePropertyNameCase: 'css'\n  }).t\n)\n```\n\nYields:\n\n```html\n<h1 >hi!</h1>\n```\n\nIn a browser,\ndo:\n\n```js\nimport {h} from 'https://esm.sh/hastscript@9'\nimport {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2'\nimport {Fragment, jsx, jsxs} from 'https://esm.sh/solid-js@1/h/jsx-runtime'\nimport {render} from 'https://esm.sh/solid-js@1/web'\n\nrender(Component, document.getElementById('root'))\n\nfunction Component() {\n  return toJsxRuntime(h('h1', 'hi!'), {\n    Fragment,\n    jsx,\n    jsxs,\n    elementAttributeNameCase: 'html',\n    stylePropertyNameCase: 'css'\n  })\n}\n```\n\nTo add better type support,\nregister a global JSX namespace:\n\n```ts\nimport type {JSX as Jsx} from 'solid-js/jsx-runtime'\n\ndeclare global {\n  namespace JSX {\n    type ElementClass = Jsx.ElementClass\n    type Element = Jsx.Element\n    type IntrinsicElements = Jsx.IntrinsicElements\n  }\n}\n```\n\n### Example: Svelte\n\n<!-- To do: improve svelte when it fixes a bunch of bugs. -->\n\nI have no clue how to render a Svelte component in Node,\nbut you can get that component with:\n\n```js\nimport {h} from 'hastscript'\nimport {toJsxRuntime} from 'hast-util-to-jsx-runtime'\nimport {Fragment, jsx, jsxs} from 'svelte-jsx'\n\nconst svelteComponent = toJsxRuntime(h('h1', 'hi!'), {Fragment, jsx, jsxs})\n\nconsole.log(svelteComponent)\n```\n\nYields:\n\n```text\n[class Component extends SvelteComponent]\n```\n\nTypes for Svelte are broken.\nRaise it with Svelte.\n\n### Example: Vue\n\n> 👉 **Note**:\n> you must set `elementAttributeNameCase: 'html'` for Vue.\n\nIn Node.js,\ndo:\n\n```js\nimport serverRenderer from '@vue/server-renderer'\nimport {h} from 'hastscript'\nimport {toJsxRuntime} from 'hast-util-to-jsx-runtime'\nimport {Fragment, jsx, jsxs} from 'vue/jsx-runtime' // Available since `vue@3.3`.\n\nconsole.log(\n  await serverRenderer.renderToString(\n    toJsxRuntime(h('h1', 'hi!'), {\n      Fragment,\n      jsx,\n      jsxs,\n      elementAttributeNameCase: 'html'\n    })\n  )\n)\n```\n\nYields:\n\n```html\n<h1>hi!</h1>\n```\n\nIn a browser,\ndo:\n\n```js\nimport {h} from 'https://esm.sh/hastscript@9'\nimport {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2'\nimport {createApp} from 'https://esm.sh/vue@3'\nimport {Fragment, jsx, jsxs} from 'https://esm.sh/vue@3/jsx-runtime'\n\ncreateApp(Component).mount('#root')\n\nfunction Component() {\n  return toJsxRuntime(h('h1', 'hi!'), {\n    Fragment,\n    jsx,\n    jsxs,\n    elementAttributeNameCase: 'html'\n  })\n}\n```\n\nTo add better type support,\nregister a global JSX namespace:\n\n```ts\nimport type {JSX as Jsx} from 'vue/jsx-runtime'\n\ndeclare global {\n  namespace JSX {\n    type ElementClass = Jsx.ElementClass\n    type Element = Jsx.Element\n    type IntrinsicElements = Jsx.IntrinsicElements\n  }\n}\n```\n\n## Syntax\n\nHTML is parsed according to WHATWG HTML (the living standard),\nwhich is also followed by browsers such as Chrome,\nFirefox,\nand Safari.\n\n## Compatibility\n\nProjects maintained by the unified collective are compatible with maintained\nversions of Node.js.\n\nWhen we cut a new major release,\nwe drop support for unmaintained versions of Node.\nThis means we try to keep the current release line,\n`hast-util-to-jsx-runtime@2`,\ncompatible with Node.js 16.\n\n## Security\n\nBe careful with user input in your hast tree.\nUse [`hast-util-santize`][github-hast-util-sanitize] to make hast trees safe.\n\n## Related\n\n* [`hastscript`](https://github.com/syntax-tree/hastscript)\n  — build hast trees\n* [`hast-util-to-html`](https://github.com/syntax-tree/hast-util-to-html)\n  — serialize hast as HTML\n* [`hast-util-sanitize`][github-hast-util-sanitize]\n  — sanitize hast\n\n## Contribute\n\nSee [`contributing.md`][health-contributing]\nin\n[`syntax-tree/.github`][health]\nfor ways to get started.\nSee [`support.md`][health-support] for ways to get help.\n\nThis project has a [code of conduct][health-coc].\nBy interacting with this repository,\norganization,\nor community you agree to abide by its terms.\n\n## License\n\n[MIT][file-license] © [Titus Wormer][wooorm]\n\n<!-- Definitions -->\n\n[api-components]: #components\n\n[api-create-evaluater]: #createevaluater\n\n[api-element-attribute-name-case]: #elementattributenamecase\n\n[api-evaluate-expression]: #evaluateexpression\n\n[api-evaluate-program]: #evaluateprogram\n\n[api-evaluater]: #evaluater\n\n[api-extra-props]: #extraprops\n\n[api-fragment]: #fragment\n\n[api-jsx]: #jsx\n\n[api-jsx-dev]: #jsxdev\n\n[api-options]: #options\n\n[api-props]: #props\n\n[api-source]: #source\n\n[api-space]: #space\n\n[api-style-property-name-case]: #stylepropertynamecase\n\n[api-to-jsx-runtime]: #tojsxruntimetree-options\n\n[badge-build-image]: https://github.com/syntax-tree/hast-util-to-jsx-runtime/workflows/main/badge.svg\n\n[badge-build-url]: https://github.com/syntax-tree/hast-util-to-jsx-runtime/actions\n\n[badge-coverage-image]: https://img.shields.io/codecov/c/github/syntax-tree/hast-util-to-jsx-runtime.svg\n\n[badge-coverage-url]: https://codecov.io/github/syntax-tree/hast-util-to-jsx-runtime\n\n[badge-downloads-image]: https://img.shields.io/npm/dm/hast-util-to-jsx-runtime.svg\n\n[badge-downloads-url]: https://www.npmjs.com/package/hast-util-to-jsx-runtime\n\n[badge-size-image]: https://img.shields.io/bundlejs/size/hast-util-to-jsx-runtime\n\n[badge-size-url]: https://bundlejs.com/?q=hast-util-to-jsx-runtime\n\n[esmsh]: https://esm.sh\n\n[file-license]: license\n\n[github-gist-esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c\n\n[github-hast]: https://github.com/syntax-tree/hast\n\n[github-hast-nodes]: https://github.com/syntax-tree/hast#nodes\n\n[github-hast-util-sanitize]: https://github.com/syntax-tree/hast-util-sanitize\n\n[health]: https://github.com/syntax-tree/.github\n\n[health-coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md\n\n[health-contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md\n\n[health-support]: https://github.com/syntax-tree/.github/blob/main/support.md\n\n[npmjs-install]: https://docs.npmjs.com/cli/install\n\n[reactjs-jsx-runtime]: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html\n\n[typescript]: https://www.typescriptlang.org\n\n[wooorm]: https://wooorm.com\n","readmeFilename":"readme.md","_rev":"1-a6e9816c5df1524b0656bed010a5f57d"}