@simple-code-inspector/core 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +396 -0
- package/dist/client.iife.js +1 -0
- package/dist/client.umd.js +1 -0
- package/dist/index.js +15 -0
- package/dist/index.mjs +197972 -0
- package/package.json +73 -0
- package/types/client/index.d.ts +173 -0
- package/types/index.d.ts +3 -0
- package/types/server/clipboard.d.ts +5 -0
- package/types/server/index.d.ts +3 -0
- package/types/server/server.d.ts +8 -0
- package/types/server/transform/index.d.ts +12 -0
- package/types/server/transform/scan-html-tag.d.ts +5 -0
- package/types/server/transform/transform-astro.d.ts +2 -0
- package/types/server/transform/transform-jsx.d.ts +35 -0
- package/types/server/transform/transform-mdx.d.ts +2 -0
- package/types/server/transform/transform-svelte.d.ts +2 -0
- package/types/server/transform/transform-vue-pug.d.ts +44 -0
- package/types/server/transform/transform-vue.d.ts +5 -0
- package/types/server/use-client.d.ts +16 -0
- package/types/shared/constant.d.ts +8 -0
- package/types/shared/index.d.ts +4 -0
- package/types/shared/record-cache.d.ts +5 -0
- package/types/shared/type.d.ts +165 -0
- package/types/shared/utils.d.ts +157 -0
package/package.json
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@simple-code-inspector/core",
|
|
3
|
+
"version": "1.6.1",
|
|
4
|
+
"main": "dist/index.js",
|
|
5
|
+
"module": "./dist/index.mjs",
|
|
6
|
+
"types": "types/index.d.ts",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist",
|
|
9
|
+
"types"
|
|
10
|
+
],
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"import": {
|
|
14
|
+
"types": "./types/index.d.ts",
|
|
15
|
+
"default": "./dist/index.mjs"
|
|
16
|
+
},
|
|
17
|
+
"require": {
|
|
18
|
+
"types": "./types/index.d.ts",
|
|
19
|
+
"default": "./dist/index.js"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"repository": "git@github.com:lakphy/simple-code-inspector.git",
|
|
24
|
+
"author": "lakphy",
|
|
25
|
+
"license": "MIT",
|
|
26
|
+
"homepage": "https://inspector.fe-dev.cn/en",
|
|
27
|
+
"description": "Click the dom on the page, it will copy the source code location of the dom to your clipboard.",
|
|
28
|
+
"keywords": [
|
|
29
|
+
"webpack",
|
|
30
|
+
"vite",
|
|
31
|
+
"plugin",
|
|
32
|
+
"vue",
|
|
33
|
+
"clipboard",
|
|
34
|
+
"inspector",
|
|
35
|
+
"inspect"
|
|
36
|
+
],
|
|
37
|
+
"bugs": {
|
|
38
|
+
"url": "https://github.com/lakphy/simple-code-inspector/issues"
|
|
39
|
+
},
|
|
40
|
+
"scripts": {
|
|
41
|
+
"dev": "vite",
|
|
42
|
+
"build:server": "vite build",
|
|
43
|
+
"build:client": " vite build --config ./vite.client.config.ts",
|
|
44
|
+
"build:client:watch": " vite build --config ./vite.client.config.ts --watch",
|
|
45
|
+
"clear": "rimraf ./dist && rimraf ./types",
|
|
46
|
+
"build": "pnpm clear && tsc && pnpm build:server && pnpm build:client",
|
|
47
|
+
"pub": "pnpm publish",
|
|
48
|
+
"pub:beta": "pnpm publish --tag beta"
|
|
49
|
+
},
|
|
50
|
+
"dependencies": {
|
|
51
|
+
"@vue/compiler-dom": "^3.5.13",
|
|
52
|
+
"chalk": "^4.1.1",
|
|
53
|
+
"dotenv": "^16.1.4",
|
|
54
|
+
"portfinder": "^1.0.28"
|
|
55
|
+
},
|
|
56
|
+
"devDependencies": {
|
|
57
|
+
"@babel/core": "^7.21.3",
|
|
58
|
+
"@babel/plugin-proposal-decorators": "^7.22.7",
|
|
59
|
+
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
|
60
|
+
"@babel/plugin-transform-typescript": "^7.21.3",
|
|
61
|
+
"@types/node": "^18.14.1",
|
|
62
|
+
"@vue/babel-plugin-jsx": "^1.1.1",
|
|
63
|
+
"@vue/compiler-sfc": "^3.3.4",
|
|
64
|
+
"lit": "^2.6.1",
|
|
65
|
+
"magic-string": "^0.30.0",
|
|
66
|
+
"rollup-plugin-terser": "^7.0.2",
|
|
67
|
+
"svelte": "^4.2.7",
|
|
68
|
+
"typescript": "^4.9.3",
|
|
69
|
+
"vite": "^4.3.9",
|
|
70
|
+
"vite-plugin-node-stdlib-browser": "^0.2.1",
|
|
71
|
+
"volar-service-pug": "^0.0.63"
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import { LitElement, TemplateResult } from 'lit';
|
|
2
|
+
interface Position {
|
|
3
|
+
left?: string;
|
|
4
|
+
right?: string;
|
|
5
|
+
top?: string;
|
|
6
|
+
bottom?: string;
|
|
7
|
+
transform?: string;
|
|
8
|
+
maxHeight?: string;
|
|
9
|
+
}
|
|
10
|
+
interface SourceInfo {
|
|
11
|
+
name: string;
|
|
12
|
+
path: string;
|
|
13
|
+
line: number;
|
|
14
|
+
column: number;
|
|
15
|
+
}
|
|
16
|
+
interface ElementTipStyle {
|
|
17
|
+
vertical: string;
|
|
18
|
+
horizon: string;
|
|
19
|
+
visibility: string;
|
|
20
|
+
additionStyle?: {
|
|
21
|
+
transform: string;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
interface TreeNode extends SourceInfo {
|
|
25
|
+
children: TreeNode[];
|
|
26
|
+
element: HTMLElement;
|
|
27
|
+
depth: number;
|
|
28
|
+
}
|
|
29
|
+
interface ActiveNode {
|
|
30
|
+
top?: string;
|
|
31
|
+
bottom?: string;
|
|
32
|
+
left?: string;
|
|
33
|
+
width?: string;
|
|
34
|
+
content?: string;
|
|
35
|
+
visibility?: 'visible' | 'hidden';
|
|
36
|
+
class?: 'tooltip-top' | 'tooltip-bottom';
|
|
37
|
+
}
|
|
38
|
+
export declare class CodeInspectorComponent extends LitElement {
|
|
39
|
+
hotKeys: string;
|
|
40
|
+
port: number;
|
|
41
|
+
showSwitch: boolean;
|
|
42
|
+
autoToggle: boolean;
|
|
43
|
+
hideConsole: boolean;
|
|
44
|
+
targetNode: HTMLElement | null;
|
|
45
|
+
ip: string;
|
|
46
|
+
serverEnabled: boolean;
|
|
47
|
+
private wheelThrottling;
|
|
48
|
+
position: {
|
|
49
|
+
top: number;
|
|
50
|
+
right: number;
|
|
51
|
+
bottom: number;
|
|
52
|
+
left: number;
|
|
53
|
+
padding: {
|
|
54
|
+
top: number;
|
|
55
|
+
right: number;
|
|
56
|
+
bottom: number;
|
|
57
|
+
left: number;
|
|
58
|
+
};
|
|
59
|
+
border: {
|
|
60
|
+
top: number;
|
|
61
|
+
right: number;
|
|
62
|
+
bottom: number;
|
|
63
|
+
left: number;
|
|
64
|
+
};
|
|
65
|
+
margin: {
|
|
66
|
+
top: number;
|
|
67
|
+
right: number;
|
|
68
|
+
bottom: number;
|
|
69
|
+
left: number;
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
element: {
|
|
73
|
+
name: string;
|
|
74
|
+
line: number;
|
|
75
|
+
column: number;
|
|
76
|
+
path: string;
|
|
77
|
+
};
|
|
78
|
+
elementTipStyle: ElementTipStyle;
|
|
79
|
+
show: boolean;
|
|
80
|
+
showNodeTree: boolean;
|
|
81
|
+
nodeTreePosition: Position;
|
|
82
|
+
nodeTree: TreeNode | null;
|
|
83
|
+
dragging: boolean;
|
|
84
|
+
mousePosition: {
|
|
85
|
+
baseX: number;
|
|
86
|
+
baseY: number;
|
|
87
|
+
moveX: number;
|
|
88
|
+
moveY: number;
|
|
89
|
+
};
|
|
90
|
+
draggingTarget: 'switch' | 'nodeTree';
|
|
91
|
+
open: boolean;
|
|
92
|
+
moved: boolean;
|
|
93
|
+
hoverSwitch: boolean;
|
|
94
|
+
preUserSelect: string;
|
|
95
|
+
sendType: 'xhr' | 'img';
|
|
96
|
+
activeNode: ActiveNode;
|
|
97
|
+
inspectorSwitchRef: HTMLDivElement;
|
|
98
|
+
codeInspectorContainerRef: HTMLDivElement;
|
|
99
|
+
elementInfoRef: HTMLDivElement;
|
|
100
|
+
nodeTreeRef: HTMLDivElement;
|
|
101
|
+
nodeTreeTitleRef: HTMLDivElement;
|
|
102
|
+
nodeTreeTooltipRef: HTMLDivElement;
|
|
103
|
+
private eventListeners;
|
|
104
|
+
isTracking: (e: any) => boolean | "";
|
|
105
|
+
getDomPropertyValue: (target: HTMLElement, property: string) => number;
|
|
106
|
+
calculateElementInfoPosition: (target: HTMLElement) => Promise<{
|
|
107
|
+
vertical: string;
|
|
108
|
+
horizon: string;
|
|
109
|
+
top: number;
|
|
110
|
+
left: number;
|
|
111
|
+
isExternal: boolean;
|
|
112
|
+
additionStyle?: undefined;
|
|
113
|
+
} | {
|
|
114
|
+
vertical: string;
|
|
115
|
+
horizon: string;
|
|
116
|
+
top: number;
|
|
117
|
+
left: number;
|
|
118
|
+
isExternal: boolean;
|
|
119
|
+
additionStyle: {
|
|
120
|
+
transform: string;
|
|
121
|
+
};
|
|
122
|
+
}>;
|
|
123
|
+
renderCover: (target: HTMLElement) => Promise<void>;
|
|
124
|
+
getSourceInfo: (target: HTMLElement) => SourceInfo | null;
|
|
125
|
+
removeCover: (force?: boolean | MouseEvent) => void;
|
|
126
|
+
renderLayerPanel: (nodeTree: TreeNode, { x, y }: {
|
|
127
|
+
x: number;
|
|
128
|
+
y: number;
|
|
129
|
+
}) => void;
|
|
130
|
+
removeLayerPanel: () => void;
|
|
131
|
+
addGlobalCursorStyle: () => void;
|
|
132
|
+
removeGlobalCursorStyle: () => void;
|
|
133
|
+
buildRequestUrl: () => string;
|
|
134
|
+
sendXHR: () => void;
|
|
135
|
+
sendImg: () => void;
|
|
136
|
+
trackCode: () => void;
|
|
137
|
+
showNotification(message: string, type?: 'success' | 'error'): void;
|
|
138
|
+
handleDrag: (e: MouseEvent | TouchEvent) => void;
|
|
139
|
+
getValidNodeList: (nodePath: HTMLElement[]) => HTMLElement[];
|
|
140
|
+
isSamePositionNode: (node1: HTMLElement, node2: HTMLElement) => boolean;
|
|
141
|
+
handleMouseMove: (e: MouseEvent | TouchEvent) => Promise<void>;
|
|
142
|
+
handleWheel: (e: WheelEvent) => void;
|
|
143
|
+
handleMouseClick: (e: MouseEvent | TouchEvent) => void;
|
|
144
|
+
handleContextMenu: (e: MouseEvent) => void;
|
|
145
|
+
generateNodeTree: (nodePath: HTMLElement[]) => TreeNode;
|
|
146
|
+
handlePointerDown: (e: PointerEvent) => void;
|
|
147
|
+
handleKeyUp: (e: KeyboardEvent) => void;
|
|
148
|
+
printTip: () => void;
|
|
149
|
+
getMousePosition: (e: MouseEvent | TouchEvent) => {
|
|
150
|
+
x: number;
|
|
151
|
+
y: number;
|
|
152
|
+
};
|
|
153
|
+
recordMousePosition: (e: MouseEvent | TouchEvent, target: 'switch' | 'nodeTree') => void;
|
|
154
|
+
handleMouseUp: (e: MouseEvent | TouchEvent) => void;
|
|
155
|
+
switch: (e: Event) => void;
|
|
156
|
+
handleClickTreeNode: (node: TreeNode) => void;
|
|
157
|
+
handleMouseEnterNode: (e: MouseEvent, node: TreeNode) => Promise<void>;
|
|
158
|
+
handleMouseLeaveNode: () => void;
|
|
159
|
+
/**
|
|
160
|
+
* Attach all event listeners
|
|
161
|
+
*/
|
|
162
|
+
private attachEventListeners;
|
|
163
|
+
/**
|
|
164
|
+
* Detach all event listeners
|
|
165
|
+
*/
|
|
166
|
+
private detachEventListeners;
|
|
167
|
+
protected firstUpdated(): void;
|
|
168
|
+
disconnectedCallback(): void;
|
|
169
|
+
renderNodeTree: (node: TreeNode) => TemplateResult;
|
|
170
|
+
render(): TemplateResult<1>;
|
|
171
|
+
static styles: import("lit").CSSResult;
|
|
172
|
+
}
|
|
173
|
+
export {};
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
2
|
+
import http from 'http';
|
|
3
|
+
import type { PathType, CodeOptions, RecordInfo } from '../shared';
|
|
4
|
+
export declare const ProjectRootPath: string;
|
|
5
|
+
export declare function getRelativePath(filePath: string): string;
|
|
6
|
+
export declare function getRelativeOrAbsolutePath(filePath: string, pathType?: PathType): string;
|
|
7
|
+
export declare function createServer(callback: (port: number) => any, options?: CodeOptions, _record?: RecordInfo): http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
|
|
8
|
+
export declare function startServer(options: CodeOptions, record: RecordInfo): Promise<void>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { EscapeTags, PathType } from '../../shared';
|
|
2
|
+
type FileType = 'vue' | 'jsx' | 'svelte' | 'astro' | 'mdx' | unknown;
|
|
3
|
+
type TransformCodeParams = {
|
|
4
|
+
content: string;
|
|
5
|
+
filePath: string;
|
|
6
|
+
fileType: FileType;
|
|
7
|
+
escapeTags: EscapeTags;
|
|
8
|
+
pathType: PathType;
|
|
9
|
+
mdx?: boolean;
|
|
10
|
+
};
|
|
11
|
+
export declare function transformCode(params: TransformCodeParams): Promise<string>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare function isScannableDomTag(name: string): boolean;
|
|
2
|
+
export declare function shouldSkipScannedTagChildren(name: string): boolean;
|
|
3
|
+
export declare function isNonInjectableScannedTag(name: string): boolean;
|
|
4
|
+
export declare function isLikelyTypeScriptGeneric(content: string, tagStart: number): boolean;
|
|
5
|
+
export declare function isWellFormedScannedTag(content: string, insertPosition: number, name: string): boolean;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import MagicString from 'magic-string';
|
|
2
|
+
import { EscapeTags } from '../../shared';
|
|
3
|
+
type RootTarget = {
|
|
4
|
+
type: 'jsx';
|
|
5
|
+
node: any;
|
|
6
|
+
} | {
|
|
7
|
+
type: 'createElement';
|
|
8
|
+
node: any;
|
|
9
|
+
};
|
|
10
|
+
export declare function transformJsx(content: string, filePath: string, escapeTags: EscapeTags): string;
|
|
11
|
+
declare function hasExportDefaultAncestor(path: any): boolean;
|
|
12
|
+
declare function getPropagatedPathExpression(path: any, s: MagicString, content: string): string;
|
|
13
|
+
declare function getObjectPatternPathBinding(param: any): string;
|
|
14
|
+
declare function getObjectPropertyName(node: any): string;
|
|
15
|
+
declare function getEmptyParamsInsertPosition(node: any, content: string): any;
|
|
16
|
+
declare function collectRootTargets(node: any, scope: any, visitedBindings?: Set<string>): RootTarget[];
|
|
17
|
+
declare function shouldPropagatePathToExpression(node: any, scope: any, visitedBindings?: Set<string>): boolean;
|
|
18
|
+
declare function estimateRootCount(node: any, scope: any, visitedBindings: Set<string>): number;
|
|
19
|
+
export declare function injectCreateElementPath(node: any, s: MagicString, content: string, pathExpression: string): void;
|
|
20
|
+
export declare function getJsxNodeName(node: any): string;
|
|
21
|
+
export declare function getCallExpressionName(node: any): string;
|
|
22
|
+
export declare function getExpressionName(node: any): string;
|
|
23
|
+
declare function isEscapedJsxTag(escapeTags: EscapeTags, nodeName: string): boolean;
|
|
24
|
+
export declare const __TEST__: {
|
|
25
|
+
hasExportDefaultAncestor: typeof hasExportDefaultAncestor;
|
|
26
|
+
getPropagatedPathExpression: typeof getPropagatedPathExpression;
|
|
27
|
+
getObjectPatternPathBinding: typeof getObjectPatternPathBinding;
|
|
28
|
+
getObjectPropertyName: typeof getObjectPropertyName;
|
|
29
|
+
getEmptyParamsInsertPosition: typeof getEmptyParamsInsertPosition;
|
|
30
|
+
shouldPropagatePathToExpression: typeof shouldPropagatePathToExpression;
|
|
31
|
+
estimateRootCount: typeof estimateRootCount;
|
|
32
|
+
collectRootTargets: typeof collectRootTargets;
|
|
33
|
+
isEscapedJsxTag: typeof isEscapedJsxTag;
|
|
34
|
+
};
|
|
35
|
+
export {};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import MagicString from 'magic-string';
|
|
2
|
+
import { EscapeTags } from '../../shared';
|
|
3
|
+
import type { ElementNode } from '@vue/compiler-dom';
|
|
4
|
+
import * as pug from 'volar-service-pug/lib/languageService';
|
|
5
|
+
interface AstLocation {
|
|
6
|
+
column: number;
|
|
7
|
+
line: number;
|
|
8
|
+
}
|
|
9
|
+
export interface PugFileInfo {
|
|
10
|
+
content: string;
|
|
11
|
+
offsets: number[];
|
|
12
|
+
}
|
|
13
|
+
export declare const pugMap: Map<string, PugFileInfo>;
|
|
14
|
+
export declare function belongTemplate(target: AstLocation, start: AstLocation, end: AstLocation): boolean;
|
|
15
|
+
interface TransformPugParams {
|
|
16
|
+
node: pug.Node | null | undefined;
|
|
17
|
+
templateNode: ElementNode;
|
|
18
|
+
s: MagicString;
|
|
19
|
+
escapeTags: EscapeTags;
|
|
20
|
+
filePath: string;
|
|
21
|
+
}
|
|
22
|
+
export declare function transformPugAst(params: TransformPugParams): void;
|
|
23
|
+
/**
|
|
24
|
+
* Check if a template node uses Pug syntax
|
|
25
|
+
* @param templateNode - The template element node to check
|
|
26
|
+
* @returns true if the template uses Pug, false otherwise
|
|
27
|
+
*/
|
|
28
|
+
export declare function isPugTemplate(templateNode: ElementNode | undefined): boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Calculate line offsets for content
|
|
31
|
+
* @param content - The file content
|
|
32
|
+
* @returns Array of line offsets
|
|
33
|
+
*/
|
|
34
|
+
export declare function calculateLineOffsets(content: string): number[];
|
|
35
|
+
/**
|
|
36
|
+
* Transform Pug template in Vue SFC
|
|
37
|
+
* @param content - The file content
|
|
38
|
+
* @param filePath - The file path
|
|
39
|
+
* @param templateNode - The template element node
|
|
40
|
+
* @param escapeTags - Tags to escape from transformation
|
|
41
|
+
* @param s - MagicString instance for code transformation
|
|
42
|
+
*/
|
|
43
|
+
export declare function transformPugTemplate(content: string, filePath: string, templateNode: ElementNode, escapeTags: EscapeTags, s: MagicString): void;
|
|
44
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { EscapeTags } from '../../shared';
|
|
2
|
+
type VueCompilerDom = Pick<typeof import('@vue/compiler-dom'), 'parse' | 'transform'>;
|
|
3
|
+
export declare function resolveVueCompilerDom(mod: any): VueCompilerDom;
|
|
4
|
+
export declare function transformVue(content: string, filePath: string, escapeTags: EscapeTags): Promise<string>;
|
|
5
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { CodeOptions, RecordInfo } from '../shared';
|
|
2
|
+
export declare const clientJsPath: string;
|
|
3
|
+
export declare function getInjectedCode(options: CodeOptions, port: number, isNextjs: boolean): string;
|
|
4
|
+
export declare function getWebComponentCode(options: CodeOptions, port: number): string;
|
|
5
|
+
export declare function getEliminateWarningCode(): string;
|
|
6
|
+
export declare function getHidePathAttrCode(): string;
|
|
7
|
+
export declare function getCodeWithWebComponent({ options, record, file, code, inject, server, }: {
|
|
8
|
+
options: CodeOptions;
|
|
9
|
+
record: RecordInfo;
|
|
10
|
+
file: string;
|
|
11
|
+
code: string;
|
|
12
|
+
inject?: boolean;
|
|
13
|
+
server?: boolean;
|
|
14
|
+
}): Promise<string>;
|
|
15
|
+
export declare function isNextjsProject(basedir?: string): boolean;
|
|
16
|
+
export declare function isNextGET16(basedir?: string): boolean;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const LineName = "data-insp-row";
|
|
2
|
+
export declare const ColumnName = "data-insp-col";
|
|
3
|
+
export declare const PathName = "data-insp-path";
|
|
4
|
+
export declare const NodeName = "data-insp-node";
|
|
5
|
+
export declare const DefaultPort = 5678;
|
|
6
|
+
export declare const DefaultCopyFormat = "{file}:{line}:{column} <{tag}>";
|
|
7
|
+
export declare const JsFileExtList: string[];
|
|
8
|
+
export declare const AstroToolbarFile = "\0astro:dev-toolbar";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { RecordInfo } from './type';
|
|
2
|
+
export declare const resetFileRecord: (output: string) => void;
|
|
3
|
+
export declare const getProjectRecord: (record: RecordInfo) => Partial<RecordInfo>;
|
|
4
|
+
export declare const setProjectRecord: (record: RecordInfo, key: keyof RecordInfo, value: RecordInfo[keyof RecordInfo]) => void;
|
|
5
|
+
export declare const findPort: (record: RecordInfo) => Promise<number>;
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
2
|
+
import { Server } from 'http';
|
|
3
|
+
export type HotKey = 'ctrlKey' | 'altKey' | 'metaKey' | 'shiftKey';
|
|
4
|
+
export type RecordInfo = {
|
|
5
|
+
port: number;
|
|
6
|
+
entry: string;
|
|
7
|
+
output: string;
|
|
8
|
+
findPort?: Promise<number>;
|
|
9
|
+
inputs?: Promise<string[]>;
|
|
10
|
+
injectTo?: string[];
|
|
11
|
+
root?: string;
|
|
12
|
+
server?: Server;
|
|
13
|
+
previousPort?: number;
|
|
14
|
+
};
|
|
15
|
+
export type ImportClientWay = 'file' | 'code';
|
|
16
|
+
export type PathType = 'relative' | 'absolute';
|
|
17
|
+
type SourceInfo = {
|
|
18
|
+
file: string;
|
|
19
|
+
line: number;
|
|
20
|
+
column: number;
|
|
21
|
+
};
|
|
22
|
+
export type EscapeTags = (string | RegExp)[];
|
|
23
|
+
export type Hooks = {
|
|
24
|
+
/**
|
|
25
|
+
* @zh server 端接收到 DOM 源代码定位请求后的钩子函数
|
|
26
|
+
* @en The hook triggered when the server receives a request to locate the DOM source code.
|
|
27
|
+
*/
|
|
28
|
+
afterInspectRequest?: (options: CodeOptions, source: SourceInfo) => void;
|
|
29
|
+
};
|
|
30
|
+
export type Condition = string | RegExp | (string | RegExp)[];
|
|
31
|
+
export type CodeOptions = {
|
|
32
|
+
/**
|
|
33
|
+
* @zh 指定项目的打包器
|
|
34
|
+
* @en specify the bundler of the project
|
|
35
|
+
*/
|
|
36
|
+
bundler: 'vite' | 'webpack' | 'rspack' | 'esbuild' | 'turbopack' | 'mako';
|
|
37
|
+
/**
|
|
38
|
+
* @cn 触发 DOM 定位功能的组合键,ctrlKey/altKey/metaKey/shiftKey 中一个或多个组成的数组,默认值为 ['altKey', 'shiftKey]。即 Mac 系统默认是 Option + Shift;Window 默认是 Alt + Shift。
|
|
39
|
+
* @en The combination keys that triggers the DOM positioning function, it is an array of one or more from ctrlKey/altKey/metaKey/shiftKey, with default values of ['altKey', 'shiftKey']. The default for Mac systems is Option+Shift; and for Window is Alt+Shift.
|
|
40
|
+
*/
|
|
41
|
+
hotKeys?: HotKey[] | false;
|
|
42
|
+
/**
|
|
43
|
+
* @cn 是否在页面展示功能开关按钮
|
|
44
|
+
* @en Whether show the switch button of this function on the page
|
|
45
|
+
*/
|
|
46
|
+
showSwitch?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* @cn 是否隐藏在控制台的按键提示
|
|
49
|
+
* @en Whether hide the tips of combination keys on console.
|
|
50
|
+
*/
|
|
51
|
+
hideConsole?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* @cn 打开功能开关的情况下,点击复制源码位置后是否自动关闭开关
|
|
54
|
+
* @en When opening the function switch, whether automatically close the switch after clicking to copy the source code location.
|
|
55
|
+
*/
|
|
56
|
+
autoToggle?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* @cn 用于注入DOM 筛选和点击复制源码位置的相关代码的文件。必须为绝对路径且以 `.js/.ts/.mjs/.mts/.jsx/.tsx` 为结尾的文件
|
|
59
|
+
* @en The file to inject the relevant code for DOM filtering and click-to-copy source code location. Must be an absolute path and end with `.js/.ts/.mjs/.mts/.jsx/.tsx`.
|
|
60
|
+
*/
|
|
61
|
+
injectTo?: string | string[];
|
|
62
|
+
/**
|
|
63
|
+
* @cn 是否在转换时添加 `enforce: 'pre'`,默认值为 `true`。(若因该插件引起了 `eslint-plugin` 校验错误,需要此项设置为 `false`)
|
|
64
|
+
* @en Whether to add `enforce: 'pre'` during the transformation, default value is `true`. (If this plugin causes `eslint-plugin` validation errors, set this option to `false`)
|
|
65
|
+
*/
|
|
66
|
+
enforcePre?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* @cn 自定义 development 环境的判断
|
|
69
|
+
* @en Custom determination of the development environment.
|
|
70
|
+
*/
|
|
71
|
+
dev?: boolean | (() => boolean);
|
|
72
|
+
/**
|
|
73
|
+
* @cn 对于 webpack/rspack 是否应用缓存策略,默认值为 `false`。(使用 cache 可能会导致)
|
|
74
|
+
* @en Whether to apply the caching strategy for webpack/rspack, the default value is `false`
|
|
75
|
+
*/
|
|
76
|
+
cache?: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* @cn 仅对符合 match 正则表达式的文件会进行源码定位编译(精确匹配文件类型以减少无用文件参与编译,提升性能),默认为 /\.(vue|jsx|tsx|js|ts|mjs|mts)$/
|
|
79
|
+
* @en Only files that match the regular expression specified by `match` will undergo source code location compilation (precise matching of file types to reduce unnecessary files participating in compilation, improving performance); the default is /\.(vue|jsx|tsx|js|ts|mjs|mts)$/
|
|
80
|
+
*/
|
|
81
|
+
match?: RegExp;
|
|
82
|
+
/**
|
|
83
|
+
* @cn 点击 DOM 时复制到剪贴板的文本格式,默认 "{file}:{line}:{column} <{tag}>",其中 {xx} 为模版字符(支持 {file} / {line} / {column} / {tag})
|
|
84
|
+
* @en The text format copied to clipboard when clicking the DOM. Default value is "{file}:{line}:{column} <{tag}>", where {xx} represents template characters (supports {file} / {line} / {column} / {tag}).
|
|
85
|
+
*/
|
|
86
|
+
copyFormat?: string;
|
|
87
|
+
/**
|
|
88
|
+
* @zh 钩子函数
|
|
89
|
+
* @en hooks
|
|
90
|
+
*/
|
|
91
|
+
hooks?: Hooks;
|
|
92
|
+
/**
|
|
93
|
+
* @zh 不注入 `data-insp-path` 的标签
|
|
94
|
+
* @en tags without injecting data-insp-path
|
|
95
|
+
*/
|
|
96
|
+
escapeTags?: EscapeTags;
|
|
97
|
+
/**
|
|
98
|
+
* @zh 是否转换 MDX 文件以注入 `data-insp-path`,默认值为 `false`
|
|
99
|
+
* @en Whether to transform MDX files to inject `data-insp-path`, defaults to `false`
|
|
100
|
+
*/
|
|
101
|
+
mdx?: boolean;
|
|
102
|
+
/**
|
|
103
|
+
* @zh 是否隐藏控制台中 dom 的 `data-insp-path` 属性
|
|
104
|
+
* @en Whether to hide the `data-insp-path` attribute of DOM in the console
|
|
105
|
+
*/
|
|
106
|
+
hideDomPathAttr?: boolean;
|
|
107
|
+
/**
|
|
108
|
+
* @zh 点击 DOM 向 node server 发送请求时,是否使用 ip 代替 localhost。默认为 `false`
|
|
109
|
+
* @en When sending request node server by clicking on the DOM, whether to use IP instead of localhost. Default value is `false`
|
|
110
|
+
*/
|
|
111
|
+
ip?: boolean | string;
|
|
112
|
+
/**
|
|
113
|
+
* @zh 引入客户端交互代码的方式: file 为通过文件引入交互代码; code 为直接将交互代码注入页面。`0.16.x` 及之后的版本值默认为 `code`, `0.15.x` 之前的版本默认值为 `file`.
|
|
114
|
+
* @en How to import client interaction code: `file` means import interaction code through a file; `code` means directly injecting the interaction code into the page. The default value for versions `0.16.x` and later is `code`, while for versions before `0.15.x`, the default value is `file`.
|
|
115
|
+
*/
|
|
116
|
+
importClient?: ImportClientWay;
|
|
117
|
+
/**
|
|
118
|
+
* @zh 额外要参与编译的文件(用于让 node_modules 中的部分文件参与编译以注入 path 信息)
|
|
119
|
+
* @en Additional files to be compiled (used to make some files in `node_modules` participate in compilation to inject path information)
|
|
120
|
+
*/
|
|
121
|
+
include?: Condition;
|
|
122
|
+
/**
|
|
123
|
+
* @zh 不参与编译的文件
|
|
124
|
+
* @en Files not to be compiled
|
|
125
|
+
*/
|
|
126
|
+
exclude?: Condition;
|
|
127
|
+
/**
|
|
128
|
+
* @zh 用于映射文件路径,多用于将 node_modules 中的文件路径映射为项目中的文件路径
|
|
129
|
+
* @en Used to map file paths, often used to map the file path in `node_modules` to the file path in the project
|
|
130
|
+
*/
|
|
131
|
+
mappings?: Record<string, string> | Array<{
|
|
132
|
+
find: string | RegExp;
|
|
133
|
+
replacement: string;
|
|
134
|
+
}>;
|
|
135
|
+
/**
|
|
136
|
+
* @zh 支持从指定端口开始寻找可用端口(默认从 5678 开始)
|
|
137
|
+
* @en Supports finding available ports starting from a specified port (default starts from 5678).
|
|
138
|
+
*/
|
|
139
|
+
port?: number;
|
|
140
|
+
/**
|
|
141
|
+
* @zh 是否在控制台中打印 server 的启动信息
|
|
142
|
+
* @en Whether to print the server startup information in the console
|
|
143
|
+
*/
|
|
144
|
+
printServer?: boolean;
|
|
145
|
+
/**
|
|
146
|
+
* @zh 注入在 DOM 上的路径类型,默认值为 `relative`,即相对于项目根目录的路径
|
|
147
|
+
* @en The type of path injected into the DOM. The default value is `relative`, which means relative to the project root directory
|
|
148
|
+
*/
|
|
149
|
+
pathType?: PathType;
|
|
150
|
+
/**
|
|
151
|
+
* @zh 要跳过注入的代码片段:
|
|
152
|
+
* - console: 跳过注入 console.error 和 console.warn 的代码片段,nextjs 和 nuxt 项目不建议跳过此项
|
|
153
|
+
* - htmlScript: 跳过在 html 中注入 script 标签的代码片段,MPA 项目不建议跳过此项
|
|
154
|
+
* @en The code snippets to skip injecting
|
|
155
|
+
* - console: Skip injecting the code snippet that injects console.error and console.warn, it is not recommended to skip this item for nextjs and nuxt projects
|
|
156
|
+
* - htmlScript: Skip injecting the code snippet that injects script tags in html, it is not recommended to skip this item for MPA projects
|
|
157
|
+
*/
|
|
158
|
+
skipSnippets?: ('console' | 'htmlScript')[];
|
|
159
|
+
/**
|
|
160
|
+
* @zh 是否启用 server 功能。默认值为 `open`,即启用 server 功能。使用代码定位功能时必须启用 server 功能,线上构建只看 dom 路径时可以关闭 server 功能。
|
|
161
|
+
* @en Whether to enable the server function. The default value is `open`, which means enabling the server function. The server function must be enabled when using the code location function, and it can be closed when building online only to view the dom path.
|
|
162
|
+
*/
|
|
163
|
+
server?: 'open' | 'close';
|
|
164
|
+
};
|
|
165
|
+
export {};
|