vue-window-size - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0-beta.0

package.json

 {
   "name": "vue-window-size",
-  "version": "1.2.1",
+  "version": "2.0.0-beta.0",
   "description": "Reactivity window size for Vue.js.",
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./packages/composition-api/dist/index.js",
+  "module": "./packages/composition-api/dist/index.mjs",
+  "types": "./packages/composition-api/dist/index.d.js",
   "exports": {
     ".": {
-      "import": {
-        "default": "./dist/index.js",
-        "types": "./dist/index.d.ts"
-      },
-      "require": "./dist/index.cjs"
+      "import": "./packages/composition-api/dist/index.mjs",
+      "types": "./packages/composition-api/dist/index.d.js",
+      "require": "./packages/composition-api/dist/index.js"
     },
-    "./option-api": {
-      "import": {
-        "default": "./dist/option-api.js",
-        "types": "./dist/option-api.d.ts"
-      },
-      "require": "./dist/option-api.cjs"
-    }
+    "./plugin": {
+      "import": "./packages/plugin/dist/index.mjs",
+      "types": "./packages/plugin/dist/index.d.js",
+      "require": "./packages/plugin/dist/index.js"
+    },
+    "./mixin": {
+      "import": "./packages/mixin/dist/index.mjs",
+      "types": "./packages/mixin/dist/index.d.js",
+      "require": "./packages/mixin/dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./plugin/package.json": "./packages/plugin/package.json",
+    "./mixin/package.json": "./packages/mixin/package.json"
   },
@@ -33,24 +37,19 @@ "repository": "https://github.com/mya-ake/vue-window-size.git",
   "scripts": {
-    "build": "tsup",
-    "test:unit": "vitest --dir tests/unit --run",
-    "test:integration": "vitest --dir tests/integration --run",
-    "release": "np"
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "build": "nx run-many --target=build",
+    "test:unit": "nx run-many --target=test:unit",
+    "test:integration": "nx run-many --target=test:integration",
+    "prepare": "husky install"
   },
-  "dependencies": {
-    "window-resize-subject": "^1.5.0"
-  },
   "devDependencies": {
     "@types/node": "^18.11.18",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.27.1",
     "@vue/compiler-dom": "^3.2.45",
-    "@vue/runtime-core": "^3.2.45",
-    "@vue/test-utils": "^2.2.7",
-    "happy-dom": "^8.1.3",
-    "np": "^7.6.3",
-    "tsup": "^6.5.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
-    "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.27.1",
-    "vue": "^3.2.45"
+    "happy-dom": "^8.1.4",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.0",
+    "nx": "^15.5.1",
+    "prettier": "^2.8.2",
+    "typescript": "^4.9.4"
   },
@@ -61,4 +60,5 @@ "peerDependencies": {
   "files": [
-    "dist",
-    "option-api.d.ts"
+    "packages/composition-api/dist",
+    "packages/plugin/dist",
+    "packages/mixin/dist"
   ],
@@ -68,3 +68,10 @@ "keywords": [
     "window size"
+  ],
+  "lint-staged": {
+    "*.{js,ts,json,md,yml}": "prettier --write"
+  },
+  "workspaces": [
+    "packages/*",
+    "examples/*"
   ]
 }

README.md

 # vue-window-size
+
+[![npm version](https://badge.fury.io/js/vue-window-size.svg)](https://badge.fury.io/js/vue-window-size)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
+![CI Status](https://github.com/mya-ake/vue-window-size/workflows/Main%20Workflow/badge.svg)
+
+> Provides reactivity window size properties for Vue.js.
+
+## Install
+
+### for Vue v3
+
+The following command installs vue-window-size v1.
+
+```bash
+$ yarn add vue-window-size
+// or
+$ npm i vue-window-size
+```
+
+### for Vue v2
+
+The following command installs vue-window-seize v0.
+
+```bash
+$ yarn add vue-window-size@0.6.2
+// or
+$ npm i vue-window-size@0.6.2
+```
+
+---
+
+You can install v1 using the following command.
+
+> note: v1.1.0 or later is for vue3 only
+
+#### Vue.js v2.6.x
+
+When using with vue-window-size v1.0.6 it depends on the [@vue/composition-api](https://github.com/vuejs/composition-api).
+And requires Vue.js v2.6.
+
+```bash
+$ yarn add vue-window-size@1.0.6 @vue/composition-api
+// or
+$ npm i vue-window-size@1.0.6 @vue/composition-api
+```
+
+#### Vue.js v2.7.x
+
+For Vue.js v2.7, please use vue-window-size v1.0.8 or higher.
+
+```bash
+$ yarn add vue-window-size@1.0.x
+// or
+$ npm i vue-window-size@1.0.x
+```
+
+## Usage
+
+[Composition API](#Composition_API) or [Plugin](#Plugin) or [Mixin](#Mixin).
+
+|                             | Composition API |     Plugin     |    Mixin    |
+| :-------------------------: | :-------------: | :------------: | :---------: |
+| has window sizes properties |   only in use   | all components | only in use |
+|     handle resize event     |   only in use   |   all times    |  all times  |
+
+### Composition API
+
+Use with component.
+
+```JavaScript
+<template>
+  <div>
+    <p>window width: {{ windowWidth }}</p>
+    <p>window height: {{ windowHeight }}</p>
+  </div>
+</template>
+
+<script>
+import { useWindowSize } from 'vue-window-size';
+
+export default {
+  setup() {
+    const { width, height } = useWindowSize();
+    return {
+      windowWidth: width,
+      windowHeight: height,
+    };
+  },
+};
+</script>
+```
+
+> note: useWindowSize handles a Resize Event only when it is in use.
+> Even if it is called by multiple components, the Resize event is processed only once.
+> If it is not used, it will not be handled.
+
+### Plugin
+
+Install plugin
+
+```JavaScript
+import { createApp } from 'vue';
+import App from "./App.vue";  // your App component
+import { VueWindowSizePlugin } from 'vue-window-size/option-api';
+
+const app = createApp(App);
+app.use(VueWindowSizePlugin);
+```
+
+Use with component
+
+```HTML
+<template>
+  <div>
+    <p>window width: {{ $windowWidth }}</p>
+    <p>window height: {{ $windowHeight }}</p>
+  </div>
+</template>
+```
+
+### Mixin
+
+Use with component
+
+```HTML
+<template>
+  <div>
+    <p>window width: {{ $windowWidth }}</p>
+    <p>window height: {{ $windowHeight }}</p>
+  </div>
+</template>
+
+<script>
+import { vueWindowSizeMixin } from 'vue-window-size/option-api';
+
+export default {
+  mixins: [vueWindowSizeMixin()],
+};
+</script>
+```
+
+## Config for Option API
+
+### `delay` (option)
+
+- type: `Number`
+- default: `33`
+  - About 30 FPS
+
+Change delay time of resize event.
+
+e.g.
+
+```JavaScript
+import { createApp } from 'vue';
+import App from "./App.vue";  // your App component
+import { VueWindowSizePlugin } from 'vue-window-size/option-api';
+
+const app = createApp(App);
+app.use(VueWindowSizePlugin, {
+  delay: 100,
+});
+```
+
+## Public API for Option API
+
+### `config(config: VueWindowSizeOptionApiConfig)`
+
+Same as config for Option API.
+
+```JavaScript
+import { vueWindowSizeAPI } from 'vue-window-size/option-api';
+
+vueWindowSizeAPI.config({
+  delay: 100,
+});
+```
+
+### `init()`
+
+Initialize the plugin.
+Usually called automatically.
+Please call it if you want to use it again after destroy.
+
+```JavaScript
+import { vueWindowSizeAPI } from 'vue-window-size/option-api';
+
+vueWindowSizeAPI.init();
+```
+
+### `destroy()`
+
+Remove the resize event.
+
+```JavaScript
+import { vueWindowSizeAPI } from 'vue-window-size/option-api';
+
+vueWindowSizeAPI.destroy();
+```
+
+## FAQ
+
+### Why is there no Config in the Composition API?
+
+`useWindowSize` is a singleton and handles the resize event.
+Therefore, using `useWindowSize(config)` will affect all components in used.
+Due to the nature of the Composition API, this is not the desired behavior.
+I also think that there are not many use cases that need to be set individually.  
+If requested, I will create a `useAtomicWindowSize(config)` that can be set atomically, so please create an issue.
+Or create a factory function for `createUseWindowSize(config)`.
+
+### When is the removeEventListener called when using plugin and mixin??
+
+vue-window-size adds addEventListener only once, even if it is used in mixin.
+So basically you do not need to call removeEventListener.
+If you want to call removeEventListener please call [destroy](#destroy) method.
+
+## Contribution
+
+If you find a bug or want to contribute to the code or documentation, you can help by submitting an [issue](https://github.com/mya-ake/vue-window-size/issues) or a [pull request](https://github.com/mya-ake/vue-window-size/pulls).
+
+## License
+
+[MIT](https://github.com/mya-ake/vue-window-size/blob/master/LICENSE)

New alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8454

increased by28.34%

Dependency count

1

decreased by-50%

Dev dependency count

9

decreased by-30.77%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

226

increased by11200%

Worsened metrics

Number of package files

3

decreased by-62.5%

Lines of code

0

decreased by-100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedwindow-resize-subject@^1.5.0

• - Removedwindow-resize-subject@1.5.0(transitive)