@tanstack/devtools - npm Package Compare versions

Comparing version 0.10.4 to 0.10.5

dist/dev.js

@@ -33,3 +33,3 @@ import { initialState, DevtoolsProvider, PiPProvider } from './chunk/KKMMZ2TR.js';
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/PYVV4DLY.js'));
+      this.#Component = lazy(() => import('./devtools/WI3NLQMI.js'));
       const Devtools = this.#Component;
@@ -36,0 +36,0 @@ this.#eventBus = new ClientEventBus(this.#eventBusConfig);

dist/index.js

@@ -33,3 +33,3 @@ import { initialState, DevtoolsProvider, PiPProvider } from './chunk/KKMMZ2TR.js';
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/PYVV4DLY.js'));
+      this.#Component = lazy(() => import('./devtools/WI3NLQMI.js'));
       const Devtools = this.#Component;
@@ -36,0 +36,0 @@ this.#eventBus = new ClientEventBus(this.#eventBusConfig);

package.json

 {
   "name": "@tanstack/devtools",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
@@ -5,0 +5,0 @@ "author": "Tanner Linsley",

src/components/tabs.tsx

@@ -48,2 +48,3 @@ import clsx from 'clsx'
             'margin-top': 'auto',
+            width: '100%',
           }}
@@ -50,0 +51,0 @@ >

src/styles/use-styles.ts

@@ -12,2 +12,72 @@ import * as goober from 'goober'
 
+const fadeIn = goober.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`
+
+const slideInRight = goober.keyframes`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+`
+
+const slideUp = goober.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`
+
+const statusFadeIn = goober.keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`
+
+const iconPop = goober.keyframes`
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+`
+
+const spin = goober.keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+const sparkle = goober.keyframes`
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.1) rotate(10deg);
+  }
+`
+
 const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
@@ -639,14 +709,3 @@ const { colors, font, size, border } = tokens
       )};
-      animation: fadeIn 0.3s ease;
-
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-          transform: translateY(10px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
+      animation: ${fadeIn} 0.3s ease;
     `,
@@ -797,12 +856,3 @@ pluginMarketplaceHeader: css`
       flex-direction: column;
-      animation: slideInRight 0.3s ease;
-
-      @keyframes slideInRight {
-        from {
-          transform: translateX(100%);
-        }
-        to {
-          transform: translateX(0);
-        }
-      }
+      animation: ${slideInRight} 0.3s ease;
     `,
@@ -848,14 +898,3 @@ pluginMarketplaceSettingsPanelHeader: css`
       gap: 1.25rem;
-      animation: slideUp 0.4s ease;
-
-      @keyframes slideUp {
-        from {
-          opacity: 0;
-          transform: translateY(20px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
+      animation: ${slideUp} 0.4s ease;
     `,
@@ -1048,30 +1087,9 @@ pluginMarketplaceCard: css`
       color: ${t(colors.green[600], colors.green[400])};
-      animation: statusFadeIn 0.3s ease;
+      animation: ${statusFadeIn} 0.3s ease;
 
-      @keyframes statusFadeIn {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      }
-
       svg {
         width: 18px;
         height: 18px;
-        animation: iconPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        animation: ${iconPop} 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
       }
-
-      @keyframes iconPop {
-        0% {
-          transform: scale(0);
-        }
-        50% {
-          transform: scale(1.2);
-        }
-        100% {
-          transform: scale(1);
-        }
-      }
     `,
@@ -1084,9 +1102,3 @@ pluginMarketplaceCardSpinner: css`
       border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-
-      @keyframes spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
+      animation: ${spin} 0.8s linear infinite;
     `,
@@ -1108,3 +1120,3 @@ pluginMarketplaceCardStatusText: css`
       border-radius: 0.75rem;
-      animation: fadeIn 0.3s ease;
+      animation: ${fadeIn} 0.3s ease;
     `,
@@ -1321,18 +1333,6 @@ pluginMarketplaceEmptyText: css`
           font-size: 0.875rem;
-          animation: sparkle 2s ease-in-out infinite;
+          animation: ${sparkle} 2s ease-in-out infinite;
         }
       }
 
-      @keyframes sparkle {
-        0%,
-        100% {
-          opacity: 1;
-          transform: scale(1) rotate(0deg);
-        }
-        50% {
-          opacity: 0.6;
-          transform: scale(1.1) rotate(10deg);
-        }
-      }
-
       &:hover {
@@ -1347,3 +1347,3 @@ background: ${t(
         h3::before {
-          animation: sparkle 0.5s ease-in-out infinite;
+          animation: ${sparkle} 0.5s ease-in-out infinite;
         }
@@ -1350,0 +1350,0 @@ }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Lines of code

15473

0.01%

Worsened metrics

Total package byte prevSize

551805

-0.13%

No dependency changes