@code-inspector/core 1.1.0

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@code-inspector/core",
+  "version": "1.1.0",
+  "main": "dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "types/index.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "repository": "git@github.com:zh-lx/code-inspector.git",
+  "author": "zh-lx <18366276315@163.com>",
+  "license": "MIT",
+  "homepage": "https://inspector.fe-dev.cn/en",
+  "description": "Click the dom on the page, it will open your IDE and position the cursor to the source code location of the dom.",
+  "keywords": [
+    "webpack",
+    "vite",
+    "plugin",
+    "vue",
+    "vscode",
+    "inspector",
+    "inspect"
+  ],
+  "bugs": {
+    "url": "https://github.com/zh-lx/code-inspector/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build:server": "vite build",
+    "build:client": " vite build --config ./vite.client.config.ts",
+    "build:client:watch": " vite build --config ./vite.client.config.ts --watch",
+    "clear": "rimraf ./dist && rimraf ./types",
+    "build": "pnpm clear && tsc && pnpm build:server && pnpm build:client",
+    "pub": "pnpm publish",
+    "pub:beta": "pnpm publish --tag beta"
+  },
+  "dependencies": {
+    "@vue/compiler-dom": "^3.5.13",
+    "chalk": "^4.1.1",
+    "dotenv": "^16.1.4",
+    "launch-ide": "1.1.1",
+    "portfinder": "^1.0.28"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-proposal-decorators": "^7.22.7",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-transform-typescript": "^7.21.3",
+    "@types/node": "^18.14.1",
+    "@vue/babel-plugin-jsx": "^1.1.1",
+    "@vue/compiler-sfc": "^3.3.4",
+    "lit": "^2.6.1",
+    "magic-string": "^0.30.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "svelte": "^4.2.7",
+    "typescript": "^4.9.3",
+    "vite": "^4.3.9",
+    "vite-plugin-node-stdlib-browser": "^0.2.1",
+    "volar-service-pug": "^0.0.63"
+  }
+}

package/types/client/index.d.ts

@@ -0,0 +1,163 @@
+import { LitElement, TemplateResult } from 'lit';
+interface Position {
+    left?: string;
+    right?: string;
+    top?: string;
+    bottom?: string;
+    transform?: string;
+    maxHeight?: string;
+}
+interface SourceInfo {
+    name: string;
+    path: string;
+    line: number;
+    column: number;
+}
+interface ElementTipStyle {
+    vertical: string;
+    horizon: string;
+    visibility: string;
+    additionStyle?: {
+        transform: string;
+    };
+}
+interface TreeNode extends SourceInfo {
+    children: TreeNode[];
+    element: HTMLElement;
+    depth: number;
+}
+interface ActiveNode {
+    top?: string;
+    bottom?: string;
+    left?: string;
+    width?: string;
+    content?: string;
+    visibility?: 'visible' | 'hidden';
+    class?: 'tooltip-top' | 'tooltip-bottom';
+}
+export declare class CodeInspectorComponent extends LitElement {
+    hotKeys: string;
+    port: number;
+    showSwitch: boolean;
+    autoToggle: boolean;
+    hideConsole: boolean;
+    locate: boolean;
+    copy: boolean | string;
+    target: string;
+    ip: string;
+    position: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        padding: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        border: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        margin: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    };
+    element: {
+        name: string;
+        line: number;
+        column: number;
+        path: string;
+    };
+    elementTipStyle: ElementTipStyle;
+    show: boolean;
+    showNodeTree: boolean;
+    nodeTreePosition: Position;
+    nodeTree: TreeNode | null;
+    dragging: boolean;
+    mousePosition: {
+        baseX: number;
+        baseY: number;
+        moveX: number;
+        moveY: number;
+    };
+    draggingTarget: 'switch' | 'nodeTree';
+    open: boolean;
+    moved: boolean;
+    hoverSwitch: boolean;
+    preUserSelect: string;
+    sendType: 'xhr' | 'img';
+    activeNode: ActiveNode;
+    inspectorSwitchRef: HTMLDivElement;
+    codeInspectorContainerRef: HTMLDivElement;
+    elementInfoRef: HTMLDivElement;
+    nodeTreeRef: HTMLDivElement;
+    nodeTreeTitleRef: HTMLDivElement;
+    nodeTreeTooltipRef: HTMLDivElement;
+    isTracking: (e: any) => boolean | "";
+    getDomPropertyValue: (target: HTMLElement, property: string) => number;
+    calculateElementInfoPosition: (target: HTMLElement) => Promise<{
+        vertical: string;
+        horizon: string;
+        top: number;
+        left: number;
+        isExternal: boolean;
+        additionStyle?: undefined;
+    } | {
+        vertical: string;
+        horizon: string;
+        top: number;
+        left: number;
+        isExternal: boolean;
+        additionStyle: {
+            transform: string;
+        };
+    }>;
+    renderCover: (target: HTMLElement) => Promise<void>;
+    getAstroFilePath: (target: HTMLElement) => string;
+    getSourceInfo: (target: HTMLElement) => SourceInfo | null;
+    removeCover: (force?: boolean | MouseEvent) => void;
+    renderLayerPanel: (nodeTree: TreeNode, { x, y }: {
+        x: number;
+        y: number;
+    }) => void;
+    removeLayerPanel: () => void;
+    addGlobalCursorStyle: () => void;
+    removeGlobalCursorStyle: () => void;
+    sendXHR: () => void;
+    sendImg: () => void;
+    buildTargetUrl: () => string;
+    trackCode: () => void;
+    copyToClipboard(text: string): void;
+    handleDrag: (e: MouseEvent | TouchEvent) => void;
+    isSamePositionNode: (node1: HTMLElement, node2: HTMLElement) => boolean;
+    handleMouseMove: (e: MouseEvent | TouchEvent) => Promise<void>;
+    handleMouseClick: (e: MouseEvent | TouchEvent) => void;
+    handleContextMenu: (e: MouseEvent) => void;
+    generateNodeTree: (nodePath: HTMLElement[]) => TreeNode;
+    handlePointerDown: (e: PointerEvent) => void;
+    handleKeyUp: (e: KeyboardEvent) => void;
+    printTip: () => void;
+    getMousePosition: (e: MouseEvent | TouchEvent) => {
+        x: number;
+        y: number;
+    };
+    recordMousePosition: (e: MouseEvent | TouchEvent, target: 'switch' | 'nodeTree') => void;
+    handleMouseUp: (e: MouseEvent | TouchEvent) => void;
+    switch: (e: Event) => void;
+    handleClickTreeNode: (node: TreeNode) => void;
+    handleMouseEnterNode: (e: MouseEvent, node: TreeNode) => Promise<void>;
+    handleMouseLeaveNode: () => void;
+    protected firstUpdated(): void;
+    disconnectedCallback(): void;
+    renderNodeTree: (node: TreeNode) => TemplateResult;
+    render(): TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export {};

