fix: Grid IntrinsicElements moved to generatedProps

brianzinn · Jul 10, 2022 · ca98fe1 · ca98fe1
1 parent fcc7ba4
commit ca98fe1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/packages/react-babylonjs/src/customHosts/grid/index.ts b/packages/react-babylonjs/src/customHosts/grid/index.ts
@@ -1,31 +1,15 @@
-import { Key, ReactNode, Ref } from 'react'
 import {
   checkPrimitiveDiff,
   HasPropsHandlers,
   PropertyUpdate,
   PropsHandler,
 } from '../../PropsHandler'
 
-export type GridNode = {
-  key?: Key
-  ref?: Ref<ReactNode> // will return value and unit?
-}
-
 export type RowOrColumnDefinitionProps = {
   value: number
   unit?: number
 }
 
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      rowDefinition: RowOrColumnDefinitionProps & GridNode
-      columnDefinition: RowOrColumnDefinitionProps & GridNode
-    }
-  }
-}
-
 export class RowOrColumnDefinitionPropsHandlers
   implements PropsHandler<RowOrColumnDefinitionProps>
 {

diff --git a/packages/react-babylonjs/src/generatedProps.ts b/packages/react-babylonjs/src/generatedProps.ts
@@ -372,6 +372,7 @@ import { MRDLBackplateMaterial as BabylonjsGuiMRDLBackplateMaterial } from '@bab
 import { MRDLSliderBarMaterial as BabylonjsGuiMRDLSliderBarMaterial } from '@babylonjs/gui/3D/materials/mrdl/mrdlSliderBarMaterial.js'
 import { MRDLSliderThumbMaterial as BabylonjsGuiMRDLSliderThumbMaterial } from '@babylonjs/gui/3D/materials/mrdl/mrdlSliderThumbMaterial.js'
 import { Key, ReactNode, Ref } from 'react'
+import { RowOrColumnDefinitionProps } from './customHosts/grid/'
 import {
   AbstractMeshCustomProps,
   ADTCustomProps,
@@ -1068,6 +1069,8 @@ declare global {
       defaultBehavior: FiberDefaultBehaviorProps &
         FiberDefaultBehaviorPropsCtor &
         BabylonNode<BabylonjsGuiDefaultBehavior>
+      rowDefinition: RowOrColumnDefinitionProps & BabylonNode<RowOrColumnDefinitionProps>
+      columnDefinition: RowOrColumnDefinitionProps & BabylonNode<RowOrColumnDefinitionProps>
     }
   }
 }

diff --git a/packages/react-babylonjs/tools/generate-code.ts b/packages/react-babylonjs/tools/generate-code.ts
@@ -1957,6 +1957,11 @@ const generateCode = async () => {
     namedImports: ALL_CUSTOM_PROPS,
   })
 
+  generatedPropsSourceFile.addImportDeclaration({
+    moduleSpecifier: './customHosts/grid/',
+    namedImports: ['RowOrColumnDefinitionProps'],
+  })
+
   const mainTypeAlias = generatedPropsSourceFile.addTypeAlias({
     name: 'BabylonNode',
     type: Writers.objectType({
@@ -2454,6 +2459,25 @@ const generateCode = async () => {
     })
   })
 
+  // not detected as not part of babylon.js
+  const customHosts = [
+    {
+      className: 'rowDefinition',
+      propsName: 'RowOrColumnDefinitionProps',
+    },
+    {
+      className: 'columnDefinition',
+      propsName: 'RowOrColumnDefinitionProps',
+    },
+  ]
+
+  customHosts.forEach((customHost) => {
+    INTRINSIC_ELEMENTS.addProperty({
+      name: customHost.className,
+      type: Writers.intersectionType(customHost.propsName, `BabylonNode<${customHost.propsName}>`),
+    })
+  })
+
   // we can do this as long as there are no classes with the same name across imports
   // otherwise we can just use a Set<string> with importalias, but need to generate more metadata.
   // ie: classseMap = { BabylonjsCoreBox, BabylonjsCoreSphere, ... };