feat: integrate an InspectContextPanel to show element hierarchy triggered by right-click on inspecting

.commitlintrc.yml

@@ -33,6 +33,15 @@ rules:
       - polish
       - hotfix
       - release
+      # work in progress
+      - WIP
+
+  # https://commitlint.js.org/reference/rules.html#type-case
+  type-case:
+    - 2 # error
+    - always
+    - - lower-case
+      - upper-case
 
   # https://commitlint.js.org/#/reference-rules?id=scope-case
   scope-case:

.eslintignore

@@ -6,4 +6,8 @@ dist
 build
 .next
 
-**/src/tests/outputs
+**/src/tests/outputs/
+
+**/.stories/components/
+**/components/logos/
+**/components/icons/

.eslintrc.cjs

@@ -23,6 +23,9 @@ module.exports = {
      * ===================================
      */
 
+    // https://eslint.org/docs/latest/rules/quote-props
+    // https://github.com/antfu/eslint-config/blob/v0.39.7/packages/eslint-config-basic/index.js#L223
+    'quote-props': ['error', 'as-needed'],
     // https://eslint.org/docs/latest/rules/no-console
     // https://github.com/antfu/eslint-config/blob/v0.39.7/packages/eslint-config-basic/index.js#L241
     'no-console': ['error', { allow: ['warn', 'error', 'debug'] }],
@@ -38,6 +41,23 @@ module.exports = {
         allowSeparatedGroups: false,
       },
     ],
