Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(deps): bump markdown dependencies #9980

Merged
merged 11 commits into from
Nov 10, 2023

Conversation

caugner
Copy link
Contributor

@caugner caugner commented Nov 8, 2023

Summary

Same as #9896, but also bumps react-markdown.

Problem

Updating unified, remark-{gfm,parse,rehype} and rehype-{format,stringify} broke AI Help for certain answers, because react-markdown v8 doesn't seem to be fully compatible with unified v11.

Solution

Bump react-markdown from v8 to v9 at the same time, and migrate the breaking change (the inline parameter no longer being exposed to the code handler).


How did you test this change?

Tested with the following AI Help data (set with localStorage.put("ai-help", "...")):

{"messages":[{"status":"complete","role":"user","content":"How can I sort an Array in JavaScript?"},{"status":"complete","role":"assistant","content":"To sort an array in JavaScript, you can use the `sort()` method. The `sort()` method sorts the elements of an array in place and returns the sorted array.\n\nHere is an example of using the `sort()` method on a regular array:\n\n```js\nlet numbers = [40, 1, 5, 200];\nnumbers.sort();\nconsole.log(numbers); // [1, 200, 40, 5]\n```\n\nBy default, the `sort()` method sorts the elements of the array as strings. This means that the numbers are sorted lexicographically, which may not be the desired behavior for numeric sorting.\n\nTo perform numeric sorting, you can provide a compare function as an argument to the `sort()` method. The compare function should return a negative value if the first argument should be sorted before the second argument, a positive value if the first argument should be sorted after the second argument, or zero if the two arguments are equal.\n\nHere is an example of using a compare function to perform numeric sorting:\n\n```js\nlet numbers = [40, 1, 5, 200];\nnumbers.sort((a, b) => a - b);\nconsole.log(numbers); // [1, 5, 40, 200]\n```\n\nIn this example, the compare function `(a, b) => a - b` subtracts `b` from `a`, resulting in a negative value if `a` should be sorted before `b`. This ensures that the numbers are sorted in ascending order.\n\nIt's important to note that the `sort()` method modifies the original array in place. If you want to keep the original array unchanged, you can make a copy of the array before sorting it.\n\nIf you are working with a typed array, such as `Uint8Array`, you can use the `toSorted()` method to sort the array. The `toSorted()` method returns a new sorted array without modifying the original array.\n\nHere is an example of using the `toSorted()` method on a `Uint8Array`:\n\n```js\nconst numbers = new Uint8Array([40, 1, 5, 200]);\nconst numberSorted = numbers.toSorted();\nconsole.log(numberSorted); // Uint8Array [1, 5, 40, 200]\nconsole.log(numbers); // Uint8Array [40, 1, 5, 200]\n```\n\nIn this example, the `toSorted()` method is used to sort the `Uint8Array` numerically without the need for a compare function.\n\nI hope this helps! Let me know if you have any further questions.","sources":[{"url":"/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toSorted","slug":"Web/JavaScript/Reference/Global_Objects/TypedArray/toSorted","title":"TypedArray.prototype.toSorted()"},{"url":"/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/sort","slug":"Web/JavaScript/Reference/Global_Objects/TypedArray/sort","title":"TypedArray.prototype.sort()"},{"url":"/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted","slug":"Web/JavaScript/Reference/Global_Objects/Array/toSorted","title":"Array.prototype.toSorted()"},{"url":"/en-US/docs/Web/JavaScript/Reference/Errors/Array_sort_argument","slug":"Web/JavaScript/Reference/Errors/Array_sort_argument","title":"TypeError: invalid Array.prototype.sort argument"},{"url":"/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays","slug":"Learn/JavaScript/First_steps/Test_your_skills:_Arrays","title":"Test your skills: Arrays"}]}]}

Compared the outerHTML of prod with my local branch and saw no difference.

