From 98ae20ee4ab0cf23b18003e3b48b2c722b069c56 Mon Sep 17 00:00:00 2001 From: Retype GitHub Action Date: Mon, 16 Dec 2024 19:33:37 +0000 Subject: [PATCH] Refreshes Retype-generated documentation. Process triggered by patricklafrance. --- 404.html | 8 +++--- about/index.html | 8 +++--- browserslist/configure-project/index.html | 10 ++++---- browserslist/index.html | 10 ++++---- eslint/advanced-composition/index.html | 10 ++++---- eslint/custom-configuration/index.html | 10 ++++---- eslint/index.html | 8 +++--- eslint/integrate-vscode/index.html | 10 ++++---- eslint/setup-monorepo/index.html | 10 ++++---- eslint/setup-polyrepo/index.html | 10 ++++---- index.html | 8 +++--- postcss/configure-project/index.html | 10 ++++---- postcss/index.html | 8 +++--- resources/js/config.js | 2 +- resources/js/search.json | 2 +- rsbuild/configure-build/index.html | 16 ++++++++---- rsbuild/configure-dev/index.html | 16 ++++++++---- rsbuild/configure-storybook/index.html | 10 ++++---- rsbuild/index.html | 8 +++--- rsbuild/migrate-from-webpack/index.html | 27 +++++++++++++++------ samples/index.html | 8 +++--- sitemap.xml.gz | Bin 640 -> 639 bytes stylelint/custom-configuration/index.html | 10 ++++---- stylelint/index.html | 8 +++--- stylelint/integrate-vscode/index.html | 10 ++++---- stylelint/setup-monorepo/index.html | 10 ++++---- stylelint/setup-polyrepo/index.html | 10 ++++---- swc/configure-build/index.html | 10 ++++---- swc/configure-dev/index.html | 10 ++++---- swc/configure-jest/index.html | 10 ++++---- swc/index.html | 8 +++--- tsup/configure-build/index.html | 10 ++++---- tsup/configure-dev/index.html | 10 ++++---- tsup/index.html | 8 +++--- typescript/advanced-composition/index.html | 10 ++++---- typescript/custom-configuration/index.html | 10 ++++---- typescript/index.html | 8 +++--- typescript/setup-monorepo/index.html | 10 ++++---- typescript/setup-polyrepo/index.html | 10 ++++---- webpack/configure-build/index.html | 10 ++++---- webpack/configure-dev/index.html | 10 ++++---- webpack/index.html | 8 +++--- webpack/transformer-utilities/index.html | 10 ++++---- 43 files changed, 216 insertions(+), 193 deletions(-) diff --git a/404.html b/404.html index f6056be5..669c1922 100644 --- a/404.html +++ b/404.html @@ -4,7 +4,7 @@ - + @@ -29,11 +29,11 @@ - + - + - + diff --git a/about/index.html b/about/index.html index 93562508..6db7f40a 100644 --- a/about/index.html +++ b/about/index.html @@ -4,7 +4,7 @@ - + @@ -32,11 +32,11 @@ - + - + - + diff --git a/browserslist/configure-project/index.html b/browserslist/configure-project/index.html index b0d267f3..fae03cbe 100644 --- a/browserslist/configure-project/index.html +++ b/browserslist/configure-project/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/browserslist/index.html b/browserslist/index.html index f47c9338..a4edf3b2 100644 --- a/browserslist/index.html +++ b/browserslist/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/eslint/advanced-composition/index.html b/eslint/advanced-composition/index.html index addc57f2..a592b6c8 100644 --- a/eslint/advanced-composition/index.html +++ b/eslint/advanced-composition/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/eslint/custom-configuration/index.html b/eslint/custom-configuration/index.html index a73ea56a..455cb363 100644 --- a/eslint/custom-configuration/index.html +++ b/eslint/custom-configuration/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/eslint/index.html b/eslint/index.html index b4b8b6d3..0a16ede8 100644 --- a/eslint/index.html +++ b/eslint/index.html @@ -4,7 +4,7 @@ - + @@ -32,11 +32,11 @@ - + - + - + diff --git a/eslint/integrate-vscode/index.html b/eslint/integrate-vscode/index.html index b769c63b..a5be6569 100644 --- a/eslint/integrate-vscode/index.html +++ b/eslint/integrate-vscode/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/eslint/setup-monorepo/index.html b/eslint/setup-monorepo/index.html index 4cbd710e..bb70dec0 100644 --- a/eslint/setup-monorepo/index.html +++ b/eslint/setup-monorepo/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/eslint/setup-polyrepo/index.html b/eslint/setup-polyrepo/index.html index 51216965..22564861 100644 --- a/eslint/setup-polyrepo/index.html +++ b/eslint/setup-polyrepo/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/index.html b/index.html index b5d06df0..c5eb4792 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + @@ -34,11 +34,11 @@ - + - + - + diff --git a/postcss/configure-project/index.html b/postcss/configure-project/index.html index 0f5b00a9..7b63c520 100644 --- a/postcss/configure-project/index.html +++ b/postcss/configure-project/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/postcss/index.html b/postcss/index.html index 62eaabc7..50ec37dc 100644 --- a/postcss/index.html +++ b/postcss/index.html @@ -4,7 +4,7 @@ - + @@ -32,11 +32,11 @@ - + - + - + diff --git a/resources/js/config.js b/resources/js/config.js index 5cd9da1d..970ada26 100644 --- a/resources/js/config.js +++ b/resources/js/config.js @@ -1 +1 @@ -var __DOCS_CONFIG__ = {"id":"IuUq+lRpVpirGwCdZCWZ2pdt123a3tn0ZtF","key":"LNw0oynJV0SbX38BWsXg5VUY8qabrAI1MOirFYfFbjk.ObYG1nsJEtzw8W4T5QdwYbCg0Xv3/XVsOYahX46x7t+x5m3bAqoiBalQm/ga6KsYQeVqj8MvVs0Sty9W5zYy5A.300070","base":"/wl-web-configs/","host":"gsoft-inc.github.io","version":"1.0.0","useRelativePaths":true,"documentName":"index.html","appendDocumentName":false,"trailingSlash":true,"preloadSearch":false,"cacheBustingToken":"3.6.0.787638386726","cacheBustingStrategy":"query","sidebarFilterPlaceholder":"Filter","toolbarFilterPlaceholder":"Filter","showSidebarFilter":true,"filterNotFoundMsg":"No member names found containing the query \"{query}\"","maxHistoryItems":15,"homeIcon":"","access":[{"value":"public","label":"Public"},{"value":"protected","label":"Protected"}],"toolbarLinks":[{"id":"fields","label":"Fields"},{"id":"properties","label":"Properties"},{"id":"methods","label":"Methods"},{"id":"events","label":"Events"}],"sidebar":[{"n":"/","l":"Getting started","s":""},{"n":"browserslist","l":"Browserslist","o":true,"i":[{"n":"configure-project","l":"Configure a project"}],"s":"static/browserslist.svg"},{"n":"eslint","l":"ES​Lint","o":true,"i":[{"n":"setup-polyrepo","l":"Setup a polyrepo"},{"n":"setup-monorepo","l":"Setup a monorepo"},{"n":"custom-configuration","l":"Custom configuration"},{"n":"advanced-composition","l":"Advanced composition"},{"n":"integrate-vscode","l":"Integrate with VS Code"}],"s":"static/eslint.svg"},{"n":"stylelint","l":"Stylelint","o":true,"i":[{"n":"setup-polyrepo","l":"Setup a polyrepo"},{"n":"setup-monorepo","l":"Setup a monorepo"},{"n":"custom-configuration","l":"Custom configuration"},{"n":"integrate-vscode","l":"Integrate with VS Code"}],"s":"static/stylelint.svg"},{"n":"typescript","l":"Typescript","o":true,"i":[{"n":"setup-polyrepo","l":"Setup a polyrepo"},{"n":"setup-monorepo","l":"Setup a monorepo"},{"n":"custom-configuration","l":"Custom configuration"},{"n":"advanced-composition","l":"Advanced composition"}],"s":"static/typescript.svg"},{"n":"swc","l":"SWC","o":true,"i":[{"n":"configure-dev","l":"Configure for development"},{"n":"configure-build","l":"Configure for build"},{"n":"configure-jest","l":"Configure for Jest"}],"s":"static/swc.svg"},{"n":"rsbuild","l":"Rsbuild","o":true,"i":[{"n":"configure-dev","l":"Configure for development"},{"n":"configure-build","l":"Configure for build"},{"n":"configure-storybook","l":"Configure for Storybook"},{"n":"migrate-from-webpack","l":"Migrate from Webpack"}],"s":"static/rsbuild.svg"},{"n":"tsup","o":true,"i":[{"n":"configure-dev","l":"Configure for development"},{"n":"configure-build","l":"Configure for build"}],"s":"static/tsup.svg"},{"n":"postcss","l":"Post​CSS","o":true,"i":[{"n":"configure-project","l":"Configure a project"}],"s":"static/postcss.svg"},{"n":"webpack","o":true,"i":[{"n":"configure-dev","l":"Configure for development"},{"n":"configure-build","l":"Configure for build"},{"n":"transformer-utilities","l":"Transformer utilities"}],"s":"static/webpack.svg"},{"n":"samples","l":"Samples","s":""},{"n":"about","l":"About","v":false}],"search":{"mode":0,"minChars":2,"maxResults":20,"placeholder":"Search","hotkeys":["k"],"noResultsFoundMsg":"Sorry, no results found.","recognizeLanguages":true,"languages":[0],"preload":false},"resources":{"History_Title_Label":"History","History_ClearLink_Label":"Clear","History_NoHistory_Label":"No history items","API_AccessFilter_Label":"Access","API_ParameterSection_Label":"PARAMETERS","API_SignatureSection_Label":"SIGNATURE","API_CopyHint_Label":"Copy","API_CopyNameHint_Label":"Copy name","API_CopyLinkHint_Label":"Copy link","API_CopiedAckHint_Label":"Copied!","API_MoreOverloads_Label":"more","API_MoreDropdownItems_Label":"More","API_OptionalParameter_Label":"optional","API_DefaultParameterValue_Label":"Default value","API_InheritedFilter_Label":"Inherited","Search_Input_Placeholder":"Search","Toc_Contents_Label":"Contents","Toc_RelatedClasses_Label":"Related Classes","History_JustNowTime_Label":"just now","History_AgoTime_Label":"ago","History_YearTime_Label":"y","History_MonthTime_Label":"mo","History_DayTime_Label":"d","History_HourTime_Label":"h","History_MinuteTime_Label":"m","History_SecondTime_Label":"s"}}; +var __DOCS_CONFIG__ = {"id":"3Jw/GxxUYVJYYeKxhRK3DhEHzGDaFm123aO","key":"LMJIGfMfyzJrb1z5oQZFMmkwnDWlNJnD6mnXDKSqunU.P5xNZhpLC1zjFxd4KiZDEzEnR1hxBJoL0dKK0bbG/h4ZRiTDHw9bEy4TijVdpL2zh8tHjNTyT8k0/3PQjF/AOA.300076","base":"/wl-web-configs/","host":"gsoft-inc.github.io","version":"1.0.0","useRelativePaths":true,"documentName":"index.html","appendDocumentName":false,"trailingSlash":true,"preloadSearch":false,"cacheBustingToken":"3.6.0.787692808272","cacheBustingStrategy":"query","sidebarFilterPlaceholder":"Filter","toolbarFilterPlaceholder":"Filter","showSidebarFilter":true,"filterNotFoundMsg":"No member names found containing the query \"{query}\"","maxHistoryItems":15,"homeIcon":"","access":[{"value":"public","label":"Public"},{"value":"protected","label":"Protected"}],"toolbarLinks":[{"id":"fields","label":"Fields"},{"id":"properties","label":"Properties"},{"id":"methods","label":"Methods"},{"id":"events","label":"Events"}],"sidebar":[{"n":"/","l":"Getting started","s":""},{"n":"browserslist","l":"Browserslist","o":true,"i":[{"n":"configure-project","l":"Configure a project"}],"s":"static/browserslist.svg"},{"n":"eslint","l":"ES​Lint","o":true,"i":[{"n":"setup-polyrepo","l":"Setup a polyrepo"},{"n":"setup-monorepo","l":"Setup a monorepo"},{"n":"custom-configuration","l":"Custom configuration"},{"n":"advanced-composition","l":"Advanced composition"},{"n":"integrate-vscode","l":"Integrate with VS Code"}],"s":"static/eslint.svg"},{"n":"stylelint","l":"Stylelint","o":true,"i":[{"n":"setup-polyrepo","l":"Setup a polyrepo"},{"n":"setup-monorepo","l":"Setup a monorepo"},{"n":"custom-configuration","l":"Custom configuration"},{"n":"integrate-vscode","l":"Integrate with VS Code"}],"s":"static/stylelint.svg"},{"n":"typescript","l":"Typescript","o":true,"i":[{"n":"setup-polyrepo","l":"Setup a polyrepo"},{"n":"setup-monorepo","l":"Setup a monorepo"},{"n":"custom-configuration","l":"Custom configuration"},{"n":"advanced-composition","l":"Advanced composition"}],"s":"static/typescript.svg"},{"n":"swc","l":"SWC","o":true,"i":[{"n":"configure-dev","l":"Configure for development"},{"n":"configure-build","l":"Configure for build"},{"n":"configure-jest","l":"Configure for Jest"}],"s":"static/swc.svg"},{"n":"rsbuild","l":"Rsbuild","o":true,"i":[{"n":"configure-dev","l":"Configure for development"},{"n":"configure-build","l":"Configure for build"},{"n":"configure-storybook","l":"Configure for Storybook"},{"n":"migrate-from-webpack","l":"Migrate from Webpack"}],"s":"static/rsbuild.svg"},{"n":"tsup","o":true,"i":[{"n":"configure-dev","l":"Configure for development"},{"n":"configure-build","l":"Configure for build"}],"s":"static/tsup.svg"},{"n":"postcss","l":"Post​CSS","o":true,"i":[{"n":"configure-project","l":"Configure a project"}],"s":"static/postcss.svg"},{"n":"webpack","o":true,"i":[{"n":"configure-dev","l":"Configure for development"},{"n":"configure-build","l":"Configure for build"},{"n":"transformer-utilities","l":"Transformer utilities"}],"s":"static/webpack.svg"},{"n":"samples","l":"Samples","s":""},{"n":"about","l":"About","v":false}],"search":{"mode":0,"minChars":2,"maxResults":20,"placeholder":"Search","hotkeys":["k"],"noResultsFoundMsg":"Sorry, no results found.","recognizeLanguages":true,"languages":[0],"preload":false},"resources":{"History_Title_Label":"History","History_ClearLink_Label":"Clear","History_NoHistory_Label":"No history items","API_AccessFilter_Label":"Access","API_ParameterSection_Label":"PARAMETERS","API_SignatureSection_Label":"SIGNATURE","API_CopyHint_Label":"Copy","API_CopyNameHint_Label":"Copy name","API_CopyLinkHint_Label":"Copy link","API_CopiedAckHint_Label":"Copied!","API_MoreOverloads_Label":"more","API_MoreDropdownItems_Label":"More","API_OptionalParameter_Label":"optional","API_DefaultParameterValue_Label":"Default value","API_InheritedFilter_Label":"Inherited","Search_Input_Placeholder":"Search","Toc_Contents_Label":"Contents","Toc_RelatedClasses_Label":"Related Classes","History_JustNowTime_Label":"just now","History_AgoTime_Label":"ago","History_YearTime_Label":"y","History_MonthTime_Label":"mo","History_DayTime_Label":"d","History_HourTime_Label":"h","History_MinuteTime_Label":"m","History_SecondTime_Label":"s"}}; diff --git a/resources/js/search.json b/resources/js/search.json index 229e3f84..21821191 100644 --- a/resources/js/search.json +++ b/resources/js/search.json @@ -1 +1 @@ -[[{"l":"Getting started","p":["Welcome to @workleap/web-configs, a collection of configuration libraries for building web applications at Workleap. On this getting started page, you'll find an overview of the project and a list of supported tools."]},{"i":"why-we-built-these-libraries","l":"Why we built these libraries?","p":["Starting a new web application is still an arduous task. There are so many tools to choose from, learn, install and configure, it can be daunting.","For an organization like Workleap, with a large suite of products, it doesn't make sense to start over every time we invest in a new idea or add a new vertical to an existing product. Developers working on a new project shouldn't spend their first day's figuring out which ESLint rules to enable/disable, or how to transpile their React code, they should rather focus on writing features code."]},{"l":"Filling the gap","p":["While a collection of common configurations gets us closer to that goal, on their own, configuration libraries are not enough to reach it. There is still a need to install and assemble those configurations correctly in the new application, which can also be a challenge. To fill this gap, we choosed to invest as well in a CLI to scaffold new web applications and libraries."]},{"l":"Best of both worlds","p":["With the CLI, developers can generate fully configured web applications in a few minutes. However, contrary to configuration libraries, a CLI alone is only good at creating the initial files of an application, it doesn't help with the maintenance or the adoption of new features offered by tools over time.","That's why we need both, there's a strong synergy between a collection of configuration libraries and a CLI.","With configuration libraries distributed through NPM packages and installed with a CLI, when a new feature is available for a tool, the configuration libraries maintainers can spend time learning the new feature, making the necessary changes, and distributing the changes with a new version of the package. Then, at their convenience, product teams can adopt the changes by bumping the configuration library package version in their respective application.","We hope that introducing CLI with a collection of configuration libraries will facilitate the creation and maintenance of front-end projects."]},{"l":"Guiding principles","p":["While developing the configuration libraries, we kept one guiding principle in mind, no locked in❤️✌️. We truly hope that the default configurations will satisfy your application needs, but if it doesn't, there will always be an easy way to extend or override the default configuration."]},{"l":"Target environment","p":["The majority of the shared tooling configurations targets ESM and the latest ECMAScript version (ESNext). If you are in the process of migrating an existing project to workleap/web-configs, and would rather delay transitioning to ESM, have a look at the Target environment section of each tool for additional information about how to support non ESM compliant solutions."]},{"l":"Supported tools","p":["Name","NPM","Documentation","Browserslist","npm version","Getting started","ESLint","Stylelint","Typescript","SWC","Rsbuild","tsup","PostCSS","webpack"]}],[{"l":"Browserslist"},{"l":"Supported browsers","p":["You can find an exhaustive list of the browser versions included with this shared configuration on https://browsersl.ist.","Alternatively, to list the browser versions supported by a specific configuration file, you can open a terminal at the root of any project including a .browserslistrc file and execute the following command:"]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure your project."]}],[{"l":"Configure a project","p":["Only setup Browserslist for projects that are emitting application bundles. For example, a library project shouldn't include Browserslist but a web application project should."]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure Browserslist","p":["First, create a configuration file named .browserslistrc at the root of the project:","Then, open the newly created file and extend the default configuration with the shared configuration provided by @workleap/browserslist-config:"]},{"l":"Support custom browsers","p":["If you are encountering a situation that is not currently handled by @workleap/browserslist-configs, you can customize your configuration file to extend this library shared configurations with additional browser versions:","Refer to the Browserslist documentation for a full list of available queries."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new Browserslist configuration, open a terminal at the root of the project and execute the following command:","A list of the selected browser versions shoud be outputted to the terminal:"]}],[{"l":"ESLint"},{"l":"By project type configurations","p":["Typically, ESLint shareable configuration libraries are architectured around the idea that shared configurations should be small and composable to accommodate any potential use cases that a development team might encounter.","While composability provides flexibility, it also increases the complexity on the consumer side as they must understand how ESLint cascading and hierarchy works and how to compose the provided shared configurations correctly. It can be frustrating at times when you want to get something up and running quickly.","To improve the experience, rather than delegating the composition of the shared configuration pieces to the consumer, we compose them internally and offer configurations by project type instead.","This way, it's pretty straightforward for the consumer to configure ESLint as it only involves extending a single shared configuration per project and it allows for more accurate defaults and assumptions about the target environment. For advanced users in need of flexibility, the underlying configuration pieces are also available."]},{"i":"shopify-web-configs-example","l":"@shopify/web-configs example","p":["Have a look at Shopify ESLint usage section. To configure ESLint with @shopify/web-configs, a consumer must choose whether he wants rules for es5, esnext, typescript or node, then decide if he should use @babel/eslint-parser or @typescript-eslint/parser.","To make the right choices and assemble the final configuration correctly, a consumer must have niche front-end skills."]},{"l":"Target environment","p":["@workleap/eslint-plugin by project type shared configurations targets the following environment:","ESM / CommonJS","ESNext","Node"]},{"l":"Available configurations","p":["Name","Description","web-application","For web applications developed with React and TypeScript.","react-library","For TypeScript libraries developed with React.","typescript-library","For TypeScript libraries developed without React.","monorepo-workspace","For the workspace configuration of a monorepo solution."]},{"l":"Prettier","p":["For a complete explanation of why we chose to stick with ESLint for stylistic rules rather than migrating to Prettier, read the following article."]},{"l":"Getting started","p":["To get started, choose one of the following scenarios \uD83D\uDC47"]},{"l":"Setup a new project","p":["If you are looking to setup a new polyrepo solution (single project per repository), follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo."]},{"l":"Setup an existing project","p":["If you are migrating an existing polyrepo solution (single project per repository) to workleap/web-configs, follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo.","Once configured, to understand how to adapt @workleap/eslint-plugin default configurations to your codebase while you are completing the migration, have a look at the custom configuration page."]},{"l":"Advanced configuration","p":["If you are encountering a challenging use case making impractical the per project type configurations offered by @workleap/eslint-plugin, have a look at the advanced composition page for documentation about how to compose the underlying configuration pieces."]}],[{"l":"Setup a polyrepo","p":["Execute the following steps to setup ESLint for a polyrepo solution ( single project per repository) \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the solution and install the following packages:"]},{"l":"Configure ESLint","p":["First, create a configuration file named .eslintrc.json at the root of the solution:","Then, open the newly created file and extend the default configuration with one of the shared configurations provided by @workleap/eslint-plugin\uD83D\uDC47"]},{"l":"web-application","p":["For an application developed with TypeScript and React, use the following configuration:"]},{"l":"react-library","p":["For a TypeScript library developed with React, use the following configuration:"]},{"l":"typescript-library","p":["For a TypeScript library developed without React, use the following configuration:"]},{"i":"eslintignore","l":".eslintignore","p":["ESLint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.","To do so, first, create an .eslintignore file at the root of the solution:","Then, open the newly created file and paste the following ignore rules:","While only the .storybook dot folder is listed, you should include any other dot folders that need to be linted."]},{"l":"Configure the indent style","p":["ESLint offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.","To guarantee a consistent indentation, we recommend using EditorConfig on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and VS Code.","First, create a .editorconfig file at the root of the solution:","Then, open the newly created file and paste the following configuration:","Finally, install the EditorConfig.EditorConfig VS Code extension."]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's package.json file:","The script definition may vary depending of your needs and your application configuration. For example, you might want to specify specific file extensions such as --ext .js,.ts,.tsx."]},{"l":"Custom configuration","p":["New projects shouldn't have to customize the default configurations offered by @workleap/eslint-plugin. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new ESLint setup, open a JavaScript file, type invalid code (e.g. var x = 0;), then save. Open a terminal at the root of the solution and execute the CLI script added earlier:","The terminal should output a linting error."]}],[{"l":"Setup a monorepo","p":["This monorepo setup has been tested with PNPM workspaces. You may need a different setup for NPM workspaces or Yarn workspaces because by default, those package managers hoist dependencies rather than installing them in isolation like PNPM.","To lint a monorepo solution ( multiple projects per repository), ESLint must be setuped to lint the files at the root of the solution (the monorepo workspace) and the files of every project of the monorepo. Execute the following steps to setup ESLint for a monorepo solution \uD83D\uDC47"]},{"l":"Setup the workspace"},{"l":"Install the packages","p":["Open a terminal at the root of the solution workspace (the root of the repository) and install the following packages:"]},{"l":"Configure ESLint","p":["First, create a configuration file named .eslintrc.json at the root of the solution workspace:","Then, open the newly created file and extend the default configuration with the monorepo-workspace shared configurations:"]},{"i":"eslintignore","l":".eslintignore","p":["ESLint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.","To do so, first, create a .eslintignore file at the root of the solution workspace:","Then, open the newly created file and paste the following ignore rules:","While only the .storybook dot folder is listed, you should include any other dot folders that need to be linted."]},{"l":"Configure indent style","p":["ESLint offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.","To guarantee a consistent indentation, we recommend using EditorConfig on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and VS Code.","First, create a .editorconfig file at the root of the solution workspace:","Then, open the newly created file and paste the following configuration:"]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace package.json file:","The script definition may vary depending of your needs and your application configuration. For example, you might want to specify specific file extensions such as --ext .js,.ts,.tsx."]},{"l":"Setup a project"},{"l":"Install the package","p":["Open a terminal at the root of the project ( packages/app for this example) and install the following package:"]},{"i":"configure-eslint-1","l":"Configure ESLint","p":["First, create a configuration file named .eslintrc.json at the root of the project:","Then, open the newly created file and extend the default configuration with one of the shared configurations provided by @workleap/eslint-plugin\uD83D\uDC47"]},{"l":"web-application","p":["For an application developed with TypeScript and React, use the following configuration:"]},{"l":"react-library","p":["For a TypeScript library developed with React, use the following configuration:"]},{"l":"typescript-library","p":["For a TypeScript library developed without React, use the following configuration:"]},{"l":"Custom configuration","p":["New projects shouldn't have to customize the default configurations offered by @workleap/eslint-plugin. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new ESLint setup, open a JavaScript file, type invalid code (e.g. var x = 0;), then save. Open a terminal at the root of the solution and execute the CLI script added earlier:","The terminal should output a linting error."]}],[{"l":"Custom configuration","p":["If you are in the process of migrating an existing project to use @workleap/eslint-plugin or encountering a challenging situation that is not currently handled by this library, you might want to customize the default shared configurations.","For a list of the rules included with the default shared configurations, refer to the configuration files in the following folder on GitHub."]},{"l":"Disable a default rule","p":["You can disable a default rule by defining the rule locally with the off value:"]},{"l":"Change a default rule severity","p":["You can update the severity of a rule by defining the rule locally with either the warn or error severity:"]},{"l":"Change a default rule value","p":["You can update a default rule value by defining the rule locally with its new value:","Please, don't update your project configuration to use single quotes \uD83D\uDE05\uD83D\uDE4F"]},{"l":"Add a plugin","p":["You can add configure additional rules from a third party ESLint plugin:"]},{"l":"Start from scratch","p":["If your situation is so challenging that you must start a new configuration from scratch, refer to the advanced composition page."]}],[{"l":"Advanced composition","p":["If the default by project type configurations doesn't fits your needs, rather than writing your own configuration from scratch, you can compose a new one from the underlying configuration pieces of @workleap/eslint-plugin."]},{"l":"Available pieces","p":["Basic rules shared by every configuration.","core","Description","jest","jsx-a11y","mdx","Name","package-json","react","Rules for Jest files using Testing Library.","Rules for Jest files.","Rules for MDX files (used for Storybook MDX stories).","Rules for package.json files.","Rules for React files.","Rules for Storybook story files.","Rules for testing accessibility in React files.","Rules for TypeScript files.","Rules for YAML files.","storybook","testing-library","typescript","yaml"]},{"l":"Compose a configuration","p":["Each configuration piece can be extended individually, or in combination with other pieces, to compose your own custom ESLint configuration."]},{"l":"Single piece","p":["To extend the configuration with a single piece:"]},{"l":"Multiple pieces","p":["To extend the configuration with multiple pieces:"]},{"l":"Lint additional files","p":["The configuration pieces already targets which file extensions their linting rules will be applied to. If you wish to lint additional file extensions for a given piece you can add an ESLint override block:"]}],[{"l":"Integrate with VS Code","p":["ESLint VS Code extension greatly improve the development experience by automatically linting the code as you type and automatically formatting the code according to your ESLint configuration whenever you save."]},{"l":"Install ESLint extension","p":["Open VS Code and install the dbaeumer.vscode-eslint extension."]},{"l":"Configure VS Code","p":["Then, add the following settings to your solution VS Code settings file:"]},{"l":"Install EditorConfig extension","p":["Finally, install the EditorConfig.EditorConfig extension."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["Restart VS Code, open a JavaScript file, type invalid code (e.g. var x = 0;), then save. The code should have been formatted automatically (e.g. const x = 0;)."]}],[{"l":"Stylelint"},{"l":"SCSS support","p":["While SCSS still offers numerous advantages, as we actively work on improving our build time and minimize the number of tools compiling/transpiling frontend code, we choose to move away from Sass and not provide any Stylelint's rules for Sass. If you are still using Sass strictly for nesting, note that native support for nesting is coming soon to CSS."]},{"l":"Embedding Prettier","p":["Since v15.0.0, Stylelint's stylistic rules has been deprecated. The current recommendation is to use Prettier instead to format CSS files.","For that reason, @workleap/stylelint-configs shared configurations includes the stylelint-prettier plugin. Using this plugin, Prettier changes are exposed as Stylelint's rule violations.","Since we choose to stick with ESLint for JavaScript and JSON stylistic rules, a .prettierignore file must be added at the root of the solution to ignore everything but CSS files:","Otherwise, Prettier will also format your .js,.json,.ts files and you'll end up with conflicts between Prettier and ESLint."]},{"l":"Getting started","p":["To get started, choose one of the following scenarios \uD83D\uDC47"]},{"l":"Setup a new project","p":["If you are looking to setup a new polyrepo solution (single project per repository), follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo."]},{"l":"Setup an existing project","p":["If you are migrating an existing polyrepo solution (single project per repository) to workleap/web-configs, follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo.","Once configured, to understand how to adapt @workleap/stylelint-configs default configurations to your codebase while you are completing the migration, have a look at the custom configuration page."]}],[{"l":"Setup a polyrepo","p":["Execute the following steps to setup Stylelint for a polyrepo solution ( single project per repository) \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the solution and install the following packages:"]},{"l":"Configure Stylelint","p":["First, create a configuration file named .stylelintrc.json at the root of the solution:","Then, open the newly created file and extend the default configuration with the shared configurations provided by @workleap/stylelint-configs:"]},{"i":"stylelintignore","l":".stylelintignore","p":["Stylelint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.","To do so, first, create a .stylelintignore file at the root of the solution:","Then, open the newly created file and paste the following ignore rules:"]},{"i":"prettierignore","l":".prettierignore","p":["Since we choose to stick with ESLint for JavaScript and JSON stylistic rules, a .prettierignore file must be added at the root of the solution to ignore everything but CSS files.","To do so, first, create a .prettierignore file at the root of the solution:","Then, open the newly created file and paste the following ignore rules:"]},{"l":"Configure indent style","p":["Prettier offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.","To guarantees a consistent indentation, we recommend using EditorConfig on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including Prettier and VS Code.","First, create a .editorconfig file at the root of the solution:","Then, open the newly created file and paste the following configuration:","Finally, install the EditorConfig.EditorConfig VS Code extension."]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's package.json file:","The script definition may vary depending on your needs and your application configuration. For example, you might want to specify additional file extensions such as **/*.{css,scss,sass}."]},{"l":"Custom configuration","p":["New projects shouldn't have to customize the default configurations offered by @workleap/stylelint-configs. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new setup, open a CSS file, type invalid code (e.g. color: #fff), then save. Open a terminal at the root of the solution and execute the CLI script added earlier:","The terminal should output a linting error."]}],[{"l":"Setup a monorepo","p":["This monorepo setup has been tested with PNPM workspaces. You may need a different setup for NPM workspaces or Yarn workspaces because by default, those package managers hoist dependencies rather than installing them in isolation like PNPM.","To lint a monorepo solution ( multiple projects per repository), Stylelint must be setuped to lint the files at the root of the solution (the monorepo workspace) and the files of every project of the monorepo. Execute the following steps to setup Stylelint for a monorepo solution."]},{"l":"Setup the workspace"},{"l":"Install the packages","p":["Open a terminal at the root of the solution workspace (the root of the repository) and install the following packages:"]},{"l":"Configure Stylelint","p":["First, create a configuration file named .stylelintrc.json at the root of the solution workspace:","Then, open the newly created file and extend the default configuration with the shared configurations provided by @workleap/stylelint-configs:"]},{"i":"stylelintignore","l":".stylelintignore","p":["Stylelint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.","To do so, first, create an .stylelintignore file at the root of the solution workspace:","Then, open the newly created file and paste the following ignore rules:"]},{"i":"prettierignore","l":".prettierignore","p":["Since we choose to stick with ESLint for JavaScript and JSON stylistic rules, a .prettierignore file must be added at the root of the solution workspace to ignore everything but CSS files.","To do so, first, create a .prettierignore file at the root of the solution workspace:","Then, open the newly created file and paste the following ignore rules:"]},{"l":"Configure the indent style","p":["Prettier offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.","To guarantee a consistent indentation, we recommend using EditorConfig on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and VS Code.","First, create a .editorconfig file at the root of the solution workspace:","Then, open the newly created file and paste the following configuration:"]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace package.json file:","The script definition may vary depending on your needs and your application configuration. For example, you might want to specify additional file extensions such as **/*.{css,scss,sass}."]},{"l":"Setup a project"},{"i":"install-the-packages-1","l":"Install the packages","p":["Open a terminal at the root of the project ( packages/app for this example) and install the following package:"]},{"i":"configure-stylelint-1","l":"Configure Stylelint","p":["First, create a configuration file named .stylelintrc.json at the root of the project:","Then, open the newly created file and extend the default configuration with the shared configurations provided by @workleap/stylelint-configs:"]},{"l":"Custom configuration","p":["New projects shouldn't have to customize the default configurations offered by @workleap/stylelint-configs. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new setup, open a CSS file, type invalid code (e.g. color: #fff), then save. Open a terminal at the root of the solution and execute the CLI script added earlier:","The terminal should output a linting error."]}],[{"l":"Custom configuration","p":["If you are in the process of migrating an existing project to use @workleap/stylelint-configs or encountering a challenging situation that is not currently handled by this library, you might want to customize the default shared configurations.","For a list of the rules included with the default shared configurations, refer to the following file on GitHub."]},{"l":"Disable a default rule","p":["You can disable a default rule by defining the rule locally with the null value:"]},{"l":"Change a default rule severity","p":["You can update the severity of a rule by defining the rule locally with either the warn or error severity:"]},{"l":"Change a default rule value","p":["You can update a default rule value by defining the rule locally with its new value:"]},{"l":"Add a plugin","p":["You can configure additional rules from a third party Stylelint plugin:"]}],[{"l":"Integrate with VS Code","p":["Stylelint VS Code extension greatly improves the development experience by automatically linting the code as you type and automatically formatting the code according to your Stylelint configuration whenever you save."]},{"l":"Install Stylelint extension","p":["Open VS Code and install the stylelint.vscode-stylelint extension."]},{"l":"Configure VS Code","p":["Then, add the following settings to your solution VS Code settings file:"]},{"l":"Install EditorConfig extension","p":["Finally, install the EditorConfig.EditorConfig extension."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["Restart VS Code, open a CSS file, type invalid code in a CSS selector (e.g. color: #fff), then save. The code should have been formatted automatically (e.g. color: #ffffff)."]}],[{"l":"Typescript"},{"l":"By project type configurations","p":["Typically, TypeScript shareable configuration libraries are architectured around the idea that shared configurations should be small and composable to accomodate any potential use cases that a development team might encounter.","While composability provides flexibility, it also increases the complexity on the consumer side as they must understand how TypeScript configuration inheritance works and how to compose the provided shared configurations correctly. It can be frustrating at times when you want to get something up and running quickly.","To improve the experience, rather than delegating the composition of the shared configuration pieces to the consumer, we compose them internally and offer configurations by project type instead.","This way, it's pretty straightforward for the consumer to configure TypeScript, as it only involves extending a single shared configuration per project and it allows for more accurate defaults and assumptions about the target environment. For advanced users in need of flexibility, the underlying configuration pieces are also available."]},{"l":"Linting only","p":["@workleap/typescript-configs by project type shared configurations exclusively focus on code linting, as tsup is handling the transpilation process."]},{"l":"Target environment","p":["@workleap/typescript-configs by project type shared configurations targets the following environment:","ESM","ESNext","If you are in the process of migrating an existing project to @workleap/typescript-configs, and would rather delay transitioning to ESM, refer to the custom configuration page for information about how to support non ESM projects."]},{"l":"Available configurations","p":["Name","Description","web-application","For web applications developed with React.","library","For library project developed with or without React.","monorepo-workspace","For the workspace configuration of a monorepo solution."]},{"l":"Getting started","p":["To get started, choose one of the following scenarios \uD83D\uDC47"]},{"l":"Setup a new project","p":["If you are looking to setup a new polyrepo solution (single project per repository), follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo."]},{"l":"Setup an existing project","p":["If you are migrating an existing polyrepo solution (single project per repository) to workleap/web-configs, follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo.","Once configured, to understand how to adapt @workleap/typescript-configs default configurations to your codebase while you are completing the migration, have a look at the custom configuration page."]},{"l":"Advanced configuration","p":["If you are encountering a challenging use case making impractical the per project type configurations offered by @workleap/typescript-configs, have a look at the advanced composition page for documentation about how to compose the underlying configuration pieces of this library."]}],[{"l":"Setup a polyrepo","p":["Execute the following steps to setup TypeScript for a polyrepo solution ( single project per repository) \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the solution and install the following packages:"]},{"l":"Configure TypeScript","p":["First, create a configuration file named tsconfig.json at the root of the solution:","Then, open the newly created file and extend the default configuration with one of the shared configurations provided by @workleap/typescript-configs\uD83D\uDC47"]},{"l":"web-application","p":["For an applications developed with React, use the following configuration:","If your application is using Storybook, make sure to include the .storybook folder:"]},{"l":"library","p":["For a library project developed with or without React, use the following configuration:","If your application is using Storybook, make sure to include the .storybook folder and exclude the .storybook/storybook-static folder:"]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's package.json file:"]},{"l":"Custom configuration","p":["New projects shouldn't have to customize the default configurations offered by @workleap/typescript-configs. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new TypeScript setup, open a TypeScript file, type invalid code (e.g. import { App } from ./App), then wait for the IDE to flag the error. Fix the error (e.g. import { App } from ./App.tsx), then wait for the IDE to remove the error."]}],[{"l":"Setup a monorepo","p":["This monorepo setup has been tested with PNPM workspaces. You may need a different setup for NPM workspaces or Yarn workspaces because by default, those package managers hoist dependencies rather than installing them in isolation like PNPM.","To lint a monorepo solution ( multiple projects per repository), TypeScript must be setuped to lint the files at the root of the solution (the monorepo workspace) and the files of every project of the monorepo. Execute the following steps to setup TypeScript for a monorepo solution."]},{"l":"Setup the workspace"},{"l":"Install the packages","p":["Open a terminal at the root of the solution workspace (the root of the repository) and install the following packages:"]},{"l":"Configure TypeScript","p":["First, create a configuration file named tsconfig.json at the root of the solution workspace:","Then, open the newly created file and extend the default configuration with the monorepo-workspace shared configurations:","If your application is using Storybook, make sure to include the .storybook folder and exclude the .storybook/storybook-static folder:"]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace package.json file:"]},{"l":"Setup a project"},{"l":"Install the package","p":["Open a terminal at the root of the project ( packages/app for this example) and install the following package:"]},{"i":"configure-typescript-1","l":"Configure TypeScript","p":["First, create a configuration file named tsconfig.json at the root of the project:","Then, open the newly created file and extend the default configuration with one of the shared configurations provided by @workleap/typescript-configs\uD83D\uDC47"]},{"l":"web-application","p":["For an applications developed with React, use the following configuration:"]},{"l":"library","p":["For a library project developed with or without React, use the following configuration:"]},{"l":"Custom configuration","p":["New projects shouldn't have to customize most of the default configurations offered by @workleap/typescript-configs. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"l":"Compiler paths","p":["If any projects of your solution are referencing other projects of the monorepo workspace (e.g. @sample/components: workspace:*), chances are that you'll need to define paths in their tsconfig.json file.","Given the following solution:","If the packages/components project is referencing the packages/utils project, and the packages/app project is referencing the packages/components project, you'll need to add the following compilerOptions.paths:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new TypeScript setup, open a TypeScript file, type invalid code (e.g. import { App } from ./App), then wait for the IDE to flag the error. Fix the error (e.g. import { App } from ./App.tsx), then wait for the IDE to remove the error."]}],[{"l":"Custom configuration","p":["If you are in the process of migrating an existing project to use @workleap/typescript-configs or encountering a challenging situation that is not currently handled by this library, you might want to customize the default shared configurations.","For a list of the rules included with the default shared configurations, refer to the configuration files in the following folder on GitHub."]},{"l":"Change a default field value","p":["You can update a default field value by defining the field locally with its new value:"]},{"l":"Non ESM projects","p":["If you are migrating an existing project and prefer to wait before moving to ESM, add the following custom configurations to allow import statements without specifying a file extension:"]},{"l":"Start from scratch","p":["If your situation is so challenging that you must start a new configuration from scratch, refer to the advanced composition page."]}],[{"l":"Advanced composition","p":["If the default by project type configurations doesn't fits your needs, rather than writing your own configuration from scratch, you can compose a new one from the underlying configuration pieces of @workleap/typescript-configs."]},{"l":"Available pieces","p":["Name","Description","core","Basic rules shared by every configuration.","react","Rules for React applications and libraries."]},{"l":"Compose a new configuration","p":["Each configuration piece can be extended individually, or in combination with other pieces, to compose your own custom TypeScript configuration."]},{"l":"React configuration","p":["To extend the base configuration for a React project:"]},{"l":"Non React configuration","p":["To extend the core configuration for a regular TypeScript project:"]}],[{"l":"SWC"},{"l":"Main features","p":["The shared configurations offered by @workleap/swc-configs includes the following features \uD83D\uDC47"]},{"l":"Language support","p":["JavaScript","TypeScript"]},{"l":"Framework support","p":["React"]},{"l":"Development features","p":["Fast Refresh"]},{"l":"Production features","p":["Minification"]},{"l":"Target environment","p":["ESM","ECMAScript features matching the provided browsers"]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure SWC for either a development environment, a production environment or to run Jest tests."]}],[{"l":"Configure for development","p":["To configure SWC for a development environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure SWC","p":["First, create a configuration file named swc.dev.js at the root of the project:","Then, open the newly created file and export the SWC configuration by using the defineDevConfig(targets, options) function:"]},{"l":"targets","p":["In the previous code sample, the defineDevConfig(targets, options) function receives a list of minimal browser versions to support through the targets parameter.","The expected behavior for the supported browsers would be for SWC to automatically load the minimal browser versions from the closest .browserslistrc configuration file. However, there is currently an issue preventing SWC from doing so when the configuration file include a query referencing an external Browserslist configuration:","Therefore, @workleap/swc-configs has chosen to delegate the loading of the Browserslist configuration to the consumer by making the targets option required."]},{"l":"browserslistToSwc","p":["To help consumers provide SWC targets from a Browserslist configuration, @workleap/swc-configs offers the browserslistToSwc(options) utility function.","This function can either transform an array of Browserslist queries to SWC targets:","Or load the closest .browserslistrc configuration file and convert the queries into SWC targets:","The browserslistToSwc(options) utility function accepts any option supported by Browserslist JS API in addition to a queries option:","queries: string | string[]"]},{"l":"Use predefined options","p":["The defineDevConfig(targets, options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"baseUrl","p":["Type: string","Sets a base directory from which to resolve module names. This option is usually provided when custom paths are provided. Note that SWC requires the baseUrl to be an absolute path."]},{"l":"fastRefresh","p":["Type: boolean","Default: true","Whether or not to enable Fast Refresh."]},{"l":"parser","p":["Type: ecmascript | typescript","Default: typescript","Whether SWC should expect to parse JavaScript or TypeScript code."]},{"l":"paths","p":["You shouldn't need to define custom paths for your project. If you're defining custom paths to support aliases, consider using the imports field of your project's package.json file instead.","Type: Recordstring, string[]","A series of entries which re-map imports to lookup locations relative to the baseUrl if set."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default development configuration of @workleap/swc-configs, but only covers a subset of an SWC configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineDevConfig function. Remember, no locked in❤️✌️.","To view the default development configuration of @workleap/swc-configs, have a look at the dev.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: SwcConfig, context: SwcConfigTransformerContext) = SwcConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in:","environment: dev | build | jest"]},{"l":"Configure webpack","p":["To integrate with webpack, update your configuration file to include an swc-loader:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new SWC configuration, create a Typescript file with the following code:","If you integrated SWC with webpack, make sure to import the previously created file in one of your webpack entry points, then start the webpack development server. The development server should start without outputting any error to the console.","Otherwise, open a terminal at the root of your project and install @swc/cli:","Then, process the file with @swc/cli by executing the following command in the same terminal:","The generated say.js file should include the following transpiled code:"]}],[{"l":"Configure for build","p":["To configure SWC for a production environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure SWC","p":["First, create a configuration file named swc.build.js at the root of the project:","Then, open the newly created file and export the SWC configuration by using the defineBuildConfig(targets, options) function:"]},{"l":"targets","p":["In the previous code sample, the defineBuildConfig(targets, options) function receives a list of minimal browser versions to support through the targets parameter.","The expected behavior for the supported browsers would be for SWC to automatically load the minimal browser versions from the closest .browserslistrc configuration file. However, there is currently an issue preventing SWC from doing so when the configuration file include a query referencing an external Browserslist configuration:","Therefore, @workleap/swc-configs has chosen to delegate the loading of the Browserslist configuration to the consumer by making the targets option required."]},{"l":"browserslistToSwc","p":["To help consumers provide SWC targets from a Browserslist configuration, @workleap/swc-configs offers the browserslistToSwc(options) utility function.","This function can either transform an array of Browserslist queries to SWC targets:","Or load the closest .browserslistrc configuration file and convert the queries into SWC targets:","The browserslistToSwc(options) utility function accepts any option supported by Browserslist JS API in addition to a queries option:","queries: string | string[]"]},{"l":"Use predefined options","p":["The defineBuildConfig(targets, options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"baseUrl","p":["Type: string","Sets a base directory from which to resolve module names. This option is usually provided when custom paths are provided. Note that SWC requires the baseUrl to be an absolute path."]},{"l":"parser","p":["Type: ecmascript | typescript","Default: typescript","Whether SWC should expect to parse JavaScript or TypeScript code."]},{"l":"paths","p":["You shouldn't need to define custom paths for your project. If you're defining custom paths to support aliases, consider using the imports field of your project's package.json file instead.","Type: Recordstring, string[]","A series of entries which re-map imports to lookup locations relative to the baseUrl if set."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default build configuration of @workleap/swc-configs, but only covers a subset of an SWC configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineBuildConfig function. Remember, no locked in❤️✌️.","To view the default development configuration of @workleap/swc-configs, have a look at the build.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: SwcConfig, context: SwcConfigTransformerContext) = SwcConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in:","environment: dev | build | jest"]},{"l":"Configure webpack","p":["To integrate with webpack, update your configuration file to include an swc-loader:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new SWC configuration, create a Typescript file with the following code:","If you integrated SWC with webpack, make sure to import the previously created file in one of your webpack entry points, then execute your webpack build and find the transpiled code in the generated bundle files of your dist folder.","Otherwise, open a terminal at the root of your project and install @swc/cli:","Then, process the file with @swc/cli by executing the following command in the same terminal:","Whether you processed the file with webpack or @swc/cli, the transpiled code should be:"]}],[{"l":"Configure for Jest","p":["To configure SWC for a Jest environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure SWC","p":["To use a TypeScript configuration file, make sure that your Jest configuration is also in TypeScript.","First, create a configuration file named swc.jest.ts at the root of the project:","Then, open the newly created file and export the SWC configuration by using the defineJestConfig(options) function:"]},{"l":"Use predefined options","p":["The defineJestConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"baseUrl","p":["Type: string","Sets a base directory from which to resolve module names. This option is usually provided when custom paths are provided. Note that SWC requires the baseUrl to be an absolute path."]},{"l":"react","p":["Type: boolean","Default: false","Whether or not to transform React code."]},{"l":"parser","p":["Type: ecmascript | typescript","Default: typescript","Whether SWC should expect to parse JavaScript or TypeScript code."]},{"l":"paths","p":["You shouldn't need to define custom paths for your project. If you're defining custom paths to support aliases, consider using the imports field of your project's package.json file instead.","Type: Recordstring, string[]","A series of entries which re-map imports to lookup locations relative to the baseUrl if set."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default development configuration of @workleap/swc-configs, but only covers a subset of an SWC configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineJestConfig function. Remember, no locked in❤️✌️.","To view the default Jest configuration of @workleap/swc-configs, have a look at the jest.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: SwcConfig, context: SwcConfigTransformerContext) = SwcConfig)[]","Default: []"]},{"l":"Configure Jest","p":["To configure Jest, open the project jest.config.ts file and add the following code:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new SWC configuration, create a Jest test in Typescript:","Open a terminal and run Jest directly from the CLI:","The test should succeed without any error outputted to the console."]}],[{"l":"Rsbuild","p":["Rsbuild is a high-performance build tool powered by Rspack, a Rust-based port of webpack designed for efficiency and speed. Those new Rsbuild shared configurations are a modern replacement for previous Workleap's shared webpack configurations."]},{"l":"Main features","p":["The shared configurations offered by @workleap/rsbuild-configs includes the following features \uD83D\uDC47"]},{"l":"Language support","p":["JavaScript","TypeScript","CSS (with CSS modules and LightningCSS)"]},{"l":"Framework support","p":["React"]},{"l":"Asset support","p":["SVG as React components","PNG","JPEG","GIF"]},{"l":"Development features","p":["Development server","Fast Refresh or Hot Module Reload","Sourcemap"]},{"l":"Production features","p":["Minification","Output to /dist"]},{"l":"Target environment","p":["As per the Browserlist configuration."]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure Rsbuild for either a development environment, a production environment or storybook.","If your project is already using @workleap/webpack-configs, follow the migration guide."]}],[{"l":"Configure for development","p":["To configure Rsbuild for a development environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure Rsbuild"},{"l":"HTML template","p":["First, create a public folder with an index.html file at the root of the project:","Then, open the newly created index.html file and copy/paste the following content:","The content of the public/index.html file will be the template used by Rsbuild HTML template feature."]},{"l":"Reference local assets","p":["To reference local assets such as a favicon.png in the default HTML template, it is recommended to preprend the relative path of every asset with the assetPrefix option of the Rsbuild config.","First, add the asset to the public folder at the root of the project:","Then, add the assets to the index.html file:","If assetPrefix is set to auto, use href=favicon.png instead."]},{"l":"Browserslist","p":["Next, let's set up Browserlist to define the minimum browser versions supported by the application. Rsbuild will automatically detect and load the browser versions from the nearest .browserslistrc configuration file.","First, create a browserslistrc file at the root of the project:","Then, open the newly created file and extend the default configuration with the shared configuration provided by @workleap/browserslist-config:"]},{"i":"rsbuilddevts","l":"rsbuild.dev.ts","p":["Next, create a configuration file named rsbuild.dev.ts at the root of the project:","Then, open the newly created file and export the Rsbuild configuration by using the defineDevConfig(options) function:"]},{"l":"Use predefined options","p":["The defineDevConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"entry","p":["Type: An object literal accepting any source.entry options.","Default: { index: ./src/index.tsx }","Set Rsbuild source.entry option."]},{"l":"https","p":["Type: boolean or an object literal accepting any server.https options.","Default: false","Set Rsbuild server.https option and format Rsbuild dev.assetPrefix option accordingly.","When true, a self-signed certificate will be generated with rsbuild-plugin-basic-ssl. To manually set a certificate, follow Rsbuild instructions."]},{"l":"host","p":["Type: string","Default: localhost","Set Rsbuild server.host option and format Rsbuild dev.assetPrefix option accordingly."]},{"l":"port","p":["Type: number","Default: 8080","Set Rsbuild server.port option and format Rsbuild dev.assetPrefix option accordingly."]},{"l":"assetPrefix","p":["This option is the Rsbuild equivalent of webpack publicPath option.","Type: string","Default: ${https ? https : http}://${host}:${port}","Set Rsbuild dev.assetPrefix option.","If you're unsure of the asset prefix in advance, set the option to auto. Rsbuild will automatically determine the asset prefix using import.meta.url or document.currentScript."]},{"l":"plugins","p":["Type: An array of Rsbuild plugin instances","Default: []","Append the provided Rsbuild plugins to the configuration."]},{"l":"html","p":["Type: false or (defaultOptions: HtmlConfig) = HtmlConfig","Default: defaultOptions = defaultOptions","By default, Rsbuild will attempt to load an HTML template from the public/index.html file. To use Rsbuild's built-in HTML template instead, set the option to false.","To customize the default HTML template configuration, provide a function extending the default options."]},{"l":"lazyCompilation","p":["Type: boolean","Default: true","Whether or not to use lazy compilation. To disable lazy compilation, set the option to false."]},{"l":"hmr","p":["Type: boolean","Default: true","Whether or not to use HMR. To disable HMR set the option to false."]},{"l":"fastRefresh","p":["Type: boolean","Default: true","Whether or not to use Fast Refresh instead of use HMR. To disable fast refresh set the option to false.","To customize the Fast Refresh configuration, provide a react function extending the default options."]},{"l":"sourceMap","p":["Type: false or an object literal accepting any output.sourceMap options.","Default: { js: cheap-module-source-map, css: true }","Whether or not to generate source map. To disable source map, set the option to false.","To customize the source map configuration, provide an object literal."]},{"l":"overlay","p":["Type: false","Default: undefined","Whether or not a full-screen overlay should be in the browser when there are compiler errors or warnings."]},{"l":"react","p":["Type: false or (defaultOptions: PluginReactOptions) = PluginReactOptions","Default: defaultOptions = defaultOptions","Whether or not to transform React code. To disable React code transformation, set the option to false.","To customize plugin-react, provide a function to extend the default options."]},{"l":"svgr","p":["Type: false or (defaultOptions: PluginSvgrOptions) = PluginSvgrOptions","Default: defaultOptions = defaultOptions","Whether or not to handle .svg files with plugin-svgr. When the option is set to false, the .svg files will be handled by the asset/resource rule.","To customize the plugin-svgr, provide a function extending the default options.","When you reference an SVG asset in TypeScript code, TypeScript may prompt that the module is missing a type definition:","To fix this, you need to add type declaration for the SVG assets, create a src/env.d.ts file, and add the type declaration.","For additional information, refer to the plugin documentation."]},{"l":"Import images","p":["By default, plugin-svgr is configured to support named import for ReactComponent:"]},{"l":"verbose","p":["Type: boolean","Default: false","Start the Rsbuild process with verbose logging turned on."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default development configuration of @workleap/rsbuild-configs, but only covers a subset of an Rsbuild configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineDevConfig function. Remember, no locked in❤️✌️.","To view the default development configuration of @workleap/rsbuild-configs, have a look at the dev.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: RsbuildConfig, context: RsbuildConfigTransformerContext) = RsbuildConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in.","environment: dev | build | storybook","verbose: boolean"]},{"l":"Setup nodemon","p":["Nodemon is a utility that will monitor for any changes in the rsbuild.dev.dev.ts file and restart the Rsbuild development server whenever a change occurs.","First, add a nodemon.json file at the root of the project:","Then, open the nodemon.json file and copy/paste the following content:","Finally, add a CLI script at the next step of this guide."]},{"l":"Add a CLI script","p":["To initiate the development server, add the following script to your project package.json file:"]},{"l":"Define environment variables"},{"l":"cross-env","p":["We recommend to define environment variables using cross-env. With cross-env, the environment variables will be made available to any Node.js files that are executed by the script process ( dev in the example below \uD83D\uDC47):","However, there's a catch. When using cross-env, the variables will not be available in the application files because cross-env only makes them available to files that are executed by the process at build time while the application files are executed at runtime by a browser.","To make them accessible to the application files, Rsbuild must be aware of those environment variables and render them into the compiled application files. This is the purpose of the environmentVariables option."]},{"l":"environmentVariables","p":["Type: Recordstring, unknown","Default: {}","First, define the variables with environmentVariables:","Then, use the variables in any application files:","The === true part of DEBUG: process.env.DEBUG === true is very important, otherwise the environment variable value would be true instead of true.","By default, Rsbuild injects a few environment variables into the code using the source.define option. For additional information about these default environment variables, refer to the Rsbuild documentation."]},{"l":"CSS modules typings","p":["When you import CSS Modules in TypeScript code, TypeScript may prompt that the module is missing a type definition:","To fix this, you need to add a type declaration file for the CSS Modules, please create a src/env.d.ts file, and add the corresponding type declaration.","Make sure the project have a dependency on @rsbuild/core."]},{"l":"Monorepo","p":["If your solution is a monorepo, ensure that projects referencing your packages that include CSS Modules, also include the necessary type definitions","For example, given the following structure:","Copy the CSS Modules typings into the app web application own env.d.ts file, or include the components package's typings into the apps web application tsconfig.ts configuration file:","For additional information abour CSS modules type declaration, refer to the Rsbuild documentation."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new Rsbuild configuration, open a terminal at the root of the project and execute the CLI script added earlier. A development server should start without outputting any error in the terminal."]}],[{"l":"Configure for build","p":["To configure Rsbuild for a production environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages"},{"l":"Configure Rsbuild"},{"l":"HTML template","p":["First, create a public folder with an index.html file at the root of the project:","Then, open the newly created index.html file and copy/paste the following content:","The content of the public/index.html file will be the template used by Rsbuild HTML template feature."]},{"l":"Reference local assets","p":["To reference local assets such as a favicon.png in the default HTML template, it is recommended to preprend the relative path of every asset with the assetPrefix option of the Rsbuild config.","First, add the asset to the public folder at the root of the project:","Then, add the assets to the index.html file:","If assetPrefix is set to auto, use href=favicon.png instead."]},{"l":"Browserslist","p":["Next, let's set up Browserlist to define the minimum browser versions supported by the application. Rsbuild will automatically detect and load the browser versions from the nearest .browserslistrc configuration file.","First, create a browserslistrc file at the root of the project:","Then, open the newly created file and extend the default configuration with the shared configuration provided by @workleap/browserslist-config:"]},{"i":"rsbuildbuildts","l":"rsbuild.build.ts","p":["Next, create a configuration file named rsbuild.build.ts at the root of the project:","Then, open the newly created file and export the Rsbuild configuration by using the defineBuildConfig(options) function:"]},{"l":"Use predefined options","p":["The defineBuildConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"entry","p":["Type: RsbuildEntry","Default: { index: ./src/index.tsx }","Set Rsbuild source.entry option."]},{"l":"distPath","p":["This option is the Rsbuild equivalent of webpack outputPath option.","Type: string","Default: dist","Set Rsbuild output.distPath option."]},{"l":"assetPrefix","p":["This option is the Rsbuild equivalent of webpack publicPath option.","Type: string","Default: ${https ? https : http}://${host}:${port}","Set Rsbuild output.assetPrefix option.","If you're unsure of the asset prefix in advance, set the option to auto. Rsbuild will automatically determine the asset prefix using import.meta.url or document.currentScript."]},{"l":"plugins","p":["Type: An array of Rsbuild plugin instances","Default: []","Append the provided Rsbuild plugins to the configuration."]},{"l":"html","p":["Type: false or (defaultOptions: HtmlConfig) = HtmlConfig","Default: defaultOptions = defaultOptions","By default, Rsbuild will attempt to load an HTML template from the public/index.html file. To use Rsbuild's built-in HTML template instead, set the option to false.","To customize the default HTML template configuration, provide a function extending the default options."]},{"l":"minify","p":["Type: false or an object literal accepting any minify options.","Default: true","Whether or not to minify the code. To disable code minification, set the option to false.","To customize the minimizer configuration, provide an object literal."]},{"l":"optimize","p":["Type: boolean| readable","Default: true","Whether or not to enable Rsbuild production code optimization. This option can be quite useful when debugging an issue with Rsbuild bundling.","When false is provided, most of the optimizations, including minification will be turned off:","When readable is provided, most of the optimizations will still be applied but the outputed bundles will be easier to read:"]},{"l":"sourceMap","p":["Type: false or an object literal accepting any output.sourceMap options.","Default: { js: source-map, css: true }","Whether or not to generate source map. To disable source map, set the option to false.","To customize the source map configuration, provide an object literal."]},{"l":"react","p":["Type: false or (defaultOptions: PluginReactOptions) = PluginReactOptions","Default: defaultOptions = defaultOptions","Whether or not to transform React code. To disable React code transformation, set the option to false.","To customize plugin-react, provide a function to extend the default options."]},{"l":"svgr","p":["Type: false or (defaultOptions: PluginSvgrOptions) = PluginSvgrOptions","Default: defaultOptions = defaultOptions","Whether or not to handle .svg files with plugin-svgr. When the option is set to false, the .svg files will be handled by the asset/resource rule.","To customize plugin-svgr, provide a function extending the default options.","When you reference an SVG asset in TypeScript code, TypeScript may prompt that the module is missing a type definition:","To fix this, you need to add type declaration for the SVG assets, create a src/env.d.ts file, and add the type declaration.","For additional information, refer to the plugin documentation."]},{"l":"Import images","p":["By default, plugin-svgr is configured to support named import for ReactComponent:"]},{"l":"compressImage","p":["Type: false or (defaultOptions: PluginImageCompressOptions) = PluginImageCompressOptions","Default: defaultOptions = defaultOptions","Whether or not to compress images with plugin-image-compress. To disable image compression, set the option to false.","To customize plugin-image-compress, provide a function extending the default options."]},{"l":"verbose","p":["Type: boolean","Default: false","Start the Rsbuild process with verbose logging turned on."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default build configuration of @workleap/rsbuild-configs, but only covers a subset of an Rsbuild configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineBuildConfig function. Remember, no locked in❤️✌️.","To view the default build configuration of @workleap/rsbuild-configs, have a look at the build.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: RsbuildConfig, context: RsbuildConfigTransformerContext) = RsbuildConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in.","environment: dev | build | storybook","verbose: boolean"]},{"l":"Add a CLI script","p":["To create the bundle files for production, add the following script to your project package.json file:"]},{"l":"Use environment variables"},{"l":"cross-env","p":["We recommend instead to define environment variables using cross-env. With cross-env, the environment variables will be made available to any Node.js files that are executed by the script process ( build in the example below \uD83D\uDC47):","However, there's a catch. When using cross-env, the variables will not be available in the application files because cross-env only makes them available to files that are executed by the process at build time while the application files are executed at runtime by a browser.","To make them accessible to the application files, Rsbuild must be aware of those environment variables and render them into the compiled application files. This is the purpose of the environmentVariables option."]},{"l":"environmentVariables","p":["Type: Recordstring, unknown","Default: {}","First, define the variables with environmentVariables:","Then, use the variables in any application files:","The === true part of DEBUG: process.env.DEBUG === true is very important, otherwise the environment variable value would be true instead of true.","By default, Rsbuild injects a few environment variables into the code using the source.define option. For additional information about these default environment variables, refer to the Rsbuild documentation."]},{"l":"CSS modules typings","p":["When you import CSS Modules in TypeScript code, TypeScript may prompt that the module is missing a type definition:","To fix this, you need to add a type declaration file for the CSS Modules, please create a src/env.d.ts file, and add the corresponding type declaration.","Make sure the project have a dependency on @rsbuild/core."]},{"l":"Monorepo","p":["If your solution is a monorepo, ensure that projects referencing your packages that include CSS Modules, also include the necessary type definitions","For example, given the following structure:","Copy the CSS Modules typings into the app web application own env.d.ts file, or include the components package's typings into the apps web application tsconfig.ts configuration file:","For additional information abour CSS modules type declaration, refer to the Rsbuild documentation."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new Rsbuild configuration, open a terminal at the root of the project and execute the CLI script added earlier. The build process should complete without outputting any error in the terminal and the bundle files should be available in the /dist folder (or any other distPath you configured)."]}],[{"l":"Configure for Storybook","p":["To configure Rsbuild for Storybook, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages"},{"l":"Configure Rsbuild"},{"l":"Browserslist","p":["First, let's set up Browserlist to define the minimum browser versions supported by the application. Rsbuild will automatically detect and load the browser versions from the nearest .browserslistrc configuration file.","First, create a browserslistrc file at the root of the project:","Then, open the newly created file and extend the default configuration with the shared configuration provided by @workleap/browserslist-config:"]},{"i":"rsbuildconfigts","l":"rsbuild.config.ts","p":["Next, create a configuration file named rsbuild.config.ts under the storybook folder:","Then, open the newly created file and export the Rsbuild configuration by using the defineStorybookConfig(options) function:"]},{"i":"maints","l":"main.ts","p":["Finally, open the .storybook/main.ts file and set storybook-react-rsbuild as the framework to use:"]},{"l":"Use predefined options","p":["The defineStorybookConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"plugins","p":["Type: An array of Rsbuild plugin instances","Default: []","Append the provided Rsbuild plugins to the configuration."]},{"l":"sourceMap","p":["Type: false or an object literal accepting any output.sourceMap options.","Default: { js: cheap-module-source-map, css: true }","Whether or not to generate source map. To disable source map, set the option to false.","To customize the source map configuration, provide an object literal."]},{"l":"react","p":["Type: false or (defaultOptions: PluginReactOptions) = PluginReactOptions","Default: defaultOptions = defaultOptions","Whether or not to transform React code. To disable React code transformation, set the option to false.","To customize plugin-react, provide a function to extend the default options."]},{"l":"svgr","p":["Type: false or (defaultOptions: PluginSvgrOptions) = PluginSvgrOptions","Default: defaultOptions = defaultOptions","Whether or not to handle .svg files with plugin-svgr. When the option is set to false, the .svg files will be handled by the asset/resource rule.","To customize plugin-svgr, provide a function extending the default options.","When you reference an SVG asset in TypeScript code, TypeScript may prompt that the module is missing a type definition:","To fix this, you need to add type declaration for the SVG assets, create a src/env.d.ts file, and add the type declaration.","For additional information, refer to the plugin documentation."]},{"l":"Import images","p":["By default, plugin-svgr is configured to support named import for ReactComponent:"]},{"l":"verbose","p":["Type: boolean","Default: false","Start the Rsbuild process with verbose logging turned on."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default Storybook configuration of @workleap/rsbuild-configs, but only covers a subset of an Rsbuild configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineBuildConfig function. Remember, no locked in❤️✌️.","To view the default build configuration of @workleap/rsbuild-configs, have a look at the storybook.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: RsbuildConfig, context: RsbuildConfigTransformerContext) = RsbuildConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in.","environment: dev | build | storybook","verbose: boolean"]},{"l":"Add CLI scripts","p":["To create the bundle files for production, add the following scripts to your project package.json file:"]},{"l":"Use environment variables"},{"l":"cross-env","p":["We recommend instead to define environment variables using cross-env. With cross-env, the environment variables will be made available to any Node.js files that are executed by the script process ( dev and build in the example below \uD83D\uDC47):","However, there's a catch. When using cross-env, the variables will not be available in the application files because cross-env only makes them available to files that are executed by the process at build time while the application files are executed at runtime by a browser.","To make them accessible to the application files, Rsbuild must be aware of those environment variables and render them into the compiled application files. This is the purpose of the environmentVariables option."]},{"l":"environmentVariables","p":["Type: Recordstring, unknown","Default: {}","First, define the variables with environmentVariables:","Then, use the variables in any file:","The === true part of DEBUG: process.env.DEBUG === true is very important, otherwise the environment variable value would be true instead of true.","By default, Rsbuild injects a few environment variables into the code using the source.define option. For additional information about these default environment variables, refer to the Rsbuild documentation."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new Rsbuild configuration, open a terminal at the root of the project and execute the CLI scripts added earlier. Either the Storybook development server should start without outputting any error in the terminal or the Storybook application bundle files should be available in the /storybook-static folder (or any other folder you configured)."]}],[{"l":"Migrate from Webpack","p":["To migrate from @squide/firefly-webpack-configs to @squide/firefly-rsbuild-configs, execute the following steps \uD83D\uDC47"]},{"l":"Update packages","p":["Open a terminal at the root of the web application project and install the following packages:","Then, in the same terminal, remove the following packages:","If your web application project uses SWC for tests, you may want to keep the @swc/core and @workleap/swc-configs packages."]},{"l":"Update files"},{"i":"webpackbuildjs","l":"webpack.build.js","p":["Rename the file from webpack.build.js to rsbuild.build.ts.","Then, open the rsbuild.build.ts file and apply the following changes:","Replace @workleap/webpack-configs for @workleap/rsbuild-configs.","Remove import { swcConfig } from ./swc.build.js.","Remove the first argument of the defineBuildHostConfig function.","Remove // @ts-check.","Before:","After:"]},{"i":"webpackdevjs","l":"webpack.dev.js","p":["Rename the file from webpack.dev.js to rsbuild.dev.ts.","Then, open the rsbuild.build.ts file and and apply the following changes:","Replace @workleap/webpack-configs for @workleap/rsbuild-configs.","Remove import { swcConfig } from ./swc.build.js.","Remove the first argument of the defineDevHostConfig function.","Remove // @ts-check.","Before:","After:"]},{"i":"postcssconfigts","l":"postcss.config.ts","p":["Delete the postcss.config.ts file."]},{"i":"swcbuildjs","l":"swc.build.js","p":["Delete the swc.build.js file."]},{"i":"swcdevjs","l":"swc.dev.js","p":["Delete the swc.dev.js file."]},{"i":"indexhtml","l":"index.html","p":["Replace %=webpackConfig.output.publicPath% by %=assetPrefix%/(the / is important).","Before:","After:"]},{"l":"Update scripts"},{"l":"dev","p":["Update the dev script to run Rsbuild instead of webpack.","Before:","After:"]},{"l":"build","p":["Update the build script to run Rsbuild instead of webpack.","Before:","After:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["Start the application in a development environment using the dev and build script. Everything should run smoothly without any warnings or errors outputted in the terminal."]}],[{"l":"tsup"},{"l":"Issues with tsc","p":["tsc, the native TypeScript CLI, pretty much offers everything that we need to compile and bundle our TypeScript libraries. We opted for tsup due to tsc lacks of support for CSS imports, a requirement for enabling Chromatic's TurboSnap feature.","Given that either TurboSnap requirements or tsc CSS imports support change, we will reevaluate this decision."]},{"l":"Main features","p":["The shared configurations offered by @workleap/tsup-configs includes the following features \uD83D\uDC47"]},{"l":"TypeScript features","p":["Emits declaration files"]},{"l":"Development features","p":["Watch mode","Sourcemaps"]},{"l":"Production features","p":["Output to /dist"]},{"l":"Target environment","p":["ESM","ESNext"]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure tsup for either a development environment or a production environment."]}],[{"l":"Configure for development","p":["To configure tsup for a development environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure tsup","p":["First, create a configuration file named tsup.dev.ts at the root of the project:","Then, open the newly created file and export the tsup configuration by using the defineDevConfig(options) function:"]},{"l":"Use predefined options","p":["The defineDevConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accepts any tsup options, no locked in❤️✌️:"]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","Since the predefined options for tsup already covers all the availables options, configuration transformer functions aren't as useful for a tsup configuration as for other tools like SWC or webpack. Nonetheless, they are still valuable, especially for library authors aiming to distribute a default option set that facilitates the configuration of tsup for specific functionalities of their library. Configuration transformer functions can be provided through the transformers option of the defineDevConfig function.","To view the default development configuration of @workleap/tsup-configs, have a look at the dev.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: TsupConfig, context: TsupConfigTransformerContext) = TsupConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in:","environment: dev | build"]},{"l":"Add a CLI script","p":["To initiate the development process, add the following script to your project package.json file:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new tsup configuration, open a terminal at the root of the project and execute the CLI script added previously. A development process should start without outputting any error in the terminal."]}],[{"l":"Configure for build","p":["To configure tsup for a build environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure tsup","p":["First, create a configuration file named tsup.build.ts at the root of the project:","Then, open the newly created file and export the tsup configuration by using the defineBuildConfig(options) function:"]},{"l":"Use predefined options","p":["The defineBuildConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accepts any tsup options, no locked in❤️✌️:"]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","Since the predefined options for tsup already covers all the availables options, configuration transformer functions aren't as useful for a tsup configuration as for other tools like SWC or webpack. Nonetheless, they are still valuable, especially for library authors aiming to distribute a default option set that facilitates the configuration of tsup for specific functionalities of their library. Configuration transformer functions can be provided through the transformers option of the defineBuildConfig function.","To view the default build configuration of @workleap/tsup-configs, have a look at the build.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: TsupConfig, context: TsupConfigTransformerContext) = TsupConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in:","environment: dev | build"]},{"l":"Add a CLI script","p":["To build the bundle files for production, add the following script to your project package.json file:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new tsup configuration, open a terminal at the root of the project and execute the CLI script added previously. The build process should complete without outputting any error in the terminal and the bundle files should be available in the /dist folder (or any other outputDir you configured)."]}],[{"l":"PostCSS","p":["@workleap/postcss-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead of @workleap/webpack-configs, which eliminates the need for PostCSS."]},{"l":"Deprecation warning","p":["As we actively work on improving our build time and minimize the number of tools compiling/transpiling frontend code, we expect PostCSS to be one of the first tools that we will deprecate from our technology stack. Therefore, before adding PostCSS to your project, make sure that you really need it.","Here's a couple of ideas to move away from PostCSS:","Prefer native CSS to SCSS.","Avoid CSS nesting, it usually makes code harder to read anyway. If you really need nesting, native support is coming soon.","Force developers to use rem by disabling the use of px with Stylelint.","Prefix CSS properties directly in the codebase rather than relying on Autoprefixer. As browser vendors are now putting experimental features behind a flag rather than using prefixes, there aren't many CSS properties still requiring a prefix."]},{"l":"Main features","p":["The shared configuration offered by @workleap/postcss-configs includes the following features:"]},{"l":"Preset Env","p":["Stage 3","Autoprefixer"]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure your first project."]}],[{"l":"Configure a project","p":["@workleap/postcss-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead of @workleap/webpack-configs, which eliminates the need for PostCSS.","Execute the following steps to setup PostCSS for a single project \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure PostCSS","p":["First, create a configuration file named postcss.config.ts at the root of the project:","Then, open the newly created file and export the PostCSS configuration by using the defineConfig(options) function:"]},{"l":"Use predefined options","p":["The defineConfig(options) function can be used as-is as shown in the previous example, however, if you wish to customize the default configuration, the function also accepts a few predefined options to help with that \uD83D\uDC47"]},{"l":"browsers","p":["Type: string | string[]","Default: When available, will load the supported browser versions from the closest .browserslistrc file","Set postcss-preset-env browsers option."]},{"l":"presetEnvOptions","p":["Type: An object literal accepting any postcss-preset-env option","Default: { autoprefixer: { flexbox: no-2009 }, stage: 3 }","Forward the provided object literal to the postcss-preset-env plugin."]},{"l":"Extends presetEnvOptions options","p":["When provided, the presetEnvOptions option will override the default postcss-preset-env plugin configuration. If you wish to extend the default configuration rather than overriding it, you can do so by importing the DefaultPresetEnvOptions object:"]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default configuration of @workleap/postcss-configs, but only covers a subset of a PostCSS configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineConfig function. Remember, no locked in❤️✌️.","To view the default configuration of @workleap/postcss-configs, have a look at the configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: PostCSSConfig) = PostCSSConfig)[]","Default: []"]},{"l":"Additional PostCSS plugins","p":["Configuration transformer functions are ideal to configure additional PostCSS plugins:"]},{"l":"Configure webpack","p":["If your project is using @workleap/wepack-config, you don't have to configure postcss-loader as the defineDevConfig and defineBuildConfig functions already takes care of configuring PostCSS.","To integrate with webpack, update your configuration file to include a postcss-loader:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new PostCSS configuration, create and import a CSS file with the following code:","If you integrated PostCSS with webpack, execute your webpack build and find the outputted .example CSS class in the generated bundle files of your dist folder.","Otherwise, open a terminal at the root of your project and install postcss-cli:","Then, process the file with postcss-cli by executing the following command in the same terminal:","Whether you processed the CSS with webpack or postcss-cli, most of the CSS properties in the .example CSS class should have been prefixed (it can vary based on your Browserslist configuration):"]}],[{"l":"Webpack","p":["@workleap/webpack-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead for better performance and modern tooling."]},{"l":"Main features","p":["The shared configurations offered by @workleap/webpack-configs includes the following features \uD83D\uDC47"]},{"l":"Language support","p":["JavaScript","TypeScript","CSS (with CSS modules and PostCSS)"]},{"l":"Framework support","p":["React"]},{"l":"Asset support","p":["SVG as React components","PNG","JPEG","GIF"]},{"l":"Development features","p":["Development server","File system caching","Fast Refresh or Hot Module Reload","Sourcemap"]},{"l":"Production features","p":["File system caching","Minification","Output to /dist"]},{"l":"Target environment","p":["As per the PostCSS and SWC configurations."]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure webpack for either a development environment or a production environment."]}],[{"l":"Configure for development","p":["@workleap/webpack-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead for better performance and modern tooling.","To configure webpack for a development environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure webpack"},{"l":"HTML template","p":["First, create a public folder with an index.html file at the root of the project:","Then, open the newly created index.html file and copy/paste the following content:","The content of the public/index.html file is the default template that will be used by HtmlWebpackPlugin."]},{"l":"Reference local assets","p":["To reference local assets such as a favicon.png in the default HTML template, it is recommended to preprend the relative path of every asset with the publicPath option of the webpack config.","First, add the asset to the public folder at the root of the project:","Then, add the assets to the index.html file:","If output.publicPath is set to auto, use href=favicon.png instead."]},{"i":"webpackdevjs","l":"webpack.dev.js","p":["Next, create a configuration file named webpack.dev.js at the root of the project:","Then, open the newly created file and export the webpack configuration by using the defineDevConfig(swcConfig, options) function:"]},{"i":"swcdevjs","l":"swc.dev.js","p":["In the previous code sample, the defineDevConfig(swcConfig, options) function receive an SWC configuration object through the swcConfig parameter.","Although the swc-loader defaults to loading the closest .swcrc configuration file when no configuration object is provided, it lacks support for distinct configuration files by environment like webpack does.","Therefore, @workleap/webpack-configs choosed to delegate the loading of the SWC configuration to the consumer by making the swcConfig option required."]},{"l":"Use predefined options","p":["The defineDevConfig(swcConfig, options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"entry","p":["Type: string","Default: ./src/index.tsx","Set webpack entry option."]},{"l":"https","p":["Type: boolean| ServerOptions","Default: false","Set webpack DevServer https option and format webpack publicPath option accordingly."]},{"l":"host","p":["Type: string","Default: localhost","Set webpack DevServer host option and format webpack publicPath option accordingly."]},{"l":"port","p":["Type: number","Default: 8080","Set webpack DevServer port option and format webpack publicPath option accordingly."]},{"l":"publicPath","p":["Type: string","Default: ${https ? https : http}://${host}:${port}/","Set webpack public path.","Or for an automatic public path:"]},{"l":"cache","p":["Type: boolean","Default: true","Whether or not webpack memory cache is enabled. This will also set maxGenerations to 1 to remove cache entries from memory when they are no longer needed."]},{"l":"moduleRules","p":["Type: An array of webpack moduleRule objects","Default: []","Append the provided webpack module rules to the configuration."]},{"l":"plugins","p":["Type: An array of webpack plugin instances","Default: []","Append the provided webpack plugins to the configuration."]},{"l":"htmlWebpackPlugin","p":["Type: boolean or an object literal accepting any html-webpack-plugin option","Default: { template: ./public/index.html }","To remove the default instance of html-webpack-plugin, set the property to false.","To extend/replace the default html-webpack-plugin configuration, use the defineDevHtmlWebpackPluginConfig(options) function."]},{"l":"fastRefresh","p":["Type: boolean or an object literal accepting any react-refresh-webpack-plugin option","Default: true","Replace webpack HMR by Fast Refresh. Desactivating webpack fast refresh will automatically disable fast refresh for SWC.","To extend/replace the default Fast Refresh configuration, use the defineFastRefreshPluginConfig(options) function.","options: An object literal accepting any react-refresh-webpack-plugin option"]},{"l":"cssModules","p":["Type: boolean","Default: false","Enable css-loader modules feature."]},{"l":"overlay","p":["Type: false","Default: undefined","Whether or not a full-screen overlay should be in the browser when there are compiler errors or warnings."]},{"l":"svgr","p":["Type: boolean or an object literal accepting any @svgr/webpack option","Default: true","Whether or not to handle .svg files with @svgr/webpack. If @svgr/webpack is desactived, the .svg files will be handled by the asset/resource rule.","To extends the @svgr/webpack rule configuration, provide an object literal instead."]},{"l":"verbose","p":["Type: boolean","Default: false","Start the webpack process with verbose logging turned on."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default development configuration of @workleap/webpack-configs, but only covers a subset of a webpack configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineDevConfig function. Remember, no locked in❤️✌️.","To view the default development configuration of @workleap/webpack-configs, have a look at the dev.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: WebpackConfig, context: WebpackConfigTransformerContext) = WebpackConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in.","environment: dev | build","verbose: boolean"]},{"l":"Utilities","p":["Modifying a webpack configuration object can be an arduous task, to help with that, @workleap/webpack-configs offer utility functions for modules rules and plugins.","Transformer utilities"]},{"l":"Setup nodemon","p":["Nodemon is a utility that will monitor for any changes in the swc.dev.js and webpack.dev.dev.js files and restart the webpack development server whenever a change occurs.","First, add a nodemon.json file at the root of the project:","Then, open the nodemon.json file and copy/paste the following content:","Finally, add a CLI script at the next step of this guide."]},{"l":"Add a CLI script","p":["To initiate the development server, add the following script to your project package.json file:"]},{"l":"Define environment variables","p":["To deal with environment variables, the webpack documentation suggests using the --env option from its CLI. While that would work, by using webpack --env CLI option, the environment variables would only be made available to the webpack configuration files (.e.g. webpack.dev.js) rather than any Node.js files. Therefore we do not recommend using webpack --env CLI option."]},{"l":"cross-env","p":["We recommend instead to define environment variables using cross-env. With cross-env, the environment variables will be made available to any Node.js files that are executed by the script process ( dev in the example below \uD83D\uDC47):","However, there's a catch. When using cross-env, the variables will not be available in the application files because cross-env only makes them available to files that are executed by the process at build time while the application files are executed at runtime by a browser.","To make them accessible to the application files, webpack must be aware of those environment variables and render them into the compiled application files. This is the purpose of the environmentVariables option."]},{"l":"environmentVariables","p":["Type: Recordstring, unknown","Default: {}","First, define the variables with environmentVariables:","Then, use the variables in any application files:","The === true part of DEBUG: process.env.DEBUG === true is very important, otherwise the environment variable value would be true instead of true."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new webpack configuration, open a terminal at the root of the project and execute the CLI script added earlier. A development server should start without outputting any error in the terminal."]}],[{"l":"Configure for build","p":["@workleap/webpack-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead for better performance and modern tooling.","To configure webpack for a production environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure webpack"},{"l":"HTML template","p":["First, create a public folder with an index.html file at the root of the project:","Then, open the newly created index.html file and copy/paste the following content:","The content of the public/index.html file is the default template that will be used by HtmlWebpackPlugin."]},{"l":"Reference local assets","p":["To reference local assets such as a favicon.png in the default HTML template, it is recommended to preprend the relative path of every asset with the publicPath of the webpack config.","First, add the asset to the public folder at the root of the project:","Then, add the assets to the index.html file:","If output.publicPath is set to auto, use href=favicon.png instead."]},{"i":"webpackbuildjs","l":"webpack.build.js","p":["Next, create a configuration file named webpack.build.js at the root of the project:","Then, open the newly created file and export the webpack configuration by using the defineBuildConfig(swcConfig, options) function:"]},{"i":"swcbuildjs","l":"swc.build.js","p":["In the previous code sample, the defineBuildConfig(swcConfig, options) function receive an SWC configuration object through the swcConfig parameter.","Although the swc-loader defaults to loading the closest .swcrc configuration file when no configuration object is provided, it lacks support for distinct configuration files by environment like webpack does.","Therefore, @workleap/webpack-configs choosed to delegate the loading of the SWC configuration to the consumer by making the swcConfig option required."]},{"l":"Use predefined options","p":["The defineBuildConfig(swcConfig, options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"entry","p":["Type: string","Default: ./src/index.tsx","Set webpack entry option."]},{"l":"outputPath","p":["Type: string","Default: dist","Set webpack output path."]},{"l":"publicPath","p":["Type: string","Default: http://localhost:8080/","Set webpack public path.","Or for an automatic public path:"]},{"l":"moduleRules","p":["Type: An array of webpack moduleRule objects","Default: []","Append the provided webpack module rules to the configuration."]},{"l":"plugins","p":["Type: An array of webpack plugin instances","Default: []","Append the provided webpack plugins to the configuration."]},{"l":"htmlWebpackPlugin","p":["Type: boolean or an object literal accepting any html-webpack-plugin option","Default: { template: ./public/index.html }","To remove the default instance of html-webpack-plugin, set the property to false.","To extend/replace the default html-webpack-plugin configuration, use the defineBuildHtmlWebpackPluginConfig(options) function."]},{"l":"miniCssExtractPluginOptions","p":["Type: An object literal accepting any mini-css-extract-plugin option","Default: { filename: [name].[fullhash].css }","Forward the provided object literal to the mini-css-extract-plugin."]},{"l":"optimize","p":["Type: boolean| readable","Default: true","Whether or not to enable webpack production optimizations like code minification and tree shaking. This option can be quite useful when debugging an issue with webpack bundling.","When false is provided, most of the optimizations, including minification and tree shaking will be turned off:","When readable is provided, most of the optimizations will still be applied but the resulting code bundles will be easier to read:"]},{"l":"cssModules","p":["Type: boolean","Default: false","Enable css-loader modules feature."]},{"l":"svgr","p":["Type: boolean or an object literal accepting any @svgr/webpack option","Default: true","Whether or not to handle .svg files with @svgr/webpack. If @svgr/webpack is desactived, the .svg files will are handled by the asset/resource rule.","To extends the @svgr/webpack rule configuration, provide an object literal instead."]},{"l":"verbose","p":["Type: boolean","Default: false","Start the webpack process with verbose logging turned on."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default build configuration of @workleap/webpack-configs, but only covers a subset of a webpack configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineBuildConfig function. Remember, no locked in❤️✌️.","To view the default build configuration of @workleap/webpack-configs, have a look at the build.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: WebpackConfig, context: WebpackConfigTransformerContext) = WebpackConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in:","environment: dev | build","verbose: boolean"]},{"l":"Utilities","p":["Modifying a webpack configuration object can be an arduous task, to help with that, @workleap/webpack-configs offer utility functions for modules rules and plugins.","Transformer utilities"]},{"l":"Add a CLI script","p":["To create the bundle files for production, add the following script to your project package.json file:"]},{"l":"Use environment variables","p":["To deal with environment variables, the webpack documentation suggests using the --env option from its CLI. While that would work, by using webpack --env CLI option, the environment variables would only be made available to the webpack configuration files (.e.g. webpack.build.js) rather than any Node.js files. Therefore we do not recommend using webpack --env CLI option."]},{"l":"cross-env","p":["We recommend instead to define environment variables using cross-env. With cross-env, the environment variables will be made available to any Node.js files that are executed by the script process ( build in the example below \uD83D\uDC47):","However, there's a catch. When using cross-env, the variables will not be available in the application files because cross-env only makes them available to files that are executed by the process at build time while the application files are executed at runtime by a browser.","To make them accessible to the application files, webpack must be aware of those environment variables and render them into the compiled application files. This is the purpose of the environmentVariables option."]},{"l":"environmentVariables","p":["Type: Recordstring, unknown","Default: {}","First, define the variables with environmentVariables:","Then, use the variables in any application files:","The === true part of DEBUG: process.env.DEBUG === true is very important, otherwise the environment variable value would be true instead of true."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new webpack configuration, open a terminal at the root of the project and execute the CLI script added earlier. The build process should complete without outputting any error in the terminal and the bundle files should be available in the /dist folder (or any other outputPath you configured)."]}],[{"l":"Transformer utilities","p":["@workleap/webpack-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead for better performance and modern tooling.","We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","To help you write configuration transformers for webpack, @workleap/webpack-configs provide a suite of utility functions."]},{"l":"Module rules","p":["Utility functions for webpack module rules."]},{"l":"matchLoaderName","p":["Returns a matcher function that can be utilized alongside module rules utility functions. The returned matcher function will return true when it encounters a module rule with a loader matching the provided name value."]},{"l":"Parameters","p":["name: A module rule loader name value."]},{"l":"Returns","p":["A ModuleRuleMatcher function."]},{"l":"Usage"},{"l":"matchAssetModuleType","p":["Returns a matcher function that can be utilized alongside module rules utility functions. The returned matcher function will return true when it encounters a module rule with a loader matching the provided asset type value."]},{"i":"parameters-1","l":"Parameters","p":["type: A module rule loader asset type value."]},{"i":"returns-1","l":"Returns","p":["A ModuleRuleMatcher function."]},{"i":"usage-1","l":"Usage"},{"l":"matchTest","p":["Returns a matcher function that can be utilized alongside module rules utility functions. The returned matcher function will return true when it encounters a module rule with a loader matching the provided test value."]},{"i":"parameters-2","l":"Parameters","p":["test: A module rule loader test value."]},{"i":"returns-2","l":"Returns","p":["A ModuleRuleMatcher function."]},{"i":"usage-2","l":"Usage"},{"l":"findModuleRule","p":["Retrieve the first module rule for which the matcher function returns true. If there is more than one match, an error will be thrown."]},{"i":"parameters-3","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function"]},{"i":"returns-3","l":"Returns","p":["A module rule if a match has been found, otherwise undefined."]},{"i":"usage-3","l":"Usage"},{"l":"findModuleRules","p":["Retrieve any module rules for which the matcher function returns true."]},{"i":"parameters-4","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function"]},{"i":"returns-4","l":"Returns","p":["An array of module rules"]},{"i":"usage-4","l":"Usage"},{"l":"addBeforeModuleRule","p":["Add the provided module rules before the matching module rule. If no matching rule has been found, an error will be thrown."]},{"i":"parameters-5","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function","newModuleRules: An array of module rules"]},{"i":"returns-5","l":"Returns","p":["Nothing"]},{"i":"usage-5","l":"Usage"},{"l":"addAfterModuleRule","p":["Add the provided module rules after the matching module rule. If no matching rule has been found, an error will be thrown."]},{"i":"parameters-6","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function","newModuleRules: An array of module rules"]},{"i":"returns-6","l":"Returns","p":["Nothing"]},{"i":"usage-6","l":"Usage"},{"l":"replaceModuleRule","p":["Replace the matching module rule by the new one. If no matching rule has been found, an error will be thrown."]},{"i":"parameters-7","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function","newModuleRule: The new module rule"]},{"i":"returns-7","l":"Returns","p":["Nothing"]},{"i":"usage-7","l":"Usage"},{"l":"removeModuleRules","p":["Remove the matching module rules. If no matching rule has been found, an error will be thrown."]},{"i":"parameters-8","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function"]},{"i":"returns-8","l":"Returns","p":["Nothing"]},{"i":"usage-8","l":"Usage"},{"l":"Plugins","p":["Utility functions for webpack plugins."]},{"l":"matchConstructorName","p":["Returns a matcher function that can be utilized alongside plugin utility functions. The returned matcher function will return true when it encounters a plugin matching the provided constructor name value."]},{"i":"parameters-9","l":"Parameters","p":["name: A plugin constructor name."]},{"i":"returns-9","l":"Returns","p":["A PluginMatcher function."]},{"i":"usage-9","l":"Usage"},{"l":"findPlugin","p":["Retrieve the first plugin for which the matcher function returns true. If there is more than one match, an error will be thrown."]},{"i":"parameters-10","l":"Parameters","p":["config: A webpack config","matcher: A PluginMatcher function"]},{"i":"returns-10","l":"Returns","p":["A plugin if a match has been found, otherwise undefined."]},{"i":"usage-10","l":"Usage"},{"l":"addBeforePlugin","p":["Add the provided plugins before the matching plugin. If no plugin has been found, an error will be thrown."]},{"i":"parameters-11","l":"Parameters","p":["config: A webpack config","matcher: A PluginMatcher function","newPlugins: An array of plugins"]},{"i":"returns-11","l":"Returns","p":["Nothing"]},{"i":"usage-11","l":"Usage"},{"l":"addAfterPlugin","p":["Add the provided plugins after the matching plugin. If no plugin has been found, an error will be thrown."]},{"i":"parameters-12","l":"Parameters","p":["config: A webpack config","matcher: A PluginMatcher function","newPlugins: An array of plugins"]},{"i":"returns-12","l":"Returns","p":["Nothing"]},{"i":"usage-12","l":"Usage"},{"l":"replacePlugin","p":["Replace the matching plugin by the new one. If no plugin has been found, an error will be thrown."]},{"i":"parameters-13","l":"Parameters","p":["config: A webpack config","matcher: A PluginMatcher function","newPlugin: The new plugin instance"]},{"i":"returns-13","l":"Returns","p":["Nothing"]},{"i":"usage-13","l":"Usage"},{"l":"removePlugin","p":["Remove the matching plugin. If no plugin has been found, an error will be thrown."]},{"i":"parameters-14","l":"Parameters","p":["config: A webpack config","matcher: A PluginMatcher function"]},{"i":"returns-14","l":"Returns","p":["Nothing"]},{"i":"usage-14","l":"Usage"}],[{"l":"Samples"},{"l":"Rsbuild sample","p":["Web application","Components library"]},{"l":"Webpack sample","p":["Web application","Components library","TypeScript library"]},{"l":"Storybook sample","p":["Storybook"]}],[{"l":"About","p":["To ask a question or propose an idea, feel free to start a new GitHub discussion. If you found a bug, please open a GitHub issue."]},{"l":"Contributing","p":["Have a look at the contributor's documentation."]},{"l":"Acknowledgements","p":["Thanks to the team at Shopify/web-configs for the inspiration to create an umbrella project for all the web configurations."]},{"l":"License","p":["See the LICENSE on GitHub."]}]] \ No newline at end of file +[[{"l":"Getting started","p":["Welcome to @workleap/web-configs, a collection of configuration libraries for building web applications at Workleap. On this getting started page, you'll find an overview of the project and a list of supported tools."]},{"i":"why-we-built-these-libraries","l":"Why we built these libraries?","p":["Starting a new web application is still an arduous task. There are so many tools to choose from, learn, install and configure, it can be daunting.","For an organization like Workleap, with a large suite of products, it doesn't make sense to start over every time we invest in a new idea or add a new vertical to an existing product. Developers working on a new project shouldn't spend their first day's figuring out which ESLint rules to enable/disable, or how to transpile their React code, they should rather focus on writing features code."]},{"l":"Filling the gap","p":["While a collection of common configurations gets us closer to that goal, on their own, configuration libraries are not enough to reach it. There is still a need to install and assemble those configurations correctly in the new application, which can also be a challenge. To fill this gap, we choosed to invest as well in a CLI to scaffold new web applications and libraries."]},{"l":"Best of both worlds","p":["With the CLI, developers can generate fully configured web applications in a few minutes. However, contrary to configuration libraries, a CLI alone is only good at creating the initial files of an application, it doesn't help with the maintenance or the adoption of new features offered by tools over time.","That's why we need both, there's a strong synergy between a collection of configuration libraries and a CLI.","With configuration libraries distributed through NPM packages and installed with a CLI, when a new feature is available for a tool, the configuration libraries maintainers can spend time learning the new feature, making the necessary changes, and distributing the changes with a new version of the package. Then, at their convenience, product teams can adopt the changes by bumping the configuration library package version in their respective application.","We hope that introducing CLI with a collection of configuration libraries will facilitate the creation and maintenance of front-end projects."]},{"l":"Guiding principles","p":["While developing the configuration libraries, we kept one guiding principle in mind, no locked in❤️✌️. We truly hope that the default configurations will satisfy your application needs, but if it doesn't, there will always be an easy way to extend or override the default configuration."]},{"l":"Target environment","p":["The majority of the shared tooling configurations targets ESM and the latest ECMAScript version (ESNext). If you are in the process of migrating an existing project to workleap/web-configs, and would rather delay transitioning to ESM, have a look at the Target environment section of each tool for additional information about how to support non ESM compliant solutions."]},{"l":"Supported tools","p":["Name","NPM","Documentation","Browserslist","npm version","Getting started","ESLint","Stylelint","Typescript","SWC","Rsbuild","tsup","PostCSS","webpack"]}],[{"l":"Browserslist"},{"l":"Supported browsers","p":["You can find an exhaustive list of the browser versions included with this shared configuration on https://browsersl.ist.","Alternatively, to list the browser versions supported by a specific configuration file, you can open a terminal at the root of any project including a .browserslistrc file and execute the following command:"]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure your project."]}],[{"l":"Configure a project","p":["Only setup Browserslist for projects that are emitting application bundles. For example, a library project shouldn't include Browserslist but a web application project should."]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure Browserslist","p":["First, create a configuration file named .browserslistrc at the root of the project:","Then, open the newly created file and extend the default configuration with the shared configuration provided by @workleap/browserslist-config:"]},{"l":"Support custom browsers","p":["If you are encountering a situation that is not currently handled by @workleap/browserslist-configs, you can customize your configuration file to extend this library shared configurations with additional browser versions:","Refer to the Browserslist documentation for a full list of available queries."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new Browserslist configuration, open a terminal at the root of the project and execute the following command:","A list of the selected browser versions shoud be outputted to the terminal:"]}],[{"l":"ESLint"},{"l":"By project type configurations","p":["Typically, ESLint shareable configuration libraries are architectured around the idea that shared configurations should be small and composable to accommodate any potential use cases that a development team might encounter.","While composability provides flexibility, it also increases the complexity on the consumer side as they must understand how ESLint cascading and hierarchy works and how to compose the provided shared configurations correctly. It can be frustrating at times when you want to get something up and running quickly.","To improve the experience, rather than delegating the composition of the shared configuration pieces to the consumer, we compose them internally and offer configurations by project type instead.","This way, it's pretty straightforward for the consumer to configure ESLint as it only involves extending a single shared configuration per project and it allows for more accurate defaults and assumptions about the target environment. For advanced users in need of flexibility, the underlying configuration pieces are also available."]},{"i":"shopify-web-configs-example","l":"@shopify/web-configs example","p":["Have a look at Shopify ESLint usage section. To configure ESLint with @shopify/web-configs, a consumer must choose whether he wants rules for es5, esnext, typescript or node, then decide if he should use @babel/eslint-parser or @typescript-eslint/parser.","To make the right choices and assemble the final configuration correctly, a consumer must have niche front-end skills."]},{"l":"Target environment","p":["@workleap/eslint-plugin by project type shared configurations targets the following environment:","ESM / CommonJS","ESNext","Node"]},{"l":"Available configurations","p":["Name","Description","web-application","For web applications developed with React and TypeScript.","react-library","For TypeScript libraries developed with React.","typescript-library","For TypeScript libraries developed without React.","monorepo-workspace","For the workspace configuration of a monorepo solution."]},{"l":"Prettier","p":["For a complete explanation of why we chose to stick with ESLint for stylistic rules rather than migrating to Prettier, read the following article."]},{"l":"Getting started","p":["To get started, choose one of the following scenarios \uD83D\uDC47"]},{"l":"Setup a new project","p":["If you are looking to setup a new polyrepo solution (single project per repository), follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo."]},{"l":"Setup an existing project","p":["If you are migrating an existing polyrepo solution (single project per repository) to workleap/web-configs, follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo.","Once configured, to understand how to adapt @workleap/eslint-plugin default configurations to your codebase while you are completing the migration, have a look at the custom configuration page."]},{"l":"Advanced configuration","p":["If you are encountering a challenging use case making impractical the per project type configurations offered by @workleap/eslint-plugin, have a look at the advanced composition page for documentation about how to compose the underlying configuration pieces."]}],[{"l":"Setup a polyrepo","p":["Execute the following steps to setup ESLint for a polyrepo solution ( single project per repository) \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the solution and install the following packages:"]},{"l":"Configure ESLint","p":["First, create a configuration file named .eslintrc.json at the root of the solution:","Then, open the newly created file and extend the default configuration with one of the shared configurations provided by @workleap/eslint-plugin\uD83D\uDC47"]},{"l":"web-application","p":["For an application developed with TypeScript and React, use the following configuration:"]},{"l":"react-library","p":["For a TypeScript library developed with React, use the following configuration:"]},{"l":"typescript-library","p":["For a TypeScript library developed without React, use the following configuration:"]},{"i":"eslintignore","l":".eslintignore","p":["ESLint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.","To do so, first, create an .eslintignore file at the root of the solution:","Then, open the newly created file and paste the following ignore rules:","While only the .storybook dot folder is listed, you should include any other dot folders that need to be linted."]},{"l":"Configure the indent style","p":["ESLint offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.","To guarantee a consistent indentation, we recommend using EditorConfig on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and VS Code.","First, create a .editorconfig file at the root of the solution:","Then, open the newly created file and paste the following configuration:","Finally, install the EditorConfig.EditorConfig VS Code extension."]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's package.json file:","The script definition may vary depending of your needs and your application configuration. For example, you might want to specify specific file extensions such as --ext .js,.ts,.tsx."]},{"l":"Custom configuration","p":["New projects shouldn't have to customize the default configurations offered by @workleap/eslint-plugin. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new ESLint setup, open a JavaScript file, type invalid code (e.g. var x = 0;), then save. Open a terminal at the root of the solution and execute the CLI script added earlier:","The terminal should output a linting error."]}],[{"l":"Setup a monorepo","p":["This monorepo setup has been tested with PNPM workspaces. You may need a different setup for NPM workspaces or Yarn workspaces because by default, those package managers hoist dependencies rather than installing them in isolation like PNPM.","To lint a monorepo solution ( multiple projects per repository), ESLint must be setuped to lint the files at the root of the solution (the monorepo workspace) and the files of every project of the monorepo. Execute the following steps to setup ESLint for a monorepo solution \uD83D\uDC47"]},{"l":"Setup the workspace"},{"l":"Install the packages","p":["Open a terminal at the root of the solution workspace (the root of the repository) and install the following packages:"]},{"l":"Configure ESLint","p":["First, create a configuration file named .eslintrc.json at the root of the solution workspace:","Then, open the newly created file and extend the default configuration with the monorepo-workspace shared configurations:"]},{"i":"eslintignore","l":".eslintignore","p":["ESLint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.","To do so, first, create a .eslintignore file at the root of the solution workspace:","Then, open the newly created file and paste the following ignore rules:","While only the .storybook dot folder is listed, you should include any other dot folders that need to be linted."]},{"l":"Configure indent style","p":["ESLint offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.","To guarantee a consistent indentation, we recommend using EditorConfig on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and VS Code.","First, create a .editorconfig file at the root of the solution workspace:","Then, open the newly created file and paste the following configuration:"]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace package.json file:","The script definition may vary depending of your needs and your application configuration. For example, you might want to specify specific file extensions such as --ext .js,.ts,.tsx."]},{"l":"Setup a project"},{"l":"Install the package","p":["Open a terminal at the root of the project ( packages/app for this example) and install the following package:"]},{"i":"configure-eslint-1","l":"Configure ESLint","p":["First, create a configuration file named .eslintrc.json at the root of the project:","Then, open the newly created file and extend the default configuration with one of the shared configurations provided by @workleap/eslint-plugin\uD83D\uDC47"]},{"l":"web-application","p":["For an application developed with TypeScript and React, use the following configuration:"]},{"l":"react-library","p":["For a TypeScript library developed with React, use the following configuration:"]},{"l":"typescript-library","p":["For a TypeScript library developed without React, use the following configuration:"]},{"l":"Custom configuration","p":["New projects shouldn't have to customize the default configurations offered by @workleap/eslint-plugin. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new ESLint setup, open a JavaScript file, type invalid code (e.g. var x = 0;), then save. Open a terminal at the root of the solution and execute the CLI script added earlier:","The terminal should output a linting error."]}],[{"l":"Custom configuration","p":["If you are in the process of migrating an existing project to use @workleap/eslint-plugin or encountering a challenging situation that is not currently handled by this library, you might want to customize the default shared configurations.","For a list of the rules included with the default shared configurations, refer to the configuration files in the following folder on GitHub."]},{"l":"Disable a default rule","p":["You can disable a default rule by defining the rule locally with the off value:"]},{"l":"Change a default rule severity","p":["You can update the severity of a rule by defining the rule locally with either the warn or error severity:"]},{"l":"Change a default rule value","p":["You can update a default rule value by defining the rule locally with its new value:","Please, don't update your project configuration to use single quotes \uD83D\uDE05\uD83D\uDE4F"]},{"l":"Add a plugin","p":["You can add configure additional rules from a third party ESLint plugin:"]},{"l":"Start from scratch","p":["If your situation is so challenging that you must start a new configuration from scratch, refer to the advanced composition page."]}],[{"l":"Advanced composition","p":["If the default by project type configurations doesn't fits your needs, rather than writing your own configuration from scratch, you can compose a new one from the underlying configuration pieces of @workleap/eslint-plugin."]},{"l":"Available pieces","p":["Basic rules shared by every configuration.","core","Description","jest","jsx-a11y","mdx","Name","package-json","react","Rules for Jest files using Testing Library.","Rules for Jest files.","Rules for MDX files (used for Storybook MDX stories).","Rules for package.json files.","Rules for React files.","Rules for Storybook story files.","Rules for testing accessibility in React files.","Rules for TypeScript files.","Rules for YAML files.","storybook","testing-library","typescript","yaml"]},{"l":"Compose a configuration","p":["Each configuration piece can be extended individually, or in combination with other pieces, to compose your own custom ESLint configuration."]},{"l":"Single piece","p":["To extend the configuration with a single piece:"]},{"l":"Multiple pieces","p":["To extend the configuration with multiple pieces:"]},{"l":"Lint additional files","p":["The configuration pieces already targets which file extensions their linting rules will be applied to. If you wish to lint additional file extensions for a given piece you can add an ESLint override block:"]}],[{"l":"Integrate with VS Code","p":["ESLint VS Code extension greatly improve the development experience by automatically linting the code as you type and automatically formatting the code according to your ESLint configuration whenever you save."]},{"l":"Install ESLint extension","p":["Open VS Code and install the dbaeumer.vscode-eslint extension."]},{"l":"Configure VS Code","p":["Then, add the following settings to your solution VS Code settings file:"]},{"l":"Install EditorConfig extension","p":["Finally, install the EditorConfig.EditorConfig extension."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["Restart VS Code, open a JavaScript file, type invalid code (e.g. var x = 0;), then save. The code should have been formatted automatically (e.g. const x = 0;)."]}],[{"l":"Stylelint"},{"l":"SCSS support","p":["While SCSS still offers numerous advantages, as we actively work on improving our build time and minimize the number of tools compiling/transpiling frontend code, we choose to move away from Sass and not provide any Stylelint's rules for Sass. If you are still using Sass strictly for nesting, note that native support for nesting is coming soon to CSS."]},{"l":"Embedding Prettier","p":["Since v15.0.0, Stylelint's stylistic rules has been deprecated. The current recommendation is to use Prettier instead to format CSS files.","For that reason, @workleap/stylelint-configs shared configurations includes the stylelint-prettier plugin. Using this plugin, Prettier changes are exposed as Stylelint's rule violations.","Since we choose to stick with ESLint for JavaScript and JSON stylistic rules, a .prettierignore file must be added at the root of the solution to ignore everything but CSS files:","Otherwise, Prettier will also format your .js,.json,.ts files and you'll end up with conflicts between Prettier and ESLint."]},{"l":"Getting started","p":["To get started, choose one of the following scenarios \uD83D\uDC47"]},{"l":"Setup a new project","p":["If you are looking to setup a new polyrepo solution (single project per repository), follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo."]},{"l":"Setup an existing project","p":["If you are migrating an existing polyrepo solution (single project per repository) to workleap/web-configs, follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo.","Once configured, to understand how to adapt @workleap/stylelint-configs default configurations to your codebase while you are completing the migration, have a look at the custom configuration page."]}],[{"l":"Setup a polyrepo","p":["Execute the following steps to setup Stylelint for a polyrepo solution ( single project per repository) \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the solution and install the following packages:"]},{"l":"Configure Stylelint","p":["First, create a configuration file named .stylelintrc.json at the root of the solution:","Then, open the newly created file and extend the default configuration with the shared configurations provided by @workleap/stylelint-configs:"]},{"i":"stylelintignore","l":".stylelintignore","p":["Stylelint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.","To do so, first, create a .stylelintignore file at the root of the solution:","Then, open the newly created file and paste the following ignore rules:"]},{"i":"prettierignore","l":".prettierignore","p":["Since we choose to stick with ESLint for JavaScript and JSON stylistic rules, a .prettierignore file must be added at the root of the solution to ignore everything but CSS files.","To do so, first, create a .prettierignore file at the root of the solution:","Then, open the newly created file and paste the following ignore rules:"]},{"l":"Configure indent style","p":["Prettier offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.","To guarantees a consistent indentation, we recommend using EditorConfig on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including Prettier and VS Code.","First, create a .editorconfig file at the root of the solution:","Then, open the newly created file and paste the following configuration:","Finally, install the EditorConfig.EditorConfig VS Code extension."]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's package.json file:","The script definition may vary depending on your needs and your application configuration. For example, you might want to specify additional file extensions such as **/*.{css,scss,sass}."]},{"l":"Custom configuration","p":["New projects shouldn't have to customize the default configurations offered by @workleap/stylelint-configs. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new setup, open a CSS file, type invalid code (e.g. color: #fff), then save. Open a terminal at the root of the solution and execute the CLI script added earlier:","The terminal should output a linting error."]}],[{"l":"Setup a monorepo","p":["This monorepo setup has been tested with PNPM workspaces. You may need a different setup for NPM workspaces or Yarn workspaces because by default, those package managers hoist dependencies rather than installing them in isolation like PNPM.","To lint a monorepo solution ( multiple projects per repository), Stylelint must be setuped to lint the files at the root of the solution (the monorepo workspace) and the files of every project of the monorepo. Execute the following steps to setup Stylelint for a monorepo solution."]},{"l":"Setup the workspace"},{"l":"Install the packages","p":["Open a terminal at the root of the solution workspace (the root of the repository) and install the following packages:"]},{"l":"Configure Stylelint","p":["First, create a configuration file named .stylelintrc.json at the root of the solution workspace:","Then, open the newly created file and extend the default configuration with the shared configurations provided by @workleap/stylelint-configs:"]},{"i":"stylelintignore","l":".stylelintignore","p":["Stylelint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.","To do so, first, create an .stylelintignore file at the root of the solution workspace:","Then, open the newly created file and paste the following ignore rules:"]},{"i":"prettierignore","l":".prettierignore","p":["Since we choose to stick with ESLint for JavaScript and JSON stylistic rules, a .prettierignore file must be added at the root of the solution workspace to ignore everything but CSS files.","To do so, first, create a .prettierignore file at the root of the solution workspace:","Then, open the newly created file and paste the following ignore rules:"]},{"l":"Configure the indent style","p":["Prettier offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.","To guarantee a consistent indentation, we recommend using EditorConfig on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and VS Code.","First, create a .editorconfig file at the root of the solution workspace:","Then, open the newly created file and paste the following configuration:"]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace package.json file:","The script definition may vary depending on your needs and your application configuration. For example, you might want to specify additional file extensions such as **/*.{css,scss,sass}."]},{"l":"Setup a project"},{"i":"install-the-packages-1","l":"Install the packages","p":["Open a terminal at the root of the project ( packages/app for this example) and install the following package:"]},{"i":"configure-stylelint-1","l":"Configure Stylelint","p":["First, create a configuration file named .stylelintrc.json at the root of the project:","Then, open the newly created file and extend the default configuration with the shared configurations provided by @workleap/stylelint-configs:"]},{"l":"Custom configuration","p":["New projects shouldn't have to customize the default configurations offered by @workleap/stylelint-configs. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new setup, open a CSS file, type invalid code (e.g. color: #fff), then save. Open a terminal at the root of the solution and execute the CLI script added earlier:","The terminal should output a linting error."]}],[{"l":"Custom configuration","p":["If you are in the process of migrating an existing project to use @workleap/stylelint-configs or encountering a challenging situation that is not currently handled by this library, you might want to customize the default shared configurations.","For a list of the rules included with the default shared configurations, refer to the following file on GitHub."]},{"l":"Disable a default rule","p":["You can disable a default rule by defining the rule locally with the null value:"]},{"l":"Change a default rule severity","p":["You can update the severity of a rule by defining the rule locally with either the warn or error severity:"]},{"l":"Change a default rule value","p":["You can update a default rule value by defining the rule locally with its new value:"]},{"l":"Add a plugin","p":["You can configure additional rules from a third party Stylelint plugin:"]}],[{"l":"Integrate with VS Code","p":["Stylelint VS Code extension greatly improves the development experience by automatically linting the code as you type and automatically formatting the code according to your Stylelint configuration whenever you save."]},{"l":"Install Stylelint extension","p":["Open VS Code and install the stylelint.vscode-stylelint extension."]},{"l":"Configure VS Code","p":["Then, add the following settings to your solution VS Code settings file:"]},{"l":"Install EditorConfig extension","p":["Finally, install the EditorConfig.EditorConfig extension."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["Restart VS Code, open a CSS file, type invalid code in a CSS selector (e.g. color: #fff), then save. The code should have been formatted automatically (e.g. color: #ffffff)."]}],[{"l":"Typescript"},{"l":"By project type configurations","p":["Typically, TypeScript shareable configuration libraries are architectured around the idea that shared configurations should be small and composable to accomodate any potential use cases that a development team might encounter.","While composability provides flexibility, it also increases the complexity on the consumer side as they must understand how TypeScript configuration inheritance works and how to compose the provided shared configurations correctly. It can be frustrating at times when you want to get something up and running quickly.","To improve the experience, rather than delegating the composition of the shared configuration pieces to the consumer, we compose them internally and offer configurations by project type instead.","This way, it's pretty straightforward for the consumer to configure TypeScript, as it only involves extending a single shared configuration per project and it allows for more accurate defaults and assumptions about the target environment. For advanced users in need of flexibility, the underlying configuration pieces are also available."]},{"l":"Linting only","p":["@workleap/typescript-configs by project type shared configurations exclusively focus on code linting, as tsup is handling the transpilation process."]},{"l":"Target environment","p":["@workleap/typescript-configs by project type shared configurations targets the following environment:","ESM","ESNext","If you are in the process of migrating an existing project to @workleap/typescript-configs, and would rather delay transitioning to ESM, refer to the custom configuration page for information about how to support non ESM projects."]},{"l":"Available configurations","p":["Name","Description","web-application","For web applications developed with React.","library","For library project developed with or without React.","monorepo-workspace","For the workspace configuration of a monorepo solution."]},{"l":"Getting started","p":["To get started, choose one of the following scenarios \uD83D\uDC47"]},{"l":"Setup a new project","p":["If you are looking to setup a new polyrepo solution (single project per repository), follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo."]},{"l":"Setup an existing project","p":["If you are migrating an existing polyrepo solution (single project per repository) to workleap/web-configs, follow the guide to setup a polyrepo, otherwise, follow the guide to setup a monorepo.","Once configured, to understand how to adapt @workleap/typescript-configs default configurations to your codebase while you are completing the migration, have a look at the custom configuration page."]},{"l":"Advanced configuration","p":["If you are encountering a challenging use case making impractical the per project type configurations offered by @workleap/typescript-configs, have a look at the advanced composition page for documentation about how to compose the underlying configuration pieces of this library."]}],[{"l":"Setup a polyrepo","p":["Execute the following steps to setup TypeScript for a polyrepo solution ( single project per repository) \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the solution and install the following packages:"]},{"l":"Configure TypeScript","p":["First, create a configuration file named tsconfig.json at the root of the solution:","Then, open the newly created file and extend the default configuration with one of the shared configurations provided by @workleap/typescript-configs\uD83D\uDC47"]},{"l":"web-application","p":["For an applications developed with React, use the following configuration:","If your application is using Storybook, make sure to include the .storybook folder:"]},{"l":"library","p":["For a library project developed with or without React, use the following configuration:","If your application is using Storybook, make sure to include the .storybook folder and exclude the .storybook/storybook-static folder:"]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's package.json file:"]},{"l":"Custom configuration","p":["New projects shouldn't have to customize the default configurations offered by @workleap/typescript-configs. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new TypeScript setup, open a TypeScript file, type invalid code (e.g. import { App } from ./App), then wait for the IDE to flag the error. Fix the error (e.g. import { App } from ./App.tsx), then wait for the IDE to remove the error."]}],[{"l":"Setup a monorepo","p":["This monorepo setup has been tested with PNPM workspaces. You may need a different setup for NPM workspaces or Yarn workspaces because by default, those package managers hoist dependencies rather than installing them in isolation like PNPM.","To lint a monorepo solution ( multiple projects per repository), TypeScript must be setuped to lint the files at the root of the solution (the monorepo workspace) and the files of every project of the monorepo. Execute the following steps to setup TypeScript for a monorepo solution."]},{"l":"Setup the workspace"},{"l":"Install the packages","p":["Open a terminal at the root of the solution workspace (the root of the repository) and install the following packages:"]},{"l":"Configure TypeScript","p":["First, create a configuration file named tsconfig.json at the root of the solution workspace:","Then, open the newly created file and extend the default configuration with the monorepo-workspace shared configurations:","If your application is using Storybook, make sure to include the .storybook folder and exclude the .storybook/storybook-static folder:"]},{"l":"Add a CLI script","p":["At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace package.json file:"]},{"l":"Setup a project"},{"l":"Install the package","p":["Open a terminal at the root of the project ( packages/app for this example) and install the following package:"]},{"i":"configure-typescript-1","l":"Configure TypeScript","p":["First, create a configuration file named tsconfig.json at the root of the project:","Then, open the newly created file and extend the default configuration with one of the shared configurations provided by @workleap/typescript-configs\uD83D\uDC47"]},{"l":"web-application","p":["For an applications developed with React, use the following configuration:"]},{"l":"library","p":["For a library project developed with or without React, use the following configuration:"]},{"l":"Custom configuration","p":["New projects shouldn't have to customize most of the default configurations offered by @workleap/typescript-configs. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in❤️✌️."]},{"l":"Compiler paths","p":["If any projects of your solution are referencing other projects of the monorepo workspace (e.g. @sample/components: workspace:*), chances are that you'll need to define paths in their tsconfig.json file.","Given the following solution:","If the packages/components project is referencing the packages/utils project, and the packages/app project is referencing the packages/components project, you'll need to add the following compilerOptions.paths:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new TypeScript setup, open a TypeScript file, type invalid code (e.g. import { App } from ./App), then wait for the IDE to flag the error. Fix the error (e.g. import { App } from ./App.tsx), then wait for the IDE to remove the error."]}],[{"l":"Custom configuration","p":["If you are in the process of migrating an existing project to use @workleap/typescript-configs or encountering a challenging situation that is not currently handled by this library, you might want to customize the default shared configurations.","For a list of the rules included with the default shared configurations, refer to the configuration files in the following folder on GitHub."]},{"l":"Change a default field value","p":["You can update a default field value by defining the field locally with its new value:"]},{"l":"Non ESM projects","p":["If you are migrating an existing project and prefer to wait before moving to ESM, add the following custom configurations to allow import statements without specifying a file extension:"]},{"l":"Start from scratch","p":["If your situation is so challenging that you must start a new configuration from scratch, refer to the advanced composition page."]}],[{"l":"Advanced composition","p":["If the default by project type configurations doesn't fits your needs, rather than writing your own configuration from scratch, you can compose a new one from the underlying configuration pieces of @workleap/typescript-configs."]},{"l":"Available pieces","p":["Name","Description","core","Basic rules shared by every configuration.","react","Rules for React applications and libraries."]},{"l":"Compose a new configuration","p":["Each configuration piece can be extended individually, or in combination with other pieces, to compose your own custom TypeScript configuration."]},{"l":"React configuration","p":["To extend the base configuration for a React project:"]},{"l":"Non React configuration","p":["To extend the core configuration for a regular TypeScript project:"]}],[{"l":"SWC"},{"l":"Main features","p":["The shared configurations offered by @workleap/swc-configs includes the following features \uD83D\uDC47"]},{"l":"Language support","p":["JavaScript","TypeScript"]},{"l":"Framework support","p":["React"]},{"l":"Development features","p":["Fast Refresh"]},{"l":"Production features","p":["Minification"]},{"l":"Target environment","p":["ESM","ECMAScript features matching the provided browsers"]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure SWC for either a development environment, a production environment or to run Jest tests."]}],[{"l":"Configure for development","p":["To configure SWC for a development environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure SWC","p":["First, create a configuration file named swc.dev.js at the root of the project:","Then, open the newly created file and export the SWC configuration by using the defineDevConfig(targets, options) function:"]},{"l":"targets","p":["In the previous code sample, the defineDevConfig(targets, options) function receives a list of minimal browser versions to support through the targets parameter.","The expected behavior for the supported browsers would be for SWC to automatically load the minimal browser versions from the closest .browserslistrc configuration file. However, there is currently an issue preventing SWC from doing so when the configuration file include a query referencing an external Browserslist configuration:","Therefore, @workleap/swc-configs has chosen to delegate the loading of the Browserslist configuration to the consumer by making the targets option required."]},{"l":"browserslistToSwc","p":["To help consumers provide SWC targets from a Browserslist configuration, @workleap/swc-configs offers the browserslistToSwc(options) utility function.","This function can either transform an array of Browserslist queries to SWC targets:","Or load the closest .browserslistrc configuration file and convert the queries into SWC targets:","The browserslistToSwc(options) utility function accepts any option supported by Browserslist JS API in addition to a queries option:","queries: string | string[]"]},{"l":"Use predefined options","p":["The defineDevConfig(targets, options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"baseUrl","p":["Type: string","Sets a base directory from which to resolve module names. This option is usually provided when custom paths are provided. Note that SWC requires the baseUrl to be an absolute path."]},{"l":"fastRefresh","p":["Type: boolean","Default: true","Whether or not to enable Fast Refresh."]},{"l":"parser","p":["Type: ecmascript | typescript","Default: typescript","Whether SWC should expect to parse JavaScript or TypeScript code."]},{"l":"paths","p":["You shouldn't need to define custom paths for your project. If you're defining custom paths to support aliases, consider using the imports field of your project's package.json file instead.","Type: Recordstring, string[]","A series of entries which re-map imports to lookup locations relative to the baseUrl if set."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default development configuration of @workleap/swc-configs, but only covers a subset of an SWC configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineDevConfig function. Remember, no locked in❤️✌️.","To view the default development configuration of @workleap/swc-configs, have a look at the dev.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: SwcConfig, context: SwcConfigTransformerContext) = SwcConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in:","environment: dev | build | jest"]},{"l":"Configure webpack","p":["To integrate with webpack, update your configuration file to include an swc-loader:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new SWC configuration, create a Typescript file with the following code:","If you integrated SWC with webpack, make sure to import the previously created file in one of your webpack entry points, then start the webpack development server. The development server should start without outputting any error to the console.","Otherwise, open a terminal at the root of your project and install @swc/cli:","Then, process the file with @swc/cli by executing the following command in the same terminal:","The generated say.js file should include the following transpiled code:"]}],[{"l":"Configure for build","p":["To configure SWC for a production environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure SWC","p":["First, create a configuration file named swc.build.js at the root of the project:","Then, open the newly created file and export the SWC configuration by using the defineBuildConfig(targets, options) function:"]},{"l":"targets","p":["In the previous code sample, the defineBuildConfig(targets, options) function receives a list of minimal browser versions to support through the targets parameter.","The expected behavior for the supported browsers would be for SWC to automatically load the minimal browser versions from the closest .browserslistrc configuration file. However, there is currently an issue preventing SWC from doing so when the configuration file include a query referencing an external Browserslist configuration:","Therefore, @workleap/swc-configs has chosen to delegate the loading of the Browserslist configuration to the consumer by making the targets option required."]},{"l":"browserslistToSwc","p":["To help consumers provide SWC targets from a Browserslist configuration, @workleap/swc-configs offers the browserslistToSwc(options) utility function.","This function can either transform an array of Browserslist queries to SWC targets:","Or load the closest .browserslistrc configuration file and convert the queries into SWC targets:","The browserslistToSwc(options) utility function accepts any option supported by Browserslist JS API in addition to a queries option:","queries: string | string[]"]},{"l":"Use predefined options","p":["The defineBuildConfig(targets, options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"baseUrl","p":["Type: string","Sets a base directory from which to resolve module names. This option is usually provided when custom paths are provided. Note that SWC requires the baseUrl to be an absolute path."]},{"l":"parser","p":["Type: ecmascript | typescript","Default: typescript","Whether SWC should expect to parse JavaScript or TypeScript code."]},{"l":"paths","p":["You shouldn't need to define custom paths for your project. If you're defining custom paths to support aliases, consider using the imports field of your project's package.json file instead.","Type: Recordstring, string[]","A series of entries which re-map imports to lookup locations relative to the baseUrl if set."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default build configuration of @workleap/swc-configs, but only covers a subset of an SWC configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineBuildConfig function. Remember, no locked in❤️✌️.","To view the default development configuration of @workleap/swc-configs, have a look at the build.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: SwcConfig, context: SwcConfigTransformerContext) = SwcConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in:","environment: dev | build | jest"]},{"l":"Configure webpack","p":["To integrate with webpack, update your configuration file to include an swc-loader:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new SWC configuration, create a Typescript file with the following code:","If you integrated SWC with webpack, make sure to import the previously created file in one of your webpack entry points, then execute your webpack build and find the transpiled code in the generated bundle files of your dist folder.","Otherwise, open a terminal at the root of your project and install @swc/cli:","Then, process the file with @swc/cli by executing the following command in the same terminal:","Whether you processed the file with webpack or @swc/cli, the transpiled code should be:"]}],[{"l":"Configure for Jest","p":["To configure SWC for a Jest environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure SWC","p":["To use a TypeScript configuration file, make sure that your Jest configuration is also in TypeScript.","First, create a configuration file named swc.jest.ts at the root of the project:","Then, open the newly created file and export the SWC configuration by using the defineJestConfig(options) function:"]},{"l":"Use predefined options","p":["The defineJestConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"baseUrl","p":["Type: string","Sets a base directory from which to resolve module names. This option is usually provided when custom paths are provided. Note that SWC requires the baseUrl to be an absolute path."]},{"l":"react","p":["Type: boolean","Default: false","Whether or not to transform React code."]},{"l":"parser","p":["Type: ecmascript | typescript","Default: typescript","Whether SWC should expect to parse JavaScript or TypeScript code."]},{"l":"paths","p":["You shouldn't need to define custom paths for your project. If you're defining custom paths to support aliases, consider using the imports field of your project's package.json file instead.","Type: Recordstring, string[]","A series of entries which re-map imports to lookup locations relative to the baseUrl if set."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default development configuration of @workleap/swc-configs, but only covers a subset of an SWC configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineJestConfig function. Remember, no locked in❤️✌️.","To view the default Jest configuration of @workleap/swc-configs, have a look at the jest.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: SwcConfig, context: SwcConfigTransformerContext) = SwcConfig)[]","Default: []"]},{"l":"Configure Jest","p":["To configure Jest, open the project jest.config.ts file and add the following code:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new SWC configuration, create a Jest test in Typescript:","Open a terminal and run Jest directly from the CLI:","The test should succeed without any error outputted to the console."]}],[{"l":"Rsbuild","p":["Rsbuild is a high-performance build tool powered by Rspack, a Rust-based port of webpack designed for efficiency and speed. Those new Rsbuild shared configurations are a modern replacement for previous Workleap's shared webpack configurations."]},{"l":"Main features","p":["The shared configurations offered by @workleap/rsbuild-configs includes the following features \uD83D\uDC47"]},{"l":"Language support","p":["JavaScript","TypeScript","CSS (with CSS modules and LightningCSS)"]},{"l":"Framework support","p":["React"]},{"l":"Asset support","p":["SVG as React components","PNG","JPEG","GIF"]},{"l":"Development features","p":["Development server","Fast Refresh or Hot Module Reload","Sourcemap"]},{"l":"Production features","p":["Minification","Output to /dist"]},{"l":"Target environment","p":["As per the Browserlist configuration."]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure Rsbuild for either a development environment, a production environment or storybook.","If your project is already using @workleap/webpack-configs, follow the migration guide."]}],[{"l":"Configure for development","p":["To configure Rsbuild for a development environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure Rsbuild"},{"l":"HTML template","p":["First, create a public folder with an index.html file at the root of the project:","Then, open the newly created index.html file and copy/paste the following content:","The content of the public/index.html file will be the template used by Rsbuild HTML template feature."]},{"l":"Reference local assets","p":["To reference local assets such as a favicon.png in the default HTML template, it is recommended to preprend the relative path of every asset with the assetPrefix option of the Rsbuild config.","First, add the asset to the public folder at the root of the project:","Then, add the assets to the index.html file:","If assetPrefix is set to auto, use href=favicon.png instead."]},{"l":"Browserslist","p":["Next, let's set up Browserlist to define the minimum browser versions supported by the application. Rsbuild will automatically detect and load the browser versions from the nearest .browserslistrc configuration file.","First, create a browserslistrc file at the root of the project:","Then, open the newly created file and extend the default configuration with the shared configuration provided by @workleap/browserslist-config:"]},{"i":"rsbuilddevts","l":"rsbuild.dev.ts","p":["Next, create a configuration file named rsbuild.dev.ts at the root of the project:","Then, open the newly created file and export the Rsbuild configuration by using the defineDevConfig(options) function:"]},{"l":"Use predefined options","p":["The defineDevConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"entry","p":["Type: An object literal accepting any source.entry options.","Default: { index: ./src/index.tsx }","Set Rsbuild source.entry option."]},{"l":"https","p":["Type: boolean or an object literal accepting any server.https options.","Default: false","Set Rsbuild server.https option and format Rsbuild dev.assetPrefix option accordingly.","When true, a self-signed certificate will be generated with rsbuild-plugin-basic-ssl. To manually set a certificate, follow Rsbuild instructions."]},{"l":"host","p":["Type: string","Default: localhost","Set Rsbuild server.host option and format Rsbuild dev.assetPrefix option accordingly."]},{"l":"port","p":["Type: number","Default: 8080","Set Rsbuild server.port option and format Rsbuild dev.assetPrefix option accordingly."]},{"l":"assetPrefix","p":["This option is the Rsbuild equivalent of webpack publicPath option.","Type: string","Default: ${https ? https : http}://${host}:${port}","Set Rsbuild dev.assetPrefix option.","If you're unsure of the asset prefix in advance, set the option to auto. Rsbuild will automatically determine the asset prefix using import.meta.url or document.currentScript."]},{"l":"plugins","p":["Type: An array of Rsbuild plugin instances","Default: []","Append the provided Rsbuild plugins to the configuration."]},{"l":"html","p":["Type: false or (defaultOptions: HtmlConfig) = HtmlConfig","Default: defaultOptions = defaultOptions","By default, Rsbuild will attempt to load an HTML template from the public/index.html file. To use Rsbuild's built-in HTML template instead, set the option to false.","To customize the default HTML template configuration, provide a function extending the default options."]},{"l":"lazyCompilation","p":["Type: boolean","Default: true","Whether or not to use lazy compilation. To disable lazy compilation, set the option to false."]},{"l":"hmr","p":["Type: boolean","Default: true","Whether or not to use HMR. To disable HMR set the option to false."]},{"l":"fastRefresh","p":["Type: boolean","Default: true","Whether or not to use Fast Refresh instead of use HMR. To disable fast refresh set the option to false.","To customize the Fast Refresh configuration, provide a react function extending the default options."]},{"l":"sourceMap","p":["Type: false or an object literal accepting any output.sourceMap options.","Default: { js: cheap-module-source-map, css: true }","Whether or not to generate source map. To disable source map, set the option to false.","To customize the source map configuration, provide an object literal."]},{"l":"overlay","p":["Type: false","Default: undefined","Whether or not a full-screen overlay should be in the browser when there are compiler errors or warnings."]},{"l":"react","p":["Type: false or (defaultOptions: PluginReactOptions) = PluginReactOptions","Default: defaultOptions = defaultOptions","Whether or not to transform React code. To disable React code transformation, set the option to false.","To customize plugin-react, provide a function to extend the default options."]},{"l":"svgr","p":["Type: false or (defaultOptions: PluginSvgrOptions) = PluginSvgrOptions","Default: defaultOptions = defaultOptions","Whether or not to handle .svg files with plugin-svgr. When the option is set to false, the .svg files will be handled by the asset/resource rule.","To customize the plugin-svgr, provide a function extending the default options."]},{"l":"Typings","p":["When you reference an SVG asset in TypeScript code, TypeScript may prompt that the module is missing a type definition:","To fix this, you need to add type declaration for the SVG assets, create a src/env.d.ts file, and add the type declaration.","For additional information, refer to the plugin documentation."]},{"l":"Import images","p":["By default, plugin-svgr is configured to support named import for ReactComponent:"]},{"l":"verbose","p":["Type: boolean","Default: false","Start the Rsbuild process with verbose logging turned on."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default development configuration of @workleap/rsbuild-configs, but only covers a subset of an Rsbuild configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineDevConfig function. Remember, no locked in❤️✌️.","To view the default development configuration of @workleap/rsbuild-configs, have a look at the dev.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: RsbuildConfig, context: RsbuildConfigTransformerContext) = RsbuildConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in.","environment: dev | build | storybook","verbose: boolean"]},{"l":"Setup nodemon","p":["Nodemon is a utility that will monitor for any changes in the rsbuild.dev.dev.ts file and restart the Rsbuild development server whenever a change occurs.","First, add a nodemon.json file at the root of the project:","Then, open the nodemon.json file and copy/paste the following content:","Finally, add a CLI script at the next step of this guide."]},{"l":"Add a CLI script","p":["To initiate the development server, add the following script to your project package.json file:"]},{"l":"Define environment variables"},{"l":"cross-env","p":["We recommend to define environment variables using cross-env. With cross-env, the environment variables will be made available to any Node.js files that are executed by the script process ( dev in the example below \uD83D\uDC47):","However, there's a catch. When using cross-env, the variables will not be available in the application files because cross-env only makes them available to files that are executed by the process at build time while the application files are executed at runtime by a browser.","To make them accessible to the application files, Rsbuild must be aware of those environment variables and render them into the compiled application files. This is the purpose of the environmentVariables option."]},{"l":"environmentVariables","p":["Type: Recordstring, unknown","Default: {}","First, define the variables with environmentVariables:","Then, use the variables in any application files:","The === true part of DEBUG: process.env.DEBUG === true is very important, otherwise the environment variable value would be true instead of true.","By default, Rsbuild injects a few environment variables into the code using the source.define option. For additional information about these default environment variables, refer to the Rsbuild documentation."]},{"l":"CSS modules typings","p":["When you import CSS Modules in TypeScript code, TypeScript may prompt that the module is missing a type definition:","To fix this, you need to add a type declaration file for the CSS Modules, please create a src/env.d.ts file, and add the corresponding type declaration.","Make sure the project have a dependency on @rsbuild/core."]},{"l":"Monorepo","p":["If your solution is a monorepo, ensure that projects referencing your packages that include CSS Modules, also include the necessary type definitions","For example, given the following structure:","Copy the CSS Modules typings into the app web application own env.d.ts file, or include the components package's typings into the apps web application tsconfig.ts configuration file:","For additional information abour CSS modules type declaration, refer to the Rsbuild documentation."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new Rsbuild configuration, open a terminal at the root of the project and execute the CLI script added earlier. A development server should start without outputting any error in the terminal."]}],[{"l":"Configure for build","p":["To configure Rsbuild for a production environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages"},{"l":"Configure Rsbuild"},{"l":"HTML template","p":["First, create a public folder with an index.html file at the root of the project:","Then, open the newly created index.html file and copy/paste the following content:","The content of the public/index.html file will be the template used by Rsbuild HTML template feature."]},{"l":"Reference local assets","p":["To reference local assets such as a favicon.png in the default HTML template, it is recommended to preprend the relative path of every asset with the assetPrefix option of the Rsbuild config.","First, add the asset to the public folder at the root of the project:","Then, add the assets to the index.html file:","If assetPrefix is set to auto, use href=favicon.png instead."]},{"l":"Browserslist","p":["Next, let's set up Browserlist to define the minimum browser versions supported by the application. Rsbuild will automatically detect and load the browser versions from the nearest .browserslistrc configuration file.","First, create a browserslistrc file at the root of the project:","Then, open the newly created file and extend the default configuration with the shared configuration provided by @workleap/browserslist-config:"]},{"i":"rsbuildbuildts","l":"rsbuild.build.ts","p":["Next, create a configuration file named rsbuild.build.ts at the root of the project:","Then, open the newly created file and export the Rsbuild configuration by using the defineBuildConfig(options) function:"]},{"l":"Use predefined options","p":["The defineBuildConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"entry","p":["Type: RsbuildEntry","Default: { index: ./src/index.tsx }","Set Rsbuild source.entry option."]},{"l":"distPath","p":["This option is the Rsbuild equivalent of webpack outputPath option.","Type: string","Default: dist","Set Rsbuild output.distPath option."]},{"l":"assetPrefix","p":["This option is the Rsbuild equivalent of webpack publicPath option.","Type: string","Default: ${https ? https : http}://${host}:${port}","Set Rsbuild output.assetPrefix option.","If you're unsure of the asset prefix in advance, set the option to auto. Rsbuild will automatically determine the asset prefix using import.meta.url or document.currentScript."]},{"l":"plugins","p":["Type: An array of Rsbuild plugin instances","Default: []","Append the provided Rsbuild plugins to the configuration."]},{"l":"html","p":["Type: false or (defaultOptions: HtmlConfig) = HtmlConfig","Default: defaultOptions = defaultOptions","By default, Rsbuild will attempt to load an HTML template from the public/index.html file. To use Rsbuild's built-in HTML template instead, set the option to false.","To customize the default HTML template configuration, provide a function extending the default options."]},{"l":"minify","p":["Type: false or an object literal accepting any minify options.","Default: true","Whether or not to minify the code. To disable code minification, set the option to false.","To customize the minimizer configuration, provide an object literal."]},{"l":"optimize","p":["Type: boolean| readable","Default: true","Whether or not to enable Rsbuild production code optimization. This option can be quite useful when debugging an issue with Rsbuild bundling.","When false is provided, most of the optimizations, including minification will be turned off:","When readable is provided, most of the optimizations will still be applied but the outputed bundles will be easier to read:"]},{"l":"sourceMap","p":["Type: false or an object literal accepting any output.sourceMap options.","Default: { js: source-map, css: true }","Whether or not to generate source map. To disable source map, set the option to false.","To customize the source map configuration, provide an object literal."]},{"l":"react","p":["Type: false or (defaultOptions: PluginReactOptions) = PluginReactOptions","Default: defaultOptions = defaultOptions","Whether or not to transform React code. To disable React code transformation, set the option to false.","To customize plugin-react, provide a function to extend the default options."]},{"l":"svgr","p":["Type: false or (defaultOptions: PluginSvgrOptions) = PluginSvgrOptions","Default: defaultOptions = defaultOptions","Whether or not to handle .svg files with plugin-svgr. When the option is set to false, the .svg files will be handled by the asset/resource rule.","To customize plugin-svgr, provide a function extending the default options."]},{"l":"Typings","p":["When you reference an SVG asset in TypeScript code, TypeScript may prompt that the module is missing a type definition:","To fix this, you need to add type declaration for the SVG assets, create a src/env.d.ts file, and add the type declaration.","For additional information, refer to the plugin documentation."]},{"l":"Import images","p":["By default, plugin-svgr is configured to support named import for ReactComponent:"]},{"l":"compressImage","p":["Type: false or (defaultOptions: PluginImageCompressOptions) = PluginImageCompressOptions","Default: defaultOptions = defaultOptions","Whether or not to compress images with plugin-image-compress. To disable image compression, set the option to false.","To customize plugin-image-compress, provide a function extending the default options."]},{"l":"verbose","p":["Type: boolean","Default: false","Start the Rsbuild process with verbose logging turned on."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default build configuration of @workleap/rsbuild-configs, but only covers a subset of an Rsbuild configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineBuildConfig function. Remember, no locked in❤️✌️.","To view the default build configuration of @workleap/rsbuild-configs, have a look at the build.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: RsbuildConfig, context: RsbuildConfigTransformerContext) = RsbuildConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in.","environment: dev | build | storybook","verbose: boolean"]},{"l":"Add a CLI script","p":["To create the bundle files for production, add the following script to your project package.json file:"]},{"l":"Use environment variables"},{"l":"cross-env","p":["We recommend instead to define environment variables using cross-env. With cross-env, the environment variables will be made available to any Node.js files that are executed by the script process ( build in the example below \uD83D\uDC47):","However, there's a catch. When using cross-env, the variables will not be available in the application files because cross-env only makes them available to files that are executed by the process at build time while the application files are executed at runtime by a browser.","To make them accessible to the application files, Rsbuild must be aware of those environment variables and render them into the compiled application files. This is the purpose of the environmentVariables option."]},{"l":"environmentVariables","p":["Type: Recordstring, unknown","Default: {}","First, define the variables with environmentVariables:","Then, use the variables in any application files:","The === true part of DEBUG: process.env.DEBUG === true is very important, otherwise the environment variable value would be true instead of true.","By default, Rsbuild injects a few environment variables into the code using the source.define option. For additional information about these default environment variables, refer to the Rsbuild documentation."]},{"l":"CSS modules typings","p":["When you import CSS Modules in TypeScript code, TypeScript may prompt that the module is missing a type definition:","To fix this, you need to add a type declaration file for the CSS Modules, please create a src/env.d.ts file, and add the corresponding type declaration.","Make sure the project have a dependency on @rsbuild/core."]},{"l":"Monorepo","p":["If your solution is a monorepo, ensure that projects referencing your packages that include CSS Modules, also include the necessary type definitions","For example, given the following structure:","Copy the CSS Modules typings into the app web application own env.d.ts file, or include the components package's typings into the apps web application tsconfig.ts configuration file:","For additional information abour CSS modules type declaration, refer to the Rsbuild documentation."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new Rsbuild configuration, open a terminal at the root of the project and execute the CLI script added earlier. The build process should complete without outputting any error in the terminal and the bundle files should be available in the /dist folder (or any other distPath you configured)."]}],[{"l":"Configure for Storybook","p":["To configure Rsbuild for Storybook, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages"},{"l":"Configure Rsbuild"},{"l":"Browserslist","p":["First, let's set up Browserlist to define the minimum browser versions supported by the application. Rsbuild will automatically detect and load the browser versions from the nearest .browserslistrc configuration file.","First, create a browserslistrc file at the root of the project:","Then, open the newly created file and extend the default configuration with the shared configuration provided by @workleap/browserslist-config:"]},{"i":"rsbuildconfigts","l":"rsbuild.config.ts","p":["Next, create a configuration file named rsbuild.config.ts under the storybook folder:","Then, open the newly created file and export the Rsbuild configuration by using the defineStorybookConfig(options) function:"]},{"i":"maints","l":"main.ts","p":["Finally, open the .storybook/main.ts file and set storybook-react-rsbuild as the framework to use:"]},{"l":"Use predefined options","p":["The defineStorybookConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"plugins","p":["Type: An array of Rsbuild plugin instances","Default: []","Append the provided Rsbuild plugins to the configuration."]},{"l":"sourceMap","p":["Type: false or an object literal accepting any output.sourceMap options.","Default: { js: cheap-module-source-map, css: true }","Whether or not to generate source map. To disable source map, set the option to false.","To customize the source map configuration, provide an object literal."]},{"l":"react","p":["Type: false or (defaultOptions: PluginReactOptions) = PluginReactOptions","Default: defaultOptions = defaultOptions","Whether or not to transform React code. To disable React code transformation, set the option to false.","To customize plugin-react, provide a function to extend the default options."]},{"l":"svgr","p":["Type: false or (defaultOptions: PluginSvgrOptions) = PluginSvgrOptions","Default: defaultOptions = defaultOptions","Whether or not to handle .svg files with plugin-svgr. When the option is set to false, the .svg files will be handled by the asset/resource rule.","To customize plugin-svgr, provide a function extending the default options.","When you reference an SVG asset in TypeScript code, TypeScript may prompt that the module is missing a type definition:","To fix this, you need to add type declaration for the SVG assets, create a src/env.d.ts file, and add the type declaration.","For additional information, refer to the plugin documentation."]},{"l":"Import images","p":["By default, plugin-svgr is configured to support named import for ReactComponent:"]},{"l":"verbose","p":["Type: boolean","Default: false","Start the Rsbuild process with verbose logging turned on."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default Storybook configuration of @workleap/rsbuild-configs, but only covers a subset of an Rsbuild configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineBuildConfig function. Remember, no locked in❤️✌️.","To view the default build configuration of @workleap/rsbuild-configs, have a look at the storybook.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: RsbuildConfig, context: RsbuildConfigTransformerContext) = RsbuildConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in.","environment: dev | build | storybook","verbose: boolean"]},{"l":"Add CLI scripts","p":["To create the bundle files for production, add the following scripts to your project package.json file:"]},{"l":"Use environment variables"},{"l":"cross-env","p":["We recommend instead to define environment variables using cross-env. With cross-env, the environment variables will be made available to any Node.js files that are executed by the script process ( dev and build in the example below \uD83D\uDC47):","However, there's a catch. When using cross-env, the variables will not be available in the application files because cross-env only makes them available to files that are executed by the process at build time while the application files are executed at runtime by a browser.","To make them accessible to the application files, Rsbuild must be aware of those environment variables and render them into the compiled application files. This is the purpose of the environmentVariables option."]},{"l":"environmentVariables","p":["Type: Recordstring, unknown","Default: {}","First, define the variables with environmentVariables:","Then, use the variables in any file:","The === true part of DEBUG: process.env.DEBUG === true is very important, otherwise the environment variable value would be true instead of true.","By default, Rsbuild injects a few environment variables into the code using the source.define option. For additional information about these default environment variables, refer to the Rsbuild documentation."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new Rsbuild configuration, open a terminal at the root of the project and execute the CLI scripts added earlier. Either the Storybook development server should start without outputting any error in the terminal or the Storybook application bundle files should be available in the /storybook-static folder (or any other folder you configured)."]}],[{"l":"Migrate from Webpack","p":["To migrate from @squide/firefly-webpack-configs to @squide/firefly-rsbuild-configs, execute the following steps \uD83D\uDC47"]},{"l":"Update packages","p":["Open a terminal at the root of the web application project and install the following packages:","Then, in the same terminal, remove the following packages:","If your web application project uses SWC for tests, you may want to keep the @swc/core and @workleap/swc-configs packages."]},{"l":"Update files"},{"i":"webpackbuildjs","l":"webpack.build.js","p":["Rename the file from webpack.build.js to rsbuild.build.ts.","Then, open the rsbuild.build.ts file and apply the following changes:","Replace @workleap/webpack-configs for @workleap/rsbuild-configs.","Remove import { swcConfig } from ./swc.build.js.","Remove the first argument of the defineBuildHostConfig function.","Remove // @ts-check.","Before:","After:"]},{"i":"webpackdevjs","l":"webpack.dev.js","p":["Rename the file from webpack.dev.js to rsbuild.dev.ts.","Then, open the rsbuild.build.ts file and and apply the following changes:","Replace @workleap/webpack-configs for @workleap/rsbuild-configs.","Remove import { swcConfig } from ./swc.build.js.","Remove the first argument of the defineDevHostConfig function.","Remove // @ts-check.","Before:","After:"]},{"i":"postcssconfigts","l":"postcss.config.ts","p":["Delete the postcss.config.ts file."]},{"i":"swcbuildjs","l":"swc.build.js","p":["Delete the swc.build.js file."]},{"i":"swcdevjs","l":"swc.dev.js","p":["Delete the swc.dev.js file."]},{"i":"indexhtml","l":"index.html","p":["Replace %=webpackConfig.output.publicPath% by %=assetPrefix%/(the / is important).","Before:","After:"]},{"l":"Update scripts"},{"l":"dev","p":["Update the dev script to run Rsbuild instead of webpack.","Before:","After:"]},{"l":"build","p":["Update the build script to run Rsbuild instead of webpack.","Before:","After:"]},{"l":"Typings","p":["If you're encountering typing issues, consider adding type declarations for the following","SVGR","CSS Module"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["Start the application in a development environment using the dev and build script. Everything should run smoothly without any warnings or errors outputted in the terminal."]}],[{"l":"tsup"},{"l":"Issues with tsc","p":["tsc, the native TypeScript CLI, pretty much offers everything that we need to compile and bundle our TypeScript libraries. We opted for tsup due to tsc lacks of support for CSS imports, a requirement for enabling Chromatic's TurboSnap feature.","Given that either TurboSnap requirements or tsc CSS imports support change, we will reevaluate this decision."]},{"l":"Main features","p":["The shared configurations offered by @workleap/tsup-configs includes the following features \uD83D\uDC47"]},{"l":"TypeScript features","p":["Emits declaration files"]},{"l":"Development features","p":["Watch mode","Sourcemaps"]},{"l":"Production features","p":["Output to /dist"]},{"l":"Target environment","p":["ESM","ESNext"]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure tsup for either a development environment or a production environment."]}],[{"l":"Configure for development","p":["To configure tsup for a development environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure tsup","p":["First, create a configuration file named tsup.dev.ts at the root of the project:","Then, open the newly created file and export the tsup configuration by using the defineDevConfig(options) function:"]},{"l":"Use predefined options","p":["The defineDevConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accepts any tsup options, no locked in❤️✌️:"]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","Since the predefined options for tsup already covers all the availables options, configuration transformer functions aren't as useful for a tsup configuration as for other tools like SWC or webpack. Nonetheless, they are still valuable, especially for library authors aiming to distribute a default option set that facilitates the configuration of tsup for specific functionalities of their library. Configuration transformer functions can be provided through the transformers option of the defineDevConfig function.","To view the default development configuration of @workleap/tsup-configs, have a look at the dev.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: TsupConfig, context: TsupConfigTransformerContext) = TsupConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in:","environment: dev | build"]},{"l":"Add a CLI script","p":["To initiate the development process, add the following script to your project package.json file:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new tsup configuration, open a terminal at the root of the project and execute the CLI script added previously. A development process should start without outputting any error in the terminal."]}],[{"l":"Configure for build","p":["To configure tsup for a build environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure tsup","p":["First, create a configuration file named tsup.build.ts at the root of the project:","Then, open the newly created file and export the tsup configuration by using the defineBuildConfig(options) function:"]},{"l":"Use predefined options","p":["The defineBuildConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accepts any tsup options, no locked in❤️✌️:"]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","Since the predefined options for tsup already covers all the availables options, configuration transformer functions aren't as useful for a tsup configuration as for other tools like SWC or webpack. Nonetheless, they are still valuable, especially for library authors aiming to distribute a default option set that facilitates the configuration of tsup for specific functionalities of their library. Configuration transformer functions can be provided through the transformers option of the defineBuildConfig function.","To view the default build configuration of @workleap/tsup-configs, have a look at the build.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: TsupConfig, context: TsupConfigTransformerContext) = TsupConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in:","environment: dev | build"]},{"l":"Add a CLI script","p":["To build the bundle files for production, add the following script to your project package.json file:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new tsup configuration, open a terminal at the root of the project and execute the CLI script added previously. The build process should complete without outputting any error in the terminal and the bundle files should be available in the /dist folder (or any other outputDir you configured)."]}],[{"l":"PostCSS","p":["@workleap/postcss-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead of @workleap/webpack-configs, which eliminates the need for PostCSS."]},{"l":"Deprecation warning","p":["As we actively work on improving our build time and minimize the number of tools compiling/transpiling frontend code, we expect PostCSS to be one of the first tools that we will deprecate from our technology stack. Therefore, before adding PostCSS to your project, make sure that you really need it.","Here's a couple of ideas to move away from PostCSS:","Prefer native CSS to SCSS.","Avoid CSS nesting, it usually makes code harder to read anyway. If you really need nesting, native support is coming soon.","Force developers to use rem by disabling the use of px with Stylelint.","Prefix CSS properties directly in the codebase rather than relying on Autoprefixer. As browser vendors are now putting experimental features behind a flag rather than using prefixes, there aren't many CSS properties still requiring a prefix."]},{"l":"Main features","p":["The shared configuration offered by @workleap/postcss-configs includes the following features:"]},{"l":"Preset Env","p":["Stage 3","Autoprefixer"]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure your first project."]}],[{"l":"Configure a project","p":["@workleap/postcss-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead of @workleap/webpack-configs, which eliminates the need for PostCSS.","Execute the following steps to setup PostCSS for a single project \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure PostCSS","p":["First, create a configuration file named postcss.config.ts at the root of the project:","Then, open the newly created file and export the PostCSS configuration by using the defineConfig(options) function:"]},{"l":"Use predefined options","p":["The defineConfig(options) function can be used as-is as shown in the previous example, however, if you wish to customize the default configuration, the function also accepts a few predefined options to help with that \uD83D\uDC47"]},{"l":"browsers","p":["Type: string | string[]","Default: When available, will load the supported browser versions from the closest .browserslistrc file","Set postcss-preset-env browsers option."]},{"l":"presetEnvOptions","p":["Type: An object literal accepting any postcss-preset-env option","Default: { autoprefixer: { flexbox: no-2009 }, stage: 3 }","Forward the provided object literal to the postcss-preset-env plugin."]},{"l":"Extends presetEnvOptions options","p":["When provided, the presetEnvOptions option will override the default postcss-preset-env plugin configuration. If you wish to extend the default configuration rather than overriding it, you can do so by importing the DefaultPresetEnvOptions object:"]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default configuration of @workleap/postcss-configs, but only covers a subset of a PostCSS configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineConfig function. Remember, no locked in❤️✌️.","To view the default configuration of @workleap/postcss-configs, have a look at the configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: PostCSSConfig) = PostCSSConfig)[]","Default: []"]},{"l":"Additional PostCSS plugins","p":["Configuration transformer functions are ideal to configure additional PostCSS plugins:"]},{"l":"Configure webpack","p":["If your project is using @workleap/wepack-config, you don't have to configure postcss-loader as the defineDevConfig and defineBuildConfig functions already takes care of configuring PostCSS.","To integrate with webpack, update your configuration file to include a postcss-loader:"]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new PostCSS configuration, create and import a CSS file with the following code:","If you integrated PostCSS with webpack, execute your webpack build and find the outputted .example CSS class in the generated bundle files of your dist folder.","Otherwise, open a terminal at the root of your project and install postcss-cli:","Then, process the file with postcss-cli by executing the following command in the same terminal:","Whether you processed the CSS with webpack or postcss-cli, most of the CSS properties in the .example CSS class should have been prefixed (it can vary based on your Browserslist configuration):"]}],[{"l":"Webpack","p":["@workleap/webpack-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead for better performance and modern tooling."]},{"l":"Main features","p":["The shared configurations offered by @workleap/webpack-configs includes the following features \uD83D\uDC47"]},{"l":"Language support","p":["JavaScript","TypeScript","CSS (with CSS modules and PostCSS)"]},{"l":"Framework support","p":["React"]},{"l":"Asset support","p":["SVG as React components","PNG","JPEG","GIF"]},{"l":"Development features","p":["Development server","File system caching","Fast Refresh or Hot Module Reload","Sourcemap"]},{"l":"Production features","p":["File system caching","Minification","Output to /dist"]},{"l":"Target environment","p":["As per the PostCSS and SWC configurations."]},{"l":"Getting started","p":["To get started, follow the quick start guide to configure webpack for either a development environment or a production environment."]}],[{"l":"Configure for development","p":["@workleap/webpack-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead for better performance and modern tooling.","To configure webpack for a development environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure webpack"},{"l":"HTML template","p":["First, create a public folder with an index.html file at the root of the project:","Then, open the newly created index.html file and copy/paste the following content:","The content of the public/index.html file is the default template that will be used by HtmlWebpackPlugin."]},{"l":"Reference local assets","p":["To reference local assets such as a favicon.png in the default HTML template, it is recommended to preprend the relative path of every asset with the publicPath option of the webpack config.","First, add the asset to the public folder at the root of the project:","Then, add the assets to the index.html file:","If output.publicPath is set to auto, use href=favicon.png instead."]},{"i":"webpackdevjs","l":"webpack.dev.js","p":["Next, create a configuration file named webpack.dev.js at the root of the project:","Then, open the newly created file and export the webpack configuration by using the defineDevConfig(swcConfig, options) function:"]},{"i":"swcdevjs","l":"swc.dev.js","p":["In the previous code sample, the defineDevConfig(swcConfig, options) function receive an SWC configuration object through the swcConfig parameter.","Although the swc-loader defaults to loading the closest .swcrc configuration file when no configuration object is provided, it lacks support for distinct configuration files by environment like webpack does.","Therefore, @workleap/webpack-configs choosed to delegate the loading of the SWC configuration to the consumer by making the swcConfig option required."]},{"l":"Use predefined options","p":["The defineDevConfig(swcConfig, options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"entry","p":["Type: string","Default: ./src/index.tsx","Set webpack entry option."]},{"l":"https","p":["Type: boolean| ServerOptions","Default: false","Set webpack DevServer https option and format webpack publicPath option accordingly."]},{"l":"host","p":["Type: string","Default: localhost","Set webpack DevServer host option and format webpack publicPath option accordingly."]},{"l":"port","p":["Type: number","Default: 8080","Set webpack DevServer port option and format webpack publicPath option accordingly."]},{"l":"publicPath","p":["Type: string","Default: ${https ? https : http}://${host}:${port}/","Set webpack public path.","Or for an automatic public path:"]},{"l":"cache","p":["Type: boolean","Default: true","Whether or not webpack memory cache is enabled. This will also set maxGenerations to 1 to remove cache entries from memory when they are no longer needed."]},{"l":"moduleRules","p":["Type: An array of webpack moduleRule objects","Default: []","Append the provided webpack module rules to the configuration."]},{"l":"plugins","p":["Type: An array of webpack plugin instances","Default: []","Append the provided webpack plugins to the configuration."]},{"l":"htmlWebpackPlugin","p":["Type: boolean or an object literal accepting any html-webpack-plugin option","Default: { template: ./public/index.html }","To remove the default instance of html-webpack-plugin, set the property to false.","To extend/replace the default html-webpack-plugin configuration, use the defineDevHtmlWebpackPluginConfig(options) function."]},{"l":"fastRefresh","p":["Type: boolean or an object literal accepting any react-refresh-webpack-plugin option","Default: true","Replace webpack HMR by Fast Refresh. Desactivating webpack fast refresh will automatically disable fast refresh for SWC.","To extend/replace the default Fast Refresh configuration, use the defineFastRefreshPluginConfig(options) function.","options: An object literal accepting any react-refresh-webpack-plugin option"]},{"l":"cssModules","p":["Type: boolean","Default: false","Enable css-loader modules feature."]},{"l":"overlay","p":["Type: false","Default: undefined","Whether or not a full-screen overlay should be in the browser when there are compiler errors or warnings."]},{"l":"svgr","p":["Type: boolean or an object literal accepting any @svgr/webpack option","Default: true","Whether or not to handle .svg files with @svgr/webpack. If @svgr/webpack is desactived, the .svg files will be handled by the asset/resource rule.","To extends the @svgr/webpack rule configuration, provide an object literal instead."]},{"l":"verbose","p":["Type: boolean","Default: false","Start the webpack process with verbose logging turned on."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default development configuration of @workleap/webpack-configs, but only covers a subset of a webpack configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineDevConfig function. Remember, no locked in❤️✌️.","To view the default development configuration of @workleap/webpack-configs, have a look at the dev.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: WebpackConfig, context: WebpackConfigTransformerContext) = WebpackConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in.","environment: dev | build","verbose: boolean"]},{"l":"Utilities","p":["Modifying a webpack configuration object can be an arduous task, to help with that, @workleap/webpack-configs offer utility functions for modules rules and plugins.","Transformer utilities"]},{"l":"Setup nodemon","p":["Nodemon is a utility that will monitor for any changes in the swc.dev.js and webpack.dev.dev.js files and restart the webpack development server whenever a change occurs.","First, add a nodemon.json file at the root of the project:","Then, open the nodemon.json file and copy/paste the following content:","Finally, add a CLI script at the next step of this guide."]},{"l":"Add a CLI script","p":["To initiate the development server, add the following script to your project package.json file:"]},{"l":"Define environment variables","p":["To deal with environment variables, the webpack documentation suggests using the --env option from its CLI. While that would work, by using webpack --env CLI option, the environment variables would only be made available to the webpack configuration files (.e.g. webpack.dev.js) rather than any Node.js files. Therefore we do not recommend using webpack --env CLI option."]},{"l":"cross-env","p":["We recommend instead to define environment variables using cross-env. With cross-env, the environment variables will be made available to any Node.js files that are executed by the script process ( dev in the example below \uD83D\uDC47):","However, there's a catch. When using cross-env, the variables will not be available in the application files because cross-env only makes them available to files that are executed by the process at build time while the application files are executed at runtime by a browser.","To make them accessible to the application files, webpack must be aware of those environment variables and render them into the compiled application files. This is the purpose of the environmentVariables option."]},{"l":"environmentVariables","p":["Type: Recordstring, unknown","Default: {}","First, define the variables with environmentVariables:","Then, use the variables in any application files:","The === true part of DEBUG: process.env.DEBUG === true is very important, otherwise the environment variable value would be true instead of true."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new webpack configuration, open a terminal at the root of the project and execute the CLI script added earlier. A development server should start without outputting any error in the terminal."]}],[{"l":"Configure for build","p":["@workleap/webpack-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead for better performance and modern tooling.","To configure webpack for a production environment, execute the following steps \uD83D\uDC47"]},{"l":"Install the packages","p":["Open a terminal at the root of the project and install the following packages:"]},{"l":"Configure webpack"},{"l":"HTML template","p":["First, create a public folder with an index.html file at the root of the project:","Then, open the newly created index.html file and copy/paste the following content:","The content of the public/index.html file is the default template that will be used by HtmlWebpackPlugin."]},{"l":"Reference local assets","p":["To reference local assets such as a favicon.png in the default HTML template, it is recommended to preprend the relative path of every asset with the publicPath of the webpack config.","First, add the asset to the public folder at the root of the project:","Then, add the assets to the index.html file:","If output.publicPath is set to auto, use href=favicon.png instead."]},{"i":"webpackbuildjs","l":"webpack.build.js","p":["Next, create a configuration file named webpack.build.js at the root of the project:","Then, open the newly created file and export the webpack configuration by using the defineBuildConfig(swcConfig, options) function:"]},{"i":"swcbuildjs","l":"swc.build.js","p":["In the previous code sample, the defineBuildConfig(swcConfig, options) function receive an SWC configuration object through the swcConfig parameter.","Although the swc-loader defaults to loading the closest .swcrc configuration file when no configuration object is provided, it lacks support for distinct configuration files by environment like webpack does.","Therefore, @workleap/webpack-configs choosed to delegate the loading of the SWC configuration to the consumer by making the swcConfig option required."]},{"l":"Use predefined options","p":["The defineBuildConfig(swcConfig, options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that \uD83D\uDC47"]},{"l":"entry","p":["Type: string","Default: ./src/index.tsx","Set webpack entry option."]},{"l":"outputPath","p":["Type: string","Default: dist","Set webpack output path."]},{"l":"publicPath","p":["Type: string","Default: http://localhost:8080/","Set webpack public path.","Or for an automatic public path:"]},{"l":"moduleRules","p":["Type: An array of webpack moduleRule objects","Default: []","Append the provided webpack module rules to the configuration."]},{"l":"plugins","p":["Type: An array of webpack plugin instances","Default: []","Append the provided webpack plugins to the configuration."]},{"l":"htmlWebpackPlugin","p":["Type: boolean or an object literal accepting any html-webpack-plugin option","Default: { template: ./public/index.html }","To remove the default instance of html-webpack-plugin, set the property to false.","To extend/replace the default html-webpack-plugin configuration, use the defineBuildHtmlWebpackPluginConfig(options) function."]},{"l":"miniCssExtractPluginOptions","p":["Type: An object literal accepting any mini-css-extract-plugin option","Default: { filename: [name].[fullhash].css }","Forward the provided object literal to the mini-css-extract-plugin."]},{"l":"optimize","p":["Type: boolean| readable","Default: true","Whether or not to enable webpack production optimizations like code minification and tree shaking. This option can be quite useful when debugging an issue with webpack bundling.","When false is provided, most of the optimizations, including minification and tree shaking will be turned off:","When readable is provided, most of the optimizations will still be applied but the resulting code bundles will be easier to read:"]},{"l":"cssModules","p":["Type: boolean","Default: false","Enable css-loader modules feature."]},{"l":"svgr","p":["Type: boolean or an object literal accepting any @svgr/webpack option","Default: true","Whether or not to handle .svg files with @svgr/webpack. If @svgr/webpack is desactived, the .svg files will are handled by the asset/resource rule.","To extends the @svgr/webpack rule configuration, provide an object literal instead."]},{"l":"verbose","p":["Type: boolean","Default: false","Start the webpack process with verbose logging turned on."]},{"l":"Configuration transformers","p":["We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","The predefined options are useful to quickly customize the default build configuration of @workleap/webpack-configs, but only covers a subset of a webpack configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineBuildConfig function. Remember, no locked in❤️✌️.","To view the default build configuration of @workleap/webpack-configs, have a look at the build.ts configuration file on GitHub."]},{"l":"transformers","p":["Type: ((config: WebpackConfig, context: WebpackConfigTransformerContext) = WebpackConfig)[]","Default: []"]},{"l":"Execution context","p":["Generic transformers can use the context parameter to gather additional information about their execution context, like the environment they are operating in:","environment: dev | build","verbose: boolean"]},{"l":"Utilities","p":["Modifying a webpack configuration object can be an arduous task, to help with that, @workleap/webpack-configs offer utility functions for modules rules and plugins.","Transformer utilities"]},{"l":"Add a CLI script","p":["To create the bundle files for production, add the following script to your project package.json file:"]},{"l":"Use environment variables","p":["To deal with environment variables, the webpack documentation suggests using the --env option from its CLI. While that would work, by using webpack --env CLI option, the environment variables would only be made available to the webpack configuration files (.e.g. webpack.build.js) rather than any Node.js files. Therefore we do not recommend using webpack --env CLI option."]},{"l":"cross-env","p":["We recommend instead to define environment variables using cross-env. With cross-env, the environment variables will be made available to any Node.js files that are executed by the script process ( build in the example below \uD83D\uDC47):","However, there's a catch. When using cross-env, the variables will not be available in the application files because cross-env only makes them available to files that are executed by the process at build time while the application files are executed at runtime by a browser.","To make them accessible to the application files, webpack must be aware of those environment variables and render them into the compiled application files. This is the purpose of the environmentVariables option."]},{"l":"environmentVariables","p":["Type: Recordstring, unknown","Default: {}","First, define the variables with environmentVariables:","Then, use the variables in any application files:","The === true part of DEBUG: process.env.DEBUG === true is very important, otherwise the environment variable value would be true instead of true."]},{"i":"try-it","l":"Try it \uD83D\uDE80","p":["To test your new webpack configuration, open a terminal at the root of the project and execute the CLI script added earlier. The build process should complete without outputting any error in the terminal and the bundle files should be available in the /dist folder (or any other outputPath you configured)."]}],[{"l":"Transformer utilities","p":["@workleap/webpack-configs is now in maintenance mode. If you're starting a new project, consider using @workleap/rsbuild-configs instead for better performance and modern tooling.","We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.","To help you write configuration transformers for webpack, @workleap/webpack-configs provide a suite of utility functions."]},{"l":"Module rules","p":["Utility functions for webpack module rules."]},{"l":"matchLoaderName","p":["Returns a matcher function that can be utilized alongside module rules utility functions. The returned matcher function will return true when it encounters a module rule with a loader matching the provided name value."]},{"l":"Parameters","p":["name: A module rule loader name value."]},{"l":"Returns","p":["A ModuleRuleMatcher function."]},{"l":"Usage"},{"l":"matchAssetModuleType","p":["Returns a matcher function that can be utilized alongside module rules utility functions. The returned matcher function will return true when it encounters a module rule with a loader matching the provided asset type value."]},{"i":"parameters-1","l":"Parameters","p":["type: A module rule loader asset type value."]},{"i":"returns-1","l":"Returns","p":["A ModuleRuleMatcher function."]},{"i":"usage-1","l":"Usage"},{"l":"matchTest","p":["Returns a matcher function that can be utilized alongside module rules utility functions. The returned matcher function will return true when it encounters a module rule with a loader matching the provided test value."]},{"i":"parameters-2","l":"Parameters","p":["test: A module rule loader test value."]},{"i":"returns-2","l":"Returns","p":["A ModuleRuleMatcher function."]},{"i":"usage-2","l":"Usage"},{"l":"findModuleRule","p":["Retrieve the first module rule for which the matcher function returns true. If there is more than one match, an error will be thrown."]},{"i":"parameters-3","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function"]},{"i":"returns-3","l":"Returns","p":["A module rule if a match has been found, otherwise undefined."]},{"i":"usage-3","l":"Usage"},{"l":"findModuleRules","p":["Retrieve any module rules for which the matcher function returns true."]},{"i":"parameters-4","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function"]},{"i":"returns-4","l":"Returns","p":["An array of module rules"]},{"i":"usage-4","l":"Usage"},{"l":"addBeforeModuleRule","p":["Add the provided module rules before the matching module rule. If no matching rule has been found, an error will be thrown."]},{"i":"parameters-5","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function","newModuleRules: An array of module rules"]},{"i":"returns-5","l":"Returns","p":["Nothing"]},{"i":"usage-5","l":"Usage"},{"l":"addAfterModuleRule","p":["Add the provided module rules after the matching module rule. If no matching rule has been found, an error will be thrown."]},{"i":"parameters-6","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function","newModuleRules: An array of module rules"]},{"i":"returns-6","l":"Returns","p":["Nothing"]},{"i":"usage-6","l":"Usage"},{"l":"replaceModuleRule","p":["Replace the matching module rule by the new one. If no matching rule has been found, an error will be thrown."]},{"i":"parameters-7","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function","newModuleRule: The new module rule"]},{"i":"returns-7","l":"Returns","p":["Nothing"]},{"i":"usage-7","l":"Usage"},{"l":"removeModuleRules","p":["Remove the matching module rules. If no matching rule has been found, an error will be thrown."]},{"i":"parameters-8","l":"Parameters","p":["config: A webpack config","matcher: A ModuleRuleMatcher function"]},{"i":"returns-8","l":"Returns","p":["Nothing"]},{"i":"usage-8","l":"Usage"},{"l":"Plugins","p":["Utility functions for webpack plugins."]},{"l":"matchConstructorName","p":["Returns a matcher function that can be utilized alongside plugin utility functions. The returned matcher function will return true when it encounters a plugin matching the provided constructor name value."]},{"i":"parameters-9","l":"Parameters","p":["name: A plugin constructor name."]},{"i":"returns-9","l":"Returns","p":["A PluginMatcher function."]},{"i":"usage-9","l":"Usage"},{"l":"findPlugin","p":["Retrieve the first plugin for which the matcher function returns true. If there is more than one match, an error will be thrown."]},{"i":"parameters-10","l":"Parameters","p":["config: A webpack config","matcher: A PluginMatcher function"]},{"i":"returns-10","l":"Returns","p":["A plugin if a match has been found, otherwise undefined."]},{"i":"usage-10","l":"Usage"},{"l":"addBeforePlugin","p":["Add the provided plugins before the matching plugin. If no plugin has been found, an error will be thrown."]},{"i":"parameters-11","l":"Parameters","p":["config: A webpack config","matcher: A PluginMatcher function","newPlugins: An array of plugins"]},{"i":"returns-11","l":"Returns","p":["Nothing"]},{"i":"usage-11","l":"Usage"},{"l":"addAfterPlugin","p":["Add the provided plugins after the matching plugin. If no plugin has been found, an error will be thrown."]},{"i":"parameters-12","l":"Parameters","p":["config: A webpack config","matcher: A PluginMatcher function","newPlugins: An array of plugins"]},{"i":"returns-12","l":"Returns","p":["Nothing"]},{"i":"usage-12","l":"Usage"},{"l":"replacePlugin","p":["Replace the matching plugin by the new one. If no plugin has been found, an error will be thrown."]},{"i":"parameters-13","l":"Parameters","p":["config: A webpack config","matcher: A PluginMatcher function","newPlugin: The new plugin instance"]},{"i":"returns-13","l":"Returns","p":["Nothing"]},{"i":"usage-13","l":"Usage"},{"l":"removePlugin","p":["Remove the matching plugin. If no plugin has been found, an error will be thrown."]},{"i":"parameters-14","l":"Parameters","p":["config: A webpack config","matcher: A PluginMatcher function"]},{"i":"returns-14","l":"Returns","p":["Nothing"]},{"i":"usage-14","l":"Usage"}],[{"l":"Samples"},{"l":"Rsbuild sample","p":["Web application","Components library"]},{"l":"Webpack sample","p":["Web application","Components library","TypeScript library"]},{"l":"Storybook sample","p":["Storybook"]}],[{"l":"About","p":["To ask a question or propose an idea, feel free to start a new GitHub discussion. If you found a bug, please open a GitHub issue."]},{"l":"Contributing","p":["Have a look at the contributor's documentation."]},{"l":"Acknowledgements","p":["Thanks to the team at Shopify/web-configs for the inspiration to create an umbrella project for all the web configurations."]},{"l":"License","p":["See the LICENSE on GitHub."]}]] \ No newline at end of file diff --git a/rsbuild/configure-build/index.html b/rsbuild/configure-build/index.html index d073dece..353ac310 100644 --- a/rsbuild/configure-build/index.html +++ b/rsbuild/configure-build/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + @@ -757,6 +757,12 @@

} }); + +

+ # + Typings +

+

When you reference an SVG asset in TypeScript code, TypeScript may prompt that the module is missing a type definition:

TS2307: Cannot find module './logo.svg' or its corresponding type declarations.
diff --git a/rsbuild/configure-dev/index.html b/rsbuild/configure-dev/index.html index ce4b5586..feaa0271 100644 --- a/rsbuild/configure-dev/index.html +++ b/rsbuild/configure-dev/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + @@ -826,6 +826,12 @@

} });

