refactor: BREAKING CHANGE import gltf, bin and png as modules. Use as…

…set/resource for gltf

landing/entrypoints/renderer/next.config.js

@@ -44,22 +44,17 @@ module.exports = {
     config.module.rules.push(
       {
         test: /\.(gltf)$/,
-        loader: 'gltf-loader',
-        /**
-         * @type {import("gltf-loader").GLTFLoaderOptions}
-         */
-        options: {
-          uriResolver: (module) => {
-            let result = module.default ?? module
-            // Use the "src" property returned by the `next-image-loader` if present:
-            if (typeof result === 'object' && 'src' in result) result = result.src
-            return result
-          },
+        type: 'asset/resource',
+        generator: {
+          filename: 'static/media/[name][ext]',
         },
       },
       {
         test: /\.(bin)$/,
         type: 'asset/resource',
+        generator: {
+          filename: 'static/media/[name][ext]',
+        },
       }
     )
 

landing/entrypoints/renderer/package.json

@@ -23,7 +23,6 @@
     "@emotion/styled": "11.9.3",
     "events": "3.3.0",
     "express": "4.17.1",
-    "gltf-loader": "1.0.0",
     "graphql": "15.8.0",
     "locomotive-scroll": "4.1.4",
     "next": "12.3.4",

landing/entrypoints/renderer/src/@types/models.d.ts

@@ -3,6 +3,8 @@ declare module '*.gltf' {
   export default content
 }
 
+declare module '*.bin' {}
+
 declare module '*.glb' {
   const content: string
   export default content

landing/fragments/landing-about/src/landing-about.component.tsx

@@ -52,7 +52,7 @@ const LandingAbout: FC<LandingAboutProps> = ({ language, data }) => {
               { contentAddons: { title, content, excerpt, image } },
               index
             ) => (
-              <>
+              <React.Fragment key={title}>
                 <Condition match={index !== 0}>
                   <Layout flexBasis={[32, 32, 80]} />
                 </Condition>
@@ -66,7 +66,7 @@ const LandingAbout: FC<LandingAboutProps> = ({ language, data }) => {
                 <Condition match={index !== bottomSide.length - 1}>
                   <Layout flexBasis={[32, 32, 80]} />
                 </Condition>
-              </>
+              </React.Fragment>
             ))}
             <Layout flexBasis={[52, 52, 152]} />
           </Column>

landing/fragments/landing-navigation/src/navigation.component.tsx

@@ -73,7 +73,7 @@ const Navigation: FC<NavigationProps> = ({ language, languageVar }) => {
             </Layout>
             <Row justifyContent='flex-end' alignItems='center'>
               {navigation[language].map(({ contentAddons: { title, content } }) => (
-                <>
+                <React.Fragment key={title}>
                   <NextLink
                     color='black'
                     fontWeight='medium'
@@ -86,7 +86,7 @@ const Navigation: FC<NavigationProps> = ({ language, languageVar }) => {
                     {title}
                   </NextLink>
                   <Layout flexBasis={32} />
-                </>
+                </React.Fragment>
               ))}
               <Layout display={['none', 'none', 'flex']}>
                 <Button width='100%' onClick={() => setVisible(true)}>

landing/fragments/landing-reviews/src/landing-reviews.component.tsx

@@ -27,7 +27,12 @@ const LandingReviews: FC<LandingReviewsProps> = ({ language, data }) => {
   const [mobileSwiper, setMobileSwiper] = useState<SwiperCore | null>(null)
 
   const carouselChildren = data[language].map((review, index) => (
-    <Item review={review} language={language} onClick={() => setActiveItem(index)} />
+    <Item
+      review={review}
+      key={review.title}
+      language={language}
+      onClick={() => setActiveItem(index)}
+    />
   ))
 
   const CarouselControlsExporter = ({ swiper, setSwiper }) => {
@@ -107,7 +112,7 @@ const LandingReviews: FC<LandingReviewsProps> = ({ language, data }) => {
               >
                 <CarouselControlsExporter swiper={desktopSwiper} setSwiper={setDesktopSwiper} />
                 {Children.map(carouselChildren, (child) => (
-                  <SwiperSlide>{child}</SwiperSlide>
+                  <SwiperSlide key={child.key}>{child}</SwiperSlide>
                 ))}
               </Swiper>
             </Layout>
@@ -123,7 +128,7 @@ const LandingReviews: FC<LandingReviewsProps> = ({ language, data }) => {
               >
                 <CarouselControlsExporter swiper={mobileSwiper} setSwiper={setMobileSwiper} />
                 {Children.map(carouselChildren, (child) => (
-                  <SwiperSlide>{child}</SwiperSlide>
+                  <SwiperSlide key={child.key}>{child}</SwiperSlide>
                 ))}
               </Swiper>
             </Layout>
@@ -139,7 +144,7 @@ const LandingReviews: FC<LandingReviewsProps> = ({ language, data }) => {
               >
                 <CarouselControlsExporter swiper={mobileSwiper} setSwiper={setMobileSwiper} />
                 {Children.map(carouselChildren, (child) => (
-                  <SwiperSlide>{child}</SwiperSlide>
+                  <SwiperSlide key={child.key}>{child}</SwiperSlide>
                 ))}
               </Swiper>
             </Layout>

landing/fragments/landing-team/src/landing-team.component.tsx

@@ -41,12 +41,12 @@ const LandingTeam: FC<LandingProps> = ({ language }) => {
                 { title: recruit, featuredImage: image },
                 index
               ) => (
-                <>
+                <React.Fragment key={recruit}>
                   <Item recruit={recruit} image={image} language={language} />
                   <Condition match={recruits.filter(filterByLanguage).length - 1 !== index}>
                     <Layout flexBasis={32} flexShrink={0} />
                   </Condition>
-                </>
+                </React.Fragment>
               ))}
             </Layout>
             <Layout flexBasis={[60, 60, 160]} />

landing/fragments/landing-work-directions/src/landing-work-directions.component.tsx

@@ -27,21 +27,21 @@ const LandingWorkDirections: FC<LandingWorkDirectionsProps> = ({ language }) =>
         <Row flexWrap={['wrap', 'wrap', 'nowrap']}>
           <Column width='100%' height={['auto', 'auto', '100%']}>
             {leftSide.map((category) => (
-              <>
+              <React.Fragment key={category.name}>
                 <Item category={category} language={language} />
                 <Layout flexBasis={32} />
-              </>
+              </React.Fragment>
             ))}
           </Column>
           <Layout flexBasis={32} flexShrink={0} />
           <Column width='100%' height={['auto', 'auto', '100%']}>
             {rightSide.map((category, index) => (
-              <>
+              <React.Fragment key={category.name}>
                 <Item category={category} language={language} />
                 <Condition match={rightSide.length - 1 !== index}>
                   <Layout flexBasis={32} />
                 </Condition>
-              </>
+              </React.Fragment>
             ))}
             <Layout flexBasis={[0, 0, 32]} />
           </Column>

ui/image/assets/index.ts

@@ -0,0 +1,3 @@
+import SpherePng from './sphere.png'
+
+export { SpherePng }

ui/image/src/image.component.tsx

@@ -1,6 +1,7 @@
 import NextImage      from 'next/image'
 import React          from 'react'
 
+import { SpherePng }  from '../assets'
 import { ImageProps } from './image.interface'
 
 const Image = ({
@@ -12,7 +13,7 @@ const Image = ({
 }: ImageProps & any) => (
   <NextImage
     objectFit={contain ? 'contain' : 'cover'}
-    src={src && JSON.stringify(src) !== JSON.stringify({}) ? src : '/sphere.png'}
+    src={src && JSON.stringify(src) !== JSON.stringify({}) ? src : SpherePng.src}
     width={width}
     height={height}
     {...props}

ui/sphere/assets/index.ts

@@ -0,0 +1,4 @@
+import SphereBin  from './sphere_data.bin'
+import SphereGltf from './sphere.gltf'
+
+export { SphereGltf, SphereBin }

ui/sphere/src/loader/loader.component.tsx

@@ -1,18 +1,14 @@
 import { useGLTF }           from '@react-three/drei'
-import { useProgress }       from '@react-three/drei'
 
 import React                 from 'react'
+import { Suspense }          from 'react'
 import { FC }                from 'react'
 import { PropsWithChildren } from 'react'
 
-import { Condition }         from '@ui/condition'
+import { SphereGltf }        from '../../assets'
 
-import { spherePath }        from '../sphere.constants'
+export const Loader: FC<PropsWithChildren<{}>> = ({ children }) => (
+  <Suspense fallback={null}>{children}</Suspense>
+)
 
-export const Loader: FC<PropsWithChildren<{}>> = ({ children }) => {
-  const { active } = useProgress()
-
-  return <Condition match={!active}>{children}</Condition>
-}
-
-useGLTF.preload(spherePath)
+useGLTF.preload(SphereGltf)

ui/sphere/src/model/model.component.tsx

@@ -7,14 +7,14 @@ import { Group }         from 'three'
 import { useEffect }     from 'react'
 import { useRef }        from 'react'
 
+import { SphereGltf }    from '../../assets'
 import { GLTFResult }    from './model.interfaces'
 import { GLTFAction }    from './model.interfaces'
 import { ModelProps }    from './model.interfaces'
-import { spherePath }    from '../sphere.constants'
 
 export const Model: FC<ModelProps> = (props) => {
   const group = useRef<Group>(null)
-  const { nodes, materials, animations } = useGLTF(spherePath, true) as unknown as GLTFResult
+  const { nodes, materials, animations } = useGLTF(SphereGltf, true) as unknown as GLTFResult
   const { actions } = useAnimations<GLTFAction>(animations, group)
 
   useEffect(() => {

ui/sphere/src/sphere.component.tsx

@@ -1,12 +1,14 @@
 import { Canvas }      from '@react-three/fiber'
 
 import React           from 'react'
+import { lazy }        from 'react'
 import { memo }        from 'react'
 
 import { Loader }      from './loader'
-import { Model }       from './model'
 import { SphereProps } from './sphere.interfaces'
 
+const ModelComponent = lazy(() => import('./model').then(({ Model }) => ({ default: Model })))
+
 export const Sphere = memo<SphereProps>(({ style }) => (
   <Canvas style={style} camera={{ position: [10, 0, 0], fov: 30 }}>
     <ambientLight color='#ffffff' intensity={0.1} />
@@ -15,7 +17,7 @@ export const Sphere = memo<SphereProps>(({ style }) => (
     <directionalLight color='#e261ff' position={[0, -2, 3]} intensity={2.5} />
     <directionalLight color='#ffffff' position={[0, -10, 0]} intensity={0.4} />
     <Loader>
-      <Model />
+      <ModelComponent />
     </Loader>
   </Canvas>
 ))

yarn.lock

@@ -2088,7 +2088,6 @@ __metadata:
     "@ui/theme": "workspace:0.0.1"
     events: "npm:3.3.0"
     express: "npm:4.17.1"
-    gltf-loader: "npm:1.0.0"
     graphql: "npm:15.8.0"
     locomotive-scroll: "npm:4.1.4"
     next: "npm:12.3.4"
@@ -7287,17 +7286,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gltf-loader@npm:1.0.0":
-  version: 1.0.0
-  resolution: "gltf-loader@npm:1.0.0"
-  dependencies:
-    loader-utils: "npm:^3.2.0"
-  peerDependencies:
-    webpack: ^5.32.0
-  checksum: 8a023cd135bec04a12f352dd255d1661c3c4f0bd14fbbd038f843cef24e5340bce1e84dc2a4deef26917fcd50f059d82e50cc0a5dcac11e7a2505ba3ca9c6c2a
-  languageName: node
-  linkType: hard
-
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -8688,13 +8676,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^3.2.0":
-  version: 3.2.1
-  resolution: "loader-utils@npm:3.2.1"
-  checksum: cda2ced4c887f6cafd2849f2648dd9a74c0d06ca83299c4b75c7a8062a2fe11ea4b62ae121fff3b9943a5af453d104b5d35831861b1b94aa71699ba0c4eaf136
-  languageName: node
-  linkType: hard
-
 "locate-path@npm:^5.0.0":
   version: 5.0.0
   resolution: "locate-path@npm:5.0.0"