jiek 2.1.11 → 2.1.13-alpha.1

package/src/commands/build.ts

@@ -1,23 +1,27 @@
-import fs 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'
 
 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_TYPE_PACKAGE_NAME_MAP, BUILDER_TYPES } from '../rollup/base'
-
 declare module 'jiek' {
   export interface Config {
     build?: TemplateOptions & {
@@ -46,6 +50,20 @@ ${isDefault ? 'This command is the default command.' : ''}
 `.trim()
 
 interface BuildOptions {
+  ana?: boolean
+  /**
+   * @default '.jk-analyses'
+   */
+  'ana.dir': string
+  /**
+   * @default 'server'
+   */
+  'ana.mode': string
+  'ana.open'?: boolean
+  /**
+   * @default 'parsed'
+   */
+  'ana.size': string
   /**
    * Auto-detect the builder from the installed dependencies.
    * If the builder is not installed, it will prompt the user to install it.
@@ -61,6 +79,12 @@ interface BuildOptions {
    */
   outdir: string
   watch: boolean
+  /**
+   * The port of the server.
+   *
+   * @default 8888
+   */
+  port: number
   silent: boolean
   verbose: boolean
   entries?: string
@@ -99,7 +123,7 @@ interface BuildOptions {
 async function checkDependency(dependency: string) {
   try {
     require.resolve(dependency)
-  } catch (e) {
+  } catch {
     console.error(`The package '${dependency}' is not installed, please install it first.`)
     const { notWorkspace } = getWD()
     const command = `pnpm install -${notWorkspace ? '' : 'w'}D ${dependency}`
@@ -138,7 +162,7 @@ ${entriesDescription}
 If you pass the --entries option, it will merge into the entries of the command.
 `.trim()
 
-const command = isDefault
+let command = isDefault
   ? (() => {
     const c = program
       .name('jb/jiek-build')
@@ -153,9 +177,10 @@ const command = isDefault
   : program
     .command(`build [${IS_WORKSPACE ? 'filters' : 'entries'}]`)
 
-command
+command = command
   .description(description)
   .option('-t, --type <TYPE>', `The type of build, support ${BUILDER_TYPES.map(s => `"${s}"`).join(', ')}.`, v => {
+    // eslint-disable-next-line ts/no-unsafe-argument
     if (!BUILDER_TYPES.includes(v as any)) {
       throw new Error(`The value of 'type' must be ${BUILDER_TYPES.map(s => `"${s}"`).join(', ')}`)
     }
@@ -183,13 +208,32 @@ command
     'Only output minify files, but dts files will still be output, it only replaces the js files.',
     parseBoolean
   )
+
+command = command
   .option('--tsconfig <TSCONFIG>', 'The path of the tsconfig file which is used to generate js and dts files.', String)
   .option('--dtsconfig <DTSCONFIG>', 'The path of the tsconfig file which is used to generate dts files.', String)
+
+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.open', 'Open the bundle analyzer in the browser.', parseBoolean)
+  .option(
+    '--ana.size <SIZE>',
+    'The default size of the bundle analyzer, support "stat", "parsed" and "gzip".',
+    'parsed'
+  )
+
+command = command
   .option('-s, --silent', "Don't display logs.", parseBoolean)
   .option('-v, --verbose', 'Display debug logs.', parseBoolean)
+
+command
   .action(async (commandFiltersOrEntries: string | undefined, options: BuildOptions) => {
-    /* eslint-disable prefer-const */
     let {
       type,
       outdir,
@@ -207,10 +251,9 @@ command
       tsconfig,
       dtsconfig
     } = options
-    /* eslint-enable prefer-const */
     const resolvedType = type ?? DEFAULT_BUILDER_TYPE
     if (!withoutJs) {
-      await checkDependency(BUILDER_TYPE_PACKAGE_NAME_MAP[resolvedType]!)
+      await checkDependency(BUILDER_TYPE_PACKAGE_NAME_MAP[resolvedType])
       if (minifyType === 'builder') {
         minifyType = resolvedType
       }
@@ -220,7 +263,7 @@ command
         {
           ...BUILDER_TYPE_PACKAGE_NAME_MAP,
           terser: '@rollup/plugin-terser'
-        }[resolvedType]!
+        }[resolvedType]
       )
     }
     let shouldPassThrough = false
@@ -238,6 +281,50 @@ 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'],
+        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()
     silent = silent ?? build?.silent ?? false
 
@@ -256,7 +343,7 @@ command
       entries = undefined
     }
     const env = {
-      ...process.env,
+      JIEK_ANALYZER: analyzer && JSON.stringify(analyzer),
       JIEK_BUILDER: type,
       JIEK_OUT_DIR: outdir,
       JIEK_CLEAN: String(!noClean),
@@ -268,7 +355,8 @@ command
       JIEK_ONLY_MINIFY: String(onlyMin),
       JIEK_MINIFY_TYPE: minifyType,
       JIEK_TSCONFIG: tsconfig,
-      JIEK_DTSCONFIG: dtsconfig
+      JIEK_DTSCONFIG: dtsconfig,
+      ...process.env
     }
 
     const multiBars = new MultiBar({
@@ -285,12 +373,15 @@ 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())
+      const resolveByJiekTemp = (...paths: string[]) => path.resolve(wdNodeModules, '.jiek', ...paths)
+      const jiekTemp = resolveByJiekTemp()
+      if (!existsSync(jiekTemp)) {
+        try {
+          mkdirSync(jiekTemp)
+        } catch {}
       }
 
       const rollupBinaryPath = require.resolve('rollup')
@@ -298,18 +389,35 @@ command
       let i = 0
       await Promise.all(
         Object.entries(value).map(async ([dir, manifest]) => {
-          if (!manifest.name) {
+          if (manifest.name == null) {
             throw new Error('package.json must have a name field')
           }
+          if (analyzer) {
+            const anaDir = path.resolve(dir, analyzer.dir)
+            if (!existsSync(anaDir)) {
+              mkdirSync(anaDir, { recursive: true })
+            }
+            const gitIgnorePath = path.resolve(anaDir, '.gitignore')
+            if (!existsSync(gitIgnorePath)) {
+              writeFileSync(gitIgnorePath, '*\n!.gitignore\n')
+            }
+            const npmIgnorePath = path.resolve(anaDir, '.npmignore')
+            if (!existsSync(npmIgnorePath)) {
+              writeFileSync(npmIgnorePath, '*\n')
+            }
+            if (!statSync(anaDir).isDirectory()) {
+              throw new Error(`The directory '${anaDir}' is not a directory.`)
+            }
+          }
 
           // TODO support auto build child packages in workspaces
           const escapeManifestName = manifest.name.replace(/^@/g, '').replace(/\//g, '+')
-          const configFile = jiekTempDir(
+          const configFile = resolveByJiekTemp(
             `${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) {
+          if (tsRegisterName != null) {
             command.unshift(`node -r ${tsRegisterName}`)
           }
           if (watch) {
@@ -329,92 +437,152 @@ command
           const times: Record<string, number> = {}
           const locks: Record<string, boolean> = {}
           let inputMaxLen = 10
-          child.on('message', (e: RollupProgressEvent) => {
-            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
               }
-              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}`
-                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}`]
-              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}`
+                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...'
+                  })
                 }
-              )
-            }
-            if (e.type === 'watchChange') {
-              const {
-                path,
-                input
-              } = e.data
-              const key = `${input}:${path}`
-              const bar = bars[key]
-              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) => {
@@ -431,6 +599,7 @@ command
         })
       )
     }
+
     const commandFilters = IS_WORKSPACE ? commandFiltersOrEntries : undefined
     const filters = [
       ...new Set([
@@ -455,5 +624,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)
     }
   })