package/types/index.d.ts

@@ -0,0 +1,4 @@
+export { parse as parseSFC } from '@vue/compiler-sfc';
+export { getEnvVariable } from 'launch-ide';
+export * from './server';
+export * from './shared';

package/types/server/index.d.ts

@@ -0,0 +1,3 @@
+export { transformCode } from './transform';
+export * from './use-client';
+export * from './server';

package/types/server/server.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="node" />
+import http from 'http';
+import type { PathType, CodeOptions, RecordInfo } from '../shared';
+export declare const ProjectRootPath: string;
+export declare function getRelativePath(filePath: string): string;
+export declare function getRelativeOrAbsolutePath(filePath: string, pathType?: PathType): string;
+export declare function createServer(callback: (port: number) => any, options?: CodeOptions, record?: RecordInfo): http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
+export declare function startServer(options: CodeOptions, record: RecordInfo): Promise<void>;

package/types/server/transform/index.d.ts

@@ -0,0 +1,11 @@
+import { EscapeTags, PathType } from '../../shared';
+type FileType = 'vue' | 'jsx' | 'svelte' | unknown;
+type TransformCodeParams = {
+    content: string;
+    filePath: string;
+    fileType: FileType;
+    escapeTags: EscapeTags;
+    pathType: PathType;
+};
+export declare function transformCode(params: TransformCodeParams): string;
+export {};

package/types/server/transform/transform-jsx.d.ts

@@ -0,0 +1,2 @@
+import { EscapeTags } from '../../shared';
+export declare function transformJsx(content: string, filePath: string, escapeTags: EscapeTags): string;

package/types/server/transform/transform-svelte.d.ts

@@ -0,0 +1,2 @@
+import { EscapeTags } from '../../shared';
+export declare function transformSvelte(content: string, filePath: string, escapeTags: EscapeTags): string;

package/types/server/transform/transform-vue.d.ts

@@ -0,0 +1,2 @@
+import { EscapeTags } from '../../shared';
+export declare function transformVue(content: string, filePath: string, escapeTags: EscapeTags): string;

package/types/server/use-client.d.ts

