-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[enhanced-image] support svelte 5 + fix types #12822
Conversation
🦋 Changeset detectedLatest commit: fe5becc The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Commented stuff for clarity
"svelte": "^4.2.10", | ||
"typescript": "^5.3.3", | ||
"svelte": "^5.0.0-next.0", | ||
"typescript": "^5.6.3", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Required to support top-level jsdoc type imports.
import { asyncWalk } from 'estree-walker'; | ||
import { walk } from 'zimmerframe'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
asyncWalk
didn't like my types.
@@ -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 }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
its 2024
* @param {import('svelte/compiler').AST.RegularElement} node | ||
* @param {AST.Text | AST.ExpressionTag} src_attribute |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use real types
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') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changed in the new AST.
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same as sbove.
@@ -28,7 +29,11 @@ | |||
alt="sizes test" | |||
/> | |||
|
|||
<enhanced:img src="./dev.png" on:click={(foo = 'clicked an image!')} alt="event handler test" /> | |||
<enhanced:img |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
update the onclick to be correct and use v5 syntax.
{#each images as _, i} | ||
<enhanced:img src={get_image(i)} alt="opt-in test" /> | ||
{/each} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
extra test to make sure we can handle things that aren't just identifiers.
@@ -1,4 +1,4 @@ | |||
<script context="module"> | |||
<script module> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cheeky
@@ -0,0 +1,34 @@ | |||
import type { AST } from 'svelte/compiler'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just some helpful types for internal use.
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
thank you!! |
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:
asyncWalker
fromestree-walker
didn't like the new tpes so i switched tozimmerframe
.zimmerframe
'swalk
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).ExpressionTag
instead ofMustacheTag
.on:click
toonclick
and corrected the syntax.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:
Tests
pnpm test
and lint the project withpnpm lint
andpnpm check
Changesets
pnpm changeset
and following the prompts. Changesets that add features should beminor
and those that fix bugs should bepatch
. Please prefix changeset messages withfeat:
,fix:
, orchore:
.Edits