chore: Allow PR-builds to be compared with other versions in the benc…

…hmark app (#867)

.github/workflows/pkg-pr.yml

@@ -0,0 +1,144 @@
+name: Publish PR package (pkg.pr.new)
+
+on: [pull_request]
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      repository-projects: write
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v4
+
+      - name: Print commit id, message and tag
+        run: |
+          git show -s --format='%h %s'
+          echo "github.ref -> {{ github.ref }}"
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --recursive --frozen-lockfile
+
+      - name: Nightly build
+        run: pnpm nightly-build
+
+      - name: Publish (pkg.pr.new)
+        run: npx pkg-pr-new publish './packages/typegpu/dist' --json output.json --comment=off
+      - name: Post or update comment
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const fs = require('fs');
+            const output = JSON.parse(fs.readFileSync('output.json', 'utf8'));
+
+            const sha =
+              context.event_name === 'pull_request'
+                ? context.payload.pull_request.head.sha
+                : context.payload.after;
+
+            const commitUrl = `https://github.com/${context.repo.owner}/${context.repo.repo}/commit/${sha}`;
+
+            const body = `**pkg.pr.new**
+
+            *packages*
+            \`\`\`
+            pnpm i https://pkg.pr.new/software-mansion/TypeGPU/typegpu@${context.issue.number}
+            ${output.packages
+              .map((p) => `pnpm i ${p.url}`)
+              .join('\n')}
+            \`\`\`
+
+            *benchmark*
+            [view benchmark](https://docs.swmansion.com/TypeGPU/benchmark?p=npm-latest_pr-${context.issue.number})
+
+            *commit*
+            [view commit](${commitUrl})`;
+
+            const botCommentIdentifier = '**pkg.pr.new**';
+
+            async function findBotComment(issueNumber) {
+              if (!issueNumber) return null;
+              const comments = await github.rest.issues.listComments({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issueNumber,
+              });
+              return comments.data.find((comment) =>
+                comment.body.includes(botCommentIdentifier)
+              );
+            }
+
+            async function createOrUpdateComment(issueNumber) {
+              if (!issueNumber) {
+                console.log('No issue number provided. Cannot post or update comment.');
+                return;
+              }
+
+              const existingComment = await findBotComment(issueNumber);
+              if (existingComment) {
+                await github.rest.issues.updateComment({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  comment_id: existingComment.id,
+                  body: body,
+                });
+              } else {
+                await github.rest.issues.createComment({
+                  issue_number: issueNumber,
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  body: body,
+                });
+              }
+            }
+
+            async function logPublishInfo() {
+              console.log('\n' + '='.repeat(50));
+              console.log('Publish Information');
+              console.log('='.repeat(50));
+              console.log('\nPublished Packages:');
+              console.log(packages);
+              console.log('\nTemplates:');
+              console.log(templates);
+              console.log(`\nCommit URL: ${commitUrl}`);
+              console.log('\n' + '='.repeat(50));
+            }
+
+            if (context.eventName === 'pull_request') {
+              if (context.issue.number) {
+                await createOrUpdateComment(context.issue.number);
+              }
+            } else if (context.eventName === 'push') {
+              const pullRequests = await github.rest.pulls.list({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state: 'open',
+                head: `${context.repo.owner}:${context.ref.replace(
+                  'refs/heads/',
+                  ''
+                )}`,
+              });
+
+              if (pullRequests.data.length > 0) {
+                await createOrUpdateComment(pullRequests.data[0].number);
+              } else {
+                console.log(
+                  'No open pull request found for this push. Logging publish information to console:'
+                );
+                await logPublishInfo();
+              }
+            }

apps/typegpu-docs/src/pages/benchmark/modules.ts

@@ -15,6 +15,12 @@ export function importTypeGPU(locator: PackageLocator): Promise<TypeGPUModule> {
     );
   }
 
+  if (locator.type === 'pr') {
+    return import(
+      /* @vite-ignore */ `https://esm.sh/pr/software-mansion/TypeGPU/typegpu@${locator.commit}/`
+    );
+  }
+
   throw new Error('Unsupported import of `typegpu`');
 }
 
@@ -31,5 +37,11 @@ export function importTypeGPUData(
     );
   }
 
+  if (locator.type === 'pr') {
+    return import(
+      /* @vite-ignore */ `https://esm.sh/pr/typegpu@${locator.commit}/data`
+    );
+  }
+
   throw new Error('Unsupported import of `typegpu/data`');
 }

apps/typegpu-docs/src/pages/benchmark/parameter-set-row.tsx

