phryneas
Repos
138
Followers
346
Following
27

The official, opinionated, batteries-included toolset for efficient Redux development

8546
791

Data fetching and caching addon for Redux Toolkit

620
22

A react hook to use reducers for local state in a typesafe way, with an API like createSlice from redux-starter-kit and immer integration.

32
5

Events

issue comment
createAsyncThunk rejectValue type always or with undefined

There could still be a thrown error that you didn't catch - and in that case, payload would be undefined and error would be set.

Created at 1 hour ago
issue comment
RTK Query code generation - OpenAPI readonly model properties

I mean, I get that this is a special OpenAPI thing, but nothing we can really implement on our level - TypeScript just doesn't know that concept and Oazapfts will always give us one type, not two.

Created at 2 hours ago
issue comment
RTK Query code generation - OpenAPI readonly model properties

I think the "two types" part is probably out of the scope of the codegen, since we only use oazapfts for that generation and don't touch individually properties 🤔

Generally though this reads more like these should just be optional, not readonly - at least from our perspective.

Created at 2 hours ago
issue comment
RTK Query code generation - OpenAPI readonly model properties

Could you explain how that would change if there were a readonly in there?

Even if it were

export type User = {
  readonly id: number
  name: string
}

you would not get around passing an id in here.

And on runtime level, every of those properties will be readonly anyways.

Created at 3 hours ago
issue comment
Dispatching at the same time as setState causes two renderings

This will be changed on the React side - unfortunately at this point there's not really anything we can do about it: https://github.com/facebook/react/issues/25191#issuecomment-1244805920

Created at 18 hours ago

