safe-mdx 0.0.4 → 0.0.6

package/src/safe-mdx.tsx

@@ -1,22 +1,34 @@
 import React, { cloneElement } from 'react'
 import { htmlToJsx } from 'html-to-jsx-transform'
-import { Node, Parent } from 'mdast'
+import { Node, Parent, RootContent } from 'mdast'
 import remarkFrontmatter from 'remark-frontmatter'
 
-import { Root, RootContent } from 'mdast'
+import { Root, Yaml } from 'mdast'
 import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx'
 import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkMdx from 'remark-mdx'
 
 import { Fragment, ReactNode } from 'react'
+import { remarkMarkAndUnravel } from './plugins.js'
 
 type MyRootContent = RootContent | Root
 
-const mdxParser = remark()
+const processor = remark()
+    .use(remarkMdx)
+    .use(remarkMarkAndUnravel)
     .use(remarkFrontmatter, ['yaml', 'toml'])
     .use(remarkGfm)
-    .use(remarkMdx) as any
+    .use(() => {
+        return (tree, file) => {
+            file.data.ast = tree
+        }
+    })
+
+export function mdxParse(code: string) {
+    const file = processor.processSync(code)
+    return file.data.ast as Root
+}
 
 void React
 
@@ -30,54 +42,6 @@ export function SafeMdxRenderer({
     return result
 }
 
-const nativeTags = [
-    'blockquote',
-    'strong',
-    'em',
-    'del',
-    'hr',
-    'a',
-    'b',
-    'br',
-    'button',
-    'div',
-    'form',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'head',
-    'iframe',
-    'img',
-    'input',
-    'label',
-    'li',
-    'link',
-    'ol',
-    'p',
-    'path',
-    'picture',
-    'script',
-    'section',
-    'source',
-    'span',
-    'sub',
-    'sup',
-    'svg',
-    'table',
-    'tbody',
-    'td',
-    'th',
-    'thead',
-    'tr',
-    'ul',
-    'video',
-    'code',
-    'pre',
-] as const
-
-type ComponentsMap = { [k in (typeof nativeTags)[number]]?: any }
-
 export class MdastToJsx {
     mdast: MyRootContent
     str: string
@@ -90,7 +54,8 @@ export class MdastToJsx {
         components = {} as ComponentsMap,
     }) {
         this.str = code
-        this.mdast = mdast || mdxParser.parse(code)
+        this.mdast = mdast || mdxParse(code)
+
         this.c = {
             ...Object.fromEntries(
                 nativeTags.map((tag) => {
@@ -228,7 +193,7 @@ export class MdastToJsx {
             case 'heading': {
                 const level = node.depth
 
-                const Tag: any = `h${level}`
+                const Tag = this.c[`h${level}`] ?? `h${level}`
                 return <Tag>{this.mapMdastChildren(node)}</Tag>
             }
             case 'paragraph': {
@@ -250,11 +215,27 @@ export class MdastToJsx {
                 }
                 const language = node.lang || ''
                 const code = node.value
-                return (
+                const codeBlock = (className?: string) => (
                     <this.c.pre>
-                        <this.c.code>{code}</this.c.code>
+                        <this.c.code className={className}>{code}</this.c.code>
                     </this.c.pre>
                 )
+
+                if (language) {
+                    if (
+                        supportedLanguagesSet.has(
+                            language as (typeof supportedLanguages)[number],
+                        )
+                    ) {
+                        return codeBlock(`language-${language}`)
+                    } else {
+                        this.errors.push({
+                            message: `Unsupported language ${language}`,
+                        })
+                        return codeBlock()
+                    }
+                }
+                return codeBlock()
             }
 
             case 'list': {
@@ -526,3 +507,333 @@ function safeJsonParse(str: string) {
         return null
     }
 }
+
+const nativeTags = [
+    'blockquote',
+    'strong',
+    'em',
+    'del',
+    'hr',
+    'a',
+    'b',
+    'br',
+    'button',
+    'div',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'head',
+    'iframe',
+    'img',
+    'input',
+    'label',
+    'li',
+    'link',
+    'ol',
+    'p',
+    'path',
+    'picture',
+    'script',
+    'section',
+    'source',
+    'span',
+    'sub',
+    'sup',
+    'svg',
+    'table',
+    'tbody',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+    'ul',
+    'video',
+    'code',
+    'pre',
+] as const
+
+const supportedLanguages = [
+    'abap',
+    'abnf',
+    'actionscript',
+    'ada',
+    'agda',
+    'al',
+    'antlr4',
+    'apacheconf',
+    'apex',
+    'apl',
+    'applescript',
+    'aql',
+    'arduino',
+    'arff',
+    'asciidoc',
+    'asm6502',
+    'asmatmel',
+    'aspnet',
+    'autohotkey',
+    'autoit',
+    'avisynth',
+    'avro-idl',
+    'bash',
+    'basic',
+    'batch',
+    'bbcode',
+    'bicep',
+    'birb',
+    'bison',
+    'bnf',
+    'brainfuck',
+    'brightscript',
+    'bro',
+    'bsl',
+    'c',
+    'cfscript',
+    'chaiscript',
+    'cil',
+    'clike',
+    'clojure',
+    'cmake',
+    'cobol',
+    'coffeescript',
+    'concurnas',
+    'coq',
+    'cpp',
+    'crystal',
+    'csharp',
+    'cshtml',
+    'csp',
+    'css-extras',
+    'css',
+    'csv',
+    'cypher',
+    'd',
+    'dart',
+    'dataweave',
+    'dax',
+    'dhall',
+    'diff',
+    'django',
+    'dns-zone-file',
+    'docker',
+    'dot',
+    'ebnf',
+    'editorconfig',
+    'eiffel',
+    'ejs',
+    'elixir',
+    'elm',
+    'erb',
+    'erlang',
+    'etlua',
+    'excel-formula',
+    'factor',
+    'false',
+    'firestore-security-rules',
+    'flow',
+    'fortran',
+    'fsharp',
+    'ftl',
+    'gap',
+    'gcode',
+    'gdscript',
+    'gedcom',
+    'gherkin',
+    'git',
+    'glsl',
+    'gml',
+    'gn',
+    'go-module',
+    'go',
+    'graphql',
+    'groovy',
+    'haml',
+    'handlebars',
+    'haskell',
+    'haxe',
+    'hcl',
+    'hlsl',
+    'hoon',
+    'hpkp',
+    'hsts',
+    'http',
+    'ichigojam',
+    'icon',
+    'icu-message-format',
+    'idris',
+    'iecst',
+    'ignore',
+    'inform7',
+    'ini',
+    'io',
+    'j',
+    'java',
+    'javadoc',
+    'javadoclike',
+    'javascript',
+    'javastacktrace',
+    'jexl',
+    'jolie',
+    'jq',
+    'js-extras',
+    'js-templates',
+    'jsdoc',
+    'json',
+    'json5',
+    'jsonp',
+    'jsstacktrace',
+    'jsx',
+    'julia',
+    'keepalived',
+    'keyman',
+    'kotlin',
+    'kumir',
+    'kusto',
+    'latex',
+    'latte',
+    'less',
+    'lilypond',
+    'liquid',
+    'lisp',
+    'livescript',
+    'llvm',
+    'log',
+    'lolcode',
+    'lua',
+    'magma',
+    'makefile',
+    'markdown',
+    'markup-templating',
+    'markup',
+    'matlab',
+    'maxscript',
+    'mel',
+    'mermaid',
+    'mizar',
+    'mongodb',
+    'monkey',
+    'moonscript',
+    'n1ql',
+    'n4js',
+    'nand2tetris-hdl',
+    'naniscript',
+    'nasm',
+    'neon',
+    'nevod',
+    'nginx',
+    'nim',
+    'nix',
+    'nsis',
+    'objectivec',
+    'ocaml',
+    'opencl',
+    'openqasm',
+    'oz',
+    'parigp',
+    'parser',
+    'pascal',
+    'pascaligo',
+    'pcaxis',
+    'peoplecode',
+    'perl',
+    'php-extras',
+    'php',
+    'phpdoc',
+    'plsql',
+    'powerquery',
+    'powershell',
+    'processing',
+    'prolog',
+    'promql',
+    'properties',
+    'protobuf',
+    'psl',
+    'pug',
+    'puppet',
+    'pure',
+    'purebasic',
+    'purescript',
+    'python',
+    'q',
+    'qml',
+    'qore',
+    'qsharp',
+    'r',
+    'racket',
+    'reason',
+    'regex',
+    'rego',
+    'renpy',
+    'rest',
+    'rip',
+    'roboconf',
+    'robotframework',
+    'ruby',
+    'rust',
+    'sas',
+    'sass',
+    'scala',
+    'scheme',
+    'scss',
+    'shell-session',
+    'smali',
+    'smalltalk',
+    'smarty',
+    'sml',
+    'solidity',
+    'solution-file',
+    'soy',
+    'sparql',
+    'splunk-spl',
+    'sqf',
+    'sql',
+    'squirrel',
+    'stan',
+    'stylus',
+    'swift',
+    'systemd',
+    't4-cs',
+    't4-templating',
+    't4-vb',
+    'tap',
+    'tcl',
+    'textile',
+    'toml',
+    'tremor',
+    'tsx',
+    'tt2',
+    'turtle',
+    'twig',
+    'typescript',
+    'typoscript',
+    'unrealscript',
+    'uorazor',
+    'uri',
+    'v',
+    'vala',
+    'vbnet',
+    'velocity',
+    'verilog',
+    'vhdl',
+    'vim',
+    'visual-basic',
+    'warpscript',
+    'wasm',
+    'web-idl',
+    'wiki',
+    'wolfram',
+    'wren',
+    'xeora',
+    'xml-doc',
+    'xojo',
+    'xquery',
+    'yaml',
+    'yang',
+    'zig',
+] as const
+const supportedLanguagesSet = new Set(supportedLanguages)
+
+type ComponentsMap = { [k in (typeof nativeTags)[number]]?: any }

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export * from './safe-mdx';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -1,2 +0,0 @@
-export * from './safe-mdx';
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/src/index.ts

@@ -1 +0,0 @@
-export * from './safe-mdx'