From 78b57b38d212c673935fac0a8de3ac2dfab5bcb8 Mon Sep 17 00:00:00 2001
From: Greggman <github@greggman.com>
Date: Mon, 11 Mar 2024 10:30:29 -0700
Subject: [PATCH] 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                                          | 13 -------------
 public/css/SampleLayout.css                         |  1 +
 .../workloadSimulator/index.html                    |  8 +++-----
 sample/workloadSimulator/meta.ts                    |  7 +++++++
 src/main.ts                                         | 13 +++++++++----
 src/samples.ts                                      |  3 +++
 6 files changed, 23 insertions(+), 22 deletions(-)
 rename public/workload-simulator.html => sample/workloadSimulator/index.html (99%)
 create mode 100644 sample/workloadSimulator/meta.ts

diff --git a/index.html b/index.html
index c653d30d..8d6aac89 100644
--- a/index.html
+++ b/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>
 
diff --git a/public/css/SampleLayout.css b/public/css/SampleLayout.css
index fe186a40..9ec90d7f 100644
--- a/public/css/SampleLayout.css
+++ b/public/css/SampleLayout.css
@@ -13,6 +13,7 @@
   height: 100%;
   border: none;
   display: block;
+  background-color: #fff;
 }
 
 .sampleCategory {
diff --git a/public/workload-simulator.html b/sample/workloadSimulator/index.html
similarity index 99%
rename from public/workload-simulator.html
rename to sample/workloadSimulator/index.html
index 807490e8..a91519aa 100644
--- a/public/workload-simulator.html
+++ b/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) {
diff --git a/sample/workloadSimulator/meta.ts b/sample/workloadSimulator/meta.ts
new file mode 100644
index 00000000..b9515e4b
--- /dev/null
+++ b/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: [],
+};
diff --git a/src/main.ts b/src/main.ts
index 9839497b..33e2ada0 100644
--- a/src/main.ts
+++ b/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' }),
             }),
           ])
         ),
diff --git a/src/samples.ts b/src/samples.ts
index ff829edb..3b33179e 100644
--- a/src/samples.ts
+++ b/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,
     },
   },
 ];