feat: Vue I18n Date Editing at DevTools (#386)

packages/vue-i18n/src/devtools.ts

@@ -10,7 +10,13 @@ import {
   DevToolsPlaceholders,
   DevToolsTimelineEvents
 } from '@intlify/core-base'
-import { isFunction, isObject } from '@intlify/shared'
+import {
+  isFunction,
+  isString,
+  isBoolean,
+  isObject,
+  isArray
+} from '@intlify/shared'
 
 import type { App } from 'vue'
 import type {
@@ -106,6 +112,15 @@ export async function enableDevTools<
             }
           })
 
+          api.on.editInspectorState(payload => {
+            if (
+              payload.app === app &&
+              payload.inspectorId === DevToolsIDs.CUSTOM_INSPECTOR
+            ) {
+              editScope(payload, i18n)
+            }
+          })
+
           api.addTimelineLayer({
             id: DevToolsIDs.TIMELINE,
             label: DevToolsLabels[DevToolsIDs.TIMELINE],
@@ -159,7 +174,7 @@ function inspectComposer(
   instanceData.state.push({
     type,
     key: 'locale',
-    editable: false,
+    editable: true,
     value: composer.locale.value
   })
   instanceData.state.push({
@@ -171,13 +186,13 @@ function inspectComposer(
   instanceData.state.push({
     type,
     key: 'fallbackLocale',
-    editable: false,
+    editable: true,
     value: composer.fallbackLocale.value
   })
   instanceData.state.push({
     type,
     key: 'inheritLocale',
-    editable: false,
+    editable: true,
     value: composer.inheritLocale
   })
   instanceData.state.push({
@@ -278,35 +293,56 @@ function registerScope<
   }
 }
 
-function inspectScope<
+function getComposer<
   Messages,
   DateTimeFormats,
   NumberFormats,
   Legacy extends boolean
 >(
-  payload: HookPayloads[Hooks.GET_INSPECTOR_STATE],
+  nodeId: string,
   i18n: _I18n<Messages, DateTimeFormats, NumberFormats, Legacy>
-): void {
-  if (payload.nodeId === 'global') {
-    payload.state = makeScopeInspectState(
-      i18n.mode === 'composition'
-        ? (i18n.global as Composer)
-        : ((i18n.global as unknown) as VueI18nInternal).__composer
-    )
+): Composer<Messages, DateTimeFormats, NumberFormats> | null {
+  if (nodeId === 'global') {
+    return i18n.mode === 'composition'
+      ? (i18n.global as Composer<Messages, DateTimeFormats, NumberFormats>)
+      : ((i18n.global as unknown) as VueI18nInternal<
+          Messages,
+          DateTimeFormats,
+          NumberFormats
+        >).__composer
   } else {
     const instance = Array.from(i18n.__instances.values()).find(
-      item => item.id.toString() === payload.nodeId
+      item => item.id.toString() === nodeId
     )
     if (instance) {
-      const composer =
-        i18n.mode === 'composition'
-          ? (instance as Composer)
-          : ((instance as unknown) as VueI18nInternal).__composer
-      payload.state = makeScopeInspectState(composer)
+      return i18n.mode === 'composition'
+        ? (instance as Composer<Messages, DateTimeFormats, NumberFormats>)
+        : ((instance as unknown) as VueI18nInternal<
+            Messages,
+            DateTimeFormats,
+            NumberFormats
+          >).__composer
+    } else {
+      return null
     }
   }
 }
 
+function inspectScope<
+  Messages,
+  DateTimeFormats,
+  NumberFormats,
+  Legacy extends boolean
+>(
+  payload: HookPayloads[Hooks.GET_INSPECTOR_STATE],
+  i18n: _I18n<Messages, DateTimeFormats, NumberFormats, Legacy>
+): void {
+  const composer = getComposer(payload.nodeId, i18n)
+  if (composer) {
+    payload.state = makeScopeInspectState(composer)
+  }
+}
+
 function makeScopeInspectState(composer: Composer): CustomInspectorState {
   const state: CustomInspectorState = {}
 
@@ -315,13 +351,13 @@ function makeScopeInspectState(composer: Composer): CustomInspectorState {
     {
       type: localeType,
       key: 'locale',
-      editable: false,
+      editable: true,
       value: composer.locale.value
     },
     {
       type: localeType,
       key: 'fallbackLocale',
-      editable: false,
+      editable: true,
       value: composer.fallbackLocale.value
     },
     {
@@ -333,7 +369,7 @@ function makeScopeInspectState(composer: Composer): CustomInspectorState {
     {
       type: localeType,
       key: 'inheritLocale',
-      editable: false,
+      editable: true,
       value: composer.inheritLocale
     }
   ]
@@ -404,3 +440,30 @@ export function addTimelineEvent(
     })
   }
 }
+
+function editScope<
+  Messages,
+  DateTimeFormats,
+  NumberFormats,
+  Legacy extends boolean
+>(
+  payload: HookPayloads[Hooks.EDIT_INSPECTOR_STATE],
+  i18n: _I18n<Messages, DateTimeFormats, NumberFormats, Legacy>
+): void {
+  const composer = getComposer(payload.nodeId, i18n)
+  if (composer) {
+    const [field] = payload.path
+    if (field === 'locale' && isString(payload.state.value)) {
+      composer.locale.value = payload.state.value
+    } else if (
+      field === 'fallbackLocale' &&
+      (isString(payload.state.value) ||
+        isArray(payload.state.value) ||
+        isObject(payload.state.value))
+    ) {
+      composer.fallbackLocale.value = payload.state.value
+    } else if (field === 'inheritLocale' && isBoolean(payload.state.value)) {
+      composer.inheritLocale = payload.state.value
+    }
+  }
+}