Add Svelte 5 runes support #59
Conversation
|
Added export from types file, as it can be useful when working around the package. |
|
Would using the new syntax break the backward compatibility for people using the previous Svelte versions? |
From what I found, it seems like yes. Maybe you can publish as an With the latest version of the package, svelte shows a lot of warnings on the console that some of the reactive statements won't work because they are not supported anymore by Svelte 5. |
Oh ok, I didn't know that. Then it totally makes sense to publish this update as a new major version. |
src/lib/Cropper.svelte
Outdated
|
|
||
| // when zoom changes, we recompute the cropped area | ||
| $: zoom && emitCropData() | ||
| let lastZoom = $state(zoom); |
There was a problem hiding this comment.
We should not need to track the last zoom value ourselves, Svelte should do it automatically as long as we access zoom in the effect.
There was a problem hiding this comment.
This one can be removed safely without causing loops. Just added it for testing and forgot to remove
src/lib/Cropper.svelte
Outdated
| computeSizes() | ||
| emitCropData() | ||
| } | ||
| let lastAspect = $state(aspect); |
There was a problem hiding this comment.
Same here, this state should not be needed.
There was a problem hiding this comment.
The lastAspect is required here, when checking for just the aspect variable, it enters an infinite loop.
|
🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎ To accept the risk, merge this PR and you will not be notified again.
Next stepsWhat is obfuscated code?Obfuscated files are intentionally packed to hide their behavior. This could be a sign of malware. Packages should not obfuscate their code. Consider not using packages with obfuscated code. Take a deeper look at the dependencyTake a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev. Remove the packageIf you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency. Mark a package as acceptable riskTo ignore an alert, reply with a comment starting with
|
src/lib/Cropper.svelte
Outdated
| // this variable is required to prevent the effect into entering an infinite loop (https://github.com/ValentinH/svelte-easy-crop/pull/59#discussion_r1896254867) | ||
| let lastAspect = $state(aspect) | ||
| $effect(() => { | ||
| if (aspect !== lastAspect) { | ||
| lastAspect = aspect | ||
| computeSizes() | ||
| emitCropData() | ||
| } | ||
| }) |
There was a problem hiding this comment.
When do you reach the infinite loop? When changing the aspect prop? With the additional state, I expect this effect to run twice for every time the aspect prop changes. 🤔
There was a problem hiding this comment.
This is what happens with only
$effect(() => {
if (aspect) {
lastAspect = aspect
computeSizes()
emitCropData()
}
})This is the loop warning:
There was a problem hiding this comment.
I think this is because of the lastAspect assignment. Why do we need it? This variable wasn't here before.
There was a problem hiding this comment.
$effect(() => {
if (aspect) {
computeSizes()
emitCropData()
}
})same thing happens without it. Will try to find out why this is happening.
I think this is because of the
lastAspectassignment. Why do we need it? This variable wasn't here before.
I added it there to prevent the loop, it was the only fix I found
There was a problem hiding this comment.
Actually, do you know the use of this effect right here? It seems that the component works as it should without it.
There was a problem hiding this comment.
After testing for some while, it seems that this effect has no use, even when the aspect is dynamically updated.
Refactor code in favor of new svelte 5 runes syntax.
CropperPropstype that describes all the component props.$syntax to$effect()and$state()for runes mode support.