{"_id":"remark-mdx-disable-explicit-jsx","_rev":"1-67a20435e8eae1eb9d48a926b3cd9685","name":"remark-mdx-disable-explicit-jsx","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"remark-mdx-disable-explicit-jsx","version":"0.1.0","description":"Remark plugin to reenable styling of html tags with 'components' prop","keywords":["mdx","markdown","mdxast"],"author":{"name":"Alexey Ivanov","email":"mail@alexeyivanov.info"},"repository":{"type":"git","url":"git+https://github.com/iAdramelk/remark-mdx-disable-explicit-jsx.git"},"license":"MIT","type":"module","main":"index.js","types":"index.d.ts","sideEffects":false,"scripts":{"test":"c8 uvu test","format":"eslint . --fix && prettier . -w"},"nano-staged":{"*.js":["eslint --fix","prettier --w"],"*":"prettier --w"},"simple-git-hooks":{"pre-commit":"./node_modules/.bin/nano-staged"},"dependencies":{"@types/hast":"^2.3.4","unified":"^10.1.1","unist-util-visit":"^4.1.0"},"devDependencies":{"@mdx-js/mdx":"^2.0.0-rc.2","c8":"^7.11.0","eslint":"^8.7.0","nano-staged":"^0.5.0","prettier":"^2.5.1","react":"^17.0.2","react-dom":"^17.0.2","simple-git-hooks":"^2.7.0","uvu":"^0.5.3","vfile":"^5.3.0","xdm":"^3.3.3"},"gitHead":"14af13829f8f0d3a8dc473bfb7efc4d7dde9658b","bugs":{"url":"https://github.com/iAdramelk/remark-mdx-disable-explicit-jsx/issues"},"homepage":"https://github.com/iAdramelk/remark-mdx-disable-explicit-jsx#readme","_id":"remark-mdx-disable-explicit-jsx@0.1.0","_nodeVersion":"17.3.1","_npmVersion":"8.3.0","dist":{"integrity":"sha512-NC7NUbu4bExZnsWDTJE3UhBRZujW3gyqMufhTHn2GHhZ5LetWzyieyuZerBPdSniLx4d7QKDbf+d3u/qmMGyaQ==","shasum":"0100242914cbf54e42da987be547f71dc5473d5d","tarball":"https://registry.npmjs.org/remark-mdx-disable-explicit-jsx/-/remark-mdx-disable-explicit-jsx-0.1.0.tgz","fileCount":5,"unpackedSize":7101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7XDDCRA9TVsSAnZWagAAquUQAJENn6gEL7XixA1rd6h2\n0AqYc4ZuJRLJMdL8KsNfbiquJz/0e3szneZK63R4gGs/qWjRNON5c2N3vbFA\n7hH1kCxNe8efsFPUBMcY+1KHbYuFyr5vG+LqYlmplMWFRZMoNqX1GaDKgRV3\nOliEoltG7m9/yG/CLJqKemdl2uuALcI/1ULhAhbFXyaiAuNPwViysR+/LDDx\nvM90EDpyB9NIAbqO9XDQHJ9B6QueEgoMEelea3t1x7Oi2D+uUiVq8OkyLPVl\navYrkqPcwazPmGqKbByAp1g03Rwee472xGRaC14JmB90NoL75C0mmhbnv414\nOeTtLPvgshxNJc2KZUaDMw+ikQgBA77WHNba13iYfIYbdYX8eCRP/lAjXJsn\nQdy/ymlG1JD73dSFJGC7WIfqIcyZnQlbpZUUTEiL9nRTHZ6NKN29SihbRBsh\ndNkHlgyMPPUFJ9DngjhZpf2p2KkrEmIBLVsNP43pWQl34fX6OqoNugHwbFr7\nBUn9U3nkgeMOPqOwzYD2s76clK7Hi4s0sIpPNl8mTLuG2PCFsjTi9uE/jIne\nvIsixyCLUwgVln/9HzJSPe3VSpDSxQZO8tl4EDoQ5+IKlh5Iz4SbkJChS5dc\n+vjKIp8lhr3KZrKRbOIGtik5/Yrac2B0A8r21p445vz1oRo7jBP9rBHZgMWu\nwgGS\r\n=wLXz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICL0xTX87Gk8qpK9Kxep5lSAEMkKOKZACnA+cV4ve6j5AiEA2ga6EwjDBwZ8w1fLbfrC3Y8nFu50GwxXIM5QbyAmSao="}]},"_npmUser":{"name":"iadramelk","email":"iadramelk@gmail.com"},"directories":{},"maintainers":[{"name":"iadramelk","email":"iadramelk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/remark-mdx-disable-explicit-jsx_0.1.0_1642950851812_0.8478173840902712"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-23T15:14:11.812Z","0.1.0":"2022-01-23T15:14:11.953Z","modified":"2022-05-15T18:08:50.414Z"},"maintainers":[{"name":"iadramelk","email":"iadramelk@gmail.com"}],"description":"Remark plugin to reenable styling of html tags with 'components' prop","homepage":"https://github.com/iAdramelk/remark-mdx-disable-explicit-jsx#readme","keywords":["mdx","markdown","mdxast"],"repository":{"type":"git","url":"git+https://github.com/iAdramelk/remark-mdx-disable-explicit-jsx.git"},"author":{"name":"Alexey Ivanov","email":"mail@alexeyivanov.info"},"bugs":{"url":"https://github.com/iAdramelk/remark-mdx-disable-explicit-jsx/issues"},"license":"MIT","readme":"[remark](https://github.com/remarkjs/remark) plugin to reenable styling\nof html tags with 'components' prop in [mdx v2](https://mdxjs.com/).\n\n## What is this?\n\nLet's say you have the following `mdx` file:\n\n```mdx\n

Hello one!

\n\n## Hello two!\n```\n\nAnd you use it in your react code like this:\n\n```jsx\nimport MDXComponent from \"./text.mdx\";\n\nconst componetns = {\n h2: (props) =>

,\n};\n\nexport default function () {\n return ;\n}\n```\n\nThen, in mdx v1 and mdx v2 before `mdx@2.0.0-rc.1`, generated html on the page will be this:\n\n```html\n

