Merge pull request #277 from alephjs/use-esbuild-bundler

Use esbuild bundler

Author: ije

CONTRIBUTING.md

@@ -31,7 +31,7 @@ ALEPH_DEV=true deno run -A --unstable --import-map=./import_map.json cli.ts star
 ALEPH_DEV=true deno run -A --unstable --import-map=./import_map.json cli.ts build ./examples/hello-world -L debug
 
 # run all tests
-deno test -A --unstable --location=http://127.0.0.1 --import-map=./import_map.json
+deno test -A --unstable --location=http://localhost --import-map=./import_map.json
 ```
 
 ## Project Structure

bundler/mod.ts

@@ -1,20 +1,20 @@
-import { dim } from 'https://deno.land/std@0.92.0/fmt/colors.ts'
-import * as path from 'https://deno.land/std@0.92.0/path/mod.ts'
-import { ensureDir } from 'https://deno.land/std@0.92.0/fs/ensure_dir.ts'
+import { dim } from 'https://deno.land/std@0.93.0/fmt/colors.ts'
+import { basename, dirname, join } from 'https://deno.land/std@0.93.0/path/mod.ts'
+import { ensureDir, } from 'https://deno.land/std@0.93.0/fs/ensure_dir.ts'
 import { parseExportNames, transform } from '../compiler/mod.ts'
 import { trimModuleExt } from '../framework/core/module.ts'
-import { ensureTextFile, existsFileSync, lazyRemove } from '../shared/fs.ts'
+import { ensureTextFile, existsDirSync, existsFileSync, lazyRemove } from '../shared/fs.ts'
 import log from '../shared/log.ts'
 import util from '../shared/util.ts'
 import { VERSION } from '../version.ts'
 import type { Application, Module } from '../server/app.ts'
-import {
-  clearCompilation,
-  computeHash,
-  getAlephPkgUri,
-} from '../server/helper.ts'
+import { cache } from '../server/cache.ts'
+import { computeHash, esbuild, stopEsbuild, getAlephPkgUri } from '../server/helper.ts'
 
-export const bundlerRuntimeCode = (`
+const hashShort = 8
+const reHashJS = new RegExp(`\\.[0-9a-fx]{${hashShort}}\\.js$`, 'i')
+
+export const bundlerRuntimeCode = `
   window.__ALEPH = {
     basePath: '/',
     pack: {},
@@ -47,22 +47,15 @@ export const bundlerRuntimeCode = (`
       })
     }
   }
-`).split('\n')
-  .map(l => l.trim()
-    .replaceAll(') {', '){')
-    .replace(/\s*([,:=|+]{1,2})\s+/g, '$1')
-  )
-  .join('')
+`
 
 /** The bundler class for aleph server. */
 export class Bundler {
   #app: Application
-  #compiledModules: Set<string>
   #bundledFiles: Map<string, string>
 
   constructor(app: Application) {
     this.#app = app
-    this.#compiledModules = new Set()
     this.#bundledFiles = new Map()
   }
 
@@ -83,21 +76,21 @@ export class Bundler {
       }
     })
 
