@urql/devtools
Version:
The official exchange for use with Urql Devtools
262 lines (246 loc) • 6.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: !0
});
var graphql = require("graphql");
var wonka = require("wonka");
function _extends() {
return (_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;
}).apply(this, arguments);
}
var createDebugMessage = function(debug) {
return {
type: "debug-event",
source: "exchange",
data: _extends(_extends({}, debug), {
source: "devtoolsExchange",
timestamp: Date.now()
})
};
};
var getDisplayName = function() {
var defaultLimit = Error.stackTraceLimit;
Error.stackTraceLimit = 1 / 0;
var trace = (new Error).stack || "";
Error.stackTraceLimit = defaultLimit;
var findings = /(useQuery|useMutation|useSubscription).*\n\s*at (\w+)/.exec(trace);
if (null === findings) {
return "Unknown";
}
return findings[2];
};
var connectionInitMessage = {
source: "exchange",
type: "connection-init",
version: "2.0.3"
};
function _ref6(m) {
return window.postMessage(JSON.parse(JSON.stringify(m)), window.location.origin);
}
var curriedDevtoolsExchange = function(ref) {
var sendMessage = ref.sendMessage;
var addMessageListener = ref.addMessageListener;
function _ref(event) {
return sendMessage({
type: "debug-event",
source: "exchange",
data: event
});
}
return function(ref) {
var client = ref.client;
var forward = ref.forward;
addMessageListener((function(message) {
if ("devtools" !== message.source || !(message.type in messageHandlers)) {
return;
}
messageHandlers[message.type]({
client: client,
sendMessage: sendMessage
})(message);
}));
client.subscribeToDebugTarget && client.subscribeToDebugTarget(_ref);
return function(ops$) {
return wonka.pipe(ops$, wonka.tap(handleOperation({
client: client,
sendMessage: sendMessage
})), forward, wonka.tap(handleResult({
client: client,
sendMessage: sendMessage
})));
};
};
};
var handleOperation = function(ref) {
var sendMessage = ref.sendMessage;
return function(operation) {
if ("teardown" === operation.kind) {
var msg$1 = createDebugMessage({
type: "teardown",
message: "The operation has been torn down",
operation: operation,
data: void 0
});
return sendMessage(msg$1);
}
var msg = createDebugMessage({
type: "execution",
message: "The client has received an execute command.",
operation: operation,
data: {
sourceComponent: getDisplayName()
}
});
return sendMessage(msg);
};
};
var handleResult = function(ref) {
var sendMessage = ref.sendMessage;
return function(ref) {
var operation = ref.operation;
var data = ref.data;
var error = ref.error;
if (error) {
var msg$1 = createDebugMessage({
type: "error",
message: "The operation has returned a new error.",
operation: operation,
data: {
value: error
}
});
return sendMessage(msg$1);
}
var msg = createDebugMessage({
type: "update",
message: "The operation has returned a new response.",
operation: operation,
data: {
value: data
}
});
sendMessage(msg);
};
};
var messageHandlers = {
"execute-query": function(ref) {
var client = ref.client;
return function(message) {
var isMutation = /(^|\W)+mutation\W/.test(message.query);
var op = client.createRequestOperation(isMutation ? "mutation" : "query", {
key: (x = JSON.stringify(message.query), function(h, x) {
h |= 0;
for (var i = 0, l = 0 | x.length; i < l; i++) {
h = (h << 5) + h + x.charCodeAt(i);
}
return h;
}(5381, x) >>> 0),
query: graphql.parse(message.query)
}, {
meta: {
source: "Devtools"
}
});
var x;
wonka.pipe(client.executeRequestOperation(op), wonka.take(1), wonka.toPromise);
};
},
"connection-init": function(ref) {
var sendMessage = ref.sendMessage;
return function() {
return sendMessage({
type: "connection-acknowledge",
source: "exchange",
version: "2.0.3"
});
};
}
};
function _ref2(ref) {
var forward = ref.forward;
return function(ops$) {
return wonka.pipe(ops$, forward);
};
}
var devtoolsExchange = function() {
var isNative = "undefined" != typeof navigator && "ReactNative" === (null === navigator || void 0 === navigator ? void 0 : navigator.product);
var isSSR = !isNative && "undefined" == typeof window;
if ("production" === process.env.NODE_ENV || isSSR) {
return _ref2;
}
if (isNative) {
return curriedDevtoolsExchange(function() {
var listeners = [];
var ws;
var timeout;
function _ref() {
ws.send(JSON.stringify(connectionInitMessage));
}
function _ref2() {
timeout = timeout || setTimeout(createConnection, 500);
}
function _ref3() {
timeout = timeout || setTimeout(createConnection, 500);
}
function _ref5(message) {
try {
if (!message.data) {
return;
}
listeners.forEach((function _ref4(l) {
return l(JSON.parse(message.data));
}));
} catch (err) {
console.warn(err);
}
}
var createConnection = function() {
timeout = void 0;
(ws = new WebSocket("ws://localhost:7700")).onopen = _ref;
ws.onclose = _ref2;
ws.onerror = _ref3;
ws.onmessage = _ref5;
};
createConnection();
return {
addMessageListener: function(cb) {
listeners = listeners.concat([ cb ]);
},
sendMessage: function(message) {
ws.readyState === ws.OPEN && ws.send(JSON.stringify(message));
}
};
}());
}
return curriedDevtoolsExchange(function() {
var listeners = [];
window.addEventListener("message", (function(ref) {
var data = ref.data;
if (!ref.isTrusted || !(null == data ? void 0 : data.source)) {
return;
}
listeners.forEach((function(cb) {
return cb(data);
}));
}));
var sendMessage = _ref6;
sendMessage(connectionInitMessage);
return {
addMessageListener: function(cb) {
return listeners = listeners.concat([ cb ]);
},
sendMessage: sendMessage
};
}());
}();
exports.devtoolsExchange = devtoolsExchange;
//# sourceMappingURL=urql-devtools-exchange.js.map