graphviz-react - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

CHANGELOG.md

@@ -9,2 +9,11 @@ # Changelog
 
+## [1.0.6]
+### Added
+- Snapshot test
+- Linting
+- Test dependencies
+
+### Changed
+- Changed member functions to arrow functions
+
 ## [1.0.5]
@@ -33,2 +42,3 @@ ### Added
 
+[1.0.6]: https://github.com/DomParfitt/graphviz-react/compare/v1.0.5...v1.0.6
 [1.0.5]: https://github.com/DomParfitt/graphviz-react/compare/v1.0.4...v1.0.5
@@ -35,0 +45,0 @@ [1.0.4]: https://github.com/DomParfitt/graphviz-react/compare/v1.0.3...v1.0.4

lib/Graphviz.d.ts

@@ -0,3 +1,3 @@
+import * as React from 'react';
 import { GraphvizOptions } from 'd3-graphviz';
-import * as React from 'react';
 export declare class Graphviz extends React.Component<IGraphvizProps, any> {
@@ -8,7 +8,6 @@ private static count;
     constructor(props: IGraphvizProps);
-    render(): JSX.Element;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
+    render: () => JSX.Element;
+    componentDidMount: () => void;
+    componentDidUpdate: () => void;
     private renderGraph;
-    private options;
 }
@@ -15,0 +14,0 @@ export interface IGraphvizProps extends React.ClassAttributes<Graphviz> {

lib/Graphviz.js

@@ -0,33 +1,22 @@
+import * as React from 'react';
 import { graphviz } from 'd3-graphviz';
-import * as React from 'react';
 export class Graphviz extends React.Component {
     constructor(props) {
         super(props);
-        this.id = "graphviz" + Graphviz.count;
-        Graphviz.count++;
+        this.render = () => (React.createElement("div", { 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;
     }
-    render() {
-        return (React.createElement("div", { id: this.id }));
-    }
-    componentDidMount() {
-        this.renderGraph();
-    }
-    componentDidUpdate() {
-        this.renderGraph();
-    }
-    renderGraph() {
-        graphviz('#' + this.id)
-            .options(this.options())
-            .renderDot(this.props.dot);
-    }
-    options() {
-        if (!this.props.options) {
-            return Graphviz.defaultOptions;
-        }
-        const options = Graphviz.defaultOptions;
-        for (const option of Object.keys(this.props.options)) {
-            options[option] = this.props.options[option];
-        }
-        return options;
-    }
 }
@@ -34,0 +23,0 @@ Graphviz.count = 0;

package.json

 {
   "name": "graphviz-react",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "React component for displaying Graphviz graphs",
@@ -8,7 +8,8 @@ "main": "./lib/Graphviz.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
     "clean": "rm -rf lib",
     "clean-build": "npm run clean && npm run build",
-    "prepublish": "npm run clean-build"
+    "lint": "eslint . --max-warnings=0",
+    "prepublish": "npm run clean-build",
+    "test": "jest"
   },
@@ -26,3 +27,3 @@ "keywords": [
   "files": [
-    "src/*",
+    "src/*.tsx",
     "lib/*"
@@ -35,8 +36,38 @@ ],
   "devDependencies": {
+    "@testing-library/react": "^10.2.1",
     "@types/d3-graphviz": "^2.6.3",
+    "@types/jest": "^25.2.3",
+    "@types/jsdom": "^16.2.3",
     "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^3.2.0",
+    "@typescript-eslint/parser": "^3.2.0",
+    "eslint": "^7.2.0",
+    "eslint-config-airbnb-typescript": "^8.0.2",
+    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-only-warn": "^1.0.2",
+    "eslint-plugin-react": "^7.20.0",
+    "jest": "^26.0.1",
+    "jsdom": "^16.2.2",
     "react-dom": "^16.13.1",
+    "ts-jest": "^26.1.0",
     "typescript": "^3.9.5"
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
+    },
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ]
   }
 }

README.md

 # graphviz-react
+![Continuous Integration](https://github.com/DomParfitt/graphviz-react/workflows/Continuous%20Integration/badge.svg)
 
@@ -3,0 +4,0 @@ `graphviz-react` provides a simple to use component for rendering Graphviz objects in React. It effectively acts as a React-flavoured wrapper over the [d3-graphviz](https://www.npmjs.com/package/d3-graphviz) library, providing a uniform way to use the renderer. `graphviz-react` is written in Typescript and provides typing declarations.

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11104

9.5%

Number of package files

9

12.5%

Number of low quality alerts

1

-50%

Number of lines in readme file

83

1.22%

Worsened metrics

Dev dependency count

18

260%

Lines of code

99

-4.81%

No dependency changes