Make the workload-simulator work as a sample (#386)

* move workload simulator
* Turn off eslint

I'm not sure if I should go through and fix this or not
`npm run fix` fixes a bunch and leaves 5 unused vars.

Also switch to type module (removes use-strict) and
stop checking for 11yr old rAF

* make workload simulator work as sample

index.html

@@ -41,19 +41,6 @@ <h1>
           </a>
           <hr>
           <div id="samplelist"></div>
-          <hr>
-          <h3 style="margin-bottom: 5px">Other Pages</h3>
-          <ul class="exampleList">
-            <li>
-              <a
-                rel="noreferrer"
-                target="_blank"
-                href="./workload-simulator.html"
-              >
-                Workload Simulator ↗️
-              </a>
-            </li>
-          </ul>
         </div>
       </nav>
 

public/css/SampleLayout.css

@@ -13,6 +13,7 @@
   height: 100%;
   border: none;
   display: block;
+  background-color: #fff;
 }
 
 .sampleCategory {

public/workload-simulator.html → sample/workloadSimulator/index.html

@@ -199,9 +199,8 @@ <h2 style=margin-top:0>Drag the logo, or choose "Animate".</h2>
 <h2><center>Web graphics workload simulator</center></h2>
 </div>
 
-<script>
-'use strict';
-
+<script type="module">
+/* eslint-disable */
 
 /************\
 * Options UI *
@@ -474,8 +473,7 @@ <h2><center>Web graphics workload simulator</center></h2>
       }
     }
     if (useRaf.checked && rafPending == 0) {
-      (window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-          window.webkitRequestAnimationFrame)(function() { render(true); });
+      window.requestAnimationFrame(function() { render(true); });
       rafPending++;
     }
     if (useSetTimeout.checked) {

sample/workloadSimulator/meta.ts

@@ -0,0 +1,7 @@
+export default {
+  name: 'Workload Simulator',
+  description: `Test various ways of rendering (WebGPU, WebGL, Canvas2D, DOM) and measures performance`,
+  openInNewTab: true,
+  filename: __DIRNAME__,
+  sources: [],
+};

src/main.ts

@@ -224,10 +224,15 @@ for (const { title, description, samples } of pageCategories) {
           el('li', {}, [
             el('a', {
               href: sampleInfo.filename,
-              onClick: (e: PointerEvent) => {
-                setSampleIFrameURL(e, sampleInfo);
-              },
-              textContent: sampleInfo.tocName || key,
+              ...(!sampleInfo.openInNewTab && {
+                onClick: (e: PointerEvent) => {
+                  setSampleIFrameURL(e, sampleInfo);
+                },
+              }),
+              textContent: `${sampleInfo.tocName || key}${
+                sampleInfo.openInNewTab ? ' ↗️' : ''
+              }`,
+              ...(sampleInfo.openInNewTab && { target: '_blank' }),
             }),
           ])
         ),

src/samples.ts

@@ -33,6 +33,7 @@ import texturedCube from '../sample/texturedCube/meta';
 import twoCubes from '../sample/twoCubes/meta';
 import videoUploading from '../sample/videoUploading/meta';
 import worker from '../sample/worker/meta';
+import workloadSimulator from '../sample/workloadSimulator/meta';
 
 export type SourceInfo = {
   path: string;
@@ -42,6 +43,7 @@ export type SampleInfo = {
   name: string;
   tocName?: string;
   description: string;
+  openInNewTab?: boolean;
   filename: string; // used if sample is local
   url?: string; // used if sample is remote
   sources: SourceInfo[];
@@ -154,6 +156,7 @@ export const pageCategories: PageCategory[] = [
     description: 'WebGPU Performance Benchmarks',
     samples: {
       animometer,
+      workloadSimulator,
     },
   },
 ];