fix: reduce devtools pkgs and size (#1823)

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({

packages/devtools-if/LICENSE → packages/devtools-types/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2021 kazuya kawaguchi
+Copyright (c) 2024 kazuya kawaguchi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

packages/devtools-types/README.md

@@ -0,0 +1,5 @@
+# @intlify/devtools-types
+
+## :copyright: License
+
+[MIT](http://opensource.org/licenses/MIT)

packages/devtools-types/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+ module.exports = require('./dist/devtools-types.prod.cjs')
+} else {
+ module.exports = require('./dist/devtools-types.cjs')
+}