Interactivity API refactor to TypeScript (utils & kebabToCamelCase) #60149

garridinsi · 2024-03-24T12:47:31Z

What?

Why?

To profit from the TypeScript features.

How?

Refactors the js files to ts and adds type annotation

github-actions · 2024-03-24T12:47:45Z

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: garridinsi <garridinsi@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>

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

github-actions · 2024-03-24T12:47:59Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @garridinsi! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

gziolo

Nice improvements adding missing types and JSDoc comments.

packages/interactivity/src/utils.ts

gziolo · 2024-03-28T06:12:37Z

packages/interactivity/src/utils.ts

 	replaceNode = [].concat( replaceNode );
 	const s = replaceNode[ replaceNode.length - 1 ].nextSibling;
-	function insert( c, r ) {
+	function insert( c: any, r: any ) {


Optional task: it would be helpful to unfold what c, r and s mean.

As far as I remember,

c is children.

r is root.

s is sibling.

cc @DAreRodz, correct me if I'm wrong.

It's all from https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c, I think @c4rl0sbr4v0 is probably right.

There is a TypeScripted version in case you need:

https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c?permalink_comment_id=4558744#gistcomment-4558744

gziolo · 2024-03-28T06:14:37Z

packages/interactivity/src/utils.ts

 	_useEffect( () => {
 		let eff = null;
 		let isExecuting = false;
+
+		/**


One line comments can be shortened to:

// Notifies the callback function to execute after the next frame.

gziolo · 2024-03-28T06:23:45Z

I see now that @c4rl0sbr4v0 has an alternative proposal open for adding TypeScript types to the same package but at a larger scale: #58718. So it wil require some coordination 😀

garridinsi · 2024-03-28T08:48:24Z

I see now that @c4rl0sbr4v0 has an alternative proposal open for adding TypeScript types to the same package but at a larger scale: #58718. So it wil require some coordination 😀

Hi! Yes! @c4rl0sbr4v0 made another PR but now is outdated as of some Interactivity API changes. This PR was made on WordCamp Torrelodones 2024 Contributor Day, and @c4rl0sbr4v0 is aware of this, as he was the Core table leader

sirreal · 2024-04-02T16:35:06Z

Thanks for this work! I would like to review this but need a few days to get back to it. I see a few places we can improve and/or simplify things.

garridinsi · 2024-04-02T16:38:59Z

Thanks @sirreal!

Sorry @gziolo for the Review request, was a miss click on my end

cbravobernal · 2024-04-02T18:09:13Z

I see now that @c4rl0sbr4v0 has an alternative proposal open for adding TypeScript types to the same package but at a larger scale: #58718. So it wil require some coordination 😀

Don't worry, I can handle that coordination :-)

sirreal

Thanks for the patience @garridinsi, I've left a number of suggestions and pushed a small change. I'm happy to push some of these myself or discuss further.

packages/interactivity/src/utils.ts

packages/interactivity/src/types.ts

packages/interactivity/src/utils.ts

packages/interactivity/src/utils/kebab-to-camelcase.ts

packages/interactivity/src/utils.ts

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>

cbravobernal · 2024-04-09T15:32:15Z

@sirreal I updated with all the changes you suggested. Feel free to check it again. Thanks!

sirreal · 2024-04-10T12:10:06Z

packages/interactivity/src/utils.ts

+export function withScope<
+	Func extends ( ...args: any[] ) => Generator< any, any >,
+>(
+	func: Func
+): (
+	...args: Parameters< Func >
+) => ReturnType< Func > extends Generator< any, infer Return >
+	? Promise< Return >
+	: never;
+export function withScope< Func extends Function >( func: Func ): Func;
+export function withScope( func ) {


I changed this to be a function so I could use function overloading for the typing here.

See types demo in practice

sirreal

I think this is ready, thanks folks!

garridinsi requested review from luisherranz and DAreRodz as code owners March 24, 2024 12:47

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Mar 24, 2024

cbravobernal self-requested a review March 24, 2024 12:54

cbravobernal added [Packages] Interactivity /packages/interactivity [Type] Code Quality Issues or PRs that relate to code quality labels Mar 24, 2024

gziolo reviewed Mar 28, 2024

View reviewed changes

gziolo requested a review from sirreal March 28, 2024 06:16

garridinsi requested a review from gziolo April 2, 2024 16:37

cbravobernal mentioned this pull request Apr 4, 2024

Interactivity API - Iteration for WP 6.6 #60219

Open

29 tasks

sirreal mentioned this pull request Apr 4, 2024

Interactivity: Return useMemo and useCallback hooks #60474

Merged

sirreal reviewed Apr 4, 2024

View reviewed changes

garridinsi requested review from tellthemachines, spacedmonkey, ObliviousHarmony, t-hamano, desrosj, ellatrix, fluiddot, dcalhoun, adamsilverstein, talldan and swissspidy as code owners April 9, 2024 14:03

cbravobernal removed request for ObliviousHarmony, DAreRodz, kevin940726, tellthemachines, fluiddot, fabiankaegy, cbravobernal and t-hamano April 9, 2024 14:04

cbravobernal force-pushed the feature/interactivity-api-to-ts branch from 55a3a5c to c0b25f0 Compare April 9, 2024 14:06

garridinsi and others added 5 commits April 9, 2024 16:19

Kebab to camelcase utils on TypeScript

d701c3c

Add types for utils, refactor utils.js to ts

5851df8

Fix kebab camelcase convert

9a39432

Remove unnecessary hyphen

536da90

Co-authored-by: Greg Ziółkowski <grzegorz@gziolo.pl>

Remove - from jsdoc

5d556c7

cbravobernal force-pushed the feature/interactivity-api-to-ts branch from c0b25f0 to 5d556c7 Compare April 9, 2024 14:20

Address suggestions

4f7cf98

cbravobernal requested review from sirreal, gziolo and cbravobernal April 9, 2024 14:36

sirreal added 5 commits April 10, 2024 13:31

Expand single character variable names

02a9153

Make flusher properties readonly

22022f3

Improve types and move JSDoc types to TS

05e0423

Fix withScope type

6cec535

Some internal withScope typing

2baa5f5

sirreal reviewed Apr 10, 2024

View reviewed changes

sirreal approved these changes Apr 10, 2024

View reviewed changes

sirreal enabled auto-merge (squash) April 10, 2024 13:19

sirreal merged commit 3b285be into WordPress:trunk Apr 10, 2024
64 checks passed

github-actions bot added this to the Gutenberg 18.2 milestone Apr 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Interactivity API refactor to TypeScript (utils & kebabToCamelCase) #60149

Interactivity API refactor to TypeScript (utils & kebabToCamelCase) #60149

garridinsi commented Mar 24, 2024

github-actions bot commented Mar 24, 2024 •

edited

github-actions bot commented Mar 24, 2024

gziolo left a comment

gziolo Mar 28, 2024

cbravobernal Apr 4, 2024 •

edited

sirreal Apr 4, 2024

cbravobernal Apr 5, 2024

gziolo Mar 28, 2024

gziolo commented Mar 28, 2024 •

edited by sirreal

garridinsi commented Mar 28, 2024 •

edited by sirreal

sirreal commented Apr 2, 2024

garridinsi commented Apr 2, 2024

cbravobernal commented Apr 2, 2024

sirreal left a comment

cbravobernal commented Apr 9, 2024

sirreal Apr 10, 2024

sirreal left a comment

Interactivity API refactor to TypeScript (utils & kebabToCamelCase) #60149

Interactivity API refactor to TypeScript (utils & kebabToCamelCase) #60149

Conversation

garridinsi commented Mar 24, 2024

What?

Why?

How?

github-actions bot commented Mar 24, 2024 • edited

github-actions bot commented Mar 24, 2024

gziolo left a comment

Choose a reason for hiding this comment

gziolo Mar 28, 2024

Choose a reason for hiding this comment

cbravobernal Apr 4, 2024 • edited

Choose a reason for hiding this comment

sirreal Apr 4, 2024

Choose a reason for hiding this comment

cbravobernal Apr 5, 2024

Choose a reason for hiding this comment

gziolo Mar 28, 2024

Choose a reason for hiding this comment

gziolo commented Mar 28, 2024 • edited by sirreal

garridinsi commented Mar 28, 2024 • edited by sirreal

sirreal commented Apr 2, 2024

garridinsi commented Apr 2, 2024

cbravobernal commented Apr 2, 2024

sirreal left a comment

Choose a reason for hiding this comment

cbravobernal commented Apr 9, 2024

sirreal Apr 10, 2024

Choose a reason for hiding this comment

sirreal left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 24, 2024 •

edited

cbravobernal Apr 4, 2024 •

edited

gziolo commented Mar 28, 2024 •

edited by sirreal

garridinsi commented Mar 28, 2024 •

edited by sirreal