From 09f7985aa5acb1d06e77340bc053e048838e9fdc Mon Sep 17 00:00:00 2001 From: Abhijeet Kumar Singh Date: Tue, 7 Jan 2025 16:24:13 +0530 Subject: [PATCH 1/5] Fix: Tooltip for navigation icons with blue background and white text (#7493) --- package.json | 2 + src/components/Navigation/Navigation.jsx | 90 ++++++++++++------------ yarn.lock | 38 ++++++++++ 3 files changed, 84 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index 841619841593..64bda68c2784 100644 --- a/package.json +++ b/package.json @@ -155,8 +155,10 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-helmet-async": "^2.0.5", + "react-icons": "^5.4.0", "react-router-dom": "^6.28.0", "react-tiny-popover": "5", + "react-tooltip": "^5.28.0", "react-use": "^17.5.1", "react-visibility-sensor": "^5.0.2", "webpack-pwa-manifest": "^4.3.0", diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index e268723e9e5d..3472b97e9346 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -1,15 +1,10 @@ -// Import External Dependencies import { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { DocSearch } from '@docsearch/react'; import { Link as ReactDOMLink, NavLink, useLocation } from 'react-router-dom'; - -// Import Components import Link from '../Link/Link'; import Logo from '../Logo/Logo'; import Dropdown from '../Dropdown/Dropdown'; - -// Load Styling import '@docsearch/css'; import GithubIcon from '../../styles/icons/github.svg'; @@ -18,23 +13,18 @@ import StackOverflowIcon from '../../styles/icons/stack-overflow.svg'; import Hamburger from '../../styles/icons/hamburger.svg'; import HelloDarkness from '../HelloDarkness'; -NavigationItem.propTypes = { - children: PropTypes.node.isRequired, - url: PropTypes.string.isRequired, - isactive: PropTypes.func, -}; - -function NavigationItem({ children, url, isactive }) { +// NavigationItem Component +function NavigationItem({ children, url, isActive }) { let obj = {}; - // decide if the link is active or not by providing a function - // otherwise we'll let react-dom makes the decision for us - if (isactive) { + if (isActive) { obj = { - isactive, + isActive, }; } + const classes = 'text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200'; + if (url.startsWith('http') || url.startsWith('//')) { return ( ); } + return ( - {children} - +
+ + {children} + + {/* Tooltip */} +
+ {title} +
+
); } + +NavigationIcon.propTypes = { + children: PropTypes.node.isRequired, + to: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, +}; + const navigationIconProps = { 'aria-hidden': true, fill: 'currentColor', width: 16, }; -Navigation.propTypes = { - pathname: PropTypes.string, - hash: PropTypes.string, - links: PropTypes.array, - toggleSidebar: PropTypes.func, - theme: PropTypes.string, - switchTheme: PropTypes.func, -}; - function Navigation({ links, pathname, hash = '', toggleSidebar }) { const [locationHash, setLocationHash] = useState(hash); - const location = useLocation(); useEffect(() => { @@ -123,6 +119,7 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) { {content} ))} + {/* Social Media Icons with Tooltips */} {[ { to: 'https://github.com/webpack/webpack', @@ -188,18 +185,12 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) { /> - {/* sub navigation */} + {/* Sub navigation */} {links - .filter((link) => { - // only those with children are displayed - return link.children; - }) + .filter((link) => link.children) .map((link) => { - if (link.isactive) { - // hide the children if the link is not active - if (!link.isactive({}, location)) { - return null; - } + if (link.isActive && !link.isActive({}, location)) { + return null; } return (
Date: Tue, 7 Jan 2025 16:48:00 +0530 Subject: [PATCH 2/5] Add labels to navbar icons --- src/components/Navigation/Navigation.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index 3472b97e9346..59f014c20aa4 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -21,10 +21,9 @@ function NavigationItem({ children, url, isActive }) { isActive, }; } - - const classes = - 'text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200'; - + + const classes = 'text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200'; + if (url.startsWith('http') || url.startsWith('//')) { return ( ); } - + return ( Date: Tue, 7 Jan 2025 16:54:27 +0530 Subject: [PATCH 3/5] Add labels to navbar icons --- src/components/Navigation/Navigation.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index 59f014c20aa4..3472b97e9346 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -21,9 +21,10 @@ function NavigationItem({ children, url, isActive }) { isActive, }; } - - const classes = 'text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200'; - + + const classes = + 'text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200'; + if (url.startsWith('http') || url.startsWith('//')) { return ( ); } - + return ( Date: Wed, 8 Jan 2025 14:53:31 +0530 Subject: [PATCH 4/5] feat: add tooltips to social media icons --- cypress.config.js | 6 +- cypress/e2e/check-sub-navigation.cy.js | 79 ++++++++-- package.json | 5 + src/components/Navigation/Navigation.jsx | 83 +++++----- yarn.lock | 188 +++++++++++++++++++---- 5 files changed, 282 insertions(+), 79 deletions(-) diff --git a/cypress.config.js b/cypress.config.js index f7db28ad523a..a6f741a41ebd 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -3,11 +3,13 @@ const { defineConfig } = require('cypress'); module.exports = defineConfig({ video: false, e2e: { - // We've imported your old cypress plugins here. - // You may want to clean this up later by importing these. setupNodeEvents(on, config) { return require('./cypress/plugins/index.js')(on, config); }, baseUrl: 'http://localhost:4200', + viewportWidth: 1280, + viewportHeight: 720, + defaultCommandTimeout: 10000, + experimentalStudio: false, }, }); diff --git a/cypress/e2e/check-sub-navigation.cy.js b/cypress/e2e/check-sub-navigation.cy.js index 78507c91003d..c8b182973dd2 100644 --- a/cypress/e2e/check-sub-navigation.cy.js +++ b/cypress/e2e/check-sub-navigation.cy.js @@ -1,17 +1,78 @@ -describe('Detect sub navigation', () => { - it('should show sub navigation', () => { - cy.visit('/concepts/'); +// cypress/e2e/check-sub-navigation.cy.js - const selector = '[data-testid="sub-navigation"]'; +describe('Sub Navigation', () => { + beforeEach(() => { + cy.viewport(1280, 720); // Set consistent viewport size for desktop view + }); + + describe('Desktop Navigation', () => { + it('should show sub navigation on documentation pages', () => { + cy.visit('/concepts/'); + + // Check if header exists + cy.get('header').should('exist').and('be.visible'); + + // Verify sub-navigation exists and is visible + cy.get('[data-testid="sub-navigation"]') + .should('exist') + .and('be.visible'); + + // Verify sub-navigation links are properly styled + cy.get('[data-testid="sub-navigation"] a') + .should('have.length.at.least', 1) + .first() + .should('have.class', 'text-blue-400'); + }); + + it('should not show sub navigation on home page', () => { + cy.visit('/'); + + // Wait for page load and any animations + cy.wait(1000); - cy.get(selector).should('exist'); + // Verify sub-navigation is not present + cy.get('[data-testid="sub-navigation"]').should('not.exist'); + }); + + it('should highlight active sub navigation item', () => { + cy.visit('/concepts/'); + + // Get the first sub-nav link and verify it becomes active when clicked + cy.get('[data-testid="sub-navigation"] a') + .first() + .click() + .should('have.class', '!text-black'); + }); + + it('should show language dropdown', () => { + cy.visit('/concepts/'); + + // Verify language dropdown exists + cy.get('[role="combobox"]').should('exist').and('be.visible'); + }); }); - it('should not show sub navigation', () => { - cy.visit('/'); + describe('Mobile Navigation', () => { + beforeEach(() => { + cy.viewport(375, 667); // Set mobile viewport + }); + + it('should show hamburger menu on mobile', () => { + cy.visit('/concepts/'); + + // Verify hamburger button exists + cy.get('button') + .first() + .should('be.visible') + .find('svg') + .should('have.class', 'fill-current'); + }); - const selector = '[data-testid="sub-navigation"]'; + it('should hide desktop navigation on mobile', () => { + cy.visit('/concepts/'); - cy.get(selector).should('not.exist'); + // Verify desktop nav is hidden + cy.get('nav').first().should('have.class', 'hidden'); + }); }); }); diff --git a/package.json b/package.json index 64bda68c2784..78eb3b071e24 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,10 @@ "node": ">= 20.9.0" }, "scripts": { + "test:serve": "http-server dist --port 4200 --silent", + "test:build": "npm run build || true", + "pretest:e2e": "npm run test:build", + "test:e2e": "start-server-and-test test:serve http://localhost:4200 'cypress run --browser chrome'", "clean-dist": "rimraf ./dist", "clean-printable": "rimraf src/content/**/printable.mdx", "preclean": "run-s clean-dist clean-printable", @@ -134,6 +138,7 @@ "sass-loader": "^16.0.4", "sirv-cli": "^3.0.0", "sitemap-static": "^0.4.2", + "start-server-and-test": "^2.0.9", "static-site-generator-webpack-plugin": "^3.4.1", "style-loader": "^4.0.0", "tailwindcss": "^3.4.16", diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index 3472b97e9346..08f7ea3b0d72 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -68,7 +68,6 @@ function NavigationIcon({ children, to, title }) { > {children} - {/* Tooltip */}
{title}
@@ -96,6 +95,9 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) { setLocationHash(hash); }, [hash]); + // Helper function to check if we're on the home page + const isHomePage = location.pathname === '/'; + return ( <>
@@ -185,47 +187,50 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) { />
- {/* Sub navigation */} - {links - .filter((link) => link.children) - .map((link) => { - if (link.isActive && !link.isActive({}, location)) { - return null; - } - return ( -
+ + {/* Sub navigation - Updated with fixed logic */} + {!isHomePage && + links + .filter((link) => link.children) + .map((link) => { + if (link.isActive && !link.isActive({}, location)) { + return null; + } + + return (
- {link.children.map((child) => { - const classNames = - 'text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white'; - const isActive = location.pathname.startsWith(child.url); - return ( - - isActive - ? `!text-black dark:!text-white ${classNames}` - : classNames - } - > - {child.content === 'api' - ? child.content.toUpperCase() - : child.content} - - ); - })} +
+ {link.children.map((child) => { + const classNames = + 'text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white'; + const isActive = location.pathname.startsWith(child.url); + return ( + + isActive + ? `!text-black dark:!text-white ${classNames}` + : classNames + } + > + {child.content === 'api' + ? child.content.toUpperCase() + : child.content} + + ); + })} +
-
- ); - })} + ); + })} ); diff --git a/yarn.lock b/yarn.lock index 377220145b38..baab4f454173 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1306,6 +1306,11 @@ resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06" integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow== +"@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0": + version "9.3.0" + resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb" + integrity sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ== + "@hapi/joi@^15.0.0": version "15.1.1" resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7" @@ -1323,6 +1328,13 @@ dependencies: "@hapi/hoek" "^8.3.0" +"@hapi/topo@^5.1.0": + version "5.1.0" + resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.1.0.tgz#dc448e332c6c6e37a4dc02fd84ba8d44b9afb012" + integrity sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg== + dependencies: + "@hapi/hoek" "^9.0.0" + "@humanfs/core@^0.19.1": version "0.19.1" resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77" @@ -2338,6 +2350,23 @@ estree-walker "^2.0.2" picomatch "^2.3.1" +"@sideway/address@^4.1.5": + version "4.1.5" + resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.5.tgz#4bc149a0076623ced99ca8208ba780d65a99b9d5" + integrity sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q== + dependencies: + "@hapi/hoek" "^9.0.0" + +"@sideway/formula@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.1.tgz#80fcbcbaf7ce031e0ef2dd29b1bfc7c3f583611f" + integrity sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg== + +"@sideway/pinpoint@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df" + integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ== + "@sinclair/typebox@^0.27.8": version "0.27.8" resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e" @@ -3464,6 +3493,15 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.1.tgz#e1e82e4f3e999e2cfd61b161280d16a111f86428" integrity sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA== +axios@^1.7.7: + version "1.7.9" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.9.tgz#d7d071380c132a24accda1b2cfc1535b79ec650a" + integrity sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw== + dependencies: + follow-redirects "^1.15.6" + form-data "^4.0.0" + proxy-from-env "^1.1.0" + babel-extract-comments@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21" @@ -3643,7 +3681,7 @@ bluebird@2.9.34: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.9.34.tgz#2f7b4ec80216328a9fddebdf69c8d4942feff7d8" integrity sha1-L3tOyAIWMoqf3evfacjUlC/v99g= -bluebird@^3.0.5, bluebird@^3.5.1, bluebird@^3.7.2: +bluebird@3.7.2, bluebird@^3.0.5, bluebird@^3.5.1, bluebird@^3.7.2: version "3.7.2" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== @@ -3928,7 +3966,7 @@ character-reference-invalid@^2.0.0: resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.0.tgz#a0bdeb89c051fe7ed5d3158b2f06af06984f2813" integrity sha512-pE3Z15lLRxDzWJy7bBHBopRwfI20sbrMVLQTC7xsPglCHf4Wv1e167OgYAFP78co2XlhojDyAqA+IAJse27//g== -check-more-types@^2.24.0: +check-more-types@2.24.0, check-more-types@^2.24.0: version "2.24.0" resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600" integrity sha1-FCD/sQ/URNz8ebQ4kbv//TKoRgA= @@ -4809,12 +4847,12 @@ debug@2.6.9: dependencies: ms "2.0.0" -debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.6: - version "4.3.6" - resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b" - integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg== +debug@4, debug@4.4.0, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4: + version "4.4.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a" + integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA== dependencies: - ms "2.1.2" + ms "^2.1.3" debug@^3.1.0, debug@^3.1.1: version "3.2.7" @@ -4823,6 +4861,13 @@ debug@^3.1.0, debug@^3.1.1: dependencies: ms "^2.1.1" +debug@~4.3.6: + version "4.3.6" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b" + integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg== + dependencies: + ms "2.1.2" + decimal.js@^10.2.1: version "10.2.1" resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3" @@ -5127,7 +5172,7 @@ dot-case@^3.0.4: no-case "^3.0.4" tslib "^2.0.3" -duplexer@^0.1.1, duplexer@^0.1.2: +duplexer@^0.1.1, duplexer@^0.1.2, duplexer@~0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== @@ -5739,6 +5784,19 @@ eval@^0.1.0, eval@^0.1.5: dependencies: require-like ">= 0.1.1" +event-stream@=3.3.4: + version "3.3.4" + resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571" + integrity sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g== + dependencies: + duplexer "~0.1.1" + from "~0" + map-stream "~0.1.0" + pause-stream "0.0.11" + split "0.3" + stream-combiner "~0.0.4" + through "~2.3.1" + eventemitter2@6.4.7: version "6.4.7" resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d" @@ -5779,7 +5837,7 @@ execa@4.1.0: signal-exit "^3.0.2" strip-final-newline "^2.0.0" -execa@^5.0.0: +execa@5.1.1, execa@^5.0.0: version "5.1.1" resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd" integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg== @@ -6079,10 +6137,10 @@ flatted@^3.2.9: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a" integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw== -follow-redirects@^1.0.0: - version "1.15.6" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b" - integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA== +follow-redirects@^1.0.0, follow-redirects@^1.15.6: + version "1.15.9" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1" + integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ== for-each@^0.3.3: version "0.3.3" @@ -6122,6 +6180,15 @@ form-data@^3.0.0: combined-stream "^1.0.8" mime-types "^2.1.12" +form-data@^4.0.0, form-data@~4.0.0: + version "4.0.1" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.1.tgz#ba1076daaaa5bfd7e99c1a6cb02aa0a5cff90d48" + integrity sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + form-data@~2.3.2: version "2.3.3" resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6" @@ -6131,15 +6198,6 @@ form-data@~2.3.2: combined-stream "^1.0.6" mime-types "^2.1.12" -form-data@~4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" - integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== - dependencies: - asynckit "^0.4.0" - combined-stream "^1.0.8" - mime-types "^2.1.12" - format@^0.2.0: version "0.2.2" resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b" @@ -6160,6 +6218,11 @@ fresh@0.5.2: resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7" integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac= +from@~0: + version "0.1.7" + resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe" + integrity sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g== + front-matter@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-4.0.2.tgz#b14e54dc745cfd7293484f3210d15ea4edd7f4d5" @@ -7979,6 +8042,17 @@ jiti@^1.20.0, jiti@^1.21.6: resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268" integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w== +joi@^17.13.3: + version "17.13.3" + resolved "https://registry.yarnpkg.com/joi/-/joi-17.13.3.tgz#0f5cc1169c999b30d344366d384b12d92558bcec" + integrity sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA== + dependencies: + "@hapi/hoek" "^9.3.0" + "@hapi/topo" "^5.1.0" + "@sideway/address" "^4.1.5" + "@sideway/formula" "^3.0.1" + "@sideway/pinpoint" "^2.0.0" + jpeg-js@0.4.2: version "0.4.2" resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.2.tgz#8b345b1ae4abde64c2da2fe67ea216a114ac279d" @@ -8196,7 +8270,7 @@ launch-editor@^2.6.1: picocolors "^1.0.0" shell-quote "^1.8.1" -lazy-ass@^1.6.0: +lazy-ass@1.6.0, lazy-ass@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513" integrity sha1-eZllXoZGwX8In90YfRUNMyTVRRM= @@ -8655,6 +8729,11 @@ makeerror@1.0.12: dependencies: tmpl "1.0.5" +map-stream@~0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194" + integrity sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g== + markdown-extensions@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/markdown-extensions/-/markdown-extensions-2.0.0.tgz#34bebc83e9938cae16e0e017e4a9814a8330d3c4" @@ -9525,7 +9604,7 @@ ms@2.1.2: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== -ms@2.1.3, ms@^2.1.1: +ms@2.1.3, ms@^2.1.1, ms@^2.1.3: version "2.1.3" resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== @@ -10892,6 +10971,18 @@ proxy-from-env@1.0.0: resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee" integrity sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4= +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== + +ps-tree@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.2.0.tgz#5e7425b89508736cdd4f2224d028f7bb3f722ebd" + integrity sha512-0VnamPPYHl4uaU/nSFeZZpR21QAWRz+sRv4iW9+v/GS/J5U5iZB5BNN6J0RMoOvdx2gWM2+ZFMIm58q24e4UYA== + dependencies: + event-stream "=3.3.4" + psl@^1.1.28, psl@^1.1.33: version "1.8.0" resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24" @@ -11572,10 +11663,10 @@ run-parallel@^1.1.9: resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679" integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q== -rxjs@^7.4.0: - version "7.8.0" - resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.0.tgz#90a938862a82888ff4c7359811a595e14e1e09a4" - integrity sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg== +rxjs@^7.4.0, rxjs@^7.8.1: + version "7.8.1" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543" + integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg== dependencies: tslib "^2.1.0" @@ -12138,6 +12229,13 @@ specificity@^0.4.0: resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019" integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg== +split@0.3: + version "0.3.3" + resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f" + integrity sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA== + dependencies: + through "2" + sprintf-js@~1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" @@ -12199,6 +12297,20 @@ stacktrace-js@^2.0.2: stack-generator "^2.0.5" stacktrace-gps "^3.0.4" +start-server-and-test@^2.0.9: + version "2.0.9" + resolved "https://registry.yarnpkg.com/start-server-and-test/-/start-server-and-test-2.0.9.tgz#a58160fa95e072aeb41e104472dea01b052b7443" + integrity sha512-DDceIvc4wdpr+z3Aqkot2QMho8TcUBh5qH0wEHDpEexBTzlheOcmh53d3dExABY4J5C7qS2UbSXqRWLtxpbWIQ== + dependencies: + arg "^5.0.2" + bluebird "3.7.2" + check-more-types "2.24.0" + debug "4.4.0" + execa "5.1.1" + lazy-ass "1.6.0" + ps-tree "1.2.0" + wait-on "8.0.1" + static-site-generator-webpack-plugin@^3.4.1: version "3.4.2" resolved "https://registry.yarnpkg.com/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-3.4.2.tgz#ad9fd0a4fb8b6f439a7a66018320b459bdb6d916" @@ -12220,6 +12332,13 @@ statuses@2.0.1: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow= +stream-combiner@~0.0.4: + version "0.0.4" + resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.0.4.tgz#4d5e433c185261dde623ca3f44c586bcf5c4ad14" + integrity sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw== + dependencies: + duplexer "~0.1.1" + string-argv@~0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6" @@ -12742,7 +12861,7 @@ through2@^2.0.1: readable-stream "~2.3.6" xtend "~4.0.1" -through@^2.3.8, through@~2.3: +through@2, through@^2.3.8, through@~2.3, through@~2.3.1: version "2.3.8" resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= @@ -13506,6 +13625,17 @@ w3c-xmlserializer@^2.0.0: dependencies: xml-name-validator "^3.0.0" +wait-on@8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-8.0.1.tgz#13c8ec77115517f8fbc2d670521a444201f03f53" + integrity sha512-1wWQOyR2LVVtaqrcIL2+OM+x7bkpmzVROa0Nf6FryXkS+er5Sa1kzFGjzZRqLnHa3n1rACFLeTwUqE1ETL9Mig== + dependencies: + axios "^1.7.7" + joi "^17.13.3" + lodash "^4.17.21" + minimist "^1.2.8" + rxjs "^7.8.1" + walk-up-path@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/walk-up-path/-/walk-up-path-3.0.1.tgz#c8d78d5375b4966c717eb17ada73dbd41490e886" From f4c3a631902f781036e45b5273b242526b2b677b Mon Sep 17 00:00:00 2001 From: Abhijeet Kumar Singh Date: Wed, 8 Jan 2025 16:04:01 +0530 Subject: [PATCH 5/5] minor updates --- package.json | 54 ++++++++++--------- src/components/Support/Support.jsx | 8 +-- src/content/api/cli.mdx | 18 +++---- src/content/comparison.mdx | 10 ++-- .../configuration/configuration-languages.mdx | 3 +- src/content/configuration/experiments.mdx | 6 +-- src/index.jsx | 31 +++++++---- src/styles/partials/_vars.scss | 14 +++-- 8 files changed, 81 insertions(+), 63 deletions(-) diff --git a/package.json b/package.json index 78eb3b071e24..e0488b6bb908 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,9 @@ "cypress:open": "cypress open", "cypress:run": "cypress run --browser chrome", "prettier": "prettier --write '**/*.{js,json,jsx,css,scss,md,mdx}'", - "prepare": "husky && rimraf ./node_modules/.cache/webpack && yarn-deduplicate --strategy fewer" + "prepare": "husky && rimraf ./node_modules/.cache/webpack && yarn-deduplicate --strategy fewer", + "build:lib": "babel src -d lib", + "start:dev": "webpack serve --config webpack.dev.mjs --env dev --progress --define-process-env-node-env development" }, "lint-staged": { "*.{js,mjs,jsx,md,mdx}": [ @@ -76,12 +78,12 @@ "devDependencies": { "@babel/core": "^7.26.0", "@babel/eslint-parser": "^7.25.9", - "@babel/plugin-proposal-class-properties": "^7.17.12", + "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/preset-env": "^7.26.0", "@babel/preset-react": "^7.26.3", "@eslint/compat": "^1.2.4", "@eslint/eslintrc": "^3.2.0", - "@eslint/js": "^9.16.0", + "@eslint/js": "^9.17.0", "@mdx-js/loader": "^3.1.0", "@mdx-js/react": "^3.1.0", "@octokit/auth-action": "^5.1.1", @@ -93,40 +95,40 @@ "copy-webpack-plugin": "^12.0.2", "css-loader": "^7.1.2", "css-minimizer-webpack-plugin": "^7.0.0", - "cypress": "^13.16.0", + "cypress": "^13.17.0", "directory-tree": "^3.5.2", "directory-tree-webpack-plugin": "^1.0.3", - "duplexer": "^0.1.1", - "eslint": "^9.16.0", + "duplexer": "^0.1.2", + "eslint": "^9.17.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-cypress": "^4.1.0", "eslint-plugin-mdx": "^3.1.5", - "eslint-plugin-react": "^7.37.2", + "eslint-plugin-react": "^7.37.3", "eslint-plugin-react-hooks": "^5.1.0", "front-matter": "^4.0.2", "github-slugger": "^2.0.0", - "globals": "^15.13.0", + "globals": "^15.14.0", "html-webpack-plugin": "^5.6.3", "http-server": "^14.1.1", "husky": "^9.1.7", "hyperlink": "^5.0.4", "jest": "^29.7.0", "lightningcss": "^1.28.2", - "lint-staged": "^15.2.10", + "lint-staged": "^15.3.0", "lodash": "^4.17.21", "markdownlint-cli": "^0.43.0", "mdast-util-to-string": "^4.0.0", "mini-css-extract-plugin": "^2.9.2", "mkdirp": "^3.0.1", - "modularscale-sass": "^3.0.3", - "npm-run-all": "^4.1.1", + "modularscale-sass": "^3.0.10", + "npm-run-all": "^4.1.5", "postcss": "^8.4.49", "postcss-loader": "^8.1.1", "prettier": "^3.4.2", - "react-refresh": "^0.14.2", + "react-refresh": "^0.16.0", "redirect-webpack-plugin": "^1.0.0", "remark": "^15.0.1", - "remark-autolink-headings": "7.0.1", + "remark-autolink-headings": "8.0.0", "remark-emoji": "^5.0.1", "remark-extract-anchors": "1.1.1", "remark-frontmatter": "^5.0.0", @@ -134,38 +136,38 @@ "remark-html": "^16.0.1", "remark-refractor": "montogeek/remark-refractor", "rimraf": "^6.0.1", - "sass": "^1.79.5", + "sass": "^1.83.1", "sass-loader": "^16.0.4", "sirv-cli": "^3.0.0", - "sitemap-static": "^0.4.2", + "sitemap-static": "^0.4.4", "start-server-and-test": "^2.0.9", - "static-site-generator-webpack-plugin": "^3.4.1", + "static-site-generator-webpack-plugin": "^3.4.2", "style-loader": "^4.0.0", - "tailwindcss": "^3.4.16", + "tailwindcss": "^3.4.17", "tap-spot": "^1.1.2", "unist-util-visit": "^5.0.0", "webpack": "^5.97.1", "webpack-bundle-analyzer": "^4.10.2", - "webpack-cli": "^5.1.4", - "webpack-dev-server": "^5.1.0", + "webpack-cli": "^6.0.1", + "webpack-dev-server": "^5.2.0", "webpack-merge": "^6.0.1", "workbox-webpack-plugin": "^7.3.0", "yarn-deduplicate": "^6.0.2" }, "dependencies": { - "@docsearch/react": "^3.8.0", + "@docsearch/react": "^3.8.2", "@react-spring/web": "^9.7.5", "path-browserify": "^1.0.1", "prop-types": "^15.8.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^19.0.0", + "react-dom": "^19.0.0", "react-helmet-async": "^2.0.5", "react-icons": "^5.4.0", - "react-router-dom": "^6.28.0", - "react-tiny-popover": "5", + "react-router-dom": "^7.1.1", + "react-tiny-popover": "8", "react-tooltip": "^5.28.0", - "react-use": "^17.5.1", - "react-visibility-sensor": "^5.0.2", + "react-use": "^17.6.0", + "react-visibility-sensor": "^5.1.1", "webpack-pwa-manifest": "^4.3.0", "workbox-window": "^7.3.0" }, diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx index 0642933c6544..ac50bbd5e47c 100644 --- a/src/components/Support/Support.jsx +++ b/src/components/Support/Support.jsx @@ -173,10 +173,10 @@ export default class Support extends Component { {rank === 'backer' ? 'Backers' : rank === 'latest' - ? 'Latest Sponsors' - : `${rank[0].toUpperCase()}${rank.slice(1)} ${ - type === 'monthly' ? 'Monthly ' : '' - }Sponsors`} + ? 'Latest Sponsors' + : `${rank[0].toUpperCase()}${rank.slice(1)} ${ + type === 'monthly' ? 'Monthly ' : '' + }Sponsors`} If you want to run webpack using `npx` please make sure you have `webpack-cli webpack-cli offers a variety of commands to make working with webpack easier. By default webpack ships with -| Command | Usage | Description | -| --------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------- | -| [`build`](#build) | `build\|bundle\|b [entries...] [options]` | Run webpack (default command, can be omitted). | -| [`configtest`](#configtest) | `configtest\|t [config-path]` | Validate a webpack configuration. | -| [`help`](#help) | `help\|h [command] [option]` | Display help for commands and options. | -| [`info`](#info) | `info\|i [options]` | Outputs information about your system. | -| [`serve`](#serve) | `serve\|server\|s [options]` | Run the `webpack-dev-server`. | -| [`version`](#version) | `version\|v [commands...]` | Output the version number of `webpack`, `webpack-cli` and `webpack-dev-server`. | -| [`watch`](#watch) | `watch\|w [entries...] [options]` | Run webpack and watch for files changes. | +| Command | Usage | Description | +| --------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------- | +| [`build`](#build) | `build\|bundle\|b [entries...] [options]` | Run webpack (default command, can be omitted). | +| [`configtest`](#configtest) | `configtest\|t [config-path]` | Validate a webpack configuration. | +| [`help`](#help) | `help\|h [command] [option]` | Display help for commands and options. | +| [`info`](#info) | `info\|i [options]` | Outputs information about your system. | +| [`serve`](#serve) | `serve\|server\|s [options]` | Run the `webpack-dev-server`. | +| [`version`](#version) | `version\|v [commands...]` | Output the version number of `webpack`, `webpack-cli` and `webpack-dev-server`. | +| [`watch`](#watch) | `watch\|w [entries...] [options]` | Run webpack and watch for files changes. | ### Build diff --git a/src/content/comparison.mdx b/src/content/comparison.mdx index 61150db89d8c..8658254f9f94 100644 --- a/src/content/comparison.mdx +++ b/src/content/comparison.mdx @@ -26,14 +26,14 @@ Webpack is not the only module bundler out there. If you are choosing between us | CommonJS `exports` | **yes** | only wrapping in `define` | **yes** | yes | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | yes | | CommonJS `require` | **yes** | only wrapping in `define` | **yes** | yes | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | yes | | CommonJS `require.resolve` | **yes** | no | no | no | no | | -| Concat in require `require("./fi" + "le")` | **yes** | no♦ | no | no | no | | +| Concat in require `require("./fi" + "le")` | **yes** | no♦ | no | no | no | | | Debugging support | **SourceUrl, SourceMaps** | not required | SourceMaps | **SourceUrl, SourceMaps** | **SourceUrl, SourceMaps** | SourceMaps | | Dependencies | 19MB / 127 packages | 11MB / 118 packages | **1.2MB / 1 package** | 26MB / 131 packages | ?MB / 3 packages | | | ES2015 `import`/`export` | **yes** (webpack 2) | no | no | **yes** | **yes** | yes, via [es6 module transpiler](https://github.com/gcollazo/es6-module-transpiler-brunch) | -| Expressions in require (guided) `require("./templates/" + template)` | **yes (all files matching included)** | no♦ | no | no | no | no | -| Expressions in require (free) `require(moduleName)` | with manual configuration | no♦ | no | no | no | | -| Generate a single bundle | **yes** | yes♦ | yes | yes | yes | yes | -| Indirect require `var r = require; r("./file")` | **yes** | no♦ | no | no | no | | +| Expressions in require (guided) `require("./templates/" + template)` | **yes (all files matching included)** | no♦ | no | no | no | no | +| Expressions in require (free) `require(moduleName)` | with manual configuration | no♦ | no | no | no | | +| Generate a single bundle | **yes** | yes♦ | yes | yes | yes | yes | +| Indirect require `var r = require; r("./file")` | **yes** | no♦ | no | no | no | | | Load each file separate | no | yes | no | yes | no | no | | Mangle path names | **yes** | no | partial | yes | not required (path names are not included in the bundle) | no | | Minimizing | [Terser](https://github.com/fabiosantoscode/terser) | uglify, closure compiler | [uglifyify](https://github.com/hughsk/uglifyify) | yes | [uglify-plugin](https://github.com/TrySound/rollup-plugin-uglify) | [UglifyJS-brunch](https://github.com/brunch/uglify-js-brunch) | diff --git a/src/content/configuration/configuration-languages.mdx b/src/content/configuration/configuration-languages.mdx index 7f8052d4538b..92ed78f47f68 100644 --- a/src/content/configuration/configuration-languages.mdx +++ b/src/content/configuration/configuration-languages.mdx @@ -72,7 +72,6 @@ There are three solutions to this issue: - Modify `tsconfig.json` and add settings for `ts-node`. - Install `tsconfig-paths`. - The **first option** is to open your `tsconfig.json` file and look for `compilerOptions`. Set `target` to `"ES5"` and `module` to `"CommonJS"` (or completely remove the `module` option). The **second option** is to add settings for ts-node: @@ -82,7 +81,7 @@ You can keep `"module": "ESNext"` for `tsc`, and if you use webpack, or another ```json { "compilerOptions": { - "module": "ESNext", + "module": "ESNext" }, "ts-node": { "compilerOptions": { diff --git a/src/content/configuration/experiments.mdx b/src/content/configuration/experiments.mdx index 2f893988059d..68678c974cb9 100644 --- a/src/content/configuration/experiments.mdx +++ b/src/content/configuration/experiments.mdx @@ -190,9 +190,9 @@ Enable native CSS support. Note that it's an experimental feature still under de Experimental features: - CSS Modules support: webpack will generate a unique name for each CSS class. Use the `.module.css` extension for CSS Modules. -- Style-specific fields resolution in `package.json` files: - webpack will look for `style` field in `package.json` files and use that if it - exists for imports inside CSS files. +- Style-specific fields resolution in `package.json` + files: webpack will look for `style` field in `package.json` files and use + that if it exists for imports inside CSS files. For example, if you add `@import 'bootstrap';` to your CSS file, webpack will look for `bootstrap` in `node_modules` and use the `style` field in `package.json` from there. If `style` field is not found, webpack will use the `main` field instead to preserve backward compatibility. diff --git a/src/index.jsx b/src/index.jsx index a20164d0408b..603820e0060c 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,5 +1,5 @@ // Import External Dependencies -import ReactDOM from 'react-dom'; +import { createRoot, hydrateRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import AnalyticsRouter from './AnalyticsRouter.jsx'; @@ -13,16 +13,27 @@ import { HelmetProvider } from 'react-helmet-async'; const isProduction = process.env.NODE_ENV === 'production'; const Router = isProduction ? AnalyticsRouter : BrowserRouter; -const render = isProduction ? ReactDOM.hydrate : ReactDOM.render; // Client Side Rendering if (isClient) { - render( - - - - - , - document.getElementById('root') - ); + const container = document.getElementById('root'); + + if (isProduction) { + hydrateRoot( + container, + + + + + + ); + } else { + createRoot(container).render( + + + + + + ); + } } diff --git a/src/styles/partials/_vars.scss b/src/styles/partials/_vars.scss index 289f25568fd2..380140dd3a34 100644 --- a/src/styles/partials/_vars.scss +++ b/src/styles/partials/_vars.scss @@ -18,11 +18,17 @@ $screens: ( medium: 768px, ); -$font-stack-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, - 'Segoe UI', Helvetica, Arial, sans-serif; +$font-stack-body: + 'Source Sans Pro', + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Helvetica, + Arial, + sans-serif; $font-stack-heading: 'Source Serif Pro', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; -$font-stack-code: 'Source Code Pro', Consolas, 'Liberation Mono', Menlo, Courier, - monospace; +$font-stack-code: 'Source Code Pro', Consolas, 'Liberation Mono', Menlo, + Courier, monospace; $text-color-highlight: lighten(map-get($colors, denim), 5%);