docs(@vant/use): changelog 1.4.1

* feat(@vant/cli): auto complete mjs path

* release: 3.5.0-beta.1

packages/vant-area-data/package.json

@@ -5,6 +5,12 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.mjs",
+      "require": "./dist/index.cjs.js"
+    }
+  },
   "files": [
     "dist"
   ],

packages/vant-cli/package.json

@@ -42,8 +42,11 @@
     "@types/fs-extra": "^9.0.13",
     "@types/less": "^3.0.3",
     "@types/markdown-it": "^12.2.3",
+    "@types/react": "^18",
     "@jest/types": "^27",
-    "vue": "^3.2.27"
+    "vue": "^3.2.27",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "dependencies": {
     "@babel/core": "^7.16.0",

packages/vant-cli/src/common/constant.ts

@@ -43,7 +43,15 @@ export const STYLE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json');
 export const POSTCSS_CONFIG_FILE = join(CJS_DIR, 'postcss.config.cjs');
 export const JEST_CONFIG_FILE = join(CJS_DIR, 'jest.config.cjs');
 
-export const SCRIPT_EXTS = ['.js', '.jsx', '.vue', '.ts', '.tsx'];
+export const SCRIPT_EXTS = [
+  '.js',
+  '.jsx',
+  '.vue',
+  '.ts',
+  '.tsx',
+  '.mjs',
+  '.cjs',
+];
 export const STYLE_EXTS = ['.css', '.less', '.scss'];
 
 export function getPackageJson() {

packages/vant-cli/src/compiler/compile-script.ts

@@ -16,12 +16,15 @@ export async function compileScript(
     return;
   }
 
+  const extensionMap = getVantConfig().build?.extensions;
+  const extension = extensionMap?.[format] || '.js';
+
   let code = readFileSync(filePath, 'utf-8');
 
   if (!filePath.includes(`${sep}style${sep}`)) {
     code = replaceCSSImportExt(code);
   }
-  code = replaceScriptImportExt(code, '.vue', '');
+  code = replaceScriptImportExt(code, filePath, extension);
 
   if (isJsx(filePath)) {
     const babelResult = await babel.transformAsync(code, {
@@ -50,9 +53,8 @@ export async function compileScript(
 
   ({ code } = esbuildResult);
 
-  const extensionMap = getVantConfig().build?.extensions;
-  const extension = extensionMap?.[format] || '.js';
   const jsFilePath = replaceExt(filePath, extension);
+
   removeSync(filePath);
   outputFileSync(jsFilePath, code);
 }

packages/vant-cli/src/compiler/gen-style-deps-map.ts

@@ -22,7 +22,7 @@ export function checkStyleExists(component: string) {
 // analyze component dependencies
 function analyzeComponentDeps(components: string[], component: string) {
   const checkList: string[] = [];
-  const componentEntry = fillExt(join(SRC_DIR, component, 'index'));
+  const componentEntry = fillExt(join(SRC_DIR, component, 'index')).path;
   const record = new Set();
 
   function search(filePath: string) {

packages/vant-cli/src/compiler/get-deps.ts

@@ -1,5 +1,5 @@
 import { join } from 'path';
-import { SCRIPT_EXTS } from '../common/constant.js';
+import { SCRIPT_EXTS, STYLE_EXTS } from '../common/constant.js';
 import { readFileSync, existsSync } from 'fs';
 
 let depsMap: Record<string, string[]> = {};
@@ -8,12 +8,19 @@ let existsCache: Record<string, boolean> = {};
 // https://regexr.com/47jlq
 const IMPORT_RE =
   /import\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
+const EXPORT_FROM_RE =
+  /@?export\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
 
 function matchImports(code: string): string[] {
   const imports = code.match(IMPORT_RE) || [];
   return imports.filter((line) => !line.includes('import type'));
 }
 
+function matchExportFroms(code: string): string[] {
+  const exportFroms = code.match(EXPORT_FROM_RE) || [];
+  return exportFroms.filter((line) => !line.includes('export type'));
+}
+
 function exists(filePath: string) {
   if (!(filePath in existsCache)) {
     existsCache[filePath] = existsSync(filePath);
@@ -26,23 +33,36 @@ export function fillExt(filePath: string) {
   for (let i = 0; i < SCRIPT_EXTS.length; i++) {
     const completePath = `${filePath}${SCRIPT_EXTS[i]}`;
     if (exists(completePath)) {
-      return completePath;
+      return {
+        path: completePath,
+        isIndex: false,
+      };
     }
   }
 
   for (let i = 0; i < SCRIPT_EXTS.length; i++) {
     const completePath = `${filePath}/index${SCRIPT_EXTS[i]}`;
     if (exists(completePath)) {
-      return completePath;
+      return {
+        path: completePath,
+        isIndex: true,
+      };
     }
   }
 
-  return '';
+  return {
+    path: '',
+    isIndex: false,
+  };
+}
+
+function getImportRelativePath(code: string) {
+  const divider = code.includes('"') ? '"' : "'";
+  return code.split(divider)[1];
 }
 
 function getPathByImport(code: string, filePath: string) {
-  const divider = code.includes('"') ? '"' : "'";
-  const relativePath = code.split(divider)[1];
+  const relativePath = getImportRelativePath(code);
 
   if (relativePath.includes('.')) {
     return fillExt(join(filePath, '..', relativePath));
@@ -64,7 +84,7 @@ export function getDeps(filePath: string) {
   const code = readFileSync(filePath, 'utf-8');
   const imports = matchImports(code);
   const paths = imports
-    .map((item) => getPathByImport(item, filePath))
+    .map((item) => getPathByImport(item, filePath)?.path)
     .filter((item) => !!item) as string[];
 
   depsMap[filePath] = paths;
@@ -74,14 +94,58 @@ export function getDeps(filePath: string) {
   return paths;
 }
 
-// "import App from 'App.vue';" => "import App from 'App.xxx';"
-export function replaceScriptImportExt(code: string, from: string, to: string) {
-  const importLines = matchImports(code);
+/**
+ * 1. Replace .vue extension
+ * @example "import App from 'App.vue';" => "import App from 'App.xxx';"
+ *
+ * 2. if using .mjs or .cjs, complete the import path
+ * @example import './foo' -> import './foo.mjs'
+ * @example import './foo' -> import './foo/index.mjs'
+ */
+export function replaceScriptImportExt(
+  code: string,
+  filePath: string,
+  ext: string
+) {
+  const imports = [...matchImports(code), ...matchExportFroms(code)];
 
-  importLines.forEach((importLine) => {
-    const result = importLine.replace(from, to);
-    code = code.replace(importLine, result);
+  const updateImport = (index: number, newImport: string) => {
+    code = code.replace(imports[index], newImport);
+    imports[index] = newImport;
+  };
+
+  imports.forEach((line, index) => {
+    if (line.includes('.vue')) {
+      updateImport(index, line.replace('.vue', ext));
+    }
   });
 
+  if (ext === '.mjs' || ext === '.cjs') {
+    imports.forEach((line, index) => {
+      const isStyleImport = STYLE_EXTS.some((ext) => line.includes(ext));
+      if (isStyleImport) {
+        return;
+      }
+
+      const pathInfo = getPathByImport(line, filePath);
+
+      if (pathInfo) {
+        const relativePath = getImportRelativePath(line);
+
+        if (pathInfo.isIndex) {
+          const newLine = line.replace(
+            relativePath,
+            `${relativePath}/index${ext}`
+          );
+
+          updateImport(index, newLine);
+        } else {
+          const newLine = line.replace(relativePath, relativePath + ext);
+          updateImport(index, newLine);
+        }
+      }
+    });
+  }
+
   return code;
 }

packages/vant-popperjs/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@vant/popperjs",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Pre-compiled popperjs core",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.mjs",
+      "require": "./dist/index.cjs.js"
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist"

packages/vant-use/changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v1.4.1
+
+- Add `exports` field to package.json, support nuxt 3.
+
 ## v1.4.0
 
 - Using `.mjs` extension, `dist/index.esm.js` -> `dist/index.esm.mjs`

packages/vant-use/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@vant/use",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Vant Composition API",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
   "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.mjs",
+      "require": "./dist/index.cjs.js"
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist"

packages/vant/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "3.5.0-beta.0",
+  "version": "3.5.0-beta.1",
   "description": "Mobile UI Components built on Vue",
   "main": "lib/vant.cjs.js",
   "module": "es/index.mjs",
@@ -46,8 +46,8 @@
   ],
   "dependencies": {
     "@vant/icons": "^1.8.0",
-    "@vant/popperjs": "^1.2.0",
-    "@vant/use": "^1.4.0"
+    "@vant/popperjs": "^1.2.1",
+    "@vant/use": "^1.4.1"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

pnpm-lock.yaml

@@ -54,8 +54,8 @@ importers:
       '@vant/cli': workspace:*
       '@vant/eslint-config': workspace:*
       '@vant/icons': ^1.8.0
-      '@vant/popperjs': ^1.2.0
-      '@vant/use': ^1.4.0
+      '@vant/popperjs': ^1.2.1
+      '@vant/use': ^1.4.1
       '@vue/runtime-core': ^3.2.27
       '@vue/test-utils': ^2.0.0-rc.16
       typescript: ~4.5.2
@@ -97,6 +97,7 @@ importers:
       '@types/jest': ^27.0.3
       '@types/less': ^3.0.3
       '@types/markdown-it': ^12.2.3
+      '@types/react': ^18
       '@vant/eslint-config': ^3.3.2
       '@vant/markdown-vetur': ^2.3.0
       '@vant/stylelint-config': ^1.4.2
@@ -129,6 +130,8 @@ importers:
       postcss: ^8.3.11
       postcss-load-config: ^3.1.0
       prettier: ^2.5.0
+      react: ^18
+      react-dom: ^18
       release-it: ^14.11.6
       stylelint: ^13.0.0
       transliteration: ^2.2.0
@@ -142,7 +145,7 @@ importers:
       '@babel/core': 7.18.0
       '@babel/preset-typescript': 7.17.12_@babel+core@7.18.0
       '@docsearch/css': 3.1.0
-      '@docsearch/js': 3.1.0
+      '@docsearch/js': 3.1.0_ohobp6rpsmerwlq5ipwfh5yigy
       '@types/jest': 27.5.1
       '@vant/eslint-config': link:../vant-eslint-config
       '@vant/markdown-vetur': link:../vant-markdown-vetur
@@ -189,6 +192,9 @@ importers:
       '@types/fs-extra': 9.0.13
       '@types/less': 3.0.3
       '@types/markdown-it': 12.2.3
+      '@types/react': 18.0.9
+      react: 18.1.0
+      react-dom: 18.1.0_react@18.1.0
       vue: 3.2.35
 
   packages/vant-eslint-config:
@@ -774,10 +780,10 @@ packages:
     resolution: {integrity: sha512-bh5IskwkkodbvC0FzSg1AxMykfDl95hebEKwxNoq4e5QaGzOXSBgW8+jnMFZ7JU4sTBiB04vZWoUSzNrPboLZA==}
     dev: false
 
-  /@docsearch/js/3.1.0:
+  /@docsearch/js/3.1.0_ohobp6rpsmerwlq5ipwfh5yigy:
     resolution: {integrity: sha512-5XSK+xbP0hcTIp54MECqxkWLs6kf7Ug4nWdxWNtx8cUpLiFNFnKXDxCb35wnyNpjukmrx7Q9DkO5tFFsmNVxng==}
     dependencies:
-      '@docsearch/react': 3.1.0
+      '@docsearch/react': 3.1.0_ohobp6rpsmerwlq5ipwfh5yigy
       preact: 10.7.2
     transitivePeerDependencies:
       - '@types/react'
@@ -785,7 +791,7 @@ packages:
       - react-dom
     dev: false
 
-  /@docsearch/react/3.1.0:
+  /@docsearch/react/3.1.0_ohobp6rpsmerwlq5ipwfh5yigy:
     resolution: {integrity: sha512-bjB6ExnZzf++5B7Tfoi6UXgNwoUnNOfZ1NyvnvPhWgCMy5V/biAtLL4o7owmZSYdAKeFSvZ5Lxm0is4su/dBWg==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -794,7 +800,10 @@ packages:
     dependencies:
       '@algolia/autocomplete-core': 1.6.3
       '@docsearch/css': 3.1.0
+      '@types/react': 18.0.9
       algoliasearch: 4.13.1
+      react: 18.1.0
+      react-dom: 18.1.0_react@18.1.0
     dev: false
 
   /@eslint/eslintrc/1.3.0:
@@ -1371,11 +1380,24 @@ packages:
     resolution: {integrity: sha512-XFjFHmaLVifrAKaZ+EKghFHtHSUonyw8P2Qmy2/+osBnrKbH9UYtlK10zg8/kCt47MFilll/DEDKy3DHfJ0URw==}
     dev: false
 
+  /@types/prop-types/15.7.5:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+
+  /@types/react/18.0.9:
+    resolution: {integrity: sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.2
+      csstype: 3.1.0
+
   /@types/responselike/1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
     dependencies:
       '@types/node': 17.0.35
 
+  /@types/scheduler/0.16.2:
+    resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
+
   /@types/stack-utils/2.0.1:
     resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
     dev: false
@@ -2554,6 +2576,9 @@ packages:
   /csstype/2.6.20:
     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
 
+  /csstype/3.1.0:
+    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
+
   /dargs/7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
@@ -5274,6 +5299,12 @@ packages:
   /longest-streak/2.0.4:
     resolution: {integrity: sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==}
 
+  /loose-envify/1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+
   /lower-case/2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
@@ -6247,10 +6278,25 @@ packages:
       minimist: 1.2.6
       strip-json-comments: 2.0.1
 
+  /react-dom/18.1.0_react@18.1.0:
+    resolution: {integrity: sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==}
+    peerDependencies:
+      react: ^18.1.0
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.1.0
+      scheduler: 0.22.0
+
   /react-is/17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: false
 
+  /react/18.1.0:
+    resolution: {integrity: sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+
   /read-pkg-up/3.0.0:
     resolution: {integrity: sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==}
     engines: {node: '>=4'}
@@ -6537,6 +6583,11 @@ packages:
       xmlchars: 2.2.0
     dev: false
 
+  /scheduler/0.22.0:
+    resolution: {integrity: sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==}
+    dependencies:
+      loose-envify: 1.4.0
+
   /section-matter/1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}