Typescript and Rehype refactor #428
Conversation
| // @ts-ignore | ||
| import remarkToRehype from 'remark-rehype'; | ||
| // @ts-ignore | ||
| import rehypeReact from 'rehype-react'; |
There was a problem hiding this comment.
These packages don't have typings yet.
Work is being done upsteam to add typings.
| remarkParseOptions, | ||
| remarkToRehypeOptions, | ||
| rehypeReactOptions, | ||
| remarkPlugins = [], | ||
| rehypePlugins = [], | ||
| onError = () => {}, |
There was a problem hiding this comment.
This API is different.
It may be possible to create an adapter which is more like the current API on top of this component to smooth the transition.
| `Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation. | ||
|
|
||
| $$ | ||
| L = \\frac{1}{2} \\rho v^2 S C_L | ||
| $$` | ||
| ); |
There was a problem hiding this comment.
This gives an example of embedding math in markdown, a use-case which leveraging rehype enables.
| import '@testing-library/jest-dom/extend-expect'; | ||
| import { Remark } from '../src'; | ||
|
|
||
| describe('Remark', () => { |
There was a problem hiding this comment.
These tests focus on testing the React abstraction, remark-rehype and rehype-react have their own tests verifying content is converted as expected.
Unified, through remark and rehype is providing the translation of markdown source into react elements. TypeScript is used to allow for catching type related bugs and automatic generation of typings files. tsdx is mananging the build process. storybook is leveraged to create runnable examples which can be hosted on GitHub pages.
ChristianMurphy
force-pushed
the
typescript-and-rehype-refactor
branch
from
347908b
to
9e33039
Compare
| platform: [ubuntu-latest, windows-latest, macos-latest] | ||
| node-version: [12, 14] |
There was a problem hiding this comment.
This does node version and cross platform testing out of the box
| - name: Deploy to GitHub pages | ||
| uses: JamesIves/github-pages-deploy-action@releases/v3 | ||
| with: | ||
| ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} |
There was a problem hiding this comment.
This deploys storybook to GitHub packages, it does take a bit of setup, it needs an access token to push changes to a branch.
|
When is this fix going to be released? |
|
@rexxars sorry for tagging, but I would be really happy if this could be merged, so I'm just pinging. |
ChristianMurphy
added
☂️ area/types
| "unist-util-visit": "^1.4.1", | ||
| "xtend": "^4.0.1" | ||
| "rehype-react": "^5.0.1", | ||
| "remark-parse": "^8.0.2", |
There was a problem hiding this comment.
Sorry to barge in here, but since this PR is tagged as a major release, I'm wondering if it's possible to consider a bump of remark-parse to "^9.0.0" before v5? I haven't looked too deeply into this, but given that 9.0.0 uses micromark behind the covers, it may be a bit of work.
However, if it's a minor task, I'd be glad to see it bumped as it resolves #383 and other issues I've detected related to markdown parsing (Example:
\[react\-markdown\]\(https\:\/\/remarkjs\.github\.io\/react-markdown\/\)
will not remove the backslash escapes from \: and \/, which is not compliant with the CommonMark specification).
There was a problem hiding this comment.
The plan earlier is explained here: #470 (comment).
It seems this PR would be extremely incompatible with the current project. So the plan was instead to mostly bump remark and fix plugins (#425) first. Then do this PR later.
There was a problem hiding this comment.
Ah, thanks, I didn't see that one. Thanks for the quick reply and the good work here!
wooorm
force-pushed
the
v5
branch
2 times, most recently
from
e4ae911
to
ebebf51
Compare
|
What happened with this? |
|
It was closed by a quirk of GiHub, it was pointed to the v5 branch, which was merged, orphaning this PR, which GH autocloses. An updated version of this addressing the comments from #427 (comment) and #427 (comment) is in the works, in the mean time the lower level API that it would build on is already available in https://github.com/ChristianMurphy/react-remark, the next proposal would be a wrapper/preset for react-remark, which matches the existing API more closely. |
|
I came to this pull request from #397, and I'm finding myself a little confused about the status of it. I just want my headings to have IDs so I can link to them. How can I do this today with the current version of react-markdown? |
|
Still working on it: #549 |
|
@wooorm , Thanks for the quick reply. and I appreciate your work on this. Does #549 mean it is simply not possible to do what I'm trying to do right now with react-markdown, or is there a stopgap/workaround I can throw into my code for now until the next version is released? Not sure if this is related to #549 as well, but I'm noticing that markdown tables are being converted to HTML tables. I haven't looked yet to see if there's a plug-in for tables, though, so perhaps that would solve it. |
|
You can overwrite the heading renderer right now. But 549 indeed means that and is about fixing all this stuff. Tables are in remark-gfm and work |
Unified, through remark and rehype is providing the translation of markdown source into react elements.
TypeScript is used to allow for catching type related bugs and automatic generation of typings files.
tsdx is mananging the build process.
Storybook is leveraged to create runnable examples which can be hosted on GitHub pages.
GitHub actions are used for continuous integration and automatic deployment of the demo site.
There is a live demo of this code running at https://christianmurphy.github.io/react-remark
and a scoped version available on the registry with
npm install --save @christianmurphy/react-remarkresolves #427