From 2efb0236bf7676b8d6b0f0821445884567e9701f Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Wed, 10 Jan 2024 23:04:55 +0000 Subject: [PATCH 01/46] clone vite example --- .../counter-todo/.eslintrc.json | 17 + .../lazy-injection/counter-todo/.gitignore | 30 + .../counter-todo/.prettierrc.json | 4 + .../lazy-injection/counter-todo/README.md | 27 + .../lazy-injection/counter-todo/index.html | 14 + .../lazy-injection/counter-todo/package.json | 39 + .../lazy-injection/counter-todo/src/App.css | 39 + .../counter-todo/src/App.test.tsx | 105 ++ .../lazy-injection/counter-todo/src/App.tsx | 68 ++ .../counter-todo/src/app/createAppSlice.ts | 6 + .../counter-todo/src/app/hooks.ts | 7 + .../counter-todo/src/app/store.ts | 40 + .../src/features/counter/Counter.module.css | 81 ++ .../src/features/counter/Counter.tsx | 76 ++ .../src/features/counter/counterAPI.ts | 6 + .../src/features/counter/counterSlice.test.ts | 58 + .../src/features/counter/counterSlice.ts | 89 ++ .../src/features/quotes/Quotes.module.css | 20 + .../src/features/quotes/Quotes.tsx | 59 + .../src/features/quotes/quotesApiSlice.ts | 38 + .../lazy-injection/counter-todo/src/index.css | 13 + .../lazy-injection/counter-todo/src/logo.svg | 1 + .../lazy-injection/counter-todo/src/main.tsx | 24 + .../counter-todo/src/setupTests.ts | 1 + .../counter-todo/src/utils/test-utils.tsx | 65 ++ .../counter-todo/src/vite-env.d.ts | 1 + .../lazy-injection/counter-todo/tsconfig.json | 21 + .../counter-todo/tsconfig.node.json | 9 + .../counter-todo/vite.config.ts | 16 + package.json | 3 +- yarn.lock | 1009 ++++++++++++++++- 31 files changed, 1973 insertions(+), 13 deletions(-) create mode 100644 examples/lazy-injection/counter-todo/.eslintrc.json create mode 100644 examples/lazy-injection/counter-todo/.gitignore create mode 100644 examples/lazy-injection/counter-todo/.prettierrc.json create mode 100644 examples/lazy-injection/counter-todo/README.md create mode 100644 examples/lazy-injection/counter-todo/index.html create mode 100644 examples/lazy-injection/counter-todo/package.json create mode 100644 examples/lazy-injection/counter-todo/src/App.css create mode 100644 examples/lazy-injection/counter-todo/src/App.test.tsx create mode 100644 examples/lazy-injection/counter-todo/src/App.tsx create mode 100644 examples/lazy-injection/counter-todo/src/app/createAppSlice.ts create mode 100644 examples/lazy-injection/counter-todo/src/app/hooks.ts create mode 100644 examples/lazy-injection/counter-todo/src/app/store.ts create mode 100644 examples/lazy-injection/counter-todo/src/features/counter/Counter.module.css create mode 100644 examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx create mode 100644 examples/lazy-injection/counter-todo/src/features/counter/counterAPI.ts create mode 100644 examples/lazy-injection/counter-todo/src/features/counter/counterSlice.test.ts create mode 100644 examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts create mode 100644 examples/lazy-injection/counter-todo/src/features/quotes/Quotes.module.css create mode 100644 examples/lazy-injection/counter-todo/src/features/quotes/Quotes.tsx create mode 100644 examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts create mode 100644 examples/lazy-injection/counter-todo/src/index.css create mode 100644 examples/lazy-injection/counter-todo/src/logo.svg create mode 100644 examples/lazy-injection/counter-todo/src/main.tsx create mode 100644 examples/lazy-injection/counter-todo/src/setupTests.ts create mode 100644 examples/lazy-injection/counter-todo/src/utils/test-utils.tsx create mode 100644 examples/lazy-injection/counter-todo/src/vite-env.d.ts create mode 100644 examples/lazy-injection/counter-todo/tsconfig.json create mode 100644 examples/lazy-injection/counter-todo/tsconfig.node.json create mode 100644 examples/lazy-injection/counter-todo/vite.config.ts diff --git a/examples/lazy-injection/counter-todo/.eslintrc.json b/examples/lazy-injection/counter-todo/.eslintrc.json new file mode 100644 index 0000000000..b3343e50ce --- /dev/null +++ b/examples/lazy-injection/counter-todo/.eslintrc.json @@ -0,0 +1,17 @@ +{ + "extends": ["react-app"], + "rules": { + "@typescript-eslint/no-restricted-imports": [ + 2, + { + "paths": [ + { + "name": "react-redux", + "importNames": ["useSelector", "useStore", "useDispatch"], + "message": "Please use pre-typed versions from `src/app/hooks.ts` instead." + } + ] + } + ] + } +} diff --git a/examples/lazy-injection/counter-todo/.gitignore b/examples/lazy-injection/counter-todo/.gitignore new file mode 100644 index 0000000000..78ab7aa493 --- /dev/null +++ b/examples/lazy-injection/counter-todo/.gitignore @@ -0,0 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +# Dependencies +node_modules +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/sdks +!.yarn/versions +# Swap the comments on the following lines if you don't wish to use zero-installs +# Documentation here: https://yarnpkg.com/features/zero-installs +!.yarn/cache +#.pnp.* + +# Testing +coverage + +# Production +build + +# Miscellaneous +*.local diff --git a/examples/lazy-injection/counter-todo/.prettierrc.json b/examples/lazy-injection/counter-todo/.prettierrc.json new file mode 100644 index 0000000000..18b9c97f02 --- /dev/null +++ b/examples/lazy-injection/counter-todo/.prettierrc.json @@ -0,0 +1,4 @@ +{ + "semi": false, + "arrowParens": "avoid" +} diff --git a/examples/lazy-injection/counter-todo/README.md b/examples/lazy-injection/counter-todo/README.md new file mode 100644 index 0000000000..7247e9edb7 --- /dev/null +++ b/examples/lazy-injection/counter-todo/README.md @@ -0,0 +1,27 @@ +# vite-template-redux + +Uses [Vite](https://vitejs.dev/), [Vitest](https://vitest.dev/), and [React Testing Library](https://github.com/testing-library/react-testing-library) to create a modern [React](https://react.dev/) app compatible with [Create React App](https://create-react-app.dev/) + +```sh +npx degit reduxjs/redux-templates/packages/vite-template-redux my-app +``` + +## Goals + +- Easy migration from Create React App or Vite +- As beginner friendly as Create React App +- Optimized performance compared to Create React App +- Customizable without ejecting + +## Scripts + +- `dev`/`start` - start dev server and open browser +- `build` - build for production +- `preview` - locally preview production build +- `test` - launch test runner + +## Inspiration + +- [Create React App](https://github.com/facebook/create-react-app/tree/main/packages/cra-template) +- [Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react) +- [Vitest](https://github.com/vitest-dev/vitest/tree/main/examples/react-testing-lib) diff --git a/examples/lazy-injection/counter-todo/index.html b/examples/lazy-injection/counter-todo/index.html new file mode 100644 index 0000000000..b5fae3da23 --- /dev/null +++ b/examples/lazy-injection/counter-todo/index.html @@ -0,0 +1,14 @@ + + + + + + + React Redux App + + + +
+ + + diff --git a/examples/lazy-injection/counter-todo/package.json b/examples/lazy-injection/counter-todo/package.json new file mode 100644 index 0000000000..714638c520 --- /dev/null +++ b/examples/lazy-injection/counter-todo/package.json @@ -0,0 +1,39 @@ +{ + "name": "@examples-lazy-injection/counter-todo", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "start": "vite", + "build": "tsc && vite build", + "preview": "vite preview", + "test": "vitest run", + "format": "prettier --write .", + "lint": "eslint .", + "type-check": "tsc" + }, + "dependencies": { + "@reduxjs/toolkit": "^2.0.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-redux": "^9.0.4" + }, + "devDependencies": { + "@testing-library/dom": "^9.3.3", + "@testing-library/jest-dom": "^6.1.6", + "@testing-library/react": "^14.1.2", + "@testing-library/user-event": "^14.5.2", + "@types/react": "^18.2.46", + "@types/react-dom": "^18.2.18", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.56.0", + "eslint-config-react-app": "^7.0.1", + "eslint-plugin-prettier": "^5.1.2", + "jsdom": "^23.0.1", + "prettier": "^3.1.1", + "typescript": "^5.3.3", + "vite": "^5.0.10", + "vitest": "^1.1.1" + } +} diff --git a/examples/lazy-injection/counter-todo/src/App.css b/examples/lazy-injection/counter-todo/src/App.css new file mode 100644 index 0000000000..01cc586770 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/App.css @@ -0,0 +1,39 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-float infinite 3s ease-in-out; + } +} + +.App-header { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); +} + +.App-link { + color: rgb(112, 76, 182); +} + +@keyframes App-logo-float { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(10px); + } + 100% { + transform: translateY(0px); + } +} diff --git a/examples/lazy-injection/counter-todo/src/App.test.tsx b/examples/lazy-injection/counter-todo/src/App.test.tsx new file mode 100644 index 0000000000..08a916fa10 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/App.test.tsx @@ -0,0 +1,105 @@ +import { screen, waitFor } from "@testing-library/react" +import App from "./App" +import { renderWithProviders } from "./utils/test-utils" + +test("App should have correct initial render", () => { + renderWithProviders() + + // The app should be rendered correctly + expect(screen.getByText(/learn/i)).toBeInTheDocument() + + // Initial state: count should be 0, incrementValue should be 2 + expect(screen.getByTestId("count")).toHaveTextContent("0") + expect(screen.getByLabelText("Set increment amount")).toHaveValue(2) +}) + +test("Increment value and Decrement value should work as expected", async () => { + const { user } = renderWithProviders() + + // Click on "+" => Count should be 1 + await user.click(screen.getByLabelText("Increment value")) + expect(screen.getByTestId("count")).toHaveTextContent("1") + + // Click on "-" => Count should be 0 + await user.click(screen.getByLabelText("Decrement value")) + expect(screen.getByTestId("count")).toHaveTextContent("0") +}) + +test("Add Amount should work as expected", async () => { + const { user } = renderWithProviders() + + // "Add Amount" button is clicked => Count should be 2 + await user.click(screen.getByText("Add Amount")) + expect(screen.getByTestId("count")).toHaveTextContent("2") + + const incrementValueInput = screen.getByLabelText("Set increment amount") + // incrementValue is 2, click on "Add Amount" => Count should be 4 + await user.clear(incrementValueInput) + await user.type(incrementValueInput, "2") + await user.click(screen.getByText("Add Amount")) + expect(screen.getByTestId("count")).toHaveTextContent("4") + + // [Negative number] incrementValue is -1, click on "Add Amount" => Count should be 3 + await user.clear(incrementValueInput) + await user.type(incrementValueInput, "-1") + await user.click(screen.getByText("Add Amount")) + expect(screen.getByTestId("count")).toHaveTextContent("3") +}) + +it("Add Async should work as expected", async () => { + const { user } = renderWithProviders() + + // "Add Async" button is clicked => Count should be 2 + await user.click(screen.getByText("Add Async")) + + await waitFor(() => + expect(screen.getByTestId("count")).toHaveTextContent("2"), + ) + + const incrementValueInput = screen.getByLabelText("Set increment amount") + // incrementValue is 2, click on "Add Async" => Count should be 4 + await user.clear(incrementValueInput) + await user.type(incrementValueInput, "2") + + await user.click(screen.getByText("Add Async")) + await waitFor(() => + expect(screen.getByTestId("count")).toHaveTextContent("4"), + ) + + // [Negative number] incrementValue is -1, click on "Add Async" => Count should be 3 + await user.clear(incrementValueInput) + await user.type(incrementValueInput, "-1") + await user.click(screen.getByText("Add Async")) + await waitFor(() => + expect(screen.getByTestId("count")).toHaveTextContent("3"), + ) +}) + +test("Add If Odd should work as expected", async () => { + const { user } = renderWithProviders() + + // "Add If Odd" button is clicked => Count should stay 0 + await user.click(screen.getByText("Add If Odd")) + expect(screen.getByTestId("count")).toHaveTextContent("0") + + // Click on "+" => Count should be updated to 1 + await user.click(screen.getByLabelText("Increment value")) + expect(screen.getByTestId("count")).toHaveTextContent("1") + + // "Add If Odd" button is clicked => Count should be updated to 3 + await user.click(screen.getByText("Add If Odd")) + expect(screen.getByTestId("count")).toHaveTextContent("3") + + const incrementValueInput = screen.getByLabelText("Set increment amount") + // incrementValue is 1, click on "Add If Odd" => Count should be updated to 4 + await user.clear(incrementValueInput) + await user.type(incrementValueInput, "1") + await user.click(screen.getByText("Add If Odd")) + expect(screen.getByTestId("count")).toHaveTextContent("4") + + // click on "Add If Odd" => Count should stay 4 + await user.clear(incrementValueInput) + await user.type(incrementValueInput, "-1") + await user.click(screen.getByText("Add If Odd")) + expect(screen.getByTestId("count")).toHaveTextContent("4") +}) diff --git a/examples/lazy-injection/counter-todo/src/App.tsx b/examples/lazy-injection/counter-todo/src/App.tsx new file mode 100644 index 0000000000..08ec7554ed --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/App.tsx @@ -0,0 +1,68 @@ +import "./App.css" +import { Counter } from "./features/counter/Counter" +import { Quotes } from "./features/quotes/Quotes" +import logo from "./logo.svg" + +const App = () => { + return ( +
+
+ logo + +

+ Edit src/App.tsx and save to reload. +

+ + + Learn + + React + + , + + Redux + + , + + Redux Toolkit + + , + + React Redux + + , and + + Reselect + + +
+
+ ) +} + +export default App diff --git a/examples/lazy-injection/counter-todo/src/app/createAppSlice.ts b/examples/lazy-injection/counter-todo/src/app/createAppSlice.ts new file mode 100644 index 0000000000..061b6fa772 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/app/createAppSlice.ts @@ -0,0 +1,6 @@ +import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit"; + +// `buildCreateSlice` allows us to create a slice with async thunks. +export const createAppSlice = buildCreateSlice({ + creators: { asyncThunk: asyncThunkCreator }, +}) diff --git a/examples/lazy-injection/counter-todo/src/app/hooks.ts b/examples/lazy-injection/counter-todo/src/app/hooks.ts new file mode 100644 index 0000000000..e4aa4459eb --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/app/hooks.ts @@ -0,0 +1,7 @@ +import type { TypedUseSelectorHook } from "react-redux" +import { useDispatch, useSelector } from "react-redux" +import type { AppDispatch, RootState } from "./store" + +// Use throughout your app instead of plain `useDispatch` and `useSelector` +export const useAppDispatch: () => AppDispatch = useDispatch +export const useAppSelector: TypedUseSelectorHook = useSelector diff --git a/examples/lazy-injection/counter-todo/src/app/store.ts b/examples/lazy-injection/counter-todo/src/app/store.ts new file mode 100644 index 0000000000..992d89bd35 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/app/store.ts @@ -0,0 +1,40 @@ +import type { Action, ThunkAction } from "@reduxjs/toolkit" +import { combineSlices, configureStore } from "@reduxjs/toolkit" +import { setupListeners } from "@reduxjs/toolkit/query" +import { counterSlice } from "../features/counter/counterSlice" +import { quotesApiSlice } from "../features/quotes/quotesApiSlice" + +// `combineSlices` automatically combines the reducers using +// their `reducerPath`s, therefore we no longer need to call `combineReducers`. +const rootReducer = combineSlices(counterSlice, quotesApiSlice) +// Infer the `RootState` type from the root reducer +export type RootState = ReturnType + +export const makeStore = (preloadedState?: Partial) => { + const store = configureStore({ + reducer: rootReducer, + // Adding the api middleware enables caching, invalidation, polling, + // and other useful features of `rtk-query`. + middleware: getDefaultMiddleware => { + return getDefaultMiddleware().concat(quotesApiSlice.middleware) + }, + preloadedState, + }) + // configure listeners using the provided defaults + // optional, but required for `refetchOnFocus`/`refetchOnReconnect` behaviors + setupListeners(store.dispatch) + return store +} + +export const store = makeStore() + +// Infer the type of `store` +export type AppStore = typeof store +// Infer the `AppDispatch` type from the store itself +export type AppDispatch = AppStore["dispatch"] +export type AppThunk = ThunkAction< + ThunkReturnType, + RootState, + unknown, + Action +> diff --git a/examples/lazy-injection/counter-todo/src/features/counter/Counter.module.css b/examples/lazy-injection/counter-todo/src/features/counter/Counter.module.css new file mode 100644 index 0000000000..a0e619ddaa --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/counter/Counter.module.css @@ -0,0 +1,81 @@ +.row { + display: flex; + align-items: center; + justify-content: center; +} + +.row > button { + margin-left: 4px; + margin-right: 8px; +} + +.row:not(:last-child) { + margin-bottom: 16px; +} + +.value { + font-size: 78px; + padding-left: 16px; + padding-right: 16px; + margin-top: 2px; + font-family: "Courier New", Courier, monospace; +} + +.button { + appearance: none; + background: none; + font-size: 32px; + padding-left: 12px; + padding-right: 12px; + outline: none; + border: 2px solid transparent; + color: rgb(112, 76, 182); + padding-bottom: 4px; + cursor: pointer; + background-color: rgba(112, 76, 182, 0.1); + border-radius: 2px; + transition: all 0.15s; +} + +.textbox { + font-size: 32px; + padding: 2px; + width: 64px; + text-align: center; + margin-right: 4px; +} + +.button:hover, +.button:focus { + border: 2px solid rgba(112, 76, 182, 0.4); +} + +.button:active { + background-color: rgba(112, 76, 182, 0.2); +} + +.asyncButton { + composes: button; + position: relative; +} + +.asyncButton:after { + content: ""; + background-color: rgba(112, 76, 182, 0.15); + display: block; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + opacity: 0; + transition: + width 1s linear, + opacity 0.5s ease 1s; +} + +.asyncButton:active:after { + width: 0%; + opacity: 1; + transition: 0s; +} diff --git a/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx b/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx new file mode 100644 index 0000000000..7615ee89b5 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx @@ -0,0 +1,76 @@ +import { useState } from "react" + +import { useAppDispatch, useAppSelector } from "../../app/hooks" +import styles from "./Counter.module.css" +import { + decrement, + increment, + incrementAsync, + incrementByAmount, + incrementIfOdd, + selectCount, + selectStatus, +} from "./counterSlice" + +export const Counter = () => { + const dispatch = useAppDispatch() + const count = useAppSelector(selectCount) + const status = useAppSelector(selectStatus) + const [incrementAmount, setIncrementAmount] = useState("2") + + const incrementValue = Number(incrementAmount) || 0 + + return ( +
+
+ + {count} + +
+
+ { + setIncrementAmount(e.target.value) + }} + /> + + + +
+
+ ) +} diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterAPI.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterAPI.ts new file mode 100644 index 0000000000..aca3ef6031 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterAPI.ts @@ -0,0 +1,6 @@ +// A mock function to mimic making an async request for data +export const fetchCount = (amount = 1) => { + return new Promise<{ data: number }>(resolve => + setTimeout(() => resolve({ data: amount }), 500), + ) +} diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.test.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.test.ts new file mode 100644 index 0000000000..12eafe1ff1 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.test.ts @@ -0,0 +1,58 @@ +import type { AppStore } from "../../app/store" +import { makeStore } from "../../app/store" +import type { CounterSliceState } from "./counterSlice" +import { + counterSlice, + decrement, + increment, + incrementByAmount, + selectCount, +} from "./counterSlice" + +interface LocalTestContext { + store: AppStore +} + +describe("counter reducer", it => { + beforeEach(context => { + const initialState: CounterSliceState = { + value: 3, + status: "idle", + } + + const store = makeStore({ counter: initialState }) + + context.store = store + }) + + it("should handle initial state", () => { + expect(counterSlice.reducer(undefined, { type: "unknown" })).toStrictEqual({ + value: 0, + status: "idle", + }) + }) + + it("should handle increment", ({ store }) => { + expect(selectCount(store.getState())).toBe(3) + + store.dispatch(increment()) + + expect(selectCount(store.getState())).toBe(4) + }) + + it("should handle decrement", ({ store }) => { + expect(selectCount(store.getState())).toBe(3) + + store.dispatch(decrement()) + + expect(selectCount(store.getState())).toBe(2) + }) + + it("should handle incrementByAmount", ({ store }) => { + expect(selectCount(store.getState())).toBe(3) + + store.dispatch(incrementByAmount(2)) + + expect(selectCount(store.getState())).toBe(5) + }) +}) diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts new file mode 100644 index 0000000000..07bc1f5c3d --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts @@ -0,0 +1,89 @@ +import type { PayloadAction } from "@reduxjs/toolkit" +import { createAppSlice } from "../../app/createAppSlice" +import type { AppThunk } from "../../app/store" +import { fetchCount } from "./counterAPI" + +export interface CounterSliceState { + value: number + status: "idle" | "loading" | "failed" +} + +const initialState: CounterSliceState = { + value: 0, + status: "idle", +} + +// If you are not using async thunks you can use the standalone `createSlice`. +export const counterSlice = createAppSlice({ + name: "counter", + // `createSlice` will infer the state type from the `initialState` argument + initialState, + // The `reducers` field lets us define reducers and generate associated actions + reducers: create => ({ + increment: create.reducer(state => { + // Redux Toolkit allows us to write "mutating" logic in reducers. It + // doesn't actually mutate the state because it uses the Immer library, + // which detects changes to a "draft state" and produces a brand new + // immutable state based off those changes + state.value += 1 + }), + decrement: create.reducer(state => { + state.value -= 1 + }), + // Use the `PayloadAction` type to declare the contents of `action.payload` + incrementByAmount: create.reducer( + (state, action: PayloadAction) => { + state.value += action.payload + }, + ), + // The function below is called a thunk and allows us to perform async logic. It + // can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This + // will call the thunk with the `dispatch` function as the first argument. Async + // code can then be executed and other actions can be dispatched. Thunks are + // typically used to make async requests. + incrementAsync: create.asyncThunk( + async (amount: number) => { + const response = await fetchCount(amount) + // The value we return becomes the `fulfilled` action payload + return response.data + }, + { + pending: state => { + state.status = "loading" + }, + fulfilled: (state, action) => { + state.status = "idle" + state.value += action.payload + }, + rejected: state => { + state.status = "failed" + }, + }, + ), + }), + // You can define your selectors here. These selectors receive the slice + // state as their first argument. + selectors: { + selectCount: counter => counter.value, + selectStatus: counter => counter.status, + }, +}) + +// Action creators are generated for each case reducer function. +export const { decrement, increment, incrementByAmount, incrementAsync } = + counterSlice.actions + +// Selectors returned by `slice.selectors` take the root state as their first argument. +export const { selectCount, selectStatus } = counterSlice.selectors + +// We can also write thunks by hand, which may contain both sync and async logic. +// Here's an example of conditionally dispatching actions based on current state. +export const incrementIfOdd = + (amount: number): AppThunk => + (dispatch, getState) => { + const currentValue = selectCount(getState()) + + if (currentValue % 2 === 1 || currentValue % 2 === -1) { + dispatch(incrementByAmount(amount)) + } + } diff --git a/examples/lazy-injection/counter-todo/src/features/quotes/Quotes.module.css b/examples/lazy-injection/counter-todo/src/features/quotes/Quotes.module.css new file mode 100644 index 0000000000..1f85690ef2 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/quotes/Quotes.module.css @@ -0,0 +1,20 @@ +.select { + font-size: 25px; + padding: 5px; + padding-top: 2px; + padding-bottom: 2px; + size: 50; + outline: none; + border: 2px solid transparent; + color: rgb(112, 76, 182); + cursor: pointer; + background-color: rgba(112, 76, 182, 0.1); + border-radius: 5px; + transition: all 0.15s; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/examples/lazy-injection/counter-todo/src/features/quotes/Quotes.tsx b/examples/lazy-injection/counter-todo/src/features/quotes/Quotes.tsx new file mode 100644 index 0000000000..c490c4a787 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/quotes/Quotes.tsx @@ -0,0 +1,59 @@ +import { useState } from "react" +import styles from "./Quotes.module.css" +import { useGetQuotesQuery } from "./quotesApiSlice" + +const options = [5, 10, 20, 30] + +export const Quotes = () => { + const [numberOfQuotes, setNumberOfQuotes] = useState(10) + // Using a query hook automatically fetches data and returns query values + const { data, isError, isLoading, isSuccess } = + useGetQuotesQuery(numberOfQuotes) + + if (isError) { + return ( +
+

There was an error!!!

