[enhanced-image] support svelte 5 + fix types #12822

pngwn · 2024-10-16T12:45:13Z

This PR updates enhanced-image to support svelte 5, with updated tests and types.

It was a little more involved than I anticipated, mostly due to type issues altho there were some changes in the AST from what I can see when witching to modern mode.

This PR includes the following changes:

Update devDeps to svelte 5 (currently next but we can change when we release)
Use the new public AST types instead of the old private ones
asyncWalker from estree-walker didn't like the new tpes so i switched to zimmerframe.
zimmerframe's walk is not asynchronous, so I had to modify the logic slightly to wait for the AST updates to be performed (as the updates are asynchronous).
Updated the expression test to look for ExpressionTag instead of MustacheTag.
Some general hardening, mainly to satisfy typescript but it might be more resilient too.
A little type narrowing where appropriate.
Added some internal compound types to preserve our sanity.
Updated the tests to match the v5 output, I also changed the on:click to onclick and corrected the syntax.
Added an extra test to satisfy my nervousness.
Updated typescript to support top level jsdoc type imports.

I will comment the code directly to clarify these changes.

Closes #12686.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
This message body should clearly illustrate what problems it solves.
Ideally, include a test that fails without this PR but passes with it.

Tests

Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Edits

Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.

changeset-bot · 2024-10-16T12:45:21Z

🦋 Changeset detected

Latest commit: fe5becc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sveltejs/enhanced-img	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

pngwn

Commented stuff for clarity

pngwn · 2024-10-16T12:45:46Z

packages/enhanced-img/package.json

-		"svelte": "^4.2.10",
-		"typescript": "^5.3.3",
+		"svelte": "^5.0.0-next.0",
+		"typescript": "^5.6.3",


Required to support top-level jsdoc type imports.

pngwn · 2024-10-16T12:46:06Z

packages/enhanced-img/src/preprocessor.js

-import { asyncWalk } from 'estree-walker';
+import { walk } from 'zimmerframe';


asyncWalk didn't like my types.

pngwn · 2024-10-16T12:46:14Z

packages/enhanced-img/src/preprocessor.js


 			const s = new MagicString(content);
-			const ast = parse(content, { filename });
+			const ast = parse(content, { filename, modern: true });


pngwn · 2024-10-16T12:46:25Z

packages/enhanced-img/src/preprocessor.js

+			 * @param {import('svelte/compiler').AST.RegularElement} node
+			 * @param {AST.Text | AST.ExpressionTag} src_attribute


Use real types

pngwn · 2024-10-16T12:46:56Z

packages/enhanced-img/src/preprocessor.js

-					return;
-				} else if (src_attribute.type === 'AttributeShorthand') {
-					const src_var_name = content.substring(src_attribute.start, src_attribute.end).trim();
+				if (src_attribute.type === 'ExpressionTag') {


Changed in the new AST.

pngwn · 2024-10-16T12:52:32Z

packages/enhanced-img/src/preprocessor.js

 * For images like `<img src={manually_imported} />`
 * @param {string} content
- * @param {import('svelte/types/compiler/interfaces').TemplateNode} node
+ * @param {import('svelte/compiler').AST.RegularElement} node


same as sbove.

pngwn · 2024-10-16T12:53:01Z

packages/enhanced-img/test/Input.svelte

 />

-<enhanced:img src="./dev.png" on:click={(foo = 'clicked an image!')} alt="event handler test" />
+<enhanced:img


update the onclick to be correct and use v5 syntax.

pngwn · 2024-10-16T12:53:18Z

packages/enhanced-img/test/Input.svelte

+{#each images as _, i}
+	<enhanced:img src={get_image(i)} alt="opt-in test" />
+{/each}
+


extra test to make sure we can handle things that aren't just identifiers.

pngwn · 2024-10-16T12:53:32Z

packages/enhanced-img/test/Output.svelte

@@ -1,4 +1,4 @@
-<script context="module">	
+<script module>	


pngwn · 2024-10-16T12:53:48Z

packages/enhanced-img/types/internal.d.ts

@@ -0,0 +1,34 @@
+import type { AST } from 'svelte/compiler';


Just some helpful types for internal use.

packages/enhanced-img/src/preprocessor.js

Co-authored-by: Rich Harris <[email protected]>

packages/enhanced-img/package.json

benmccann · 2024-11-01T16:10:16Z

thank you!!

[enhanced-image] support svelte 5 + fix types

53f24a9

pngwn commented Oct 16, 2024

View reviewed changes

Rich-Harris reviewed Oct 16, 2024

View reviewed changes

packages/enhanced-img/src/preprocessor.js Outdated Show resolved Hide resolved

Rich-Harris reviewed Oct 16, 2024

View reviewed changes

packages/enhanced-img/src/preprocessor.js Outdated Show resolved Hide resolved

Apply suggestions from code review

081fefe

Co-authored-by: Rich Harris <[email protected]>

vercel bot deployed to Preview – kit-default-template October 16, 2024 14:11 View deployment

vercel bot had a problem deploying to Preview – kit-svelte-dev October 16, 2024 14:12 Failure

benmccann added pkg:enhanced-img svelte 5 labels Oct 16, 2024

chore: add ts-ignore to appease ecosystem CI

8221b82

teemingc reviewed Oct 29, 2024

View reviewed changes

packages/enhanced-img/package.json Outdated Show resolved Hide resolved

benmccann mentioned this pull request Oct 31, 2024

[enhanced-img] Moved estree-walker from dev dependencies to dependencies #12926

Closed

6 tasks

benmccann added 6 commits November 1, 2024 08:13

remove estree-walker

deabf85

update svelte 5 to final release

6cad2f7

fix peer dep range. svelte 4 is no longer supported

de2db7a

Create witty-years-relate.md

69dd692

merge main

bd1f53b

Merge branch 'eh-im' of github.com:sveltejs/kit into eh-im

fe5becc

benmccann approved these changes Nov 1, 2024

View reviewed changes

benmccann merged commit 967bad7 into main Nov 1, 2024
10 checks passed

benmccann deleted the eh-im branch November 1, 2024 16:10

github-actions bot mentioned this pull request Nov 1, 2024

Version Packages #12897

Merged

marekdedic mentioned this pull request Nov 1, 2024

[enhanced-img] Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'estree-walker' #12920

Closed

		import { asyncWalk } from 'estree-walker';
		import { walk } from 'zimmerframe';

		* @param {import('svelte/compiler').AST.RegularElement} node
		* @param {AST.Text \| AST.ExpressionTag} src_attribute

Uh oh!

[enhanced-image] support svelte 5 + fix types #12822

[enhanced-image] support svelte 5 + fix types #12822

Uh oh!

Conversation

pngwn commented Oct 16, 2024

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

Tests

Changesets

Edits

Uh oh!

changeset-bot bot commented Oct 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

pngwn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

benmccann commented Nov 1, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

changeset-bot bot commented Oct 16, 2024 •

edited

Loading