#2936 document bun support

articles/configuration/development-mode/index.asciidoc

@@ -27,11 +27,11 @@ When running with the frontend development server, JavaScript and CSS and other
 [role="since:com.vaadin:vaadin@V24"]
 == Faster Starts by Pre-Compiling
 
-The build and start-up time can be decreased significantly if no frontend installation or compilation is made. This means not installing the tools Node.js, npm/pnpm. It also means not downloading npm packages, or running the Vite development server.
+The build and start-up time can be decreased significantly if no frontend installation or compilation is made. This means not installing the tools Node.js, npm/pnpm/bun. It also means not downloading npm packages, or running the Vite development server.
 
 If your project uses only the standard Vaadin Flow components or third-party Vaadin add-ons (e.g., from Vaadin Directory) without client code, Vaadin skips frontend compilation and uses the default themes and frontend files shipped with the Vaadin platform.
 
-Adding any custom JavaScript/TypeScript or add-ons with frontend customizations to a project can trigger the frontend re-compilation using Vite during the next start-up of the application. Any new or missing frontend packages are downloaded using npm/pnpm before building. Vaadin automatically does this, and spots the frontend customizations.
+Adding any custom JavaScript/TypeScript or add-ons with frontend customizations to a project can trigger the frontend re-compilation using Vite during the next start-up of the application. Any new or missing frontend packages are downloaded using npm/pnpm/bun before building. Vaadin automatically does this, and spots the frontend customizations.
 
 Making a new frontend bundle takes time. However, the generated frontend files are compressed to the `src/main/bundles/prod.bundle` file inside the project’s root. This file can be added to the Version Control System, which allows other developers to fetch the application bundle and thereby run it.
 
@@ -41,7 +41,7 @@ The application bundle is the same as the default bundle, but it's made for a sp
 
 Vaadin generates an application bundle in the following situations:
 
-- An npm/pnpm package is added with `@NpmPackage`, or directly into [filename]`package.json`;
+- An npm package is added with `@NpmPackage`, or directly into [filename]`package.json`;
 - CSS or JavaScript is added with `@CssImport`, `@JsModule`, or `@JavaScript`;
 - Vaadin add-on with frontend customizations is added;
 - Custom theme packaged as a `JAR` dependency is added, if it defines any assets to be added to the project; or
@@ -65,7 +65,7 @@ When working with a frontend heavy project, there can be a frontend development
 
 Vaadin uses Vite to quicken frontend development by enabling the client-side live reload. By doing this, JavaScript/TypeScript changes are updated immediately in the browser. Vite only re-compiles what has changed, making hot reloads fast.
 
-Vite installation is made through npm/pnpm. Running Vite requires Node.js. See <<{articles}/configuration/development-mode/node-js#,Node.js installation>> and <<{articles}/configuration/development-mode/npm-pnpm#,Configuring frontend package manager>> for more information.
+Vite installation is made through npm/pnpm/bun. Running Vite requires Node.js. See <<{articles}/configuration/development-mode/node-js#,Node.js installation>> and <<{articles}/configuration/development-mode/npm-pnpm-bun#,Configuring frontend package manager>> for more information.
 
 This mode is recommended if components or views use <<{articles}/create-ui/templates#,Templates>> and are edited often. This mode is used when the configuration parameter `frontend.hotdeploy` is set to `true` (see <<{articles}/configuration/properties#,Configuration Properties>> for more information).
 

articles/configuration/development-mode/npm-pnpm.asciidoc → articles/configuration/development-mode/npm-pnpm-bun.asciidoc

@@ -1,13 +1,13 @@
 ---
-title: npm/pnpm
+title: npm/pnpm/bun
 description: Configuring the frontend package manager.
 order: 20
 ---
 
 
-= Configuring npm/pnpm
+= Configuring npm/pnpm/bun
 
-https://docs.npmjs.com/cli/v8/commands/npm[npm] is the recommended and default package manager for Vaadin projects. This page explains how to configure this package manager.
+https://docs.npmjs.com/cli/v8/commands/npm[npm] is the recommended and default package manager for Vaadin projects. This page explains how to configure this package manager and also how to change to an alternative package manager (pnpm or bun).
 
 
 == Install a Custom Package
