TypeScript Rollout Tier 9 - Colorpicker & color #374
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 `src/utils/color.js` in TypeScript. Unrolls the loops to dynamically define the following Color components as pairs of `get` and `set` methods: - `red` - `green` - `blue` - `alpha` - `hue` - `saturation` - `lightness` My attempt to augment the `Color` class with an ambient module did not work when all the Buefy types were bundled in a single `.dts` file; i.e., it won't work in users' environments. Replaces `get [Symbol.toString]` with `get [Symbol.toStringTag]` to suppress a type error, although, I am not 100% confident about this solutation because I was not able to identify the intention of the original code. `color.ts` exports color model types: `Hsl`, `Hsla`, `Rgb`, and `Rgba`
Rewrites `src/utils/color.spec.js→ts` in TypeScript. Imports the spec building blocks from the `vitest` package.
Rewrites the colorpicker components in the `src/components/colorpicker` in TypeScript. In `Colorpicker.vue`: - The `modelValue` prop, and its emitted value on "update:modelValue" have different types; `string | Rgb` vs `Color`. A user of `Colorpicker` may specify a string or an `Rgb` object to the prop unless `v-model` is necessary. - Introduces a new type `IColorpicker` which represents a partial interface of `Colorpicker` to avoid circular references between `Colorpicker`, and `ColorFormatter` or `ColorParser` - Introduces new types: - `ColorFormatter`: type of the `colorFormatter` prop - `ColorParser`: type of the `colorParser` prop - No longer imports `Icon` and `Select`, because they are not used - I found the following methods were not used but decided to leave them until we come back to deal with the `open-on-focus` and `close-on-click` props: - `handleOnFocus` - `toggle`: commented out because it contains an unfixable type error - `onInputClick` - `keyPress` - `togglePicker`: only called in `handleOnFocus` and `keyPress` In `ColorpickerHSLRepresentationSquare.vue`, fixes a bug that the `precision` custom template literal function tried to round `values` instead of `values[i]`, while fixing the type error In `ColorpickerHSLRepresentationSquare/Triangle.vue, the `value` prop, and its emitted value on "input" have different types; `Hsl` vs `Color` In `Colorpicker.vue`, and `ColorpickerAlphaSlider.vue`: - Directly names Buefy components when they are registered so that they are type-checked. Note no type-checking is performed for components indirectly registered using the `name` field. Replaces JSDoc-style comments with ordinary ones so that `@microsoft/api-extractor` won't pick them up for documentation.
Rewrites the specs for the colorpicker components in the `src/components/colorpicker` folder in TypeScript. All the changes are straightforward. Imports the spec building blocks from the `vitest` package. In the `__snapshots__` folder, replaces the snapshots produced by Jest with those by Vitest.
`rollup.config.mjs` removes "colorpicker" from `JS_COMPONENTS`.
Rewrites the documentation for the colorpicker components in the `src/pages/components/colorpicker` folder 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.
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
utils/colorcolorpickermigration, otherwise, we will get a weird build error.colorpickerpackages/buefy-next/rollup.config.mjswill likely cause a conflict after merging the other PRs in this tier.