Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeScript migration of @emotion/utils #2359

Merged
merged 4 commits into from
Aug 15, 2021
Merged

TypeScript migration of @emotion/utils #2359

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3f66787
feat(ts-utils): Initial migration of utils
rjdestigter Apr 26, 2021
d9ef0ff
Merge branch 'ts-migration' into migrate-utils-typescript
Andarist Aug 15, 2021
1a93635
Small tweaks
Andarist Aug 15, 2021
3c57837
More small tweaks
Andarist Aug 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ node_modules/
stylis.min.js
/demo/dist
/packages/site/build
flow-typed/
flow-typed/
/packages/utils/**/*.ts
4 changes: 3 additions & 1 deletion packages/utils/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"./dist/emotion-utils.cjs.js": "./dist/emotion-utils.browser.cjs.js",
"./dist/emotion-utils.esm.js": "./dist/emotion-utils.browser.esm.js"
},
"types": "types/index.d.ts",
"license": "MIT",
"scripts": {
"test:typescript": "dtslint types"
Expand All @@ -24,5 +23,8 @@
],
"devDependencies": {
"dtslint": "^0.3.0"
},
"dependencies": {
"typescript": "^4.2.4"
}
}
5 changes: 2 additions & 3 deletions packages/utils/src/index.js → packages/utils/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// @flow
import type { RegisteredCache, EmotionCache, SerializedStyles } from './types'

const isBrowser = typeof document !== 'undefined'
export const isBrowser = typeof document !== 'undefined'