+
+ ) + } + + if (isLoading) { + return ( +
+

Loading...

+
+ ) + } + + if (isSuccess) { + return ( +
+

Select the Quantity of Quotes to Fetch:

+ + {data.quotes.map(({ author, quote, id }) => ( +
+ “{quote}” +
+ {author} +
+
+ ))} +
+ ) + } + + return null +} diff --git a/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts b/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts new file mode 100644 index 0000000000..a1c7b5a248 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts @@ -0,0 +1,38 @@ +// Need to use the React-specific entry point to import `createApi` +import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react" + +interface Quote { + id: number + quote: string + author: string +} + +interface QuotesApiResponse { + quotes: Quote[] + total: number + skip: number + limit: number +} + +// Define a service using a base URL and expected endpoints +export const quotesApiSlice = createApi({ + baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/quotes" }), + reducerPath: "quotesApi", + // Tag types are used for caching and invalidation. + tagTypes: ["Quotes"], + endpoints: build => ({ + // Supply generics for the return type (in this case `QuotesApiResponse`) + // and the expected query argument. If there is no argument, use `void` + // for the argument type instead. + getQuotes: build.query({ + query: (limit = 10) => `?limit=${limit}`, + // `providesTags` determines which 'tag' is attached to the + // cached data returned by the query. + providesTags: (result, error, id) => [{ type: "Quotes", id }], + }), + }), +}) + +// Hooks are auto-generated by RTK-Query +// Same as `quotesApiSlice.endpoints.getQuotes.useQuery` +export const { useGetQuotesQuery } = quotesApiSlice diff --git a/examples/lazy-injection/counter-todo/src/index.css b/examples/lazy-injection/counter-todo/src/index.css new file mode 100644 index 0000000000..4a1df4db71 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; +} diff --git a/examples/lazy-injection/counter-todo/src/logo.svg b/examples/lazy-injection/counter-todo/src/logo.svg new file mode 100644 index 0000000000..84667388ce --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/logo.svg @@ -0,0 +1 @@ + diff --git a/examples/lazy-injection/counter-todo/src/main.tsx b/examples/lazy-injection/counter-todo/src/main.tsx new file mode 100644 index 0000000000..45c0705532 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/main.tsx @@ -0,0 +1,24 @@ +import React from "react" +import { createRoot } from "react-dom/client" +import { Provider } from "react-redux" +import App from "./App" +import { store } from "./app/store" +import "./index.css" + +const container = document.getElementById("root") + +if (container) { + const root = createRoot(container) + + root.render( + + + + + , + ) +} else { + throw new Error( + "Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file.", + ) +} diff --git a/examples/lazy-injection/counter-todo/src/setupTests.ts b/examples/lazy-injection/counter-todo/src/setupTests.ts new file mode 100644 index 0000000000..b9e7622996 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/setupTests.ts @@ -0,0 +1 @@ +import "@testing-library/jest-dom/vitest" diff --git a/examples/lazy-injection/counter-todo/src/utils/test-utils.tsx b/examples/lazy-injection/counter-todo/src/utils/test-utils.tsx new file mode 100644 index 0000000000..90e184a1f3 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/utils/test-utils.tsx @@ -0,0 +1,65 @@ +import type { RenderOptions } from "@testing-library/react" +import { render } from "@testing-library/react" +import userEvent from "@testing-library/user-event" +import type { PropsWithChildren, ReactElement } from "react" +import { Provider } from "react-redux" +import type { AppStore, RootState } from "../app/store" +import { makeStore } from "../app/store" + +/** + * This type extends the default options for + * React Testing Library's render function. It allows for + * additional configuration such as specifying an initial Redux state and + * a custom store instance. + */ +interface ExtendedRenderOptions extends Omit { + /** + * Defines a specific portion or the entire initial state for the Redux store. + * This is particularly useful for initializing the state in a + * controlled manner during testing, allowing components to be rendered + * with predetermined state conditions. + */ + preloadedState?: Partial + + /** + * Allows the use of a specific Redux store instance instead of a + * default or global store. This flexibility is beneficial when + * testing components with unique store requirements or when isolating + * tests from a global store state. The custom store should be configured + * to match the structure and middleware of the store used by the application. + * + * @default makeStore(preloadedState) + */ + store?: AppStore +} + +/** + * Renders the given React element with Redux Provider and custom store. + * This function is useful for testing components that are connected to the Redux store. + * + * @param ui - The React component or element to render. + * @param extendedRenderOptions - Optional configuration options for rendering. This includes `preloadedState` for initial Redux state and `store` for a specific Redux store instance. Any additional properties are passed to React Testing Library's render function. + * @returns An object containing the Redux store used in the render, User event API for simulating user interactions in tests, and all of React Testing Library's query functions for testing the component. + */ +export const renderWithProviders = ( + ui: ReactElement, + extendedRenderOptions: ExtendedRenderOptions = {}, +) => { + const { + preloadedState = {}, + // Automatically create a store instance if no store was passed in + store = makeStore(preloadedState), + ...renderOptions + } = extendedRenderOptions + + const Wrapper = ({ children }: PropsWithChildren) => ( + {children} + ) + + // Return an object with the store and all of RTL's query functions + return { + store, + user: userEvent.setup(), + ...render(ui, { wrapper: Wrapper, ...renderOptions }), + } +} diff --git a/examples/lazy-injection/counter-todo/src/vite-env.d.ts b/examples/lazy-injection/counter-todo/src/vite-env.d.ts new file mode 100644 index 0000000000..11f02fe2a0 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/lazy-injection/counter-todo/tsconfig.json b/examples/lazy-injection/counter-todo/tsconfig.json new file mode 100644 index 0000000000..d471699560 --- /dev/null +++ b/examples/lazy-injection/counter-todo/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "module": "ESNext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "types": ["vitest/globals"] + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/lazy-injection/counter-todo/tsconfig.node.json b/examples/lazy-injection/counter-todo/tsconfig.node.json new file mode 100644 index 0000000000..a535f7d4d2 --- /dev/null +++ b/examples/lazy-injection/counter-todo/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/lazy-injection/counter-todo/vite.config.ts b/examples/lazy-injection/counter-todo/vite.config.ts new file mode 100644 index 0000000000..39a5632b23 --- /dev/null +++ b/examples/lazy-injection/counter-todo/vite.config.ts @@ -0,0 +1,16 @@ +import { defineConfig } from "vitest/config" +import react from "@vitejs/plugin-react" + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], + server: { + open: true, + }, + test: { + globals: true, + environment: "jsdom", + setupFiles: "src/setupTests", + mockReset: true, + }, +}) diff --git a/package.json b/package.json index 4022306807..11fe58ff7e 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "docs", "website", "examples/query/react/*", - "examples/action-listener/*" + "examples/action-listener/*", + "examples/lazy-injection/*" ], "devDependencies": { "eslint": "^7.25.0", diff --git a/yarn.lock b/yarn.lock index 3ea896b4e8..d531a0a0e7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5,6 +5,20 @@ __metadata: version: 6 cacheKey: 8 +"@aashutoshrathi/word-wrap@npm:^1.2.3": + version: 1.2.6 + resolution: "@aashutoshrathi/word-wrap@npm:1.2.6" + checksum: ada901b9e7c680d190f1d012c84217ce0063d8f5c5a7725bb91ec3c5ed99bb7572680eb2d2938a531ccbaec39a95422fcd8a6b4a13110c7d98dd75402f66a0cd + languageName: node + linkType: hard + +"@adobe/css-tools@npm:^4.3.2": + version: 4.3.2 + resolution: "@adobe/css-tools@npm:4.3.2" + checksum: 9667d61d55dc3b0a315c530ae84e016ce5267c4dd8ac00abb40108dc98e07b98e3090ce8b87acd51a41a68d9e84dcccb08cdf21c902572a9cf9dcaf830da4ae3 + languageName: node + linkType: hard + "@algolia/autocomplete-core@npm:1.7.1": version: 1.7.1 resolution: "@algolia/autocomplete-core@npm:1.7.1" @@ -293,6 +307,17 @@ __metadata: languageName: node linkType: hard +"@asamuzakjp/dom-selector@npm:^2.0.1": + version: 2.0.1 + resolution: "@asamuzakjp/dom-selector@npm:2.0.1" + dependencies: + bidi-js: ^1.0.3 + css-tree: ^2.3.1 + is-potential-custom-element-name: ^1.0.1 + checksum: 51cd07fa0066b849896378af5d5839f8414dec1c0ff5d1e929542a6cbe7bd5608d9d9524d38eba7ef0caf4c970c4dfe826deac7bef2e8b9fa1a0b9e09446bb4d + languageName: node + linkType: hard + "@babel/code-frame@npm:7.18.6": version: 7.18.6 resolution: "@babel/code-frame@npm:7.18.6" @@ -583,6 +608,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-plugin-utils@npm:^7.22.5": + version: 7.22.5 + resolution: "@babel/helper-plugin-utils@npm:7.22.5" + checksum: c0fc7227076b6041acd2f0e818145d2e8c41968cc52fb5ca70eed48e21b8fe6dd88a0a91cbddf4951e33647336eb5ae184747ca706817ca3bef5e9e905151ff5 + languageName: node + linkType: hard + "@babel/helper-remap-async-to-generator@npm:^7.16.8": version: 7.16.8 resolution: "@babel/helper-remap-async-to-generator@npm:7.16.8" @@ -746,6 +778,15 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.20.7": + version: 7.23.6 + resolution: "@babel/parser@npm:7.23.6" + bin: + parser: ./bin/babel-parser.js + checksum: 140801c43731a6c41fd193f5c02bc71fd647a0360ca616b23d2db8be4b9739b9f951a03fc7c2db4f9b9214f4b27c1074db0f18bc3fa653783082d5af7c8860d5 + languageName: node + linkType: hard + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.17.12": version: 7.17.12 resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.17.12" @@ -2049,6 +2090,28 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx-self@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-transform-react-jsx-self@npm:7.23.3" + dependencies: + "@babel/helper-plugin-utils": ^7.22.5 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 882bf56bc932d015c2d83214133939ddcf342e5bcafa21f1a93b19f2e052145115e1e0351730897fd66e5f67cad7875b8a8d81ceb12b6e2a886ad0102cb4eb1f + languageName: node + linkType: hard + +"@babel/plugin-transform-react-jsx-source@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-transform-react-jsx-source@npm:7.23.3" + dependencies: + "@babel/helper-plugin-utils": ^7.22.5 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 92287fb797e522d99bdc77eaa573ce79ff0ad9f1cf4e7df374645e28e51dce0adad129f6f075430b129b5bac8dad843f65021970e12e992d6d6671f0d65bb1e0 + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.12.11, @babel/plugin-transform-react-jsx@npm:^7.16.7, @babel/plugin-transform-react-jsx@npm:^7.17.12": version: 7.17.12 resolution: "@babel/plugin-transform-react-jsx@npm:7.17.12" @@ -4730,7 +4793,7 @@ __metadata: languageName: node linkType: hard -"@eslint-community/eslint-utils@npm:^4.4.0": +"@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0": version: 4.4.0 resolution: "@eslint-community/eslint-utils@npm:4.4.0" dependencies: @@ -4741,7 +4804,7 @@ __metadata: languageName: node linkType: hard -"@eslint-community/regexpp@npm:^4.5.1": +"@eslint-community/regexpp@npm:^4.5.1, @eslint-community/regexpp@npm:^4.6.1": version: 4.10.0 resolution: "@eslint-community/regexpp@npm:4.10.0" checksum: 2a6e345429ea8382aaaf3a61f865cae16ed44d31ca917910033c02dc00d505d939f10b81e079fa14d43b51499c640138e153b7e40743c4c094d9df97d4e56f7b @@ -4782,6 +4845,30 @@ __metadata: languageName: node linkType: hard +"@eslint/eslintrc@npm:^2.1.4": + version: 2.1.4 + resolution: "@eslint/eslintrc@npm:2.1.4" + dependencies: + ajv: ^6.12.4 + debug: ^4.3.2 + espree: ^9.6.0 + globals: ^13.19.0 + ignore: ^5.2.0 + import-fresh: ^3.2.1 + js-yaml: ^4.1.0 + minimatch: ^3.1.2 + strip-json-comments: ^3.1.1 + checksum: 10957c7592b20ca0089262d8c2a8accbad14b4f6507e35416c32ee6b4dbf9cad67dfb77096bbd405405e9ada2b107f3797fe94362e1c55e0b09d6e90dd149127 + languageName: node + linkType: hard + +"@eslint/js@npm:8.56.0": + version: 8.56.0 + resolution: "@eslint/js@npm:8.56.0" + checksum: 5804130574ef810207bdf321c265437814e7a26f4e6fac9b496de3206afd52f533e09ec002a3be06cd9adcc9da63e727f1883938e663c4e4751c007d5b58e539 + languageName: node + linkType: hard + "@examples-action-listener/counter@workspace:examples/action-listener/counter": version: 0.0.0-use.local resolution: "@examples-action-listener/counter@workspace:examples/action-listener/counter" @@ -4800,6 +4887,32 @@ __metadata: languageName: unknown linkType: soft +"@examples-lazy-injection/counter-todo@workspace:examples/lazy-injection/counter-todo": + version: 0.0.0-use.local + resolution: "@examples-lazy-injection/counter-todo@workspace:examples/lazy-injection/counter-todo" + dependencies: + "@reduxjs/toolkit": ^2.0.1 + "@testing-library/dom": ^9.3.3 + "@testing-library/jest-dom": ^6.1.6 + "@testing-library/react": ^14.1.2 + "@testing-library/user-event": ^14.5.2 + "@types/react": ^18.2.46 + "@types/react-dom": ^18.2.18 + "@vitejs/plugin-react": ^4.2.1 + eslint: ^8.56.0 + eslint-config-react-app: ^7.0.1 + eslint-plugin-prettier: ^5.1.2 + jsdom: ^23.0.1 + prettier: ^3.1.1 + react: ^18.2.0 + react-dom: ^18.2.0 + react-redux: ^9.0.4 + typescript: ^5.3.3 + vite: ^5.0.10 + vitest: ^1.1.1 + languageName: unknown + linkType: soft + "@examples-query-react/advanced@workspace:examples/query/react/advanced": version: 0.0.0-use.local resolution: "@examples-query-react/advanced@workspace:examples/query/react/advanced" @@ -5845,6 +5958,17 @@ __metadata: languageName: node linkType: hard +"@humanwhocodes/config-array@npm:^0.11.13": + version: 0.11.14 + resolution: "@humanwhocodes/config-array@npm:0.11.14" + dependencies: + "@humanwhocodes/object-schema": ^2.0.2 + debug: ^4.3.1 + minimatch: ^3.0.5 + checksum: 861ccce9eaea5de19546653bccf75bf09fe878bc39c3aab00aeee2d2a0e654516adad38dd1098aab5e3af0145bbcbf3f309bdf4d964f8dab9dcd5834ae4c02f2 + languageName: node + linkType: hard + "@humanwhocodes/config-array@npm:^0.9.2": version: 0.9.5 resolution: "@humanwhocodes/config-array@npm:0.9.5" @@ -5856,6 +5980,13 @@ __metadata: languageName: node linkType: hard +"@humanwhocodes/module-importer@npm:^1.0.1": + version: 1.0.1 + resolution: "@humanwhocodes/module-importer@npm:1.0.1" + checksum: 0fd22007db8034a2cdf2c764b140d37d9020bbfce8a49d3ec5c05290e77d4b0263b1b972b752df8c89e5eaa94073408f2b7d977aed131faf6cf396ebb5d7fb61 + languageName: node + linkType: hard + "@humanwhocodes/object-schema@npm:^1.2.1": version: 1.2.1 resolution: "@humanwhocodes/object-schema@npm:1.2.1" @@ -5863,6 +5994,13 @@ __metadata: languageName: node linkType: hard +"@humanwhocodes/object-schema@npm:^2.0.2": + version: 2.0.2 + resolution: "@humanwhocodes/object-schema@npm:2.0.2" + checksum: 2fc11503361b5fb4f14714c700c02a3f4c7c93e9acd6b87a29f62c522d90470f364d6161b03d1cc618b979f2ae02aed1106fd29d302695d8927e2fc8165ba8ee + languageName: node + linkType: hard + "@iarna/toml@npm:2.2.5, @iarna/toml@npm:^2.2.5": version: 2.2.5 resolution: "@iarna/toml@npm:2.2.5" @@ -6733,6 +6871,16 @@ __metadata: languageName: node linkType: hard +"@nodelib/fs.walk@npm:^1.2.8": + version: 1.2.8 + resolution: "@nodelib/fs.walk@npm:1.2.8" + dependencies: + "@nodelib/fs.scandir": 2.1.5 + fastq: ^1.6.0 + checksum: 190c643f156d8f8f277bf2a6078af1ffde1fd43f498f187c2db24d35b4b4b5785c02c7dc52e356497b9a1b65b13edc996de08de0b961c32844364da02986dc53 + languageName: node + linkType: hard + "@npmcli/move-file@npm:^1.0.1": version: 1.1.2 resolution: "@npmcli/move-file@npm:1.1.2" @@ -6888,6 +7036,13 @@ __metadata: languageName: node linkType: hard +"@pkgr/core@npm:^0.1.0": + version: 0.1.0 + resolution: "@pkgr/core@npm:0.1.0" + checksum: eeff0e0e517b1ed10eb4c1a8971413a8349bbfdab727dbe7d4085fd94eab95f0c3beb51b9245fef30562849d2a7a119e07ca48c343c8c4ec4e64ee289f50fe5e + languageName: node + linkType: hard + "@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.3": version: 0.5.7 resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.7" @@ -7013,7 +7168,7 @@ __metadata: languageName: unknown linkType: soft -"@reduxjs/toolkit@^1.6.0 || ^2.0.0, @reduxjs/toolkit@workspace:packages/toolkit": +"@reduxjs/toolkit@^1.6.0 || ^2.0.0, @reduxjs/toolkit@^2.0.1, @reduxjs/toolkit@workspace:packages/toolkit": version: 0.0.0-use.local resolution: "@reduxjs/toolkit@workspace:packages/toolkit" dependencies: @@ -7906,6 +8061,22 @@ __metadata: languageName: node linkType: hard +"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.3": + version: 9.3.4 + resolution: "@testing-library/dom@npm:9.3.4" + dependencies: + "@babel/code-frame": ^7.10.4 + "@babel/runtime": ^7.12.5 + "@types/aria-query": ^5.0.1 + aria-query: 5.1.3 + chalk: ^4.1.0 + dom-accessibility-api: ^0.5.9 + lz-string: ^1.5.0 + pretty-format: ^27.0.2 + checksum: dfd6fb0d6c7b4dd716ba3c47309bc9541b4a55772cb61758b4f396b3785efe2dbc75dc63423545c039078c7ffcc5e4b8c67c2db1b6af4799580466036f70026f + languageName: node + linkType: hard + "@testing-library/jest-dom@npm:^5.11.5": version: 5.16.4 resolution: "@testing-library/jest-dom@npm:5.16.4" @@ -7923,6 +8094,36 @@ __metadata: languageName: node linkType: hard +"@testing-library/jest-dom@npm:^6.1.6": + version: 6.2.0 + resolution: "@testing-library/jest-dom@npm:6.2.0" + dependencies: + "@adobe/css-tools": ^4.3.2 + "@babel/runtime": ^7.9.2 + aria-query: ^5.0.0 + chalk: ^3.0.0 + css.escape: ^1.5.1 + dom-accessibility-api: ^0.6.3 + lodash: ^4.17.15 + redent: ^3.0.0 + peerDependencies: + "@jest/globals": ">= 28" + "@types/jest": ">= 28" + jest: ">= 28" + vitest: ">= 0.32" + peerDependenciesMeta: + "@jest/globals": + optional: true + "@types/jest": + optional: true + jest: + optional: true + vitest: + optional: true + checksum: 3d46e36b1b7c2cb3c92f64d55d458aab44ae135ac77299df14d14dcf567a286590de58b2f140011b8f7a343f0703ff88f144f27c6ae4921fd612741771d8ee2c + languageName: node + linkType: hard + "@testing-library/react@npm:^13.3.0": version: 13.3.0 resolution: "@testing-library/react@npm:13.3.0" @@ -7937,6 +8138,20 @@ __metadata: languageName: node linkType: hard +"@testing-library/react@npm:^14.1.2": + version: 14.1.2 + resolution: "@testing-library/react@npm:14.1.2" + dependencies: + "@babel/runtime": ^7.12.5 + "@testing-library/dom": ^9.0.0 + "@types/react-dom": ^18.0.0 + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + checksum: 0269903e53412cf96fddb55c8a97a9987a89c3308d71fa1418fe61c47d275445e7044c5387f57cf39b8cda319a41623dbad2cce7a17016aed3a9e85185aac75a + languageName: node + linkType: hard + "@testing-library/user-event@npm:^13.1.5": version: 13.5.0 resolution: "@testing-library/user-event@npm:13.5.0" @@ -7948,6 +8163,15 @@ __metadata: languageName: node linkType: hard +"@testing-library/user-event@npm:^14.5.2": + version: 14.5.2 + resolution: "@testing-library/user-event@npm:14.5.2" + peerDependencies: + "@testing-library/dom": ">=7.21.4" + checksum: d76937dffcf0082fbf3bb89eb2b81a31bf5448048dd61c33928c5f10e33a58e035321d39145cefd469bb5a499c68a5b4086b22f1a44e3e7c7e817dc5f6782867 + languageName: node + linkType: hard + "@tootallnate/once@npm:1": version: 1.1.2 resolution: "@tootallnate/once@npm:1.1.2" @@ -8011,6 +8235,13 @@ __metadata: languageName: node linkType: hard +"@types/aria-query@npm:^5.0.1": + version: 5.0.4 + resolution: "@types/aria-query@npm:5.0.4" + checksum: ad8b87e4ad64255db5f0a73bc2b4da9b146c38a3a8ab4d9306154334e0fc67ae64e76bfa298eebd1e71830591fb15987e5de7111bdb36a2221bdc379e3415fb0 + languageName: node + linkType: hard + "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.7": version: 7.1.19 resolution: "@types/babel__core@npm:7.1.19" @@ -8024,6 +8255,19 @@ __metadata: languageName: node linkType: hard +"@types/babel__core@npm:^7.20.5": + version: 7.20.5 + resolution: "@types/babel__core@npm:7.20.5" + dependencies: + "@babel/parser": ^7.20.7 + "@babel/types": ^7.20.7 + "@types/babel__generator": "*" + "@types/babel__template": "*" + "@types/babel__traverse": "*" + checksum: a3226f7930b635ee7a5e72c8d51a357e799d19cbf9d445710fa39ab13804f79ab1a54b72ea7d8e504659c7dfc50675db974b526142c754398d7413aa4bc30845 + languageName: node + linkType: hard + "@types/babel__generator@npm:*": version: 7.6.2 resolution: "@types/babel__generator@npm:7.6.2" @@ -9036,6 +9280,28 @@ __metadata: languageName: node linkType: hard +"@ungap/structured-clone@npm:^1.2.0": + version: 1.2.0 + resolution: "@ungap/structured-clone@npm:1.2.0" + checksum: 4f656b7b4672f2ce6e272f2427d8b0824ed11546a601d8d5412b9d7704e83db38a8d9f402ecdf2b9063fc164af842ad0ec4a55819f621ed7e7ea4d1efcc74524 + languageName: node + linkType: hard + +"@vitejs/plugin-react@npm:^4.2.1": + version: 4.2.1 + resolution: "@vitejs/plugin-react@npm:4.2.1" + dependencies: + "@babel/core": ^7.23.5 + "@babel/plugin-transform-react-jsx-self": ^7.23.3 + "@babel/plugin-transform-react-jsx-source": ^7.23.3 + "@types/babel__core": ^7.20.5 + react-refresh: ^0.14.0 + peerDependencies: + vite: ^4.2.0 || ^5.0.0 + checksum: 08d227d27ff2304e395e746bd2d4b5fee40587f69d7e2fcd6beb7d91163c1f1dc26d843bc48e2ffb8f38c6b8a1b9445fb07840e3dcc841f97b56bbb8205346aa + languageName: node + linkType: hard + "@vitest/expect@npm:0.30.1": version: 0.30.1 resolution: "@vitest/expect@npm:0.30.1" @@ -9650,7 +9916,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.10.0": +"acorn@npm:^8.10.0, acorn@npm:^8.9.0": version: 8.11.3 resolution: "acorn@npm:8.11.3" bin: @@ -9694,6 +9960,15 @@ __metadata: languageName: node linkType: hard +"agent-base@npm:^7.0.2, agent-base@npm:^7.1.0": + version: 7.1.0 + resolution: "agent-base@npm:7.1.0" + dependencies: + debug: ^4.3.4 + checksum: f7828f991470a0cc22cb579c86a18cbae83d8a3cbed39992ab34fc7217c4d126017f1c74d0ab66be87f71455318a8ea3e757d6a37881b8d0f2a2c6aa55e5418f + languageName: node + linkType: hard + "agentkeepalive@npm:^4.1.3": version: 4.1.4 resolution: "agentkeepalive@npm:4.1.4" @@ -10055,6 +10330,15 @@ __metadata: languageName: node linkType: hard +"aria-query@npm:5.1.3": + version: 5.1.3 + resolution: "aria-query@npm:5.1.3" + dependencies: + deep-equal: ^2.0.5 + checksum: 929ff95f02857b650fb4cbcd2f41072eee2f46159a6605ea03bf63aa572e35ffdff43d69e815ddc462e16e07de8faba3978afc2813650b4448ee18c9895d982b + languageName: node + linkType: hard + "aria-query@npm:^4.2.2": version: 4.2.2 resolution: "aria-query@npm:4.2.2" @@ -10093,6 +10377,16 @@ __metadata: languageName: node linkType: hard +"array-buffer-byte-length@npm:^1.0.0": + version: 1.0.0 + resolution: "array-buffer-byte-length@npm:1.0.0" + dependencies: + call-bind: ^1.0.2 + is-array-buffer: ^3.0.1 + checksum: 044e101ce150f4804ad19c51d6c4d4cfa505c5b2577bd179256e4aa3f3f6a0a5e9874c78cd428ee566ac574c8a04d7ce21af9fe52e844abfdccb82b33035a7c3 + languageName: node + linkType: hard + "array-differ@npm:^3.0.0": version: 3.0.0 resolution: "array-differ@npm:3.0.0" @@ -10344,6 +10638,13 @@ __metadata: languageName: node linkType: hard +"available-typed-arrays@npm:^1.0.5": + version: 1.0.5 + resolution: "available-typed-arrays@npm:1.0.5" + checksum: 20eb47b3cefd7db027b9bbb993c658abd36d4edd3fe1060e83699a03ee275b0c9b216cc076ff3f2db29073225fb70e7613987af14269ac1fe2a19803ccc97f1a + languageName: node + linkType: hard + "axe-core@npm:^4.3.5": version: 4.4.2 resolution: "axe-core@npm:4.4.2" @@ -10871,6 +11172,15 @@ __metadata: languageName: node linkType: hard +"bidi-js@npm:^1.0.3": + version: 1.0.3 + resolution: "bidi-js@npm:1.0.3" + dependencies: + require-from-string: ^2.0.2 + checksum: 877c5dcfd69a35fd30fee9e49a03faf205a7a4cd04a38af7648974a659cab7b1cd51fa881d7957c07bd1fc5adf22b90a56da3617bb0885ee69d58ff41117658c + languageName: node + linkType: hard + "big.js@npm:^5.2.2": version: 5.2.2 resolution: "big.js@npm:5.2.2" @@ -11417,6 +11727,17 @@ __metadata: languageName: node linkType: hard +"call-bind@npm:^1.0.4, call-bind@npm:^1.0.5": + version: 1.0.5 + resolution: "call-bind@npm:1.0.5" + dependencies: + function-bind: ^1.1.2 + get-intrinsic: ^1.2.1 + set-function-length: ^1.1.1 + checksum: 449e83ecbd4ba48e7eaac5af26fea3b50f8f6072202c2dd7c5a6e7a6308f2421abe5e13a3bbd55221087f76320c5e09f25a8fdad1bab2b77c68ae74d92234ea5 + languageName: node + linkType: hard + "call-me-maybe@npm:^1.0.1": version: 1.0.1 resolution: "call-me-maybe@npm:1.0.1" @@ -13167,6 +13488,16 @@ __metadata: languageName: node linkType: hard +"css-tree@npm:^2.3.1": + version: 2.3.1 + resolution: "css-tree@npm:2.3.1" + dependencies: + mdn-data: 2.0.30 + source-map-js: ^1.0.1 + checksum: 493cc24b5c22b05ee5314b8a0d72d8a5869491c1458017ae5ed75aeb6c3596637dbe1b11dac2548974624adec9f7a1f3a6cf40593dc1f9185eb0e8279543fbc0 + languageName: node + linkType: hard + "css-what@npm:^3.2.1": version: 3.4.2 resolution: "css-what@npm:3.4.2" @@ -13431,6 +13762,15 @@ __metadata: languageName: node linkType: hard +"cssstyle@npm:^4.0.1": + version: 4.0.1 + resolution: "cssstyle@npm:4.0.1" + dependencies: + rrweb-cssom: ^0.6.0 + checksum: 4b2fdd81c565b1f8f24a792f85d3a19269a2f201e731c3fe3531d7fc78b4bc6b31906ed17aba7edba7b1c8b7672574fc6c09fe925556da3a9a9458dbf8c4fa22 + languageName: node + linkType: hard + "csstype@npm:3.0.3": version: 3.0.3 resolution: "csstype@npm:3.0.3" @@ -13481,6 +13821,16 @@ __metadata: languageName: node linkType: hard +"data-urls@npm:^5.0.0": + version: 5.0.0 + resolution: "data-urls@npm:5.0.0" + dependencies: + whatwg-mimetype: ^4.0.0 + whatwg-url: ^14.0.0 + checksum: 5c40568c31b02641a70204ff233bc4e42d33717485d074244a98661e5f2a1e80e38fe05a5755dfaf2ee549f2ab509d6a3af2a85f4b2ad2c984e5d176695eaf46 + languageName: node + linkType: hard + "dataloader@npm:2.0.0": version: 2.0.0 resolution: "dataloader@npm:2.0.0" @@ -13583,7 +13933,7 @@ __metadata: languageName: node linkType: hard -"decimal.js@npm:^10.4.2": +"decimal.js@npm:^10.4.2, decimal.js@npm:^10.4.3": version: 10.4.3 resolution: "decimal.js@npm:10.4.3" checksum: 796404dcfa9d1dbfdc48870229d57f788b48c21c603c3f6554a1c17c10195fc1024de338b0cf9e1efe0c7c167eeb18f04548979bcc5fdfabebb7cc0ae3287bae @@ -13631,6 +13981,32 @@ __metadata: languageName: node linkType: hard +"deep-equal@npm:^2.0.5": + version: 2.2.3 + resolution: "deep-equal@npm:2.2.3" + dependencies: + array-buffer-byte-length: ^1.0.0 + call-bind: ^1.0.5 + es-get-iterator: ^1.1.3 + get-intrinsic: ^1.2.2 + is-arguments: ^1.1.1 + is-array-buffer: ^3.0.2 + is-date-object: ^1.0.5 + is-regex: ^1.1.4 + is-shared-array-buffer: ^1.0.2 + isarray: ^2.0.5 + object-is: ^1.1.5 + object-keys: ^1.1.1 + object.assign: ^4.1.4 + regexp.prototype.flags: ^1.5.1 + side-channel: ^1.0.4 + which-boxed-primitive: ^1.0.2 + which-collection: ^1.0.1 + which-typed-array: ^1.1.13 + checksum: ee8852f23e4d20a5626c13b02f415ba443a1b30b4b3d39eaf366d59c4a85e6545d7ec917db44d476a85ae5a86064f7e5f7af7479f38f113995ba869f3a1ddc53 + languageName: node + linkType: hard + "deep-extend@npm:^0.6.0": version: 0.6.0 resolution: "deep-extend@npm:0.6.0" @@ -13691,6 +14067,17 @@ __metadata: languageName: node linkType: hard +"define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.1": + version: 1.1.1 + resolution: "define-data-property@npm:1.1.1" + dependencies: + get-intrinsic: ^1.2.1 + gopd: ^1.0.1 + has-property-descriptors: ^1.0.0 + checksum: a29855ad3f0630ea82e3c5012c812efa6ca3078d5c2aa8df06b5f597c1cde6f7254692df41945851d903e05a1668607b6d34e778f402b9ff9ffb38111f1a3f0d + languageName: node + linkType: hard + "define-lazy-prop@npm:^2.0.0": version: 2.0.0 resolution: "define-lazy-prop@npm:2.0.0" @@ -13708,6 +14095,17 @@ __metadata: languageName: node linkType: hard +"define-properties@npm:^1.2.0, define-properties@npm:^1.2.1": + version: 1.2.1 + resolution: "define-properties@npm:1.2.1" + dependencies: + define-data-property: ^1.0.1 + has-property-descriptors: ^1.0.0 + object-keys: ^1.1.1 + checksum: b4ccd00597dd46cb2d4a379398f5b19fca84a16f3374e2249201992f36b30f6835949a9429669ee6b41b6e837205a163eadd745e472069e70dfc10f03e5fcc12 + languageName: node + linkType: hard + "define-property@npm:^0.2.5": version: 0.2.5 resolution: "define-property@npm:0.2.5" @@ -14030,6 +14428,13 @@ __metadata: languageName: node linkType: hard +"dom-accessibility-api@npm:^0.6.3": + version: 0.6.3 + resolution: "dom-accessibility-api@npm:0.6.3" + checksum: c325b5144bb406df23f4affecffc117dbaec9af03daad9ee6b510c5be647b14d28ef0a4ea5ca06d696d8ab40bb777e5fed98b985976fdef9d8790178fa1d573f + languageName: node + linkType: hard + "dom-converter@npm:^0.2.0": version: 0.2.0 resolution: "dom-converter@npm:0.2.0" @@ -14550,6 +14955,23 @@ __metadata: languageName: node linkType: hard +"es-get-iterator@npm:^1.1.3": + version: 1.1.3 + resolution: "es-get-iterator@npm:1.1.3" + dependencies: + call-bind: ^1.0.2 + get-intrinsic: ^1.1.3 + has-symbols: ^1.0.3 + is-arguments: ^1.1.1 + is-map: ^2.0.2 + is-set: ^2.0.2 + is-string: ^1.0.7 + isarray: ^2.0.5 + stop-iteration-iterator: ^1.0.0 + checksum: 8fa118da42667a01a7c7529f8a8cca514feeff243feec1ce0bb73baaa3514560bd09d2b3438873cf8a5aaec5d52da248131de153b28e2638a061b6e4df13267d + languageName: node + linkType: hard + "es-module-lexer@npm:^0.9.0": version: 0.9.3 resolution: "es-module-lexer@npm:0.9.3" @@ -14936,6 +15358,26 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-prettier@npm:^5.1.2": + version: 5.1.3 + resolution: "eslint-plugin-prettier@npm:5.1.3" + dependencies: + prettier-linter-helpers: ^1.0.0 + synckit: ^0.8.6 + peerDependencies: + "@types/eslint": ">=8.0.0" + eslint: ">=8.0.0" + eslint-config-prettier: "*" + prettier: ">=3.0.0" + peerDependenciesMeta: + "@types/eslint": + optional: true + eslint-config-prettier: + optional: true + checksum: eb2a7d46a1887e1b93788ee8f8eb81e0b6b2a6f5a66a62bc6f375b033fc4e7ca16448da99380be800042786e76cf5c0df9c87a51a2c9b960ed47acbd7c0b9381 + languageName: node + linkType: hard + "eslint-plugin-react-hooks@npm:^4.2.0, eslint-plugin-react-hooks@npm:^4.3.0": version: 4.5.0 resolution: "eslint-plugin-react-hooks@npm:4.5.0" @@ -15010,6 +15452,16 @@ __metadata: languageName: node linkType: hard +"eslint-scope@npm:^7.2.2": + version: 7.2.2 + resolution: "eslint-scope@npm:7.2.2" + dependencies: + esrecurse: ^4.3.0 + estraverse: ^5.2.0 + checksum: ec97dbf5fb04b94e8f4c5a91a7f0a6dd3c55e46bfc7bbcd0e3138c3a76977570e02ed89a1810c778dcd72072ff0e9621ba1379b4babe53921d71e2e4486fda3e + languageName: node + linkType: hard + "eslint-utils@npm:^2.0.0, eslint-utils@npm:^2.1.0": version: 2.1.0 resolution: "eslint-utils@npm:2.1.0" @@ -15051,7 +15503,7 @@ __metadata: languageName: node linkType: hard -"eslint-visitor-keys@npm:^3.4.1": +"eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3": version: 3.4.3 resolution: "eslint-visitor-keys@npm:3.4.3" checksum: 36e9ef87fca698b6fd7ca5ca35d7b2b6eeaaf106572e2f7fd31c12d3bfdaccdb587bba6d3621067e5aece31c8c3a348b93922ab8f7b2cbc6aaab5e1d89040c60 @@ -15168,6 +15620,54 @@ __metadata: languageName: node linkType: hard +"eslint@npm:^8.56.0": + version: 8.56.0 + resolution: "eslint@npm:8.56.0" + dependencies: + "@eslint-community/eslint-utils": ^4.2.0 + "@eslint-community/regexpp": ^4.6.1 + "@eslint/eslintrc": ^2.1.4 + "@eslint/js": 8.56.0 + "@humanwhocodes/config-array": ^0.11.13 + "@humanwhocodes/module-importer": ^1.0.1 + "@nodelib/fs.walk": ^1.2.8 + "@ungap/structured-clone": ^1.2.0 + ajv: ^6.12.4 + chalk: ^4.0.0 + cross-spawn: ^7.0.2 + debug: ^4.3.2 + doctrine: ^3.0.0 + escape-string-regexp: ^4.0.0 + eslint-scope: ^7.2.2 + eslint-visitor-keys: ^3.4.3 + espree: ^9.6.1 + esquery: ^1.4.2 + esutils: ^2.0.2 + fast-deep-equal: ^3.1.3 + file-entry-cache: ^6.0.1 + find-up: ^5.0.0 + glob-parent: ^6.0.2 + globals: ^13.19.0 + graphemer: ^1.4.0 + ignore: ^5.2.0 + imurmurhash: ^0.1.4 + is-glob: ^4.0.0 + is-path-inside: ^3.0.3 + js-yaml: ^4.1.0 + json-stable-stringify-without-jsonify: ^1.0.1 + levn: ^0.4.1 + lodash.merge: ^4.6.2 + minimatch: ^3.1.2 + natural-compare: ^1.4.0 + optionator: ^0.9.3 + strip-ansi: ^6.0.1 + text-table: ^0.2.0 + bin: + eslint: bin/eslint.js + checksum: 883436d1e809b4a25d9eb03d42f584b84c408dbac28b0019f6ea07b5177940bf3cca86208f749a6a1e0039b63e085ee47aca1236c30721e91f0deef5cc5a5136 + languageName: node + linkType: hard + "espree@npm:^7.3.0, espree@npm:^7.3.1": version: 7.3.1 resolution: "espree@npm:7.3.1" @@ -15190,6 +15690,17 @@ __metadata: languageName: node linkType: hard +"espree@npm:^9.6.0, espree@npm:^9.6.1": + version: 9.6.1 + resolution: "espree@npm:9.6.1" + dependencies: + acorn: ^8.9.0 + acorn-jsx: ^5.3.2 + eslint-visitor-keys: ^3.4.1 + checksum: eb8c149c7a2a77b3f33a5af80c10875c3abd65450f60b8af6db1bfcfa8f101e21c1e56a561c6dc13b848e18148d43469e7cd208506238554fb5395a9ea5a1ab9 + languageName: node + linkType: hard + "esprima@npm:^4.0.0, esprima@npm:^4.0.1, esprima@npm:~4.0.0": version: 4.0.1 resolution: "esprima@npm:4.0.1" @@ -15209,6 +15720,15 @@ __metadata: languageName: node linkType: hard +"esquery@npm:^1.4.2": + version: 1.5.0 + resolution: "esquery@npm:1.5.0" + dependencies: + estraverse: ^5.1.0 + checksum: aefb0d2596c230118656cd4ec7532d447333a410a48834d80ea648b1e7b5c9bc9ed8b5e33a89cb04e487b60d622f44cf5713bf4abed7c97343edefdc84a35900 + languageName: node + linkType: hard + "esrecurse@npm:^4.1.0, esrecurse@npm:^4.3.0": version: 4.3.0 resolution: "esrecurse@npm:4.3.0" @@ -15973,6 +16493,15 @@ __metadata: languageName: node linkType: hard +"for-each@npm:^0.3.3": + version: 0.3.3 + resolution: "for-each@npm:0.3.3" + dependencies: + is-callable: ^1.1.3 + checksum: 6c48ff2bc63362319c65e2edca4a8e1e3483a2fabc72fbe7feaf8c73db94fc7861bd53bc02c8a66a0c1dd709da6b04eec42e0abdd6b40ce47305ae92a25e5d28 + languageName: node + linkType: hard + "for-in@npm:^1.0.2": version: 1.0.2 resolution: "for-in@npm:1.0.2" @@ -16265,6 +16794,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"function-bind@npm:^1.1.2": + version: 1.1.2 + resolution: "function-bind@npm:1.1.2" + checksum: 2b0ff4ce708d99715ad14a6d1f894e2a83242e4a52ccfcefaee5e40050562e5f6dafc1adbb4ce2d4ab47279a45dc736ab91ea5042d843c3c092820dfe032efb1 + languageName: node + linkType: hard + "function.prototype.name@npm:^1.1.5": version: 1.1.5 resolution: "function.prototype.name@npm:1.1.5" @@ -16284,7 +16820,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"functions-have-names@npm:^1.2.2": +"functions-have-names@npm:^1.2.2, functions-have-names@npm:^1.2.3": version: 1.2.3 resolution: "functions-have-names@npm:1.2.3" checksum: c3f1f5ba20f4e962efb71344ce0a40722163e85bee2101ce25f88214e78182d2d2476aa85ef37950c579eb6cf6ee811c17b3101bb84004bb75655f3e33f3fdb5 @@ -16355,6 +16891,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2": + version: 1.2.2 + resolution: "get-intrinsic@npm:1.2.2" + dependencies: + function-bind: ^1.1.2 + has-proto: ^1.0.1 + has-symbols: ^1.0.3 + hasown: ^2.0.0 + checksum: 447ff0724df26829908dc033b62732359596fcf66027bc131ab37984afb33842d9cd458fd6cecadfe7eac22fd8a54b349799ed334cf2726025c921c7250e7417 + languageName: node + linkType: hard + "get-nonce@npm:^1.0.0": version: 1.0.1 resolution: "get-nonce@npm:1.0.1" @@ -16566,6 +17114,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"globals@npm:^13.19.0": + version: 13.24.0 + resolution: "globals@npm:13.24.0" + dependencies: + type-fest: ^0.20.2 + checksum: 56066ef058f6867c04ff203b8a44c15b038346a62efbc3060052a1016be9f56f4cf0b2cd45b74b22b81e521a889fc7786c73691b0549c2f3a6e825b3d394f43c + languageName: node + linkType: hard + "globalyzer@npm:0.1.0": version: 0.1.0 resolution: "globalyzer@npm:0.1.0" @@ -16635,6 +17192,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"gopd@npm:^1.0.1": + version: 1.0.1 + resolution: "gopd@npm:1.0.1" + dependencies: + get-intrinsic: ^1.1.3 + checksum: a5ccfb8806e0917a94e0b3de2af2ea4979c1da920bc381667c260e00e7cafdbe844e2cb9c5bcfef4e5412e8bf73bab837285bc35c7ba73aaaf0134d4583393a6 + languageName: node + linkType: hard + "got@npm:11.8.3": version: 11.8.3 resolution: "got@npm:11.8.3" @@ -16850,6 +17416,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"has-proto@npm:^1.0.1": + version: 1.0.1 + resolution: "has-proto@npm:1.0.1" + checksum: febc5b5b531de8022806ad7407935e2135f1cc9e64636c3916c6842bd7995994ca3b29871ecd7954bd35f9e2986c17b3b227880484d22259e2f8e6ce63fd383e + languageName: node + linkType: hard + "has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3": version: 1.0.3 resolution: "has-symbols@npm:1.0.3" @@ -16949,6 +17522,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"hasown@npm:^2.0.0": + version: 2.0.0 + resolution: "hasown@npm:2.0.0" + dependencies: + function-bind: ^1.1.2 + checksum: 6151c75ca12554565098641c98a40f4cc86b85b0fd5b6fe92360967e4605a4f9610f7757260b4e8098dd1c2ce7f4b095f2006fe72a570e3b6d2d28de0298c176 + languageName: node + linkType: hard + "hast-to-hyperscript@npm:^9.0.0": version: 9.0.1 resolution: "hast-to-hyperscript@npm:9.0.1" @@ -17170,6 +17752,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"html-encoding-sniffer@npm:^4.0.0": + version: 4.0.0 + resolution: "html-encoding-sniffer@npm:4.0.0" + dependencies: + whatwg-encoding: ^3.1.1 + checksum: 3339b71dab2723f3159a56acf541ae90a408ce2d11169f00fe7e0c4663d31d6398c8a4408b504b4eec157444e47b084df09b3cb039c816660f0dd04846b8957d + languageName: node + linkType: hard + "html-entities@npm:^2.1.0, html-entities@npm:^2.3.2": version: 2.3.3 resolution: "html-entities@npm:2.3.3" @@ -17322,6 +17913,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"http-proxy-agent@npm:^7.0.0": + version: 7.0.0 + resolution: "http-proxy-agent@npm:7.0.0" + dependencies: + agent-base: ^7.1.0 + debug: ^4.3.4 + checksum: 48d4fac997917e15f45094852b63b62a46d0c8a4f0b9c6c23ca26d27b8df8d178bed88389e604745e748bd9a01f5023e25093722777f0593c3f052009ff438b6 + languageName: node + linkType: hard + "http-proxy-middleware@npm:^2.0.3": version: 2.0.6 resolution: "http-proxy-middleware@npm:2.0.6" @@ -17395,6 +17996,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"https-proxy-agent@npm:^7.0.2": + version: 7.0.2 + resolution: "https-proxy-agent@npm:7.0.2" + dependencies: + agent-base: ^7.0.2 + debug: 4 + checksum: 088969a0dd476ea7a0ed0a2cf1283013682b08f874c3bc6696c83fa061d2c157d29ef0ad3eb70a2046010bb7665573b2388d10fdcb3e410a66995e5248444292 + languageName: node + linkType: hard + "human-signals@npm:^1.1.1": version: 1.1.1 resolution: "human-signals@npm:1.1.1" @@ -17820,6 +18431,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"internal-slot@npm:^1.0.4": + version: 1.0.6 + resolution: "internal-slot@npm:1.0.6" + dependencies: + get-intrinsic: ^1.2.2 + hasown: ^2.0.0 + side-channel: ^1.0.4 + checksum: 7872454888047553ce97a3fa1da7cc054a28ec5400a9c2e9f4dbe4fe7c1d041cb8e8301467614b80d4246d50377aad2fb58860b294ed74d6700cc346b6f89549 + languageName: node + linkType: hard + "interpret@npm:^1.0.0": version: 1.4.0 resolution: "interpret@npm:1.4.0" @@ -17909,6 +18531,27 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-arguments@npm:^1.1.1": + version: 1.1.1 + resolution: "is-arguments@npm:1.1.1" + dependencies: + call-bind: ^1.0.2 + has-tostringtag: ^1.0.0 + checksum: 7f02700ec2171b691ef3e4d0e3e6c0ba408e8434368504bb593d0d7c891c0dbfda6d19d30808b904a6cb1929bca648c061ba438c39f296c2a8ca083229c49f27 + languageName: node + linkType: hard + +"is-array-buffer@npm:^3.0.1, is-array-buffer@npm:^3.0.2": + version: 3.0.2 + resolution: "is-array-buffer@npm:3.0.2" + dependencies: + call-bind: ^1.0.2 + get-intrinsic: ^1.2.0 + is-typed-array: ^1.1.10 + checksum: dcac9dda66ff17df9cabdc58214172bf41082f956eab30bb0d86bc0fab1e44b690fc8e1f855cf2481245caf4e8a5a006a982a71ddccec84032ed41f9d8da8c14 + languageName: node + linkType: hard + "is-arrayish@npm:^0.2.1": version: 0.2.1 resolution: "is-arrayish@npm:0.2.1" @@ -17971,6 +18614,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-callable@npm:^1.1.3": + version: 1.2.7 + resolution: "is-callable@npm:1.2.7" + checksum: 61fd57d03b0d984e2ed3720fb1c7a897827ea174bd44402878e059542ea8c4aeedee0ea0985998aa5cc2736b2fa6e271c08587addb5b3959ac52cf665173d1ac + languageName: node + linkType: hard + "is-callable@npm:^1.1.4, is-callable@npm:^1.2.4": version: 1.2.4 resolution: "is-callable@npm:1.2.4" @@ -18048,6 +18698,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-date-object@npm:^1.0.5": + version: 1.0.5 + resolution: "is-date-object@npm:1.0.5" + dependencies: + has-tostringtag: ^1.0.0 + checksum: baa9077cdf15eb7b58c79398604ca57379b2fc4cf9aa7a9b9e295278648f628c9b201400c01c5e0f7afae56507d741185730307cbe7cad3b9f90a77e5ee342fc + languageName: node + linkType: hard + "is-decimal@npm:^1.0.0": version: 1.0.4 resolution: "is-decimal@npm:1.0.4" @@ -18213,6 +18872,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-map@npm:^2.0.1, is-map@npm:^2.0.2": + version: 2.0.2 + resolution: "is-map@npm:2.0.2" + checksum: ace3d0ecd667bbdefdb1852de601268f67f2db725624b1958f279316e13fecb8fa7df91fd60f690d7417b4ec180712f5a7ee967008e27c65cfd475cc84337728 + languageName: node + linkType: hard + "is-module@npm:^1.0.0": version: 1.0.0 resolution: "is-module@npm:1.0.0" @@ -18294,7 +18960,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-path-inside@npm:^3.0.2": +"is-path-inside@npm:^3.0.2, is-path-inside@npm:^3.0.3": version: 3.0.3 resolution: "is-path-inside@npm:3.0.3" checksum: abd50f06186a052b349c15e55b182326f1936c89a78bf6c8f2b707412517c097ce04bc49a0ca221787bc44e1049f51f09a2ffb63d22899051988d3a618ba13e9 @@ -18408,6 +19074,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-set@npm:^2.0.1, is-set@npm:^2.0.2": + version: 2.0.2 + resolution: "is-set@npm:2.0.2" + checksum: b64343faf45e9387b97a6fd32be632ee7b269bd8183701f3b3f5b71a7cf00d04450ed8669d0bd08753e08b968beda96fca73a10fd0ff56a32603f64deba55a57 + languageName: node + linkType: hard + "is-shared-array-buffer@npm:^1.0.2": version: 1.0.2 resolution: "is-shared-array-buffer@npm:1.0.2" @@ -18465,6 +19138,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-typed-array@npm:^1.1.10": + version: 1.1.12 + resolution: "is-typed-array@npm:1.1.12" + dependencies: + which-typed-array: ^1.1.11 + checksum: 4c89c4a3be07186caddadf92197b17fda663a9d259ea0d44a85f171558270d36059d1c386d34a12cba22dfade5aba497ce22778e866adc9406098c8fc4771796 + languageName: node + linkType: hard + "is-typedarray@npm:^1.0.0": version: 1.0.0 resolution: "is-typedarray@npm:1.0.0" @@ -18497,6 +19179,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-weakmap@npm:^2.0.1": + version: 2.0.1 + resolution: "is-weakmap@npm:2.0.1" + checksum: 1222bb7e90c32bdb949226e66d26cb7bce12e1e28e3e1b40bfa6b390ba3e08192a8664a703dff2a00a84825f4e022f9cd58c4599ff9981ab72b1d69479f4f7f6 + languageName: node + linkType: hard + "is-weakref@npm:^1.0.2": version: 1.0.2 resolution: "is-weakref@npm:1.0.2" @@ -18506,6 +19195,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-weakset@npm:^2.0.1": + version: 2.0.2 + resolution: "is-weakset@npm:2.0.2" + dependencies: + call-bind: ^1.0.2 + get-intrinsic: ^1.1.1 + checksum: 5d8698d1fa599a0635d7ca85be9c26d547b317ed8fd83fc75f03efbe75d50001b5eececb1e9971de85fcde84f69ae6f8346bc92d20d55d46201d328e4c74a367 + languageName: node + linkType: hard + "is-whitespace-character@npm:^1.0.0": version: 1.0.4 resolution: "is-whitespace-character@npm:1.0.4" @@ -18564,6 +19263,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"isarray@npm:^2.0.5": + version: 2.0.5 + resolution: "isarray@npm:2.0.5" + checksum: bd5bbe4104438c4196ba58a54650116007fa0262eccef13a4c55b2e09a5b36b59f1e75b9fcc49883dd9d4953892e6fc007eef9e9155648ceea036e184b0f930a + languageName: node + linkType: hard + "isexe@npm:^2.0.0": version: 2.0.0 resolution: "isexe@npm:2.0.0" @@ -19906,6 +20612,40 @@ fsevents@^1.2.7: languageName: node linkType: hard +"jsdom@npm:^23.0.1": + version: 23.2.0 + resolution: "jsdom@npm:23.2.0" + dependencies: + "@asamuzakjp/dom-selector": ^2.0.1 + cssstyle: ^4.0.1 + data-urls: ^5.0.0 + decimal.js: ^10.4.3 + form-data: ^4.0.0 + html-encoding-sniffer: ^4.0.0 + http-proxy-agent: ^7.0.0 + https-proxy-agent: ^7.0.2 + is-potential-custom-element-name: ^1.0.1 + parse5: ^7.1.2 + rrweb-cssom: ^0.6.0 + saxes: ^6.0.0 + symbol-tree: ^3.2.4 + tough-cookie: ^4.1.3 + w3c-xmlserializer: ^5.0.0 + webidl-conversions: ^7.0.0 + whatwg-encoding: ^3.1.1 + whatwg-mimetype: ^4.0.0 + whatwg-url: ^14.0.0 + ws: ^8.16.0 + xml-name-validator: ^5.0.0 + peerDependencies: + canvas: ^2.11.2 + peerDependenciesMeta: + canvas: + optional: true + checksum: 3ba97e6ac56c38d92d0ce2d0fac5de4042f7dec40d127872e1aa88dd379980f8ea2108a008319ceac54dc07a784078ed4b4401bf9109a76276ca2cace229c8df + languageName: node + linkType: hard + "jsesc@npm:^2.5.1": version: 2.5.2 resolution: "jsesc@npm:2.5.2" @@ -20715,6 +21455,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"lz-string@npm:^1.5.0": + version: 1.5.0 + resolution: "lz-string@npm:1.5.0" + bin: + lz-string: bin/bin.js + checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d + languageName: node + linkType: hard + "macos-release@npm:^2.5.0": version: 2.5.0 resolution: "macos-release@npm:2.5.0" @@ -20955,6 +21704,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"mdn-data@npm:2.0.30": + version: 2.0.30 + resolution: "mdn-data@npm:2.0.30" + checksum: d6ac5ac7439a1607df44b22738ecf83f48e66a0874e4482d6424a61c52da5cde5750f1d1229b6f5fa1b80a492be89465390da685b11f97d62b8adcc6e88189aa + languageName: node + linkType: hard + "mdn-data@npm:2.0.4": version: 2.0.4 resolution: "mdn-data@npm:2.0.4" @@ -21293,7 +22049,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"minimatch@npm:3.1.2, minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.1.2": +"minimatch@npm:3.1.2, minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.2": version: 3.1.2 resolution: "minimatch@npm:3.1.2" dependencies: @@ -22180,6 +22936,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"object-is@npm:^1.1.5": + version: 1.1.5 + resolution: "object-is@npm:1.1.5" + dependencies: + call-bind: ^1.0.2 + define-properties: ^1.1.3 + checksum: 989b18c4cba258a6b74dc1d74a41805c1a1425bce29f6cabb50dcb1a6a651ea9104a1b07046739a49a5bb1bc49727bcb00efd5c55f932f6ea04ec8927a7901fe + languageName: node + linkType: hard + "object-keys@npm:^1.1.1": version: 1.1.1 resolution: "object-keys@npm:1.1.1" @@ -22208,6 +22974,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"object.assign@npm:^4.1.4": + version: 4.1.5 + resolution: "object.assign@npm:4.1.5" + dependencies: + call-bind: ^1.0.5 + define-properties: ^1.2.1 + has-symbols: ^1.0.3 + object-keys: ^1.1.1 + checksum: f9aeac0541661370a1fc86e6a8065eb1668d3e771f7dbb33ee54578201336c057b21ee61207a186dd42db0c62201d91aac703d20d12a79fc79c353eed44d4e25 + languageName: node + linkType: hard + "object.entries@npm:^1.1.5": version: 1.1.5 resolution: "object.entries@npm:1.1.5" @@ -22417,6 +23195,20 @@ fsevents@^1.2.7: languageName: node linkType: hard +"optionator@npm:^0.9.3": + version: 0.9.3 + resolution: "optionator@npm:0.9.3" + dependencies: + "@aashutoshrathi/word-wrap": ^1.2.3 + deep-is: ^0.1.3 + fast-levenshtein: ^2.0.6 + levn: ^0.4.1 + prelude-ls: ^1.2.1 + type-check: ^0.4.0 + checksum: 09281999441f2fe9c33a5eeab76700795365a061563d66b098923eb719251a42bdbe432790d35064d0816ead9296dbeb1ad51a733edf4167c96bd5d0882e428a + languageName: node + linkType: hard + "ora@npm:5.4.1, ora@npm:^5.1.0, ora@npm:^5.4.0, ora@npm:^5.4.1": version: 5.4.1 resolution: "ora@npm:5.4.1" @@ -22792,7 +23584,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"parse5@npm:^7.1.1": +"parse5@npm:^7.1.1, parse5@npm:^7.1.2": version: 7.1.2 resolution: "parse5@npm:7.1.2" dependencies: @@ -24468,6 +25260,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"prettier@npm:^3.1.1": + version: 3.1.1 + resolution: "prettier@npm:3.1.1" + bin: + prettier: bin/prettier.cjs + checksum: e386855e3a1af86a748e16953f168be555ce66d6233f4ba54eb6449b88eb0c6b2ca79441b11eae6d28a7f9a5c96440ce50864b9d5f6356d331d39d6bb66c648e + languageName: node + linkType: hard + "pretty-bytes@npm:^3.0.0": version: 3.0.1 resolution: "pretty-bytes@npm:3.0.1" @@ -24782,6 +25583,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"punycode@npm:^2.3.1": + version: 2.3.1 + resolution: "punycode@npm:2.3.1" + checksum: bb0a0ceedca4c3c57a9b981b90601579058903c62be23c5e8e843d2c2d4148a3ecf029d5133486fb0e1822b098ba8bba09e89d6b21742d02fa26bda6441a6fb2 + languageName: node + linkType: hard + "pupa@npm:^2.1.1": version: 2.1.1 resolution: "pupa@npm:2.1.1" @@ -25199,6 +26007,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"react-refresh@npm:^0.14.0": + version: 0.14.0 + resolution: "react-refresh@npm:0.14.0" + checksum: dc69fa8c993df512f42dd0f1b604978ae89bd747c0ed5ec595c0cc50d535fb2696619ccd98ae28775cc01d0a7c146a532f0f7fb81dc22e1977c242a4912312f4 + languageName: node + linkType: hard + "react-remove-scroll-bar@npm:^2.1.0": version: 2.2.0 resolution: "react-remove-scroll-bar@npm:2.2.0" @@ -25684,6 +26499,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"regexp.prototype.flags@npm:^1.5.1": + version: 1.5.1 + resolution: "regexp.prototype.flags@npm:1.5.1" + dependencies: + call-bind: ^1.0.2 + define-properties: ^1.2.0 + set-function-name: ^2.0.0 + checksum: 869edff00288442f8d7fa4c9327f91d85f3b3acf8cbbef9ea7a220345cf23e9241b6def9263d2c1ebcf3a316b0aa52ad26a43a84aa02baca3381717b3e307f47 + languageName: node + linkType: hard + "regexpp@npm:^3.0.0, regexpp@npm:^3.1.0, regexpp@npm:^3.2.0": version: 3.2.0 resolution: "regexpp@npm:3.2.0" @@ -26463,6 +27289,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"rrweb-cssom@npm:^0.6.0": + version: 0.6.0 + resolution: "rrweb-cssom@npm:0.6.0" + checksum: 182312f6e4f41d18230ccc34f14263bc8e8a6b9d30ee3ec0d2d8e643c6f27964cd7a8d638d4a00e988d93e8dc55369f4ab5a473ccfeff7a8bab95b36d2b5499c + languageName: node + linkType: hard + "rsvp@npm:^4.8.4": version: 4.8.5 resolution: "rsvp@npm:4.8.5" @@ -27011,6 +27844,29 @@ fsevents@^1.2.7: languageName: node linkType: hard +"set-function-length@npm:^1.1.1": + version: 1.1.1 + resolution: "set-function-length@npm:1.1.1" + dependencies: + define-data-property: ^1.1.1 + get-intrinsic: ^1.2.1 + gopd: ^1.0.1 + has-property-descriptors: ^1.0.0 + checksum: c131d7569cd7e110cafdfbfbb0557249b538477624dfac4fc18c376d879672fa52563b74029ca01f8f4583a8acb35bb1e873d573a24edb80d978a7ee607c6e06 + languageName: node + linkType: hard + +"set-function-name@npm:^2.0.0": + version: 2.0.1 + resolution: "set-function-name@npm:2.0.1" + dependencies: + define-data-property: ^1.0.1 + functions-have-names: ^1.2.3 + has-property-descriptors: ^1.0.0 + checksum: 4975d17d90c40168eee2c7c9c59d023429f0a1690a89d75656306481ece0c3c1fb1ebcc0150ea546d1913e35fbd037bace91372c69e543e51fc5d1f31a9fa126 + languageName: node + linkType: hard + "set-value@npm:^2.0.0, set-value@npm:^2.0.1": version: 2.0.1 resolution: "set-value@npm:2.0.1" @@ -27756,6 +28612,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"stop-iteration-iterator@npm:^1.0.0": + version: 1.0.0 + resolution: "stop-iteration-iterator@npm:1.0.0" + dependencies: + internal-slot: ^1.0.4 + checksum: d04173690b2efa40e24ab70e5e51a3ff31d56d699550cfad084104ab3381390daccb36652b25755e420245f3b0737de66c1879eaa2a8d4fc0a78f9bf892fcb42 + languageName: node + linkType: hard + "stream-browserify@npm:^2.0.1": version: 2.0.2 resolution: "stream-browserify@npm:2.0.2" @@ -28370,6 +29235,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"synckit@npm:^0.8.6": + version: 0.8.8 + resolution: "synckit@npm:0.8.8" + dependencies: + "@pkgr/core": ^0.1.0 + tslib: ^2.6.2 + checksum: 9ed5d33abb785f5f24e2531efd53b2782ca77abf7912f734d170134552b99001915531be5a50297aa45c5701b5c9041e8762e6cd7a38e41e2461c1e7fccdedf8 + languageName: node + linkType: hard + "table@npm:^6.0.9": version: 6.7.1 resolution: "table@npm:6.7.1" @@ -28898,6 +29773,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"tough-cookie@npm:^4.1.3": + version: 4.1.3 + resolution: "tough-cookie@npm:4.1.3" + dependencies: + psl: ^1.1.33 + punycode: ^2.1.1 + universalify: ^0.2.0 + url-parse: ^1.5.3 + checksum: c9226afff36492a52118432611af083d1d8493a53ff41ec4ea48e5b583aec744b989e4280bcf476c910ec1525a89a4a0f1cae81c08b18fb2ec3a9b3a72b91dcc + languageName: node + linkType: hard + "tr46@npm:^1.0.1": version: 1.0.1 resolution: "tr46@npm:1.0.1" @@ -28925,6 +29812,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"tr46@npm:^5.0.0": + version: 5.0.0 + resolution: "tr46@npm:5.0.0" + dependencies: + punycode: ^2.3.1 + checksum: 8d8b021f8e17675ebf9e672c224b6b6cfdb0d5b92141349e9665c14a2501c54a298d11264bbb0b17b447581e1e83d4fc3c038c929f3d210e3964d4be47460288 + languageName: node + linkType: hard + "tr46@npm:~0.0.3": version: 0.0.3 resolution: "tr46@npm:0.0.3" @@ -29132,6 +30028,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"tslib@npm:^2.6.2": + version: 2.6.2 + resolution: "tslib@npm:2.6.2" + checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad + languageName: node + linkType: hard + "tslib@npm:~2.0.1": version: 2.0.3 resolution: "tslib@npm:2.0.3" @@ -30088,7 +30991,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"vite@npm:^5.0.0": +"vite@npm:^5.0.0, vite@npm:^5.0.10": version: 5.0.11 resolution: "vite@npm:5.0.11" dependencies: @@ -30190,7 +31093,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"vitest@npm:^1.1.3": +"vitest@npm:^1.1.1, vitest@npm:^1.1.3": version: 1.1.3 resolution: "vitest@npm:1.1.3" dependencies: @@ -30275,6 +31178,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"w3c-xmlserializer@npm:^5.0.0": + version: 5.0.0 + resolution: "w3c-xmlserializer@npm:5.0.0" + dependencies: + xml-name-validator: ^5.0.0 + checksum: 593acc1fdab3f3207ec39d851e6df0f3fa41a36b5809b0ace364c7a6d92e351938c53424a7618ce8e0fbaffee8be2e8e070a5734d05ee54666a8bdf1a376cc40 + languageName: node + linkType: hard + "wait-on@npm:^6.0.1": version: 6.0.1 resolution: "wait-on@npm:6.0.1" @@ -30770,6 +31682,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"whatwg-encoding@npm:^3.1.1": + version: 3.1.1 + resolution: "whatwg-encoding@npm:3.1.1" + dependencies: + iconv-lite: 0.6.3 + checksum: f75a61422421d991e4aec775645705beaf99a16a88294d68404866f65e92441698a4f5b9fa11dd609017b132d7b286c3c1534e2de5b3e800333856325b549e3c + languageName: node + linkType: hard + "whatwg-fetch@npm:^3.4.1, whatwg-fetch@npm:^3.6.2": version: 3.6.2 resolution: "whatwg-fetch@npm:3.6.2" @@ -30791,6 +31712,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"whatwg-mimetype@npm:^4.0.0": + version: 4.0.0 + resolution: "whatwg-mimetype@npm:4.0.0" + checksum: f97edd4b4ee7e46a379f3fb0e745de29fe8b839307cc774300fd49059fcdd560d38cb8fe21eae5575b8f39b022f23477cc66e40b0355c2851ce84760339cef30 + languageName: node + linkType: hard + "whatwg-url@npm:^11.0.0": version: 11.0.0 resolution: "whatwg-url@npm:11.0.0" @@ -30801,6 +31729,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"whatwg-url@npm:^14.0.0": + version: 14.0.0 + resolution: "whatwg-url@npm:14.0.0" + dependencies: + tr46: ^5.0.0 + webidl-conversions: ^7.0.0 + checksum: 4b5887e50f786583bead70916413e67a381d2126899b9eb5c67ce664bba1e7ec07cdff791404581ce73c6190d83c359c9ca1d50711631217905db3877dec075c + languageName: node + linkType: hard + "whatwg-url@npm:^5.0.0": version: 5.0.0 resolution: "whatwg-url@npm:5.0.0" @@ -30846,6 +31784,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"which-collection@npm:^1.0.1": + version: 1.0.1 + resolution: "which-collection@npm:1.0.1" + dependencies: + is-map: ^2.0.1 + is-set: ^2.0.1 + is-weakmap: ^2.0.1 + is-weakset: ^2.0.1 + checksum: c815bbd163107ef9cb84f135e6f34453eaf4cca994e7ba85ddb0d27cea724c623fae2a473ceccfd5549c53cc65a5d82692de418166df3f858e1e5dc60818581c + languageName: node + linkType: hard + "which-module@npm:^2.0.0": version: 2.0.0 resolution: "which-module@npm:2.0.0" @@ -30860,6 +31810,19 @@ fsevents@^1.2.7: languageName: node linkType: hard +"which-typed-array@npm:^1.1.11, which-typed-array@npm:^1.1.13": + version: 1.1.13 + resolution: "which-typed-array@npm:1.1.13" + dependencies: + available-typed-arrays: ^1.0.5 + call-bind: ^1.0.4 + for-each: ^0.3.3 + gopd: ^1.0.1 + has-tostringtag: ^1.0.0 + checksum: 3828a0d5d72c800e369d447e54c7620742a4cc0c9baf1b5e8c17e9b6ff90d8d861a3a6dd4800f1953dbf80e5e5cec954a289e5b4a223e3bee4aeb1f8c5f33309 + languageName: node + linkType: hard + "which@npm:^1.2.9, which@npm:^1.3.1": version: 1.3.1 resolution: "which@npm:1.3.1" @@ -31293,6 +32256,21 @@ fsevents@^1.2.7: languageName: node linkType: hard +"ws@npm:^8.16.0": + version: 8.16.0 + resolution: "ws@npm:8.16.0" + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: ">=5.0.2" + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + checksum: feb3eecd2bae82fa8a8beef800290ce437d8b8063bdc69712725f21aef77c49cb2ff45c6e5e7fce622248f9c7abaee506bae0a9064067ffd6935460c7357321b + languageName: node + linkType: hard + "ws@npm:^8.4.2": version: 8.8.0 resolution: "ws@npm:8.8.0" @@ -31340,6 +32318,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"xml-name-validator@npm:^5.0.0": + version: 5.0.0 + resolution: "xml-name-validator@npm:5.0.0" + checksum: 86effcc7026f437701252fcc308b877b4bc045989049cfc79b0cc112cb365cf7b009f4041fab9fb7cd1795498722c3e9fe9651afc66dfa794c16628a639a4c45 + languageName: node + linkType: hard + "xmlchars@npm:^2.2.0": version: 2.2.0 resolution: "xmlchars@npm:2.2.0" From ba37b29e3120cd76d573d1418bad7927c0c9c15f Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Wed, 10 Jan 2024 23:36:10 +0000 Subject: [PATCH 02/46] lazy load all the things --- .../lazy-injection/counter-todo/package.json | 3 +- .../lazy-injection/counter-todo/src/App.tsx | 28 +++++++++++++--- .../counter-todo/src/app/middleware.ts | 16 ++++++++++ .../counter-todo/src/app/reducer.ts | 9 ++++++ .../counter-todo/src/app/store.ts | 11 +++---- .../src/features/counter/counterSlice.ts | 11 +++++-- .../src/features/quotes/quotesApiSlice.ts | 11 +++++++ yarn.lock | 32 +++++++++++++++++-- 8 files changed, 105 insertions(+), 16 deletions(-) create mode 100644 examples/lazy-injection/counter-todo/src/app/middleware.ts create mode 100644 examples/lazy-injection/counter-todo/src/app/reducer.ts diff --git a/examples/lazy-injection/counter-todo/package.json b/examples/lazy-injection/counter-todo/package.json index 714638c520..b1234a5846 100644 --- a/examples/lazy-injection/counter-todo/package.json +++ b/examples/lazy-injection/counter-todo/package.json @@ -14,7 +14,8 @@ "type-check": "tsc" }, "dependencies": { - "@reduxjs/toolkit": "^2.0.1", + "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4fe0b237/@reduxjs/toolkit/_pkg.tgz", + "clsx": "^2.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^9.0.4" diff --git a/examples/lazy-injection/counter-todo/src/App.tsx b/examples/lazy-injection/counter-todo/src/App.tsx index 08ec7554ed..493f9acf31 100644 --- a/examples/lazy-injection/counter-todo/src/App.tsx +++ b/examples/lazy-injection/counter-todo/src/App.tsx @@ -1,18 +1,38 @@ +import { Suspense, lazy, useReducer, useTransition } from "react" import "./App.css" -import { Counter } from "./features/counter/Counter" -import { Quotes } from "./features/quotes/Quotes" import logo from "./logo.svg" +const Counter = lazy(() => + import("./features/counter/Counter").then(m => ({ default: m.Counter })), +) + +const Quotes = lazy(() => + import("./features/quotes/Quotes").then(m => ({ default: m.Quotes })), +) + const App = () => { + const [counterOpen, toggleCounter] = useReducer(b => !b, false) + const [quotesOpen, toggleQuotes] = useReducer(b => !b, false) + const [, startTransition] = useTransition() return (
logo - +
+ startTransition(toggleCounter)}> + Counter example + + {counterOpen && } +

