manipulative/client.cjs.js

React devtool for modifying Emotion styles in browser

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _regeneratorRuntime = require('@babel/runtime/regenerator');
var jsxRuntime = require('@emotion/react/jsx-runtime');
var react$1 = require('@emotion/react');
var react = require('react');
var ReactDOM = require('react-dom');
var create = require('zustand');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
var create__default = /*#__PURE__*/_interopDefaultLegacy(create);

/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */

function __awaiter(thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
}

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var _ref = process.env.NODE_ENV === "production" ? {
  name: "1nibbwx",
  styles: "background-color:#f0f0f0;color:#808080;padding:8px 12px;font-size:10px;letter-spacing:0.2px;text-transform:uppercase;user-select:none;cursor:move"
} : {
  name: "gjt1qk-Pane",
  styles: "background-color:#f0f0f0;color:#808080;padding:8px 12px;font-size:10px;letter-spacing:0.2px;text-transform:uppercase;user-select:none;cursor:move;label:Pane;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

var _ref2 = process.env.NODE_ENV === "production" ? {
  name: "15ef4c0",
  styles: "font-size:12px;position:fixed;top:16px;right:16px;width:320px;background-color:#ffffff;border:1px solid #b0b0b040;border-radius:2px;color:#404040;overflow:hidden;&,button,textarea{font-family:\"SF Mono\",Consolas,Menlo,Monaco,\"Courier New\",Courier,monospace;}"
} : {
  name: "5eq1xc-Pane",
  styles: "font-size:12px;position:fixed;top:16px;right:16px;width:320px;background-color:#ffffff;border:1px solid #b0b0b040;border-radius:2px;color:#404040;overflow:hidden;&,button,textarea{font-family:\"SF Mono\",Consolas,Menlo,Monaco,\"Courier New\",Courier,monospace;};label:Pane;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};

function Pane(_ref3) {
  var children = _ref3.children;
  var rootRef = react.useRef(null);
  var headerRef = react.useRef(null);
  var offsetRef = react.useRef([0, 0]);
  var onUnmountRef = react.useRef();

  function onHeaderMouseDown(e) {
    var lastPosition = [e.nativeEvent.screenX, e.nativeEvent.screenY];

    function onMouseMove(e) {
      var _lastPosition = lastPosition,
          lastX = _lastPosition[0],
          lastY = _lastPosition[1];
      var deltaX = e.screenX - lastX;
      var deltaY = e.screenY - lastY;
      offsetRef.current[0] += deltaX;
      offsetRef.current[1] += deltaY;
      rootRef.current.style.transform = "translate3d(" + offsetRef.current[0] + "px, " + offsetRef.current[1] + "px, 0)";
      lastPosition = [e.screenX, e.screenY];
    }

    function cleanup() {
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onMouseUp);
    }

    function onMouseUp() {
      cleanup();
    }

    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);
    onUnmountRef.current = cleanup;
  }

  react.useEffect(function () {
    return function () {
      if (onUnmountRef.current !== undefined) {
        onUnmountRef.current();
      }
    };
  }, []);
  return jsxRuntime.jsxs("div", {
    css: _ref2,
    ref: rootRef,
    children: [jsxRuntime.jsx("div", {
      css: _ref,
      onMouseDown: onHeaderMouseDown,
      ref: headerRef,
      children: "manipulative"
    }), jsxRuntime.jsx("div", {
      children: children
    })]
  });
}

function _EMOTION_STRINGIFIED_CSS_ERROR__$1() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var useStore = create__default['default'](function (set) {
  return {
    callsites: {},
    updateCallsite: function updateCallsite(location, value) {
      return set(function (state) {
        var _Object$assign;

        return Object.assign(Object.assign({}, state), {
          callsites: Object.assign(Object.assign({}, state.callsites), (_Object$assign = {}, _Object$assign[location] = value, _Object$assign))
        });
      });
    },
    removeCallsite: function removeCallsite(location) {
      return set(function (state) {
        var newCallsites = Object.assign({}, state.callsites);
        delete newCallsites[location];
        return Object.assign(Object.assign({}, state), {
          callsites: newCallsites
        });
      });
    }
  };
});

