🚀 React & TypeScript Starter for developing web extensions with hot reload

Overview

Browser Extension React & TypeScript Starter

Browser Extension
React & TypeScript Starter

A web extension (Manifest V3) starter kit with hot reload support, built with React, Typescript, Redux, Vite, ESLint, Prettier, TailwindCSS, Jest and more!


CI   PRs welcome   MIT License

Features · Quick Start · Important Notes · License

Features

  • Instant HMR (hot reload)1
  • Global Redux support with persist option. Effortless communication between content, background, popup, options, and more pages.
  • Provides a basic content example and popup, options, and welcome pages with all React
  • Latest Manifest V3 support
  • Dynamic manifest.json
  • Includes ESLint configured to work with TypeScript and Prettier
  • Includes stylelint and commitlint configured
  • Includes tests with Jest

Built with

  • React
  • TypeScript
  • Redux (toolkit and redux-persist)
  • TailwindCSS
  • Vite
  • Jest
  • ESLint
  • Prettier
  • stylelint
  • commitlint
  • commitizen
  • simple-git-hooks (lightweight husky alternative)
  • nano-staged

Quick Start

Warning Please see Important Notes before start using.

Ensure you have

Use the Template

GitHub Template

Create a repo from this template on GitHub.

or

Clone to local

If you prefer to do it manually with the cleaner git history

Note If you don't have yarn installed, run: npm install -g yarn

npx degit sinanbekar/browser-extension-react-typescript-starter my-web-extension
cd my-web-extension

Then run the following:

  • yarn install to install dependencies.

  • yarn dev to start the development server.

  • yarn build to build an unpacked extension.

  • Load extension in browser

    • Go to the browser address bar and type chrome://extensions
    • Check the Developer Mode button to enable it.
    • Click on the Load Unpacked Extension button.
    • Select your dist folder in the project root.

Available Commands

  • yarn clean to remove dist folder. dev and build commands call this command.
  • yarn ci:test to run lint & unit test & type checking in ci environment. ci:test:lint, ci:test:style, ci:test:unit commands also available.
  • yarn format to fix code with eslint, prettier and stylelint.
  • yarn lint to call ESLint, Prettier and stylelint.
  • yarn test for testing.

Important Notes

This starter includes experimental packages (tested in production but not by me) and is currently in development. You can see changes in this repo often for now.

Please use with caution.

@crxjs/vite-plugin

Note This plugin powers the development side of this starter.

docs: https://crxjs.dev/vite-plugin

Special thanks to @jacksteamdev and contributors for this amazing plugin.

@eduardoac-skimlinks/webext-redux

Note It is a fork of webext-redux with Manifest V3 support and is currently in release candidate (RC).

Please see tshaddix/webext-redux#282

Warning Do not update to react-redux version 8.x, it is not supported for now and is break your application.

reduxjs-toolkit-persist

Note It is a fork of redux-persist package which has not released a new version for years. This package includes the newest commits from the main repo and upgrades various dependencies to more recent versions.

Contributing

This repository is following the Conventional Commits standard.

License

MIT © Sinan Bekar

Footnotes

  1. While fully supported and stable in most cases, rarely hard reloading is recommended.

