svelte boilerplate

package.json

@@ -2,9 +2,12 @@
   "name": "arne-drums",
   "version": "1.0.0",
   "description": "Drum beat visualiser and editor",
-  "main": "main.ts",
+  "main": "src/main.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear",
+    "validate": "svelte-check"
   },
   "repository": {
     "type": "git",
@@ -12,7 +15,22 @@
   },
   "author": "Daniel Ledda",
   "license": "ISC",
-  "dependencies": {
+  "devDependencies": {
-    "svelte": "^3.42.1"
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-typescript": "^8.0.0",
+    "@tsconfig/svelte": "^1.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",
+    "svelte-check": "^1.0.0",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0"
+    "sirv-cli": "^1.0.0",
+    "typescript": "^4.4.0-dev.20210525"
+    "source-map-support": "^0.5.19"
   }
-}
+}

rollup.config.js

@@ -0,0 +1,83 @@
+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 sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
+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.ts',
+    output: {
+        sourcemap: true,
+        format: 'iife',
+        name: 'app',
+        file: 'public/build/bundle.js'
+    },
+    plugins: [
+        svelte({
+            preprocess: sveltePreprocess({ sourceMap: !production }),
+            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(),
+        typescript({
+            sourceMap: !production,
+            inlineSources: !production
+        }),
+
+        // 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
+    }
+};

src/main.ts

@@ -0,0 +1,10 @@
+import App from './ui/App.svelte';
+
+const app = new App({
+    target: document.body,
+    props: {
+        scene: new PolycubeScene()
+    }
+});
+
+export default app;

src/ui/App.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+</script>
+
+<h1>
+    Hello, world!
+</h1>
+
+<style>
+    h1 {
+        color: red;
+    }
+</style>

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "lib": ["dom", "ESNext"],
+    "target": "ESNext"
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["./node_modules/*", "./__sapper__/*", "./public/*", "./src/solver/wasm/*"]
+}