Skip to content

Commit d9625c9

Browse files
johndatserakisjohndatserakis
authored
Merge pull request #5 from johndatserakis/upgrade-to-vue-3
Upgrade to Vue 3
2 parents 46336de + f0bf5e5 commit d9625c9

23 files changed

+8423
-14542
lines changed

‎.babelrc

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
11
{
2-
"presets": [
3-
["env", { "modules": false }],
4-
"stage-3"
5-
],
6-
"env": {
7-
"test": {
8-
"presets": [
9-
["env", { "targets": { "node": "current" }}]
10-
]
11-
}
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"modules": false
7+
}
8+
]
9+
],
10+
"env": {
11+
"test": {
12+
"presets": [
13+
[
14+
"@babel/preset-env",
15+
{
16+
"targets": {
17+
"node": "current"
18+
}
19+
}
20+
]
21+
]
1222
}
23+
}
1324
}

‎.editorconfig

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
# editorconfig.org
2-
31
root = true
42

53
[*]
6-
indent_style = space
7-
indent_size = 4
8-
end_of_line = lf
94
charset = utf-8
10-
trim_trailing_whitespace = true
5+
end_of_line = lf
6+
indent_size = 2
7+
indent_style = space
118
insert_final_newline = true
9+
trim_trailing_whitespace = true
1210

1311
[*.md]
14-
trim_trailing_whitespace = false
12+
trim_trailing_whitespace = false

‎.prettierrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"printWidth": 100,
3+
"semi": true,
4+
"singleQuote": true,
5+
"tabWidth": 2,
6+
"trailingComma": "all",
7+
"useTabs": false
8+
}

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2018 John Datserakis, Inc.
3+
Copyright (c) 2018 John Datserakis
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,19 @@ Get easy and reactive access to the width and height of your screen.
1010
<img src="https://img.shields.io/twitter/url/https/github.com/johndatserakis/vue-screen-size.svg?style=social" alt="Tweet"></a>
1111
</p>
1212

13-
### Links
13+
## Vue 3 Support
1414

