jiek 2.2.0 → 2.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jiek",
   "type": "module",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "A lightweight toolkit for compiling and managing libraries based on `package.json` metadata and suitable for `Monorepo`.",
   "author": "YiJie <yijie4188@gmail.com>",
   "homepage": "https://github.com/NWYLZW/jiek/tree/master/packages/jiek#readme",
@@ -48,7 +48,11 @@
     }
   },
   "imports": {
-    "#~/*": "./src/*"
+    "#~/*": [
+      "./src/*",
+      "./src/*/index.ts",
+      "./src/*/index.tsx"
+    ]
   },
   "bin": {
     "jiek": "bin/jiek.js",
@@ -65,7 +69,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-swc3": "^0.12.1",
     "typescript": "^4.0.0||^5.0.0",
-    "vite-bundle-analyzer": "^0.15.2"
+    "vite-bundle-analyzer": "0.16.0-beta.1"
   },
   "dependencies": {
     "@inquirer/prompts": "^7.1.0",

package/src/commands/build/analyzer.ts

@@ -0,0 +1,122 @@
+import type { Command } from 'commander'
+
+import { CLIENT_CUSTOM_RENDER_SCRIPT } from '#~/commands/build/client/index.ts'
+import { parseBoolean } from '#~/commands/utils/optionParser.ts'
+import type { Module } from '#~/rollup/bundle-analyzer.ts'
+import type { createServer } from '#~/server.ts'
+import { checkDependency } from '#~/utils/checkDependency.ts'
+import { existsSync, mkdirSync, statSync, writeFileSync } from 'node:fs'
+import path from 'node:path'
+
+export interface AnalyzerBuildOptions {
+  ana?: boolean
+  /**
+   * @default '.jk-analyses'
+   */
+  'ana.dir': string
+  /**
+   * @default 'server'
+   */
+  'ana.mode': string
+  'ana.open'?: boolean
+  /**
+   * @default 'parsed'
+   */
+  'ana.size': string
+}
+
+export const registerAnalyzerCommandOptions = (command: 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'
+    )
+
+export const useAnalyzer = async (options: AnalyzerBuildOptions, server?: ReturnType<typeof createServer>) => {
+  const modules: Module[] = []
+  let bundleAnalyzerModule: typeof import('vite-bundle-analyzer') | 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"')
+  }
+
+  if (analyzer) {
+    await checkDependency('vite-bundle-analyzer')
+    bundleAnalyzerModule = await import('vite-bundle-analyzer')
+  }
+
+  const refreshAnalyzer = async (cwd: string, applyModules: typeof modules) => {
+    if (!(analyzer && server && bundleAnalyzerModule)) return
+
+    if (analyzer.mode === 'json') {
+      const anaDir = path.resolve(cwd, 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.`)
+      }
+    }
+
+    const { renderView, injectHTMLTag } = bundleAnalyzerModule
+    applyModules.forEach(m => {
+      const index = modules.findIndex(({ filename }) => filename === m.filename)
+      if (index === -1) {
+        modules.push(m)
+      } else {
+        modules[index] = m
+      }
+    })
+    let html = await renderView(modules, {
+      title: `Jiek Analyzer`,
+      mode: analyzer.size as 'stat' | 'parsed' | 'gzip'
+    })
+    html = injectHTMLTag({
+      html,
+      injectTo: 'body',
+      descriptors: [
+        { kind: 'script', text: CLIENT_CUSTOM_RENDER_SCRIPT }
+      ]
+    })
+    void server.renderTo('/ana', html)
+  }
+
+  return {
+    modules,
+    refreshAnalyzer,
+    ANALYZER_ENV: {
+      JIEK_ANALYZER: analyzer ? JSON.stringify(analyzer) : undefined
+    }
+  }
+}

package/src/commands/build/client/analyzer.tsx

@@ -0,0 +1,121 @@
+import type { Module } from '#~/rollup/bundle-analyzer.ts'
+
+interface Node {
+  id: string
+  filename: string
+  parent?: Node
+}
+
+declare global {
+  // @ts-ignore
+  // eslint-disable-next-line no-var,vars-on-top
+  var React: typeof import('react')
+  // eslint-disable-next-line no-var,vars-on-top
+  var analyzeModule: Module[]
+  interface WindowEventMap {
+    'graph:click': CustomEvent<
+      | undefined
+      | { node: Node }
+    >
+    'send:filter': CustomEvent<{
+      analyzeModule: Module[]
+    }>
+  }
+}
+
+export function Main() {
+  const { useState, useMemo, useEffect, useCallback } = React
+  const [path, setPath] = useState(() => location.pathname.replace(/^\/ana\/?/, ''))
+  const [pkgName, entry] = useMemo(() => {
+    const pkgName = /^(@[^/]+\/[^/]+|[^/]+)\/?/.exec(path)?.[1]
+    return [
+      pkgName,
+      (pkgName != null) ? path.replace(`${pkgName}/`, '') : undefined
+    ]
+  }, [path])
+  const push = useCallback((newPath: string) => {
+    setPath(newPath)
+    document.title = `${document.title.replace(/ - \/.*/, '')} - \/${newPath}`
+    history.pushState(null, '', `/ana/${newPath}`)
+  }, [])
+  const filterModules = useCallback((startWith: string) => {
+    const modules = analyzeModule.filter(m => m.filename.startsWith(startWith))
+    dispatchEvent(new CustomEvent('send:filter', { detail: { analyzeModule: modules } }))
+  }, [])
+  useEffect(() => {
+    if (path !== '') {
+      document.title = `${document.title.replace(/ - \/.*/, '')} - \/${path}`
+    } else {
+      document.title = document.title.replace(/ - \/.*/, '')
+    }
+    filterModules(path)
+  }, [path, filterModules])
+  useEffect(() => {
+    const offGraphClick = listen('graph:click', ({ detail }) => {
+      if (!detail) return
+
+      let root = detail.node
+      while (root.parent) {
+        root = root.parent
+      }
+      if (root.filename === path) return
+      push(root.filename)
+    })
+    return () => {
+      offGraphClick()
+    }
+  }, [push])
+  function listen<T extends keyof WindowEventMap>(type: T, listener: (this: Window, ev: WindowEventMap[T]) => any) {
+    window.addEventListener(type, listener)
+    return () => {
+      window.removeEventListener(type, listener)
+    }
+  }
+  return (
+    <div
+      style={{
+        padding: '12px 55px'
+      }}
+    >
+      /
+      <select
+        style={{
+          appearance: 'none',
+          border: 'none',
+          background: 'none'
+        }}
+        value={pkgName}
+        onChange={e => push(e.target.value)}
+      >
+        <option value=''>All</option>
+        {analyzeModule
+          .map(m => /^(@[^/]+\/[^/]+|[^/]+)\/?/.exec(m.filename)?.[1])
+          .filter((v, i, a) => a.indexOf(v) === i)
+          .map(v => (
+            <option key={v} value={v}>{v}</option>
+          ))}
+      </select>
+      {pkgName != null && <>
+        /
+        <select
+          style={{
+            appearance: 'none',
+            border: 'none',
+            background: 'none'
+          }}
+          value={entry}
+          onChange={e => push(`${pkgName}/${e.target.value}`)}
+        >
+          <option value=''>All</option>
+          {analyzeModule
+            .filter(m => m.filename.startsWith(`${pkgName}/`))
+            .map(m => m.filename.replace(`${pkgName}/`, ''))
+            .filter((v, i, a) => a.indexOf(v) === i)
+            .map(v => (
+              <option key={v} value={v}>{v}</option>
+            ))}
+        </select>
+      </>}
+    </div>
+  )
+}

package/src/commands/build/client/index.ts

@@ -0,0 +1,28 @@
+import { Main } from './analyzer'
+
+declare global {
+  // eslint-disable-next-line no-var,vars-on-top
+  var CUSTOM_SIDE_BAR: boolean
+  // eslint-disable-next-line no-var,vars-on-top
+  var __REPLACE_INJECT__: string
+}
+
+function render() {
+  CUSTOM_SIDE_BAR = true
+  window.addEventListener('client:ready', () =>
+    setTimeout(() => {
+      window.dispatchEvent(
+        new CustomEvent('send:ui', {
+          detail: { type: 'Main', Component: __REPLACE_INJECT__ }
+        })
+      )
+    }, 0))
+}
+
+export const CLIENT_CUSTOM_RENDER_SCRIPT = [
+  Main.toString(),
+  render
+    .toString()
+    .replace('__REPLACE_INJECT__', Main.name),
+  `(${render.name})()`
+].join('\n')

package/src/commands/build.ts

@@ -1,24 +1,24 @@
-import { existsSync, mkdirSync, statSync, writeFileSync } from 'node:fs'
+import { existsSync, mkdirSync, 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 type { AnalyzerBuildOptions } from '#~/commands/build/analyzer.ts'
+import { registerAnalyzerCommandOptions, useAnalyzer } from '#~/commands/build/analyzer.ts'
 import { entriesDescription, filterDescription, outdirDescription } from '#~/commands/descriptions.ts'
 import { IS_WORKSPACE } from '#~/commands/meta.ts'
+import { parseBoolean } from '#~/commands/utils/optionParser.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 { checkDependency } from '#~/utils/checkDependency.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'
 
@@ -49,21 +49,7 @@ If you want to through the options to the \`rollup\` command, you can pass the o
 ${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
+interface BuildOptions extends AnalyzerBuildOptions {
   /**
    * Auto-detect the builder from the installed dependencies.
    * If the builder is not installed, it will prompt the user to install it.
@@ -120,22 +106,6 @@ interface BuildOptions {
   dtsconfig?: string
 }
 
-async function checkDependency(dependency: string) {
-  try {
-    require.resolve(dependency)
-  } catch {
-    console.error(`The package '${dependency}' is not installed, please install it first.`)
-    const { notWorkspace } = getWD()
-    const command = `pnpm install -${notWorkspace ? '' : 'w'}D ${dependency}`
-    if (await confirm({ message: 'Do you want to install it now?' })) {
-      await execaCommand(command)
-    } else {
-      console.warn(`You can run the command '${command}' to install it manually.`)
-      process.exit(1)
-    }
-  }
-}
-
 let DEFAULT_BUILDER_TYPE: typeof BUILDER_TYPES[number]
 Object.entries(BUILDER_TYPE_PACKAGE_NAME_MAP).forEach(([type, packageName]) => {
   try {
@@ -147,11 +117,6 @@ if (!DEFAULT_BUILDER_TYPE!) {
   DEFAULT_BUILDER_TYPE = 'esbuild'
 }
 
-function parseBoolean(v?: unknown) {
-  if (v === undefined) return true
-  return Boolean(v)
-}
-
 const buildFilterDescription = `
 ${filterDescription}
 If you pass the --filter option, it will merge into the filters of the command.
@@ -217,16 +182,7 @@ 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 = registerAnalyzerCommandOptions(command)
 
 command = command
   .option('-s, --silent', "Don't display logs.", parseBoolean)
@@ -282,48 +238,17 @@ 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']
-      }
+    const shouldCreateServer = [
+      options.ana === true && options['ana.mode'] === 'server'
+    ].some(Boolean)
+    const server = shouldCreateServer
+      ? createServer(options.port, 'localhost')
       : 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 {
+      ANALYZER_ENV,
+      refreshAnalyzer
+    } = await useAnalyzer(options, server)
 
     const { build } = loadConfig()
     silent = silent ?? build?.silent ?? false
@@ -343,7 +268,7 @@ command
       entries = undefined
     }
     const env = {
-      JIEK_ANALYZER: analyzer && JSON.stringify(analyzer),
+      ...ANALYZER_ENV,
       JIEK_BUILDER: type,
       JIEK_OUT_DIR: outdir,
       JIEK_CLEAN: String(!noClean),
@@ -388,27 +313,10 @@ command
         .replace(/dist\/rollup.js$/, 'dist/bin/rollup')
       let i = 0
       await Promise.all(
-        Object.entries(value).map(async ([dir, manifest]) => {
+        Object.entries(value).map(async ([pkgCWD, manifest]) => {
           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, '+')
@@ -426,7 +334,7 @@ command
           command.push(...passThroughOptions)
           const child = execaCommand(command.join(' '), {
             ipc: true,
-            cwd: dir,
+            cwd: pkgCWD,
             env: {
               ...env,
               JIEK_NAME: manifest.name,
@@ -540,41 +448,18 @@ command
                 const {
                   data: {
                     type,
-                    path,
                     modules: pkgModules
                   }
                 } = e
-                pkgModules.forEach(m => {
-                  const newM = {
+                void refreshAnalyzer(
+                  pkgCWD,
+                  pkgModules.map(m => ({
                     ...m,
+                    type,
                     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
               }
               case 'debug': {
@@ -624,20 +509,7 @@ 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)
+      !silent && console.log('Build complete')
     }
   })

package/src/commands/utils/optionParser.ts

@@ -0,0 +1,4 @@
+export function parseBoolean(v?: unknown) {
+  if (v === undefined) return true
+  return Boolean(v)
+}

package/src/rollup/index.ts

@@ -199,9 +199,12 @@ const withMinify = (
   onlyOncePlugins: OutputPluginOption[] = []
 ): OutputOptions[] => {
   const minify = build?.output?.minify ?? MINIFY_DEFAULT_VALUE
+
   output.plugins = output.plugins ?? []
+  const notOnlyOncePlugins = [...output.plugins]
+  output.plugins.push(...onlyOncePlugins)
+
   if (minify === false) {
-    output.plugins.push(...onlyOncePlugins)
     return [output]
   }
 
@@ -213,11 +216,10 @@ const withMinify = (
     ? import('rollup-plugin-swc3').then(({ minify }) => minify(noTypeResolvedMinifyOptions as any))
     // eslint-disable-next-line ts/no-unsafe-argument
     : import('@rollup/plugin-terser').then(({ default: minify }) => minify(noTypeResolvedMinifyOptions as any))
-  const notOnlyOncePlugins = output.plugins
   return minify === 'only-minify'
     ? [{
       ...output,
-      // TODO replace suffix when pubish to npm and the `build.output.minify` is 'only-minify'
+      // TODO replace suffix when publish to npm and the `build.output.minify` is 'only-minify'
       // TODO resolve dts output file name
       entryFileNames: chunkInfo =>
         typeof output.entryFileNames === 'function'
@@ -226,6 +228,7 @@ const withMinify = (
             throw new Error('entryFileNames must be a function')
           })(),
       plugins: [
+        ...output.plugins,
         ...notOnlyOncePlugins,
         minifyPlugin
       ]
@@ -356,7 +359,23 @@ const generateConfigs = (context: ConfigGenerateContext, options: TemplateOption
   const rollupOptions: RollupOptions[] = []
 
   const commonPlugins: Plugin[] = [
-    nodeResolve({ exportConditions })
+    nodeResolve({
+      exportConditions,
+      extensions: [
+        '.js',
+        '.cjs',
+        '.mjs',
+        '.jsx',
+        '.cjsx',
+        '.mjsx',
+        '.ts',
+        '.cts',
+        '.mts',
+        '.tsx',
+        '.ctsx',
+        '.mtsx'
+      ]
+    })
   ]
   if (jsOutput && !WITHOUT_JS) {
     const sourcemap = typeof options?.output?.sourcemap === 'object'

package/src/server.ts

@@ -5,7 +5,15 @@ export const createServer = (port: number, host: string) => {
   app.listen(port, host)
   const streams = new Map<string, string>()
   app.use(async (ctx) => {
-    const stream = streams.get(ctx.path)
+    let stream = streams.get(ctx.path)
+    if (stream == null) {
+      const maybeKey = streams
+        .keys()
+        .find(p => ctx.path.startsWith(p))
+      stream = maybeKey != null
+        ? streams.get(maybeKey)
+        : undefined
+    }
     if (stream != null) {
       ctx.body = stream
     }

package/src/utils/checkDependency.ts

@@ -0,0 +1,22 @@
+import process from 'node:process'
+
+import { confirm } from '@inquirer/prompts'
+import { execaCommand } from 'execa'
+
+import { getWD } from '#~/utils/getWD.ts'
+
+export async function checkDependency(dependency: string) {
+  try {
+    require.resolve(dependency)
+  } catch {
+    console.error(`The package '${dependency}' is not installed, please install it first.`)
+    const { notWorkspace } = getWD()
+    const command = `pnpm install -${notWorkspace ? '' : 'w'}D ${dependency}`
+    if (await confirm({ message: 'Do you want to install it now?' })) {
+      await execaCommand(command)
+    } else {
+      console.warn(`You can run the command '${command}' to install it manually.`)
+      process.exit(1)
+    }
+  }
+}