jiek 2.1.12 → 2.1.13

package/src/commands/build.ts

@@ -1,4 +1,4 @@
-import fs, { existsSync, statSync } from 'node:fs'
+import { existsSync, mkdirSync, statSync, writeFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import path from 'node:path'
 import process from 'node:process'
@@ -7,18 +7,21 @@ import { confirm } from '@inquirer/prompts'
 import { MultiBar, Presets } from 'cli-progress'
 import { program } from 'commander'
 import { execaCommand } from 'execa'
+import type { renderView } from 'vite-bundle-analyzer'
 
+import type { RollupBuildEvent } from '#~/bridge.ts'
 import { entriesDescription, filterDescription, outdirDescription } from '#~/commands/descriptions.ts'
 import { IS_WORKSPACE } from '#~/commands/meta.ts'
+import type { TemplateOptions } from '#~/rollup/base.ts'
+import { BUILDER_TYPES, BUILDER_TYPE_PACKAGE_NAME_MAP } from '#~/rollup/base.ts'
+import type { Module } from '#~/rollup/bundle-analyzer.ts'
+import { createServer } from '#~/server.ts'
 import type { ProjectsGraph } from '#~/utils/filterSupport.ts'
 import { filterPackagesGraph, getSelectedProjectsGraph } from '#~/utils/filterSupport.ts'
 import { getWD } from '#~/utils/getWD.ts'
 import { loadConfig } from '#~/utils/loadConfig.ts'
 import { tsRegisterName } from '#~/utils/tsRegister.ts'
 
-import type { RollupProgressEvent, TemplateOptions } from '../rollup/base'
-import { BUILDER_TYPES, BUILDER_TYPE_PACKAGE_NAME_MAP } from '../rollup/base'
-
 declare module 'jiek' {
   export interface Config {
     build?: TemplateOptions & {
@@ -56,7 +59,6 @@ interface BuildOptions {
    * @default 'server'
    */
   'ana.mode': string
-  'ana.port'?: number
   'ana.open'?: boolean
   /**
    * @default 'parsed'
@@ -77,6 +79,12 @@ interface BuildOptions {
    */
   outdir: string
   watch: boolean
+  /**
+   * The port of the server.
+   *
+   * @default 8888
+   */
+  port: number
   silent: boolean
   verbose: boolean
   entries?: string
@@ -207,12 +215,12 @@ command = command
 
 command = command
   .option('-w, --watch', 'Watch the file changes.', parseBoolean)
+  .option('-p, --port <PORT>', 'The port of the server.', Number.parseInt, 8888)
 
 command = command
   .option('--ana', 'Enable the bundle analyzer.', parseBoolean)
   .option('--ana.dir <DIR>', 'The directory of the bundle analyzer.', '.jk-analyses')
   .option('--ana.mode <MODE>', 'The mode of the bundle analyzer, support "static", "json" and "server".', 'server')
-  .option('--ana.port <PORT>', 'The port of the bundle analyzer.', Number.parseInt)
   .option('--ana.open', 'Open the bundle analyzer in the browser.', parseBoolean)
   .option(
     '--ana.size <SIZE>',
@@ -274,18 +282,47 @@ command
         [] as string[]
       )
 
+    const modules: Module[] = []
+    const cjsModules: Module[] = []
+    const esmModules: Module[] = []
+    let render: typeof renderView | undefined
     const analyzer = options.ana
       ? {
         dir: options['ana.dir'],
         mode: options['ana.mode'],
-        port: options['ana.port'],
         open: options['ana.open'],
         size: options['ana.size']
       }
       : undefined
+    if (
+      options.ana
+      && ![
+        'stat',
+        'parsed',
+        'gzip'
+      ].includes(analyzer?.size ?? '')
+    ) {
+      throw new Error('The value of `ana.size` must be "stat", "parsed" or "gzip"')
+    }
+    const server = analyzer && createServer(options.port, 'localhost')
 
     if (analyzer) {
       await checkDependency('vite-bundle-analyzer')
+      const { renderView } = await import('vite-bundle-analyzer')
+      render = renderView
+    }
+    const anaPaths = new Set<string>()
+    const refreshAnalyzer = async (subPath = '', renderModules = modules) => {
+      if (!(analyzer && server && render)) return
+      const p = `/ana${subPath}`
+      anaPaths.add(p)
+      void server.renderTo(
+        p,
+        await render(renderModules, {
+          title: `Jiek Analyzer - ${subPath}`,
+          mode: analyzer.size as 'stat' | 'parsed' | 'gzip'
+        })
+      )
     }
 
     const { build } = loadConfig()
@@ -336,12 +373,12 @@ command
         throw new Error('no package found')
       }
       const wdNodeModules = path.resolve(wd, 'node_modules')
-      if (!fs.existsSync(wdNodeModules)) {
-        fs.mkdirSync(wdNodeModules)
+      if (!existsSync(wdNodeModules)) {
+        mkdirSync(wdNodeModules)
       }
       const jiekTempDir = (...paths: string[]) => path.resolve(wdNodeModules, '.jiek', ...paths)
-      if (!fs.existsSync(jiekTempDir())) {
-        fs.mkdirSync(jiekTempDir())
+      if (!existsSync(jiekTempDir())) {
+        mkdirSync(jiekTempDir())
       }
 
       const rollupBinaryPath = require.resolve('rollup')
@@ -355,15 +392,15 @@ command
           if (analyzer) {
             const anaDir = path.resolve(dir, analyzer.dir)
             if (!existsSync(anaDir)) {
-              fs.mkdirSync(anaDir, { recursive: true })
+              mkdirSync(anaDir, { recursive: true })
             }
             const gitIgnorePath = path.resolve(anaDir, '.gitignore')
             if (!existsSync(gitIgnorePath)) {
-              fs.writeFileSync(gitIgnorePath, '*\n!.gitignore\n')
+              writeFileSync(gitIgnorePath, '*\n!.gitignore\n')
             }
             const npmIgnorePath = path.resolve(anaDir, '.npmignore')
             if (!existsSync(npmIgnorePath)) {
-              fs.writeFileSync(npmIgnorePath, '*\n')
+              writeFileSync(npmIgnorePath, '*\n')
             }
             if (!statSync(anaDir).isDirectory()) {
               throw new Error(`The directory '${anaDir}' is not a directory.`)
@@ -375,7 +412,7 @@ command
           const configFile = jiekTempDir(
             `${escapeManifestName ?? `anonymous-${i++}`}.rollup.config.js`
           )
-          fs.writeFileSync(configFile, FILE_TEMPLATE(manifest))
+          writeFileSync(configFile, FILE_TEMPLATE(manifest))
           const command = [rollupBinaryPath, '--silent', '-c', configFile]
           if (tsRegisterName != null) {
             command.unshift(`node -r ${tsRegisterName}`)
@@ -397,97 +434,152 @@ command
           const times: Record<string, number> = {}
           const locks: Record<string, boolean> = {}
           let inputMaxLen = 10
-          child.on('message', (e: RollupProgressEvent) => {
-            // eslint-disable-next-line no-console,ts/no-unsafe-argument
-            if (e.type === 'debug') console.log(...(Array.isArray(e.data) ? e.data : [e.data]))
-          })
-          !silent && child.on('message', (e: RollupProgressEvent) => {
-            if (e.type === 'init') {
-              const { leafMap, targetsLength } = e.data
-              const leafs = Array
-                .from(leafMap.entries())
-                .flatMap(([input, pathAndCondiions]) =>
-                  pathAndCondiions.map(([path, ...conditions]) => ({
-                    input,
-                    path,
-                    conditions
-                  }))
+          child.on('message', (e: RollupBuildEvent) => {
+            if (
+              silent && [
+                'init',
+                'progress',
+                'watchChange'
+              ].includes(e.type)
+            ) return
+            switch (e.type) {
+              case 'init': {
+                const { leafMap, targetsLength } = e.data
+                const leafs = Array
+                  .from(leafMap.entries())
+                  .flatMap(([input, pathAndCondiions]) =>
+                    pathAndCondiions.map(([path, ...conditions]) => ({
+                      input,
+                      path,
+                      conditions
+                    }))
+                  )
+                let initMessage = `Package '${manifest.name}' has ${targetsLength} targets to build`
+                if (watch) {
+                  initMessage += ' and watching...'
+                }
+                // eslint-disable-next-line no-console
+                console.log(initMessage)
+                leafs.forEach(({ input }) => {
+                  inputMaxLen = Math.max(inputMaxLen, input.length)
+                })
+                leafs.forEach(({ input, path }) => {
+                  const key = `${input}:${path}`
+                  // eslint-disable-next-line ts/strict-boolean-expressions
+                  if (bars[key]) return
+                  bars[key] = multiBars.create(50, 0, {
+                    pkgName: manifest.name,
+                    input: input.padEnd(inputMaxLen + 5),
+                    status: 'waiting'.padEnd(10)
+                  }, {
+                    barsize: 20,
+                    linewrap: true
+                  })
+                })
+                break
+              }
+              case 'progress': {
+                const {
+                  path,
+                  tags,
+                  input,
+                  event,
+                  message
+                } = e.data
+                const bar = bars[`${input}:${path}`]
+                // eslint-disable-next-line ts/strict-boolean-expressions
+                if (!bar) return
+                const time = times[`${input}:${path}`]
+                bar.update(
+                  {
+                    start: 0,
+                    resolve: 20,
+                    end: 50
+                  }[event ?? 'start'] ?? 0,
+                  {
+                    input: (
+                      time
+                        ? `${input}(x${time.toString().padStart(2, '0')})`
+                        : input
+                    ).padEnd(inputMaxLen + 5),
+                    status: event?.padEnd(10),
+                    message: `${tags?.join(', ')}: ${message}`
+                  }
                 )
-              let initMessage = `Package '${manifest.name}' has ${targetsLength} targets to build`
-              if (watch) {
-                initMessage += ' and watching...'
+                break
               }
-              // eslint-disable-next-line no-console
-              console.log(initMessage)
-              leafs.forEach(({ input }) => {
-                inputMaxLen = Math.max(inputMaxLen, input.length)
-              })
-              leafs.forEach(({ input, path }) => {
+              case 'watchChange': {
+                const {
+                  path,
+                  input
+                } = e.data
                 const key = `${input}:${path}`
+                const bar = bars[key]
                 // eslint-disable-next-line ts/strict-boolean-expressions
-                if (bars[key]) return
-                bars[key] = multiBars.create(50, 0, {
-                  pkgName: manifest.name,
-                  input: input.padEnd(inputMaxLen + 5),
-                  status: 'waiting'.padEnd(10)
-                }, {
-                  barsize: 20,
-                  linewrap: true
-                })
-              })
-            }
-            if (e.type === 'progress') {
-              const {
-                path,
-                tags,
-                input,
-                event,
-                message
-              } = e.data
-              const bar = bars[`${input}:${path}`]
-              // eslint-disable-next-line ts/strict-boolean-expressions
-              if (!bar) return
-              const time = times[`${input}:${path}`]
-              bar.update(
-                {
-                  start: 0,
-                  resolve: 20,
-                  end: 50
-                }[event ?? 'start'] ?? 0,
-                {
-                  input: (
-                    time
-                      ? `${input}(x${time.toString().padStart(2, '0')})`
-                      : input
-                  ).padEnd(inputMaxLen + 5),
-                  status: event?.padEnd(10),
-                  message: `${tags?.join(', ')}: ${message}`
+                if (!bar) return
+                let time = times[key] ?? 1
+                if (!locks[key]) {
+                  time += 1
+                  times[key] = time
+                  setTimeout(() => {
+                    locks[key] = false
+                  }, 100)
+                  bar.update(0, {
+                    input: `${input}(x${time.toString().padStart(2, '0')})`.padEnd(inputMaxLen + 5),
+                    status: 'watching'.padEnd(10),
+                    message: 'watching...'
+                  })
                 }
-              )
-            }
-            if (e.type === 'watchChange') {
-              const {
-                path,
-                input
-              } = e.data
-              const key = `${input}:${path}`
-              const bar = bars[key]
-              // eslint-disable-next-line ts/strict-boolean-expressions
-              if (!bar) return
-              let time = times[key] ?? 1
-              if (!locks[key]) {
-                time += 1
-                times[key] = time
-                setTimeout(() => {
-                  locks[key] = false
-                }, 100)
-                bar.update(0, {
-                  input: `${input}(x${time.toString().padStart(2, '0')})`.padEnd(inputMaxLen + 5),
-                  status: 'watching'.padEnd(10),
-                  message: 'watching...'
+                locks[key] = true
+                break
+              }
+              case 'modulesAnalyze': {
+                const {
+                  data: {
+                    type,
+                    path,
+                    modules: pkgModules
+                  }
+                } = e
+                pkgModules.forEach(m => {
+                  const newM = {
+                    ...m,
+                    filename: `${manifest.name}/${m.filename}`,
+                    label: `${manifest.name}/${m.label}`
+                  }
+                  const pushOrReplace = (arr: Module[]) => {
+                    const index = arr.findIndex(({ filename }) => filename === newM.filename)
+                    if (index === -1) {
+                      arr.push(newM)
+                    } else {
+                      arr[index] = newM
+                    }
+                  }
+                  pushOrReplace(modules)
+                  if (type === 'esm') {
+                    pushOrReplace(esmModules)
+                  }
+                  if (type === 'cjs') {
+                    pushOrReplace(cjsModules)
+                  }
                 })
+                void refreshAnalyzer()
+                void refreshAnalyzer(
+                  `/${type}`,
+                  {
+                    cjs: cjsModules,
+                    esm: esmModules
+                  }[type]
+                )
+                void refreshAnalyzer(`/${type}/${manifest.name}/${path.slice(2)}`, pkgModules)
+                break
               }
-              locks[key] = true
+              case 'debug': {
+                // eslint-disable-next-line no-console,ts/no-unsafe-argument
+                console.log(...(Array.isArray(e.data) ? e.data : [e.data]))
+                break
+              }
+              default:
             }
           })
           await new Promise<void>((resolve, reject) => {
@@ -504,6 +596,7 @@ command
         })
       )
     }
+
     const commandFilters = IS_WORKSPACE ? commandFiltersOrEntries : undefined
     const filters = [
       ...new Set([
@@ -528,5 +621,20 @@ command
       }
     } finally {
       multiBars.stop()
+      let message = 'The build is complete'
+      if (analyzer) {
+        message += ` and the analyzer is running at http://localhost:${options.port}/ana in ${analyzer.mode} mode.\n`
+        message += analyzer.open ? ' The browser will open automatically.\n' : ''
+        if (anaPaths.size > 0) {
+          message += `The analyzer has ${anaPaths.size} pages:\n${
+            Array
+              .from(anaPaths)
+              .map(p => `http://localhost:${options.port}${p}`)
+              .join('\n')
+          }`
+        }
+      }
+      // eslint-disable-next-line no-console
+      !silent && console.log(message)
     }
   })

package/src/rollup/base.ts

@@ -100,38 +100,3 @@ export interface TemplateOptions {
       dts: InputPluginOption
     }
 }
-
-export type RollupProgressEvent =
-  | {
-    type: 'init'
-    data: {
-      leafMap: Map<string, string[][]>
-      targetsLength: number
-    }
-  }
-  | {
-    type: 'watchChange'
-    data: {
-      id: string
-      name: string
-      path: string
-      input: string
-    }
-  }
-  | {
-    type: 'debug'
-    data: unknown
-  }
-  | {
-    type: 'progress'
-    data: {
-      // name, path, exportConditions, input
-      name: string
-      path: string
-      exportConditions: string[]
-      input: string
-      tags?: string[]
-      event?: string
-      message?: string
-    }
-  }

package/src/rollup/bundle-analyzer.ts

@@ -0,0 +1,62 @@
+import process from 'node:process'
+
+import type { InputPluginOption, OutputPlugin, Plugin } from 'rollup'
+import type { AnalyzerPluginInternalAPI } from 'vite-bundle-analyzer'
+
+export type Module = ReturnType<AnalyzerPluginInternalAPI['processModule']>[number]
+
+const {
+  JIEK_ANALYZER
+} = process.env
+
+const ANALYZER = (JIEK_ANALYZER != null) && JSON.parse(JIEK_ANALYZER) as {
+  dir?: string
+  mode?: string
+  size?: string
+  port?: number
+  open?: boolean
+}
+
+export function bundleAnalyzer(modulesResolved: (modules: Module[]) => void) {
+  // eslint-disable-next-line ts/strict-boolean-expressions
+  if (!ANALYZER) {
+    return []
+  }
+
+  const defaultSizes = ({
+    parsed: 'parsed',
+    stat: 'stat',
+    gzip: 'gzip'
+  } as const)[ANALYZER.size ?? 'stat'] ?? 'parsed'
+
+  let module: typeof import('vite-bundle-analyzer') | undefined
+  let ana: Plugin | undefined
+  async function initAna() {
+    const { adapter, analyzer } = module ?? await import('vite-bundle-analyzer')
+    ana = ana ?? adapter(analyzer({
+      defaultSizes,
+      analyzerMode: modulesResolved
+    }))
+  }
+
+  return [
+    (async () => {
+      await initAna()
+      return {
+        name: 'jiek:bundle-analyzer',
+        async closeBundle(...args) {
+          if (typeof ana!.closeBundle !== 'function') return
+
+          return ana!.closeBundle?.call(this, ...args)
+        }
+      } satisfies InputPluginOption
+    })(),
+    (async () => {
+      await initAna()
+      return {
+        ...ana,
+        name: 'jiek:bundle-analyzer-output'
+      } satisfies OutputPlugin
+    })()
+  ] as const
+}