Support WebGPU reference items/examples

Author: davepagurek

src/components/CodeEmbed/index.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "preact/hooks";
 import { useLiveRegion } from '../hooks/useLiveRegion';
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
-import { cdnLibraryUrl, cdnSoundUrl } from "@/src/globals/globals";
+import { cdnLibraryUrl, cdnSoundUrl, cdnWebGPUUrl } from "@/src/globals/globals";
 
 import { CodeFrame } from "./frame";
 import { CopyCodeButton } from "../CopyCodeButton";
@@ -99,6 +99,7 @@ export const CodeEmbed = (props) => {
               lazyLoad={props.lazyLoad}
               scripts={[
                 ...(props.includeSound ? [cdnSoundUrl] : []),
+                ...(props.includeWebGPU ? [cdnWebGPUUrl] : []),
                 ...(props.scripts ?? []),
               ]}
             />

src/content/reference/config.ts

@@ -86,6 +86,7 @@ export const referenceSchema = z.object({
     .or(z.literal("true").transform(() => true))
     .or(z.literal("false").transform(() => false))
     .optional(),
+  webgpu: z.coerce.boolean().optional(),
 });
 
 export const referenceCollection = defineCollection({

src/content/ui/en.yaml

@@ -198,6 +198,7 @@ LibrariesLayout:
 experimentalApi:
   title: This API is experimental
   description: Its behavior may change in a future version of p5.js.
+webgpuAddon: This feature requires the p5.webgpu.js addon.
 attribution:
   Remixed by: Remixed by
   Revised in 2023 by: Revised in 2023 by

src/globals/globals.ts

@@ -26,3 +26,6 @@ export const cdnSoundUrl =
   (!!import.meta.env?.PUBLIC_P5_LIBRARY_PATH || p5Version.startsWith('2'))
     ? `https://cdn.jsdelivr.net/npm/p5.sound@${p5SoundVersion}/dist/p5.sound.min.js` as const
     : `https://cdn.jsdelivr.net/npm/p5@${p5Version}/lib/addons/p5.sound.min.js` as const
+export const cdnWebGPUUrl =
+  import.meta.env?.PUBLIC_P5_WEBGPU_LIBRARY_PATH ||
+  (`https://cdn.jsdelivr.net/npm/p5@${p5Version}/lib/p5.webgpu.min.js` as const);

src/layouts/ReferenceItemLayout.astro

@@ -125,6 +125,17 @@ function normalizeP5ReferenceLinks(html: string | undefined): string | undefined
           <p>{t('experimentalApi', 'description')}</p>
         </div>
       )}
+      {entry.data.webgpu && (
+        <div class="experimental">
+          <p>
+            <div
+              class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
+              set:html={flask}
+            />
+            {t('webgpuAddon')}
+          </p>
+        </div>
+      )}
       {entry.data.deprecated && (
         <div class="deprecated">
           <h5>
@@ -152,6 +163,7 @@ function normalizeP5ReferenceLinks(html: string | undefined): string | undefined
               lazyLoad={false}
               allowSideBySide={true}
               includeSound={entry.data.module === 'p5.sound'}
+              includeWebGPU={entry.data.webgpu}
             />
           )
         } else if (part.startsWith('<pre>')) {
@@ -187,6 +199,7 @@ function normalizeP5ReferenceLinks(html: string | undefined): string | undefined
                   lazyLoad={false}
                   allowSideBySide={true}
                   includeSound={entry.data.module === 'p5.sound'}
+                  includeWebGPU={entry.data.webgpu}
                 />
               );
             })}

src/scripts/parsers/reference.ts

@@ -44,7 +44,13 @@ export const parseLibraryReference =
     // If we're using a custom build of p5 instead of a public release, create
     // a build and copy it to the specified path
     if (process.env.PUBLIC_P5_LIBRARY_PATH) {
-      await createP5Build('p5.js', `../../../public${  process.env.PUBLIC_P5_LIBRARY_PATH}`);
+      await createP5Build('p5.js', `../../../public${process.env.PUBLIC_P5_LIBRARY_PATH}`);
+    }
+    if (process.env.PUBLIC_P5_WEBGPU_LIBRARY_PATH) {
+      await fs.cp(
+        path.join(__dirname, 'in', 'p5.js', 'lib', 'p5.webgpu.js'),
+        path.join(__dirname, `../../../public${process.env.PUBLIC_P5_WEBGPU_LIBRARY_PATH}`),
+      );
     }
 
     // Copy the reference output so we can process it