Exclude incompatible Application props from component schema (#279)

* refactor: update component definition API to use options object

- Changed the component definition function to accept an options object, allowing for exclusion of specific props and defining an API name.
- Updated multiple components to utilize the new options structure for better clarity and maintainability.
- Adjusted the applyProps function to accept a more generic props type.

* refactor: expand excluded props in Application component

- Added 'gamepads', 'scene', 'scripts', and 'assets' to the list of excluded props in the Application component.
- Updated the corresponding exclude array to reflect these changes for improved prop management.

* changeset

Author: marklundin

.changeset/bitter-tips-hear.md

@@ -0,0 +1,5 @@
+---
+"@playcanvas/react": patch
+---
+
+Fixing issue with Application schema validation

packages/lib/src/Application.tsx

@@ -189,7 +189,7 @@ export const ApplicationWithoutCanvas: FC<ApplicationWithoutCanvasProps> = (prop
   // These app properties can be updated without re-rendering
   useLayoutEffect(() => {
     if (!app) return;
-    applyProps(app, componentDefinition.schema, otherProps as Record<keyof PlayCanvasApplication, unknown>);
+    applyProps(app, componentDefinition.schema, otherProps as Record<string, unknown>);
   });
 
   if (!app) return null;
@@ -220,7 +220,11 @@ type CanvasProps = {
    */
   style?: Record<string, unknown>
 }
-interface ApplicationProps extends Partial<PublicProps<PlayCanvasApplication>>, CanvasProps {
+
+// These props are excluded from the <Application/> component props.
+type ExcludedApplicationProps = 'mouse' | 'touch' | 'keyboard' | 'gamepads' | 'scene' | 'scripts' | 'assets';
+
+interface ApplicationProps extends Omit<Partial<PublicProps<PlayCanvasApplication>>, ExcludedApplicationProps>, CanvasProps {
 
   /** 
    * Controls how the canvas fills the window and resizes when the window changes.
@@ -265,10 +269,13 @@ interface ApplicationWithoutCanvasProps extends ApplicationProps {
   canvasRef: React.RefObject<HTMLCanvasElement | null>;
 }
 
+const exclude: ExcludedApplicationProps[] = ['mouse', 'touch', 'keyboard', 'gamepads', 'scene', 'scripts', 'assets'];
+
 const componentDefinition = createComponentDefinition(
   "Application",
   () => getNullApplication(),
-  (app) => app.destroy()
+  (app) => app.destroy(),
+  { exclude }
 )
 
 componentDefinition.schema = {

packages/lib/src/components/Camera.tsx

@@ -32,5 +32,5 @@ const componentDefinition = createComponentDefinition<CameraProps, CameraCompone
     "Camera",
     () => new Entity("mock-camera", getStaticNullApplication()).addComponent('camera') as CameraComponent,
     (component) => (component as CameraComponent).system.destroy(),
-    "CameraComponent"
+    { apiName: "CameraComponent" }
 )

packages/lib/src/components/Collision.tsx

@@ -79,7 +79,7 @@ const componentDefinition = createComponentDefinition(
     "Collision",
     () => new Entity("mock-collision", getStaticNullApplication()).addComponent('collision') as CollisionComponent,
     (component) => (component as CollisionComponent).system.destroy(),
-    "CollisionComponent"
+    { apiName: "CollisionComponent" }
 )
 
 componentDefinition.schema = {

packages/lib/src/components/Element.tsx

@@ -33,7 +33,7 @@ const componentDefinition = createComponentDefinition<ElementProps, ElementCompo
     "Element",
     () => new Entity("mock-element", getStaticNullApplication()).addComponent("element") as ElementComponent,
     (component) => (component as ElementComponent).system.destroy(),
-    "ElementComponent"
+    { apiName: "ElementComponent" }
 );
 
 

packages/lib/src/components/GSplat.tsx

@@ -27,7 +27,7 @@ const componentDefinition = createComponentDefinition(
     "GSplat",
     () => new Entity("mock-gsplat", getStaticNullApplication()).addComponent('gsplat') as GSplatComponent,
     (component) => (component as GSplatComponent).system.destroy(),
-    "GSplatComponent"
+    { apiName: "GSplatComponent" }
 )
 
 componentDefinition.schema = {

packages/lib/src/components/Light.tsx

@@ -37,7 +37,7 @@ const componentDefinition = createComponentDefinition<LightProps, LightComponent
     "Light",
     () => new Entity('mock-light', getStaticNullApplication()).addComponent('light') as LightComponent,
     (component) => (component as LightComponent).system.destroy(),
-    "LightComponent"
+    { apiName: "LightComponent" }
 )
 
 componentDefinition.schema = {

packages/lib/src/components/Render.tsx

@@ -73,7 +73,7 @@ const componentDefinition = createComponentDefinition<RenderProps, PcRenderCompo
     "Render",
     () => new Entity('mock-render', getStaticNullApplication()).addComponent('render') as PcRenderComponent,
     (component) => (component as PcRenderComponent).system.destroy(),
-    "RenderComponent"   
+    { apiName: "RenderComponent" }   
 )
 
 componentDefinition.schema = {

packages/lib/src/components/RigidBody.tsx

@@ -74,7 +74,7 @@ const componentDefinition = createComponentDefinition(
     "RigidBody",
     () => new Entity("mock-rigidbody", getStaticNullApplication()).addComponent('rigidbody') as RigidBodyComponent,
     (component) => (component as RigidBodyComponent).system.destroy(),
-    "RigidBodyComponent"
+    { apiName: "RigidBodyComponent" }
 )
 
 

packages/lib/src/components/Screen.tsx

@@ -47,7 +47,7 @@ const componentDefinition = createComponentDefinition<ScreenProps, ScreenCompone
     "Screen",
     () => new Entity("mock-screen", getStaticNullApplication()).addComponent("screen") as ScreenComponent,
     (component) => (component as ScreenComponent).system.destroy(),
-    "ScreenComponent"
+    { apiName: "ScreenComponent" }
 );
 
 componentDefinition.schema = {