In this article, we will review how Tsup loads your tsup.config.ts file.

We will look at:

What is Joycon?
Joycon usage in Tsup.
How tsup.config.ts is loaded?

What is joycon?

JoyCon is zero-dependency but feature-complete.

Install

npm install joycon

Usage

const JoyCon = require('joycon')

const joycon = new JoyCon()

joycon.load(['package-lock.json', 'yarn.lock'])
.then(result => {
  // result is {} when files do not exist
  // otherwise { path, data }
})

By default, non-js files are parsed as JSON, if you want something different you can add a loader:

const joycon = new JoyCon()

joycon.addLoader({
  test: /\.toml$/,
  load(filepath) {
    return require('toml').parse(filepath)
  }
})

joycon.load(['cargo.toml'])

This above information is picked from Joycon documentation.

Joycon usage in Tsup

At line 3, in load.ts in Tsup source code, you will find the below import:

import JoyCon from 'joycon'

At line 33, a loader is added as shown below:

const jsonLoader = {
  test: /\.json$/,
  load(filepath: string) {
    return loadJson(filepath)
  },
}

joycon.addLoader(jsonLoader)

At line 86, in a function named load.ts, you will find the below code:

const { data } = await joycon.load(['package.json'], cwd, path.dirname(cwd))

What this code above does is, it loads the package.json in a given directory and it returns the data.

At line 84, cache is cleared as shown below

export async function loadPkg(cwd: string, clearCache: boolean = false) {
  if (clearCache) {
    joycon.clearCache()
  }

How tsup.config.ts is loaded?

At line 35, you will find this below code:

export async function loadTsupConfig(
  cwd: string,
  configFile?: string,
): Promise<{ path?: string; data?: ReturnType<typeof defineConfig> }> {
  const configJoycon = new JoyCon()
  const configPath = await configJoycon.resolve({
    files: configFile
      ? [configFile]
      : [
          'tsup.config.ts',
          'tsup.config.cts',
          'tsup.config.mts',
          'tsup.config.js',
          'tsup.config.cjs',
          'tsup.config.mjs',
          'tsup.config.json',
          'package.json',
        ],
    cwd,

Joycon is used to resolve the tsup.config.ts. That’s how your tsup configuration is loaded.

Based on the config path, if it ends with .json, loadJson function is called as shown below:

if (configPath) {
  if (configPath.endsWith('.json')) {
    let data = await loadJson(configPath)
    if (configPath.endsWith('package.json')) {
      data = data.tsup
    }
    if (data) {
      return { path: configPath, data }
    }
    return {}
}

bundle-require is called as shown below:

const config = await bundleRequire({
  filepath: configPath,
})

About me

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Build Shadcn CLI from scratch.

Here's how Tsup loads your tsup.config.ts file.