TypeScript: Migrate viewport package by yashjawale · Pull Request #71118 · WordPress/gutenberg

yashjawale · 2025-08-07T14:26:12Z

What?

Part of #67691

This PR migrates viewport package to use TypeScript

Why?

Migrating to TypeScript provides improved type-hinting in the editor & helps identify bugs early on

How?

The PR ports the existing component code to use TypeScript syntax & creates types accordingly as needed

Testing Instructions

The existing unit tests for the component should suffice

github-actions · 2025-08-08T08:21:55Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yashjawale <yashjawale@git.wordpress.org>
Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

manzoorwanijk

Is it possible to get rid of some as any assertions.

manzoorwanijk · 2025-08-12T04:55:47Z

 				// we are respecting that as from the static query of the HOC we generate
 				// a hook that calls other hooks always in the same order (because the query never changes).
 				// eslint-disable-next-line react-hooks/rules-of-hooks
-				return [ key, useViewportMatch( breakpointName, operator ) ];
+				return [
+					key,
+					// eslint-disable-next-line react-hooks/rules-of-hooks


Can we please move that comment above inline to the eslint rule?

Sorry missed that, fixed ✅

…act-hooks/rules-of-hooks in with-viewport-match.ts

Copilot

Pull Request Overview

This PR migrates the viewport package from JavaScript to TypeScript as part of a broader TypeScript migration effort. The migration includes creating comprehensive type definitions for viewport queries, breakpoints, and store state management while preserving all existing functionality.

Key changes include:

Added comprehensive TypeScript types for viewport queries, breakpoints, and store state
Converted all JavaScript files to TypeScript with proper type annotations
Added TypeScript configuration and project references

Reviewed Changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/viewport/tsconfig.json	New TypeScript configuration for the viewport package
packages/viewport/src/types.ts	Comprehensive type definitions for viewport functionality
packages/viewport/src/with-viewport-match.ts	Migrated HOC with proper TypeScript types and generics
packages/viewport/src/store/selectors.ts	Converted selectors with typed parameters and return values
packages/viewport/src/store/reducer.ts	Migrated reducer with proper action and state typing
packages/viewport/src/store/actions.ts	Converted actions with typed parameters and return values
packages/viewport/src/listener.ts	Migrated event listener with proper type annotations
packages/viewport/src/index.ts	Updated main entry point with typed constants
packages/viewport/src/if-viewport-matches.ts	Converted HOC with TypeScript generics and type casting
packages/edit-site/tsconfig.json	Added viewport package reference
packages/block-library/tsconfig.json	Added viewport package reference
packages/viewport/README.md	Updated documentation to reflect TypeScript types
docs/reference-guides/data/data-core-viewport.md	Updated documentation paths and type references

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-04T00:36:02Z

+const ifViewportMatches = ( query: ViewportQuery ) =>
 	createHigherOrderComponent(
-		compose( [
+		( compose as any )( [


Using as any type assertion defeats the purpose of TypeScript's type safety. Consider importing compose with proper types from @wordpress/compose or defining a more specific type for this use case.

Suggested change

( compose as any )( [

compose( [

We can live with it for now.

manzoorwanijk

This looks good to me but I would prefer other code owners to have a look as well

manzoorwanijk · 2025-09-04T00:31:17Z

-	const queries = Object.entries( breakpoints ).flatMap(
-		( [ name, width ] ) => {
-			return operatorEntries.map( ( [ operator, condition ] ) => {
+	const queries: Array< [ string, MediaQueryList ] > = Object.entries(


It doesn't hurt but you don't need the type annotation here. TS can infer it easily.

Updated ✅

manzoorwanijk · 2025-09-04T00:33:56Z

+const ifViewportMatches = ( query: ViewportQuery ) =>
 	createHigherOrderComponent(
-		compose( [
+		( compose as any )( [


I suppose it's not easy to get rid of this assertion.

manzoorwanijk · 2025-09-04T00:36:39Z

+		{ "path": "../data" },
+		{ "path": "../element" }
+	],
+	"include": [ "src/**/*" ]


We don't need wildcard here.

Suggested change

"include": [ "src/**/*" ]

"include": [ "src" ]

manzoorwanijk · 2025-09-04T00:40:52Z

+const ifViewportMatches = ( query: ViewportQuery ) =>
 	createHigherOrderComponent(
-		compose( [
+		( compose as any )( [


We can live with it for now.

Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com>

manzoorwanijk

This is close. Let us clean this up a bit.

Copilot

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-09T08:58:17Z

+ *
+ * @return Higher-order component.
+ */
+const withViewportMatch = ( queries: ViewportQueries ) => {


The current generic typing makes the returned HOC accept the same props as the wrapped component (T), even though the HOC injects additional boolean props derived from queries. To model this correctly for consumers, consider typing withViewportMatch so the wrapped component expects OwnProps & InjectedProps, while the returned component expects only OwnProps (i.e., omit/strip the injected keys from the public props type).

This makes sense but is not a big deal for now, but will be good to update it though.

Copilot · 2026-04-09T08:58:18Z

+	return createHigherOrderComponent(
+		< T extends Record< string, unknown > >(
+			WrappedComponent: ComponentType< T >
+		) => {
+			const WrappedWithViewport = ( props: T ) => {


The current generic typing makes the returned HOC accept the same props as the wrapped component (T), even though the HOC injects additional boolean props derived from queries. To model this correctly for consumers, consider typing withViewportMatch so the wrapped component expects OwnProps & InjectedProps, while the returned component expects only OwnProps (i.e., omit/strip the injected keys from the public props type).

Same about this - a nice to have.

Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com>

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

manzoorwanijk

One last bit - we need to add types field to package.json and also to exports['.'] field in it.

manzoorwanijk

This looks good now. Thanks

yashjawale added 3 commits August 7, 2025 19:54

refactor: migrate viewport package to typescript & regenerate docs

986d99b

Merge branch 'trunk' into refactor/ts-migration-viewport-package

0310766

Remove duplicate TypeScript test files

aa7f971

yashjawale marked this pull request as ready for review August 8, 2025 08:21

yashjawale requested review from ajitbohra, fabiankaegy, juanmaguitar and ndiego as code owners August 8, 2025 08:21

yashjawale changed the title ~~[WIP] TypeScript: Migrate viewport package~~ TypeScript: Migrate viewport package Aug 8, 2025

im3dabasia added [Type] Code Quality Issues or PRs that relate to code quality [Package] Viewport /packages/viewport labels Aug 8, 2025

manzoorwanijk mentioned this pull request Aug 11, 2025

Convert packages to TypeScript #67691

Open

40 tasks

manzoorwanijk reviewed Aug 11, 2025

View reviewed changes

refactor: enhance type safety in if-viewport-match & with-viewport-match

4cd00a6

manzoorwanijk reviewed Aug 12, 2025

View reviewed changes

yashjawale added 2 commits August 12, 2025 12:32

fix: position for explanation comment for eslint-disable-next-line re…

cf6752a

…act-hooks/rules-of-hooks in with-viewport-match.ts

Merge branch 'trunk' into refactor/ts-migration-viewport-package

8e2f72f

yashjawale requested a review from manzoorwanijk August 13, 2025 06:31

manzoorwanijk requested a review from Copilot September 4, 2025 00:35

Copilot AI reviewed Sep 4, 2025

View reviewed changes

manzoorwanijk reviewed Sep 4, 2025

View reviewed changes

yashjawale and others added 4 commits September 4, 2025 14:21

fix: remove wildcard from tsconfig

a5d62e7

Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com>

refactor: simplify queries declaration in addDimensionsEventListener

f3ed325

Merge branch 'trunk' into refactor/ts-migration-viewport-package

c3bfdc2

Merge branch 'trunk' into refactor/ts-migration-viewport-package

35d285d

github-actions Bot added [Package] Block library /packages/block-library [Package] Edit Site /packages/edit-site labels Apr 9, 2026

manzoorwanijk requested a review from Copilot April 9, 2026 08:50

manzoorwanijk requested changes Apr 9, 2026

View reviewed changes

Comment thread packages/viewport/tsconfig.json Outdated

Copilot AI reviewed Apr 9, 2026

View reviewed changes

Update packages/viewport/tsconfig.json

3511c8f

Co-authored-by: Manzoor Wani <manzoorwani.jk@gmail.com>

Copilot started reviewing on behalf of manzoorwanijk April 9, 2026 09:29 View session

yashjawale and others added 2 commits April 9, 2026 15:00

Merge branch 'trunk' into refactor/ts-migration-viewport-package

f443fba

Update packages/viewport/src/types.ts

a2086d4

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

manzoorwanijk requested changes Apr 9, 2026

View reviewed changes

fix: update package.json to use types

debcde2

manzoorwanijk approved these changes Apr 9, 2026

View reviewed changes

manzoorwanijk merged commit d77101a into WordPress:trunk Apr 9, 2026
40 checks passed

github-actions Bot added this to the Gutenberg 23.0 milestone Apr 9, 2026

Conversation

yashjawale commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Uh oh!

github-actions Bot commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

manzoorwanijk left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

manzoorwanijk left a comment

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

yashjawale commented Aug 7, 2025 •

edited

Loading

github-actions Bot commented Aug 8, 2025 •

edited

Loading