var _ref$1 = process.env.NODE_ENV === "production" ? {
  name: "1pp55tu",
  styles: "color:#e45b32;font-size:10px;margin-left:8px"
} : {
  name: "1jx7ql0-Inspector",
  styles: "color:#e45b32;font-size:10px;margin-left:8px;label:Inspector;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
};

var _ref2$1 = process.env.NODE_ENV === "production" ? {
  name: "s5xdrg",
  styles: "display:flex;align-items:center"
} : {
  name: "jo8tox-Inspector",
  styles: "display:flex;align-items:center;label:Inspector;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
};

var _ref3 = process.env.NODE_ENV === "production" ? {
  name: "157mb91",
  styles: "color:#b0b0b0;text-decoration:none;:hover{text-decoration:underline;}"
} : {
  name: "157mb91",
  styles: "color:#b0b0b0;text-decoration:none;:hover{text-decoration:underline;}",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
};

var _ref4 = process.env.NODE_ENV === "production" ? {
  name: "l07wxm",
  styles: "font-size:10px;text-align:right;color:#808080;cursor:default"
} : {
  name: "l07wxm",
  styles: "font-size:10px;text-align:right;color:#808080;cursor:default",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
};

var _ref5 = process.env.NODE_ENV === "production" ? {
  name: "bmpxd3",
  styles: "box-sizing:border-box;font-size:12px;height:48px;padding:4px;width:100%"
} : {
  name: "bmpxd3",
  styles: "box-sizing:border-box;font-size:12px;height:48px;padding:4px;width:100%",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
};

var _ref6 = process.env.NODE_ENV === "production" ? {
  name: "1ew4t5w",
  styles: "font-size:12px;margin-bottom:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default"
} : {
  name: "1ew4t5w",
  styles: "font-size:12px;margin-bottom:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
};

var _ref7 = process.env.NODE_ENV === "production" ? {
  name: "5bhc30",
  styles: "margin-bottom:8px"
} : {
  name: "5bhc30",
  styles: "margin-bottom:8px",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
};

var _ref8 = process.env.NODE_ENV === "production" ? {
  name: "6kp9d7",
  styles: "padding:12px 12px;button{background-color:#808080;border:0;border-radius:2px;color:#ffffff;cursor:pointer;font-size:10px;letter-spacing:0.2px;padding:6px 10px;text-transform:uppercase;:hover{background-color:#404040;}}"
} : {
  name: "1jkakie-Inspector",
  styles: "padding:12px 12px;button{background-color:#808080;border:0;border-radius:2px;color:#ffffff;cursor:pointer;font-size:10px;letter-spacing:0.2px;padding:6px 10px;text-transform:uppercase;:hover{background-color:#404040;}};label:Inspector;",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
};

