rewrite themer to use a react context

src/__tests__/ensureExports.spec.js

@@ -9,7 +9,9 @@ const expectedExports = [
   'GlobalTheme',
   'Normalize',
   'SetStyles',
-  'themer',
+  'Themer',
+  'ThemerContext',
+  'ThemerProvider',
   'withTheme',
   'themePropTypes',
   'responsive',

src/components/Link/__tests__/Link.spec.js

@@ -4,10 +4,14 @@ import { StyleRoot } from '@instacart/radium'
 import { mount } from 'enzyme'
 import { spy } from 'sinon'
 import Link from '../Link'
-import themer from '../../../styles/themer'
+import { Themer, ThemerProvider } from '../../../styles/themer'
 import { defaultTheme } from '../../../styles/themer/utils'
 
 describe('Link', () => {
+  let themer
+  beforeEach(() => {
+    themer = new Themer()
+  })
   it('renders without throwing', () => {
     const tree = renderer
       .create(
@@ -64,7 +68,9 @@ describe('Link', () => {
   it('re-renders when the active theme changes', () => {
     const wrapper = mount(
       <StyleRoot>
-        <Link elementAttributes={{ 'aria-label': 'foo' }}>HI</Link>
+        <ThemerProvider themer={themer}>
+          <Link elementAttributes={{ 'aria-label': 'foo' }}>HI</Link>
+        </ThemerProvider>
       </StyleRoot>
     )
 

src/index.d.ts

@@ -44,7 +44,7 @@ import MenuItem from './components/Menus/MenuItem'
 import MenuDivider from './components/Menus/MenuDivider'
 import DropdownMenu from './components/Menus/DropdownMenu'
 import zIndex from './styles/zIndex'
-import themer from './styles/themer/index'
+import { Themer, ThemerContext, ThemerProvider } from './styles/themer/index'
 import withTheme, { WithThemeInjectedProps } from './styles/themer/withTheme'
 import Slide from './components/Transitions/Slide'
 import Grow from './components/Transitions/Grow'
@@ -101,7 +101,9 @@ export {
   Normalize,
   SetStyles,
   // theming
-  themer,
+  Themer,
+  ThemerContext,
+  ThemerProvider,
   withTheme,
   WithThemeInjectedProps,
   themePropTypes,

src/index.js

@@ -39,7 +39,7 @@ import MenuItem from './components/Menus/MenuItem'
 import MenuDivider from './components/Menus/MenuDivider'
 import DropdownMenu from './components/Menus/DropdownMenu'
 import zIndex from './styles/zIndex'
-import themer from './styles/themer/index'
+import { Themer, ThemerContext, ThemerProvider } from './styles/themer/index'
 import withTheme from './styles/themer/withTheme'
 import Slide from './components/Transitions/Slide'
 import Grow from './components/Transitions/Grow'
@@ -57,7 +57,9 @@ export {
   Normalize,
   SetStyles,
   // theming
-  themer,
+  Themer,
+  ThemerContext,
+  ThemerProvider,
   withTheme,
   themePropTypes,
   // grid system

src/styles/themer/Themer.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from './utils'
+
+export declare class Themer {
+  themeConfig: Theme
+
+  constructor()
+
+  set<TSection extends keyof Theme, TSectionKey extends keyof Theme[TSection]>(
+    section: TSection,
+    sectionKey: TSectionKey,
+    themeValue: string
+  ): void
+
+  subscribe(listener: (themeConfig?: Theme) => void): () => void
+}

src/styles/themer/Themer.js

@@ -0,0 +1,56 @@
+/* eslint-disable no-underscore-dangle */
+import { cleanConfig, defaultTheme, themeTemplate, validConfigValue } from './utils'
+
+export class Themer {
+  constructor() {
+    this._themeConfig = defaultTheme
+    this._onChangeListeners = []
+  }
+
+  _callListeners() {
+    this._onChangeListeners.forEach(listener => {
+      listener(this._themeConfig)
+    })
+  }
+
+  get themeConfig() {
+    return this._themeConfig
+  }
+
+  set themeConfig(themeConfig) {
+    this._themeConfig = cleanConfig(themeConfig)
+    this._callListeners()
+  }
+
+  get(section, sectionKey) {
+    if (!this._themeConfig) {
+      console.warn(
+        'Snacks theme error: No themeConfig defined. Please use Themer template: ',
+        themeTemplate
+      )
+    } else if (validConfigValue(section, sectionKey)) {
+      return this._themeConfig[section][sectionKey]
+    }
+  }
+
+  set(section, sectionKey, themeValue) {
+    if (validConfigValue(section, sectionKey)) {
+      this._themeConfig[section][sectionKey] = themeValue
+      this._callListeners()
+    }
+  }
+
+  subscribe(listener) {
+    this._onChangeListeners.push(listener)
+
+    const unsubscribe = () => {
+      const index = this._onChangeListeners.indexOf(listener)
+      if (index === -1) {
+        return
+      }
+      this._onChangeListeners.splice(index, 1)
+    }
+
+    return unsubscribe
+  }
+}

src/styles/themer/ThemerContext.d.ts

@@ -0,0 +1,9 @@
+import { Context } from 'react'
+import { Themer } from './Themer'
+
+declare interface ThemerContextInterface {
+  tick: number // for propogating theme updates through react
+  themer: Themer
+}
+
+export declare const ThemerContext: Context<ThemerContextInterface>

src/styles/themer/ThemerContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+import { Themer } from './Themer'
+
+export const ThemerContext = createContext({ themer: new Themer(), tick: 0 })

src/styles/themer/ThemerProvider.d.ts

@@ -0,0 +1,10 @@
+import { Context } from 'react'
+import { Themer } from './Themer'
+import * as React from 'react'
+
+export interface ThemerProviderProps {
+  children?: React.ReactNode
+  themer: Themer
+}
+
+export declare const ThemerProvider: React.ComponentType<ThemerProviderProps>

src/styles/themer/ThemerProvider.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Themer } from './Themer'
+import { ThemerContext } from './ThemerContext'
+
+export class ThemerProvider extends React.Component {
+  static propTypes = {
+    themer: PropTypes.instanceOf(Themer),
+    children: PropTypes.node,
+  }
+
+  static contextType = ThemerContext
+
+  state = {
+    tick: 0,
+  }
+
+  componentDidMount() {
+    this.unsubscribe = this.context.themer.subscribe(this.onThemeChange)
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe()
+  }
+
+  onThemeChange = () => {
+    const { tick } = this.state
+    // increment tick to force an update on the context
+    this.setState({ tick: tick + 1 })
+  }
+
+  render() {
+    const { themer, children } = this.props
+    // this creates a new reference every time render gets called
+    const themerContext = { themer }
+    return <ThemerContext.Provider value={themerContext}>{children}</ThemerContext.Provider>
+  }
+}
+
+ThemerProvider.propTypes = {
+  themer: PropTypes.object,
+  children: PropTypes.node,
+}