@apollo/explorer - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/explorer.cjs.development.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+
 // URL for any embedded Explorer iframe
@@ -108,2 +115,7 @@ var EMBEDDABLE_EXPLORER_URL = 'https://explorer.embed.apollographql.com'; // Message types for Explorer state
   window.addEventListener('message', onPostMessageReceived);
+  return {
+    dispose: function dispose() {
+      return window.removeEventListener('message', onPostMessageReceived);
+    }
+  };
 }
@@ -156,3 +168,3 @@
     var embeddedExplorerIFrameElement = this.injectEmbed();
-    setupEmbedRelay({
+    this.disposable = setupEmbedRelay({
       embeddedExplorerIFrameElement: embeddedExplorerIFrameElement,
@@ -167,2 +179,6 @@ endpointUrl: this.options.endpointUrl,
 
+  _proto.dispose = function dispose() {
+    this.disposable.dispose();
+  };
+
   _proto.injectEmbed = function injectEmbed() {
@@ -211,3 +227,44 @@ var _element;
 
-module.exports = EmbeddedExplorer;
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var ApolloExplorerReact = function ApolloExplorerReact(props) {
+  var _useState = React.useState(),
+      wrapperElement = _useState[0],
+      setWrapperElement = _useState[1];
+
+  React.useEffect(function () {
+    if (!wrapperElement) return;
+    var embed = new EmbeddedExplorer(_extends({}, props, {
+      target: wrapperElement
+    }));
+    return function () {
+      return embed.dispose();
+    };
+  }, [props, wrapperElement]);
+  return React__default.createElement("div", {
+    className: props.className,
+    ref: function ref(element) {
+      setWrapperElement(element);
+    }
+  });
+};
+
+exports.ApolloExplorer = EmbeddedExplorer;
+exports.ApolloExplorerReact = ApolloExplorerReact;
 //# sourceMappingURL=explorer.cjs.development.js.map

dist/explorer.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";module.exports=function(){function e(e){var t,n,o,r,s,i,a=this;this.getEmbeddedExplorerURL=function(){var e,t,n=a.options.initialState||{},o=n.document,r=n.variables,s=n.headers,i=n.displayOptions,d=a.options,l=d.persistExplorerState,p=d.sendRequestsFrom,h={graphRef:"graphRef"in a.options?a.options.graphRef:void 0,document:o?encodeURIComponent(o):void 0,variables:r?encodeURIComponent(JSON.stringify(r)):void 0,headers:s?encodeURIComponent(JSON.stringify(s)):void 0,shouldPersistState:!!l,sendRequestsFrom:null!=p?p:"parent",docsPanelState:null!=(e=null==i?void 0:i.docsPanelState)?e:"open",showHeadersAndEnvVars:!1!==(null==i?void 0:i.showHeadersAndEnvVars),theme:null!=(t=null==i?void 0:i.theme)?t:"dark"};return"https://explorer.embed.apollographql.com?"+Object.entries(h).filter((function(e){return void 0!==e[1]})).map((function(e){return e[0]+"="+e[1]})).join("&")},this.options=e,this.validateOptions(),this.handleRequest=null!=(t=this.options.handleRequest)?t:fetch,this.embeddedExplorerURL=this.getEmbeddedExplorerURL(),n={embeddedExplorerIFrameElement:this.injectEmbed(),endpointUrl:this.options.endpointUrl,handleRequest:this.handleRequest,schema:"schema"in this.options?this.options.schema:void 0},o=n.endpointUrl,r=n.handleRequest,s=n.embeddedExplorerIFrameElement,i=n.schema,window.addEventListener("message",(function(e){var t,n=e.data;"name"in n&&"ExplorerListeningForSchema"===n.name&&i&&(null==(t=s.contentWindow)||t.postMessage({name:"SchemaResponse",schema:i},"https://explorer.embed.apollographql.com"));var a="name"in n&&"ExplorerRequest"===n.name;a&&n.operation&&n.operationId&&a&&function(e){var t,n,o=e.operation,r=e.operationName,s=e.variables,i=e.embeddedExplorerIFrameElement,a=e.operationId;(0,e.handleRequest)(e.endpointUrl,{method:"POST",headers:(t=e.headers,n=null!=t?t:{},Object.keys(n).every((function(e){return"content-type"!==e.toLowerCase()}))&&(n["content-type"]="application/json"),n),body:JSON.stringify({query:o,variables:s,operationName:r})}).then((function(e){return e.json()})).then((function(e){var t;null==i||null==(t=i.contentWindow)||t.postMessage({name:"ExplorerResponse",operationId:a,response:e},"https://explorer.embed.apollographql.com")}))}({endpointUrl:o,handleRequest:r,operation:n.operation,operationName:n.operationName,variables:n.variables,headers:n.headers,embeddedExplorerIFrameElement:s,operationId:n.operationId})}))}var t=e.prototype;return t.injectEmbed=function(){var e,t,n,o=this.options.target;t="string"==typeof o?null==(n=document)||null==n.querySelector?void 0:n.querySelector(o):o;var r=document.createElement("iframe");return r.src=this.embeddedExplorerURL,r.id="apollo-embedded-explorer",r.setAttribute("style","height: 100%; width: 100%"),null==(e=t)||e.appendChild(r),r},t.validateOptions=function(){if(!this.options.target)throw new Error('"target" is required');if(!this.options.handleRequest&&!this.options.endpointUrl)throw new Error("`endpointUrl` is required unless you write a custom `handleRequest`");if(this.options.handleRequest&&"embed"===this.options.sendRequestsFrom)throw new Error('You cannot pass a custom `handleRequest` if you have `sendRequestsFrom` set to "embed"');if("schema"in this.options&&"graphRef"in this.options)throw new Error("Both `schema` and `graphRef` cannot be set. You can either send your schema as an IntrospectionQuery or string via the `schema` field, or specifiy a public graphRef.")},e}();
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=function(){function e(e){var t,n=this;this.getEmbeddedExplorerURL=function(){var e,t,o=n.options.initialState||{},r=o.document,s=o.variables,i=o.headers,a=o.displayOptions,d=n.options,l=d.persistExplorerState,p=d.sendRequestsFrom,u={graphRef:"graphRef"in n.options?n.options.graphRef:void 0,document:r?encodeURIComponent(r):void 0,variables:s?encodeURIComponent(JSON.stringify(s)):void 0,headers:i?encodeURIComponent(JSON.stringify(i)):void 0,shouldPersistState:!!l,sendRequestsFrom:null!=p?p:"parent",docsPanelState:null!=(e=null==a?void 0:a.docsPanelState)?e:"open",showHeadersAndEnvVars:!1!==(null==a?void 0:a.showHeadersAndEnvVars),theme:null!=(t=null==a?void 0:a.theme)?t:"dark"};return"https://explorer.embed.apollographql.com?"+Object.entries(u).filter((function(e){return void 0!==e[1]})).map((function(e){return e[0]+"="+e[1]})).join("&")},this.options=e,this.validateOptions(),this.handleRequest=null!=(t=this.options.handleRequest)?t:fetch,this.embeddedExplorerURL=this.getEmbeddedExplorerURL();var o=this.injectEmbed();this.disposable=function(e){var t=e.endpointUrl,n=e.handleRequest,o=e.embeddedExplorerIFrameElement,r=e.schema,s=function(e){var s,i=e.data;"name"in i&&"ExplorerListeningForSchema"===i.name&&r&&(null==(s=o.contentWindow)||s.postMessage({name:"SchemaResponse",schema:r},"https://explorer.embed.apollographql.com"));var a="name"in i&&"ExplorerRequest"===i.name;a&&i.operation&&i.operationId&&a&&function(e){var t,n,o=e.operation,r=e.operationName,s=e.variables,i=e.embeddedExplorerIFrameElement,a=e.operationId;(0,e.handleRequest)(e.endpointUrl,{method:"POST",headers:(t=e.headers,n=null!=t?t:{},Object.keys(n).every((function(e){return"content-type"!==e.toLowerCase()}))&&(n["content-type"]="application/json"),n),body:JSON.stringify({query:o,variables:s,operationName:r})}).then((function(e){return e.json()})).then((function(e){var t;null==i||null==(t=i.contentWindow)||t.postMessage({name:"ExplorerResponse",operationId:a,response:e},"https://explorer.embed.apollographql.com")}))}({endpointUrl:t,handleRequest:n,operation:i.operation,operationName:i.operationName,variables:i.variables,headers:i.headers,embeddedExplorerIFrameElement:o,operationId:i.operationId})};return window.addEventListener("message",s),{dispose:function(){return window.removeEventListener("message",s)}}}({embeddedExplorerIFrameElement:o,endpointUrl:this.options.endpointUrl,handleRequest:this.handleRequest,schema:"schema"in this.options?this.options.schema:void 0})}var t=e.prototype;return t.dispose=function(){this.disposable.dispose()},t.injectEmbed=function(){var e,t,n,o=this.options.target;t="string"==typeof o?null==(n=document)||null==n.querySelector?void 0:n.querySelector(o):o;var r=document.createElement("iframe");return r.src=this.embeddedExplorerURL,r.id="apollo-embedded-explorer",r.setAttribute("style","height: 100%; width: 100%"),null==(e=t)||e.appendChild(r),r},t.validateOptions=function(){if(!this.options.target)throw new Error('"target" is required');if(!this.options.handleRequest&&!this.options.endpointUrl)throw new Error("`endpointUrl` is required unless you write a custom `handleRequest`");if(this.options.handleRequest&&"embed"===this.options.sendRequestsFrom)throw new Error('You cannot pass a custom `handleRequest` if you have `sendRequestsFrom` set to "embed"');if("schema"in this.options&&"graphRef"in this.options)throw new Error("Both `schema` and `graphRef` cannot be set. You can either send your schema as an IntrospectionQuery or string via the `schema` field, or specifiy a public graphRef.")},e}();function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}exports.ApolloExplorer=o,exports.ApolloExplorerReact=function(e){var s=t.useState(),i=s[0],a=s[1];return t.useEffect((function(){if(i){var t=new o(r({},e,{target:i}));return function(){return t.dispose()}}}),[e,i]),n.createElement("div",{className:e.className,ref:function(e){a(e)}})};
 //# sourceMappingURL=explorer.cjs.production.min.js.map

dist/explorer.esm.js

@@ -0,1 +1,3 @@
+import React, { useState, useEffect } from 'react';
+
 // URL for any embedded Explorer iframe
@@ -106,2 +108,7 @@ var EMBEDDABLE_EXPLORER_URL = 'https://explorer.embed.apollographql.com'; // Message types for Explorer state
   window.addEventListener('message', onPostMessageReceived);
+  return {
+    dispose: function dispose() {
+      return window.removeEventListener('message', onPostMessageReceived);
+    }
+  };
 }
@@ -154,3 +161,3 @@
     var embeddedExplorerIFrameElement = this.injectEmbed();
-    setupEmbedRelay({
+    this.disposable = setupEmbedRelay({
       embeddedExplorerIFrameElement: embeddedExplorerIFrameElement,
@@ -165,2 +172,6 @@ endpointUrl: this.options.endpointUrl,
 
+  _proto.dispose = function dispose() {
+    this.disposable.dispose();
+  };
+
   _proto.injectEmbed = function injectEmbed() {
@@ -209,3 +220,43 @@ var _element;
 
-export default EmbeddedExplorer;
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var ApolloExplorerReact = function ApolloExplorerReact(props) {
+  var _useState = useState(),
+      wrapperElement = _useState[0],
+      setWrapperElement = _useState[1];
+
+  useEffect(function () {
+    if (!wrapperElement) return;
+    var embed = new EmbeddedExplorer(_extends({}, props, {
+      target: wrapperElement
+    }));
+    return function () {
+      return embed.dispose();
+    };
+  }, [props, wrapperElement]);
+  return React.createElement("div", {
+    className: props.className,
+    ref: function ref(element) {
+      setWrapperElement(element);
+    }
+  });
+};
+
+export { EmbeddedExplorer as ApolloExplorer, ApolloExplorerReact };
 //# sourceMappingURL=explorer.esm.js.map

dist/index.d.ts

@@ -1,52 +0,3 @@
-import type { IntrospectionQuery } from 'graphql';
-import { HandleRequest } from './setupEmbedRelay';
-declare type EmbeddableExplorerOptions = {
-    target: string | HTMLElement;
-    graphRef: string;
-    initialState?: {
-        document?: string;
-        variables?: Record<string, any>;
-        headers?: Record<string, string>;
-        displayOptions: {
-            docsPanelState?: 'open' | 'closed';
-            showHeadersAndEnvVars?: boolean;
-            theme?: 'dark' | 'light';
-        };
-    };
-    persistExplorerState?: boolean;
-    endpointUrl: string;
-    handleRequest?: HandleRequest;
-};
-declare type InternalEmbeddableExplorerOptions = {
-    target: string | HTMLElement;
-    initialState?: {
-        document?: string;
-        variables?: Record<string, any>;
-        headers?: Record<string, string>;
-        displayOptions: {
-            docsPanelState?: 'open' | 'closed';
-            showHeadersAndEnvVars?: boolean;
-            theme?: 'dark' | 'light';
-        };
-    };
-    persistExplorerState?: boolean;
-    endpointUrl: string;
-    handleRequest?: HandleRequest;
-    sendRequestsFrom?: 'parent' | 'embed';
-} & ({
-    graphRef: string;
-    schema: never;
-} | {
-    schema: string | IntrospectionQuery;
-    graphRef: never;
-});
-declare class EmbeddedExplorer {
-    options: InternalEmbeddableExplorerOptions;
-    handleRequest: HandleRequest;
-    embeddedExplorerURL: string;
-    constructor(options: EmbeddableExplorerOptions);
-    injectEmbed(): HTMLIFrameElement;
-    validateOptions(): void;
-    getEmbeddedExplorerURL: () => string;
-}
-export default EmbeddedExplorer;
+import { EmbeddedExplorer } from './EmbeddedExplorer';
+import { ApolloExplorerReact } from './react';
+export { EmbeddedExplorer as ApolloExplorer, ApolloExplorerReact };

dist/setupEmbedRelay.d.ts

@@ -10,2 +10,4 @@ import type { IntrospectionQuery } from 'graphql';
     schema?: string | IntrospectionQuery | undefined;
-}): void;
+}): {
+    dispose: () => void;
+};

package.json

 {
-
   "name": "@apollo/explorer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "[e-mail]",
@@ -14,8 +13,9 @@ "license": "MIT",
   "engines": {
-    "node": ">=10",
-    "npm": ">=6.9"
+    "node": ">=12.0",
+    "npm": ">=7.0"
   },
   "scripts": {
     "start": "tsdx watch",
-    "build": "tsdx build --format cjs,esm,umd",
+    "build:cjs-esm": "tsdx build --format cjs,esm --name embeddable-explorer",
+    "build:umd": "tsdx build --format umd --entry src/index-umd.ts --name embeddable-explorer",
     "test": "tsdx test --passWithNoTests",
@@ -53,10 +53,14 @@ "lint": "tsdx lint",
     "@size-limit/preset-small-lib": "^5.0.5",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^17.0.11",
+    "graphql": "^15.6.0",
     "husky": "^7.0.2",
+    "prettier": "^2.4.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "size-limit": "^5.0.5",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
-    "typescript": "^3.9.10",
-    "graphql": "^15.6.0",
-    "prettier": "^2.4.1"
+    "typescript": "^3.9.10"
   }
 }

README.md

@@ -7,5 +7,84 @@ # Apollo Studio Embeddable Explorer
 
-Examples
+### Using the [@apollo/explorer npm package](https://www.npmjs.com/package/@apollo/explorer)
 
+You can download the @apollo/explorer npm package with `npm install @apollo/explorer`. Then, you can import the ApolloExplorer class or ApolloExplorerReact component like so:
+
+```
+import { ApolloExplorer, ApolloExplorerReact } from '@apollo/explorer';
+```
+
+When you call the EmbeddedExplorer constructor with a `target` of an html div you have in your app, the Explorer will show up in an iframe in that element. Check out all the [configuration options](https://www.apollographql.com/docs/studio/explorer/embed-explorer/#options) for your graph.
+
+#### React
+
+```
+import { ApolloExplorerReact } from '@apollo/explorer';
+
+function App() {
+
+  return (
+    <ApolloExplorerReact
+      target='#embeddableExplorer',
+      graphRef='acephei@current',
+      endpointUrl='https://acephei-gateway.herokuapp.com',
+      initialState={{
+        document: `query Example {
+me {
+  id
+}
+}`,
+        variables: {
+          test: 'abcxyz',
+        },
+        displayOptions: {
+          showHeadersAndEnvVars: true,
+        },
+      }}
+    />
+  );
+}
+```
+
+#### Vanilla JS
+
+```
+import { ApolloExplorer } from '@apollo/explorer';
+
+function App() {
+
+  ...
+  new ApolloExplorer({
+      target: '#embeddableExplorer',
+      graphRef: 'acephei@current',
+      endpointUrl: 'https://acephei-gateway.herokuapp.com',
+      initialState: {
+        document: `query Example {
+me {
+  id
+}
+}`,
+        variables: {
+          test: 'abcxyz',
+        },
+        displayOptions: {
+          showHeadersAndEnvVars: true,
+        },
+      },
+  })
+  ...
+
+}
+
+```
+
+### Examples from the raw cdn hosted umd file
+
 - [Embedding a registered public graph](./src/examples/graphRef.html)
 - [Usage by directly passing in schema](./src/examples/manualSchema.html)
+
+## Developing
+
+run `npm run build:umd` to build umd files where EmbeddedExplorer is exposed on window.
+run `npm run build:cjs-esm` to build cjs & esm files where ApolloExplorer & ApolloExplorerReact are named exports.
+
+Open `examples/localDevelopmentExample.html` to test your changes.

src/index.ts

@@ -1,151 +0,4 @@
-import type { IntrospectionQuery } from 'graphql';
-import { EMBEDDABLE_EXPLORER_URL } from './constants';
-import { HandleRequest, setupEmbedRelay } from './setupEmbedRelay';
+import { EmbeddedExplorer } from './EmbeddedExplorer';
+import { ApolloExplorerReact } from './react';
 
-type EmbeddableExplorerOptions = {
-  target: string | HTMLElement; // HTMLElement is to accomodate people who might prefer to pass in a ref
-  graphRef: string;
-
-  initialState?: {
-    document?: string;
-    variables?: Record<string, any>;
-    headers?: Record<string, string>;
-    displayOptions: {
-      docsPanelState?: 'open' | 'closed'; // default to 'open',
-      showHeadersAndEnvVars?: boolean; // default to `false`
-      theme?: 'dark' | 'light';
-    };
-  };
-  persistExplorerState?: boolean; // defaults to 'false'
-
-  endpointUrl: string;
-
-  // optional. defaults to `return fetch(url, fetchOptions)`
-  handleRequest?: HandleRequest;
-};
-
-type InternalEmbeddableExplorerOptions = {
-  target: string | HTMLElement; // HTMLElement is to accomodate people who might prefer to pass in a ref
-
-  initialState?: {
-    document?: string;
-    variables?: Record<string, any>;
-    headers?: Record<string, string>;
-    displayOptions: {
-      docsPanelState?: 'open' | 'closed'; // default to 'open',
-      showHeadersAndEnvVars?: boolean; // default to `false`
-      theme?: 'dark' | 'light';
-    };
-  };
-  persistExplorerState?: boolean; // defaults to 'false'
-
-  endpointUrl: string;
-
-  // optional. defaults to `return fetch(url, fetchOptions)`
-  handleRequest?: HandleRequest;
-
-  // optional. defaults to "parent". don't include in public docs yet
-  // throws error if value is 'embed' and `handleRequest` is provided
-  sendRequestsFrom?: 'parent' | 'embed';
-} & (
-  | { graphRef: string; schema: never }
-  | { schema: string | IntrospectionQuery; graphRef: never }
-);
-
-class EmbeddedExplorer {
-  options: InternalEmbeddableExplorerOptions;
-  handleRequest: HandleRequest;
-  embeddedExplorerURL: string;
-  constructor(options: EmbeddableExplorerOptions) {
-    this.options = options as InternalEmbeddableExplorerOptions;
-    this.validateOptions();
-    this.handleRequest = this.options.handleRequest ?? fetch;
-    this.embeddedExplorerURL = this.getEmbeddedExplorerURL();
-    const embeddedExplorerIFrameElement = this.injectEmbed();
-    setupEmbedRelay({
-      embeddedExplorerIFrameElement,
-      endpointUrl: this.options.endpointUrl,
-      handleRequest: this.handleRequest,
-      schema: 'schema' in this.options ? this.options.schema : undefined,
-    });
-  }
-
-  injectEmbed() {
-    let element;
-    const { target } = this.options;
-
-    if (typeof target === 'string') {
-      element = document?.querySelector?.(target);
-    } else {
-      element = target;
-    }
-    const iframeElement = document.createElement('iframe');
-    iframeElement.src = this.embeddedExplorerURL;
-
-    iframeElement.id = 'apollo-embedded-explorer';
-    iframeElement.setAttribute('style', 'height: 100%; width: 100%');
-
-    element?.appendChild(iframeElement);
-
-    return iframeElement;
-  }
-
-  validateOptions() {
-    if (!this.options.target) {
-      throw new Error('"target" is required');
-    }
-
-    if (!this.options.handleRequest && !this.options.endpointUrl) {
-      throw new Error(
-        '`endpointUrl` is required unless you write a custom `handleRequest`'
-      );
-    }
-
-    if (
-      this.options.handleRequest &&
-      this.options.sendRequestsFrom === 'embed'
-    ) {
-      throw new Error(
-        'You cannot pass a custom `handleRequest` if you have `sendRequestsFrom` set to "embed"'
-      );
-    }
-
-    if ('schema' in this.options && 'graphRef' in this.options) {
-      throw new Error(
-        'Both `schema` and `graphRef` cannot be set. You can either send your schema as an IntrospectionQuery or string via the `schema` field, or specifiy a public graphRef.'
-      );
-    }
-  }
-
-  getEmbeddedExplorerURL = () => {
-    const { document, variables, headers, displayOptions } =
-      this.options.initialState || {};
-    const { persistExplorerState, sendRequestsFrom } = this.options;
-    const graphRef =
-      'graphRef' in this.options ? this.options.graphRef : undefined;
-    const queryParams = {
-      graphRef,
-      document: document ? encodeURIComponent(document) : undefined,
-      variables: variables
-        ? encodeURIComponent(JSON.stringify(variables))
-        : undefined,
-      headers: headers
-        ? encodeURIComponent(JSON.stringify(headers))
-        : undefined,
-      shouldPersistState: persistExplorerState ? true : false,
-      sendRequestsFrom: sendRequestsFrom ?? 'parent',
-      docsPanelState: displayOptions?.docsPanelState ?? 'open',
-      showHeadersAndEnvVars:
-        displayOptions?.showHeadersAndEnvVars === false ? false : true,
-      theme: displayOptions?.theme ?? 'dark',
-    };
-
-    const queryString = Object.entries(queryParams)
-      .filter(([_, value]) => value !== undefined)
-      .map(([key, value]) => `${key}=${value}`)
-      .join('&');
-    return `${EMBEDDABLE_EXPLORER_URL}?${queryString}`;
-  };
-}
-
-export default EmbeddedExplorer;
+export { EmbeddedExplorer as ApolloExplorer, ApolloExplorerReact };

src/setupEmbedRelay.ts

@@ -138,2 +138,5 @@ import type { IntrospectionQuery } from 'graphql';
   window.addEventListener('message', onPostMessageReceived);
+  return {
+    dispose: () => window.removeEventListener('message', onPostMessageReceived),
+  };
 }

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

104990

increased by18.14%

Number of package files

31

increased by72.22%

Lines of code

917

increased by27.89%

Number of lines in readme file

90

increased by718.18%

Worsened metrics

Dev dependency count

12

increased by50%

Number of low quality alerts

3

increased by50%

No dependency changes