[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

⚠️ No Changeset found

Latest commit: 081fefe

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a 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

@@ -32,7 +34,7 @@ export function image(opts) {
 }

 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

 return `"${src}"`;
 }

 /**
 * 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

@@ -28,7 +29,11 @@
 alt="sizes test"
 />

-<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 <richard.a.harris@gmail.com>

[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 <richard.a.harris@gmail.com>

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

pngwn commented Oct 16, 2024

changeset-bot bot commented Oct 16, 2024 •

edited

Loading

pngwn left a comment

pngwn Oct 16, 2024

pngwn Oct 16, 2024

pngwn Oct 16, 2024

pngwn Oct 16, 2024

pngwn Oct 16, 2024

pngwn Oct 16, 2024

pngwn Oct 16, 2024

pngwn Oct 16, 2024

pngwn Oct 16, 2024

pngwn Oct 16, 2024

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

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

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

Are you sure you want to change the base?

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

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

changeset-bot bot commented Oct 16, 2024 • edited Loading

⚠️ No Changeset found

pngwn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Oct 16, 2024 •

edited

Loading