diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json index 6c858d8a0..73777d672 100644 --- a/packages/vant-cli/package.json +++ b/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" diff --git a/packages/vant-cli/site/common/iframe-router.js b/packages/vant-cli/site/common/iframe-router.js index 45d873899..5257f2ada 100644 --- a/packages/vant-cli/site/common/iframe-router.js +++ b/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(() => {}); - } -}; + }); +} diff --git a/packages/vant-cli/site/desktop/router.js b/packages/vant-cli/site/desktop/router.js index db6f0355a..fc882d30f 100644 --- a/packages/vant-cli/site/desktop/router.js +++ b/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; diff --git a/packages/vant-cli/site/mobile/router.js b/packages/vant-cli/site/mobile/router.js index 130d21e75..476a3c7c7 100644 --- a/packages/vant-cli/site/mobile/router.js +++ b/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; diff --git a/packages/vant-cli/src/bin.ts b/packages/vant-cli/src/bin.ts new file mode 100644 index 000000000..c1175da9b --- /dev/null +++ b/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 ', '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 ') + .description('Lint commit message') + .action(commitLint); + +parse(); diff --git a/packages/vant-cli/src/index.ts b/packages/vant-cli/src/index.ts index d72fc407c..e46f4c72a 100755 --- a/packages/vant-cli/src/index.ts +++ b/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 ', '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 ') - .description('Lint commit message') - .action(commitLint); - -parse(); +export { + dev, + lint, + test, + clean, + build, + release, + changelog, + buildSite, + commitLint, +};