Upgrade all deps to latest & remove runtime deps from output bundle (#89)

* chore(deps): Upgrade all deps to latest & remove deprecated deps

BREAKING CHANGE:
* Several runtime deps like Preact have been upgraded
* Made changes in source code to support newer lint rules, newer Preact changes, etc

* fix: Remove runtime dependencies from output bundle and update package.json accordingly

Co-authored-by: Sameer Goyal <[email protected]>

Author: sameergoyal

.eslintrc

@@ -0,0 +1,36 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "airbnb",
+    "airbnb-typescript"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "jsx-a11y",
+    "jest"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "tsconfig.json"
+  },
+  "rules": {
+    "max-len": ["error", { "code": 120 }],
+    // Since we use Preact, there's no react in scope
+    "react/react-in-jsx-scope": "off",
+    // We follow a pattern of using index files to re-export all public objects/types & we dont want to use default export if there's just one
+    "import/prefer-default-export": "off",
+    // We need to create a new object in unit tests without using the resulting object
+    "no-new": "off",
+    // In some cases function signature requires a positional arg, but is not needed in body, prepend _ to make it work
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    // Allow immer for param re-assign
+    "no-param-reassign": ["error", { "props": true, "ignorePropertyModificationsForRegex": ["[dD]raft"] }],
+    // Allow optional dependency of dagre
+    "import/no-extraneous-dependencies": ["error", { "optionalDependencies": true }],
+    // TODO: See if newer versions of preact can better handle rendering consumer provided callbacks using memoized callbacks
+    "react/jsx-no-bind": "off"
+  }
+}

DeclarationBundlePlugin.js

