feat(bundle-utils): support esm/cjs dual package (#255)

* feat(bundle-utils): support esm/cjs dual package

* chore: add no hoist config

* update

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [14.16, 16]
+        node: [14.21, 16]
     steps:
       - name: Checkout
         uses: actions/checkout@v2

package.json

@@ -41,7 +41,7 @@
     "@types/json5": "^2.2.0",
     "@types/loader-utils": "^2.0.0",
     "@types/memory-fs": "^0.3.2",
-    "@types/node": "^15.12.4",
+    "@types/node": "^18.15.11",
     "@types/semver": "^7.3.6",
     "@types/webpack": "^4.41.26",
     "@types/webpack-merge": "^4.1.5",
@@ -82,6 +82,7 @@
     "ts-jest": "^27.0.5",
     "typescript": "^4.9.3",
     "vite": "^2.9.6",
+    "vitest": "^0.29.8",
     "vue": "^2.6.14",
     "vue-i18n": "beta",
     "vue-loader": "^16.3.0",
@@ -139,14 +140,16 @@
     "lint:eslint": "eslint ./packages ./scripts --ext .ts",
     "lint:eslint:fix": "yarn lint:eslint --fix",
     "lint:secret": "npx secretlint \"**/*\"",
-    "test": "yarn test:cover && yarn test:e2e",
-    "test:cover": "yarn test:unit --coverage",
+    "test": "yarn test:unit && yarn test:e2e",
     "test:e2e": "npm-run-all \"test:e2e:*\"",
     "test:e2e:rollup": "yarn workspace @intlify/rollup-plugin-vue-i18n test:e2e",
     "test:e2e:vite": "yarn workspace @intlify/vite-plugin-vue-i18n test:e2e",
     "test:e2e:webpack": "yarn workspace @intlify/vue-i18n-loader test:e2e",
     "test:e2e:unplugin": "yarn workspace @intlify/unplugin-vue-i18n test:e2e",
-    "test:unit": "NODE_ENV=test yarn run build:utils && jest --env node",
+    "test:unit": "run-s \"test:unit:*\"",
+    "test:unit:utils": "yarn run build:utils && vitest run packages/bundle-utils",
+    "test:unit:rollup": "NODE_ENV=test jest --env node packages/rollup-plugin-vue-i18n",
+    "test:unit:unplugin": "NODE_ENV=test jest --env node packages/unplugin-vue-i18n",
     "test:watch": "jest --env node --watch packages/bundle-utils/test/**",
     "changelog": "jiti ./scripts/changelog.ts",
     "changelog:utils": "yarn workspace @intlify/bundle-utils changelog",

packages/bundle-utils/build.config.ts

@@ -0,0 +1,16 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  declaration: true,
+  outDir: 'lib',
+  entries: [
+    {
+      name: 'index',
+      input: 'src/index'
+    }
+  ],
+  rollup: {
+    emitCJS: true
+  },
+  externals: ['estree']
+})

packages/bundle-utils/package.json

@@ -25,30 +25,32 @@
     "estree-walker": "^2.0.2",
     "jsonc-eslint-parser": "^1.0.1",
     "magic-string": "^0.30.0",
+    "mlly": "^1.2.0",
     "source-map": "0.6.1",
     "yaml-eslint-parser": "^0.3.2"
   },
   "devDependencies": {
     "@types/escodegen": "^0.0.7",
-    "@types/estree": "^1.0.0"
+    "@types/estree": "^1.0.0",
+    "unbuild": "^1.1.2"
   },
   "engines": {
-    "node": ">= 12"
+    "node": ">= 14.16"
   },
   "files": [
     "lib",
     "index.mjs"
   ],
   "homepage": "https://github.com/intlify/bundle-tools/blob/main/packages/bundle-utils/README.md",
   "license": "MIT",
-  "main": "lib/index.js",
-  "module": "./index.mjs",
+  "main": "lib/index.cjs",
+  "module": "lib/index.mjs",
   "types": "lib/index.d.ts",
   "exports": {
     ".": {
-      "import": "./index.mjs",
-      "require": "./lib/index.js",
-      "types": "./lib/index.d.ts"
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.mjs",
+      "require": "./lib/index.cjs"
     },
     "./lib/*": "./lib/*",
     "./package.json": "./package.json"
@@ -59,10 +61,9 @@
     "directory": "packages/bundle-utils"
   },
   "scripts": {
-    "build": "tsc -p .",
+    "build": "unbuild",
     "clean": "npm-run-all \"clean:*\"",
     "clean:lib": "rm -rf ./lib",
-    "watch": "tsc -p . --watch",
     "changelog": "jiti ../../scripts/changelog.ts",
     "release": "jiti ../../scripts/release.ts"
   }

