@tanstack/vue-devtools 0.2.12 → 0.2.14
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/dist/esm/index.js +7 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/vue-devtools.js +7 -0
- package/dist/esm/vue-devtools.js.map +1 -0
- package/dist/esm/vue-devtools.vue_vue_type_script_setup_true_lang.js +86 -0
- package/dist/esm/vue-devtools.vue_vue_type_script_setup_true_lang.js.map +1 -0
- package/package.json +2 -2
- package/dist/esm/vue-devtools.vue.js +0 -96
- package/dist/esm/vue-devtools.vue.js.map +0 -1
- package/dist/esm/vue-devtools.vue2.js +0 -5
- package/dist/esm/vue-devtools.vue2.js.map +0 -1
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
};
|
|
6
|
-
|
|
1
|
+
import vue_devtools_default from "./vue-devtools.js";
|
|
2
|
+
//#region src/index.ts
|
|
3
|
+
var TanStackDevtools = vue_devtools_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { TanStackDevtools };
|
|
6
|
+
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import Devtools from './vue-devtools.vue'\n\nexport const TanStackDevtools = Devtools\n\nexport type {\n TanStackDevtoolsVuePlugin,\n TanStackDevtoolsVueInit,\n} from './types'\n"],"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import Devtools from './vue-devtools.vue'\n\nexport const TanStackDevtools = Devtools\n\nexport type {\n TanStackDevtoolsVuePlugin,\n TanStackDevtoolsVueInit,\n} from './types'\n"],"mappings":";;AAEA,IAAa,mBAAmB"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import vue_devtools_vue_vue_type_script_setup_true_lang_default from "./vue-devtools.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region src/vue-devtools.vue
|
|
3
|
+
var vue_devtools_default = vue_devtools_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { vue_devtools_default as default };
|
|
6
|
+
|
|
7
|
+
//# sourceMappingURL=vue-devtools.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vue-devtools.js","names":[],"sources":["../../src/vue-devtools.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onScopeDispose, ref, shallowRef, watchEffect } from 'vue'\nimport { PLUGIN_CONTAINER_ID, TanStackDevtoolsCore } from '@tanstack/devtools'\nimport type { DefineComponent } from 'vue'\nimport type { TanStackDevtoolsPlugin } from '@tanstack/devtools'\nimport type {\n RenderArray,\n TanStackDevtoolsVueInit,\n TanStackDevtoolsVuePlugin,\n} from './types'\n\nconst props = defineProps<TanStackDevtoolsVueInit>()\n\nconst titlesToRender = shallowRef<RenderArray>([])\nconst pluginsToRender = shallowRef<RenderArray>([])\nconst div = ref<HTMLElement>()\n\nfunction getPlugin(plugin: TanStackDevtoolsVuePlugin): TanStackDevtoolsPlugin {\n return {\n id: plugin.id,\n name:\n typeof plugin.name === 'string'\n ? plugin.name\n : (e, theme) => {\n const id = e.getAttribute('id')!\n titlesToRender.value = [\n ...titlesToRender.value,\n {\n id,\n component: plugin.name as DefineComponent<any>,\n props: {\n theme,\n },\n },\n ]\n },\n render: (e, theme) => {\n const id = e.getAttribute('id')!\n pluginsToRender.value = [\n ...pluginsToRender.value,\n { id, component: plugin.component, props: { theme, ...plugin.props } },\n ]\n },\n destroy: (pluginId) => {\n pluginsToRender.value = pluginsToRender.value.filter(\n (plugin) => plugin.id !== `${PLUGIN_CONTAINER_ID}-${pluginId}`,\n )\n },\n }\n}\n\nconst devtools = new TanStackDevtoolsCore({\n config: props.config,\n eventBusConfig: props.eventBusConfig,\n plugins: props.plugins?.map(getPlugin),\n})\n\nwatchEffect(() => {\n devtools.setConfig({\n config: props.config,\n eventBusConfig: props.eventBusConfig,\n plugins: props.plugins?.map(getPlugin),\n })\n})\n\nonMounted(() => {\n if (div.value) {\n devtools.mount(div.value)\n }\n})\n\nonScopeDispose(() => {\n devtools.unmount()\n})\n</script>\n\n<template>\n <div ref=\"div\" />\n <Teleport\n v-for=\"title in titlesToRender\"\n :key=\"title.id\"\n :to=\"'#' + title.id\"\n >\n <component :is=\"title.component\" v-bind=\"title.props\" />\n </Teleport>\n <Teleport\n v-for=\"plugin in pluginsToRender\"\n :key=\"plugin.id\"\n :to=\"'#' + plugin.id\"\n >\n <component\n :is=\"plugin.component\"\n :devtools-props=\"plugin.props\"\n v-bind=\"plugin.props\"\n />\n </Teleport>\n</template>\n"],"mappings":""}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { Fragment, Teleport, createBlock, createElementBlock, createElementVNode, defineComponent, mergeProps, onMounted, onScopeDispose, openBlock, ref, renderList, resolveDynamicComponent, shallowRef, watchEffect } from "vue";
|
|
2
|
+
import { PLUGIN_CONTAINER_ID, TanStackDevtoolsCore } from "@tanstack/devtools";
|
|
3
|
+
//#region src/vue-devtools.vue?vue&type=script&setup=true&lang.ts
|
|
4
|
+
var vue_devtools_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
5
|
+
__name: "vue-devtools",
|
|
6
|
+
props: {
|
|
7
|
+
plugins: {},
|
|
8
|
+
config: {},
|
|
9
|
+
eventBusConfig: {}
|
|
10
|
+
},
|
|
11
|
+
setup(__props) {
|
|
12
|
+
const props = __props;
|
|
13
|
+
const titlesToRender = shallowRef([]);
|
|
14
|
+
const pluginsToRender = shallowRef([]);
|
|
15
|
+
const div = ref();
|
|
16
|
+
function getPlugin(plugin) {
|
|
17
|
+
return {
|
|
18
|
+
id: plugin.id,
|
|
19
|
+
name: typeof plugin.name === "string" ? plugin.name : (e, theme) => {
|
|
20
|
+
const id = e.getAttribute("id");
|
|
21
|
+
titlesToRender.value = [...titlesToRender.value, {
|
|
22
|
+
id,
|
|
23
|
+
component: plugin.name,
|
|
24
|
+
props: { theme }
|
|
25
|
+
}];
|
|
26
|
+
},
|
|
27
|
+
render: (e, theme) => {
|
|
28
|
+
const id = e.getAttribute("id");
|
|
29
|
+
pluginsToRender.value = [...pluginsToRender.value, {
|
|
30
|
+
id,
|
|
31
|
+
component: plugin.component,
|
|
32
|
+
props: {
|
|
33
|
+
theme,
|
|
34
|
+
...plugin.props
|
|
35
|
+
}
|
|
36
|
+
}];
|
|
37
|
+
},
|
|
38
|
+
destroy: (pluginId) => {
|
|
39
|
+
pluginsToRender.value = pluginsToRender.value.filter((plugin) => plugin.id !== `${PLUGIN_CONTAINER_ID}-${pluginId}`);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
const devtools = new TanStackDevtoolsCore({
|
|
44
|
+
config: props.config,
|
|
45
|
+
eventBusConfig: props.eventBusConfig,
|
|
46
|
+
plugins: props.plugins?.map(getPlugin)
|
|
47
|
+
});
|
|
48
|
+
watchEffect(() => {
|
|
49
|
+
devtools.setConfig({
|
|
50
|
+
config: props.config,
|
|
51
|
+
eventBusConfig: props.eventBusConfig,
|
|
52
|
+
plugins: props.plugins?.map(getPlugin)
|
|
53
|
+
});
|
|
54
|
+
});
|
|
55
|
+
onMounted(() => {
|
|
56
|
+
if (div.value) devtools.mount(div.value);
|
|
57
|
+
});
|
|
58
|
+
onScopeDispose(() => {
|
|
59
|
+
devtools.unmount();
|
|
60
|
+
});
|
|
61
|
+
return (_ctx, _cache) => {
|
|
62
|
+
return openBlock(), createElementBlock(Fragment, null, [
|
|
63
|
+
createElementVNode("div", {
|
|
64
|
+
ref_key: "div",
|
|
65
|
+
ref: div
|
|
66
|
+
}, null, 512),
|
|
67
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(titlesToRender.value, (title) => {
|
|
68
|
+
return openBlock(), createBlock(Teleport, {
|
|
69
|
+
key: title.id,
|
|
70
|
+
to: "#" + title.id
|
|
71
|
+
}, [(openBlock(), createBlock(resolveDynamicComponent(title.component), mergeProps({ ref_for: true }, title.props), null, 16))], 8, ["to"]);
|
|
72
|
+
}), 128)),
|
|
73
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(pluginsToRender.value, (plugin) => {
|
|
74
|
+
return openBlock(), createBlock(Teleport, {
|
|
75
|
+
key: plugin.id,
|
|
76
|
+
to: "#" + plugin.id
|
|
77
|
+
}, [(openBlock(), createBlock(resolveDynamicComponent(plugin.component), mergeProps({ "devtools-props": plugin.props }, { ref_for: true }, plugin.props), null, 16, ["devtools-props"]))], 8, ["to"]);
|
|
78
|
+
}), 128))
|
|
79
|
+
], 64);
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
//#endregion
|
|
84
|
+
export { vue_devtools_vue_vue_type_script_setup_true_lang_default as default };
|
|
85
|
+
|
|
86
|
+
//# sourceMappingURL=vue-devtools.vue_vue_type_script_setup_true_lang.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vue-devtools.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/vue-devtools.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onScopeDispose, ref, shallowRef, watchEffect } from 'vue'\nimport { PLUGIN_CONTAINER_ID, TanStackDevtoolsCore } from '@tanstack/devtools'\nimport type { DefineComponent } from 'vue'\nimport type { TanStackDevtoolsPlugin } from '@tanstack/devtools'\nimport type {\n RenderArray,\n TanStackDevtoolsVueInit,\n TanStackDevtoolsVuePlugin,\n} from './types'\n\nconst props = defineProps<TanStackDevtoolsVueInit>()\n\nconst titlesToRender = shallowRef<RenderArray>([])\nconst pluginsToRender = shallowRef<RenderArray>([])\nconst div = ref<HTMLElement>()\n\nfunction getPlugin(plugin: TanStackDevtoolsVuePlugin): TanStackDevtoolsPlugin {\n return {\n id: plugin.id,\n name:\n typeof plugin.name === 'string'\n ? plugin.name\n : (e, theme) => {\n const id = e.getAttribute('id')!\n titlesToRender.value = [\n ...titlesToRender.value,\n {\n id,\n component: plugin.name as DefineComponent<any>,\n props: {\n theme,\n },\n },\n ]\n },\n render: (e, theme) => {\n const id = e.getAttribute('id')!\n pluginsToRender.value = [\n ...pluginsToRender.value,\n { id, component: plugin.component, props: { theme, ...plugin.props } },\n ]\n },\n destroy: (pluginId) => {\n pluginsToRender.value = pluginsToRender.value.filter(\n (plugin) => plugin.id !== `${PLUGIN_CONTAINER_ID}-${pluginId}`,\n )\n },\n }\n}\n\nconst devtools = new TanStackDevtoolsCore({\n config: props.config,\n eventBusConfig: props.eventBusConfig,\n plugins: props.plugins?.map(getPlugin),\n})\n\nwatchEffect(() => {\n devtools.setConfig({\n config: props.config,\n eventBusConfig: props.eventBusConfig,\n plugins: props.plugins?.map(getPlugin),\n })\n})\n\nonMounted(() => {\n if (div.value) {\n devtools.mount(div.value)\n }\n})\n\nonScopeDispose(() => {\n devtools.unmount()\n})\n</script>\n\n<template>\n <div ref=\"div\" />\n <Teleport\n v-for=\"title in titlesToRender\"\n :key=\"title.id\"\n :to=\"'#' + title.id\"\n >\n <component :is=\"title.component\" v-bind=\"title.props\" />\n </Teleport>\n <Teleport\n v-for=\"plugin in pluginsToRender\"\n :key=\"plugin.id\"\n :to=\"'#' + plugin.id\"\n >\n <component\n :is=\"plugin.component\"\n :devtools-props=\"plugin.props\"\n v-bind=\"plugin.props\"\n />\n </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;EAWA,MAAM,QAAQ;EAEd,MAAM,iBAAiB,WAAwB,EAAE,CAAA;EACjD,MAAM,kBAAkB,WAAwB,EAAE,CAAA;EAClD,MAAM,MAAM,KAAiB;EAE7B,SAAS,UAAU,QAA2D;AAC5E,UAAO;IACL,IAAI,OAAO;IACX,MACE,OAAO,OAAO,SAAS,WACnB,OAAO,QACN,GAAG,UAAU;KACZ,MAAM,KAAK,EAAE,aAAa,KAAK;AAC/B,oBAAe,QAAQ,CACrB,GAAG,eAAe,OAClB;MACE;MACA,WAAW,OAAO;MAClB,OAAO,EACL,OACD;MACF,CACH;;IAER,SAAS,GAAG,UAAU;KACpB,MAAM,KAAK,EAAE,aAAa,KAAK;AAC/B,qBAAgB,QAAQ,CACtB,GAAG,gBAAgB,OACnB;MAAE;MAAI,WAAW,OAAO;MAAW,OAAO;OAAE;OAAO,GAAG,OAAO;OAAO;MAAE,CACxE;;IAEF,UAAU,aAAa;AACrB,qBAAgB,QAAQ,gBAAgB,MAAM,QAC3C,WAAW,OAAO,OAAO,GAAG,oBAAoB,GAAG,WACtD;;IAEJ;;EAGF,MAAM,WAAW,IAAI,qBAAqB;GACxC,QAAQ,MAAM;GACd,gBAAgB,MAAM;GACtB,SAAS,MAAM,SAAS,IAAI,UAAU;GACvC,CAAA;AAED,oBAAkB;AAChB,YAAS,UAAU;IACjB,QAAQ,MAAM;IACd,gBAAgB,MAAM;IACtB,SAAS,MAAM,SAAS,IAAI,UAAU;IACvC,CAAA;IACF;AAED,kBAAgB;AACd,OAAI,IAAI,MACN,UAAS,MAAM,IAAI,MAAK;IAE3B;AAED,uBAAqB;AACnB,YAAS,SAAQ;IAClB;;;IAIC,mBAAiB,OAAA;cAAR;KAAJ,KAAI;;sBACT,mBAMW,UAAA,MAAA,WALO,eAAA,QAAT,UAAK;yBADd,YAMW,UAAA;MAJR,KAAK,MAAM;MACX,IAAE,MAAQ,MAAM;uBAEjB,YAAwD,wBAAxC,MAAM,UAAS,EAA/B,WAAwD,EAAA,SAAA,MAAA,EAAf,MAAM,MAAK,EAAA,MAAA,GAAA,EAAA,EAAA,GAAA,CAAA,KAAA,CAAA;;sBAEtD,mBAUW,UAAA,MAAA,WATQ,gBAAA,QAAV,WAAM;yBADf,YAUW,UAAA;MARR,KAAK,OAAO;MACZ,IAAE,MAAQ,OAAO;uBAElB,YAIE,wBAHK,OAAO,UAAS,EADvB,WAIE,EAFC,kBAAgB,OAAO,OAAA,EAAA,EAAA,SAAA,MAAA,EAChB,OAAO,MAAK,EAAA,MAAA,IAAA,CAAA,iBAAA,CAAA,EAAA,EAAA,GAAA,CAAA,KAAA,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-devtools",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.14",
|
|
4
4
|
"description": "TanStack Devtools is a set of tools for building advanced devtools for your Vue application.",
|
|
5
5
|
"author": "Damian Osipiuk",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"src"
|
|
40
40
|
],
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@tanstack/devtools": "0.
|
|
42
|
+
"@tanstack/devtools": "0.11.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@vitejs/plugin-vue": "^6.0.1",
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import { defineComponent, shallowRef, ref, watchEffect, onMounted, onScopeDispose, openBlock, createElementBlock, Fragment, createElementVNode, renderList, createBlock, Teleport, resolveDynamicComponent, mergeProps } from "vue";
|
|
2
|
-
import { TanStackDevtoolsCore, PLUGIN_CONTAINER_ID } from "@tanstack/devtools";
|
|
3
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
4
|
-
__name: "vue-devtools",
|
|
5
|
-
props: {
|
|
6
|
-
plugins: {},
|
|
7
|
-
config: {},
|
|
8
|
-
eventBusConfig: {}
|
|
9
|
-
},
|
|
10
|
-
setup(__props) {
|
|
11
|
-
const props = __props;
|
|
12
|
-
const titlesToRender = shallowRef([]);
|
|
13
|
-
const pluginsToRender = shallowRef([]);
|
|
14
|
-
const div = ref();
|
|
15
|
-
function getPlugin(plugin) {
|
|
16
|
-
return {
|
|
17
|
-
id: plugin.id,
|
|
18
|
-
name: typeof plugin.name === "string" ? plugin.name : (e, theme) => {
|
|
19
|
-
const id = e.getAttribute("id");
|
|
20
|
-
titlesToRender.value = [
|
|
21
|
-
...titlesToRender.value,
|
|
22
|
-
{
|
|
23
|
-
id,
|
|
24
|
-
component: plugin.name,
|
|
25
|
-
props: {
|
|
26
|
-
theme
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
];
|
|
30
|
-
},
|
|
31
|
-
render: (e, theme) => {
|
|
32
|
-
const id = e.getAttribute("id");
|
|
33
|
-
pluginsToRender.value = [
|
|
34
|
-
...pluginsToRender.value,
|
|
35
|
-
{ id, component: plugin.component, props: { theme, ...plugin.props } }
|
|
36
|
-
];
|
|
37
|
-
},
|
|
38
|
-
destroy: (pluginId) => {
|
|
39
|
-
pluginsToRender.value = pluginsToRender.value.filter(
|
|
40
|
-
(plugin2) => plugin2.id !== `${PLUGIN_CONTAINER_ID}-${pluginId}`
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
const devtools = new TanStackDevtoolsCore({
|
|
46
|
-
config: props.config,
|
|
47
|
-
eventBusConfig: props.eventBusConfig,
|
|
48
|
-
plugins: props.plugins?.map(getPlugin)
|
|
49
|
-
});
|
|
50
|
-
watchEffect(() => {
|
|
51
|
-
devtools.setConfig({
|
|
52
|
-
config: props.config,
|
|
53
|
-
eventBusConfig: props.eventBusConfig,
|
|
54
|
-
plugins: props.plugins?.map(getPlugin)
|
|
55
|
-
});
|
|
56
|
-
});
|
|
57
|
-
onMounted(() => {
|
|
58
|
-
if (div.value) {
|
|
59
|
-
devtools.mount(div.value);
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
onScopeDispose(() => {
|
|
63
|
-
devtools.unmount();
|
|
64
|
-
});
|
|
65
|
-
return (_ctx, _cache) => {
|
|
66
|
-
return openBlock(), createElementBlock(Fragment, null, [
|
|
67
|
-
createElementVNode("div", {
|
|
68
|
-
ref_key: "div",
|
|
69
|
-
ref: div
|
|
70
|
-
}, null, 512),
|
|
71
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(titlesToRender.value, (title) => {
|
|
72
|
-
return openBlock(), createBlock(Teleport, {
|
|
73
|
-
key: title.id,
|
|
74
|
-
to: "#" + title.id
|
|
75
|
-
}, [
|
|
76
|
-
(openBlock(), createBlock(resolveDynamicComponent(title.component), mergeProps({ ref_for: true }, title.props), null, 16))
|
|
77
|
-
], 8, ["to"]);
|
|
78
|
-
}), 128)),
|
|
79
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(pluginsToRender.value, (plugin) => {
|
|
80
|
-
return openBlock(), createBlock(Teleport, {
|
|
81
|
-
key: plugin.id,
|
|
82
|
-
to: "#" + plugin.id
|
|
83
|
-
}, [
|
|
84
|
-
(openBlock(), createBlock(resolveDynamicComponent(plugin.component), mergeProps({
|
|
85
|
-
"devtools-props": plugin.props
|
|
86
|
-
}, { ref_for: true }, plugin.props), null, 16, ["devtools-props"]))
|
|
87
|
-
], 8, ["to"]);
|
|
88
|
-
}), 128))
|
|
89
|
-
], 64);
|
|
90
|
-
};
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
export {
|
|
94
|
-
_sfc_main as default
|
|
95
|
-
};
|
|
96
|
-
//# sourceMappingURL=vue-devtools.vue.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"vue-devtools.vue.js","sources":["../../src/vue-devtools.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, onScopeDispose, ref, shallowRef, watchEffect } from 'vue'\nimport { PLUGIN_CONTAINER_ID, TanStackDevtoolsCore } from '@tanstack/devtools'\nimport type { DefineComponent } from 'vue'\nimport type { TanStackDevtoolsPlugin } from '@tanstack/devtools'\nimport type {\n RenderArray,\n TanStackDevtoolsVueInit,\n TanStackDevtoolsVuePlugin,\n} from './types'\n\nconst props = defineProps<TanStackDevtoolsVueInit>()\n\nconst titlesToRender = shallowRef<RenderArray>([])\nconst pluginsToRender = shallowRef<RenderArray>([])\nconst div = ref<HTMLElement>()\n\nfunction getPlugin(plugin: TanStackDevtoolsVuePlugin): TanStackDevtoolsPlugin {\n return {\n id: plugin.id,\n name:\n typeof plugin.name === 'string'\n ? plugin.name\n : (e, theme) => {\n const id = e.getAttribute('id')!\n titlesToRender.value = [\n ...titlesToRender.value,\n {\n id,\n component: plugin.name as DefineComponent<any>,\n props: {\n theme,\n },\n },\n ]\n },\n render: (e, theme) => {\n const id = e.getAttribute('id')!\n pluginsToRender.value = [\n ...pluginsToRender.value,\n { id, component: plugin.component, props: { theme, ...plugin.props } },\n ]\n },\n destroy: (pluginId) => {\n pluginsToRender.value = pluginsToRender.value.filter(\n (plugin) => plugin.id !== `${PLUGIN_CONTAINER_ID}-${pluginId}`,\n )\n },\n }\n}\n\nconst devtools = new TanStackDevtoolsCore({\n config: props.config,\n eventBusConfig: props.eventBusConfig,\n plugins: props.plugins?.map(getPlugin),\n})\n\nwatchEffect(() => {\n devtools.setConfig({\n config: props.config,\n eventBusConfig: props.eventBusConfig,\n plugins: props.plugins?.map(getPlugin),\n })\n})\n\nonMounted(() => {\n if (div.value) {\n devtools.mount(div.value)\n }\n})\n\nonScopeDispose(() => {\n devtools.unmount()\n})\n</script>\n\n<template>\n <div ref=\"div\" />\n <Teleport\n v-for=\"title in titlesToRender\"\n :key=\"title.id\"\n :to=\"'#' + title.id\"\n >\n <component :is=\"title.component\" v-bind=\"title.props\" />\n </Teleport>\n <Teleport\n v-for=\"plugin in pluginsToRender\"\n :key=\"plugin.id\"\n :to=\"'#' + plugin.id\"\n >\n <component\n :is=\"plugin.component\"\n :devtools-props=\"plugin.props\"\n v-bind=\"plugin.props\"\n />\n </Teleport>\n</template>\n"],"names":["plugin","_createElementVNode","_createElementBlock","_Fragment","_renderList","_createBlock","_Teleport","_resolveDynamicComponent","_mergeProps","_openBlock"],"mappings":";;;;;;;;;;AAWA,UAAM,QAAQ;AAEd,UAAM,iBAAiB,WAAwB,EAAE;AACjD,UAAM,kBAAkB,WAAwB,EAAE;AAClD,UAAM,MAAM,IAAA;AAEZ,aAAS,UAAU,QAA2D;AAC5E,aAAO;AAAA,QACL,IAAI,OAAO;AAAA,QACX,MACE,OAAO,OAAO,SAAS,WACnB,OAAO,OACP,CAAC,GAAG,UAAU;AACZ,gBAAM,KAAK,EAAE,aAAa,IAAI;AAC9B,yBAAe,QAAQ;AAAA,YACrB,GAAG,eAAe;AAAA,YAClB;AAAA,cACE;AAAA,cACA,WAAW,OAAO;AAAA,cAClB,OAAO;AAAA,gBACL;AAAA,cAAA;AAAA,YACF;AAAA,UACF;AAAA,QAEJ;AAAA,QACN,QAAQ,CAAC,GAAG,UAAU;AACpB,gBAAM,KAAK,EAAE,aAAa,IAAI;AAC9B,0BAAgB,QAAQ;AAAA,YACtB,GAAG,gBAAgB;AAAA,YACnB,EAAE,IAAI,WAAW,OAAO,WAAW,OAAO,EAAE,OAAO,GAAG,OAAO,MAAA,EAAM;AAAA,UAAE;AAAA,QAEzE;AAAA,QACA,SAAS,CAAC,aAAa;AACrB,0BAAgB,QAAQ,gBAAgB,MAAM;AAAA,YAC5C,CAACA,YAAWA,QAAO,OAAO,GAAG,mBAAmB,IAAI,QAAQ;AAAA,UAAA;AAAA,QAEhE;AAAA,MAAA;AAAA,IAEJ;AAEA,UAAM,WAAW,IAAI,qBAAqB;AAAA,MACxC,QAAQ,MAAM;AAAA,MACd,gBAAgB,MAAM;AAAA,MACtB,SAAS,MAAM,SAAS,IAAI,SAAS;AAAA,IAAA,CACtC;AAED,gBAAY,MAAM;AAChB,eAAS,UAAU;AAAA,QACjB,QAAQ,MAAM;AAAA,QACd,gBAAgB,MAAM;AAAA,QACtB,SAAS,MAAM,SAAS,IAAI,SAAS;AAAA,MAAA,CACtC;AAAA,IACH,CAAC;AAED,cAAU,MAAM;AACd,UAAI,IAAI,OAAO;AACb,iBAAS,MAAM,IAAI,KAAK;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,mBAAe,MAAM;AACnB,eAAS,QAAA;AAAA,IACX,CAAC;;;QAICC,mBAAiB,OAAA;AAAA,mBAAR;AAAA,UAAJ,KAAI;AAAA,QAAA;0BACTC,mBAMWC,UAAA,MAAAC,WALO,eAAA,OAAc,CAAvB,UAAK;8BADdC,YAMWC,UAAA;AAAA,YAJR,KAAK,MAAM;AAAA,YACX,IAAE,MAAQ,MAAM;AAAA,UAAA;0BAEjBD,YAAwDE,wBAAxC,MAAM,SAAS,GAA/BC,WAAwD,EAAA,SAAA,QAAf,MAAM,KAAK,GAAA,MAAA,EAAA;AAAA,UAAA;;0BAEtDN,mBAUWC,UAAA,MAAAC,WATQ,gBAAA,OAAe,CAAzB,WAAM;8BADfC,YAUWC,UAAA;AAAA,YARR,KAAK,OAAO;AAAA,YACZ,IAAE,MAAQ,OAAO;AAAA,UAAA;aAElBG,aAAAJ,YAIEE,wBAHK,OAAO,SAAS,GADvBC,WAIE;AAAA,cAFC,kBAAgB,OAAO;AAAA,YAAA,GAChB,EAAA,SAAA,KAAA,GAAA,OAAO,KAAK,GAAA,MAAA,IAAA,CAAA,gBAAA,CAAA;AAAA,UAAA;;;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"vue-devtools.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|