@@ -38,7 +38,7 @@ Read more about the architecture of diagram maker [here](https://awslabs.github.
 Check out our full documentation [here](https://awslabs.github.io/diagram-maker).
 
 ## Typedoc generated documentation
-Check out the [typedoc](http://typedoc.org/) generated documentation [here](https://awslabs.github.io/diagram-maker/typedoc/globals.html) to find out more information about any of our exported symbols.
+Check out the [typedoc](http://typedoc.org/) generated documentation [here](https://awslabs.github.io/diagram-maker/typedoc/modules.html) to find out more information about any of our exported symbols.
 
 ## Security
 

README.md

@@ -0,0 +1,20 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/recommended",
+    "airbnb",
+    "airbnb-typescript",
+    "plugin:cypress/recommended"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "cypress"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "cypress/tsconfig.json"
+  },
+  "rules": {
+    "max-len": ["error", { "code": 120 }]
+  }
+}

cypress/.eslintrc

@@ -25,7 +25,7 @@ function getRightButtonMouseEventParams() {
 export function dragAndDropElement(
   element: Cypress.Chainable,
   position: { pageX: number, pageY: number },
-  mouseParams: { button: number } = getLeftButtonMouseEventParams()
+  mouseParams: { button: number } = getLeftButtonMouseEventParams(),
 ) {
   element.trigger('mousedown', { ...mouseParams, which: 1, force: true })
     .trigger('mousemove', { ...mouseParams, ...position, force: true })
@@ -42,9 +42,11 @@ export function dragStartElement(
   element: Cypress.Chainable,
   position: { pageX: number, pageY: number },
   originPosition?: { pageX: number, pageY: number },
-  mouseParams: { button: number } = getLeftButtonMouseEventParams()
+  mouseParams: { button: number } = getLeftButtonMouseEventParams(),
 ) {
-  element.trigger('mousedown', { ...mouseParams, which: 1, ...originPosition, force: true })
+  element.trigger('mousedown', {
+    ...mouseParams, which: 1, ...originPosition, force: true,
+  })
     .trigger('mousemove', { ...mouseParams, ...position, force: true });
 }
 
@@ -57,7 +59,7 @@ export function dragStartElement(
 export function dragElement(
   element: Cypress.Chainable,
   position: { pageX: number, pageY: number },
-  mouseParams: { button: number } = getLeftButtonMouseEventParams()
+  mouseParams: { button: number } = getLeftButtonMouseEventParams(),
 ) {
   element.trigger('mousemove', { ...mouseParams, ...position, force: true });
 }
@@ -71,7 +73,7 @@ export function dragElement(
 export function dropElement(
   element: Cypress.Chainable,
   position?: { pageX: number, pageY: number },
-  mouseParams: { button: number } = getLeftButtonMouseEventParams()
+  mouseParams: { button: number } = getLeftButtonMouseEventParams(),
 ) {
   element.trigger('mouseup', { ...mouseParams, ...position, force: true });
 }
@@ -88,7 +90,7 @@ export function dropElement(
 export function forceDragAndDropElement(
   element: Cypress.Chainable,
   position: { pageX: number, pageY: number },
-  mouseParams: { button: number } = getLeftButtonMouseEventParams()
+  mouseParams: { button: number } = getLeftButtonMouseEventParams(),
 ) {
   element.trigger('mousedown', { ...mouseParams, which: 1, force: true })
     .trigger('mousemove', { ...mouseParams, ...position, force: true })
@@ -104,7 +106,7 @@ export function forceDragAndDropElement(
 export function clickElement(
   element: Cypress.Chainable,
   position: Cypress.PositionType = 'center',
-  mouseParams: { button: number } = getLeftButtonMouseEventParams()
+  mouseParams: { button: number } = getLeftButtonMouseEventParams(),
 ) {
   element.trigger('mousedown', position, { ...mouseParams, force: true })
     .trigger('mouseup', { ...mouseParams, force: true });
@@ -119,7 +121,7 @@ export function clickElement(
 export function rightClickElement(
   element: Cypress.Chainable,
   position: Cypress.PositionType = 'center',
-  mouseParams: { button: number } = getRightButtonMouseEventParams()
+  mouseParams: { button: number } = getRightButtonMouseEventParams(),
 ) {
   element.trigger('contextmenu', position, { ...mouseParams, force: true });
 }
@@ -133,7 +135,7 @@ export function rightClickElement(
 export function triggerKeyboardEvent(
   element: Cypress.Chainable,
   key: string,
-  modKey = false
+  modKey = false,
 ) {
   let text = key;
   if (key === 'Delete') {

cypress/common/interaction.ts

@@ -1,5 +1,5 @@
 module.exports = (on, config) => {
-  require('@cypress/code-coverage/task')(on, config)
+  require('@cypress/code-coverage/task')(on, config);
 
   return config;
-}
+};

cypress/plugins/index.js

@@ -1,4 +1,4 @@
-Cypress.Commands.overwrite('visit', function (originalVisit, filename, options) {
-  var visitUrl = Cypress.config().baseUrl ? filename : 'dist/examples'.concat(filename);
+Cypress.Commands.overwrite('visit', (originalVisit, filename, options) => {
+  const visitUrl = Cypress.config().baseUrl ? filename : 'dist/examples'.concat(filename);
   originalVisit(visitUrl, options);
 });

cypress/support/commands.js

@@ -1,3 +1,3 @@
-import '@cypress/code-coverage/support'
+import '@cypress/code-coverage/support';
 
-import './commands'
+import './commands';

cypress/support/index.js

@@ -1,9 +1,9 @@
 import {
   getAllEdges, getAllNodes, getDiagramMakerView, getEdgeById, getElementByDataIdAndType, getNodeById,
-  getPanelById, getPotentialEdge, getPotentialNodeById, getSelectionMarquee, getWorkspace
+  getPanelById, getPotentialEdge, getPotentialNodeById, getSelectionMarquee, getWorkspace,
 } from '../common/getters';
 import {
-  clickElement, dragAndDropElement, dragElement, dragStartElement, dropElement, triggerKeyboardEvent
+  clickElement, dragAndDropElement, dragElement, dragStartElement, dropElement, triggerKeyboardEvent,
 } from '../common/interaction';
 import { convertScaleToMatrix, convertTranslate2dToMatrix } from '../common/utils';
 
@@ -14,14 +14,13 @@ describe('DiagramMaker.API', () => {
 
   const toolsType = 'DiagramMaker.Tools';
   const viewport = { width: 1200, height: 900 };
-  const nodeRect = { width: 100, height: 50, top: 150, left: 200 };
+  const nodeRect = {
+    width: 100, height: 50, top: 150, left: 200,
+  };
   const workspace = { width: 3200, height: 1600 };
 
-  // TODO: Add layout integ tests
-
   describe('setEditorMode', () => {
     describe('Select', () => {
-
       const selectId = 'Select';
 
       beforeEach(() => {
@@ -102,7 +101,9 @@ describe('DiagramMaker.API', () => {
         getElementByDataIdAndType(readOnlyId, toolsType).click();
         const expectedTransform = convertScaleToMatrix(1.3);
         getWorkspace()
-          .trigger('wheel', { deltaY: -50, pageX: 0, pageY: 0, force: true });
+          .trigger('wheel', {
+            deltaY: -50, pageX: 0, pageY: 0, force: true,
+          });
         getWorkspace().should('have.css', 'transform').and('eq', expectedTransform);
       });
 
@@ -226,7 +227,9 @@ describe('DiagramMaker.API', () => {
       it('centers the workspace & resets the zoom', () => {
         const expectedTransform = convertScaleToMatrix(1.3);
         getWorkspace()
-          .trigger('wheel', { deltaY: -50, pageX: 0, pageY: 0, force: true });
+          .trigger('wheel', {
+            deltaY: -50, pageX: 0, pageY: 0, force: true,
+          });
         getWorkspace().should('have.css', 'transform').and('eq', expectedTransform);
         getElementByDataIdAndType(focusSelectedId, toolsType).click();
         const expectedLeft = (viewport.width - workspace.width) / 2;
@@ -248,14 +251,15 @@ describe('DiagramMaker.API', () => {
         dragAndDropElement(node, { pageX: centerX, pageY: centerY });
         node.should('have.css', 'transform').and('eq', expectedNodeTransform);
         getElementByDataIdAndType(focusSelectedId, toolsType).click();
-        const expectedTransform =
-          convertTranslate2dToMatrix(viewport.width / 2 - centerX, viewport.height / 2 - centerY);
+        const expectedTransform = convertTranslate2dToMatrix(
+          viewport.width / 2 - centerX,
+          viewport.height / 2 - centerY,
+        );
         getWorkspace().should('have.css', 'transform').and('eq', expectedTransform);
       });
     });
 
     describe('when multiple nodes are selected', () => {
-
       beforeEach(() => {
         const selectId = 'Select';
         getElementByDataIdAndType(selectId, toolsType).click();
@@ -267,19 +271,21 @@ describe('DiagramMaker.API', () => {
       it('fits the selected nodes', () => {
         getElementByDataIdAndType(focusSelectedId, toolsType).click();
         const buffer = 50;
-        const nodeBoundingRect = { width: 300, height: 200, top: 150, left: 200 };
+        const nodeBoundingRect = {
+          width: 300, height: 200, top: 150, left: 200,
+        };
         const nodeBoundingRectWithBuffer = {
           height: nodeBoundingRect.height + 2 * buffer,
           left: nodeBoundingRect.left - buffer,
           top: nodeBoundingRect.top - buffer,
-          width: nodeBoundingRect.width + 2 * buffer
+          width: nodeBoundingRect.width + 2 * buffer,
         };
         const scaleForWidth = viewport.width / nodeBoundingRectWithBuffer.width;
         const scaleForHeight = viewport.height / nodeBoundingRectWithBuffer.height;
         const expectedScale = Math.min(scaleForWidth, scaleForHeight);
         const expectedPosition = {
           x: -nodeBoundingRectWithBuffer.left * expectedScale,
-          y: -nodeBoundingRectWithBuffer.top * expectedScale
+          y: -nodeBoundingRectWithBuffer.top * expectedScale,
         };
         const expectedTransform = convertScaleToMatrix(expectedScale, expectedPosition.x, expectedPosition.y);
         getWorkspace().should('have.css', 'transform').and('eq', expectedTransform);
@@ -292,19 +298,21 @@ describe('DiagramMaker.API', () => {
     it('fits all the nodes on the screen', () => {
       getElementByDataIdAndType(fitId, toolsType).click();
       const buffer = 50;
-      const nodeBoundingRect = { width: 300, height: 200, top: 150, left: 200 };
+      const nodeBoundingRect = {
+        width: 300, height: 200, top: 150, left: 200,
+      };
       const nodeBoundingRectWithBuffer = {
         height: nodeBoundingRect.height + 2 * buffer,
         left: nodeBoundingRect.left - buffer,
         top: nodeBoundingRect.top - buffer,
-        width: nodeBoundingRect.width + 2 * buffer
+        width: nodeBoundingRect.width + 2 * buffer,
       };
       const scaleForWidth = viewport.width / nodeBoundingRectWithBuffer.width;
       const scaleForHeight = viewport.height / nodeBoundingRectWithBuffer.height;
       const expectedScale = Math.min(scaleForWidth, scaleForHeight);
       const expectedPosition = {
         x: -nodeBoundingRectWithBuffer.left * expectedScale,
-        y: -nodeBoundingRectWithBuffer.top * expectedScale
+        y: -nodeBoundingRectWithBuffer.top * expectedScale,
       };
       const expectedTransform = convertScaleToMatrix(expectedScale, expectedPosition.x, expectedPosition.y);
       getWorkspace().should('have.css', 'transform').and('eq', expectedTransform);