Support Svelte 5 Runes mode #51
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,6 +6,8 @@ | |
| %sveltekit.head% | ||
| </head> | ||
| <body> | ||
| <div style="display: contents"> | ||
| %sveltekit.body% | ||
| </div> | ||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,69 @@ | ||
| <script> | ||
| // @ts-check | ||
|
|
||
| const { | ||
| /** | ||
| * Original timestamp | ||
| * @type {import("dayjs").ConfigType} | ||
| */ | ||
| timestamp = new Date().toISOString(), | ||
|
|
||
| /** | ||
| * Timestamp format for display. | ||
| * It's also used as a title in the `relative` mode | ||
| * @type {import("dayjs").OptionType} | ||
| * @example "YYYY-MM-DD" | ||
| */ | ||
| format = "MMM DD, YYYY", | ||
|
|
||
| /** | ||
| * Set to `true` to display the relative time from the provided `timestamp`. | ||
| * The value is displayed in a human-readable, relative format (e.g., "4 days ago", "Last week") | ||
| * @type {boolean} | ||
| */ | ||
| relative = false, | ||
|
|
||
| /** | ||
| * Set to `true` to update the relative time at 60 second interval. | ||
| * Pass in a number (ms) to specify the interval length | ||
| * @type {boolean | number} | ||
| */ | ||
| live = false, | ||
| ...rest | ||
| } = $props(); | ||
|
|
||
| import { dayjs } from "./dayjs"; | ||
|
|
||
| const DEFAULT_INTERVAL = 60 * 1_000; | ||
|
|
||
| $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); | ||
| }); | ||
|
Comment on lines
+39
to
51
There was a problem hiding this comment. Wait how does this even work. If this is setting formatted, but formatted is derived. Guessing this one takes over the derived instance. There was a problem hiding this comment. good call. it does work, but i agree, it doesn't makes sense for me to update a derived value. i'm thinking but, in this instance, the derived will only be updated if There was a problem hiding this comment. Either is fine, I think that if we update it the initial state needs to be set in the effect? There was a problem hiding this comment. i found that in https://svelte.dev/docs/svelte/$effect#Understanding-dependencies There was a problem hiding this comment. also, it doesn't look like it is recommended to set the initial state inside of the There was a problem hiding this comment. with what i found out above, i'm thinking to either keep it the way it is or change There was a problem hiding this comment. Probably using state would be good, whatever keeps it simple and easy to understand |
||
|
|
||
| /** | ||
| * Formatted timestamp. | ||
| * Result of invoking `dayjs().format()` | ||
| * @type {string} | ||
| */ | ||
| let formatted = $state( | ||
| relative ? dayjs(timestamp).from() : dayjs(timestamp).format(format) | ||
| ); | ||
|
|
||
| const title = $derived( | ||
| relative ? dayjs(timestamp).format(format) : undefined, | ||
| ); | ||
| </script> | ||
|
|
||
| <time {title} {...rest} datetime={timestamp}> | ||
| {formatted} | ||
| </time> | ||
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.
This
exportscondition is not needed, as it's dynamically generated.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.
removed. i originally added it due to a compiler warning