Merge pull request #50 from tilde-lab/esbuild

Esbuild by @Valexr (HIGHLY EXPERIMENTAL)

Author: blokhin

.babelrc

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,css,html,json,svelte}]
+charset = utf-8
+indent_style = tab
+indent_size = 4
+trim_trailing_whitespace = true
+max_line_length = 100

.editorconfig

@@ -13,7 +13,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: "16"
 
       # Install npm packages
       - name: Install packages

.eslintrc.json

@@ -1,9 +1,3 @@
-/node_modules/
-/dist/
-/cypress/screenshots/
-.DS_Store
-.idea/
-.sessions/
-.vscode/
-Thumbs.db
-*.log
+node_modules
+dist/*
+*-lock.*

.github/workflows/surge.yml

@@ -0,0 +1,15 @@
+import { cpSync } from 'fs';
+import { join, dirname } from 'path';
+
+export default function copy({ from, to }) {
+	return {
+		name: 'copy',
+		setup(build) {
+			build.onEnd(() => cpSync(from, join(dirname(build.initialOptions.outfile), to), {
+				recursive: true,
+				force: true,
+				dereference: true
+			}));
+		},
+	};
+}

.gitignore

@@ -0,0 +1,67 @@
+import { build } from 'esbuild';
+import { derver } from 'derver';
+import svelte from 'esbuild-svelte';
+import preprocess from 'svelte-preprocess';
+import { eslintPlugin } from 'esbuild-plugin-eslinter';
+import copy from './copy.js';
+import html from './html.js';
+
+const DEV = process.argv.includes('--dev');
+
+build({
+	bundle: true,
+	entryPoints: ['src/main.ts'],
+	outfile: 'dist/build/bundle.js',
+	write: DEV,
+	minify: !DEV,
+	incremental: DEV,
+	sourcemap: DEV && 'inline',
+	loader: { '.svg': 'text' },
+	legalComments: 'none',
+	logLevel: 'debug',
+	mainFields: [
+		'svelte',
+		'browser',
+		'module',
+		'main'
+	],
+	plugins: [
+		svelte({
+			compileOptions: {
+				dev: DEV,
+				css: false,
+				immutable: true,
+				legacy: false
+			},
+			preprocess: [
+				preprocess({
+					sourceMap: DEV,
+					typescript: true,
+					scss: {
+						quietDeps: true,
+						renderSync: true,
+					}
+				})
+			]
+
+		}),
+		eslintPlugin(),
+		copy({ from: './src/assets', to: '../assets' }),
+		html({ in: 'src/index.html', out: 'dist/index.html', dev: DEV }),
+	]
+
+}).then(bundle => {
+	DEV && derver({
+		dir: 'dist',
+		host: 'localhost',
+		port: 5555,
+		watch: ['dist', 'src'],
+		onwatch: async (lr, item) => {
+			if (item == 'src') {
+				lr.prevent();
+				bundle.rebuild().catch(err => lr.error(err.message, 'Svelte compile error'));
+			}
+		}
+	});
+}).catch(e => console.log(e.errors));
+

app.config.js

@@ -0,0 +1,27 @@
+import { readFile, writeFile } from "fs/promises";
+
+export default function html(options = {}) {
+	return {
+		name: 'html',
+		setup(build) {
+			build.onEnd(async (result) => {
+				let html = await readFile(options.in);
+
+				html = html.toString();
+
+				if (options.dev) {
+					const linkedReplace = `\t<link rel='stylesheet' href='build/bundle.css'>\n\t<script defer src='build/bundle.js'></script>\n</head>`;
+					html = html.replace('</head>', linkedReplace);
+				} else {
+					let [js, css] = result.outputFiles;
+
+					html = html
+						.replace('</head>', () => `<style>\n${css.text}</style>\n</head>`)
+						.replace('</body>', () => `<script>\n${js.text}</script>\n</body>`);
+				}
+
+				await writeFile(options.out, html, { encoding: 'utf8' });
+			});
+		},
+	};
+}