Edit src/App.tsx and save to reload.

- +
+ startTransition(toggleQuotes)}> + Quotes example + + {quotesOpen && } +
Learn () + +export const withAppMiddleware = dynamicInstance.withMiddleware.withTypes<{ + state: RootState + dispatch: AppDispatch +}>() diff --git a/examples/lazy-injection/counter-todo/src/app/reducer.ts b/examples/lazy-injection/counter-todo/src/app/reducer.ts new file mode 100644 index 0000000000..30aea9515c --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/app/reducer.ts @@ -0,0 +1,9 @@ +import { combineSlices } from "@reduxjs/toolkit" + +export interface LazyLoadedSlices {} + +// `combineSlices` automatically combines the reducers using +// their `reducerPath`s, therefore we no longer need to call `combineReducers`. +export const rootReducer = combineSlices({ + static: () => 0, +}).withLazyLoadedSlices() diff --git a/examples/lazy-injection/counter-todo/src/app/store.ts b/examples/lazy-injection/counter-todo/src/app/store.ts index 992d89bd35..8165099e49 100644 --- a/examples/lazy-injection/counter-todo/src/app/store.ts +++ b/examples/lazy-injection/counter-todo/src/app/store.ts @@ -1,12 +1,9 @@ import type { Action, ThunkAction } from "@reduxjs/toolkit" -import { combineSlices, configureStore } from "@reduxjs/toolkit" +import { configureStore } from "@reduxjs/toolkit" import { setupListeners } from "@reduxjs/toolkit/query" -import { counterSlice } from "../features/counter/counterSlice" -import { quotesApiSlice } from "../features/quotes/quotesApiSlice" +import { rootReducer } from "./reducer" +import { dynamicMiddleware } from "./middleware" -// `combineSlices` automatically combines the reducers using -// their `reducerPath`s, therefore we no longer need to call `combineReducers`. -const rootReducer = combineSlices(counterSlice, quotesApiSlice) // Infer the `RootState` type from the root reducer export type RootState = ReturnType @@ -16,7 +13,7 @@ export const makeStore = (preloadedState?: Partial) => { // Adding the api middleware enables caching, invalidation, polling, // and other useful features of `rtk-query`. middleware: getDefaultMiddleware => { - return getDefaultMiddleware().concat(quotesApiSlice.middleware) + return getDefaultMiddleware().concat(dynamicMiddleware) }, preloadedState, }) diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts index 07bc1f5c3d..557fc2fea0 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts @@ -1,7 +1,8 @@ -import type { PayloadAction } from "@reduxjs/toolkit" +import type { PayloadAction, WithSlice } from "@reduxjs/toolkit" import { createAppSlice } from "../../app/createAppSlice" import type { AppThunk } from "../../app/store" import { fetchCount } from "./counterAPI" +import { rootReducer } from "../../app/reducer" export interface CounterSliceState { value: number @@ -73,8 +74,14 @@ export const counterSlice = createAppSlice({ export const { decrement, increment, incrementByAmount, incrementAsync } = counterSlice.actions +const injectedCounterSlice = counterSlice.injectInto(rootReducer) + +declare module "../../app/reducer" { + export interface LazyLoadedSlices extends WithSlice {} +} + // Selectors returned by `slice.selectors` take the root state as their first argument. -export const { selectCount, selectStatus } = counterSlice.selectors +export const { selectCount, selectStatus } = injectedCounterSlice.selectors // We can also write thunks by hand, which may contain both sync and async logic. // Here's an example of conditionally dispatching actions based on current state. diff --git a/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts b/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts index a1c7b5a248..453d74a369 100644 --- a/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts +++ b/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts @@ -1,5 +1,8 @@ // Need to use the React-specific entry point to import `createApi` import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react" +import { addAppMiddleware } from "../../app/middleware" +import { WithSlice } from "@reduxjs/toolkit" +import { rootReducer } from "../../app/reducer" interface Quote { id: number @@ -36,3 +39,11 @@ export const quotesApiSlice = createApi({ // Hooks are auto-generated by RTK-Query // Same as `quotesApiSlice.endpoints.getQuotes.useQuery` export const { useGetQuotesQuery } = quotesApiSlice + +declare module "../../app/reducer" { + export interface LazyLoadedSlices extends WithSlice {} +} + +rootReducer.inject(quotesApiSlice) + +addAppMiddleware(quotesApiSlice.middleware as any) diff --git a/yarn.lock b/yarn.lock index d531a0a0e7..16addd7126 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4891,7 +4891,7 @@ __metadata: version: 0.0.0-use.local resolution: "@examples-lazy-injection/counter-todo@workspace:examples/lazy-injection/counter-todo" dependencies: - "@reduxjs/toolkit": ^2.0.1 + "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4fe0b237/@reduxjs/toolkit/_pkg.tgz" "@testing-library/dom": ^9.3.3 "@testing-library/jest-dom": ^6.1.6 "@testing-library/react": ^14.1.2 @@ -4899,6 +4899,7 @@ __metadata: "@types/react": ^18.2.46 "@types/react-dom": ^18.2.18 "@vitejs/plugin-react": ^4.2.1 + clsx: ^2.1.0 eslint: ^8.56.0 eslint-config-react-app: ^7.0.1 eslint-plugin-prettier: ^5.1.2 @@ -7168,7 +7169,7 @@ __metadata: languageName: unknown linkType: soft -"@reduxjs/toolkit@^1.6.0 || ^2.0.0, @reduxjs/toolkit@^2.0.1, @reduxjs/toolkit@workspace:packages/toolkit": +"@reduxjs/toolkit@^1.6.0 || ^2.0.0, @reduxjs/toolkit@workspace:packages/toolkit": version: 0.0.0-use.local resolution: "@reduxjs/toolkit@workspace:packages/toolkit" dependencies: @@ -7230,6 +7231,26 @@ __metadata: languageName: unknown linkType: soft +"@reduxjs/toolkit@https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4fe0b237/@reduxjs/toolkit/_pkg.tgz": + version: 2.0.2 + resolution: "@reduxjs/toolkit@https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4fe0b237/@reduxjs/toolkit/_pkg.tgz" + dependencies: + immer: ^10.0.3 + redux: ^5.0.1 + redux-thunk: ^3.1.0 + reselect: ^5.0.1 + peerDependencies: + react: ^16.9.0 || ^17.0.0 || ^18 + react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0 + peerDependenciesMeta: + react: + optional: true + react-redux: + optional: true + checksum: 63ee7c57c445943f212e1ec9afd86c7691b36940b295fe7556e0cb74ef936f80bf525add8f3a403e21eb65e52d6e4b857ec6c34c3ede9bab0fb6d8a82d0ba870 + languageName: node + linkType: hard + "@reduxjs/toolkit@npm:1.8.1": version: 1.8.1 resolution: "@reduxjs/toolkit@npm:1.8.1" @@ -12432,6 +12453,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^2.1.0": + version: 2.1.0 + resolution: "clsx@npm:2.1.0" + checksum: 43fefc29b6b49c9476fbce4f8b1cc75c27b67747738e598e6651dd40d63692135dc60b18fa1c5b78a2a9ba8ae6fd2055a068924b94e20b42039bd53b78b98e1d + languageName: node + linkType: hard + "co@npm:^4.6.0": version: 4.6.0 resolution: "co@npm:4.6.0" From db7086dd4d731aebb585ba69d1ef2a104fb9a750 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Thu, 11 Jan 2024 00:38:51 +0000 Subject: [PATCH 03/46] Fix App test --- .../lazy-injection/counter-todo/package.json | 1 + .../counter-todo/src/App.test.tsx | 19 ++++++++++++++++++- .../lazy-injection/counter-todo/src/App.tsx | 4 ++-- .../src/features/counter/Counter.tsx | 4 +++- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/examples/lazy-injection/counter-todo/package.json b/examples/lazy-injection/counter-todo/package.json index b1234a5846..99757b5d32 100644 --- a/examples/lazy-injection/counter-todo/package.json +++ b/examples/lazy-injection/counter-todo/package.json @@ -9,6 +9,7 @@ "build": "tsc && vite build", "preview": "vite preview", "test": "vitest run", + "test:watch": "vitest watch", "format": "prettier --write .", "lint": "eslint .", "type-check": "tsc" diff --git a/examples/lazy-injection/counter-todo/src/App.test.tsx b/examples/lazy-injection/counter-todo/src/App.test.tsx index 08a916fa10..c68dedf77c 100644 --- a/examples/lazy-injection/counter-todo/src/App.test.tsx +++ b/examples/lazy-injection/counter-todo/src/App.test.tsx @@ -1,13 +1,22 @@ import { screen, waitFor } from "@testing-library/react" import App from "./App" import { renderWithProviders } from "./utils/test-utils" +import userEvent from "@testing-library/user-event" -test("App should have correct initial render", () => { +async function ensureCounterLoaded() { + await userEvent.click(screen.getByText("Counter example (lazy)")) + + await waitFor(() => expect(screen.queryByTestId("count")).toBeInTheDocument()) +} + +test("App should have correct initial render", async () => { renderWithProviders() // The app should be rendered correctly expect(screen.getByText(/learn/i)).toBeInTheDocument() + await ensureCounterLoaded() + // Initial state: count should be 0, incrementValue should be 2 expect(screen.getByTestId("count")).toHaveTextContent("0") expect(screen.getByLabelText("Set increment amount")).toHaveValue(2) @@ -16,6 +25,8 @@ test("App should have correct initial render", () => { test("Increment value and Decrement value should work as expected", async () => { const { user } = renderWithProviders() + await ensureCounterLoaded() + // Click on "+" => Count should be 1 await user.click(screen.getByLabelText("Increment value")) expect(screen.getByTestId("count")).toHaveTextContent("1") @@ -28,6 +39,8 @@ test("Increment value and Decrement value should work as expected", async () => test("Add Amount should work as expected", async () => { const { user } = renderWithProviders() + await ensureCounterLoaded() + // "Add Amount" button is clicked => Count should be 2 await user.click(screen.getByText("Add Amount")) expect(screen.getByTestId("count")).toHaveTextContent("2") @@ -49,6 +62,8 @@ test("Add Amount should work as expected", async () => { it("Add Async should work as expected", async () => { const { user } = renderWithProviders() + await ensureCounterLoaded() + // "Add Async" button is clicked => Count should be 2 await user.click(screen.getByText("Add Async")) @@ -78,6 +93,8 @@ it("Add Async should work as expected", async () => { test("Add If Odd should work as expected", async () => { const { user } = renderWithProviders() + await ensureCounterLoaded() + // "Add If Odd" button is clicked => Count should stay 0 await user.click(screen.getByText("Add If Odd")) expect(screen.getByTestId("count")).toHaveTextContent("0") diff --git a/examples/lazy-injection/counter-todo/src/App.tsx b/examples/lazy-injection/counter-todo/src/App.tsx index 493f9acf31..bb52c65efd 100644 --- a/examples/lazy-injection/counter-todo/src/App.tsx +++ b/examples/lazy-injection/counter-todo/src/App.tsx @@ -20,7 +20,7 @@ const App = () => { logo
startTransition(toggleCounter)}> - Counter example + Counter example (lazy) {counterOpen && }
@@ -29,7 +29,7 @@ const App = () => {

startTransition(toggleQuotes)}> - Quotes example + Quotes example (lazy) {quotesOpen && }
diff --git a/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx b/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx index 7615ee89b5..55cbdd6846 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx +++ b/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx @@ -30,7 +30,9 @@ export const Counter = () => { > - - {count} + + {count} + +
+ ) +} diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx b/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx new file mode 100644 index 0000000000..26ad1ad7b9 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx @@ -0,0 +1,20 @@ +import { useAppDispatch, useAppSelector } from "../../app/hooks" +import { deleteTodo, selectTodoById } from "./todoSlice" +import styles from "./Todos.module.css" + +export function Todo({ id }: { id: string }) { + const dispatch = useAppDispatch() + const todo = useAppSelector(state => selectTodoById(state, id)) + if (!todo) return null + return ( +
+

{todo.title}

+ +
+ ) +} diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Todos.module.css b/examples/lazy-injection/counter-todo/src/features/todos/Todos.module.css new file mode 100644 index 0000000000..f02f81a79e --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/todos/Todos.module.css @@ -0,0 +1,54 @@ +.todos { + display: flex; + flex-direction: column; + gap: 12px; + align-items: center; +} + +.todosList { + display: flex; + flex-direction: column; + gap: 12px; +} + +.todo { + display: flex; + border: 1px solid black; + padding: 12px; + gap: 12px; + align-items: center; +} + +.todo p { + margin: 0; + flex: 1; +} + +.button { + appearance: none; + background: none; + font-size: 24px; + padding-left: 12px; + padding-right: 12px; + outline: none; + border: 2px solid transparent; + color: rgb(112, 76, 182); + padding-bottom: 4px; + cursor: pointer; + background-color: rgba(112, 76, 182, 0.1); + border-radius: 2px; + transition: all 0.15s; +} +.button:hover, +.button:focus { + border: 2px solid rgba(112, 76, 182, 0.4); +} + +.button:active { + background-color: rgba(112, 76, 182, 0.2); +} + +.addTodo { + display: flex; + gap: 12px; +} diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Todos.tsx b/examples/lazy-injection/counter-todo/src/features/todos/Todos.tsx new file mode 100644 index 0000000000..77e3ff910c --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/todos/Todos.tsx @@ -0,0 +1,19 @@ +import { useAppSelector } from "../../app/hooks" +import { AddTodo } from "./AddTodo" +import { Todo } from "./Todo" +import { selectTodoIds } from "./todoSlice" +import styles from "./Todos.module.css" + +export function Todos() { + const todoIds = useAppSelector(selectTodoIds) + return ( +
+
+ {todoIds.map(id => ( + + ))} +
+ +
+ ) +} diff --git a/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.test.ts b/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.test.ts new file mode 100644 index 0000000000..2329bfab04 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.test.ts @@ -0,0 +1,59 @@ +import { nanoid } from "@reduxjs/toolkit" +import type { AppStore } from "../../app/store" +import { makeStore } from "../../app/store" +import { + Todo, + addTodo, + deleteTodo, + selectAllTodos, + selectTodoById, + selectTodoEntities, + selectTodoIds, + selectTodoTotal, + todoAdapter, + todoSlice, +} from "./todoSlice" + +interface LocalTestContext { + store: AppStore +} + +const initialTodo: Todo = { id: nanoid(), title: "Initial todo" } + +describe("counter reducer", it => { + beforeEach(context => { + const store = makeStore({ + todo: todoAdapter.setOne(todoAdapter.getInitialState(), initialTodo), + }) + + context.store = store + }) + + it("should handle initial state", () => { + expect(todoSlice.reducer(undefined, { type: "unknown" })).toStrictEqual( + todoAdapter.getInitialState(), + ) + }) + + it("should handle addTodo", ({ store }) => { + expect(selectTodoIds(store.getState())).toStrictEqual([initialTodo.id]) + + store.dispatch(addTodo({ title: "Second todo!" })) + + const ids = selectTodoIds(store.getState()) + expect(ids).toStrictEqual([initialTodo.id, expect.any(String)]) + expect(selectTodoById(store.getState(), ids[1])).toStrictEqual({ + id: ids[1], + title: "Second todo!", + }) + }) + + it("should handle deleteTodo", ({ store }) => { + expect(selectAllTodos(store.getState())).toStrictEqual([initialTodo]) + + store.dispatch(deleteTodo(initialTodo.id)) + + expect(selectTodoTotal(store.getState())).toBe(0) + expect(selectTodoEntities(store.getState())).toStrictEqual({}) + }) +}) diff --git a/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts b/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts new file mode 100644 index 0000000000..7026d86540 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts @@ -0,0 +1,34 @@ +import { createEntityAdapter, nanoid } from "@reduxjs/toolkit" +import { createAppSlice } from "../../app/createAppSlice" +import { RootState } from "../../app/store" + +export interface Todo { + id: string + title: string +} + +export const todoAdapter = createEntityAdapter() + +export const todoSlice = createAppSlice({ + name: "todo", + initialState: todoAdapter.getInitialState(), + reducers: { + addTodo: { + reducer: todoAdapter.setOne, + prepare: (todo: Omit) => ({ + payload: { id: nanoid(), ...todo }, + }), + }, + deleteTodo: todoAdapter.removeOne, + }, +}) + +export const { addTodo, deleteTodo } = todoSlice.actions + +export const { + selectAll: selectAllTodos, + selectById: selectTodoById, + selectEntities: selectTodoEntities, + selectIds: selectTodoIds, + selectTotal: selectTodoTotal, +} = todoAdapter.getSelectors((state: RootState) => todoSlice.selectSlice(state)) From 5b1138c7e58f1d44d51a088d14cadd5c843f51c1 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Thu, 11 Jan 2024 01:02:59 +0000 Subject: [PATCH 05/46] add comment for type mismatch --- .../counter-todo/src/features/quotes/quotesApiSlice.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts b/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts index 453d74a369..95951e1fa0 100644 --- a/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts +++ b/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts @@ -46,4 +46,8 @@ declare module "../../app/reducer" { rootReducer.inject(quotesApiSlice) +// middleware typing mismatch here +// the API middleware needs a guarantee that the reducer has already been injected +// addAppMiddleware can't confirm this, but we can (the injection happens above) +// sooo... we'll just cast it to any addAppMiddleware(quotesApiSlice.middleware as any) From 67f4c9281f75d6df803293742930b97ee6317c66 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Thu, 11 Jan 2024 01:14:09 +0000 Subject: [PATCH 06/46] add example of createAppDispatchWithMiddlewareHook --- .../counter-todo/src/app/middleware.ts | 18 +++++++++++------- .../src/features/counter/Counter.tsx | 16 ++++++++++++---- .../src/features/counter/counterMiddleware.ts | 14 ++++++++++++++ 3 files changed, 37 insertions(+), 11 deletions(-) create mode 100644 examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts diff --git a/examples/lazy-injection/counter-todo/src/app/middleware.ts b/examples/lazy-injection/counter-todo/src/app/middleware.ts index 8bd7c20519..553df46675 100644 --- a/examples/lazy-injection/counter-todo/src/app/middleware.ts +++ b/examples/lazy-injection/counter-todo/src/app/middleware.ts @@ -1,16 +1,20 @@ -import { createDynamicMiddleware } from "@reduxjs/toolkit" +import { createDynamicMiddleware } from "@reduxjs/toolkit/react" import { AppDispatch, RootState } from "./store" const dynamicInstance = createDynamicMiddleware() export const { middleware: dynamicMiddleware } = dynamicInstance -export const addAppMiddleware = dynamicInstance.addMiddleware.withTypes<{ +type Config = { state: RootState dispatch: AppDispatch -}>() +} -export const withAppMiddleware = dynamicInstance.withMiddleware.withTypes<{ - state: RootState - dispatch: AppDispatch -}>() +export const addAppMiddleware = + dynamicInstance.addMiddleware.withTypes() + +export const withAppMiddleware = + dynamicInstance.withMiddleware.withTypes() + +export const createAppDispatchWithMiddlewareHook = + dynamicInstance.createDispatchWithMiddlewareHook.withTypes() diff --git a/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx b/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx index 55cbdd6846..0fcfaf8be6 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx +++ b/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx @@ -1,6 +1,5 @@ import { useState } from "react" - -import { useAppDispatch, useAppSelector } from "../../app/hooks" +import { useAppSelector } from "../../app/hooks" import styles from "./Counter.module.css" import { decrement, @@ -11,9 +10,14 @@ import { selectCount, selectStatus, } from "./counterSlice" +import { createAppDispatchWithMiddlewareHook } from "../../app/middleware" +import { counterMiddleware, getCount } from "./counterMiddleware" + +const useCounterDispatch = + createAppDispatchWithMiddlewareHook(counterMiddleware) export const Counter = () => { - const dispatch = useAppDispatch() + const dispatch = useCounterDispatch() const count = useAppSelector(selectCount) const status = useAppSelector(selectStatus) const [incrementAmount, setIncrementAmount] = useState("2") @@ -36,7 +40,11 @@ export const Counter = () => { diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts new file mode 100644 index 0000000000..ded1fa2f65 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts @@ -0,0 +1,14 @@ +import { Middleware, createAction } from "@reduxjs/toolkit" +import { selectCount } from "./counterSlice" + +export const getCount = createAction("counter/getCount") + +export const counterMiddleware: Middleware<{ + (action: ReturnType): number +}> = api => next => action => { + const result = next(action) + if (getCount.match(action)) { + return selectCount(api.getState()) + } + return result +} From f0ace1b210e3a80aac57d8d4ea554c401f520c1c Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Thu, 11 Jan 2024 01:17:16 +0000 Subject: [PATCH 07/46] add log when middleware initialises --- .../src/features/counter/counterMiddleware.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts index ded1fa2f65..6d06aab626 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts @@ -5,10 +5,13 @@ export const getCount = createAction("counter/getCount") export const counterMiddleware: Middleware<{ (action: ReturnType): number -}> = api => next => action => { - const result = next(action) - if (getCount.match(action)) { - return selectCount(api.getState()) +}> = api => { + console.log("counter middleware initialised!") + return next => action => { + const result = next(action) + if (getCount.match(action)) { + return selectCount(api.getState()) + } + return result } - return result } From 4fd828ac297edc61d68757419138f4f3dcb444e9 Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Thu, 11 Jan 2024 19:16:28 +0000 Subject: [PATCH 08/46] use react-lazily for named exports --- .../lazy-injection/counter-todo/package.json | 1 + .../lazy-injection/counter-todo/src/App.tsx | 11 ++++------- yarn.lock | 17 +++++++++++++++++ 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/examples/lazy-injection/counter-todo/package.json b/examples/lazy-injection/counter-todo/package.json index 99757b5d32..e44d6b995c 100644 --- a/examples/lazy-injection/counter-todo/package.json +++ b/examples/lazy-injection/counter-todo/package.json @@ -19,6 +19,7 @@ "clsx": "^2.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-lazily": "^0.9.2", "react-redux": "^9.0.4" }, "devDependencies": { diff --git a/examples/lazy-injection/counter-todo/src/App.tsx b/examples/lazy-injection/counter-todo/src/App.tsx index 1ea0619573..3a04228965 100644 --- a/examples/lazy-injection/counter-todo/src/App.tsx +++ b/examples/lazy-injection/counter-todo/src/App.tsx @@ -1,15 +1,12 @@ -import { Suspense, lazy, useReducer, useTransition } from "react" +import { Suspense, useReducer, useTransition } from "react" import "./App.css" import logo from "./logo.svg" import { Todos } from "./features/todos/Todos" +import { lazily } from "react-lazily" -const Counter = lazy(() => - import("./features/counter/Counter").then(m => ({ default: m.Counter })), -) +const { Counter } = lazily(() => import("./features/counter/Counter")) -const Quotes = lazy(() => - import("./features/quotes/Quotes").then(m => ({ default: m.Quotes })), -) +const { Quotes } = lazily(() => import("./features/quotes/Quotes")) const App = () => { const [counterOpen, toggleCounter] = useReducer(b => !b, false) diff --git a/yarn.lock b/yarn.lock index 16addd7126..0f87a529f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4907,6 +4907,7 @@ __metadata: prettier: ^3.1.1 react: ^18.2.0 react-dom: ^18.2.0 + react-lazily: ^0.9.2 react-redux: ^9.0.4 typescript: ^5.3.3 vite: ^5.0.10 @@ -25967,6 +25968,22 @@ fsevents@^1.2.7: languageName: node linkType: hard +"react-lazily@npm:^0.9.2": + version: 0.9.2 + resolution: "react-lazily@npm:0.9.2" + peerDependencies: + react: ">=16.8" + react-dom: "*" + react-native: "*" + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + checksum: ee620e01dab0e77ed65ab5092d41cedbfe1c026f6eabe47838bcce8bffc788f239aa38b1d2b016bae4482c1ba1907fa73bece7077327f676d96610959438803e + languageName: node + linkType: hard + "react-lifecycles-compat@npm:^3.0.4": version: 3.0.4 resolution: "react-lifecycles-compat@npm:3.0.4" From daedb89e605d6140b1168d28c542c14a20887901 Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Thu, 11 Jan 2024 19:20:26 +0000 Subject: [PATCH 09/46] make getCount in slice --- .../src/features/counter/counterMiddleware.ts | 6 ++---- .../src/features/counter/counterSlice.ts | 12 ++++++++++-- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts index 6d06aab626..a22f0325d7 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts @@ -1,7 +1,5 @@ -import { Middleware, createAction } from "@reduxjs/toolkit" -import { selectCount } from "./counterSlice" - -export const getCount = createAction("counter/getCount") +import { Middleware } from "@reduxjs/toolkit" +import { getCount, selectCount } from "./counterSlice" export const counterMiddleware: Middleware<{ (action: ReturnType): number diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts index 557fc2fea0..0d710474a7 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts @@ -21,6 +21,9 @@ export const counterSlice = createAppSlice({ initialState, // The `reducers` field lets us define reducers and generate associated actions reducers: create => ({ + getCount: create.reducer(() => { + // dummy for middleware + }), increment: create.reducer(state => { // Redux Toolkit allows us to write "mutating" logic in reducers. It // doesn't actually mutate the state because it uses the Immer library, @@ -71,8 +74,13 @@ export const counterSlice = createAppSlice({ }) // Action creators are generated for each case reducer function. -export const { decrement, increment, incrementByAmount, incrementAsync } = - counterSlice.actions +export const { + getCount, + decrement, + increment, + incrementByAmount, + incrementAsync, +} = counterSlice.actions const injectedCounterSlice = counterSlice.injectInto(rootReducer) From bec2ed50bf71123eb02e4f07380d96c61e2ea820 Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Thu, 11 Jan 2024 19:21:12 +0000 Subject: [PATCH 10/46] fix import --- .../counter-todo/src/features/counter/Counter.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx b/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx index 0fcfaf8be6..960c0f6888 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx +++ b/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx @@ -3,6 +3,7 @@ import { useAppSelector } from "../../app/hooks" import styles from "./Counter.module.css" import { decrement, + getCount, increment, incrementAsync, incrementByAmount, @@ -11,7 +12,7 @@ import { selectStatus, } from "./counterSlice" import { createAppDispatchWithMiddlewareHook } from "../../app/middleware" -import { counterMiddleware, getCount } from "./counterMiddleware" +import { counterMiddleware } from "./counterMiddleware" const useCounterDispatch = createAppDispatchWithMiddlewareHook(counterMiddleware) From 2ac362f01afe16f02844d711dbcb6fd3727754fa Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Thu, 11 Jan 2024 19:31:37 +0000 Subject: [PATCH 11/46] save inject result to variable --- .../counter-todo/src/features/quotes/quotesApiSlice.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts b/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts index 95951e1fa0..5899cbd0ce 100644 --- a/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts +++ b/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts @@ -44,7 +44,7 @@ declare module "../../app/reducer" { export interface LazyLoadedSlices extends WithSlice {} } -rootReducer.inject(quotesApiSlice) +const withQuotesApi = rootReducer.inject(quotesApiSlice) // middleware typing mismatch here // the API middleware needs a guarantee that the reducer has already been injected From 0bd1139ca0abbf5597004fd50539f2ea04a1a53e Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Thu, 11 Jan 2024 21:55:42 +0000 Subject: [PATCH 12/46] added .selector example --- .../counter-todo/src/features/counter/Counter.tsx | 7 +++++++ .../counter-todo/src/features/counter/counterSlice.ts | 5 +++++ 2 files changed, 12 insertions(+) diff --git a/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx b/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx index 960c0f6888..2d5c30de40 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx +++ b/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx @@ -9,6 +9,7 @@ import { incrementByAmount, incrementIfOdd, selectCount, + selectDouble, selectStatus, } from "./counterSlice" import { createAppDispatchWithMiddlewareHook } from "../../app/middleware" @@ -20,6 +21,7 @@ const useCounterDispatch = export const Counter = () => { const dispatch = useCounterDispatch() const count = useAppSelector(selectCount) + const double = useAppSelector(selectDouble) const status = useAppSelector(selectStatus) const [incrementAmount, setIncrementAmount] = useState("2") @@ -82,6 +84,11 @@ export const Counter = () => { Add If Odd +
+ + {double} + +
) } diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts index 0d710474a7..b7e4daa821 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts @@ -82,6 +82,7 @@ export const { incrementAsync, } = counterSlice.actions +const withCounterSlice = rootReducer.inject(counterSlice) const injectedCounterSlice = counterSlice.injectInto(rootReducer) declare module "../../app/reducer" { @@ -102,3 +103,7 @@ export const incrementIfOdd = dispatch(incrementByAmount(amount)) } } + +export const selectDouble = withCounterSlice.selector( + state => selectCount(state) * 2, +) From 04b0a8bec3d3eff260e3ab8183eb8def6c52d995 Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Thu, 11 Jan 2024 22:09:40 +0000 Subject: [PATCH 13/46] add comment re: duplication --- .../counter-todo/src/features/counter/counterSlice.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts index b7e4daa821..2d9c58ca9f 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts @@ -82,6 +82,7 @@ export const { incrementAsync, } = counterSlice.actions +// we can call both inject and injectInto, because the reducer reference is the same - injection only happens once regardless const withCounterSlice = rootReducer.inject(counterSlice) const injectedCounterSlice = counterSlice.injectInto(rootReducer) From cefbf1c9a2652fa35b83893e6e3e69516231304f Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Fri, 12 Jan 2024 10:32:18 +0000 Subject: [PATCH 14/46] add comment re: react-lazily --- examples/lazy-injection/counter-todo/src/App.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/examples/lazy-injection/counter-todo/src/App.tsx b/examples/lazy-injection/counter-todo/src/App.tsx index 3a04228965..95b153f0e4 100644 --- a/examples/lazy-injection/counter-todo/src/App.tsx +++ b/examples/lazy-injection/counter-todo/src/App.tsx @@ -4,6 +4,8 @@ import logo from "./logo.svg" import { Todos } from "./features/todos/Todos" import { lazily } from "react-lazily" +// equivalent to +// const Counter = lazy(() => import("./features/counter/Counter").then(m => ({ default: m.Counter })) const { Counter } = lazily(() => import("./features/counter/Counter")) const { Quotes } = lazily(() => import("./features/quotes/Quotes")) From 1b3cbd87fbe0bb31816a89fcc411b94d477fb976 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Fri, 12 Jan 2024 13:54:28 +0000 Subject: [PATCH 15/46] golf --- .../lazy-injection/counter-todo/src/features/todos/Todo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx b/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx index 26ad1ad7b9..4343c9b532 100644 --- a/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx +++ b/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx @@ -11,7 +11,7 @@ export function Todo({ id }: { id: string }) {

