├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── redux.js ├── svelteDevStore.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Gareth Oates 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 | # Svelte Dev Store 2 | [![npm](https://img.shields.io/npm/v/svelte-dev-store.svg)]() 3 | [![npm](https://img.shields.io/npm/dm/svelte-dev-store.svg)]() 4 | [![Twitter Follow](https://img.shields.io/twitter/follow/garethoates.svg?style=social&label=Follow)](https://www.twitter.com/garethoates) 5 | 6 | This project allows you to use the Redux Dev Tools browser plugin when working with a Svelte store instance. 7 | 8 | To use this package in your project as you develop, you simply import this package instead 9 | of the svelte/store and create an instance of the exported class, instead of 'Store'. 10 | 11 | ``` 12 | import SvelteDevStore from 'svelte-dev-store'; 13 | 14 | const myStore = new SvelteDevStore({name: 'Gareth'}); 15 | 16 | myStore.set({name: 'Bob'}); 17 | myStore.set({name: 'Jim'}); 18 | myStore.set({name: 'Jeff'}); 19 | ``` 20 | 21 | Then when you open up the Redux dev tools, you should see 3 newState actions 22 | and the chart should show the structure of your svelte store. 23 | 24 | svelteDevStore has the exact same API as the actual svelte/store. It just extends it to incorporate 25 | sending actions to a very simple redux store, that enables you to see it in the dev tools. 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-dev-store", 3 | "version": "1.0.2", 4 | "main": "svelteDevStore.js", 5 | "description": "A svelte store wrapper using Redux to enable the Redux Dev tools for improved store state visibility", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+ssh://git@github.com/GarethOates/svelte-dev-store.git" 12 | }, 13 | "keywords": [ 14 | "svelte", 15 | "store", 16 | "redux", 17 | "devtools" 18 | ], 19 | "author": { 20 | "name": "Gareth Oates", 21 | "email": "goatie@gmail.com" 22 | }, 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/GarethOates/svelte-dev-store/issues" 26 | }, 27 | "homepage": "https://github.com/GarethOates/svelte-dev-store#readme", 28 | "dependencies": { 29 | "redux": "^4.0.0" 30 | }, 31 | "peerDependencies": { 32 | "svelte": ">= 1.43.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /redux.js: -------------------------------------------------------------------------------- 1 | import {compose, createStore} from 'redux'; 2 | 3 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 4 | 5 | const rootReducer = (state = {}, action) => { 6 | return Object.assign({}, state, action.payload); 7 | }; 8 | 9 | const store = createStore(rootReducer, composeEnhancers()); 10 | const updateStore = (newState) => { 11 | return { 12 | type: 'newState', 13 | payload: newState 14 | }; 15 | }; 16 | 17 | export default { 18 | store, 19 | updateStore 20 | }; -------------------------------------------------------------------------------- /svelteDevStore.js: -------------------------------------------------------------------------------- 1 | import {Store} from 'svelte/store'; 2 | import Redux from './redux'; 3 | 4 | export default class SvelteDevStore extends Store { 5 | set(object) { 6 | super.set(object); 7 | Redux.store.dispatch(Redux.updateStore(object)); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "js-tokens@^3.0.0 || ^4.0.0": 6 | version "4.0.0" 7 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" 8 | integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== 9 | 10 | lodash-es@^4.2.1: 11 | version "4.17.15" 12 | resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78" 13 | integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ== 14 | 15 | lodash@^4.2.1: 16 | version "4.17.15" 17 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" 18 | integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== 19 | 20 | loose-envify@^1.1.0: 21 | version "1.4.0" 22 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" 23 | integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== 24 | dependencies: 25 | js-tokens "^3.0.0 || ^4.0.0" 26 | 27 | redux@^3.7.2: 28 | version "3.7.2" 29 | resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b" 30 | integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A== 31 | dependencies: 32 | lodash "^4.2.1" 33 | lodash-es "^4.2.1" 34 | loose-envify "^1.1.0" 35 | symbol-observable "^1.0.3" 36 | 37 | symbol-observable@^1.0.3: 38 | version "1.2.0" 39 | resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" 40 | integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== 41 | --------------------------------------------------------------------------------