export function getRegisteredStyles(
registered: RegisteredCache,
Expand Down Expand Up @@ -44,7 +43,7 @@ export const insertStyles = (
}
if (cache.inserted[serialized.name] === undefined) {
let stylesForSSR = ''
let current = serialized
let current: SerializedStyles | undefined = serialized
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

do {
let maybeStyles = cache.insert(
serialized === current ? `.${className}` : '',
Expand Down
9 changes: 4 additions & 5 deletions packages/utils/src/types.js → packages/utils/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
// @flow
import type { StyleSheet } from '@emotion/sheet'

export type RegisteredCache = { [string]: string }
export type RegisteredCache = Record<string, string>

export type Interpolation = any

export type SerializedStyles = {|
export type SerializedStyles = {
name: string,
styles: string,
map?: string,
next?: SerializedStyles
|}
}

export type EmotionCache = {
inserted: { [string]: string | true },
inserted: Record<string, string | boolean>,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

registered: RegisteredCache,
sheet: StyleSheet,
key: string,
Expand Down
5 changes: 3 additions & 2 deletions packages/utils/types/tsconfig.json → packages/utils/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"es6",
"dom"
],
"declaration": true,
"module": "commonjs",
"noEmit": true,
"noImplicitAny": true,
Expand All @@ -21,7 +22,7 @@
"types": []
},
"include": [
"./*.ts",
"./*.tsx"
"./src/*.ts",
"./src/*.tsx"
]
}
6 changes: 4 additions & 2 deletions packages/utils/types/index.d.ts → packages/utils/types/old.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
// TypeScript Version: 2.2
// TypeScript Version: 4.2.4

export interface RegisteredCache {
[key: string]: string
Expand Down Expand Up @@ -38,12 +38,14 @@ export interface SerializedStyles {
next?: SerializedStyles
}

export const isBrowser: boolean
export let isBrowser: boolean

export function getRegisteredStyles(
registered: RegisteredCache,
registeredStyles: Array<string>,
classNames: string
): string

export function insertStyles(
cache: EmotionCache,
serialized: SerializedStyles,
Expand Down
29 changes: 18 additions & 11 deletions packages/utils/types/tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,30 @@
/* eslint-disable */
import {
EmotionCache,
RegisteredCache,
SerializedStyles,
StyleSheet,
getRegisteredStyles,
insertStyles,
isBrowser
} from '@emotion/utils'

import {
EmotionCache,
RegisteredCache,
} from '@emotion/utils/dist/declarations/src/types'

import { EmotionCache as OldEmotionCache, RegisteredCache as OldRegisteredCache } from "./old"

declare const testCache: EmotionCache
declare const testRegisteredCache: RegisteredCache

const oldEmotionCache: OldEmotionCache = testCache
const oldRegisteredCache: OldRegisteredCache = testRegisteredCache

getRegisteredStyles(testRegisteredCache, [], 'abc')
getRegisteredStyles(testRegisteredCache, [], 'abc def')
getRegisteredStyles(testRegisteredCache, [], 'dead end')
getRegisteredStyles(testRegisteredCache, ['color: red;'], 'black parade')
// $ExpectError
// @ts-expect-error
getRegisteredStyles()
// $ExpectError
// @ts-expect-error
getRegisteredStyles(testRegisteredCache)

insertStyles(
Expand All @@ -28,18 +35,18 @@ insertStyles(
},
false
)
// $ExpectError
// @ts-expect-error
insertStyles()
// $ExpectError
// @ts-expect-error
insertStyles(testCache)
// $ExpectError
// @ts-expect-error
insertStyles(testCache, {})
// $ExpectError
// @ts-expect-error
insertStyles(testCache, {
name: 'abc',
styles: 'font-size: 18px;'
})

const test0: boolean = isBrowser
// $ExpectError
// @ts-expect-error
const test1: number = isBrowser
79 changes: 66 additions & 13 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6407,13 +6407,41 @@ browserify-zlib@^0.2.0:
dependencies:
pako "~1.0.5"

browserslist@4.1.1, browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6, browserslist@^2.1.2, browserslist@^2.5.1, browserslist@^3.2.8, browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.12.0, browserslist@^4.12.2, browserslist@^4.14.5, browserslist@^4.16.3, browserslist@^4.3.4, browserslist@^4.6.4, browserslist@^4.7.3:
version "3.2.8"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
integrity sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==
browserslist@4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.1.1.tgz#328eb4ff1215b12df6589e9ab82f8adaa4fc8cd6"
integrity sha512-VBorw+tgpOtZ1BYhrVSVTzTt/3+vSE3eFUh0N2GCFK1HffceOaf32YS/bs6WiFhjDAblAFrx85jMy3BG9fBK2Q==
dependencies:
caniuse-lite "^1.0.30000884"
electron-to-chromium "^1.3.62"
node-releases "^1.0.0-alpha.11"

browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
version "1.7.7"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
integrity sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=
dependencies:
caniuse-db "^1.0.30000639"
electron-to-chromium "^1.2.7"

browserslist@^2.1.2, browserslist@^2.5.1:
version "2.11.3"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2"
integrity sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==
dependencies:
caniuse-lite "^1.0.30000792"
electron-to-chromium "^1.3.30"

browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.12.0, browserslist@^4.12.2, browserslist@^4.14.5, browserslist@^4.16.3, browserslist@^4.3.4, browserslist@^4.6.4, browserslist@^4.7.3:
version "4.16.5"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.5.tgz#952825440bca8913c62d0021334cbe928ef062ae"
integrity sha512-C2HAjrM1AI/djrpAUU/tr4pml1DqLIzJKSLDBXBrNErl9ZCCTXdhwxdJjYc16953+mBWf7Lw+uUJgpgb8cN71A==
dependencies:
caniuse-lite "^1.0.30000844"
electron-to-chromium "^1.3.47"
caniuse-lite "^1.0.30001214"
colorette "^1.2.2"
electron-to-chromium "^1.3.719"
escalade "^3.1.1"
node-releases "^1.1.71"

bser@1.0.2:
version "1.0.2"
Expand Down Expand Up @@ -6852,11 +6880,21 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634:
resolved "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000988.tgz#6a761a0204c4c41977b0379fb14f51d367c5e4ee"
integrity sha512-P0JCbGJhL1tTTeF+ehckvXwtckRursLDbA/ETdAd8Yg1ROAGJ5OgYgMONW1zWW1+ZTB79d7ZeJiOHGreEGG1ew==

caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001010:
caniuse-db@^1.0.30000639:
version "1.0.30001216"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001216.tgz#0d7acc15d3c9a6a566acbf649457b3c32d8acfab"
integrity sha512-XBR2/crdiuGFO93iWzkuWk9n1l9TvJm2QOBmE0Y8+FJoIN6aUxLQm/UFYUq0D+GRCY9MfYFaISlkJw8Q2vm0qQ==

caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001010:
version "1.0.30001012"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001012.tgz#653ec635e815b9e0fb801890923b0c2079eb34ec"
integrity sha512-7RR4Uh04t9K1uYRWzOJmzplgEOAXbfK72oVNokCdMzA67trrhPzy93ahKk1AWHiA0c58tD2P+NHqxrA8FZ+Trg==

caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000884, caniuse-lite@^1.0.30001214:
version "1.0.30001216"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001216.tgz#47418a082a4f952d14d8964ae739e25efb2060a9"
integrity sha512-1uU+ww/n5WCJRwUcc9UH/W6925Se5aNnem/G5QaSDga2HzvjYMs8vRbekGUN/PnTZ7ezTHcxxTEb9fgiMYwH6Q==

caniuse-lite@^1.0.30001109:
version "1.0.30001204"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001204.tgz#256c85709a348ec4d175e847a3b515c66e79f2aa"
Expand Down Expand Up @@ -7531,7 +7569,7 @@ colorette@^1.0.7:
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.1.0.tgz#1f943e5a357fac10b4e0f5aaef3b14cdc1af6ec7"
integrity sha512-6S062WDQUXi6hOfkO/sBPVwE5ASXY4G2+b4atvhJfSsuUUhIaUKlkjLe9692Ipyt5/a+IPF5aVTu3V5gvXq5cg==

colorette@^1.2.1:
colorette@^1.2.1, colorette@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
Expand Down Expand Up @@ -9465,10 +9503,10 @@ ejs@^2.6.1:
resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.1.tgz#5b5ab57f718b79d4aca9254457afecd36fa80228"
integrity sha512-kS/gEPzZs3Y1rRsbGX4UOSjtP/CeJP0CxSNZHYxGfVM/VgLcv0ZqM7C45YyTj2DI2g7+P9Dd24C+IMIg6D0nYQ==

electron-to-chromium@^1.3.47:
version "1.3.212"
resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.212.tgz#15d81ba96edb8ae6f937cde0fdb18c1c3c2bfec5"
integrity sha512-H8z5Smi1s1u1zGegEBfbxUAzrxyk1JoRHHHrlNGfhxv3sTb+p/Jz7JDvrR4196Q/Ip8r4+XwWcLvKrUjFKoJAg==
electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.62, electron-to-chromium@^1.3.719:
version "1.3.720"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.720.tgz#f5d66df8754d993006b7b2ded15ff7738c58bd94"
integrity sha512-B6zLTxxaOFP4WZm6DrvgRk8kLFYWNhQ5TrHMC0l5WtkMXhU5UbnvWoTfeEwqOruUSlNMhVLfYak7REX6oC5Yfw==

elegant-spinner@^1.0.1:
version "1.0.1"
Expand Down Expand Up @@ -13186,11 +13224,16 @@ graphql-subscriptions@^1.1.0:
dependencies:
iterall "^1.3.0"

graphql-type-json@0.2.4, graphql-type-json@^0.2.4, graphql-type-json@^0.3.2:
graphql-type-json@^0.2.4:
version "0.2.4"
resolved "https://registry.yarnpkg.com/graphql-type-json/-/graphql-type-json-0.2.4.tgz#545af27903e40c061edd30840a272ea0a49992f9"
integrity sha512-/tq02ayMQjrG4oDFDRLLrPk0KvJXue0nVXoItBe7uAdbNXjQUu+HYCBdAmPLQoseVzUKKMzrhq2P/sfI76ON6w==

graphql-type-json@^0.3.2:
version "0.3.2"
resolved "https://registry.yarnpkg.com/graphql-type-json/-/graphql-type-json-0.3.2.tgz#f53a851dbfe07bd1c8157d24150064baab41e115"
integrity sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==

graphql-upload@^11.0.0:
version "11.0.0"
resolved "https://registry.yarnpkg.com/graphql-upload/-/graphql-upload-11.0.0.tgz#24b245ff18f353bab6715e8a055db9fd73035e10"
Expand Down Expand Up @@ -19579,6 +19622,11 @@ node-pre-gyp@^0.12.0:
semver "^5.3.0"
tar "^4"

node-releases@^1.0.0-alpha.11, node-releases@^1.1.71:
version "1.1.71"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb"
integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==

node-rest-client@^1.5.1:
version "1.8.0"
resolved "https://registry.npmjs.org/node-rest-client/-/node-rest-client-1.8.0.tgz#8d3c566b817e27394cb7273783a41caefe3e5955"
Expand Down Expand Up @@ -27373,6 +27421,11 @@ typedarray@^0.0.6:
resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=

typescript@^4.2.4:
version "4.2.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==

typescript@next:
version "3.6.0-dev.20190803"
resolved "https://registry.npmjs.org/typescript/-/typescript-3.6.0-dev.20190803.tgz#f428649ed50cc2d3c8a180acc8afb27881ecd268"
Expand Down