@github-actions github-actions bot added dependencies Pull requests that update a dependency file plus work around features related to MDN Plus markdown markdown related issues and pull requests plus:ai-help labels Nov 8, 2023
dependabot bot and others added 10 commits November 8, 2023 22:01
Bumps [unified](https://github.com/unifiedjs/unified) from 10.1.2 to 11.0.4.
- [Release notes](https://github.com/unifiedjs/unified/releases)
- [Changelog](https://github.com/unifiedjs/unified/blob/main/changelog.md)
- [Commits](unifiedjs/unified@10.1.2...11.0.4)

---
updated-dependencies:
- dependency-name: unified
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>
Bumps [remark-parse](https://github.com/remarkjs/remark) from 10.0.2 to 11.0.0.
- [Release notes](https://github.com/remarkjs/remark/releases)
- [Changelog](https://github.com/remarkjs/remark/blob/main/changelog.md)
- [Commits](https://github.com/remarkjs/remark/compare/[email protected]@11.0.0)

---
updated-dependencies:
- dependency-name: remark-parse
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>
Bumps [remark-gfm](https://github.com/remarkjs/remark-gfm) from 3.0.1 to 4.0.0.
- [Release notes](https://github.com/remarkjs/remark-gfm/releases)
- [Commits](remarkjs/remark-gfm@3.0.1...4.0.0)

---
updated-dependencies:
- dependency-name: remark-gfm
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>
Bumps [remark-rehype](https://github.com/remarkjs/remark-rehype) from 10.1.0 to 11.0.0.
- [Release notes](https://github.com/remarkjs/remark-rehype/releases)
- [Commits](remarkjs/remark-rehype@10.1.0...11.0.0)

---
updated-dependencies:
- dependency-name: remark-rehype
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>
Bumps [rehype-format](https://github.com/rehypejs/rehype-format) from 4.0.1 to 5.0.0.
- [Release notes](https://github.com/rehypejs/rehype-format/releases)
- [Commits](rehypejs/rehype-format@4.0.1...5.0.0)

---
updated-dependencies:
- dependency-name: rehype-format
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>
Bumps [rehype-stringify](https://github.com/rehypejs/rehype) from 9.0.4 to 10.0.0.
- [Release notes](https://github.com/rehypejs/rehype/releases)
- [Changelog](https://github.com/rehypejs/rehype/blob/main/changelog.md)
- [Commits](https://github.com/rehypejs/rehype/compare/[email protected]@10.0.0)

---
updated-dependencies:
- dependency-name: rehype-stringify
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>
Bumps [react-markdown](https://github.com/remarkjs/react-markdown) from 8.0.7 to 9.0.0.
- [Release notes](https://github.com/remarkjs/react-markdown/releases)
- [Changelog](https://github.com/remarkjs/react-markdown/blob/main/changelog.md)
- [Commits](remarkjs/react-markdown@8.0.7...9.0.0)

---
updated-dependencies:
- dependency-name: react-markdown
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>
@caugner caugner force-pushed the rebump-unified-with-react-markdown branch from ce26803 to da7d445 Compare November 8, 2023 21:01
const match = /language-(\w+)/.exec(
className || ""
);
const lang = Prism.languages[match?.[1]];
return !inline && lang ? (
return lang ? (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@LeoMcA I don't know what inline distinguishes, but didn't see a difference locally.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to distinguish between inline/block code blocks, however the presence/lack of a language-foobar class also seems to do the same. Even then, if I force Prism to operate on inline code blocks too (by setting lang to Prism.languages["css"] for instance), it seems to fail gracefully with inline blocks

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, that makes sense. And what a relieve!

Copy link
Member

@LeoMcA LeoMcA left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good!

const match = /language-(\w+)/.exec(
className || ""
);
const lang = Prism.languages[match?.[1]];
return !inline && lang ? (
return lang ? (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to distinguish between inline/block code blocks, however the presence/lack of a language-foobar class also seems to do the same. Even then, if I force Prism to operate on inline code blocks too (by setting lang to Prism.languages["css"] for instance), it seems to fail gracefully with inline blocks

@@ -257,12 +257,12 @@ export function AIHelpInner() {
</div>
);
},
code: ({ inline, className, children, ...props }) => {
code: ({ className, children, ...props }) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I notice <code> tags get an ugly node="[object Object]" attribute set on them, due to ...props, we should destructure it to remove it:

Suggested change
code: ({ className, children, ...props }) => {
code: ({ className, children, node, ...props }) => {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll open a separate PR for it.

@caugner caugner marked this pull request as ready for review November 10, 2023 13:19
@caugner caugner requested review from mdn-bot and a team as code owners November 10, 2023 13:19
@caugner caugner merged commit 49979f1 into main Nov 10, 2023
15 checks passed
@caugner caugner deleted the rebump-unified-with-react-markdown branch November 10, 2023 13:21
@caugner caugner changed the title chore(deps): bump unified from 10.1.2 to 11.0.4 + remark-{gfm,parse,rehype} + rehype-{format,stringify} + react-markdown chore(deps): bump markdown dependencies Nov 10, 2023
gurezo pushed a commit to gurezo/yari that referenced this pull request Nov 11, 2023
* chore(deps): bump unified from 10.1.2 to 11.0.4
* chore(deps): bump remark-gfm from 3.0.1 to 4.0.0
* chore(deps): bump remark-parse from 10.0.2 to 11.0.0
* chore(deps): bump remark-rehype from 10.1.0 to 11.0.0
* chore(deps): bump rehype-format from 4.0.1 to 5.0.0
* chore(deps): bump rehype-stringify from 9.0.4 to 10.0.0
* chore(deps): bump react-markdown from 8.0.7 to 9.0.0
* fix(ai-help): migrate to react-markdown v9
gurezo pushed a commit to gurezo/yari that referenced this pull request Nov 11, 2023
* chore(deps): bump unified from 10.1.2 to 11.0.4
* chore(deps): bump remark-gfm from 3.0.1 to 4.0.0
* chore(deps): bump remark-parse from 10.0.2 to 11.0.0
* chore(deps): bump remark-rehype from 10.1.0 to 11.0.0
* chore(deps): bump rehype-format from 4.0.1 to 5.0.0
* chore(deps): bump rehype-stringify from 9.0.4 to 10.0.0
* chore(deps): bump react-markdown from 8.0.7 to 9.0.0
* fix(ai-help): migrate to react-markdown v9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file markdown markdown related issues and pull requests plus:ai-help plus work around features related to MDN Plus
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants