website: Fix sidebar in examples

modules/core/src/adapter/device.ts

@@ -227,6 +227,8 @@ export abstract class Device {
   /** Used by other luma.gl modules to store data on the device */
   _lumaData: {[key: string]: unknown} = {};
 
+  abstract destroy(): void;
+
   // Capabilities
 
   /** Information about the device (vendor, versions etc) */

website/content/examples/api/animation.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {AnimationExample} from '@site';
 
-# Hello Cube
+# Animation
 
 <DeviceTabs />
 <AnimationExample />

website/content/examples/api/cubemap.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {CubemapExample} from '@site';
 
-# Hello Cube
+# Cubemap
 
 <DeviceTabs />
 <CubemapExample />

website/content/examples/api/texture-3d.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {Texture3DExample} from '@site';
 
-# Hello Cube
+# Texture 3D
 
 <DeviceTabs />
 <Texture3DExample />

website/content/examples/index.mdx

@@ -1,12 +1,10 @@
 # Examples
 
 import {ExamplesIndex} from '@site/src/examples/components';
-import examplesSidebar from '@site/content/sidebar-examples.json';
 
-<ExamplesIndex 
-  sidebar={examplesSidebar}
+<ExamplesIndex
   getThumbnail={item => {
     const exampleName = typeof item === 'string' ? item : item.docId || item.label.toLowerCase();
     return `/images/examples/${exampleName}.jpg`
-  }} 
+  }}
 />

website/content/examples/showcase/instancing.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {InstancingExample} from '@site';
 
-# Hello Cube
+# Instancing
 
 <DeviceTabs />
 <InstancingExample />

website/content/examples/showcase/persistence.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {PersistenceExample} from '@site';
 
-# Hello Cube
+# Persistence
 
 <DeviceTabs />
 <PersistenceExample />

website/content/examples/tutorials/hello-instancing.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {HelloInstancingExample} from '@site';
 
-# Hello Cube
+# Hello Instancing
 
 <DeviceTabs />
 <HelloInstancingExample />

website/content/examples/tutorials/hello-triangle.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {HelloTriangleExample} from '@site';
 
-# Hello Cube
+# Hello Triangle
 
 <DeviceTabs />
 <HelloTriangleExample />

website/content/examples/tutorials/lighting.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {LightingExample} from '@site';
 
-# Hello Cube
+# Lighting
 
 <DeviceTabs />
 <LightingExample />

website/content/examples/tutorials/shader-hooks.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {ShaderHooksExample} from '@site';
 
-# Hello Cube
+# Shader Hooks
 
 <DeviceTabs />
 <ShaderHooksExample />

website/content/examples/tutorials/shader-modules.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {ShaderModulesExample} from '@site';
 
-# Hello Cube
+# Shader Modules
 
 <DeviceTabs />
 <ShaderModulesExample />

website/content/examples/webgpu/instanced-cubes.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {InstancedCubesWebGPUExample} from '@site';
 
-# Hello Cube
+# Instanced Cubes
 
 <DeviceTabs />
 <InstancedCubesWebGPUExample />

website/content/examples/webgpu/rotating-cube.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {RotatingCubeWebGPUExample} from '@site';
 
-# Hello Cube
+# Rotating Cube
 
 <DeviceTabs />
 <RotatingCubeWebGPUExample />

website/content/examples/webgpu/textured-cube.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {TexturedCubeWebGPUExample} from '@site';
 
-# Hello Cube
+# Textured Cube
 
 <DeviceTabs />
 <TexturedCubeWebGPUExample />

website/content/examples/webgpu/triangle.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {HelloTriangleWebGPUExample} from '@site';
 
-# Hello Cube
+# Triangle
 
 <DeviceTabs />
 <HelloTriangleWebGPUExample />

website/content/examples/webgpu/two-cubes.mdx

@@ -1,7 +1,7 @@
 import {DeviceTabs} from '@site/src/react-luma';
 import {TwoCubesWebGPUExample} from '@site';
 
-# Hello Cube
+# Two Cubes
 
 <DeviceTabs />
 <TwoCubesWebGPUExample />

website/content/sidebar-examples.js

