Update Stage component with TypeScript interface, switch to Concurren…

…tRoot, and enhance test cases for better type safety.

src/ReactKonvaCore.tsx

@@ -9,12 +9,13 @@
 
 import React from 'react';
 import Konva from 'konva/lib/Core.js';
+import type { Stage as KonvaStage } from 'konva/lib/Stage.js';
 import ReactFiberReconciler, {
   RootTag,
   SuspenseHydrationCallbacks,
   TransitionTracingCallbacks,
 } from 'react-reconciler';
-import { LegacyRoot } from 'react-reconciler/constants.js';
+import { ConcurrentRoot } from 'react-reconciler/constants.js';
 import * as HostConfig from './ReactKonvaHostConfig.js';
 import { applyNodeProps, toggleStrictMode } from './makeUpdates.js';
 import { useContextBridge, FiberProvider } from 'its-fine';
@@ -90,19 +91,21 @@ const StageWrap = (props) => {
     // @ts-ignore
     fiberRef.current = (KonvaRenderer.createContainer as NewCreateContainer)(
       stage.current,
-      LegacyRoot,
+      ConcurrentRoot,
       null,
+      false,
       null,
-      undefined,
-      undefined,
+      '',
       console.error,
       console.error,
       console.error,
       null
     );
     KonvaRenderer.updateContainer(
       React.createElement(Bridge, {}, props.children),
-      fiberRef.current
+      fiberRef.current,
+      null,
+      () => {}
     );
 
     return () => {
@@ -171,7 +174,17 @@ KonvaRenderer.injectIntoDevTools({
   rendererPackageName: 'react-konva',
 });
 
-export const Stage = React.forwardRef((props, ref) => {
+// Add this interface
+interface StageProps extends React.RefAttributes<KonvaStage> {
+  children?: React.ReactNode;
+  width?: number;
+  height?: number;
+  name?: string;
+  [key: string]: any;
+}
+
+// Update Stage component declaration
+export const Stage: React.FC<StageProps> = React.forwardRef((props, ref) => {
   return React.createElement(
     FiberProvider,
     {},

src/ReactKonvaHostConfig.ts

@@ -136,6 +136,8 @@ export function shouldSetTextContent(type, props) {
 export const isPrimaryRenderer = false;
 export const warnsIfNotActing = true;
 export const supportsMutation = true;
+export const supportsPersistence = false;
+export const supportsHydration = false;
 
 export function appendChild(parentInstance, child) {
   if (child.parent === parentInstance) {

test/react-konva-test.tsx

@@ -107,11 +107,11 @@ describe('initial mounting and refs', () => {
 
   it('check initial props', async () => {
     const App = ({ width, height }) => {
+      const ref = React.useRef<Konva.Stage>(null);
       React.useEffect(() => {
-        expect(ref.current.width()).equals(100);
+        expect(ref.current?.width()).equals(100);
       });
-      const ref = React.useRef<Konva.Stage>(null);
-      return <Stage ref={ref} width={width} heigh={height} />;
+      return <Stage ref={ref} width={width} height={height} />;
     };
     await render(<App width={100} height={100} />);
   });
@@ -123,13 +123,13 @@ describe('initial mounting and refs', () => {
     const MyRect = React.forwardRef((props, ref) => <Rect ref={ref} />);
 
     const App = () => {
-      const ref = React.useRef();
-      const stageRef = React.useRef();
+      const ref = React.useRef<Konva.Rect>(null);
+      const stageRef = React.useRef<Konva.Stage>(null);
       React.useEffect(() => {
         expect((ref.current as any) instanceof Konva.Rect).to.be.true;
       });
       return (
-        <Stage ref={stageRef} name='hello'>
+        <Stage ref={stageRef} name="hello">
           <Layer>
             <MyRect ref={ref} />
           </Layer>