Hello one!

\n\n

Hello two!

\n```\n\nBut this behavior was changed in `mdx@2.0.0-rc.1`. With this version of mdx, the result will be:\n\n```html\n

Hello one!

\n\n

Hello two!

\n```\n\nFor the reasons why it was changed, check [this issue](https://github.com/mdx-js/mdx/issues/821).\n\nBut now we have a problem because there are a lot of use cases that require you\nto use html in your markdown. For example:\n\n```html\nYou can't add params to links without html.\n\n\n \n \n \n \n \n
\n
    \n
  • You can't use lists inside the table without html.
    • \n
\n
\n```\n\nSo, if you have one of these use cases and want to reenable old behavior, you can use this plugin for it.\n\n## Install\n\n**This package is ESM only.**\n\nInstall with `npm`:\n\n```\nnpm install remark-mdx-disable-explicit-jsx\n```\n\nInstall with `yarn`:\n\n```\nyarn add remark-mdx-disable-explicit-jsx\n```\n\n### Use\n\nTo use with `@mdx-js/loader`, add the plugin to the loader's options inside `webbpack`'s config:\n\n```js\nimport remarkMdxDisableExplicitJsx from \"remark-mdx-disable-explicit-jsx\";\n\n// ...\n\n{\n test: /\\.mdx?$/,\n use: [\n {\n loader: '@mdx-js/loader',\n options: {\n remarkPlugins: [\n remarkMdxDisableExplicitJsx,\n ]\n }\n }\n ]\n}\n```\n\nTo use directly with `@mdx-js/mdx` `compile`, add the plugin to the options:\n\n```js\nimport { compile } from \"@mdx-js/mdx\";\nimport remarkMdxDisableExplicitJsx from \"remark-mdx-disable-explicit-jsx\";\n\nawait compile(file, { remarkPlugins: [remarkMdxDisableExplicitJsx] });\n```\n\nTo use the plugin with options, add them this way:\n\n```js\nimport remarkMdxDisableExplicitJsx from \"remark-mdx-disable-explicit-jsx\";\n\n// ...\n\n{\n test: /\\.mdx?$/,\n use: [\n {\n loader: '@mdx-js/loader',\n options: {\n remarkPlugins: [\n [remarkMdxDisableExplicitJsx, { whiteList: [\"h1\", \"a\"] }],\n ]\n }\n }\n ]\n}\n```\n\n## Options\n\nIf the plugin is used without options, it will enable styling for all html tags. If you only\nwant to enable it for some tags, you can use `whiteList` and `blackList` options.\n\n`options.whiteList`\n\nAn array of html tag names. For example, to make `h1` and `a` stylable, use these options:\n\n```\n{\n whiteList: [\"h1\", \"a\"],\n}\n```\n\n`options.blackList`\n\nAn array of html tag names. For example, to style everything, but `h1`, use these options:\n\n```\n{\n blackList: [\"h1\"],\n}\n```\n","readmeFilename":"README.md"}