packages/bundle-utils/src/codegen.ts

@@ -1,11 +1,4 @@
-import {
-  LocationStub,
-  baseCompile,
-  CompileError,
-  ResourceNode,
-  CompileOptions,
-  detectHtmlTag
-} from '@intlify/message-compiler'
+import module from 'node:module'
 import {
   SourceMapGenerator,
   SourceMapConsumer,
@@ -15,6 +8,19 @@ import {
 import { format, escapeHtml as sanitizeHtml, isBoolean } from '@intlify/shared'
 
 import type { RawSourceMap } from 'source-map'
+import type {
+  CompileError,
+  ResourceNode,
+  CompileOptions
+} from '@intlify/message-compiler'
+
+// NOTE: use sourcemap (currently, `@intlify/message-compiler` support cjs pkg only)
+const require = module.createRequire(import.meta.url)
+const {
+  baseCompile,
+  detectHtmlTag,
+  LocationStub
+} = require('@intlify/message-compiler')
 
 /**
  * Compilation dev environments

packages/bundle-utils/src/deps.ts

@@ -1,21 +1,25 @@
+import module from 'node:module'
+
 export type InstalledPackage = 'vue-i18n' | 'petite-vue-i18n'
 
+const _require = module.createRequire(import.meta.url)
+
 // eslint-disable-next-line @typescript-eslint/ban-types
 export function checkInstallPackage(
   pkg: string,
   debug: Function
 ): InstalledPackage {
   let installedVueI18n = false
   try {
-    debug(`vue-i18n load path: ${require.resolve('vue-i18n')}`)
+    debug(`vue-i18n load path: ${_require.resolve('vue-i18n')}`)
     installedVueI18n = true
   } catch (e) {
     debug(`cannot find 'vue-i18n'`, e)
   }
 
   let installedPetiteVueI18n = false
   try {
-    debug(`petite-vue-i18n load path: ${require.resolve('petite-vue-i18n')}`)
+    debug(`petite-vue-i18n load path: ${_require.resolve('petite-vue-i18n')}`)
     installedPetiteVueI18n = true
   } catch (e) {
     debug(`cannot find 'petite-vue-i18n'`, e)
@@ -36,7 +40,7 @@ export function checkInstallPackage(
 export function checkVueI18nBridgeInstallPackage(debug: Function): boolean {
   let ret = false
   try {
-    debug(`vue-i18n-bridge load path: ${require.resolve('vue-i18n-bridge')}`)
+    debug(`vue-i18n-bridge load path: ${_require.resolve('vue-i18n-bridge')}`)
     ret = true
   } catch (e) {
     debug(`cannot find 'vue-i18n-bridge'`, e)
@@ -63,7 +67,7 @@ export function getVueI18nVersion(debug: Function): VueI18nVersion {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function loadModule(moduleName: string, debug: Function): any {
   try {
-    return require(moduleName)
+    return _require(moduleName)
   } catch (e) {
     debug(`cannot load '${moduleName}'`, e)
     return null

packages/bundle-utils/src/index.ts

@@ -1,10 +1,10 @@
-export { CodeGenOptions, CodeGenResult, DevEnv } from './codegen'
 export { generate as generateJSON } from './json'
 export { generate as generateYAML } from './yaml'
 export { generate as generateJavaScript } from './js'
 export {
   getVueI18nVersion,
   checkInstallPackage,
-  checkVueI18nBridgeInstallPackage,
-  InstalledPackage
+  checkVueI18nBridgeInstallPackage
 } from './deps'
+export type { CodeGenOptions, CodeGenResult, DevEnv } from './codegen'
+export type { InstalledPackage } from './deps'

packages/bundle-utils/test/deps.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import {
   checkInstallPackage,
   checkVueI18nBridgeInstallPackage,
@@ -6,17 +7,17 @@ import {
 } from '../src/deps'
 
 test('vue-i18n', () => {
-  expect(checkInstallPackage('vue-i18n', jest.fn())).toBe('vue-i18n')
+  expect(checkInstallPackage('vue-i18n', vi.fn())).toBe('vue-i18n')
 })
 
 test('vue-i18n-bridge', () => {
-  expect(checkVueI18nBridgeInstallPackage(jest.fn())).toBe(false)
+  expect(checkVueI18nBridgeInstallPackage(vi.fn())).toBe(false)
 })
 
 test('loadModule', () => {
-  expect(loadModule('yaml-eslint-parser', jest.fn())).not.toBe(null)
+  expect(loadModule('yaml-eslint-parser', vi.fn())).not.toBe(null)
 })
 
 test('getVueI18nVersion', () => {
-  expect(getVueI18nVersion(jest.fn())).toBe('9')
+  expect(getVueI18nVersion(vi.fn())).toBe('9')
 })