refactor(server): [wip] rewrite bundler

Author: ije

server/app.ts

@@ -1,5 +1,4 @@
-import { ImportMap, SourceType, TransformOptions } from '../compiler/mod.ts'
-import { buildChecksum, transform } from '../compiler/mod.ts'
+import { buildChecksum, ImportMap, SourceType, transform, TransformOptions } from '../compiler/mod.ts'
 import { colors, createHash, ensureDir, path, walk } from '../deps.ts'
 import { EventEmitter } from '../framework/core/events.ts'
 import type { RouteModule } from '../framework/core/routing.ts'
@@ -18,10 +17,13 @@ import log from '../shared/log.ts'
 import util from '../shared/util.ts'
 import type {
   Config,
-  LoaderPlugin,
+
+
+
+  DependencyDescriptor, LoaderPlugin,
   LoaderTransformResult,
   Module,
-  DependencyDescriptor,
+
   RouterURL,
   ServerApplication,
   TransformFn
@@ -33,8 +35,9 @@ import {
   computeHash,
   formatBytesWithColor,
   getAlephPkgUri,
-  getRelativePath,
-  getDenoDir,
+
+  getDenoDir, getRelativePath,
+
   isLoaderPlugin,
   reFullVersion,
   toLocalUrl,
@@ -432,26 +435,6 @@ export class Application implements ServerApplication {
     return [status, html]
   }
 
-  getSSRHTMLScripts() {
-    const { baseUrl } = this.config
-
-    if (this.isDev) {
-      return [
-        { src: util.cleanPath(`${baseUrl}/_aleph/main.js`), type: 'module' },
-        { src: util.cleanPath(`${baseUrl}/_aleph/-/deno.land/x/aleph/nomodule.js`), nomodule: true },
-      ]
-    }
-
-    return [
-      bundlerRuntimeCode,
-      ...['polyfill', 'deps', 'shared', 'main']
-        .filter(name => this.#bundler.getBundledFile(name) !== null)
-        .map(name => ({
-          src: util.cleanPath(`${baseUrl}/_aleph/${this.#bundler.getBundledFile(name)}`)
-        }))
-    ]
-  }
-
   createFSWatcher(): EventEmitter {
     const e = new EventEmitter()
     this.#fsWatchListeners.push(e)
@@ -550,6 +533,27 @@ export class Application implements ServerApplication {
     return code
   }
 
+  /** get ssr html scripts */
+  getSSRHTMLScripts() {
+    const { baseUrl } = this.config
+
+    if (this.isDev) {
+      return [
+        { src: util.cleanPath(`${baseUrl}/_aleph/main.js`), type: 'module' },
+        { src: util.cleanPath(`${baseUrl}/_aleph/-/deno.land/x/aleph/nomodule.js`), nomodule: true },
+      ]
+    }
+
+    return [
+      bundlerRuntimeCode,
+      ...['polyfill', 'deps', 'shared', 'main']
+        .filter(name => this.#bundler.getBundledFile(name) !== null)
+        .map(name => ({
+          src: util.cleanPath(`${baseUrl}/_aleph/${this.#bundler.getBundledFile(name)}`)
+        }))
+    ]
+  }
+
   /** fetch module content */
   async fetchModule(url: string): Promise<{ content: Uint8Array, contentType: string | null }> {
     if (!util.isLikelyHttpURL(url)) {
@@ -1015,7 +1019,7 @@ export class Application implements ServerApplication {
   private async bundle() {
     const sharedEntryMods = new Set<string>()
     const entryMods = new Map<string[], boolean>()
-    const refCounter = new Map<string, Set<string>>()
+    const refCounter = new Set<string>()
     const concatAllEntries = () => [
       Array.from(entryMods.entries()).map(([urls, shared]) => urls.map(url => ({ url, shared }))),
       Array.from(sharedEntryMods).map(url => ({ url, shared: true })),
@@ -1027,55 +1031,41 @@ export class Application implements ServerApplication {
       true
     )
 
+    // add app/404 modules as shared entry
     entryMods.set(Array.from(this.#modules.keys()).filter(url => ['/app', '/404'].includes(trimModuleExt(url))), true)
 
+    // add page module entries
+    this.#pageRouting.lookup(routes => {
+      routes.forEach(({ module: { url } }) => entryMods.set([url], false))
+    })
+
+    // add dynamic imported module as entry
     this.#modules.forEach(mod => {
       mod.deps.forEach(({ url, isDynamic }) => {
         if (isDynamic) {
-          // add dynamic imported module as entry
           entryMods.set([url], false)
         }
         return url
       })
-      mod.deps.forEach(({ url }) => {
-        if (!url.startsWith('#')) {
-          if (refCounter.has(url)) {
-            refCounter.get(url)!.add(mod.url)
-          } else {
-            refCounter.set(url, new Set([mod.url]))
-          }
-        }
-      })
     })
 
-    // add page module entries
-    this.#pageRouting.lookup(routes => {
-      routes.forEach(({ module: { url } }) => entryMods.set([url], false))
-    })
-
-    refCounter.forEach((refers, url) => {
-      if (refers.size > 1) {
-        let shared = 0
-        for (const mods of entryMods.keys()) {
-          const some = mods.some(u => {
-            let scoped = false
-            this.lookupDeps(u, dep => {
-              if (!dep.isDynamic && refers.has(dep.url)) {
-                scoped = true
-                return false
-              }
-            })
-            return scoped
-          })
-          if (some) {
-            shared++
+    for (const mods of entryMods.keys()) {
+      const deps = new Set<string>()
+      mods.forEach(url => {
+        this.lookupDeps(url, dep => {
+          if (!dep.isDynamic) {
+            deps.add(dep.url)
           }
-        }
-        if (shared > 1) {
+        })
+      })
+      deps.forEach(url => {
+        if (refCounter.has(url)) {
           sharedEntryMods.add(url)
+        } else {
+          refCounter.add(url)
         }
-      }
-    })
+      })
+    }
 
     log.info('- bundle')
     await this.#bundler.bundle(concatAllEntries())

server/bundler.ts

@@ -1,4 +1,4 @@
-import { minify as terser, ECMA } from 'https://esm.sh/[email protected]'
+import { ECMA, minify as terser } from 'https://esm.sh/[email protected]'
 import { transform } from '../compiler/mod.ts'
 import { colors, ensureDir, path } from '../deps.ts'
 import { defaultReactVersion } from '../shared/constants.ts'
@@ -20,6 +20,7 @@ export const bundlerRuntimeCode = `
   window.__ALEPH = {
     baseURL: '/',
     pack: {},
+    bundledFiles: {},
     import: function(src, specifier) {
       var pack = this.pack
       return new Promise(function(resolve, reject) {
@@ -86,31 +87,22 @@ export class Bundler {
     }
     for (const url of entries) {
       await this.createBundleChunk(
-        trimModuleExt(url),
+        util.trimPrefix(trimModuleExt(url), '/'),
         [url],
         [remoteEntries, sharedEntries].flat()
       )
     }
+    await this.createMainJS()
   }
 
   getBundledFile(name: string): string | null {
     return this.#bundledFiles.get(name) || null
   }
 
   async copyDist() {
-    await Promise.all([
-      ...Array.from(this.#bundledFiles.values()).map(jsFile => this.copyBundleFile(jsFile)),
-      this.copyMainJS(),
-    ])
-  }
-
-  private async copyMainJS() {
-    const mainJS = this.#app.getMainJS(true)
-    const hash = computeHash(mainJS)
-    const jsFilename = `main.bundle.${hash.slice(0, 8)}.js`
-    const saveAs = path.join(this.#app.outputDir, '_aleph', jsFilename)
-    this.#bundledFiles.set('main', jsFilename)
-    await ensureTextFile(saveAs, mainJS)
+    await Promise.all(
+      Array.from(this.#bundledFiles.keys()).map(jsFile => this.copyBundleFile(jsFile))
+    )
   }
 
   private async copyBundleFile(jsFilename: string) {
@@ -175,6 +167,37 @@ export class Bundler {
     return bundlingFile
   }
 
+  private async createMainJS() {
+    const bundledFiles = Array.from(this.#bundledFiles.entries())
+      .filter(([name]) => !['polyfill', 'deps', 'shared'].includes(name))
+      .reduce((r, [name, filename]) => {
+        r[name] = filename
+        return r
+      }, {} 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)
+    this.#bundledFiles.set('main', bundleFilename)
+    log.info(`  {} main.js ${colors.dim('• ' + util.formatBytes(mainJS.length))}`)
+  }
+
+  /** create polyfill bundle. */
+  private async createPolyfillBundle() {
+    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 rawPolyfillFile = `${alephPkgUri}/compiler/polyfills/${buildTarget}/mod.ts`
+      await this._bundle(rawPolyfillFile, bundleFile)
+    }
+    this.#bundledFiles.set('polyfill', bundleFilename)
+    log.info(`  {} polyfill.js (${buildTarget.toUpperCase()}) ${colors.dim('• ' + util.formatBytes(Deno.statSync(bundleFile).size))}`)
+  }
+
   /** create bundle chunk. */
   private async createBundleChunk(name: string, entry: string[], external: string[]) {
     const entryCode = (await Promise.all(entry.map(async (url, i) => {
@@ -205,22 +228,7 @@ export class Bundler {
       lazyRemove(bundleEntryFile)
     }
     this.#bundledFiles.set(name, bundleFilename)
-    log.info(`  {} ${name} ${colors.dim('• ' + util.formatBytes(Deno.statSync(bundleFile).size))}`)
-  }
-
-  /** create polyfill bundle. */
-  private async createPolyfillBundle() {
-    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 rawPolyfillFile = `${alephPkgUri}/compiler/polyfills/${buildTarget}/mod.ts`
-      await this._bundle(rawPolyfillFile, bundleFile)
-    }
-    this.#bundledFiles.set('polyfill', bundleFilename)
-    log.info(`  {} polyfill (${buildTarget.toUpperCase()}) ${colors.dim('• ' + util.formatBytes(Deno.statSync(bundleFile).size))}`)
+    log.info(`  {} ${name}.js ${colors.dim('• ' + util.formatBytes(Deno.statSync(bundleFile).size))}`)
   }
 
   /** run deno bundle and compress the output using terser. */