Sequences, Hot reloads, and custom Renderers

[wcandillon]

I am running <Sequence> into a custom render, exactly like three-fiber. Because I need some warmup to be done, I want to use Sequence within my renderer (thanks to <Internals.RemotionContextProvider contexts={contexts}>), which works great. But fast refresh doesn't seem to be supported. Maybe there is something wrong in my renderer setup since I am clueless about how hot reload works.

https://user-images.githubusercontent.com/306134/137297224-7bbdd10c-0bf0-4504-9e9d-118e5468493f.mp4

The only way I found to not double the timelines is to change the rootId of the sequence:

export const Canvas = ({ children, assets }: CanvasProps) => {
  const rootId = useRef(`${Math.random()}`);
  const contexts = Internals.useRemotionContexts();
  useEffect(() => {
    rootId.current = `${Math.random()}`;
  }, []);
  return (
    <Skia>
        <Internals.RemotionContextProvider
          contexts={{
            ...contexts,
            timelineContext: {
              ...contexts.timelineContext,
              rootId: rootId.current,
            },
          }}
        >
            {children}
        </Internals.RemotionContextProvider>
    </Skia>
  );
};

I'm not familiar with hot reloading yet so I am not sure what I could do for my renderer to support it. Is there something specific to look at?

I also noticed that sequences use the notion of id internally? Maybe it should be possible to set it as an option prop? that way we can avoid timeline duplications?

[JonnyBurger]

We have in the meanwhile revamped the Fast Refresh quite a bit:

• All Fast Refresh code is now inlined in the Remotion repository
• Changed the order of entries in which the different entry points get loaded.

The gotcha here is that your custom renderer must call injectIntoDevTools() from 'react-reconciler' for it to work. It's the responsibility of the renderer, not of us. Are you doing that? Is the problem even there anymore?

I know the issue is old, if you forgot everything also fine, I'm just looking for closure in the end 😄

[wcandillon]

The problem was still happening a few weeks ago, but I would be happy to try on a more recent version. https://github.com/Shopify/react-native-skia/blob/main/package/src/renderer/Canvas.tsx#L33 is that any good? What does it do?

[wcandillon]

The issue in the video above is only reproducible by using a <Series> within the Skia renderer (tested with v3.0.4). Now that we have react native web support part of Skia, we will be able to provide a small repo to reproduce the issue.

[JonnyBurger]

@wcandillon Just wondering - are we able to reproduce this still or did we resolve it in @remotion/skia?

[wcandillon]

I am not able to reproduce the issue at the moment (not in a small example at least).