@vue/devtools-kit 7.0.11 → 7.0.12

package/dist/index.cjs

@@ -33,9 +33,9 @@ var __toESM = (mod, isNodeMode, target8) => (target8 = mod != null ? __create(__
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/.pnpm/tsup@8.0.1_postcss@8.4.32_typescript@5.3.3/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.0.1_postcss@8.4.33_typescript@5.3.3/node_modules/tsup/assets/cjs_shims.js
 var init_cjs_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.0.1_postcss@8.4.32_typescript@5.3.3/node_modules/tsup/assets/cjs_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.0.1_postcss@8.4.33_typescript@5.3.3/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
   }
 });
@@ -1605,6 +1605,8 @@ __export(src_exports, {
   specialTypeRE: () => specialTypeRE,
   stringify: () => stringify,
   symbolRE: () => symbolRE,
+  toEdit: () => toEdit,
+  toSubmit: () => toSubmit,
   vueBuiltins: () => vueBuiltins
 });
 module.exports = __toCommonJS(src_exports);
@@ -1903,7 +1905,7 @@ init_cjs_shims();
 // src/shared/util.ts
 init_cjs_shims();
 
-// src/core/component/state/format.ts
+// src/core/component/state/replacer.ts
 init_cjs_shims();
 
 // src/core/component/state/constants.ts
@@ -1978,157 +1980,6 @@ var ESC = {
   "&": "&"
 };
 
-// src/core/component/state/is.ts
-init_cjs_shims();
-function isVueInstance(value) {
-  return value._ && Object.keys(value._).includes("vnode");
-}
-function isPlainObject(obj) {
-  return Object.prototype.toString.call(obj) === "[object Object]";
-}
-function isPrimitive(data) {
-  if (data == null)
-    return true;
-  const type = typeof data;
-  return type === "string" || type === "number" || type === "boolean";
-}
-function isRef(raw) {
-  return !!raw.__v_isRef;
-}
-function isComputed(raw) {
-  return isRef(raw) && !!raw.effect;
-}
-function isReactive(raw) {
-  return !!raw.__v_isReactive;
-}
-function isReadOnly(raw) {
-  return !!raw.__v_isReadonly;
-}
-
-// src/core/component/state/util.ts
-init_cjs_shims();
-function internalStateTokenToString(value) {
-  if (value === null)
-    return "null";
-  else if (value === UNDEFINED)
-    return "undefined";
-  else if (value === NAN)
-    return "NaN";
-  else if (value === INFINITY)
-    return "Infinity";
-  else if (value === NEGATIVE_INFINITY)
-    return "-Infinity";
-  return false;
-}
-function getPropType(type) {
-  if (Array.isArray(type))
-    return type.map((t) => getPropType(t)).join(" or ");
-  if (type == null)
-    return "null";
-  const match = type.toString().match(fnTypeRE);
-  return typeof type === "function" ? match && match[1] || "any" : "any";
-}
-function sanitize(data) {
-  if (!isPrimitive(data) && !Array.isArray(data) && !isPlainObject(data)) {
-    return Object.prototype.toString.call(data);
-  } else {
-    return data;
-  }
-}
-function getSetupStateType(raw) {
-  return {
-    ref: isRef(raw),
-    computed: isComputed(raw),
-    reactive: isReactive(raw),
-    readonly: isReadOnly(raw)
-  };
-}
-function toRaw(value) {
-  if (value == null ? void 0 : value.__v_raw)
-    return value.__v_raw;
-  return value;
-}
-function escape(s) {
-  return s.replace(/[<>"&]/g, (s2) => {
-    return ESC[s2] || s2;
-  });
-}
-
-// src/core/component/state/format.ts
-function getInspectorStateValueType(value, raw = true) {
-  const type = typeof value;
-  if (value == null || value === UNDEFINED) {
-    return "null";
-  } else if (type === "boolean" || type === "number" || value === INFINITY || value === NEGATIVE_INFINITY || value === NAN) {
-    return "literal";
-  } else if (value == null ? void 0 : value._custom) {
-    if (raw || value._custom.display != null || value._custom.displayText != null)
-      return "custom";
-    else
-      return getInspectorStateValueType(value._custom.value);
-  } else if (typeof value === "string") {
-    const typeMatch = specialTypeRE.exec(value);
-    if (typeMatch) {
-      const [, type2] = typeMatch;
-      return `native ${type2}`;
-    } else {
-      return "string";
-    }
-  } else if (Array.isArray(value) || (value == null ? void 0 : value._isArray)) {
-    return "array";
-  } else if (isPlainObject(value)) {
-    return "plain-object";
-  } else {
-    return "unknown";
-  }
-}
-function formatInspectorStateValue(value, quotes = false) {
-  var _a8, _b8;
-  let result;
-  const type = getInspectorStateValueType(value, false);
-  if (type !== "custom" && (value == null ? void 0 : value._custom))
-    value = value._custom.value;
-  if (result = internalStateTokenToString(value)) {
-    return result;
-  } else if (type === "custom") {
-    const nestedName = ((_a8 = value._custom.value) == null ? void 0 : _a8._custom) && formatInspectorStateValue(value._custom.value);
-    return nestedName || value._custom.displayText || value._custom.display;
-  } else if (type === "array") {
-    return `Array[${value.length}]`;
-  } else if (type === "plain-object") {
-    return `Object${Object.keys(value).length ? "" : " (empty)"}`;
-  } else if (type == null ? void 0 : type.includes("native")) {
-    return escape((_b8 = specialTypeRE.exec(value)) == null ? void 0 : _b8[2]);
-  } else if (typeof value === "string") {
-    const typeMatch = value.match(rawTypeRE);
-    if (typeMatch)
-      value = escape(typeMatch[1]);
-    else if (quotes)
-      value = `<span>"</span>${escape(value)}<span>"</span>`;
-    else
-      value = escape(value);
-    value = value.replace(/ /g, "&nbsp;").replace(/\n/g, "<span>\\n</span>");
-  }
-  return value;
-}
-function getRawValue(value) {
-  var _a8, _b8, _c, _d;
-  const isCustom = getInspectorStateValueType(value) === "custom";
-  let inherit = {};
-  if (isCustom) {
-    const data = value;
-    const nestedCustom = typeof ((_a8 = data._custom) == null ? void 0 : _a8.value) === "object" && "_custom" in data._custom.value ? getRawValue((_b8 = data._custom) == null ? void 0 : _b8.value) : { inherit: void 0, value: void 0 };
-    inherit = nestedCustom.inherit || ((_c = data._custom) == null ? void 0 : _c.fields) || {};
-    value = nestedCustom.value || ((_d = data._custom) == null ? void 0 : _d.value);
-  }
-  if (value && value._isArray)
-    value = value.items;
-  return { value, inherit };
-}
-
-// src/core/component/state/replacer.ts
-init_cjs_shims();
-
 // src/core/component/state/custom.ts
 init_cjs_shims();
 
