Compare commits

...

5 Commits

Author SHA1 Message Date
chenjiahan
218567437c release: @vant/use 1.3.3 2021-11-11 17:27:41 +08:00
neverland
a0b368f1b4
perf(@vant/use): reduce usePageVisibility event binding (#9835)
* perf(@vant/use): reduce usePageVisibility event binding

* chore: update
2021-11-11 17:25:48 +08:00
neverland
a9ce9096e4
fix(@vant/use): allow to call useWindowSize outside setup (#9834) 2021-11-11 16:54:04 +08:00
chenjiahan
79146db9d5 chore(Lazyload): reuse some utils 2021-11-11 14:22:34 +08:00
chenjiahan
74bc0879c4 build: using rollup-plugin-esbuild 2021-11-11 11:08:02 +08:00
23 changed files with 133 additions and 191 deletions

View File

@ -1,4 +1,7 @@
{
"root": true,
"extends": ["@vant"]
"extends": ["@vant"],
"rules": {
"prefer-object-spread": "off"
}
}

View File

@ -1,3 +0,0 @@
module.exports = {
presets: [['@vant/cli/preset.cjs', { loose: true }]],
};

View File

@ -14,8 +14,11 @@
"registry": "https://registry.npmjs.org/"
},
"scripts": {
"clean": "rm -rf ./dist",
"dev": "rollup --config rollup.config.js --watch",
"build": "rollup --config rollup.config.js && tsc -p ./tsconfig.json --emitDeclarationOnly",
"build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
"build:bundle": "rollup --config rollup.config.js",
"build": "pnpm clean && pnpm build:bundle && pnpm build:types",
"release": "pnpm build && release-it",
"prepare": "pnpm build"
},
@ -25,11 +28,11 @@
"@popperjs/core": "^2.9.2"
},
"devDependencies": {
"@vant/cli": "workspace:*",
"@rollup/plugin-babel": "^5.2.1",
"@rollup/plugin-node-resolve": "^10.0.0",
"release-it": "^14.2.2",
"rollup": "^2.33.3"
"typescript": "4.x",
"rollup": "^2.33.3",
"rollup-plugin-esbuild": "^4.6.0",
"@rollup/plugin-node-resolve": "^13.0.0",
"release-it": "^14.2.2"
},
"release-it": {
"git": {

View File

@ -1,5 +1,5 @@
import path from 'path';
import babel from '@rollup/plugin-babel';
import esbuild from 'rollup-plugin-esbuild';
import nodeResolve from '@rollup/plugin-node-resolve';
export default {
@ -14,8 +14,5 @@ export default {
format: 'esm',
},
],
plugins: [
babel({ babelHelpers: 'bundled', extensions: ['.js', '.ts'] }),
nodeResolve(),
],
plugins: [esbuild(), nodeResolve()],
};

View File

@ -2,13 +2,11 @@
"compilerOptions": {
"target": "ES2015",
"outDir": "./dist",
"module": "ES2015",
"module": "ESNext",
"strict": true,
"declaration": true,
"skipLibCheck": true,
"esModuleInterop": true,
"moduleResolution": "node",
"lib": ["esnext", "dom"]
"moduleResolution": "Node",
},
"include": ["src/**/*"]
}

View File