+
+    // https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
+    // https://github.com/antfu/eslint-config/blob/v0.39.7/packages/eslint-config-basic/index.js#L212
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'unknown',
+          'internal',
+          'parent',
+          'sibling',
+        ],
+      },
+    ],
+
     // https://eslint.org/docs/latest/rules/no-multiple-empty-lines
     'no-multiple-empty-lines': [
       'error',
@@ -84,7 +104,7 @@ module.exports = {
 
     // https://eslint.org/docs/latest/rules/curly#multi-line
     // https://github.com/antfu/eslint-config/blob/v0.39.7/packages/eslint-config-basic/index.js#L221
-    'curly': ['error', 'multi-line', 'consistent'],
+    curly: ['error', 'multi-line', 'consistent'],
     // https://eslint.org/docs/latest/rules/arrow-parens
     // https://github.com/antfu/eslint-config/blob/v0.39.7/packages/eslint-config-basic/index.js#L305
     'arrow-parens': 'off',
@@ -289,7 +309,7 @@ module.exports = {
     // https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md
     //   `css`: https://emotion.sh/docs/css-prop
     //   `jsx`,`global`: https://nextjs.org/blog/styling-next-with-styled-jsx
-    'react/no-unknown-property': ['error', { ignore: ['css', 'jsx', 'global'] }],
+    'react/no-unknown-property': ['error', { ignore: ['css', 'jsx', 'global', 'class'] }],
 
 
     /**

.gitattributes

@@ -3,5 +3,9 @@ pnpm-lock.yaml               merge=binary
 shrinkwrap.yaml              merge=binary
 npm-shrinkwrap.json          merge=binary
 yarn.lock                    merge=binary
-
 *.json                       linguist-language=JSON-with-Comments
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

.github/workflows/build.yml

@@ -27,6 +27,7 @@ jobs:
         with:
           # Number of commits to fetch. 0 indicates all history.
           fetch-depth: 1
+          lfs: true
 
       - name: Prepare for building
         uses: ./.github/actions/prepare

.github/workflows/release.yml

@@ -27,6 +27,7 @@ jobs:
         with:
           # Number of commits to fetch. 0 indicates all history.
           fetch-depth: 1
+          lfs: true
 
       - name: Prepare for building
         uses: ./.github/actions/prepare

.gitignore

@@ -12,7 +12,6 @@ pnpm-publish-summary.json
 
 .DS_Store
 .idea
-.vscode
 
 node_modules
 

.husky/post-checkout

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'post-checkout' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks').\n"; exit 2; }
+git lfs post-checkout "$@"

.husky/post-commit

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'post-commit' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks').\n"; exit 2; }
+git lfs post-commit "$@"

.husky/post-merge

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'post-merge' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks').\n"; exit 2; }
+git lfs post-merge "$@"

.husky/pre-push

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'pre-push' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks').\n"; exit 2; }
+git lfs pre-push "$@"

.vscode/extensions.json

@@ -0,0 +1,15 @@
+{
+  "recommendations": [
+    // https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
+    "styled-components.vscode-styled-components",
+
+    // https://marketplace.visualstudio.com/items?itemName=editorconfig.editorconfig
+    "editorconfig.editorconfig",
+
+    // https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors
+    "yoavbls.pretty-ts-errors",
+
+    // https://marketplace.visualstudio.com/items?itemName=orta.vscode-twoslash-queries
+    "orta.vscode-twoslash-queries",
+  ],
+}

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "cSpell.words": [
+    "Nextra",
+    "clsx",
+    "solidjs",
+    "kobalte",
+    "lucide",
+    "iconbox",
+    "Zustand",
+  ],
+  "svg.preview.background": "transparent",
+
+  "tailwindCSS.experimental.classRegex": [
+    "\\b(?:class|className): *`((.|\n)*?)`",
+    "\\b(?:class|className): *\"((.|\n)*?)\"",
+    "\\b(?:class|className): *'((.|\n)*?)'",
+  ],
+}

README.md

@@ -36,7 +36,7 @@ Just check out this demo below and you'll get it in a snap.
 
 Showcase: https://react-dev-inspector.zthxxx.me/showcase
 
-[![inspector-gif](https://github.com/zthxxx/react-dev-inspector/raw/master/docs/images/inspect.gif)](https://react-dev-inspector.zthxxx.me/showcase)
+[![inspector-preview](https://github.com/zthxxx/react-dev-inspector/raw/dev/docs/images/inspector.mp4)](https://react-dev-inspector.zthxxx.me/showcase)
 
 Wanna try out the demo right now? Sure, here is the online demo:
 
@@ -93,7 +93,7 @@ then call your local IDE/Editor to open the source file.
 
 ## Articles about it
 
-- [chinese] [🎉 我点了页面上的元素，VSCode 乖乖打开了对应的组件？原理揭秘](https://juejin.cn/post/6901466406823575560)
+- [Chinese] [🎉 我点了页面上的元素，VSCode 乖乖打开了对应的组件？原理揭秘](https://juejin.cn/post/6901466406823575560)
 
 <br />
 

docs/.babelrc.js

@@ -6,9 +6,9 @@ module.exports = {
 
   plugins: [
     /**
-     * NOTE: the following `@react-dev-inspector/babel-plugin` is optional,
-     *       only use for online demo site,
-     *       you can remove it from your local development config.
+     * NOTE: the following `@react-dev-inspector/babel-plugin` is optional.
+     *       It’s only for the online demo site,
+     *       so you can remove it from your local development config.
      */
     '@react-dev-inspector/babel-plugin',
   ],

docs/.gitignore

@@ -1,2 +1,3 @@
-.next
+.next/
 next-env.d.ts
+dist/

docs/CHANGELOG.v2.md

@@ -1,18 +1,27 @@
 # Changelog
 
 
-## [2.1.0-beta.6](https://github.com/zthxxx/react-dev-inspector/compare/v2.0.1...v2.1.0-beta.6)
+## [2.1.0-beta.9](https://github.com/zthxxx/react-dev-inspector/compare/v2.0.1...v2.1.0-beta.9)
 
 ### Features
 
-- add export `Overlay` (inspector indicating UI), support custom to get boxSizing and bounding
-- add export fiber access utils
+- integrate an `InspectContextPanel` trigger by right-click inspect
+- allow to setting some custom `InspectAgent`, to work with default `DOMInspectAgent` together
+- add `@react-dev-inspector/web-components` package
+  - export the `Overlay` (inspector indicating UI), support custom to get boxSizing and bounding
+  - export the `InspectContextPanel` component, which is a context-menu as a draggable and resizable floating panel
+- add export of some utils for access react fiber (`fiberUtils`) or help inspecting (`inspectUtils`),
+  use for custom InspectAgent
 
 ### Refactor
 
-- refactor Inspector implementation to `DOMInspectAgent`, support setting custom `InspectAgent`
-- rewrite Overlay to WebComponent with [LitElement](https://lit.dev)
+- refactor `Inspector` implementation to `DOMInspectAgent`, support setting custom `InspectAgent`
+- rewrite `Overlay` to WebComponents via [solidjs](https://www.solidjs.com)
 - using `@floating-ui/core` for OverlayTip
+- add `@react-dev-inspector/launch-editor-endpoint`, split endpoint and types from middleware
+  - replace `react-dev-utils` with `launch-editor` for middleware
+  - replace middleware endpoint from `/__open-stack-frame-in-editor` to `/__inspect-open-in-editor`
+    - keep compatibility with old endpoint by both `Inspector` component and middleware
 - move `package.json` v1 compatible plugins from `dependencies` to `peerDependencies` with mark as optional
 - add `exports` field into `package.json`
 

docs/components/features/style.module.css

@@ -12,7 +12,7 @@
   color: #000;
   background-color: white;
   overflow: hidden;
-  border-radius: 1.78em;
+  border-radius: 1.5em;
 
   box-shadow: 0 8px 16px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%),
     0 0 0 1px rgb(0 0 0 / 3%);

docs/components/landing-page/home.global.css

@@ -57,14 +57,15 @@
   }
 
   #preview-card {
-    aspect-ratio: 125/70;
+    aspect-ratio: 567/311;
     color: #fff;
     text-shadow: 0 0 1rem rgba(0,0,0,0.1);
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 1rem;
+    padding: 0;
     background-color: #fefcfe;
+    overflow: hidden;
 
     .docs-img-wrapper {
       display: flex;
@@ -76,7 +77,13 @@
       min-width: 95%;
       border-radius: 20px;
     }
+
+    .docs-preview-video {
+      max-width: 100%;
+      max-height: 100%;
+    }
   }
+
   #preview-card img {
     position: absolute;
     object-fit: cover;
@@ -125,14 +132,14 @@
       letter-spacing: -.08rem;
     }
   }
