chore(deps) Update all non-major dependencies #11

renovate · 2022-10-11T07:47:24Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@commitlint/config-conventional (source)	`17.1.0` -> `17.3.0`
@emotion/react (source)	`11.10.4` -> `11.10.5`
@mantine/core (source)	`5.5.5` -> `5.8.3`
@mantine/hooks (source)	`5.5.5` -> `5.8.3`
@reduxjs/toolkit (source)	`1.8.6` -> `1.9.0`
@types/node (source)	`18.8.5` -> `18.11.9`
@types/react (source)	`18.0.21` -> `18.0.25`
@types/react-dom (source)	`18.0.6` -> `18.0.9`
@types/yargs (source)	`17.0.13` -> `17.0.14`
@vitejs/plugin-react (source)	`2.1.0` -> `2.2.0`
axios (source)	`1.1.2` -> `1.2.0`
commitlint (source)	`17.1.2` -> `17.3.0`
esbuild	`0.15.10` -> `0.15.15`
esbuild-register	`3.3.3` -> `3.4.1`
eslint-plugin-react	`7.31.10` -> `7.31.11`
framer-motion	`7.5.3` -> `7.6.9`
husky (source)	`8.0.1` -> `8.0.2`
prettier (source)	`2.7.1` -> `2.8.0`
react-redux	`8.0.4` -> `8.0.5`
react-router-dom	`6.4.2` -> `6.4.3`
socket.io	`4.5.2` -> `4.5.4`
socket.io-client	`4.5.2` -> `4.5.4`
typescript (source)	`4.8.4` -> `4.9.3`
vite (source)	`3.1.7` -> `3.2.4`
vite-plugin-svgr	`2.2.1` -> `2.2.2`
yargs (source)	`17.6.0` -> `17.6.2`

Release Notes

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

`v17.3.0`

Compare Source

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

`v17.2.0`

Compare Source

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

emotion-js/emotion

`v11.10.5`

Compare Source

Patch Changes

#2929 13afe030 Thanks @Andarist! - The support for @container queries has been added by updating the underlying parser (stylis) .
Updated dependencies [13afe030, c02b1214]:
- @emotion/babel-plugin @11.10.5
- @emotion/serialize @1.1.1

mantinedev/mantine

`v5.8.3`

Compare Source

What's Changed

[@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#3010)
[@mantine/tiptap] Fix incorrect content border-radius
[@mantine/tiptap] Fix placeholder extension not working as expected
[@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#3027)
[@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#3011)

New Contributors

@nicolassanmar made their first contribution in https://github.com/mantinedev/mantine/pull/3010

Full Changelog: mantinedev/mantine@5.8.2...5.8.3

`v5.8.2`

What's Changed

[@mantine/tiptap] Fix incorrect hr control label
[@mantine/tiptap] Fix incorrect editor prop type
[@mantine/tiptap] Fix typo in strikethrough label (#3004)
[@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
[@mantine/core] Pagination: Fix incorrect handling of negative and zero total
[@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#2979)
[@mantine/core] NumberInput: Fix readOnly prop not working correctly (#2956)
[@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM

New Contributors

@Sajarin-M made their first contribution in https://github.com/mantinedev/mantine/pull/2956
@Derrreks made their first contribution in https://github.com/mantinedev/mantine/pull/2997
@thevipinmishra made their first contribution in https://github.com/mantinedev/mantine/pull/2987
@Kinbaum made their first contribution in https://github.com/mantinedev/mantine/pull/2982
@MohammadHH made their first contribution in https://github.com/mantinedev/mantine/pull/3006

Full Changelog: mantinedev/mantine@5.8.0...5.8.2

`v5.8.0`

Compare Source

View changelog with demos on mantine.dev website

Tiptap rich text editor

New @mantine/tiptap package is a replacement
for @mantine/rte package. RichTextEditor
component is now based on Tiptap, it supports all of
Tiptap extensions and provides flexible components API.

import { RichTextEditor, Link } from '@&#8203;mantine/tiptap';
import { useEditor } from '@&#8203;tiptap/react';
import Highlight from '@&#8203;tiptap/extension-highlight';
import StarterKit from '@&#8203;tiptap/starter-kit';
import Underline from '@&#8203;tiptap/extension-underline';
import TextAlign from '@&#8203;tiptap/extension-text-align';
import Superscript from '@&#8203;tiptap/extension-superscript';
import SubScript from '@&#8203;tiptap/extension-subscript';

const content =
  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';

function Demo() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Underline,
      Link,
      Superscript,
      SubScript,
      Highlight,
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
    ],
    content,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky stickyOffset={60}>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
          <RichTextEditor.Strikethrough />
          <RichTextEditor.ClearFormatting />
          <RichTextEditor.Highlight />
          <RichTextEditor.Code />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.H1 />
          <RichTextEditor.H2 />
          <RichTextEditor.H3 />
          <RichTextEditor.H4 />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Blockquote />
          <RichTextEditor.Hr />
          <RichTextEditor.BulletList />
          <RichTextEditor.OrderedList />
          <RichTextEditor.Subscript />
          <RichTextEditor.Superscript />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Link />
          <RichTextEditor.Unlink />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.AlignLeft />
          <RichTextEditor.AlignCenter />
          <RichTextEditor.AlignJustify />
          <RichTextEditor.AlignRight />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

@mantine/rte package deprecation

Quill based RichTextEditor is now deprecated.
@mantine/rte package will no longer receive any updates, support for it
will be discontinued when 6.0.0 version is released. We recommend to switch
to Tiptap based editor as soon as possible.

Other changes

All components now support display style prop
use-toggle hook can now handle unlimited number of options
ColorPicker and ColorInput components now support hexa format

New Contributors

@yevhverb made their first contribution in https://github.com/mantinedev/mantine/pull/2912

Full Changelog: mantinedev/mantine@5.7.2...5.8.0

`v5.7.2`

Compare Source

What's Changed

[@mantine/core] RangeSlider: Fix incorrect minRange handling for negative values (#2897)
[@mantine/core] Slider: Fix unexpected step behavior when min is set to odd number (#2855)
[@mantine/core] Prevent focus shifting from the input when clear button is pressed in Select and MultiSelect components
[@mantine/core] TypographyStylesProvider: Add mark styles
[@mantine/core] Image: Do not show placeholder when image is loading to avoid issues with ssr and rapidly changing src prop
[@mantine/core] Slider: Fix incorrect marks styles when inverted prop is set (#2894)
[@mantine/core] Fix incorrect label alignment in Checkbox, Radio and Switch components when label is a ReactNode (#2881)
[@mantine/core] Modal: Fix incorrect click outside behavior (#2896)
[@mantine/core] Radio: Fix size prop not being respected when used within Radio.Group (#2913)

New Contributors

@BoringBoredom made their first contribution in https://github.com/mantinedev/mantine/pull/2916
@bobwade made their first contribution in https://github.com/mantinedev/mantine/pull/2894

Full Changelog: mantinedev/mantine@5.7.1...5.7.2

`v5.7.1`

Compare Source

What's Changed

[@mantine/hooks] use-window-event: Fix event listener not being updated when event type or function changes
[@mantine/spotlight] Allow overriding autoComplete prop with searchInputProps
[@mantine/core] Menu: Allow overriding Menu.Item button type
[@mantine/hooks] use-scroll-into-view: Fix parameters changes being ignored (#2866)
[@mantine/hooks] use-local-storage: Fix incorrect value returned if defaultValue is not specified (#2872)
[@mantine/styles] Add missing right style prop (#2887)
[@mantine/form] Add missing TransformValues type to createFormContext (#2893)

New Contributors

@AabhasDhaubanja made their first contribution in https://github.com/mantinedev/mantine/pull/2893
@rChaoz made their first contribution in https://github.com/mantinedev/mantine/pull/2866

Full Changelog: mantinedev/mantine@5.7.0...5.7.1

`v5.7.0`

Compare Source

View changelog with demos on mantine.dev website

Style props

All Mantine components now support responsive style props:

import { Box } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Box
      w={{ base: 200, sm: 400, lg: 500 }}
      py={{ base: 'xs', sm: 'md', lg: 'xl' }}
      bg="blue.7"
      c="#fff"
      ta="center"
      mx="auto"
    >
      Box with responsive style props
    </Box>
  );
}

Flex component

Flex component is an alternative to Group and Stack components.
It supports new responsive style props:

import { Flex, Button } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Flex
      direction={{ base: 'column', sm: 'row' }}
      gap={{ base: 'sm', sm: 'lg' }}
      justify={{ sm: 'center' }}
    >
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Flex>
  );
}

Focus ring styles on theme

You can now customize focus ring styles for all components in MantineProvider:

function Demo() {
  return (
    <MantineProvider
      inherit
      theme={{
        focusRingStyles: {
          // reset styles are applied to <button /> and <a /> elements
          // in &:focus:not(:focus-visible) selector to mimic
          // default browser behavior for native <button /> and <a /> elements
          resetStyles: () => ({ outline: 'none' }),

          // styles applied to all elements expect inputs based on Input component
          // styled are added with &:focus selector
          styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),

          // focus styles applied to components that are based on Input
          // styled are added with &:focus selector
          inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
        },
      }}
    >
      <Group grow>
        <Button>Move focus with tab</Button>
        <TextInput placeholder="Focus input to see styles override" />
      </Group>
    </MantineProvider>
  );
}

Responsive Header and Footer height

Header and Footer components now support responsive height:

import { Header } from '@&#8203;mantine/core';

function Demo() {
  return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
}

Other changes

Collapse component now supports axis prop, it is now possible to animate width
Button component now supports loaderPosition="center"
Carousel now supports onSlideChange prop
MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
use-form onSubmit can now be called without form event
Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling

New Contributors

@odysseaspapadimas made their first contribution in https://github.com/mantinedev/mantine/pull/2785
@BenHakimIlyass made their first contribution in https://github.com/mantinedev/mantine/pull/2844
@Manas-Nagelia made their first contribution in https://github.com/mantinedev/mantine/pull/2857

Full Changelog: mantinedev/mantine@5.6.4...5.7.0

`v5.6.4`

Compare Source

What's Changed

[@mantine/core] Slider: Fix incorrect min/max values handling (#2839)
[@mantine/core] ScrollArea: Fix incorrect ref usage in demos

New Contributors

@noahsb made their first contribution in https://github.com/mantinedev/mantine/pull/2822
@PhantomKnight287 made their first contribution in https://github.com/mantinedev/mantine/pull/2850

Full Changelog: mantinedev/mantine@5.6.3...5.6.4

`v5.6.3`

Compare Source

What's Changed

[@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedControl and ColorPicker components (box-shadow was replaced with outline)
[@mantine/core] Drawer: Fix transitionDuration not being respected for exit transition (#2820)
[@mantine/core] Pagination: Fix theme.fontFamily not being respected (#2796)
[@mantine/form] Fix required transform value type in UseFormInput (#2816)
[@mantine/styles] Set color-scheme style in html element (#2808)
[@mantine/core] Add data-checked attribute to Checkbox, Radio and Switch when components are used within groups
[@mantine/styles] Fix incorrect styles params type in strict ts mode

New Contributors

@drenther made their first contribution in https://github.com/mantinedev/mantine/pull/2807
@lex111 made their first contribution in https://github.com/mantinedev/mantine/pull/2808
@fmichaut made their first contribution in https://github.com/mantinedev/mantine/pull/2816
@cheechoo28 made their first contribution in https://github.com/mantinedev/mantine/pull/2820

Full Changelog: mantinedev/mantine@5.6.2...5.6.3

`v5.6.2`

Compare Source

What's Changed

[@mantine/core] Modal: Fix modal not being centered because of scrollbars offset
[@mantine/core] MultiSelect: Fix poor selected values contrast with light color scheme and filled input variant
[@mantine/dropzone] Fix Dropzone.FullScreen opened when the user selects and drags text on the page
[@mantine/core] NativeSelect: Fix incorrect defaultValue handing in controlled components
[@mantine/rte] Fix theme.defaultRadius not being respected by some controls (#2781)
[@mantine/styles] Improve useComponentDefaultProps types (#2065)
[@mantine/core] Add arrowRadius support to Tooltip and Popover (#2779)

New Contributors

@denizguzel made their first contribution in https://github.com/mantinedev/mantine/pull/2779
@congyaqwq made their first contribution in https://github.com/mantinedev/mantine/pull/2065

Full Changelog: mantinedev/mantine@5.6.1...5.6.2

`v5.6.1`

Compare Source

What's Changed

[@mantine/core] Popover: Set default width to max-content to reduce position shift in some cases (#2500)
[@mantine/core] Popover: Add position fallback to reduce postion shift (#2500)
[@mantine/core] Slider: Fix incorrect min/max boundaries handling when step is larger than the difference between current value and min/max (#2656)
[@mantine/hooks] use-idle: Improve types for events (#2704)
[@mantine/hooks] use-focus-trap: Fix incorrect aria-hidden handling (#2735)
[@mantine/core] Popover: Fix infinite loop when component is used with Preact (#2752)
[@mantine/core] Tooltip: Add nested tooltips support (#2768)
[@mantine/core] TransferList: Add transferIcon, transferAllIcon props, controlled search and tuple syntax for seachPlaceholder and nothingFound props (#2769)
[@mantine/dropzone] Update react-dropzone to 14.2.3 to fix OS detection issue (#2746)
[@mantine/form] Fix incorrect required second argument in UseFormReturnType (#2758)
[@mantine/core] Rating: Fix count and fractions parameters to accept integers only (#2763)
[@mantine/core] Rating: Fix broken react 17 compatibility

New Contributors

@SrBrahma made their first contribution in https://github.com/mantinedev/mantine/pull/2746
@nfbuckley made their first contribution in https://github.com/mantinedev/mantine/pull/2768
@Keilo75 made their first contribution in https://github.com/mantinedev/mantine/pull/2735
@arimariojesus made their first contribution in https://github.com/mantinedev/mantine/pull/2704

Full Changelog: mantinedev/mantine@5.6.0...5.6.1

`v5.6.0`

Compare Source

View changelog with demos on mantine.dev website

Rating component

New Rating component:

import { Rating } from '@&#8203;mantine/core';

function Demo() {
  return <Rating defaultValue={2} />
}

Progress sections props

Progress and RingProgress
components now support adding props to sections:

import { useState } from 'react';
import { Progress, Text } from '@&#8203;mantine/core';

function Demo() {
  const [hovered, setHovered] = useState(-1);
  const reset = () => setHovered(-1);
  return (
    <>
      <Progress
        onMouseLeave={() => setHovered(-1)}
        size="xl"
        sections={[
          { value: 40, color: 'cyan', onMouseEnter: () => setHovered(0), onMouseLeave: reset },
          { value: 20, color: 'blue', onMouseEnter: () => setHovered(1), onMouseLeave: reset },
          { value: 15, color: 'indigo', onMouseEnter: () => setHovered(2), onMouseLeave: reset },
        ]}
      />
      <Text>Hovered section: {hovered === -1 ? 'none' : hovered}</Text>
    </>
  );
}

use-favicon hook

New use-favicon hook:

import { useState } from 'react';
import { useFavicon } from '@&#8203;mantine/hooks';
import { Group, Button } from '@&#8203;mantine/core';

function Demo() {
  const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
  const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
  const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');

  useFavicon(favicon);

  return (
    <Group position="center">
      <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
      <Button onClick={setMantineFavicon}>Mantine favicon</Button>
    </Group>
  );
}

Form index reference in validateInputOnBlur and validateInputOnChange

You can now use FORM_INDEX in use-form to validate nested array fields with validateInputOnBlur and validateInputOnChange settings:

import { useForm, FORM_INDEX } from '@&#8203;mantine/form';
import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';

function Demo() {
  const form = useForm({
    validateInputOnChange: [
      'email',
      'name',
      // use FORM_INDEX to reference fields indices
      `jobs.${FORM_INDEX}.title`,
    ],
    initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] },

    // functions will be used to validate values at corresponding key
    validate: {
      name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
      email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
      age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
      jobs: {
        title: (value) => (value.length < 2 ? 'Job must have at least 2 letters' : null),
      },
    },
  });

  return (
    <form style={{ maxWidth: 320, margin: 'auto' }} onSubmit={form.onSubmit(console.log)}>
      <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
      <TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
      <NumberInput
        mt="sm"
        label="Age"
        placeholder="Age"
        min={0}
        max={99}
        {...form.getInputProps('age')}
      />
      <TextInput
        mt="sm"
        label="Job 1"
        placeholder="Job 1"
        {...form.getInputProps('jobs.0.title')}
      />
      <TextInput
        mt="sm"
        label="Job 2"
        placeholder="Job 2"
        {...form.getInputProps('jobs.1.title')}
      />
      <Button type="submit" mt="sm">
        Submit
      </Button>
    </form>
  );
}

use-form transformValues

use-form now supports transformValues options, it transforms values before they get submitted in onSubmit handler.
For example, it can be used to merge several fields into one or to convert types:

import { useState } from 'react';
import { useForm } from '@&#8203;mantine/form';
import { TextInput, Button, Box, Code } from '@&#8203;mantine/core';

function Demo() {
  const [submittedValues, setSubmittedValues] = useState('');

  const form = useForm({
    initialValues: {
      firstName: 'Jane',
      lastName: 'Doe',
      age: '33',
    },

    transformValues: (values) => ({
      fullName: `${values.firstName} ${values.lastName}`,
      age: Number(values.age) || 0,
    }),
  });

  return (
    <Box sx={{ maxWidth: 400 }} mx="auto">
      <form
        onSubmit={form.onSubmit((values) => setSubmittedValues(JSON.stringify(values, null, 2)))}
      >
        <TextInput
          label="First name"
          placeholder="First name"
          {...form.getInputProps('firstName')}
        />
        <TextInput
          label="Last name"
          placeholder="Last name"
          mt="md"
          {...form.getInputProps('lastName')}
        />
        <TextInput
          type="number"
          label="Age"
          placeholder="Age"
          mt="md"
          {...form.getInputProps('age')}
        />
        <Button type="submit" mt="md">
          Submit
        </Button>
      </form>

      {submittedValues && <Code block>{submittedValues}</Code>}
    </Box>
  );
}

Other changes

CloseButton is now a polymorphic component
Autocomplete, ColorInput, FileInput, JsonInput components now support readOnly
FileButton now supports disabled prop
MediaQuery component styles prop can now use theme
use-timeout hook now supports parameters in callback function
Vertical Tabs now support placement prop

New Contributors

@linardsblk made their first contribution in https://github.com/mantinedev/mantine/pull/2721

Full Changelog: mantinedev/mantine@5.5.6...5.6.0

`v5.5.6`

Compare Source

What's Changed

[@mantine/core] Tooltip: Add position fallback to reduce position shift (#2500)
[@mantine/dates] Remove obsolette props from Calendar and DatePicker components (#2648, #2714)
[@mantine/core] Image: Fix incorrect placeholder size calculation when width/height is not set (#2675)
[@mantine/core] Popover: Fix issue when dropdown could be scrolled pass its target (#2694)
[@mantine/core] Menu: Fix incorrect logic for controlled opened state (#2701)
[@mantine/core] PasswordInput: Fix inputContainer and iconWidth props not working

New Contributors

@Adel-ak made their first contribution in https://github.com/mantinedev/mantine/pull/2694
@MrOnosa made their first contribution in https://github.com/mantinedev/mantine/pull/2675

Full Changelog: mantinedev/mantine@5.5.5...5.5.6

reduxjs/redux-toolkit

`v1.9.0`

Compare Source

This feature release adds several new options for RTK Query's createApi and fetchBaseQuery APIs, adds a new upsertQueryData util, rewrites RTKQ's internals for improved performance, adds a new autoBatchEnhancer, deprecates the "object" syntax for createReducer and createSlice.extraReducers, deprecates and removes broken utils for getting running query promises, improves TS inference, exports additional types, and fixes a number of reported issues.

npm i @&#8203;reduxjs/toolkit@latest

yarn add @&#8203;reduxjs/toolkit@latest

We plan to start work on RTK 2.0 in the next few weeks. RTK 2.0 will focus on dropping legacy build compatibility and deprecated APIs, with some potential new features. See the linked discussion thread and give us feedback on ideas!

Deprecations and Removals

Object Argument for `createReducer` and `createSlice.extraReducers`

RTK's createReducer API was originally designed to accept a lookup table of action type strings to case reducers, like { "ADD_TODO" : (state, action) => {} }. We later added the "builder callback" form to allow more flexibility in adding "matchers" and a default handler, and did the same for createSlice.extraReducers.

We intend to remove the "object" form for both createReducer and createSlice.extraReducers in RTK 2.0. The builder callback form is effectively the same number of lines of code, and works much better with TypeScript.

Starting with this release, RTK will print a one-time runtime warning for both createReducer and createSlice.extraReducers if you pass in an object argument.

As an example, this:

const todoAdded = createAction('todos/todoAdded');

createReducer(initialState, {
  [todoAdded]: (state, action) => {}
})

createSlice({
  name,
  initialState,
  reducers: {/* case reducers here */},
  extraReducers: {
    [todoAdded]: (state, action) => {}
  }
})

should be migrated to:

createReducer(initialState, builder => {
  builder.addCase(todoAdded, (state, action) => {})
})

createSlice({
  name,
  initialState,
  reducers: {/* case reducers here */},
  extraReducers: builder => {
    builder.addCase(todoAdded, (state, action) => {})
  }
})

Codemods for Deprecated Object Reducer Syntax

To simplify upgrading codebases, we've published a set of codemods that will automatically transform the deprecated "object" syntax into the equivalent "builder" syntax.

The codemods package is available on NPM as @reduxjs/rtk-codemods. It currently contains two codemods: createReducerBuilder and createSliceBuilder.

To run the codemods against your codebase, run npx @reduxjs/rtk-codemods <TRANSFORM NAME> path/of/files/ or/some**/*glob.js.

Examples:

npx @&#8203;reduxjs/rtk-codemods createReducerBuilder ./src

npx @&#8203;reduxjs/rtk-codemods createSliceBuilder ./packages/my-app/**/*.ts

We also recommend re-running Prettier on the codebase before committing the changes.

These codemods should work, but we would greatly appreciate testing and feedback on more real-world codebases!

Object reducer codemod before/after examples

Before:

createReducer(initialState, {
  [todoAdded1a]: (state, action) => {
    // stuff
  },
  [todoAdded1b]: (state, action) => action.payload,
});

const slice1 = createSlice({
  name: "a",
  initialState: {},
  extraReducers: {
    [todoAdded1a]: (state, action) => {
      // stuff
    },
    [todoAdded1b]: (state, action) => action.payload,
  }
})

After:

createReducer(initialState, (builder) => {
  builder.addCase(todoAdded1a, (state, action) => {
    // stuff
  });

  builder.addCase(todoAdded1b, (state, action) => action.payload);
})

const slice1 = createSlice({
  name: "a",
  initialState: {},

  extraReducers: (builder) => {
    builder.addCase(todoAdded1a, (state, action) => {
      // stuff
    });

    builder.addCase(todoAdded1b, (state, action) => action.payload);
  }
})

`getRunningOperationPromises` Deprecation and Replacement

In v1.7.0, we added an api.util.getRunningOperationPromises() method for use with SSR scenarios, as well as a singular getRunningOperationPromise() method intended for possible use with React Suspense.

Unfortunately, in #2477 we realized that both those methods have a fatal flaw - they do not work with multiple stores in SSR.

As of this release, we are immediately marking getRunningOperationPromises() as deprecated and discouraging its use before we remove it completely in RTK 2.0! It will now throw both runtime and compile errors in development to enforce moving away from using it. However, we are leaving its existing behavior in production builds to avoid actual breakage.

The getRunningOperationPromise() util was experimental, and as far as we can tell not actually being used by anyone, so we are removing getRunningOperationPromise completely in this release.

As replacements, RTKQ now includes four new thunks

Configuration

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

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

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

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

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

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

vercel · 2022-10-20T15:45:12Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
roe2-wr-draft-tool	✅ Ready (Inspect)	Visit Preview	Nov 26, 2022 at 6:37PM (UTC)

renovate bot added maintenance renovate labels Oct 11, 2022

renovate bot assigned SkycladObserver Oct 11, 2022

renovate bot force-pushed the renovate/all-minor-patch branch from 048c196 to 803a8ae Compare October 12, 2022 11:37

renovate bot changed the title ~~chore(deps) Update dependency axios to ^0.27.0~~ chore(deps) Update dependency axios to ^0.27.0 - autoclosed Oct 12, 2022

renovate bot closed this Oct 12, 2022

renovate bot deleted the renovate/all-minor-patch branch October 12, 2022 11:43

renovate bot changed the title ~~chore(deps) Update dependency axios to ^0.27.0 - autoclosed~~ chore(deps) Update dependency axios to ^0.27.0 Oct 13, 2022

renovate bot restored the renovate/all-minor-patch branch October 13, 2022 17:45

renovate bot reopened this Oct 13, 2022

renovate bot force-pushed the renovate/all-minor-patch branch from 803a8ae to a149a4d Compare October 13, 2022 20:24

renovate bot changed the title ~~chore(deps) Update dependency axios to ^0.27.0~~ chore(deps) Update all non-major dependencies Oct 13, 2022

renovate bot force-pushed the renovate/all-minor-patch branch 12 times, most recently from f301631 to 366c2db Compare October 20, 2022 15:45

vercel bot deployed to Preview October 20, 2022 15:46 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from 366c2db to adcb8b6 Compare October 20, 2022 16:55

vercel bot deployed to Preview October 20, 2022 16:56 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from adcb8b6 to d01da25 Compare October 20, 2022 17:05

vercel bot deployed to Preview October 20, 2022 17:06 View deployment

vercel bot deployed to Preview November 18, 2022 06:45 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from 7d2c177 to e829400 Compare November 18, 2022 14:59

vercel bot deployed to Preview November 18, 2022 15:00 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from e829400 to 814b080 Compare November 18, 2022 17:13

vercel bot deployed to Preview November 18, 2022 17:14 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from 814b080 to c5b85b7 Compare November 18, 2022 20:24

vercel bot deployed to Preview November 18, 2022 20:26 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from c5b85b7 to e188e2f Compare November 19, 2022 18:08

vercel bot deployed to Preview November 19, 2022 18:09 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from e188e2f to 03381cd Compare November 21, 2022 19:38

vercel bot deployed to Preview November 21, 2022 19:39 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from 03381cd to 6bce782 Compare November 22, 2022 15:41

vercel bot deployed to Preview November 22, 2022 15:42 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from 6bce782 to 81af87d Compare November 24, 2022 06:38

vercel bot deployed to Preview November 24, 2022 06:40 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from 81af87d to 1dd12b3 Compare November 24, 2022 17:36

vercel bot deployed to Preview November 24, 2022 17:37 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from 1dd12b3 to 9e68754 Compare November 25, 2022 11:54

vercel bot deployed to Preview November 25, 2022 11:55 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from 9e68754 to ac9492a Compare November 25, 2022 21:39

vercel bot deployed to Preview November 25, 2022 21:43 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from ac9492a to fabdaf6 Compare November 26, 2022 00:20

vercel bot deployed to Preview November 26, 2022 00:22 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from fabdaf6 to c4c2234 Compare November 26, 2022 06:12

vercel bot deployed to Preview November 26, 2022 06:24 View deployment

renovate bot force-pushed the renovate/all-minor-patch branch from c4c2234 to 6139f23 Compare November 26, 2022 09:25

vercel bot deployed to Preview November 26, 2022 09:26 View deployment

chore(deps) Update all non-major dependencies

9c8618b

renovate bot force-pushed the renovate/all-minor-patch branch from 6139f23 to 9c8618b Compare November 26, 2022 18:36

vercel bot deployed to Preview November 26, 2022 18:37 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(deps) Update all non-major dependencies #11

chore(deps) Update all non-major dependencies #11

renovate bot commented Oct 11, 2022 •

edited

Loading

vercel bot commented Oct 20, 2022 •

edited

Loading

chore(deps) Update all non-major dependencies #11

Are you sure you want to change the base?

chore(deps) Update all non-major dependencies #11

Conversation

renovate bot commented Oct 11, 2022 • edited Loading

Release Notes

Patch Changes

What's Changed

New Contributors

What's Changed

New Contributors

Tiptap rich text editor

@​mantine/rte package deprecation

Other changes

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

Style props

Flex component

Focus ring styles on theme

Responsive Header and Footer height

Other changes

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

Rating component

Progress sections props

use-favicon hook

Form index reference in validateInputOnBlur and validateInputOnChange

use-form transformValues

Other changes

New Contributors

What's Changed

New Contributors

Deprecations and Removals

Object Argument for createReducer and createSlice.extraReducers

Codemods for Deprecated Object Reducer Syntax

getRunningOperationPromises Deprecation and Replacement

Configuration

vercel bot commented Oct 20, 2022 • edited Loading

renovate bot commented Oct 11, 2022 •

edited

Loading

@mantine/rte package deprecation

Object Argument for `createReducer` and `createSlice.extraReducers`

`getRunningOperationPromises` Deprecation and Replacement

vercel bot commented Oct 20, 2022 •

edited

Loading