Skip to content

feat!: Migrate Back button to Svelte 5 #631

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

Merged
merged 6 commits into from
May 18, 2025

Conversation

AntonioVentilii
Copy link
Contributor

@AntonioVentilii AntonioVentilii commented May 15, 2025

Motivation

Migrating component Back button to Svelte 5.

Changes

  • Migrate events in Back component, using stopPropagation wrapper.
  • Adapt the usage in Header component: it will need to dispatch the old event nnsBack. We will remove it when we migrate it to Svelte 5.

Screenshots

Current tests are sufficient.

@AntonioVentilii AntonioVentilii requested review from a team as code owners May 15, 2025 15:06
@AntonioVentilii AntonioVentilii changed the title feat: Migrate Back button to Svelte 5 feat!: Migrate Back button to Svelte 5 May 15, 2025
AntonioVentilii added a commit that referenced this pull request May 17, 2025
# Motivation

According to [Svelte 5
documentation](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Event-modifiers),
with the migration, the event modifiers are deprecated and should be
replaced by functions that have the same scope. For example, instead of:

```svelte
<button on:click|preventDefault={handler}>...</button>
```

One should do

```svelte
<script>
	function preventDefault(fn) {
		return function (event) {
			event.preventDefault();
			fn.call(this, event);
		};
	}
</script>

<button onclick={once(preventDefault(handler))}>...</button>
```

In this PR we create the `stopPropagation` util, to help with the
migration (it will be used in other PR, like
#631).

# Changes

- Creating a new type for event handlers.
- Creating new util for stop propagation, based on the Svelte
documentation.
- Export new event-modifiers util modules.

# Screenshots

Created new tests, including a mock component.

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
@AntonioVentilii
Copy link
Contributor Author

@yhabib @peterpeterparker ready for another review pls

Copy link
Member

@peterpeterparker peterpeterparker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thx 👍

You can edit the description of the PR, the change "Create util to replicate even..." can notably be removed now.

@yhabib
Copy link
Contributor

yhabib commented May 18, 2025

LGTM , thanks

@AntonioVentilii AntonioVentilii merged commit 2171d99 into main May 18, 2025
13 checks passed
@AntonioVentilii AntonioVentilii deleted the feat/Migrate-Back-button-to-Svelte-5 branch May 18, 2025 07:16
AntonioVentilii added a commit to dfinity/eslint-config-oisy-wallet that referenced this pull request May 19, 2025
# Motivation

We introduce Svelte lint rule
[prefer-const](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-const/),
that warns about unnecessary mutable variables in Svelte components.

In Svelte 5, some variables are defined using runes. By default the
runes excluded by this lint rule are `$props` and `$derived`.

However, we decided (see
[thread](dfinity/gix-components#631 (comment)))
to leave mutable variables when they are defined by `$state`. So we
exclude it from the rule too.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants