Skip to content

Commit

Permalink
feat: devtools support (#563)
Browse files Browse the repository at this point in the history 
feat(devtools): add `addEvent`
feat(devtools): add `useDevtoolsInpector`
  • Loading branch information
@pikax
pikax authored Sep 13, 2020
1 parent 9b7fc77 commit f726bf4
Show file tree
Hide file tree
Showing 23 changed files with 1,049 additions and 99 deletions.
116 changes: 114 additions & 2 deletions docs/api/vue-composable.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,18 @@
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { App } from "@vue/runtime-core";
import { ComputedRef } from "@vue/runtime-core";
import { CustomInspectorNode } from "@vue/devtools-api";
import { CustomInspectorOptions } from "@vue/devtools-api";
import { CustomInspectorState } from "@vue/devtools-api";
import { DeepReadonly } from "@vue/runtime-core";
import { DevtoolsPluginApi } from "@vue/devtools-api";
import { InjectionKey } from "@vue/runtime-core";
import { Plugin as Plugin_2 } from "@vue/runtime-core";
import { provide } from "@vue/runtime-core";
import { Ref } from "@vue/runtime-core";
import { TimelineEvent } from "@vue/devtools-api";
import { UnwrapRef } from "@vue/runtime-core";

// @public (undocumented)
Expand Down Expand Up @@ -350,6 +356,68 @@ export function deepClone<T extends object = object>(
...sources: T[]
): T;

// @public (undocumented)
export interface DevtoolInspectorNode extends CustomInspectorNode {
// (undocumented)
children: DevtoolInspectorNode[];
// (undocumented)
state: CustomInspectorState;
}

// @public (undocumented)
export interface DevtoolInspectorNodeState {
// (undocumented)
"register module": RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
"unregister module": RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
"vuex bindings": RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
$attrs: RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
$refs: RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
[key: string]: RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
computed: RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
getters: RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
mutation: RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
props: RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
setup: RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
state: RefTyped<DevtoolInspectorNodeStateValue>[];
// (undocumented)
undefined: RefTyped<DevtoolInspectorNodeStateValue>[];
}

// @public (undocumented)
export interface DevtoolInspectorNodeStateValue {
// (undocumented)
editable: boolean;
// (undocumented)
objectType: string;
// (undocumented)
type: string;
// (undocumented)
value: any;
}

// @public (undocumented)
export type DevtoolsInpectorNodeFilter = (
search: string,
nodes: DevtoolInspectorNode[]
) => DevtoolInspectorNode[];

// @public (undocumented)
export type DevtoolsInpectorStateFilter = (
search: string,
state: CustomInspectorState
) => CustomInspectorState;

// Warning: (ae-forgotten-export) The symbol "RetryDelayFactory" needs to be exported by the entry point index.d.ts
//
// @public (undocumented)
Expand Down Expand Up @@ -384,6 +452,9 @@ export function getCssVariableFor(
name: string
): CssVariable;

// @public
export function getDevtools(): DevtoolsPluginApi | undefined;

// @public (undocumented)
export const hydrationPlugin: Plugin_2;

Expand Down Expand Up @@ -891,7 +962,7 @@ export const enum RefSharedMessageType {
// (undocumented)
SYNC = 1,
// (undocumented)
UPDATE = 2
UPDATE = 2,
}

// @public (undocumented)
Expand Down Expand Up @@ -969,6 +1040,9 @@ export function setCssVariableFor(
value: CssVariable
): void;

// @public
export function setDevtools(app: App, api: DevtoolsPluginApi): void;

// @public
export function setI18n<
T extends i18nDefinition<TMessage>,
Expand All @@ -985,7 +1059,7 @@ export const enum SharedRefMind {
// (undocumented)
HIVE = 0,
// (undocumented)
MASTER = 1
MASTER = 1,
}

// @public (undocumented)
Expand Down Expand Up @@ -1054,6 +1128,7 @@ export interface UndoOperation {
export interface UndoOptions<T> {
clone: (entry: T) => T;
deep: boolean;
devtoolId?: string;
maxLength: number;
}

Expand Down Expand Up @@ -1277,6 +1352,31 @@ export function useDebounce<T extends Procedure>(
options?: Options
): T;

// @public (undocumented)
export const UseDevtoolsApp: (app: App, id?: string, label?: string) => void;

// @public (undocumented)
export function useDevtoolsInpector(
options: CustomInspectorOptions & {
nodeFilter?: DevtoolsInpectorNodeFilter;
stateFilter?: DevtoolsInpectorStateFilter;
},
nodeList?: DevtoolInspectorNode[]
): {
nodes: Ref<DevtoolInspectorNode[]>;
};

// @public (undocumented)
export function useDevtoolsTimelineLayer(
id: string,
label: string,
color: number
): {
id: string;
addEvent: (event: TimelineEvent, all?: boolean | undefined) => any;
pushEvent: (event: Omit<TimelineEvent, "time">) => any;
};

// @public (undocumented)
export function useEvent<K extends keyof DocumentEventMap>(
el: RefTyped<Document>,
Expand Down Expand Up @@ -1352,6 +1452,7 @@ export function useFetch<T = any>(

// @public (undocumented)
export interface UseFetchOptions {
devtoolId?: boolean | string;
isJson?: boolean;
parseImmediate?: boolean;
unmountCancel?: boolean;
Expand Down Expand Up @@ -2069,6 +2170,17 @@ export const VERSION: string;
// @public (undocumented)
export const VUE_VERSION: "2" | "3";

// @public (undocumented)
export const VueComposableDevtools: {
install(
app: App,
options?: {
id: string;
label: string;
}
): void;
};

// @public (undocumented)
export interface WebSocketReturn {
// (undocumented)
Expand Down
6 changes: 3 additions & 3 deletions examples/vue-composable-example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vue-composable/axios": "^1.0.0-beta.1",
"vue": "^2.6.11",
"vue-composable": "^1.0.0-beta.1"
"@vue-composable/axios": "^1.0.0-beta.5",
"vue": "^2.6.12",
"vue-composable": "^1.0.0-beta.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.6",
Expand Down
26 changes: 13 additions & 13 deletions examples/vue-composable-example/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1151,12 +1151,12 @@
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==

"@vue-composable/axios@^1.0.0-beta.1":
version "1.0.0-beta.3"
resolved "https://registry.yarnpkg.com/@vue-composable/axios/-/axios-1.0.0-beta.3.tgz#5e50a1cf15a1efbb02339a659835eefb40546ccf"
integrity sha512-sPkivRnWvYd4TsDia3ivpqxiw4UKCac9t3SuarJHBGJbw1l2LG2G6XT9LNdkHCIDe4yxqh09OGXqyO3P6jNMYg==
"@vue-composable/axios@^1.0.0-beta.5":
version "1.0.0-beta.5"
resolved "https://registry.yarnpkg.com/@vue-composable/axios/-/axios-1.0.0-beta.5.tgz#aea2c1f3a934ffe689a3c32a0e939b118b79b32c"
integrity sha512-RIH325JtgcVLifXB+eT0tQyPl6uTyVipoXcor+lULAi5XIkHZa9OluRs8sRXCWrx2ByQIb+FUhnxuTBnRKJiqg==
dependencies:
vue-composable "^1.0.0-beta.3"
vue-composable "^1.0.0-beta.5"

"@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
version "1.0.0"
Expand Down Expand Up @@ -7887,10 +7887,10 @@ vm-browserify@^1.0.1:
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==

vue-composable@^1.0.0-beta.1, vue-composable@^1.0.0-beta.3:
version "1.0.0-beta.3"
resolved "https://registry.yarnpkg.com/vue-composable/-/vue-composable-1.0.0-beta.3.tgz#ba442d24768b8a452dc4b313f42840ef8ecd3d99"
integrity sha512-PZ19JR3/aZc/PPDZhJC9X4oytSo7eDpoKku6cHQX4OHAGRxg7Cqb/rDt7mbZk3zCIb3GD6jpR3Qm8HqliV745Q==
vue-composable@^1.0.0-beta.5:
version "1.0.0-beta.5"
resolved "https://registry.yarnpkg.com/vue-composable/-/vue-composable-1.0.0-beta.5.tgz#3de1ee9dbd1768c575d06a3657c1b7234df9e49c"
integrity sha512-AsuyLdUhbsdYlnDC7Se3207j8WXNoy0/9hwGmkuxJE5QIylOTd6vkg4nyJ8j+vTL740nEofVwnwsH20W0pc2jw==

vue-hot-reload-api@^2.3.0:
version "2.3.4"
Expand Down Expand Up @@ -7929,10 +7929,10 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==

vue@^2.6.11:
version "2.6.11"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
vue@^2.6.12:
version "2.6.12"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==

watchpack@^1.6.0:
version "1.6.0"
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@
"lodash.camelcase": "^4.3.0",
"minimist": "^1.2.5",
"mock-socket": "^9.0.3",
"prettier": "^2.1.1",
"rimraf": "^3.0.2",
"rollup": "^2.26.10",
"rollup-plugin-terser": "^7.0.2",
Expand Down
97 changes: 97 additions & 0 deletions packages/vue-composable/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,103 @@ Check our [documentation](https://pikax.me/vue-composable/)

This is a monorepo project, please check [packages](packages/)

## Devtools

There's some experimental devtools support starting from `1.0.0-beta.6`, only available for `vue-next` and `devtools beta 6`.

- [devtools beta chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg)

### Install plugin

To use devtools you need to install the plugin first:

```ts
import { createApp } from "vue";
import { VueComposableDevtools } from "vue-composable";
import App from "./App.vue";

const app = createApp(App);
app.use(VueComposableDevtools);
// or
app.use(VueComposableDevtools, {
id: "vue-composable",
label: "devtool composables",
});

app.mount("#app");
```

### Timeline events

To add timeline events:

```ts
const id = "vue-composable";
const label = "Test events";
const color = 0x92a2bf;

const { addEvent, pushEvent } = useDevtoolsTimelineLayer(
id,
description,
color
);

// adds event to a specific point in the timeline
addEvent({
time: Date.now(),
data: {
// data object
},
meta: {
// meta object
},
});

// adds event with `time: Date.now()`
pushEvent({
data: {
// data object
},
meta: {
// meta object
},
});
```

### Inspector

Allows to create a new inpector for your data.

> I'm still experimenting on how to expose this API on a composable, this will likely to change in the future, suggestions are welcome.
```ts
useDevtoolsInpector(
{
id: "vue-composable",
label: "test vue-composable",
},
// list of nodes, this can be reactive
[
{
id: "test",
label: "test - vue-composable",
depth: 0,
state: {
composable: [
{
editable: false,
key: "count",
objectType: "Ref",
type: "setup",
value: myRefValue,
},
],
},
},
]
);
```

## Contributing

You can contribute raising issues and by helping out with code.
Expand Down
Loading

0 comments on commit f726bf4

Please sign in to comment.