TypeScript migration of @emotion/utils

[rjdestigter]

What:
Migrating @emotion/utils from Javascript + Flow to TypeScript.

This was an initial stab at migrating a package to TypeScript. I'm primarily running into problems with linting. I had to add a line to .eslintignore due to ESLint not understanding optional properties on types and interfaces. This first commit also used --no-verify as the commit hook script also failed for similar reasons.

I kept the old declaration for now to use in the test.ts file to make sure that the auto generated function signatures matched the older declaration.

Build and tests do succeed on this branch atm.

Todo:

• Figure out linting
• Figure out proper TypeScript version?
• Commit hook linting fails
• Remove old declaration files
• Is the TSLint file still relevant? Should the repo's ESLint configuration be updated first maybe?

Why:
#2358

How:

• Added the latest TypeScript as a dependency to @emotion/utils
• Moved existing tsconfig.json to root of package
• Moved *.js files to *.ts and removed references to Flow

Checklist:

More todos:

• Documentation N/A?
• Tests (They are running atm)
• Code complete
• Changeset

[changeset-bot]

🦋 Changeset detected

Latest commit: 3c57837

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@emotion/utils	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1a93635:

Sandbox	Source
Emotion	Configuration

[Andarist]

Thank you for starting this! I've already played a little bit with your branch locally and trying to wrestle the config-related stuff. It might take me some days - since I have to pause working on this and won't be available much in the following days but I will get back to this ASAP and get this through the finish line!

[michaeljaltamirano]

Would it be more consistent to keep the type literal true here?

[MattSchiller]

As a casual consumer of this repo, I love seeing this work starting! Left a comment and gonna see what I can do to contribute here, too 🙇

[MattSchiller]

Is this even actually possible for serialized to be undefined here? I would've expected if (cache.inserted[serialized.name] === undefined) { to error from accessing undefined.name if so.

If that's actually possible, would it make sense to introduce optional chaining into the if statement's syntax?

[michaeljaltamirano]

I think it is current-specific typing in advance because current.next is possibly undefined and we're checking against it as part of the do/while:

emotion/packages/utils/src/index.ts

Lines 46 to 58 in 3f66787

	let current: SerializedStyles | undefined = serialized
	do {
	let maybeStyles = cache.insert(
	serialized === current ? `.${className}` : '',
	current,
	cache.sheet,
	true
	)
	if (!isBrowser && maybeStyles !== undefined) {
	stylesForSSR += maybeStyles
	}
	current = current.next
	} while (current !== undefined)

[MattSchiller]

Ah, gotcha, that makes sense. I haven't seen a while loop like this in a while :pun-dog: so it threw me. Thanks for the quick update!

[Andarist]

@rjdestigter ive merged in TS tooling setup into ts-migration branch. If you would rebase on top of that it would be sweat. Let me know if you are still interested in working on that