├── .babelrc
├── .eslintrc
├── .gitignore
├── .release-it.json
├── LICENSE
├── README.md
├── build
├── build.js
└── utils
│ ├── index.js
│ ├── log.js
│ └── write.js
├── examples
├── TodoApp
│ ├── index.html
│ └── modules.html
└── index.html
├── package.json
├── src
├── index.js
├── mutations.js
├── types.js
└── utils.js
├── test
├── bind-array.spec.js
├── bind-object.spec.js
├── errors.spec.js
├── firebase.spec.js
├── helpers
│ └── firebase.js
├── modules.spec.js
└── store.spec.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "targets": {
5 | "browsers": ["last 2 Chrome versions"]
6 | }
7 | }]
8 | ],
9 | "sourceMaps": "inline"
10 | }
11 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "posva",
4 | ],
5 | "env": {
6 | "amd": true
7 | },
8 | "rules": {
9 | "no-new": 0
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/.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) 2017 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 | # This package has been moved to [vuejs/vuefire](https://github.com/vuejs/vuefire/tree/master/packages/vuexfire) repository.
2 |
3 | ---
4 |
5 | # VuexFire [](https://circleci.com/gh/posva/vuexfire) [](https://www.npmjs.com/package/vuexfire) [](https://codecov.io/github/posva/vuexfire) 
6 |
7 | > SSR ready Firebase binding for [Vuex](https://github.com/vuejs/vuex)
8 |
9 | Supports only Vue 2, Vuex 2 and Firebase JavaScript SDK 2/3/4/5.
10 | If you need an older version check the [`v1` branch](https://github.com/posva/vuexfire/tree/v1): `npm i -D vuexfire@v1`
11 |
12 | ## Installation
13 |
14 | 1. Using a CDN:
15 |
16 | ``` html
17 |
18 | ```
19 |
20 | 2. In module environments, e.g CommonJS:
21 |
22 | ``` bash
23 | npm install vue firebase vuexfire@next --save
24 | ```
25 |
26 | ## Usage
27 |
28 | Add the mutations to your root Store and make sure to define the property you
29 | want to bind in the state first:
30 |
31 | ``` js
32 | import { firebaseMutations } from 'vuexfire'
33 | const store = new Vuex.Store({
34 | state: {
35 | todos: [], // Will be bound as an array
36 | user: null // Will be bound as an object
37 | },
38 | mutations: {
39 | // your mutations
40 | ...firebaseMutations
41 | }
42 | })
43 | ```
44 |
45 | It works with modules as well, but **you don't need to add the mutations there**:
46 | ```js
47 | const store = new Vuex.Store({
48 | modules: {
49 | todos: {
50 | state: {
51 | todos: [], // Will be bound as an array
52 | user: null // Will be bound as an object
53 | },
54 | }
55 | }
56 | })
57 | ```
58 |
59 | In order to use VuexFire, you have to enhance actions. This action enhancer
60 | takes the actual action and enhances it with two additional parameters in the
61 | context, `bindFirebaseRef` and `unbindFirebaseRef`:
62 |
63 | ```js
64 | import { firebaseAction } from 'vuexfire'
65 |
66 | const setTodosRef = firebaseAction(({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
67 | // this will unbind any previously bound ref to 'todos'
68 | bindFirebaseRef('todos', ref)
69 | // you can unbind any ref easily
70 | unbindFirebaseRef('user')
71 | })
72 | ```
73 |
74 | Access it as a usual piece of the state:
75 |
76 | ```js
77 | const Component = {
78 | template: '{{ todos }}
',
79 | computed: Vuex.mapState(['todos']),
80 | created () {
81 | this.$store.dispatch('setTodosRef', db.collection('todos'))
82 | }
83 | }
84 | ```
85 |
86 | ## Browser support
87 |
88 | VuexFire requires basic `WeakMap` support, which means that if you need to
89 | support any of these browsers:
90 |
91 | - IE < 11
92 | - Safari < 7.1
93 | - Android < 5.0
94 |
95 | You'll have to include a polyfill. You can
96 | use [Benvie/WeakMap](https://github.com/Benvie/WeakMap).
97 |
98 | You can find more information about `WeakMap`
99 | support [here](http://kangax.github.io/compat-table/es6/#test-WeakMap).
100 |
101 | ## How does it work?
102 |
103 | VuexFire uses multiple global mutations prefixed by `vuexfire/` to call the
104 | actual mutations to modify objects and arrays. It listens for updates to your
105 | firebase database and commits mutations to sync your state. Thanks to the action
106 | enhancer `firebaseAction`, it gets access to the local `state` and `commit` so
107 | it works with modules too :+1:
108 |
109 | ## Examples
110 |
111 | You can check out a complete example in the `/examples` directory.
112 |
113 | ## API
114 |
115 | ### firebaseMutations
116 |
117 | This object contains VuexFire internal mutations. They are all prefixed by
118 | `vuexfire/`. This object must be added in the root Store mutations object.
119 |
120 | ### bindFirebaseRef(key, ref)
121 |
122 | _Only available inside of an enhanced action_
123 |
124 | Binds a firebase reference to a property in the state. If there was already
125 | another reference bound to the same property, it unbinds it first.
126 |
127 | ```js
128 | bindFirebaseRef('todos', ref)
129 | ```
130 |
131 | Returns a promise which will resolve when the data is ready, or throw an error if something goes wrong:
132 |
133 | ```js
134 | bindFirebaseRef('todos', ref).then(() => {
135 | commit('setTodosLoaded', true)
136 | }).catch((err) => {
137 | console.log(err)
138 | })
139 | ```
140 |
141 | ### unbindFirebaseRef(key)
142 |
143 | _Only available inside of an enhanced action_
144 |
145 | Unbinds a bound firebase reference to a given property in the state.
146 |
147 | ```js
148 | unbindFirebaseRef('todos')
149 | ```
150 |
151 | ## License
152 |
153 | [MIT](http://opensource.org/licenses/MIT)
154 |
155 | ## Support on Beerpay
156 | Hey dude! Help me out for a couple of :beers:!
157 |
158 | [](https://beerpay.io/posva/vuexfire) [](https://beerpay.io/posva/vuexfire?focus=wish)
159 |
--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
1 | const rollup = require('rollup').rollup
2 | const buble = require('rollup-plugin-buble')
3 | const uglify = require('uglify-js')
4 | const packageData = require('../package.json')
5 | const mkdirp = require('mkdirp')
6 | const { version, author, name } = packageData
7 | // remove the email at the end
8 | const authorName = author.replace(/\s+<.*/, '')
9 | const moduleName = 'VuexFire'
10 |
11 | // Make sure dist dir exists
12 | mkdirp('dist')
13 |
14 | const {
15 | logError,
16 | write,
17 | } = require('./utils')
18 |
19 | const banner =
20 | '/*!\n' +
21 | ` * ${name} v${version}\n` +
22 | ` * (c) ${new Date().getFullYear()} ${authorName}\n` +
23 | ' * Released under the MIT License.\n' +
24 | ' */'
25 |
26 | const bundleOptions = {
27 | banner,
28 | exports: 'named',
29 | format: 'umd',
30 | name: moduleName,
31 | }
32 |
33 | function createBundle ({ name, format }) {
34 | rollup({
35 | input: 'src/index.js',
36 | plugins: [
37 | buble({
38 | objectAssign: 'Object.assign',
39 | }),
40 | ],
41 | }).then(function (bundle) {
42 | const options = Object.assign({}, bundleOptions)
43 | if (format) options.format = format
44 | return bundle.generate(options).then(({ code }) => {
45 | if (/min$/.test(name)) {
46 | const minified = uglify.minify(code, {
47 | output: {
48 | preamble: banner,
49 | ascii_only: true,
50 | },
51 | }).code
52 | return write(`dist/${name}.js`, minified)
53 | } else {
54 | return write(`dist/${name}.js`, code)
55 | }
56 | })
57 | }).catch(logError)
58 | }
59 |
60 | // Browser bundle (can be used with script)
61 | createBundle({
62 | name,
63 | })
64 |
65 | // Commonjs bundle (preserves process.env.NODE_ENV) so
66 | // the user can replace it in dev and prod mode
67 | createBundle({
68 | name: `${name}.esm`,
69 | format: 'es',
70 | })
71 |
72 | createBundle({
73 | name: `${name}.common`,
74 | format: 'cjs',
75 | })
76 |
77 | // Minified version for browser
78 | createBundle({
79 | name: `${name}.min`,
80 | })
81 |
--------------------------------------------------------------------------------
/build/utils/index.js:
--------------------------------------------------------------------------------
1 | const write = require('./write.js')
2 | const { logError } = require('./log.js')
3 |
4 | module.exports = {
5 | write,
6 | logError,
7 | }
8 |
--------------------------------------------------------------------------------
/build/utils/log.js:
--------------------------------------------------------------------------------
1 | function logError (e) {
2 | console.log(e)
3 | }
4 |
5 | function blue (str) {
6 | return `\x1b[1m\x1b[34m${str}\x1b[39m\x1b[22m`
7 | }
8 |
9 | function green (str) {
10 | return `\x1b[1m\x1b[32m${str}\x1b[39m\x1b[22m`
11 | }
12 |
13 | function red (str) {
14 | return `\x1b[1m\x1b[31m${str}\x1b[39m\x1b[22m`
15 | }
16 |
17 | function yellow (str) {
18 | return `\x1b[1m\x1b[33m${str}\x1b[39m\x1b[22m`
19 | }
20 |
21 | module.exports = {
22 | blue,
23 | green,
24 | red,
25 | yellow,
26 | logError,
27 | }
28 |
--------------------------------------------------------------------------------
/build/utils/write.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs')
2 |
3 | const { blue } = require('./log.js')
4 |
5 | function write (dest, code) {
6 | return new Promise(function (resolve, reject) {
7 | fs.writeFile(dest, code, function (err) {
8 | if (err) return reject(err)
9 | console.log(blue(dest) + ' ' + getSize(code))
10 | resolve()
11 | })
12 | })
13 | }
14 |
15 | function getSize (code) {
16 | return (code.length / 1024).toFixed(2) + 'kb'
17 | }
18 |
19 | module.exports = write
20 |
--------------------------------------------------------------------------------
/examples/TodoApp/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | VuexFire Todo App Demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
20 |
21 |
22 |
23 | -
24 | {{ item.text }}
25 |
26 |
27 |
28 |
32 |
33 |
34 |
35 |
36 |
37 |
17 |
18 | -
19 | {{ item.text }}
20 |
21 |
22 |
23 |
27 |
31 |
32 |
33 |
34 |
40 |
41 |
collection with refs
42 |
43 |
46 |
47 |
Original data
48 |
49 |
52 |
53 |
config:
54 |
55 | {{ config }}
56 |
57 |