@@ -2235,6 +2086,99 @@ function getComponentInstance(appRecord, instanceId) {
 // src/core/component/state/process.ts
 init_cjs_shims();
 var import_devtools_shared5 = require("@vue/devtools-shared");
+
+// src/core/component/state/util.ts
+init_cjs_shims();
+
+// src/core/component/state/is.ts
+init_cjs_shims();
+function isVueInstance(value) {
+  return value._ && Object.keys(value._).includes("vnode");
+}
+function isPlainObject(obj) {
+  return Object.prototype.toString.call(obj) === "[object Object]";
+}
+function isPrimitive(data) {
+  if (data == null)
+    return true;
+  const type = typeof data;
+  return type === "string" || type === "number" || type === "boolean";
+}
+function isRef(raw) {
+  return !!raw.__v_isRef;
+}
+function isComputed(raw) {
+  return isRef(raw) && !!raw.effect;
+}
+function isReactive(raw) {
+  return !!raw.__v_isReactive;
+}
+function isReadOnly(raw) {
+  return !!raw.__v_isReadonly;
+}
+
+// src/core/component/state/util.ts
+var tokenMap = {
+  [UNDEFINED]: "undefined",
+  [NAN]: "NaN",
+  [INFINITY]: "Infinity",
+  [NEGATIVE_INFINITY]: "-Infinity"
+};
+var reversedTokenMap = Object.entries(tokenMap).reduce((acc, [key, value]) => {
+  acc[value] = key;
+  return acc;
+}, {});
+function internalStateTokenToString(value) {
+  if (value === null)
+    return "null";
+  return typeof value === "string" && tokenMap[value] || false;
+}
+function replaceTokenToString(value) {
+  const replaceRegex = new RegExp(`"(${Object.keys(tokenMap).join("|")})"`, "g");
+  return value.replace(replaceRegex, (_, g1) => tokenMap[g1]);
+}
+function replaceStringToToken(value) {
+  const literalValue = reversedTokenMap[value.trim()];
+  if (literalValue)
+    return `"${literalValue}"`;
+  const replaceRegex = new RegExp(`:\\s*(${Object.keys(reversedTokenMap).join("|")})`, "g");
+  return value.replace(replaceRegex, (_, g1) => `:"${reversedTokenMap[g1]}"`);
+}
+function getPropType(type) {
+  if (Array.isArray(type))
+    return type.map((t) => getPropType(t)).join(" or ");
+  if (type == null)
+    return "null";
+  const match = type.toString().match(fnTypeRE);
+  return typeof type === "function" ? match && match[1] || "any" : "any";
+}
+function sanitize(data) {
+  if (!isPrimitive(data) && !Array.isArray(data) && !isPlainObject(data)) {
+    return Object.prototype.toString.call(data);
+  } else {
+    return data;
+  }
+}
+function getSetupStateType(raw) {
+  return {
+    ref: isRef(raw),
+    computed: isComputed(raw),
+    reactive: isReactive(raw),
+    readonly: isReadOnly(raw)
+  };
+}
+function toRaw(value) {
+  if (value == null ? void 0 : value.__v_raw)
+    return value.__v_raw;
+  return value;
+}
+function escape(s) {
+  return s.replace(/[<>"&]/g, (s2) => {
+    return ESC[s2] || s2;
+  });
+}
+
+// src/core/component/state/process.ts
 function mergeOptions(to, from, instance) {
   if (typeof from === "function")
     from = from.options;
@@ -2904,6 +2848,86 @@ function parseCircularAutoChunks(data, reviver2 = null) {
   }
 }
 
+// src/core/component/state/format.ts
+init_cjs_shims();
+function getInspectorStateValueType(value, raw = true) {
+  const type = typeof value;
+  if (value == null || value === UNDEFINED) {
+    return "null";
+  } else if (type === "boolean" || type === "number" || value === INFINITY || value === NEGATIVE_INFINITY || value === NAN) {
+    return "literal";
+  } else if (value == null ? void 0 : value._custom) {
+    if (raw || value._custom.display != null || value._custom.displayText != null)
+      return "custom";
+    else
+      return getInspectorStateValueType(value._custom.value);
+  } else if (typeof value === "string") {
+    const typeMatch = specialTypeRE.exec(value);
+    if (typeMatch) {
+      const [, type2] = typeMatch;
+      return `native ${type2}`;
+    } else {
+      return "string";
+    }
+  } else if (Array.isArray(value) || (value == null ? void 0 : value._isArray)) {
+    return "array";
+  } else if (isPlainObject(value)) {
+    return "plain-object";
+  } else {
+    return "unknown";
+  }
+}
+function formatInspectorStateValue(value, quotes = false) {
+  var _a8, _b8;
+  let result;
+  const type = getInspectorStateValueType(value, false);
+  if (type !== "custom" && (value == null ? void 0 : value._custom))
+    value = value._custom.value;
+  if (result = internalStateTokenToString(value)) {
+    return result;
+  } else if (type === "custom") {
+    const nestedName = ((_a8 = value._custom.value) == null ? void 0 : _a8._custom) && formatInspectorStateValue(value._custom.value);
+    return nestedName || value._custom.displayText || value._custom.display;
+  } else if (type === "array") {
+    return `Array[${value.length}]`;
+  } else if (type === "plain-object") {
+    return `Object${Object.keys(value).length ? "" : " (empty)"}`;
+  } else if (type == null ? void 0 : type.includes("native")) {
+    return escape((_b8 = specialTypeRE.exec(value)) == null ? void 0 : _b8[2]);
+  } else if (typeof value === "string") {
+    const typeMatch = value.match(rawTypeRE);
+    if (typeMatch)
+      value = escape(typeMatch[1]);
+    else if (quotes)
+      value = `<span>"</span>${escape(value)}<span>"</span>`;
+    else
+      value = escape(value);
+    value = value.replace(/ /g, "&nbsp;").replace(/\n/g, "<span>\\n</span>");
+  }
+  return value;
+}
+function getRawValue(value) {
+  var _a8, _b8;
+  const isCustom = getInspectorStateValueType(value) === "custom";
+  let inherit = {};
+  if (isCustom) {
+    const data = value;
+    const customValue = (_a8 = data._custom) == null ? void 0 : _a8.value;
+    const nestedCustom = typeof customValue === "object" && customValue !== null && "_custom" in customValue ? getRawValue(customValue) : { inherit: void 0, value: void 0 };
+    inherit = nestedCustom.inherit || ((_b8 = data._custom) == null ? void 0 : _b8.fields) || {};
+    value = nestedCustom.value || customValue;
+  }
+  if (value && value._isArray)
+    value = value.items;
+  return { value, inherit };
+}
+function toEdit(value) {
+  return replaceTokenToString(JSON.stringify(value));
+}
+function toSubmit(value) {
+  return JSON.parse(replaceStringToToken(value), reviver);
+}
+
 // src/shared/util.ts
 function stringify(data) {
   return stringifyCircularAutoChunks(data, stringifyReplacer);
@@ -3027,15 +3051,14 @@ var RefStateEditor = class {
     if ((0, import_vue2.isRef)(ref)) {
       ref.value = value;
     } else {
-      const obj = JSON.parse(value);
       const previousKeys = Object.keys(ref);
-      const currentKeys = Object.keys(obj);
+      const currentKeys = Object.keys(value);
       if (previousKeys.length > currentKeys.length) {
         const diffKeys = previousKeys.filter((key) => !currentKeys.includes(key));
         diffKeys.forEach((key) => Reflect.deleteProperty(ref, key));
       }
       currentKeys.forEach((key) => {
-        Reflect.set(ref, key, Reflect.get(obj, key));
+        Reflect.set(ref, key, Reflect.get(value, key));
       });
     }
   }
@@ -4306,5 +4329,7 @@ var devtools = {
   specialTypeRE,
   stringify,
   symbolRE,
+  toEdit,
+  toSubmit,
   vueBuiltins
 });

package/dist/index.d.cts

@@ -381,6 +381,8 @@ declare function addCustomTab(tab: CustomTab): void;
 declare function getInspectorStateValueType(value: any, raw?: boolean): string;
 declare function formatInspectorStateValue(value: any, quotes?: boolean): any;
 declare function getRawValue(value: InspectorState['value']): any;
+declare function toEdit(value: unknown): string;
+declare function toSubmit(value: string): any;
 
 declare function stringify<T extends object = Record<string, unknown>>(data: T): string | string[];
 declare function parse(data: string, revive?: boolean): any;
@@ -620,4 +622,4 @@ declare const devtools: {
     readonly api: DevToolsPluginApi;
 };
 
-export { type AddInspectorApiPayload, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, ESC, INFINITY, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, MAX_ARRAY_SIZE, MAX_STRING_SIZE, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PropPath, type RouterInfo, RouterKey, type ScrollToComponentOptions, type TimelineEvent, type TimelineEventData, type ToggleComponentInspectorOptions, UNDEFINED, type VueInspector, addCustomCommand, addCustomTab, devtools, devtoolsRouterInfo, fnTypeRE, formatInspectorStateValue, getInspectorStateValueType, getRawValue, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, vueBuiltins };
+export { type AddInspectorApiPayload, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, ESC, INFINITY, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, MAX_ARRAY_SIZE, MAX_STRING_SIZE, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PropPath, type RouterInfo, RouterKey, type ScrollToComponentOptions, type TimelineEvent, type TimelineEventData, type ToggleComponentInspectorOptions, UNDEFINED, type VueInspector, addCustomCommand, addCustomTab, devtools, devtoolsRouterInfo, fnTypeRE, formatInspectorStateValue, getInspectorStateValueType, getRawValue, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, toEdit, toSubmit, vueBuiltins };

package/dist/index.d.ts

@@ -381,6 +381,8 @@ declare function addCustomTab(tab: CustomTab): void;
 declare function getInspectorStateValueType(value: any, raw?: boolean): string;
 declare function formatInspectorStateValue(value: any, quotes?: boolean): any;
 declare function getRawValue(value: InspectorState['value']): any;
+declare function toEdit(value: unknown): string;
+declare function toSubmit(value: string): any;
 
 declare function stringify<T extends object = Record<string, unknown>>(data: T): string | string[];
 declare function parse(data: string, revive?: boolean): any;
@@ -620,4 +622,4 @@ declare const devtools: {
     readonly api: DevToolsPluginApi;
 };
 
-export { type AddInspectorApiPayload, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, ESC, INFINITY, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, MAX_ARRAY_SIZE, MAX_STRING_SIZE, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PropPath, type RouterInfo, RouterKey, type ScrollToComponentOptions, type TimelineEvent, type TimelineEventData, type ToggleComponentInspectorOptions, UNDEFINED, type VueInspector, addCustomCommand, addCustomTab, devtools, devtoolsRouterInfo, fnTypeRE, formatInspectorStateValue, getInspectorStateValueType, getRawValue, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, vueBuiltins };
+export { type AddInspectorApiPayload, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, ESC, INFINITY, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, MAX_ARRAY_SIZE, MAX_STRING_SIZE, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PropPath, type RouterInfo, RouterKey, type ScrollToComponentOptions, type TimelineEvent, type TimelineEventData, type ToggleComponentInspectorOptions, UNDEFINED, type VueInspector, addCustomCommand, addCustomTab, devtools, devtoolsRouterInfo, fnTypeRE, formatInspectorStateValue, getInspectorStateValueType, getRawValue, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, toEdit, toSubmit, vueBuiltins };

package/dist/index.mjs

@@ -27,9 +27,9 @@ var __toESM = (mod, isNodeMode, target8) => (target8 = mod != null ? __create(__
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@8.0.1_postcss@8.4.32_typescript@5.3.3/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@8.0.1_postcss@8.4.33_typescript@5.3.3/node_modules/tsup/assets/esm_shims.js
 var init_esm_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.0.1_postcss@8.4.32_typescript@5.3.3/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.0.1_postcss@8.4.33_typescript@5.3.3/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
   }
 });
