From 2d3f18834fa1c122d167611b94410e84f43a6d5d Mon Sep 17 00:00:00 2001 From: Andrea De Pirro Date: Mon, 2 Nov 2026 11:00:55 +0100 Subject: [PATCH 1/2] Migrate web resources build from Parcel to Vite Replace Parcel 1 with Vite for building docs-v1.js and styles-v1.css, and Jest with Vitest for the web resources tests. * One `vite.config.mjs` builds both files as a classic script plus CSS and fonts. The IE polyfills (details-polyfill, url-search-params-polyfill) are dropped. * `build_docs --open` runs `vite build --watch` (unminified, with a source map) and nginx serves its output directly instead of proxying to the Parcel dev server. There is no HMR any more, only rebuild and reload. * Node in the base image goes from 12 to 24, which Vite needs. * Imports use bare specifiers instead of paths into /node_modules. * Ramda is imported per function because Vitest chokes on its `then` export. Two files that contain JSX are renamed to .jsx. * lang-console no longer uses a regex `s` flag, which prettify drops and Parcel used to compile away. * The preview tests (still Jest) get nock 13 and error message regexes that work on current Node. Co-Authored-By: Claude Sonnet 5.5 --- .docker/apt/keys/nodesource.gpg | Bin 3128 -> 1207 bytes .docker/apt/sources.list.d/nodesource.list | 2 +- .gitignore | 5 - build_docs | 30 +- build_docs.pl | 2 +- integtest/spec/all_books_spec.rb | 7 +- integtest/spec/helper/dsl/convert_all.rb | 2 +- integtest/spec/helper/opened_docs.rb | 2 +- integtest/spec/single_book_spec.rb | 14 +- jest.js | 2 - lib/ES/Util.pm | 43 +- package.json | 21 +- preview/__test__/clean.test.js | 4 +- resources/web/Makefile | 13 +- .../web/__test__/air_gapped_template.test.js | 1 + resources/web/docs.js.licenses | 23 - .../__tests__/actions/settings.test.js | 4 +- .../components/alternative_picker.test.jsx | 2 +- .../{mount.test.js => mount.test.jsx} | 4 +- resources/web/docs_js/__tests__/docs.test.js | 4 +- .../docs_js/__tests__/localization.test.js | 7 +- .../__tests__/prettify/lang-asciidoc.test.js | 2 +- .../__tests__/prettify/lang-console.test.js | 2 +- resources/web/docs_js/actions/index.js | 2 +- resources/web/docs_js/actions/modal.js | 2 +- resources/web/docs_js/actions/settings.js | 7 +- .../docs_js/components/alternative_picker.jsx | 7 +- .../components/alternative_switcher.js | 2 +- .../web/docs_js/components/console_widget.jsx | 11 +- .../web/docs_js/components/feedback_modal.jsx | 2 +- .../docs_js/components/feedback_widget.jsx | 2 +- .../components/{modal.js => modal.jsx} | 4 +- .../components/{mount.js => mount.jsx} | 4 +- resources/web/docs_js/deps.js | 2 +- resources/web/docs_js/index-v1.js | 13 +- .../web/docs_js/prettify/lang-console.js | 3 +- resources/web/docs_js/store.js | 4 +- resources/web/postcss.config.js | 8 +- resources/web/vite.config.mjs | 59 + resources/web/vitest.setup.js | 9 + yarn.lock | 3792 +++-------------- 41 files changed, 833 insertions(+), 3296 deletions(-) delete mode 100644 jest.js rename resources/web/docs_js/__tests__/components/{mount.test.js => mount.test.jsx} (82%) rename resources/web/docs_js/components/{modal.js => modal.jsx} (77%) rename resources/web/docs_js/components/{mount.js => mount.jsx} (69%) create mode 100644 resources/web/vite.config.mjs create mode 100644 resources/web/vitest.setup.js diff --git a/.docker/apt/keys/nodesource.gpg b/.docker/apt/keys/nodesource.gpg index 1dc1d1016b7ef6d59c208f289346cca628f4ad09..57c1c56a5c0490fe5344b36eb35ecd887597df87 100644 GIT binary patch literal 1207 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'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 ); } diff --git a/package.json b/package.json index fd671636add28..a856b9a5bfa18 100644 --- a/package.json +++ b/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" } } diff --git a/preview/__test__/clean.test.js b/preview/__test__/clean.test.js index 7017b4e45c98c..f9c9eddd96cd2 100644 --- a/preview/__test__/clean.test.js +++ b/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 diff --git a/resources/web/Makefile b/resources/web/Makefile index 54067d13f3f48..3fcdb3966c77d 100644 --- a/resources/web/Makefile +++ b/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 diff --git a/resources/web/__test__/air_gapped_template.test.js b/resources/web/__test__/air_gapped_template.test.js index 5cac7ab6aca9a..0ba5f73ddff99 100644 --- a/resources/web/__test__/air_gapped_template.test.js +++ b/resources/web/__test__/air_gapped_template.test.js @@ -1,3 +1,4 @@ +// @vitest-environment node /** * @license * Licensed to Elasticsearch under one or more contributor diff --git a/resources/web/docs.js.licenses b/resources/web/docs.js.licenses index 185f421b068d4..dd5a12557671f 100644 --- a/resources/web/docs.js.licenses +++ b/resources/web/docs.js.licenses @@ -51,29 +51,6 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ -/* details-polyfill - * The MIT License (MIT) - * - * Copyright (c) 2018 Rico Sta. Cruz - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ /* js-cookie * The MIT License (MIT) * diff --git a/resources/web/docs_js/__tests__/actions/settings.test.js b/resources/web/docs_js/__tests__/actions/settings.test.js index 09f958d7436b0..e1e01c650643d 100644 --- a/resources/web/docs_js/__tests__/actions/settings.test.js +++ b/resources/web/docs_js/__tests__/actions/settings.test.js @@ -1,4 +1,4 @@ -import Cookies from "../../../../../../node_modules/js-cookie"; +import Cookies from "js-cookie"; import * as actions from "../../actions/settings"; import store from "../../store"; @@ -10,7 +10,7 @@ describe("saveSettings", () => { }); test("it converts a map to list of tuples", () => { - const setCookies = jest.fn(); + const setCookies = vi.fn(); const saveSettings = actions._saveSettings(setCookies); db.dispatch(saveSettings({ console_url: "c", diff --git a/resources/web/docs_js/__tests__/components/alternative_picker.test.jsx b/resources/web/docs_js/__tests__/components/alternative_picker.test.jsx index c524bb838ae67..81e5581a9ca90 100644 --- a/resources/web/docs_js/__tests__/components/alternative_picker.test.jsx +++ b/resources/web/docs_js/__tests__/components/alternative_picker.test.jsx @@ -1,4 +1,4 @@ -import {h, render} from "../../../../../../node_modules/preact"; +import {h, render} from "preact"; import {_AlternativePicker} from "../../components/alternative_picker"; describe(_AlternativePicker, () => { diff --git a/resources/web/docs_js/__tests__/components/mount.test.js b/resources/web/docs_js/__tests__/components/mount.test.jsx similarity index 82% rename from resources/web/docs_js/__tests__/components/mount.test.js rename to resources/web/docs_js/__tests__/components/mount.test.jsx index 6cbc4bfce5978..9c882663e9f00 100644 --- a/resources/web/docs_js/__tests__/components/mount.test.js +++ b/resources/web/docs_js/__tests__/components/mount.test.jsx @@ -1,5 +1,5 @@ -import {h} from "../../../../../../node_modules/preact"; -import {connect} from "../../../../../../node_modules/preact-redux"; +import {h} from "preact"; +import {connect} from "preact-redux"; import {newStore} from "../../store"; import {mount} from "../../components/mount"; diff --git a/resources/web/docs_js/__tests__/docs.test.js b/resources/web/docs_js/__tests__/docs.test.js index 80bd11bf55484..f6666bfc59243 100644 --- a/resources/web/docs_js/__tests__/docs.test.js +++ b/resources/web/docs_js/__tests__/docs.test.js @@ -1,5 +1,5 @@ import {jQuery} from "../deps"; -import dedent from "../../../../../node_modules/dedent"; +import dedent from "dedent"; import {init_console_widgets, init_headers} from "../index-v1"; import * as utils from "../utils"; import * as l from "../localization"; @@ -41,7 +41,7 @@ function pageWithConsole(name, consoleText, extraTextAssertions) { }); describe('when clicked', () => { beforeEach(() => { - document.execCommand = jest.fn(() => { + document.execCommand = vi.fn(() => { document.copied = jQuery('textarea').val(); return true; }); diff --git a/resources/web/docs_js/__tests__/localization.test.js b/resources/web/docs_js/__tests__/localization.test.js index 41b029648e9e9..78093f9e5bb2a 100644 --- a/resources/web/docs_js/__tests__/localization.test.js +++ b/resources/web/docs_js/__tests__/localization.test.js @@ -1,10 +1,11 @@ import * as l from "../localization"; -import * as R from "../../../../../node_modules/ramda"; +import toPairs from "ramda/src/toPairs"; +import forEach from "ramda/src/forEach"; describe("Localization of strings", () => { - const specs = R.toPairs(l.lang_spec); + const specs = toPairs(l.lang_spec); - R.forEach(([phrase, {zh_cn, en}]) => { + forEach(([phrase, {zh_cn, en}]) => { const expectedEn = en ? en : phrase; test(`Correct Chinese translation of the phrase ${phrase}`, () => { diff --git a/resources/web/docs_js/__tests__/prettify/lang-asciidoc.test.js b/resources/web/docs_js/__tests__/prettify/lang-asciidoc.test.js index c94dc2c63d548..f974d6a59c3c2 100644 --- a/resources/web/docs_js/__tests__/prettify/lang-asciidoc.test.js +++ b/resources/web/docs_js/__tests__/prettify/lang-asciidoc.test.js @@ -1,6 +1,6 @@ import PR from "../../../lib/prettify/prettify"; import "../../prettify/lang-asciidoc"; -import dedent from "../../../../../../node_modules/dedent"; +import dedent from "dedent"; const prettyAsciidoc = str => PR.prettyPrintOne(str, "asciidoc"); const tag = str => `${str}`; diff --git a/resources/web/docs_js/__tests__/prettify/lang-console.test.js b/resources/web/docs_js/__tests__/prettify/lang-console.test.js index afd8c7b399b4e..4115cbab0d879 100644 --- a/resources/web/docs_js/__tests__/prettify/lang-console.test.js +++ b/resources/web/docs_js/__tests__/prettify/lang-console.test.js @@ -1,6 +1,6 @@ import PR from "../../../lib/prettify/prettify"; import "../../prettify/lang-console"; -import dedent from "../../../../../../node_modules/dedent"; +import dedent from "dedent"; const prettyConsole = str => PR.prettyPrintOne(str, "console"); const prettyJs = str => PR.prettyPrintOne(str, "js"); diff --git a/resources/web/docs_js/actions/index.js b/resources/web/docs_js/actions/index.js index b7bb49757311a..cf2657bce073e 100644 --- a/resources/web/docs_js/actions/index.js +++ b/resources/web/docs_js/actions/index.js @@ -1,4 +1,4 @@ -import {combineReducers} from "../../../../../node_modules/redux"; +import {combineReducers} from "redux"; import {reducer as settingsReducer} from "./settings"; import {reducer as modalReducer} from "./modal"; diff --git a/resources/web/docs_js/actions/modal.js b/resources/web/docs_js/actions/modal.js index 4439da4e99c34..68fca8ae0c00d 100644 --- a/resources/web/docs_js/actions/modal.js +++ b/resources/web/docs_js/actions/modal.js @@ -1,4 +1,4 @@ -import {dissoc} from "../../../../../node_modules/ramda"; +import dissoc from "ramda/src/dissoc"; const initialState = {isOpen: false, Component: null, props: null}; diff --git a/resources/web/docs_js/actions/settings.js b/resources/web/docs_js/actions/settings.js index 6618f359a0507..2634435832d89 100644 --- a/resources/web/docs_js/actions/settings.js +++ b/resources/web/docs_js/actions/settings.js @@ -1,5 +1,8 @@ -import Cookies from "../../../../../node_modules/js-cookie"; -import {omit, merge, toPairs, forEach} from "../../../../../node_modules/ramda"; +import Cookies from "js-cookie"; +import omit from "ramda/src/omit"; +import merge from "ramda/src/merge"; +import toPairs from "ramda/src/toPairs"; +import forEach from "ramda/src/forEach"; import {closeModal} from "./modal"; const SAVE_SETTING = "SAVE_SETTING"; diff --git a/resources/web/docs_js/components/alternative_picker.jsx b/resources/web/docs_js/components/alternative_picker.jsx index 6c20155149ef1..ddbef00844851 100644 --- a/resources/web/docs_js/components/alternative_picker.jsx +++ b/resources/web/docs_js/components/alternative_picker.jsx @@ -3,9 +3,10 @@ * instead of "Console". */ -import {h, Component} from "../../../../../../node_modules/preact"; -import {pick, merge} from "../../../../../node_modules/ramda"; -import {connect} from "../../../../../node_modules/preact-redux"; +import {h, Component} from "preact"; +import pick from "ramda/src/pick"; +import merge from "ramda/src/merge"; +import {connect} from "preact-redux"; import {saveSettings} from "../actions/settings"; const alternativePrettyName = rawName => { diff --git a/resources/web/docs_js/components/alternative_switcher.js b/resources/web/docs_js/components/alternative_switcher.js index 24c056dbfd06e..f3e869745007c 100644 --- a/resources/web/docs_js/components/alternative_switcher.js +++ b/resources/web/docs_js/components/alternative_switcher.js @@ -1,4 +1,4 @@ -import {curry} from "../../../../../node_modules/ramda"; +import curry from "ramda/src/curry"; /* * Widget to switch the displayed alternative langauge when the configured diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index 7b11aa1e2d069..7939c5e9865d4 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -1,8 +1,11 @@ import * as utils from "../utils"; -import {prop, pick, merge, omit} from "../../../../../node_modules/ramda"; -import {h, Component} from "../../../../../node_modules/preact"; -import linkState from "../../../../../node_modules/linkstate"; -import {connect} from "../../../../../node_modules/preact-redux"; +import prop from "ramda/src/prop"; +import pick from "ramda/src/pick"; +import merge from "ramda/src/merge"; +import omit from "ramda/src/omit"; +import {h, Component} from "preact"; +import linkState from "linkstate"; +import {connect} from "preact-redux"; import {openModal} from "../actions/modal"; import {saveSettings} from "../actions/settings"; import AlternativePicker from "./alternative_picker"; diff --git a/resources/web/docs_js/components/feedback_modal.jsx b/resources/web/docs_js/components/feedback_modal.jsx index c47e88699a469..26ef16733e12c 100644 --- a/resources/web/docs_js/components/feedback_modal.jsx +++ b/resources/web/docs_js/components/feedback_modal.jsx @@ -1,4 +1,4 @@ -import { h, Component } from '../../../../../../node_modules/preact'; +import { h, Component } from 'preact'; const FEEDBACK_URL = 'https://docs.elastic.co/api/feedback' const MAX_COMMENT_LENGTH = 1000; diff --git a/resources/web/docs_js/components/feedback_widget.jsx b/resources/web/docs_js/components/feedback_widget.jsx index a8a3a0bc67de0..36038b1b86978 100644 --- a/resources/web/docs_js/components/feedback_widget.jsx +++ b/resources/web/docs_js/components/feedback_widget.jsx @@ -1,4 +1,4 @@ -import { h, Component } from '../../../../../../node_modules/preact'; +import { h, Component } from 'preact'; export default class FeedbackWidget extends Component { render() { diff --git a/resources/web/docs_js/components/modal.js b/resources/web/docs_js/components/modal.jsx similarity index 77% rename from resources/web/docs_js/components/modal.js rename to resources/web/docs_js/components/modal.jsx index e0dc5ca1dad1a..477ade62aca87 100644 --- a/resources/web/docs_js/components/modal.js +++ b/resources/web/docs_js/components/modal.jsx @@ -1,5 +1,5 @@ -import {h} from "../../../../../node_modules/preact"; -import {connect} from "../../../../../node_modules/preact-redux"; +import {h} from "preact"; +import {connect} from "preact-redux"; import {closeModal} from "../actions/modal"; export const Modal = ({Component, props, isOpen, closeModal}) => { diff --git a/resources/web/docs_js/components/mount.js b/resources/web/docs_js/components/mount.jsx similarity index 69% rename from resources/web/docs_js/components/mount.js rename to resources/web/docs_js/components/mount.jsx index 30ea27458e6ae..267f011eb0a92 100644 --- a/resources/web/docs_js/components/mount.js +++ b/resources/web/docs_js/components/mount.jsx @@ -1,5 +1,5 @@ -import { Provider } from '../../../../../node_modules/preact-redux'; -import { h, render } from '../../../../../node_modules/preact'; +import { Provider } from 'preact-redux'; +import { h, render } from 'preact'; import store from "../store"; export const mount = ({el, Component, props = {}, store}) => diff --git a/resources/web/docs_js/deps.js b/resources/web/docs_js/deps.js index 7c06279a68a5c..cee08a98ac714 100644 --- a/resources/web/docs_js/deps.js +++ b/resources/web/docs_js/deps.js @@ -1,4 +1,4 @@ -import _Cookies from "../../../../node_modules/js-cookie"; +import _Cookies from "js-cookie"; export const jQuery = window.jQuery; export const $ = window.jQuery; diff --git a/resources/web/docs_js/index-v1.js b/resources/web/docs_js/index-v1.js index b8d6f31a988fc..fa4228303c28f 100644 --- a/resources/web/docs_js/index-v1.js +++ b/resources/web/docs_js/index-v1.js @@ -2,8 +2,8 @@ import AlternativeSwitcher from "./components/alternative_switcher.js"; import ConsoleWidget from "./components/console_widget.jsx"; import FeedbackModal from './components/feedback_modal.jsx'; import FeedbackWidget from './components/feedback_widget.jsx'; -import Modal from "./components/modal.js"; -import mount from "./components/mount.js"; +import Modal from "./components/modal.jsx"; +import mount from "./components/mount.jsx"; import {switchTabs} from "./components/tabbed_widget.js"; import {Cookies, $} from "./deps.js"; import {lang_strings} from "./localization.js"; @@ -16,11 +16,8 @@ import "../lib/prettify/lang-esql.js"; import "../lib/prettify/lang-sql.js"; import "../lib/prettify/lang-yaml.js"; -// Add support for
in IE and the like -import "../../../../../node_modules/details-polyfill"; - -// Add support for URLSearchParams Web API in IE -import "../../../../../node_modules/url-search-params-polyfill"; +// Vite emits the CSS as styles-v1.css next to the built script +import "../styles-v1.pcss"; export function init_landing_page() { // Because of the nature of the injected links, we need to adjust the layout to @@ -571,8 +568,6 @@ $(function() { ...getUtm() }; dataLayer.push(pageViewData); - - // Test comment used to detect unminifed JS in tests }); // Tabbed widgets diff --git a/resources/web/docs_js/prettify/lang-console.js b/resources/web/docs_js/prettify/lang-console.js index f84728cc64ec5..a90c6882cc6c0 100644 --- a/resources/web/docs_js/prettify/lang-console.js +++ b/resources/web/docs_js/prettify/lang-console.js @@ -20,12 +20,13 @@ import PR from "../../lib/prettify/prettify"; +// Note: PR drops regex flags so `[\s\S]` stands in for the `s` flag. const basic = PR.createSimpleLexer( [ [PR.PR_PUNCTUATION, /^[/?=&]/, null, '/?=&'], [PR.PR_PLAIN, /^\s+/, null, ' \t\r\n'], [PR.PR_KEYWORD, /^DELETE|HEAD|GET|PATCH|POST|PUT/, null, 'DHGP'], - ["lang-js", /^(\{.+?\})(?=\s*(DELETE|HEAD|GET|PATCH|POST|PUT|$))/s, null, '{'], + ["lang-js", /^(\{[\s\S]+?\})(?=\s*(DELETE|HEAD|GET|PATCH|POST|PUT|$))/, null, '{'], ], [ [PR.PR_STRING, /^[^ \s/?=&]+/], diff --git a/resources/web/docs_js/store.js b/resources/web/docs_js/store.js index 11d0cca64ff37..4f7300ebe2598 100644 --- a/resources/web/docs_js/store.js +++ b/resources/web/docs_js/store.js @@ -1,5 +1,5 @@ -import thunk from '../../../../node_modules/redux-thunk'; -import { createStore, applyMiddleware } from '../../../../node_modules/redux'; +import thunk from 'redux-thunk'; +import { createStore, applyMiddleware } from 'redux'; import reducer from "./actions"; export const newStore = initialState => diff --git a/resources/web/postcss.config.js b/resources/web/postcss.config.js index 69362ff101a4f..c2d0a30261f00 100644 --- a/resources/web/postcss.config.js +++ b/resources/web/postcss.config.js @@ -1,6 +1,12 @@ +const path = require('path'); + module.exports = { plugins: [ require('precss')(), - require('postcss-assets'), + require('postcss-assets')({ + // `inline("img/foo.svg")` is relative to the style directory. + basePath: __dirname, + loadPaths: ['style/'], + }), ], }; diff --git a/resources/web/vite.config.mjs b/resources/web/vite.config.mjs new file mode 100644 index 0000000000000..e10998d6a41e3 --- /dev/null +++ b/resources/web/vite.config.mjs @@ -0,0 +1,59 @@ +import { defineConfig } from 'vite'; + +// Builds the docs' browser resources. `index-v1.js` is the only entry point +// and it imports `styles-v1.pcss`, so one build makes both files: +// +// docs-v1.js a classic (IIFE) script, loaded with a plain