Merge pull request #18 from remarkjs/feat/sync-api

feat: add use remark sync hook

Author: ChristianMurphy

.github/workflows/gh-page.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Use Node
         uses: actions/setup-node@v2
         with:
-          node-version: 15
+          node-version: 16
 
       - name: Use cached node_modules
         uses: actions/cache@v2

.github/workflows/main.yml

@@ -11,7 +11,7 @@ jobs:
     strategy:
       matrix:
         platform: [ubuntu-latest, windows-latest, macos-latest]
-        node-version: [12, 14, 15]
+        node-version: [12, 14, 16]
 
     name: '${{ matrix.platform }}: node.js ${{ matrix.node-version }}'
 
@@ -46,7 +46,7 @@ jobs:
           CI: true
 
       - name: Test
-        run: npm test --ci --coverage --maxWorkers=2
+        run: npm test -- --ci --coverage --maxWorkers=2
         env:
           CI: true
 

.gitignore

@@ -2,5 +2,6 @@
 .DS_Store
 node_modules
 .cache
-dist
-storybook-static
+dist/
+storybook-static/
+coverage/

.husky/.gitignore

@@ -35,7 +35,7 @@ const ExampleComponent = () => {
 
   useEffect(() => {
     setMarkdownSource('# markdown header');
-  }, [])
+  }, []);
 
   return reactContent;
 };
@@ -66,6 +66,23 @@ const ExampleComponent = () => {
 export default ExampleComponent;
 ```
 
+### Server side rendering
+
+```tsx
+import React from 'react';
+import { useRemarkSync } from 'react-remark';
+
+const ExampleComponent = () => {
+  const reactContent = useRemarkSync('# markdown header');
+
+  return reactContent;
+};
+
+export default ExampleComponent;
+```
+
+:notebook: Note that some remark plugins are async, these plugins will error if used with `useRemarkSync`.
+
 [More examples of usage as hook in storybook.](https://remarkjs.github.io/react-remark/?path=/story/remark-hook)
 
 ### As a component
@@ -155,13 +172,12 @@ import rehypeAutoLinkHeadings from 'rehype-autolink-headings';
 // ...
 
 const [reactContent, setMarkdownSource] = useRemark({
-  remarkParseOptions: { commonmark: true },
   remarkPlugins: [remarkGemoji],
-  remarkToRehypeOptions: { commonmark: true },
+  remarkToRehypeOptions: { allowDangerousHtml: true },
   rehypePlugins: [rehypeSlug, rehypeAutoLinkHeadings],
   rehypeReactOptions: {
     components: {
-      p: props => <p className="custom-paragraph" {...props} />,
+      p: (props) => <p className="custom-paragraph" {...props} />,
     },
   },
 });
@@ -179,13 +195,12 @@ import rehypeAutoLinkHeadings from 'rehype-autolink-headings';
 // ...
 
 <Remark
-  remarkParseOptions={{ commonmark: true }}
   remarkPlugins={[remarkGemoji]}
-  remarkToRehypeOptions={{ commonmark: true }}
+  remarkToRehypeOptions={{ allowDangerousHtml: true }}
   rehypePlugins={[rehypeSlug, rehypeAutoLinkHeadings]}
   rehypeReactOptions={{
     components: {
-      p: props => <p className="custom-paragraph" {...props} />,
+      p: (props) => <p className="custom-paragraph" {...props} />,
     },
   }}
 >

package-lock.json

@@ -15,15 +15,40 @@ import rehypeReact, { Options as RehypeReactOptions } from 'rehype-react';
 
 type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
-export interface UseRemarkOptions {
-  remarkParseOptions?: Partial<RemarkParseOptions>;
+export interface UseRemarkSyncOptions {
+  remarkParseOptions?: RemarkParseOptions;
   remarkToRehypeOptions?: RemarkRehypeOptions;
   rehypeReactOptions?: PartialBy<
     RehypeReactOptions<typeof createElement>,
     'createElement'
   >;
   remarkPlugins?: PluggableList;
   rehypePlugins?: PluggableList;
+}
+
+export const useRemarkSync = (
+  source: string,
+  {
+    remarkParseOptions,
+    remarkToRehypeOptions,
+    rehypeReactOptions,
+    remarkPlugins = [],
+    rehypePlugins = [],
+  }: UseRemarkOptions = {}
+): ReactElement =>
+  unified()
+    .use(remarkParse, remarkParseOptions)
+    .use(remarkPlugins)
+    .use(remarkToRehype, remarkToRehypeOptions)
+    .use(rehypePlugins)
+    .use(rehypeReact, {
+      createElement,
+      Fragment,
+      ...rehypeReactOptions,
+    } as RehypeReactOptions<typeof createElement>)
+    .processSync(source).result as ReactElement;
+
+export interface UseRemarkOptions extends UseRemarkSyncOptions {
   onError?: (err: Error) => void;
 }
 

readme.md

@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
+import 'katex/dist/katex.min.css';
+
+import { useRemarkSync } from '../src';
+
+export default {
+  title: 'Remark Hooks/sync and ssr with useRemarkSync',
+  component: useRemarkSync,
+};
+
+export const CommonMark = ({ content }) => {
+  return useRemarkSync(content);
+};
+CommonMark.args = {
+  content: `# header
+
+1. ordered
+2. list
+
+* unordered
+* list`,
+};
+
+export const GithubFlavoredMarkdown = ({ content }) => {
+  return (
+    useRemarkSync(content, {
+      remarkPlugins: [remarkGfm],
+    }) || <></>
+  );
+};
+GithubFlavoredMarkdown.args = {
+  content: `# header
+
+| column 1 | column 2 |
+| -------- | -------- |
+| first    | row      |
+`,
+};
+
+export const MarkdownWithMath = ({ content }) => {
+  return useRemarkSync(content, {
+    remarkPlugins: [remarkMath],
+    rehypePlugins: [rehypeKatex],
+  });
+};
+MarkdownWithMath.args = {
+  content: `Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.
+
+$$
+L = \\frac{1}{2} \\rho v^2 S C_L
+$$`,
+};
+
+export const MixedHTMLSanitized = ({ content }) => {
+  return useRemarkSync(content, {
+    remarkToRehypeOptions: { allowDangerousHtml: true },
+    rehypePlugins: [rehypeRaw, rehypeSanitize],
+  });
+};
+MixedHTMLSanitized.args = {
+  content: `# header
+
+<strong>mixed</strong>
+<em>with</em>
+<kbd>html</kbd>`,
+};

src/index.ts

@@ -9,7 +9,7 @@ import 'katex/dist/katex.min.css';
 import { useRemark } from '../src';
 
 export default {
-  title: 'Remark Hook',
+  title: 'Remark Hooks/standard use with useRemark',
   component: useRemark,
 };