Configuration for using tsup

Prerequisites

• I have written a descriptive issue title
• I have searched existing issues to ensure the feature has not already been requested

🚀 Feature Proposal

In #485 we talked about possibly using tsup instead of tsc, so here is some workable configuration for doing so for when you will want to implement it. This configuration doesn’t bundle to a single file as I’m unsure if fastify-autoload will actually work with that.

P.S. I also tried WebPack but it self-destructs on fastify-autoload due to bundling. 🤷‍♂️

The code

tsup.config.ts

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/app.ts'],
  bundle: false,
  sourcemap: true,
  dts: true,
  clean: true,
});

package.json scripts

  "scripts": {
    "test": "yarn build:ts && tsc -p test/tsconfig.json && tap --ts test/**/*.test.ts",
    "start": "yarn build:ts --env.NODE_ENV production && fastify start -l info dist/app.js",
    "build:bin": "yarn build:ts --env.NODE_ENV production && pkg .",
    "build:ts": "tsup",
    "watch:ts": "tsup --watch",
    "dev": "npm run build:ts && concurrently -k -p \"[{name}]\" -n \"TypeScript,App\" -c \"yellow.bold,cyan.bold\" \"npm:watch:ts\" \"npm:dev:start\"",
    "dev:start": "fastify start --ignore-watch=.ts$ -w -l info -P dist/app.js",
  },

tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "npm",
			"script": "watch:ts",
			"group": {
				"kind": "build",
				"isDefault": true
			},
			"problemMatcher": [
				{
					"owner": "tsup",
					"source": "tsup",
					"severity": "error",
					"pattern":[
						{
							"regexp": "^✘\\s+\\[ERROR\\]\\s+(.+)$",
							"message": 1
						},
						{
							"regexp": "^\\s*$"
						},
						{
							"regexp": "^\\s+(.+):(\\d+):(\\d+):$",
							"file": 1,
							"line": 2,
							"column": 3
						}
					],
					"background": {
						"beginsPattern": "^CJS Build start$",
						"endsPattern": "^CJS .* Build success|^CJS Build failed"
					}
				},
				{
					"base": "$tsc",
					"background": {
						"beginsPattern": "^DTS Build start$",
						"endsPattern": "^DTS .* Build success|^DTS Build failed"
					}
				},
			],
			"label": "npm: watch:ts",
			"detail": "tsc -w",
			"isBackground": true,
			"presentation": {
				"reveal": "never",
				"group": "watchers"
			}
		},
    ]
}

Notes

• There is a replaceNodeEnv badly documented prop for tsup for setting process.env.NODE_ENV according to minify
• I might release an extension with the problemMatcher for the use of others which we will then be able to use to avoid having it inline by recommending installing it via extensions.json.
• We might want to sort tasks.json a bit for readability.
• Not sure if we want to minify for production builds.
• Do we want process.env.NODE_ENV set to development when in development? It needs to be specified explicitly.
• https://github.com/microsoft/vscode/issues/149912
• https://github.com/microsoft/vscode/issues/149673

Motivation

tsup is faster, and supports additional features, such as define replacement, bundling (Which I’m not sure will work with fastify-autoload), minification, etc.

This should probably be an option, whether it’s the default or tsc depends on experimenting with how well it works.

I can contribute it as a PR, but we do need to decide how to add an option and organize the templates around it first.

Example

No response

[fox1t]

I agree with you 100% about the simple as a possible approach. I am not sure why --enable-source-maps is completely forgotten by the community. What about keeping tsc/ts-node as default and letting users opt-in for tsup by passing an additional flag to the cli? I am also fine if we decide to use only tsc/ts-node, but we should be aware that we are limiting the possibilities of the cli. Bigger projects always use tsc alternatives in development to avoid that “JAVA-like” compile times. 😃

[climba03003]

Actually, Node.js has built-in support for source maps since v12: https://nodejs.org/dist/latest-v12.x/docs/api/cli.html#cli_enable_source_maps It is experimental, but for dev env, it is excellent to use it. I don’t think that using tsup raises the complexity bar too much. What I usually use is visible here: https://github.com/fox1t/typescript-microservice-starter/blob/master/package.json#L14 (@cspotcode/source-map-support/register isn’t needed anymore).

My intention here is keep thing as simple as possible. More tools mean the user need to learn and know it before actually start coding.

In my observation in the Discord server. Most of the people use fastify-cli is beginner in fastify. They should focus more on how to use fastify instead of learning the tools first.

Thanks for raising --enable-source-maps flag. I do not know much about node core flag. And I think most of the node user do not know much about it too. Another question would be, how can we enable this flag when using fastify-cli? export NODE_OPTIONS='--enable-source-maps' && npm run build:ts && concurrently -k -p "[{name}]" -n "TypeScript,App" -c "yellow.bold,cyan.bold" "npm:watch:ts" "npm:dev:start" Would it be too long and not good for beginner?