Merge pull request #532 from pixijs/520-bug-events-on-a-sprite-dont-w…

…ork-on-initial-run-using-vite

Apply events on first render

src/constants/PixiReactIgnoredProps.ts

@@ -1,3 +1,3 @@
-export const PixiReactIgnoredProps = Object.freeze([
-    'draw',
-]);
+import { PixiToReactEventPropNames } from './EventPropNames';
+
+export const PixiReactIgnoredProps = Object.freeze(Object.keys(PixiToReactEventPropNames));

src/helpers/applyProps.ts

@@ -57,11 +57,11 @@ export function applyProps(
         ...instanceProps
     } = instance;
 
-    let typedData: DiffSet;
+    let typedData;
 
     if (isDiffSet(data))
     {
-        typedData = data;
+        typedData = data as DiffSet;
     }
     else
     {

src/helpers/createInstance.ts

@@ -1,4 +1,4 @@
-import { PixiReactIgnoredProps } from '../constants/PixiReactIgnoredProps';
+import { ReactToPixiEventPropNames } from '../constants/EventPropNames';
 import { applyProps } from './applyProps';
 import { catalogue } from './catalogue';
 import { convertStringToPascalCase } from './convertStringToPascalCase';
@@ -30,7 +30,18 @@ export function createInstance(
     // Get the class from an imported Pixi.js namespace
     const PixiComponent = catalogue[name];
 
-    const pixiProps = gentleCloneProps(props, PixiReactIgnoredProps);
+    const pixiProps = gentleCloneProps(props);
+
+    // Clone event props
+    Object.entries(props).forEach(([key, value]) =>
+    {
+        if (key in ReactToPixiEventPropNames)
+        {
+            const pixiEventName = ReactToPixiEventPropNames[key as keyof typeof ReactToPixiEventPropNames];
+
+            pixiProps[pixiEventName] = value;
+        }
+    });
 
     const instance = prepareInstance(new PixiComponent(pixiProps), {
         root,

src/helpers/diffProps.ts

@@ -1,7 +1,4 @@
-import {
-    PixiToReactEventPropNames,
-    ReactToPixiEventPropNames,
-} from '../constants/EventPropNames';
+import { ReactToPixiEventPropNames } from '../constants/EventPropNames';
 import { isEqual } from './compare';
 import { gentleCloneProps } from './gentleCloneProps';
 
@@ -53,7 +50,7 @@ export function diffProps(
         }
 
         // Collect handlers and bail out
-        if ((key in PixiToReactEventPropNames) || (key in ReactToPixiEventPropNames))
+        if (key in ReactToPixiEventPropNames)
         {
             changes.push([key, value, true, []]);
 

src/helpers/gentleCloneProps.ts

@@ -1,3 +1,4 @@
+import { PixiReactIgnoredProps } from '../constants/PixiReactIgnoredProps';
 import { ReactIgnoredProps } from '../constants/ReactIgnoredProps';
 import { gentleClone } from './gentleClone';
 
@@ -7,5 +8,5 @@ export function gentleCloneProps(
     additionalIgnoredProps: readonly string[] = [],
 )
 {
-    return gentleClone(props, ReactIgnoredProps.concat(additionalIgnoredProps));
+    return gentleClone(props, ReactIgnoredProps.concat(PixiReactIgnoredProps, additionalIgnoredProps));
 }