Refactor `astro` export map, add `source-map-support` (#161)

* fix: add svelte plugin for esbuild, remove precompiled svelte components

* refactor: public export map, public types

* feat: add source-map-support to common code paths

* chore: move new "exports" to "imports" map, add internal types

* Include outPath in error logging for bad load status, and drop error stack (#163)

* Include outPath in the error logging for bad load status

* Discard error stack since it seems not useful

* feat: improve build error logging

* refactor: use object param for writeResult

Co-authored-by: Kevin (Kun) "Kassimo" Qian <kevinkassimo@gmail.com>

2 files changed, 72 insertions, 7 deletions

diff --git a/scripts/cmd/build.js b/scripts/cmd/build.js
index ea112f018..81761030e 100644
--- a/scripts/cmd/build.js
+++ b/scripts/cmd/build.js
@@ -1,25 +1,30 @@
 import esbuild from 'esbuild';
+import svelte from '../utils/svelte-plugin.js';
 import del from 'del';
 import { promises as fs } from 'fs';
 import { dim, green, red, yellow } from 'kleur/colors';
 import glob from 'tiny-glob';
 
 /** @type {import('esbuild').BuildOptions} */
-const config = {
+const defaultConfig = {
   bundle: true,
   minify: true,
-  sourcemap: 'inline',
   format: 'esm',
   platform: 'node',
   target: 'node14',
+  sourcemap: 'inline',
+  sourcesContent: false,
+  plugins: [svelte()],
 };
 
-export default async function build(pattern, ...args) {
-  const isDev = args.pop() === 'IS_DEV';
-  const entryPoints = await glob(pattern, { filesOnly: true, absolute: true });
+export default async function build(...args) {
+  const config = Object.assign({}, defaultConfig);
+  const isDev = args.slice(-1)[0] === 'IS_DEV';
+  let entryPoints = [].concat(...(await Promise.all(args.map((pattern) => glob(pattern, { filesOnly: true, absolute: true })))));
+
   const { type = 'module', dependencies = {} } = await fs.readFile('./package.json').then((res) => JSON.parse(res.toString()));
   const format = type === 'module' ? 'esm' : 'cjs';
-  const external = Object.keys(dependencies);
+  const external = [...Object.keys(dependencies), 'source-map-support', 'source-map-support/register.js'];
   const outdir = 'dist';
   await clean(outdir);
 
@@ -61,5 +66,5 @@ export default async function build(pattern, ...args) {
 }
 
 async function clean(outdir) {
-  return del(`!${outdir}/**/*.d.ts`);
+  return del([`${outdir}/**`, `!${outdir}/**/*.d.ts`]);
 }
diff --git a/scripts/utils/svelte-plugin.js b/scripts/utils/svelte-plugin.js
new file mode 100644
index 000000000..84839ffd7
--- /dev/null
+++ b/scripts/utils/svelte-plugin.js
@@ -0,0 +1,60 @@
+// @ts-nocheck
+import { compile } from 'svelte/compiler';
+import { relative, isAbsolute, join, dirname } from 'path';
+import { promises as fs } from 'fs';
+
+const convertMessage = ({ message, start, end, filename, frame }) => ({
+    text: message,
+    location: start && end && {
+        file: filename,
+        line: start.line,
+        column: start.column,
+        length: start.line === end.line ? end.column - start.column : 0,
+        lineText: frame,
+    },
+})
+
+const handleLoad = async (args, generate) => {
+    const { path } = args;
+    const source = await fs.readFile(path, 'utf8');
+    const filename = relative(process.cwd(), path)
+
+    try {
+        let compileOptions = { css: false, generate, hydratable: true };
+
+        let { js, warnings } = compile(source, { ...compileOptions, filename })
+        let contents = js.code + `\n//# sourceMappingURL=` + js.map.toUrl()
+
+        return { loader: 'js', contents, resolveDir: dirname(path), warnings: warnings.map(w => convertMessage(w)) };
+    } catch (e) {
+        return { errors: [convertMessage(e)] }
+    }
+}
+
+export default function sveltePlugin() {
+    return {
+        name: 'svelte-esbuild',
+        setup(build) {
+                build.onResolve({ filter: /\.svelte$/ }, args => {
+                    let path = args.path.replace(/\.(?:client|server)/, '');
+                    path = isAbsolute(path) ? path : join(args.resolveDir, path)
+                    
+                    if (/\.client\.svelte$/.test(args.path)) {
+                        return {
+                            path,
+                            namespace: 'svelte:client',
+                        }
+                    }
+
+                    if (/\.server\.svelte$/.test(args.path)) {
+                        return {
+                            path,
+                            namespace: 'svelte:server',
+                        }
+                    }
+                });
+            build.onLoad({ filter: /.*/, namespace: 'svelte:client' }, (args) => handleLoad(args, 'dom'))
+            build.onLoad({ filter: /.*/, namespace: 'svelte:server' }, (args) => handleLoad(args, 'ssr'))
+        },
+    }
+}