Migrate @emotion/sheet to TypeScript (#2431)

* [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 <mateuszburzynski@gmail.com>

.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.

.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.

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"

packages/sheet/src/index.js → 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') {

packages/sheet/types/index.d.ts

@@ -1,24 +1,3 @@
-// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 // 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<HTMLStyleElement>
-  container: HTMLElement
-  key: string
-  nonce?: string
-  before?: Element | null
-  constructor(options?: Options)
-  insert(rule: string): void
-  flush(): void
-  hydrate(nodes: Array<HTMLStyleElement>): void
-}
+export * from '../src'

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',