Upgrade dependencies (#10)

Notable upgrades: - `react-d3-graph`: `1.5.0` ➡️ `1.6.0` - This includes some potential fixes for dragging the viewport after focusing on a node (danielcaldas/react-d3-graph#374) - `react-scripts` (Create React App): `3.4.1` ➡️ `4.0.1` - Move from `@emotion/core` `10.0.28` ➡️ `@emotion/react` `11.1.4` - This now requires using [Babel macros](https://emotion.sh/docs/babel-macros) - This also required changing `/** @jsx jsx */` to `/** @jsxImportSource @emotion/react */` 🤮 - `typescript`: `3.9.6` ➡️ `4.1.3`
TranquilMarmot · Feb 6, 2021 · e715fb3 · e715fb3
1 parent b872a29
commit e715fb3
Show file tree

Hide file tree

Showing 19 changed files with 16,165 additions and 9,683 deletions.
diff --git a/loom-editor/package-lock.json b/loom-editor/package-lock.json
diff --git a/loom-editor/package.json b/loom-editor/package.json
@@ -3,12 +3,13 @@
   "version": "1.0.3",
   "private": true,
   "dependencies": {
-    "@emotion/core": "^10.0.28",
+    "@emotion/babel-plugin": "^11.1.2",
+    "@emotion/react": "^11.1.4",
     "d3": "^5.16.0",
     "loom-common": "file:../loom-common/out",
-    "react-d3-graph": "^2.5.0",
-    "react-hotkeys-hook": "^2.2.2",
-    "react-scripts": "3.4.1",
+    "react-d3-graph": "^2.6.0",
+    "react-hotkeys-hook": "^3.0.3",
+    "react-scripts": "4.0.1",
     "typesafe-actions": "^5.1.0"
   },
   "scripts": {

diff --git a/loom-editor/src/Styles.ts b/loom-editor/src/Styles.ts
@@ -1,4 +1,4 @@
-import { css } from "@emotion/core";
+import { css } from "@emotion/react";
 
 /** Base button styles */
 export const buttonBase = css`
@@ -17,6 +17,7 @@ export const buttonBase = css`
 /** Used to style a button in a list of items */
 export const listItemBase = css`
   display: flex;
+  align-items: center;
 
   color: var(--vscode-menu-foreground);
 

diff --git a/loom-editor/src/components/App.tsx b/loom-editor/src/components/App.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 

diff --git a/loom-editor/src/components/NodeGraph.tsx b/loom-editor/src/components/NodeGraph.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent, useCallback, useState } from "react";
 import {
   Graph,

diff --git a/loom-editor/src/components/NodeGraphView/NodeBody.tsx b/loom-editor/src/components/NodeGraphView/NodeBody.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent } from "react";
 
 const bodyStyle = css`

diff --git a/loom-editor/src/components/NodeGraphView/NodeColorChooser.tsx b/loom-editor/src/components/NodeGraphView/NodeColorChooser.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent } from "react";
 
 import { setNodeColor } from "loom-common/EditorActions";
@@ -60,9 +60,9 @@ const NodeGraphViewColorChooser: FunctionComponent<NodeGraphViewColorChooserProp
             key={color}
             aria-label={`Choose color ${index}`}
             css={css`
-            ${buttonStyle}
-            background-color: ${color};
-          `}
+              ${buttonStyle}
+              background-color: ${color};
+            `}
           >
             {" "}
           </button>

diff --git a/loom-editor/src/components/NodeGraphView/NodeFooter.tsx b/loom-editor/src/components/NodeGraphView/NodeFooter.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent } from "react";
 
 import { useYarnState } from "../../state/YarnContext";
@@ -91,7 +91,8 @@ const NodeFooter: FunctionComponent<NodeFooterProps> = ({
     <div
       css={css`
         ${containerStyle}
-        background-color: ${nodeColor}`}
+        background-color: ${nodeColor}
+      `}
     >
       <div css={tagListContainerStyle}>
         <div css={tagListStyle}>

diff --git a/loom-editor/src/components/NodeGraphView/NodeHeader.tsx b/loom-editor/src/components/NodeGraphView/NodeHeader.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent } from "react";
 
 import { deleteNode, renameNode } from "loom-common/EditorActions";
