Skip to content
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

TypeScript Rollout Tier 5 - Navbar #347

Merged
merged 4 commits into from
Jan 5, 2025

Conversation

kikuomax
Copy link
Collaborator

@kikuomax kikuomax commented Jan 2, 2025

Related issues:

Proposed Changes

  • Migration of navbar and related docs
    • packages/buefy-next/rollup.config.mjs may cause a conflict after merging other PRs in this tier.

Rewrites the navbar components in the `src/components/navbar` folder in
TypeScript.

In `NavbarItem.vue`,
- Introduces a new type `NavbarItemParent` which represents a super type
  of `Navbar`. I decided not to import `Navbar.vue` in this file to
  avoid a potential circular dependency.
- In the `closeMenuRecursive` method, temporarily stores
  `current.$parent` in a local variable `parent` so that repeated
  assertions are unnecessary

In `Navbar.vue`, makes the types of the following props specific:
- `type` → `VueClassAttribute` defined in `src/utils/config.ts`
- `wrapperClass` → `StyleValue` provided by `vue`

Replaces JSDoc-style comments with ordinary comments so that
`@microsoft/api-extractor` won't pick them up for documentation.
Rewrites the specs for the navbar components in the
`src/components/navbar` in TypeScript.

In `NavBarItem.spec.js→ts`, mocks the `closeMenu` method of the
`stubNavBar` component instead of that of `wrapper.vm.$parent` to avoid
nasty type casting.

Applies the `vitest` package:
- Imports the spec building blocks from the `vitest` package
- Replaces `jest` with `vi` provided by the `vitest` package

In the `__snapshots__` subfolder, replaces the spec snapshots produced
by Jest with those by Vitest:
- `NavBar.spec.js.snap` → `NavBar.spec.ts.snap`
- `NavBarBurger.spec.js.snap` → `NavBarBurger.spec.ts.snap`
- `NavBarItem.spec.js.snap` → `NavBarItem.spec.ts.snap`
- `NavbarDropdown.spec.js.snap` → `NavbarDropdown.spec.ts.snap`
`rollup.config.mjs` removes "navbar" from `JS_COMPONENTS`.
Rewrites the documentation for the navbar components in the
`src/pages/components/navbar` in TypeScript. All the changes are
straightforward.

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.
@kikuomax kikuomax requested a review from wesdevpro January 2, 2025 07:52
@kikuomax kikuomax merged commit db58cdc into ntohq:dev Jan 5, 2025
18 checks passed
@kikuomax kikuomax deleted the ts-rollout-tier-5-navbar branch January 5, 2025 01:50
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.

2 participants