@@ -25,7 +25,7 @@ Vaadin expects transitive platform dependencies to be available directly under `
 Vaadin uses the `npm` https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides[overrides feature] (since `npm` 8.3.0) to lock the transitive platform dependencies versions.
 
 
-== Switch between npm and pnpm
+== Switch between npm, pnpm and bun
 
 `npm` is used as the default frontend package manager.
 
@@ -37,12 +37,20 @@ The [filename]`package-lock.json` file that's used by `npm` is incompatible with
 `pnpm` uses the [filename]`pnpm-lock.yaml` file instead of [filename]`package-lock.json`.
 This means that any custom dependency configurations should go to [filename]`pnpm-lock.yaml`.
 
-=== Switch between npm and pnpm in a Spring Boot Project
-For a Spring Boot-based project, you can add `vaadin.pnpm.enable = true` to the [filename]`application.properties` file.
+Using https://bun.sh[_bun_] is also supported by Vaadin. With bun, packages are cached locally by default and linked (instead of downloaded) for every project. This results in reduced disk space usage and faster recurring builds compared to npm. To switch to `bun`, you can set the `vaadin.bun.enable` system property to `true`.
 
-=== Switch between npm and pnpm in a Plain Java or JavaEE Project
-For a plain Java or a JavaEE-based project, you can set the `pnpmEnable` configuration property inside the `vaadin-maven-plugin`.
+When using bun, a https://bun.sh/docs/install/lockfile[_binary lockfile_] named [filename]`bun.lockb` will be used when `bun install` is run. This lockfile will not be included in or used from Vaadin dev bundle.
 
+[NOTE]
+Vaadin does not support automatic installation of bun - instead please follow the https://bun.sh/package-manager[_installation instructions_].
+
+=== Switch between npm, pnpm and bun in a Spring Boot Project
+For a Spring Boot-based project, you can add `vaadin.pnpm.enable = true` or `vaadin.bun.enable = true` to the [filename]`application.properties` file.
+
+=== Switch between npm, pnpm and bun in a Plain Java or JavaEE Project
+For a plain Java or a JavaEE-based project, you can set the `pnpmEnable` or `bunEnable` configuration property inside the `vaadin-maven-plugin`.
+
+.Enable pnpm (plain Java / JavaEE)
 [source,xml]
 ----
 <plugin>
@@ -62,8 +70,29 @@ For a plain Java or a JavaEE-based project, you can set the `pnpmEnable` configu
 </plugin>
 ----
 
+.Enable bun (plain Java / JavaEE)
+[source,xml]
+----
+<plugin>
+    <groupId>com.vaadin</groupId>
+    <artifactId>vaadin-maven-plugin</artifactId>
+    <version>${project.version}</version>
+    <executions>
+        <execution>
+            <goals>
+                <goal>prepare-frontend</goal>
+            </goals>
+        </execution>
+    </executions>
+    <configuration>
+        <bunEnable>true</bunEnable>
+    </configuration>
+</plugin>
+----
+
 Alternatively, you can use the Servlet 3.0 `@WebServlet` annotation:
 
+.Enable pnpm (via annotation)
 [source,java]
 ----
 @WebServlet(urlPatterns = "/*", name = "myservlet", asyncSupported = true, loadOnStartup = 1,
@@ -72,8 +101,18 @@ public class CustomServlet extends VaadinServlet {
 }
 ----
 
+.Enable bun (via annotation)
+[source,java]
+----
+@WebServlet(urlPatterns = "/*", name = "myservlet", asyncSupported = true, loadOnStartup = 1,
+  initParams = { @WebInitParam(name = "bun.enable", value = "true") })
+public class CustomServlet extends VaadinServlet {
+}
+----
+
 or use the traditional [filename]`web.xml` file:
 
+.Enable pnpm (via web.xml)
 [source,xml]
 ----
 <?xml version="1.0" encoding="UTF-8"?>
@@ -104,6 +143,37 @@ or use the traditional [filename]`web.xml` file:
 </web-app>
 ----
 
+.Enable bun (via web.xml)
+[source,xml]
+----
+<?xml version="1.0" encoding="UTF-8"?>
+<web-app
+  id="WebApp_ID" version="3.0"
+  xmlns="http://java.sun.com/xml/ns/j2ee"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
+      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
+
+  <servlet>
+    <servlet-name>myservlet</servlet-name>
+    <servlet-class>
+        com.vaadin.flow.server.VaadinServlet
+    </servlet-class>
+    <load-on-startup>1</load-on-startup>
+
+    <init-param>
+      <param-name>bun.enable</param-name>
+      <param-value>true</param-value>
+    </init-param>
+  </servlet>
+
+  <servlet-mapping>
+    <servlet-name>myservlet</servlet-name>
+    <url-pattern>/*</url-pattern>
+  </servlet-mapping>
+</web-app>
+----
+
 For more about how to set properties, see <<{articles}/configuration/properties#,Configuration Properties>>.
 
 

articles/configuration/properties.adoc

@@ -159,7 +159,11 @@ The following table contains the properties that are defined in the [classname]`
 
 |`pnpm.enable`
 |`false`