@@ -0,0 +1,14 @@
+import type { CodeOptions, RecordInfo } from '../shared';
+export declare const clientJsPath: string;
+export declare function getInjectedCode(options: CodeOptions, port: number, isNextjs: boolean): string;
+export declare function getWebComponentCode(options: CodeOptions, port: number): string;
+export declare function getEliminateWarningCode(): string;
+export declare function getHidePathAttrCode(): string;
+export declare function getCodeWithWebComponent({ options, record, file, code, inject, }: {
+    options: CodeOptions;
+    record: RecordInfo;
+    file: string;
+    code: string;
+    inject?: boolean;
+}): Promise<string>;
+export declare function isNextjsProject(): boolean;

package/types/shared/constant.d.ts

@@ -0,0 +1,7 @@
+export declare const LineName = "data-insp-row";
+export declare const ColumnName = "data-insp-col";
+export declare const PathName = "data-insp-path";
+export declare const NodeName = "data-insp-node";
+export declare const DefaultPort = 5678;
+export declare const JsFileExtList: string[];
+export declare const AstroToolbarFile = "\0astro:dev-toolbar";

package/types/shared/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constant';
+export * from './utils';
+export * from './type';

package/types/shared/type.d.ts

@@ -0,0 +1,160 @@
+import type { Editor } from 'launch-ide';
+export type HotKey = 'ctrlKey' | 'altKey' | 'metaKey' | 'shiftKey';
+export type Behavior = {
+    locate?: boolean;
+    copy?: boolean | string;
+    target?: string;
+};
+export type RecordInfo = {
+    port: number;
+    entry: string;
+    output: string;
+    findPort?: Promise<number>;
+    inputs?: Promise<string[]>;
+    injectTo?: string[];
+    envDir?: string;
+};
+export type IDEOpenMethod = 'reuse' | 'new' | 'auto';
+export type ImportClientWay = 'file' | 'code';
+export type PathType = 'relative' | 'absolute';
+type SourceInfo = {
+    file: string;
+    line: number;
+    column: number;
+};
+export type EscapeTags = (string | RegExp)[];
+export type Hooks = {
+    /**
+     * @zh server 端接收到 DOM 源代码定位请求后的钩子函数
+     * @en The hook triggered when the server receives a request to locate the DOM source code.
+     */
+    afterInspectRequest?: (options: CodeOptions, source: SourceInfo) => void;
+};
+export type Condition = string | RegExp | (string | RegExp)[];
+export type CodeOptions = {
+    /**
+     * @zh 指定项目的打包器
+     * @en specify the bundler of the project
+     */
+    bundler: 'vite' | 'webpack' | 'rspack' | 'esbuild' | 'turbopack' | 'mako';
+    /**
+     * @cn 触发 DOM 定位功能的组合键，ctrlKey/altKey/metaKey/shiftKey 中一个或多个组成的数组，默认值为 ['altKey', 'shiftKey]。即 Mac 系统默认是 Option + Shift；Window 默认是 Alt + Shift。
+     * @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.
+     */
+    hotKeys?: HotKey[] | false;
+    /**
+     * @cn 是否在页面展示功能开关按钮
+     * @en Whether show the switch button of this function on the page
+     */
+    showSwitch?: boolean;
+    /**
+     * @cn 是否隐藏在控制台的按键提示
+     * @en Whether hide the tips of combination keys on console.
+     */
+    hideConsole?: boolean;
+    /**
+     * @cn 打开功能开关的情况下，点击触发跳转编辑器时是否自动关闭开关
+     * @en When opening the function switch, whether automatically close the switch when triggering the jump editor function.
+     */
+    autoToggle?: boolean;
+    editor?: Editor;
+    /**
+     * @cn 用于注入DOM 筛选和点击跳转vscode的相关代码的文件。必须为绝对路径且以 `.js/.ts/.mjs/.mts/.jsx/.tsx` 为结尾的文件
+     * @en The file to inject the relevant code for DOM filtering and click navigation in VSCode. Must be an absolute path and end with `.js/.ts/.mjs/.mts/.jsx/.tsx`.
+     */
+    injectTo?: string | string[];
+    /**
+     * @cn 是否在转换时添加 `enforce: 'pre'`，默认值为 `true`。（若因该插件引起了 `eslint-plugin` 校验错误，需要此项设置为 `false`）
+     * @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`)
+     */
+    enforcePre?: boolean;
+    /**
+     * @cn 自定义 development 环境的判断
+     * @en Custom determination of the development environment.
+     */
+    dev?: boolean | (() => boolean);
+    /**
+     * @cn 对于 webpack/rspack 是否应用缓存策略，默认值为 `false`。(使用 cache 可能会导致)
+     * @en Whether to apply the caching strategy for webpack/rspack, the default value is `false`
+     */
+    cache?: boolean;
+    /**
+     * @cn 仅对符合 match 正则表达式的文件会进行源码定位编译(精确匹配文件类型以减少无用文件参与编译，提升性能)，默认为 /\.(vue|jsx|tsx|js|ts|mjs|mts)$/
+     * @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)$/
+     */
+    match?: RegExp;
+    /**
+     * @cn 功能触发时的行为
+     * @en The behavior
+     */
+    behavior?: Behavior;
+    /**
+     * @cn 打开 IDE 窗口的方式: 不传或者 `auto` 为自动寻找窗口；`reuse` 将复用当前窗口；`new` 为打开新窗口
+     * @en The way to open the IDE window: Use `auto` or `undefined` to automatically find the window; Use `reuse` to reuse the current window; Use `new` to open a new window.
+     */
+    openIn?: IDEOpenMethod;
+    /**
+     * @cn 自定义跳转 IDE 时的打开路径，默认 "{file}:{line}:{column}"，其中 {xx} 为模版字符
+     * @en Customize the path when open the IDE. Default value is "{file}:{line}:{column}", where {xx} represents template characters.
+     */
+    pathFormat?: string | string[];
+    /**
+     * @zh 钩子函数
+     * @en hooks
+     */
+    hooks?: Hooks;
+    /**
+     * @zh 不注入 `data-insp-path` 的标签
+     * @en tags without injecting data-insp-path
+     */
+    escapeTags?: EscapeTags;
+    /**
+     * @zh 是否隐藏控制台中 dom 的 `data-insp-path` 属性
+     * @en Whether to hide the `data-insp-path` attribute of DOM in the console
+     */
+    hideDomPathAttr?: boolean;
+    /**
+     * @zh 点击 DOM 向 node server 发送请求时，是否使用 ip 代替 localhost。默认为 `false`
+     * @en When sending request node server by clicking on the DOM, whether to use IP instead of localhost. Default value is `false`
+     */
+    ip?: boolean | string;
+    /**
+     * @zh 引入客户端交互代码的方式: file 为通过文件引入交互代码; code 为直接将交互代码注入页面。`0.16.x` 及之后的版本值默认为 `code`, `0.15.x` 之前的版本默认值为 `file`.
+     * @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`.
+     */
+    importClient?: ImportClientWay;
+    /**
+     * @zh 额外要参与编译的文件(用于让 node_modules 中的部分文件参与编译以注入 path 信息)
+     * @en Additional files to be compiled (used to make some files in `node_modules` participate in compilation to inject path information)
+     */
+    include?: Condition;
+    /**
+     * @zh 不参与编译的文件
+     * @en Files not to be compiled
+     */
+    exclude?: Condition;
+    /**
+     * @zh 用于映射文件路径，多用于将 node_modules 中的文件路径映射为项目中的文件路径
+     * @en Used to map file paths, often used to map the file path in `node_modules` to the file path in the project
+     */
+    mappings?: Record<string, string> | Array<{
+        find: string | RegExp;
+        replacement: string;
+    }>;
+    /**
+     * @zh 支持从指定端口开始寻找可用端口（默认从 5678 开始）
+     * @en Supports finding available ports starting from a specified port (default starts from 5678).
+     */
+    port?: number;
+    /**
+     * @zh 是否在控制台中打印 server 的启动信息
+     * @en Whether to print the server startup information in the console
+     */
+    printServer?: boolean;
+    /**
+     * @zh 注入在 DOM 上的路径类型，默认值为 `absolute`，即绝对路径
+     * @en The type of path injected into the DOM, the default value is `absolute`, which means the path is relative to the project root directory
+     */
+    pathType?: PathType;
+};
+export {};

package/types/shared/utils.d.ts

@@ -0,0 +1,17 @@
+import { CodeOptions, Condition, EscapeTags } from './type';
+export declare function getIP(ip: boolean | string): string;
+export declare function fileURLToPath(fileURL: string): string;
+export declare function isJsTypeFile(file: string): boolean;
+export declare function getFilePathWithoutExt(filePath: string): string;
+export declare function normalizePath(filepath: string): string;
+export declare function isEscapeTags(escapeTags: EscapeTags, tag: string): boolean;
+export declare function getDenpendencies(): string[];
+type BooleanFunction = () => boolean;
+export declare function isDev(userDev: boolean | BooleanFunction | undefined, systemDev: boolean): boolean;
+export declare function matchCondition(condition: Condition, file: string): boolean;
+export declare function getMappingFilePath(file: string, mappings?: Record<string, string> | Array<{
+    find: string | RegExp;
+    replacement: string;
+}>): string;
+export declare function isExcludedFile(file: string, options: CodeOptions): boolean;
+export {};