Prepare for WebGPU docs

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";
@@ -39,7 +39,7 @@ export const CodeEmbed = (props) => {
   );
 
   let { previewWidth, previewHeight } = props;
-  const canvasMatch = /createCanvas\(\s*(\d+),\s*(\d+)\s*(?:,\s*(?:\w+\.)?(?:P2D|WEBGL)\s*)?\)/m.exec(initialCode);
+  const canvasMatch = /createCanvas\(\s*(\d+),\s*(\d+)\s*(?:,\s*(?:\w+\.)?(?:P2D|WEBGL|WEBGPU)\s*)?\)/m.exec(initialCode);
   if (canvasMatch) {
     previewWidth = previewWidth || parseFloat(canvasMatch[1]);
     previewHeight = previewHeight || parseFloat(canvasMatch[2]);
@@ -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,8 @@ export const referenceSchema = z.object({
     .or(z.literal("true").transform(() => true))
     .or(z.literal("false").transform(() => false))
     .optional(),
+  webgpu: z.coerce.boolean().optional(),
+  webgpuOnly: 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

@@ -113,6 +113,17 @@ function normalizeP5ReferenceLinks(html: string | undefined): string | undefined
 >
   <div class="content-grid mt-0 max-w-[770px]">
     <div class="col-span-9 xl:min-w-[1000px]">
+      {entry.data.webgpuOnly && (
+        <div class="experimental">
+          <h5>
+            <div
+              class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
+              set:html={warning}
+            />
+            {t('webgpuAddon')}
+          </h5>
+        </div>
+      )}
       {entry.data.beta && (
         <div class="experimental">
           <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 || entry.data.webgpuOnly}
             />
           )
         } 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 || entry.data.webgpuOnly}
                 />
               );
             })}

src/scripts/branchTest.ts

@@ -17,7 +17,7 @@ if (!match) {
 const repoUrl = match[1];
 const branch = match[2];
 
-const envVars = [`PUBLIC_P5_LIBRARY_PATH='/p5.min.js'`, `P5_REPO_URL='${repoUrl}'`, `P5_BRANCH='${branch}'`];
+const envVars = [`PUBLIC_P5_LIBRARY_PATH='/p5.min.js'`, `PUBLIC_P5_WEBGPU_LIBRARY_PATH='/p5.webgpu.js'`, `P5_REPO_URL='${repoUrl}'`, `P5_BRANCH='${branch}'`];
 const env = envVars.join(' ');
 
 const envFilePath = path.join(__dirname, '../../.env');

src/scripts/builders/reference.ts

@@ -314,6 +314,8 @@ const getMethodFrontmatter = (doc: ReferenceClassItemMethod) => {
     itemtype,
     chainable: doc.chainable === 1,
     beta: doc.beta ? !!doc.beta : undefined,
+    webgpu: doc.webgpu ? !!doc.webgpu : undefined,
+    webgpuOnly: doc.webgpuOnly ? !!doc.webgpuOnly : undefined,
   };
 };
 

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

src/scripts/resetBranchTest.ts

@@ -29,6 +29,11 @@ async function main() {
   if (existsSync(p5BuildPath)) {
     rmSync(p5BuildPath);
   }
+
+  const p5WebGPUBuildPath = path.join(__dirname, '../../public/p5.webgpu.js');
+  if (existsSync(p5WebGPUBuildPath)) {
+    rmSync(p5WebGPUBuildPath);
+  }
 }
 
 main().then(() => process.exit(0))

styles/global.scss

@@ -311,6 +311,9 @@ pre.code-box,
   & h5 {
     font-weight: bold;
     margin-bottom: var(--spacing-sm);
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 }
 

types/parsers.interface.ts

@@ -106,6 +106,8 @@ interface Return {
 
 interface MaybeBeta {
   beta?: number;
+  webgpu?: number;
+  webgpuOnly?: number;
 }
 
 /* Represents a method within a class */