Export the BaseQueryApi symbol. (#2740)

Created at 1 day ago
pull request closed
Export the BaseQueryApi interface from rtk-query so it can be used as a type in TypeScript without importing from dist/.

This PR adds the BaseQueryApi as an export to the public src/query/index.ts API from baseQueryTypes.

Created at 1 day ago
issue comment
Export the BaseQueryApi interface from rtk-query so it can be used as a type in TypeScript without importing from dist/.

Good point - let's get this in :)

Created at 1 day ago

docs: Clarify documentation about the overrideExisting flag in injectEndpoints

Merge pull request #2696 from PauloRSF/clarify-overrideexisting-docs

Merge remote-tracking branch 'origin/master' into v1.9-integration

Created at 1 day ago
make reanimated work in web

Also, maybe I should add some explanation on what this is doing and how it is interacting.

The relevant code on the side of reanimated can be found here:

From the users perspective:

  • usually a component like an react-native-svg-component would be wrapped in a createReanimatedComponent HOC that would add an animatedProps property
  • then the user would use the useAnimatedProps hook to create an object to pass into that animatedProps property.
  • changing shared values mapped that way would now not cause a component rerender, but internally change properties on the rendered component

This is the example from the docs

import React from 'react';
import { StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedProps,
} from 'react-native-reanimated';
import Svg, { Path } from 'react-native-svg';

const AnimatedPath = Animated.createAnimatedComponent(Path);

function App() {
  const radius = useSharedValue(50);

  const animatedProps = useAnimatedProps(() => {
    // draw a circle
    const path = `
    M 100, 100
    m -${radius.value}, 0
    a ${radius.value},${radius.value} 0 1,0 ${radius.value * 2},0
    a ${radius.value},${radius.value} 0 1,0 ${-radius.value * 2},0
    `;
    return {
      d: path,
    };
  });

  // attach animated props to an SVG path using animatedProps
  return (
    <Svg>
      <AnimatedPath animatedProps={animatedProps} fill="black" />
    </Svg>
  );
}

Now, let's look at the internals of those "off-render-updates":

    if (typeof component.setNativeProps === 'function') {
      setNativeProps(component, rawStyles);
    } else if (Object.keys(component.props).length > 0) {
      Object.keys(component.props).forEach((key) => {
        if (!rawStyles[key]) {
          return;
        }
        const dashedKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
        component._touchableNode.setAttribute(dashedKey, rawStyles[key]);
      });
    } else {
      console.warn('It is not possible to manipulate component');
    }

The relevant part:

  • if there is a setNativeProps function on the component wrapped, that will be called with the whole updated prop object at once. This was my first approach, but it seems setNativeProps is deprecated now.
  • if that is not present, reanimated will instead iterate through all attributes, will convert camelCase to dashed keys and set each attribute individually.

Now, "setting each attribute individually" faces two problems from the side of react-native-svg:

  • with react-native-svg, those cannot be set directly on the DOM element as there is that prepare function taking all those properties and converting them to a string transform property
  • since all of those are combined into one string, they also have to be set at once and not bit-by-bit

Hence, my approach here:

  • make sure that there is a component._touchableNode property in the first place (up until now, that was only present through the Touchable Mixin, which was only added when the user added touch listeners
  • wrap component._touchableNode.setAttribute to our own logic - I used a proxy on the original DOM node here to override only this one specific property
  • "batch" modifications coming in from the outside before building a new transform string that will be applied - I do this by scheduling an update with requestAnimationFrame, which will make sure that any synchronous calls like the for loop of reanimated above will have ended before the batch is executed
  • if meanwhile a render happens, cancel the batched update and reset the batched properties - the latest render is sure to have the most up-to-date data.
Created at 2 days ago
make reanimated work in web

and I added an example :)

Created at 3 days ago

use _touchableNode instead of setNativeProps

add reanimated example

Created at 3 days ago
make reanimated work in web

@WoLewicki I can give it a spin.

By the way, I'm just going at that _touchableNode part and stumbled across https://github.com/software-mansion/react-native-reanimated/issues/3321. The solution I'm trying right now might also fix that.

Created at 3 days ago
pull request opened
Mayday-review
Created at 3 days ago

code review suggestions

Created at 3 days ago
phryneas create branch mayday-review
Created at 3 days ago

Update README.md

Created at 3 days ago
make reanimated work in web

@necolas good point. It looks like I could take a look into exposing a _touchableNode with a setAttribute function as an alternative.

Just could probably not be a direct exposure of the DOM ref since they set all attributes in sequence and we'd need all of the new props to calculate a new transform string.

Created at 4 days ago
pull request opened
make reanimated work in web

Summary

Up until now, trying to use reanimated with react-native-svg in react-native-web resulted in an error. This adds a setNativeProps function to the web implementation to directly modify the transform and style props on a SVGElement ref.

Since there is a need to track the "last merged props" and those need to be reset on every render, the render method has been moved into the WebShape class and a tag string property has been added.

As g had some extra handling for x and y, a prepareProps function was added as well.

Test Plan

Here is a video of me dragging a <g> with a nested <image> in chome: https://www.loom.com/share/675405537d9d41a792432ebf41636047

What's required for testing (prerequisites)?

Just run any reanimated svg in the browser instead of a device.

What are the steps to reproduce (after prerequisites)?

Run any animation.

Compatibility

| OS | Implemented | | ------- | :---------: | | iOS | (untouched) | | Android | (untouched) | | Web | ✅ |

Checklist

  • [ ] I have tested this on a device and a simulator
  • [X] I have tested this on a web browser
  • [ ] I added documentation in README.md
  • [ ] I updated the typed files (typescript)
  • [ ] I added a test for the API in the __tests__ folder
Created at 4 days ago

make reanimated work in web

Created at 4 days ago
phryneas create branch pr/web-reanimated
Created at 4 days ago

Update README.md

Created at 6 days ago

Update README.md

Created at 6 days ago
issue comment
RTK-Query: Stop polling when window looses focus

Or

const isWindowFocused = useWindowFocus();
const { data, error, isLoading } = usePlaceHolderQuery(
    {},
    { pollingInterval: isWindowFocused ? 5000 : undefined }
);
  • this will only stop polling, while skip might get the data removed from the cache over time.
Created at 1 week ago
issue comment
TS Error: Return type of exported function has or is using name 'EndpointDefinitionWithQuery' from external module xx, but cannot be named

Tbh., I don't think you'll be able to get typings on this level abstracted away. Generally, I'd recommend going the code generation route or building a full api and exposing that.

Created at 1 week ago

Update README.md

Created at 1 week ago
issue comment
TS Error: Return type of exported function has or is using name 'EndpointDefinitionWithQuery' from external module xx, but cannot be named

You're pretty much in uncharted territory there, sorry. For this specific error message it could help to disable declaration emit in your tsconfig.

Created at 1 week ago
issue comment
split `enhanceEndpoints` into `addTagTypes` and `enhanceEndpoint`

Unfortunately adding a function that can change existing types pretty much ruins all internal types :/

Created at 1 week ago