Bundler updating

[nelsonni]

A bundler is a tool that puts together all your JavaScript code (and any other formats that can be transpiled into JavaScript code, e.g. TypeScript) and its dependencies and throws a new JavaScript output file with everything merged, ready for the web, commonly known as the bundle file.

As of v4.4.1, we utilize Webpack as our bundler. But there are other options available:

• Browserify, written in JavaScript and introduced in 2011
• Webpack, written in JavaScript and introduced in 2014
• Parcel, written in JavaScript and introduced in 2017
• Rollup, written in JavaScript and introduced in 2018
• Vite, written in TypeScript and introduced in 2020
• Turbopack, written in Rust and introduced in 2022

We focus on Vite as a replacement for Webpack. Per the Vite Getting Started page:

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite is opinionated and comes with sensible defaults out of the box. Read about what's possible in the Features Guide. Support for frameworks or integration with other tools is possible through Plugins. The Config Section explains how to adapt Vite to your project if needed.

Vite is also highly extensible via its Plugin API and JavaScript API with full typing support.

You can learn more about the rationale behind the project in the Why Vite section.

Vite offers a variety of templates for scaffolding various types of Vue, React, Preact, Lit, Svelte, Solid, and Qwik projects (in both JavaScript and TypeScript). And Vite 4.0 uses Rollup, replacing Babel which was the built-in compiler in Vite 3.0 and earlier¹.

But for Synectic, a more direct tool to use is called electron-vite, which is:

electron-vite is a build tool that aims to provide a faster and leaner development experience for Electron. It consists of five major parts:

• A build command that bundles your code with Vite, and able to handle Electron's unique environment including Node.js and browser environments.

• Centrally configure the main process, renderers and preload scripts Vite configuration, and preconfigure for Electron's unique environment.

• Use fast Hot Module Replacement (HMR) for renderers, and the main process and preload scripts support hot reloading, extremely improving development efficiency.

• Optimize asset handling for Electron main process.

• Use V8 bytecode to protect source code.

electron-vite is fast, simple and powerful, designed to work out-of-the-box.

¹ https://www.infoq.com/news/2022/12/vite-4-faster-swc/

[nelsonni]

If the electron-vite tool begins throwing Cannot write './src/preload/index.d.ts' because it would overwrite input file., then the solution is to add "noEmit": true to compilerOptions in tsconfig.node.json and tsconfig.web.json. This answer was found here: vitejs/vite#13747 (comment)

[nelsonni]

electron-vite includes pre-populated config files for Electron Builder, which should be removed and migrated into config files for conveyor as part of #1277.

[nelsonni]

There are two slightly different Electron-Vite sites:

• electron-vite
• Electron⚡️Vite
• Electron Forge - Vite Plugin
• Use ES modules in Electron

[nelsonni]

An interesting anecdote from the migration is that as of 1e6bbb5, we are seeing the following error message:

The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed. ts(7056)

Related to reduxjs/redux-toolkit#3591 and Typescript: "The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.", this error occurs when calling createAsyncThunk.withTypes<>(). But it only occurs when "declaration": true is set in the tsconfig.json files.

The electron-vite project provides templates that include the the following compilerOptions:

synectic/tsconfig.web.json

Lines 13 to 22 in 1e6bbb5

	"compilerOptions": {
	"composite": true,
	"jsx": "react-jsx",
	"noEmit": true,
	"baseUrl": ".",
	"paths": {
	"@renderer/*": ["src/renderer/src/*"]
	}
	}
	}

It is not immediately obvious how this relates to "declaration": true, until looking at the TypeScript tsconfig#composite documentation:

The composite option enforces certain constraints which make it possible for build tools (including TypeScript itself, under --build mode) to quickly determine if a project has been built yet.

When this setting is on:

• The rootDir setting, if not explicitly set, defaults to the directory containing the tsconfig.json file.

• All implementation files must be matched by an include pattern or listed in the files array. If this constraint is violated, tsc will inform you which files weren’t specified.

• declaration defaults to true

This last point is the cause of those "...inferred type of this node exceeds the maximum length the compiler will serialize..." errors, since "composite": true requires "declaration": true. We can fix this issue by removing the following line, in which case "declaration": false is the default:

synectic/tsconfig.web.json

Line 14 in 1e6bbb5

"composite": true,

[nelsonni]

Since sindresorhus/find-up is pure ESM only (as of v6.0.0), and ESM support in Electron is not going to be released until Electron 28, we must externalize this dependency in order to prevent it being bundled into a CJS module chunk in Vite. The solution for doing so was found alex8088/electron-vite#35:

synectic/electron.vite.config.ts

Lines 12 to 24 in aef4223

	preload: {
	plugins: [externalizeDepsPlugin({ exclude: ['find-up'] })],
	build: {
	outDir: 'out/preload',
	rollupOptions: {
	output: {
	manualChunks(id) {
	return id.includes('find-up') ? 'find-up' : undefined;
	}
	}
	}
	}
	},