fix: reduce devtools pkgs and size (#1823)

Author: kazupon

packages/core-base/package.json

@@ -37,8 +37,7 @@
     "@intlify/shared": "workspace:*"
   },
   "devDependencies": {
-    "@intlify/devtools-if": "workspace:*",
-    "@intlify/vue-devtools": "workspace:*"
+    "@intlify/devtools-types": "workspace:*"
   },
   "engines": {
     "node": ">= 16"

packages/core-base/src/context.ts

@@ -12,16 +12,13 @@ import {
   isObject,
   warnOnce
 } from '@intlify/shared'
-import { VueDevToolsTimelineEvents } from '@intlify/vue-devtools'
 import { initI18nDevTools } from './devtools'
 import { CoreWarnCodes, getWarnMessage } from './warnings'
 import { resolveWithKeyValue } from './resolver'
 import { fallbackWithSimple } from './fallbacker'
 
 import type { CompileOptions, ResourceNode } from '@intlify/message-compiler'
-// HACK: embbed `@intlify/vue-devtools` types to `.d.ts`, because `@intlify/dev-tools` is devDependencies
-// TODO: Consider this type dependency when separating into intlify/core
-import type { VueDevToolsEmitter } from '../../vue-devtools/src/index'
+import type { VueDevToolsEmitter } from '@intlify/devtools-types'
 import type { Path, MessageResolver } from './resolver'
 import type {
   Locale,
@@ -661,7 +658,7 @@ export function handleMissing<Message = string>(
   if (__DEV__) {
     const emitter = (context as unknown as CoreInternalContext).__v_emitter
     if (emitter) {
-      emitter.emit(VueDevToolsTimelineEvents.MISSING, {
+      emitter.emit('missing', {
         locale,
         key,
         type,

packages/core-base/src/datetime.ts

@@ -17,7 +17,6 @@ import { CoreWarnCodes, getWarnMessage } from './warnings'
 import { CoreErrorCodes, createCoreError } from './errors'
 import { getLocale } from './fallbacker'
 import { Availabilities } from './intl'
-import { VueDevToolsTimelineEvents } from '@intlify/vue-devtools'
 
 import type { Locale, FallbackLocale } from './runtime'
 import type {
@@ -254,7 +253,7 @@ export function datetime<
     if (__DEV__ && locale !== targetLocale) {
       const emitter = (context as unknown as CoreInternalContext).__v_emitter
       if (emitter) {
-        emitter.emit(VueDevToolsTimelineEvents.FALBACK, {
+        emitter.emit('fallback', {
           type,
           key,
           from,

packages/core-base/src/devtools.ts

@@ -1,10 +1,8 @@
-// HACK: embbed `@intlify/devtools-if` enum and type to `.d.ts`, because `@intlify/dev-tools` is devDependencies
-// TODO: Consider this type dependency when separating into intlify/core
-import {
+import type {
   IntlifyDevToolsHooks,
-  IntlifyDevToolsEmitter,
-  IntlifyDevToolsHookPayloads
-} from '../../devtools-if/src/index'
+  IntlifyDevToolsHookPayloads,
+  IntlifyDevToolsEmitter
+} from '@intlify/devtools-types'
 
 let devtools: IntlifyDevToolsEmitter | null = null
 
@@ -23,17 +21,16 @@ export function initI18nDevTools(
 ): void {
   // TODO: queue if devtools is undefined
   devtools &&
-    devtools.emit(IntlifyDevToolsHooks.I18nInit, {
+    devtools.emit('i18n:init', {
       timestamp: Date.now(),
       i18n,
       version,
       meta
     })
 }
 
-export const translateDevTools = /* #__PURE__*/ createDevToolsHook(
-  IntlifyDevToolsHooks.FunctionTranslate
-)
+export const translateDevTools =
+  /* #__PURE__*/ createDevToolsHook('function:translate')
 
 function createDevToolsHook(hook: IntlifyDevToolsHooks) {
   return (payloads: IntlifyDevToolsHookPayloads[IntlifyDevToolsHooks]) =>

packages/core-base/src/number.ts

@@ -16,7 +16,6 @@ import { CoreWarnCodes, getWarnMessage } from './warnings'
 import { CoreErrorCodes, createCoreError } from './errors'
 import { Availabilities } from './intl'
 import { getLocale } from './fallbacker'
-import { VueDevToolsTimelineEvents } from '@intlify/vue-devtools'
 
 import type { Locale, FallbackLocale } from './runtime'
 import type {
@@ -249,7 +248,7 @@ export function number<
     if (__DEV__ && locale !== targetLocale) {
       const emitter = (context as unknown as CoreInternalContext).__v_emitter
       if (emitter) {
-        emitter.emit(VueDevToolsTimelineEvents.FALBACK, {
+        emitter.emit('fallback', {
           type,
           key,
           from,

packages/core-base/src/translate.ts

@@ -31,10 +31,9 @@ import { CoreWarnCodes, getWarnMessage } from './warnings'
 import { CoreErrorCodes, createCoreError } from './errors'
 import { translateDevTools } from './devtools'
 import { getLocale } from './fallbacker'
-import { VueDevToolsTimelineEvents } from '@intlify/vue-devtools'
 
 import type { CompileError, ResourceNode } from '@intlify/message-compiler'
-import type { AdditionalPayloads } from '@intlify/devtools-if'
+import type { AdditionalPayloads } from '@intlify/devtools-types'
 import type { Path, PathValue } from './resolver'
 import type {
   Locale,
@@ -856,7 +855,7 @@ function resolveMessageFormat<Messages, Message>(
     if (__DEV__ && locale !== targetLocale) {
       const emitter = (context as unknown as CoreInternalContext).__v_emitter
       if (emitter) {
-        emitter.emit(VueDevToolsTimelineEvents.FALBACK, {
+        emitter.emit('fallback', {
           type,
           key,
           from,
@@ -890,8 +889,8 @@ function resolveMessageFormat<Messages, Message>(
       const end = window.performance.now()
       const emitter = (context as unknown as CoreInternalContext).__v_emitter
       if (emitter && start && format) {
-        emitter.emit(VueDevToolsTimelineEvents.MESSAGE_RESOLVE, {
-          type: VueDevToolsTimelineEvents.MESSAGE_RESOLVE,
+        emitter.emit('message-resolve', {
+          type: 'message-resolve',
           key,
           message: format,
           time: end - start,
@@ -978,8 +977,8 @@ function compileMessageFormat<Messages, Message>(
     const end = window.performance.now()
     const emitter = (context as unknown as CoreInternalContext).__v_emitter
     if (emitter && start) {
-      emitter.emit(VueDevToolsTimelineEvents.MESSAGE_COMPILATION, {
-        type: VueDevToolsTimelineEvents.MESSAGE_COMPILATION,
+      emitter.emit('message-compilation', {
+        type: 'message-compilation',
         message: format as string | ResourceNode | MessageFunction,
         time: end - start,
         groupId: `${'translate'}:${key}`
@@ -1021,8 +1020,8 @@ function evaluateMessage<Messages, Message>(
     const end = window.performance.now()
     const emitter = (context as unknown as CoreInternalContext).__v_emitter
     if (emitter && start) {
-      emitter.emit(VueDevToolsTimelineEvents.MESSAGE_EVALUATION, {
-        type: VueDevToolsTimelineEvents.MESSAGE_EVALUATION,
+      emitter.emit('message-evaluation', {
+        type: 'message-evaluation',
         value: messaged,
         time: end - start,
         groupId: `${'translate'}:${(msg as MessageFunctionInternal).key}`
@@ -1108,7 +1107,7 @@ function getCompileContext<Messages, Message>(
           )
         const emitter = (context as unknown as CoreInternalContext).__v_emitter
         if (emitter && _source) {
-          emitter.emit(VueDevToolsTimelineEvents.COMPILE_ERROR, {
+          emitter.emit('compile-error', {
             message: _source,
             error: err.message,
             start: err.location && err.location.start.offset,

packages/core-base/test/devtools.test.ts

@@ -1,13 +1,12 @@
-import { createCoreContext, translate } from '../src/index'
 import { createEmitter } from '@intlify/shared'
+import { createCoreContext, translate } from '../src/index'
 import { compileToFunction } from '../src/compilation'
-import { IntlifyDevToolsHooks } from '@intlify/devtools-if'
 import { setDevToolsHook, getDevToolsHook } from '../src/devtools'
 
 import type {
   IntlifyDevToolsEmitterHooks,
   IntlifyDevToolsEmitter
-} from '@intlify/devtools-if'
+} from '@intlify/devtools-types'
 
 let devtools: IntlifyDevToolsEmitter | null = null
 beforeEach(() => {
@@ -23,7 +22,7 @@ afterEach(() => {
 
 test('initI18nDevTools', () => {
   const fn = vi.fn()
-  devtools!.on(IntlifyDevToolsHooks.I18nInit, fn)
+  devtools!.on('i18n:init', fn)
 
   const meta = { framework: 'Vue' }
   const ctx = createCoreContext({
@@ -46,7 +45,7 @@ test('initI18nDevTools', () => {
 describe('translateDevTools', () => {
   test('basic', () => {
     const fn = vi.fn()
-    devtools!.on(IntlifyDevToolsHooks.FunctionTranslate, fn)
+    devtools!.on('function:translate', fn)
 
     const meta = { __INTLIFY_META__: 'xxx', framework: 'Vue' }
     const HELLO = 'Hello {name}!'
@@ -73,7 +72,7 @@ describe('translateDevTools', () => {
 
   test('fallback', () => {
     const fn = vi.fn()
-    devtools!.on(IntlifyDevToolsHooks.FunctionTranslate, fn)
+    devtools!.on('function:translate', fn)
 
     const HELLO = 'やあ　{name}！'
     const ctx = createCoreContext({