components tree

packages/scan/src/web/assets/css/styles.tailwind.css

@@ -95,6 +95,8 @@ svg {
   @apply z-[2147483678];
   @apply animate-fade-in animation-duration-300 animation-delay-300;
   @apply shadow-[0_4px_12px_rgba(0,0,0,0.2)];
+
+  @apply place-self-start;
 }
 
 .button {
@@ -263,7 +265,7 @@ svg {
 
 @keyframes shimmer {
   100% {
-    transform: translateX(100%);
+    @apply translate-x-full;
   }
 }
 
@@ -326,8 +328,8 @@ svg {
 }
 
 @keyframes blink {
-  from { opacity: 1; }
-  to { opacity: 0; }
+  from { @apply opacity-100; }
+  to { @apply opacity-0; }
 }
 
 .react-scan-arrow {
@@ -437,21 +439,21 @@ svg {
 }
 
 .react-scan-flash-active {
-  opacity: 0.4;
-  transition: opacity 300ms ease-in-out;
+  @apply opacity-40;
+  @apply transition-opacity duration-300;
 }
 
 .react-scan-inspector-overlay {
   @apply flex flex-col;
-  opacity: 0;
-  transition: opacity 300ms ease-in-out;
+  @apply opacity-0;
+  @apply transition-opacity duration-300;
 
   &.fade-out {
-    opacity: 0;
+    @apply opacity-0;
   }
 
   &.fade-in {
-    opacity: 1;
+    @apply opacity-100;
   }
 }
 
@@ -544,3 +546,48 @@ svg {
     } */
   }
 }
+
+.resize-v-line {
+  @apply flex items-center justify-center;
+  @apply min-w-3 max-w-3;
+  @apply w-full h-full;
+  @apply transition-colors duration-150;
+  @apply cursor-col-resize;
+
+  &:hover,
+  &:active {
+    &::before {
+      @apply bg-white/10;
+    }
+
+    > span {
+      @apply bg-white/10;
+    }
+
+    svg {
+      @apply opacity-100;
+    }
+  }
+
+  &::before {
+    @apply content-[""];
+    @apply absolute inset-0 left-1/2 -translate-x-1/2;
+    @apply w-[1px];
+    @apply transition-colors duration-150;
+  }
+
+  > span {
+    @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
+    @apply w-1.5 h-4.5;
+    @apply rounded;
+    @apply transition-colors duration-150;
+  }
+
+  svg {
+    @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
+    @apply text-neutral-400 rotate-90;
+    @apply opacity-0;
+    @apply transition-opacity duration-150;
+    @apply z-50;
+  }
+}

packages/scan/src/web/components/inspector/index.tsx

@@ -115,7 +115,10 @@ export const Inspector = constant(() => {
 
       if (!parentCompositeFiber) return;
 
-      const isNewComponent = refLastInspectedFiber.current?.type !== parentCompositeFiber.type;
+      const isNewComponent =
+        refLastInspectedFiber.current?.type !== parentCompositeFiber.type ||
+        refLastInspectedFiber.current?.key !== parentCompositeFiber.key ||
+        refLastInspectedFiber.current?.index !== parentCompositeFiber.index;
 
       if (isNewComponent) {
         refLastInspectedFiber.current = parentCompositeFiber;
@@ -168,7 +171,6 @@ export const Inspector = constant(() => {
         className={cn(
           'react-scan-inspector',
           'opacity-0',
-          'h-full',
           'overflow-y-auto overflow-x-hidden',
           'transition-opacity duration-150 delay-0',
           'pointer-events-none',

packages/scan/src/web/components/inspector/utils.ts

@@ -452,6 +452,7 @@ export const getInspectableElements = (
     element: HTMLElement | null,
   ): HTMLElement | null => {
     if (!element) return null;
+
     const { parentCompositeFiber } = getCompositeComponentFromElement(element);
     if (!parentCompositeFiber) return null;
 

packages/scan/src/web/components/widget/index.tsx

@@ -22,8 +22,8 @@ import {
   calculatePosition,
   getBestCorner,
 } from './helpers';
+import { ComponentsTree } from './omponents-tree';
 import { ResizeHandle } from './resize-handle';
-// import { Search } from './search';
 import { Toolbar } from './toolbar';
 
 export const Widget = () => {
@@ -110,13 +110,15 @@ export const Widget = () => {
         : newWidth > refInitialMinimizedWidth.current
           ? newDimensions
           : signalWidget.value.lastDimensions,
+      componentsTree: signalWidget.value.componentsTree,
     };
 
     if (shouldPersist) {
       saveLocalStorage(LOCALSTORAGE_KEY, {
         corner: signalWidget.value.corner,
         dimensions: signalWidget.value.dimensions,
         lastDimensions: signalWidget.value.lastDimensions,
+        componentsTree: signalWidget.value.componentsTree,
       });
     }
 
@@ -237,12 +239,14 @@ export const Widget = () => {
             position: snappedPosition,
           },
           lastDimensions: signalWidget.value.lastDimensions,
+          componentsTree: signalWidget.value.componentsTree,
         };
 
         saveLocalStorage(LOCALSTORAGE_KEY, {
           corner: newCorner,
           dimensions: signalWidget.value.dimensions,
           lastDimensions: signalWidget.value.lastDimensions,
+          componentsTree: signalWidget.value.componentsTree,
         });
       };
 
@@ -258,8 +262,6 @@ export const Widget = () => {
   useEffect(() => {
     if (!refWidget.current) return;
 
-    refWidget.current.dir = 'ltr';
-    refWidget.current.style.placeSelf = 'self-start';
     refWidget.current.style.width = 'min-content';
     refInitialMinimizedHeight.current = 36; // height of the header
     refInitialMinimizedWidth.current = refWidget.current.offsetWidth;
@@ -336,6 +338,7 @@ export const Widget = () => {
       <ScanOverlay />
       <div
         id="react-scan-toolbar"
+        dir="ltr"
         ref={refWidget}
         onMouseDown={handleDrag}
         className={cn(
@@ -389,20 +392,19 @@ export const Widget = () => {
                 'text-white',
                 'bg-[#0A0A0A]',
                 'transition-opacity duration-150 delay-150',
-                'overflow-y-scroll overflow-x-hidden',
+                'overflow-hidden',
               )}
             >
               {
                 Store.inspectState.value.kind === 'focused' && (
                   <>
                     <Inspector />
-                    {/* <Search /> */}
+                    <ComponentsTree parentElement={refContent.current} />
                   </>
                 )
               }
             </div>
           </div>
-
           <Toolbar />
         </div>
       </div>