@graphiql/plugin-explorer - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1-canary-73079cfa.0

dist/index.js

@@ -1,1 +0,118 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),c=require("@graphiql/react"),d=require("graphiql-explorer");function p(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,l.get?l:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const r=p(n),i=({title:e,titleId:t,...o})=>r.createElement("svg",{width:5,height:8,viewBox:"0 0 5 8",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":t,...o},e?r.createElement("title",{id:t},e):null,r.createElement("path",{d:"M0.910453 6.86965L3.88955 3.89061C4.09782 3.68233 4.09782 3.34465 3.88955 3.13637L0.910453 0.157278C0.574475 -0.178701 0 0.0592511 0 0.534408V6.49259C0 6.96768 0.574475 7.20565 0.910453 6.86965Z"})),g=({title:e,titleId:t,...o})=>r.createElement("svg",{height:"1em",strokeWidth:1.5,viewBox:"0 0 24 24",stroke:"currentColor",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-labelledby":t,...o},e?r.createElement("title",{id:t},e):null,r.createElement("path",{d:"M18 6H20M22 6H20M20 6V4M20 6V8",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M21.4 20H2.6C2.26863 20 2 19.7314 2 19.4V11H21.4C21.7314 11 22 11.2686 22 11.6V19.4C22 19.7314 21.7314 20 21.4 20Z",strokeLinecap:"round",strokeLinejoin:"round"}),r.createElement("path",{d:"M2 11V4.6C2 4.26863 2.26863 4 2.6 4H8.77805C8.92127 4 9.05977 4.05124 9.16852 4.14445L12.3315 6.85555C12.4402 6.94876 12.5787 7 12.722 7H14",strokeLinecap:"round",strokeLinejoin:"round"})),m=({title:e,titleId:t,...o})=>r.createElement("svg",{width:15,height:15,viewBox:"0 0 15 15",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor",fill:"none","aria-labelledby":t,...o},e?r.createElement("title",{id:t},e):null,r.createElement("circle",{cx:7.5,cy:7.5,r:6,strokeWidth:2})),v=({title:e,titleId:t,...o})=>r.createElement("svg",{width:15,height:15,viewBox:"0 0 15 15",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor","aria-labelledby":t,...o},e?r.createElement("title",{id:t},e):null,r.createElement("circle",{cx:7.5,cy:7.5,r:7.5}),r.createElement("path",{d:"M4.64641 7.00106L6.8801 9.23256L10.5017 5.61325",stroke:"white",strokeWidth:1.5}));const w={keyword:"hsl(var(--color-primary))",def:"hsl(var(--color-tertiary))",property:"hsl(var(--color-info))",qualifier:"hsl(var(--color-secondary))",attribute:"hsl(var(--color-tertiary))",number:"hsl(var(--color-success))",string:"hsl(var(--color-warning))",builtin:"hsl(var(--color-success))",string2:"hsl(var(--color-secondary))",variable:"hsl(var(--color-secondary))",atom:"hsl(var(--color-tertiary))"},x=n.createElement(i,{style:{width:"var(--px-16)",transform:"rotate(90deg)"}}),E=n.createElement(i,{style:{width:"var(--px-16)"}}),y=n.createElement(m,{style:{marginRight:"var(--px-4)"}}),b=n.createElement(v,{style:{fill:"hsl(var(--color-info))",marginRight:"var(--px-4)"}}),f={buttonStyle:{cursor:"pointer",fontSize:"2em",lineHeight:0},explorerActionsStyle:{paddingTop:"var(--px-16)"},actionButtonStyle:{}};function k(e){const{setOperationName:t}=c.useEditorContext({nonNull:!0}),{schema:o}=c.useSchemaContext({nonNull:!0}),{run:l}=c.useExecutionContext({nonNull:!0}),s=n.useCallback(a=>{a&&t(a),l()},[l,t]),[u,h]=c.useOptimisticState(c.useOperationsEditorState());return n.createElement(d.Explorer,{schema:o,onRunOperation:s,explorerIsOpen:!0,colors:w,arrowOpen:x,arrowClosed:E,checkboxUnchecked:y,checkboxChecked:b,styles:f,query:u,onEdit:h,...e})}function C(e){return{title:"GraphiQL Explorer",icon:g,content:()=>n.createElement(k,{...e})}}exports.explorerPlugin=C;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const react = require("@graphiql/react");
+const graphiqlExplorer = require("graphiql-explorer");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SvgArrow = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ React__namespace.createElement("svg", { width: 5, height: 8, viewBox: "0 0 5 8", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React__namespace.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0.910453 6.86965L3.88955 3.89061C4.09782 3.68233 4.09782 3.34465 3.88955 3.13637L0.910453 0.157278C0.574475 -0.178701 0 0.0592511 0 0.534408V6.49259C0 6.96768 0.574475 7.20565 0.910453 6.86965Z" }));
+const SvgFolderPlus = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ React__namespace.createElement("svg", { height: "1em", strokeWidth: 1.5, viewBox: "0 0 24 24", stroke: "currentColor", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React__namespace.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React__namespace.createElement("path", { d: "M18 6H20M22 6H20M20 6V4M20 6V8", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M21.4 20H2.6C2.26863 20 2 19.7314 2 19.4V11H21.4C21.7314 11 22 11.2686 22 11.6V19.4C22 19.7314 21.7314 20 21.4 20Z", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M2 11V4.6C2 4.26863 2.26863 4 2.6 4H8.77805C8.92127 4 9.05977 4.05124 9.16852 4.14445L12.3315 6.85555C12.4402 6.94876 12.5787 7 12.722 7H14", strokeLinecap: "round", strokeLinejoin: "round" }));
+const SvgCheckboxUnchecked = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ React__namespace.createElement("svg", { width: 15, height: 15, viewBox: "0 0 15 15", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", fill: "none", "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React__namespace.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 7.5, cy: 7.5, r: 6, strokeWidth: 2 }));
+const SvgCheckboxChecked = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ React__namespace.createElement("svg", { width: 15, height: 15, viewBox: "0 0 15 15", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-labelledby": titleId, ...props }, title ? /* @__PURE__ */ React__namespace.createElement("title", { id: titleId }, title) : null, /* @__PURE__ */ React__namespace.createElement("circle", { cx: 7.5, cy: 7.5, r: 7.5 }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M4.64641 7.00106L6.8801 9.23256L10.5017 5.61325", stroke: "white", strokeWidth: 1.5 }));
+const index = "";
+const colors = {
+  keyword: "hsl(var(--color-primary))",
+  def: "hsl(var(--color-tertiary))",
+  property: "hsl(var(--color-info))",
+  qualifier: "hsl(var(--color-secondary))",
+  attribute: "hsl(var(--color-tertiary))",
+  number: "hsl(var(--color-success))",
+  string: "hsl(var(--color-warning))",
+  builtin: "hsl(var(--color-success))",
+  string2: "hsl(var(--color-secondary))",
+  variable: "hsl(var(--color-secondary))",
+  atom: "hsl(var(--color-tertiary))"
+};
+const arrowOpen = /* @__PURE__ */ React.createElement(SvgArrow, { style: { width: "var(--px-16)", transform: "rotate(90deg)" } });
+const arrowClosed = /* @__PURE__ */ React.createElement(SvgArrow, { style: { width: "var(--px-16)" } });
+const checkboxUnchecked = /* @__PURE__ */ React.createElement(SvgCheckboxUnchecked, { style: { marginRight: "var(--px-4)" } });
+const checkboxChecked = /* @__PURE__ */ React.createElement(
+  SvgCheckboxChecked,
+  {
+    style: { fill: "hsl(var(--color-info))", marginRight: "var(--px-4)" }
+  }
+);
+const styles = {
+  buttonStyle: {
+    cursor: "pointer",
+    fontSize: "2em",
+    lineHeight: 0
+  },
+  explorerActionsStyle: {
+    paddingTop: "var(--px-16)"
+  },
+  actionButtonStyle: {}
+};
+function ExplorerPlugin(props) {
+  const { setOperationName } = react.useEditorContext({ nonNull: true });
+  const { schema } = react.useSchemaContext({ nonNull: true });
+  const { run } = react.useExecutionContext({ nonNull: true });
+  const handleRunOperation = React.useCallback(
+    (operationName) => {
+      if (operationName) {
+        setOperationName(operationName);
+      }
+      run();
+    },
+    [run, setOperationName]
+  );
+  const [operationsString, handleEditOperations] = react.useOptimisticState(
+    react.useOperationsEditorState()
+  );
+  return /* @__PURE__ */ React.createElement(
+    graphiqlExplorer.Explorer,
+    {
+      schema,
+      onRunOperation: handleRunOperation,
+      explorerIsOpen: true,
+      colors,
+      arrowOpen,
+      arrowClosed,
+      checkboxUnchecked,
+      checkboxChecked,
+      styles,
+      query: operationsString,
+      onEdit: handleEditOperations,
+      ...props
+    }
+  );
+}
+function explorerPlugin(props) {
+  return {
+    title: "GraphiQL Explorer",
+    icon: SvgFolderPlus,
+    content: () => /* @__PURE__ */ React.createElement(ExplorerPlugin, { ...props })
+  };
+}
+exports.explorerPlugin = explorerPlugin;

package.json

 {
   "name": "@graphiql/plugin-explorer",
-  "version": "3.1.0",
+  "version": "3.1.1-canary-73079cfa.0",
   "repository": {
@@ -35,3 +35,3 @@ "type": "git",
   "peerDependencies": {
-    "@graphiql/react": "^0.22.4",
+    "@graphiql/react": "^0.22.5-canary-73079cfa.0",
     "graphql": "^15.5.0 || ^16.0.0",
@@ -42,3 +42,3 @@ "react": "^16.8.0 || ^17 || ^18",
   "devDependencies": {
-    "@graphiql/react": "^0.22.4",
+    "@graphiql/react": "^0.22.5-canary-73079cfa.0",
     "@vitejs/plugin-react": "^4.0.1",
@@ -45,0 +45,0 @@ "graphql": "^16.8.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

70738

increased by4.4%

Lines of code

712

increased by21.29%

No dependency changes