Launch Week Day 5: Introducing Reachability for PHP.Learn More →
remark-react
Advanced tools
remark-react - npm Package Compare versions
+15
| import type {Root} from 'mdast' | ||
| import type {ReactElement} from 'react' | ||
| import type {Plugin} from 'unified' | ||
| import type {Options} from './lib/index.js' | ||
| /** | ||
| * Plugin to compile to React | ||
| * | ||
| * @param options | ||
| * Configuration. | ||
| */ | ||
| // Note: defining all react nodes as result value seems to trip TS up. | ||
| declare const remarkReact: Plugin<[Options], Root, ReactElement<unknown>> | ||
| export default remarkReact | ||
| export type {Options} |
+1194
| /** | ||
| * Plugin to transform markdown to React. | ||
| * | ||
| * @type {import('unified').Plugin<[Options], Root, ReactElement>} | ||
| */ | ||
| export default function remarkReact(options: Options): void | ||
| export type Root = import('mdast').Root | ||
| export type Schema = import('hast-util-sanitize').Schema | ||
| export type ToHastOptions = import('mdast-util-to-hast').Options | ||
| export type ReactNode = import('react').ReactNode | ||
| export type ReactElement = import('react').ReactElement<unknown> | ||
| export type CreateElementLike = ( | ||
| name: any, | ||
| props: any, | ||
| ...children: ReactNode[] | ||
| ) => ReactNode | ||
| export type Options = { | ||
| /** | ||
| * How to create elements or components. | ||
| * You should typically pass `React.createElement`. | ||
| */ | ||
| createElement: CreateElementLike | ||
| /** | ||
| * Create fragments instead of an outer `<div>` if available. | ||
| * You should typically pass `React.Fragment`. | ||
| */ | ||
| Fragment?: ((props: any) => ReactNode) | undefined | ||
| /** | ||
| * React key prefix | ||
| */ | ||
| prefix?: string | undefined | ||
| /** | ||
| * Options for `hast-util-sanitize`. | ||
| */ | ||
| sanitize?: boolean | import('hast-util-sanitize/lib').Schema | undefined | ||
| /** | ||
| * Options for `mdast-util-to-hast`. | ||
| */ | ||
| toHast?: import('mdast-util-to-hast/lib').Options | undefined | ||
| /** | ||
| * Override default elements (such as `<a>`, `<p>`, etcetera) by passing an | ||
| * object mapping tag names to components. | ||
| */ | ||
| remarkReactComponents?: | ||
| | Partial<{ | ||
| a: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').AnchorHTMLAttributes<HTMLAnchorElement>, | ||
| HTMLAnchorElement | ||
| > | ||
| ) => ReactNode) | ||
| abbr: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| address: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| area: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').AreaHTMLAttributes<HTMLAreaElement>, | ||
| HTMLAreaElement | ||
| > | ||
| ) => ReactNode) | ||
| article: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| aside: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| audio: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').AudioHTMLAttributes<HTMLAudioElement>, | ||
| HTMLAudioElement | ||
| > | ||
| ) => ReactNode) | ||
| b: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| base: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').BaseHTMLAttributes<HTMLBaseElement>, | ||
| HTMLBaseElement | ||
| > | ||
| ) => ReactNode) | ||
| bdi: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| bdo: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| big: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| blockquote: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').BlockquoteHTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| body: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLBodyElement>, | ||
| HTMLBodyElement | ||
| > | ||
| ) => ReactNode) | ||
| br: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLBRElement>, | ||
| HTMLBRElement | ||
| > | ||
| ) => ReactNode) | ||
| button: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').ButtonHTMLAttributes<HTMLButtonElement>, | ||
| HTMLButtonElement | ||
| > | ||
| ) => ReactNode) | ||
| canvas: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').CanvasHTMLAttributes<HTMLCanvasElement>, | ||
| HTMLCanvasElement | ||
| > | ||
| ) => ReactNode) | ||
| caption: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| cite: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| code: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| col: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').ColHTMLAttributes<HTMLTableColElement>, | ||
| HTMLTableColElement | ||
| > | ||
| ) => ReactNode) | ||
| colgroup: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').ColgroupHTMLAttributes<HTMLTableColElement>, | ||
| HTMLTableColElement | ||
| > | ||
| ) => ReactNode) | ||
| data: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').DataHTMLAttributes<HTMLDataElement>, | ||
| HTMLDataElement | ||
| > | ||
| ) => ReactNode) | ||
| datalist: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLDataListElement>, | ||
| HTMLDataListElement | ||
| > | ||
| ) => ReactNode) | ||
| dd: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| del: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').DelHTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| details: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').DetailsHTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| dfn: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| dialog: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').DialogHTMLAttributes<HTMLDialogElement>, | ||
| HTMLDialogElement | ||
| > | ||
| ) => ReactNode) | ||
| div: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLDivElement>, | ||
| HTMLDivElement | ||
| > | ||
| ) => ReactNode) | ||
| dl: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLDListElement>, | ||
| HTMLDListElement | ||
| > | ||
| ) => ReactNode) | ||
| dt: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| em: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| embed: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').EmbedHTMLAttributes<HTMLEmbedElement>, | ||
| HTMLEmbedElement | ||
| > | ||
| ) => ReactNode) | ||
| fieldset: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, | ||
| HTMLFieldSetElement | ||
| > | ||
| ) => ReactNode) | ||
| figcaption: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| figure: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| footer: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| form: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').FormHTMLAttributes<HTMLFormElement>, | ||
| HTMLFormElement | ||
| > | ||
| ) => ReactNode) | ||
| h1: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLHeadingElement>, | ||
| HTMLHeadingElement | ||
| > | ||
| ) => ReactNode) | ||
| h2: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLHeadingElement>, | ||
| HTMLHeadingElement | ||
| > | ||
| ) => ReactNode) | ||
| h3: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLHeadingElement>, | ||
| HTMLHeadingElement | ||
| > | ||
| ) => ReactNode) | ||
| h4: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLHeadingElement>, | ||
| HTMLHeadingElement | ||
| > | ||
| ) => ReactNode) | ||
| h5: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLHeadingElement>, | ||
| HTMLHeadingElement | ||
| > | ||
| ) => ReactNode) | ||
| h6: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLHeadingElement>, | ||
| HTMLHeadingElement | ||
| > | ||
| ) => ReactNode) | ||
| head: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLHeadElement>, | ||
| HTMLHeadElement | ||
| > | ||
| ) => ReactNode) | ||
| header: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| hgroup: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| hr: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLHRElement>, | ||
| HTMLHRElement | ||
| > | ||
| ) => ReactNode) | ||
| html: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HtmlHTMLAttributes<HTMLHtmlElement>, | ||
| HTMLHtmlElement | ||
| > | ||
| ) => ReactNode) | ||
| i: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| iframe: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').IframeHTMLAttributes<HTMLIFrameElement>, | ||
| HTMLIFrameElement | ||
| > | ||
| ) => ReactNode) | ||
| img: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').ImgHTMLAttributes<HTMLImageElement>, | ||
| HTMLImageElement | ||
| > | ||
| ) => ReactNode) | ||
| input: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').InputHTMLAttributes<HTMLInputElement>, | ||
| HTMLInputElement | ||
| > | ||
| ) => ReactNode) | ||
| ins: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').InsHTMLAttributes<HTMLModElement>, | ||
| HTMLModElement | ||
| > | ||
| ) => ReactNode) | ||
| kbd: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| keygen: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').KeygenHTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| label: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').LabelHTMLAttributes<HTMLLabelElement>, | ||
| HTMLLabelElement | ||
| > | ||
| ) => ReactNode) | ||
| legend: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLLegendElement>, | ||
| HTMLLegendElement | ||
| > | ||
| ) => ReactNode) | ||
| li: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').LiHTMLAttributes<HTMLLIElement>, | ||
| HTMLLIElement | ||
| > | ||
| ) => ReactNode) | ||
| link: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').LinkHTMLAttributes<HTMLLinkElement>, | ||
| HTMLLinkElement | ||
| > | ||
| ) => ReactNode) | ||
| main: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| map: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').MapHTMLAttributes<HTMLMapElement>, | ||
| HTMLMapElement | ||
| > | ||
| ) => ReactNode) | ||
| mark: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| menu: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').MenuHTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| menuitem: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| meta: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').MetaHTMLAttributes<HTMLMetaElement>, | ||
| HTMLMetaElement | ||
| > | ||
| ) => ReactNode) | ||
| meter: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').MeterHTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| nav: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| noindex: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| noscript: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| object: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').ObjectHTMLAttributes<HTMLObjectElement>, | ||
| HTMLObjectElement | ||
| > | ||
| ) => ReactNode) | ||
| ol: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').OlHTMLAttributes<HTMLOListElement>, | ||
| HTMLOListElement | ||
| > | ||
| ) => ReactNode) | ||
| optgroup: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').OptgroupHTMLAttributes<HTMLOptGroupElement>, | ||
| HTMLOptGroupElement | ||
| > | ||
| ) => ReactNode) | ||
| option: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').OptionHTMLAttributes<HTMLOptionElement>, | ||
| HTMLOptionElement | ||
| > | ||
| ) => ReactNode) | ||
| output: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').OutputHTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| p: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLParagraphElement>, | ||
| HTMLParagraphElement | ||
| > | ||
| ) => ReactNode) | ||
| param: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').ParamHTMLAttributes<HTMLParamElement>, | ||
| HTMLParamElement | ||
| > | ||
| ) => ReactNode) | ||
| picture: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| pre: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLPreElement>, | ||
| HTMLPreElement | ||
| > | ||
| ) => ReactNode) | ||
| progress: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').ProgressHTMLAttributes<HTMLProgressElement>, | ||
| HTMLProgressElement | ||
| > | ||
| ) => ReactNode) | ||
| q: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').QuoteHTMLAttributes<HTMLQuoteElement>, | ||
| HTMLQuoteElement | ||
| > | ||
| ) => ReactNode) | ||
| rp: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| rt: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| ruby: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| s: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| samp: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| slot: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').SlotHTMLAttributes<HTMLSlotElement>, | ||
| HTMLSlotElement | ||
| > | ||
| ) => ReactNode) | ||
| script: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').ScriptHTMLAttributes<HTMLScriptElement>, | ||
| HTMLScriptElement | ||
| > | ||
| ) => ReactNode) | ||
| section: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| select: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').SelectHTMLAttributes<HTMLSelectElement>, | ||
| HTMLSelectElement | ||
| > | ||
| ) => ReactNode) | ||
| small: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| source: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').SourceHTMLAttributes<HTMLSourceElement>, | ||
| HTMLSourceElement | ||
| > | ||
| ) => ReactNode) | ||
| span: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLSpanElement>, | ||
| HTMLSpanElement | ||
| > | ||
| ) => ReactNode) | ||
| strong: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| style: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').StyleHTMLAttributes<HTMLStyleElement>, | ||
| HTMLStyleElement | ||
| > | ||
| ) => ReactNode) | ||
| sub: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| summary: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| sup: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| table: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').TableHTMLAttributes<HTMLTableElement>, | ||
| HTMLTableElement | ||
| > | ||
| ) => ReactNode) | ||
| template: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLTemplateElement>, | ||
| HTMLTemplateElement | ||
| > | ||
| ) => ReactNode) | ||
| tbody: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLTableSectionElement>, | ||
| HTMLTableSectionElement | ||
| > | ||
| ) => ReactNode) | ||
| td: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').TdHTMLAttributes<HTMLTableDataCellElement>, | ||
| HTMLTableDataCellElement | ||
| > | ||
| ) => ReactNode) | ||
| textarea: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, | ||
| HTMLTextAreaElement | ||
| > | ||
| ) => ReactNode) | ||
| tfoot: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLTableSectionElement>, | ||
| HTMLTableSectionElement | ||
| > | ||
| ) => ReactNode) | ||
| th: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').ThHTMLAttributes<HTMLTableHeaderCellElement>, | ||
| HTMLTableHeaderCellElement | ||
| > | ||
| ) => ReactNode) | ||
| thead: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLTableSectionElement>, | ||
| HTMLTableSectionElement | ||
| > | ||
| ) => ReactNode) | ||
| time: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').TimeHTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| title: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLTitleElement>, | ||
| HTMLTitleElement | ||
| > | ||
| ) => ReactNode) | ||
| tr: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLTableRowElement>, | ||
| HTMLTableRowElement | ||
| > | ||
| ) => ReactNode) | ||
| track: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').TrackHTMLAttributes<HTMLTrackElement>, | ||
| HTMLTrackElement | ||
| > | ||
| ) => ReactNode) | ||
| u: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| ul: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLUListElement>, | ||
| HTMLUListElement | ||
| > | ||
| ) => ReactNode) | ||
| var: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| video: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').VideoHTMLAttributes<HTMLVideoElement>, | ||
| HTMLVideoElement | ||
| > | ||
| ) => ReactNode) | ||
| wbr: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').HTMLAttributes<HTMLElement>, | ||
| HTMLElement | ||
| > | ||
| ) => ReactNode) | ||
| webview: | ||
| | string | ||
| | (( | ||
| props: import('react').DetailedHTMLProps< | ||
| import('react').WebViewHTMLAttributes<HTMLWebViewElement>, | ||
| HTMLWebViewElement | ||
| > | ||
| ) => ReactNode) | ||
| svg: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGSVGElement>) => ReactNode) | ||
| animate: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGElement>) => ReactNode) | ||
| animateMotion: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGElement>) => ReactNode) | ||
| animateTransform: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGElement>) => ReactNode) | ||
| circle: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGCircleElement>) => ReactNode) | ||
| clipPath: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGClipPathElement>) => ReactNode) | ||
| defs: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGDefsElement>) => ReactNode) | ||
| desc: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGDescElement>) => ReactNode) | ||
| ellipse: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGEllipseElement>) => ReactNode) | ||
| feBlend: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFEBlendElement>) => ReactNode) | ||
| feColorMatrix: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEColorMatrixElement> | ||
| ) => ReactNode) | ||
| feComponentTransfer: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEComponentTransferElement> | ||
| ) => ReactNode) | ||
| feComposite: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFECompositeElement> | ||
| ) => ReactNode) | ||
| feConvolveMatrix: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEConvolveMatrixElement> | ||
| ) => ReactNode) | ||
| feDiffuseLighting: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEDiffuseLightingElement> | ||
| ) => ReactNode) | ||
| feDisplacementMap: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEDisplacementMapElement> | ||
| ) => ReactNode) | ||
| feDistantLight: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEDistantLightElement> | ||
| ) => ReactNode) | ||
| feDropShadow: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEDropShadowElement> | ||
| ) => ReactNode) | ||
| feFlood: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFEFloodElement>) => ReactNode) | ||
| feFuncA: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFEFuncAElement>) => ReactNode) | ||
| feFuncB: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFEFuncBElement>) => ReactNode) | ||
| feFuncG: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFEFuncGElement>) => ReactNode) | ||
| feFuncR: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFEFuncRElement>) => ReactNode) | ||
| feGaussianBlur: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEGaussianBlurElement> | ||
| ) => ReactNode) | ||
| feImage: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFEImageElement>) => ReactNode) | ||
| feMerge: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFEMergeElement>) => ReactNode) | ||
| feMergeNode: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEMergeNodeElement> | ||
| ) => ReactNode) | ||
| feMorphology: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEMorphologyElement> | ||
| ) => ReactNode) | ||
| feOffset: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFEOffsetElement>) => ReactNode) | ||
| fePointLight: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFEPointLightElement> | ||
| ) => ReactNode) | ||
| feSpecularLighting: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFESpecularLightingElement> | ||
| ) => ReactNode) | ||
| feSpotLight: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFESpotLightElement> | ||
| ) => ReactNode) | ||
| feTile: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFETileElement>) => ReactNode) | ||
| feTurbulence: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGFETurbulenceElement> | ||
| ) => ReactNode) | ||
| filter: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGFilterElement>) => ReactNode) | ||
| foreignObject: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGForeignObjectElement> | ||
| ) => ReactNode) | ||
| g: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGGElement>) => ReactNode) | ||
| image: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGImageElement>) => ReactNode) | ||
| line: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGLineElement>) => ReactNode) | ||
| linearGradient: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGLinearGradientElement> | ||
| ) => ReactNode) | ||
| marker: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGMarkerElement>) => ReactNode) | ||
| mask: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGMaskElement>) => ReactNode) | ||
| metadata: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGMetadataElement>) => ReactNode) | ||
| mpath: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGElement>) => ReactNode) | ||
| path: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGPathElement>) => ReactNode) | ||
| pattern: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGPatternElement>) => ReactNode) | ||
| polygon: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGPolygonElement>) => ReactNode) | ||
| polyline: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGPolylineElement>) => ReactNode) | ||
| radialGradient: | ||
| | string | ||
| | (( | ||
| props: import('react').SVGProps<SVGRadialGradientElement> | ||
| ) => ReactNode) | ||
| rect: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGRectElement>) => ReactNode) | ||
| stop: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGStopElement>) => ReactNode) | ||
| switch: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGSwitchElement>) => ReactNode) | ||
| symbol: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGSymbolElement>) => ReactNode) | ||
| text: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGTextElement>) => ReactNode) | ||
| textPath: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGTextPathElement>) => ReactNode) | ||
| tspan: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGTSpanElement>) => ReactNode) | ||
| use: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGUseElement>) => ReactNode) | ||
| view: | ||
| | string | ||
| | ((props: import('react').SVGProps<SVGViewElement>) => ReactNode) | ||
| }> | ||
| | undefined | ||
| } |
+117
| /** | ||
| * @typedef {import('mdast').Root} Root | ||
| * @typedef {import('hast-util-sanitize').Schema} Schema | ||
| * @typedef {import('mdast-util-to-hast').Options} ToHastOptions | ||
| * @typedef {import('react').ReactNode} ReactNode | ||
| * @typedef {import('react').ReactElement<unknown>} ReactElement | ||
| * | ||
| * @callback CreateElementLike | ||
| * @param {any} name | ||
| * @param {any} props | ||
| * @param {...ReactNode} children | ||
| * @returns {ReactNode} | ||
| * | ||
| * @typedef Options | ||
| * @property {CreateElementLike} createElement | ||
| * How to create elements or components. | ||
| * You should typically pass `React.createElement`. | ||
| * @property {((props: any) => ReactNode)|undefined} [Fragment] | ||
| * Create fragments instead of an outer `<div>` if available. | ||
| * You should typically pass `React.Fragment`. | ||
| * @property {string|undefined} [prefix='h-'] | ||
| * React key prefix | ||
| * @property {boolean|Schema} [sanitize] | ||
| * Options for `hast-util-sanitize`. | ||
| * @property {ToHastOptions} [toHast={}] | ||
| * Options for `mdast-util-to-hast`. | ||
| * @property {Partial<{[TagName in keyof JSX.IntrinsicElements]: string|((props: JSX.IntrinsicElements[TagName]) => ReactNode)}>} [remarkReactComponents] | ||
| * Override default elements (such as `<a>`, `<p>`, etcetera) by passing an | ||
| * object mapping tag names to components. | ||
| */ | ||
| import {toHast} from 'mdast-util-to-hast' | ||
| import {sanitize} from 'hast-util-sanitize' | ||
| import {toH} from 'hast-to-hyperscript' | ||
| // @ts-expect-error: untyped. | ||
| import tableCellStyle from '@mapbox/hast-util-table-cell-style' | ||
| const own = {}.hasOwnProperty | ||
| const tableElements = new Set(['table', 'thead', 'tbody', 'tfoot', 'tr']) | ||
| /** | ||
| * Plugin to transform markdown to React. | ||
| * | ||
| * @type {import('unified').Plugin<[Options], Root, ReactElement>} | ||
| */ | ||
| export default function remarkReact(options) { | ||
| if (!options || !options.createElement) { | ||
| throw new Error('Missing `createElement` in `options`') | ||
| } | ||
| const createElement = options.createElement | ||
| /** @type {Options['Fragment']} */ | ||
| // @ts-expect-error: to do: deprecate `fragment`. | ||
| const Fragment = options.Fragment || options.fragment | ||
| const clean = options.sanitize !== false | ||
| const scheme = | ||
| clean && typeof options.sanitize !== 'boolean' ? options.sanitize : null | ||
| const toHastOptions = options.toHast || {} | ||
| const components = options.remarkReactComponents || {} | ||
| Object.assign(this, {Compiler: compile}) | ||
| /** | ||
| * @param {keyof JSX.IntrinsicElements} name | ||
| * @param {Record<string, unknown>} props | ||
| * @param {unknown[]} [children] | ||
| * @returns {ReactNode} | ||
| */ | ||
| function h(name, props, children) { | ||
| // Currently, React issues a warning for *any* white space in tables. | ||
| // So we remove the pretty lines for now. | ||
| // See: <https://github.com/facebook/react/pull/7081>. | ||
| // See: <https://github.com/facebook/react/pull/7515>. | ||
| // See: <https://github.com/remarkjs/remark-react/issues/64>. | ||
| /* istanbul ignore next - still works but need to publish `remark-gfm` | ||
| * first. */ | ||
| if (children && tableElements.has(name)) { | ||
| children = children.filter((child) => child !== '\n') | ||
| } | ||
| return createElement( | ||
| own.call(components, name) ? components[name] : name, | ||
| props, | ||
| children | ||
| ) | ||
| } | ||
| // Compile mdast to React. | ||
| /** @type {import('unified').CompilerFunction<Root, ReactNode>} */ | ||
| function compile(node) { | ||
| let tree = toHast(node, toHastOptions) | ||
| if (clean && tree) { | ||
| tree = sanitize(tree, scheme || undefined) | ||
| } | ||
| /** @type {ReactNode} */ | ||
| // @ts-expect-error: assume `name` is a known element. | ||
| let result = toH(h, tableCellStyle(tree), options.prefix) | ||
| // If this compiled to a `<div>`, but fragment are possible, use those. | ||
| if ( | ||
| result && | ||
| typeof result === 'object' && | ||
| 'type' in result && | ||
| result.type === 'div' && | ||
| 'props' in result && | ||
| Fragment | ||
| ) { | ||
| // `children` does exist. | ||
| // type-coverage:ignore-next-line | ||
| result = createElement(Fragment, {}, result.props.children) | ||
| } | ||
| return result | ||
| } | ||
| } |
+2
-76
@@ -1,77 +0,3 @@ | ||
| 'use strict' | ||
| import remarkReact from './lib/index.js' | ||
| module.exports = react | ||
| var toHast = require('mdast-util-to-hast') | ||
| var sanitize = require('hast-util-sanitize') | ||
| var toH = require('hast-to-hyperscript') | ||
| var tableCellStyle = require('@mapbox/hast-util-table-cell-style') | ||
| var globalReact | ||
| var globalCreateElement | ||
| var globalFragment | ||
| /* istanbul ignore next - Hard to test */ | ||
| try { | ||
| globalReact = require('react') | ||
| globalCreateElement = globalReact.createElement | ||
| globalFragment = globalReact.Fragment | ||
| } catch (_) {} | ||
| var own = {}.hasOwnProperty | ||
| var tableElements = ['table', 'thead', 'tbody', 'tfoot', 'tr'] | ||
| function react(options) { | ||
| var settings = options || {} | ||
| var createElement = settings.createElement || globalCreateElement | ||
| var Fragment = settings.fragment || globalFragment | ||
| var clean = settings.sanitize !== false | ||
| var scheme = | ||
| clean && typeof settings.sanitize !== 'boolean' ? settings.sanitize : null | ||
| var toHastOptions = settings.toHast || {} | ||
| var components = settings.remarkReactComponents || {} | ||
| this.Compiler = compile | ||
| // Wrapper around `createElement` to pass components in. | ||
| function h(name, props, children) { | ||
| // Currently, React issues a warning for *any* white space in tables. | ||
| // So we remove the pretty lines for now. | ||
| // See: <https://github.com/facebook/react/pull/7081>. | ||
| // See: <https://github.com/facebook/react/pull/7515>. | ||
| // See: <https://github.com/remarkjs/remark-react/issues/64>. | ||
| /* istanbul ignore next - still works but need to publish `remark-gfm` | ||
| * first. */ | ||
| if (children && tableElements.indexOf(name) !== -1) { | ||
| children = children.filter(function (child) { | ||
| return child !== '\n' | ||
| }) | ||
| } | ||
| return createElement( | ||
| own.call(components, name) ? components[name] : name, | ||
| props, | ||
| children | ||
| ) | ||
| } | ||
| // Compile mdast to React. | ||
| function compile(node) { | ||
| var tree = toHast(node, toHastOptions) | ||
| var root | ||
| if (clean) { | ||
| tree = sanitize(tree, scheme) | ||
| } | ||
| root = toH(h, tableCellStyle(tree), settings.prefix) | ||
| // If this compiled to a `<div>`, but fragment are possible, use those. | ||
| if (root.type === 'div' && Fragment) { | ||
| root = createElement(Fragment, {}, root.props.children) | ||
| } | ||
| return root | ||
| } | ||
| } | ||
| export default remarkReact |
+46
-41
| { | ||
| "name": "remark-react", | ||
| "version": "8.0.0", | ||
| "version": "9.0.0", | ||
| "description": "remark plugin to transform to React", | ||
@@ -40,38 +40,47 @@ "license": "MIT", | ||
| ], | ||
| "sideEffects": false, | ||
| "type": "module", | ||
| "main": "index.js", | ||
| "types": "index.d.ts", | ||
| "files": [ | ||
| "lib/", | ||
| "index.d.ts", | ||
| "index.js" | ||
| ], | ||
| "dependencies": { | ||
| "@mapbox/hast-util-table-cell-style": "^0.1.3", | ||
| "hast-to-hyperscript": "^9.0.0", | ||
| "hast-util-sanitize": "^3.0.0", | ||
| "mdast-util-to-hast": "^10.0.0" | ||
| "@mapbox/hast-util-table-cell-style": "^0.2.0", | ||
| "@types/mdast": "^3.0.0", | ||
| "@types/react": "^17.0.0", | ||
| "hast-to-hyperscript": "^10.0.0", | ||
| "hast-util-sanitize": "^4.0.0", | ||
| "mdast-util-to-hast": "^11.0.0", | ||
| "unified": "^10.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "is-hidden": "^1.0.0", | ||
| "negate": "^1.0.0", | ||
| "nyc": "^15.0.0", | ||
| "@types/react-dom": "^17.0.0", | ||
| "@types/tape": "^4.0.0", | ||
| "c8": "^7.0.0", | ||
| "is-hidden": "^2.0.0", | ||
| "prettier": "^2.0.0", | ||
| "remark": "^13.0.0-alpha.0", | ||
| "remark-cli": "^8.0.0", | ||
| "remark-footnotes": "^2.0.0", | ||
| "remark-frontmatter": "^2.0.0", | ||
| "remark-preset-wooorm": "^7.0.0", | ||
| "react": "^17.0.0", | ||
| "react-dom": "^17.0.0", | ||
| "remark": "^14.0.0", | ||
| "remark-cli": "^10.0.0", | ||
| "remark-footnotes": "^4.0.0", | ||
| "remark-frontmatter": "^4.0.0", | ||
| "remark-preset-wooorm": "^8.0.0", | ||
| "rimraf": "^3.0.0", | ||
| "tape": "^5.0.0", | ||
| "vfile": "^4.0.0", | ||
| "xo": "^0.33.0" | ||
| "type-coverage": "^2.0.0", | ||
| "typescript": "^4.0.0", | ||
| "vfile": "^5.0.0", | ||
| "xo": "^0.44.0" | ||
| }, | ||
| "scripts": { | ||
| "sub-install": "cd test/react/v16 && npm install && cd ../..", | ||
| "format": "remark . -qfo && prettier . --write && xo --fix", | ||
| "test-api": "node test", | ||
| "test-coverage": "nyc --reporter lcov tape test/index.js", | ||
| "test": "npm run sub-install && npm run format && npm run test-coverage" | ||
| "build": "rimraf \"lib/**/*.d.ts\" \"test/**/*.d.ts\" && tsc && type-coverage", | ||
| "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix", | ||
| "test-api": "node --conditions development test/index.js", | ||
| "test-coverage": "c8 --check-coverage --branches 100 --functions 100 --lines 100 --statements 100 --reporter lcov npm run test-api", | ||
| "test": "npm run build && npm run format && npm run test-coverage" | ||
| }, | ||
| "nyc": { | ||
| "check-coverage": true, | ||
| "lines": 100, | ||
| "functions": 100, | ||
| "branches": 100 | ||
| }, | ||
| "prettier": { | ||
@@ -86,17 +95,3 @@ "tabWidth": 2, | ||
| "xo": { | ||
| "prettier": true, | ||
| "esnext": false, | ||
| "rules": { | ||
| "unicorn/no-fn-reference-in-iterator": "off", | ||
| "unicorn/prefer-includes": "off", | ||
| "unicorn/prefer-optional-catch-binding": "off", | ||
| "no-eq-null": "off", | ||
| "eqeqeq": [ | ||
| "error", | ||
| "always", | ||
| { | ||
| "null": "ignore" | ||
| } | ||
| ] | ||
| } | ||
| "prettier": true | ||
| }, | ||
@@ -107,3 +102,13 @@ "remarkConfig": { | ||
| ] | ||
| }, | ||
| "typeCoverage": { | ||
| "atLeast": 100, | ||
| "detail": true, | ||
| "strict": true, | ||
| "ignoreCatch": true, | ||
| "#": "needed `any`s", | ||
| "ignoreFiles": [ | ||
| "lib/index.d.ts" | ||
| ] | ||
| } | ||
| } |
+33
-29
@@ -35,2 +35,5 @@ # remark-react | ||
| This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c): | ||
| Node 12+ is needed to use it and it must be `import`ed instead of `require`d. | ||
| [npm][]: | ||
@@ -47,5 +50,5 @@ | ||
| import ReactDom from 'react-dom' | ||
| import unified from 'unified' | ||
| import parse from 'remark-parse' | ||
| import remark2react from 'remark-react' | ||
| import {unified} from 'unified' | ||
| import remarkParse from 'remark-parse' | ||
| import remarkReact from 'remark-react' | ||
@@ -55,8 +58,10 @@ class App extends React.Component { | ||
| super() | ||
| this.state = { text: '# hello world' } | ||
| this.state = {text: '# hello world'} | ||
| this.onChange = this.onChange.bind(this) | ||
| } | ||
| onChange(e) { | ||
| this.setState({ text: e.target.value }) | ||
| onChange(event) { | ||
| this.setState({text: event.target.value}) | ||
| } | ||
| render() { | ||
@@ -69,4 +74,4 @@ return ( | ||
| unified() | ||
| .use(parse) | ||
| .use(remark2react) | ||
| .use(remarkParse) | ||
| .use(remarkReact, React) | ||
| .processSync(this.state.text).result | ||
@@ -80,3 +85,3 @@ } | ||
| ReactDom.render(<App />, document.getElementById('root')) | ||
| ReactDom.render(<App />, document.querySelector('#root')) | ||
| ``` | ||
@@ -86,4 +91,7 @@ | ||
| ### `remark().use(react[, options])` | ||
| This package exports no identifiers. | ||
| The default export is `remarkReact`. | ||
| ### `unified().use(remarkReact, options)` | ||
| Transform Markdown to React. | ||
@@ -97,7 +105,12 @@ | ||
| > ℹ️ In [`unified@9.0.0`][unified-9], the result of `.process` changed from | ||
| > ~~`file.contents`~~ to `file.result`. | ||
| ##### `options` | ||
| ###### `options.createElement` | ||
| How to create elements or components (`Function`, required). | ||
| ###### `options.Fragment` | ||
| Create fragments instead of an outer `<div>` if available (`unknown`). | ||
| ###### `options.toHast` | ||
@@ -125,12 +138,2 @@ | ||
| ###### `options.createElement` | ||
| How to create elements or components (`Function`). | ||
| Default: `require('react').createElement` | ||
| ###### `options.fragment` | ||
| Create fragments instead of an outer `<div>` if available (`Function`, default: | ||
| `require('react').Fragment`). | ||
| ###### `options.remarkReactComponents` | ||
@@ -153,4 +156,7 @@ | ||
| See how to integrate with other remark plugins in the [Integrations][] section | ||
| of `remark-html`. | ||
| `remark-react` is similar in configuration to its alternative `remark-html`. | ||
| You’ll want to use one or the other but setting up plugins for either is done | ||
| in the same way. | ||
| As such, you can see how to integrate with other remark plugins in the | ||
| [Integrations][] section of `remark-html`’s documentation. | ||
@@ -180,5 +186,5 @@ ## Security | ||
| [build-badge]: https://img.shields.io/travis/remarkjs/remark-react/main.svg | ||
| [build-badge]: https://github.com/remarkjs/remark-react/workflows/main/badge.svg | ||
| [build]: https://travis-ci.org/remarkjs/remark-react | ||
| [build]: https://github.com/remarkjs/remark-react/actions | ||
@@ -252,3 +258,1 @@ [coverage-badge]: https://img.shields.io/codecov/c/github/remarkjs/remark-react.svg | ||
| [unified]: https://github.com/unifiedjs/unified | ||
| [unified-9]: https://github.com/unifiedjs/unified/releases/tag/9.0.0 |
| # Changelog | ||
| See [GitHub Releases][releases] for the changelog. | ||
| [releases]: https://github.com/remarkjs/remark-react/releases |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
53389
306.31%- Number of package files
7
40%- Lines of code
1315
2020.97%- Number of lines in readme file
248
1.64%- Is type module
Yes
NaNWorsened metrics
- Dependency count
7
75%- Dev dependency count
18
50%- Number of medium supply chain risk alerts
1
Infinity%Dependency changes
+ Added
@types/mdast@^3.0.0+ Added
@types/react@^17.0.0+ Added
unified@^10.0.0+ Added
@mapbox/hast-util-table-cell-style@0.2.1(transitive)+ Added
@types/hast@2.3.10(transitive)+ Added
@types/mdurl@1.0.5(transitive)+ Added
@types/prop-types@15.7.15(transitive)+ Added
@types/react@17.0.91(transitive)+ Added
@types/scheduler@0.16.8(transitive)+ Added
bail@2.0.2(transitive)+ Added
comma-separated-tokens@2.0.3(transitive)+ Added
csstype@3.2.3(transitive)+ Added
extend@3.0.2(transitive)+ Added
hast-to-hyperscript@10.0.3(transitive)+ Added
hast-util-sanitize@4.1.0(transitive)+ Added
is-buffer@2.0.5(transitive)+ Added
is-plain-obj@4.1.0(transitive)+ Added
mdast-util-definitions@5.1.2(transitive)+ Added
mdast-util-to-hast@11.3.0(transitive)+ Added
property-information@6.5.0(transitive)+ Added
space-separated-tokens@2.0.2(transitive)+ Added
style-to-object@0.4.4(transitive)+ Added
trough@2.2.0(transitive)+ Added
unified@10.1.2(transitive)+ Added
unist-builder@3.0.1(transitive)+ Added
unist-util-generated@2.0.1(transitive)+ Added
unist-util-is@5.2.1(transitive)+ Added
unist-util-position@4.0.4(transitive)+ Added
unist-util-stringify-position@3.0.3(transitive)+ Added
unist-util-visit@4.1.2(transitive)+ Added
unist-util-visit-parents@5.1.3(transitive)+ Added
vfile@5.3.7(transitive)+ Added
vfile-message@3.1.4(transitive)+ Added
web-namespaces@2.0.1(transitive)- Removed
@mapbox/hast-util-table-cell-style@0.1.3(transitive)- Removed
comma-separated-tokens@1.0.8(transitive)- Removed
hast-to-hyperscript@9.0.1(transitive)- Removed
hast-util-sanitize@3.0.2(transitive)- Removed
mdast-util-definitions@4.0.0(transitive)- Removed
mdast-util-to-hast@10.2.0(transitive)- Removed
property-information@5.6.0(transitive)- Removed
space-separated-tokens@1.1.5(transitive)- Removed
style-to-object@0.3.0(transitive)- Removed
unist-builder@2.0.3(transitive)- Removed
unist-util-generated@1.1.6(transitive)- Removed
unist-util-is@4.1.0(transitive)- Removed
unist-util-position@3.1.0(transitive)- Removed
unist-util-visit@2.0.3(transitive)- Removed
unist-util-visit-parents@3.1.1(transitive)- Removed
web-namespaces@1.1.4(transitive)- Removed
xtend@4.0.2(transitive)Updated
hast-to-hyperscript@^10.0.0Updated
hast-util-sanitize@^4.0.0Updated
mdast-util-to-hast@^11.0.0