From 7f47aa88ea0663fe676f6eb431e9ce2a50ee3a31 Mon Sep 17 00:00:00 2001 From: zthxxx Date: Sat, 23 Dec 2023 11:05:00 +0800 Subject: [PATCH 01/22] WIP: prepare for gen elements acestor chain from inspector --- .commitlintrc.yml | 9 +++++ .../DOMInspectAgent/DOMInspectAgent.ts | 33 ++++++++----------- .../inspector/src/Inspector/Inspector.tsx | 19 ++++++----- .../src/Inspector/hooks/use-effect-event.ts | 2 ++ packages/inspector/src/Inspector/types.ts | 8 +++-- .../inspector/src/Inspector/utils/fiber.ts | 8 ++--- .../inspector/src/Inspector/utils/inspect.ts | 4 +-- 7 files changed, 46 insertions(+), 37 deletions(-) diff --git a/.commitlintrc.yml b/.commitlintrc.yml index 6018b4a7..59690cf1 100644 --- a/.commitlintrc.yml +++ b/.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: diff --git a/packages/inspector/src/Inspector/DOMInspectAgent/DOMInspectAgent.ts b/packages/inspector/src/Inspector/DOMInspectAgent/DOMInspectAgent.ts index 1b7bfd68..8e2491ad 100644 --- a/packages/inspector/src/Inspector/DOMInspectAgent/DOMInspectAgent.ts +++ b/packages/inspector/src/Inspector/DOMInspectAgent/DOMInspectAgent.ts @@ -12,7 +12,9 @@ import type { } from '../types' -export class DOMInspectAgent implements InspectAgent { +export type DOMElement = HTMLElement | SVGElement + +export class DOMInspectAgent implements InspectAgent { protected overlay?: Overlay protected unsubscribeListener?: () => void @@ -27,9 +29,9 @@ export class DOMInspectAgent implements InspectAgent { * use to check whether hovered any element at initial */ pointer?: PointerEvent; - onHover: (params: { element: HTMLElement; pointer: PointerEvent }) => void; - onPointerDown: (params: { element?: HTMLElement; pointer: PointerEvent }) => void; - onClick: (params: { element?: HTMLElement; pointer: PointerEvent }) => void; + onHover: (params: { element: DOMElement; pointer: PointerEvent }) => void; + onPointerDown: (params: { element?: DOMElement; pointer: PointerEvent }) => void; + onClick: (params: { element?: DOMElement; pointer: PointerEvent }) => void; }) { this.deactivate() this.overlay = new Overlay() @@ -43,7 +45,7 @@ export class DOMInspectAgent implements InspectAgent { if (!pointer) { return } - const element = document.elementFromPoint(pointer.clientX, pointer.clientY) as HTMLElement | undefined + const element = document.elementFromPoint(pointer.clientX, pointer.clientY) as DOMElement | undefined if (element) { onHover({ element, @@ -60,34 +62,27 @@ export class DOMInspectAgent implements InspectAgent { this.unsubscribeListener = undefined } - public getElementFiber(element?: HTMLElement): Fiber | undefined { - return getElementFiberUpward(element) + public isAgentElement(element: unknown): element is DOMElement { + return element instanceof HTMLElement || element instanceof SVGElement } - public *getAncestorChain(element: HTMLElement): Generator { - let current: HTMLElement | null = element - while (current) { - if (this.getElementFiber(current)) { - yield current - } - - current = current.parentElement - } + public findElementFiber(element?: DOMElement): Fiber | undefined { + return getElementFiberUpward(element) } - public getNameInfo(element: HTMLElement): { + public getNameInfo(element: DOMElement): { name: string; title: string; } { return getElementInspect(element) } - public findCodeInfo(element: HTMLElement) { + public findCodeInfo(element: DOMElement) { return getElementCodeInfo(element) } public indicate({ element, title }: { - element: HTMLElement; + element: DOMElement; title?: string; }) { const codeInfo = this.findCodeInfo(element) diff --git a/packages/inspector/src/Inspector/Inspector.tsx b/packages/inspector/src/Inspector/Inspector.tsx index 0bb0cc49..b1ef6fe7 100644 --- a/packages/inspector/src/Inspector/Inspector.tsx +++ b/packages/inspector/src/Inspector/Inspector.tsx @@ -15,21 +15,21 @@ import { useRecordPointer, useControlledActive, } from './hooks' -import { domInspectAgent } from './DOMInspectAgent' +import { domInspectAgent, type DOMElement } from './DOMInspectAgent' import type { CodeInfo, InspectAgent, } from './types' -const defaultInspectAgents: InspectAgent[] = [ +const defaultInspectAgents: InspectAgent[] = [ domInspectAgent, ] /** * the inspect meta info that is sent to the callback when an element is hovered over or clicked. */ -export interface InspectParams { +export interface InspectParams { /** hover / click event target dom element */ element: Element; /** nearest named react component fiber for dom element */ @@ -79,6 +79,7 @@ export interface InspectorProps { * will automatically disable in production environment by default. * * @default `true` if `NODE_ENV` is 'production', otherwise is `false`. + * * > add in version `v2.0.0` */ disable?: boolean; @@ -86,6 +87,8 @@ export interface InspectorProps { /** * Agent for get inspection info in different React renderer with user interaction * @default [domInspectAgent] + * + * > add in version `v2.1.0` */ inspectAgents?: InspectAgent[]; @@ -129,6 +132,8 @@ export interface InspectorProps { * * @default `true` if setting `onInspectElement` callback, otherwise is `false`. * @deprecated please use `onInspectElement` callback instead for fully custom controlling. + * + * > deprecated in version `v2.0.0` */ disableLaunchEditor?: boolean; } @@ -210,9 +215,7 @@ export const Inspector = function(props: InspectorProps) { } const codeInfo = agent.findCodeInfo(element) - const fiber = (element instanceof HTMLElement) - ? domInspectAgent.getElementFiber(element) - : undefined + const fiber = agent.findElementFiber(element) onHoverElement({ element, @@ -267,9 +270,7 @@ export const Inspector = function(props: InspectorProps) { const nameInfo = agent.getNameInfo(element) const codeInfo = agent.findCodeInfo(element) - const fiber = (element instanceof HTMLElement) - ? domInspectAgent.getElementFiber(element) - : undefined + const fiber = agent.findElementFiber(element) deactivate() diff --git a/packages/inspector/src/Inspector/hooks/use-effect-event.ts b/packages/inspector/src/Inspector/hooks/use-effect-event.ts index 97419873..e135c088 100644 --- a/packages/inspector/src/Inspector/hooks/use-effect-event.ts +++ b/packages/inspector/src/Inspector/hooks/use-effect-event.ts @@ -2,6 +2,8 @@ * Simple but not robust implement of React18 experimental hook `useEffectEvent`, * to keep compatible with other React versions. * + * Docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event + * * for some more robust implements, you can see: * - `useEvent` in https://github.com/scottrippey/react-use-event-hook * - `useMemoizedFn` in https://github.com/alibaba/hooks diff --git a/packages/inspector/src/Inspector/types.ts b/packages/inspector/src/Inspector/types.ts index 6544771f..1c89c5e9 100644 --- a/packages/inspector/src/Inspector/types.ts +++ b/packages/inspector/src/Inspector/types.ts @@ -1,3 +1,4 @@ +import type { Fiber } from 'react-reconciler' export interface CodeInfo { lineNumber: string; @@ -77,11 +78,12 @@ export interface InspectAgent { */ deactivate(): void; + isAgentElement(element: unknown): element is Element; + /** - * use for filter valid elements from input element upward to render root. - * a "valid" element considered have a valid name and you want show it in the inspected list. + * find the nearest react fiber from the element */ - getAncestorChain(element: Element): Generator; + findElementFiber(element?: Element): Fiber | undefined; /** * get the element display name and title for show in indicator UI diff --git a/packages/inspector/src/Inspector/utils/fiber.ts b/packages/inspector/src/Inspector/utils/fiber.ts index bc83e44a..da198e04 100644 --- a/packages/inspector/src/Inspector/utils/fiber.ts +++ b/packages/inspector/src/Inspector/utils/fiber.ts @@ -17,7 +17,7 @@ export const isForwardRef = (fiber?: Fiber): boolean => fiber?.type?.$$typeof === Symbol.for('react.forward_ref') -type HTMLElementWithFiber = HTMLElement & { +type ElementWithFiber = Element & { [fiberKey: string]: Fiber | undefined; } @@ -48,8 +48,8 @@ const getFiberWithDevtoolHook = (element: any): Fiber | undefined => { /** * https://stackoverflow.com/questions/29321742/react-getting-a-component-from-a-dom-element-for-debugging */ -export const getElementFiber = (_element?: HTMLElement): Fiber | undefined => { - const element = _element as HTMLElementWithFiber +export const getElementFiber = (_element?: Element): Fiber | undefined => { + const element = _element as ElementWithFiber if (!element) { return undefined } @@ -86,7 +86,7 @@ export const getElementFiber = (_element?: HTMLElement): Fiber | undefined => { return undefined } -export const getElementFiberUpward = (element: HTMLElement | null | undefined): Fiber | undefined => { +export const getElementFiberUpward = (element: Element | null | undefined): Fiber | undefined => { if (!element) return undefined const fiber = getElementFiber(element) if (fiber) return fiber diff --git a/packages/inspector/src/Inspector/utils/inspect.ts b/packages/inspector/src/Inspector/utils/inspect.ts index 171bd76c..11f765cb 100644 --- a/packages/inspector/src/Inspector/utils/inspect.ts +++ b/packages/inspector/src/Inspector/utils/inspect.ts @@ -169,7 +169,7 @@ export const getReferenceFiber = (baseFiber?: Fiber): Fiber | undefined => { return originReferenceFiber } -export const getElementCodeInfo = (element: HTMLElement): CodeInfo | undefined => { +export const getElementCodeInfo = (element: Element): CodeInfo | undefined => { const fiber: Fiber | undefined = getElementFiberUpward(element) const referenceFiber = getReferenceFiber(fiber) @@ -209,7 +209,7 @@ export const getNamedFiber = (baseFiber?: Fiber): Fiber | undefined => { return originNamedFiber } -export const getElementInspect = (element: HTMLElement): { +export const getElementInspect = (element: Element): { fiber?: Fiber; name: string; title: string; From 3c4cb78cf9f25b416a9dba13102439d9641201a6 Mon Sep 17 00:00:00 2001 From: zthxxx Date: Sat, 6 Jan 2024 22:45:00 +0800 Subject: [PATCH 02/22] feat: init add Overlay component via solid-js as web components --- .eslintignore | 4 +- .eslintrc.cjs | 7 +- docs/package.json | 4 +- docs/postcss.config.js | 4 +- examples/cra5-with-rewired/package.json | 4 +- examples/nextjs-custom-server/package.json | 4 +- examples/rspack/package.json | 4 +- examples/umi3/package.json | 4 +- examples/umi4/package.json | 4 +- examples/vite2/package.json | 4 +- examples/vite3/package.json | 4 +- examples/vite4/package.json | 4 +- packages/babel-plugin/package.json | 4 +- packages/components/.gitignore | 28 + packages/components/.npmrc | 5 + packages/components/.storybook/main.ts | 25 + packages/components/.storybook/preview.ts | 18 + packages/components/.storybook/tailwind.css | 44 + packages/components/.storybook/vite.config.ts | 15 + packages/components/README.md | 106 + packages/components/package.json | 93 + packages/components/postcss.config.js | 12 + packages/components/rollup.config.mjs | 7 + packages/components/src/.stories/Card.tsx | 58 + .../src/.stories/components/Button.tsx | 50 + .../src/.stories/components/Card.tsx | 63 + .../src/.stories/components/Label.tsx | 19 + .../src/.stories/components/Switch.tsx | 43 + .../src/.stories/components/index.ts | 4 + .../src/Overlay/InspectorOverlay.tsx | 130 + .../src/Overlay/Overlay.stories.tsx | 389 + packages/components/src/Overlay/Overlay.ts | 70 + .../components/src/Overlay/OverlayRect.tsx | 159 + .../components/src/Overlay/OverlayTip.tsx | 246 + packages/components/src/Overlay/elements.d.ts | 15 + .../src}/Overlay/index.ts | 4 + .../src}/Overlay/overlay.test.ts | 0 .../src}/Overlay/types.ts | 0 .../src}/Overlay/utils.ts | 54 - packages/components/src/global.d.ts | 7 + packages/components/src/index.ts | 1 + packages/components/tailwind.config.ts | 37 + packages/components/tsconfig.json | 25 + packages/components/tsconfig.test.json | 21 + packages/components/vitest.config.ts | 9 + packages/inspector/.storybook/main.ts | 2 +- packages/inspector/.storybook/preview.ts | 1 - packages/inspector/.storybook/vite.config.ts | 1 - packages/inspector/package.json | 31 +- packages/inspector/postcss.config.js | 2 + .../DOMInspectAgent/DOMInspectAgent.ts | 4 +- .../src/Inspector/Inspector.stories.tsx | 1 + .../src/Inspector/Overlay/Overlay.stories.tsx | 500 - .../src/Inspector/Overlay/Overlay.tsx | 175 - .../src/Inspector/Overlay/OverlayRect.tsx | 177 - .../src/Inspector/Overlay/OverlayTip.tsx | 279 - .../src/Inspector/Overlay/elements.d.ts | 21 - packages/inspector/src/Inspector/index.ts | 3 +- packages/middleware/package.json | 4 +- packages/umi3-plugin/package.json | 4 +- packages/umi4-plugin/package.json | 4 +- packages/vite-plugin/package.json | 4 +- pnpm-lock.yaml | 8831 +++++++++++++---- 63 files changed, 8527 insertions(+), 3329 deletions(-) create mode 100644 packages/components/.gitignore create mode 100644 packages/components/.npmrc create mode 100644 packages/components/.storybook/main.ts create mode 100644 packages/components/.storybook/preview.ts create mode 100644 packages/components/.storybook/tailwind.css create mode 100644 packages/components/.storybook/vite.config.ts create mode 100644 packages/components/README.md create mode 100644 packages/components/package.json create mode 100644 packages/components/postcss.config.js create mode 100644 packages/components/rollup.config.mjs create mode 100644 packages/components/src/.stories/Card.tsx create mode 100644 packages/components/src/.stories/components/Button.tsx create mode 100644 packages/components/src/.stories/components/Card.tsx create mode 100644 packages/components/src/.stories/components/Label.tsx create mode 100644 packages/components/src/.stories/components/Switch.tsx create mode 100644 packages/components/src/.stories/components/index.ts create mode 100644 packages/components/src/Overlay/InspectorOverlay.tsx create mode 100644 packages/components/src/Overlay/Overlay.stories.tsx create mode 100644 packages/components/src/Overlay/Overlay.ts create mode 100644 packages/components/src/Overlay/OverlayRect.tsx create mode 100644 packages/components/src/Overlay/OverlayTip.tsx create mode 100644 packages/components/src/Overlay/elements.d.ts rename packages/{inspector/src/Inspector => components/src}/Overlay/index.ts (71%) rename packages/{inspector/src/Inspector => components/src}/Overlay/overlay.test.ts (100%) rename packages/{inspector/src/Inspector => components/src}/Overlay/types.ts (100%) rename packages/{inspector/src/Inspector => components/src}/Overlay/utils.ts (60%) create mode 100644 packages/components/src/global.d.ts create mode 100644 packages/components/src/index.ts create mode 100644 packages/components/tailwind.config.ts create mode 100644 packages/components/tsconfig.json create mode 100644 packages/components/tsconfig.test.json create mode 100644 packages/components/vitest.config.ts delete mode 100644 packages/inspector/src/Inspector/Overlay/Overlay.stories.tsx delete mode 100644 packages/inspector/src/Inspector/Overlay/Overlay.tsx delete mode 100644 packages/inspector/src/Inspector/Overlay/OverlayRect.tsx delete mode 100644 packages/inspector/src/Inspector/Overlay/OverlayTip.tsx delete mode 100644 packages/inspector/src/Inspector/Overlay/elements.d.ts diff --git a/.eslintignore b/.eslintignore index d6cee286..c334012e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -6,4 +6,6 @@ dist build .next -**/src/tests/outputs +**/src/tests/outputs/ + +**/.stories/components/ diff --git a/.eslintrc.cjs b/.eslintrc.cjs index a3d82e3d..5dd51d5c 100644 --- a/.eslintrc.cjs +++ b/.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'] }], @@ -84,7 +87,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 +292,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'] }], /** diff --git a/docs/package.json b/docs/package.json index 990139ea..ce0791a9 100644 --- a/docs/package.json +++ b/docs/package.json @@ -33,10 +33,10 @@ "@react-dev-inspector/babel-plugin": "workspace:*", "@react-dev-inspector/middleware": "workspace:*", "@svgr/webpack": "8.0.1", - "@types/node": "16.18.7", + "@types/node": "20.12.10", "@types/react": "18.0.26", "@types/react-dom": "18.0.9", - "@zthxxx/tsconfig": "1.0.2", + "@zthxxx/tsconfig": "1.0.4", "autoprefixer": "10.4.14", "next": "13.1.0", "npm-run-all": "4.1.5", diff --git a/docs/postcss.config.js b/docs/postcss.config.js index 85d5bbfe..63c0182e 100644 --- a/docs/postcss.config.js +++ b/docs/postcss.config.js @@ -5,7 +5,7 @@ module.exports = { plugins: { 'tailwindcss/nesting': {}, - 'tailwindcss': {}, - 'autoprefixer': {}, + tailwindcss: {}, + autoprefixer: {}, }, } diff --git a/examples/cra5-with-rewired/package.json b/examples/cra5-with-rewired/package.json index d7ef2fc7..85f5e5e1 100644 --- a/examples/cra5-with-rewired/package.json +++ b/examples/cra5-with-rewired/package.json @@ -28,10 +28,10 @@ "devDependencies": { "@react-dev-inspector/babel-plugin": "^2", "@react-dev-inspector/middleware": "^2", - "@types/node": "16.18.7", + "@types/node": "20.12.10", "@types/react": "18.0.26", "@types/react-dom": "18.0.9", - "@zthxxx/tsconfig": "1.0.2", + "@zthxxx/tsconfig": "1.0.4", "autoprefixer": "10.4.14", "css-loader": "6.8.1", "customize-cra": "1.0.0", diff --git a/examples/nextjs-custom-server/package.json b/examples/nextjs-custom-server/package.json index dfe68e4f..f513c086 100644 --- a/examples/nextjs-custom-server/package.json +++ b/examples/nextjs-custom-server/package.json @@ -28,10 +28,10 @@ "devDependencies": { "@react-dev-inspector/babel-plugin": "^2", "@react-dev-inspector/middleware": "^2", - "@types/node": "16.18.7", + "@types/node": "20.12.10", "@types/react": "18.0.26", "@types/react-dom": "18.0.9", - "@zthxxx/tsconfig": "1.0.2", + "@zthxxx/tsconfig": "1.0.4", "autoprefixer": "10.4.14", "next": "13.1.0", "npm-run-all": "4.1.5", diff --git a/examples/rspack/package.json b/examples/rspack/package.json index c24d8c7b..fa9da9da 100644 --- a/examples/rspack/package.json +++ b/examples/rspack/package.json @@ -29,10 +29,10 @@ "@react-dev-inspector/babel-plugin": "^2", "@react-dev-inspector/middleware": "^2", "@rspack/cli": "0.3.1", - "@types/node": "16.18.7", + "@types/node": "20.12.10", "@types/react": "18.0.26", "@types/react-dom": "18.0.9", - "@zthxxx/tsconfig": "1.0.2", + "@zthxxx/tsconfig": "1.0.4", "autoprefixer": "10.4.14", "babel-loader": "9.1.3", "npm-run-all": "4.1.5", diff --git a/examples/umi3/package.json b/examples/umi3/package.json index 808c5559..c5f08a1b 100644 --- a/examples/umi3/package.json +++ b/examples/umi3/package.json @@ -30,10 +30,10 @@ "devDependencies": { "@emotion/babel-plugin": "^11.11.0", "@react-dev-inspector/umi3-plugin": "^2", - "@types/node": "16.18.7", + "@types/node": "20.12.10", "@types/react": "18.0.26", "@types/react-dom": "18.0.9", - "@zthxxx/tsconfig": "1.0.2", + "@zthxxx/tsconfig": "1.0.4", "npm-run-all": "4.1.5", "react-dev-inspector": "^2", "rimraf": "3.0.2", diff --git a/examples/umi4/package.json b/examples/umi4/package.json index a67e8ba0..592b7f08 100644 --- a/examples/umi4/package.json +++ b/examples/umi4/package.json @@ -28,11 +28,11 @@ "devDependencies": { "@react-dev-inspector/umi4-plugin": "^2", "@swc/core": "^1.3.99", - "@types/node": "16.18.7", + "@types/node": "20.12.10", "@types/react": "18.0.26", "@types/react-dom": "18.0.9", "@umijs/preset-umi": "4.0.72", - "@zthxxx/tsconfig": "1.0.2", + "@zthxxx/tsconfig": "1.0.4", "autoprefixer": "10.4.14", "npm-run-all": "4.1.5", "postcss": "8.4.26", diff --git a/examples/vite2/package.json b/examples/vite2/package.json index 526f5850..ded3af75 100644 --- a/examples/vite2/package.json +++ b/examples/vite2/package.json @@ -28,11 +28,11 @@ "devDependencies": { "@react-dev-inspector/babel-plugin": "^2", "@react-dev-inspector/vite-plugin": "^2", - "@types/node": "16.18.7", + "@types/node": "20.12.10", "@types/react": "18.0.26", "@types/react-dom": "18.0.9", "@vitejs/plugin-react": "1.3.2", - "@zthxxx/tsconfig": "1.0.2", + "@zthxxx/tsconfig": "1.0.4", "autoprefixer": "10.4.14", "npm-run-all": "4.1.5", "postcss": "8.4.26", diff --git a/examples/vite3/package.json b/examples/vite3/package.json index f9c4cb70..45c37667 100644 --- a/examples/vite3/package.json +++ b/examples/vite3/package.json @@ -29,11 +29,11 @@ "devDependencies": { "@react-dev-inspector/babel-plugin": "^2", "@react-dev-inspector/vite-plugin": "^2", - "@types/node": "16.18.7", + "@types/node": "20.12.10", "@types/react": "18.0.26", "@types/react-dom": "18.0.9", "@vitejs/plugin-react": "2.2.0", - "@zthxxx/tsconfig": "1.0.2", + "@zthxxx/tsconfig": "1.0.4", "autoprefixer": "10.4.14", "npm-run-all": "4.1.5", "postcss": "8.4.26", diff --git a/examples/vite4/package.json b/examples/vite4/package.json index 487d02db..25c17719 100644 --- a/examples/vite4/package.json +++ b/examples/vite4/package.json @@ -29,11 +29,11 @@ "devDependencies": { "@react-dev-inspector/babel-plugin": "^2", "@react-dev-inspector/vite-plugin": "^2", - "@types/node": "16.18.7", + "@types/node": "20.12.10", "@types/react": "18.0.26", "@types/react-dom": "18.0.9", "@vitejs/plugin-react": "4.0.3", - "@zthxxx/tsconfig": "1.0.2", + "@zthxxx/tsconfig": "1.0.4", "autoprefixer": "10.4.14", "npm-run-all": "4.1.5", "postcss": "8.4.26", diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json index a24631bb..c3903ce0 100644 --- a/packages/babel-plugin/package.json +++ b/packages/babel-plugin/package.json @@ -50,8 +50,8 @@ "@types/babel__core": "7.1.20", "@types/babel__generator": "7.6.4", "@types/babel__traverse": "7.18.3", - "@types/node": "16.18.7", - "@zthxxx/tsconfig": "1.0.2", + "@types/node": "20.12.10", + "@zthxxx/tsconfig": "1.0.4", "babel-plugin-tester": "10.1.0", "fs-extra": "11.1.0", "globby": "11.1.0", diff --git a/packages/components/.gitignore b/packages/components/.gitignore new file mode 100644 index 00000000..18814bed --- /dev/null +++ b/packages/components/.gitignore @@ -0,0 +1,28 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +.DS_Store +.idea +.vscode + +node_modules + +# build ouput +es +lib +dist +build + +*.zip + +coverage/ + +storybook-static/ + +*storybook.log \ No newline at end of file diff --git a/packages/components/.npmrc b/packages/components/.npmrc new file mode 100644 index 00000000..29bb673e --- /dev/null +++ b/packages/components/.npmrc @@ -0,0 +1,5 @@ +# https://docs.npmjs.com/misc/config +registry=https://registry.npmjs.org + +audit=false +fund=false diff --git a/packages/components/.storybook/main.ts b/packages/components/.storybook/main.ts new file mode 100644 index 00000000..d00e5a91 --- /dev/null +++ b/packages/components/.storybook/main.ts @@ -0,0 +1,25 @@ +import type { StorybookConfig } from 'storybook-solidjs-vite' + +const config: StorybookConfig = { + stories: ['../src/**/*.stories.@(ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@chromatic-com/storybook', + '@storybook/addon-interactions', + '@storybook/addon-themes', + ], + framework: { + name: 'storybook-solidjs-vite', + options: { + builder: { + viteConfigPath: '.storybook/vite.config.ts', + }, + }, + }, + docs: { + autodocs: 'tag', + }, +} + +export default config diff --git a/packages/components/.storybook/preview.ts b/packages/components/.storybook/preview.ts new file mode 100644 index 00000000..db6eac8c --- /dev/null +++ b/packages/components/.storybook/preview.ts @@ -0,0 +1,18 @@ +import type { Preview } from 'storybook-solidjs' +import './tailwind.css' + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + + // https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, +} + +export default preview diff --git a/packages/components/.storybook/tailwind.css b/packages/components/.storybook/tailwind.css new file mode 100644 index 00000000..e028bf47 --- /dev/null +++ b/packages/components/.storybook/tailwind.css @@ -0,0 +1,44 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* https://tailwindcss.com/docs/customizing-colors#using-css-variables */ + + :root { + /* https://ui.shadcn.com/docs/theming#list-of-variables */ + --background: 0 0% 100%; + --foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 55%; + + --card: 0 0% 100%; + --card-foreground: 222.2 47.4% 11.2%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 47.4% 11.2%; + + --border: 214.3 31.8% 91.4%; + + --input: 214.3 31.8% 91.4%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 100% 50%; + --destructive-foreground: 210 40% 98%; + + --ring: 215 20.2% 65.1%; + + --radius: 0.5rem; + } + + #storybook-root { + padding: 0 !important; + } diff --git a/packages/components/.storybook/vite.config.ts b/packages/components/.storybook/vite.config.ts new file mode 100644 index 00000000..15bfebc1 --- /dev/null +++ b/packages/components/.storybook/vite.config.ts @@ -0,0 +1,15 @@ +import path from 'node:path' +import { defineConfig } from 'vite' + + +// https://vitejs.dev/config/ +export default defineConfig({ + resolve: { + alias: { + '@stories': path.resolve('src/.stories'), + }, + }, + plugins: [ + + ], +}) diff --git a/packages/components/README.md b/packages/components/README.md new file mode 100644 index 00000000..3d254dc5 --- /dev/null +++ b/packages/components/README.md @@ -0,0 +1,106 @@ +

React Dev Inspector

+ +

+ NPM Version + NPM Downloads + Node.js + License +

+ +## Introduction + +**react-dev-inspector** is the tool for seamlessly code navigation from browser to IDE. + +With **just a simple click**, you can jump from a React component on the browser to its source code in your local IDE instantly. +Think of it as a more advanced version of Chrome's Inspector. + +See the document on: https://react-dev-inspector.zthxxx.me + +#### Why React Dev Inspector + +Have you ever run into any of these issues 🤔: + +- You've got to fix some bugs in your team's project, but you have no idea where the heck page/component's code is located. +- You're eager to dive into an open-source project that interests you, but it's hard to find where the code for the page/component is implemented. +- You may thinking about a component and want to quickly peek at its code, but don't want to memorize or manually expand those never-ending deep file paths. + +That's exactly why react-dev-inspector was created. + +
+ +### Quick Look + +Just check out this demo below and you'll get it in a snap. + +> screen record gif (8M size): + +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) + +Wanna try out the demo right now? Sure, here is the online demo: + +[ + ![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg) +](https://stackblitz.com/edit/github-x3rkzl?file=package.json,vite.config.ts%3AL17) + +
+ +## How to Use and Configure + +According to the working pipeline [below](#how-it-works), the **Part.1** and **Part.2** are what you need configure to use. + +Basically, it's includes: +1. [add the `` component in your page](https://react-dev-inspector.zthxxx.me/docs/inspector-component) +2. [integrate the middleware in your framework's dev-server](https://react-dev-inspector.zthxxx.me/docs/integration) + +Check the [Documentation Site](https://react-dev-inspector.zthxxx.me/docs) for more details + +
+ +## How It Works + +Here is the working pipeline of `react-dev-inspector`: + +[ + ![Working Pipeline](https://github.com/zthxxx/react-dev-inspector/raw/dev/docs/images/working-pipeline.svg) +](https://react-dev-inspector.zthxxx.me/docs#how-it-works) + +
+ +### 0. Inject JSX Source + +The compiler's [`plugin`](https://react-dev-inspector.zthxxx.me/docs/compiler-plugin) +records source path info into React components during development stage. + +> **Note:** The **0** of _Part.0_ implies that this section is generally **OPTIONAL**. +> Most React frameworks offer this feature **_out-of-the-box_**, +> which means you usually **don't** need to manually configure it additionally. + +### 1. Inspector Component + +The react-dev-inspector provide a [``](https://react-dev-inspector.zthxxx.me/docs/inspector-component) component to reads the source info, +and sends it to the dev-server when you inspect elements on browser. + +### 2. Dev Server Middleware + +The react-dev-inspector provide some [middlewares](https://react-dev-inspector.zthxxx.me/docs/integration) for dev-server in most frameworks to receives source path info from API, +then call your local IDE/Editor to open the source file. + +
+ +--- + +## Articles about it + +- [chinese] [🎉 我点了页面上的元素,VSCode 乖乖打开了对应的组件?原理揭秘](https://juejin.cn/post/6901466406823575560) + +
+ +--- + +## License + +[MIT LICENSE](./LICENSE) + +> Thanks for @zthxxx @sonacy @sl1673495 diff --git a/packages/components/package.json b/packages/components/package.json new file mode 100644 index 00000000..cb03f0ad --- /dev/null +++ b/packages/components/package.json @@ -0,0 +1,93 @@ +{ + "name": "@react-dev-inspector/components", + "version": "2.1.0-beta.5", + "sideEffects": false, + "description": "UI components for react-dev-inspector, build as web components via solid-js.", + "repository": { + "type": "git", + "url": "https://github.com/zthxxx/react-dev-inspector.git", + "directory": "packages/components" + }, + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org" + }, + "keywords": [ + "react", + "component", + "inspector" + ], + "author": "zthxxx ", + "license": "MIT", + "bugs": { + "url": "https://github.com/zthxxx/react-dev-inspector/issues" + }, + "homepage": "https://github.com/zthxxx/react-dev-inspector", + "main": "dist/cjs", + "module": "dist/esm", + "types": "src", + "exports": { + ".": { + "import": "./dist/esm/index.js", + "require": "./dist/cjs/index.js", + "solid": "./dist/source/index.js", + "types": "./src/index.ts" + } + }, + "files": [ + "README.md", + "src", + "dist" + ], + "scripts": { + "test": "vitest run", + "test:watch": "vitest watch", + "clean": "rimraf coverage dist es lib build", + "dev": "storybook dev", + "build:storybook": "storybook build", + "build:rollup": "rollup -c", + "type-check": "tsc -p tsconfig.test.json", + "build": "npm-run-all clean --parallel type-check build:rollup" + }, + "engines": { + "node": ">=12.0.0" + }, + "dependencies": { + "@floating-ui/core": "^1.6.0", + "solid-element": "^1.8.0", + "solid-js": "^1.8.17" + }, + "devDependencies": { + "@chromatic-com/storybook": "1.5.0", + "@kobalte/core": "0.13.2", + "@storybook/addon-essentials": "8.1.5", + "@storybook/addon-interactions": "8.1.5", + "@storybook/addon-links": "8.1.5", + "@storybook/addon-storysource": "8.1.5", + "@storybook/addon-themes": "8.1.5", + "@storybook/blocks": "8.1.5", + "@storybook/test": "8.1.5", + "@types/node": "20.12.10", + "@zthxxx/tsconfig": "1.0.4", + "autoprefixer": "10.4.14", + "babel-preset-solid": "1.8.17", + "class-variance-authority": "0.6.1", + "clsx": "1.2.1", + "csstype": "3.1.3", + "npm-run-all": "4.1.5", + "postcss": "8.4.26", + "rimraf": "3.0.2", + "rollup": "4.17.2", + "rollup-preset-solid": "2.0.1", + "rxjs": "7.8.1", + "storybook": "8.1.5", + "storybook-solidjs": "1.0.0-beta.2", + "storybook-solidjs-vite": "1.0.0-beta.2", + "tailwindcss": "3.3.3", + "ts-node": "10.9.1", + "typescript": "5.2.2", + "vite": "4.4.2", + "vite-plugin-solid": "2.10.2", + "vitest": "1.1.1" + } +} diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js new file mode 100644 index 00000000..345f7aee --- /dev/null +++ b/packages/components/postcss.config.js @@ -0,0 +1,12 @@ +// If you want to use other PostCSS plugins, see the following: +// https://tailwindcss.com/docs/using-with-preprocessors + +/** @type {import('postcss-load-config').Config} */ +module.exports = { + plugins: { + 'postcss-import': {}, + 'tailwindcss/nesting': {}, + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs new file mode 100644 index 00000000..aa1ccb80 --- /dev/null +++ b/packages/components/rollup.config.mjs @@ -0,0 +1,7 @@ +import withSolid from 'rollup-preset-solid' + +// https://github.com/solidjs-community/rollup-preset-solid +export default withSolid({ + input: 'src/index.ts', + targets: ['esm', 'cjs'], +}) diff --git a/packages/components/src/.stories/Card.tsx b/packages/components/src/.stories/Card.tsx new file mode 100644 index 00000000..aaf42166 --- /dev/null +++ b/packages/components/src/.stories/Card.tsx @@ -0,0 +1,58 @@ +import type { JSX } from 'solid-js' +import { + Button, + Card as CardContainer, + CardHeader, + CardTitle, + CardDescription, + CardContent, + CardFooter, +} from './components' + + +export const Card = ({ + title = 'Title', + description = 'Description', + cancelText = 'Cancel', + onCancel, + confirmText = 'OK', + onConfirm, + children, +}: { + title?: JSX.Element; + description?: JSX.Element; + cancelText?: JSX.Element; + onCancel?: () => void; + confirmText?: JSX.Element; + onConfirm?: () => void; + children?: JSX.Element; +}) => ( + + + + {title} + + + {description} + + + + + {children} + + + + + + + +) diff --git a/packages/components/src/.stories/components/Button.tsx b/packages/components/src/.stories/components/Button.tsx new file mode 100644 index 00000000..1ca52048 --- /dev/null +++ b/packages/components/src/.stories/components/Button.tsx @@ -0,0 +1,50 @@ +import { JSX, splitProps, ValidComponent } from "solid-js" + +import * as ButtonPrimitive from "@kobalte/core/button" +import { PolymorphicProps } from "@kobalte/core/polymorphic" +import type { VariantProps } from "class-variance-authority" +import { cva } from "class-variance-authority" + +import { clsx } from 'clsx' + +const buttonVariants = cva( + "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: "border border-input hover:bg-accent hover:text-accent-foreground", + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline" + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "size-10" + } + }, + defaultVariants: { + variant: "default", + size: "default" + } + } +) + +type ButtonProps = ButtonPrimitive.ButtonRootProps & + VariantProps & { class?: string | undefined; children?: JSX.Element } + +const Button = (props: PolymorphicProps>) => { + const [local, others] = splitProps(props as ButtonProps, ["variant", "size", "class"]) + return ( + + ) +} + +export type { ButtonProps } +export { Button, buttonVariants } diff --git a/packages/components/src/.stories/components/Card.tsx b/packages/components/src/.stories/components/Card.tsx new file mode 100644 index 00000000..f1db4b52 --- /dev/null +++ b/packages/components/src/.stories/components/Card.tsx @@ -0,0 +1,63 @@ +import type { JSX, Component, ComponentProps } from "solid-js" +import { splitProps } from "solid-js" + +import { clsx } from 'clsx' + +const Card: Component> = (props) => { + const [local, others] = splitProps(props, ["class"]) + return ( +
+ ) +} + +const CardHeader: Component & { + title?: JSX.Element; + description?: JSX.Element; +}> = (props) => { + const [local, others] = splitProps(props, ["class", "children", "title", "description"]) + return ( +
+ {local.title && ( + + {local.title} + + )} + {local.description && ( + + {local.description} + + )} + {local.children} +
+ ) +} + +const CardTitle: Component> = (props) => { + const [local, others] = splitProps(props, ["class"]) + return ( +

+ ) +} + +const CardDescription: Component> = (props) => { + const [local, others] = splitProps(props, ["class"]) + return

+} + +const CardContent: Component> = (props) => { + const [local, others] = splitProps(props, ["class"]) + return

+} + +const CardFooter: Component> = (props) => { + const [local, others] = splitProps(props, ["class"]) + return
+} + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/packages/components/src/.stories/components/Label.tsx b/packages/components/src/.stories/components/Label.tsx new file mode 100644 index 00000000..667ed928 --- /dev/null +++ b/packages/components/src/.stories/components/Label.tsx @@ -0,0 +1,19 @@ +import type { Component, ComponentProps } from "solid-js" +import { splitProps } from "solid-js" + +import { clsx } from 'clsx' + +const Label: Component> = (props) => { + const [local, others] = splitProps(props, ["class"]) + return ( +