Replace pkg.pr.new with real npm publish of a preview packge

[netanelgilad]

@claude
let's change the usage of pkg.pr.new to be an actual publish of an npm package to the real npm registry.
But in order to not "dirty" the real package version, we'll publish those version under @base44/preview-sdk and we can then use version with the commit has or pr number for simplicity @base44/preview-sdk@pr-{number} or @base44/preview-sdk@commit-{short hash}.

This will allow us to test the preview package in environment that doesn't support the preview urls of pkg.pr.new like in Deno deploy.
if you need to make changes in the workflow files and you don't have permissions, just give the exact changes that are needed int hose files and i'll do them manually

[claude]

Claude finished @netanelgilad's task —— View job

---

Replacing pkg.pr.new with npm publish

I've analyzed the current setup and created the necessary changes to replace pkg.pr.new with actual npm publishing to @base44/preview-sdk.

Todo List:

• Read repository setup instructions (CLAUDE.md)
• Search for current pkg.pr.new usage in the codebase
• Examine existing GitHub workflows
• Update workflows to publish to npm registry instead
• Update package configuration for preview publishing
• Provide exact changes needed for manual implementation

Analysis:

Found pkg.pr.new usage in two workflow files:

• .github/workflows/preview-publish.yml - runs on PRs, publishes preview and posts comment
• .github/workflows/main-publish.yml - runs on main branch pushes

Current package: @base44/sdk v0.3.0

Implementation:

As expected, I don't have permissions to modify workflow files directly. Here are the exact changes needed:

Changes to .github/workflows/preview-publish.yml:

Replace the entire file content with:

name: Package Preview Publish

on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  publish-preview:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Enable corepack
        run: corepack enable

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"
          registry-url: 'https://registry.npmjs.org'

      - name: Install dependencies
        run: npm install

      - name: Build package
        run: npm run build

      - name: Generate preview package name and version
        id: preview_info
        run: |
          PR_NUMBER="${{ github.event.number }}"
          COMMIT_HASH="${{ github.sha }}"
          SHORT_COMMIT="${COMMIT_HASH:0:7}"
          
          if [ ! -z "$PR_NUMBER" ]; then
            PREVIEW_VERSION="pr-$PR_NUMBER"
          else
            PREVIEW_VERSION="commit-$SHORT_COMMIT"
          fi
          
          echo "version=$PREVIEW_VERSION" >> $GITHUB_OUTPUT
          echo "package_name=@base44/preview-sdk" >> $GITHUB_OUTPUT
          echo "full_package=@base44/preview-sdk@$PREVIEW_VERSION" >> $GITHUB_OUTPUT

      - name: Update package.json for preview
        run: |
          # Create a backup of original package.json
          cp package.json package.json.bak
          
          # Update name and version for preview
          npm pkg set name="${{ steps.preview_info.outputs.package_name }}"
          npm pkg set version="${{ steps.preview_info.outputs.version }}"

      - name: Publish preview package
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

      - name: Restore original package.json
        run: mv package.json.bak package.json

      - name: Comment PR with install instructions
        uses: actions/github-script@v6
        with:
          script: |
            const fullPackage = '${{ steps.preview_info.outputs.full_package }}';
            const installCmd = `npm i ${fullPackage}`;
            const body = `### 🚀 Package Preview Available!

            ---

            **Install this PR's preview build with npm:**

            \`\`\`sh
            ${installCmd}
            \`\`\`

            - 📦 **Preview Package**: \`${fullPackage}\`
            - 🔗 [View this commit on GitHub](https://github.com/${{ github.repository }}/commit/${{ github.sha }})

            ---
            <sub>Preview published to npm registry — try new features instantly!</sub>
            `;

            const botCommentIdentifier = '### 🚀 Package Preview Available!';

            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,
                });
              }
            }

            if (context.eventName === 'pull_request') {
              if (context.issue.number) {
                await createOrUpdateComment(context.issue.number);
              }
            }

permissions:
  contents: read
  pull-requests: write

Changes to .github/workflows/main-publish.yml:

Replace the entire file content with:

name: Package Main Preview Publish

on:
  push:
    branches: [main]

jobs:
  publish-main-preview:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Enable corepack
        run: corepack enable

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"
          registry-url: 'https://registry.npmjs.org'

      - name: Install dependencies
        run: npm install

      - name: Build package
        run: npm run build

      - name: Generate preview package name and version
        id: preview_info
        run: |
          COMMIT_HASH="${{ github.sha }}"
          SHORT_COMMIT="${COMMIT_HASH:0:7}"
          PREVIEW_VERSION="commit-$SHORT_COMMIT"
          
          echo "version=$PREVIEW_VERSION" >> $GITHUB_OUTPUT
          echo "package_name=@base44/preview-sdk" >> $GITHUB_OUTPUT
          echo "full_package=@base44/preview-sdk@$PREVIEW_VERSION" >> $GITHUB_OUTPUT

      - name: Update package.json for preview
        run: |
          # Create a backup of original package.json
          cp package.json package.json.bak
          
          # Update name and version for preview
          npm pkg set name="${{ steps.preview_info.outputs.package_name }}"
          npm pkg set version="${{ steps.preview_info.outputs.version }}"

      - name: Publish preview package
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

      - name: Restore original package.json
        run: mv package.json.bak package.json

permissions:
  contents: read

Additional Requirements:

1. NPM Token: You'll need to add an NPM_TOKEN secret to your GitHub repository settings with publish permissions for the @base44/preview-sdk package.
2. Package Scope: Make sure the @base44/preview-sdk package name is available on npm and you have publishing rights to the @base44 scope.

Key Changes:

• ✅ Replaces pkg.pr.new with npm publish
• ✅ Uses @base44/preview-sdk package name
• ✅ Generates versions as pr-{number} or commit-{hash}
• ✅ Temporarily updates package.json during build
• ✅ Works with Deno Deploy and other environments
• ✅ Updates PR comments to show npm install command

---

[netanelgilad]

Fixed by #20