From 16d8a8c2198461c4842c73048b406c346a70aa59 Mon Sep 17 00:00:00 2001 From: John de Stigter Date: Sun, 15 Aug 2021 02:18:47 -0600 Subject: [PATCH] Migrate `@emotion/utils` to TypeScript (#2359) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(ts-utils): Initial migration of utils * Small tweaks * More small tweaks Co-authored-by: Mateusz Burzyński --- .changeset/old-years-breathe.md | 5 +++ .eslintignore | 2 +- packages/utils/package.json | 5 +-- packages/utils/src/{index.js => index.ts} | 20 ++++----- packages/utils/src/types.js | 29 ------------- packages/utils/src/types.ts | 27 ++++++++++++ packages/utils/types/index.d.ts | 50 +---------------------- packages/utils/types/tests.ts | 9 +--- 8 files changed, 47 insertions(+), 100 deletions(-) create mode 100644 .changeset/old-years-breathe.md rename packages/utils/src/{index.js => index.ts} (84%) delete mode 100644 packages/utils/src/types.js create mode 100644 packages/utils/src/types.ts diff --git a/.changeset/old-years-breathe.md b/.changeset/old-years-breathe.md new file mode 100644 index 000000000..e0f7c880e --- /dev/null +++ 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 index 3403b5396..7401c5979 100644 --- a/.eslintignore +++ b/.eslintignore @@ -4,4 +4,4 @@ coverage/ node_modules/ stylis.min.js /demo/dist -/packages/site/build \ No newline at end of file +/packages/site/build diff --git a/packages/utils/package.json b/packages/utils/package.json index 83716f931..07a4e0881 100644 --- 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 b/packages/utils/src/index.ts similarity index 84% rename from packages/utils/src/index.js rename to packages/utils/src/index.ts index 2fdfe9a9f..ee2666b94 100644 --- a/packages/utils/src/index.js +++ b/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 deleted file mode 100644 index 59b8667c2..000000000 --- a/packages/utils/src/types.js +++ /dev/null @@ -1,29 +0,0 @@ -/* import type { StyleSheet } from '@emotion/sheet' */ - -/* -export type RegisteredCache = { [string]: string } - -export type Interpolation = any - -export type SerializedStyles = {| - name: string, - styles: string, - map?: string, - next?: SerializedStyles -|} - -export type EmotionCache = { - inserted: { [string]: string | true }, - 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/src/types.ts b/packages/utils/src/types.ts new file mode 100644 index 000000000..cae195fc8 --- /dev/null +++ b/packages/utils/src/types.ts @@ -0,0 +1,27 @@ +import { StyleSheet } from '@emotion/sheet' + +export { StyleSheet } + +export type RegisteredCache = Record + +export type SerializedStyles = { + name: string + styles: string + map?: string + next?: SerializedStyles +} + +export type EmotionCache = { + inserted: Record + 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 index 5c1902120..4a7b205c2 100644 --- a/packages/utils/types/index.d.ts +++ b/packages/utils/types/index.d.ts @@ -1,51 +1,3 @@ -// Definitions by: Junyoung Clare Jang // 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 -} - -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, - 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 index c0c9b2b0e..3033719a1 100644 --- 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