@@ -38,6 +38,38 @@ function NpmParameters(props: {
   );
 }
 
+function PrParameters(props: {
+  parameterSetAtom: PrimitiveAtom<BenchParameterSet>;
+}) {
+  const [parameterSet, setParameterSet] = useAtom(props.parameterSetAtom);
+
+  const version =
+    parameterSet.typegpu.type === 'pr' ? parameterSet.typegpu.commit : '';
+
+  const setCommit = useCallback(
+    (commit: string) => {
+      setParameterSet((prev) => ({
+        ...prev,
+        typegpu: { ...prev.typegpu, commit },
+      }));
+    },
+    [setParameterSet],
+  );
+
+  return (
+    <>
+      <p className="text-sm">typegpu@</p>
+      <input
+        type="text"
+        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        value={version}
+        onChange={(e) => setCommit(e.target.value)}
+        placeholder="b364de3"
+      />
+    </>
+  );
+}
+
 export function ParameterSetRow(props: {
   parameterSetAtom: PrimitiveAtom<BenchParameterSet>;
 }) {
@@ -47,7 +79,7 @@ export function ParameterSetRow(props: {
   const typeValue = parameterSet.typegpu.type;
 
   const setType = useCallback(
-    (type: 'local' | 'npm') => {
+    (type: 'local' | 'npm' | 'pr') => {
       setParameterSet((prev) => ({
         ...prev,
         typegpu: { type },
@@ -73,12 +105,16 @@ export function ParameterSetRow(props: {
       >
         <option value="local">📌 local</option>
         <option value="npm">⬇️ npm</option>
+        <option value="pr">🌳 pr</option>
       </select>
       <div className="flex-1 flex justify-start items-center">
         {typeValue === 'local' && <p className="text-sm">typegpu</p>}
         {typeValue === 'npm' && (
           <NpmParameters parameterSetAtom={props.parameterSetAtom} />
         )}
+        {typeValue === 'pr' && (
+          <PrParameters parameterSetAtom={props.parameterSetAtom} />
+        )}
       </div>
     </div>
   );

apps/typegpu-docs/src/pages/benchmark/parameter-set.ts

@@ -7,6 +7,10 @@ export type PackageLocator =
       type: 'npm';
       version?: string;
     }
+  | {
+      type: 'pr';
+      commit?: string;
+    }
   | {
       type: 'local';
     };
@@ -24,6 +28,10 @@ export function stringifyLocator(
     return `${name}@${locator.version}`;
   }
 
+  if (locator.type === 'pr') {
+    return `${name}@${locator.commit}`;
+  }
+
   if (locator.type === 'local') {
     return `${name}:local`;
   }
@@ -35,10 +43,43 @@ function getFreeKey(get: Getter): number {
   return Math.max(...get(parameterSetsAtom).map((params) => params.key)) + 1;
 }
 
-export const parameterSetsAtom = atomWithUrl<BenchParameterSet[]>('p', [
-  { key: 1, typegpu: { type: 'local' } },
-  { key: 2, typegpu: { type: 'npm', version: 'latest' } },
-]);
+export const parameterSetsAtom = atomWithUrl<BenchParameterSet[]>(
+  'p',
+  [
+    { key: 1, typegpu: { type: 'local' } },
+    { key: 2, typegpu: { type: 'npm', version: 'latest' } },
+  ],
+  {
+    encode: (values) =>
+      values
+        .map(
+          (value) =>
+            `${value.typegpu.type === 'npm' ? `npm-${value.typegpu.version ?? ''}` : value.typegpu.type === 'pr' ? `pr-${value.typegpu.commit ?? ''}` : 'local'}`,
+        )
+        .join('_'),
+
+    decode: (encoded) =>
+      encoded.split('_').map((value, i) =>
+        value.startsWith('npm-')
+          ? {
+              key: i + 1,
+              typegpu: {
+                type: 'npm',
+                version: value.slice('npm-'.length) ?? '',
+              },
+            }
+          : value.startsWith('pr-')
+            ? {
+                key: i + 1,
+                typegpu: {
+                  type: 'pr',
+                  commit: value.slice('pr-'.length) ?? '',
+                },
+              }
+            : { key: i + 1, typegpu: { type: 'local' } },
+      ),
+  },
+);
 
 export const parameterSetAtomsAtom = splitAtom(
   parameterSetsAtom,

package.json

@@ -38,6 +38,7 @@
     "@biomejs/biome": "^1.8.3",
     "@types/node": "^20.11.13",
     "dpdm": "^3.14.0",
+    "pkg-pr-new": "^0.0.39",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
     "vitest": "^2.1.9"