Update layouts and build scripts to work with webgpu

Author: davepagurek

src/components/CodeEmbed/index.jsx

@@ -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]);

src/layouts/ReferenceItemLayout.astro

@@ -127,13 +127,13 @@ function normalizeP5ReferenceLinks(html: string | undefined): string | undefined
       )}
       {entry.data.webgpu && (
         <div class="experimental">
-          <p>
+          <h5>
             <div
               class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
-              set:html={flask}
+              set:html={warning}
             />
             {t('webgpuAddon')}
-          </p>
+          </h5>
         </div>
       )}
       {entry.data.deprecated && (

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,7 @@ const getMethodFrontmatter = (doc: ReferenceClassItemMethod) => {
     itemtype,
     chainable: doc.chainable === 1,
     beta: doc.beta ? !!doc.beta : undefined,
+    webgpu: doc.webgpu ? !!doc.webgpu : undefined,
   };
 };
 

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,7 @@ interface Return {
 
 interface MaybeBeta {
   beta?: number;
+  webgpu?: number;
 }
 
 /* Represents a method within a class */