Merge branch 'main' into pkg-pr-new-version

Author: paoloricciuti

.github/workflows/docs-preview-create.yml

@@ -5,7 +5,7 @@ on:
     types: [docs-preview-create]
 
 env:
-  BRANCH: sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
+  BRANCH: preview-${{ github.event.client_payload.package }}-${{ github.event.client_payload.pr }}
 
 jobs:
   Sync:
@@ -33,4 +33,28 @@ jobs:
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
 
       - name: Push
+        id: push
         run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }}
+
+      - name: Find comment
+        id: fc
+        uses: peter-evans/find-comment@v3
+        with:
+          token: ${{ secrets.COMMENTER_TOKEN }}
+          repository: ${{ github.event.client_payload.repo }}
+          issue-number: ${{ github.event.client_payload.pr }}
+          comment-author: 'Rich-Harris' # it's using my personal access token, not sure if there's a way to comment as a bot instead
+          body-includes: _this is an automated message_
+
+      - name: Create comment
+        if: steps.fc.outputs.comment-id == ''
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          token: ${{ secrets.COMMENTER_TOKEN }}
+          repository: ${{ github.event.client_payload.repo }}
+          issue-number: ${{ github.event.client_payload.pr }}
+          body: |
+            preview: https://svelte-dev-git-${{ env.BRANCH }}-svelte.vercel.app/
+
+            _this is an automated message_
+          edit-mode: replace

.github/workflows/docs-preview-delete.yml

@@ -4,6 +4,9 @@ on:
   repository_dispatch:
     types: [docs-preview-delete]
 
+env:
+  BRANCH: preview-${{ github.event.client_payload.package }}-${{ github.event.client_payload.pr }}
+
 jobs:
   Sync:
     runs-on: ubuntu-latest
@@ -13,4 +16,4 @@ jobs:
           token: ${{ secrets.GH_TOKEN }}
 
       - name: Delete branch
-        run: git push origin :sync/${{ github.event.client_payload.package }}/${{ github.event.client_payload.owner }}/${{ github.event.client_payload.branch }}
+        run: git push origin :${{ env.BRANCH }}

apps/svelte.dev/content/tutorial/02-advanced-svelte/05-advanced-transitions/02-animations/index.md

@@ -23,7 +23,7 @@ Then add it to the `<li>` elements:
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done
+	class:done={todo.done}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	+++animate:flip+++
@@ -35,7 +35,7 @@ The movement is a little slow in this case, so we can add a `duration` parameter
 ```svelte
 /// file: TodoList.svelte
 <li
-	class:done
+	class:done={todo.done}
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	animate:flip+++={{ duration: 200 }}+++

apps/svelte.dev/scripts/sync-docs/README.md

@@ -83,3 +83,72 @@ You will need to add a `SYNC_REQUEST_TOKEN` to the repo. First, create a persona
 - under 'Repository permissions', change 'Contents' to 'Read and write'
 
 Then, go to `https://github.com/<ORG>/<REPO>/settings/secrets/actions`, click 'New repository secret' and paste in your newly generated personal access token.
+
+## Previews
+
+Preview deployments will be created for pull requests to external repos that result in documentation changes. In the external repo, add a `.github/workflows/docs-preview-create-request.yml` workflow...
+
+```yml
+# https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/scripts/sync-docs/README.md
+name: Docs preview create request
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  dispatch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Repository Dispatch
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.SYNC_REQUEST_TOKEN }}
+          repository: sveltejs/svelte.dev
+          event-type: docs-preview-create
+          client-payload: |-
+            {
+              "package": "<YOUR_PACKAGE_NAME>",
+              "repo": "${{ github.repository }}",
+              "owner": "${{ github.event.pull_request.head.repo.owner.login }}",
+              "branch": "${{ github.event.pull_request.head.ref }}",
+              "pr": ${{ github.event.pull_request.number }}
+            }
+```
+
+...and a `.github/workflows/docs-preview-delete-request.yml` workflow:
+
+```yml
+# https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/scripts/sync-docs/README.md
+name: Docs preview delete request
+
+on:
+  pull_request:
+    branches:
+      - main
+    types: [closed]
+
+jobs:
+  dispatch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Repository Dispatch
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ secrets.SYNC_REQUEST_TOKEN }}
+          repository: sveltejs/svelte.dev
+          event-type: docs-preview-delete
+          client-payload: |-
+            {
+              "package": "cli",
+              "repo": "${{ github.repository }}",
+              "owner": "${{ github.event.pull_request.head.repo.owner.login }}",
+              "branch": "${{ github.event.pull_request.head.ref }}",
+              "pr": ${{ github.event.pull_request.number }}
+            }
+```
+
+These use the same `SYNC_REQUEST_TOKEN` as above.
+
+Inside _this_ repo, the [`docs-preview-create.yml`](../../../../.github/workflows/docs-preview-create.yml) workflow creates a comment on the PR once the branch has been created, inferring the eventual Vercel preview deployment URL. It uses this repo's `COMMENTER_TOKEN` secret, which is a [personal access token](https://github.com/settings/personal-access-tokens/new) with write permissions on issues and pull requests.

packages/editor/src/lib/compile-worker/worker.ts

@@ -100,12 +100,20 @@ addEventListener('message', async (event) => {
 		let result: CompileResult;
 
 		if (file.name.endsWith('.svelte')) {
-			result = self.svelte.compile(file.contents, {
-				generate: options.generate, // TODO do we need to adjust this for 3/4?
+			const is_svelte_3_or_4 = !self.svelte.compileModule;
+			const compilerOptions: any = {
+				generate: is_svelte_3_or_4
+					? options.generate === 'client'
+						? 'dom'
+						: 'ssr'
+					: options.generate,
 				dev: options.dev,
-				modernAst: options.modernAst,
 				filename: file.name
-			});
+			};
+			if (!is_svelte_3_or_4) {
+				compilerOptions.modernAst = options.modernAst; // else Svelte 3/4 will throw an "unknown option" error
+			}
+			result = self.svelte.compile(file.contents, compilerOptions);
 		} else {
 			result = self.svelte.compileModule(file.contents, {
 				generate: options.generate,