Merge remote-tracking branch 'origin/main' into actor-rpc

.eslintrc.js

@@ -22,6 +22,14 @@ module.exports = {
     "testing-library/no-node-access": "off",
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-unused-vars": ["warn", { ignoreRestSiblings: true }],
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        prefer: "type-imports",
+        disallowTypeAnnotations: false,
+        fixStyle: "separate-type-imports",
+      },
+    ],
   },
   settings: {
     react: {

.github/workflows/build-pr.yml

@@ -0,0 +1,28 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+
+      # Install dependencies
+      - run: npm ci
+
+      # Build and output bunle stats to webpack-stats.json
+      - run: yarn build --env TARGET=chrome --json webpack-stats.json
+
+      # Upload webpack-stats.json to use on relative-ci.yaml workflow
+      - name: Upload webpack stats artifact
+        uses: relative-ci/agent-upload-artifact-action@v1
+        with:
+          webpackStatsFile: ./webpack-stats.json

.github/workflows/relative-ci.yaml

@@ -0,0 +1,17 @@
+name: RelativeCI
+
+on:
+  workflow_run:
+    workflows: ["Build"]
+    types:
+      - completed
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send bundle stats and build information to RelativeCI
+        uses: relative-ci/agent-action@v2
+        with:
+          key: ${{ secrets.RELATIVE_CI_KEY }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -4,4 +4,5 @@ build
 !./dist/.gitkeep
 *.zip
 .DS_Store
-development/server/db.json
+development/server/db.json
+webpack-stats.json

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 4.8.3
+
+### Patch Changes
+
+- [#1264](https://github.com/apollographql/apollo-client-devtools/pull/1264) [`66c05ae`](https://github.com/apollographql/apollo-client-devtools/commit/66c05ae4cc7231000769e8269e2987ba48c7a779) Thanks [@phryneas](https://github.com/phryneas)! - Enable "@typescript-eslint/consistent-type-imports" lint rule
+
+- [#1265](https://github.com/apollographql/apollo-client-devtools/pull/1265) [`df5300f`](https://github.com/apollographql/apollo-client-devtools/commit/df5300f245b82e6efc15f616724874fbbb0b8a2d) Thanks [@phryneas](https://github.com/phryneas)! - Use relative-CI to monitor build artefact sizes
+
+- [#1268](https://github.com/apollographql/apollo-client-devtools/pull/1268) [`4c98879`](https://github.com/apollographql/apollo-client-devtools/commit/4c98879162c918c5b90652609991a5a357ee4f63) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Revert change that removed JSON stringify on the entire set of client data. This is a followup to [#1259](https://github.com/apollographql/apollo-client-devtools/pull/1259) which only partially fixed the issue.
+
+## 4.8.2
+
+### Patch Changes
+
+- [#1262](https://github.com/apollographql/apollo-client-devtools/pull/1262) [`122c3ee`](https://github.com/apollographql/apollo-client-devtools/commit/122c3ee883cf85078cee6efc31df63e5554c9147) Thanks [@phryneas](https://github.com/phryneas)! - prevent bundling Apollo Client in the hooks.js build
+
+- [#1259](https://github.com/apollographql/apollo-client-devtools/pull/1259) [`de55e20`](https://github.com/apollographql/apollo-client-devtools/commit/de55e2079d17de4e6bdc67582d0a22e577294dfd) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Fix an issue when sending cache data from the browser to the extension. This was particularly problematic when the cache contained `URL` instances which are not cloneable via the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)
+
 ## 4.8.1
 
 ### Patch Changes

package.json

@@ -2,7 +2,7 @@
   "name": "apollo-client-devtools",
   "description": "Developer tools for Apollo Client, with Studio Explorer integration, cache inspection, and query watching.",
   "license": "MIT",
-  "version": "4.8.1",
+  "version": "4.8.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/apollographql/apollo-client-devtools.git"
@@ -80,7 +80,7 @@
     "@types/zen-observable": "0.8.7",
     "@typescript-eslint/eslint-plugin": "7.1.1",
     "@typescript-eslint/parser": "7.1.1",
-    "archiver": "7.0.0",
+    "archiver": "7.0.1",
     "autoprefixer": "10.4.18",
     "copy-webpack-plugin": "12.0.2",
     "css-loader": "6.10.0",

src/@types/svg.d.ts

@@ -1,5 +1,5 @@
 declare module "*.svg" {
-  import * as React from "react";
+  import type * as React from "react";
 
   export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement> & { title?: string }

src/application/App.tsx

@@ -1,27 +1,26 @@
 import { useEffect, useState, useRef } from "react";
-import {
-  useReactiveVar,
-  gql,
-  useQuery,
-  makeVar,
-  TypedDocumentNode,
-} from "@apollo/client";
+import type { TypedDocumentNode } from "@apollo/client";
+import { useReactiveVar, gql, useQuery, makeVar } from "@apollo/client";
 
 import { currentScreen, Screens } from "./components/Layouts/Navigation";
 import { Queries } from "./components/Queries/Queries";
 import { Mutations } from "./components/Mutations/Mutations";
 import { Explorer } from "./components/Explorer/Explorer";
 import { Cache } from "./components/Cache/Cache";
-import { GetOperationCounts, GetOperationCountsVariables } from "./types/gql";
+import type {
+  GetOperationCounts,
+  GetOperationCountsVariables,
+} from "./types/gql";
 import { Tabs } from "./components/Tabs";
 import { Button } from "./components/Button";
 import IconSettings from "@apollo/icons/default/IconSettings.svg";
 import IconSync from "@apollo/icons/small/IconSync.svg";
 import { SettingsModal } from "./components/Layouts/SettingsModal";
 import Logo from "@apollo/icons/logos/LogoSymbol.svg";
-import { BannerAlert, BannerAlertConfig } from "./components/BannerAlert";
-import { GetStates } from "./stateMachine";
-import { DevtoolsMachine } from "./machines";
+import type { BannerAlertConfig } from "./components/BannerAlert";
+import { BannerAlert } from "./components/BannerAlert";
+import type { GetStates } from "./stateMachine";
+import type { DevtoolsMachine } from "./machines";
 import { ClientNotFoundModal } from "./components/ClientNotFoundModal";
 import { getPanelActor } from "../extension/devtools/panelActor";
 

src/application/__tests__/AppProvider.test.tsx

@@ -5,7 +5,7 @@ import { gql } from "@apollo/client";
 import matchMediaMock from "../utilities/testing/matchMedia";
 import { Mode, colorTheme } from "../theme";
 import { AppProvider, getQueryData, getMutationData } from "../index";
-import { QueryInfo } from "../../extension/tab/helpers";
+import type { QueryInfo } from "../../extension/tab/helpers";
 import { print, getIntrospectionQuery } from "graphql";
 
 const matchMedia = matchMediaMock();

src/application/components/BannerAlert.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { makeVar, useReactiveVar } from "@apollo/client";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { LoadingSpinner } from "./Explorer/LoadingSpinner";
 import IconCheck from "@apollo/icons/default/IconCheck.svg";
 import IconError from "@apollo/icons/default/IconError.svg";

src/application/components/Button.tsx

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ElementType } from "react";
+import type { ComponentPropsWithoutRef, ElementType } from "react";
 import { clsx } from "clsx";
 
 type NativeButtonProps = ComponentPropsWithoutRef<"button">;

src/application/components/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface ButtonGroupProps {
   children: ReactNode;

src/application/components/Cache/Cache.tsx

@@ -1,12 +1,14 @@
-import { Fragment, useState, useMemo, ReactNode } from "react";
-import { gql, useQuery, TypedDocumentNode } from "@apollo/client";
+import type { ReactNode } from "react";
+import { Fragment, useState, useMemo } from "react";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
 
 import { SidebarLayout } from "../Layouts/SidebarLayout";
 import { SearchField } from "../SearchField";
 import { EntityList } from "./sidebar/EntityList";
 import { Loading } from "./common/Loading";
-import { GetCache, GetCacheVariables } from "../../types/gql";
-import { JSONObject } from "../../types/json";
+import type { GetCache, GetCacheVariables } from "../../types/gql";
+import type { JSONObject } from "../../types/json";
 import { JSONTreeViewer } from "../JSONTreeViewer";
 import clsx from "clsx";
 import { CopyButton } from "../CopyButton";

src/application/components/Cache/common/utils.ts

@@ -1,4 +1,4 @@
-import { JSONObject } from "../../../types/json";
+import type { JSONObject } from "../../../types/json";
 
 // Return an alphabetically sorted list of all root cache ID's. ROOT_QUERY,
 // ROOT_MUTATION, and ROOT_SUBSCRIPTION will be listed first (if they exist).

src/application/components/Cache/sidebar/EntityList.tsx

@@ -2,7 +2,7 @@ import { List } from "../../List";
 import { ListItem } from "../../ListItem";
 
 import { getRootCacheIds } from "../common/utils";
-import { JSONObject } from "../../../types/json";
+import type { JSONObject } from "../../../types/json";
 import HighlightMatch from "../../HighlightMatch";
 
 interface EntityListProps {

src/application/components/CodeBlock.tsx

@@ -1,4 +1,5 @@
-import { Highlight, Language, PrismTheme } from "prism-react-renderer";
+import type { Language, PrismTheme } from "prism-react-renderer";
+import { Highlight } from "prism-react-renderer";
 import { useReactiveVar } from "@apollo/client";
 import { colors } from "@apollo/brand";
 import { clsx } from "clsx";

src/application/components/CopyButton.tsx

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 import clsx from "clsx";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Button } from "./Button";