@@ -72,7 +72,13 @@ const NodeHeader: FunctionComponent<NodeHeaderProps> = ({
         background-color: ${nodeColor}
       `}
     >
-      <div css={css`${titleLabelStyle}${fontStyle}`}>{title}</div>
+      <div
+        css={css`
+          ${titleLabelStyle}${fontStyle}
+        `}
+      >
+        {title}
+      </div>
       <button
         css={settingsButtonStyle}
         onClick={() => window.vsCodeApi.postMessage(renameNode(title))}

diff --git a/loom-editor/src/components/NodeGraphView/NodeTagChooser.tsx b/loom-editor/src/components/NodeGraphView/NodeTagChooser.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent } from "react";
 
 import { YarnNode } from "loom-common/YarnNode";

diff --git a/loom-editor/src/components/NodeGraphView/index.tsx b/loom-editor/src/components/NodeGraphView/index.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent, useState } from "react";
 
 import { useYarnState } from "../../state/YarnContext";
@@ -212,7 +212,9 @@ const NodeGraphView: FunctionComponent<NodeGraphViewProps> = ({
 
   return (
     <div
-      css={css`${containerStyle}${!searched && dimmedStyle}`}
+      css={css`
+        ${containerStyle}${!searched && dimmedStyle}
+      `}
       data-testid={
         searched ? "node-graph-view-searched" : "node-graph-view-not-searched"
       }

diff --git a/loom-editor/src/components/NodeSearch/NodeList.tsx b/loom-editor/src/components/NodeSearch/NodeList.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent } from "react";
 
 import { createNewNode } from "loom-common/EditorActions";
@@ -44,9 +44,11 @@ const NodeList: FunctionComponent = () => {
           data-testid="node-search-node-button"
         >
           <div
-            css={css`${colorBlockStyle} background-color: ${
-              nodeColors[node.colorID || 0]
-            };`}
+            css={css`
+              ${colorBlockStyle} background-color: ${nodeColors[
+                node.colorID || 0
+              ]};
+            `}
           >
             {" "}
           </div>

diff --git a/loom-editor/src/components/NodeSearch/SearchBox.tsx b/loom-editor/src/components/NodeSearch/SearchBox.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
@@ -150,7 +150,9 @@ const SearchBox: FunctionComponent = () => {
           <CaseSensitiveIcon />
         </button>
         <button
-          css={css`${iconButtonStyle}${regexEnabled && buttonActiveStyle}`}
+          css={css`
+            ${iconButtonStyle}${regexEnabled && buttonActiveStyle}
+          `}
           type="button"
           role="switch"
           aria-checked={regexEnabled}
@@ -163,7 +165,9 @@ const SearchBox: FunctionComponent = () => {
           <RegExIcon />
         </button>
         <button
-          css={css`${textButtonStyle}${searchingTitle && buttonActiveStyle}`}
+          css={css`
+            ${textButtonStyle}${searchingTitle && buttonActiveStyle}
+          `}
           type="button"
           role="switch"
           aria-checked={searchingTitle}
@@ -177,7 +181,9 @@ const SearchBox: FunctionComponent = () => {
         </button>
 
         <button
-          css={css`${textButtonStyle}${searchingBody && buttonActiveStyle}`}
+          css={css`
+            ${textButtonStyle}${searchingBody && buttonActiveStyle}
+          `}
           type="button"
           role="switch"
           aria-checked={searchingBody}
@@ -191,7 +197,9 @@ const SearchBox: FunctionComponent = () => {
         </button>
 
         <button
-          css={css`${textButtonStyle}${searchingTags && buttonActiveStyle}`}
+          css={css`
+            ${textButtonStyle}${searchingTags && buttonActiveStyle}
+          `}
           type="button"
           role="switch"
           aria-checked={searchingTags}

diff --git a/loom-editor/src/components/NodeSearch/TagList.tsx b/loom-editor/src/components/NodeSearch/TagList.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent } from "react";
 
 import { getNodes } from "../../state/Selectors";
@@ -64,7 +64,9 @@ const NodeList: FunctionComponent = () => {
           <button
             data-testid="node-search-tag-button"
             key={`tag-list-${tag}`}
-            css={css`${listItemBase}${listItemStyle}`}
+            css={css`
+              ${listItemBase}${listItemStyle}
+            `}
             onClick={() => dispatch(searchForTag(tag))}
           >
             <div>{tag}</div>

diff --git a/loom-editor/src/components/NodeSearch/index.tsx b/loom-editor/src/components/NodeSearch/index.tsx
@@ -1,5 +1,5 @@
-/** @jsx jsx */
-import { jsx, css } from "@emotion/core";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react/macro";
 import { FunctionComponent, useState } from "react";
 
 import { ReactComponent as ChevronDown } from "../../icons/chevron-down.svg";

diff --git a/loom-editor/src/state/Reducer.ts b/loom-editor/src/state/Reducer.ts
@@ -48,7 +48,7 @@ const searchForTag = (state: State, tag: string): State => {
   };
 };
 
-export default (state: State, action: EditorActions | UiActions): State => {
+const reducer = (state: State, action: EditorActions | UiActions): State => {
   switch (action.type) {
     case YarnEditorMessageTypes.SetNodes:
       return {
@@ -115,3 +115,5 @@ export default (state: State, action: EditorActions | UiActions): State => {
       return state;
   }
 };
+
+export default reducer;
diff --git a/loom-editor/tsconfig.json b/loom-editor/tsconfig.json
@@ -13,8 +13,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"],
-  "references": [{ "path": "../loom-common" }]
+  "references": [
+    {
+      "path": "../loom-common"
+    }
+  ]
 }