Migrate web resources build from Parcel to Vite

.docker/apt/sources.list.d/nodesource.list

@@ -1 +1 @@
-deb https://deb.nodesource.com/node_12.x buster main
+deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_24.x nodistro main

.docker/apt/sources.list.d/yarn.list

@@ -1 +1 @@
-deb https://dl.yarnpkg.com/debian/ stable main
+deb [signed-by=/etc/apt/keyrings/yarn.gpg] https://dl.yarnpkg.com/debian/ stable main

.gitignore

@@ -1,7 +1,6 @@
 .gradle
 bin
 .idea
-.parcel-cache
 .includepath
 .ignorepath
 .settings
@@ -23,10 +22,6 @@ html_docs/
 vendor
 air_gapped/work
 
-# Compiled docs.js
-.cache/
-resources/web/tests/
-
 # Comes from running rspec tests
 .rspec_status
 

Dockerfile

@@ -23,8 +23,7 @@ RUN sed -i 's/deb.debian.org/archive.debian.org/g' /etc/apt/sources.list && \
     sed -i '/buster-updates/d' /etc/apt/sources.list
 
 RUN install_packages.sh apt-transport-https gnupg2 ca-certificates
-COPY .docker/apt/keys/nodesource.gpg /
-RUN apt-key add /nodesource.gpg
+COPY .docker/apt/keys/nodesource.gpg /etc/apt/keyrings/nodesource.gpg
 COPY .docker/apt/sources.list.d/nodesource.list /etc/apt/sources.list.d/
 RUN install_packages.sh \
   build-essential python2 \
@@ -38,9 +37,9 @@ RUN install_packages.sh \
   dumb-init
     # Reap zombie git gc processes
 RUN echo 'en_US.UTF-8 UTF-8' > /etc/locale.gen && locale-gen
-ENV LANG en_US.UTF-8
-ENV LANGUAGE en_US:en
-ENV LC_ALL en_US.UTF-8
+ENV LANG=en_US.UTF-8
+ENV LANGUAGE=en_US:en
+ENV LC_ALL=en_US.UTF-8
 
 
 FROM base AS ruby_deps
@@ -59,8 +58,7 @@ RUN cd /var/lib/gems/2.5.0/gems/asciidoctor-2.0.10 && patch -p1 < /asciidoctor_2
 
 
 FROM base AS node_deps
-COPY .docker/apt/keys/yarn.gpg /
-RUN apt-key add /yarn.gpg
+COPY .docker/apt/keys/yarn.gpg /etc/apt/keyrings/yarn.gpg
 COPY .docker/apt/sources.list.d/yarn.list /etc/apt/sources.list.d/
 RUN install_packages.sh yarn=1.22.19-1
 COPY package.json /

build_docs

@@ -81,18 +81,19 @@ def build_docker_image(name):
 class OpenBrowserState:
     def __init__(self):
         self.need_nginx = True
-        self.need_parcel = False
+        self.need_web_resources = False
         self.need_preview = False
         self.opened = False
 
     def building_single_book(self):
         """
-        If we're building a single book we need to wait for Parcel to finish
-        building the CSS and JS for the first time so we can be sure its server
-        is up and running. If we're building all books we run parcel as part
-        of the build before starting nginx so we don't have to wait for it.
+        If we're building a single book we need to wait for Vite to finish
+        building the CSS and JS for the first time so we can be sure nginx
+        has something to serve. If we're building all books we run vite as
+        part of the build before starting nginx so we don't have to wait for
+        it.
         """
-        self.need_parcel = True
+        self.need_web_resources = True
         self.need_preview = True
 
     def handle_line(self, line):
@@ -102,16 +103,16 @@ class OpenBrowserState:
         if 'start worker processes' in line:
             # Wait for nginx or nothing will be listening
             self.need_nginx = False
-        if '✨  Built in ' in line:
-            # Wait for parcel to finish building for the first time or the
-            # server might not yet be up and nginx will fail to proxy to it.
-            self.need_parcel = False
+        if 'built in ' in line:
+            # Wait for vite to finish building for the first time or there
+            # won't be any css or js for nginx to serve yet.
+            self.need_web_resources = False
             show = False
         if 'preview server is listening on 3000' in line:
             self.need_preview = False
             show = False
         if not self.need_nginx and \
