merge master -> website

Author: ignatiusmb

.github/workflows/quality.yaml

@@ -10,11 +10,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
 
       - run: pnpm install

.github/workflows/release.yaml

@@ -6,31 +6,85 @@ on:
   pull_request:
 
 jobs:
+  manifest:
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.extract.outputs.version }}
+
+    steps:
+      - uses: actions/checkout@v4
+      - id: extract
+        working-directory: ./workspace/extension/static
+        run: echo "version=$(jq -r '.version' manifest.json)" >> $GITHUB_OUTPUT
+
   bundle:
     runs-on: ubuntu-latest
+    needs: manifest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
 
       - run: pnpm install
-      - run: cd workspace/extension && pnpm build
-      - run: cd workspace/extension/build && zip -r svelte-devtools *
+      - working-directory: ./workspace/extension
+        run: pnpm build && cd build && zip -r svelte-devtools *
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: extension-${{ github.sha }}
           path: workspace/extension/build/svelte-devtools.zip
 
-  # publish:
-  #   runs-on: ubuntu-latest
-  #   needs: bundle
+      - if: github.event_name == 'pull_request'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.number }}
+          WORKFLOW: ${{ github.repository }}/actions/runs/${{ github.run_id }}/artifacts
+        run: |
+          url=https://github.com/$WORKFLOW/$(gh api repos/$WORKFLOW --jq '.artifacts[0].id')
+          commented=$(gh pr view $PR_NUMBER --json comments --jq '.comments[].author.login | select(. | contains("github-actions"))')
+          body="Try the changes in this PR by [side-loading the built extension]($url). :rocket:"
+
+          if [ -z "$commented" ]; then
+            gh pr comment $PR_NUMBER --body "$body"
+          else
+            gh pr comment $PR_NUMBER --edit-last --body "$body"
+          fi
+
+  publish:
+    runs-on: ubuntu-latest
+    needs: [manifest, bundle]
+
+    if: |
+      github.repository == 'sveltejs/svelte-devtools' &&
+      github.event_name == 'push' && github.ref == 'refs/heads/master' &&
+      startsWith(github.event.head_commit.message, format('~ v{0}', needs.manifest.outputs.version))
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/download-artifact@v4
+
+      - working-directory: extension-${{ github.sha }}
+        run: |
+          pnpm dlx web-ext sign --channel unlisted \
+          --api-key ${{ secrets.WEB_EXT_API_KEY }} \
+          --api-secret ${{ secrets.WEB_EXT_API_SECRET }}
+
+      - working-directory: extension-${{ github.sha }}
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: | # https://cli.github.com/manual/gh_release_create
+          gh release create v${{ needs.manifest.outputs.version }} \
+          svelte-devtools.zip web-ext-artifacts/*.xpi#svelte-devtools.xpi \
+          --title ${{ needs.manifest.outputs.version }} \
+          --draft --generate-notes --notes '
+          Built from ${{ github.event.head_commit.id }} at https://github.com/sveltejs/svelte-devtools/actions/runs/${{ github.run_id }}
+          - Chrome Web Store: https://chrome.google.com/webstore/detail/svelte-devtools/kfidecgcdjjfpeckbblhmfkhmlgecoff
+          - Firefox Signed Add-on: https://github.com/sveltejs/svelte-devtools/releases/download/v${{ needs.manifest.outputs.version }}/svelte-devtools.xpi
+          ---'
 
-  #   steps:
-  #     - uses: actions/download-artifact@v3
-  #       with:
-  #         name: extension-${{ github.sha }}
+      # TODO: publish to Chrome Web Store

README.md

@@ -11,19 +11,21 @@ Svelte DevTools is a browser extension for the [Svelte](https://svelte.dev/) fra
 
 After installing you will see a new tab in Developer Tools. This tab displays a tree of Svelte components, HTMLx blocks, and DOM elements that were rendered on the page. By selecting one of the nodes in the tree, you can inspect and edit its current state in the panel to the right.
 
-> For Firefox users, you can grab the [`.zip` file of the latest version from the GitHub releases page](https://github.com/sveltejs/svelte-devtools/releases/latest) and load it as a temporary extension. Note that you may need to enable "Always Allow on localhost" in the extension settings.
+> For Firefox users, you can install the [`.xpi` file of the latest version from the GitHub releases page](https://github.com/sveltejs/svelte-devtools/releases/latest). Note that if you grab the `.zip` file, you will need to load it as a temporary extension and enable "Always Allow on localhost" in the extension settings.
 
 ![2.0.0 Screenshot](./.github/assets/screenshot-2.0.0.png '2.0.0 Screenshot')
 
 ## Requirements
 
-The `svelte-devtools` extension requires your Svelte application to be compiled with the `dev` option set to `true`. If you're using [SvelteKit](https://kit.svelte.dev/), this is done automatically, outside of that you will need to set it manually.
+The `svelte-devtools` extension requires the following to be true:
 
-This extension officially supports Svelte version `^4.0.0`.
+- Chrome or Firefox version 121 or higher
+- Application running Svelte version `^4.0.0`
+- Application compiled with `dev: true` ([SvelteKit](https://kit.svelte.dev/) does this automatically for you)
 
 ## Development
 
-Clone this repository, setup and run the build script
+Clone this repository and setup the environment with `pnpm`
 
 ```sh
 git clone https://github.com/sveltejs/svelte-devtools.git
@@ -34,7 +36,14 @@ cd workspace/extension
 pnpm dev
 ```
 
-This will build the codebase and output all the required files in the `build` directory. To load the extension for development, follow these steps:
+To work on the extension, run the `dev` script from `workspace/extension` directory
+
+```sh
+cd workspace/extension
+pnpm dev
+```
+
+This will build the extension and create a directory called `build`. Steps may vary depending on the browser you are using, but generally:
 
 1. Navigate to the extensions settings page
 2. Turn on the 'Developer mode' switch

package.json

@@ -8,14 +8,14 @@
 	},
 	"packageManager": "[email protected]",
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^3.1.0",
-		"@types/node": "^20.12.7",
-		"prettier": "^3.2.5",
+		"@sveltejs/vite-plugin-svelte": "next",
+		"@types/node": "^20.16.6",
+		"prettier": "^3.3.3",
 		"prettier-plugin-sort-package-json": "^0.2.0",
-		"prettier-plugin-svelte": "^3.2.3",
-		"svelte": "5.0.0-next.90",
-		"svelte-check": "^3.6.9",
-		"typescript": "^5.4.5",
-		"vite": "^5.2.9"
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "5.0.0-next.141",
+		"svelte-check": "^4.0.2",
+		"typescript": "^5.6.2",
+		"vite": "^5.4.7"
 	}
 }