@@ -1868,7 +1868,7 @@ init_esm_shims();
 // src/shared/util.ts
 init_esm_shims();
 
-// src/core/component/state/format.ts
+// src/core/component/state/replacer.ts
 init_esm_shims();
 
 // src/core/component/state/constants.ts
@@ -1943,157 +1943,6 @@ var ESC = {
   "&": "&"
 };
 
-// src/core/component/state/is.ts
-init_esm_shims();
-function isVueInstance(value) {
-  return value._ && Object.keys(value._).includes("vnode");
-}
-function isPlainObject(obj) {
-  return Object.prototype.toString.call(obj) === "[object Object]";
-}
-function isPrimitive(data) {
-  if (data == null)
-    return true;
-  const type = typeof data;
-  return type === "string" || type === "number" || type === "boolean";
-}
-function isRef(raw) {
-  return !!raw.__v_isRef;
-}
-function isComputed(raw) {
-  return isRef(raw) && !!raw.effect;
-}
-function isReactive(raw) {
-  return !!raw.__v_isReactive;
-}
-function isReadOnly(raw) {
-  return !!raw.__v_isReadonly;
-}
-
-// src/core/component/state/util.ts
-init_esm_shims();
-function internalStateTokenToString(value) {
-  if (value === null)
-    return "null";
-  else if (value === UNDEFINED)
-    return "undefined";
-  else if (value === NAN)
-    return "NaN";
-  else if (value === INFINITY)
-    return "Infinity";
-  else if (value === NEGATIVE_INFINITY)
-    return "-Infinity";
-  return false;
-}
-function getPropType(type) {
-  if (Array.isArray(type))
-    return type.map((t) => getPropType(t)).join(" or ");
-  if (type == null)
-    return "null";
-  const match = type.toString().match(fnTypeRE);
-  return typeof type === "function" ? match && match[1] || "any" : "any";
-}
-function sanitize(data) {
-  if (!isPrimitive(data) && !Array.isArray(data) && !isPlainObject(data)) {
-    return Object.prototype.toString.call(data);
-  } else {
-    return data;
-  }
-}
-function getSetupStateType(raw) {
-  return {
-    ref: isRef(raw),
-    computed: isComputed(raw),
-    reactive: isReactive(raw),
-    readonly: isReadOnly(raw)
-  };
-}
-function toRaw(value) {
-  if (value == null ? void 0 : value.__v_raw)
-    return value.__v_raw;
-  return value;
-}
-function escape(s) {
-  return s.replace(/[<>"&]/g, (s2) => {
-    return ESC[s2] || s2;
-  });
-}
-
-// src/core/component/state/format.ts
-function getInspectorStateValueType(value, raw = true) {
-  const type = typeof value;
-  if (value == null || value === UNDEFINED) {
-    return "null";
-  } else if (type === "boolean" || type === "number" || value === INFINITY || value === NEGATIVE_INFINITY || value === NAN) {
-    return "literal";
-  } else if (value == null ? void 0 : value._custom) {
-    if (raw || value._custom.display != null || value._custom.displayText != null)
-      return "custom";
-    else
-      return getInspectorStateValueType(value._custom.value);
-  } else if (typeof value === "string") {
-    const typeMatch = specialTypeRE.exec(value);
-    if (typeMatch) {
-      const [, type2] = typeMatch;
-      return `native ${type2}`;
-    } else {
-      return "string";
-    }
-  } else if (Array.isArray(value) || (value == null ? void 0 : value._isArray)) {
-    return "array";
-  } else if (isPlainObject(value)) {
-    return "plain-object";
-  } else {
-    return "unknown";
-  }
-}
-function formatInspectorStateValue(value, quotes = false) {
-  var _a8, _b8;
-  let result;
-  const type = getInspectorStateValueType(value, false);
-  if (type !== "custom" && (value == null ? void 0 : value._custom))
-    value = value._custom.value;
-  if (result = internalStateTokenToString(value)) {
-    return result;
-  } else if (type === "custom") {
-    const nestedName = ((_a8 = value._custom.value) == null ? void 0 : _a8._custom) && formatInspectorStateValue(value._custom.value);
-    return nestedName || value._custom.displayText || value._custom.display;
-  } else if (type === "array") {
-    return `Array[${value.length}]`;
-  } else if (type === "plain-object") {
-    return `Object${Object.keys(value).length ? "" : " (empty)"}`;
-  } else if (type == null ? void 0 : type.includes("native")) {
-    return escape((_b8 = specialTypeRE.exec(value)) == null ? void 0 : _b8[2]);
-  } else if (typeof value === "string") {
-    const typeMatch = value.match(rawTypeRE);
-    if (typeMatch)
-      value = escape(typeMatch[1]);
-    else if (quotes)
-      value = `<span>"</span>${escape(value)}<span>"</span>`;
-    else
-      value = escape(value);
-    value = value.replace(/ /g, "&nbsp;").replace(/\n/g, "<span>\\n</span>");
-  }
-  return value;
-}
-function getRawValue(value) {
-  var _a8, _b8, _c, _d;
-  const isCustom = getInspectorStateValueType(value) === "custom";
-  let inherit = {};
-  if (isCustom) {
-    const data = value;
-    const nestedCustom = typeof ((_a8 = data._custom) == null ? void 0 : _a8.value) === "object" && "_custom" in data._custom.value ? getRawValue((_b8 = data._custom) == null ? void 0 : _b8.value) : { inherit: void 0, value: void 0 };
-    inherit = nestedCustom.inherit || ((_c = data._custom) == null ? void 0 : _c.fields) || {};
-    value = nestedCustom.value || ((_d = data._custom) == null ? void 0 : _d.value);
-  }
-  if (value && value._isArray)
-    value = value.items;
-  return { value, inherit };
-}
-
-// src/core/component/state/replacer.ts
-init_esm_shims();
-
 // src/core/component/state/custom.ts
 init_esm_shims();
 
