refactor(inspect): using @floating-ui/core for OverlayTip

- adjust get name of fiber - try to publishing packages with provenance via GitHub Actions - fix format of npm package repository field
zthxxx · Dec 15, 2023 · 56e3cd8 · 56e3cd8
1 parent 0669ef5
commit 56e3cd8
Show file tree

Hide file tree

Showing 15 changed files with 186 additions and 120 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -10,6 +10,11 @@ on:
 jobs:
   release:
     runs-on: ubuntu-latest
+    permissions:
+      # needed for npm provenance data generation
+      # https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions
+      id-token: write
+
     env:
       # https://github.com/chalk/supports-color/blob/main/index.js#L21
       # https://github.com/chalk/supports-color/blob/main/index.js#L54
@@ -36,6 +41,8 @@ jobs:
         env:
           # need set in GitHub repo - settings - secrets
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          # https://docs.npmjs.com/generating-provenance-statements#using-third-party-package-publishing-tools
+          NPM_CONFIG_PROVENANCE: true
         run: |
           echo 'Show .npmrc'
           cat ./.npmrc

diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json
@@ -14,7 +14,11 @@
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build": "npm-run-all clean --parallel build:esm build:cjs"
   },
-  "repository": "https://github.com/zthxxx/react-dev-inspector/tree/master/packages/babel-plugin",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zthxxx/react-dev-inspector.git",
+    "directory": "packages/babel-plugin"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"

diff --git a/packages/inspector/package.json b/packages/inspector/package.json
@@ -29,8 +29,13 @@
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build": "npm-run-all clean --parallel sync:readme build:esm build:cjs"
   },
