https://github.com/egoist/side-effect
Create Vue components whose nested prop changes map to a global side effect
https://github.com/egoist/side-effect
Last synced: 6 months ago
JSON representation
Create Vue components whose nested prop changes map to a global side effect
- Host: GitHub
- URL: https://github.com/egoist/side-effect
- Owner: egoist
- License: mit
- Created: 2016-11-16T19:05:55.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T14:31:21.000Z (almost 4 years ago)
- Last Synced: 2025-04-17T13:09:16.944Z (7 months ago)
- Language: JavaScript
- Homepage: http://side-effect.surge.sh
- Size: 89.8 KB
- Stars: 11
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-refactor - side-effect
README
# side-effect [](https://npmjs.com/package/side-effect) [](https://npmjs.com/package/side-effect) [](https://circleci.com/gh/egoist/side-effect)
Heavily inspired by [react-side-effect](https://github.com/gaearon/react-side-effect).
## Features
- Light-weight: 500 bytes gzipped
- Simple: Just a component
- Works just as well with isomorphic apps
## Install
```bash
$ npm install --save side-effect
```
## Example
It gathers current props across the whole tree before passing them to side effect. For example, this allows you to create `` component like this:
```vue
```
Create a side-effect component named `BodyStyle` for mutating body style from different level of nesting with innermost winning:
```js
import withSideEffect from 'side-effect'
const BodyStyle = {
name: 'body-style',
render(h) {
if (!this.$slots.default) return h()
return this.$slots.default[0]
}
}
function reduceInstancesToState(vms) {
const style = {}
for (const vm of vms) {
Object.assign(style, vm.setStyle)
}
return style
}
function handleStateChangeOnClient(style) {
for (const key in style) {
document.body.style[key] = style[key]
}
}
export default withSideEffect(
reduceInstancesToState,
handleStateChangeOnClient
)(BodyStyle)
```
Now, it's ready to go: https://side-effect.surge.sh
## Server-side Usage
The API is exactly the same as [react-side-effect](https://github.com/gaearon/react-side-effect#api), call `rewind()` after rendering.
```js
withSideEffect(
reduceInstancesToState,
handleStateChangeOnClient,
mapStateOnServer
)(VueComponent)
```
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## License
[MIT](https://egoist.mit-license.org/) © [EGOIST](https://github.com/egoist)