DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on • Edited on • Originally published at thinkthroo.com

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

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

We will look at:

  1. What is Joycon?

  2. Joycon usage in Tsup.

  3. How tsup.config.ts is loaded?

What is joycon?

JoyCon is zero-dependency but feature-complete.

Install

npm install joycon
Enter fullscreen mode Exit fullscreen mode

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 }
})
Enter fullscreen mode Exit fullscreen mode

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'])
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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

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

joycon.addLoader(jsonLoader)
Enter fullscreen mode Exit fullscreen mode

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))
Enter fullscreen mode Exit fullscreen mode

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()
  }
Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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 {}
}
Enter fullscreen mode Exit fullscreen mode

bundle-require is called as shown below:

const config = await bundleRequire({
  filepath: configPath,
})
Enter fullscreen mode Exit fullscreen mode

About me

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

Build Shadcn CLI from scratch.

References

  1. https://www.npmjs.com/package/joycon

  2. https://github.com/egoist/tsup/blob/main/src/load.ts#L3

  3. https://github.com/egoist/tsup/blob/main/src/load.ts#L39

Top comments (0)