Change to throw errors for removed props

Author: wooorm

lib/index.js

@@ -27,10 +27,12 @@
  *
  * @typedef Deprecation
  *   Deprecation.
+ * @property {string} from
+ *   Old field.
  * @property {string} id
  *   ID in readme.
- * @property {string} [to]
- *   Field to use instead (optional).
+ * @property {keyof Options} [to]
+ *   New field.
  *
  * @typedef Options
  *   Configuration.
@@ -93,6 +95,7 @@
  *   Transformed URL (optional).
  */
 
+import {unreachable} from 'devlop'
 import {toJsxRuntime} from 'hast-util-to-jsx-runtime'
 // @ts-expect-error: untyped.
 import {Fragment, jsx, jsxs} from 'react/jsx-runtime'
@@ -114,31 +117,37 @@ const emptyPlugins = []
 const emptyRemarkRehypeOptions = {allowDangerousHtml: true}
 
 // Mutable because we `delete` any time it’s used and a message is sent.
-/** @type {Record<string, Readonly<Deprecation>>} */
-const deprecated = {
-  astPlugins: {id: 'remove-buggy-html-in-markdown-parser'},
-  allowDangerousHtml: {id: 'remove-buggy-html-in-markdown-parser'},
-  allowNode: {
+/** @type {ReadonlyArray<Readonly<Deprecation>>} */
+const deprecations = [
+  {from: 'astPlugins', id: 'remove-buggy-html-in-markdown-parser'},
+  {from: 'allowDangerousHtml', id: 'remove-buggy-html-in-markdown-parser'},
+  {
+    from: 'allowNode',
     id: 'replace-allownode-allowedtypes-and-disallowedtypes',
     to: 'allowElement'
   },
-  allowedTypes: {
+  {
+    from: 'allowedTypes',
     id: 'replace-allownode-allowedtypes-and-disallowedtypes',
     to: 'allowedElements'
   },
-  disallowedTypes: {
+  {
+    from: 'disallowedTypes',
     id: 'replace-allownode-allowedtypes-and-disallowedtypes',
     to: 'disallowedElements'
   },
-  escapeHtml: {id: 'remove-buggy-html-in-markdown-parser'},
-  includeElementIndex: {id: '#remove-includeelementindex-option'},
-  includeNodeIndex: {id: 'change-includenodeindex-to-includeelementindex'},
-  plugins: {id: 'change-plugins-to-remarkplugins', to: 'remarkPlugins'},
-  rawSourcePos: {id: '#remove-rawsourcepos-option'},
-  renderers: {id: 'change-renderers-to-components', to: 'components'},
-  source: {id: 'change-source-to-children', to: 'children'},
-  sourcePos: {id: '#remove-sourcepos-option'}
-}
+  {from: 'escapeHtml', id: 'remove-buggy-html-in-markdown-parser'},
+  {from: 'includeElementIndex', id: '#remove-includeelementindex-option'},
+  {
+    from: 'includeNodeIndex',
+    id: 'change-includenodeindex-to-includeelementindex'
+  },
+  {from: 'plugins', id: 'change-plugins-to-remarkplugins', to: 'remarkPlugins'},
+  {from: 'rawSourcePos', id: '#remove-rawsourcepos-option'},
+  {from: 'renderers', id: 'change-renderers-to-components', to: 'components'},
+  {from: 'source', id: 'change-source-to-children', to: 'children'},
+  {from: 'sourcePos', id: '#remove-sourcepos-option'}
+]
 
 /**
  * Component to render markdown.
@@ -183,29 +192,35 @@ export function Markdown(options) {
   if (typeof children === 'string') {
     file.value = children
   } else {
-    console.warn(
-      '[react-markdown] Warning: please pass a string as `children` (not: `' +
+    unreachable(
+      'Unexpected value `' +
         children +
-        '`)'
+        '` for `children` prop, expected `string`'
     )
   }
 
   if (allowedElements && disallowedElements) {
-    throw new TypeError(
+    unreachable(
       'Unexpected combined `allowedElements` and `disallowedElements`, expected one or the other'
     )
   }
 
-  for (const key in deprecated) {
+  for (const deprecation of deprecations) {
     // To do: use `Object.hasOwn`.
-    if (own.call(deprecated, key) && own.call(options, key)) {
-      const deprecation = deprecated[key]
-      console.warn(
-        `[react-markdown] Warning: please ${
-          deprecation.to ? `use \`${deprecation.to}\` instead of` : 'remove'
-        } \`${key}\` (see <${changelog}#${deprecation.id}> for more info)`
+    if (own.call(options, deprecation.from)) {
+      unreachable(
+        'Unexpected `' +
+          deprecation.from +
+          '` prop, ' +
+          (deprecation.to
+            ? 'use `' + deprecation.to + '` instead'
+            : 'remove it') +
+          ' (see <' +
+          changelog +
+          '#' +
+          deprecation.id +
+          '> for more info)'
       )
-      delete deprecated[key]
     }
   }
 

package.json

@@ -81,6 +81,7 @@
   "dependencies": {
     "@types/hast": "^3.0.0",
     "@types/prop-types": "^15.0.0",
+    "devlop": "^1.0.0",
     "hast-util-to-jsx-runtime": "^2.0.0",
     "mdast-util-to-hast": "^13.0.0",
     "prop-types": "^15.0.0",

test.jsx

@@ -25,79 +25,25 @@ test('react-markdown', async function (t) {
     assert.equal(asHtml(<Markdown children="a" />), '<p>a</p>')
   })
 
-  await t.test('should warn w/ `source`', function () {
-    const warn = console.warn
-    /** @type {unknown} */
-    let message
-
-    console.warn = capture
-
-    // @ts-expect-error: check how the runtime handles untyped `source`.
-    assert.equal(asHtml(<Markdown source="a" />), '')
-    assert.equal(
-      message,
-      '[react-markdown] Warning: please use `children` instead of `source` (see <https://github.com/remarkjs/react-markdown/blob/main/changelog.md#change-source-to-children> for more info)'
-    )
-
-    console.warn = warn
-
-    /**
-     * @param {unknown} d
-     * @returns {undefined}
-     */
-    function capture(d) {
-      message = d
-    }
+  await t.test('should throw w/ `source`', function () {
+    assert.throws(function () {
+      // @ts-expect-error: check how the runtime handles untyped `source`.
+      asHtml(<Markdown source="a" />)
+    }, /Unexpected `source` prop, use `children` instead/)
   })
 
-  await t.test('should warn w/ non-string children (number)', function () {
-    const {error, warn} = console
-    /** @type {unknown} */
-    let message
-
-    console.warn = capture
-
-    // @ts-expect-error: check how the runtime handles invalid `children`.
-    assert.equal(asHtml(<Markdown children={1} />), '')
-    assert.equal(
-      message,
-      '[react-markdown] Warning: please pass a string as `children` (not: `1`)'
-    )
-
-    console.warn = warn
-
-    /**
-     * @param {unknown} d
-     * @returns {undefined}
-     */
-    function capture(d) {
-      message = d
-    }
+  await t.test('should throw w/ non-string children (number)', function () {
+    assert.throws(function () {
+      // @ts-expect-error: check how the runtime handles invalid `children`.
+      asHtml(<Markdown children={1} />)
+    }, /Unexpected value `1` for `children` prop, expected `string`/)
   })
 
-  await t.test('should warn w/ non-string children (boolean)', function () {
-    const {error, warn} = console
-    /** @type {unknown} */
-    let message
-
-    console.warn = capture
-
-    // @ts-expect-error: check how the runtime handles invalid `children`.
-    assert.equal(asHtml(<Markdown children={true} />), '')
-    assert.equal(
-      message,
-      '[react-markdown] Warning: please pass a string as `children` (not: `true`)'
-    )
-
-    console.warn = warn
-
-    /**
-     * @param {unknown} d
-     * @returns {undefined}
-     */
-    function capture(d) {
-      message = d
-    }
+  await t.test('should throw w/ non-string children (boolean)', function () {
+    assert.throws(function () {
+      // @ts-expect-error: check how the runtime handles invalid `children`.
+      asHtml(<Markdown children={true} />)
+    }, /Unexpected value `true` for `children` prop, expected `string`/)
   })
 
   await t.test('should support `null` as children', function () {
@@ -109,31 +55,10 @@ test('react-markdown', async function (t) {
   })
 
   await t.test('should warn w/ `allowDangerousHtml`', function () {
-    const warn = console.warn
-    /** @type {unknown} */
-    let message
-
-    console.warn = capture
-
-    assert.equal(
+    assert.throws(function () {
       // @ts-expect-error: check how the runtime handles deprecated `allowDangerousHtml`.
-      asHtml(<Markdown allowDangerousHtml children="a" />),
-      '<p>a</p>'
-    )
-    assert.equal(
-      message,
-      '[react-markdown] Warning: please remove `allowDangerousHtml` (see <https://github.com/remarkjs/react-markdown/blob/main/changelog.md#remove-buggy-html-in-markdown-parser> for more info)'
-    )
-
-    console.warn = warn
-
-    /**
-     * @param {unknown} d
-     * @returns {undefined}
-     */
-    function capture(d) {
-      message = d
-    }
+      asHtml(<Markdown allowDangerousHtml />)
+    }, /Unexpected `allowDangerousHtml` prop, remove it/)
   })
 
   await t.test('should support `className`', function () {