first commit

This commit is contained in:
2026-09-08 20:28:54 +08:00
commit 2ada8d3d5a
37380 changed files with 4886169 additions and 0 deletions
@@ -0,0 +1,90 @@
import { ComponentBounds, Hookable } from './hooks';
import { Context } from './context';
import { ComponentInstance, ComponentState, StateBase } from './component';
import { App } from './app';
import { ID } from './util';
export interface DevtoolsPluginApi {
on: Hookable<Context>;
notifyComponentUpdate(instance?: ComponentInstance): any;
addTimelineLayer(options: TimelineLayerOptions): any;
addTimelineEvent(options: TimelineEventOptions): any;
addInspector(options: CustomInspectorOptions): any;
sendInspectorTree(inspectorId: string): any;
sendInspectorState(inspectorId: string): any;
selectInspectorNode(inspectorId: string, nodeId: string): any;
getComponentBounds(instance: ComponentInstance): Promise<ComponentBounds>;
getComponentName(instance: ComponentInstance): Promise<string>;
getComponentInstances(app: App): Promise<ComponentInstance[]>;
highlightElement(instance: ComponentInstance): any;
unhighlightElement(): any;
}
export interface AppRecord {
id: number;
name: string;
instanceMap: Map<string, ComponentInstance>;
rootInstance: ComponentInstance;
}
export interface TimelineLayerOptions<TData = any, TMeta = any> {
id: string;
label: string;
color: number;
skipScreenshots?: boolean;
groupsOnly?: boolean;
ignoreNoDurationGroups?: boolean;
screenshotOverlayRender?: (event: TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent, ctx: ScreenshotOverlayRenderContext) => ScreenshotOverlayRenderResult | Promise<ScreenshotOverlayRenderResult>;
}
export interface ScreenshotOverlayEvent {
layerId: string;
renderMeta: any;
}
export interface ScreenshotOverlayRenderContext<TData = any, TMeta = any> {
screenshot: ScreenshotData;
events: (TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent)[];
index: number;
}
export declare type ScreenshotOverlayRenderResult = HTMLElement | string | false;
export interface ScreenshotData {
time: number;
}
export interface TimelineEventOptions {
layerId: string;
event: TimelineEvent;
all?: boolean;
}
export interface TimelineEvent<TData = any, TMeta = any> {
time: number;
data: TData;
logType?: 'default' | 'warning' | 'error';
meta?: TMeta;
groupId?: ID;
title?: string;
subtitle?: string;
}
export interface CustomInspectorOptions {
id: string;
label: string;
icon?: string;
treeFilterPlaceholder?: string;
stateFilterPlaceholder?: string;
noSelectionText?: string;
actions?: {
icon: string;
tooltip?: string;
action: () => void | Promise<void>;
}[];
}
export interface CustomInspectorNode {
id: string;
label: string;
children?: CustomInspectorNode[];
tags?: InspectorNodeTag[];
}
export interface InspectorNodeTag {
label: string;
textColor: number;
backgroundColor: number;
tooltip?: string;
}
export interface CustomInspectorState {
[key: string]: (StateBase | Omit<ComponentState, 'type'>)[];
}
@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1 @@
export declare type App = any;
@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,76 @@
import { InspectorNodeTag } from './api';
import { ID } from './util';
export declare type ComponentInstance = any;
export interface ComponentTreeNode {
uid: ID;
id: string;
name: string;
renderKey: string | number;
inactive: boolean;
isFragment: boolean;
hasChildren: boolean;
children: ComponentTreeNode[];
positionTop?: number;
consoleId?: string;
isRouterView?: boolean;
macthedRouteSegment?: string;
tags: InspectorNodeTag[];
meta?: any;
}
export interface InspectedComponentData {
id: string;
name: string;
file: string;
state: ComponentState[];
functional?: boolean;
}
export interface StateBase {
key: string;
value: any;
editable?: boolean;
objectType?: 'ref' | 'reactive' | 'computed' | 'other';
raw?: string;
}
export interface ComponentStateBase extends StateBase {
type: string;
}
export interface ComponentPropState extends ComponentStateBase {
meta?: {
type: string;
required: boolean;
/** Vue 1 only */
mode?: 'default' | 'sync' | 'once';
};
}
export declare type ComponentBuiltinCustomStateTypes = 'function' | 'map' | 'set' | 'reference' | 'component' | 'component-definition' | 'router' | 'store';
export interface ComponentCustomState extends ComponentStateBase {
value: CustomState;
}
export declare type CustomState = {
_custom: {
type: ComponentBuiltinCustomStateTypes | string;
display?: string;
tooltip?: string;
value?: any;
abstract?: boolean;
file?: string;
uid?: number;
readOnly?: boolean;
/** Configure immediate child fields */
fields?: {
abstract?: boolean;
};
id?: any;
actions?: {
icon: string;
tooltip?: string;
action: () => void | Promise<void>;
}[];
/** internal */
_reviveId?: number;
};
};
export declare type ComponentState = ComponentStateBase | ComponentPropState | ComponentCustomState;
export interface ComponentDevtoolsOptions {
hide?: boolean;
}
@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,5 @@
import { AppRecord } from './api';
export interface Context {
currentTab: string;
currentAppRecord: AppRecord;
}
@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,169 @@
import { ComponentTreeNode, InspectedComponentData, ComponentInstance, ComponentDevtoolsOptions } from './component';
import { App } from './app';
import { CustomInspectorNode, CustomInspectorState, TimelineEvent } from './api';
export declare const enum Hooks {
TRANSFORM_CALL = "transformCall",
GET_APP_RECORD_NAME = "getAppRecordName",
GET_APP_ROOT_INSTANCE = "getAppRootInstance",
REGISTER_APPLICATION = "registerApplication",
WALK_COMPONENT_TREE = "walkComponentTree",
VISIT_COMPONENT_TREE = "visitComponentTree",
WALK_COMPONENT_PARENTS = "walkComponentParents",
INSPECT_COMPONENT = "inspectComponent",
GET_COMPONENT_BOUNDS = "getComponentBounds",
GET_COMPONENT_NAME = "getComponentName",
GET_COMPONENT_INSTANCES = "getComponentInstances",
GET_ELEMENT_COMPONENT = "getElementComponent",
GET_COMPONENT_ROOT_ELEMENTS = "getComponentRootElements",
EDIT_COMPONENT_STATE = "editComponentState",
GET_COMPONENT_DEVTOOLS_OPTIONS = "getAppDevtoolsOptions",
GET_COMPONENT_RENDER_CODE = "getComponentRenderCode",
INSPECT_TIMELINE_EVENT = "inspectTimelineEvent",
TIMELINE_CLEARED = "timelineCleared",
GET_INSPECTOR_TREE = "getInspectorTree",
GET_INSPECTOR_STATE = "getInspectorState",
EDIT_INSPECTOR_STATE = "editInspectorState"
}
export interface ComponentBounds {
left: number;
top: number;
width: number;
height: number;
}
export declare type HookPayloads = {
[Hooks.TRANSFORM_CALL]: {
callName: string;
inArgs: any[];
outArgs: any[];
};
[Hooks.GET_APP_RECORD_NAME]: {
app: App;
name: string;
};
[Hooks.GET_APP_ROOT_INSTANCE]: {
app: App;
root: ComponentInstance;
};
[Hooks.REGISTER_APPLICATION]: {
app: App;
};
[Hooks.WALK_COMPONENT_TREE]: {
componentInstance: ComponentInstance;
componentTreeData: ComponentTreeNode[];
maxDepth: number;
filter: string;
};
[Hooks.VISIT_COMPONENT_TREE]: {
app: App;
componentInstance: ComponentInstance;
treeNode: ComponentTreeNode;
filter: string;
};
[Hooks.WALK_COMPONENT_PARENTS]: {
componentInstance: ComponentInstance;
parentInstances: ComponentInstance[];
};
[Hooks.INSPECT_COMPONENT]: {
app: App;
componentInstance: ComponentInstance;
instanceData: InspectedComponentData;
};
[Hooks.GET_COMPONENT_BOUNDS]: {
componentInstance: ComponentInstance;
bounds: ComponentBounds;
};
[Hooks.GET_COMPONENT_NAME]: {
componentInstance: ComponentInstance;
name: string;
};
[Hooks.GET_COMPONENT_INSTANCES]: {
app: App;
componentInstances: ComponentInstance[];
};
[Hooks.GET_ELEMENT_COMPONENT]: {
element: HTMLElement | any;
componentInstance: ComponentInstance;
};
[Hooks.GET_COMPONENT_ROOT_ELEMENTS]: {
componentInstance: ComponentInstance;
rootElements: (HTMLElement | any)[];
};
[Hooks.EDIT_COMPONENT_STATE]: {
app: App;
componentInstance: ComponentInstance;
path: string[];
type: string;
state: EditStatePayload;
set: (object: any, path: string | (string[]), value: any, cb?: (object: any, field: string, value: any) => void) => void;
};
[Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS]: {
componentInstance: ComponentInstance;
options: ComponentDevtoolsOptions;
};
[Hooks.GET_COMPONENT_RENDER_CODE]: {
componentInstance: ComponentInstance;
code: string;
};
[Hooks.INSPECT_TIMELINE_EVENT]: {
app: App;
layerId: string;
event: TimelineEvent;
all?: boolean;
data: any;
};
[Hooks.TIMELINE_CLEARED]: Record<string, never>;
[Hooks.GET_INSPECTOR_TREE]: {
app: App;
inspectorId: string;
filter: string;
rootNodes: CustomInspectorNode[];
};
[Hooks.GET_INSPECTOR_STATE]: {
app: App;
inspectorId: string;
nodeId: string;
state: CustomInspectorState;
};
[Hooks.EDIT_INSPECTOR_STATE]: {
app: App;
inspectorId: string;
nodeId: string;
path: string[];
type: string;
state: EditStatePayload;
set: (object: any, path: string | (string[]), value: any, cb?: (object: any, field: string, value: any) => void) => void;
};
};
export declare type EditStatePayload = {
value: any;
newKey?: string | null;
remove?: undefined | false;
} | {
value?: undefined;
newKey?: undefined;
remove: true;
};
export declare type HookHandler<TPayload, TContext> = (payload: TPayload, ctx: TContext) => void | Promise<void>;
export interface Hookable<TContext> {
transformCall(handler: HookHandler<HookPayloads[Hooks.TRANSFORM_CALL], TContext>): any;
getAppRecordName(handler: HookHandler<HookPayloads[Hooks.GET_APP_RECORD_NAME], TContext>): any;
getAppRootInstance(handler: HookHandler<HookPayloads[Hooks.GET_APP_ROOT_INSTANCE], TContext>): any;
registerApplication(handler: HookHandler<HookPayloads[Hooks.REGISTER_APPLICATION], TContext>): any;
walkComponentTree(handler: HookHandler<HookPayloads[Hooks.WALK_COMPONENT_TREE], TContext>): any;
visitComponentTree(handler: HookHandler<HookPayloads[Hooks.VISIT_COMPONENT_TREE], TContext>): any;
walkComponentParents(handler: HookHandler<HookPayloads[Hooks.WALK_COMPONENT_PARENTS], TContext>): any;
inspectComponent(handler: HookHandler<HookPayloads[Hooks.INSPECT_COMPONENT], TContext>): any;
getComponentBounds(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_BOUNDS], TContext>): any;
getComponentName(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_NAME], TContext>): any;
getComponentInstances(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_INSTANCES], TContext>): any;
getElementComponent(handler: HookHandler<HookPayloads[Hooks.GET_ELEMENT_COMPONENT], TContext>): any;
getComponentRootElements(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_ROOT_ELEMENTS], TContext>): any;
editComponentState(handler: HookHandler<HookPayloads[Hooks.EDIT_COMPONENT_STATE], TContext>): any;
getComponentDevtoolsOptions(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS], TContext>): any;
getComponentRenderCode(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_RENDER_CODE], TContext>): any;
inspectTimelineEvent(handler: HookHandler<HookPayloads[Hooks.INSPECT_TIMELINE_EVENT], TContext>): any;
timelineCleared(handler: HookHandler<HookPayloads[Hooks.TIMELINE_CLEARED], TContext>): any;
getInspectorTree(handler: HookHandler<HookPayloads[Hooks.GET_INSPECTOR_TREE], TContext>): any;
getInspectorState(handler: HookHandler<HookPayloads[Hooks.GET_INSPECTOR_STATE], TContext>): any;
editInspectorState(handler: HookHandler<HookPayloads[Hooks.EDIT_INSPECTOR_STATE], TContext>): any;
}
@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,6 @@
export * from './api';
export * from './app';
export * from './component';
export * from './context';
export * from './hooks';
export * from './util';
@@ -0,0 +1,18 @@
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", { value: true });
__exportStar(require("./api"), exports);
__exportStar(require("./app"), exports);
__exportStar(require("./component"), exports);
__exportStar(require("./context"), exports);
__exportStar(require("./hooks"), exports);
__exportStar(require("./util"), exports);
@@ -0,0 +1,4 @@
export declare type ID = number | string;
export interface WithId {
id: ID;
}
@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1 @@
export declare const HOOK_SETUP = "devtools-plugin:setup";
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HOOK_SETUP = void 0;
exports.HOOK_SETUP = 'devtools-plugin:setup';
@@ -0,0 +1,10 @@
import { PluginDescriptor, SetupFunction } from '.';
interface GlobalTarget {
__VUE_DEVTOOLS_PLUGINS__: Array<{
pluginDescriptor: PluginDescriptor;
setupFn: SetupFunction;
}>;
}
export declare function getDevtoolsGlobalHook(): any;
export declare function getTarget(): GlobalTarget;
export {};
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getTarget = exports.getDevtoolsGlobalHook = void 0;
function getDevtoolsGlobalHook() {
return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
}
exports.getDevtoolsGlobalHook = getDevtoolsGlobalHook;
function getTarget() {
// @ts-ignore
return typeof navigator !== 'undefined'
? window
: typeof global !== 'undefined'
? global
: {};
}
exports.getTarget = getTarget;
@@ -0,0 +1,14 @@
import { DevtoolsPluginApi, App } from './api';
export * from './api';
export interface PluginDescriptor {
id: string;
label: string;
app: App;
packageName?: string;
homepage?: string;
componentStateTypes?: string[];
logo?: string;
disableAppScope?: boolean;
}
export declare type SetupFunction = (api: DevtoolsPluginApi) => void;
export declare function setupDevtoolsPlugin(pluginDescriptor: PluginDescriptor, setupFn: SetupFunction): void;
@@ -0,0 +1,31 @@
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.setupDevtoolsPlugin = void 0;
const env_1 = require("./env");
const const_1 = require("./const");
__exportStar(require("./api"), exports);
function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
const hook = env_1.getDevtoolsGlobalHook();
if (hook) {
hook.emit(const_1.HOOK_SETUP, pluginDescriptor, setupFn);
}
else {
const target = env_1.getTarget();
const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
list.push({
pluginDescriptor,
setupFn
});
}
}
exports.setupDevtoolsPlugin = setupDevtoolsPlugin;
@@ -0,0 +1,6 @@
export * from './api';
export * from './app';
export * from './component';
export * from './context';
export * from './hooks';
export * from './util';
@@ -0,0 +1 @@
export const HOOK_SETUP = 'devtools-plugin:setup';
@@ -0,0 +1,11 @@
export function getDevtoolsGlobalHook() {
return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
}
export function getTarget() {
// @ts-ignore
return typeof navigator !== 'undefined'
? window
: typeof global !== 'undefined'
? global
: {};
}
@@ -0,0 +1,17 @@
import { getTarget, getDevtoolsGlobalHook } from './env';
import { HOOK_SETUP } from './const';
export * from './api';
export function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
const hook = getDevtoolsGlobalHook();
if (hook) {
hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
}
else {
const target = getTarget();
const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
list.push({
pluginDescriptor,
setupFn
});
}
}
@@ -0,0 +1,38 @@
{
"name": "@vue/devtools-api",
"version": "6.0.0-beta.15",
"description": "Interact with the Vue devtools from the page",
"main": "lib/cjs/index.js",
"browser": "lib/esm/index.js",
"module": "lib/esm/index.js",
"types": "lib/cjs/index.d.ts",
"sideEffects": false,
"author": {
"name": "Guillaume Chau"
},
"files": [
"lib/esm",
"lib/cjs"
],
"license": "MIT",
"repository": {
"url": "https://github.com/vuejs/vue-devtools.git",
"type": "git",
"directory": "packages/api"
},
"publishConfig": {
"access": "public"
},
"scripts": {
"build": "rimraf lib && yarn build:esm && yarn build:cjs",
"build:esm": "tsc --module es2015 --outDir lib/esm",
"build:cjs": "tsc --module commonjs --outDir lib/cjs -d",
"build:watch": "yarn tsc --module commonjs --outDir lib/cjs -d -w --sourceMap",
"ts": "yarn build:esm"
},
"devDependencies": {
"@types/node": "^13.9.1",
"@types/webpack-env": "^1.15.1",
"typescript": "^3.8.3"
}
}