-    await this.createPolyfillBundle()
-    await this.createBundleChunk(
+    await this.bundlePolyfillChunck()
+    await this.bundleChunk(
       'deps',
       Array.from(remoteEntries),
       []
     )
     if (sharedEntries.size > 0) {
-      await this.createBundleChunk(
+      await this.bundleChunk(
         'shared',
         Array.from(sharedEntries),
         Array.from(remoteEntries)
       )
     }
     for (const url of entries) {
-      await this.createBundleChunk(
+      await this.bundleChunk(
         trimModuleExt(url),
         [url],
         [
@@ -106,7 +99,13 @@ export class Bundler {
         ].flat()
       )
     }
+
+    // create main.js after all chunks are bundled
     await this.createMainJS()
+
+    // unlike nodejs, Deno doesn't provide the necessary APIs to allow Deno to
+    // exit while esbuild's internal child process is still running.
+    stopEsbuild()
   }
 
   getBundledFile(name: string): string | null {
@@ -121,16 +120,16 @@ export class Bundler {
 
   private async copyBundleFile(jsFilename: string) {
     const { buildDir, outputDir } = this.#app
-    const bundleFile = path.join(buildDir, jsFilename)
-    const saveAs = path.join(outputDir, '_aleph', jsFilename)
-    await ensureDir(path.dirname(saveAs))
+    const bundleFile = join(buildDir, jsFilename)
+    const saveAs = join(outputDir, '_aleph', jsFilename)
+    await ensureDir(dirname(saveAs))
     await Deno.copyFile(bundleFile, saveAs)
   }
 
   private async compile(mod: Module, external: string[]): Promise<string> {
     const bundlingFile = util.trimSuffix(mod.jsFile, '.js') + '.bundling.js'
 
-    if (this.#compiledModules.has(mod.url)) {
+    if (existsFileSync(bundlingFile)) {
       return bundlingFile
     }
 
@@ -180,7 +179,6 @@ export class Bundler {
     }
 
     await ensureTextFile(bundlingFile, code)
-    this.#compiledModules.add(mod.url)
 
     return bundlingFile
   }
@@ -194,30 +192,30 @@ export class Bundler {
       }, {} as Record<string, string>)
     const mainJS = `__ALEPH.bundledFiles=${JSON.stringify(bundledFiles)};` + this.#app.getMainJS(true)
     const hash = computeHash(mainJS)
-    const bundleFilename = `main.bundle.${hash.slice(0, 8)}.js`
-    const bundleFile = path.join(this.#app.buildDir, bundleFilename)
-    await Deno.writeTextFile(bundleFile, mainJS)
+    const bundleFilename = `main.bundle.${hash.slice(0, hashShort)}.js`
+    const bundleFilePath = join(this.#app.buildDir, bundleFilename)
+    await Deno.writeTextFile(bundleFilePath, mainJS)
     this.#bundledFiles.set('main', bundleFilename)
     log.info(`  {} main.js ${dim('• ' + util.formatBytes(mainJS.length))}`)
   }
 
   /** create polyfill bundle. */
-  private async createPolyfillBundle() {
+  private async bundlePolyfillChunck() {
     const alephPkgUri = getAlephPkgUri()
     const { buildTarget } = this.#app.config
     const hash = computeHash(buildTarget + Deno.version.deno + VERSION)
-    const bundleFilename = `polyfill.bundle.${hash.slice(0, 8)}.js`
-    const bundleFile = path.join(this.#app.buildDir, bundleFilename)
-    if (!existsFileSync(bundleFile)) {
+    const bundleFilename = `polyfill.bundle.${hash.slice(0, hashShort)}.js`
+    const bundleFilePath = join(this.#app.buildDir, bundleFilename)
+    if (!existsFileSync(bundleFilePath)) {
       const rawPolyfillFile = `${alephPkgUri}/bundler/polyfills/${buildTarget}/mod.ts`
-      await this._bundle(rawPolyfillFile, bundleFile)
+      await this.build(rawPolyfillFile, bundleFilePath)
     }
     this.#bundledFiles.set('polyfill', bundleFilename)
-    log.info(`  {} polyfill.js (${buildTarget.toUpperCase()}) ${dim('• ' + util.formatBytes(Deno.statSync(bundleFile).size))}`)
+    log.info(`  {} polyfill.js (${buildTarget.toUpperCase()}) ${dim('• ' + util.formatBytes(Deno.statSync(bundleFilePath).size))}`)
   }
 
   /** create bundle chunk. */
-  private async createBundleChunk(name: string, entry: string[], external: string[]) {
+  private async bundleChunk(name: string, entry: string[], external: string[]) {
     const entryCode = (await Promise.all(entry.map(async (url, i) => {
       let mod = this.#app.getModule(url)
       if (mod && mod.jsFile !== '') {
@@ -237,79 +235,87 @@ export class Bundler {
       return []
     }))).flat().join('\n')
     const hash = computeHash(entryCode + VERSION + Deno.version.deno)
-    const bundleFilename = `${name}.bundle.${hash.slice(0, 8)}.js`
-    const bundleEntryFile = path.join(this.#app.buildDir, `${name}.bundle.entry.js`)
-    const bundleFile = path.join(this.#app.buildDir, bundleFilename)
-    if (!existsFileSync(bundleFile)) {
+    const bundleFilename = `${name}.bundle.${hash.slice(0, hashShort)}.js`
+    const bundleEntryFile = join(this.#app.buildDir, `${name}.bundle.entry.js`)
+    const bundleFilePath = join(this.#app.buildDir, bundleFilename)
+    if (!existsFileSync(bundleFilePath)) {
       await Deno.writeTextFile(bundleEntryFile, entryCode)
-      await this._bundle(bundleEntryFile, bundleFile)
+      await this.build(bundleEntryFile, bundleFilePath)
       lazyRemove(bundleEntryFile)
     }
     this.#bundledFiles.set(name, bundleFilename)
-    log.info(`  {} ${name}.js ${dim('• ' + util.formatBytes(Deno.statSync(bundleFile).size))}`)
+    log.info(`  {} ${name}.js ${dim('• ' + util.formatBytes(Deno.statSync(bundleFilePath).size))}`)
   }
 
   /** run deno bundle and compress the output using terser. */
-  private async _bundle(bundleEntryFile: string, bundleFile: string) {
-    // todo: use Deno.emit()
-    const p = Deno.run({
-      cmd: [Deno.execPath(), 'bundle', '--no-check', bundleEntryFile, bundleFile],
-      stdout: 'null',
-      stderr: 'piped'
-    })
-    const data = await p.stderrOutput()
-    p.close()
-    if (!existsFileSync(bundleFile)) {
-      const msg = (new TextDecoder).decode(data).replaceAll('file://', '').replaceAll(this.#app.buildDir, '/_aleph')
-      await Deno.stderr.write((new TextEncoder).encode(msg))
-      Deno.exit(1)
-    }
+  private async build(entryFile: string, bundleFile: string) {
+    const { buildTarget, browserslist } = this.#app.config
 
-    // transpile bundle code to `buildTarget`
-    const { buildTarget } = this.#app.config
-
-    let { code } = await transform(
-      '/bundle.js',
-      await Deno.readTextFile(bundleFile),
-      {
-        transpileOnly: true,
-        swcOptions: {
-          target: buildTarget
+    await clearBuildCache(bundleFile)
+    await esbuild({
+      entryPoints: [entryFile],
+      outfile: bundleFile,
+      platform: 'browser',
+      target: [String(buildTarget)].concat(browserslist.map(({ name, version }) => {
+        return `${name.toLowerCase()}${version}`
+      })),
+      bundle: true,
+      minify: true,
+      treeShaking: true,
+      sourcemap: false,
+      plugins: [{
+        name: 'http-loader',
+        setup(build) {
+          build.onResolve({ filter: /.*/ }, args => {
+            if (util.isLikelyHttpURL(args.path)) {
+              return {
+                path: args.path,
+                namespace: 'http-module',
+              }
+            }
+            if (args.namespace === 'http-module') {
+              return {
+                path: (new URL(args.path, args.importer)).toString(),
+                namespace: 'http-module',
+              }
+            }
+            const [path] = util.splitBy(util.trimPrefix(args.path, 'file://'), '#')
+            if (path.startsWith('.')) {
+              return { path: join(args.resolveDir, path) }
+            }
+            return { path }
+          })
+          build.onLoad({ filter: /.*/, namespace: 'http-module' }, async args => {
+            const { content } = await cache(args.path)
+            return { contents: content }
+          })
         }
-      }
-    )
-
-    // IIFEify
-    code = `(() => { ${code} })()`
-
-    // minify code
-    // todo: use swc minify instead (https://github.com/swc-project/swc/pull/1302)
-    const mini = await minify(code, parseInt(util.trimPrefix(buildTarget, 'es')))
-    if (mini !== undefined) {
-      code = mini
-    }
-
-    await clearCompilation(bundleFile)
-    await Deno.writeTextFile(bundleFile, code)
+      }],
+    })
   }
 }
 
-interface Minify {
-  (code: string, options: any): Promise<{ code: string }>
+export function simpleJSMinify(code: string) {
+  return code.split('\n').map(l => l.trim()
+    .replace(/\s*([,:=|+]{1,2})\s+/g, '$1')
+    .replaceAll(') {', '){')
+  ).join('')
 }
 
-let terser: Minify | null = null
+async function clearBuildCache(filename: string) {
+  const dir = dirname(filename)
+  const hashname = basename(filename)
+  if (!reHashJS.test(hashname) || !existsDirSync(dir)) {
+    return
+  }
 
-async function minify(code: string, ecma: number = 2015) {
-  if (terser === null) {
-    const { minify } = await import('https://esm.sh/[email protected]?no-check')
-    terser = minify as Minify
+  const jsName = hashname.split('.').slice(0, -2).join('.') + '.js'
+  for await (const entry of Deno.readDir(dir)) {
+    if (entry.isFile && reHashJS.test(entry.name)) {
+      const _jsName = entry.name.split('.').slice(0, -2).join('.') + '.js'
+      if (_jsName === jsName && hashname !== entry.name) {
+        await Deno.remove(join(dir, entry.name))
+      }
+    }
   }
-  const ret = await terser(code, {
-    compress: true,
-    mangle: true,
-    ecma,
-    sourceMap: false
-  })
-  return ret.code
 }

bundler/polyfills/es2015/fetch.ts

@@ -1 +1,5 @@
-import './fetch.ts'
+import nameShim from 'https://esm.sh/function.prototype.name/shim'
+
+import '../es2016/mod.ts'
+
+nameShim()

bundler/polyfills/es2015/mod.ts

@@ -0,0 +1,8 @@
+// Array#includes is stage 4, in ES7/ES2016
+import includesShim from 'https://esm.sh/array-includes/shim'
+
+import '../es2017/mod.ts'
+
+includesShim()
+
+

bundler/polyfills/es2016/mod.ts

@@ -0,0 +1,18 @@
+// Object.values/Object.entries are stage 4, in ES2017
+import valuesShim from 'https://esm.sh/object.values/shim'
+import entriesShim from 'https://esm.sh/object.entries/shim'
+
+// String#padStart/String#padEnd are stage 4, in ES2017
+import padstartShim from 'https://esm.sh/string.prototype.padstart/shim'
+import padendShim from 'https://esm.sh/string.prototype.padend/shim'
+
+// Object.getOwnPropertyDescriptors is stage 4, in ES2017
+import getownpropertydescriptorsShim from 'https://esm.sh/object.getownpropertydescriptors/shim'
+
+import '../es2018/mod.ts'
+
+valuesShim()
+entriesShim()
+padstartShim()
+padendShim()
+getownpropertydescriptorsShim()

bundler/polyfills/es2017/mod.ts

@@ -0,0 +1,6 @@
+import finallyShim from 'https://esm.sh/promise.prototype.finally/shim'
+import '../es2019/mod.ts'
+
+if (typeof Promise === 'function') {
+  finallyShim()
+}

bundler/polyfills/es2018/mod.ts

@@ -0,0 +1,10 @@
+import flatShim from 'https://esm.sh/array.prototype.flat/shim'
+import flatmapShim from 'https://esm.sh/array.prototype.flatmap/shim'
+import descriptionShim from 'https://esm.sh/symbol.prototype.description/shim'
+import fromentriesShim from 'https://esm.sh/object.fromentries/shim'
+import '../es2020/mod.ts'
+
+flatShim()
+flatmapShim()
+descriptionShim()
+fromentriesShim()

bundler/polyfills/es2019/mod.ts

@@ -0,0 +1,7 @@
+import matchallShim from 'https://esm.sh/string.prototype.matchall/shim'
+import globalthisShim from 'https://esm.sh/globalthis/shim'
+import allsettledShim from 'https://esm.sh/promise.allsettled/shim'
+
+matchallShim()
+globalthisShim()
+allsettledShim()

bundler/polyfills/es2020/mod.ts

@@ -1,5 +1,5 @@
-import { resolve } from 'https://deno.land/std@0.92.0/path/mod.ts'
-import { parse } from 'https://deno.land/std@0.92.0/flags/mod.ts'
+import { resolve } from 'https://deno.land/std@0.93.0/path/mod.ts'
+import { parse } from 'https://deno.land/std@0.93.0/flags/mod.ts'
 import { existsDirSync } from './shared/fs.ts'
 import log, { LevelNames } from './shared/log.ts'
 import util from './shared/util.ts'