feat: devtools support (#563)

feat(devtools): add `addEvent`
feat(devtools): add `useDevtoolsInpector`

Author: pikax

docs/api/vue-composable.api.md

@@ -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)
@@ -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)
@@ -384,6 +452,9 @@ export function getCssVariableFor(
   name: string
 ): CssVariable;
 
+// @public
+export function getDevtools(): DevtoolsPluginApi | undefined;
+
 // @public (undocumented)
 export const hydrationPlugin: Plugin_2;
 
@@ -891,7 +962,7 @@ export const enum RefSharedMessageType {
   // (undocumented)
   SYNC = 1,
   // (undocumented)
-  UPDATE = 2
+  UPDATE = 2,
 }
 
 // @public (undocumented)
@@ -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>,
@@ -985,7 +1059,7 @@ export const enum SharedRefMind {
   // (undocumented)
   HIVE = 0,
   // (undocumented)
-  MASTER = 1
+  MASTER = 1,
 }
 
 // @public (undocumented)
@@ -1054,6 +1128,7 @@ export interface UndoOperation {
 export interface UndoOptions<T> {
   clone: (entry: T) => T;
   deep: boolean;
+  devtoolId?: string;
   maxLength: number;
 }
 
@@ -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>,
@@ -1352,6 +1452,7 @@ export function useFetch<T = any>(
 
 // @public (undocumented)
 export interface UseFetchOptions {
+  devtoolId?: boolean | string;
   isJson?: boolean;
   parseImmediate?: boolean;
   unmountCancel?: boolean;
@@ -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)

examples/vue-composable-example/package.json

@@ -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",

examples/vue-composable-example/yarn.lock

@@ -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"
@@ -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"
@@ -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"

package.json

@@ -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",

packages/vue-composable/README.md

@@ -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.