+ +

+ # + Typings +

+

When you reference an SVG asset in TypeScript code, TypeScript may prompt that the module is missing a type definition:

TS2307: Cannot find module './logo.svg' or its corresponding type declarations.
diff --git a/rsbuild/configure-storybook/index.html b/rsbuild/configure-storybook/index.html index cea6036d..1f89c249 100644 --- a/rsbuild/configure-storybook/index.html +++ b/rsbuild/configure-storybook/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/rsbuild/index.html b/rsbuild/index.html index 195cad4d..07bc5252 100644 --- a/rsbuild/index.html +++ b/rsbuild/index.html @@ -4,7 +4,7 @@ - + @@ -32,11 +32,11 @@ - + - + - + diff --git a/rsbuild/migrate-from-webpack/index.html b/rsbuild/migrate-from-webpack/index.html index 7f1f993c..c033899d 100644 --- a/rsbuild/migrate-from-webpack/index.html +++ b/rsbuild/migrate-from-webpack/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + @@ -305,7 +305,7 @@

Migrate from Webpack

-

To migrate from @squide/firefly-webpack-configs to @squide/firefly-rsbuild-configs, execute the following steps 👇

+

To migrate from @squide/firefly-webpack-configs to @squide/firefly-rsbuild-configs, execute the following steps 👇

