feat: support classNames option

you can now supply class names to useLayoutEffect

BREAKING CHANGE: useLayoutEffect now takes an options hash instead of a single optional element

Author: Jed Mao

README.md

@@ -15,9 +15,55 @@ _The following example uses [TypeScript](http://www.typescriptlang.org/)._
 
 - You only want to create a single theme context and reuse it throughout your
   application.
-- You can create as many themes as you want.
-- A `Theme` is expected to be of type:
-  `Record<string, string | number | boolean>`.
+- You can create as many themes as you want, so long as they implement the same
+  [interface](https://www.typescriptlang.org/docs/handbook/interfaces.html).
+
+### Themes
+
+At its simplest, a theme can store colors:
+
+```ts
+export default interface Theme {
+  errorColor: string
+  anotherColor: string
+}
+```
+
+Here's an example of a theme using this color:
+
+```ts
+import Theme from 'models/Theme'
+
+const colors = {
+  scarlet: '#ff2400',
+  white: 'white',
+}
+
+const myTheme: Theme = {
+  errorColor: colors.scarlet,
+  anotherColor: colors.white,
+}
+
+export default myTheme
+```
+
+You might also want to base a color off of another:
+
+```ts
+class MyTheme implements Theme {
+  public errorColor = colors.scarlet
+  public get anotherColor() {
+    return darken(this.errorColor, 0.2)
+  }
+}
+
+export default new MyTheme()
+```
+
+## Setup
+
+Here's a contrived example of setting up an app with a couple of inline themes
+and creating a button to switch to the 2nd one.
 
 ### themeContext.tsx
 
@@ -96,14 +142,18 @@ themeContext.prop('primaryColor')
 // 'var(--primary-color)'
 ```
 
-### `#useLayoutEffect(element = document.documentElement)`
+### `#useLayoutEffect(options = {})`
 
 _Returns: `[T, Dispatch<SetStateAction<T>>]`_
 
 Sets theme properties as
 [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) on
-the provided `element` or the root `documentElement` by default. If the theme is
-updated, these props are updated too. This enables live theme switching!
+the provided `options.element` or the root `documentElement` by default. If the
+theme is updated, these props are updated too. This enables live theme
+switching!
+
+You can also add class names to the same element via `options.classNames`, which
+is a `string[]`.
 
 _See:
 [React Hooks API Reference | useLayoutEffect](https://reactjs.org/docs/hooks-reference.html#uselayouteffect)_

src/ThemeContext.test.tsx

@@ -14,30 +14,9 @@ style.setProperty = setProperty
 
 describe('new ThemeContext(defaultTheme)', () => {
 	const themeContext = new ThemeContext(defaultTheme)
-	let rendered: ReturnType<typeof render>
 
 	beforeEach(() => {
 		setProperty.mockReset()
-
-		const App = () => {
-			themeContext.useLayoutEffect()
-			const [theme, setTheme] = themeContext.use()
-			return (
-				<button
-					onClick={() => {
-						setTheme({ primaryColor: 'blue' })
-					}}
-				>
-					{theme.primaryColor}
-				</button>
-			)
-		}
-
-		rendered = render(
-			<themeContext.Provider>
-				<App />
-			</themeContext.Provider>,
-		)
 	})
 
 	afterAll(() => {
@@ -52,25 +31,73 @@ describe('new ThemeContext(defaultTheme)', () => {
 
 	describe('#Provider', () => {
 		it('provides a theme', () => {
+			const rendered = renderApp()
+
 			expect(rendered.getByText('red')).toBeDefined()
 		})
 	})
 
 	describe('#use', () => {
 		it('returns [theme, setTheme], which respectively gets and sets the theme', () => {
+			const rendered = renderApp()
+
 			fireEvent.click(rendered.getByText('red') as HTMLElement)
+
 			expect(rendered.getByText('blue')).toBeDefined()
 		})
 	})
 
 	describe('#useLayoutEffect', () => {
 		it('sets a CSS custom property on the root document element', () => {
+			renderApp()
+
 			expect(setProperty).toHaveBeenCalledWith('--primary-color', 'red')
 		})
 
 		it('updates the custom property when the theme changes', () => {
+			const rendered = renderApp()
+
 			fireEvent.click(rendered.getByText('red') as HTMLElement)
+
 			expect(setProperty).toHaveBeenCalledWith('--primary-color', 'blue')
 		})
+
+		it('sets class names on provided element', () => {
+			const element = document.createElement('html')
+
+			renderApp({ element, classNames: ['foo', 'bar'] })
+
+			expect(element.className).toEqual('foo bar')
+		})
 	})
+
+	function renderApp({
+		element,
+		classNames,
+	}: {
+		element?: HTMLElement
+		classNames?: string[]
+	} = {}) {
+		const App = () => {
+			themeContext.useLayoutEffect(
+				element || classNames ? { element, classNames } : undefined,
+			)
+			const [theme, setTheme] = themeContext.use()
+			return (
+				<button
+					onClick={() => {
+						setTheme({ primaryColor: 'blue' })
+					}}
+				>
+					{theme.primaryColor}
+				</button>
+			)
+		}
+
+		return render(
+			<themeContext.Provider>
+				<App />
+			</themeContext.Provider>,
+		)
+	}
 })

src/ThemeContext.tsx

@@ -59,9 +59,14 @@ export default class ThemeContext<T extends object> {
 	 * 	return null
 	 *	}
 	 */
-	public useLayoutEffect(
+	public useLayoutEffect({
+		classNames,
 		element = document.documentElement,
-	): [T, Dispatch<SetStateAction<T>>] {
+	}: {
+		element?: HTMLElement
+		classNames?: string[]
+	} = {}): [T, Dispatch<SetStateAction<T>>] {
+		element.classList.add(...(classNames || []))
 		const [theme, setTheme] = this.use()
 		useLayoutEffect(() => {
 			Object.keys(theme).forEach(setProp)