@burst/frontend-editing - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

dist/frontend-editing.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode } from 'react';
+import { ReactNode, ReactSVGElement } from 'react';
 
@@ -11,5 +11,7 @@ interface Props {
     absolute?: boolean;
+    svg?: ReactSVGElement;
+    iconSize?: number;
 }
-declare function Editable({ id, type, cmsUrl, token, children, color, absolute }: Props): JSX.Element;
+declare function Editable({ id, type, cmsUrl, token, children, color, absolute, svg, iconSize }: Props): JSX.Element;
 
 export { Editable as default };

dist/frontend-editing.development.cjs.js

@@ -59,5 +59,5 @@ 'use strict';
 var Pencil = function (props) {
-    var _a;
+    var _a, _b;
     var size = (_a = props.size) !== null && _a !== void 0 ? _a : 24;
-    return (React__namespace.createElement("svg", { width: size, height: size, viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', style: { margin: 'auto', height: 'auto' } },
+    return (_b = props.svg) !== null && _b !== void 0 ? _b : (React__namespace.createElement("svg", { width: size, height: size, viewBox: '0 0 16 16', xmlns: 'http://www.w3.org/2000/svg', style: { margin: 'auto', height: 'auto' } },
         React__namespace.createElement("path", { d: 'M14.6626 2.87675L13.0766 1.29175C12.6876 0.90275 12.0516 0.90275 11.6626 1.29175L10.3696 2.58475L13.3696 5.58475L14.6626 4.29175C15.0516 3.90275 15.0516 3.26575 14.6626 2.87675Z', fill: '#FD2CA8' }),
@@ -69,6 +69,7 @@ React__namespace.createElement("path", { d: 'M2.36714 10.5861L5.36694 13.5859L12.3655 6.58734L9.36574 3.58754L2.36714 10.5861Z', fill: '#FFE203' }),
 function Editable(_a) {
-    var id = _a.id, type = _a.type, cmsUrl = _a.cmsUrl, token = _a.token, children = _a.children, color = _a.color, _b = _a.absolute, absolute = _b === void 0 ? true : _b;
+    var id = _a.id, type = _a.type, cmsUrl = _a.cmsUrl, token = _a.token, children = _a.children, color = _a.color, _b = _a.absolute, absolute = _b === void 0 ? true : _b, svg = _a.svg, iconSize = _a.iconSize;
     var _c = React.useState(false), showForm = _c[0], setShowForm = _c[1];
     var mediaMatch = window.matchMedia('(max-width: 1024px)');
     var _d = React.useState(mediaMatch.matches), matches = _d[0], setMatches = _d[1];
+    var _e = React.useState(false), hover = _e[0], setHover = _e[1];
     React.useEffect(function () {
@@ -94,5 +95,5 @@ var handler = function (e) { setMatches(e.matches); };
         }); },
-        pencilButton: function (smallWindow) { return ({
+        pencilButton: function (smallWindow, hover) { return ({
             display: 'flex',
-            transform: 'scale(1.25)',
+            transform: hover ? 'scale(1.25)' : 'scale(1)',
             borderRadius: '50%',
@@ -112,4 +113,4 @@ cursor: 'pointer',
             React__namespace.createElement(Dialog__namespace.Trigger, { asChild: true },
-                React__namespace.createElement("div", { style: styles.pencilButton(matches) },
-                    React__namespace.createElement(Pencil, null)))),
+                React__namespace.createElement("div", { style: styles.pencilButton(matches, hover), onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } },
+                    React__namespace.createElement(Pencil, { size: iconSize, svg: svg })))),
         children,
@@ -116,0 +117,0 @@ showForm && (React__namespace.createElement(Dialog__namespace.Overlay, { style: { overflowY: 'hidden' } },

dist/frontend-editing.production.cjs.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@radix-ui/react-dialog"),r=require("next/router");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=n(e),o=n(t);function a(e){var t,n=e.id,o=e.type,a=e.cmsUrl,l=e.token,c=e.onSave,u=e.hide,d=r.useRouter();i.useEffect((function(){function e(e){"object"==typeof e.data&&"SUBMIT_FORM"===e.data.type&&c()}return window.addEventListener("message",e,!1),function(){return window.removeEventListener("message",e,!1)}}));var s=new URL(a+"/frontend-editing/edit/"+o+"/"+n+"/"+(null!==(t=null==d?void 0:d.locale)&&void 0!==t?t:"en"));return"string"==typeof l&&s.searchParams.set("jwt",l),i.createElement(i.Fragment,null,i.createElement("div",{onClick:u,style:{position:"fixed",zIndex:9998,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.5)",top:0,right:0,cursor:"pointer"}}),i.createElement("iframe",{src:s.toString(),style:{position:"fixed",top:0,right:0,resize:"horizontal",overflowX:"scroll",overflowY:"hidden",overscrollBehaviorX:"contain",zIndex:9999,width:"70%",height:"100%",backgroundColor:"white"}}))}var l=function(e){var t,r=null!==(t=e.size)&&void 0!==t?t:24;return i.createElement("svg",{width:r,height:r,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{margin:"auto",height:"auto"}},i.createElement("path",{d:"M14.6626 2.87675L13.0766 1.29175C12.6876 0.90275 12.0516 0.90275 11.6626 1.29175L10.3696 2.58475L13.3696 5.58475L14.6626 4.29175C15.0516 3.90275 15.0516 3.26575 14.6626 2.87675Z",fill:"#FD2CA8"}),i.createElement("path",{d:"M2.36714 10.5861L5.36694 13.5859L12.3655 6.58734L9.36574 3.58754L2.36714 10.5861Z",fill:"#FFE203"}),i.createElement("path",{d:"M1.0256 14.6098C0.9386 14.8718 1.0806 15.0068 1.3416 14.9218L3.3426 14.2548L1.6926 12.6088L1.0256 14.6098Z",fill:"#000000"}))};exports.default=function(t){var r=t.id,n=t.type,c=t.cmsUrl,u=t.token,d=t.children,s=t.color,f=t.absolute,h=void 0===f||f,m=e.useState(!1),v=m[0],g=m[1],p=window.matchMedia("(max-width: 1024px)"),w=e.useState(p.matches),E=w[0],y=w[1];e.useEffect((function(){var e=function(e){y(e.matches)};return p.addEventListener("change",e),function(){return p.removeEventListener("change",e)}}));var L=function(e){return{position:h?"absolute":"relative",display:"flex",justifyContent:e?"center":"flex-end",height:"32p",width:"100%"}},x=function(e){return{display:"flex",transform:"scale(1.25)",borderRadius:"50%",cursor:"pointer",zIndex:10,backgroundColor:null!=s?s:"#808080",width:"3.5rem",height:"3.5rem",right:e?"":"0",marginRight:e?"":"5rem",marginTop:e?"":"2rem"}};return i.createElement(o.Root,null,i.createElement("div",{onClick:function(){return g(!0)},style:L(E)},i.createElement(o.Trigger,{asChild:!0},i.createElement("div",{style:x(E)},i.createElement(l,null)))),d,v&&i.createElement(o.Overlay,{style:{overflowY:"hidden"}},i.createElement(o.Content,{asChild:!0},i.createElement(a,{id:r,type:n,cmsUrl:c,token:u,hide:function(){return g(!1)},onSave:function(){return e=function(){return g(!1)},setTimeout((function(){return e()}),100),void setTimeout((function(){var e=new URL(window.location.toString());window.location.replace(e.toString())}),500);var e}}))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@radix-ui/react-dialog"),n=require("next/router");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=r(e),o=r(t);function a(e){var t,r=e.id,o=e.type,a=e.cmsUrl,l=e.token,u=e.onSave,c=e.hide,s=n.useRouter();i.useEffect((function(){function e(e){"object"==typeof e.data&&"SUBMIT_FORM"===e.data.type&&u()}return window.addEventListener("message",e,!1),function(){return window.removeEventListener("message",e,!1)}}));var d=new URL(a+"/frontend-editing/edit/"+o+"/"+r+"/"+(null!==(t=null==s?void 0:s.locale)&&void 0!==t?t:"en"));return"string"==typeof l&&d.searchParams.set("jwt",l),i.createElement(i.Fragment,null,i.createElement("div",{onClick:c,style:{position:"fixed",zIndex:9998,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.5)",top:0,right:0,cursor:"pointer"}}),i.createElement("iframe",{src:d.toString(),style:{position:"fixed",top:0,right:0,resize:"horizontal",overflowX:"scroll",overflowY:"hidden",overscrollBehaviorX:"contain",zIndex:9999,width:"70%",height:"100%",backgroundColor:"white"}}))}var l=function(e){var t,n,r=null!==(t=e.size)&&void 0!==t?t:24;return null!==(n=e.svg)&&void 0!==n?n:i.createElement("svg",{width:r,height:r,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{margin:"auto",height:"auto"}},i.createElement("path",{d:"M14.6626 2.87675L13.0766 1.29175C12.6876 0.90275 12.0516 0.90275 11.6626 1.29175L10.3696 2.58475L13.3696 5.58475L14.6626 4.29175C15.0516 3.90275 15.0516 3.26575 14.6626 2.87675Z",fill:"#FD2CA8"}),i.createElement("path",{d:"M2.36714 10.5861L5.36694 13.5859L12.3655 6.58734L9.36574 3.58754L2.36714 10.5861Z",fill:"#FFE203"}),i.createElement("path",{d:"M1.0256 14.6098C0.9386 14.8718 1.0806 15.0068 1.3416 14.9218L3.3426 14.2548L1.6926 12.6088L1.0256 14.6098Z",fill:"#000000"}))};exports.default=function(t){var n=t.id,r=t.type,u=t.cmsUrl,c=t.token,s=t.children,d=t.color,f=t.absolute,v=void 0===f||f,h=t.svg,m=t.iconSize,g=e.useState(!1),p=g[0],w=g[1],E=window.matchMedia("(max-width: 1024px)"),y=e.useState(E.matches),L=y[0],x=y[1],b=e.useState(!1),C=b[0],M=b[1];e.useEffect((function(){var e=function(e){x(e.matches)};return E.addEventListener("change",e),function(){return E.removeEventListener("change",e)}}));var S=function(e){return{position:v?"absolute":"relative",display:"flex",justifyContent:e?"center":"flex-end",height:"32p",width:"100%"}},j=function(e,t){return{display:"flex",transform:t?"scale(1.25)":"scale(1)",borderRadius:"50%",cursor:"pointer",zIndex:10,backgroundColor:null!=d?d:"#808080",width:"3.5rem",height:"3.5rem",right:e?"":"0",marginRight:e?"":"5rem",marginTop:e?"":"2rem"}};return i.createElement(o.Root,null,i.createElement("div",{onClick:function(){return w(!0)},style:S(L)},i.createElement(o.Trigger,{asChild:!0},i.createElement("div",{style:j(L,C),onMouseEnter:function(){return M(!0)},onMouseLeave:function(){return M(!1)}},i.createElement(l,{size:m,svg:h})))),s,p&&i.createElement(o.Overlay,{style:{overflowY:"hidden"}},i.createElement(o.Content,{asChild:!0},i.createElement(a,{id:n,type:r,cmsUrl:u,token:c,hide:function(){return w(!1)},onSave:function(){return e=function(){return w(!1)},setTimeout((function(){return e()}),100),void setTimeout((function(){var e=new URL(window.location.toString());window.location.replace(e.toString())}),500);var e}}))))};
 //# sourceMappingURL=frontend-editing.production.cjs.min.js.map

dist/frontend-editing.production.esm.js

@@ -1,2 +0,2 @@
-import*as e from"react";import{useState as t,useEffect as n}from"react";import*as r from"@radix-ui/react-dialog";import{useRouter as i}from"next/router";function o(t){var n,r=t.id,o=t.type,a=t.cmsUrl,l=t.token,c=t.onSave,d=t.hide,u=i();e.useEffect((function(){function e(e){"object"==typeof e.data&&"SUBMIT_FORM"===e.data.type&&c()}return window.addEventListener("message",e,!1),function(){return window.removeEventListener("message",e,!1)}}));var s=new URL(a+"/frontend-editing/edit/"+o+"/"+r+"/"+(null!==(n=null==u?void 0:u.locale)&&void 0!==n?n:"en"));return"string"==typeof l&&s.searchParams.set("jwt",l),e.createElement(e.Fragment,null,e.createElement("div",{onClick:d,style:{position:"fixed",zIndex:9998,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.5)",top:0,right:0,cursor:"pointer"}}),e.createElement("iframe",{src:s.toString(),style:{position:"fixed",top:0,right:0,resize:"horizontal",overflowX:"scroll",overflowY:"hidden",overscrollBehaviorX:"contain",zIndex:9999,width:"70%",height:"100%",backgroundColor:"white"}}))}var a=function(t){var n,r=null!==(n=t.size)&&void 0!==n?n:24;return e.createElement("svg",{width:r,height:r,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{margin:"auto",height:"auto"}},e.createElement("path",{d:"M14.6626 2.87675L13.0766 1.29175C12.6876 0.90275 12.0516 0.90275 11.6626 1.29175L10.3696 2.58475L13.3696 5.58475L14.6626 4.29175C15.0516 3.90275 15.0516 3.26575 14.6626 2.87675Z",fill:"#FD2CA8"}),e.createElement("path",{d:"M2.36714 10.5861L5.36694 13.5859L12.3655 6.58734L9.36574 3.58754L2.36714 10.5861Z",fill:"#FFE203"}),e.createElement("path",{d:"M1.0256 14.6098C0.9386 14.8718 1.0806 15.0068 1.3416 14.9218L3.3426 14.2548L1.6926 12.6088L1.0256 14.6098Z",fill:"#000000"}))};function l(i){var l=i.id,c=i.type,d=i.cmsUrl,u=i.token,s=i.children,m=i.color,h=i.absolute,f=void 0===h||h,v=t(!1),g=v[0],p=v[1],w=window.matchMedia("(max-width: 1024px)"),E=t(w.matches),L=E[0],y=E[1];n((function(){var e=function(e){y(e.matches)};return w.addEventListener("change",e),function(){return w.removeEventListener("change",e)}}));var x=function(e){return{position:f?"absolute":"relative",display:"flex",justifyContent:e?"center":"flex-end",height:"32p",width:"100%"}},C=function(e){return{display:"flex",transform:"scale(1.25)",borderRadius:"50%",cursor:"pointer",zIndex:10,backgroundColor:null!=m?m:"#808080",width:"3.5rem",height:"3.5rem",right:e?"":"0",marginRight:e?"":"5rem",marginTop:e?"":"2rem"}};return e.createElement(r.Root,null,e.createElement("div",{onClick:function(){return p(!0)},style:x(L)},e.createElement(r.Trigger,{asChild:!0},e.createElement("div",{style:C(L)},e.createElement(a,null)))),s,g&&e.createElement(r.Overlay,{style:{overflowY:"hidden"}},e.createElement(r.Content,{asChild:!0},e.createElement(o,{id:l,type:c,cmsUrl:d,token:u,hide:function(){return p(!1)},onSave:function(){return e=function(){return p(!1)},setTimeout((function(){return e()}),100),void setTimeout((function(){var e=new URL(window.location.toString());window.location.replace(e.toString())}),500);var e}}))))}export{l as default};
+import*as e from"react";import{useState as t,useEffect as n}from"react";import*as r from"@radix-ui/react-dialog";import{useRouter as o}from"next/router";function i(t){var n,r=t.id,i=t.type,a=t.cmsUrl,l=t.token,c=t.onSave,d=t.hide,u=o();e.useEffect((function(){function e(e){"object"==typeof e.data&&"SUBMIT_FORM"===e.data.type&&c()}return window.addEventListener("message",e,!1),function(){return window.removeEventListener("message",e,!1)}}));var s=new URL(a+"/frontend-editing/edit/"+i+"/"+r+"/"+(null!==(n=null==u?void 0:u.locale)&&void 0!==n?n:"en"));return"string"==typeof l&&s.searchParams.set("jwt",l),e.createElement(e.Fragment,null,e.createElement("div",{onClick:d,style:{position:"fixed",zIndex:9998,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.5)",top:0,right:0,cursor:"pointer"}}),e.createElement("iframe",{src:s.toString(),style:{position:"fixed",top:0,right:0,resize:"horizontal",overflowX:"scroll",overflowY:"hidden",overscrollBehaviorX:"contain",zIndex:9999,width:"70%",height:"100%",backgroundColor:"white"}}))}var a=function(t){var n,r,o=null!==(n=t.size)&&void 0!==n?n:24;return null!==(r=t.svg)&&void 0!==r?r:e.createElement("svg",{width:o,height:o,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{margin:"auto",height:"auto"}},e.createElement("path",{d:"M14.6626 2.87675L13.0766 1.29175C12.6876 0.90275 12.0516 0.90275 11.6626 1.29175L10.3696 2.58475L13.3696 5.58475L14.6626 4.29175C15.0516 3.90275 15.0516 3.26575 14.6626 2.87675Z",fill:"#FD2CA8"}),e.createElement("path",{d:"M2.36714 10.5861L5.36694 13.5859L12.3655 6.58734L9.36574 3.58754L2.36714 10.5861Z",fill:"#FFE203"}),e.createElement("path",{d:"M1.0256 14.6098C0.9386 14.8718 1.0806 15.0068 1.3416 14.9218L3.3426 14.2548L1.6926 12.6088L1.0256 14.6098Z",fill:"#000000"}))};function l(o){var l=o.id,c=o.type,d=o.cmsUrl,u=o.token,s=o.children,m=o.color,f=o.absolute,h=void 0===f||f,v=o.svg,g=o.iconSize,p=t(!1),w=p[0],E=p[1],L=window.matchMedia("(max-width: 1024px)"),y=t(L.matches),x=y[0],C=y[1],b=t(!1),k=b[0],z=b[1];n((function(){var e=function(e){C(e.matches)};return L.addEventListener("change",e),function(){return L.removeEventListener("change",e)}}));var M=function(e){return{position:h?"absolute":"relative",display:"flex",justifyContent:e?"center":"flex-end",height:"32p",width:"100%"}},S=function(e,t){return{display:"flex",transform:t?"scale(1.25)":"scale(1)",borderRadius:"50%",cursor:"pointer",zIndex:10,backgroundColor:null!=m?m:"#808080",width:"3.5rem",height:"3.5rem",right:e?"":"0",marginRight:e?"":"5rem",marginTop:e?"":"2rem"}};return e.createElement(r.Root,null,e.createElement("div",{onClick:function(){return E(!0)},style:M(x)},e.createElement(r.Trigger,{asChild:!0},e.createElement("div",{style:S(x,k),onMouseEnter:function(){return z(!0)},onMouseLeave:function(){return z(!1)}},e.createElement(a,{size:g,svg:v})))),s,w&&e.createElement(r.Overlay,{style:{overflowY:"hidden"}},e.createElement(r.Content,{asChild:!0},e.createElement(i,{id:l,type:c,cmsUrl:d,token:u,hide:function(){return E(!1)},onSave:function(){return e=function(){return E(!1)},setTimeout((function(){return e()}),100),void setTimeout((function(){var e=new URL(window.location.toString());window.location.replace(e.toString())}),500);var e}}))))}export{l as default};
 //# sourceMappingURL=frontend-editing.production.esm.js.map

package.json

 {
   "name": "@burst/frontend-editing",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Package to allow front-end editing",
@@ -24,3 +24,4 @@ "author": "Mattijn Stolk [e-mail]",
   "peerDependencies": {
-    "react": ">=16"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
@@ -30,3 +31,2 @@ "devDependencies": {
     "next": "^12.1.0",
-    "react": "^17.0.2",
     "ts-standard": "*",
@@ -40,3 +40,3 @@ "typescript": "^4.3.2"
   },
-  "gitHead": "318095328d24af574cc9242ee79a9d25ec9b5a95"
+  "gitHead": "7fea4f2ab208a8394e85ba3ee977478e6b487da4"
 }

README.md

 # `@burst/frontend-editing`
 
 This package is used for editing content in the frontend. <br>
+This package requires a drupal back-end installed with this [package](https://www.drupal.org/project/fe_editing_nextjs)
 
 !! This package assumes the preview mode module is already installed and working. <br>
-!! TODO: write documentation for this. 
+  You may need to tweak the existing preview mode to integrate this module. 
 
@@ -16,3 +17,3 @@ ## Installation
 ## Usage
-You can use this module in the paragraphmapper
+You will have to implement the module in organisms/paragraphmapper the following way
 
@@ -45,4 +46,6 @@ ```ts
         token = {props.preview?.token ?? null}
-        color = '#000' //defaults to gray, overwrite it with this value. 
-        absolute = false
+        color = '#000' //defaults to gray if not provided, overwrite it with this value. 
+        absolute = false //defaults to true if not provided, set to false if you want to use relative positioning
+        icon = { SVGIcon() } //defaults to pencil if not provided, overwrite it with this icon. 
+        iconSize = '24' //defaults to 24 if not provided.
       >
@@ -56,3 +59,5 @@ {component()}
 
-#### To send these props to the paragraphmapper you need to import the preview data in the [...slug].tsx
+To send these props to the organisms/paragraphmapper you need to import the preview data in the pages/[...slug].tsx. <br/>
+Repeat this process for every page that needs to be editable. 
+
 ```typescript
@@ -69,3 +74,3 @@ import { PreviewData } from '@misc/preview'
     props: {
-      preview: ctx.preview ?? null
+      preview: ctx.preview ?? null  //this is an example that could be different with the existing preview module. 
     }
@@ -84,3 +89,3 @@ }
 
-the function getCmsUrl is placed in environment.ts. 
+the function getCmsUrl is placed in misc/environment.ts. 
 ```typescript
@@ -96,3 +101,3 @@ export function getCmsUrl (): string {
 
-the function previewModeEnabled is placed in helper.ts.
+the function previewModeEnabled is placed in misc/helper.ts.
 ```typescript
@@ -109,3 +114,3 @@ export function previewModeEnabled (preview?: PreviewData): boolean {
 
-the function previewdata is placed in preview.ts.
+the function previewdata is placed in misc/preview.ts, if something like this is already in use in your project, use the datatype/structure from this. 
 ```typescript
@@ -116,1 +121,23 @@ export interface PreviewData {
 ```
+
+## optional
+if you want to use your own icon for the edit button you can do this by importing the icon and passing it to the editable component.
+A good place for this file is in the Atoms folder. <br/>
+Your icon file should look like this:
+```typescript
+import React from "react";
+
+export default function EditSVG() {
+  return React.createElement('svg', {
+    width: '24',
+    height: '24',
+    viewBox: '0 0 20 20',
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: { margin: 'auto', height: 'auto' },
+    children: <>
+                  <path> </path>
+                  <path> </path> 
+              </>
+  })
+}

No alert changes

Improved metrics

Total package byte prevSize

33878

increased by10.56%

Dev dependency count

4

decreased by-20%

Lines of code

159

increased by2.58%

Number of lines in readme file

136

increased by24.77%

Worsened metrics

Dependency count

3

increased by50%

No dependency changes