/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; |