{todo.title}

From 7c4387f2f5660cc28b1dfa16bd6d1e30ccdff8b9 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Fri, 12 Jan 2024 14:00:44 +0000 Subject: [PATCH 16/46] try adding lazy injection example to sandboxes --- .codesandbox/ci.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 81f527788f..c8567fa611 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -6,6 +6,7 @@ "/examples/query/react/basic", "/examples/query/react/advanced", "/examples/action-listener/counter", + "/examples/lazy-injection/counter-todo", "/examples/publish-ci/cra5" ], "node": "16", From 81aa3a72c520d6bfe1d49c79ef57b834f7775e58 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Fri, 12 Jan 2024 14:11:13 +0000 Subject: [PATCH 17/46] bump CSB node to 18 --- .codesandbox/ci.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index c8567fa611..529800b794 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -9,7 +9,7 @@ "/examples/lazy-injection/counter-todo", "/examples/publish-ci/cra5" ], - "node": "16", + "node": "18", "buildCommand": "build:packages", "packages": [ "packages/toolkit", From 1e4363c3c2e8cb74494b4d16a8227950593c039c Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Fri, 12 Jan 2024 14:23:59 +0000 Subject: [PATCH 18/46] remove open: true --- examples/lazy-injection/counter-todo/vite.config.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/lazy-injection/counter-todo/vite.config.ts b/examples/lazy-injection/counter-todo/vite.config.ts index 39a5632b23..d07990ce1b 100644 --- a/examples/lazy-injection/counter-todo/vite.config.ts +++ b/examples/lazy-injection/counter-todo/vite.config.ts @@ -4,9 +4,6 @@ import react from "@vitejs/plugin-react" // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], - server: { - open: true, - }, test: { globals: true, environment: "jsdom", From 99253f7f020d16710fd90d33b8a9c4fd774383b3 Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Sun, 14 Jan 2024 19:53:57 +0000 Subject: [PATCH 19/46] use withTypes hooks --- .../counter-todo/src/app/hooks.ts | 8 +++-- package.json | 1 - yarn.lock | 32 ++++++++++++++++--- 3 files changed, 32 insertions(+), 9 deletions(-) diff --git a/examples/lazy-injection/counter-todo/src/app/hooks.ts b/examples/lazy-injection/counter-todo/src/app/hooks.ts index e4aa4459eb..5628fed89c 100644 --- a/examples/lazy-injection/counter-todo/src/app/hooks.ts +++ b/examples/lazy-injection/counter-todo/src/app/hooks.ts @@ -1,7 +1,9 @@ -import type { TypedUseSelectorHook } from "react-redux" +// We disable the ESLint rule here because this is the designated place +// for importing and re-exporting the typed versions of hooks. +/* eslint-disable @typescript-eslint/no-restricted-imports */ import { useDispatch, useSelector } from "react-redux" import type { AppDispatch, RootState } from "./store" // Use throughout your app instead of plain `useDispatch` and `useSelector` -export const useAppDispatch: () => AppDispatch = useDispatch -export const useAppSelector: TypedUseSelectorHook = useSelector +export const useAppDispatch = useDispatch.withTypes() +export const useAppSelector = useSelector.withTypes() diff --git a/package.json b/package.json index 11fe58ff7e..2b84b06b13 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,6 @@ "jest-snapshot": "29.3.1", "msw": "patch:msw@npm:0.40.2#.yarn/patches/msw-npm-0.40.2-2107d48752", "jscodeshift": "0.13.1", - "react-redux": "npm:8.0.2", "react": "npm:18.2.0", "react-dom": "npm:18.2.0", "resolve": "1.22.1", diff --git a/yarn.lock b/yarn.lock index 0f87a529f3..75bf3c2777 100644 --- a/yarn.lock +++ b/yarn.lock @@ -26013,9 +26013,9 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-redux@npm:8.0.2": - version: 8.0.2 - resolution: "react-redux@npm:8.0.2" +"react-redux@npm:^8.0.2": + version: 8.1.3 + resolution: "react-redux@npm:8.1.3" dependencies: "@babel/runtime": ^7.12.1 "@types/hoist-non-react-statics": ^3.3.1 @@ -26029,7 +26029,7 @@ fsevents@^1.2.7: react: ^16.8 || ^17.0 || ^18.0 react-dom: ^16.8 || ^17.0 || ^18.0 react-native: ">=0.59" - redux: ^4 + redux: ^4 || ^5.0.0-beta.0 peerDependenciesMeta: "@types/react": optional: true @@ -26041,7 +26041,29 @@ fsevents@^1.2.7: optional: true redux: optional: true - checksum: 44c1739c45dad04ecc65a290897c73828ff0bf43f2b7618ed5ef6d4ceecedae38e76cecd189a5ecedf579c28ead05427bc000fb45ad30b9fcd5c2be27cd3ac73 + checksum: 192ea6f6053148ec80a4148ec607bc259403b937e515f616a1104ca5ab357e97e98b8245ed505a17afee67a72341d4a559eaca9607968b4a422aa9b44ba7eb89 + languageName: node + linkType: hard + +"react-redux@npm:^9.0.4": + version: 9.1.0 + resolution: "react-redux@npm:9.1.0" + dependencies: + "@types/use-sync-external-store": ^0.0.3 + use-sync-external-store: ^1.0.0 + peerDependencies: + "@types/react": ^18.2.25 + react: ^18.0 + react-native: ">=0.69" + redux: ^5.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + react-native: + optional: true + redux: + optional: true + checksum: 1b07714379ff0087b4fb43ffd138cc84efb7608c874d632a4e2162e1874f3e0f6b69a0a9b0f24f93cbf122c694ac9cfd315770676d4cabb167d159f1ef419560 languageName: node linkType: hard From 844baec619a6cf804f8593da990bffa869a3d681 Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Sun, 14 Jan 2024 19:56:39 +0000 Subject: [PATCH 20/46] enable consistent type imports rule --- examples/lazy-injection/counter-todo/.eslintrc.json | 4 ++++ examples/lazy-injection/counter-todo/src/app/middleware.ts | 2 +- .../counter-todo/src/features/counter/counterMiddleware.ts | 2 +- .../counter-todo/src/features/quotes/quotesApiSlice.ts | 2 +- .../counter-todo/src/features/todos/todoSlice.test.ts | 2 +- .../counter-todo/src/features/todos/todoSlice.ts | 2 +- 6 files changed, 9 insertions(+), 5 deletions(-) diff --git a/examples/lazy-injection/counter-todo/.eslintrc.json b/examples/lazy-injection/counter-todo/.eslintrc.json index b3343e50ce..6ce2c92874 100644 --- a/examples/lazy-injection/counter-todo/.eslintrc.json +++ b/examples/lazy-injection/counter-todo/.eslintrc.json @@ -12,6 +12,10 @@ } ] } + ], + "@typescript-eslint/consistent-type-imports": [ + "error", + { "prefer": "type-imports", "fixStyle": "separate-type-imports" } ] } } diff --git a/examples/lazy-injection/counter-todo/src/app/middleware.ts b/examples/lazy-injection/counter-todo/src/app/middleware.ts index 553df46675..6d6e9ea516 100644 --- a/examples/lazy-injection/counter-todo/src/app/middleware.ts +++ b/examples/lazy-injection/counter-todo/src/app/middleware.ts @@ -1,5 +1,5 @@ import { createDynamicMiddleware } from "@reduxjs/toolkit/react" -import { AppDispatch, RootState } from "./store" +import type { AppDispatch, RootState } from "./store" const dynamicInstance = createDynamicMiddleware() diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts b/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts index a22f0325d7..64914c4d65 100644 --- a/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts +++ b/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts @@ -1,4 +1,4 @@ -import { Middleware } from "@reduxjs/toolkit" +import type { Middleware } from "@reduxjs/toolkit" import { getCount, selectCount } from "./counterSlice" export const counterMiddleware: Middleware<{ diff --git a/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts b/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts index 5899cbd0ce..d8b5de9dde 100644 --- a/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts +++ b/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts @@ -1,7 +1,7 @@ // Need to use the React-specific entry point to import `createApi` import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react" import { addAppMiddleware } from "../../app/middleware" -import { WithSlice } from "@reduxjs/toolkit" +import type { WithSlice } from "@reduxjs/toolkit" import { rootReducer } from "../../app/reducer" interface Quote { diff --git a/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.test.ts b/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.test.ts index 2329bfab04..d47a1b7f90 100644 --- a/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.test.ts +++ b/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.test.ts @@ -1,8 +1,8 @@ import { nanoid } from "@reduxjs/toolkit" import type { AppStore } from "../../app/store" import { makeStore } from "../../app/store" +import type { Todo } from "./todoSlice" import { - Todo, addTodo, deleteTodo, selectAllTodos, diff --git a/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts b/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts index 7026d86540..50db4028fe 100644 --- a/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts +++ b/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts @@ -1,6 +1,6 @@ import { createEntityAdapter, nanoid } from "@reduxjs/toolkit" import { createAppSlice } from "../../app/createAppSlice" -import { RootState } from "../../app/store" +import type { RootState } from "../../app/store" export interface Todo { id: string From 834f6d173d9db740992360838f49b8bf1bc2f73d Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Sun, 14 Jan 2024 20:00:09 +0000 Subject: [PATCH 21/46] move todos below add field Co-authored-by: Arya Emami --- .../lazy-injection/counter-todo/src/features/todos/Todos.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Todos.tsx b/examples/lazy-injection/counter-todo/src/features/todos/Todos.tsx index 77e3ff910c..fcb5fcdd0f 100644 --- a/examples/lazy-injection/counter-todo/src/features/todos/Todos.tsx +++ b/examples/lazy-injection/counter-todo/src/features/todos/Todos.tsx @@ -8,12 +8,12 @@ export function Todos() { const todoIds = useAppSelector(selectTodoIds) return (
+
{todoIds.map(id => ( ))}
-
) } From d8aa0dbdd88ea299ad548760a5c1cb0e1cebd6f6 Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Sun, 14 Jan 2024 20:58:19 +0000 Subject: [PATCH 22/46] add comment slice to demonstrate linked normalized state --- .../counter-todo/src/app/reducer.ts | 7 ++- .../src/features/todos/AddComment.tsx | 24 ++++++++ .../src/features/todos/Comment.tsx | 20 +++++++ .../counter-todo/src/features/todos/Todo.tsx | 25 +++++--- .../src/features/todos/Todos.module.css | 20 ++++++- .../src/features/todos/commentSlice.ts | 60 +++++++++++++++++++ .../src/features/todos/todoSlice.ts | 2 +- 7 files changed, 147 insertions(+), 11 deletions(-) create mode 100644 examples/lazy-injection/counter-todo/src/features/todos/AddComment.tsx create mode 100644 examples/lazy-injection/counter-todo/src/features/todos/Comment.tsx create mode 100644 examples/lazy-injection/counter-todo/src/features/todos/commentSlice.ts diff --git a/examples/lazy-injection/counter-todo/src/app/reducer.ts b/examples/lazy-injection/counter-todo/src/app/reducer.ts index 62e01e41ca..c657b6738a 100644 --- a/examples/lazy-injection/counter-todo/src/app/reducer.ts +++ b/examples/lazy-injection/counter-todo/src/app/reducer.ts @@ -1,9 +1,12 @@ import { combineSlices } from "@reduxjs/toolkit" import { todoSlice } from "../features/todos/todoSlice" +import { commentSlice } from "../features/todos/commentSlice" export interface LazyLoadedSlices {} // `combineSlices` automatically combines the reducers using // their `reducerPath`s, therefore we no longer need to call `combineReducers`. -export const rootReducer = - combineSlices(todoSlice).withLazyLoadedSlices() +export const rootReducer = combineSlices( + todoSlice, + commentSlice, +).withLazyLoadedSlices() diff --git a/examples/lazy-injection/counter-todo/src/features/todos/AddComment.tsx b/examples/lazy-injection/counter-todo/src/features/todos/AddComment.tsx new file mode 100644 index 0000000000..1f6f1b8259 --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/todos/AddComment.tsx @@ -0,0 +1,24 @@ +import { useState } from "react" +import styles from "./Todos.module.css" +import { useAppDispatch } from "../../app/hooks" +import { addComment } from "./commentSlice" + +export function AddComment({ todoId }: { todoId: string }) { + const dispatch = useAppDispatch() + const [message, setMessage] = useState("") + return ( +
+ setMessage(e.target.value)} /> + +
+ ) +} diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Comment.tsx b/examples/lazy-injection/counter-todo/src/features/todos/Comment.tsx new file mode 100644 index 0000000000..0be56ca16e --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/todos/Comment.tsx @@ -0,0 +1,20 @@ +import { useAppDispatch } from "../../app/hooks" +import { deleteComment, type Comment } from "./commentSlice" +import styles from "./Todos.module.css" + +export function CommentDisplay({ comment }: { comment: Comment }) { + const dispatch = useAppDispatch() + return ( +
+

{comment.message}

+ +
+ ) +} diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx b/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx index 4343c9b532..fa24ee3307 100644 --- a/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx +++ b/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx @@ -1,20 +1,31 @@ import { useAppDispatch, useAppSelector } from "../../app/hooks" import { deleteTodo, selectTodoById } from "./todoSlice" import styles from "./Todos.module.css" +import { AddComment } from "./AddComment" +import { selectCommentsByTodoId } from "./commentSlice" +import { CommentDisplay } from "./Comment" export function Todo({ id }: { id: string }) { const dispatch = useAppDispatch() const todo = useAppSelector(state => selectTodoById(state, id)) + const comments = useAppSelector(state => selectCommentsByTodoId(state, id)) if (!todo) return null return (
-

{todo.title}

- +
+

{todo.title}

+ +
+
+ {comments.map(comment => ( + + ))} +
) } diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Todos.module.css b/examples/lazy-injection/counter-todo/src/features/todos/Todos.module.css index f02f81a79e..adf4eec7d0 100644 --- a/examples/lazy-injection/counter-todo/src/features/todos/Todos.module.css +++ b/examples/lazy-injection/counter-todo/src/features/todos/Todos.module.css @@ -13,15 +13,33 @@ .todo { display: flex; + flex-direction: column; border: 1px solid black; padding: 12px; gap: 12px; - align-items: center; } .todo p { margin: 0; flex: 1; + text-align: start; +} + +.todoHeader { + display: flex; + flex-direction: row; + gap: 12px; + align-items: center; +} + +.todo hr { + width: 100%; +} + +.comment { + display: flex; + gap: 12px; + align-items: center; } .button { diff --git a/examples/lazy-injection/counter-todo/src/features/todos/commentSlice.ts b/examples/lazy-injection/counter-todo/src/features/todos/commentSlice.ts new file mode 100644 index 0000000000..341bf07d2b --- /dev/null +++ b/examples/lazy-injection/counter-todo/src/features/todos/commentSlice.ts @@ -0,0 +1,60 @@ +import type { EntityState } from "@reduxjs/toolkit" +import { createEntityAdapter, createSelector, nanoid } from "@reduxjs/toolkit" +import { createAppSlice } from "../../app/createAppSlice" +import { deleteTodo } from "./todoSlice" + +export interface Comment { + id: string + todoId: string + message: string +} + +const commentAdapter = createEntityAdapter() + +const localisedSelectors = commentAdapter.getSelectors() + +export const commentSlice = createAppSlice({ + name: "comments", + initialState: commentAdapter.getInitialState(), + reducers: { + addComment: { + reducer: commentAdapter.setOne, + prepare: (comment: Omit) => ({ + payload: { id: nanoid(), ...comment }, + }), + }, + deleteComment: commentAdapter.removeOne, + }, + extraReducers: builder => { + builder.addCase(deleteTodo, (state, action) => { + commentAdapter.removeMany( + state, + state.ids.filter(id => state.entities[id]?.todoId === action.payload), + ) + }) + }, + selectors: { + selectAllComments: localisedSelectors.selectAll, + selectCommentById: localisedSelectors.selectById, + selectCommentEntities: localisedSelectors.selectEntities, + selectCommentIds: localisedSelectors.selectIds, + selectCommentTotal: localisedSelectors.selectTotal, + selectCommentsByTodoId: createSelector( + localisedSelectors.selectAll, + (_state: EntityState, todoId: string) => todoId, + (comments, todoId) => + comments.filter(comment => comment.todoId === todoId), + ), + }, +}) + +export const { addComment, deleteComment } = commentSlice.actions + +export const { + selectAllComments, + selectCommentById, + selectCommentEntities, + selectCommentIds, + selectCommentTotal, + selectCommentsByTodoId, +} = commentSlice.selectors diff --git a/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts b/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts index 50db4028fe..c9e08d4f25 100644 --- a/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts +++ b/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts @@ -1,4 +1,4 @@ -import { createEntityAdapter, nanoid } from "@reduxjs/toolkit" +import { createEntityAdapter, createSelector, nanoid } from "@reduxjs/toolkit" import { createAppSlice } from "../../app/createAppSlice" import type { RootState } from "../../app/store" From 4df467073b74ad24a05aa3829af32e8976507877 Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Sun, 14 Jan 2024 20:59:08 +0000 Subject: [PATCH 23/46] Rename example to kitchen-sink --- .../{counter-todo => kitchen-sink}/.eslintrc.json | 0 .../lazy-injection/{counter-todo => kitchen-sink}/.gitignore | 0 .../{counter-todo => kitchen-sink}/.prettierrc.json | 0 .../lazy-injection/{counter-todo => kitchen-sink}/README.md | 0 .../lazy-injection/{counter-todo => kitchen-sink}/index.html | 0 .../lazy-injection/{counter-todo => kitchen-sink}/package.json | 2 +- .../lazy-injection/{counter-todo => kitchen-sink}/src/App.css | 0 .../{counter-todo => kitchen-sink}/src/App.test.tsx | 0 .../lazy-injection/{counter-todo => kitchen-sink}/src/App.tsx | 0 .../{counter-todo => kitchen-sink}/src/app/createAppSlice.ts | 0 .../{counter-todo => kitchen-sink}/src/app/hooks.ts | 0 .../{counter-todo => kitchen-sink}/src/app/middleware.ts | 0 .../{counter-todo => kitchen-sink}/src/app/reducer.ts | 0 .../{counter-todo => kitchen-sink}/src/app/store.ts | 0 .../src/features/counter/Counter.module.css | 0 .../src/features/counter/Counter.tsx | 0 .../src/features/counter/counterAPI.ts | 0 .../src/features/counter/counterMiddleware.ts | 0 .../src/features/counter/counterSlice.test.ts | 0 .../src/features/counter/counterSlice.ts | 0 .../src/features/quotes/Quotes.module.css | 0 .../src/features/quotes/Quotes.tsx | 0 .../src/features/quotes/quotesApiSlice.ts | 0 .../src/features/todos/AddComment.tsx | 0 .../src/features/todos/AddTodo.tsx | 0 .../src/features/todos/Comment.tsx | 0 .../{counter-todo => kitchen-sink}/src/features/todos/Todo.tsx | 0 .../src/features/todos/Todos.module.css | 0 .../{counter-todo => kitchen-sink}/src/features/todos/Todos.tsx | 0 .../src/features/todos/commentSlice.ts | 0 .../src/features/todos/todoSlice.test.ts | 0 .../src/features/todos/todoSlice.ts | 0 .../lazy-injection/{counter-todo => kitchen-sink}/src/index.css | 0 .../lazy-injection/{counter-todo => kitchen-sink}/src/logo.svg | 0 .../lazy-injection/{counter-todo => kitchen-sink}/src/main.tsx | 0 .../{counter-todo => kitchen-sink}/src/setupTests.ts | 0 .../{counter-todo => kitchen-sink}/src/utils/test-utils.tsx | 0 .../{counter-todo => kitchen-sink}/src/vite-env.d.ts | 0 .../lazy-injection/{counter-todo => kitchen-sink}/tsconfig.json | 0 .../{counter-todo => kitchen-sink}/tsconfig.node.json | 0 .../{counter-todo => kitchen-sink}/vite.config.ts | 0 41 files changed, 1 insertion(+), 1 deletion(-) rename examples/lazy-injection/{counter-todo => kitchen-sink}/.eslintrc.json (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/.gitignore (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/.prettierrc.json (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/README.md (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/index.html (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/package.json (95%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/App.css (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/App.test.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/App.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/app/createAppSlice.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/app/hooks.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/app/middleware.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/app/reducer.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/app/store.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/counter/Counter.module.css (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/counter/Counter.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/counter/counterAPI.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/counter/counterMiddleware.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/counter/counterSlice.test.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/counter/counterSlice.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/quotes/Quotes.module.css (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/quotes/Quotes.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/quotes/quotesApiSlice.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/todos/AddComment.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/todos/AddTodo.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/todos/Comment.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/todos/Todo.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/todos/Todos.module.css (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/todos/Todos.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/todos/commentSlice.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/todos/todoSlice.test.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/features/todos/todoSlice.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/index.css (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/logo.svg (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/main.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/setupTests.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/utils/test-utils.tsx (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/src/vite-env.d.ts (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/tsconfig.json (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/tsconfig.node.json (100%) rename examples/lazy-injection/{counter-todo => kitchen-sink}/vite.config.ts (100%) diff --git a/examples/lazy-injection/counter-todo/.eslintrc.json b/examples/lazy-injection/kitchen-sink/.eslintrc.json similarity index 100% rename from examples/lazy-injection/counter-todo/.eslintrc.json rename to examples/lazy-injection/kitchen-sink/.eslintrc.json diff --git a/examples/lazy-injection/counter-todo/.gitignore b/examples/lazy-injection/kitchen-sink/.gitignore similarity index 100% rename from examples/lazy-injection/counter-todo/.gitignore rename to examples/lazy-injection/kitchen-sink/.gitignore diff --git a/examples/lazy-injection/counter-todo/.prettierrc.json b/examples/lazy-injection/kitchen-sink/.prettierrc.json similarity index 100% rename from examples/lazy-injection/counter-todo/.prettierrc.json rename to examples/lazy-injection/kitchen-sink/.prettierrc.json diff --git a/examples/lazy-injection/counter-todo/README.md b/examples/lazy-injection/kitchen-sink/README.md similarity index 100% rename from examples/lazy-injection/counter-todo/README.md rename to examples/lazy-injection/kitchen-sink/README.md diff --git a/examples/lazy-injection/counter-todo/index.html b/examples/lazy-injection/kitchen-sink/index.html similarity index 100% rename from examples/lazy-injection/counter-todo/index.html rename to examples/lazy-injection/kitchen-sink/index.html diff --git a/examples/lazy-injection/counter-todo/package.json b/examples/lazy-injection/kitchen-sink/package.json similarity index 95% rename from examples/lazy-injection/counter-todo/package.json rename to examples/lazy-injection/kitchen-sink/package.json index e44d6b995c..3a8b440007 100644 --- a/examples/lazy-injection/counter-todo/package.json +++ b/examples/lazy-injection/kitchen-sink/package.json @@ -1,5 +1,5 @@ { - "name": "@examples-lazy-injection/counter-todo", + "name": "@examples-lazy-injection/kitchen-sink", "private": true, "version": "0.0.0", "type": "module", diff --git a/examples/lazy-injection/counter-todo/src/App.css b/examples/lazy-injection/kitchen-sink/src/App.css similarity index 100% rename from examples/lazy-injection/counter-todo/src/App.css rename to examples/lazy-injection/kitchen-sink/src/App.css diff --git a/examples/lazy-injection/counter-todo/src/App.test.tsx b/examples/lazy-injection/kitchen-sink/src/App.test.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/App.test.tsx rename to examples/lazy-injection/kitchen-sink/src/App.test.tsx diff --git a/examples/lazy-injection/counter-todo/src/App.tsx b/examples/lazy-injection/kitchen-sink/src/App.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/App.tsx rename to examples/lazy-injection/kitchen-sink/src/App.tsx diff --git a/examples/lazy-injection/counter-todo/src/app/createAppSlice.ts b/examples/lazy-injection/kitchen-sink/src/app/createAppSlice.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/app/createAppSlice.ts rename to examples/lazy-injection/kitchen-sink/src/app/createAppSlice.ts diff --git a/examples/lazy-injection/counter-todo/src/app/hooks.ts b/examples/lazy-injection/kitchen-sink/src/app/hooks.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/app/hooks.ts rename to examples/lazy-injection/kitchen-sink/src/app/hooks.ts diff --git a/examples/lazy-injection/counter-todo/src/app/middleware.ts b/examples/lazy-injection/kitchen-sink/src/app/middleware.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/app/middleware.ts rename to examples/lazy-injection/kitchen-sink/src/app/middleware.ts diff --git a/examples/lazy-injection/counter-todo/src/app/reducer.ts b/examples/lazy-injection/kitchen-sink/src/app/reducer.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/app/reducer.ts rename to examples/lazy-injection/kitchen-sink/src/app/reducer.ts diff --git a/examples/lazy-injection/counter-todo/src/app/store.ts b/examples/lazy-injection/kitchen-sink/src/app/store.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/app/store.ts rename to examples/lazy-injection/kitchen-sink/src/app/store.ts diff --git a/examples/lazy-injection/counter-todo/src/features/counter/Counter.module.css b/examples/lazy-injection/kitchen-sink/src/features/counter/Counter.module.css similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/counter/Counter.module.css rename to examples/lazy-injection/kitchen-sink/src/features/counter/Counter.module.css diff --git a/examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx b/examples/lazy-injection/kitchen-sink/src/features/counter/Counter.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/counter/Counter.tsx rename to examples/lazy-injection/kitchen-sink/src/features/counter/Counter.tsx diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterAPI.ts b/examples/lazy-injection/kitchen-sink/src/features/counter/counterAPI.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/counter/counterAPI.ts rename to examples/lazy-injection/kitchen-sink/src/features/counter/counterAPI.ts diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts b/examples/lazy-injection/kitchen-sink/src/features/counter/counterMiddleware.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/counter/counterMiddleware.ts rename to examples/lazy-injection/kitchen-sink/src/features/counter/counterMiddleware.ts diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.test.ts b/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.test.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/counter/counterSlice.test.ts rename to examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.test.ts diff --git a/examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/counter/counterSlice.ts rename to examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.ts diff --git a/examples/lazy-injection/counter-todo/src/features/quotes/Quotes.module.css b/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.module.css similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/quotes/Quotes.module.css rename to examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.module.css diff --git a/examples/lazy-injection/counter-todo/src/features/quotes/Quotes.tsx b/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/quotes/Quotes.tsx rename to examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.tsx diff --git a/examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/quotes/quotesApiSlice.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/quotes/quotesApiSlice.ts rename to examples/lazy-injection/kitchen-sink/src/features/quotes/quotesApiSlice.ts diff --git a/examples/lazy-injection/counter-todo/src/features/todos/AddComment.tsx b/examples/lazy-injection/kitchen-sink/src/features/todos/AddComment.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/todos/AddComment.tsx rename to examples/lazy-injection/kitchen-sink/src/features/todos/AddComment.tsx diff --git a/examples/lazy-injection/counter-todo/src/features/todos/AddTodo.tsx b/examples/lazy-injection/kitchen-sink/src/features/todos/AddTodo.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/todos/AddTodo.tsx rename to examples/lazy-injection/kitchen-sink/src/features/todos/AddTodo.tsx diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Comment.tsx b/examples/lazy-injection/kitchen-sink/src/features/todos/Comment.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/todos/Comment.tsx rename to examples/lazy-injection/kitchen-sink/src/features/todos/Comment.tsx diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx b/examples/lazy-injection/kitchen-sink/src/features/todos/Todo.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/todos/Todo.tsx rename to examples/lazy-injection/kitchen-sink/src/features/todos/Todo.tsx diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Todos.module.css b/examples/lazy-injection/kitchen-sink/src/features/todos/Todos.module.css similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/todos/Todos.module.css rename to examples/lazy-injection/kitchen-sink/src/features/todos/Todos.module.css diff --git a/examples/lazy-injection/counter-todo/src/features/todos/Todos.tsx b/examples/lazy-injection/kitchen-sink/src/features/todos/Todos.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/todos/Todos.tsx rename to examples/lazy-injection/kitchen-sink/src/features/todos/Todos.tsx diff --git a/examples/lazy-injection/counter-todo/src/features/todos/commentSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/todos/commentSlice.ts rename to examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts diff --git a/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.test.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.test.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/todos/todoSlice.test.ts rename to examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.test.ts diff --git a/examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/features/todos/todoSlice.ts rename to examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.ts diff --git a/examples/lazy-injection/counter-todo/src/index.css b/examples/lazy-injection/kitchen-sink/src/index.css similarity index 100% rename from examples/lazy-injection/counter-todo/src/index.css rename to examples/lazy-injection/kitchen-sink/src/index.css diff --git a/examples/lazy-injection/counter-todo/src/logo.svg b/examples/lazy-injection/kitchen-sink/src/logo.svg similarity index 100% rename from examples/lazy-injection/counter-todo/src/logo.svg rename to examples/lazy-injection/kitchen-sink/src/logo.svg diff --git a/examples/lazy-injection/counter-todo/src/main.tsx b/examples/lazy-injection/kitchen-sink/src/main.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/main.tsx rename to examples/lazy-injection/kitchen-sink/src/main.tsx diff --git a/examples/lazy-injection/counter-todo/src/setupTests.ts b/examples/lazy-injection/kitchen-sink/src/setupTests.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/setupTests.ts rename to examples/lazy-injection/kitchen-sink/src/setupTests.ts diff --git a/examples/lazy-injection/counter-todo/src/utils/test-utils.tsx b/examples/lazy-injection/kitchen-sink/src/utils/test-utils.tsx similarity index 100% rename from examples/lazy-injection/counter-todo/src/utils/test-utils.tsx rename to examples/lazy-injection/kitchen-sink/src/utils/test-utils.tsx diff --git a/examples/lazy-injection/counter-todo/src/vite-env.d.ts b/examples/lazy-injection/kitchen-sink/src/vite-env.d.ts similarity index 100% rename from examples/lazy-injection/counter-todo/src/vite-env.d.ts rename to examples/lazy-injection/kitchen-sink/src/vite-env.d.ts diff --git a/examples/lazy-injection/counter-todo/tsconfig.json b/examples/lazy-injection/kitchen-sink/tsconfig.json similarity index 100% rename from examples/lazy-injection/counter-todo/tsconfig.json rename to examples/lazy-injection/kitchen-sink/tsconfig.json diff --git a/examples/lazy-injection/counter-todo/tsconfig.node.json b/examples/lazy-injection/kitchen-sink/tsconfig.node.json similarity index 100% rename from examples/lazy-injection/counter-todo/tsconfig.node.json rename to examples/lazy-injection/kitchen-sink/tsconfig.node.json diff --git a/examples/lazy-injection/counter-todo/vite.config.ts b/examples/lazy-injection/kitchen-sink/vite.config.ts similarity index 100% rename from examples/lazy-injection/counter-todo/vite.config.ts rename to examples/lazy-injection/kitchen-sink/vite.config.ts From 60068d60824d027b877b843c0b09fd6ee2a62c39 Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Sun, 14 Jan 2024 21:11:32 +0000 Subject: [PATCH 24/46] update lockfile --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 75bf3c2777..3986c0f917 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4887,9 +4887,9 @@ __metadata: languageName: unknown linkType: soft -"@examples-lazy-injection/counter-todo@workspace:examples/lazy-injection/counter-todo": +"@examples-lazy-injection/kitchen-sink@workspace:examples/lazy-injection/kitchen-sink": version: 0.0.0-use.local - resolution: "@examples-lazy-injection/counter-todo@workspace:examples/lazy-injection/counter-todo" + resolution: "@examples-lazy-injection/kitchen-sink@workspace:examples/lazy-injection/kitchen-sink" dependencies: "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4fe0b237/@reduxjs/toolkit/_pkg.tgz" "@testing-library/dom": ^9.3.3 From a011ea5f13be4f1e89173912b088c8f63c189f2a Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Sun, 14 Jan 2024 21:28:01 +0000 Subject: [PATCH 25/46] Add comment slice tests --- .../src/features/todos/commentSlice.test.ts | 82 +++++++++++++++++++ .../src/features/todos/commentSlice.ts | 2 +- 2 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.test.ts diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.test.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.test.ts new file mode 100644 index 0000000000..4cf7d37994 --- /dev/null +++ b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.test.ts @@ -0,0 +1,82 @@ +import { nanoid } from "@reduxjs/toolkit" +import type { Comment } from "./commentSlice" +import { + commentSlice, + addComment, + deleteComment, + selectAllComments, + selectCommentById, + selectCommentTotal, + selectCommentsByTodoId, + commentAdapter, +} from "./commentSlice" +import type { AppStore } from "../../app/store" +import { makeStore } from "../../app/store" +import { todoAdapter, type Todo, deleteTodo } from "./todoSlice" + +interface LocalTestContext { + store: AppStore +} + +const initialTodo: Todo = { id: nanoid(), title: "Initial todo" } +const initialComment: Comment = { + id: nanoid(), + todoId: initialTodo.id, + message: "Initial comment", +} + +describe("comment slice", it => { + beforeEach(context => { + const store = makeStore({ + todo: todoAdapter.setOne(todoAdapter.getInitialState(), initialTodo), + comments: commentAdapter.setOne( + commentAdapter.getInitialState(), + initialComment, + ), + }) + + context.store = store + }) + + it("should handle initial state", () => { + expect(commentSlice.reducer(undefined, { type: "unknown" })).toStrictEqual( + commentSlice.getInitialState(), + ) + }) + + it("should add a comment", ({ store }) => { + expect(selectCommentTotal(store.getState())).toBe(1) + expect( + selectCommentById(store.getState(), initialComment.id), + ).toStrictEqual(initialComment) + const comment = { + todoId: initialTodo.id, + message: "This is a comment", + } + + store.dispatch(addComment(comment)) + + const comments = selectAllComments(store.getState()) + expect(comments).toEqual([ + initialComment, + { id: expect.any(String), ...comment }, + ]) + }) + + it("should delete a comment", ({ store }) => { + expect(selectCommentTotal(store.getState())).toBe(1) + store.dispatch(deleteComment(initialComment.id)) + + const comments = selectAllComments(store.getState()) + expect(comments.length).toBe(0) + }) + + it("should delete a comment when its todo is deleted", ({ store }) => { + expect(selectCommentTotal(store.getState())).toBe(1) + expect(selectCommentsByTodoId(store.getState(), initialTodo.id)).toEqual([ + initialComment, + ]) + store.dispatch(deleteTodo(initialTodo.id)) + expect(selectCommentsByTodoId(store.getState(), initialTodo.id)).toEqual([]) + }) +}) diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts index 341bf07d2b..22213104b6 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts +++ b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts @@ -9,7 +9,7 @@ export interface Comment { message: string } -const commentAdapter = createEntityAdapter() +export const commentAdapter = createEntityAdapter() const localisedSelectors = commentAdapter.getSelectors() From cd18280dfa7e520d1e71e4a6909474c04f255075 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Sun, 14 Jan 2024 22:33:09 +0000 Subject: [PATCH 26/46] Update examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.test.ts Co-authored-by: Arya Emami --- .../kitchen-sink/src/features/todos/commentSlice.test.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.test.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.test.ts index 4cf7d37994..5e7a550703 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.test.ts +++ b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.test.ts @@ -12,7 +12,8 @@ import { } from "./commentSlice" import type { AppStore } from "../../app/store" import { makeStore } from "../../app/store" -import { todoAdapter, type Todo, deleteTodo } from "./todoSlice" +import type { Todo } from "./todoSlice" +import { todoAdapter, deleteTodo } from "./todoSlice" interface LocalTestContext { store: AppStore From 77f4f95c422e239a7e7b1dcb956d12e6f8f4a380 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Mon, 15 Jan 2024 00:05:03 +0000 Subject: [PATCH 27/46] Use different build of RTK --- examples/lazy-injection/kitchen-sink/package.json | 2 +- .../kitchen-sink/src/features/todos/todoSlice.ts | 2 +- yarn.lock | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/lazy-injection/kitchen-sink/package.json b/examples/lazy-injection/kitchen-sink/package.json index 3a8b440007..256531cb1a 100644 --- a/examples/lazy-injection/kitchen-sink/package.json +++ b/examples/lazy-injection/kitchen-sink/package.json @@ -15,7 +15,7 @@ "type-check": "tsc" }, "dependencies": { - "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4fe0b237/@reduxjs/toolkit/_pkg.tgz", + "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/f5c46a2a/@reduxjs/toolkit/_pkg.tgz", "clsx": "^2.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.ts index c9e08d4f25..50db4028fe 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.ts +++ b/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.ts @@ -1,4 +1,4 @@ -import { createEntityAdapter, createSelector, nanoid } from "@reduxjs/toolkit" +import { createEntityAdapter, nanoid } from "@reduxjs/toolkit" import { createAppSlice } from "../../app/createAppSlice" import type { RootState } from "../../app/store" diff --git a/yarn.lock b/yarn.lock index 3986c0f917..b1632e714b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4891,7 +4891,7 @@ __metadata: version: 0.0.0-use.local resolution: "@examples-lazy-injection/kitchen-sink@workspace:examples/lazy-injection/kitchen-sink" dependencies: - "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4fe0b237/@reduxjs/toolkit/_pkg.tgz" + "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/f5c46a2a/@reduxjs/toolkit/_pkg.tgz" "@testing-library/dom": ^9.3.3 "@testing-library/jest-dom": ^6.1.6 "@testing-library/react": ^14.1.2 @@ -7232,9 +7232,9 @@ __metadata: languageName: unknown linkType: soft -"@reduxjs/toolkit@https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4fe0b237/@reduxjs/toolkit/_pkg.tgz": +"@reduxjs/toolkit@https://pkg.csb.dev/reduxjs/redux-toolkit/commit/f5c46a2a/@reduxjs/toolkit/_pkg.tgz": version: 2.0.2 - resolution: "@reduxjs/toolkit@https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4fe0b237/@reduxjs/toolkit/_pkg.tgz" + resolution: "@reduxjs/toolkit@https://pkg.csb.dev/reduxjs/redux-toolkit/commit/f5c46a2a/@reduxjs/toolkit/_pkg.tgz" dependencies: immer: ^10.0.3 redux: ^5.0.1 @@ -7248,7 +7248,7 @@ __metadata: optional: true react-redux: optional: true - checksum: 63ee7c57c445943f212e1ec9afd86c7691b36940b295fe7556e0cb74ef936f80bf525add8f3a403e21eb65e52d6e4b857ec6c34c3ede9bab0fb6d8a82d0ba870 + checksum: 5f82363686d326bfd12e23eaffa9344f630411720af791eb3f73842f23e8130cb0f4ce77fd370d06d51d57baf5b1436951218f9753146a23e45b6e10427a9de5 languageName: node linkType: hard From 0c327731dee9060522e56d1f7a12683fa7c64e67 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Mon, 15 Jan 2024 00:20:21 +0000 Subject: [PATCH 28/46] ensure reselect 5.1 and demo .withTypes --- .../src/features/todos/commentSlice.ts | 17 ++++++++++------- yarn.lock | 6 +++--- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts index 22213104b6..73d3d391d6 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts +++ b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts @@ -1,4 +1,3 @@ -import type { EntityState } from "@reduxjs/toolkit" import { createEntityAdapter, createSelector, nanoid } from "@reduxjs/toolkit" import { createAppSlice } from "../../app/createAppSlice" import { deleteTodo } from "./todoSlice" @@ -13,9 +12,14 @@ export const commentAdapter = createEntityAdapter() const localisedSelectors = commentAdapter.getSelectors() +const initialState = commentAdapter.getInitialState() + +const createCommentSliceSelector = + createSelector.withTypes() + export const commentSlice = createAppSlice({ name: "comments", - initialState: commentAdapter.getInitialState(), + initialState, reducers: { addComment: { reducer: commentAdapter.setOne, @@ -29,7 +33,7 @@ export const commentSlice = createAppSlice({ builder.addCase(deleteTodo, (state, action) => { commentAdapter.removeMany( state, - state.ids.filter(id => state.entities[id]?.todoId === action.payload), + state.ids.filter(id => state.entities[id]?.todoId === action.payload) ) }) }, @@ -39,11 +43,10 @@ export const commentSlice = createAppSlice({ selectCommentEntities: localisedSelectors.selectEntities, selectCommentIds: localisedSelectors.selectIds, selectCommentTotal: localisedSelectors.selectTotal, - selectCommentsByTodoId: createSelector( - localisedSelectors.selectAll, - (_state: EntityState, todoId: string) => todoId, + selectCommentsByTodoId: createCommentSliceSelector( + [localisedSelectors.selectAll, (_state, todoId: string) => todoId], (comments, todoId) => - comments.filter(comment => comment.todoId === todoId), + comments.filter(comment => comment.todoId === todoId) ), }, }) diff --git a/yarn.lock b/yarn.lock index b1632e714b..306bcca657 100644 --- a/yarn.lock +++ b/yarn.lock @@ -26954,9 +26954,9 @@ fsevents@^1.2.7: linkType: hard "reselect@npm:^5.0.1": - version: 5.0.1 - resolution: "reselect@npm:5.0.1" - checksum: 7663b4c28a0e908e74dc25262e1d813d028b9c2ee96160cb0f40a16f09c5ac632fa16af6bafede7eb0ff16ab2d5bea2cd8814d9a9488e0262b8317fef90b1dc0 + version: 5.1.0 + resolution: "reselect@npm:5.1.0" + checksum: 5bc9c5d03d7caea00d0c0e24330bf23d91801227346fec1cef6a60988ab8d3dd7cee76e6994ca0915bc1c20845bb2bd929b95753763e0a9db74c0f9dff5cb845 languageName: node linkType: hard From 73820b5f1f292b21be425551fada7ea4a7cdd015 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Mon, 15 Jan 2024 00:26:38 +0000 Subject: [PATCH 29/46] add withTypes to createDraftSafeSelector --- .../toolkit/src/createDraftSafeSelector.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/toolkit/src/createDraftSafeSelector.ts b/packages/toolkit/src/createDraftSafeSelector.ts index 6fe8d267d2..67b5465687 100644 --- a/packages/toolkit/src/createDraftSafeSelector.ts +++ b/packages/toolkit/src/createDraftSafeSelector.ts @@ -5,13 +5,17 @@ export const createDraftSafeSelectorCreator: typeof createSelectorCreator = ( ...args: unknown[] ) => { const createSelector = (createSelectorCreator as any)(...args) - return (...args: unknown[]) => { - const selector = createSelector(...args) - const wrappedSelector = (value: unknown, ...rest: unknown[]) => - selector(isDraft(value) ? current(value) : value, ...rest) - Object.assign(wrappedSelector, selector) - return wrappedSelector as any - } + const createDraftSafeSelector = Object.assign( + (...args: unknown[]) => { + const selector = createSelector(...args) + const wrappedSelector = (value: unknown, ...rest: unknown[]) => + selector(isDraft(value) ? current(value) : value, ...rest) + Object.assign(wrappedSelector, selector) + return wrappedSelector as any + }, + { withTypes: () => createDraftSafeSelector } + ) + return createDraftSafeSelector } /** From 785eed7817ca7b9ac33c98509b4e96fcfd234bf3 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Mon, 15 Jan 2024 00:27:35 +0000 Subject: [PATCH 30/46] fix ci settings --- .codesandbox/ci.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 529800b794..65acac16e4 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -6,7 +6,7 @@ "/examples/query/react/basic", "/examples/query/react/advanced", "/examples/action-listener/counter", - "/examples/lazy-injection/counter-todo", + "/examples/lazy-injection/kitchen-sink", "/examples/publish-ci/cra5" ], "node": "18", From 3bf655b1ba5b4dbc58eccd88c5aff15d47a4cc83 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Mon, 15 Jan 2024 00:52:22 +0000 Subject: [PATCH 31/46] remove unnecessary casts --- .../src/query/tests/buildHooks.test.tsx | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/toolkit/src/query/tests/buildHooks.test.tsx b/packages/toolkit/src/query/tests/buildHooks.test.tsx index e9f1f1ac90..e5ef9c438f 100644 --- a/packages/toolkit/src/query/tests/buildHooks.test.tsx +++ b/packages/toolkit/src/query/tests/buildHooks.test.tsx @@ -35,7 +35,11 @@ import { server } from './mocks/server' import type { UnknownAction } from 'redux' import type { SubscriptionOptions } from '@reduxjs/toolkit/dist/query/core/apiState' import type { SerializedError } from '@reduxjs/toolkit' -import { createListenerMiddleware, configureStore, createSlice } from '@reduxjs/toolkit' +import { + createListenerMiddleware, + configureStore, + createSlice, +} from '@reduxjs/toolkit' import { delay } from '../../utils' import type { SubscriptionSelectors } from '../core/buildMiddleware/types' import { countObjectKeys } from '../utils/countObjectKeys' @@ -1479,7 +1483,7 @@ describe('hooks tests', () => { userEvent.hover(screen.getByTestId('highPriority')) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1500,7 +1504,7 @@ describe('hooks tests', () => { ) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1548,7 +1552,7 @@ describe('hooks tests', () => { userEvent.hover(screen.getByTestId('lowPriority')) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1566,7 +1570,7 @@ describe('hooks tests', () => { await waitMs() expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1616,7 +1620,7 @@ describe('hooks tests', () => { // This should run the query being that we're past the threshold userEvent.hover(screen.getByTestId('lowPriority')) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1636,7 +1640,7 @@ describe('hooks tests', () => { ) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1683,13 +1687,13 @@ describe('hooks tests', () => { // Get a snapshot of the last result const latestQueryData = api.endpoints.getUser.select(USER_ID)( - storeRef.store.getState() as any + storeRef.store.getState() ) userEvent.hover(screen.getByTestId('lowPriority')) // Serve up the result from the cache being that the condition wasn't met expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) ).toEqual(latestQueryData) }) @@ -1717,7 +1721,7 @@ describe('hooks tests', () => { userEvent.hover(screen.getByTestId('lowPriority')) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) ).toEqual({ endpointName: 'getUser', isError: false, @@ -2053,13 +2057,13 @@ describe('hooks with createApi defaults set', () => { }) const counterSlice = createSlice({ - name: "counter", + name: 'counter', initialState: { count: 0 }, reducers: { increment(state) { state.count++ - } - } + }, + }, }) const storeRef = setupApiStore(api, { @@ -2353,7 +2357,9 @@ describe('hooks with createApi defaults set', () => { return (
storeRef.store.dispatch(counterSlice.actions.increment())} + onClick={() => + storeRef.store.dispatch(counterSlice.actions.increment()) + } > Increment Count
From 7df80d5de39811422b9057f9fab99951277b24ba Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Mon, 15 Jan 2024 10:12:01 +0000 Subject: [PATCH 32/46] pass localised selectors to createSlice --- .../src/features/todos/commentSlice.ts | 20 ++++++++----------- .../src/features/todos/todoSlice.ts | 6 ++++-- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts index 73d3d391d6..a54adecb17 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts +++ b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts @@ -33,20 +33,16 @@ export const commentSlice = createAppSlice({ builder.addCase(deleteTodo, (state, action) => { commentAdapter.removeMany( state, - state.ids.filter(id => state.entities[id]?.todoId === action.payload) + state.ids.filter(id => state.entities[id]?.todoId === action.payload), ) }) }, selectors: { - selectAllComments: localisedSelectors.selectAll, - selectCommentById: localisedSelectors.selectById, - selectCommentEntities: localisedSelectors.selectEntities, - selectCommentIds: localisedSelectors.selectIds, - selectCommentTotal: localisedSelectors.selectTotal, + ...localisedSelectors, selectCommentsByTodoId: createCommentSliceSelector( [localisedSelectors.selectAll, (_state, todoId: string) => todoId], (comments, todoId) => - comments.filter(comment => comment.todoId === todoId) + comments.filter(comment => comment.todoId === todoId), ), }, }) @@ -54,10 +50,10 @@ export const commentSlice = createAppSlice({ export const { addComment, deleteComment } = commentSlice.actions export const { - selectAllComments, - selectCommentById, - selectCommentEntities, - selectCommentIds, - selectCommentTotal, + selectAll: selectAllComments, + selectById: selectCommentById, + selectEntities: selectCommentEntities, + selectIds: selectCommentIds, + selectTotal: selectCommentTotal, selectCommentsByTodoId, } = commentSlice.selectors diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.ts index 50db4028fe..930e87aca4 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.ts +++ b/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.ts @@ -1,6 +1,5 @@ import { createEntityAdapter, nanoid } from "@reduxjs/toolkit" import { createAppSlice } from "../../app/createAppSlice" -import type { RootState } from "../../app/store" export interface Todo { id: string @@ -21,6 +20,9 @@ export const todoSlice = createAppSlice({ }, deleteTodo: todoAdapter.removeOne, }, + selectors: { + ...todoAdapter.getSelectors(), + }, }) export const { addTodo, deleteTodo } = todoSlice.actions @@ -31,4 +33,4 @@ export const { selectEntities: selectTodoEntities, selectIds: selectTodoIds, selectTotal: selectTodoTotal, -} = todoAdapter.getSelectors((state: RootState) => todoSlice.selectSlice(state)) +} = todoSlice.selectors From 686205a5cc6032aaeb26bdceecc0326ea84635ce Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Mon, 15 Jan 2024 14:54:38 +0000 Subject: [PATCH 33/46] lazy load comments --- .../lazy-injection/kitchen-sink/src/App.tsx | 8 ++++++-- .../kitchen-sink/src/app/reducer.ts | 7 ++----- .../kitchen-sink/src/features/todos/Todos.tsx | 17 +++++++++++------ .../src/features/todos/commentSlice.ts | 10 +++++++++- 4 files changed, 28 insertions(+), 14 deletions(-) diff --git a/examples/lazy-injection/kitchen-sink/src/App.tsx b/examples/lazy-injection/kitchen-sink/src/App.tsx index 95b153f0e4..4b0a52a7a5 100644 --- a/examples/lazy-injection/kitchen-sink/src/App.tsx +++ b/examples/lazy-injection/kitchen-sink/src/App.tsx @@ -23,7 +23,9 @@ const App = () => { startTransition(toggleCounter)}> Counter example (lazy) - {counterOpen && } + + {counterOpen && } +

Edit src/App.tsx and save to reload. @@ -32,7 +34,9 @@ const App = () => {

startTransition(toggleQuotes)}> Quotes example (lazy) - {quotesOpen && } + + {quotesOpen && } + Learn diff --git a/examples/lazy-injection/kitchen-sink/src/app/reducer.ts b/examples/lazy-injection/kitchen-sink/src/app/reducer.ts index c657b6738a..62e01e41ca 100644 --- a/examples/lazy-injection/kitchen-sink/src/app/reducer.ts +++ b/examples/lazy-injection/kitchen-sink/src/app/reducer.ts @@ -1,12 +1,9 @@ import { combineSlices } from "@reduxjs/toolkit" import { todoSlice } from "../features/todos/todoSlice" -import { commentSlice } from "../features/todos/commentSlice" export interface LazyLoadedSlices {} // `combineSlices` automatically combines the reducers using // their `reducerPath`s, therefore we no longer need to call `combineReducers`. -export const rootReducer = combineSlices( - todoSlice, - commentSlice, -).withLazyLoadedSlices() +export const rootReducer = + combineSlices(todoSlice).withLazyLoadedSlices() diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/Todos.tsx b/examples/lazy-injection/kitchen-sink/src/features/todos/Todos.tsx index fcb5fcdd0f..70992e3c0b 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/todos/Todos.tsx +++ b/examples/lazy-injection/kitchen-sink/src/features/todos/Todos.tsx @@ -1,19 +1,24 @@ import { useAppSelector } from "../../app/hooks" import { AddTodo } from "./AddTodo" -import { Todo } from "./Todo" import { selectTodoIds } from "./todoSlice" import styles from "./Todos.module.css" +import { lazily } from "react-lazily" +import { Suspense } from "react" + +const { Todo } = lazily(() => import("./Todo")) export function Todos() { const todoIds = useAppSelector(selectTodoIds) return (
-
- {todoIds.map(id => ( - - ))} -
+ +
+ {todoIds.map(id => ( + + ))} +
+
) } diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts index a54adecb17..d57e9f517b 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts +++ b/examples/lazy-injection/kitchen-sink/src/features/todos/commentSlice.ts @@ -1,6 +1,8 @@ +import type { WithSlice } from "@reduxjs/toolkit" import { createEntityAdapter, createSelector, nanoid } from "@reduxjs/toolkit" import { createAppSlice } from "../../app/createAppSlice" import { deleteTodo } from "./todoSlice" +import { rootReducer } from "../../app/reducer" export interface Comment { id: string @@ -49,6 +51,12 @@ export const commentSlice = createAppSlice({ export const { addComment, deleteComment } = commentSlice.actions +declare module "../../app/reducer" { + interface LazyLoadedSlices extends WithSlice {} +} + +const injectedCommentSlice = commentSlice.injectInto(rootReducer) + export const { selectAll: selectAllComments, selectById: selectCommentById, @@ -56,4 +64,4 @@ export const { selectIds: selectCommentIds, selectTotal: selectCommentTotal, selectCommentsByTodoId, -} = commentSlice.selectors +} = injectedCommentSlice.selectors From 1b375abdf79a955190c7dabd8e1374dbd2a723a3 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Mon, 15 Jan 2024 15:22:18 +0000 Subject: [PATCH 34/46] add tabs --- .../lazy-injection/kitchen-sink/src/App.css | 11 +++- .../lazy-injection/kitchen-sink/src/App.tsx | 56 ++++++++++++------- .../src/components/Tab.module.css | 29 ++++++++++ .../kitchen-sink/src/components/Tab.tsx | 22 ++++++++ 4 files changed, 96 insertions(+), 22 deletions(-) create mode 100644 examples/lazy-injection/kitchen-sink/src/components/Tab.module.css create mode 100644 examples/lazy-injection/kitchen-sink/src/components/Tab.tsx diff --git a/examples/lazy-injection/kitchen-sink/src/App.css b/examples/lazy-injection/kitchen-sink/src/App.css index 01cc586770..3e843301e8 100644 --- a/examples/lazy-injection/kitchen-sink/src/App.css +++ b/examples/lazy-injection/kitchen-sink/src/App.css @@ -14,12 +14,13 @@ } .App-header { - min-height: 100vh; + min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); + margin-bottom: 10px; } .App-link { @@ -37,3 +38,11 @@ transform: translateY(0px); } } + +.tabs { + display: flex; + gap: 5px; + justify-content: center; + align-items: center; + margin-bottom: 10px; +} diff --git a/examples/lazy-injection/kitchen-sink/src/App.tsx b/examples/lazy-injection/kitchen-sink/src/App.tsx index 4b0a52a7a5..6ebf8ea67a 100644 --- a/examples/lazy-injection/kitchen-sink/src/App.tsx +++ b/examples/lazy-injection/kitchen-sink/src/App.tsx @@ -1,8 +1,9 @@ -import { Suspense, useReducer, useTransition } from "react" -import "./App.css" +import { Suspense, useState, useTransition } from "react" import logo from "./logo.svg" import { Todos } from "./features/todos/Todos" import { lazily } from "react-lazily" +import { Tab } from "./components/Tab" +import "./App.css" // equivalent to // const Counter = lazy(() => import("./features/counter/Counter").then(m => ({ default: m.Counter })) @@ -11,33 +12,15 @@ const { Counter } = lazily(() => import("./features/counter/Counter")) const { Quotes } = lazily(() => import("./features/quotes/Quotes")) const App = () => { - const [counterOpen, toggleCounter] = useReducer(b => !b, false) - const [quotesOpen, toggleQuotes] = useReducer(b => !b, false) + const [tab, setTab] = useState("todos") const [, startTransition] = useTransition() return (
logo - -
- startTransition(toggleCounter)}> - Counter example (lazy) - - - {counterOpen && } - -

Edit src/App.tsx and save to reload.

-
- startTransition(toggleQuotes)}> - Quotes example (lazy) - - - {quotesOpen && } - -
Learn
{
+
+ startTransition(() => setTab("todos"))} + > + Todos + + startTransition(() => setTab("counter"))} + > + Counter + + startTransition(() => setTab("quotes"))} + > + Quotes + +
+ {tab === "todos" && } + {tab === "counter" && ( + + + + )} + {tab === "quotes" && ( + + + + )}
) } diff --git a/examples/lazy-injection/kitchen-sink/src/components/Tab.module.css b/examples/lazy-injection/kitchen-sink/src/components/Tab.module.css new file mode 100644 index 0000000000..fa8f286aa4 --- /dev/null +++ b/examples/lazy-injection/kitchen-sink/src/components/Tab.module.css @@ -0,0 +1,29 @@ +.tab { + appearance: none; + background: none; + font-size: 32px; + padding-left: 12px; + padding-right: 12px; + outline: none; + border: 2px solid transparent; + color: rgb(112, 76, 182); + padding-bottom: 4px; + cursor: pointer; + background-color: rgba(112, 76, 182, 0.1); + border-radius: 2px; + transition: all 0.15s; +} + +.tab:hover, +.tab:focus { + border: 2px solid rgba(112, 76, 182, 0.4); +} + +.tab:active { + background-color: rgba(112, 76, 182, 0.2); +} + +.selected { + background-color: rgb(112, 76, 182); + color: #f1edf8; +} diff --git a/examples/lazy-injection/kitchen-sink/src/components/Tab.tsx b/examples/lazy-injection/kitchen-sink/src/components/Tab.tsx new file mode 100644 index 0000000000..a168ec747e --- /dev/null +++ b/examples/lazy-injection/kitchen-sink/src/components/Tab.tsx @@ -0,0 +1,22 @@ +import type { ReactNode } from "react" +import styles from "./Tab.module.css" +import clsx from "clsx" + +export function Tab({ + children, + selected, + onClick, +}: { + children: ReactNode + selected: boolean + onClick: () => void +}) { + return ( + + ) +} From 39c3380c9cef30286512168f3f71a64337f829c7 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Mon, 15 Jan 2024 15:32:12 +0000 Subject: [PATCH 35/46] make button size consistent --- .../kitchen-sink/src/features/counter/Counter.module.css | 2 +- .../kitchen-sink/src/features/quotes/Quotes.module.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/lazy-injection/kitchen-sink/src/features/counter/Counter.module.css b/examples/lazy-injection/kitchen-sink/src/features/counter/Counter.module.css index a0e619ddaa..5d27443b6e 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/counter/Counter.module.css +++ b/examples/lazy-injection/kitchen-sink/src/features/counter/Counter.module.css @@ -24,7 +24,7 @@ .button { appearance: none; background: none; - font-size: 32px; + font-size: 24px; padding-left: 12px; padding-right: 12px; outline: none; diff --git a/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.module.css b/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.module.css index 1f85690ef2..99384c45bc 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.module.css +++ b/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.module.css @@ -1,5 +1,5 @@ .select { - font-size: 25px; + font-size: 24px; padding: 5px; padding-top: 2px; padding-bottom: 2px; From c9dce74cef82f73fc65e31af74c6a8d5dd57375f Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Wed, 17 Jan 2024 18:37:52 +0000 Subject: [PATCH 36/46] undo changes to hook file for the sake of argument --- .../src/query/tests/buildHooks.test.tsx | 34 ++++++++----------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/packages/toolkit/src/query/tests/buildHooks.test.tsx b/packages/toolkit/src/query/tests/buildHooks.test.tsx index e5ef9c438f..e9f1f1ac90 100644 --- a/packages/toolkit/src/query/tests/buildHooks.test.tsx +++ b/packages/toolkit/src/query/tests/buildHooks.test.tsx @@ -35,11 +35,7 @@ import { server } from './mocks/server' import type { UnknownAction } from 'redux' import type { SubscriptionOptions } from '@reduxjs/toolkit/dist/query/core/apiState' import type { SerializedError } from '@reduxjs/toolkit' -import { - createListenerMiddleware, - configureStore, - createSlice, -} from '@reduxjs/toolkit' +import { createListenerMiddleware, configureStore, createSlice } from '@reduxjs/toolkit' import { delay } from '../../utils' import type { SubscriptionSelectors } from '../core/buildMiddleware/types' import { countObjectKeys } from '../utils/countObjectKeys' @@ -1483,7 +1479,7 @@ describe('hooks tests', () => { userEvent.hover(screen.getByTestId('highPriority')) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1504,7 +1500,7 @@ describe('hooks tests', () => { ) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1552,7 +1548,7 @@ describe('hooks tests', () => { userEvent.hover(screen.getByTestId('lowPriority')) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1570,7 +1566,7 @@ describe('hooks tests', () => { await waitMs() expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1620,7 +1616,7 @@ describe('hooks tests', () => { // This should run the query being that we're past the threshold userEvent.hover(screen.getByTestId('lowPriority')) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1640,7 +1636,7 @@ describe('hooks tests', () => { ) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ data: { name: 'Timmy' }, endpointName: 'getUser', @@ -1687,13 +1683,13 @@ describe('hooks tests', () => { // Get a snapshot of the last result const latestQueryData = api.endpoints.getUser.select(USER_ID)( - storeRef.store.getState() + storeRef.store.getState() as any ) userEvent.hover(screen.getByTestId('lowPriority')) // Serve up the result from the cache being that the condition wasn't met expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual(latestQueryData) }) @@ -1721,7 +1717,7 @@ describe('hooks tests', () => { userEvent.hover(screen.getByTestId('lowPriority')) expect( - api.endpoints.getUser.select(USER_ID)(storeRef.store.getState()) + api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ endpointName: 'getUser', isError: false, @@ -2057,13 +2053,13 @@ describe('hooks with createApi defaults set', () => { }) const counterSlice = createSlice({ - name: 'counter', + name: "counter", initialState: { count: 0 }, reducers: { increment(state) { state.count++ - }, - }, + } + } }) const storeRef = setupApiStore(api, { @@ -2357,9 +2353,7 @@ describe('hooks with createApi defaults set', () => { return (
- storeRef.store.dispatch(counterSlice.actions.increment()) - } + onClick={() => storeRef.store.dispatch(counterSlice.actions.increment())} > Increment Count
From 5d87dd305b8c9f134a8d02377a1cc209622a0feb Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Wed, 17 Jan 2024 18:49:29 +0000 Subject: [PATCH 37/46] format buildHooks just to prove it still fails --- .../toolkit/src/query/tests/buildHooks.test.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/toolkit/src/query/tests/buildHooks.test.tsx b/packages/toolkit/src/query/tests/buildHooks.test.tsx index e9f1f1ac90..67bea487fd 100644 --- a/packages/toolkit/src/query/tests/buildHooks.test.tsx +++ b/packages/toolkit/src/query/tests/buildHooks.test.tsx @@ -35,7 +35,11 @@ import { server } from './mocks/server' import type { UnknownAction } from 'redux' import type { SubscriptionOptions } from '@reduxjs/toolkit/dist/query/core/apiState' import type { SerializedError } from '@reduxjs/toolkit' -import { createListenerMiddleware, configureStore, createSlice } from '@reduxjs/toolkit' +import { + createListenerMiddleware, + configureStore, + createSlice, +} from '@reduxjs/toolkit' import { delay } from '../../utils' import type { SubscriptionSelectors } from '../core/buildMiddleware/types' import { countObjectKeys } from '../utils/countObjectKeys' @@ -2053,13 +2057,13 @@ describe('hooks with createApi defaults set', () => { }) const counterSlice = createSlice({ - name: "counter", + name: 'counter', initialState: { count: 0 }, reducers: { increment(state) { state.count++ - } - } + }, + }, }) const storeRef = setupApiStore(api, { @@ -2353,7 +2357,9 @@ describe('hooks with createApi defaults set', () => { return (
storeRef.store.dispatch(counterSlice.actions.increment())} + onClick={() => + storeRef.store.dispatch(counterSlice.actions.increment()) + } > Increment Count
From c969d80b34cf1d045219fe8374d81a91d5d29e34 Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Wed, 17 Jan 2024 21:37:44 +0000 Subject: [PATCH 38/46] why does this work --- packages/toolkit/src/query/tests/buildHooks.test.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/toolkit/src/query/tests/buildHooks.test.tsx b/packages/toolkit/src/query/tests/buildHooks.test.tsx index 67bea487fd..2fd91300cc 100644 --- a/packages/toolkit/src/query/tests/buildHooks.test.tsx +++ b/packages/toolkit/src/query/tests/buildHooks.test.tsx @@ -1503,6 +1503,10 @@ describe('hooks tests', () => { expect(screen.getByTestId('isFetching').textContent).toBe('false') ) + await waitFor(() => + expect(screen.getByTestId('isFetching').textContent).toBe('false') + ) + expect( api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ @@ -1639,6 +1643,10 @@ describe('hooks tests', () => { expect(screen.getByTestId('isFetching').textContent).toBe('false') ) + await waitFor(() => + expect(screen.getByTestId('isFetching').textContent).toBe('false') + ) + expect( api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ From afb8b7ca4ca24fb10c088ba46fd1cbf02c9e53ae Mon Sep 17 00:00:00 2001 From: EskiMojo14 Date: Wed, 17 Jan 2024 22:05:56 +0000 Subject: [PATCH 39/46] use RTL 13 --- .../lazy-injection/kitchen-sink/package.json | 3 +- .../src/query/tests/buildHooks.test.tsx | 8 - yarn.lock | 538 +++++------------- 3 files changed, 140 insertions(+), 409 deletions(-) diff --git a/examples/lazy-injection/kitchen-sink/package.json b/examples/lazy-injection/kitchen-sink/package.json index 256531cb1a..cf79458e6a 100644 --- a/examples/lazy-injection/kitchen-sink/package.json +++ b/examples/lazy-injection/kitchen-sink/package.json @@ -23,9 +23,8 @@ "react-redux": "^9.0.4" }, "devDependencies": { - "@testing-library/dom": "^9.3.3", "@testing-library/jest-dom": "^6.1.6", - "@testing-library/react": "^14.1.2", + "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^14.5.2", "@types/react": "^18.2.46", "@types/react-dom": "^18.2.18", diff --git a/packages/toolkit/src/query/tests/buildHooks.test.tsx b/packages/toolkit/src/query/tests/buildHooks.test.tsx index 2fd91300cc..67bea487fd 100644 --- a/packages/toolkit/src/query/tests/buildHooks.test.tsx +++ b/packages/toolkit/src/query/tests/buildHooks.test.tsx @@ -1503,10 +1503,6 @@ describe('hooks tests', () => { expect(screen.getByTestId('isFetching').textContent).toBe('false') ) - await waitFor(() => - expect(screen.getByTestId('isFetching').textContent).toBe('false') - ) - expect( api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ @@ -1643,10 +1639,6 @@ describe('hooks tests', () => { expect(screen.getByTestId('isFetching').textContent).toBe('false') ) - await waitFor(() => - expect(screen.getByTestId('isFetching').textContent).toBe('false') - ) - expect( api.endpoints.getUser.select(USER_ID)(storeRef.store.getState() as any) ).toEqual({ diff --git a/yarn.lock b/yarn.lock index 7719435a77..43dfe10a4f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -308,13 +308,13 @@ __metadata: linkType: hard "@asamuzakjp/dom-selector@npm:^2.0.1": - version: 2.0.1 - resolution: "@asamuzakjp/dom-selector@npm:2.0.1" + version: 2.0.2 + resolution: "@asamuzakjp/dom-selector@npm:2.0.2" dependencies: bidi-js: ^1.0.3 css-tree: ^2.3.1 is-potential-custom-element-name: ^1.0.1 - checksum: 51cd07fa0066b849896378af5d5839f8414dec1c0ff5d1e929542a6cbe7bd5608d9d9524d38eba7ef0caf4c970c4dfe826deac7bef2e8b9fa1a0b9e09446bb4d + checksum: a454537fcba4f241d3c1303f6068944462fc0ba9cd2c5e3ad639c0acb58ffb7809e5d4cbdac805c8c2525b2450d53a992ff98f07a323c5246044e8e3de3561fe languageName: node linkType: hard @@ -4892,9 +4892,8 @@ __metadata: resolution: "@examples-lazy-injection/kitchen-sink@workspace:examples/lazy-injection/kitchen-sink" dependencies: "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/f5c46a2a/@reduxjs/toolkit/_pkg.tgz" - "@testing-library/dom": ^9.3.3 "@testing-library/jest-dom": ^6.1.6 - "@testing-library/react": ^14.1.2 + "@testing-library/react": ^13.3.0 "@testing-library/user-event": ^14.5.2 "@types/react": ^18.2.46 "@types/react-dom": ^18.2.18 @@ -7039,9 +7038,9 @@ __metadata: linkType: hard "@pkgr/core@npm:^0.1.0": - version: 0.1.0 - resolution: "@pkgr/core@npm:0.1.0" - checksum: eeff0e0e517b1ed10eb4c1a8971413a8349bbfdab727dbe7d4085fd94eab95f0c3beb51b9245fef30562849d2a7a119e07ca48c343c8c4ec4e64ee289f50fe5e + version: 0.1.1 + resolution: "@pkgr/core@npm:0.1.1" + checksum: 6f25fd2e3008f259c77207ac9915b02f1628420403b2630c92a07ff963129238c9262afc9e84344c7a23b5cc1f3965e2cd17e3798219f5fd78a63d144d3cceba languageName: node linkType: hard @@ -8083,22 +8082,6 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.3": - version: 9.3.4 - resolution: "@testing-library/dom@npm:9.3.4" - dependencies: - "@babel/code-frame": ^7.10.4 - "@babel/runtime": ^7.12.5 - "@types/aria-query": ^5.0.1 - aria-query: 5.1.3 - chalk: ^4.1.0 - dom-accessibility-api: ^0.5.9 - lz-string: ^1.5.0 - pretty-format: ^27.0.2 - checksum: dfd6fb0d6c7b4dd716ba3c47309bc9541b4a55772cb61758b4f396b3785efe2dbc75dc63423545c039078c7ffcc5e4b8c67c2db1b6af4799580466036f70026f - languageName: node - linkType: hard - "@testing-library/jest-dom@npm:^5.11.5": version: 5.16.4 resolution: "@testing-library/jest-dom@npm:5.16.4" @@ -8160,20 +8143,6 @@ __metadata: languageName: node linkType: hard -"@testing-library/react@npm:^14.1.2": - version: 14.1.2 - resolution: "@testing-library/react@npm:14.1.2" - dependencies: - "@babel/runtime": ^7.12.5 - "@testing-library/dom": ^9.0.0 - "@types/react-dom": ^18.0.0 - peerDependencies: - react: ^18.0.0 - react-dom: ^18.0.0 - checksum: 0269903e53412cf96fddb55c8a97a9987a89c3308d71fa1418fe61c47d275445e7044c5387f57cf39b8cda319a41623dbad2cce7a17016aed3a9e85185aac75a - languageName: node - linkType: hard - "@testing-library/user-event@npm:^13.1.5": version: 13.5.0 resolution: "@testing-library/user-event@npm:13.5.0" @@ -8257,13 +8226,6 @@ __metadata: languageName: node linkType: hard -"@types/aria-query@npm:^5.0.1": - version: 5.0.4 - resolution: "@types/aria-query@npm:5.0.4" - checksum: ad8b87e4ad64255db5f0a73bc2b4da9b146c38a3a8ab4d9306154334e0fc67ae64e76bfa298eebd1e71830591fb15987e5de7111bdb36a2221bdc379e3415fb0 - languageName: node - linkType: hard - "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.7": version: 7.1.19 resolution: "@types/babel__core@npm:7.1.19" @@ -9348,6 +9310,17 @@ __metadata: languageName: node linkType: hard +"@vitest/expect@npm:1.2.1": + version: 1.2.1 + resolution: "@vitest/expect@npm:1.2.1" + dependencies: + "@vitest/spy": 1.2.1 + "@vitest/utils": 1.2.1 + chai: ^4.3.10 + checksum: d87a2dd646f523eaf68185e85f05412969fda55f228be4806d038550f446d3235ebee57f7d3882d0fcf16cfe2e3ac7d10d311df4894fa71548ae9852c8dbd23d + languageName: node + linkType: hard + "@vitest/runner@npm:0.30.1": version: 0.30.1 resolution: "@vitest/runner@npm:0.30.1" @@ -9371,6 +9344,17 @@ __metadata: languageName: node linkType: hard +"@vitest/runner@npm:1.2.1": + version: 1.2.1 + resolution: "@vitest/runner@npm:1.2.1" + dependencies: + "@vitest/utils": 1.2.1 + p-limit: ^5.0.0 + pathe: ^1.1.1 + checksum: 3a3941392e8c6359e19c3ac5c2923150251d9d32bf1252bc2951487d799ac19a7cc43eb3c02eb642c1b02f65ad365273f053bcb37153659c35a345b628baef65 + languageName: node + linkType: hard + "@vitest/snapshot@npm:0.30.1": version: 0.30.1 resolution: "@vitest/snapshot@npm:0.30.1" @@ -9393,6 +9377,17 @@ __metadata: languageName: node linkType: hard +"@vitest/snapshot@npm:1.2.1": + version: 1.2.1 + resolution: "@vitest/snapshot@npm:1.2.1" + dependencies: + magic-string: ^0.30.5 + pathe: ^1.1.1 + pretty-format: ^29.7.0 + checksum: 6efee401eaab9868c7f7834fd8ec9495c83c0a5eeb632942e6a5eb1ae5a876e91ac9a1b0b760e7bfde5d80cfc3a618e668b080c01882f5eb3b79a4c588185aa4 + languageName: node + linkType: hard + "@vitest/spy@npm:0.30.1": version: 0.30.1 resolution: "@vitest/spy@npm:0.30.1" @@ -9411,6 +9406,15 @@ __metadata: languageName: node linkType: hard +"@vitest/spy@npm:1.2.1": + version: 1.2.1 + resolution: "@vitest/spy@npm:1.2.1" + dependencies: + tinyspy: ^2.2.0 + checksum: 22a4b4539f69b28f6b0d907d6b7997972a09d85c9a136e0f953dfea45a12bc2ec8678f8d62cbc1ecfc803a0926df8901c6b5d9f8625196f68785965e1c14172c + languageName: node + linkType: hard + "@vitest/utils@npm:0.30.1": version: 0.30.1 resolution: "@vitest/utils@npm:0.30.1" @@ -9434,6 +9438,18 @@ __metadata: languageName: node linkType: hard +"@vitest/utils@npm:1.2.1": + version: 1.2.1 + resolution: "@vitest/utils@npm:1.2.1" + dependencies: + diff-sequences: ^29.6.3 + estree-walker: ^3.0.3 + loupe: ^2.3.7 + pretty-format: ^29.7.0 + checksum: 72b54d27e55b9805ab9a8224712584e8db232bd4ce6406e845fbeaf95d8845595791071868b3fdb2ca234acfaea6e7b323d25e419059ef3eb66aa2b4f5c29354 + languageName: node + linkType: hard + "@webassemblyjs/ast@npm:1.11.1": version: 1.11.1 resolution: "@webassemblyjs/ast@npm:1.11.1" @@ -9904,6 +9920,13 @@ __metadata: languageName: node linkType: hard +"acorn-walk@npm:^8.3.2": + version: 8.3.2 + resolution: "acorn-walk@npm:8.3.2" + checksum: 3626b9d26a37b1b427796feaa5261faf712307a8920392c8dce9a5739fb31077667f4ad2ec71c7ac6aaf9f61f04a9d3d67ff56f459587206fc04aa31c27ef392 + languageName: node + linkType: hard + "acorn@npm:^6.4.1": version: 6.4.2 resolution: "acorn@npm:6.4.2" @@ -10354,15 +10377,6 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:5.1.3": - version: 5.1.3 - resolution: "aria-query@npm:5.1.3" - dependencies: - deep-equal: ^2.0.5 - checksum: 929ff95f02857b650fb4cbcd2f41072eee2f46159a6605ea03bf63aa572e35ffdff43d69e815ddc462e16e07de8faba3978afc2813650b4448ee18c9895d982b - languageName: node - linkType: hard - "aria-query@npm:^4.2.2": version: 4.2.2 resolution: "aria-query@npm:4.2.2" @@ -10401,16 +10415,6 @@ __metadata: languageName: node linkType: hard -"array-buffer-byte-length@npm:^1.0.0": - version: 1.0.0 - resolution: "array-buffer-byte-length@npm:1.0.0" - dependencies: - call-bind: ^1.0.2 - is-array-buffer: ^3.0.1 - checksum: 044e101ce150f4804ad19c51d6c4d4cfa505c5b2577bd179256e4aa3f3f6a0a5e9874c78cd428ee566ac574c8a04d7ce21af9fe52e844abfdccb82b33035a7c3 - languageName: node - linkType: hard - "array-differ@npm:^3.0.0": version: 3.0.0 resolution: "array-differ@npm:3.0.0" @@ -10662,13 +10666,6 @@ __metadata: languageName: node linkType: hard -"available-typed-arrays@npm:^1.0.5": - version: 1.0.5 - resolution: "available-typed-arrays@npm:1.0.5" - checksum: 20eb47b3cefd7db027b9bbb993c658abd36d4edd3fe1060e83699a03ee275b0c9b216cc076ff3f2db29073225fb70e7613987af14269ac1fe2a19803ccc97f1a - languageName: node - linkType: hard - "axe-core@npm:^4.3.5": version: 4.4.2 resolution: "axe-core@npm:4.4.2" @@ -11751,17 +11748,6 @@ __metadata: languageName: node linkType: hard -"call-bind@npm:^1.0.4, call-bind@npm:^1.0.5": - version: 1.0.5 - resolution: "call-bind@npm:1.0.5" - dependencies: - function-bind: ^1.1.2 - get-intrinsic: ^1.2.1 - set-function-length: ^1.1.1 - checksum: 449e83ecbd4ba48e7eaac5af26fea3b50f8f6072202c2dd7c5a6e7a6308f2421abe5e13a3bbd55221087f76320c5e09f25a8fdad1bab2b77c68ae74d92234ea5 - languageName: node - linkType: hard - "call-me-maybe@npm:^1.0.1": version: 1.0.1 resolution: "call-me-maybe@npm:1.0.1" @@ -14012,32 +13998,6 @@ __metadata: languageName: node linkType: hard -"deep-equal@npm:^2.0.5": - version: 2.2.3 - resolution: "deep-equal@npm:2.2.3" - dependencies: - array-buffer-byte-length: ^1.0.0 - call-bind: ^1.0.5 - es-get-iterator: ^1.1.3 - get-intrinsic: ^1.2.2 - is-arguments: ^1.1.1 - is-array-buffer: ^3.0.2 - is-date-object: ^1.0.5 - is-regex: ^1.1.4 - is-shared-array-buffer: ^1.0.2 - isarray: ^2.0.5 - object-is: ^1.1.5 - object-keys: ^1.1.1 - object.assign: ^4.1.4 - regexp.prototype.flags: ^1.5.1 - side-channel: ^1.0.4 - which-boxed-primitive: ^1.0.2 - which-collection: ^1.0.1 - which-typed-array: ^1.1.13 - checksum: ee8852f23e4d20a5626c13b02f415ba443a1b30b4b3d39eaf366d59c4a85e6545d7ec917db44d476a85ae5a86064f7e5f7af7479f38f113995ba869f3a1ddc53 - languageName: node - linkType: hard - "deep-extend@npm:^0.6.0": version: 0.6.0 resolution: "deep-extend@npm:0.6.0" @@ -14098,17 +14058,6 @@ __metadata: languageName: node linkType: hard -"define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.1": - version: 1.1.1 - resolution: "define-data-property@npm:1.1.1" - dependencies: - get-intrinsic: ^1.2.1 - gopd: ^1.0.1 - has-property-descriptors: ^1.0.0 - checksum: a29855ad3f0630ea82e3c5012c812efa6ca3078d5c2aa8df06b5f597c1cde6f7254692df41945851d903e05a1668607b6d34e778f402b9ff9ffb38111f1a3f0d - languageName: node - linkType: hard - "define-lazy-prop@npm:^2.0.0": version: 2.0.0 resolution: "define-lazy-prop@npm:2.0.0" @@ -14126,17 +14075,6 @@ __metadata: languageName: node linkType: hard -"define-properties@npm:^1.2.0, define-properties@npm:^1.2.1": - version: 1.2.1 - resolution: "define-properties@npm:1.2.1" - dependencies: - define-data-property: ^1.0.1 - has-property-descriptors: ^1.0.0 - object-keys: ^1.1.1 - checksum: b4ccd00597dd46cb2d4a379398f5b19fca84a16f3374e2249201992f36b30f6835949a9429669ee6b41b6e837205a163eadd745e472069e70dfc10f03e5fcc12 - languageName: node - linkType: hard - "define-property@npm:^0.2.5": version: 0.2.5 resolution: "define-property@npm:0.2.5" @@ -14986,23 +14924,6 @@ __metadata: languageName: node linkType: hard -"es-get-iterator@npm:^1.1.3": - version: 1.1.3 - resolution: "es-get-iterator@npm:1.1.3" - dependencies: - call-bind: ^1.0.2 - get-intrinsic: ^1.1.3 - has-symbols: ^1.0.3 - is-arguments: ^1.1.1 - is-map: ^2.0.2 - is-set: ^2.0.2 - is-string: ^1.0.7 - isarray: ^2.0.5 - stop-iteration-iterator: ^1.0.0 - checksum: 8fa118da42667a01a7c7529f8a8cca514feeff243feec1ce0bb73baaa3514560bd09d2b3438873cf8a5aaec5d52da248131de153b28e2638a061b6e4df13267d - languageName: node - linkType: hard - "es-module-lexer@npm:^0.9.0": version: 0.9.3 resolution: "es-module-lexer@npm:0.9.3" @@ -16524,15 +16445,6 @@ __metadata: languageName: node linkType: hard -"for-each@npm:^0.3.3": - version: 0.3.3 - resolution: "for-each@npm:0.3.3" - dependencies: - is-callable: ^1.1.3 - checksum: 6c48ff2bc63362319c65e2edca4a8e1e3483a2fabc72fbe7feaf8c73db94fc7861bd53bc02c8a66a0c1dd709da6b04eec42e0abdd6b40ce47305ae92a25e5d28 - languageName: node - linkType: hard - "for-in@npm:^1.0.2": version: 1.0.2 resolution: "for-in@npm:1.0.2" @@ -16825,13 +16737,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"function-bind@npm:^1.1.2": - version: 1.1.2 - resolution: "function-bind@npm:1.1.2" - checksum: 2b0ff4ce708d99715ad14a6d1f894e2a83242e4a52ccfcefaee5e40050562e5f6dafc1adbb4ce2d4ab47279a45dc736ab91ea5042d843c3c092820dfe032efb1 - languageName: node - linkType: hard - "function.prototype.name@npm:^1.1.5": version: 1.1.5 resolution: "function.prototype.name@npm:1.1.5" @@ -16851,7 +16756,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"functions-have-names@npm:^1.2.2, functions-have-names@npm:^1.2.3": +"functions-have-names@npm:^1.2.2": version: 1.2.3 resolution: "functions-have-names@npm:1.2.3" checksum: c3f1f5ba20f4e962efb71344ce0a40722163e85bee2101ce25f88214e78182d2d2476aa85ef37950c579eb6cf6ee811c17b3101bb84004bb75655f3e33f3fdb5 @@ -16922,18 +16827,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2": - version: 1.2.2 - resolution: "get-intrinsic@npm:1.2.2" - dependencies: - function-bind: ^1.1.2 - has-proto: ^1.0.1 - has-symbols: ^1.0.3 - hasown: ^2.0.0 - checksum: 447ff0724df26829908dc033b62732359596fcf66027bc131ab37984afb33842d9cd458fd6cecadfe7eac22fd8a54b349799ed334cf2726025c921c7250e7417 - languageName: node - linkType: hard - "get-nonce@npm:^1.0.0": version: 1.0.1 resolution: "get-nonce@npm:1.0.1" @@ -17223,15 +17116,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"gopd@npm:^1.0.1": - version: 1.0.1 - resolution: "gopd@npm:1.0.1" - dependencies: - get-intrinsic: ^1.1.3 - checksum: a5ccfb8806e0917a94e0b3de2af2ea4979c1da920bc381667c260e00e7cafdbe844e2cb9c5bcfef4e5412e8bf73bab837285bc35c7ba73aaaf0134d4583393a6 - languageName: node - linkType: hard - "got@npm:11.8.3": version: 11.8.3 resolution: "got@npm:11.8.3" @@ -17447,13 +17331,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"has-proto@npm:^1.0.1": - version: 1.0.1 - resolution: "has-proto@npm:1.0.1" - checksum: febc5b5b531de8022806ad7407935e2135f1cc9e64636c3916c6842bd7995994ca3b29871ecd7954bd35f9e2986c17b3b227880484d22259e2f8e6ce63fd383e - languageName: node - linkType: hard - "has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3": version: 1.0.3 resolution: "has-symbols@npm:1.0.3" @@ -17553,15 +17430,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"hasown@npm:^2.0.0": - version: 2.0.0 - resolution: "hasown@npm:2.0.0" - dependencies: - function-bind: ^1.1.2 - checksum: 6151c75ca12554565098641c98a40f4cc86b85b0fd5b6fe92360967e4605a4f9610f7757260b4e8098dd1c2ce7f4b095f2006fe72a570e3b6d2d28de0298c176 - languageName: node - linkType: hard - "hast-to-hyperscript@npm:^9.0.0": version: 9.0.1 resolution: "hast-to-hyperscript@npm:9.0.1" @@ -18462,17 +18330,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"internal-slot@npm:^1.0.4": - version: 1.0.6 - resolution: "internal-slot@npm:1.0.6" - dependencies: - get-intrinsic: ^1.2.2 - hasown: ^2.0.0 - side-channel: ^1.0.4 - checksum: 7872454888047553ce97a3fa1da7cc054a28ec5400a9c2e9f4dbe4fe7c1d041cb8e8301467614b80d4246d50377aad2fb58860b294ed74d6700cc346b6f89549 - languageName: node - linkType: hard - "interpret@npm:^1.0.0": version: 1.4.0 resolution: "interpret@npm:1.4.0" @@ -18562,27 +18419,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-arguments@npm:^1.1.1": - version: 1.1.1 - resolution: "is-arguments@npm:1.1.1" - dependencies: - call-bind: ^1.0.2 - has-tostringtag: ^1.0.0 - checksum: 7f02700ec2171b691ef3e4d0e3e6c0ba408e8434368504bb593d0d7c891c0dbfda6d19d30808b904a6cb1929bca648c061ba438c39f296c2a8ca083229c49f27 - languageName: node - linkType: hard - -"is-array-buffer@npm:^3.0.1, is-array-buffer@npm:^3.0.2": - version: 3.0.2 - resolution: "is-array-buffer@npm:3.0.2" - dependencies: - call-bind: ^1.0.2 - get-intrinsic: ^1.2.0 - is-typed-array: ^1.1.10 - checksum: dcac9dda66ff17df9cabdc58214172bf41082f956eab30bb0d86bc0fab1e44b690fc8e1f855cf2481245caf4e8a5a006a982a71ddccec84032ed41f9d8da8c14 - languageName: node - linkType: hard - "is-arrayish@npm:^0.2.1": version: 0.2.1 resolution: "is-arrayish@npm:0.2.1" @@ -18645,13 +18481,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-callable@npm:^1.1.3": - version: 1.2.7 - resolution: "is-callable@npm:1.2.7" - checksum: 61fd57d03b0d984e2ed3720fb1c7a897827ea174bd44402878e059542ea8c4aeedee0ea0985998aa5cc2736b2fa6e271c08587addb5b3959ac52cf665173d1ac - languageName: node - linkType: hard - "is-callable@npm:^1.1.4, is-callable@npm:^1.2.4": version: 1.2.4 resolution: "is-callable@npm:1.2.4" @@ -18729,15 +18558,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-date-object@npm:^1.0.5": - version: 1.0.5 - resolution: "is-date-object@npm:1.0.5" - dependencies: - has-tostringtag: ^1.0.0 - checksum: baa9077cdf15eb7b58c79398604ca57379b2fc4cf9aa7a9b9e295278648f628c9b201400c01c5e0f7afae56507d741185730307cbe7cad3b9f90a77e5ee342fc - languageName: node - linkType: hard - "is-decimal@npm:^1.0.0": version: 1.0.4 resolution: "is-decimal@npm:1.0.4" @@ -18903,13 +18723,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-map@npm:^2.0.1, is-map@npm:^2.0.2": - version: 2.0.2 - resolution: "is-map@npm:2.0.2" - checksum: ace3d0ecd667bbdefdb1852de601268f67f2db725624b1958f279316e13fecb8fa7df91fd60f690d7417b4ec180712f5a7ee967008e27c65cfd475cc84337728 - languageName: node - linkType: hard - "is-module@npm:^1.0.0": version: 1.0.0 resolution: "is-module@npm:1.0.0" @@ -19105,13 +18918,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-set@npm:^2.0.1, is-set@npm:^2.0.2": - version: 2.0.2 - resolution: "is-set@npm:2.0.2" - checksum: b64343faf45e9387b97a6fd32be632ee7b269bd8183701f3b3f5b71a7cf00d04450ed8669d0bd08753e08b968beda96fca73a10fd0ff56a32603f64deba55a57 - languageName: node - linkType: hard - "is-shared-array-buffer@npm:^1.0.2": version: 1.0.2 resolution: "is-shared-array-buffer@npm:1.0.2" @@ -19169,15 +18975,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-typed-array@npm:^1.1.10": - version: 1.1.12 - resolution: "is-typed-array@npm:1.1.12" - dependencies: - which-typed-array: ^1.1.11 - checksum: 4c89c4a3be07186caddadf92197b17fda663a9d259ea0d44a85f171558270d36059d1c386d34a12cba22dfade5aba497ce22778e866adc9406098c8fc4771796 - languageName: node - linkType: hard - "is-typedarray@npm:^1.0.0": version: 1.0.0 resolution: "is-typedarray@npm:1.0.0" @@ -19210,13 +19007,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-weakmap@npm:^2.0.1": - version: 2.0.1 - resolution: "is-weakmap@npm:2.0.1" - checksum: 1222bb7e90c32bdb949226e66d26cb7bce12e1e28e3e1b40bfa6b390ba3e08192a8664a703dff2a00a84825f4e022f9cd58c4599ff9981ab72b1d69479f4f7f6 - languageName: node - linkType: hard - "is-weakref@npm:^1.0.2": version: 1.0.2 resolution: "is-weakref@npm:1.0.2" @@ -19226,16 +19016,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-weakset@npm:^2.0.1": - version: 2.0.2 - resolution: "is-weakset@npm:2.0.2" - dependencies: - call-bind: ^1.0.2 - get-intrinsic: ^1.1.1 - checksum: 5d8698d1fa599a0635d7ca85be9c26d547b317ed8fd83fc75f03efbe75d50001b5eececb1e9971de85fcde84f69ae6f8346bc92d20d55d46201d328e4c74a367 - languageName: node - linkType: hard - "is-whitespace-character@npm:^1.0.0": version: 1.0.4 resolution: "is-whitespace-character@npm:1.0.4" @@ -19294,13 +19074,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"isarray@npm:^2.0.5": - version: 2.0.5 - resolution: "isarray@npm:2.0.5" - checksum: bd5bbe4104438c4196ba58a54650116007fa0262eccef13a4c55b2e09a5b36b59f1e75b9fcc49883dd9d4953892e6fc007eef9e9155648ceea036e184b0f930a - languageName: node - linkType: hard - "isexe@npm:^2.0.0": version: 2.0.0 resolution: "isexe@npm:2.0.0" @@ -21486,15 +21259,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"lz-string@npm:^1.5.0": - version: 1.5.0 - resolution: "lz-string@npm:1.5.0" - bin: - lz-string: bin/bin.js - checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d - languageName: node - linkType: hard - "macos-release@npm:^2.5.0": version: 2.5.0 resolution: "macos-release@npm:2.5.0" @@ -22967,16 +22731,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"object-is@npm:^1.1.5": - version: 1.1.5 - resolution: "object-is@npm:1.1.5" - dependencies: - call-bind: ^1.0.2 - define-properties: ^1.1.3 - checksum: 989b18c4cba258a6b74dc1d74a41805c1a1425bce29f6cabb50dcb1a6a651ea9104a1b07046739a49a5bb1bc49727bcb00efd5c55f932f6ea04ec8927a7901fe - languageName: node - linkType: hard - "object-keys@npm:^1.1.1": version: 1.1.1 resolution: "object-keys@npm:1.1.1" @@ -23005,18 +22759,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"object.assign@npm:^4.1.4": - version: 4.1.5 - resolution: "object.assign@npm:4.1.5" - dependencies: - call-bind: ^1.0.5 - define-properties: ^1.2.1 - has-symbols: ^1.0.3 - object-keys: ^1.1.1 - checksum: f9aeac0541661370a1fc86e6a8065eb1668d3e771f7dbb33ee54578201336c057b21ee61207a186dd42db0c62201d91aac703d20d12a79fc79c353eed44d4e25 - languageName: node - linkType: hard - "object.entries@npm:^1.1.5": version: 1.1.5 resolution: "object.entries@npm:1.1.5" @@ -25292,11 +25034,11 @@ fsevents@^1.2.7: linkType: hard "prettier@npm:^3.1.1": - version: 3.1.1 - resolution: "prettier@npm:3.1.1" + version: 3.2.4 + resolution: "prettier@npm:3.2.4" bin: prettier: bin/prettier.cjs - checksum: e386855e3a1af86a748e16953f168be555ce66d6233f4ba54eb6449b88eb0c6b2ca79441b11eae6d28a7f9a5c96440ce50864b9d5f6356d331d39d6bb66c648e + checksum: 6ec9385a836e0b9bac549e585101c086d1521c31d7b882d5c8bb7d7646da0693da5f31f4fff6dc080710e5e2d34c85e6fb2f8766876b3645c8be2f33b9c3d1a3 languageName: node linkType: hard @@ -26568,17 +26310,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"regexp.prototype.flags@npm:^1.5.1": - version: 1.5.1 - resolution: "regexp.prototype.flags@npm:1.5.1" - dependencies: - call-bind: ^1.0.2 - define-properties: ^1.2.0 - set-function-name: ^2.0.0 - checksum: 869edff00288442f8d7fa4c9327f91d85f3b3acf8cbbef9ea7a220345cf23e9241b6def9263d2c1ebcf3a316b0aa52ad26a43a84aa02baca3381717b3e307f47 - languageName: node - linkType: hard - "regexpp@npm:^3.0.0, regexpp@npm:^3.1.0, regexpp@npm:^3.2.0": version: 3.2.0 resolution: "regexpp@npm:3.2.0" @@ -27913,29 +27644,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"set-function-length@npm:^1.1.1": - version: 1.1.1 - resolution: "set-function-length@npm:1.1.1" - dependencies: - define-data-property: ^1.1.1 - get-intrinsic: ^1.2.1 - gopd: ^1.0.1 - has-property-descriptors: ^1.0.0 - checksum: c131d7569cd7e110cafdfbfbb0557249b538477624dfac4fc18c376d879672fa52563b74029ca01f8f4583a8acb35bb1e873d573a24edb80d978a7ee607c6e06 - languageName: node - linkType: hard - -"set-function-name@npm:^2.0.0": - version: 2.0.1 - resolution: "set-function-name@npm:2.0.1" - dependencies: - define-data-property: ^1.0.1 - functions-have-names: ^1.2.3 - has-property-descriptors: ^1.0.0 - checksum: 4975d17d90c40168eee2c7c9c59d023429f0a1690a89d75656306481ece0c3c1fb1ebcc0150ea546d1913e35fbd037bace91372c69e543e51fc5d1f31a9fa126 - languageName: node - linkType: hard - "set-value@npm:^2.0.0, set-value@npm:^2.0.1": version: 2.0.1 resolution: "set-value@npm:2.0.1" @@ -28681,15 +28389,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"stop-iteration-iterator@npm:^1.0.0": - version: 1.0.0 - resolution: "stop-iteration-iterator@npm:1.0.0" - dependencies: - internal-slot: ^1.0.4 - checksum: d04173690b2efa40e24ab70e5e51a3ff31d56d699550cfad084104ab3381390daccb36652b25755e420245f3b0737de66c1879eaa2a8d4fc0a78f9bf892fcb42 - languageName: node - linkType: hard - "stream-browserify@npm:^2.0.1": version: 2.0.2 resolution: "stream-browserify@npm:2.0.2" @@ -31029,6 +30728,21 @@ fsevents@^1.2.7: languageName: node linkType: hard +"vite-node@npm:1.2.1": + version: 1.2.1 + resolution: "vite-node@npm:1.2.1" + dependencies: + cac: ^6.7.14 + debug: ^4.3.4 + pathe: ^1.1.1 + picocolors: ^1.0.0 + vite: ^5.0.0 + bin: + vite-node: vite-node.mjs + checksum: 2d2679a8dfecd8de6a2296c72a3d6662597ccf20cb90e4626a2df335556d8b18dbad3ae2be06e644bf905693dbdb558ff003c6dc990c6bc662adcee9e4f0fa6f + languageName: node + linkType: hard + "vite@npm:^3.0.0 || ^4.0.0": version: 4.0.4 resolution: "vite@npm:4.0.4" @@ -31169,7 +30883,58 @@ fsevents@^1.2.7: languageName: node linkType: hard -"vitest@npm:^1.1.1, vitest@npm:^1.1.3": +"vitest@npm:^1.1.1": + version: 1.2.1 + resolution: "vitest@npm:1.2.1" + dependencies: + "@vitest/expect": 1.2.1 + "@vitest/runner": 1.2.1 + "@vitest/snapshot": 1.2.1 + "@vitest/spy": 1.2.1 + "@vitest/utils": 1.2.1 + acorn-walk: ^8.3.2 + cac: ^6.7.14 + chai: ^4.3.10 + debug: ^4.3.4 + execa: ^8.0.1 + local-pkg: ^0.5.0 + magic-string: ^0.30.5 + pathe: ^1.1.1 + picocolors: ^1.0.0 + std-env: ^3.5.0 + strip-literal: ^1.3.0 + tinybench: ^2.5.1 + tinypool: ^0.8.1 + vite: ^5.0.0 + vite-node: 1.2.1 + why-is-node-running: ^2.2.2 + peerDependencies: + "@edge-runtime/vm": "*" + "@types/node": ^18.0.0 || >=20.0.0 + "@vitest/browser": ^1.0.0 + "@vitest/ui": ^1.0.0 + happy-dom: "*" + jsdom: "*" + peerDependenciesMeta: + "@edge-runtime/vm": + optional: true + "@types/node": + optional: true + "@vitest/browser": + optional: true + "@vitest/ui": + optional: true + happy-dom: + optional: true + jsdom: + optional: true + bin: + vitest: vitest.mjs + checksum: be5cf1ebde0ff7fd534d4c5c710b9d63b3bd7a899f1fcceab82779949cfb8c962f82bb827652debe2d0553d6f786cf76998e6f346e46e03b14e720b121ff540e + languageName: node + linkType: hard + +"vitest@npm:^1.1.3": version: 1.1.3 resolution: "vitest@npm:1.1.3" dependencies: @@ -31860,18 +31625,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"which-collection@npm:^1.0.1": - version: 1.0.1 - resolution: "which-collection@npm:1.0.1" - dependencies: - is-map: ^2.0.1 - is-set: ^2.0.1 - is-weakmap: ^2.0.1 - is-weakset: ^2.0.1 - checksum: c815bbd163107ef9cb84f135e6f34453eaf4cca994e7ba85ddb0d27cea724c623fae2a473ceccfd5549c53cc65a5d82692de418166df3f858e1e5dc60818581c - languageName: node - linkType: hard - "which-module@npm:^2.0.0": version: 2.0.0 resolution: "which-module@npm:2.0.0" @@ -31886,19 +31639,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"which-typed-array@npm:^1.1.11, which-typed-array@npm:^1.1.13": - version: 1.1.13 - resolution: "which-typed-array@npm:1.1.13" - dependencies: - available-typed-arrays: ^1.0.5 - call-bind: ^1.0.4 - for-each: ^0.3.3 - gopd: ^1.0.1 - has-tostringtag: ^1.0.0 - checksum: 3828a0d5d72c800e369d447e54c7620742a4cc0c9baf1b5e8c17e9b6ff90d8d861a3a6dd4800f1953dbf80e5e5cec954a289e5b4a223e3bee4aeb1f8c5f33309 - languageName: node - linkType: hard - "which@npm:^1.2.9, which@npm:^1.3.1": version: 1.3.1 resolution: "which@npm:1.3.1" From 4ae92fcd0cacbdf354afefbb65a9bcb2ce518be1 Mon Sep 17 00:00:00 2001 From: Arya Emami Date: Wed, 17 Jan 2024 23:06:45 -0600 Subject: [PATCH 40/46] Bump `@testing-library/react` dev dependency --- .../lazy-injection/kitchen-sink/package.json | 2 +- .../kitchen-sink/src/App.test.tsx | 4 +- yarn.lock | 400 +++++++++++++++++- 3 files changed, 401 insertions(+), 5 deletions(-) diff --git a/examples/lazy-injection/kitchen-sink/package.json b/examples/lazy-injection/kitchen-sink/package.json index cf79458e6a..a7c259e5fd 100644 --- a/examples/lazy-injection/kitchen-sink/package.json +++ b/examples/lazy-injection/kitchen-sink/package.json @@ -24,7 +24,7 @@ }, "devDependencies": { "@testing-library/jest-dom": "^6.1.6", - "@testing-library/react": "^13.3.0", + "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.2", "@types/react": "^18.2.46", "@types/react-dom": "^18.2.18", diff --git a/examples/lazy-injection/kitchen-sink/src/App.test.tsx b/examples/lazy-injection/kitchen-sink/src/App.test.tsx index c68dedf77c..c33319a8ee 100644 --- a/examples/lazy-injection/kitchen-sink/src/App.test.tsx +++ b/examples/lazy-injection/kitchen-sink/src/App.test.tsx @@ -1,10 +1,10 @@ import { screen, waitFor } from "@testing-library/react" +import userEvent from "@testing-library/user-event" import App from "./App" import { renderWithProviders } from "./utils/test-utils" -import userEvent from "@testing-library/user-event" async function ensureCounterLoaded() { - await userEvent.click(screen.getByText("Counter example (lazy)")) + await userEvent.click(screen.getByText("Counter")) await waitFor(() => expect(screen.queryByTestId("count")).toBeInTheDocument()) } diff --git a/yarn.lock b/yarn.lock index 43dfe10a4f..e988d8feec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4893,7 +4893,7 @@ __metadata: dependencies: "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/f5c46a2a/@reduxjs/toolkit/_pkg.tgz" "@testing-library/jest-dom": ^6.1.6 - "@testing-library/react": ^13.3.0 + "@testing-library/react": ^14.1.2 "@testing-library/user-event": ^14.5.2 "@types/react": ^18.2.46 "@types/react-dom": ^18.2.18 @@ -8082,6 +8082,22 @@ __metadata: languageName: node linkType: hard +"@testing-library/dom@npm:^9.0.0": + version: 9.3.4 + resolution: "@testing-library/dom@npm:9.3.4" + dependencies: + "@babel/code-frame": ^7.10.4 + "@babel/runtime": ^7.12.5 + "@types/aria-query": ^5.0.1 + aria-query: 5.1.3 + chalk: ^4.1.0 + dom-accessibility-api: ^0.5.9 + lz-string: ^1.5.0 + pretty-format: ^27.0.2 + checksum: dfd6fb0d6c7b4dd716ba3c47309bc9541b4a55772cb61758b4f396b3785efe2dbc75dc63423545c039078c7ffcc5e4b8c67c2db1b6af4799580466036f70026f + languageName: node + linkType: hard + "@testing-library/jest-dom@npm:^5.11.5": version: 5.16.4 resolution: "@testing-library/jest-dom@npm:5.16.4" @@ -8143,6 +8159,20 @@ __metadata: languageName: node linkType: hard +"@testing-library/react@npm:^14.1.2": + version: 14.1.2 + resolution: "@testing-library/react@npm:14.1.2" + dependencies: + "@babel/runtime": ^7.12.5 + "@testing-library/dom": ^9.0.0 + "@types/react-dom": ^18.0.0 + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + checksum: 0269903e53412cf96fddb55c8a97a9987a89c3308d71fa1418fe61c47d275445e7044c5387f57cf39b8cda319a41623dbad2cce7a17016aed3a9e85185aac75a + languageName: node + linkType: hard + "@testing-library/user-event@npm:^13.1.5": version: 13.5.0 resolution: "@testing-library/user-event@npm:13.5.0" @@ -8226,6 +8256,13 @@ __metadata: languageName: node linkType: hard +"@types/aria-query@npm:^5.0.1": + version: 5.0.4 + resolution: "@types/aria-query@npm:5.0.4" + checksum: ad8b87e4ad64255db5f0a73bc2b4da9b146c38a3a8ab4d9306154334e0fc67ae64e76bfa298eebd1e71830591fb15987e5de7111bdb36a2221bdc379e3415fb0 + languageName: node + linkType: hard + "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.7": version: 7.1.19 resolution: "@types/babel__core@npm:7.1.19" @@ -10377,6 +10414,15 @@ __metadata: languageName: node linkType: hard +"aria-query@npm:5.1.3": + version: 5.1.3 + resolution: "aria-query@npm:5.1.3" + dependencies: + deep-equal: ^2.0.5 + checksum: 929ff95f02857b650fb4cbcd2f41072eee2f46159a6605ea03bf63aa572e35ffdff43d69e815ddc462e16e07de8faba3978afc2813650b4448ee18c9895d982b + languageName: node + linkType: hard + "aria-query@npm:^4.2.2": version: 4.2.2 resolution: "aria-query@npm:4.2.2" @@ -10415,6 +10461,16 @@ __metadata: languageName: node linkType: hard +"array-buffer-byte-length@npm:^1.0.0": + version: 1.0.0 + resolution: "array-buffer-byte-length@npm:1.0.0" + dependencies: + call-bind: ^1.0.2 + is-array-buffer: ^3.0.1 + checksum: 044e101ce150f4804ad19c51d6c4d4cfa505c5b2577bd179256e4aa3f3f6a0a5e9874c78cd428ee566ac574c8a04d7ce21af9fe52e844abfdccb82b33035a7c3 + languageName: node + linkType: hard + "array-differ@npm:^3.0.0": version: 3.0.0 resolution: "array-differ@npm:3.0.0" @@ -10666,6 +10722,13 @@ __metadata: languageName: node linkType: hard +"available-typed-arrays@npm:^1.0.5": + version: 1.0.5 + resolution: "available-typed-arrays@npm:1.0.5" + checksum: 20eb47b3cefd7db027b9bbb993c658abd36d4edd3fe1060e83699a03ee275b0c9b216cc076ff3f2db29073225fb70e7613987af14269ac1fe2a19803ccc97f1a + languageName: node + linkType: hard + "axe-core@npm:^4.3.5": version: 4.4.2 resolution: "axe-core@npm:4.4.2" @@ -11748,6 +11811,17 @@ __metadata: languageName: node linkType: hard +"call-bind@npm:^1.0.4, call-bind@npm:^1.0.5": + version: 1.0.5 + resolution: "call-bind@npm:1.0.5" + dependencies: + function-bind: ^1.1.2 + get-intrinsic: ^1.2.1 + set-function-length: ^1.1.1 + checksum: 449e83ecbd4ba48e7eaac5af26fea3b50f8f6072202c2dd7c5a6e7a6308f2421abe5e13a3bbd55221087f76320c5e09f25a8fdad1bab2b77c68ae74d92234ea5 + languageName: node + linkType: hard + "call-me-maybe@npm:^1.0.1": version: 1.0.1 resolution: "call-me-maybe@npm:1.0.1" @@ -13998,6 +14072,32 @@ __metadata: languageName: node linkType: hard +"deep-equal@npm:^2.0.5": + version: 2.2.3 + resolution: "deep-equal@npm:2.2.3" + dependencies: + array-buffer-byte-length: ^1.0.0 + call-bind: ^1.0.5 + es-get-iterator: ^1.1.3 + get-intrinsic: ^1.2.2 + is-arguments: ^1.1.1 + is-array-buffer: ^3.0.2 + is-date-object: ^1.0.5 + is-regex: ^1.1.4 + is-shared-array-buffer: ^1.0.2 + isarray: ^2.0.5 + object-is: ^1.1.5 + object-keys: ^1.1.1 + object.assign: ^4.1.4 + regexp.prototype.flags: ^1.5.1 + side-channel: ^1.0.4 + which-boxed-primitive: ^1.0.2 + which-collection: ^1.0.1 + which-typed-array: ^1.1.13 + checksum: ee8852f23e4d20a5626c13b02f415ba443a1b30b4b3d39eaf366d59c4a85e6545d7ec917db44d476a85ae5a86064f7e5f7af7479f38f113995ba869f3a1ddc53 + languageName: node + linkType: hard + "deep-extend@npm:^0.6.0": version: 0.6.0 resolution: "deep-extend@npm:0.6.0" @@ -14058,6 +14158,17 @@ __metadata: languageName: node linkType: hard +"define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.1": + version: 1.1.1 + resolution: "define-data-property@npm:1.1.1" + dependencies: + get-intrinsic: ^1.2.1 + gopd: ^1.0.1 + has-property-descriptors: ^1.0.0 + checksum: a29855ad3f0630ea82e3c5012c812efa6ca3078d5c2aa8df06b5f597c1cde6f7254692df41945851d903e05a1668607b6d34e778f402b9ff9ffb38111f1a3f0d + languageName: node + linkType: hard + "define-lazy-prop@npm:^2.0.0": version: 2.0.0 resolution: "define-lazy-prop@npm:2.0.0" @@ -14075,6 +14186,17 @@ __metadata: languageName: node linkType: hard +"define-properties@npm:^1.2.0, define-properties@npm:^1.2.1": + version: 1.2.1 + resolution: "define-properties@npm:1.2.1" + dependencies: + define-data-property: ^1.0.1 + has-property-descriptors: ^1.0.0 + object-keys: ^1.1.1 + checksum: b4ccd00597dd46cb2d4a379398f5b19fca84a16f3374e2249201992f36b30f6835949a9429669ee6b41b6e837205a163eadd745e472069e70dfc10f03e5fcc12 + languageName: node + linkType: hard + "define-property@npm:^0.2.5": version: 0.2.5 resolution: "define-property@npm:0.2.5" @@ -14924,6 +15046,23 @@ __metadata: languageName: node linkType: hard +"es-get-iterator@npm:^1.1.3": + version: 1.1.3 + resolution: "es-get-iterator@npm:1.1.3" + dependencies: + call-bind: ^1.0.2 + get-intrinsic: ^1.1.3 + has-symbols: ^1.0.3 + is-arguments: ^1.1.1 + is-map: ^2.0.2 + is-set: ^2.0.2 + is-string: ^1.0.7 + isarray: ^2.0.5 + stop-iteration-iterator: ^1.0.0 + checksum: 8fa118da42667a01a7c7529f8a8cca514feeff243feec1ce0bb73baaa3514560bd09d2b3438873cf8a5aaec5d52da248131de153b28e2638a061b6e4df13267d + languageName: node + linkType: hard + "es-module-lexer@npm:^0.9.0": version: 0.9.3 resolution: "es-module-lexer@npm:0.9.3" @@ -16445,6 +16584,15 @@ __metadata: languageName: node linkType: hard +"for-each@npm:^0.3.3": + version: 0.3.3 + resolution: "for-each@npm:0.3.3" + dependencies: + is-callable: ^1.1.3 + checksum: 6c48ff2bc63362319c65e2edca4a8e1e3483a2fabc72fbe7feaf8c73db94fc7861bd53bc02c8a66a0c1dd709da6b04eec42e0abdd6b40ce47305ae92a25e5d28 + languageName: node + linkType: hard + "for-in@npm:^1.0.2": version: 1.0.2 resolution: "for-in@npm:1.0.2" @@ -16737,6 +16885,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"function-bind@npm:^1.1.2": + version: 1.1.2 + resolution: "function-bind@npm:1.1.2" + checksum: 2b0ff4ce708d99715ad14a6d1f894e2a83242e4a52ccfcefaee5e40050562e5f6dafc1adbb4ce2d4ab47279a45dc736ab91ea5042d843c3c092820dfe032efb1 + languageName: node + linkType: hard + "function.prototype.name@npm:^1.1.5": version: 1.1.5 resolution: "function.prototype.name@npm:1.1.5" @@ -16756,7 +16911,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"functions-have-names@npm:^1.2.2": +"functions-have-names@npm:^1.2.2, functions-have-names@npm:^1.2.3": version: 1.2.3 resolution: "functions-have-names@npm:1.2.3" checksum: c3f1f5ba20f4e962efb71344ce0a40722163e85bee2101ce25f88214e78182d2d2476aa85ef37950c579eb6cf6ee811c17b3101bb84004bb75655f3e33f3fdb5 @@ -16827,6 +16982,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2": + version: 1.2.2 + resolution: "get-intrinsic@npm:1.2.2" + dependencies: + function-bind: ^1.1.2 + has-proto: ^1.0.1 + has-symbols: ^1.0.3 + hasown: ^2.0.0 + checksum: 447ff0724df26829908dc033b62732359596fcf66027bc131ab37984afb33842d9cd458fd6cecadfe7eac22fd8a54b349799ed334cf2726025c921c7250e7417 + languageName: node + linkType: hard + "get-nonce@npm:^1.0.0": version: 1.0.1 resolution: "get-nonce@npm:1.0.1" @@ -17116,6 +17283,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"gopd@npm:^1.0.1": + version: 1.0.1 + resolution: "gopd@npm:1.0.1" + dependencies: + get-intrinsic: ^1.1.3 + checksum: a5ccfb8806e0917a94e0b3de2af2ea4979c1da920bc381667c260e00e7cafdbe844e2cb9c5bcfef4e5412e8bf73bab837285bc35c7ba73aaaf0134d4583393a6 + languageName: node + linkType: hard + "got@npm:11.8.3": version: 11.8.3 resolution: "got@npm:11.8.3" @@ -17331,6 +17507,22 @@ fsevents@^1.2.7: languageName: node linkType: hard +"has-property-descriptors@npm:^1.0.1": + version: 1.0.1 + resolution: "has-property-descriptors@npm:1.0.1" + dependencies: + get-intrinsic: ^1.2.2 + checksum: 2bcc6bf6ec6af375add4e4b4ef586e43674850a91ad4d46666d0b28ba8e1fd69e424c7677d24d60f69470ad0afaa2f3197f508b20b0bb7dd99a8ab77ffc4b7c4 + languageName: node + linkType: hard + +"has-proto@npm:^1.0.1": + version: 1.0.1 + resolution: "has-proto@npm:1.0.1" + checksum: febc5b5b531de8022806ad7407935e2135f1cc9e64636c3916c6842bd7995994ca3b29871ecd7954bd35f9e2986c17b3b227880484d22259e2f8e6ce63fd383e + languageName: node + linkType: hard + "has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3": version: 1.0.3 resolution: "has-symbols@npm:1.0.3" @@ -17430,6 +17622,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"hasown@npm:^2.0.0": + version: 2.0.0 + resolution: "hasown@npm:2.0.0" + dependencies: + function-bind: ^1.1.2 + checksum: 6151c75ca12554565098641c98a40f4cc86b85b0fd5b6fe92360967e4605a4f9610f7757260b4e8098dd1c2ce7f4b095f2006fe72a570e3b6d2d28de0298c176 + languageName: node + linkType: hard + "hast-to-hyperscript@npm:^9.0.0": version: 9.0.1 resolution: "hast-to-hyperscript@npm:9.0.1" @@ -18330,6 +18531,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"internal-slot@npm:^1.0.4": + version: 1.0.6 + resolution: "internal-slot@npm:1.0.6" + dependencies: + get-intrinsic: ^1.2.2 + hasown: ^2.0.0 + side-channel: ^1.0.4 + checksum: 7872454888047553ce97a3fa1da7cc054a28ec5400a9c2e9f4dbe4fe7c1d041cb8e8301467614b80d4246d50377aad2fb58860b294ed74d6700cc346b6f89549 + languageName: node + linkType: hard + "interpret@npm:^1.0.0": version: 1.4.0 resolution: "interpret@npm:1.4.0" @@ -18419,6 +18631,27 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-arguments@npm:^1.1.1": + version: 1.1.1 + resolution: "is-arguments@npm:1.1.1" + dependencies: + call-bind: ^1.0.2 + has-tostringtag: ^1.0.0 + checksum: 7f02700ec2171b691ef3e4d0e3e6c0ba408e8434368504bb593d0d7c891c0dbfda6d19d30808b904a6cb1929bca648c061ba438c39f296c2a8ca083229c49f27 + languageName: node + linkType: hard + +"is-array-buffer@npm:^3.0.1, is-array-buffer@npm:^3.0.2": + version: 3.0.2 + resolution: "is-array-buffer@npm:3.0.2" + dependencies: + call-bind: ^1.0.2 + get-intrinsic: ^1.2.0 + is-typed-array: ^1.1.10 + checksum: dcac9dda66ff17df9cabdc58214172bf41082f956eab30bb0d86bc0fab1e44b690fc8e1f855cf2481245caf4e8a5a006a982a71ddccec84032ed41f9d8da8c14 + languageName: node + linkType: hard + "is-arrayish@npm:^0.2.1": version: 0.2.1 resolution: "is-arrayish@npm:0.2.1" @@ -18481,6 +18714,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-callable@npm:^1.1.3": + version: 1.2.7 + resolution: "is-callable@npm:1.2.7" + checksum: 61fd57d03b0d984e2ed3720fb1c7a897827ea174bd44402878e059542ea8c4aeedee0ea0985998aa5cc2736b2fa6e271c08587addb5b3959ac52cf665173d1ac + languageName: node + linkType: hard + "is-callable@npm:^1.1.4, is-callable@npm:^1.2.4": version: 1.2.4 resolution: "is-callable@npm:1.2.4" @@ -18558,6 +18798,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-date-object@npm:^1.0.5": + version: 1.0.5 + resolution: "is-date-object@npm:1.0.5" + dependencies: + has-tostringtag: ^1.0.0 + checksum: baa9077cdf15eb7b58c79398604ca57379b2fc4cf9aa7a9b9e295278648f628c9b201400c01c5e0f7afae56507d741185730307cbe7cad3b9f90a77e5ee342fc + languageName: node + linkType: hard + "is-decimal@npm:^1.0.0": version: 1.0.4 resolution: "is-decimal@npm:1.0.4" @@ -18723,6 +18972,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-map@npm:^2.0.1, is-map@npm:^2.0.2": + version: 2.0.2 + resolution: "is-map@npm:2.0.2" + checksum: ace3d0ecd667bbdefdb1852de601268f67f2db725624b1958f279316e13fecb8fa7df91fd60f690d7417b4ec180712f5a7ee967008e27c65cfd475cc84337728 + languageName: node + linkType: hard + "is-module@npm:^1.0.0": version: 1.0.0 resolution: "is-module@npm:1.0.0" @@ -18918,6 +19174,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-set@npm:^2.0.1, is-set@npm:^2.0.2": + version: 2.0.2 + resolution: "is-set@npm:2.0.2" + checksum: b64343faf45e9387b97a6fd32be632ee7b269bd8183701f3b3f5b71a7cf00d04450ed8669d0bd08753e08b968beda96fca73a10fd0ff56a32603f64deba55a57 + languageName: node + linkType: hard + "is-shared-array-buffer@npm:^1.0.2": version: 1.0.2 resolution: "is-shared-array-buffer@npm:1.0.2" @@ -18975,6 +19238,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-typed-array@npm:^1.1.10": + version: 1.1.12 + resolution: "is-typed-array@npm:1.1.12" + dependencies: + which-typed-array: ^1.1.11 + checksum: 4c89c4a3be07186caddadf92197b17fda663a9d259ea0d44a85f171558270d36059d1c386d34a12cba22dfade5aba497ce22778e866adc9406098c8fc4771796 + languageName: node + linkType: hard + "is-typedarray@npm:^1.0.0": version: 1.0.0 resolution: "is-typedarray@npm:1.0.0" @@ -19007,6 +19279,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-weakmap@npm:^2.0.1": + version: 2.0.1 + resolution: "is-weakmap@npm:2.0.1" + checksum: 1222bb7e90c32bdb949226e66d26cb7bce12e1e28e3e1b40bfa6b390ba3e08192a8664a703dff2a00a84825f4e022f9cd58c4599ff9981ab72b1d69479f4f7f6 + languageName: node + linkType: hard + "is-weakref@npm:^1.0.2": version: 1.0.2 resolution: "is-weakref@npm:1.0.2" @@ -19016,6 +19295,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-weakset@npm:^2.0.1": + version: 2.0.2 + resolution: "is-weakset@npm:2.0.2" + dependencies: + call-bind: ^1.0.2 + get-intrinsic: ^1.1.1 + checksum: 5d8698d1fa599a0635d7ca85be9c26d547b317ed8fd83fc75f03efbe75d50001b5eececb1e9971de85fcde84f69ae6f8346bc92d20d55d46201d328e4c74a367 + languageName: node + linkType: hard + "is-whitespace-character@npm:^1.0.0": version: 1.0.4 resolution: "is-whitespace-character@npm:1.0.4" @@ -19074,6 +19363,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"isarray@npm:^2.0.5": + version: 2.0.5 + resolution: "isarray@npm:2.0.5" + checksum: bd5bbe4104438c4196ba58a54650116007fa0262eccef13a4c55b2e09a5b36b59f1e75b9fcc49883dd9d4953892e6fc007eef9e9155648ceea036e184b0f930a + languageName: node + linkType: hard + "isexe@npm:^2.0.0": version: 2.0.0 resolution: "isexe@npm:2.0.0" @@ -21259,6 +21555,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"lz-string@npm:^1.5.0": + version: 1.5.0 + resolution: "lz-string@npm:1.5.0" + bin: + lz-string: bin/bin.js + checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d + languageName: node + linkType: hard + "macos-release@npm:^2.5.0": version: 2.5.0 resolution: "macos-release@npm:2.5.0" @@ -22731,6 +23036,16 @@ fsevents@^1.2.7: languageName: node linkType: hard +"object-is@npm:^1.1.5": + version: 1.1.5 + resolution: "object-is@npm:1.1.5" + dependencies: + call-bind: ^1.0.2 + define-properties: ^1.1.3 + checksum: 989b18c4cba258a6b74dc1d74a41805c1a1425bce29f6cabb50dcb1a6a651ea9104a1b07046739a49a5bb1bc49727bcb00efd5c55f932f6ea04ec8927a7901fe + languageName: node + linkType: hard + "object-keys@npm:^1.1.1": version: 1.1.1 resolution: "object-keys@npm:1.1.1" @@ -22759,6 +23074,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"object.assign@npm:^4.1.4": + version: 4.1.5 + resolution: "object.assign@npm:4.1.5" + dependencies: + call-bind: ^1.0.5 + define-properties: ^1.2.1 + has-symbols: ^1.0.3 + object-keys: ^1.1.1 + checksum: f9aeac0541661370a1fc86e6a8065eb1668d3e771f7dbb33ee54578201336c057b21ee61207a186dd42db0c62201d91aac703d20d12a79fc79c353eed44d4e25 + languageName: node + linkType: hard + "object.entries@npm:^1.1.5": version: 1.1.5 resolution: "object.entries@npm:1.1.5" @@ -26310,6 +26637,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"regexp.prototype.flags@npm:^1.5.1": + version: 1.5.1 + resolution: "regexp.prototype.flags@npm:1.5.1" + dependencies: + call-bind: ^1.0.2 + define-properties: ^1.2.0 + set-function-name: ^2.0.0 + checksum: 869edff00288442f8d7fa4c9327f91d85f3b3acf8cbbef9ea7a220345cf23e9241b6def9263d2c1ebcf3a316b0aa52ad26a43a84aa02baca3381717b3e307f47 + languageName: node + linkType: hard + "regexpp@npm:^3.0.0, regexpp@npm:^3.1.0, regexpp@npm:^3.2.0": version: 3.2.0 resolution: "regexpp@npm:3.2.0" @@ -27644,6 +27982,30 @@ fsevents@^1.2.7: languageName: node linkType: hard +"set-function-length@npm:^1.1.1": + version: 1.2.0 + resolution: "set-function-length@npm:1.2.0" + dependencies: + define-data-property: ^1.1.1 + function-bind: ^1.1.2 + get-intrinsic: ^1.2.2 + gopd: ^1.0.1 + has-property-descriptors: ^1.0.1 + checksum: 63e34b45a2ff9abb419f52583481bf8ba597d33c0c85e56999085eb6078a0f7fbb4222051981c287feceeb358aa7789e7803cea2c82ac94c0ab37059596aff79 + languageName: node + linkType: hard + +"set-function-name@npm:^2.0.0": + version: 2.0.1 + resolution: "set-function-name@npm:2.0.1" + dependencies: + define-data-property: ^1.0.1 + functions-have-names: ^1.2.3 + has-property-descriptors: ^1.0.0 + checksum: 4975d17d90c40168eee2c7c9c59d023429f0a1690a89d75656306481ece0c3c1fb1ebcc0150ea546d1913e35fbd037bace91372c69e543e51fc5d1f31a9fa126 + languageName: node + linkType: hard + "set-value@npm:^2.0.0, set-value@npm:^2.0.1": version: 2.0.1 resolution: "set-value@npm:2.0.1" @@ -28389,6 +28751,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"stop-iteration-iterator@npm:^1.0.0": + version: 1.0.0 + resolution: "stop-iteration-iterator@npm:1.0.0" + dependencies: + internal-slot: ^1.0.4 + checksum: d04173690b2efa40e24ab70e5e51a3ff31d56d699550cfad084104ab3381390daccb36652b25755e420245f3b0737de66c1879eaa2a8d4fc0a78f9bf892fcb42 + languageName: node + linkType: hard + "stream-browserify@npm:^2.0.1": version: 2.0.2 resolution: "stream-browserify@npm:2.0.2" @@ -31625,6 +31996,18 @@ fsevents@^1.2.7: languageName: node linkType: hard +"which-collection@npm:^1.0.1": + version: 1.0.1 + resolution: "which-collection@npm:1.0.1" + dependencies: + is-map: ^2.0.1 + is-set: ^2.0.1 + is-weakmap: ^2.0.1 + is-weakset: ^2.0.1 + checksum: c815bbd163107ef9cb84f135e6f34453eaf4cca994e7ba85ddb0d27cea724c623fae2a473ceccfd5549c53cc65a5d82692de418166df3f858e1e5dc60818581c + languageName: node + linkType: hard + "which-module@npm:^2.0.0": version: 2.0.0 resolution: "which-module@npm:2.0.0" @@ -31639,6 +32022,19 @@ fsevents@^1.2.7: languageName: node linkType: hard +"which-typed-array@npm:^1.1.11, which-typed-array@npm:^1.1.13": + version: 1.1.13 + resolution: "which-typed-array@npm:1.1.13" + dependencies: + available-typed-arrays: ^1.0.5 + call-bind: ^1.0.4 + for-each: ^0.3.3 + gopd: ^1.0.1 + has-tostringtag: ^1.0.0 + checksum: 3828a0d5d72c800e369d447e54c7620742a4cc0c9baf1b5e8c17e9b6ff90d8d861a3a6dd4800f1953dbf80e5e5cec954a289e5b4a223e3bee4aeb1f8c5f33309 + languageName: node + linkType: hard + "which@npm:^1.2.9, which@npm:^1.3.1": version: 1.3.1 resolution: "which@npm:1.3.1" From 34a617a0dded203b30c3a2b499a8abe4c48a2e70 Mon Sep 17 00:00:00 2001 From: Arya Emami Date: Thu, 18 Jan 2024 00:24:32 -0600 Subject: [PATCH 41/46] Add @testing-library/react as a dev dependency --- package.json | 1 + yarn.lock | 13 +++++++------ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 2b84b06b13..2a6b558106 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "examples/lazy-injection/*" ], "devDependencies": { + "@testing-library/react": "^14.1.2", "eslint": "^7.25.0", "eslint-config-prettier": "^8.3.0", "eslint-config-react-app": "^7.0.1", diff --git a/yarn.lock b/yarn.lock index e988d8feec..683aac381e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8761,11 +8761,11 @@ __metadata: linkType: hard "@types/node@npm:^20.11.0": - version: 20.11.0 - resolution: "@types/node@npm:20.11.0" + version: 20.11.5 + resolution: "@types/node@npm:20.11.5" dependencies: undici-types: ~5.26.4 - checksum: 1bd6890db7e0404d11c33d28f46f19f73256f0ba35d19f0ef2a0faba09f366f188915fb9338eebebcc472075c1c4941e17c7002786aa69afa44980737846b200 + checksum: a542727de1334ae20a3ca034b0ecf4b464a57ca01efc4f9cf43bd9ab93896125ab3c2de060ecd8f6ae23b86c6bf3463f681b643e69c032c6a662d376c98a6092 languageName: node linkType: hard @@ -27025,9 +27025,9 @@ fsevents@^1.2.7: linkType: hard "reselect@npm:^5.0.1": - version: 5.1.0 - resolution: "reselect@npm:5.1.0" - checksum: 5bc9c5d03d7caea00d0c0e24330bf23d91801227346fec1cef6a60988ab8d3dd7cee76e6994ca0915bc1c20845bb2bd929b95753763e0a9db74c0f9dff5cb845 + version: 5.0.1 + resolution: "reselect@npm:5.0.1" + checksum: 7663b4c28a0e908e74dc25262e1d813d028b9c2ee96160cb0f40a16f09c5ac632fa16af6bafede7eb0ff16ab2d5bea2cd8814d9a9488e0262b8317fef90b1dc0 languageName: node linkType: hard @@ -27445,6 +27445,7 @@ fsevents@^1.2.7: version: 0.0.0-use.local resolution: "rtk-monorepo@workspace:." dependencies: + "@testing-library/react": ^14.1.2 eslint: ^7.25.0 eslint-config-prettier: ^8.3.0 eslint-config-react-app: ^7.0.1 From 295ccec27624404508d3d97d1464dc96950035c8 Mon Sep 17 00:00:00 2001 From: Arya Emami Date: Thu, 18 Jan 2024 05:04:03 -0600 Subject: [PATCH 42/46] Update lockfile --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 76ff627c3f..0028d09fd5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -30353,7 +30353,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"typescript@npm:5.3.3, typescript@npm:^5.0.0, typescript@npm:^5.2.2": +"typescript@npm:5.3.3, typescript@npm:^5.0.0, typescript@npm:^5.2.2, typescript@npm:^5.3.3": version: 5.3.3 resolution: "typescript@npm:5.3.3" bin: @@ -30413,7 +30413,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"typescript@patch:typescript@5.3.3#~builtin, typescript@patch:typescript@^5.0.0#~builtin, typescript@patch:typescript@^5.2.2#~builtin": +"typescript@patch:typescript@5.3.3#~builtin, typescript@patch:typescript@^5.0.0#~builtin, typescript@patch:typescript@^5.2.2#~builtin, typescript@patch:typescript@^5.3.3#~builtin": version: 5.3.3 resolution: "typescript@patch:typescript@npm%3A5.3.3#~builtin::version=5.3.3&hash=701156" bin: From e97fed0a738a9b3276386c9d25554ae7d4ac9c40 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Mon, 29 Jan 2024 16:24:02 +0000 Subject: [PATCH 43/46] run prettier --- .../lazy-injection/kitchen-sink/src/app/createAppSlice.ts | 2 +- examples/lazy-injection/kitchen-sink/tsconfig.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/lazy-injection/kitchen-sink/src/app/createAppSlice.ts b/examples/lazy-injection/kitchen-sink/src/app/createAppSlice.ts index 061b6fa772..64afebbb60 100644 --- a/examples/lazy-injection/kitchen-sink/src/app/createAppSlice.ts +++ b/examples/lazy-injection/kitchen-sink/src/app/createAppSlice.ts @@ -1,4 +1,4 @@ -import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit"; +import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit" // `buildCreateSlice` allows us to create a slice with async thunks. export const createAppSlice = buildCreateSlice({ diff --git a/examples/lazy-injection/kitchen-sink/tsconfig.json b/examples/lazy-injection/kitchen-sink/tsconfig.json index d471699560..8df57bf524 100644 --- a/examples/lazy-injection/kitchen-sink/tsconfig.json +++ b/examples/lazy-injection/kitchen-sink/tsconfig.json @@ -14,8 +14,8 @@ "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", - "types": ["vitest/globals"] + "types": ["vitest/globals"], }, "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] + "references": [{ "path": "./tsconfig.node.json" }], } From cc3d827bf821cd2f0b41000ce46c4adb7861ffbb Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Wed, 17 Apr 2024 15:05:44 +0100 Subject: [PATCH 44/46] use a let for store instead of test context --- .../src/features/counter/counterSlice.test.ts | 19 +++++++------------ .../src/features/todos/todoSlice.test.ts | 18 ++++++------------ 2 files changed, 13 insertions(+), 24 deletions(-) diff --git a/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.test.ts b/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.test.ts index 12eafe1ff1..e30b91a1a2 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.test.ts +++ b/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.test.ts @@ -1,4 +1,3 @@ -import type { AppStore } from "../../app/store" import { makeStore } from "../../app/store" import type { CounterSliceState } from "./counterSlice" import { @@ -9,20 +8,16 @@ import { selectCount, } from "./counterSlice" -interface LocalTestContext { - store: AppStore -} +describe("counter reducer", it => { + let store = makeStore() -describe("counter reducer", it => { - beforeEach(context => { + beforeEach(() => { const initialState: CounterSliceState = { value: 3, status: "idle", } - const store = makeStore({ counter: initialState }) - - context.store = store + store = makeStore({ counter: initialState }) }) it("should handle initial state", () => { @@ -32,7 +27,7 @@ describe("counter reducer", it => { }) }) - it("should handle increment", ({ store }) => { + it("should handle increment", () => { expect(selectCount(store.getState())).toBe(3) store.dispatch(increment()) @@ -40,7 +35,7 @@ describe("counter reducer", it => { expect(selectCount(store.getState())).toBe(4) }) - it("should handle decrement", ({ store }) => { + it("should handle decrement", () => { expect(selectCount(store.getState())).toBe(3) store.dispatch(decrement()) @@ -48,7 +43,7 @@ describe("counter reducer", it => { expect(selectCount(store.getState())).toBe(2) }) - it("should handle incrementByAmount", ({ store }) => { + it("should handle incrementByAmount", () => { expect(selectCount(store.getState())).toBe(3) store.dispatch(incrementByAmount(2)) diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.test.ts b/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.test.ts index d47a1b7f90..9d64f60b38 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.test.ts +++ b/examples/lazy-injection/kitchen-sink/src/features/todos/todoSlice.test.ts @@ -1,5 +1,4 @@ import { nanoid } from "@reduxjs/toolkit" -import type { AppStore } from "../../app/store" import { makeStore } from "../../app/store" import type { Todo } from "./todoSlice" import { @@ -14,19 +13,14 @@ import { todoSlice, } from "./todoSlice" -interface LocalTestContext { - store: AppStore -} - const initialTodo: Todo = { id: nanoid(), title: "Initial todo" } -describe("counter reducer", it => { - beforeEach(context => { - const store = makeStore({ +describe("counter reducer", () => { + let store = makeStore() + beforeEach(() => { + store = makeStore({ todo: todoAdapter.setOne(todoAdapter.getInitialState(), initialTodo), }) - - context.store = store }) it("should handle initial state", () => { @@ -35,7 +29,7 @@ describe("counter reducer", it => { ) }) - it("should handle addTodo", ({ store }) => { + it("should handle addTodo", () => { expect(selectTodoIds(store.getState())).toStrictEqual([initialTodo.id]) store.dispatch(addTodo({ title: "Second todo!" })) @@ -48,7 +42,7 @@ describe("counter reducer", it => { }) }) - it("should handle deleteTodo", ({ store }) => { + it("should handle deleteTodo", () => { expect(selectAllTodos(store.getState())).toStrictEqual([initialTodo]) store.dispatch(deleteTodo(initialTodo.id)) From b13943ad7cb4c20510860b0cdf407fdc20ad4ebf Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Wed, 17 Apr 2024 15:22:25 +0100 Subject: [PATCH 45/46] update prettier 2 resolution --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index fe56fd6e8b..9686f83e2b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24054,11 +24054,11 @@ __metadata: linkType: hard "prettier@npm:^2.1.1": - version: 2.3.1 - resolution: "prettier@npm:2.3.1" + version: 2.8.8 + resolution: "prettier@npm:2.8.8" bin: prettier: bin-prettier.js - checksum: 10/dae97c14da795b789f89c84f83f86003a10482b572d1fc365b54fea81277721795da1a6a44599a655d1131ff2ea8467bae0c5ecd9def15dca67b7fe740fe2e0e + checksum: 10/00cdb6ab0281f98306cd1847425c24cbaaa48a5ff03633945ab4c701901b8e96ad558eb0777364ffc312f437af9b5a07d0f45346266e8245beaf6247b9c62b24 languageName: node linkType: hard From fd8f9bbd4cc23363cf019f8bbc1bcff753e2c10b Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Wed, 17 Apr 2024 15:28:07 +0100 Subject: [PATCH 46/46] move note regarding using original createSlice --- .../kitchen-sink/src/features/counter/counterSlice.ts | 1 - examples/publish-ci/react-native/src/app/createAppSlice.ts | 1 + .../publish-ci/react-native/src/features/counter/counterSlice.ts | 1 - 3 files changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.ts index 2d9c58ca9f..c66297e733 100644 --- a/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.ts +++ b/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.ts @@ -14,7 +14,6 @@ const initialState: CounterSliceState = { status: "idle", } -// If you are not using async thunks you can use the standalone `createSlice`. export const counterSlice = createAppSlice({ name: "counter", // `createSlice` will infer the state type from the `initialState` argument diff --git a/examples/publish-ci/react-native/src/app/createAppSlice.ts b/examples/publish-ci/react-native/src/app/createAppSlice.ts index 64afebbb60..aca4dff928 100644 --- a/examples/publish-ci/react-native/src/app/createAppSlice.ts +++ b/examples/publish-ci/react-native/src/app/createAppSlice.ts @@ -1,6 +1,7 @@ import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit" // `buildCreateSlice` allows us to create a slice with async thunks. +// If you are not using async thunks you can use the standalone `createSlice`. export const createAppSlice = buildCreateSlice({ creators: { asyncThunk: asyncThunkCreator }, }) diff --git a/examples/publish-ci/react-native/src/features/counter/counterSlice.ts b/examples/publish-ci/react-native/src/features/counter/counterSlice.ts index 07bc1f5c3d..4be612fd87 100644 --- a/examples/publish-ci/react-native/src/features/counter/counterSlice.ts +++ b/examples/publish-ci/react-native/src/features/counter/counterSlice.ts @@ -13,7 +13,6 @@ const initialState: CounterSliceState = { status: "idle", } -// If you are not using async thunks you can use the standalone `createSlice`. export const counterSlice = createAppSlice({ name: "counter", // `createSlice` will infer the state type from the `initialState` argument