@@ -1,2 +1,45 @@
-module.exports = [
-];
+const sidebars = {
+  examplesSidebar: [
+    {
+        type: 'doc',
+        label: 'Overview',
+        id: 'index'
+    },
+    {
+      type: 'category',
+      label: 'Showcase',
+      items: [
+        'showcase/instancing',
+        'showcase/persistence',
+        'api/animation',
+        'api/cubemap',
+        'api/texture-3d'
+      ]
+    },
+    {
+      type: 'category',
+      label: 'Tutorials',
+      items: [
+        'tutorials/hello-triangle',
+        'tutorials/hello-cube',
+        'tutorials/lighting',
+        'tutorials/hello-instancing',
+        'tutorials/shader-modules',
+        'tutorials/shader-hooks'
+      ]
+    },
+    {
+      type: 'category',
+      label: 'WebGPU',
+      items: [
+        'webgpu/triangle',
+        'webgpu/rotating-cube',
+        'webgpu/textured-cube',
+        'webgpu/two-cubes',
+        'webgpu/instanced-cubes'
+      ]
+    }
+  ]
+};
+
+module.exports = sidebars;

website/docusaurus.config.js

@@ -84,7 +84,7 @@ const config = {
                 .replace('/docs/examples/tutorials/', '/docs/tutorials/')
             ];
           }