-  @media screen and (max-width: 1024px) {
+  /* @media screen and (max-width: 1024px) {
     #preview-card {
       padding: 0;
       .docs-img-wrapper {
         width: 96%;
       }
     }
-  }
+  } */
 
   @media screen and (max-width: 640px) {
     #online-editor-demo {

docs/components/landing-page/landing-page.tsx

@@ -1,11 +1,9 @@
-
 import { useState } from 'react'
+import dynamic from 'next/dynamic'
 import Image from 'next/image'
 import Link from 'next/link'
-import { Inspector } from 'react-dev-inspector'
-import inspectPreview from '@images/inspect.gif'
+import inspectorPreview from '@images/inspector.mp4'
 import workingPipeline from '@images/working-pipeline.svg'
-import { isDev, handleInspectOnline } from '@utils'
 import { Feature, Features } from '@components/features'
 import { StackBlitz } from '@components/stack-blitz'
 import { Marquee } from '@components/marquee'
@@ -18,16 +16,21 @@ import {
   FrameworkLogos,
 } from './items'
 
+
+const OnlineInspector = dynamic(
+  () => import('@components/online-inspector').then(({ OnlineInspector }) => OnlineInspector),
+  { ssr: false },
+)
+
+
 export const LandingPage = () => {
   const [active, setActive] = useState(false)
 
   return (
     <div className='home-content'>
-      <Inspector
-        disable={false}
+      <OnlineInspector
         active={active}
-        onActiveChange={setActive}
-        onInspectElement={handleInspectOnline}
+        setActive={setActive}
       />
       <div className='content-container'>
         <h1 className='headline'>
@@ -54,15 +57,19 @@ export const LandingPage = () => {
               centered
               href='/showcase'
             >
-              <Link
-                className='docs-img-wrapper'
-                href='/showcase'
-                target='_blank'
-              >
-                {!isDev && (
-                  <Image src={inspectPreview} alt='Background' loading='eager' />
-                )}
-              </Link>
+              <video
+                src={inspectorPreview}
+                className='docs-preview-video'
+                loop
+                autoPlay
+                muted
+                disablePictureInPicture
+                disableRemotePlayback
+                playsInline
+                controls
+                controlsList='play timeline nofullscreen nodownload novolume noremoteplayback noplaybackrate'
+              />
+
             </Feature>
 
             <Feature