Added Bulma, Pug and Svelte preprocess

package.json

@@ -10,12 +10,15 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
+    "bulma": "^0.9.3",
+    "pug": "^3.0.2",
     "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": "^3.0.0",
+    "svelte-preprocess": "^4.10.4"
   },
   "dependencies": {
     "sirv-cli": "^2.0.0"

rollup.config.js

@@ -1,4 +1,5 @@
 import svelte from 'rollup-plugin-svelte';
+import sveltePreprocess from 'svelte-preprocess';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
@@ -38,6 +39,7 @@ export default {
 	},
 	plugins: [
 		svelte({
+			preprocess: sveltePreprocess(),
 			compilerOptions: {
 				// enable run-time checks when not in production
 				dev: !production

src/App.svelte

@@ -1,30 +1,11 @@
 <script>
-	export let name;
+import "bulma/css/bulma.min.css";
 </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>
+<template lang="pug">
+	.columns.mt-4
+		.column.is-4.is-offset-4
+			.nav-panel
+				p.panel-heading Lorem Ipsum
+				.panel-block Lorem ipsum dolor sit amet.
+</template>

src/main.js

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