Migrate @emotion/utils to TypeScript (#2359)

* feat(ts-utils): Initial migration of utils * Small tweaks * More small tweaks Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
emotion-js · Aug 15, 2021 · 16d8a8c · 16d8a8c
1 parent 52aadc6
commit 16d8a8c
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 100 deletions.
diff --git a/.changeset/old-years-breathe.md b/.changeset/old-years-breathe.md
@@ -0,0 +1,5 @@
+---
+'@emotion/utils': minor
+---
+
+Source code has been migrated to TypeScript. From now on type declarations will be emitted based on that, instead of being hand-written.
diff --git a/.eslintignore b/.eslintignore
@@ -4,4 +4,4 @@ coverage/
 node_modules/
 stylis.min.js
 /demo/dist
-/packages/site/build
+/packages/site/build
diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -4,11 +4,11 @@
   "description": "internal utils for emotion",
   "main": "dist/emotion-utils.cjs.js",
   "module": "dist/emotion-utils.esm.js",
+  "types": "dist/emotion-utils.cjs.d.ts",
   "browser": {
     "./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"
@@ -19,8 +19,7 @@
   },
   "files": [
     "src",
-    "dist",
-    "types/*.d.ts"
+    "dist"
   ],
   "devDependencies": {
     "dtslint": "^0.3.0"

diff --git a/packages/utils/src/index.js → packages/utils/src/index.ts b/packages/utils/src/index.js → packages/utils/src/index.ts
@@ -1,12 +1,12 @@
-/* import type { RegisteredCache, EmotionCache, SerializedStyles } from './types' */
+import { RegisteredCache, EmotionCache, SerializedStyles } from './types'
 
 const isBrowser = typeof document !== 'undefined'
 
 export function getRegisteredStyles(
-  registered /*: RegisteredCache */,
-  registeredStyles /*: string[] */,
-  classNames /*: string */
-) {
+  registered: RegisteredCache,
+  registeredStyles: string[],
+  classNames: string
+): string {
   let rawClassName = ''
 
   classNames.split(' ').forEach(className => {
@@ -20,10 +20,10 @@ export function getRegisteredStyles(
 }
 
 export const insertStyles = (
-  cache /*: EmotionCache */,
-  serialized /*: SerializedStyles */,
-  isStringTag /*: boolean */
-) => {
+  cache: EmotionCache,
+  serialized: SerializedStyles,
+  isStringTag: boolean
+): string | void => {
   let className = `${cache.key}-${serialized.name}`
   if (
     // we only need to add the styles to the registered cache if the
@@ -43,7 +43,7 @@ export const insertStyles = (
   }
   if (cache.inserted[serialized.name] === undefined) {
     let stylesForSSR = ''
-    let current = serialized
+    let current: SerializedStyles | undefined = serialized
     do {
       let maybeStyles = cache.insert(
         serialized === current ? `.${className}` : '',

diff --git a/packages/utils/src/types.js b/packages/utils/src/types.js
diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts
@@ -0,0 +1,27 @@
+import { StyleSheet } from '@emotion/sheet'
+
+export { StyleSheet }
+
+export type RegisteredCache = Record<string, string | undefined>
+
+export type SerializedStyles = {
+  name: string
+  styles: string
+  map?: string
+  next?: SerializedStyles
+}
+
+export type EmotionCache = {
+  inserted: Record<string, string | true | undefined>
+  registered: RegisteredCache
+  sheet: StyleSheet
+  key: string
+  compat?: true
+  nonce?: string
+  insert: (
+    selector: string,
+    serialized: SerializedStyles,
+    sheet: StyleSheet,
+    shouldCache: boolean
+  ) => string | void
+}
diff --git a/packages/utils/types/index.d.ts b/packages/utils/types/index.d.ts
@@ -1,51 +1,3 @@
-// Definitions by: Junyoung Clare Jang </~https://github.com/Ailrun>
 // TypeScript Version: 2.2
 
-export interface RegisteredCache {
-  [key: string]: string
-}
-
-export interface StyleSheet {
-  container: HTMLElement
-  nonce?: string
-  key: string
-  insert(rule: string): void
-  flush(): void
-  tags: Array<HTMLStyleElement>
-}
-
-export interface EmotionCache {
-  inserted: {
-    [key: string]: string | true
-  }
-  registered: RegisteredCache
-  sheet: StyleSheet
-  key: string
-  compat?: true
-  nonce?: string
-  insert(
-    selector: string,
-    serialized: SerializedStyles,
-    sheet: StyleSheet,
-    shouldCache: boolean
-  ): string | void
-}
-
-export interface SerializedStyles {
-  name: string
-  styles: string
-  map?: string
-  next?: SerializedStyles
-}
-
-export const isBrowser: boolean
-export function getRegisteredStyles(
-  registered: RegisteredCache,
-  registeredStyles: Array<string>,
-  classNames: string
-): string
-export function insertStyles(
-  cache: EmotionCache,
-  serialized: SerializedStyles,
-  isStringTag: boolean
-): string | void
+export * from '../src'
diff --git a/packages/utils/types/tests.ts b/packages/utils/types/tests.ts
@@ -1,11 +1,8 @@
 import {
   EmotionCache,
   RegisteredCache,
-  SerializedStyles,
-  StyleSheet,
   getRegisteredStyles,
-  insertStyles,
-  isBrowser
+  insertStyles
 } from '@emotion/utils'
 
 declare const testCache: EmotionCache
@@ -39,7 +36,3 @@ insertStyles(testCache, {
   name: 'abc',
   styles: 'font-size: 18px;'
 })
-
-const test0: boolean = isBrowser
-// $ExpectError
-const test1: number = isBrowser