feat(cli): using postmessage (#8497)

* feat(cli): export action functions

* fix: listenToSyncPath

* fix: config.site.simulatorUrl

packages/vant-cli/package.json

@@ -4,7 +4,7 @@
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "bin": {
-    "vant-cli": "./lib/index.js"
+    "vant-cli": "./lib/bin.js"
   },
   "engines": {
     "node": ">=10"

packages/vant-cli/site/common/iframe-router.js

@@ -2,28 +2,44 @@
  * 同步父窗口和 iframe 的 vue-router 状态
  */
 
-import { iframeReady, isMobile } from '.';
+import { iframeReady } from '.';
 
-window.syncPath = function() {
+function getCurrentDir() {
   const router = window.vueRouter;
-  const isInIframe = window !== window.top;
-  const currentDir = router.currentRoute.value.path;
+  return router.currentRoute.value.path;
+}
 
-  if (isInIframe) {
-    window.top.replacePath(currentDir);
-  } else if (!isMobile) {
-    const iframe = document.querySelector('iframe');
-    if (iframe) {
-      iframeReady(iframe, () => {
-        iframe.contentWindow.replacePath(currentDir);
-      });
+export function syncPathToParent() {
+  window.top.postMessage(
+    {
+      type: 'replacePath',
+      value: getCurrentDir(),
+    },
+    '*'
+  );
+}
+
+export function syncPathToChild() {
+  const iframe = document.querySelector('iframe');
+  if (iframe) {
+    iframeReady(iframe, () => {
+      iframe.postMessage(
+        {
+          type: 'replacePath',
+          value: getCurrentDir(),
+        },
+        '*'
+      );
+    });
+  }
+}
+
+export function listenToSyncPath(router) {
+  window.addEventListener('message', (event) => {
+    const path = event.data || '';
+    // should preserve hash for anchor
+    if (router.currentRoute.value.path !== path) {
+      router.replace(path).catch(() => {});
     }
-  }
-};
-
-window.replacePath = function(path = '') {
-  // should preserve hash for anchor
-  if (window.vueRouter.currentRoute.value.path !== path) {
-    window.vueRouter.replace(path).catch(() => {});
-  }
-};
+  });
+}

packages/vant-cli/site/desktop/router.js

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 import { isMobile, decamelize } from '../common';
 import { config, documents } from 'site-desktop-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import '../common/iframe-router';
+import { listenToSyncPath, syncPathToChild } from '../common/iframe-router';
 
 if (isMobile) {
   location.replace('mobile.html' + location.hash);
@@ -117,7 +117,9 @@ export const router = createRouter({
 });
 
 router.afterEach(() => {
-  nextTick(() => window.syncPath());
+  nextTick(syncPathToChild);
 });
 
+listenToSyncPath(router);
+
 window.vueRouter = router;

packages/vant-cli/site/mobile/router.js

@@ -4,7 +4,7 @@ import DemoHome from './components/DemoHome';
 import { decamelize } from '../common';
 import { demos, config } from 'site-mobile-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import '../common/iframe-router';
+import { listenToSyncPath, syncPathToParent } from '../common/iframe-router';
 
 const { locales, defaultLang } = config.site;
 
@@ -97,8 +97,10 @@ export const router = createRouter({
 
 watch(router.currentRoute, () => {
   if (!router.currentRoute.value.redirectedFrom) {
-    nextTick(window.syncPath);
+    nextTick(syncPathToParent);
   }
 });
 
+listenToSyncPath(router);
+
 window.vueRouter = router;

packages/vant-cli/src/bin.ts

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+import { command, parse, version } from 'commander';
+
+import {
+  dev,
+  lint,
+  test,
+  clean,
+  build,
+  release,
+  changelog,
+  buildSite,
+  commitLint,
+  cliVersion,
+} from '.';
+
+version(`@vant/cli ${cliVersion}`);
+
+command('dev').description('Run webpack dev server').action(dev);
+
+command('lint').description('Run eslint and stylelint').action(lint);
+
+command('test')
+  .description('Run unit tests through jest')
+  .option(
+    '--watch',
+    'Watch files for changes and rerun tests related to changed files'
+  )
+  .option(
+    '--clearCache',
+    'Clears the configured Jest cache directory and then exits'
+  )
+  .action(test);
+
+command('clean').description('Clean all dist files').action(clean);
+
+command('build')
+  .description('Compile components in production mode')
+  .option('--watch', 'Watch file change')
+  .action(build);
+
+command('release')
+  .description('Compile components and release it')
+  .option('--tag <tag>', 'Release tag')
+  .action(release);
+
+command('build-site')
+  .description('Compile site in production mode')
+  .action(buildSite);
+
+command('changelog').description('Generate changelog').action(changelog);
+
+command('commit-lint <gitParams>')
+  .description('Lint commit message')
+  .action(commitLint);
+
+parse();

packages/vant-cli/src/index.ts

@@ -1,10 +1,5 @@
-#!/usr/bin/env node
-import { command, parse, version } from 'commander';
-
 // @ts-ignore
 import packageJson from '../package.json';
-
-// commands
 import { dev } from './commands/dev';
 import { lint } from './commands/lint';
 import { test } from './commands/jest';
@@ -15,46 +10,18 @@ import { changelog } from './commands/changelog';
 import { buildSite } from './commands/build-site';
 import { commitLint } from './commands/commit-lint';
 
-version(`@vant/cli ${packageJson.version}`);
+export const cliVersion: string = packageJson.version;
 
-process.env.VANT_CLI_VERSION = packageJson.version;
+process.env.VANT_CLI_VERSION = cliVersion;
 
-command('dev').description('Run webpack dev server').action(dev);
-
-command('lint').description('Run eslint and stylelint').action(lint);
-
-command('test')
-  .description('Run unit tests through jest')
-  .option(
-    '--watch',
-    'Watch files for changes and rerun tests related to changed files'
-  )
-  .option(
-    '--clearCache',
-    'Clears the configured Jest cache directory and then exits'
-  )
-  .action(test);
-
-command('clean').description('Clean all dist files').action(clean);
-
-command('build')
-  .description('Compile components in production mode')
-  .option('--watch', 'Watch file change')
-  .action(build);
-
-command('release')
-  .description('Compile components and release it')
-  .option('--tag <tag>', 'Release tag')
-  .action(release);
-
-command('build-site')
-  .description('Compile site in production mode')
-  .action(buildSite);
-
-command('changelog').description('Generate changelog').action(changelog);
-
-command('commit-lint <gitParams>')
-  .description('Lint commit message')
-  .action(commitLint);
-
-parse();
+export {
+  dev,
+  lint,
+  test,
+  clean,
+  build,
+  release,
+  changelog,
+  buildSite,
+  commitLint,
+};