| /node_modules/ | |||||
| /public/build/ |
| { | |||||
| "name": "circuitgame", | |||||
| "version": "0.0.0", | |||||
| "private": true, | |||||
| "scripts": { | |||||
| "build": "rollup -c", | |||||
| "dev": "rollup -c -w" | |||||
| }, | |||||
| "devDependencies": { | |||||
| "@rollup/plugin-commonjs": "^17.0.0", | |||||
| "@rollup/plugin-node-resolve": "^11.0.0", | |||||
| "rollup": "^2.3.4", | |||||
| "rollup-plugin-css-only": "^3.1.0", | |||||
| "rollup-plugin-livereload": "^2.0.0", | |||||
| "rollup-plugin-svelte": "^7.0.0", | |||||
| "rollup-plugin-terser": "^7.0.0", | |||||
| "svelte": "^3.0.0" | |||||
| } | |||||
| } |
| html, body { | |||||
| position: relative; | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| body { | |||||
| color: #333; | |||||
| margin: 0; | |||||
| padding: 8px; | |||||
| box-sizing: border-box; | |||||
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |||||
| } | |||||
| a { | |||||
| color: rgb(0,100,200); | |||||
| text-decoration: none; | |||||
| } | |||||
| a:hover { | |||||
| text-decoration: underline; | |||||
| } | |||||
| a:visited { | |||||
| color: rgb(0,80,160); | |||||
| } | |||||
| label { | |||||
| display: block; | |||||
| } | |||||
| input, button, select, textarea { | |||||
| font-family: inherit; | |||||
| font-size: inherit; | |||||
| -webkit-padding: 0.4em 0; | |||||
| padding: 0.4em; | |||||
| margin: 0 0 0.5em 0; | |||||
| box-sizing: border-box; | |||||
| border: 1px solid #ccc; | |||||
| border-radius: 2px; | |||||
| } | |||||
| input:disabled { | |||||
| color: #ccc; | |||||
| } | |||||
| button { | |||||
| color: #333; | |||||
| background-color: #f4f4f4; | |||||
| outline: none; | |||||
| } | |||||
| button:disabled { | |||||
| color: #999; | |||||
| } | |||||
| button:not(:disabled):active { | |||||
| background-color: #ddd; | |||||
| } | |||||
| button:focus { | |||||
| border-color: #666; | |||||
| } |
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset='utf-8'> | |||||
| <meta name='viewport' content='width=device-width,initial-scale=1'> | |||||
| <title>Svelte app</title> | |||||
| <link rel='stylesheet' href='global.css'> | |||||
| <link rel='stylesheet' href='build/bundle.css'> | |||||
| <script defer src='build/bundle.js'></script> | |||||
| </head> | |||||
| <body> | |||||
| </body> | |||||
| </html> |
| import svelte from 'rollup-plugin-svelte'; | |||||
| import commonjs from '@rollup/plugin-commonjs'; | |||||
| import resolve from '@rollup/plugin-node-resolve'; | |||||
| import livereload from 'rollup-plugin-livereload'; | |||||
| import { terser } from 'rollup-plugin-terser'; | |||||
| import css from 'rollup-plugin-css-only'; | |||||
| const production = !process.env.ROLLUP_WATCH; | |||||
| function serve() { | |||||
| let server; | |||||
| function toExit() { | |||||
| if (server) server.kill(0); | |||||
| } | |||||
| return { | |||||
| writeBundle() { | |||||
| if (server) return; | |||||
| server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { | |||||
| stdio: ['ignore', 'inherit', 'inherit'], | |||||
| shell: true | |||||
| }); | |||||
| process.on('SIGTERM', toExit); | |||||
| process.on('exit', toExit); | |||||
| } | |||||
| }; | |||||
| } | |||||
| export default { | |||||
| input: 'src/main.js', | |||||
| output: { | |||||
| sourcemap: true, | |||||
| format: 'iife', | |||||
| name: 'app', | |||||
| file: 'public/build/bundle.js' | |||||
| }, | |||||
| plugins: [ | |||||
| svelte({ | |||||
| compilerOptions: { | |||||
| // enable run-time checks when not in production | |||||
| dev: !production | |||||
| } | |||||
| }), | |||||
| // we'll extract any component CSS out into | |||||
| // a separate file - better for performance | |||||
| css({ output: 'bundle.css' }), | |||||
| // If you have external dependencies installed from | |||||
| // npm, you'll most likely need these plugins. In | |||||
| // some cases you'll need additional configuration - | |||||
| // consult the documentation for details: | |||||
| // https://github.com/rollup/plugins/tree/master/packages/commonjs | |||||
| resolve({ | |||||
| browser: true, | |||||
| dedupe: ['svelte'] | |||||
| }), | |||||
| commonjs(), | |||||
| // In dev mode, call `npm run start` once | |||||
| // the bundle has been generated | |||||
| !production && serve(), | |||||
| // Watch the `public` directory and refresh the | |||||
| // browser on changes when not in production | |||||
| !production && livereload('public'), | |||||
| // If we're building for production (npm run build | |||||
| // instead of npm run dev), minify | |||||
| production && terser() | |||||
| ], | |||||
| watch: { | |||||
| clearScreen: false | |||||
| } | |||||
| } |
| <script> | |||||
| export let name; | |||||
| </script> | |||||
| <main> | |||||
| <h1>Hello {name}!</h1> | |||||
| <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> | |||||
| </main> | |||||
| <style> | |||||
| main { | |||||
| text-align: center; | |||||
| padding: 1em; | |||||
| max-width: 240px; | |||||
| margin: 0 auto; | |||||
| } | |||||
| h1 { | |||||
| color: #ff3e00; | |||||
| text-transform: uppercase; | |||||
| font-size: 4em; | |||||
| font-weight: 100; | |||||
| } | |||||
| @media (min-width: 640px) { | |||||
| main { | |||||
| max-width: none; | |||||
| } | |||||
| } | |||||
| </style> |
| import App from './App.svelte'; | |||||
| const app = new App({ | |||||
| target: document.body, | |||||
| props: { | |||||
| name: 'world' | |||||
| } | |||||
| }); | |||||
| export default app; |