@tanstack/router-devtools 0.0.1-alpha.1 → 0.0.1-beta.84

package/build/cjs/devtools.js

@@ -0,0 +1,583 @@
+/**
+ * router-devtools
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var router = require('@tanstack/router');
+var useLocalStorage = require('./useLocalStorage.js');
+var utils = require('./utils.js');
+var styledComponents = require('./styledComponents.js');
+var theme = require('./theme.js');
+var Explorer = require('./Explorer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const isServer = typeof window === 'undefined';
+function Logo(props) {
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, props, {
+    style: {
+      ...(props.style ?? {}),
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      fontSize: '0.8rem',
+      fontWeight: 'bolder',
+      lineHeight: '1'
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      letterSpacing: '-0.05rem'
+    }
+  }, "TANSTACK"), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      backgroundImage: 'linear-gradient(to right, var(--tw-gradient-stops))',
+      // @ts-ignore
+      '--tw-gradient-from': '#84cc16',
+      '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)',
+      '--tw-gradient-to': '#10b981',
+      WebkitBackgroundClip: 'text',
+      color: 'transparent',
+      letterSpacing: '0.1rem',
+      marginRight: '-0.2rem'
+    }
+  }, "ROUTER"));
+}
+function TanStackRouterDevtools({
+  initialIsOpen,
+  panelProps = {},
+  closeButtonProps = {},
+  toggleButtonProps = {},
+  position = 'bottom-left',
+  containerElement: Container = 'footer',
+  router
+}) {
+  const rootRef = React__default["default"].useRef(null);
+  const panelRef = React__default["default"].useRef(null);
+  const [isOpen, setIsOpen] = useLocalStorage["default"]('tanstackRouterDevtoolsOpen', initialIsOpen);
+  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('tanstackRouterDevtoolsHeight', null);
+  const [isResolvedOpen, setIsResolvedOpen] = utils.useSafeState(false);
+  const [isResizing, setIsResizing] = utils.useSafeState(false);
+  const isMounted = utils.useIsMounted();
+  const handleDragStart = (panelElement, startEvent) => {
+    if (startEvent.button !== 0) return; // Only allow left click for drag
+
+    setIsResizing(true);
+    const dragInfo = {
+      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
+      pageY: startEvent.pageY
+    };
+    const run = moveEvent => {
+      const delta = dragInfo.pageY - moveEvent.pageY;
+      const newHeight = dragInfo?.originalHeight + delta;
+      setDevtoolsHeight(newHeight);
+      if (newHeight < 70) {
+        setIsOpen(false);
+      } else {
+        setIsOpen(true);
+      }
+    };
+    const unsub = () => {
+      setIsResizing(false);
+      document.removeEventListener('mousemove', run);
+      document.removeEventListener('mouseUp', unsub);
+    };
+    document.addEventListener('mousemove', run);
+    document.addEventListener('mouseup', unsub);
+  };
+  React__default["default"].useEffect(() => {
+    setIsResolvedOpen(isOpen ?? false);
+  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
+
+  // Toggle panel visibility before/after transition (depending on direction).
+  // Prevents focusing in a closed panel.
+  React__default["default"].useEffect(() => {
+    const ref = panelRef.current;
+    if (ref) {
+      const handlePanelTransitionStart = () => {
+        if (ref && isResolvedOpen) {
+          ref.style.visibility = 'visible';
+        }
+      };
+      const handlePanelTransitionEnd = () => {
+        if (ref && !isResolvedOpen) {
+          ref.style.visibility = 'hidden';
+        }
+      };
+      ref.addEventListener('transitionstart', handlePanelTransitionStart);
+      ref.addEventListener('transitionend', handlePanelTransitionEnd);
+      return () => {
+        ref.removeEventListener('transitionstart', handlePanelTransitionStart);
+        ref.removeEventListener('transitionend', handlePanelTransitionEnd);
+      };
+    }
+    return;
+  }, [isResolvedOpen]);
+  React__default["default"][isServer ? 'useEffect' : 'useLayoutEffect'](() => {
+    if (isResolvedOpen) {
+      const previousValue = rootRef.current?.parentElement?.style.paddingBottom;
+      const run = () => {
+        const containerHeight = panelRef.current?.getBoundingClientRect().height;
+        if (rootRef.current?.parentElement) {
+          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`;
+        }
+      };
+      run();
+      if (typeof window !== 'undefined') {
+        window.addEventListener('resize', run);
+        return () => {
+          window.removeEventListener('resize', run);
+          if (rootRef.current?.parentElement && typeof previousValue === 'string') {
+            rootRef.current.parentElement.style.paddingBottom = previousValue;
+          }
+        };
+      }
+    }
+    return;
+  }, [isResolvedOpen]);
+  const {
+    style: panelStyle = {},
+    ...otherPanelProps
+  } = panelProps;
+  const {
+    style: closeButtonStyle = {},
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
+  const {
+    style: toggleButtonStyle = {},
+    onClick: onToggleClick,
+    ...otherToggleButtonProps
+  } = toggleButtonProps;
+
+  // Do not render on the server
+  if (!isMounted()) return null;
+  return /*#__PURE__*/React__default["default"].createElement(Container, {
+    ref: rootRef,
+    className: "TanStackRouterDevtools"
+  }, /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, {
+    theme: theme.defaultTheme
+  }, /*#__PURE__*/React__default["default"].createElement(TanStackRouterDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({
+    ref: panelRef
+  }, otherPanelProps, {
+    router: router,
+    style: {
+      position: 'fixed',
+      bottom: '0',
+      right: '0',
+      zIndex: 99999,
+      width: '100%',
+      height: devtoolsHeight ?? 500,
+      maxHeight: '90%',
+      boxShadow: '0 0 20px rgba(0,0,0,.3)',
+      borderTop: `1px solid ${theme.defaultTheme.gray}`,
+      transformOrigin: 'top',
+      // visibility will be toggled after transitions, but set initial state here
+      visibility: isOpen ? 'visible' : 'hidden',
+      ...panelStyle,
+      ...(isResizing ? {
+        transition: `none`
+      } : {
+        transition: `all .2s ease`
+      }),
+      ...(isResolvedOpen ? {
+        opacity: 1,
+        pointerEvents: 'all',
+        transform: `translateY(0) scale(1)`
+      } : {
+        opacity: 0,
+        pointerEvents: 'none',
+        transform: `translateY(15px) scale(1.02)`
+      })
+    },
+    isOpen: isResolvedOpen,
+    setIsOpen: setIsOpen,
+    handleDragStart: e => handleDragStart(panelRef.current, e)
+  })), isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, _rollupPluginBabelHelpers["extends"]({
+    type: "button",
+    "aria-label": "Close TanStack Router Devtools"
+  }, otherCloseButtonProps, {
+    onClick: e => {
+      setIsOpen(false);
+      onCloseClick && onCloseClick(e);
+    },
+    style: {
+      position: 'fixed',
+      zIndex: 99999,
+      margin: '.5em',
+      bottom: 0,
+      ...(position === 'top-right' ? {
+        right: '0'
+      } : position === 'top-left' ? {
+        left: '0'
+      } : position === 'bottom-right' ? {
+        right: '0'
+      } : {
+        left: '0'
+      }),
+      ...closeButtonStyle
+    }
+  }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    type: "button"
+  }, otherToggleButtonProps, {
+    "aria-label": "Open TanStack Router Devtools",
+    onClick: e => {
+      setIsOpen(true);
+      onToggleClick && onToggleClick(e);
+    },
+    style: {
+      appearance: 'none',
+      background: 'none',
+      border: 0,
+      padding: 0,
+      position: 'fixed',
+      zIndex: 99999,
+      display: 'inline-flex',
+      fontSize: '1.5em',
+      margin: '.5em',
+      cursor: 'pointer',
+      width: 'fit-content',
+      ...(position === 'top-right' ? {
+        top: '0',
+        right: '0'
+      } : position === 'top-left' ? {
+        top: '0',
+        left: '0'
+      } : position === 'bottom-right' ? {
+        bottom: '0',
+        right: '0'
+      } : {
+        bottom: '0',
+        left: '0'
+      }),
+      ...toggleButtonStyle
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(Logo, {
+    "aria-hidden": true
+  })) : null);
+}
+const TanStackRouterDevtoolsPanel = /*#__PURE__*/React__default["default"].forwardRef(function TanStackRouterDevtoolsPanel(props, ref) {
+  const {
+    isOpen = true,
+    setIsOpen,
+    handleDragStart,
+    router: userRouter,
+    ...panelProps
+  } = props;
+  const routerContextValue = React__default["default"].useContext(router.routerContext);
+  const router$1 = userRouter ?? routerContextValue?.router;
+  router.invariant(router$1, 'No router was found for the TanStack Router Devtools. Please place the devtools in the <RouterProvider> component tree or pass the router instance to the devtools manually.');
+  router.useStore(router$1.__store);
+  const [activeRouteId, setActiveRouteId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveRouteId', '');
+  const [activeMatchId, setActiveMatchId] = useLocalStorage["default"]('tanstackRouterDevtoolsActiveMatchId', '');
+  React__default["default"].useEffect(() => {
+    setActiveMatchId('');
+  }, [activeRouteId]);
+  const allMatches = React__default["default"].useMemo(() => [...Object.values(router$1.state.currentMatches), ...Object.values(router$1.state.pendingMatches ?? [])], [router$1.state.currentMatches, router$1.state.pendingMatches]);
+  const activeMatch = allMatches?.find(d => d.id === activeMatchId) || allMatches?.find(d => d.route.id === activeRouteId);
+  return /*#__PURE__*/React__default["default"].createElement(theme.ThemeProvider, {
+    theme: theme.defaultTheme
+  }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: "TanStackRouterDevtoolsPanel"
+  }, panelProps), /*#__PURE__*/React__default["default"].createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: `
+
+            .TanStackRouterDevtoolsPanel * {
+              scrollbar-color: ${theme.defaultTheme.backgroundAlt} ${theme.defaultTheme.gray};
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar, .TanStackRouterDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-track, .TanStackRouterDevtoolsPanel scrollbar-track {
+              background: ${theme.defaultTheme.backgroundAlt};
+            }
+
+            .TanStackRouterDevtoolsPanel *::-webkit-scrollbar-thumb, .TanStackRouterDevtoolsPanel scrollbar-thumb {
+              background: ${theme.defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${theme.defaultTheme.backgroundAlt};
+            }
+
+            .TanStackRouterDevtoolsPanel table {
+              width: 100%;
+            }
+
+            .TanStackRouterDevtoolsPanel table tr {
+              border-bottom: 2px dotted rgba(255, 255, 255, .2);
+            }
+
+            .TanStackRouterDevtoolsPanel table tr:last-child {
+              border-bottom: none
+            }
+
+            .TanStackRouterDevtoolsPanel table td {
+              padding: .25rem .5rem;
+              border-right: 2px dotted rgba(255, 255, 255, .05);
+            }
+
+            .TanStackRouterDevtoolsPanel table td:last-child {
+              border-right: none
+            }
+
+          `
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '4px',
+      marginBottom: '-4px',
+      cursor: 'row-resize',
+      zIndex: 100000
+    },
+    onMouseDown: handleDragStart
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      flex: '1 1 500px',
+      minHeight: '40%',
+      maxHeight: '100%',
+      overflow: 'auto',
+      borderRight: `1px solid ${theme.defaultTheme.grayAlt}`,
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'start',
+      gap: '1rem',
+      padding: '1rem',
+      alignItems: 'center',
+      background: theme.defaultTheme.backgroundAlt
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Logo, {
+    "aria-hidden": true
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      fontSize: 'clamp(.8rem, 2vw, 1.3rem)',
+      fontWeight: 'bold'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      fontWeight: 100
+    }
+  }, "Devtools"))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      overflowY: 'auto',
+      flex: '1'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
+    label: "Router",
+    value: router$1,
+    defaultExpanded: {}
+  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      flex: '1 1 500px',
+      minHeight: '40%',
+      maxHeight: '100%',
+      overflow: 'auto',
+      borderRight: `1px solid ${theme.defaultTheme.grayAlt}`,
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Active Matches"), router$1.state.currentMatches.map((match, i) => {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: match.route.id || i,
+      role: "button",
+      "aria-label": `Open match details for ${match.route.id}`,
+      onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
+      style: {
+        display: 'flex',
+        borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
+        cursor: 'pointer',
+        alignItems: 'center',
+        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        flex: '0 0 auto',
+        width: '1.3rem',
+        height: '1.3rem',
+        marginLeft: '.25rem',
+        background: utils.getStatusColor(match, theme.defaultTheme),
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: 'bold',
+        borderRadius: '.25rem',
+        transition: 'all .2s ease-out'
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
+      style: {
+        padding: '.5em'
+      }
+    }, `${match.id}`));
+  }), router$1.state.pendingMatches?.length ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      marginTop: '2rem',
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Pending Matches"), router$1.state.pendingMatches?.map((match, i) => {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: match.route.id || i,
+      role: "button",
+      "aria-label": `Open match details for ${match.route.id}`,
+      onClick: () => setActiveRouteId(activeRouteId === match.route.id ? '' : match.route.id),
+      style: {
+        display: 'flex',
+        borderBottom: `solid 1px ${theme.defaultTheme.grayAlt}`,
+        cursor: 'pointer',
+        background: match === activeMatch ? 'rgba(255,255,255,.1)' : undefined
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        flex: '0 0 auto',
+        width: '1.3rem',
+        height: '1.3rem',
+        marginLeft: '.25rem',
+        background: utils.getStatusColor(match, theme.defaultTheme),
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: 'bold',
+        borderRadius: '.25rem',
+        transition: 'all .2s ease-out'
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
+      style: {
+        padding: '.5em'
+      }
+    }, `${match.id}`));
+  })) : null), activeMatch ? /*#__PURE__*/React__default["default"].createElement(styledComponents.ActivePanel, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      bottom: 0,
+      zIndex: 1
+    }
+  }, "Match Details"), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("table", null, /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      opacity: '.5'
+    }
+  }, "ID"), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(styledComponents.Code, {
+    style: {
+      lineHeight: '1.8em'
+    }
+  }, JSON.stringify(activeMatch.id, null, 2)))), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      opacity: '.5'
+    }
+  }, "Status"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.state.status)), /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
+    style: {
+      opacity: '.5'
+    }
+  }, "Last Updated"), /*#__PURE__*/React__default["default"].createElement("td", null, activeMatch.state.updatedAt ? new Date(activeMatch.state.updatedAt).toLocaleTimeString() : 'N/A'))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      background: theme.defaultTheme.backgroundAlt,
+      padding: '.5em',
+      position: 'sticky',
+      top: 0,
+      bottom: 0,
+      zIndex: 1
+    }
+  }, "Actions"), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '0.5em'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(styledComponents.Button, {
+    type: "button",
+    onClick: () => activeMatch.load(),
+    style: {
+      background: theme.defaultTheme.gray
+    }
+  }, "Reload")), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      background: theme.defaultTheme.backgroundAlt,
+      padding: '.5em',
+      position: 'sticky',
+      top: 0,
+      bottom: 0,
+      zIndex: 1
+    }
+  }, "Explorer"), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
+    label: "Match",
+    value: activeMatch,
+    defaultExpanded: {}
+  }))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      flex: '1 1 500px',
+      minHeight: '40%',
+      maxHeight: '100%',
+      overflow: 'auto',
+      borderRight: `1px solid ${theme.defaultTheme.grayAlt}`,
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em',
+      background: theme.defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      bottom: 0,
+      zIndex: 1
+    }
+  }, "Search Params"), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      padding: '.5em'
+    }
+  }, Object.keys(router.last(router$1.state.currentMatches)?.state.search || {}).length ? /*#__PURE__*/React__default["default"].createElement(Explorer["default"], {
+    value: router.last(router$1.state.currentMatches)?.state.search || {},
+    defaultExpanded: Object.keys(router.last(router$1.state.currentMatches)?.state.search || {}).reduce((obj, next) => {
+      obj[next] = {};
+      return obj;
+    }, {})
+  }) : /*#__PURE__*/React__default["default"].createElement("em", {
+    style: {
+      opacity: 0.5
+    }
+  }, '{ }')))));
+});
+
+exports.TanStackRouterDevtools = TanStackRouterDevtools;
+exports.TanStackRouterDevtoolsPanel = TanStackRouterDevtoolsPanel;
+//# sourceMappingURL=devtools.js.map