-  "repository": "https://github.com/zthxxx/react-dev-inspector/tree/master/packages/inspector",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zthxxx/react-dev-inspector.git",
+    "directory": "packages/inspector"
+  },
   "publishConfig": {
+    "access": "public",
     "registry": "https://registry.npmjs.org"
   },
   "keywords": [
@@ -54,6 +59,7 @@
     "node": ">=12.0.0"
   },
   "dependencies": {
+    "@floating-ui/core": "^1.6.0",
     "@types/react-reconciler": "^0.28.8",
     "hotkeys-js": "^3.12.2",
     "lit": "^2.8.0",

diff --git a/packages/inspector/src/Inspector/DOMInspectAgent/DOMInspectAgent.ts b/packages/inspector/src/Inspector/DOMInspectAgent/DOMInspectAgent.ts
@@ -31,6 +31,7 @@ export class DOMInspectAgent implements InspectAgent<HTMLElement> {
     onPointerDown: (params: { element?: HTMLElement; pointer: PointerEvent }) => void;
     onClick: (params: { element?: HTMLElement; pointer: PointerEvent }) => void;
   }) {
+    this.deactivate()
     this.overlay = new Overlay()
 
     this.unsubscribeListener = setupPointerListener({

diff --git a/packages/inspector/src/Inspector/Overlay/Overlay.stories.tsx b/packages/inspector/src/Inspector/Overlay/Overlay.stories.tsx
@@ -125,18 +125,18 @@ export const CornerItems = () => {
       }
 
       const boxSizing: BoxSizing = {
-        marginTop: 0,
-        marginLeft: 0,
-        marginRight: 0,
-        marginBottom: 0,
-        borderTop: 0,
-        borderLeft: 0,
-        borderRight: 0,
-        borderBottom: 0,
-        paddingTop: 0,
-        paddingLeft: 0,
-        paddingRight: 0,
-        paddingBottom: 0,
+        marginTop: 10,
+        marginLeft: 10,
+        marginRight: 10,
+        marginBottom: 10,
+        borderTop: 2,
+        borderLeft: 2,
+        borderRight: 2,
+        borderBottom: 2,
+        paddingTop: 20,
+        paddingLeft: 20,
+        paddingRight: 20,
+        paddingBottom: 20,
       }
 
       rect.updateBound({

diff --git a/packages/inspector/src/Inspector/Overlay/OverlayTip.tsx b/packages/inspector/src/Inspector/Overlay/OverlayTip.tsx
@@ -7,6 +7,14 @@ import {
 } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { styleMap } from 'lit/directives/style-map.js'
+import {
+  computePosition,
+  offset,
+  flip,
+  shift,
+  type Rect as FloatingRect,
+  type Dimensions,
+} from '@floating-ui/core'
 import {
   customElement,
   getBoundingBox,
@@ -126,12 +134,14 @@ export class InspectorOverlayTip extends LitElement {
       && this.boxSizing
       && this.spaceBox
     ) {
-      this.position = restraintTipPosition({
+      restraintTipPosition({
         elementBox: this.outerBox,
         spaceBox: this.spaceBox,
-        tipSize: this.getBoundingClientRect(),
+        tipSize: this.getBoundingClientRect().toJSON(),
+      }).then(position => {
+        this.position = position
+        this.requestUpdate('position')
       })
-      this.requestUpdate('position')
     }
   }
 
@@ -235,54 +245,53 @@ export class InspectorOverlayTip extends LitElement {
   `
 }
 
-export const restraintTipPosition = ({ elementBox, spaceBox, tipSize }: {
+export const restraintTipPosition = async ({ elementBox, spaceBox, tipSize }: {
+  /** the `reference` of computePosition */
   elementBox: Box;
+  /** the `ClippingRect` of computePosition */
   spaceBox: Box;
-  tipSize: { width: number; height: number };
-}): { top: number; left: number } => {
-  const MIN_TIP_WIDTH = 100
-  const MIN_TIP_HEIGHT = 48
-  const gap = 4
-  const tipWidth = Math.max(tipSize.width, MIN_TIP_WIDTH)
-  const tipHeight = Math.max(tipSize.height, MIN_TIP_HEIGHT)
-
-  const position = {
-    top: gap,
-    left: gap,
-  }
-
-  if (spaceBox.top >= elementBox.bottom) {
-    position.top = spaceBox.top
-  }
-  else if (elementBox.top >= spaceBox.bottom) {
-    position.top = spaceBox.bottom - tipHeight
-  }
-  else if (spaceBox.bottom - elementBox.bottom >= tipHeight + gap) {
-    position.top = elementBox.bottom + gap
-  }
-  else if (elementBox.top - spaceBox.top >= tipHeight + gap) {
-    position.top = elementBox.top - tipHeight - gap
-  }
-  else {
-    position.top = Math.max(elementBox.top, spaceBox.top) + gap
-  }
+  /** the `floating` of computePosition */
+  tipSize: Dimensions;
+}): Promise<{ top: number; left: number }> => {
+  const { x, y } = await computePosition(elementBox, tipSize, {
+    platform: {
+      getElementRects: ({ reference, floating }: { reference: Box; floating: Dimensions }) => {
+        return ({
+          reference: {
+            ...reference,
+            x: reference.left,
+            y: reference.top,
+          },
+          floating: floating as FloatingRect,
+        })
+      },
+      getDimensions: (element: Box) => element,
+      getClippingRect: () => {
+        return ({
+          ...spaceBox,
+          x: spaceBox.left,
+          y: spaceBox.top,
+        })
+      },
+    },
+    placement: 'bottom-start',
+    strategy: 'fixed',
+    middleware: [
+      offset(4),
+      flip({
+        crossAxis: false,
+        fallbackAxisSideDirection: 'start',
+      }),
+      shift({
+        padding: 4,
+        crossAxis: true,
+      }),
+    ],
+  })
 
-  if (tipSize.width >= spaceBox.width) {
-    position.left = spaceBox.left
-  }
-  else if (spaceBox.left >= elementBox.right) {
-    position.left = spaceBox.left
-  }
-  else if (elementBox.left >= spaceBox.right) {
-    position.left = spaceBox.right - tipWidth
+  return {
+    left: x,
+    top: y,
   }
-  else if (spaceBox.right - elementBox.left >= tipWidth + gap) {
-    position.left = Math.max(elementBox.left, spaceBox.left, gap)
-  }
-  else {
-    position.left = spaceBox.right - tipWidth - gap
-  }
-
-  return position
 }