Comments
  • How can I add script.js?

    How can I add script.js?

    Usually in vanilla js I use content_script.js that will inject script.js to the page but I can't find any example related to that?

    const container = document.head || document.documentElement
    const scriptTag = document.createElement('script')
    scriptTag.setAttribute('async', 'false')
    scriptTag.src = chrome.runtime.getURL('script.js')
    container.insertBefore(scriptTag, container.children[0])
    container.removeChild(scriptTag)
    

    Second question is where to place that script.ts to trigger script.js build and include it in HMR?

    documentation question 
    opened by katopz 3
  • chore(deps): update dependency stylelint-config-standard to v27 - autoclosed

    chore(deps): update dependency stylelint-config-standard to v27 - autoclosed

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | stylelint-config-standard | 26.0.0 -> 27.0.0 | age | adoption | passing | confidence |


    Release Notes

    stylelint/stylelint-config-standard

    v27.0.0

    Compare Source

    • Removed: stylelint less than 14.10.0 from peer dependencies.
    • Changed: updated to [email protected]
    • Added: keyframe-selector-notation rule.

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update dependency stylelint to v14.10.0

    chore(deps): update dependency stylelint to v14.10.0

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | stylelint (source) | 14.9.1 -> 14.10.0 | age | adoption | passing | confidence |


    Release Notes

    stylelint/stylelint

    v14.10.0

    Compare Source

    • Added: rule metadata to public LinterResult API (#​6166).
    • Added: longhand sub-properties of shorthand properties reference data to public API (#​6168).
    • Added: meta.fixable property to each rule (#​6181).
    • Added: support for loading custom formatter from package (#​6228).
    • Added: annotation-no-unknown rule (#​6155).
    • Added: keyframe-selector-notation rule (#​6164).
    • Added: percentage-unless-within-keyword-only-block primary option to keyframe-selector-notation (#​6194).
    • Added: github formatter (#​6150).
    • Added: tally to string and verbose formatters (#​6153).
    • Added: fixable status to verbose and github formatters (#​6183).
    • Added: invalid rule primary option message for false (#​6250).
    • Fixed: exit code when nothing is passed to stylelint command (#​6175).
    • Fixed: rule message function type to not require users to handle all kind of arguments (#​6147).
    • Fixed: at-rule-* end positions (#​6163).
    • Fixed: declaration-block-no-redundant-longhand-properties end positions (#​6219).
    • Fixed: declaration-property-value-allowed-list false positives for multiple match (#​6190).
    • Fixed: declaration-property-value-disallowed-list false negatives for multiple match (#​6188).
    • Fixed: named-grid-areas-no-invalid end positions (#​6205).
    • Fixed: no-descending-specificity false positives for pseudo-classes (#​6195).
    • Fixed: no-unknown-animations end positions (#​6221).
    • Fixed: no-unknown-animations false positives for SCSS interpolation (#​6185).
    • Fixed: number-max-precision end positions (#​6184).
    • Fixed: property-* end positions (#​6174).
    • Fixed: rule-selector-property-disallowed-list end positions (#​6222).
    • Fixed: selector-attribute-name-disallowed-list end positions (#​6223).
    • Fixed: selector-attribute-operator-allowed-list end positions (#​6224).
    • Fixed: selector-attribute-operator-disallowed-list end positions (#​6225).
    • Fixed: selector-attribute-quotes end positions (#​6226).
    • Fixed: selector-class-pattern end positions (#​6227).
    • Fixed: selector-combinator-allowed-list and selector-combinator-disallowed-list end positions (#​6229).
    • Fixed: selector-disallowed-list end positions (#​6230).
    • Fixed: selector-id-pattern end positions (#​6231).
    • Fixed: selector-not-notation end positions (#​6201).
    • Fixed: selector-pseudo-element-colon-notation end positions (#​6235).
    • Fixed: string-no-newline end positions (#​6218).
    • Fixed: unit-* start and end positions (#​6169).
    • Fixed: value-no-vendor-prefix end positions (#​6173).

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update dependency @testing-library/user-event to v14.4.3

    chore(deps): update dependency @testing-library/user-event to v14.4.3

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @testing-library/user-event | 14.3.0 -> 14.4.3 | age | adoption | passing | confidence |


    Release Notes

    testing-library/user-event

    v14.4.3

    Compare Source

    Bug Fixes

    v14.4.2

    Compare Source

    Bug Fixes

    v14.4.1

    Compare Source

    Bug Fixes

    v14.4.0

    Compare Source

    Features
    Bug Fixes
    • event: be robust against incomplete event implementations (#​1009) (289828b)
    • upload: be robust against missing FileList implementation (#​1007) (a46b4d7)
    • keyboard: switch modifier state of lock keys on the correct event (#​1003) (2852509)
    • keyboard: remove platform-specific additional key events for Control on AltGraph (#​1003) (2852509)
    • pointer: dispatch contextmenu events with detail: 0 (#​1003) (2852509)
    • pointer: always set PointerEvent.isPrimary (#​1003) (2852509)
    • pointer: set button property on pointer events separately from legacy mouse events (#​1003) (2852509)
    • pointer: click closest common ancestor if mousedown and mouseup happen on different elements (#​1003) (2852509)
    • pointer: omit click event on release if another button is released first (#​1003) (2852509)
    • pointer: dispatch mouseover, mouseenter and mousemove on disabled elements (#​1003) (2852509)
    • pointer: prevent mouse* events per pointerdown event handler (#​1003) (2852509)
    • pointer: dispatch *out and *over events when moving into / out of nested elements (#​1003) (2852509)
    • pointer: dispatch *enter and *leave events on ancestors (#​1003) (2852509)

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • fix(deps): update dependency @reduxjs/toolkit to v1.8.4

    fix(deps): update dependency @reduxjs/toolkit to v1.8.4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @reduxjs/toolkit (source) | 1.8.3 -> 1.8.4 | age | adoption | passing | confidence |


    Release Notes

    reduxjs/redux-toolkit

    v1.8.4

    Compare Source

    This bugfix release adds exported TS types for RTKQ hooks for use in wrapping logic, adds useDebugValue to the hooks to improve display in the React DevTools, updates the inlined types for the Redux DevTools options, and fixes an issue in `createEntityAdapter that could result in duplicate IDs being stored.

    Changelog

    RTKQ Hook Result Types

    RTK's types heavily rely on inference to minimize the amount of type info users have to provide. However, this can also make it difficult to write functions that wrap calls to RTK APIs.

    Some users have asked to have types that help them write "higher-order hooks". RTK now exports types that represent "the return object for a query/mutation hook with a given value": TypedUseQueryHookResult and TypedUseMutationResult. Both require <ResultType, QueryArg, BaseQuery> as generics, like this:

    const baseQuery = fetchBaseQuery({url: "https://some.server"});
    
    type CustomHookResult = TypedUseQueryHookResult<MyResultObject, MyArgObject, typeof baseQuery>
    
    const useMyCustomHook = (arg: MyArgObject) : CustomHookResult => {
      return api.useGetSomeDataQuery(arg);
    }
    
    Redux DevTools Options Fixes

    As of Redux DevTools 3.0, some of field names for custom DevTools options have changed to actionsAllowlist and actionsDenylist. Since we inline the types instead of having a separate dependency, we've updated our TS types to match that. No runtime behavior was changed.

    Other Changes

    RTKQ hooks now use useDebugValue to give a better preview of the current value in the React DevTools "Component" tab.

    The <ApiProvider> component now does a better job of registering and cleaning up focus listeners.

    Fixed a bug with createEntityAdapter that could allow duplicate IDs to be added depending on update parameters.

    What's Changed

    Full Changelog: https://github.com/reduxjs/redux-toolkit/compare/v1.8.3...v1.8.4


    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update dependency postcss to v8.4.16

    chore(deps): update dependency postcss to v8.4.16

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | postcss (source) | 8.4.14 -> 8.4.16 | age | adoption | passing | confidence |


    Release Notes

    postcss/postcss

    v8.4.16

    Compare Source

    • Fixed Root AST migration.

    v8.4.15

    Compare Source

    • Fixed AST normalization after using custom parser with old PostCSS AST.

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update dependency @types/react to v18.0.17

    chore(deps): update dependency @types/react to v18.0.17

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @types/react | 18.0.15 -> 18.0.17 | age | adoption | passing | confidence |


    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update dependency @testing-library/jest-dom to v5.16.5

    chore(deps): update dependency @testing-library/jest-dom to v5.16.5

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @testing-library/jest-dom | 5.16.4 -> 5.16.5 | age | adoption | passing | confidence |


    Release Notes

    testing-library/jest-dom

    v5.16.5

    Compare Source

    Bug Fixes

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update dependency tailwindcss to v3.1.8

    chore(deps): update dependency tailwindcss to v3.1.8

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | tailwindcss (source) | 3.1.6 -> 3.1.8 | age | adoption | passing | confidence |


    Release Notes

    tailwindlabs/tailwindcss

    v3.1.8

    Compare Source

    Fixed
    • Don’t prefix classes within reused arbitrary variants (#​8992)
    • Fix usage of alpha values inside single-named colors that are functions (#​9008)
    • Fix @apply of user utilities when negative and non-negative versions both exist (#​9027)

    v3.1.7

    Compare Source

    Fixed
    • Don't rewrite source maps for @layer rules (#​8971)
    Added
    • Added types for resolveConfig (#​8924)

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update dependency autoprefixer to v10.4.8

    chore(deps): update dependency autoprefixer to v10.4.8

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | autoprefixer | 10.4.7 -> 10.4.8 | age | adoption | passing | confidence |


    Release Notes

    postcss/autoprefixer

    v10.4.8

    Compare Source

    • Do not print color-adjust warning if print-color-adjust also is in rule.

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update all non-major dependencies

    chore(deps): update all non-major dependencies

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @commitlint/cli (source) | 17.0.2 -> 17.0.3 | age | adoption | passing | confidence | | @commitlint/config-conventional (source) | 17.0.2 -> 17.0.3 | age | adoption | passing | confidence | | @reduxjs/toolkit (source) | 1.8.2 -> 1.8.3 | age | adoption | passing | confidence | | @testing-library/user-event | 14.2.0 -> 14.3.0 | age | adoption | passing | confidence | | @types/jest | 28.1.1 -> 28.1.6 | age | adoption | passing | confidence | | @types/react | 18.0.12 -> 18.0.15 | age | adoption | passing | confidence | | @types/react-dom | 18.0.5 -> 18.0.6 | age | adoption | passing | confidence | | @typescript-eslint/eslint-plugin | 5.28.0 -> 5.31.0 | age | adoption | passing | confidence | | @typescript-eslint/parser | 5.28.0 -> 5.31.0 | age | adoption | passing | confidence | | eslint (source) | 8.17.0 -> 8.20.0 | age | adoption | passing | confidence | | eslint-plugin-prettier | 4.0.0 -> 4.2.1 | age | adoption | passing | confidence | | eslint-plugin-react | 7.30.0 -> 7.30.1 | age | adoption | passing | confidence | | jest (source) | 28.1.1 -> 28.1.3 | age | adoption | passing | confidence | | jest-environment-jsdom | 28.1.1 -> 28.1.3 | age | adoption | passing | confidence | | prettier (source) | 2.7.0 -> 2.7.1 | age | adoption | passing | confidence | | ts-jest | 28.0.5 -> 28.0.7 | age | adoption | passing | confidence | | typescript (source) | 4.7.3 -> 4.7.4 | age | adoption | passing | confidence |


    Release Notes

    conventional-changelog/commitlint (@​commitlint/cli)

    v17.0.3

    Compare Source

    Note: Version bump only for package @​commitlint/cli

    conventional-changelog/commitlint (@​commitlint/config-conventional)

    v17.0.3

    Compare Source

    Note: Version bump only for package @​commitlint/config-conventional

    reduxjs/redux-toolkit

    v1.8.3

    Compare Source

    This bugfix release fixes a few minor issues and bits of behavior, including updating the React-Redux peer dep to ^8.0.2 final, stable sorting in createEntityAdapter.updateMany and some initial state handling in createSlice.

    Changelog

    React-Redux Peer Dep

    We'd previously published an RTK build that accepted React-Redux v8 beta as a peer dep (for use with RTK Query). Since React-Redux v8 is out now, we've updated the peer dep to ^8.0.2.

    Entity Adapter Updates

    Previously, applying updates via createEntityAdapter.updateMany caused sorting order to change. Entities that had the same sorting result should have stayed in the same order relative to each other, but if one of those items had any updates, it would sort to the back of that group. This was due to items being removed from the lookup table and re-added, and since JS engines iterate keys in insertion order, the updated item would now end up compared later than before.

    We've reworked the implementation of updateMany to avoid that. This also ended up fixing another issue where multiple update entries targeting the same item ID would only have the first applied.

    createSlice Initial State

    createSlice now logs an error if initialState is undefined. This is most commonly seen when users misspell initialState. It also has better handling for values that can't be frozen by Immer such as primitives.

    RTK Query

    Several assorted improvements, including TS types for BaseQuery and checking if the body can actually be safely stringified.

    What's Changed

    New Contributors

    Full Changelog: https://github.com/reduxjs/redux-toolkit/compare/v1.8.2...1.8.3

    testing-library/user-event

    v14.3.0

    Compare Source

    Features

    v14.2.6

    Compare Source

    Bug Fixes

    v14.2.5

    Compare Source

    Bug Fixes
    • document: do not track value on HTMLSelectElement (#​989) (77a7fa8)

    v14.2.4

    Compare Source

    Bug Fixes
    • use window.FileList instead of implicit global (c88865d)

    v14.2.3

    Compare Source

    Bug Fixes
    • document: use setters/methods on element as default (#​987) (c40e614)

    v14.2.2

    Compare Source

    Bug Fixes

    v14.2.1

    Compare Source

    Performance Improvements
    • tab: avert visibility check on irrelevant elements (#​967) (d2d8a39)
    typescript-eslint/typescript-eslint (@​typescript-eslint/eslint-plugin)

    v5.31.0

    Compare Source

    Bug Fixes
    • eslint-plugin: [typedef] Support nested array destructuring with type annotation (#​5311) (6d19efe)
    • scope-manager: handle typeParameters of TSInstantiationExpression (#​5355) (2595ccf)
    Features
    • eslint-plugin: [consistent-generic-ctors] check class field declaration (#​5288) (48f996e)
    • eslint-plugin: [prefer-nullish-coalescing] add ignoreTernaryTests option (#​4965) (f82727f)

    5.30.7 (2022-07-18)

    Bug Fixes
    • eslint-plugin: [no-inferrable] fix optional param to valid code (#​5342) (98f6d5e)
    • eslint-plugin: [no-unused-vars] highlight last write reference (#​5267) (c3f199a)

    5.30.6 (2022-07-11)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    5.30.5 (2022-07-04)

    Bug Fixes
    • eslint-plugin: [consistent-indexed-object-style] fix record mode fixer for generics with a default value (#​5280) (57f032c)

    5.30.4 (2022-07-03)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    5.30.3 (2022-07-01)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    5.30.2 (2022-07-01)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    5.30.1 (2022-07-01)

    Bug Fixes
    • eslint-plugin: [no-base-to-string] add missing apostrophe to message (#​5270) (d320174)

    v5.30.7

    Compare Source

    Bug Fixes
    • eslint-plugin: [no-inferrable] fix optional param to valid code (#​5342) (98f6d5e)
    • eslint-plugin: [no-unused-vars] highlight last write reference (#​5267) (c3f199a)

    v5.30.6

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.30.5

    Compare Source

    Bug Fixes
    • eslint-plugin: [consistent-indexed-object-style] fix record mode fixer for generics with a default value (#​5280) (57f032c)

    v5.30.4

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.30.3

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.30.2

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    v5.30.1

    Compare Source

    Bug Fixes
    • eslint-plugin: [no-base-to-string] add missing apostrophe to message (#​5270) (d320174)

    v5.30.0

    Compare Source

    Features
    • eslint-plugin: [no-shadow] add shadowed variable location to the error message (#​5183) (8ca08e9)
    • treat this in typeof this as a ThisExpression (#​4382) (b04b2ce)

    v5.29.0

    Compare Source

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    typescript-eslint/typescript-eslint (@​typescript-eslint/parser)

    v5.31.0

    Compare Source

    Note: Version bump only for package @​typescript-eslint/parser

    5.30.7 (2022-07-18)

    Bug Fixes

    5.30.6 (2022-07-11)

    Note: Version bump only for package @​typescript-eslint/parser

    5.30.5 (2022-07-04)

    Note: Version bump only for package @​typescript-eslint/parser

    5.30.4 (2022-07-03)

    Note: Version bump only for package @​typescript-eslint/parser

    5.30.3 (2022-07-01)

    Note: Version bump only for package @​typescript-eslint/parser

    5.30.2 (2022-07-01)

    Note: Version bump only for package @​typescript-eslint/parser

    5.30.1 (2022-07-01)

    Note: Version bump only for package @​typescript-eslint/parser

    v5.30.7

    Compare Source

    Bug Fixes

    v5.30.6

    Compare Source

    Note: Version bump only for package @​typescript-eslint/parser

    v5.30.5

    Compare Source

    Note: Version bump only for package @​typescript-eslint/parser

    v5.30.4

    Compare Source

    Note: Version bump only for package @​typescript-eslint/parser

    v5.30.3

    Compare Source

    Note: Version bump only for package @​typescript-eslint/parser

    v5.30.2

    Compare Source

    Note: Version bump only for package @​typescript-eslint/parser

    v5.30.1

    Compare Source

    Note: Version bump only for package @​typescript-eslint/parser

    v5.30.0

    Compare Source

    Note: Version bump only for package @​typescript-eslint/parser

    v5.29.0

    Compare Source

    Note: Version bump only for package @​typescript-eslint/parser

    eslint/eslint

    v8.20.0

    Compare Source

    Features

    Bug Fixes

    • 30be0ed fix: no-warning-comments rule escapes special RegEx characters in terms (#​16090) (Lachlan Hunt)
    • bfe5e88 fix: ignore spacing before ] and } in comma-spacing (#​16113) (Milos Djermanovic)

    Documentation

    Chores

    • bbf8df4 chore: Mark autogenerated release blog post as draft (#​16130) (Nicholas C. Zakas)
    • eee4306 chore: update internal lint dependencies (#​16088) (Bryan Mishkin)
    • 9615a42 chore: update formatter examples template to avoid markdown lint error (#​16085) (Milos Djermanovic)
    • 62541ed chore: fix markdown linting error (#​16083) (唯然)

    v8.19.0

    Compare Source

    Features

    • 7023628 feat: add importNames support for patterns in no-restricted-imports (#​16059) (Brandon Scott)
    • 472c368 feat: fix handling of blockless with statements in indent rule (#​16068) (Milos Djermanovic)

    Bug Fixes

    • fc81848 fix: throw helpful exception when rule has wrong return type (#​16075) (Bryan Mishkin)

    Documentation

    • 3ae0574 docs: Remove duplicate rule descriptions (#​16052) (Amaresh S M)
    • f50cf43 docs: Add base href to each page to fix relative URLs (#​16046) (Nicholas C. Zakas)
    • ae4b449 docs: make logo link clickable on small width screens (#​16058) (Milos Djermanovic)
    • 280f898 docs: use only fenced code blocks (#​16044) (Milos Djermanovic)
    • f5d63b9 docs: add listener only if element exists (#​16045) (Amaresh S M)
    • 8b639cc docs: add missing migrating-to-8.0.0 in the user guide (#​16048) (唯然)
    • b8e68c1 docs: Update release process (#​16036) (Nicholas C. Zakas)
    • 6d0cb11 docs: remove table of contents from markdown text (#​15999) (Nitin Kumar)

    Chores

    v8.18.0

    Compare Source

    Features

    • a6273b8 feat: account for rule creation time in performance reports (#​15982) (Nitin Kumar)

    Bug Fixes

    • f364d47 fix: Make no-unused-vars treat for..of loops same as for..in loops (#​15868) (Alex Bass)

    Documentation

    • 4871047 docs: Update analytics, canonical URL, ads (#​15996) (Nicholas C. Zakas)
    • cddad14 docs: Add correct/incorrect containers (#​15998) (Nicholas C. Zakas)
    • b04bc6f docs: Add rules meta info to rule pages (#​15902) (Nicholas C. Zakas)
    • 1324f10 docs: unify the wording referring to optional exception (#​15893) (Abdelrahman Elkady)
    • ad54d02 docs: add missing trailing slash to some internal links (#​15991) (Milos Djermanovic)
    • df7768e docs: Switch to version-relative URLs (#​15978) (Nicholas C. Zakas)
    • 21d6479 docs: change some absolute links to relative (#​15970) (Milos Djermanovic)
    • f31216a docs: Update README team and sponsors (ESLint Jenkins)

    Build Related

    • ed49f15 build: remove unwanted parallel and image-min for dev server (#​15986) (Strek)

    Chores

    • f6e2e63 chore: fix 'replaced by' rule list (#​16007) (Milos Djermanovic)
    • d94dc84 chore: remove unused deprecation warnings (#​15994) (Francesco Trotta)
    • cdcf11e chore: fix versions link (#​15995) (Milos Djermanovic)
    • d2a8715 chore: add trailing slash to pathPrefix (#​15993) (Milos Djermanovic)
    • 58a1bf0 chore: tweak URL rewriting for local previews (#​15992) (Milos Djermanovic)
    • 80404d2 chore: remove docs deploy workflow (#​15984) (Nicholas C. Zakas)
    • 71bc750 chore: Set permissions for GitHub actions (#​15971) (Naveen)
    • 90ff647 chore: avoid generating subdirectories for each page on new docs site (#​15967) (Milos Djermanovic)
    prettier/eslint-plugin-prettier

    v4.2.1

    Compare Source

    Patch Changes

    v4.2.0

    Compare Source

    Minor Changes

    v4.1.0

    Compare Source

    jsx-eslint/eslint-plugin-react

    v7.30.1

    Compare Source

    Fixed
    Changed
    facebook/jest

    v28.1.3

    Compare Source

    Features
    • [jest-leak-detector] Use native FinalizationRegistry when it exists to get rid of external C dependency (#​12973)
    Fixes
    • [jest-changed-files] Fix a lock-up after repeated invocations (#​12757)
    • [@jest/expect-utils] Fix deep equality of ImmutableJS OrderedSets (#​12977)
    • [jest-mock] Add index signature support for spyOn types (#​13013, #​13020)
    • [jest-snapshot] Fix indentation of awaited inline snapshots (#​12986)
    Chore & Maintenance
    • [*] Replace internal usage of pretty-format/ConvertAnsi with jest-serializer-ansi-escapes (#​12935, #​13004)
    • [docs] Update spyOn docs (#​13000)

    v28.1.2

    Compare Source

    Fixes
    • [jest-runtime] Avoid star type import from @jest/globals (#​12949)
    Chore & Maintenance
    • [docs] Mention that jest-codemods now supports Sinon (#​12898)
    prettier/prettier

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • CSS Modules not reloading

    CSS Modules not reloading

    I might be missing something, but I was running with yarn dev and everything works with hot reloading except the CSS modules in the content folder. When I change the CSS nothing changes, even when I hard reload the page and extension. Any ideas on this?

    Also is it possible to use Tailwind when injecting content into the page?

    opened by caleb654 3
  • chore(deps): update dependency @crxjs/vite-plugin to v1.0.14

    chore(deps): update dependency @crxjs/vite-plugin to v1.0.14

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @crxjs/vite-plugin | 1.0.13 -> 1.0.14 | age | adoption | passing | confidence |


    Release Notes

    crxjs/rollup-plugin-chrome-extension

    v1.0.14

    Compare Source

    Patch Changes
    • 01f8e37: Allow <all_urls> in content_scripts.matches section of manifest.json
    • a65fe1f: CRXJS isn't fully compatible with Vite 3

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update dependency eslint to v8.27.0

    chore(deps): update dependency eslint to v8.27.0

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint (source) | 8.17.0 -> 8.27.0 | age | adoption | passing | confidence |


    Release Notes

    eslint/eslint

    v8.27.0

    Compare Source

    Features

    • f14587c feat: new no-new-native-nonconstructor rule (#​16368) (Sosuke Suzuki)
    • 978799b feat: add new rule no-empty-static-block (#​16325) (Sosuke Suzuki)
    • 69216ee feat: no-empty suggest to add comment in empty BlockStatement (#​16470) (Nitin Kumar)
    • 319f0a5 feat: use context.languageOptions.ecmaVersion in core rules (#​16458) (Milos Djermanovic)

    Bug Fixes

    • c3ce521 fix: Ensure unmatched glob patterns throw an error (#​16462) (Nicholas C. Zakas)
    • 886a038 fix: handle files with unspecified path in getRulesMetaForResults (#​16437) (Francesco Trotta)

    Documentation

    • ce93b42 docs: Stylelint property-no-unknown (#​16497) (Nick Schonning)
    • d2cecb4 docs: Stylelint declaration-block-no-shorthand-property-overrides (#​16498) (Nick Schonning)
    • 0a92805 docs: stylelint color-hex-case (#​16496) (Nick Schonning)
    • 74a5af4 docs: fix stylelint error (#​16491) (Milos Djermanovic)
    • 324db1a docs: explicit stylelint color related rules (#​16465) (Nick Schonning)
    • 94dc4f1 docs: use Stylelint for HTML files (#​16468) (Nick Schonning)
    • cc6128d docs: enable stylelint declaration-block-no-duplicate-properties (#​16466) (Nick Schonning)
    • d03a8bf docs: Add heading to justification explanation (#​16430) (Maritaria)
    • 8a15968 docs: add Stylelint configuration and cleanup (#​16379) (Nick Schonning)
    • 9b0a469 docs: note commit messages don't support scope (#​16435) (Andy Edwards)
    • 1581405 docs: improve context.getScope() docs (#​16417) (Ben Perlmutter)
    • b797149 docs: update formatters template (#​16454) (Milos Djermanovic)
    • 5ac4de9 docs: fix link to formatters on the Core Concepts page (#​16455) (Vladislav)
    • 33313ef docs: core-concepts: fix link to semi rule (#​16453) (coderaiser)

    v8.26.0

    Compare Source

    Features

    • 4715787 feat: check Object.create() in getter-return (#​16420) (Yuki Hirasawa)
    • 28d1902 feat: no-implicit-globals supports exported block comment (#​16343) (Sosuke Suzuki)
    • e940be7 feat: Use ESLINT_USE_FLAT_CONFIG environment variable for flat config (#​16356) (Tomer Aberbach)
    • dd0c58f feat: Swap out Globby for custom globbing solution. (#​16369) (Nicholas C. Zakas)

    Bug Fixes

    • df77409 fix: use baseConfig constructor option in FlatESLint (#​16432) (Milos Djermanovic)
    • 33668ee fix: Ensure that glob patterns are matched correctly. (#​16449) (Nicholas C. Zakas)
    • 740b208 fix: ignore messages without a ruleId in getRulesMetaForResults (#​16409) (Francesco Trotta)
    • 8f9759e fix: --ignore-pattern in flat config mode should be relative to cwd (#​16425) (Milos Djermanovic)
    • 325ad37 fix: make getRulesMetaForResults return a plain object in trivial case (#​16438) (Francesco Trotta)
    • a2810bc fix: Ensure that directories can be unignored. (#​16436) (Nicholas C. Zakas)
    • 35916ad fix: Ensure unignore and reignore work correctly in flat config. (#​16422) (Nicholas C. Zakas)

    Documentation

    • 651649b docs: Core concepts page (#​16399) (Ben Perlmutter)
    • 631cf72 docs: note --ignore-path not supported with flat config (#​16434) (Andy Edwards)
    • 1692840 docs: fix syntax in examples for new config files (#​16427) (Milos Djermanovic)
    • d336cfc docs: Document extending plugin with new config (#​16394) (Ben Perlmutter)

    Chores

    v8.25.0

    Compare Source

    Features

    • 173e820 feat: Pass --max-warnings value to formatters (#​16348) (Brandon Mills)
    • 6964cb1 feat: remove support for ignore files in FlatESLint (#​16355) (Milos Djermanovic)
    • 1cc4b3a feat: id-length counts graphemes instead of code units (#​16321) (Sosuke Suzuki)

    Documentation

    Chores

    v8.24.0

    Compare Source

    Features
    • 1729f9e feat: account for sourceType: "commonjs" in the strict rule (#​16308) (Milos Djermanovic)
    • b0d72c9 feat: add rule logical-assignment-operators (#​16102) (fnx)
    • f02bcd9 feat: array-callback-return support findLast and findLastIndex (#​16314) (Sosuke Suzuki)
    Documentation
    Chores

    v8.23.1

    Compare Source

    Bug Fixes

    • b719893 fix: Upgrade eslintrc to stop redefining plugins (#​16297) (Brandon Mills)
    • 734b54e fix: improve autofix for the prefer-const rule (#​16292) (Nitin Kumar)
    • 6a923ff fix: Ensure that glob patterns are normalized (#​16287) (Nicholas C. Zakas)
    • c6900f8 fix: Ensure globbing doesn't include subdirectories (#​16272) (Nicholas C. Zakas)

    Documentation

    • 16cba3f docs: fix mobile double tap issue (#​16293) (Sam Chen)
    • e098b5f docs: keyboard control to search results (#​16222) (Shanmughapriyan S)
    • 1b5b2a7 docs: add Consolas font and prioritize resource loading (#​16225) (Amaresh S M)
    • 1ae8236 docs: copy & use main package version in docs on release (#​16252) (Jugal Thakkar)
    • 279f0af docs: Improve id-denylist documentation (#​16223) (Mert Ciflikli)

    Chores

    v8.23.0

    Compare Source

    Features

    • 3e5839e feat: Enable eslint.config.js lookup from CLI (#​16235) (Nicholas C. Zakas)
    • 30b1a2d feat: add allowEmptyCase option to no-fallthrough rule (#​15887) (Amaresh S M)
    • 43f03aa feat: no-warning-comments support comments with decoration (#​16120) (Lachlan Hunt)

    Documentation

    Chores

    v8.22.0

    Compare Source

    Features

    • 2b97607 feat: Implement caching for FlatESLint (#​16190) (Nicholas C. Zakas)
    • fd5d3d3 feat: add methodsIgnorePattern option to object-shorthand rule (#​16185) (Milos Djermanovic)

    Documentation

    Chores

    • 10a6e0e chore: remove deploy workflow for playground (#​16186) (Milos Djermanovic)

    v8.21.0

    Compare Source

    Features

    • 7b43ea1 feat: Implement FlatESLint (#​16149) (Nicholas C. Zakas)
    • 92bf49a feat: improve the key width calculation in key-spacing rule (#​16154) (Nitin Kumar)
    • c461542 feat: add new allowLineSeparatedGroups option to the sort-keys rule (#​16138) (Nitin Kumar)
    • 1cdcbca feat: add deprecation warnings for legacy API in RuleTester (#​16063) (Nitin Kumar)

    Bug Fixes

    • 0396775 fix: lines-around-comment apply allowBlockStart for switch statements (#​16153) (Nitin Kumar)

    Documentation

    Chores

    v8.20.0

    Compare Source

    Features

    Bug Fixes

    • 30be0ed fix: no-warning-comments rule escapes special RegEx characters in terms (#​16090) (Lachlan Hunt)
    • bfe5e88 fix: ignore spacing before ] and } in comma-spacing (#​16113) (Milos Djermanovic)

    Documentation

    Chores

    • bbf8df4 chore: Mark autogenerated release blog post as draft (#​16130) (Nicholas C. Zakas)
    • eee4306 chore: update internal lint dependencies (#​16088) (Bryan Mishkin)
    • 9615a42 chore: update formatter examples template to avoid markdown lint error (#​16085) (Milos Djermanovic)
    • 62541ed chore: fix markdown linting error (#​16083) (唯然)

    v8.19.0

    Compare Source

    Features

    • 7023628 feat: add importNames support for patterns in no-restricted-imports (#​16059) (Brandon Scott)
    • 472c368 feat: fix handling of blockless with statements in indent rule (#​16068) (Milos Djermanovic)

    Bug Fixes

    • fc81848 fix: throw helpful exception when rule has wrong return type (#​16075) (Bryan Mishkin)

    Documentation

    • 3ae0574 docs: Remove duplicate rule descriptions (#​16052) (Amaresh S M)
    • f50cf43 docs: Add base href to each page to fix relative URLs (#​16046) (Nicholas C. Zakas)
    • ae4b449 docs: make logo link clickable on small width screens (#​16058) (Milos Djermanovic)
    • 280f898 docs: use only fenced code blocks (#​16044) (Milos Djermanovic)
    • f5d63b9 docs: add listener only if element exists (#​16045) (Amaresh S M)
    • 8b639cc docs: add missing migrating-to-8.0.0 in the user guide (#​16048) (唯然)
    • b8e68c1 docs: Update release process (#​16036) (Nicholas C. Zakas)
    • 6d0cb11 docs: remove table of contents from markdown text (#​15999) (Nitin Kumar)

    Chores

    v8.18.0

    Compare Source

    Features

    • a6273b8 feat: account for rule creation time in performance reports (#​15982) (Nitin Kumar)

    Bug Fixes

    • f364d47 fix: Make no-unused-vars treat for..of loops same as for..in loops (#​15868) (Alex Bass)

    Documentation

    • 4871047 docs: Update analytics, canonical URL, ads (#​15996) (Nicholas C. Zakas)
    • cddad14 docs: Add correct/incorrect containers (#​15998) (Nicholas C. Zakas)
    • b04bc6f docs: Add rules meta info to rule pages (#​15902) (Nicholas C. Zakas)
    • 1324f10 docs: unify the wording referring to optional exception (#​15893) (Abdelrahman Elkady)
    • ad54d02 docs: add missing trailing slash to some internal links (#​15991) (Milos Djermanovic)
    • df7768e docs: Switch to version-relative URLs (#​15978) (Nicholas C. Zakas)
    • 21d6479 docs: change some absolute links to relative (#​15970) (Milos Djermanovic)
    • f31216a docs: Update README team and sponsors (ESLint Jenkins)

    Build Related

    • ed49f15 build: remove unwanted parallel and image-min for dev server (#​15986) (Strek)

    Chores

    • f6e2e63 chore: fix 'replaced by' rule list (#​16007) (Milos Djermanovic)
    • d94dc84 chore: remove unused deprecation warnings (#​15994) (Francesco Trotta)
    • cdcf11e chore: fix versions link (#​15995) (Milos Djermanovic)
    • d2a8715 chore: add trailing slash to pathPrefix (#​15993) (Milos Djermanovic)
    • 58a1bf0 chore: tweak URL rewriting for local previews (#​15992) (Milos Djermanovic)
    • 80404d2 chore: remove docs deploy workflow (#​15984) (Nicholas C. Zakas)
    • 71bc750 chore: Set permissions for GitHub actions (#​15971) (Naveen)
    • 90ff647 chore: avoid generating subdirectories for each page on new docs site (#​15967) (Milos Djermanovic)

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • fix(deps): update dependency react-redux to v8

    fix(deps): update dependency react-redux to v8

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | react-redux | 7.2.8 -> 8.0.5 | age | adoption | passing | confidence |


    Release Notes

    reduxjs/react-redux

    v8.0.5

    Compare Source

    This release fixes a few minor TS issues.

    What's Changed

    Full Changelog: https://github.com/reduxjs/react-redux/compare/v8.0.4...v8.0.5

    v8.0.4

    Compare Source

    This patch release fixes some minor TS types issues, and updates the rarely-used areStatesEqual option for connect to now pass through ownProps for additional use in determining which pieces of state to compare if desired.

    Note: 8.0.3 was accidentally published without one of these fixes. Use 8.0.4 instead.

    Changelog

    TS Fixes

    We've fixed an import of React that caused issues with the allowSyntheticDefaultImports TS compiler flag in user projects.

    connect already accepted a custom context instance as props.context, and had runtime checks in case users were passing through a real value with app data as props.context instead. However, the TS types did not handle that case, and this would fail to compile. If your own component expects props.context with actual data, connect's types now use that type instead.

    The ConnectedProps<T> type had a mismatch with React's built-in React.ComponentProps<Component> type, and that should now work correctly.

    Other Changes

    The areStatesEqual option to connect now receives ownProps as well, in case you need to make a more specific comparison with certain sections of state.

    The new signature is:

    {
      areStatesEqual?: (
        nextState: State,
        prevState: State,
        nextOwnProps: TOwnProps,
        prevOwnProps: TOwnProps
      ) => boolean
    }
    

    What's Changed

    Full Changelog: https://github.com/reduxjs/react-redux/compare/v8.0.2...v8.0.4

    v8.0.3

    Compare Source

    This release was accidentally published without an intended fix - please use v8.0.4 instead

    v8.0.2

    Compare Source

    This patch release tweaks the behavior of connect to print a one-time warning when the obsolete pure option is passed in, rather than throwing an error. This fixes crashes caused by libraries such as react-beautiful-dnd continuing to pass in that option (unnecessarily) to React-Redux v8.

    What's Changed

    Full Changelog: https://github.com/reduxjs/react-redux/compare/v8.0.1...v8.0.2

    v8.0.1

    Compare Source

    This release fixes an incorrect internal import of our Subscription type, which was causing TS compilation errors in some user projects. We've also listed @types/react-dom as an optional peerDep. There are no runtime changes in this release.

    What's Changed

    Full Changelog: https://github.com/reduxjs/react-redux/compare/v8.0.0...v8.0.1

    v8.0.0

    Compare Source

    This major version release updates useSelector, connect, and <Provider> for compatibility with React 18, rewrites the React-Redux codebase to TypeScript (obsoleting use of @types/react-redux), modernizes build output, and removes the deprecated connectAdvanced API and the pure option for connect.

    npm i [email protected]
    
    yarn add [email protected]
    

    Overview, Compatibility, and Migration

    Our public API is still the same ( <Provider>, connect and useSelector/useDispatch), but we've updated the internals to use the new useSyncExternalStore hook from React. React-Redux v8 is still compatible with all versions of React that have hooks (16.8+, 17.x, and 18.x; React Native 0.59+), and should just work out of the box.

    In most cases, it's very likely that the only change you will need to make is bumping the package version to "react-redux": "^8.0".

    If you are using the rarely-used connectAdvanced API, you will need to rewrite your code to avoid that, likely by using the hooks API instead. Similarly, the pure option for connect has been removed.

    If you are using Typescript, React-Redux is now written in TS and includes its own types. You should remove any dependencies on @types/react-redux.

    While not directly tied to React-Redux, note that the recently updated @types/[email protected] major version has changed component definitions to remove having children as a prop by default. This causes errors if you have multiple copies of @types/react in your project. To fix this, tell your package manager to resolve @types/react to a single version. Details:

    React issue #​24304: React 18 types broken since release

    Additionally, please see the React post on How to Ugprade to React 18 for details on how to migrate existing apps to correctly use React 18 and take advantage of its new features.

    Changelog

    React 18 Compatibility

    React-Redux now requires the new useSyncExternalStore API in React 18. By default, it uses the "shim" package which backfills that API in earlier React versions, so React-Redux v8 is compatible with all React versions that have hooks (16.8+, and React Native 0.59+) as its acceptable peer dependencies.

    We'd especially like to thank the React team for their extensive support and cooperation during the useSyncExternalStore development effort. They specifically designed useSyncExternalStore to support the needs and use cases of React-Redux, and we used React-Redux v8 as a testbed for how useSyncExternalStore would behave and what it needed to cover. This in turn helped ensure that useSyncExternalStore would be useful and work correctly for other libraries in the ecosystem as well.

    Our performance benchmarks show parity with React-Redux v7.2.5 for both connect and useSelector, so we do not anticipate any meaningful performance regressions.

    useSyncExternalStore and Bundling

    The useSyncExternalStore shim is imported directly in the main entry point, so it's always included in bundles even if you're using React 18. This adds roughly 600 bytes minified to your bundle size.

    If you are using React 18 and would like to avoid that extra bundle cost, React-Redux now has a new /next entry point. This exports the exact same APIs, but directly imports useSyncExternalStore from React itself, and thus avoids including the shim. You can alias "react-redux": "react-redux/next" in your bundler to use that instead.

    SSR and Hydration

    React 18 introduces a new hydrateRoot method for hydrating the UI on the client in Server-Side Rendering usage. As part of that, the useSyncExternalStore API requires that we pass in an alternate state value other than what's in the actual Redux store, and that alternate value will be used for the entire initial hydration render to ensure the initial rehydrated UI is an exact match for what was rendered on the server. After the hydration render is complete, React will then apply any additional changes from the store state in a follow-up render.

    React-Redux v8 supports this by adding a new serverState prop for <Provider>. If you're using SSR, you should pass your serialized state to <Provider> to ensure there are no hydration mismatch errors:

    import { hydrateRoot } from 'react-dom/client'
    import { configureStore } from '@&#8203;reduxjs/toolkit'
    import { Provider } from 'react-redux'
    
    const preloadedState = window.__PRELOADED_STATE__
    
    const clientStore = configureStore({
      reducer: rootReducer,
      preloadedState,
    })
    
    hydrateRoot(
      document.getElementById('root'),
      <Provider store={clientStore} serverState={preloadedState}>
        <App />
      </Provider>
    )
    
    TypeScript Migration and Support

    The React-Redux library source has always been written in plain JS, and the community maintained the TS typings separately as @types/react-redux.

    We've (finally!) migrated the React-Redux codebase to TypeScript, using the existing typings as a starting point. This means that the @types/react-redux package is no longer needed, and you should remove that as a dependency.

    Note Please ensure that any installed copies of redux and @types/react are de-duped. You are also encouraged to update to the latest versions of Redux Toolkit (1.8.1+) or Redux (4.1.2), to ensure consistency between installed types and avoid problems from types mismatches.

    We've tried to maintain the same external type signatures as much as possible. If you do see any compile problems, please file issues with any apparent TS-related problems so we can review them.

    The TS migration was a great collaborative effort, with many community members contributing migrated files. Thank you to everyone who helped out!

    In addition to the "pre-typed" TypedUseSelectorHook, there's now also a Connect<State = unknown> type that can be used as a "pre-typed" version of connect as well.

    As part of the process, we also updated the repo to use Yarn 3, copied the typetests files from DefinitelyTyped and expanded them, and improved our CI setup to test against multiple TS versions.

    Removal of the DefaultRootState type

    The @types/react-redux package, which has always been maintained by the community, included a DefaultRootState interface that was intended for use with TS's "module augmentation" capability. Both connect and useSelector used this as a fallback if no state generic was provided. When we migrated React-Redux to TS, we copied over all of the types from that package as a starting point.

    However, the Redux team specifically considers use of a globally augmented state type to be an anti-pattern. Instead, we direct users to extract the RootState and AppDispatch types from the store setup, and create pre-typed versions of the React-Redux hooks for use in the app.

    Now that React-Redux itself is written in TS, we've opted to remove the DefaultRootState type entirely. State generics now default to unknown instead.

    Technically the module augmentation approach can still be done in userland, but we discourage this practice.

    Modernized Build Output

    We've always targeted ES5 syntax in our published build artifacts as the lowest common denominator. Even the "ES module" artifacts with import/export keywords still were compiled to ES5 syntax otherwise.

    With IE11 now effectively dead and many sites no longer supporting it, we've updated our build tooling to target a more modern syntax equivalent to ES2017, which shrinks the bundle size slightly.

    If you still need to support ES5-only environments, please compile your own dependencies as needed for your target environment.

    Removal of Legacy APIs

    We announced in 2019 that the legacy connectAdvanced API would be removed in the next major version, as it was rarely used, added internal complexity, and was also basically irrelevant with the introduction of hooks. As promised, we've removed that API.

    We've also removed the pure option for connect, which forced components to re-render regardless of whether props/state had actually changed if it was set to false. This option was needed in some cases in the early days of the React ecosystem, when components sometimes relied on external mutable data sources that could change outside of rendering. Today, no one writes components that way, the option was barely used, and React 18's useSyncExternalStore strictly requires immutable updates. So, we've removed the pure flag.

    Given that both of these options were almost never used, this shouldn't meaningfully affect anyone.

    Changes

    Due to the TS migration effort and number of contributors, this list covers just the major changes:

    v7.2.9

    Compare Source

    This patch release updates the rarely-used areStatesEqual option for connect to now pass through ownProps for additional use in determining which pieces of state to compare if desired.

    The new signature is:

    {
      areStatesEqual?: (
        nextState: State,
        prevState: State,
        nextOwnProps: TOwnProps,
        prevOwnProps: TOwnProps
      ) => boolean
    }
    

    What's Changed

    Full Changelog: https://github.com/reduxjs/react-redux/compare/v7.2.8...v7.2.9


    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Dependency Dashboard

    Dependency Dashboard

    This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

    Rate-Limited

    These updates are currently rate-limited. Click on a checkbox below to force their creation now.

    • [ ] chore(deps): update dependency @types/jest to v28.1.8
    • [ ] chore(deps): update dependency @types/lodash to v4.14.189
    • [ ] chore(deps): update dependency @types/react to v18.0.25
    • [ ] chore(deps): update dependency @types/react-dom to v18.0.9
    • [ ] chore(deps): update dependency autoprefixer to v10.4.13
    • [ ] chore(deps): update dependency postcss to v8.4.19
    • [ ] chore(deps): update dependency simple-git-hooks to v2.8.1
    • [ ] chore(deps): update dependency stylelint-config-prettier to v9.0.4
    • [ ] chore(deps): update dependency ts-jest to v28.0.8
    • [ ] chore(deps): update dependency vite to v2.9.15
    • [ ] fix(deps): update dependency react-redux to v7.2.9
    • [ ] chore(deps): update commitlint monorepo to v17.2.0 (@commitlint/cli, @commitlint/config-conventional)
    • [ ] chore(deps): update dependency @testing-library/react to v13.4.0
    • [ ] chore(deps): update dependency eslint-plugin-react to v7.31.10
    • [ ] chore(deps): update dependency jest-chrome to v0.8.0
    • [ ] chore(deps): update dependency stylelint to v14.15.0
    • [ ] chore(deps): update dependency tailwindcss to v3.2.4
    • [ ] chore(deps): update dependency typescript to v4.9.3
    • [ ] chore(deps): update typescript-eslint monorepo to v5.43.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
    • [ ] fix(deps): update dependency @reduxjs/toolkit to v1.9.0
    • [ ] fix(deps): update dependency webextension-polyfill to v0.10.0 (webextension-polyfill, @types/webextension-polyfill)
    • [ ] chore(deps): update dependency @types/glob to v8
    • [ ] chore(deps): update dependency eslint-plugin-simple-import-sort to v8
    • [ ] chore(deps): update dependency stylelint-config-standard to v29
    • [ ] chore(deps): update jest monorepo to v29 (major) (@types/jest, jest, jest-environment-jsdom, ts-jest)
    • [ ] 🔐 Create all rate-limited PRs at once 🔐

    Open

    These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

    Ignored or Blocked

    These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

    Detected dependencies

    github-actions
    .github/workflows/ci.yml
    • actions/checkout v3
    • actions/setup-node v3
    • actions/checkout v3
    • actions/setup-node v3
    • actions/checkout v3
    • actions/setup-node v3
    • actions/checkout v3
    • actions/setup-node v3
    npm
    package.json
    • @eduardoac-skimlinks/webext-redux 3.0.1-release-candidate
    • @reduxjs/toolkit 1.8.4
    • react 18.2.0
    • react-dom 18.2.0
    • react-redux 7.2.8
    • redux-persist-webextension-storage 1.0.2
    • reduxjs-toolkit-persist 7.2.1
    • webextension-polyfill 0.9.0
    • @commitlint/cli 17.0.3
    • @commitlint/config-conventional 17.0.3
    • @crxjs/vite-plugin 1.0.13
    • @ryansonshine/commitizen 4.2.8
    • @ryansonshine/cz-conventional-changelog 3.3.4
    • @testing-library/jest-dom 5.16.5
    • @testing-library/react 13.3.0
    • @testing-library/user-event 14.4.3
    • @types/fs-extra 9.0.13
    • @types/glob 7.2.0
    • @types/jest 28.1.6
    • @types/lodash 4.14.182
    • @types/react 18.0.17
    • @types/react-dom 18.0.6
    • @types/redux-persist-webextension-storage 1.0.0
    • @types/webextension-polyfill 0.9.0
    • @typescript-eslint/eslint-plugin 5.31.0
    • @typescript-eslint/parser 5.31.0
    • @vitejs/plugin-react 1.3.2
    • autoprefixer 10.4.8
    • eslint 8.17.0
    • eslint-config-prettier 8.5.0
    • eslint-config-react-app 7.0.1
    • eslint-plugin-prettier 4.2.1
    • eslint-plugin-react 7.30.1
    • eslint-plugin-simple-import-sort 7.0.0
    • glob 8.0.3
    • identity-obj-proxy 3.0.0
    • jest 28.1.3
    • jest-chrome 0.7.2
    • jest-environment-jsdom 28.1.3
    • lodash 4.17.21
    • nano-staged 0.8.0
    • npm-run-all 4.1.5
    • postcss 8.4.16
    • prettier 2.7.1
    • rimraf 3.0.2
    • simple-git-hooks 2.8.0
    • stylelint 14.10.0
    • stylelint-config-prettier 9.0.3
    • stylelint-config-standard 26.0.0
    • tailwindcss 3.1.8
    • ts-jest 28.0.7
    • typescript 4.7.4
    • vite 2.9.14

    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    opened by renovate[bot] 0
Owner
Sinan Bekar
Full Stack Developer
Sinan Bekar
Nextacular 19 Dec 1, 2022
Ext-react - A starter repo for building browser extensions with React and Typescript

Web Extensions React starter A starter repo for building browser extensions with

Okanovic Dragan 35 Nov 25, 2022
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Cory House 9.8k Nov 30, 2022
A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel for ES2015+ and ESLint

UniversalJS A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel fo

Colin Meinke 65 Oct 13, 2022
GlueStick is a command line interface for quickly developing universal web applications using React and Redux.

Deprecation Notice GlueStick is now archived. It was one of the first React-in-a-box projects and helped TrueCar quickly migrate to React. With the Re

TrueCar Inc 359 Jul 31, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 488 Sep 8, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 488 Sep 8, 2022
A vite plugin for generating cross browser platform, ES module based web extensions.

@samrum/vite-plugin-web-extension A vite plugin for generating cross browser platform, ES module based web extensions. Features Manifest V2 & V3 Suppo

Ruben Medina 71 Nov 29, 2022
This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

Bronathan 55 Nov 29, 2022
Get started with Chrome extensions development using webpack, Typescript, Sass, and more

Get started with Chrome extensions development using webpack, Typescript, Sass,

Sebastian Szczepański 157 Nov 29, 2022
A minimal, fast monorepo template for TypeScript (and React) projects with hot module reloading

A minimal, fast monorepo template for TypeScript (and React) projects with hot module reloading

Jordan Sexton 24 Nov 4, 2022
Template for developing react app with structure inspired by Ignite CLI's react native boilerplate

React Template A react template heavily inspired by Ignite CLI's boilerplate for React Native, it uses a couple of generators with simple template cus

Ibrahim Elaradi 12 Aug 18, 2022
Template for developing react app with structure inspired by Ignite CLI's react native boilerplate

React Template A react template heavily inspired by Ignite CLI's boilerplate for React Native, it uses a couple of generators with simple template cus

Ibrahim Elaradi 12 Aug 18, 2022
Get started with developing emails with React Components

mjml-react-starter Get started with developing emails with React Components. This starter includes dev and build scripts to get you started with 1 com

Daphne 7 Sep 22, 2022
This project is the base template for developing Electron applications using React.

Electron React Template This project is the base template for developing Electron applications using React. React Scripts react-start react-build reac

Mehdi 8 Jul 15, 2022
📚 Learn React + Redux by building a SoundCloud Client. Full tutorial included. Source Code for main tutorial but also extensions included.

react-redux-soundcloud I wrote a huge tutorial about setting up your own SoundCloud Client in React + Redux. Additonally you can find a real world exa

Robin Wieruch 282 Oct 16, 2022
React + Redux + Firebase + Webpack + React Hot Loader 3 + React Router in one boilerplate

Firebase 3.0 Starter using React Redux This is a Firebase 3.0 start using React and Redux. It uses the latest version of libraries, including the bran

Douglas Correa 377 Nov 29, 2022
React + React Router 1.0 + Redux + Webpack & Hot Module Replacement

React scaffolding An opinionated scaffolding with the following technical stack and configuration: React (15.x.x) React Router (2.x) Flux by using Red

Rafael 29 Feb 26, 2021
Babel React Koa Hot Universal Boilerplate

Babel React Koa - Hot Universal Boilerplate Breko Hub Breko hub is a github repository that helps anyone create new JavaScript applications. Giving yo

Thomas 143 Nov 4, 2022