@ -4,10 +4,6 @@ Vant Use 是从 Vant 实际应用场景中沉淀的 Vue 组合式 API 库。
## 安装
如果项目中已经安装了 Vant 3则无须手动安装 Vant Use。
如果项目中未使用 Vant可以通过 `npm``yarn` 手动安装 Vant Use。
```bash
# 通过 npm 安装
npm i @vant/use -S

View File

@ -1,3 +0,0 @@
module.exports = {
presets: [['@vant/cli/preset.cjs', { loose: true }]],
};

View File

@ -1,19 +1,20 @@
{
"name": "@vant/use",
"version": "1.3.2",
"version": "1.3.3",
"description": "Vant Composition API",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"typings": "dist/types/index.d.ts",
"typings": "dist/index.d.ts",
"sideEffects": false,
"files": [
"dist"
],
"scripts": {
"clean": "rm -rf ./dist",
"build:lib": "node ./scripts/build.js",
"dev": "rollup --config rollup.config.js --watch",
"build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
"build": "pnpm build:lib && pnpm build:types",
"build:bundle": "rollup --config rollup.config.js",
"build": "pnpm clean && pnpm build:bundle && pnpm build:types",
"release": "pnpm build && release-it",
"prepare": "pnpm build"
},
@ -24,12 +25,10 @@
"license": "MIT",
"repository": "https://github.com/youzan/vant/tree/dev/packages/vant-use",
"devDependencies": {
"@babel/core": "^7.12.9",
"@vant/cli": "workspace:*",
"fast-glob": "^3.2.7",
"fs-extra": "^10.0.0",
"release-it": "^14.0.2",
"typescript": "4.x",
"rollup": "^2.33.3",
"rollup-plugin-esbuild": "^4.6.0",
"vue": "^3.2.20"
},
"release-it": {

View File

@ -0,0 +1,18 @@
import path from 'path';
import esbuild from 'rollup-plugin-esbuild';
export default {
input: path.join(__dirname, 'src', 'index.ts'),
output: [
{
dir: 'dist/cjs',
format: 'cjs',
},
{
dir: 'dist/esm',
format: 'esm',
},
],
external: ['vue'],
plugins: [esbuild()],
};

View File

@ -1,40 +0,0 @@
const glob = require('fast-glob');
const { join } = require('path');
const { transformAsync } = require('@babel/core');
const { readFileSync, outputFileSync } = require('fs-extra');
const srcDir = join(__dirname, '..', 'src');
const distDir = join(__dirname, '..', 'dist');
const srcFiles = glob.sync(join(srcDir, '**', '*.ts'), {
ignore: ['**/node_modules', '**/*.spec.ts'],
});
const compile = (filePath, distDir) =>
new Promise((resolve, reject) => {
const code = readFileSync(filePath, 'utf-8');
const distPath = filePath.replace(srcDir, distDir).replace('.ts', '.js');
transformAsync(code, { filename: filePath })
.then((result) => {
if (result) {
outputFileSync(distPath, result.code);
resolve();
}
})
.catch(reject);
});
async function build() {
// esm output
await Promise.all(
srcFiles.map((srcFile) => compile(srcFile, join(distDir, 'esm')))
);
// cjs output
process.env.BABEL_MODULE = 'commonjs';
await Promise.all(
srcFiles.map((srcFile) => compile(srcFile, join(distDir, 'cjs')))
);
}
build();

View File

@ -1,5 +1,4 @@
import { Ref, unref } from 'vue';
import { inBrowser } from '../utils';
import { useEventListener } from '../useEventListener';
export type UseClickAwayOptions = {
@ -11,10 +10,6 @@ export function useClickAway(
listener: EventListener,
options: UseClickAwayOptions = {}
) {
if (!inBrowser) {
return;
}
const { eventName = 'click' } = options;
const onClick = (event: Event) => {

View File

@ -1,18 +1,21 @@
import { ref } from 'vue';
import { ref, Ref } from 'vue';
import { inBrowser } from '../utils';
import { useEventListener } from '../useEventListener';
let visibility: Ref<VisibilityState>;
export function usePageVisibility() {
const visibility = ref<VisibilityState>('visible');
if (!visibility) {
visibility = ref<VisibilityState>('visible');
const setVisibility = () => {
if (inBrowser) {
visibility.value = document.hidden ? 'hidden' : 'visible';
}
};
const update = () => {
visibility.value = document.hidden ? 'hidden' : 'visible';
};
setVisibility();
useEventListener('visibilitychange', setVisibility);
update();
window.addEventListener('visibilitychange', update);
}
}
return visibility;
}

View File

@ -1,19 +1,16 @@
import { Ref, unref } from 'vue';
function isWindow(val: unknown): val is Window {
return val === window;
}
const isWindow = (val: unknown): val is Window => val === window;
function makeDOMRect(width: number, height: number) {
return {
const makeDOMRect = (width: number, height: number) =>
({
top: 0,
left: 0,
right: width,
bottom: height,
width,
height,
} as DOMRect;
}
} as DOMRect);
export const useRect = (
elementOrRef: Element | Window | Ref<Element | Window | undefined>
@ -26,7 +23,7 @@ export const useRect = (
return makeDOMRect(width, height);
}
if (element && element.getBoundingClientRect) {
if (element?.getBoundingClientRect) {
return element.getBoundingClientRect();
}

View File

@ -1,6 +1,5 @@
import { ref, Ref } from 'vue';
import { inBrowser } from '../utils';
import { useEventListener } from '../useEventListener';
let width: Ref<number>;
let height: Ref<number>;
@ -10,16 +9,16 @@ export function useWindowSize() {
width = ref(0);
height = ref(0);
const update = () => {
if (inBrowser) {
if (inBrowser) {
const update = () => {
width.value = window.innerWidth;
height.value = window.innerHeight;
}
};
};
update();
useEventListener('resize', update);
useEventListener('orientationchange', update);
update();
window.addEventListener('resize', update, { passive: true });
window.addEventListener('orientationchange', update, { passive: true });
}
}
return { width, height };

View File

@ -1,4 +1,4 @@
import { raf, cancelRaf } from '../utils';
import { raf, cancelRaf } from '../src/utils';
test('raf', async () => {
const spy = jest.fn();

View File

@ -1,13 +1,12 @@
{
"compilerOptions": {
"target": "ES2015",
"outDir": "./dist/types",
"module": "ES2015",
"outDir": "./dist",
"module": "ESNext",
"strict": true,
"declaration": true,
"skipLibCheck": true,
"esModuleInterop": true,
"moduleResolution": "Node"
"moduleResolution": "Node",
},
"include": ["src/**/*"]
}

View File

@ -2,6 +2,7 @@ module.exports = {
testPathIgnorePatterns: ['/node_modules/'],
collectCoverageFrom: [
'src/**/*.{js,jsx,ts,tsx,vue}',
'!src/lazyload/vue-lazyload/**',
'!**/demo/**',
'!**/test/**',
'!**/lang/**',

View File

@ -1,5 +1,5 @@
import { h } from 'vue';
import { inBrowser } from '@vant/use';
import { inBrowser, useRect } from '@vant/use';
export default (lazy) => ({
props: {
@ -24,7 +24,6 @@ export default (lazy) => ({
state: {
loaded: false,
},
rect: {},
show: false,
};
},
@ -40,18 +39,14 @@ export default (lazy) => ({
},
methods: {
getRect() {
this.rect = this.$el.getBoundingClientRect();
},
checkInView() {
this.getRect();
const rect = useRect(this.$el);
return (
inBrowser &&
this.rect.top < window.innerHeight * lazy.options.preLoad &&
this.rect.bottom > 0 &&
this.rect.left < window.innerWidth * lazy.options.preLoad &&
this.rect.right > 0
rect.top < window.innerHeight * lazy.options.preLoad &&
rect.bottom > 0 &&
rect.left < window.innerWidth * lazy.options.preLoad &&
rect.right > 0
);
},

View File

@ -1,5 +1,6 @@
import { inBrowser } from '@vant/use';
import { loadImageAsync, noop } from './util';
import { useRect } from '@vant/use';
import { loadImageAsync } from './util';
import { noop } from '../../utils';
export default (lazyManager) => ({
props: {
@ -34,7 +35,6 @@ export default (lazyManager) => ({
error: false,
attempt: 0,
},
rect: {},
renderSrc: '',
};
},
@ -66,17 +66,13 @@ export default (lazyManager) => ({
this.options.loading = loading;
this.renderSrc = this.options.loading;
},
getRect() {
this.rect = this.$el.getBoundingClientRect();
},
checkInView() {
this.getRect();
const rect = useRect(this.$el);
return (
inBrowser &&
this.rect.top < window.innerHeight * lazyManager.options.preLoad &&
this.rect.bottom > 0 &&
this.rect.left < window.innerWidth * lazyManager.options.preLoad &&
this.rect.right > 0
rect.top < window.innerHeight * lazyManager.options.preLoad &&
rect.bottom > 0 &&
rect.left < window.innerWidth * lazyManager.options.preLoad &&
rect.right > 0
);
},
load(onFinish = noop) {

View File

@ -8,11 +8,11 @@ import {
supportWebp,
getDPR,
getBestSelectionFromSrcset,
isObject,
hasIntersectionObserver,
modeType,
ImageCache,
} from './util';
import { isObject } from '../../utils';
import ReactiveListener from './listener';
const DEFAULT_URL =
@ -64,7 +64,6 @@ export default function () {
attempt: attempt || 3,
scale: scale || getDPR(scale),
ListenEvents: listenEvents || DEFAULT_EVENTS,
hasbind: false,
supportWebp: supportWebp(),
filter: filter || {},
adapter: adapter || {},

View File

@ -1,4 +1,6 @@
import { loadImageAsync, noop } from './util';
import { useRect } from '@vant/use';
import { loadImageAsync } from './util';
import { noop } from '../../utils';
export default class ReactiveListener {
constructor({
@ -26,8 +28,6 @@ export default class ReactiveListener {
this.options = options;
this.rect = null;
this.$parent = $parent;
this.elRenderer = elRenderer;
this._imageCache = imageCache;
@ -87,25 +87,17 @@ export default class ReactiveListener {
}
}
/*
* get el node rect
* @return
*/
getRect() {
this.rect = this.el.getBoundingClientRect();
}
/*
* check el is in view
* @return {Boolean} el is in view
*/
checkInView() {
this.getRect();
const rect = useRect(this.el);
return (
this.rect.top < window.innerHeight * this.options.preLoad &&
this.rect.bottom > this.options.preLoadTop &&
this.rect.left < window.innerWidth * this.options.preLoad &&
this.rect.right > 0
rect.top < window.innerHeight * this.options.preLoad &&
rect.bottom > this.options.preLoadTop &&
rect.left < window.innerWidth * this.options.preLoad &&
rect.right > 0
);
}

View File

@ -158,12 +158,6 @@ export const loadImageAsync = (item, resolve, reject) => {
image.onerror = (e) => reject(e);
};
export function isObject(obj) {
return obj !== null && typeof obj === 'object';
}
export function noop() {}
export class ImageCache {
constructor({ max }) {
this.options = {

74
pnpm-lock.yaml generated
View File

@ -247,19 +247,19 @@ importers:
packages/vant-popperjs:
specifiers:
'@popperjs/core': ^2.9.2
'@rollup/plugin-babel': ^5.2.1
'@rollup/plugin-node-resolve': ^10.0.0
'@vant/cli': workspace:*
'@rollup/plugin-node-resolve': ^13.0.0
release-it: ^14.2.2
rollup: ^2.33.3
rollup-plugin-esbuild: ^4.6.0
typescript: 4.x
dependencies:
'@popperjs/core': 2.10.2
devDependencies:
'@rollup/plugin-babel': 5.3.0_rollup@2.59.0
'@rollup/plugin-node-resolve': 10.0.0_rollup@2.59.0
'@vant/cli': link:../vant-cli
'@rollup/plugin-node-resolve': 13.0.6_rollup@2.59.0
release-it: 14.11.6
rollup: 2.59.0
rollup-plugin-esbuild: 4.6.0_rollup@2.59.0
typescript: 4.4.4
packages/vant-stylelint-config:
specifiers:
@ -277,19 +277,15 @@ importers:
packages/vant-use:
specifiers:
'@babel/core': ^7.12.9
'@vant/cli': workspace:*
fast-glob: ^3.2.7
fs-extra: ^10.0.0
release-it: ^14.0.2
rollup: ^2.33.3
rollup-plugin-esbuild: ^4.6.0
typescript: 4.x
vue: ^3.2.20
devDependencies:
'@babel/core': 7.16.0
'@vant/cli': link:../vant-cli
fast-glob: 3.2.7
fs-extra: 10.0.0
release-it: 14.11.6
rollup: 2.59.0
rollup-plugin-esbuild: 4.6.0_rollup@2.59.0
typescript: 4.4.4
vue: 3.2.21
@ -1949,27 +1945,11 @@ packages:
resolution: {integrity: sha1-B5jAM1Hw3qGlpMq93yalWny+5ZA=, tarball: '@popperjs/core/download/@popperjs/core-2.10.2.tgz'}
dev: false
/@rollup/plugin-babel/5.3.0_rollup@2.59.0:
resolution: {integrity: sha1-nLHFFG3daklorZbyCcUMYvkvmHk=, tarball: '@rollup/plugin-babel/download/@rollup/plugin-babel-5.3.0.tgz'}
/@rollup/plugin-node-resolve/13.0.6_rollup@2.59.0:
resolution: {integrity: sha1-KWKQcLt2dWe+gVf1dc+o8rjp73c=, tarball: '@rollup/plugin-node-resolve/download/@rollup/plugin-node-resolve-13.0.6.tgz'}
engines: {node: '>= 10.0.0'}
peerDependencies:
'@babel/core': ^7.0.0
'@types/babel__core': ^7.1.9
rollup: ^1.20.0||^2.0.0
peerDependenciesMeta:
'@types/babel__core':
optional: true
dependencies:
'@babel/helper-module-imports': 7.16.0
'@rollup/pluginutils': 3.1.0_rollup@2.59.0
rollup: 2.59.0
dev: true
/@rollup/plugin-node-resolve/10.0.0_rollup@2.59.0:
resolution: {integrity: sha1-RAZKK5jfdTDmas+JQf8mL8m06tg=, tarball: '@rollup/plugin-node-resolve/download/@rollup/plugin-node-resolve-10.0.0.tgz'}
engines: {node: '>= 10.0.0'}
peerDependencies:
rollup: ^1.20.0||^2.0.0
rollup: ^2.42.0
dependencies:
'@rollup/pluginutils': 3.1.0_rollup@2.59.0
'@types/resolve': 1.17.1
@ -1998,7 +1978,6 @@ packages:
dependencies:
estree-walker: 2.0.2
picomatch: 2.3.0
dev: false
/@sindresorhus/is/0.14.0:
resolution: {integrity: sha1-n7OjzzEyMoFR81PeRjLgHlIQK+o=, tarball: '@sindresorhus/is/download/@sindresorhus/is-0.14.0.tgz'}
@ -3571,7 +3550,7 @@ packages:
resolution: {integrity: sha1-pvLc5hL63S7x9Rm3NVHxfoUZmDE=, tarball: deep-is/download/deep-is-0.1.4.tgz}
/deepmerge/4.2.2:
resolution: {integrity: sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=, tarball: deepmerge/download/deepmerge-4.2.2.tgz?cache=0&sync_timestamp=1632822781299&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fdeepmerge%2Fdownload%2Fdeepmerge-4.2.2.tgz}
resolution: {integrity: sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=, tarball: deepmerge/download/deepmerge-4.2.2.tgz}
engines: {node: '>=0.10.0'}
/defaults/1.0.3:
@ -4432,6 +4411,7 @@ packages:
graceful-fs: 4.2.8
jsonfile: 6.1.0
universalify: 2.0.0
dev: false
/fs-extra/8.1.0:
resolution: {integrity: sha1-SdQ8RaiM2Wd2aMt74bRu/bjS4cA=, tarball: fs-extra/download/fs-extra-8.1.0.tgz?cache=0&sync_timestamp=1632822706452&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ffs-extra%2Fdownload%2Ffs-extra-8.1.0.tgz}
@ -5789,6 +5769,11 @@ packages:
- utf-8-validate
dev: false
/joycon/3.0.1:
resolution: {integrity: sha1-kHTJsIzPN6Zyb/dKGEhfhe/K3a8=, tarball: joycon/download/joycon-3.0.1.tgz}
engines: {node: '>=10'}
dev: true
/js-tokens/4.0.0:
resolution: {integrity: sha1-GSA/tZmR35jjoocFDUZHzerzJJk=, tarball: js-tokens/download/js-tokens-4.0.0.tgz}
@ -5898,6 +5883,10 @@ packages:
dependencies:
minimist: 1.2.5
/jsonc-parser/3.0.0:
resolution: {integrity: sha1-q914VwHH5+rKip7IzwcMpRp0WiI=, tarball: jsonc-parser/download/jsonc-parser-3.0.0.tgz}
dev: true
/jsonfile/4.0.0:
resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=, tarball: jsonfile/download/jsonfile-4.0.0.tgz}
optionalDependencies:
@ -5910,6 +5899,7 @@ packages:
universalify: 2.0.0
optionalDependencies:
graceful-fs: 4.2.8
dev: false
/jsonparse/1.3.1:
resolution: {integrity: sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=, tarball: jsonparse/download/jsonparse-1.3.1.tgz}
@ -7315,6 +7305,19 @@ packages:
dependencies:
glob: 7.2.0
/rollup-plugin-esbuild/4.6.0_rollup@2.59.0:
resolution: {integrity: sha1-KTsMjS5kt1ORjzAjwfuH3ErN7zs=, tarball: rollup-plugin-esbuild/download/rollup-plugin-esbuild-4.6.0.tgz}
engines: {node: '>=12'}
peerDependencies:
esbuild: '>=0.10.1'
rollup: ^1.20.0 || ^2.0.0
dependencies:
'@rollup/pluginutils': 4.1.1
joycon: 3.0.1
jsonc-parser: 3.0.0
rollup: 2.59.0
dev: true
/rollup/2.59.0:
resolution: {integrity: sha1-EIxhsPoKN+vI0fFk8oFiIFbw21k=, tarball: rollup/download/rollup-2.59.0.tgz}
engines: {node: '>=10.0.0'}
@ -8115,6 +8118,7 @@ packages:
/universalify/2.0.0:
resolution: {integrity: sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=, tarball: universalify/download/universalify-2.0.0.tgz}
engines: {node: '>= 10.0.0'}
dev: false
/update-notifier/5.1.0:
resolution: {integrity: sha1-SrDXx/NqIx3XMWz3cpMT8CFNmtk=, tarball: update-notifier/download/update-notifier-5.1.0.tgz}