chore: update building of examples and docs site

- add hover indication of floating layers in ContextPanel
zthxxx · Apr 21, 2024 · 5d1c635 · 5d1c635
1 parent c24a8be
commit 5d1c635
Show file tree

Hide file tree

Showing 37 changed files with 1,126 additions and 1,391 deletions.
diff --git a/docs/components/landing-page/landing-page.tsx b/docs/components/landing-page/landing-page.tsx
@@ -1,11 +1,10 @@
-
 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 workingPipeline from '@images/working-pipeline.svg'
-import { isDev, handleInspectOnline } from '@utils'
+import { isDev } from '@utils'
 import { Feature, Features } from '@components/features'
 import { StackBlitz } from '@components/stack-blitz'
 import { Marquee } from '@components/marquee'
@@ -18,16 +17,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'>

diff --git a/docs/components/online-inspector.tsx b/docs/components/online-inspector.tsx
@@ -0,0 +1,47 @@
+import {
+  Inspector,
+  gotoServerEditor,
+  type InspectParams,
+} from 'react-dev-inspector'
+import {
+  isDev,
+  projectRepo,
+} from '@utils'
+
+
+/**
+ * only for online showcase in docs site
+ */
+export const OnlineInspector = ({ active, setActive }: {
+  active?: boolean;
+  setActive?: (active: boolean) => void;
+}) => {
+  return (
+    <Inspector
+      disable={false}
+      active={active}
+      onActiveChange={setActive}
+      onInspectElement={handleInspectOnline}
+    />
+  )
+}
+
+const handleInspectOnline = (inspect: InspectParams) => {
+  if (!inspect.codeInfo) {
+    return
+  }
+
+  if (isDev) {
+    return gotoServerEditor(inspect.codeInfo)
+  }
+
+  const { relativePath, absolutePath, lineNumber } = inspect.codeInfo
+  if (relativePath) {
+    const onlineFilePath = `docs/${relativePath}`
+    window.open(`${projectRepo}/blob/dev/${onlineFilePath}#L${lineNumber}`)
+  }
+  else if (absolutePath) {
+    const onlineFilePath = absolutePath.replace(/^.*?\/docs\//, 'docs/')
+    window.open(`${projectRepo}/blob/dev/${onlineFilePath}#L${lineNumber}`)
+  }
+}
diff --git a/docs/components/show-page/show-page.tsx b/docs/components/show-page/show-page.tsx
@@ -1,23 +1,27 @@
 import { useState } from 'react'
+import dynamic from 'next/dynamic'
 import {
-  Inspector,
   defaultHotkeys,
 } from 'react-dev-inspector'
-import { projectRepo, handleInspectOnline } from '@utils'
+import { projectRepo } from '@utils'
 import { ChecksPattern } from './components/Pattern'
 
 import * as S from './styles'
 
+const OnlineInspector = dynamic(
+  () => import('@components/online-inspector').then(({ OnlineInspector }) => OnlineInspector),
+  { ssr: false },
+)
+
 export const ShowPage = () => {
   const [active, setActive] = useState(false)
 
   return (
-    <Inspector
-      disable={false}
-      active={active}
-      onActiveChange={setActive}
-      onInspectElement={handleInspectOnline}
-    >
+    <>
+      <OnlineInspector
+        active={active}
+        setActive={setActive}
+      />
       <S.Base>
         <S.GithubCorner
           href={projectRepo}
@@ -89,6 +93,6 @@ export const ShowPage = () => {
           </div>
         </div>
       </S.Base>
-    </Inspector>
+    </>
   )
 }
diff --git a/docs/package.json b/docs/package.json
@@ -23,8 +23,8 @@
     "framer-motion": "10.12.18",
     "katex": "0.16.8",
     "medium-zoom": "1.0.8",
-    "nextra": "2.12.3",
-    "nextra-theme-docs": "2.12.3",
+    "nextra": "2.13.4",
+    "nextra-theme-docs": "2.13.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-github-corner": "2.5.0"
@@ -33,12 +33,13 @@
     "@react-dev-inspector/babel-plugin": "workspace:*",
     "@react-dev-inspector/middleware": "workspace:*",
     "@svgr/webpack": "8.0.1",
+    "@swc/helpers": "0.5.11",
     "@types/node": "20.12.10",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@zthxxx/tsconfig": "1.0.4",
     "autoprefixer": "10.4.14",
-    "next": "13.1.0",
+    "next": "13.4.19",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.26",
     "postcss-load-config": "4.0.1",

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -13,6 +13,8 @@
     // Next.js implements its own optimized jsx transform
     "jsx": "preserve",
 
+    "moduleResolution": "Node",
+
     "paths": {
       "@components/*": ["components/*"],
       "@utils": ["utils/"],
@@ -26,11 +28,14 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.mdx",
-    ".postcss.config.ts", "pages/showcase.msx",
+    ".postcss.config.ts",
+    "pages/showcase.msx",
   ],
   // https://www.typescriptlang.org/docs/handbook/project-references.html
   "references": [
+    { "path": "../packages/launch-editor-endpoint" },
     { "path": "../packages/middleware" },
+    { "path": "../packages/web-components" },
     { "path": "../packages/babel-plugin" },
     { "path": "../packages/inspector" },
   ],

diff --git a/docs/utils/css.ts b/docs/utils/css.ts
@@ -1,7 +1,2 @@
 // only use for IDE code highlight
-export const css = (temp: TemplateStringsArray, ...values: any[]): string => (
-  temp
-    .flatMap((element, index) => [element, values[index]])
-    .filter(Boolean)
-    .join('')
-)
+export const css = String.raw
diff --git a/docs/utils/index.ts b/docs/utils/index.ts
@@ -1,25 +1,5 @@
-import {
-  gotoServerEditor,
-  type InspectParams,
-} from 'react-dev-inspector'
-
-
 export * from './css'
 
 export const isDev = process.env.NODE_ENV === 'development'
 
 export const projectRepo = 'https://github.com/zthxxx/react-dev-inspector'
-
-export const handleInspectOnline = (inspect: Required<InspectParams>) => {
-  if (isDev) return gotoServerEditor(inspect.codeInfo)
-
-  const { relativePath, absolutePath, lineNumber } = inspect.codeInfo
-  if (relativePath) {
-    const onlineFilePath = `docs/${relativePath}`
-    window.open(`${projectRepo}/blob/dev/${onlineFilePath}#L${lineNumber}`)
-  }
-  else if (absolutePath) {
-    const onlineFilePath = absolutePath.replace(/^.*?\/docs\//, 'docs/')
-    window.open(`${projectRepo}/blob/dev/${onlineFilePath}#L${lineNumber}`)
-  }
-}
diff --git a/examples/cra5-with-rewired/src/ShowPage/ShowPage.tsx b/examples/cra5-with-rewired/src/ShowPage/ShowPage.tsx
@@ -12,10 +12,11 @@ export const ShowPage = () => {
   const [active, setActive] = useState(false)
 
   return (
-    <Inspector
-      active={active}
-      onActiveChange={setActive}
-    >
+    <>
+      <Inspector
+        active={active}
+        onActiveChange={setActive}
+      />
       <S.Base>
         <S.GithubCorner
           href={projectRepo}
@@ -87,6 +88,6 @@ export const ShowPage = () => {
           </div>
         </div>
       </S.Base>
-    </Inspector>
+    </>
   )
 }
diff --git a/examples/nextjs-custom-server/components/ShowPage/ShowPage.tsx b/examples/nextjs-custom-server/components/ShowPage/ShowPage.tsx
@@ -12,10 +12,11 @@ export const ShowPage = () => {
   const [active, setActive] = useState(false)
 
   return (
-    <Inspector
-      active={active}
-      onActiveChange={setActive}
-    >
+    <>
+      <Inspector
+        active={active}
+        onActiveChange={setActive}
+      />
       <S.Base>
         <S.GithubCorner
           href={projectRepo}
@@ -87,6 +88,6 @@ export const ShowPage = () => {
           </div>
         </div>
       </S.Base>
-    </Inspector>
+    </>
   )
 }
diff --git a/examples/nextjs-custom-server/package.json b/examples/nextjs-custom-server/package.json
@@ -28,12 +28,13 @@
   "devDependencies": {
     "@react-dev-inspector/babel-plugin": "^2",
     "@react-dev-inspector/middleware": "^2",
+    "@swc/helpers": "0.5.11",
     "@types/node": "20.12.10",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@zthxxx/tsconfig": "1.0.4",
     "autoprefixer": "10.4.14",
-    "next": "13.1.0",
+    "next": "13.4.19",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.26",
     "react-dev-inspector": "^2",

diff --git a/examples/nextjs-custom-server/postcss.config.js b/examples/nextjs-custom-server/postcss.config.js
@@ -5,7 +5,7 @@
 module.exports = {
   plugins: {
     'tailwindcss/nesting': {},
-    'tailwindcss': {},
-    'autoprefixer': {},
+    tailwindcss: {},
+    autoprefixer: {},
   },
 }
diff --git a/examples/rspack/package.json b/examples/rspack/package.json
@@ -28,7 +28,10 @@
     "@babel/preset-typescript": "7.22.5",
     "@react-dev-inspector/babel-plugin": "^2",
     "@react-dev-inspector/middleware": "^2",
-    "@rspack/cli": "0.3.1",
+    "@rspack/cli": "0.7.5",
+    "@rspack/core": "0.7.5",
+    "@rspack/plugin-react-refresh": "0.7.5",
+    "@swc/helpers": "0.5.11",
     "@types/node": "20.12.10",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",