stub out webapp & Set up a go skeleton that works with the underlying FE js

This commit is contained in:
Barak Michener 2020-11-11 20:08:54 -08:00
commit 35325c74d0
16 changed files with 2869 additions and 0 deletions

34
web/package.json Normal file
View file

@ -0,0 +1,34 @@
{
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public",
"validate": "svelte-check"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^2.3.0",
"@rollup/plugin-commonjs": "^12.0.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"@rollup/plugin-typescript": "^4.0.0",
"@tsconfig/svelte": "^1.0.0",
"autoprefixer": "^9.8.5",
"node-sass": "^5.0.0",
"postcss": "^7.0.32",
"postcss-load-config": "^2.1.0",
"rollup": "^2.3.4",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^5.1.2",
"svelte": "^3.0.0",
"svelte-check": "^1.0.0",
"svelte-preprocess": "^4.0.0",
"tailwindcss": "^1.6.0",
"tslib": "^2.0.0",
"typescript": "^3.9.3"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
}

13
web/postcss.config.js Normal file
View file

@ -0,0 +1,13 @@
const purgecss = require("@fullhuman/postcss-purgecss")({
content: ["./src/**/*.html", "./src/**/*.svelte"],
whitelistPatterns: [/svelte-/],
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
})
const dev = process.env.ROLLUP_WATCH
module.exports = {
plugins: [require("tailwindcss"), ...(!dev ? [purgecss] : [])],
}

BIN
web/public/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

4
web/public/global.css Normal file
View file

@ -0,0 +1,4 @@
html,
body {
height: 100vh;
}

18
web/public/index.html Normal file
View file

@ -0,0 +1,18 @@
<!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='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>

88
web/rollup.config.js Normal file
View file

@ -0,0 +1,88 @@
import svelte from "rollup-plugin-svelte"
import resolve from "@rollup/plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"
import livereload from "rollup-plugin-livereload"
import { terser } from "rollup-plugin-terser"
import sveltePreprocess from "svelte-preprocess"
import typescript from "@rollup/plugin-typescript"
const production = !process.env.ROLLUP_WATCH
const do_serve = !process.env.SKIP_SERVE
function serve() {
let server
function toExit() {
if (server) server.kill(0)
}
return {
writeBundle() {
if (server) return
server = require("child_process").spawn("yarn", ["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({
// 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: (css) => {
css.write("public/build/bundle.css")
},
preprocess: sveltePreprocess({
postcss: true,
scss: {
includePaths: ["src"],
postcss: {
plugins: [require("autoprefixer")],
},
},
}),
}),
// 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 }),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && do_serve && 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,
},
}

22
web/src/App.svelte Normal file
View file

@ -0,0 +1,22 @@
<script lang="ts">
import Tailwind from "./Tailwind.svelte"
const name: string = "Something";
</script>
<style lang="scss">
main {
h1 {
font-size: 25px;
}
}
</style>
<Tailwind />
<main>
<h1 class="text-blue-200">Hello {name}!</h1>
<p>
Visit the
<a class="text-blue-700" href="https://svelte.dev/tutorial">Svelte tutorial</a>
to learn how to build Svelte apps.
</p>
</main>

5
web/src/Tailwind.svelte Normal file
View file

@ -0,0 +1,5 @@
<style global>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

7
web/src/main.ts Normal file
View file

@ -0,0 +1,7 @@
import App from "./App.svelte"
const app = new App({
target: document.body,
})
export default app

8
web/tailwind.config.js Normal file
View file

@ -0,0 +1,8 @@
module.exports = {
purge: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
}

6
web/tsconfig.json Normal file
View file

@ -0,0 +1,6 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}

2548
web/yarn.lock Normal file

File diff suppressed because it is too large Load diff