[WIP] Migrate to React renderer

package.json

@@ -18,16 +18,17 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.14.0",
-        "@types/react": "^18.3.12",
-        "@types/react-dom": "^18.3.1",
         "eslint": "^9.14.0",
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-compiler": "^19.0.0-beta-63b359f-20241101",
         "globals": "^15.12.0",
-        "type-fest": "^4.26.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "type-fest": "^4.32.0",
         "typescript-eslint": "^8.12.2"
     },
     "dependencies": {
-        "codesandbox": "^2.2.3"
+        "codesandbox": "^2.2.3",
+        "next": "^15.1.7"
     }
 }

packages/docs/mdx-components.js

@@ -1,7 +1,8 @@
 import { useMDXComponents as getDocsMDXComponents } from 'nextra-theme-docs'
-import { Application, Entity } from '@playcanvas/react'
-import { OrbitControls } from '@playcanvas/react/scripts'
-import { Align, Light, Anim, Camera, Collision, EnvAtlas, GSplat, Script, Render, RigidBody } from '@playcanvas/react/components'
+// import { Application, Entity } from '@playcanvas/react'
+// import { OrbitControls } from '@playcanvas/react/scripts'
+// import { Align, Light, Anim, Camera, Collision, EnvAtlas, GSplat, Script, Render, RigidBody } from '@playcanvas/react/components'
+import { Application } from '@playcanvas/react'
 
 import ReactQueryProvider from '@/docs-components/ReactQueryProvider'
 
@@ -11,28 +12,15 @@ import PostEffects, { StaticPostEffects} from '@components/PostEffects'
 import ShadowCatcher from '@components/ShadowCatcher'
 import AutoRotate from '@components/AutoRotate'
 import { MotionEntity, MotionLight } from '@components/MotionEntity'
-const docsComponents = getDocsMDXComponents()
 
 export const defaultComponents = {
   ReactQueryProvider,
-  Application,
-  Entity,
-  Align, Anim, Camera, Collision, EnvAtlas, GSplat, Script, Render, RigidBody, Light,
-  OrbitControls,
-  EnvAtlasComponent,
-  Grid,
-  ShadowCatcher,
-  PostEffects,
-  StaticPostEffects,
-  AutoRotate,
-  MotionEntity,
-  MotionLight
+  Application
 }
 
 export function useMDXComponents(components) {
   return {
     ...components,
-    ...defaultComponents,
-    ...docsComponents
+    ...defaultComponents
   }
 }

packages/docs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/docs/next.config.js

@@ -13,36 +13,39 @@ const withNextra = nextra({
   search: {
     codeblocks: false
   },
-  contentDirBasePath: '/playground',
+  // contentDirBasePath: '/playground',
 })
 
-export default withNextra({
+const nextConfig = {
   reactStrictMode: true,
-  transpilePackages: ['next-mdx-remote-client', 'playcanvas'],
-  async headers() {
-    return [
-        {
-            // matching all API routes
-            source: "/",
-            headers: [
-                { key: "Access-Control-Allow-Credentials", value: "true" },
-                { key: "Access-Control-Allow-Origin", value: "*" }, // replace this your actual origin
-                { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
-                { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
-            ]
-        }
-    ]
-  },
-  redirects: async () => [
-    {
-        source: '/playground',
-        destination: '/playground/model-viewer',
-        permanent: true
-    },
-    {
-      source: '/',
-      destination: '/docs',
-      permanent: true
-    }
-  ]
-})
+  // transpilePackages: ['next-mdx-remote-client', 'playcanvas'],
+  // async headers() {
+  //   return [
+  //       {
+  //           // matching all API routes
+  //           source: "/",
+  //           headers: [
+  //               { key: "Access-Control-Allow-Credentials", value: "true" },
+  //               { key: "Access-Control-Allow-Origin", value: "*" }, // replace this your actual origin
+  //               { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
+  //               { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
+  //           ]
+  //       }
+  //   ]
+  // },
+  // redirects: async () => [
+  //   {
+  //       source: '/playground',
+  //       destination: '/playground/model-viewer',
+  //       permanent: true
+  //   },
+  //   {
+  //     source: '/',
+  //     destination: '/docs',
+  //     permanent: true
+  //   }
+  // ]
+}
+
+// export default nextConfig
+export default withNextra(nextConfig)

packages/docs/package.json

@@ -22,8 +22,8 @@
     "motion": "^11.13.1",
     "next": "^15.0.2",
     "next-mdx-remote-client": "^1.0.3",
-    "nextra": "^4.0.0-app-router.34",
-    "nextra-theme-docs": "^4.0.0-app-router.30",
+    "nextra": "^4.2.13",
+    "nextra-theme-docs": "^4.2.13",
     "playcanvas": "^2.3.3",
     "react": "^18.3.1",
     "react-codesandboxer": "^3.1.5",

packages/docs/src/app/_meta.global.ts → packages/docs/src/app/__meta.global.ts

@@ -26,19 +26,19 @@ export default {
       },
     },
   },
