├── .gitignore
├── LICENSE
├── README.md
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Samuel Antonioli
 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.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue-Static
 2 | 
 3 | This plugin enables you to have variables in your Vue component that don't have reactivity.
 4 | 
 5 | ## Why
 6 | 
 7 | Sometimes you don't want reactivity for some of your variables e.g. because they contain other objects (leafletjs maps or similar) or because they are huge and you don't need reactivity for them (e.g. big objects).
 8 | 
 9 | ## Installation
10 | 
11 | ```
12 | $ npm i vue-static
13 | ```
14 | 
15 | in your `main.js`:
16 | 
17 | ```
18 | import VueStatic from 'vue-static'
19 | Vue.use(VueStatic);
20 | ```
21 | 
22 | 
23 | ## Usage
24 | 
25 | ```html
26 | <template>
27 |     <div>
28 |         <p>
29 |             Just use it like a normal variable: {{untracked_variable}}
30 |         </p>
31 |     </div>
32 | </template>
33 | <script>
34 | export default {
35 |     static() {
36 |         return {
37 |             untracked_variable: 'some variable without reactivity',
38 |         };
39 |     },
40 |     mounted() {
41 |         // the template won't update because the variable doesn't have reactivity
42 |         this.untracked_variable = 'you can use it like a normal variable';
43 |     },
44 | };
45 | </script>
46 | ```
47 | 
48 | `static` can be a function or an object (like `data`).
49 | 
50 | 
51 | ## Custom Merge Strategy
52 | 
53 | Internally, this plugin uses Vue's [$options](https://vuejs.org/v2/api/#vm-options) (specifically `$options.static`). Therefore you can use [custom merge strategies](https://vuejs.org/v2/guide/mixins.html#Custom-Option-Merge-Strategies). By default it uses the same strategy for merges as `data` (`Vue.config.optionMergeStrategies.data`). Thanks to [Akryum](https://github.com/Akryum) for the idea.
54 | 
55 | ## Namespace
56 | 
57 | There's an option called `namespaced` so that all static data will be namespaced into `$static` component property. This is solely to avoid conflicts with other options and reactive data (same name, for instance), and helps you to remember which data is or isn't reactive.
58 | 
59 | ```javascript
60 | import VueStatic from 'vue-static'
61 | Vue.use(VueStatic, {
62 |     namespaced: true,
63 | });
64 | ```
65 | 
66 | Just use `this.$static.variable` instead of `this.variable` in your code and `$static.variable` instead of `variable` in your template. Thanks to [matheusgrieger](https://github.com/matheusgrieger) for the idea. See [here](https://github.com/samuelantonioli/vue-static/pull/2) for example usage.
67 | 
68 | ## Name
69 | 
70 | There's an option called `name` so that the `static` function/object can be renamed. This addresses the issue that `static` is a reserved keyword. If you have problems to use `static` as the default name, you can change it.
71 | 
72 | ```javascript
73 | import VueStatic from 'vue-static'
74 | Vue.use(VueStatic, {
75 |     name: 'basedata',
76 | });
77 | ```
78 | 
79 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function install(Vue, options) {
 3 |     // Use "static" as the default name for the function/object
 4 |     // Changeable using options.name
 5 |     var static_fn = 'static';
 6 |     if (options && options.name && typeof(options.name) === 'string') {
 7 |         static_fn = options.name;
 8 |     }
 9 |     // Read more about option merge strategies in the official Vue.js docs
10 |     if (typeof(Vue.config.optionMergeStrategies[static_fn]) !== 'function') {
11 |         Vue.config.optionMergeStrategies[static_fn] = Vue.config.optionMergeStrategies.data;
12 |     }
13 |     // Creates $static instance property if configured
14 |     // Empty by default
15 |     if (options && options.namespaced) {
16 |         Vue.prototype.$static = {};
17 |     }
18 |     // Idea: Properties that are added in the very first part of the Vue lifecycle
19 |     //       don't get Vue's reactivity
20 |     Vue.mixin({
21 |         beforeCreate: function () {
22 |             const vue_static = this.$options[static_fn];
23 |             const vue_static_destination = this.$static || this;
24 |             if (vue_static && typeof(vue_static) === 'function') {
25 |                 Object.assign(vue_static_destination, vue_static.apply(this));
26 |             } else if (vue_static && typeof(vue_static) === 'object') {
27 |                 Object.assign(vue_static_destination, vue_static);
28 |             }
29 |         },
30 |     });
31 | }
32 | 
33 | export default install;
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue-static",
 3 |     "version": "0.0.5",
 4 |     "description": "Vue.js plugin that allows you to disable reactivity for variables in Vue components",
 5 |     "main": "index.js",
 6 |     "repository": {
 7 |         "type": "git",
 8 |         "url": "git+https://github.com/samuelantonioli/vue-static.git"
 9 |     },
10 |     "keywords": [
11 |         "vue",
12 |         "static",
13 |         "reactivity",
14 |         "non-reactive",
15 |         "variables"
16 |     ],
17 |     "author": "Samuel Antonioli <contact@samuelantonioli.de>",
18 |     "license": "MIT",
19 |     "bugs": {
20 |         "url": "https://github.com/samuelantonioli/vue-static/issues"
21 |     },
22 |     "homepage": "https://github.com/samuelantonioli/vue-static",
23 |     "devDependencies": {
24 |         "vue": "*"
25 |     }
26 | }


--------------------------------------------------------------------------------