├── .babelrc ├── .circleci └── config.yml ├── .eslintrc ├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md ├── funding.yml └── settings.yml ├── .gitignore ├── .release-it.json ├── LICENSE ├── README.md ├── docs ├── .nojekyll ├── README.md └── index.html ├── example ├── App.vue └── index.js ├── package.json ├── src └── index.js ├── test ├── index.spec.js ├── mocks │ ├── tweenjs.js │ └── tweezer.js ├── tweenjs.spec.js ├── tweezer.spec.js └── utils │ └── Helper.vue └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }] 4 | ], 5 | "env": { 6 | "test": { 7 | "presets": [ 8 | ["env", { "targets": { "node": "current" }}] 9 | ] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | 7 | 8 | jobs: 9 | build: 10 | docker: 11 | - image: circleci/node:8 12 | 13 | working_directory: ~/repo 14 | 15 | steps: 16 | - checkout 17 | 18 | # Download and cache dependencies 19 | - restore_cache: 20 | keys: 21 | - v1-dependencies-{{ checksum "package.json" }} 22 | # fallback to using the latest cache if no exact match is found 23 | - v1-dependencies- 24 | 25 | - run: yarn install 26 | 27 | - save_cache: 28 | paths: 29 | - node_modules 30 | key: v1-dependencies-{{ checksum "package.json" }} 31 | 32 | # run tests! 33 | - run: npm test 34 | 35 | - run: 36 | name: Send code coverage 37 | command: './node_modules/.bin/codecov' 38 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "posva" 4 | ], 5 | "env": { 6 | "jest": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. 4 | 5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion. 6 | 7 | Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. 8 | 9 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team. 10 | 11 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. 12 | 13 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/) 14 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are welcome and will be fully credited! 4 | 5 | We accept contributions via Pull Requests on [Github](https://github.com/{{ githubAccount }}/{{ name }}). 6 | 7 | ## Pull Requests 8 | 9 | Here are some guidelines to make the process smoother: 10 | 11 | - **Add a test** - New features and bugfixes need tests. If you find it difficult to test, please tell us in the pull request and we will try to help you! 12 | - **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date. 13 | - **Run `npm test` locally** - This will allow you to go faster 14 | - **One pull request per feature** - If you want to do more than one thing, send multiple pull requests. 15 | - **Send coherent history** - Make sure your commits message means something 16 | - **Consider our release cycle** - We try to follow [SemVer v2.0.0](http://semver.org/). Randomly breaking public APIs is not an option. 17 | 18 | ## Creating issues 19 | 20 | ### Bug reports 21 | 22 | Always try to provide as much information as possible. If you are reporting a bug, try to provide a repro on jsfiddle.net (or anything else) or a stacktrace at the very least. This will help us check the problem quicker. 23 | 24 | ### Feature requests 25 | 26 | Lay out the reasoning behind it and propose an API for it. Ideally, you should have a practical example to prove the utility of the feature you're requesting. 27 | 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | **What kind of change does this PR introduce?** (check at least one) 10 | 11 | - [ ] Bugfix 12 | - [ ] Feature 13 | - [ ] Code style update 14 | - [ ] Refactor 15 | - [ ] Build-related changes 16 | - [ ] Other, please describe: 17 | 18 | **Does this PR introduce a breaking change?** (check one) 19 | 20 | - [ ] Yes 21 | - [ ] No 22 | 23 | If yes, please describe the impact and migration path for existing applications: 24 | 25 | **The PR fulfills these requirements:** 26 | 27 | - [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix #xxx[,#xxx]`, where "xxx" is the issue number) 28 | - [ ] All tests are passing 29 | - [ ] New/updated tests are included 30 | 31 | If adding a **new feature**, the PR's description includes: 32 | - [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it) 33 | 34 | **Other information:** 35 | -------------------------------------------------------------------------------- /.github/funding.yml: -------------------------------------------------------------------------------- 1 | github: posva 2 | patreon: posva 3 | custom: https://www.paypal.me/posva 4 | -------------------------------------------------------------------------------- /.github/settings.yml: -------------------------------------------------------------------------------- 1 | labels: 2 | - name: bug 3 | color: ee0701 4 | - name: contribution welcome 5 | color: 0e8a16 6 | - name: discussion 7 | color: 4935ad 8 | - name: docs 9 | color: 8be281 10 | - name: enhancement 11 | color: a2eeef 12 | - name: good first issue 13 | color: 7057ff 14 | - name: help wanted 15 | color: 008672 16 | - name: question 17 | color: d876e3 18 | - name: wontfix 19 | color: ffffff 20 | - name: WIP 21 | color: ffffff 22 | - name: need repro 23 | color: c9581c 24 | - name: feature request 25 | color: fbca04 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | npm-debug.log 4 | yarn-error.log 5 | .nyc_output 6 | coverage.lcov 7 | dist 8 | package-lock.json 9 | .DS_Store 10 | -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "src": { 3 | "tagName": "v%s", 4 | "commitMessage": "🔖 %s" 5 | }, 6 | "github": { 7 | "release": true, 8 | "releaseName": "🚀 Release %s", 9 | "tokenRef": "GITHUB_TOKEN" 10 | }, 11 | "npm": { 12 | "publish": true 13 | }, 14 | "changelogCommand": "git log --pretty=format:'* %s (%h)' [REV_RANGE]" 15 | } 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Eduardo San Martin Morote 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VueTweezing [![Build Status](https://badgen.net/circleci/github/posva/vue-tweezing)](https://circleci.com/gh/posva/vue-tweezing) [![npm package](https://badgen.net/npm/v/vue-tweezing)](https://www.npmjs.com/package/vue-tweezing) [![coverage](https://badgen.net/codecov/c/github/posva/vue-tweezing)](https://codecov.io/github/posva/vue-tweezing) [![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/posva/thanks) 2 | 3 | > Easy, customizable and automatic tweening nicely served in scoped slots 4 | 5 | VueTweezing works with any tweening engine and provide easy integration with some engines like 6 | [tween.js](https://github.com/tweenjs/tween.js) and [Tweezer](https://github.com/jaxgeller/tweezer.js/) 7 | 8 | [Demo](https://state-animations-amsterdam.surge.sh/polygon), [source](https://github.com/posva/state-animation-demos/blob/master/pages/polygon.vue) 9 | 10 | ## Usage 11 | 12 | Install it as a plugin: 13 | 14 | ```js 15 | import { Tweezing, tweezerHelper } from 'vue-tweezing' 16 | // import Tweezer to use it as our Tweening engine 17 | import Tweezer from 'tweezer.js' 18 | 19 | // install the plugin with as many engines as you want 20 | // use the tweezerHelper to generate the function 21 | // needed by VueTweezing to handle tweezing 22 | Vue.use(Tweezing, { 23 | tweezer: tweezerHelper(Tweezer), 24 | }) 25 | ``` 26 | 27 | Use it as a component: 28 | 29 | ```vue 30 | 31 | 
32 |     target: {{ value }}
33 |     val: {{ tweenedValue }}
34 |
35 | 36 | ``` 37 | 38 | Change `value` as you would usually do: 39 | 40 | ```js 41 | const vm = new Vue({ 42 | el: '#app', 43 | data: { 44 | value: 0, 45 | }, 46 | }) 47 | // somewhere else 48 | vm.value = 200 49 | ``` 50 | 51 | You can play with the tween object by accessing the property `$tween` in the `Tweening` component: 52 | 53 | ```js 54 | // given the example above 55 | vm.$refs.tweezing.$tween.stop() 56 | ``` 57 | 58 | ## Passing tweening options 59 | 60 | Any prop passed to `Tweezing` different from `tween` and `to` will be considered an option and passed 61 | 62 | ## Supported Tweening engines 63 | 64 | WIP 65 | 66 | ### Tweezer 67 | 68 | ### Tween.js 69 | 70 | ### Adding your own 71 | 72 | WIP 73 | 74 | You can check the examples in `src/index.js` to see how to create your own helpers. 75 | 76 | ## License 77 | 78 | [MIT](http://opensource.org/licenses/MIT) 79 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/posva/vue-tweezing/e794e8db105029029496175135968f009a578d05/docs/.nojekyll -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # vue-tweezing 2 | 3 | ## Basic Usage 4 | 5 | It's better to install it as a plugin, to add a default tweening engine: 6 | 7 | ```js 8 | import { Tweezing, tweezerHelper } from 'vue-tweezing' 9 | // import Tweezer to use it as our Tweening engine 10 | import Tweezer from 'tweezer.js' 11 | 12 | // install the plugin with one single engines 13 | // use the tweezerHelper to generate the function 14 | // needed by VueTweezing to handle tweezing 15 | Vue.use(Tweezing, { 16 | tweezer: tweezerHelper(Tweezer) 17 | }) 18 | ``` 19 | 20 | Then you get access to the component `Tweezing`: 21 | 22 | ```html 23 | 24 | 
25 |     target: {{ value }}
26 |     val: {{ tweenedValue }}
27 |
28 | 29 | ``` 30 | 31 | In your js you can change `value` as you would usually: 32 | 33 | ```js 34 | const vm = new Vue({ 35 | el: '#app', 36 | data: { 37 | value: 0 38 | } 39 | }) 40 | // somewhere else 41 | vm.value = 200 42 | ``` 43 | 44 | That will trigger a new tween using Tweezer. See [Tweezer helper documentation](#Tweezer) for more information. 45 | 46 | You can play with the tween object by accessing the property `$tween` in the `Tweening` component: 47 | 48 | ```js 49 | // given the example above 50 | vm.$refs.tweezing.$tween.stop() 51 | ``` 52 | 53 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Tweezing docs 8 | 9 | 10 | 11 |
12 | 13 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 102 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | // eslint-disable-next-line 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App), 8 | }) 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tweezing", 3 | "version": "0.1.6", 4 | "description": "Automatic tweening values nicely served in scoped slots", 5 | "main": "dist/vue-tweezing.cjs.js", 6 | "author": { 7 | "name": "Eduardo San Martin Morote", 8 | "email": "posva13@gmail.com" 9 | }, 10 | "scripts": { 11 | "lint": "eslint --color --ext=js,html src test example docs", 12 | "unit": "jest", 13 | "dev": "npm run unit -- --watchAll", 14 | "test": "npm run lint && npm run unit", 15 | "prepublishOnly": "rollit" 16 | }, 17 | "files": [ 18 | "src", 19 | "dist", 20 | "LICENSE", 21 | "README.md" 22 | ], 23 | "keywords": [ 24 | "vue", 25 | "tween", 26 | "tweening", 27 | "tween.js", 28 | "js", 29 | "shift", 30 | "shifter", 31 | "change", 32 | "animation" 33 | ], 34 | "license": "MIT", 35 | "devDependencies": { 36 | "@tweenjs/tween.js": "^17.4.0", 37 | "@vue/test-utils": "^1.0.0-beta.25", 38 | "babel-jest": "^23.6.0", 39 | "babel-preset-env": "^1.7.0", 40 | "codecov": "^3.5.0", 41 | "eslint": "^5.16.0", 42 | "eslint-config-posva": "^2.0.3", 43 | "jest": "^23.6.0", 44 | "shifty": "^2.8.0", 45 | "tweezer.js": "^1.5.0", 46 | "vue": "^2.6.10", 47 | "vue-jest": "^3.0.4", 48 | "vue-template-compiler": "^2.6.10" 49 | }, 50 | "repository": { 51 | "type": "git", 52 | "url": "git+https://github.com/posva/vue-tweezing.git" 53 | }, 54 | "bugs": { 55 | "url": "https://github.com/posva/vue-tweezing/issues" 56 | }, 57 | "jest": { 58 | "collectCoverage": true, 59 | "moduleFileExtensions": [ 60 | "js", 61 | "json", 62 | "vue" 63 | ], 64 | "transform": { 65 | "^.+\\.js$": "/node_modules/babel-jest", 66 | ".*\\.(vue)$": "/node_modules/vue-jest" 67 | }, 68 | "coveragePathIgnorePatterns": [ 69 | "/test/*.js", 70 | "/test/utils/Helper.vue", 71 | "/test/.*.js", 72 | "/test/*/*.js" 73 | ] 74 | }, 75 | "homepage": "https://github.com/posva/vue-tweezing#readme", 76 | "module": "dist/vue-tweezing.es.js", 77 | "unpkg": "dist/vue-tweezing.js", 78 | "browser": "dist/vue-tweezing.js" 79 | } 80 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // collection of functions to create tweens 2 | const tweeners = {} 3 | 4 | export const Tweezing = { 5 | props: { 6 | to: [Number, Object, Array], 7 | tween: { 8 | type: [String, Function], 9 | default: () => 'default', 10 | }, 11 | }, 12 | 13 | data () { 14 | return { 15 | value: 0, 16 | } 17 | }, 18 | 19 | created () { 20 | // ensure the watcher of tween to be called first so 21 | // tweenFn exists in `to` watcher 22 | this.$options.watch.tween.call(this, this.tween) 23 | this.value = this.to 24 | this.$options.watch.to.call(this, this.to) 25 | }, 26 | 27 | render (h) { 28 | const node = this.$scopedSlots.default(this.value) 29 | if (Array.isArray(node)) { 30 | // TODO dev error 31 | return node[0] 32 | } 33 | return node 34 | }, 35 | 36 | methods: { 37 | ensureValue (val) { 38 | const targetType = typeof val 39 | const currentType = typeof this.value 40 | if (targetType === currentType) { 41 | if (Array.isArray(val)) { 42 | this.value.length = val.length 43 | } 44 | return 45 | } 46 | // set initial value to current value 47 | if (targetType === 'number') { 48 | this.value = val 49 | } else if (Array.isArray(val)) { 50 | this.value = val.slice() 51 | } else if (targetType === 'object') { 52 | this.value = Object.keys(val).reduce((values, name) => { 53 | values[name] = val[name] 54 | return values 55 | }, {}) 56 | } 57 | }, 58 | }, 59 | 60 | watch: { 61 | tween (tween) { 62 | if (typeof tween === 'function') { 63 | this.tweenFn = tween 64 | } else { 65 | // TODO warning if not string or non-existant 66 | this.tweenFn = tweeners[tween] 67 | } 68 | }, 69 | // TODO should probably be deep 70 | to (to, old) { 71 | const type = typeof to 72 | this.ensureValue(to) 73 | 74 | stopTweens(this.$tween) 75 | if (type === 'number') { 76 | this.$tween = this.tweenFn(this.value, to, { 77 | $setValue: v => { 78 | this.value = v 79 | }, 80 | ...this.$attrs, 81 | }, this) 82 | } else if (Array.isArray(to)) { 83 | this.$tween = to.map((value, i) => { 84 | return this.tweenFn(this.value[i] || 0, value, { 85 | $setValue: v => { 86 | this.value.splice(i, 1, v) 87 | }, 88 | ...this.$attrs, 89 | }) 90 | }) 91 | } else if (type === 'object') { 92 | this.$tween = Object.keys(to).reduce((tweens, name) => { 93 | tweens[name] = this.tweenFn(this.value[name], to[name], { 94 | $setValue: v => { 95 | this.value[name] = v 96 | }, 97 | ...this.$attrs, 98 | }) 99 | return tweens 100 | }, Object.create(null)) 101 | } 102 | }, 103 | }, 104 | 105 | // to use as a plugin 106 | install (Vue, options = {}) { 107 | Vue.component(options.name || 'Tweezing', Tweezing) 108 | const defaultTweener = options.default 109 | // could have used {name, default, ...options} but I don't really like 110 | // the way bubel polyfills it (even in es) 111 | delete options.name 112 | delete options.default 113 | const tweenerNames = Object.keys(options) 114 | tweenerNames.forEach(tweener => { 115 | tweeners[tweener] = options[tweener] 116 | }) 117 | // Use the first one or anyone provided by the user 118 | tweeners.default = tweeners[defaultTweener || tweenerNames[0]] 119 | }, 120 | } 121 | 122 | function stopTweens (tweens) { 123 | if (tweens) { 124 | // TODO use a better method 125 | // the prototype is null when using objects 126 | if (Array.isArray(tweens)) { 127 | tweens.forEach(tween => tween.stop()) 128 | } else if (!Object.getPrototypeOf(tweens)) { 129 | // TODO not all tweens have a stop method 130 | for (const key in tweens) tweens[key].stop() 131 | } else { 132 | tweens.stop() 133 | } 134 | } 135 | } 136 | 137 | // helper for tweezer.js 138 | export function tweezerHelper (Tweezer) { 139 | return function (start, end, opts) { 140 | // cancel previous tween 141 | let started 142 | return new Tweezer({ 143 | start, 144 | end, 145 | ...opts, 146 | }).on('tick', value => { 147 | if (!started) { 148 | started = true 149 | this.$emit('start') 150 | } 151 | opts.$setValue(value) 152 | }).on('done', () => this.$emit('end')) 153 | .begin() 154 | } 155 | } 156 | 157 | export function tweenjsHelper (TWEEN) { 158 | return function (value, end, opts) { 159 | const container = { value } 160 | // cancel previous tween 161 | return new TWEEN.Tween(container) 162 | .to({ value: end }, opts.duration) 163 | .interpolation(opts.interpolation || TWEEN.Interpolation.Linear) 164 | .easing(opts.easing || TWEEN.Easing.Quadratic.Out) 165 | .delay(+opts.delay || 0) 166 | // TODO should probably emit the name of the property too 167 | // default could be the name if only one value is provided 168 | .onStart(() => this.$emit('start')) 169 | .onUpdate(() => { 170 | opts.$setValue(container.value) 171 | }) 172 | .onComplete(() => this.$emit('end')) 173 | .start() 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /test/index.spec.js: -------------------------------------------------------------------------------- 1 | import { mount, createLocalVue } from '@vue/test-utils' 2 | import { Tweezing } from '../src' 3 | import Helper from './utils/Helper' 4 | 5 | // TODO use custom tweening 6 | let tween 7 | function custom (start, end, opts) { 8 | tween = { 9 | start: () => (this.value = start), 10 | end: () => (this.value = end), 11 | stop () { 12 | this.end() 13 | }, 14 | } 15 | return tween 16 | } 17 | 18 | function other () { 19 | tween = { 20 | start: () => (this.value = 0), 21 | end: () => (this.value = 10), 22 | } 23 | return tween 24 | } 25 | 26 | describe('Tweezing', () => { 27 | describe('Custom tween', () => { 28 | let wrapper, localVue 29 | beforeEach(() => { 30 | localVue = createLocalVue() 31 | localVue.use(Tweezing, { 32 | custom, 33 | }) 34 | 35 | wrapper = mount(Helper, { 36 | localVue, 37 | propsData: { 38 | to: 0, 39 | tween: undefined, 40 | }, 41 | }) 42 | }) 43 | 44 | test('pass right parameters', () => { 45 | const localVue = createLocalVue() 46 | const spy = jest.fn() 47 | localVue.use(Tweezing, { 48 | custom: spy, 49 | }) 50 | 51 | wrapper = mount(Helper, { 52 | localVue, 53 | propsData: { 54 | to: 0, 55 | tween: undefined, 56 | }, 57 | }) 58 | expect(spy).toHaveBeenCalled() 59 | expect(spy.mock.calls[0][0]).toBe(0) 60 | expect(spy.mock.calls[0][1]).toBe(0) 61 | expect(spy.mock.calls[0][3]).toBe(wrapper.find(Tweezing).vm) 62 | }) 63 | 64 | test('changes the value', async () => { 65 | const wrapper = mount(Helper, { 66 | localVue, 67 | propsData: { 68 | to: 0, 69 | tween: undefined, 70 | }, 71 | sync: false, 72 | }) 73 | tween.start() 74 | wrapper.setProps({ to: 1 }) 75 | await wrapper.vm.$nextTick() 76 | expect(wrapper.text()).toBe('0') 77 | tween.end() 78 | await wrapper.vm.$nextTick() 79 | expect(wrapper.text()).toBe('1') 80 | }) 81 | 82 | test('can use custom tween function', () => { 83 | expect(wrapper.find(Tweezing).vm.tweenFn).toBe(custom) 84 | const spy = jest.fn() 85 | wrapper.setProps({ tween: spy }) 86 | expect(wrapper.find(Tweezing).vm.tweenFn).toBe(spy) 87 | }) 88 | }) 89 | 90 | test('register Tweezing component by default', () => { 91 | const localVue = createLocalVue() 92 | localVue.use(Tweezing, { custom }) 93 | expect(localVue.component('Tweezing')).toBeDefined() 94 | }) 95 | 96 | test('customize component name', () => { 97 | const localVue = createLocalVue() 98 | localVue.use(Tweezing, { 99 | name: 'MyTween', 100 | custom, 101 | }) 102 | 103 | expect(localVue.component('Tweezing')).not.toBeDefined() 104 | expect(localVue.component('MyTween')).toBeDefined() 105 | }) 106 | 107 | test('use multiple tween engines', () => { 108 | const localVue = createLocalVue() 109 | localVue.use(Tweezing, { 110 | custom, 111 | other, 112 | }) 113 | 114 | const wrapper = mount(Helper, { 115 | localVue, 116 | propsData: { 117 | to: 0, 118 | tween: 'other', 119 | }, 120 | }) 121 | expect(wrapper.find(Tweezing).vm.tweenFn).toBe(other) 122 | wrapper.setProps({ tween: 'custom' }) 123 | expect(wrapper.find(Tweezing).vm.tweenFn).toBe(custom) 124 | wrapper.setProps({ tween: 'default' }) 125 | expect(wrapper.find(Tweezing).vm.tweenFn).toBe(custom) 126 | }) 127 | }) 128 | -------------------------------------------------------------------------------- /test/mocks/tweenjs.js: -------------------------------------------------------------------------------- 1 | import { Easing, Interpolation } from '@tweenjs/tween.js' 2 | 3 | export class Tween { 4 | constructor (container) { 5 | this.startValue = container 6 | } 7 | 8 | to (container, options) { 9 | this.endValue = container 10 | this.options = options 11 | return this 12 | } 13 | 14 | interpolation () { 15 | return this 16 | } 17 | 18 | easing () { 19 | return this 20 | } 21 | 22 | delay () { 23 | return this 24 | } 25 | 26 | onStart (fn) { 27 | this.startFn = fn 28 | return this 29 | } 30 | 31 | onUpdate (fn) { 32 | this.tick = fn 33 | return this 34 | } 35 | 36 | onComplete (fn) { 37 | this.done = fn 38 | return this 39 | } 40 | 41 | start () { 42 | this.startFn() 43 | this.value = this.startValue 44 | this.tick(this.value) 45 | return this 46 | } 47 | 48 | stop () { 49 | return this 50 | } 51 | 52 | // Custom function to make it end 53 | _end () { 54 | Object.assign(this.value, this.endValue) 55 | this.tick(this.value) 56 | this.done() 57 | } 58 | } 59 | 60 | export default { 61 | Tween, 62 | Easing, 63 | Interpolation, 64 | } 65 | -------------------------------------------------------------------------------- /test/mocks/tweezer.js: -------------------------------------------------------------------------------- 1 | export default class Tweezer { 2 | constructor ({ start, end }) { 3 | this.start = start 4 | this.end = end 5 | this.tick = () => {} 6 | this.done = () => {} 7 | } 8 | 9 | on (event, fn) { 10 | this[event] = fn 11 | return this 12 | } 13 | 14 | begin () { 15 | this.value = this.start 16 | this.tick(this.value) 17 | return this 18 | } 19 | 20 | stop () { 21 | return this 22 | } 23 | 24 | // Custom function to make it end 25 | _end () { 26 | this.value = this.end 27 | this.tick(this.value) 28 | this.done() 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /test/tweenjs.spec.js: -------------------------------------------------------------------------------- 1 | import { mount, createLocalVue } from '@vue/test-utils' 2 | import { Tweezing, tweenjsHelper } from '../src' 3 | import TWEEN, { Tween } from './mocks/tweenjs' 4 | import Helper from './utils/Helper' 5 | 6 | const localVue = createLocalVue() 7 | localVue.use(Tweezing, { 8 | tweenjs: tweenjsHelper(TWEEN), 9 | }) 10 | 11 | describe('tween.js', () => { 12 | let wrapper 13 | beforeEach(() => { 14 | wrapper = mount(Helper, { 15 | localVue, 16 | propsData: { 17 | to: 0, 18 | }, 19 | sync: false, 20 | }) 21 | }) 22 | 23 | test('starts right away', () => { 24 | expect(wrapper.text()).toBe('0') 25 | }) 26 | 27 | test('emits start when starting', () => { 28 | const tweezing = wrapper.find(Tweezing) 29 | expect(tweezing.emitted().start).toBeTruthy() 30 | expect(tweezing.emitted().start.length).toBe(1) 31 | }) 32 | 33 | test('emits end when ending', () => { 34 | const tweezing = wrapper.find(Tweezing) 35 | tweezing.vm.$tween._end() 36 | expect(tweezing.emitted().end).toBeTruthy() 37 | expect(tweezing.emitted().end.length).toBe(1) 38 | }) 39 | 40 | describe('sync: false', () => { 41 | test('accepts an object of values', async () => { 42 | const wrapper = mount(Helper, { 43 | localVue, 44 | propsData: { 45 | to: { a: 0, b: 0 }, 46 | }, 47 | sync: false, 48 | }) 49 | const tweezing = wrapper.find(Tweezing) 50 | // tweezing.vm.$tween._start() 51 | wrapper.setProps({ to: { a: 1, b: 1 } }) 52 | expect(wrapper.text()).toBe('{"a":0,"b":0}') 53 | await wrapper.vm.$nextTick() 54 | tweezing.vm.$tween.a._end() 55 | tweezing.vm.$tween.b._end() 56 | await wrapper.vm.$nextTick() 57 | expect(wrapper.text()).toBe('{"a":1,"b":1}') 58 | }) 59 | 60 | test('accepts an array of values', async () => { 61 | const wrapper = mount(Helper, { 62 | localVue, 63 | propsData: { 64 | to: [0, 0], 65 | }, 66 | sync: false, 67 | }) 68 | const tweezing = wrapper.find(Tweezing) 69 | // tweezing.vm.$tween._start() 70 | wrapper.setProps({ to: [1, 2] }) 71 | await wrapper.vm.$nextTick() 72 | expect(wrapper.text()).toBe('[0,0]') 73 | tweezing.vm.$tween['0']._end() 74 | tweezing.vm.$tween['1']._end() 75 | await wrapper.vm.$nextTick() 76 | expect(wrapper.text()).toBe('[1,2]') 77 | }) 78 | 79 | test('stops ongoing tween with a new one', async () => { 80 | const tweezing = wrapper.find(Tweezing) 81 | const spy = jest.spyOn(tweezing.vm.$tween, 'stop') 82 | wrapper.setProps({ to: 1 }) 83 | await wrapper.vm.$nextTick() 84 | expect(spy).toHaveBeenCalled() 85 | spy.mockRestore() 86 | }) 87 | }) 88 | 89 | test('should pass on props as options', () => { 90 | const spy = jest.fn() 91 | function Mock (...args) { 92 | spy(...args) 93 | Tween.apply(this, args) 94 | } 95 | Mock.prototype = Tween.prototype 96 | const localVue = createLocalVue() 97 | localVue.use(Tweezing, { 98 | tweezer: tweenjsHelper({ ...TWEEN, Tween: Mock }), 99 | }) 100 | const spyTo = jest.spyOn(Tween.prototype, 'to') 101 | wrapper = mount(Helper, { 102 | localVue, 103 | propsData: { 104 | to: 0, 105 | // these have to be added in Helper.vue 106 | duration: 10, 107 | other: true, 108 | }, 109 | }) 110 | expect(spy).toHaveBeenCalledWith({ 111 | value: 0, 112 | }) 113 | expect(spyTo).toHaveBeenCalledWith({ value: 0 }, 10) 114 | spy.mockRestore() 115 | spyTo.mockRestore() 116 | }) 117 | 118 | test('pass on easing prop', () => { 119 | const spy = jest.spyOn(Tween.prototype, 'easing') 120 | wrapper = mount(Helper, { 121 | localVue, 122 | propsData: { 123 | to: 0, 124 | easing: 'foo', 125 | }, 126 | }) 127 | expect(spy).toHaveBeenCalledWith('foo') 128 | spy.mockRestore() 129 | }) 130 | 131 | test('pass on interpolation prop', () => { 132 | const spy = jest.spyOn(Tween.prototype, 'interpolation') 133 | wrapper = mount(Helper, { 134 | localVue, 135 | propsData: { 136 | to: 0, 137 | interpolation: 'foo', 138 | }, 139 | }) 140 | expect(spy).toHaveBeenCalledWith('foo') 141 | spy.mockRestore() 142 | }) 143 | 144 | test('pass on delay prop', () => { 145 | const spy = jest.spyOn(Tween.prototype, 'delay') 146 | wrapper = mount(Helper, { 147 | localVue, 148 | propsData: { 149 | to: 0, 150 | delay: 500, 151 | }, 152 | }) 153 | expect(spy).toHaveBeenCalledWith(500) 154 | spy.mockRestore() 155 | }) 156 | }) 157 | -------------------------------------------------------------------------------- /test/tweezer.spec.js: -------------------------------------------------------------------------------- 1 | import { mount, createLocalVue } from '@vue/test-utils' 2 | import { Tweezing, tweezerHelper } from '../src' 3 | import Tweezer from './mocks/tweezer' 4 | import Helper from './utils/Helper' 5 | 6 | const localVue = createLocalVue() 7 | localVue.use(Tweezing, { 8 | tweezer: tweezerHelper(Tweezer), 9 | }) 10 | 11 | describe('Tweezer', () => { 12 | let wrapper 13 | beforeEach(() => { 14 | wrapper = mount(Helper, { 15 | localVue, 16 | propsData: { 17 | to: 0, 18 | }, 19 | }) 20 | }) 21 | 22 | test('starts right away', () => { 23 | expect(wrapper.text()).toBe('0') 24 | }) 25 | 26 | test('emits start when starting', () => { 27 | const tweezing = wrapper.find(Tweezing) 28 | expect(tweezing.emitted().start).toBeTruthy() 29 | expect(tweezing.emitted().start.length).toBe(1) 30 | }) 31 | 32 | test('emits end when ending', () => { 33 | const tweezing = wrapper.find(Tweezing) 34 | tweezing.vm.$tween._end() 35 | expect(tweezing.emitted().end).toBeTruthy() 36 | expect(tweezing.emitted().end.length).toBe(1) 37 | }) 38 | 39 | test('accepts an object of values', async () => { 40 | const wrapper = mount(Helper, { 41 | localVue, 42 | propsData: { 43 | to: { a: 0, b: 0 }, 44 | }, 45 | sync: false, 46 | }) 47 | const tweezing = wrapper.find(Tweezing) 48 | // tweezing.vm.$tween._start() 49 | wrapper.setProps({ to: { a: 1, b: 1 } }) 50 | await wrapper.vm.$nextTick() 51 | expect(wrapper.text()).toBe('{"a":0,"b":0}') 52 | tweezing.vm.$tween.a._end() 53 | tweezing.vm.$tween.b._end() 54 | await wrapper.vm.$nextTick() 55 | expect(wrapper.text()).toBe('{"a":1,"b":1}') 56 | }) 57 | 58 | test('stops ongoing tween with a new one', async () => { 59 | const wrapper = mount(Helper, { 60 | localVue, 61 | propsData: { 62 | to: 0, 63 | }, 64 | sync: false, 65 | }) 66 | const tweezing = wrapper.find(Tweezing) 67 | const spy = jest.spyOn(tweezing.vm.$tween, 'stop') 68 | wrapper.setProps({ to: 1 }) 69 | await wrapper.vm.$nextTick() 70 | expect(spy).toHaveBeenCalled() 71 | spy.mockRestore() 72 | }) 73 | 74 | describe('Options', () => { 75 | let spy 76 | let localVue 77 | beforeEach(() => { 78 | spy = jest.fn() 79 | function Mock (...args) { 80 | spy(...args) 81 | Tweezer.apply(this, args) 82 | } 83 | Mock.prototype = Tweezer.prototype 84 | localVue = createLocalVue() 85 | localVue.use(Tweezing, { 86 | tweezer: tweezerHelper(Mock), 87 | }) 88 | }) 89 | 90 | afterEach(() => { 91 | spy.mockRestore() 92 | }) 93 | 94 | test('should pass on props as options', () => { 95 | wrapper = mount(Helper, { 96 | localVue, 97 | propsData: { 98 | to: 0, 99 | // these have to be added in Helper.vue 100 | duration: 10, 101 | other: true, 102 | }, 103 | }) 104 | const opts = spy.mock.calls[0][0] 105 | expect(opts).toBeTruthy() 106 | expect(opts.start).toBe(0) 107 | expect(opts.end).toBe(0) 108 | expect(opts.duration).toBe(10) 109 | expect(opts.other).toBe(true) 110 | }) 111 | 112 | test('pass on easing prop', () => { 113 | wrapper = mount(Helper, { 114 | localVue, 115 | propsData: { 116 | to: 0, 117 | easing: 'foo', 118 | }, 119 | }) 120 | const opts = spy.mock.calls[0][0] 121 | expect(opts).toBeTruthy() 122 | expect(opts.start).toBe(0) 123 | expect(opts.end).toBe(0) 124 | expect(opts.easing).toBe('foo') 125 | }) 126 | }) 127 | }) 128 | -------------------------------------------------------------------------------- /test/utils/Helper.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | --------------------------------------------------------------------------------