TypeScript Rollout Tier 5 - Toast #349
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Rewrites `Toast` in TypeScript:
- Defines a new type `ToastProps` that represents the props type of
`Toast`. `ToastOpenParams` extends this (see below).
Trivial changes:
- Adds `lang="ts"` to the script section
- Wraps the entire component definition with `defineComponent` API
- Rewrites `component/toast/index.js` in TypeScript:
- Defines a new type `ToastOpenParams` that represents the parameters
type for `open`. `ToastOpenParams` accepts `VNode`(s) as `message`
in addition to `string`(s).
- Defines a new type `ToastProgrammaticInstance` that has the minimal
interface of a programmatically opened `Toast` instance
The following changes might not be trivial:
- Renders `VNode` and an array of `VNode`(s) or `string`(s) through
the slot. It used to render an array through the slot, but a single
`VNode` also had to be rendered in the slot, otherwise `v-html`
binding would try to stringify it.
- Removes `params.parent` because it no longer has any effect
- Replaces the `merge` helper function with spread syntax to provide
the default value for `position`
Trivial changes:
- Replaces the extension: `.js` → `.ts`
- Gives minimal types
- Rewrites `Toast.spec.js` in TypeScript:
- Replaces `jest` API calls with those of `vi`: `fn`, `uesFakeTimers`,
`useRealTimers`, and `advanceTimersByTime`
- Replaces the extension: `.js` → `.ts`
- Imports necessary functions and object from `vitest`
- Gives minimal types
Replaces the spec snapshot `Toast.spec.js.snap` with the one generated
by `vitest` → `Toast.spec.ts.snap`.
Binds `$buefy.toast` to `ToastProgrammatic`.
`rollup.config.mjs` removes "toast" from `JS_COMPONENTS`.
Rewrites example components in `pages/components/toast` in TypeScript. Most of the changes are straightforward. In `examples/ExSimple.vue`: - Extraction of the type of a programmatically opened toast instance might look tricky (`ToastProgrammaticInstance`) In `Toast.vue`: - Separates the code snippet to an external file `outside-vue-instance.js` because dev build might treat it as the actual code and end up with an unresolved module error Here is a TypeScript migration tip: - Explicitly import and register components so that they are type checked. No type-checking is performed for globally registered components.
wesdevpro
previously approved these changes
Jan 4, 2025
wesdevpro
approved these changes
Jan 6, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related issues:
Proposed Changes
toastand related docspackages/buefy-next/rollup.config.mjs, andpackages/buefy-next/src/utils/vue-augmentation.tsmay cause conflicts after merging other PRs in this tier.