@@ -2200,6 +2049,99 @@ function getComponentInstance(appRecord, instanceId) {
 // src/core/component/state/process.ts
 init_esm_shims();
 import { camelize } from "@vue/devtools-shared";
+
+// src/core/component/state/util.ts
+init_esm_shims();
+
+// src/core/component/state/is.ts
+init_esm_shims();
+function isVueInstance(value) {
+  return value._ && Object.keys(value._).includes("vnode");
+}
+function isPlainObject(obj) {
+  return Object.prototype.toString.call(obj) === "[object Object]";
+}
+function isPrimitive(data) {
+  if (data == null)
+    return true;
+  const type = typeof data;
+  return type === "string" || type === "number" || type === "boolean";
+}
+function isRef(raw) {
+  return !!raw.__v_isRef;
+}
+function isComputed(raw) {
+  return isRef(raw) && !!raw.effect;
+}
+function isReactive(raw) {
+  return !!raw.__v_isReactive;
+}
+function isReadOnly(raw) {
+  return !!raw.__v_isReadonly;
+}
+
+// src/core/component/state/util.ts
+var tokenMap = {
+  [UNDEFINED]: "undefined",
+  [NAN]: "NaN",
+  [INFINITY]: "Infinity",
+  [NEGATIVE_INFINITY]: "-Infinity"
+};
+var reversedTokenMap = Object.entries(tokenMap).reduce((acc, [key, value]) => {
+  acc[value] = key;
+  return acc;
+}, {});
+function internalStateTokenToString(value) {
+  if (value === null)
+    return "null";
+  return typeof value === "string" && tokenMap[value] || false;
+}
+function replaceTokenToString(value) {
+  const replaceRegex = new RegExp(`"(${Object.keys(tokenMap).join("|")})"`, "g");
+  return value.replace(replaceRegex, (_, g1) => tokenMap[g1]);
+}
+function replaceStringToToken(value) {
+  const literalValue = reversedTokenMap[value.trim()];
+  if (literalValue)
+    return `"${literalValue}"`;
+  const replaceRegex = new RegExp(`:\\s*(${Object.keys(reversedTokenMap).join("|")})`, "g");
+  return value.replace(replaceRegex, (_, g1) => `:"${reversedTokenMap[g1]}"`);
+}
+function getPropType(type) {
+  if (Array.isArray(type))
+    return type.map((t) => getPropType(t)).join(" or ");
+  if (type == null)
+    return "null";
+  const match = type.toString().match(fnTypeRE);
+  return typeof type === "function" ? match && match[1] || "any" : "any";
+}
+function sanitize(data) {
+  if (!isPrimitive(data) && !Array.isArray(data) && !isPlainObject(data)) {
+    return Object.prototype.toString.call(data);
+  } else {
+    return data;
+  }
+}
+function getSetupStateType(raw) {
+  return {
+    ref: isRef(raw),
+    computed: isComputed(raw),
+    reactive: isReactive(raw),
+    readonly: isReadOnly(raw)
+  };
+}
+function toRaw(value) {
+  if (value == null ? void 0 : value.__v_raw)
+    return value.__v_raw;
+  return value;
+}
+function escape(s) {
+  return s.replace(/[<>"&]/g, (s2) => {
+    return ESC[s2] || s2;
+  });
+}
+
+// src/core/component/state/process.ts
 function mergeOptions(to, from, instance) {
   if (typeof from === "function")
     from = from.options;
@@ -2869,6 +2811,86 @@ function parseCircularAutoChunks(data, reviver2 = null) {
   }
 }
 
+// src/core/component/state/format.ts
+init_esm_shims();
+function getInspectorStateValueType(value, raw = true) {
+  const type = typeof value;
+  if (value == null || value === UNDEFINED) {
+    return "null";
+  } else if (type === "boolean" || type === "number" || value === INFINITY || value === NEGATIVE_INFINITY || value === NAN) {
+    return "literal";
+  } else if (value == null ? void 0 : value._custom) {
+    if (raw || value._custom.display != null || value._custom.displayText != null)
+      return "custom";
+    else
+      return getInspectorStateValueType(value._custom.value);
+  } else if (typeof value === "string") {
+    const typeMatch = specialTypeRE.exec(value);
+    if (typeMatch) {
+      const [, type2] = typeMatch;
+      return `native ${type2}`;
+    } else {
+      return "string";
+    }
+  } else if (Array.isArray(value) || (value == null ? void 0 : value._isArray)) {
+    return "array";
+  } else if (isPlainObject(value)) {
+    return "plain-object";
+  } else {
+    return "unknown";
+  }
+}
+function formatInspectorStateValue(value, quotes = false) {
+  var _a8, _b8;
+  let result;
+  const type = getInspectorStateValueType(value, false);
+  if (type !== "custom" && (value == null ? void 0 : value._custom))
+    value = value._custom.value;
+  if (result = internalStateTokenToString(value)) {
+    return result;
+  } else if (type === "custom") {
+    const nestedName = ((_a8 = value._custom.value) == null ? void 0 : _a8._custom) && formatInspectorStateValue(value._custom.value);
+    return nestedName || value._custom.displayText || value._custom.display;
+  } else if (type === "array") {
+    return `Array[${value.length}]`;
+  } else if (type === "plain-object") {
+    return `Object${Object.keys(value).length ? "" : " (empty)"}`;
+  } else if (type == null ? void 0 : type.includes("native")) {
+    return escape((_b8 = specialTypeRE.exec(value)) == null ? void 0 : _b8[2]);
+  } else if (typeof value === "string") {
+    const typeMatch = value.match(rawTypeRE);
+    if (typeMatch)
+      value = escape(typeMatch[1]);
+    else if (quotes)
+      value = `<span>"</span>${escape(value)}<span>"</span>`;
+    else
+      value = escape(value);
+    value = value.replace(/ /g, "&nbsp;").replace(/\n/g, "<span>\\n</span>");
+  }
+  return value;
+}
+function getRawValue(value) {
+  var _a8, _b8;
+  const isCustom = getInspectorStateValueType(value) === "custom";
+  let inherit = {};
+  if (isCustom) {
+    const data = value;
+    const customValue = (_a8 = data._custom) == null ? void 0 : _a8.value;
+    const nestedCustom = typeof customValue === "object" && customValue !== null && "_custom" in customValue ? getRawValue(customValue) : { inherit: void 0, value: void 0 };
+    inherit = nestedCustom.inherit || ((_b8 = data._custom) == null ? void 0 : _b8.fields) || {};
+    value = nestedCustom.value || customValue;
+  }
+  if (value && value._isArray)
+    value = value.items;
+  return { value, inherit };
+}
+function toEdit(value) {
+  return replaceTokenToString(JSON.stringify(value));
+}
+function toSubmit(value) {
+  return JSON.parse(replaceStringToToken(value), reviver);
+}
+
 // src/shared/util.ts
 function stringify(data) {
   return stringifyCircularAutoChunks(data, stringifyReplacer);
@@ -2992,15 +3014,14 @@ var RefStateEditor = class {
     if (isRef2(ref)) {
       ref.value = value;
     } else {
-      const obj = JSON.parse(value);
       const previousKeys = Object.keys(ref);
-      const currentKeys = Object.keys(obj);
+      const currentKeys = Object.keys(value);
       if (previousKeys.length > currentKeys.length) {
         const diffKeys = previousKeys.filter((key) => !currentKeys.includes(key));
         diffKeys.forEach((key) => Reflect.deleteProperty(ref, key));
       }
       currentKeys.forEach((key) => {
-        Reflect.set(ref, key, Reflect.get(obj, key));
+        Reflect.set(ref, key, Reflect.get(value, key));
       });
     }
   }
@@ -4270,5 +4291,7 @@ export {
   specialTypeRE,
   stringify,
   symbolRE,
+  toEdit,
+  toSubmit,
   vueBuiltins
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.0.11",
+  "version": "7.0.12",
   "author": "webfansplz",
   "license": "MIT",
   "exports": {
@@ -21,11 +21,11 @@
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
-    "@vue/devtools-schema": "^7.0.11",
-    "@vue/devtools-shared": "^7.0.11"
+    "@vue/devtools-schema": "^7.0.12",
+    "@vue/devtools-shared": "^7.0.12"
   },
   "devDependencies": {
-    "vue": "^3.4.14",
+    "vue": "^3.4.15",
     "vue-router": "^4.2.5"
   },
   "scripts": {