15-
[View demo](https://johndatserakis.github.io/vue-screen-size/)
15+
Vue 3 is supported from `v2.0.0` and beyond (current `master`). To use `vue-screen-size` with Vue 2, use `v1.0.1`.
1616

17-
[View on npm](https://www.npmjs.com/package/vue-screen-size)
17+
## Links
1818

19-
[View on GitHub](https://github.com/johndatserakis/vue-screen-size)
19+
- [Demo](https://johndatserakis.github.io/vue-screen-size/)
20+
- [GitHub](https://github.com/johndatserakis/vue-screen-size)
21+
- [npm](https://www.npmjs.com/package/vue-screen-size)
2022

21-
### Install
23+
## Install
2224

2325
```bash
24-
# npm
25-
npm i vue-screen-size
26-
27-
# yarn
2826
yarn add vue-screen-size
2927
```
3028

@@ -34,82 +32,80 @@ Or you can include it through the browser at the bottom of your page:
3432
<script src="https://unpkg.com/vue-screen-size/dist/vue-screen-size.min.js"></script>
3533
```
3634

37-
### About
35+
## About
3836

3937
Sometimes when building an app you need to have access to the screen's dimensions. Usually that's going to be done in the css using `@media` - but sometimes you need to access that info right in your JavaScript.
4038

4139
The issue with this is you have to worry about adding event listeners and then removing them later. We wanted to just be able to import something quickly and then be able to forget about it later. So this `mixin` does just that - just use `Vue.use()` or `mixins: [],` and you're off.
4240

4341
There is something to consider - where and how you include this library. There are two ways, make sure to be aware of the differences:
4442

45-
### Usage Example 1 - Whole app has access (Not Recommended)
43+
## Usage Example 1 - Whole app has access (Not Recommended)
4644

4745
In this usage - your whole app - and every child component - has access to the `$vssWidth`, `$vssHeight`, and `$vssEvent` variables. This is sorta pollutive though, as multiple instances of the mixin are initialized and it's kinda wasteful. The is due to the way Vue mixins are passed down to child components. You can read more about this [here](https://vuejs.org/v2/guide/mixins.html#Global-Mixin). The second example is recommended.
4846

4947
```javascript
50-
import VueScreenSize from 'vue-screen-size'
51-
Vue.use(VueScreenSize)
48+
import { VueScreenSizeMixin } from 'vue-screen-size';
49+
50+
app.mixin(VueScreenSizeMixin);
5251

5352
// Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` anywhere in your app.
5453
```
5554

56-
### Usage Example 2 - Just the component you install it on has access - (Recommended)
55+
## Usage Example 2 - Just the component you install it on has access - (Recommended)
5756

5857
In this usage - the component you install it on will have access to the `$vssWidth`, `$vssHeight`, and `$vssEvent` variables. This may be a bit more restrictive, but it's less wasteful and should give you better performance.
5958

6059
```javascript
61-
import VueScreenSize from 'vue-screen-size'
60+
import { VueScreenSizeMixin } from 'vue-screen-size';
6261

6362
export default {
64-
...
65-
mixins: [VueScreenSize.VueScreenSizeMixin],
66-
...
67-
}
63+
mixins: [VueScreenSizeMixin],
64+
};
6865

6966
// Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` in your component.
7067
```
71-
### Variables
7268

73-
| name | type | description |
74-
|--------|------------|-------------|
75-
| $vssWidth | Number | The width of your screen |
76-
| $vssHeight | Number | The height of your screen |
77-
| $vssEvent | Object | The event object data from the resizing event. |
69+
## Variables
7870

79-
### Methods
71+
| name | type | description |
72+
| ---------- | ------ | ---------------------------------------------- |
73+
| $vssWidth | Number | The width of your screen |
74+
| $vssHeight | Number | The height of your screen |
75+
| $vssEvent | Object | The event object data from the resizing event. |
8076

81-
| method | parameters | description |
82-
|--------|------------|-------------|
83-
| $vssDestroyListener | none | Force the removal of the attached event listener |
77+
## Methods
8478

85-
### Development
79+
| method | parameters | description |
80+
| ------------------- | ---------- | ------------------------------------------------ |
81+
| $vssDestroyListener | none | Force the removal of the attached event listener |
82+
83+
## Development
8684

8785
```bash
88-
# install dependencies
89-
npm install
86+
# Install dependencies
87+
yarn
9088

91-
# serve with hot reload
92-
npm run watch
89+
# Serve with hot reload
90+
yarn dev
9391

94-
# run the tests
95-
npm run test
92+
# Run the tests
93+
yarn test
9694

97-
# build demo page
98-
npm run build:example
95+
# Build demo page
96+
yarn build:example
9997

100-
# build
101-
npm run build
98+
# Build library
99+
yarn build:library
102100

103-
# publish to npm
104-
npm publish
101+
# Build everything and run tests
102+
yarn build
105103
```
106104

107-
### Other
105+
## Other
108106

109107
Go ahead and fork the project! Submit an issue if needed. Have fun!
110108

111-
### License
109+
## License
112110

113111
[MIT](http://opensource.org/licenses/MIT)
114-
115-
Packaged with a mixture of [vue-lib-template](https://github.com/biigpongsatorn/vue-lib-template) and [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup).

‎build/rollup.config.js

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎dist/vue-screen-size.esm.js

Lines changed: 44 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,52 @@
1-
import Vue from 'vue';
2-
3-
var reactiveComponent = new Vue({
4-
data: function data() {
5-
return {
6-
event: null,
7-
vssWidth: null,
8-
vssHeight: null
9-
}
10-
}
11-
});
12-
131
var VueScreenSizeMixin = {
14-
computed: {
15-
$vssEvent: function $vssEvent() {
16-
return reactiveComponent.event
17-
},
18-
$vssWidth: function $vssWidth() {
19-
return reactiveComponent.vssWidth || this.getScreenWidth()
20-
},
21-
$vssHeight: function $vssHeight() {
22-
return reactiveComponent.vssHeight || this.getScreenHeight()
23-
}
2+
data: function data() {
3+
return {
4+
event: null,
5+
vssWidth: null,
6+
vssHeight: null,
7+
};
8+
},
9+
computed: {
10+
$vssEvent: function $vssEvent() {
11+
return this.event;
2412
},
25-
methods: {
26-
getScreenWidth: function getScreenWidth() {
27-
return window.innerWidth
28-
|| document.documentElement.clientWidth
29-
|| document.body.clientWidth
30-
},
31-
getScreenHeight: function getScreenHeight() {
32-
return window.innerHeight
33-
|| document.documentElement.clientHeight
34-
|| document.body.clientHeight
35-
},
36-
handleResize: function handleResize(event) {
37-
reactiveComponent.event = event;
38-
reactiveComponent.vssWidth = this.getScreenWidth();
39-
reactiveComponent.vssHeight = this.getScreenHeight();
40-
},
41-
42-
$vssDestroyListener: function $vssDestroyListener() {
43-
window.removeEventListener('resize', this.handleResize);
44-
}
13+
$vssWidth: function $vssWidth() {
14+
return this.vssWidth || this.getScreenWidth();
15+
},
16+
$vssHeight: function $vssHeight() {
17+
return this.vssHeight || this.getScreenHeight();
4518
},
46-
mounted: function mounted() {
47-
window.addEventListener('resize', this.handleResize);
19+
},
20+
methods: {
21+
getScreenWidth: function getScreenWidth() {
22+
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
23+
},
24+
getScreenHeight: function getScreenHeight() {
25+
return (
26+
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
27+
);
28+
},
29+
handleResize: function handleResize(event) {
30+
this.event = event;
31+
this.vssWidth = this.getScreenWidth();
32+
this.vssHeight = this.getScreenHeight();
4833
},
49-
destroyed: function destroyed() {
50-
window.removeEventListener('resize', this.handleResize);
51-
}
52-
}
5334

54-
var install = function (Vue$$1) {
55-
Vue$$1.mixin(VueScreenSizeMixin);
35+
$vssDestroyListener: function $vssDestroyListener() {
36+
window.removeEventListener('resize', this.handleResize);
37+
},
38+
},
39+
mounted: function mounted() {
40+
window.addEventListener('resize', this.handleResize);
41+
},
42+
destroyed: function destroyed() {
43+
window.removeEventListener('resize', this.handleResize);
44+
},
5645
};
5746

58-
// Note that here we're not only exporting the install function, but
59-
// also the mixin itself - this is so with can `Vue.use()` or
60-
// `mixins: [],` it.
61-
var index = { install: install, VueScreenSizeMixin: VueScreenSizeMixin }
47+
var install = function (app) {
48+
app.mixin(VueScreenSizeMixin);
49+
};
6250

63-
export default index;
51+
export default install;
52+
export { VueScreenSizeMixin };

0 commit comments

Comments
 (0)