architecture-builder - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/architecture-builder.cjs.development.js

@@ -8,6 +8,6 @@ 'use strict';
 var lodash = require('lodash');
-var useQueryParams = require('use-query-params');
 var React = require('react');
 var React__default = _interopDefault(React);
 var styled = _interopDefault(require('styled-components'));
+var queryString = _interopDefault(require('query-string'));
 var full_render_js = require('viz.js/full.render.js');
@@ -26,2 +26,21 @@ var Viz = _interopDefault(require('viz.js'));
 
+var queryStringOptions = {
+  arrayFormat: 'comma'
+};
+var buildUpdateQuery = function buildUpdateQuery(checkedItems) {
+  return function () {
+    location.hash = queryString.stringify(checkedItems, queryStringOptions);
+  };
+};
+var buildInitialiseCheckedItemsFromQuery = function buildInitialiseCheckedItemsFromQuery(setCheckedItems) {
+  return function () {
+    var parsedObject = queryString.parse(location.hash, queryStringOptions);
+    var parsed = Object.values(parsedObject);
+
+    if (parsed.length) {
+      setCheckedItems(parsed);
+    }
+  };
+};
+
 var getColorPart = function getColorPart(edge) {
@@ -110,5 +129,5 @@ return Math.min(Math.log(edge.minutesBetweenData) / Math.log(1440) * 255, 230);
 
-var filterNodes = function filterNodes(graphNode) {
+var filterNodes = function filterNodes(graphNodes) {
   return function (checkedItems) {
-    return lodash.filter(graphNode, function (node) {
+    return lodash.filter(graphNodes, function (node) {
       return lodash.includes(checkedItems, node.id);
@@ -119,5 +138,5 @@ });
 
-var filterEdges = function filterEdges(graphEdge) {
+var filterEdges = function filterEdges(graphEdges) {
   return function (checkedItems) {
-    return lodash.filter(graphEdge, function (edge) {
+    return lodash.filter(graphEdges, function (edge) {
       return lodash.includes(checkedItems, edge.from) && lodash.includes(checkedItems, edge.to);
@@ -128,2 +147,4 @@ });
 
+var emptyArray = [];
+var runHookOnce = [];
 var ArchitectureBuilder = function ArchitectureBuilder(_ref) {
@@ -141,6 +162,9 @@ var edges = _ref.edges,
 
-  var _useQueryParam = useQueryParams.useQueryParam('a', useQueryParams.ArrayParam),
-      checkedItems = _useQueryParam[0],
-      setCheckedItems = _useQueryParam[1];
+  var _useState = React.useState(emptyArray),
+      checkedItems = _useState[0],
+      setCheckedItems = _useState[1];
 
+  React.useEffect(buildInitialiseCheckedItemsFromQuery(setCheckedItems), runHookOnce);
+  React.useEffect(buildUpdateQuery(checkedItems), [checkedItems]);
+
   var handleChange = function handleChange(event) {
@@ -157,3 +181,3 @@ var clonedSet = new Set(checkedItems);
   var handleClear = function handleClear() {
-    return setCheckedItems([]);
+    return setCheckedItems(emptyArray);
   };
@@ -160,0 +184,0 @@

dist/architecture-builder.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 n=require("lodash"),r=require("use-query-params"),t=require("react"),u=e(t),i=e(require("styled-components")),a=require("viz.js/full.render.js"),o=e(require("viz.js")),c=e(require("rgb-hex"));function l(e,n){return n||(n=e.slice(0)),e.raw=n,e}var d=function(e){return Math.min(Math.log(e.minutesBetweenData)/Math.log(1440)*255,230)},f=function(e){return'"'+e.from+'" -> "'+e.to+'" [color="#'+c(d(e),d(e),d(e))+'"]'},m=function(e){return'"'+e.id+'" [ label ="'+[e.name].concat(n.map(e.descriptionItems,(function(e,n){return n+": "+e}))).join("|")+(e.url?'" href="'+e.url:"")+'" shape="record"]'},s=new o({Module:a.Module,render:a.render}),h=function(e){return n.replace(e,/width="(.*?)" height="(.*?)"/,'width="100%" height="100%"')},p=function(e){var r=e.header,i=e.edges,a=e.nodes,o=t.useState(""),c=o[0],l=o[1],d=[r,n.map(i,f),n.map(a,m),["}"]];return s.renderString(d.map((function(e){return e.join("\n")})).join("\n")).then(l).catch(console.error),c?u.createElement("div",{dangerouslySetInnerHTML:{__html:h(c)}}):u.createElement("div",null,"Rendering")};function v(){var e=l(["\n  display: block;\n  width: 100%;\n  min-height: 2rem;\n  margin-bottom: 1rem;\n"]);return v=function(){return e},e}function g(){var e=l(["\n  flex-shrink: 0;\n  width: 18rem;\n  margin: 1rem;\n"]);return g=function(){return e},e}function y(){var e=l(["\n  align-items: top;\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n"]);return y=function(){return e},e}var w=i.div(y()),b=i.div(g()),j=i.button(v()),E=["strict digraph SoftwareArchitecture {","overlap = false;",'node [fontsize=16 fontname="Proxima Nova"];','rankdir="LR"','outputorder="edgesfirst"'];exports.ArchitectureBuilder=function(e){var t,i,a=e.edges,o=e.nodes,c=n.sortBy(n.map(o,(function(e){return{value:e.id,name:e.name}})),(function(e){return n.toLower(e.name)})),l=r.useQueryParam("a",r.ArrayParam),d=l[0],f=l[1],m=function(e){var n=new Set(d);n[e.target.checked?"add":"delete"](e.target.name),f(Array.from(n))};return u.createElement(w,null,u.createElement(b,null,u.createElement(j,{onClick:function(){return f(n.map(c,"value"))}},"Select all"),u.createElement(j,{onClick:function(){return f([])}},"Clear"),c.map((function(e){return u.createElement("div",{key:e.value},u.createElement("label",null,u.createElement("input",{checked:n.includes(d,e.value),name:e.value,onChange:m,type:"checkbox"}),e.name.split("\n")[0]))}))),u.createElement(p,Object.assign({},{edges:(i=a,function(e){return n.filter(i,(function(r){return n.includes(e,r.from)&&n.includes(e,r.to)}))})(d),header:E,nodes:(t=o,function(e){return n.filter(t,(function(r){return n.includes(e,r.id)}))})(d)})))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("lodash"),r=require("react"),t=e(r),i=e(require("styled-components")),u=e(require("query-string")),a=require("viz.js/full.render.js"),o=e(require("viz.js")),c=e(require("rgb-hex"));function l(e,n){return n||(n=e.slice(0)),e.raw=n,e}var f={arrayFormat:"comma"},d=function(e){return Math.min(Math.log(e.minutesBetweenData)/Math.log(1440)*255,230)},s=function(e){return'"'+e.from+'" -> "'+e.to+'" [color="#'+c(d(e),d(e),d(e))+'"]'},m=function(e){return'"'+e.id+'" [ label ="'+[e.name].concat(n.map(e.descriptionItems,(function(e,n){return n+": "+e}))).join("|")+(e.url?'" href="'+e.url:"")+'" shape="record"]'},h=new o({Module:a.Module,render:a.render}),v=function(e){return n.replace(e,/width="(.*?)" height="(.*?)"/,'width="100%" height="100%"')},p=function(e){var i=e.header,u=e.edges,a=e.nodes,o=r.useState(""),c=o[0],l=o[1],f=[i,n.map(u,s),n.map(a,m),["}"]];return h.renderString(f.map((function(e){return e.join("\n")})).join("\n")).then(l).catch(console.error),c?t.createElement("div",{dangerouslySetInnerHTML:{__html:v(c)}}):t.createElement("div",null,"Rendering")};function g(){var e=l(["\n  display: block;\n  width: 100%;\n  min-height: 2rem;\n  margin-bottom: 1rem;\n"]);return g=function(){return e},e}function y(){var e=l(["\n  flex-shrink: 0;\n  width: 18rem;\n  margin: 1rem;\n"]);return y=function(){return e},e}function E(){var e=l(["\n  align-items: top;\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n"]);return E=function(){return e},e}var b=i.div(E()),j=i.div(y()),w=i.button(g()),k=["strict digraph SoftwareArchitecture {","overlap = false;",'node [fontsize=16 fontname="Proxima Nova"];','rankdir="LR"','outputorder="edgesfirst"'],q=[],x=[];exports.ArchitectureBuilder=function(e){var i=e.edges,a=e.nodes,o=n.sortBy(n.map(a,(function(e){return{value:e.id,name:e.name}})),(function(e){return n.toLower(e.name)})),c=r.useState(q),l=c[0],d=c[1];r.useEffect(function(e){return function(){var n=u.parse(location.hash,f),r=Object.values(n);r.length&&e(r)}}(d),x),r.useEffect(function(e){return function(){location.hash=u.stringify(e,f)}}(l),[l]);var s,m,h=function(e){var n=new Set(l);n[e.target.checked?"add":"delete"](e.target.name),d(Array.from(n))};return t.createElement(b,null,t.createElement(j,null,t.createElement(w,{onClick:function(){return d(n.map(o,"value"))}},"Select all"),t.createElement(w,{onClick:function(){return d(q)}},"Clear"),o.map((function(e){return t.createElement("div",{key:e.value},t.createElement("label",null,t.createElement("input",{checked:n.includes(l,e.value),name:e.value,onChange:h,type:"checkbox"}),e.name.split("\n")[0]))}))),t.createElement(p,Object.assign({},{edges:(m=i,function(e){return n.filter(m,(function(r){return n.includes(e,r.from)&&n.includes(e,r.to)}))})(l),header:k,nodes:(s=a,function(e){return n.filter(s,(function(r){return n.includes(e,r.id)}))})(l)})))};
 //# sourceMappingURL=architecture-builder.cjs.production.min.js.map

dist/architecture-builder.esm.js

 import { map, replace, sortBy, toLower, includes, filter } from 'lodash-es';
-import { useQueryParam, ArrayParam } from 'use-query-params';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import queryString from 'query-string';
 import { Module, render } from 'viz.js/full.render.js';
@@ -18,2 +18,21 @@ import Viz from 'viz.js';
 
+var queryStringOptions = {
+  arrayFormat: 'comma'
+};
+var buildUpdateQuery = function buildUpdateQuery(checkedItems) {
+  return function () {
+    location.hash = queryString.stringify(checkedItems, queryStringOptions);
+  };
+};
+var buildInitialiseCheckedItemsFromQuery = function buildInitialiseCheckedItemsFromQuery(setCheckedItems) {
+  return function () {
+    var parsedObject = queryString.parse(location.hash, queryStringOptions);
+    var parsed = Object.values(parsedObject);
+
+    if (parsed.length) {
+      setCheckedItems(parsed);
+    }
+  };
+};
+
 var getColorPart = function getColorPart(edge) {
@@ -102,5 +121,5 @@ return Math.min(Math.log(edge.minutesBetweenData) / Math.log(1440) * 255, 230);
 
-var filterNodes = function filterNodes(graphNode) {
+var filterNodes = function filterNodes(graphNodes) {
   return function (checkedItems) {
-    return filter(graphNode, function (node) {
+    return filter(graphNodes, function (node) {
       return includes(checkedItems, node.id);
@@ -111,5 +130,5 @@ });
 
-var filterEdges = function filterEdges(graphEdge) {
+var filterEdges = function filterEdges(graphEdges) {
   return function (checkedItems) {
-    return filter(graphEdge, function (edge) {
+    return filter(graphEdges, function (edge) {
       return includes(checkedItems, edge.from) && includes(checkedItems, edge.to);
@@ -120,2 +139,4 @@ });
 
+var emptyArray = [];
+var runHookOnce = [];
 var ArchitectureBuilder = function ArchitectureBuilder(_ref) {
@@ -133,6 +154,9 @@ var edges = _ref.edges,
 
-  var _useQueryParam = useQueryParam('a', ArrayParam),
-      checkedItems = _useQueryParam[0],
-      setCheckedItems = _useQueryParam[1];
+  var _useState = useState(emptyArray),
+      checkedItems = _useState[0],
+      setCheckedItems = _useState[1];
 
+  useEffect(buildInitialiseCheckedItemsFromQuery(setCheckedItems), runHookOnce);
+  useEffect(buildUpdateQuery(checkedItems), [checkedItems]);
+
   var handleChange = function handleChange(event) {
@@ -149,3 +173,3 @@ var clonedSet = new Set(checkedItems);
   var handleClear = function handleClear() {
-    return setCheckedItems([]);
+    return setCheckedItems(emptyArray);
   };
@@ -152,0 +176,0 @@

package.json

 {
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "GPLv3",
@@ -51,4 +51,6 @@ "main": "dist/index.js",
     "@types/lodash": "^4.14.149",
+    "@types/query-string": "^6.3.0",
     "lodash": "^4.17.15",
     "lodash-es": "^4.17.15",
+    "query-string": "^6.11.1",
     "rgb-hex": "^3.0.0",
@@ -55,0 +57,0 @@ "styled-components": "^5.0.1",

No alert changes

Improved metrics

Total package byte prevSize

99639

increased by9.11%

Number of package files

27

increased by8%

Lines of code

594

increased by12.29%

Worsened metrics

Dependency count

10

increased by25%

Dependency changes

• + Added@types/query-string@^6.3.0

• + Addedquery-string@^6.11.1

• + Added@types/query-string@6.3.0(transitive)

• + Addedfilter-obj@1.1.0(transitive)

• + Addedquery-string@6.14.1(transitive)

• + Addedsplit-on-first@1.1.0(transitive)

• + Addedstrict-uri-encode@2.0.0(transitive)