# @@ -551,11 +551,22 @@

"build": "rsbuild build --config rsbuild.build.ts" }

+ +

+ # + Typings +

+ +

If you're encountering typing issues, consider adding type declarations for the following

+ -

+

# Try it 🚀 -

+

Start the application in a development environment using the dev and build script. Everything should run smoothly without any warnings or errors outputted in the terminal.

diff --git a/samples/index.html b/samples/index.html index 06d38952..88879ab0 100644 --- a/samples/index.html +++ b/samples/index.html @@ -4,7 +4,7 @@ - + @@ -32,11 +32,11 @@ - + - + - + diff --git a/sitemap.xml.gz b/sitemap.xml.gz index db509a81f1866a8ea1e6307bc4acb045448cfac9..82c9a924e39e365d570640bfc92ef470a1f60723 100644 GIT binary patch delta 627 zcmV-(0*w8D1^)z)7k|Kj|M1vk*C$9f-GPv?Qh_wO!o+W1VdFSyrknJr(}jmWY506O z_v+~GpI%!zKXXGub%!8{7Qvi%Ox2=m4#D^5Z{aq0DrWoMNaA+x26uD_PS)yO91p_~ zk+8fiHATuaF|m`opm@3&FQPoS&Dp)4Y%4#^9J1@2B+v8s`hPSiX7l;@rt#>`q+-Q5 zp4^0n)X|2bV^JgQsjniT;z5Q3uR^A}qi87J$K!-)YDuV z%?~$jdU_kHjZj9|OX2?fK7P9zS>g%i>rkAe=bn%?3_K_98hd zdg~m{XD^x)Gk-#30Pz8=j2g&gwiJXxT;sp-z#wExIGH=wCHo1X!%L5PjUZd$MW+>6 zMu2MU=rTB6S*ae93oCpzo|X#MlU40>w>PDA3p0XviI?F-?2JLL!&Y_5aIGM$_GY}e_7^i8lnszQc0-0!5|%O`lCzHhJa$>ue}9*P*=mVb^dF5&#N03M_- z9Mh}FR&3t7Wq8Trm)*~-I0^gOi`{%b-&CkM;)ZHOUlSMQa9oMz&nnU#cH1}{+-2)s zy7}S9O;2xQjg{I;cPadz-?R6tk%dh#e-9-{$DpNP04>k=S5~@*dU74ez;)<-~SL;B5NxfNUxNd4w`Pe1z6$Kp_n^MA_u zK@0dq%bxHX}x8zmr83$Pb0_s+&ghAZ&mkby~P2xVFDuKs~FyzUwcL& zw2QapzoCL+n&EBOz1bC{pOE3r%{`l(Ejv1D+X@@^PAcydFx%fhFkcUT?JQ=$00030 O{{sNBH>ogi8UO%|);s$E diff --git a/stylelint/custom-configuration/index.html b/stylelint/custom-configuration/index.html index 6f60125e..36df8a68 100644 --- a/stylelint/custom-configuration/index.html +++ b/stylelint/custom-configuration/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/stylelint/index.html b/stylelint/index.html index 1a42c4d3..af45a1de 100644 --- a/stylelint/index.html +++ b/stylelint/index.html @@ -4,7 +4,7 @@ - + @@ -32,11 +32,11 @@ - + - + - + diff --git a/stylelint/integrate-vscode/index.html b/stylelint/integrate-vscode/index.html index 9c6dd90c..473a6f7d 100644 --- a/stylelint/integrate-vscode/index.html +++ b/stylelint/integrate-vscode/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/stylelint/setup-monorepo/index.html b/stylelint/setup-monorepo/index.html index 395f4941..0db0670c 100644 --- a/stylelint/setup-monorepo/index.html +++ b/stylelint/setup-monorepo/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/stylelint/setup-polyrepo/index.html b/stylelint/setup-polyrepo/index.html index 01e96f31..8b54225d 100644 --- a/stylelint/setup-polyrepo/index.html +++ b/stylelint/setup-polyrepo/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/swc/configure-build/index.html b/swc/configure-build/index.html index ce6baf77..6413d21c 100644 --- a/swc/configure-build/index.html +++ b/swc/configure-build/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/swc/configure-dev/index.html b/swc/configure-dev/index.html index df48918b..aaf757b2 100644 --- a/swc/configure-dev/index.html +++ b/swc/configure-dev/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/swc/configure-jest/index.html b/swc/configure-jest/index.html index 87ff3a2a..c96a217a 100644 --- a/swc/configure-jest/index.html +++ b/swc/configure-jest/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/swc/index.html b/swc/index.html index 41143c44..00244530 100644 --- a/swc/index.html +++ b/swc/index.html @@ -4,7 +4,7 @@ - + @@ -32,11 +32,11 @@ - + - + - + diff --git a/tsup/configure-build/index.html b/tsup/configure-build/index.html index 2e2d4037..62a96c78 100644 --- a/tsup/configure-build/index.html +++ b/tsup/configure-build/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/tsup/configure-dev/index.html b/tsup/configure-dev/index.html index 354c9663..ad1a835d 100644 --- a/tsup/configure-dev/index.html +++ b/tsup/configure-dev/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/tsup/index.html b/tsup/index.html index ff118e73..fc555ea8 100644 --- a/tsup/index.html +++ b/tsup/index.html @@ -4,7 +4,7 @@ - + @@ -32,11 +32,11 @@ - + - + - + diff --git a/typescript/advanced-composition/index.html b/typescript/advanced-composition/index.html index ae00c51f..f160d895 100644 --- a/typescript/advanced-composition/index.html +++ b/typescript/advanced-composition/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/typescript/custom-configuration/index.html b/typescript/custom-configuration/index.html index 121a74b8..5a6b2f44 100644 --- a/typescript/custom-configuration/index.html +++ b/typescript/custom-configuration/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/typescript/index.html b/typescript/index.html index 9c16eeca..d4991d66 100644 --- a/typescript/index.html +++ b/typescript/index.html @@ -4,7 +4,7 @@ - + @@ -32,11 +32,11 @@ - + - + - + diff --git a/typescript/setup-monorepo/index.html b/typescript/setup-monorepo/index.html index 560f4351..8fe97361 100644 --- a/typescript/setup-monorepo/index.html +++ b/typescript/setup-monorepo/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/typescript/setup-polyrepo/index.html b/typescript/setup-polyrepo/index.html index 139ed929..b4e75de2 100644 --- a/typescript/setup-polyrepo/index.html +++ b/typescript/setup-polyrepo/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/webpack/configure-build/index.html b/webpack/configure-build/index.html index 70830edd..437939af 100644 --- a/webpack/configure-build/index.html +++ b/webpack/configure-build/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/webpack/configure-dev/index.html b/webpack/configure-dev/index.html index a893d719..8393a4d8 100644 --- a/webpack/configure-dev/index.html +++ b/webpack/configure-dev/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + + diff --git a/webpack/index.html b/webpack/index.html index f926170e..ca033153 100644 --- a/webpack/index.html +++ b/webpack/index.html @@ -4,7 +4,7 @@ - + @@ -32,11 +32,11 @@ - + - + - + diff --git a/webpack/transformer-utilities/index.html b/webpack/transformer-utilities/index.html index 3a667368..ab26349c 100644 --- a/webpack/transformer-utilities/index.html +++ b/webpack/transformer-utilities/index.html @@ -4,7 +4,7 @@ - + @@ -32,12 +32,12 @@ - + - + - - + +