-            
+
             // docs/modules/*/api-reference <= modules/*/docs/api-reference
           if (existingPath.includes('/docs/modules/')) {
             return [

website/src/examples/components/doc-item-component.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 const DemoContainer = styled.div`
-position: absolute;
 overflow: hidden !important;
 left: 0;
 right: 0;

website/src/examples/components/examples-index.tsx

@@ -11,7 +11,7 @@ function renderItem(item, getThumbnail) {
   const {label} = typeof item === 'string' ? {label: item} : item;
   const {href} = typeof item === 'string' ? {href: item} : item;;
   return (
-    <ExampleCard key={label} href={`examples/${href}`}>
+    <ExampleCard key={label} href={href}>
       <img width="100%" src={imageUrl} alt={label} />
       <ExampleTitle>
         <span>{label}</span>
@@ -27,22 +27,16 @@ function renderCategory({label, items}, getThumbnail) {
   ];
 }
 
-export function ExamplesIndex({getThumbnail, sidebar}) {
-  sidebar = sidebar || useDocsSidebar();
-
+export function ExamplesIndex({getThumbnail}) {
+  const sidebar = useDocsSidebar();
   return (
-    <div>
-      <div style={{height: 20}} key="index">
-        {' '}
-      </div>
       <MainExamples>
-        {sidebar.map(item => {
+        {sidebar.items.map(item => {
           if (item.type === 'category') {
             return renderCategory(item, getThumbnail);
           }
           return null;
         })}
       </MainExamples>
-    </div>
   );
 }

website/src/pages/showcase.jsx

@@ -5,7 +5,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 // import {joinPath} from '../utils/data-utils';
 
 import items from '../../content/showcase.json';
-// copied from deck.gl/website/pages/showcase with small fixes 
+// copied from deck.gl/website/pages/showcase with small fixes
 
 function joinPath(base, path) {
   if (path.match(/^\w+:\/\//)) {

website/src/react-luma/components/luma-example.tsx

@@ -1,7 +1,6 @@
-import React, {FC, useEffect, useRef, useState, useCallback, forwardRef} from 'react'; // eslint-disable-line
-import {isBrowser} from '@probe.gl/env';
-import {Device, log, luma, setPathPrefix} from '@luma.gl/core';
-import {AnimationLoopTemplate, AnimationLoop, AnimationProps, makeAnimationLoop} from '@luma.gl/engine';
+import React, {FC, useEffect, useRef, useState} from 'react'; // eslint-disable-line
+import {Device, luma, setPathPrefix} from '@luma.gl/core';
+import {AnimationLoopTemplate, AnimationLoop, makeAnimationLoop} from '@luma.gl/engine';
 
 // import StatsWidget from '@probe.gl/stats-widget';
 // import {VRDisplay} from '@luma.gl/experimental';
@@ -63,52 +62,68 @@ export const LumaExample: FC<LumaExampleProps> = (props: LumaExampleProps) => {
   let containerName = 'ssr';
 
   /** Each example maintains an animation loop */
-  const [animationLoop, setAnimationLoop] = useState<AnimationLoop | null>(null);
+  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
+  const usedCanvases = useRef(new WeakMap<HTMLCanvasElement>());
+  const currentTask = useRef<Promise<void> | null>(null);
 
   /** Type type of the device (WebGL, WebGPU, ...) */
   const deviceType = useStore(store => store.deviceType);
   containerName = props.container || `luma-example-container-${deviceType}`;
 
-  const callbackRef = useCallback((canvas: HTMLCanvasElement) => {
-    if (canvas) {
-      if (!animationLoop) {
-        log.info(0, `creating luma device ${canvas.id}`); // , ref.current);
-        canvas.style.width = '100vw';
-        canvas.style.height = '50vh';
-        const device = luma.createDevice({type: deviceType, canvas, container: containerName});
-
-        let animationLoop: AnimationLoop | null = null;
-        animationLoop = makeAnimationLoop(props.template as unknown as typeof AnimationLoopTemplate, {
-          device,
-          autoResizeViewport: true,
-          autoResizeDrawingBuffer: true
-        });
-
-        // Start the actual example
-        animationLoop?.start();
-        setAnimationLoop(animationLoop);
-
-        // Ensure the example can find its images
-        // TODO - this only works for examples/tutorials
-        const RAW_GITHUB = 'https://raw.githubusercontent.com/visgl/luma.gl/master';
-        if (props.directory) {
-          setPathPrefix(`${RAW_GITHUB}/examples/${props.directory}/${props.id}/`);
-        } else {
-          setPathPrefix(`${RAW_GITHUB}/website/static/images/`);
-        }
-      }
-
-    } else {
-
-      if (animationLoop) {
-        console.error(`unmounting example ${props.id}`); // , ref.current);
-        animationLoop?.stop();
-        animationLoop?.destroy();
-        setAnimationLoop(null);
-        // animationLoop.device?.destroy();
+  useEffect(() => {
+    if (!canvas || usedCanvases.current.get(canvas)) return;
+
+    usedCanvases.current.set(canvas, true);
+
+    let animationLoop: AnimationLoop | null = null;
+    let device: Device | null = null;
+    const asyncCreateLoop = async () => {
+      canvas.style.width = '100%';
+      canvas.style.height = '100%';
+      device = await luma.createDevice({type: deviceType, canvas, container: containerName});
+
+      animationLoop = makeAnimationLoop(props.template as unknown as typeof AnimationLoopTemplate, {
+        device,
+        autoResizeViewport: true,
+        autoResizeDrawingBuffer: true
+      });
+
+      // Start the actual example
+      animationLoop?.start();
+
+      // Ensure the example can find its images
+      // TODO - this only works for examples/tutorials
+      const RAW_GITHUB = 'https://raw.githubusercontent.com/visgl/luma.gl/master';
+      if (props.directory) {
+        setPathPrefix(`${RAW_GITHUB}/examples/${props.directory}/${props.id}/`);
+      } else {
+        setPathPrefix(`${RAW_GITHUB}/website/static/images/`);
       }
-    }
-  }, []);
+    };
+
+    currentTask.current = Promise.resolve(currentTask.current).then(() => {
+      asyncCreateLoop().catch(error => {
+        console.error(`start ${deviceType} failed`, error);
+      });
+    });
+
+    return () => {
+      currentTask.current = Promise.resolve(currentTask.current)
+        .then(() => {
+          if (animationLoop) {
+            animationLoop.destroy();
+            animationLoop = null;
+          }
+
+          if (device) {
+            device.destroy();
+          }
+        })
+        .catch(error => {
+          console.error(`unmounting ${deviceType} failed`, error);
+        });
+    };
+  }, [deviceType, canvas]);
 
-  return <canvas ref={callbackRef} />;
-}
+  return <canvas key={deviceType} ref={setCanvas} />;
+};

website/src/react-luma/store/device-store.tsx

@@ -8,7 +8,7 @@ luma.registerDevices([WebGLDevice, WebGPUDevice]);
 
 export type Store = {
   device?: Device;
-  deviceType?: 'webgl' | 'webgl2' | 'webgpu';
+  deviceType?: 'webgl1' | 'webgl2' | 'webgpu';
   deviceError?: any;
   setDeviceType: (type: any) => Promise<void>;
 };