graphviz-react - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

CHANGELOG.md

@@ -9,2 +9,7 @@ # Changelog
 ### Changed
+- Converted `Graphviz` component to a functional component
+- Passed options via constructor rather than `options` method
+
+## [1.2.1]
+### Changed
 - Set `type` field in `package.json` to `module`
@@ -68,2 +73,3 @@ - Updated dependencies
 
+[1.2.1]: https://github.com/DomParfitt/graphviz-react/compare/v1.2.0...v1.2.1
 [1.2.0]: https://github.com/DomParfitt/graphviz-react/compare/v1.1.1...v1.2.0
@@ -70,0 +76,0 @@ [1.1.1]: https://github.com/DomParfitt/graphviz-react/compare/v1.1.0...v1.1.1

lib/Graphviz.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { GraphvizOptions } from 'd3-graphviz';
@@ -8,13 +8,4 @@ interface IGraphvizProps {
 }
-declare class Graphviz extends React.Component<IGraphvizProps, any> {
-    private static count;
-    private static defaultOptions;
-    private id;
-    constructor(props: IGraphvizProps);
-    render: () => JSX.Element;
-    componentDidMount: () => void;
-    componentDidUpdate: () => void;
-    private renderGraph;
-}
+declare const Graphviz: ({ dot, className, options }: IGraphvizProps) => JSX.Element;
 export { Graphviz, IGraphvizProps };
 export default Graphviz;

lib/Graphviz.js

 import * as React from 'react';
+import { useEffect, useMemo } from 'react';
 import { graphviz } from 'd3-graphviz';
-class Graphviz extends React.Component {
-    constructor(props) {
-        super(props);
-        this.render = () => {
-            const { className } = this.props;
-            return (React.createElement("div", { className: className, id: this.id }));
-        };
-        this.componentDidMount = () => {
-            this.renderGraph();
-        };
-        this.componentDidUpdate = () => {
-            this.renderGraph();
-        };
-        this.renderGraph = () => {
-            const { dot, options } = this.props;
-            graphviz(`#${this.id}`)
-                .options(Object.assign(Object.assign({}, Graphviz.defaultOptions), options || {}))
-                .renderDot(dot);
-        };
-        this.id = `graphviz${Graphviz.count}`;
-        Graphviz.count += 1;
-    }
-}
-Graphviz.count = 0;
-Graphviz.defaultOptions = {
+const defaultOptions = {
     fit: true,
@@ -33,4 +10,13 @@ height: 500,
 };
+let counter = 0;
+const getId = () => `graphviz${counter++}`;
+const Graphviz = ({ dot, className, options = {} }) => {
+    const id = useMemo(getId, []);
+    useEffect(() => {
+        graphviz(`#${id}`, Object.assign(Object.assign({}, defaultOptions), options)).renderDot(dot);
+    }, [dot, options]);
+    return React.createElement("div", { className: className, id: id });
+};
 export { Graphviz };
 export default Graphviz;
 //# sourceMappingURL=Graphviz.js.map

package.json

 {
   "name": "graphviz-react",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "React component for displaying Graphviz graphs",
@@ -44,8 +44,11 @@ "type": "module",
     "eslint-config-airbnb-typescript": "^8.0.2",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-only-warn": "^1.0.2",
-    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
     "jest": "^26.1.0",
     "jsdom": "^16.3.0",
+    "prettier": "^2.7.1",
     "react-dom": "^16.13.1",
@@ -52,0 +55,0 @@ "ts-jest": "^26.1.3",

No alert changes

Worsened metrics

Total package byte prevSize

13316

-2.58%

Dev dependency count

21

16.67%

Lines of code

100

-18.7%

No dependency changes