diff --git a/core/lib/stack-packs.js b/core/lib/stack-packs.js index a72e51bc7461..c37df00f9ae1 100644 --- a/core/lib/stack-packs.js +++ b/core/lib/stack-packs.js @@ -117,7 +117,11 @@ function getStackPacks(pageStacks) { }); } - return packs; + return packs.sort((a, b) => { + const aVal = stackPacksToInclude.findIndex(p => p.packId === a.id); + const bVal = stackPacksToInclude.findIndex(p => p.packId === b.id); + return aVal - bVal; + }); } export { diff --git a/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json b/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json index 71e63fb80294..fa64b7813337 100644 --- a/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json +++ b/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json @@ -4240,20 +4240,6 @@ } }, "stackPacks": [ - { - "id": "react", - "title": "React", - "iconDataURL": "data:image/svg+xml,", - "descriptions": { - "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", - "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", - "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).", - "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).", - "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).", - "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)", - "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance." - } - }, { "id": "next.js", "title": "Next.js", @@ -4272,6 +4258,20 @@ "prioritize-lcp-image": "Use the `next/image` component and set \"priority\" to true to preload LCP image. [Learn more](https://nextjs.org/docs/api-reference/next/image#priority).", "unsized-images": "Use the `next/image` component to make sure images are always sized appropriately. [Learn more](https://nextjs.org/docs/api-reference/next/image#width)." } + }, + { + "id": "react", + "title": "React", + "iconDataURL": "data:image/svg+xml,", + "descriptions": { + "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", + "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", + "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).", + "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).", + "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).", + "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)", + "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance." + } } ], "entities": [ @@ -7686,62 +7686,62 @@ "core/config/default-config.js | bestPracticesGeneralGroupTitle": [ "categoryGroups[best-practices-general].title" ], - "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [ - "stackPacks[0].descriptions[unminified-css]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [ - "stackPacks[0].descriptions[unminified-javascript]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [ - "stackPacks[0].descriptions[unused-javascript]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [ - "stackPacks[0].descriptions[server-response-time]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [ - "stackPacks[0].descriptions.redirects" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [ - "stackPacks[0].descriptions[user-timings]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [ - "stackPacks[0].descriptions[dom-size]" - ], "node_modules/lighthouse-stack-packs/packs/next.js.js | unused-css-rules": [ - "stackPacks[1].descriptions[unused-css-rules]" + "stackPacks[0].descriptions[unused-css-rules]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | modern-image-formats": [ - "stackPacks[1].descriptions[modern-image-formats]" + "stackPacks[0].descriptions[modern-image-formats]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | offscreen-images": [ - "stackPacks[1].descriptions[offscreen-images]" + "stackPacks[0].descriptions[offscreen-images]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | render-blocking-resources": [ - "stackPacks[1].descriptions[render-blocking-resources]" + "stackPacks[0].descriptions[render-blocking-resources]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | unused-javascript": [ - "stackPacks[1].descriptions[unused-javascript]" + "stackPacks[0].descriptions[unused-javascript]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-long-cache-ttl": [ - "stackPacks[1].descriptions[uses-long-cache-ttl]" + "stackPacks[0].descriptions[uses-long-cache-ttl]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-optimized-images": [ - "stackPacks[1].descriptions[uses-optimized-images]" + "stackPacks[0].descriptions[uses-optimized-images]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-text-compression": [ - "stackPacks[1].descriptions[uses-text-compression]" + "stackPacks[0].descriptions[uses-text-compression]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-responsive-images": [ - "stackPacks[1].descriptions[uses-responsive-images]" + "stackPacks[0].descriptions[uses-responsive-images]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | user-timings": [ - "stackPacks[1].descriptions[user-timings]" + "stackPacks[0].descriptions[user-timings]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | prioritize-lcp-image": [ - "stackPacks[1].descriptions[prioritize-lcp-image]" + "stackPacks[0].descriptions[prioritize-lcp-image]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | unsized-images": [ - "stackPacks[1].descriptions[unsized-images]" + "stackPacks[0].descriptions[unsized-images]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [ + "stackPacks[1].descriptions[unminified-css]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [ + "stackPacks[1].descriptions[unminified-javascript]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [ + "stackPacks[1].descriptions[unused-javascript]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [ + "stackPacks[1].descriptions[server-response-time]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [ + "stackPacks[1].descriptions.redirects" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [ + "stackPacks[1].descriptions[user-timings]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [ + "stackPacks[1].descriptions[dom-size]" ] } } @@ -14367,20 +14367,6 @@ } }, "stackPacks": [ - { - "id": "react", - "title": "React", - "iconDataURL": "data:image/svg+xml,", - "descriptions": { - "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", - "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", - "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).", - "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).", - "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).", - "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)", - "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance." - } - }, { "id": "next.js", "title": "Next.js", @@ -14399,6 +14385,20 @@ "prioritize-lcp-image": "Use the `next/image` component and set \"priority\" to true to preload LCP image. [Learn more](https://nextjs.org/docs/api-reference/next/image#priority).", "unsized-images": "Use the `next/image` component to make sure images are always sized appropriately. [Learn more](https://nextjs.org/docs/api-reference/next/image#width)." } + }, + { + "id": "react", + "title": "React", + "iconDataURL": "data:image/svg+xml,", + "descriptions": { + "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", + "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", + "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).", + "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).", + "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).", + "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)", + "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance." + } } ], "fullPageScreenshot": { @@ -16322,62 +16322,62 @@ "core/config/default-config.js | bestPracticesGeneralGroupTitle": [ "categoryGroups[best-practices-general].title" ], - "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [ - "stackPacks[0].descriptions[unminified-css]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [ - "stackPacks[0].descriptions[unminified-javascript]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [ - "stackPacks[0].descriptions[unused-javascript]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [ - "stackPacks[0].descriptions[server-response-time]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [ - "stackPacks[0].descriptions.redirects" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [ - "stackPacks[0].descriptions[user-timings]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [ - "stackPacks[0].descriptions[dom-size]" - ], "node_modules/lighthouse-stack-packs/packs/next.js.js | unused-css-rules": [ - "stackPacks[1].descriptions[unused-css-rules]" + "stackPacks[0].descriptions[unused-css-rules]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | modern-image-formats": [ - "stackPacks[1].descriptions[modern-image-formats]" + "stackPacks[0].descriptions[modern-image-formats]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | offscreen-images": [ - "stackPacks[1].descriptions[offscreen-images]" + "stackPacks[0].descriptions[offscreen-images]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | render-blocking-resources": [ - "stackPacks[1].descriptions[render-blocking-resources]" + "stackPacks[0].descriptions[render-blocking-resources]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | unused-javascript": [ - "stackPacks[1].descriptions[unused-javascript]" + "stackPacks[0].descriptions[unused-javascript]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-long-cache-ttl": [ - "stackPacks[1].descriptions[uses-long-cache-ttl]" + "stackPacks[0].descriptions[uses-long-cache-ttl]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-optimized-images": [ - "stackPacks[1].descriptions[uses-optimized-images]" + "stackPacks[0].descriptions[uses-optimized-images]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-text-compression": [ - "stackPacks[1].descriptions[uses-text-compression]" + "stackPacks[0].descriptions[uses-text-compression]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-responsive-images": [ - "stackPacks[1].descriptions[uses-responsive-images]" + "stackPacks[0].descriptions[uses-responsive-images]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | user-timings": [ - "stackPacks[1].descriptions[user-timings]" + "stackPacks[0].descriptions[user-timings]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | prioritize-lcp-image": [ - "stackPacks[1].descriptions[prioritize-lcp-image]" + "stackPacks[0].descriptions[prioritize-lcp-image]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | unsized-images": [ - "stackPacks[1].descriptions[unsized-images]" + "stackPacks[0].descriptions[unsized-images]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [ + "stackPacks[1].descriptions[unminified-css]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [ + "stackPacks[1].descriptions[unminified-javascript]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [ + "stackPacks[1].descriptions[unused-javascript]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [ + "stackPacks[1].descriptions[server-response-time]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [ + "stackPacks[1].descriptions.redirects" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [ + "stackPacks[1].descriptions[user-timings]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [ + "stackPacks[1].descriptions[dom-size]" ] } } @@ -20642,20 +20642,6 @@ } }, "stackPacks": [ - { - "id": "react", - "title": "React", - "iconDataURL": "data:image/svg+xml,", - "descriptions": { - "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", - "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", - "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).", - "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).", - "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).", - "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)", - "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance." - } - }, { "id": "next.js", "title": "Next.js", @@ -20674,6 +20660,20 @@ "prioritize-lcp-image": "Use the `next/image` component and set \"priority\" to true to preload LCP image. [Learn more](https://nextjs.org/docs/api-reference/next/image#priority).", "unsized-images": "Use the `next/image` component to make sure images are always sized appropriately. [Learn more](https://nextjs.org/docs/api-reference/next/image#width)." } + }, + { + "id": "react", + "title": "React", + "iconDataURL": "data:image/svg+xml,", + "descriptions": { + "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", + "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).", + "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).", + "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).", + "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).", + "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)", + "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance." + } } ], "entities": [ @@ -24078,62 +24078,62 @@ "core/config/default-config.js | bestPracticesGeneralGroupTitle": [ "categoryGroups[best-practices-general].title" ], - "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [ - "stackPacks[0].descriptions[unminified-css]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [ - "stackPacks[0].descriptions[unminified-javascript]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [ - "stackPacks[0].descriptions[unused-javascript]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [ - "stackPacks[0].descriptions[server-response-time]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [ - "stackPacks[0].descriptions.redirects" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [ - "stackPacks[0].descriptions[user-timings]" - ], - "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [ - "stackPacks[0].descriptions[dom-size]" - ], "node_modules/lighthouse-stack-packs/packs/next.js.js | unused-css-rules": [ - "stackPacks[1].descriptions[unused-css-rules]" + "stackPacks[0].descriptions[unused-css-rules]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | modern-image-formats": [ - "stackPacks[1].descriptions[modern-image-formats]" + "stackPacks[0].descriptions[modern-image-formats]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | offscreen-images": [ - "stackPacks[1].descriptions[offscreen-images]" + "stackPacks[0].descriptions[offscreen-images]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | render-blocking-resources": [ - "stackPacks[1].descriptions[render-blocking-resources]" + "stackPacks[0].descriptions[render-blocking-resources]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | unused-javascript": [ - "stackPacks[1].descriptions[unused-javascript]" + "stackPacks[0].descriptions[unused-javascript]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-long-cache-ttl": [ - "stackPacks[1].descriptions[uses-long-cache-ttl]" + "stackPacks[0].descriptions[uses-long-cache-ttl]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-optimized-images": [ - "stackPacks[1].descriptions[uses-optimized-images]" + "stackPacks[0].descriptions[uses-optimized-images]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-text-compression": [ - "stackPacks[1].descriptions[uses-text-compression]" + "stackPacks[0].descriptions[uses-text-compression]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | uses-responsive-images": [ - "stackPacks[1].descriptions[uses-responsive-images]" + "stackPacks[0].descriptions[uses-responsive-images]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | user-timings": [ - "stackPacks[1].descriptions[user-timings]" + "stackPacks[0].descriptions[user-timings]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | prioritize-lcp-image": [ - "stackPacks[1].descriptions[prioritize-lcp-image]" + "stackPacks[0].descriptions[prioritize-lcp-image]" ], "node_modules/lighthouse-stack-packs/packs/next.js.js | unsized-images": [ - "stackPacks[1].descriptions[unsized-images]" + "stackPacks[0].descriptions[unsized-images]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [ + "stackPacks[1].descriptions[unminified-css]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [ + "stackPacks[1].descriptions[unminified-javascript]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [ + "stackPacks[1].descriptions[unused-javascript]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [ + "stackPacks[1].descriptions[server-response-time]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [ + "stackPacks[1].descriptions.redirects" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [ + "stackPacks[1].descriptions[user-timings]" + ], + "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [ + "stackPacks[1].descriptions[dom-size]" ] } } diff --git a/core/test/lib/stack-packs-test.js b/core/test/lib/stack-packs-test.js index b15985e36590..1c563605c52c 100644 --- a/core/test/lib/stack-packs-test.js +++ b/core/test/lib/stack-packs-test.js @@ -7,7 +7,7 @@ import lighthouseStackPacksDep from 'lighthouse-stack-packs'; import {initializeConfig} from '../../config/config.js'; -import {stackPacksToInclude} from '../../lib/stack-packs.js'; +import {stackPacksToInclude, getStackPacks} from '../../lib/stack-packs.js'; async function getAuditIds() { const {resolvedConfig} = await initializeConfig('navigation'); @@ -21,6 +21,27 @@ describe('stack-packs lib', () => { .map(p => p.id); expect(result).toEqual([]); }); + + it('returns packs from page stacks', () => { + expect(getStackPacks([])).toEqual([]); + expect(getStackPacks([{detector: 'js', id: 'i-dont-know-you'}])).toEqual([]); + + const packs = getStackPacks([ + {detector: 'js', id: 'wordpress'}, + {detector: 'js', id: 'react'}, + ]); + + expect(packs.map(pack => pack.id)).toEqual(['wordpress', 'react']); + }); + + it('returns packs from page stacks in order defined by us', () => { + const packs = getStackPacks([ + {detector: 'js', id: 'react'}, + {detector: 'js', id: 'wordpress'}, + ]); + + expect(packs.map(pack => pack.id)).toEqual(['wordpress', 'react']); + }); }); // These tests summarize the contents of the lighthouse-stack-packs package.