TypeScript Rollout Tier 9 - Table #377
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 the table components in the `src/components/table` folder in TypeScript. Introduces a new file `types.ts` which defines types shared among the table components. Here are some important types: - `ITableColumn`: Interface of table columns. The `TableColumn` component and the return value of the `mockTableColumn` function satisfy this interface. The "I" prefix is an exception for this type to avoid name conflict with the `TableColumn` component. - `TableColumnProps`: Properties of table columns. Each item in the `columns` prop of `Table` must satisfy this interface. A subset of `ITableColumn`, where all the fields are optional. - `TableRow`: Type of a table row. An alias to `any`. I wanted to use generics but was not able to figure out how to enable generics with the Options API. - `StyleValue`: Type for `style` attribute values. Vue has a type of the same name, which uses recursion; i.e., the type definition includes itself. I decided to introduce an "inferior" version of Vue's `StyleValue`, because Vue's `StyleValue` caused infinite recursion erros in type inference. Reference: https://github.com/vuejs/core/blob/d298c431cc422b53cf4e9c69bf1daf926c33b6e0/packages/runtime-dom/src/jsx.ts#L247-L253 - `TableColumnSlotProps`: Properties that a slot in a column receives - `ModifierKeys`: Interface that indicates whether modifier keys are pressed at an UI event. This is strongly tied to UI but directly embedded in the `sort` method of the `Table` component. In `Table.vue`: - Fixes a bug that the `order` field of an item in `sortMultipleDataLocal` was initialized with the value of a non-existent field `column.isAsc`. Replaces it with `this.isAsc`. This changes the initial value of the `order` field of an item in `sortMultipleDataLocal`: `undefined` → `"asc"` - `currentSortColumn` is no longer initialized with a blank object (`{}`) but with a new constant object `BLANK_COLUMN`, because a blank object won't satisfy `ITableColumn`. Replaces the test that determines if `currentSortColumn` is set. It used to check the number of keys in `currentSortColumn` but now checks its identity with `BLANK_COLUMN`. - Removes the `_isTable` data field, because it is no longer used In `mockTableColumn.js`: - Reorders some fields so that public fields come first - Removes the `parent`, `$table`, and `_isVue` fields, because they are not used - Removes the `$on`, `$once`, `$off`, and `$emit` methods, because they are no longer used by `SlotComponent`. `tiny-emitter` becomes unnecessary due to this change. - Removes the `hasDefaultSlot` method, because it is not used - Replaces the extension: ".js" → ".ts" In `index.js`: - Newly exports the following types because they found useful in the documentation examples: - `ITableColumn` - `ModifierKeys` - `TableColumnOrder` - `TableColumnDragEvent` - `TableRow` - `RableRowDragEvent` - Makes `Plugin.install` method accept `App` - Replaces the extension: ".js" → ".ts" Common trivial changes among the .vue files: - Adds `lang="ts"` to the `<script>` section - Wraps the entire component definition with a `defineComponent` call - Explicitly imports and registers Buefy components to enable type checking. Because no type checking is performed on globally registered components. Common trivial changes throughout the code: - Overuses non-null assertion operators (!) to suppress type errors while maintaining the original behavior - Removes unused variables
Rewrites the specs in the `src/components/table` folder in TypeScript. In `Table.spec.ts`: - Imports `@testing-library/jest-dom/vitest` instead of `@testing-library/jest-dom` to enable the `toBeEmptyDOMElement` assertion on Vitest - Changes the expected values of some `order` fields, because the default initial values of them changed `undefined` → `"asc"` In `TableColumn.spec.ts`: - Wraps the test component definition with a `defineComponent` call - Changes the order of the options given to `defineComponent` to address an ESLint error In `TableMobileSort.spec.ts`: - Introduces a new constant `DUMMY_COLUMN` and replaces the fixture `"val"` with it so that columns satisfy `ITableColumn` Common trivial changes throughout the code: - Imports building blocks for tests from `vitest` - Replaces `jest` with `vi` - Appends the ".vue" extensions to the import paths of Buefy components - Replaces the extension: ".js" → ".ts" Replaces the snapshots generated by Jest with those generated by Vitest in the `__snapshots__` folder: - `Table.spec.js.snap` → `Table.spec.ts.snap` - `TableMobileSort.spec.js.snap` → `TableMobileSort.spec.ts.snap`
`rollup.config.mjs` removes "table" from `JS_COMPONENTS`.
Rewrites the documentation for table in the folder `src/pages/components/table` in TypeScript. The following examples produces type errors regarding the `TabItem` component: - `examples/ExCheckable.vue` - `examples/ExSelection.vue` These errors persist until we migrate the `tabs` component group. In `examples/ExAsyncData.vue`: - Introduces a new interface `Record` which represents each record in the table data 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 This PR is ready for your review! |
wesdevpro
approved these changes
Jan 12, 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
tablepackages/buefy-next/rollup.config.mjswill likely cause a conflict after merging the other PRs in this tier.