Svelte Gun Example

├── .gitignore ├── public ├── favicon.png ├── index.html └── global.css ├── src ├── App.svelte ├── main.js ├── Counter.svelte └── stores.js ├── package.json ├── rollup.config.js ├── README.md └── scripts └── setupTypeScript.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ak5/svelte-gun-example/HEAD/public/favicon.png -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

7 | 8 |

9 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app; -------------------------------------------------------------------------------- /src/Counter.svelte: -------------------------------------------------------------------------------- 1 |

2 | 3 | {value} 4 | 5 |

6 | 7 | 11 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte Gun Example 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-gun-example", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "build": "rollup -c", 6 | "dev": "rollup -c -w", 7 | "start": "sirv public" 8 | }, 9 | "devDependencies": { 10 | "@rollup/plugin-commonjs": "^14.0.0", 11 | "@rollup/plugin-node-resolve": "^8.0.0", 12 | "rollup": "^2.3.4", 13 | "rollup-plugin-livereload": "^2.0.0", 14 | "rollup-plugin-svelte": "^6.0.0", 15 | "rollup-plugin-terser": "^7.0.0", 16 | "svelte": "^3.0.0" 17 | }, 18 | "dependencies": { 19 | "gun": "^0.2019.425", 20 | "sirv-cli": "^1.0.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/stores.js: -------------------------------------------------------------------------------- 1 | import { writable } from 'svelte/store' 2 | import Gun from "gun/gun" 3 | 4 | class GunCounter { 5 | constructor(name) { 6 | this.gun = new Gun('http://127.0.0.1:8765/gun') 7 | this.name = name 8 | this.localStore = writable(0) 9 | this.localStore.subscribe(data => { 10 | this.current = data 11 | }) 12 | this.gun.get(name).get('value').on(data => { 13 | if (data.value !== this.current) { 14 | this.localStore.set(data) 15 | } 16 | }) 17 | } 18 | 19 | subscribe(cb) { 20 | return this.localStore.subscribe(cb) 21 | } 22 | 23 | set(value) { 24 | this.gun.get(this.name).get('value').put(value) 25 | return this.localStore.set(value) 26 | } 27 | } 28 | 29 | export const counter = new GunCounter('roflcounter') 30 | -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | color: #333; 9 | margin: 0; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 | } 14 | 15 | a { 16 | color: rgb(0,100,200); 17 | text-decoration: none; 18 | } 19 | 20 | a:hover { 21 | text-decoration: underline; 22 | } 23 | 24 | a:visited { 25 | color: rgb(0,80,160); 26 | } 27 | 28 | label { 29 | display: block; 30 | } 31 | 32 | input, button, select, textarea { 33 | font-family: inherit; 34 | font-size: inherit; 35 | -webkit-padding: 0.4em 0; 36 | padding: 0.4em; 37 | margin: 0 0 0.5em 0; 38 | box-sizing: border-box; 39 | border: 1px solid #ccc; 40 | border-radius: 2px; 41 | } 42 | 43 | input:disabled { 44 | color: #ccc; 45 | } 46 | 47 | button { 48 | color: #333; 49 | background-color: #f4f4f4; 50 | outline: none; 51 | } 52 | 53 | button:disabled { 54 | color: #999; 55 | } 56 | 57 | button:not(:disabled):active { 58 | background-color: #ddd; 59 | } 60 | 61 | button:focus { 62 | border-color: #666; 63 | } 64 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from '@rollup/plugin-node-resolve'; 3 | import commonjs from '@rollup/plugin-commonjs'; 4 | import livereload from 'rollup-plugin-livereload'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | 7 | const production = !process.env.ROLLUP_WATCH; 8 | 9 | function serve() { 10 | let server; 11 | 12 | function toExit() { 13 | if (server) server.kill(0); 14 | } 15 | 16 | return { 17 | writeBundle() { 18 | if (server) return; 19 | server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 20 | stdio: ['ignore', 'inherit', 'inherit'], 21 | shell: true 22 | }); 23 | 24 | process.on('SIGTERM', toExit); 25 | process.on('exit', toExit); 26 | } 27 | }; 28 | } 29 | 30 | export default { 31 | input: 'src/main.js', 32 | output: { 33 | sourcemap: true, 34 | format: 'iife', 35 | name: 'app', 36 | file: 'public/build/bundle.js' 37 | }, 38 | plugins: [ 39 | svelte({ 40 | // enable run-time checks when not in production 41 | dev: !production, 42 | // we'll extract any component CSS out into 43 | // a separate file - better for performance 44 | css: css => { 45 | css.write('bundle.css'); 46 | } 47 | }), 48 | 49 | // If you have external dependencies installed from 50 | // npm, you'll most likely need these plugins. In 51 | // some cases you'll need additional configuration - 52 | // consult the documentation for details: 53 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 54 | resolve({ 55 | browser: true, 56 | dedupe: ['svelte'] 57 | }), 58 | commonjs(), 59 | 60 | // In dev mode, call `npm run start` once 61 | // the bundle has been generated 62 | !production && serve(), 63 | 64 | // Watch the `public` directory and refresh the 65 | // browser on changes when not in production 66 | !production && livereload('public'), 67 | 68 | // If we're building for production (npm run build 69 | // instead of npm run dev), minify 70 | production && terser() 71 | ], 72 | watch: { 73 | clearScreen: false 74 | } 75 | }; 76 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte gundb example 2 | 3 | This is a project template for [Svelte](https://svelte.technology) apps with the gun database. 4 | 5 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 6 | 7 | ```bash 8 | npx degit ak5/svelte-gun-example svelte-gun-example 9 | cd svelte-gun-example 10 | ``` 11 | 12 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 13 | 14 | 15 | ## Get started 16 | 17 | Get the Docker container running... 18 | 19 | ```bash 20 | docker run -p 8765:8765 gundb/gun 21 | ``` 22 | 23 | Install the dependencies... 24 | 25 | ```bash 26 | cd svelte-gun-example 27 | npm install 28 | ``` 29 | 30 | ...then start [Rollup](https://rollupjs.org): 31 | 32 | ```bash 33 | npm run dev 34 | ``` 35 | 36 | Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. 37 | 38 | By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. 39 | 40 | 41 | ## Building and running in production mode 42 | 43 | To create an optimised version of the app: 44 | 45 | ```bash 46 | npm run build 47 | ``` 48 | 49 | You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). 50 | 51 | 52 | ## Single-page app mode 53 | 54 | By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. 55 | 56 | If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: 57 | 58 | ```js 59 | "start": "sirv public --single" 60 | ``` 61 | 62 | ## Using TypeScript 63 | 64 | This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with: 65 | 66 | ```bash 67 | node scripts/setupTypeScript.js 68 | ``` 69 | 70 | Or remove the script via: 71 | 72 | ```bash 73 | rm scripts/setupTypeScript.js 74 | ``` 75 | 76 | ## Deploying to the web 77 | 78 | ### With [Vercel](https://vercel.com) 79 | 80 | Install `vercel` if you haven't already: 81 | 82 | ```bash 83 | npm install -g vercel 84 | ``` 85 | 86 | Then, from within your project folder: 87 | 88 | ```bash 89 | cd public 90 | vercel deploy --name my-project 91 | ``` 92 | 93 | ### With [surge](https://surge.sh/) 94 | 95 | Install `surge` if you haven't already: 96 | 97 | ```bash 98 | npm install -g surge 99 | ``` 100 | 101 | Then, from within your project folder: 102 | 103 | ```bash 104 | npm run build 105 | surge public my-project.surge.sh 106 | ``` 107 | -------------------------------------------------------------------------------- /scripts/setupTypeScript.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** This script modifies the project to support TS code in .svelte files like: 4 | 5 | 8 | 9 | As well as validating the code for CI. 10 | */ 11 | 12 | /** To work on this script: 13 | rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template 14 | */ 15 | 16 | const fs = require("fs") 17 | const path = require("path") 18 | const { argv } = require("process") 19 | 20 | const projectRoot = argv[2] || path.join(__dirname, "..") 21 | 22 | // Add deps to pkg.json 23 | const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8")) 24 | packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, { 25 | "svelte-check": "^1.0.0", 26 | "svelte-preprocess": "^4.0.0", 27 | "@rollup/plugin-typescript": "^4.0.0", 28 | "typescript": "^3.9.3", 29 | "tslib": "^2.0.0", 30 | "@tsconfig/svelte": "^1.0.0" 31 | }) 32 | 33 | // Add script for checking 34 | packageJSON.scripts = Object.assign(packageJSON.scripts, { 35 | "validate": "svelte-check" 36 | }) 37 | 38 | // Write the package JSON 39 | fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " ")) 40 | 41 | // mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too 42 | const beforeMainJSPath = path.join(projectRoot, "src", "main.js") 43 | const afterMainTSPath = path.join(projectRoot, "src", "main.ts") 44 | fs.renameSync(beforeMainJSPath, afterMainTSPath) 45 | 46 | // Switch the app.svelte file to use TS 47 | const appSveltePath = path.join(projectRoot, "src", "App.svelte") 48 | let appFile = fs.readFileSync(appSveltePath, "utf8") 49 | appFile = appFile.replace("