NullDevice examples fix

examples/iframe/utils.mjs

@@ -102,7 +102,7 @@ export function parseConfig(script) {
     return config;
 }
 
-const DEVICE_TYPES = ['webgpu', 'webgl2'];
+const DEVICE_TYPES = ['webgpu', 'webgl2', 'null'];
 export let deviceType = 'webgl2';
 
 /**

examples/src/app/components/DeviceSelector.mjs

@@ -7,14 +7,15 @@ import {
     DEVICETYPE_WEBGL2,
     DEVICETYPE_NULL
 } from '../constants.mjs';
-import '../events.js';
 
 const deviceTypeNames = {
     [DEVICETYPE_WEBGPU]: 'WebGPU',
     [DEVICETYPE_WEBGL2]: 'WebGL 2',
     [DEVICETYPE_NULL]: 'Null'
 };
 
+/** @typedef {import('../events.js').DeviceEvent} DeviceEvent */
+
 /**
  * @typedef {object} Props
  * @property {Function} onSelect - On select handler.
@@ -87,8 +88,8 @@ class DeviceSelector extends TypedComponent {
     /**
      * If our preferred device was e.g. WebGPU, but our active device is suddenly e.g. WebGL 2,
      * then we basically infer that WebGPU wasn't supported and mark it like that.
-     * @param {DEVICETYPE_WEBGPU | DEVICETYPE_WEBGL2} preferredDevice - The preferred device.
-     * @param {DEVICETYPE_WEBGPU | DEVICETYPE_WEBGL2} activeDevice - The active device reported from
+     * @param {DEVICETYPE_WEBGPU | DEVICETYPE_WEBGL2 | DEVICETYPE_NULL} preferredDevice - The preferred device.
+     * @param {DEVICETYPE_WEBGPU | DEVICETYPE_WEBGL2 | DEVICETYPE_NULL} activeDevice - The active device reported from
      * the example iframe.
      */
     setDisabledOptions(preferredDevice = DEVICETYPE_WEBGPU, activeDevice) {
@@ -105,8 +106,9 @@ class DeviceSelector extends TypedComponent {
             };
             this.mergeState({ fallbackOrder, disabledOptions, activeDevice });
         } else {
+            const fallbackOrder = null;
             const disabledOptions = null;
-            this.mergeState({ disabledOptions, activeDevice });
+            this.mergeState({ fallbackOrder, disabledOptions, activeDevice });
         }
     }
 
@@ -123,7 +125,8 @@ class DeviceSelector extends TypedComponent {
     }
 
     /**
-     * @param {string} value - Is graphics device active
+     * @param {DEVICETYPE_WEBGPU | DEVICETYPE_WEBGL2 | DEVICETYPE_NULL} value - Is graphics device
+     * active
      */
     onSetActiveGraphicsDevice(value) {
         if (!this.preferredGraphicsDevice) {
@@ -134,7 +137,8 @@ class DeviceSelector extends TypedComponent {
     }
 
     /**
-     * @param {string} value - The newly picked graphics device.
+     * @param {DEVICETYPE_WEBGPU | DEVICETYPE_WEBGL2 | DEVICETYPE_NULL} value - The newly picked
+     * graphics device.
      */
     onSetPreferredGraphicsDevice(value) {
         this.mergeState({ disabledOptions: null, activeDevice: value });

examples/src/app/components/Example.mjs

@@ -13,7 +13,9 @@ import { iframePath } from '../paths.mjs';
 import { jsx, fragment } from '../jsx.mjs';
 import { iframe } from '../iframe.mjs';
 import { getOrientation } from '../utils.mjs';
-import '../events.js';
+
+/** @typedef {import('../events.js').StateEvent} StateEvent */
+/** @typedef {import('../events.js').LoadingEvent} LoadingEvent */
 
 /**
  * @template {Record<string, string>} [FILES=Record<string, string>]

examples/src/app/components/code-editor/CodeEditorBase.mjs

@@ -7,7 +7,7 @@ import { playcanvasTheme } from '../../monaco/theme.mjs';
 import { jsRules } from '../../monaco/tokenizer-rules.mjs';
 import * as languages from '../../monaco/languages/index.mjs';
 
-import '../../events.js';
+/** @typedef {import('../../events.js').StateEvent} StateEvent */
 
 loader.config({ paths: { vs: './modules/monaco-editor/min/vs' } });
 

examples/src/app/components/code-editor/CodeEditorDesktop.mjs

@@ -7,7 +7,7 @@ import { jsx } from '../../jsx.mjs';
 import { iframe } from '../../iframe.mjs';
 import { removeRedundantSpaces } from '../../strings.mjs';
 
-import '../../events.js';
+/** @typedef {import('../../events.js').StateEvent} StateEvent */
 
 loader.config({ paths: { vs: './modules/monaco-editor/min/vs' } });
 

examples/src/app/components/code-editor/CodeEditorMobile.mjs

@@ -4,8 +4,6 @@ import { CodeEditorBase } from './CodeEditorBase.mjs';
 
 import { jsx } from '../../jsx.mjs';
 
-import '../../events.js';
-
 // eslint-disable-next-line jsdoc/require-property
 /**
  * @typedef {Record<string, any>} Props

examples/src/app/events.js

@@ -1,3 +1,7 @@
+/** @typedef {import('./constants.mjs').DEVICETYPE_WEBGPU} DEVICETYPE_WEBGPU  */
+/** @typedef {import('./constants.mjs').DEVICETYPE_WEBGL2} DEVICETYPE_WEBGL2  */
+/** @typedef {import('./constants.mjs').DEVICETYPE_NULL} DEVICETYPE_NULL  */
+
 /**
  * @typedef {object} LoadingEventDetail
  * @property {boolean} showDeviceSelector - Show device selector
@@ -16,7 +20,7 @@
 
 /**
  * @typedef {object} DeviceEventDetail
- * @property {string} deviceType - The device type.
+ * @property {DEVICETYPE_WEBGPU | DEVICETYPE_WEBGL2 | DEVICETYPE_NULL} deviceType - The device type.
  *
  * @typedef {CustomEvent<DeviceEventDetail>} DeviceEvent
  */