-  playground: {
-    type: 'menu',
-    title: 'Playground',
-    items: {
-      "---" : {
-        title: 'Basic',
-        type: 'separator',
-      },
-      'model-viewer' : '',
-      'physics' : '',
-      'motion' : '',
-    },
-  },  
+  // playground: {
+  //   type: 'menu',
+  //   title: 'Playground',
+  //   items: {
+  //     "---" : {
+  //       title: 'Basic',
+  //       type: 'separator',
+  //     },
+  //     'model-viewer' : '',
+  //     'physics' : '',
+  //     'motion' : '',
+  //   },
+  // },  
   company: {
     title: 'Company',
     type: 'menu',

packages/docs/src/app/docs/page.mdx

@@ -18,11 +18,24 @@ import { Tabs, Code } from 'nextra/components'
 <Tabs items={['Demo', 'Code']}>
   <Tabs.Tab>
     <div className='w-full aspect-video rounded-xl overflow-hidden'>
-      <ReactQueryProvider>
-        <Application className='hover:cursor-grab active:cursor-grabbing w-full' fillMode="NONE" resolutionMode="AUTO">
-          <Example />
-        </Application>
-      </ReactQueryProvider>
+      {/* <ReactQueryProvider> */}
+      <Application fillMode="NONE" resolutionMode="AUTO">
+        <entity name='root'>
+          <entity name='camera' key='a' position={[0, 0, 20]}>
+            <camera/>
+          </entity>
+          <entity name='child' key='b'>
+            <render type='box' />
+          </entity>
+        </entity>
+      </Application>
+        {/* <PlayCanvasCanvas className='hover:cursor-grab active:cursor-grabbing w-full' fillMode="NONE" resolutionMode="AUTO">
+          <pcentity name="ParentEntity">
+           <pcentity name="ChildEntity" />
+           <pcentity name="OtherChildEntity" />
+          </pcentity>
+        </PlayCanvasCanvas> */}
+      {/* </ReactQueryProvider> */}
     </div>
   </Tabs.Tab>
   <Tabs.Tab>

packages/docs/src/app/layout.tsx

@@ -6,6 +6,8 @@ import { getPageMap } from 'nextra/page-map'
 import './globals.css'
 import { CodeXml } from 'lucide-react'
 import ReactQueryProvider from '@/docs-components/ReactQueryProvider'
+import { Application, PlayCanvasCanvas } from '@playcanvas/react'
+import { FC, ReactNode } from 'react'
 
 export const { viewport } = Head
 
@@ -51,23 +53,154 @@ export default async function RootLayout({ children }: { children: React.ReactNo
     <html lang="en" dir="ltr" suppressHydrationWarning>
       <Head faviconGlyph="✦" />
       <body>
-        <Layout
-          banner={<Banner storageKey="Notif key">Notification Banner</Banner>}
-          navbar={navbar}
+        {/* <Layout
           footer={<Footer />}
-          editLink="Edit this page on GitHub"
-          docsRepositoryBase="https://github.com/playcanvas/react/blob/main/examples/docs"
-          sidebar={{ 
-            defaultMenuCollapseLevel: 1,
-            toggleButton: true
-          }}
+          navbar={navbar}
           pageMap={await getPageMap()}
-        >
+        > */}
           <ReactQueryProvider>
+          {/* {className='hover:cursor-grab active:cursor-grabbing w-full'} */}
             {children}
           </ReactQueryProvider>
-        </Layout>
+        {/* </Layout> */}
       </body>
     </html>
   )
-}
+}
+
+// // // const RootLayout: FC<{ children: ReactNode }> = async ({ children }) => {
+// // //   return (
+// // //     <html lang="en" dir="ltr">
+// // //       <Head faviconGlyph="✦" />
+// // //       <body style={{ margin: 0 }}>
+// // //       <div style={{ display: 'flex' }}>
+// // //         {/* <ReactQueryProvider> */}
+// // //           {children}
+// // //         {/* </ReactQueryProvider> */}
+// // //       </div>
+// // //       <Footer />
+// // //       </body>
+// // //     </html>
+// // //   )
+// // // }
+// // // export default function MyLayout({ children, ...props }) {
+// // //   return (
+// // //     <html lang="en">
+// // //       <body>
+// // //         <Layout
+// // //           navbar={}
+// // //           sidebar={{ autoCollapse: true }}
+// // //           docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs"
+// // //         >
+// // //           {children}
+// // //         </Layout>
+// // //       </body>
+// // //     </html>
+// // //   )
+// // // }
+
+// // // export default RootLayout
+
+// import { Footer, Layout, Navbar } from 'nextra-theme-docs'
+// import { Banner, Head } from 'nextra/components'
+// import { getPageMap } from 'nextra/page-map'
+// import 'nextra-theme-docs/style.css'
+
+// export const metadata = {
+//   // Define your metadata here
+//   // For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
+// }
+
+// const banner = <Banner storageKey="some-key">Nextra 4.0 is released 🎉</Banner>
+// const navbar = (
+//   <Navbar
+//     logo={<b>Nextra</b>}
+//     // ... Your additional navbar options
+//   />
+// )
+// const footer = <Footer>MIT {new Date().getFullYear()} © Nextra.</Footer>
+
+// export default async function RootLayout({ children }) {
+
+//   const pageMap = await getPageMap();
+//   console.log(pageMap)
+
+//   return (
+//     <html
+//       // Not required, but good for SEO
+//       lang="en"
+//       // Required to be set
+//       dir="ltr"
+//       // Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
+//       suppressHydrationWarning
+//     >
+//       <Head
+//       // ... Your additional head options
+//       >
+//         {/* Your additional tags should be passed as `children` of `<Head>` element */}
+//       </Head>
+//       <body>
+//         <Layout
+//           banner={banner}
+//           navbar={navbar}
+//           pageMap={pageMap}
+//           docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs"
+//           footer={footer}
+//           // ... Your additional layout options
+//         >
+//           {children}
+//         </Layout>
+//       </body>
+//     </html>
+//   )
+// }
+
+// import { Footer, Layout, Navbar } from 'nextra-theme-docs'
+// import { Banner, Head } from 'nextra/components'
+// import { getPageMap } from 'nextra/page-map'
+// import 'nextra-theme-docs/style.css'
+
+// export const metadata = {
+//   // Define your metadata here
+//   // For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
+// }
+
+// const banner = <Banner storageKey="some-key">Nextra 4.0 is released 🎉</Banner>
+// const navbar = (
+//   <Navbar
+//     logo={<b>Nextra</b>}
+//     // ... Your additional navbar options
+//   />
+// )
+// const footer = <Footer>MIT {new Date().getFullYear()} © Nextra.</Footer>
+
+// export default async function RootLayout({ children }) {
+//   return (
+//     <html
+//       // Not required, but good for SEO
+//       lang="en"
+//       // Required to be set
+//       dir="ltr"
+//       // Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
+//       suppressHydrationWarning
+//     >
+//       <Head
+//       // ... Your additional head options
+//       >
+//         {/* Your additional tags should be passed as `children` of `<Head>` element */}
+//       </Head>
+//       <body>
+//         <Layout
+//           banner={banner}
+//           navbar={navbar}
+//           pageMap={await getPageMap()}
+//           docsRepositoryBase="https://github.com/shuding/nextra/tree/main/docs"
+//           footer={footer}
+//           // ... Your additional layout options
+//         >
+//           {children}
+//         </Layout>
+//       </body>
+//     </html>
+//   )
+// }