-                not self.need_parcel and \
+                not self.need_web_resources and \
                 not self.need_preview:
             if platform == "darwin" and 'BROWSER' not in environ:
                 # On mac webbrowser seeem to want to default to safari which
@@ -265,7 +266,6 @@ def run_build_docs(args):
             saw_doc = True
         elif arg == '--open':
             docker_args.extend(['--publish', '8000:8000/tcp'])
-            docker_args.extend(['--publish', '8001:8001/tcp'])
             open_browser = OpenBrowserState()
         elif arg == '--out':
             out_dir = realpath(args.next_arg_or_err())
@@ -325,11 +325,11 @@ def run_build_docs(args):
 
     if platform == "darwin" and saw_doc and open_browser:
         # Docker for Mac has trouble watching filesystem events on a mounted
-        # volume, so Parcel's watcher was not triggering rebuilds. Using
+        # volume, so Vite's watcher was not triggering rebuilds. Using
         # polling is more expensive and requires a higher ulimit, but
         # resolves the issue. See:
         # - https://github.com/docker/for-mac/issues/2216
-        # - https://github.com/parcel-bundler/parcel/issues/2539
+        # (vite.config.mjs turns CHOKIDAR_USEPOLLING into polling.)
         docker_args.extend([
             "-e", "CHOKIDAR_USEPOLLING=1",
             "--ulimit", "nofile=90000:90000"
@@ -347,7 +347,7 @@ def run_build_docs(args):
 
     def handle_line(line):
         show = True
-        if 'Server running at http://localhost:1234' in line:
+        if 'watching for file changes' in line:
             show = False
         if open_browser:
             show = show and open_browser.handle_line(line)

build_docs.pl

@@ -995,7 +995,7 @@ sub serve_local_preview {
                 wait;
             }
             if ( $web_resources_pid ) {
-                say 'Terminating preview services...parcel';
+                say 'Terminating preview services...web resources';
                 kill 'TERM', $web_resources_pid;
                 wait;
             }

integtest/spec/all_books_spec.rb

@@ -52,7 +52,6 @@ def self.has_license(name, heading)
       has_license 'code-prettify', 'The Apache 2.0 License'
       has_license "code-prettify's lang-sql", 'The Apache 2.0 License'
       has_license "code-prettify's lang-yaml", 'The Apache 2.0 License'
-      has_license 'details-polyfill', 'The MIT License (MIT)'
       has_license 'js-cookie', 'The MIT License (MIT)'
       has_license 'linkstate', 'The MIT License (MIT)'
       has_license 'loose-envify', 'The MIT License (MIT)'
@@ -70,9 +69,9 @@ def self.has_license(name, heading)
       has_license 'Noto Sans Japanese', 'SIL OPEN FONT LICENSE'
       has_license 'Roboto Mono', 'APACHE LICENSE'
     end
-    file_context 'html/static/Inter-Medium.5d08e0ba.woff2'
-    file_context 'html/static/NotoSansJP-Black.df80409c.woff2'
-    file_context 'html/static/roboto-mono-latin-400-normal.b1632429.woff2'
+    file_context 'html/static/Inter-Medium.woff2'
+    file_context 'html/static/NotoSansJP-Black.woff2'
+    file_context 'html/static/roboto-mono-latin-400-normal.woff2'
     file_context 'html/sitemap.xml' do
       it 'has an entry for the chapter' do
         expect(contents).to include(<<~XML)

integtest/spec/helper/dsl/convert_all.rb

@@ -72,7 +72,7 @@ def convert_all_before_context(relative_conf: false, target_branch: nil,
       file_context 'html/static/docs-v1.js' do
         it 'is minified' do
           expect(contents).to include(<<~JS.strip)
-            return a&&a.__esModule?{d:a.default}:{d:a}
+            (function(){var e=Object.create
           JS
         end
         it "doesn't include a source map" do

integtest/spec/helper/opened_docs.rb

@@ -16,6 +16,6 @@ def initialize(cmd, uses_preview)
     return unless uses_preview
 
     wait_for_logs(/^preview server is listening on 3000$/, 60)
-    wait_for_logs(/  Built in /, 60) # Wait for parcel as well
+    wait_for_logs(/built in /, 60) # Wait for vite as well
   end
 end

integtest/spec/single_book_spec.rb

@@ -769,13 +769,10 @@ def self.convert_with_source_branch_before_context(branch)
 
     context 'the js' do
       it 'is unminified' do
-        expect(js).to serve(include(<<~JS))
-          // Test comment used to detect unminifed JS in tests
-        JS
-      end
-      it 'include hot module replacement for the css' do
-        expect(js).to serve(include(<<~JS))
-          // Setup hot module replacement for css if we're in dev mode.
+        # Vite drops plain comments from unminified output so look for a
+        # function name instead.
+        expect(js).to serve(include(<<~JS.strip))
+          function init_landing_page()
         JS
       end
       it 'includes a source map' do
@@ -800,9 +797,6 @@ def self.convert_with_source_branch_before_context(branch)
           /* test comment used to detect unminified source */
         CSS
       end
-      it 'includes a source map' do
-        expect(css).to serve(include('sourceMappingURL='))
-      end
     end
   end
 

lib/ES/Util.pm

@@ -496,15 +496,15 @@ sub write_nginx_test_config {
     my $web_conf;
     if ( $watching_web ) {
         $web_conf = <<"CONF"
-    rewrite ^/guide/static/docs-v1\\.js(.*)\$ /guide/static/docs_js/index-v1.js\$1 last;
     location ^~ /guide/static/jquery.js {
       alias /node_modules/jquery/dist/jquery.js;
       types {
         application/javascript js;
       }
     }
     location ^~ /guide/static/ {
-      proxy_pass http://0.0.0.0:1234;
+      alias /tmp/web_resources_watch/;
+      add_header Cache-Control 'no-cache';
     }
 CONF
     } else {
@@ -689,16 +689,17 @@ sub timestamp {
 #===================================
 sub start_web_resources_watcher {
 #===================================
-    my $parcel_pid = fork;
-    return $parcel_pid if $parcel_pid;
+    my $vite_pid = fork;
+    return $vite_pid if $vite_pid;
 
     close STDIN;
     open( STDIN, "</dev/null" );
-    exec( qw(/node_modules/parcel/bin/cli.js serve
-             --public-url /guide/static/
-             --hmr-port 8001
-             -d /tmp/parcel/
-             resources/web/docs_js/index-v1.js resources/web/styles-v1.pcss) );
+    # Rebuilds the js and css whenever they change. nginx serves the result.
+    exec( qw(/node_modules/vite/bin/vite.js build --watch
+             --configLoader native
+             --config resources/web/vite.config.mjs
+             --minify false --sourcemap
+             --outDir /tmp/web_resources_watch/) );
 }
 
 #===================================
@@ -723,9 +724,9 @@ sub build_web_resources {
 #===================================
     my ( $dest ) = @_;
 
-    my $parcel_out = dir('/tmp/parcel');
-    my $compiled_js = $parcel_out->file('docs_js/index-v1.js');
-    my $compiled_css = $parcel_out->file('styles-v1.css');
+    my $vite_out = dir('/tmp/web_resources');
+    my $compiled_js = $vite_out->file('docs-v1.js');
+    my $compiled_css = $vite_out->file('styles-v1.css');
 
     unless ( -e $compiled_js && -e $compiled_css ) {
         # We write the compiled js and css to /tmp so we can use them on
@@ -734,13 +735,12 @@ sub build_web_resources {
         # when you run the integration tests and saves about 1.5 seconds on
         # every docs build.
         say "Compiling web resources";
-        run '/node_modules/parcel/bin/cli.js', 'build',
-            '--public-url', '/guide/static/',
-            '--experimental-scope-hoisting', '--no-source-maps',
-            '-d', $parcel_out,
-            'resources/web/docs_js/index-v1.js', 'resources/web/styles-v1.pcss';
-        die "Parcel didn't make $compiled_js" unless -e $compiled_js;
-        die "Parcel didn't make $compiled_css" unless -e $compiled_css;
+        run '/node_modules/vite/bin/vite.js', 'build',
+            '--configLoader', 'native',
+            '--config', 'resources/web/vite.config.mjs',
+            '--outDir', $vite_out;
+        die "Vite didn't make $compiled_js" unless -e $compiled_js;
+        die "Vite didn't make $compiled_css" unless -e $compiled_css;
     }
 
     my $static_dir = $dest->subdir( 'raw' )->subdir( 'static' );
@@ -758,8 +758,9 @@ sub build_web_resources {
         $css_licenses->slurp( iomode => '<:encoding(UTF-8)' ) . $compiled_css->slurp( iomode => '<:encoding(UTF-8)' )
     );
 
-    for ( $parcel_out->children ) {
-        next unless /.+\.woff2?/;
+    # The fonts that the css refers to.
+    for ( $vite_out->children ) {
+        next if $_->basename eq 'docs-v1.js' || $_->basename eq 'styles-v1.css';
         rcopy( $_, $static_dir );
     }
 

package.json

@@ -2,24 +2,20 @@
   "license": "SEE LICENSE IN README.asciidoc",
   "devDependencies": {
     "jest": "^24.8.0",
-    "nock": "^10.0.6",
-    "rmfr": "^2.0.0"
+    "jsdom": "^30.1.3",
+    "nock": "^13.5.6",
+    "rmfr": "^2.0.0",
+    "vitest": "^5.0.5"
   },
   "scripts": {
-    "test": "jest"
-  },
-  "jest": {
-    "setupFiles": [
-      "./jest.js"
-    ]
+    "test": "vitest run --root resources/web",
+    "test:preview": "jest preview/__test__"
   },
   "dependencies": {
     "dedent": "^0.7.0",
-    "details-polyfill": "^1.1.0",
     "jquery": "3.5.1",
     "js-cookie": "^2.1.0",
     "linkstate": "^1.1.1",
-    "parcel": "^1.12.3",
     "postcss-assets": "^5.0.0",
     "preact": "^8.4.2",
     "preact-context": "^1.1.3",
@@ -29,7 +25,10 @@
     "recursive-copy": "^2.0.10",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
-    "url-search-params-polyfill": "^8.0.0",
+    "vite": "^8.3.5",
     "yargs": "^14.0.0"
+  },
+  "engines": {
+    "node": ">=22.12.0"
   }
 }

preview/__test__/clean.test.js

@@ -105,7 +105,7 @@ describe('Cleaner.is_pr_closed', () => {
   test('complains if github returns invalid json', async () => {
     mock_github().reply(200, 'pure garbage');
     await expect(cleaner.is_pr_closed({repo: 'r', number: 1})).rejects
-      .toThrow(/Unexpected token p/);
+      .toThrow(/Unexpected token/);
   });
   test('complains if github returns unexpect json', async () => {
     mock_github().reply(200, JSON.stringify({
@@ -114,7 +114,7 @@ describe('Cleaner.is_pr_closed', () => {
       }
     }));
     await expect(cleaner.is_pr_closed({repo: 'r', number: 1})).rejects
-      .toThrow(/Cannot read property 'closed' of undefined/);
+      .toThrow(/Cannot read propert(y|ies) of undefined/);
   });
   test("backs off if there aren't many requests remaining", async () => {
     // Mock setTimeout to immediately run. We don't use jest.useFakeTimers

resources/web/Makefile

@@ -1,13 +1,8 @@
 include ../../common.mk
 
 .PHONY: check
-check: jest
+check: test
 
-.PHONY: jest
-jest: tests
-	$(DOCKER) node_test /node_modules/jest/bin/jest.js ./tests/** ./__test__/**
-
-.PHONY: tests
-tests:
-	rm -rf tests
-	$(DOCKER) node_test /node_modules/parcel/bin/cli.js build ./docs_js/__tests__/**/* ./docs_js/__tests__/* -d ./tests/ --target node --no-minify --no-source-maps
+.PHONY: test
+test:
+	$(DOCKER) node_test /node_modules/vitest/vitest.mjs run

resources/web/__test__/air_gapped_template.test.js

@@ -1,3 +1,4 @@
+// @vitest-environment node
 /**
  * @license
  * Licensed to Elasticsearch under one or more contributor