react-remark - npm Package Compare versions

Comparing version 2.0.3 to 2.1.0

dist/index.d.ts

@@ -6,11 +6,15 @@ import { FunctionComponent, ReactElement, createElement } from 'react';
 import { Options as RehypeReactOptions } from 'rehype-react';
-export interface UseRemarkOptions {
-    remarkParseOptions?: Partial<RemarkParseOptions>;
+declare type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export interface UseRemarkSyncOptions {
+    remarkParseOptions?: RemarkParseOptions;
     remarkToRehypeOptions?: RemarkRehypeOptions;
-    rehypeReactOptions?: Partial<RehypeReactOptions<typeof createElement>>;
+    rehypeReactOptions?: PartialBy<RehypeReactOptions<typeof createElement>, 'createElement'>;
     remarkPlugins?: PluggableList;
     rehypePlugins?: PluggableList;
+}
+export declare const useRemarkSync: (source: string, { remarkParseOptions, remarkToRehypeOptions, rehypeReactOptions, remarkPlugins, rehypePlugins, }?: UseRemarkOptions) => ReactElement;
+export interface UseRemarkOptions extends UseRemarkSyncOptions {
     onError?: (err: Error) => void;
 }
-export declare const useRemark: ({ remarkParseOptions, remarkToRehypeOptions, rehypeReactOptions, remarkPlugins, rehypePlugins, onError, }?: UseRemarkOptions) => [ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null, (source: string) => void];
+export declare const useRemark: ({ remarkParseOptions, remarkToRehypeOptions, rehypeReactOptions, remarkPlugins, rehypePlugins, onError, }?: UseRemarkOptions) => [ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null, (source: string) => void];
 export interface RemarkProps extends UseRemarkOptions {
@@ -20,1 +24,2 @@ children: string;
 export declare const Remark: FunctionComponent<RemarkProps>;
+export {};

dist/react-remark.cjs.development.js

@@ -46,3 +46,4 @@ 'use strict';
 
-var useRemark = function useRemark(_temp) {
+var _excluded = ["children"];
+var useRemarkSync = function useRemarkSync(source, _temp) {
   var _ref = _temp === void 0 ? {} : _temp,
@@ -55,6 +56,21 @@ remarkParseOptions = _ref.remarkParseOptions,
       _ref$rehypePlugins = _ref.rehypePlugins,
-      rehypePlugins = _ref$rehypePlugins === void 0 ? [] : _ref$rehypePlugins,
-      _ref$onError = _ref.onError,
-      onError = _ref$onError === void 0 ? function () {} : _ref$onError;
+      rehypePlugins = _ref$rehypePlugins === void 0 ? [] : _ref$rehypePlugins;
 
+  return unified().use(remarkParse, remarkParseOptions).use(remarkPlugins).use(remarkToRehype, remarkToRehypeOptions).use(rehypePlugins).use(rehypeReact, _extends({
+    createElement: react.createElement,
+    Fragment: react.Fragment
+  }, rehypeReactOptions)).processSync(source).result;
+};
+var useRemark = function useRemark(_temp2) {
+  var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      remarkParseOptions = _ref2.remarkParseOptions,
+      remarkToRehypeOptions = _ref2.remarkToRehypeOptions,
+      rehypeReactOptions = _ref2.rehypeReactOptions,
+      _ref2$remarkPlugins = _ref2.remarkPlugins,
+      remarkPlugins = _ref2$remarkPlugins === void 0 ? [] : _ref2$remarkPlugins,
+      _ref2$rehypePlugins = _ref2.rehypePlugins,
+      rehypePlugins = _ref2$rehypePlugins === void 0 ? [] : _ref2$rehypePlugins,
+      _ref2$onError = _ref2.onError,
+      onError = _ref2$onError === void 0 ? function () {} : _ref2$onError;
+
   var _useState = react.useState(null),
@@ -74,5 +90,5 @@ reactContent = _useState[0],
 };
-var Remark = function Remark(_ref2) {
-  var children = _ref2.children,
-      useRemarkOptions = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+var Remark = function Remark(_ref3) {
+  var children = _ref3.children,
+      useRemarkOptions = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
@@ -91,2 +107,3 @@ var _useRemark = useRemark(useRemarkOptions),
 exports.useRemark = useRemark;
+exports.useRemarkSync = useRemarkSync;
 //# sourceMappingURL=react-remark.cjs.development.js.map

dist/react-remark.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(require("unified")),n=e(require("remark-parse")),u=e(require("remark-rehype")),i=e(require("rehype-react"));function a(){return(a=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var o=function(e){var o=void 0===e?{}:e,s=o.remarkParseOptions,c=o.remarkToRehypeOptions,f=o.rehypeReactOptions,l=o.remarkPlugins,p=void 0===l?[]:l,h=o.rehypePlugins,v=void 0===h?[]:h,d=o.onError,m=void 0===d?function(){}:d,y=r.useState(null),k=y[1];return[y[0],r.useCallback((function(e){t().use(n,s).use(p).use(u,c).use(v).use(i,a({createElement:r.createElement,Fragment:r.Fragment},f)).process(e).then((function(e){return k(e.result)})).catch(m)}),[])]};exports.Remark=function(e){var t=e.children,n=function(e,r){if(null==e)return{};var t,n,u={},i=Object.keys(e);for(n=0;n<i.length;n++)r.indexOf(t=i[n])>=0||(u[t]=e[t]);return u}(e,["children"]),u=o(n),i=u[0],a=u[1];return r.useEffect((function(){a(t)}),[t,a]),i},exports.useRemark=o;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(require("unified")),n=e(require("remark-parse")),u=e(require("remark-rehype")),a=e(require("rehype-react"));function s(){return(s=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var i=["children"],o=function(e){var i=void 0===e?{}:e,o=i.remarkParseOptions,c=i.remarkToRehypeOptions,p=i.rehypeReactOptions,l=i.remarkPlugins,f=void 0===l?[]:l,m=i.rehypePlugins,v=void 0===m?[]:m,h=i.onError,y=void 0===h?function(){}:h,d=r.useState(null),k=d[1];return[d[0],r.useCallback((function(e){t().use(n,o).use(f).use(u,c).use(v).use(a,s({createElement:r.createElement,Fragment:r.Fragment},p)).process(e).then((function(e){return k(e.result)})).catch(y)}),[])]};exports.Remark=function(e){var t=e.children,n=function(e,r){if(null==e)return{};var t,n,u={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(u[t]=e[t]);return u}(e,i),u=o(n),a=u[0],s=u[1];return r.useEffect((function(){s(t)}),[t,s]),a},exports.useRemark=o,exports.useRemarkSync=function(e,i){var o=void 0===i?{}:i,c=o.remarkParseOptions,p=o.remarkToRehypeOptions,l=o.rehypeReactOptions,f=o.remarkPlugins,m=void 0===f?[]:f,v=o.rehypePlugins,h=void 0===v?[]:v;return t().use(n,c).use(m).use(u,p).use(h).use(a,s({createElement:r.createElement,Fragment:r.Fragment},l)).processSync(e).result};
 //# sourceMappingURL=react-remark.cjs.production.min.js.map

dist/react-remark.esm.js

@@ -40,3 +40,4 @@ import { useState, useCallback, createElement, Fragment, useEffect } from 'react';
 
-var useRemark = function useRemark(_temp) {
+var _excluded = ["children"];
+var useRemarkSync = function useRemarkSync(source, _temp) {
   var _ref = _temp === void 0 ? {} : _temp,
@@ -49,6 +50,21 @@ remarkParseOptions = _ref.remarkParseOptions,
       _ref$rehypePlugins = _ref.rehypePlugins,
-      rehypePlugins = _ref$rehypePlugins === void 0 ? [] : _ref$rehypePlugins,
-      _ref$onError = _ref.onError,
-      onError = _ref$onError === void 0 ? function () {} : _ref$onError;
+      rehypePlugins = _ref$rehypePlugins === void 0 ? [] : _ref$rehypePlugins;
 
+  return unified().use(remarkParse, remarkParseOptions).use(remarkPlugins).use(remarkToRehype, remarkToRehypeOptions).use(rehypePlugins).use(rehypeReact, _extends({
+    createElement: createElement,
+    Fragment: Fragment
+  }, rehypeReactOptions)).processSync(source).result;
+};
+var useRemark = function useRemark(_temp2) {
+  var _ref2 = _temp2 === void 0 ? {} : _temp2,
+      remarkParseOptions = _ref2.remarkParseOptions,
+      remarkToRehypeOptions = _ref2.remarkToRehypeOptions,
+      rehypeReactOptions = _ref2.rehypeReactOptions,
+      _ref2$remarkPlugins = _ref2.remarkPlugins,
+      remarkPlugins = _ref2$remarkPlugins === void 0 ? [] : _ref2$remarkPlugins,
+      _ref2$rehypePlugins = _ref2.rehypePlugins,
+      rehypePlugins = _ref2$rehypePlugins === void 0 ? [] : _ref2$rehypePlugins,
+      _ref2$onError = _ref2.onError,
+      onError = _ref2$onError === void 0 ? function () {} : _ref2$onError;
+
   var _useState = useState(null),
@@ -68,5 +84,5 @@ reactContent = _useState[0],
 };
-var Remark = function Remark(_ref2) {
-  var children = _ref2.children,
-      useRemarkOptions = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+var Remark = function Remark(_ref3) {
+  var children = _ref3.children,
+      useRemarkOptions = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
@@ -83,3 +99,3 @@ var _useRemark = useRemark(useRemarkOptions),
 
-export { Remark, useRemark };
+export { Remark, useRemark, useRemarkSync };
 //# sourceMappingURL=react-remark.esm.js.map

package.json

 {
-  "version": "2.0.3",
+  "version": "2.1.0",
   "name": "react-remark",
@@ -30,2 +30,5 @@ "description": "Renders Markdown as React components",
     "prepare": "tsdx build",
+    "_postinstall": "husky install",
+    "prepublishOnly": "pinst --disable",
+    "postpublish": "pinst --enable",
     "storybook": "start-storybook -p 6006",
@@ -48,12 +51,13 @@ "build-storybook": "build-storybook"
     "@testing-library/jest-dom": "^5.0.0",
-    "@testing-library/react": "^11.0.0",
-    "@testing-library/react-hooks": "^4.0.0",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^7.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "husky": "^4.0.0",
-    "katex": "^0.12.0",
+    "husky": "^7.0.0",
+    "katex": "^0.13.0",
+    "pinst": "^2.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-test-renderer": "^17.0.0",
-    "rehype-katex": "^4.0.0",
+    "rehype-katex": "^5.0.0",
     "rehype-raw": "^5.0.0",
@@ -66,7 +70,2 @@ "rehype-sanitize": "^4.0.0",
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
   "prettier": {
@@ -73,0 +72,0 @@ "printWidth": 80,

readme.md

@@ -30,3 +30,3 @@ # react-remark
 ```tsx
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useRemark } from 'react-remark';
@@ -37,3 +37,5 @@
 
-  setMarkdownSource('# markdown header');
+  useEffect(() => {
+    setMarkdownSource('# markdown header');
+  }, []);
 
@@ -69,2 +71,19 @@ return reactContent;
 
+### 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)
@@ -159,9 +178,8 @@
 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} />,
     },
@@ -176,3 +194,3 @@ },
 import React, { Fragment } from 'react';
-import { useRemark } from 'react-remark';
+import { Remark } from 'react-remark';
 import remarkGemoji from 'remark-gemoji';
@@ -185,9 +203,8 @@ import rehypeSlug from 'rehype-slug';
 <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} />,
     },
@@ -194,0 +211,0 @@ }}

src/index.ts

@@ -16,8 +16,38 @@ import {
 
-export interface UseRemarkOptions {
-  remarkParseOptions?: Partial<RemarkParseOptions>;
+type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+export interface UseRemarkSyncOptions {
+  remarkParseOptions?: RemarkParseOptions;
   remarkToRehypeOptions?: RemarkRehypeOptions;
-  rehypeReactOptions?: Partial<RehypeReactOptions<typeof createElement>>;
+  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;
@@ -42,3 +72,7 @@ }
       .use(rehypePlugins)
-      .use(rehypeReact, { createElement, Fragment, ...rehypeReactOptions })
+      .use(rehypeReact, {
+        createElement,
+        Fragment,
+        ...rehypeReactOptions,
+      } as RehypeReactOptions<typeof createElement>)
       .process(source)
@@ -45,0 +79,0 @@ .then((vfile) => setReactContent(vfile.result as ReactElement))

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37348

increased by25.47%

Lines of code

296

increased by29.82%

Number of lines in readme file

210

increased by8.81%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

21

increased by5%

No dependency changes