function Inspector() {
  var _this = this;

  var _useStore = useStore(),
      callsites = _useStore.callsites,
      updateCallsite = _useStore.updateCallsite;

  var _useState = react.useState(),
      commitState = _useState[0],
      setCommitState = _useState[1];

  react.useEffect(function () {
    // clear commit state on fast refresh
    return function () {
      return setCommitState(undefined);
    };
  }, []);

  if (Object.keys(callsites).length === 0) {
    return null;
  }

  return jsxRuntime.jsx(Pane, {
    children: jsxRuntime.jsxs("div", {
      css: _ref8,
      children: [Object.keys(callsites).map(function (location) {
        var callsite = callsites[location];

        var _location$split = location.split(":"),
            filePath = _location$split[0],
            position = _location$split[1];

        var fileName = filePath.substring(filePath.lastIndexOf("/") + 1);
        return jsxRuntime.jsxs("div", {
          css: _ref7,
          children: [callsite.codeLine !== undefined ? jsxRuntime.jsx("div", {
            onMouseOver: function onMouseOver() {
              updateCallsite(location, Object.assign(Object.assign({}, callsite), {
                hover: true
              }));
            },
            onMouseOut: function onMouseOut() {
              updateCallsite(location, Object.assign(Object.assign({}, callsite), {
                hover: false
              }));
            },
            css: _ref6,
            children: callsite.codeLine
          }) : null, jsxRuntime.jsx("div", {
            children: jsxRuntime.jsx("textarea", {
              value: callsite.value,
              onChange: function onChange(e) {
                updateCallsite(location, Object.assign(Object.assign({}, callsite), {
                  value: e.target.value
                }));
              },
              css: _ref5
            })
          }), jsxRuntime.jsxs("div", {
            css: _ref4,
            children: [fileName, " ", jsxRuntime.jsx("a", {
              href: "vscode://file" + filePath + (callsite.lineNumber !== undefined ? ":" + callsite.lineNumber : ""),
              css: _ref3,
              children: position
            })]
          })]
        }, location);
      }), jsxRuntime.jsxs("div", {
        css: _ref2$1,
        children: [jsxRuntime.jsx("button", {
          onClick: function onClick() {
            return __awaiter(_this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
              var _a, updates, location, _location$split2, fileName, position;

              return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
                while (1) {
                  switch (_context.prev = _context.next) {
                    case 0:
                      updates = [];

                      for (location in callsites) {
                        _location$split2 = location.split(":"), fileName = _location$split2[0], position = _location$split2[1];
                        updates.push({
                          fileName: fileName,
                          position: parseInt(position),
                          value: callsites[location].value
                        });
                      }

                      setCommitState({
                        type: "committing"
                      });
                      _context.prev = 3;
                      _context.next = 6;
                      return fetch("http://localhost:" + ((_a = process.env.REACT_APP_MANIPULATIVE_PORT) !== null && _a !== void 0 ? _a : 3199) + "/commit", {
                        method: "POST",
                        headers: {
                          "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                          updates: updates
                        })
                      });

                    case 6:
                      _context.next = 11;
                      break;

                    case 8:
                      _context.prev = 8;
                      _context.t0 = _context["catch"](3);
                      setCommitState({
                        type: "error",
                        error: _context.t0.toString()
                      });

                    case 11:
                    case "end":
                      return _context.stop();
                  }
                }
              }, _callee, null, [[3, 8]]);
            }));
          },
          children: (commitState === null || commitState === void 0 ? void 0 : commitState.type) === "committing" ? "committing..." : "commit"
        }), (commitState === null || commitState === void 0 ? void 0 : commitState.type) === "error" ? jsxRuntime.jsx("div", {
          css: _ref$1,
          children: commitState.error
        }) : null]
      })]
    })
  });
}

var isMounted = false;

function mountInspector() {
  if (isMounted) {
    return;
  }

  var container = document.createElement("div");
  document.body.appendChild(container);
  ReactDOM__default['default'].render(jsxRuntime.jsx(Inspector, {}), container);
  isMounted = true;
}

function usePlaceholder(location, cssFunction) {
  var filename = location[0],
      position = location[1],
      lineNumber = location[2],
      codeLine = location[3];
  var locationKey = filename + ":" + position;
  var callsite = useStore(function (state) {
    return state.callsites[locationKey];
  });
  var updateCallsite = useStore(function (state) {
    return state.updateCallsite;
  });
  var removeCallsite = useStore(function (state) {
    return state.removeCallsite;
  });
  react.useEffect(function () {
    updateCallsite(locationKey, {
      value: "",
      hover: false,
      lineNumber: lineNumber,
      codeLine: codeLine
    });
    mountInspector();
    return function () {
      removeCallsite(locationKey);
    };
  }, []);

  if (callsite === undefined) {
    return;
  }

  return cssFunction(callsite.value, callsite.hover ? cssFunction("box-shadow: inset 0 0 0 9999px rgba(120, 170, 210, 0.7)") : undefined);
}

function useCssPlaceholder(location) {
  return /*#__PURE__*/usePlaceholder(location, react$1.css, process.env.NODE_ENV === "production" ? "" : ";label:useCssPlaceholder;");
}

exports.useCssPlaceholder = useCssPlaceholder;