feat!: support Svelte 5 #51

kvangrae · 2024-12-10T00:52:07Z

This pull request provides support for Svelte 5 runes mode. It is not backwards compatible for Svelte 4.

Summary of changes:

Dependencies have been upgraded to support Svelte 5.
Compiler has been set to Runes mode.
Code updated to use runes.

Closes #48

niemyjski · 2024-12-10T01:35:15Z

src/Time.svelte


  import { dayjs } from "./dayjs";
  import { onMount } from "svelte";

  /** @type {undefined | NodeJS.Timeout} */
  let interval = undefined;
+  let liveUpdate = $state(0);

  const DEFAULT_INTERVAL = 60 * 1_000;

  onMount(() => {


Seems like this should be called onDestroy https://svelte.dev/docs/svelte/lifecycle-hooks

Actually would be better to move it into $effect

$effect(() => { // This will be recreated whenever `milliseconds` changes const interval = setInterval(() => { count += 1; }, milliseconds); return () => { // if a callback is provided, it will run // a) immediately before the effect re-runs // b) when the component is destroyed clearInterval(interval); }; }); ```

good catch. that should be easy. i'll have a look tomorrow.

i have updated the code to return the clearInterval in $effect return statement.

niemyjski

Looks good, I think we could clean up the onmount and use the function return of $effect

niemyjski · 2024-12-10T01:37:45Z

cc @metonym

kvangrae · 2024-12-10T01:54:19Z

src/Time.svelte


  import { dayjs } from "./dayjs";
  import { onMount } from "svelte";

  /** @type {undefined | NodeJS.Timeout} */
  let interval = undefined;
+  let liveUpdate = $state(0);

  const DEFAULT_INTERVAL = 60 * 1_000;

  onMount(() => {


good catch. that should be easy. i'll have a look tomorrow.

kvangrae · 2024-12-10T01:55:03Z

src/Time.svelte

+  let formatted = $derived.by(() => {
+    liveUpdate; // no-op. this is a dependency trigger for live updates
+    return relative ? dayjs(timestamp).from() : dayjs(timestamp).format(format);
+  });


I don't think that we need the liveUpdate $state rune b/c if any of the props change, formatted should get updated (i think...). it is something i can test. if not, this would simplify some things.

i have removed liveUpdate as it does not have any adverse impacts on live updates.

niemyjski · 2024-12-11T01:03:10Z

src/Time.svelte

+  $effect(() => {
+    /** @type {undefined | NodeJS.Timeout} */
+    let interval;
+    if (relative && live !== false) {
+      interval = setInterval(
+        () => {
+          formatted = dayjs(timestamp).from();
+        },
+        Math.abs(typeof live === "number" ? live : DEFAULT_INTERVAL),
+      );
+    }
    return () => clearInterval(interval);
  });


Wait how does this even work. If this is setting formatted, but formatted is derived. Guessing this one takes over the derived instance.

good call. it does work, but i agree, it doesn't makes sense for me to update a derived value. i'm thinking formatted should be a $state instead of a $derived. if that makes sense, let me know and i will update.

but, in this instance, the derived will only be updated if relative, live, or timestamp ever change, which, most likely, they won't change.

Either is fine, I think that if we update it the initial state needs to be set in the effect?

i found that in $effect any values that are read asynchronously, for example in a setInterval, will not be tracked.

https://svelte.dev/docs/svelte/$effect#Understanding-dependencies

also, it doesn't look like it is recommended to set the initial state inside of the $effect. my intellij complains with the following:

with what i found out above, i'm thinking to either keep it the way it is or change formatted to use $state instead of $derived. let me know your thoughts.

Probably using state would be good, whatever keeps it simple and easy to understand

niemyjski

Looks good, left one comment.

niemyjski · 2024-12-13T16:08:18Z

@metonym can we get a new release and this merged? Is there anything else that should be updated like Dayjs?

metonym · 2024-12-15T18:45:35Z

Nice work, thanks both.

Will review – I think one thing that'll need updating is the demo, for which it breaks entirely for Svelte 5. It could be a nice opportunity to switch to Vite instead of Rollup.

niemyjski · 2024-12-31T03:20:24Z

@metonym can we get this merged and that gets followed up on?

kvangrae · 2025-01-10T23:38:20Z

Nice work, thanks both.

Will review – I think one thing that'll need updating is the demo, for which it breaks entirely for Svelte 5. It could be a nice opportunity to switch to Vite instead of Rollup.

I've updated and ran the examples. I could successfully run and verify sveltekit and vite. I ran into issues with the following examples:

rollup - npm run dev I couldn't find what port it was running on to verify. I was expecting it to be running on default port 5000.
webpack - npm run dev complains "Module not found: Error: Package path . is not exported from package". I'm not good with webpack and wasn't sure exactly how to resolve it.

Any help would be appreciated.

metonym · 2025-01-11T00:52:13Z

package.json

+    ".": {
+      "svelte": "./src/index.js"
+    }
+  },


This exports condition is not needed, as it's dynamically generated.

removed. i originally added it due to a compiler warning

niemyjski · 2025-01-23T17:09:25Z

@metonym can we get this merged?

metonym · 2025-01-23T17:23:03Z

@niemyjski See my comment: #48 (comment)

metonym · 2025-01-23T18:12:04Z

I'm reviewing this now, and pushing my changes:

Fix some "self-closing" tag warnings emitted in the tests: 7470d8c
SvelteComponentTyped is also deprecated. I've followed the migration guide and replaced it with Component cdb585b

My todo:

Make sure demo can run
Make sure each example works with Svelte 5

… a svelte field in their package.json but no exports condition for svelte. svelte-time@0.9.0 Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

metonym · 2025-01-23T20:11:48Z

Another change b40a4bf

I've updated the Svelte action to use $effect as recommended by the docs:

Prior to the $effect rune, actions could return an object with update and destroy methods, where update would be called with the latest value of the argument if it changed. Using effects is preferred.

The file extension was updated to svelte.js because it uses a Rune. No changes in the barrel export or usage.

metonym

I've also got the demo working again using Astro, as another affirmation that the established examples work with Svelte 5 + Runes mode.

I went through each example, linking it locally and making sure it could run. I wasn't able to quite link the Webpack 5 example, so I ended up testing it manually via copy/paste.

I also cut a stable v1 release on the existing master branch. This PR will be a v2.

I also updated the README in this PR, making an explicit note that going v2+ is Svelte 5 only, while Svelte 3/4 should use v1.

metonym · 2025-01-23T21:14:48Z

@kvangrae @niemyjski Thanks for your patience and all the work that went into this!

Released in v2.0.0

After release, I've done the following:

New demo site is live: https://metonym.github.io/svelte-time/
Updated REPL (Runes-only): https://svelte.dev/playground/e2a27786f93d42878388de482de403c9?version=5.19.2
Updated the examples/ to use v2.0.0

niemyjski · 2025-01-24T17:55:41Z

Thank you!!!

kvangrae mentioned this pull request Dec 10, 2024

Cannot use $$restProps in runes mode (Svelte 5) #48

Closed

niemyjski reviewed Dec 10, 2024

View reviewed changes

niemyjski approved these changes Dec 10, 2024

View reviewed changes

kvangrae commented Dec 10, 2024

View reviewed changes

niemyjski reviewed Dec 11, 2024

View reviewed changes

niemyjski approved these changes Dec 11, 2024

View reviewed changes

niemyjski approved these changes Dec 13, 2024

View reviewed changes

metonym reviewed Jan 11, 2025

View reviewed changes

metonym mentioned this pull request Jan 23, 2025

chore(examples): include CSS plugin in Rollup set-up #52

Merged

Vangraefschepe Kurt Colin kcvangr and others added 13 commits January 23, 2025 10:37

update deps to svelte 5 and vite 4

aa0aa56

migrate to svelte 5 runes mode

915d2ac

update CHANGELOG

a1b078b

move clearInterval into the return of $effect

858e3a0

remove unnecessary liveUpdate state variable

a5173c8

use $state instead of $derived

75b3a28

remove exports as it's dynamically generated

c8a481e

resolve Svelte warnings in tests

fca3b05

Use Component instead of deprecated SvelteComponentTyped

a5368cd

Run bun format

9c1bb35

Fix rollup circular function to use warning.ids

583b2da

migrate to svelte 5 runes mode

d92dadd

Vangraefschepe Kurt Colin kcvangr added 5 commits January 23, 2025 10:42

move clearInterval into the return of $effect

7f9413b

remove unnecessary liveUpdate state variable

e8a1989

use $state instead of $derived

1046a12

remove exports as it's dynamically generated

12f1ce3

metonym force-pushed the runes-mode branch from e55b940 to 12f1ce3 Compare January 23, 2025 18:44

svelteTime action uses $effect

b40a4bf

Revamp demo

1f2698d

metonym force-pushed the runes-mode branch from bfedb98 to 1f2698d Compare January 23, 2025 20:36

Update README.md

9a489cc

metonym approved these changes Jan 23, 2025

View reviewed changes

metonym changed the title ~~Support Svelte 5 Runes mode~~ feat!: support Svelte 5 Jan 23, 2025

metonym merged commit f986943 into metonym:master Jan 23, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat!: support Svelte 5 #51

feat!: support Svelte 5 #51

kvangrae commented Dec 10, 2024

niemyjski Dec 10, 2024

niemyjski Dec 10, 2024

kvangrae Dec 10, 2024

kvangrae Dec 10, 2024

niemyjski left a comment

niemyjski commented Dec 10, 2024

kvangrae Dec 10, 2024

kvangrae Dec 10, 2024

kvangrae Dec 10, 2024

niemyjski Dec 11, 2024 •

edited

Loading

kvangrae Dec 11, 2024

niemyjski Dec 11, 2024

kvangrae Dec 11, 2024

kvangrae Dec 11, 2024

kvangrae Dec 11, 2024 •

edited

Loading

niemyjski Dec 12, 2024

kvangrae Dec 13, 2024

niemyjski left a comment

niemyjski commented Dec 13, 2024

metonym commented Dec 15, 2024

niemyjski commented Dec 31, 2024

kvangrae commented Jan 10, 2025

metonym Jan 11, 2025

kvangrae Jan 14, 2025

niemyjski commented Jan 23, 2025

metonym commented Jan 23, 2025

metonym commented Jan 23, 2025

metonym commented Jan 23, 2025

metonym left a comment •

edited

Loading

metonym commented Jan 23, 2025

niemyjski commented Jan 24, 2025

feat!: support Svelte 5 #51

feat!: support Svelte 5 #51

Conversation

kvangrae commented Dec 10, 2024

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

niemyjski left a comment

Choose a reason for hiding this comment

niemyjski commented Dec 10, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

niemyjski Dec 11, 2024 • edited Loading

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

kvangrae Dec 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

niemyjski left a comment

Choose a reason for hiding this comment

niemyjski commented Dec 13, 2024

metonym commented Dec 15, 2024

niemyjski commented Dec 31, 2024

kvangrae commented Jan 10, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

niemyjski commented Jan 23, 2025

metonym commented Jan 23, 2025

metonym commented Jan 23, 2025

metonym commented Jan 23, 2025

metonym left a comment • edited Loading

Choose a reason for hiding this comment

metonym commented Jan 23, 2025

niemyjski commented Jan 24, 2025

niemyjski Dec 11, 2024 •

edited

Loading

kvangrae Dec 11, 2024 •

edited

Loading

metonym left a comment •

edited

Loading