-|Enables `pnpm`, instead of `npm`, to resolve and download frontend dependencies. It's set by default to `false` since `npm` is used typically. Set it to `true` to enable `pnpm`. See <<development-mode/npm-pnpm#, Switching Between npm and pnpm>> for more information.
+|Enables `pnpm`, instead of `npm`, to resolve and download frontend dependencies. It's set by default to `false` since `npm` is used typically. Set it to `true` to enable `pnpm`. See <<development-mode/npm-pnpm-bun#, Switching Between npm, pnpm and bun>> for more information.
+
+|`bun.enable`
+|`false`
+|Enables `bun`, instead of `npm`, to resolve and download frontend dependencies. It's set by default to `false` since `npm` is used typically. Set it to `true` to enable `bun`. See <<development-mode/npm-pnpm-bun#, Switching Between npm, pnpm and bun>> for more information.
 
 |`productionMode`
 |`false`
@@ -209,7 +213,7 @@ The following table contains the properties that are used only by the Vaadin Mav
 
 |`vaadin.ci.build`
 |`ciBuild`
-|Determines whether `npm ci` is run, instead of `npm i`, for production frontend builds. If you use `pnpm`, the install command runs with the `--frozen-lockfile` parameter. The build fails if the [filename]`package.json` and [filename]`package-lock.json` files have mismatching versions.
+|Determines whether `npm ci` is run, instead of `npm i`, for production frontend builds. If you use `pnpm` or `bun`, the install command runs with the `--frozen-lockfile` parameter. The build fails if the [filename]`package.json` and the lockfile have mismatching versions.
 |`false`
 
 |`vaadin.force.production.build`

articles/create-ui/web-components/index.asciidoc

@@ -13,9 +13,9 @@ To use a Web Component in Vaadin, you first have to load the HTML, JavaScript, a
 
 The Web Component's client-side files -- typically JavaScript module files -- are available using https://www.npmjs.com/[npm], which Vaadin supports by default. It automatically installs and uses `npm` packages. It also serves the static files to the browser.
 
-.Using pnpm instead of npm
+.Using pnpm or bun instead of npm
 [TIP]
-Vaadin also supports using https://www.npmjs.com/package/pnpm[pnpm] (known as _performant npm_). See <<{articles}/configuration/development-mode/npm-pnpm#,Configuring npm/pnpm>> for details.
+Vaadin also supports using https://www.npmjs.com/package/pnpm[pnpm] (known as _performant npm_) or https://bun.sh[_bun_]. See <<{articles}/configuration/development-mode/npm-pnpm-bun#,Configuring npm/pnpm/bun>> for details.
 
 
 == Integrating a JS Module into Vaadin

articles/guide/start/gradle.asciidoc

@@ -523,6 +523,9 @@ Use `pnpm` for installing `npm` frontend resources. Defaults to `false`.
 `useGlobalPnpm: Boolean = false`::
 Use the globally installed `pnpm` tool or the default supported `pnpm` version. Defaults to `false`.
 
+`bunEnable: Boolean = false`::
+Use `bun` for installing `npm` frontend resources. Defaults to `false`.
+
 `requireHomeNodeExec: Boolean = false`::
 Force use of Vaadin home node executable. If it's set to `true`, Vaadin home node is checked, and installed if absent. This is then be used instead of the globally or locally installed node.
 

articles/production/production-build.adoc

@@ -18,7 +18,7 @@ Executing this line builds a `JAR` or `WAR` file, with all of the dependencies a
 
 If no add-ons or frontend files are used in the application, the previous command uses a pre-compiled production bundle to eliminate the need to run frontend tools like `npm` and Vite. However, frontend tools are still used to generate an application-specific bundle in the following situations:
 
-- An `npm`/`pnpm` package is added with `@NpmPackage`, or provided directly through [filename]`package.json`;
+- An `npm` package is added with `@NpmPackage`, or provided directly through [filename]`package.json`;
 - CSS or JavaScript is added with `@CssImport`, `@JsModule`, or `@JavaScript`;
 - Vaadin add-on with frontend customizations is added;
 - Custom theme packaged as a `JAR` dependency is included, if it defines any assets to be added to the project;
@@ -53,7 +53,7 @@ By default, Vaadin uses `npm install` to install frontend packages. This can be
 -Dvaadin.ci.build=true
 ----
 
-When set, Vaadin interrupts package installation if it spots any mismatch between package versions in the [filename]`package.json` and [filename]`package-lock.json` files. It'll then recommend re-running `npm install`. This makes production builds in the CI pipelines reproducible, enabling you to identify problems in advance.
+When set, Vaadin interrupts package installation if it spots any mismatch between package versions in the [filename]`package.json` and the lock file. It'll then recommend re-running `npm install`. This makes production builds in the CI pipelines reproducible, enabling you to identify problems in advance.
 
 
 == Enabling Production Builds