From 52aadc6e77140867392f81545cc92e04fd84d453 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Sat, 14 Aug 2021 07:16:03 -0700 Subject: [PATCH] Migrate `@emotion/sheet` to TypeScript (#2431) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [sheet] Convert to TypeScript * Add changeset * Make _insertTag private * tweak some minor things * add more type tests for constructing StyleSheet * add changeset Co-authored-by: Mateusz Burzyński --- .changeset/thick-tips-join.md | 5 +++ .changeset/thirty-years-divide.md | 5 +++ packages/sheet/package.json | 5 +-- packages/sheet/src/{index.js => index.ts} | 54 +++++++++++------------ packages/sheet/types/index.d.ts | 23 +--------- packages/sheet/types/tests.ts | 9 ++++ 6 files changed, 49 insertions(+), 52 deletions(-) create mode 100644 .changeset/thick-tips-join.md create mode 100644 .changeset/thirty-years-divide.md rename packages/sheet/src/{index.js => index.ts} (82%) diff --git a/.changeset/thick-tips-join.md b/.changeset/thick-tips-join.md new file mode 100644 index 000000000..f87fd4e67 --- /dev/null +++ b/.changeset/thick-tips-join.md @@ -0,0 +1,5 @@ +--- +'@emotion/sheet': 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/.changeset/thirty-years-divide.md b/.changeset/thirty-years-divide.md new file mode 100644 index 000000000..fcfd0af76 --- /dev/null +++ b/.changeset/thirty-years-divide.md @@ -0,0 +1,5 @@ +--- +'@emotion/sheet': patch +--- + +Type declaration for `StyleSheet`'s constructor has been fixed. It incorrectly was specifying that `options` were optional when in reality they weren't. diff --git a/packages/sheet/package.json b/packages/sheet/package.json index 0416af32a..fb6668051 100644 --- a/packages/sheet/package.json +++ b/packages/sheet/package.json @@ -8,7 +8,7 @@ "./dist/emotion-sheet.cjs.js": "./dist/emotion-sheet.browser.cjs.js", "./dist/emotion-sheet.esm.js": "./dist/emotion-sheet.browser.esm.js" }, - "types": "types/index.d.ts", + "types": "dist/emotion-sheet.cjs.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/sheet/src/index.js b/packages/sheet/src/index.ts similarity index 82% rename from packages/sheet/src/index.js rename to packages/sheet/src/index.ts index b5fb62890..939ea4c2c 100644 --- a/packages/sheet/src/index.js +++ b/packages/sheet/src/index.ts @@ -21,7 +21,7 @@ styleSheet.flush() */ -function sheetForTag(tag /*: HTMLStyleElement */) /*: CSSStyleSheet */ { +function sheetForTag(tag: HTMLStyleElement): CSSStyleSheet { if (tag.sheet) { return tag.sheet } @@ -33,24 +33,21 @@ function sheetForTag(tag /*: HTMLStyleElement */) /*: CSSStyleSheet */ { return document.styleSheets[i] } } + + // this function should always return with a value + // TS can't understand it though so we make it stop complaining here + return undefined as any } -/* export type Options = { - nonce?: string, - key: string, - container: HTMLElement, - speedy?: boolean, + nonce?: string + key: string + container: HTMLElement + speedy?: boolean prepend?: boolean } -*/ -function createStyleElement( - options /*: { - key: string, - nonce: string | void -} */ -) /*: HTMLStyleElement */ { +function createStyleElement(options: Options): HTMLStyleElement { let tag = document.createElement('style') tag.setAttribute('data-emotion', options.key) if (options.nonce !== undefined) { @@ -62,15 +59,18 @@ function createStyleElement( } export class StyleSheet { - isSpeedy /*: boolean */ - ctr /*: number */ - tags /*: HTMLStyleElement[] */ - container /*: HTMLElement */ - key /*: string */ - nonce /*: string | void */ - prepend /*: boolean | void */ - before /*: Element | null */ - constructor(options /*: Options */) { + isSpeedy: boolean + ctr: number + tags: HTMLStyleElement[] + container: HTMLElement + key: string + nonce: string | undefined + prepend: boolean | undefined + before: Element | null + + private _alreadyInsertedOrderInsensitiveRule: boolean | undefined + + constructor(options: Options) { this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' @@ -85,7 +85,7 @@ export class StyleSheet { this.before = null } - _insertTag = (tag /*: HTMLStyleElement */) => { + private _insertTag = (tag: HTMLStyleElement): void => { let before if (this.tags.length === 0) { before = this.prepend ? this.container.firstChild : this.before @@ -96,11 +96,11 @@ export class StyleSheet { this.tags.push(tag) } - hydrate(nodes /*: HTMLStyleElement[] */) { + hydrate(nodes: HTMLStyleElement[]): void { nodes.forEach(this._insertTag) } - insert(rule /*: string */) { + insert(rule: string): void { // the max length is how many rules we have per style tag, it's 65000 in speedy mode // it's 1 in dev because we insert source maps that map a single rule to a location // and you can only have one source map per style tag @@ -153,8 +153,8 @@ export class StyleSheet { this.ctr++ } - flush() { - this.tags.forEach(tag => tag.parentNode.removeChild(tag)) + flush(): void { + this.tags.forEach(tag => tag.parentNode!.removeChild(tag)) this.tags = [] this.ctr = 0 if (process.env.NODE_ENV !== 'production') { diff --git a/packages/sheet/types/index.d.ts b/packages/sheet/types/index.d.ts index 2a0ad6b77..f9a531dca 100644 --- a/packages/sheet/types/index.d.ts +++ b/packages/sheet/types/index.d.ts @@ -1,24 +1,3 @@ -// Definitions by: Junyoung Clare Jang // TypeScript Version: 2.0 -export interface Options { - nonce?: string - key: string - container: HTMLElement - speedy?: boolean - prepend?: boolean -} - -export class StyleSheet { - isSpeedy: boolean - ctr: number - tags: Array - container: HTMLElement - key: string - nonce?: string - before?: Element | null - constructor(options?: Options) - insert(rule: string): void - flush(): void - hydrate(nodes: Array): void -} +export * from '../src' diff --git a/packages/sheet/types/tests.ts b/packages/sheet/types/tests.ts index 50720597d..cec916c7d 100644 --- a/packages/sheet/types/tests.ts +++ b/packages/sheet/types/tests.ts @@ -32,7 +32,16 @@ const styleSheet0 = new StyleSheet({ container: document.createElement('div') }) const styleSheet1: StyleSheet = styleSheet0 +// $ExpectError const styleSheet2: StyleSheet = new StyleSheet() +// $ExpectError +const styleSheet3: StyleSheet = new StyleSheet({}) +// $ExpectError +const styleSheet4: StyleSheet = new StyleSheet({ key: 'mykey' }) +// $ExpectError +const styleSheet5: StyleSheet = new StyleSheet({ + container: document.createElement('div') +}) const styleSheet = new StyleSheet({ key: 'abc',