theme-ui - npm Package Compare versions

Comparing version 0.2.10 to 0.2.11

dist/index.esm.js

 import { MDXProvider } from '@mdx-js/react';
 import deepmerge from 'deepmerge';
 import isPropValid from '@emotion/is-prop-valid';
-import React, { forwardRef, useContext, createContext, useState, useEffect } from 'react';
+import React, { forwardRef, useContext, createContext, useState, useEffect, useReducer } from 'react';
 import { jsx, ThemeContext, Global } from '@emotion/core';
@@ -345,2 +345,6 @@ import css, { css as css$1, get } from '@styled-system/css';
 
+var mergeState = function mergeState(state, next) {
+  return merge.all({}, state, next);
+};
+
 var colorModesToCSSProperties = function colorModesToCSSProperties(modes) {
@@ -400,2 +404,7 @@ return Object.keys(modes).reduce(function (parsedModes, modeKey) {
 
+  var _useReducer = useReducer(mergeState, theme),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      themeState = _useReducer2[0],
+      setThemeState = _useReducer2[1];
+
   var context = {
@@ -406,4 +415,8 @@ __THEME_UI__: true,
     components: _objectSpread2({}, outer.components, {}, createComponents(components$$1)),
-    theme: theme
+    theme: themeState,
+    setTheme: setThemeState
   };
+  useEffect(function () {
+    window.__THEME_UI__ = context;
+  }, [context.theme, context.colorMode]);
   return jsx$1(BaseProvider, {
@@ -410,0 +423,0 @@ context: context,

dist/index.js

@@ -348,2 +348,6 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var mergeState = function mergeState(state, next) {
+  return merge.all({}, state, next);
+};
+
 var colorModesToCSSProperties = function colorModesToCSSProperties(modes) {
@@ -403,2 +407,7 @@ return Object.keys(modes).reduce(function (parsedModes, modeKey) {
 
+  var _useReducer = React.useReducer(mergeState, theme),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      themeState = _useReducer2[0],
+      setThemeState = _useReducer2[1];
+
   var context = {
@@ -409,4 +418,8 @@ __THEME_UI__: true,
     components: _objectSpread2({}, outer.components, {}, createComponents(components$$1)),
-    theme: theme
+    theme: themeState,
+    setTheme: setThemeState
   };
+  React.useEffect(function () {
+    window.__THEME_UI__ = context;
+  }, [context.theme, context.colorMode]);
   return jsx(BaseProvider, {
@@ -413,0 +426,0 @@ context: context,

dist/index.umd.js

@@ -347,2 +347,6 @@ (function (global, factory) {
 
+  var mergeState = function mergeState(state, next) {
+    return merge.all({}, state, next);
+  };
+
   var colorModesToCSSProperties = function colorModesToCSSProperties(modes) {
@@ -402,2 +406,7 @@ return Object.keys(modes).reduce(function (parsedModes, modeKey) {
 
+    var _useReducer = React.useReducer(mergeState, theme),
+        _useReducer2 = _slicedToArray(_useReducer, 2),
+        themeState = _useReducer2[0],
+        setThemeState = _useReducer2[1];
+
     var context = {
@@ -408,4 +417,8 @@ __THEME_UI__: true,
       components: _objectSpread2({}, outer.components, {}, createComponents(components$$1)),
-      theme: theme
+      theme: themeState,
+      setTheme: setThemeState
     };
+    React.useEffect(function () {
+      window.__THEME_UI__ = context;
+    }, [context.theme, context.colorMode]);
     return jsx(BaseProvider, {
@@ -412,0 +425,0 @@ context: context,

package.json

 {
   "name": "theme-ui",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Build consistent, themeable React UIs based on design system constraints and design tokens",
@@ -28,3 +28,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "de7f2ba203f87434ee2864b800996053e91cbc1a"
+  "gitHead": "8e3087cc6b114dc13a054427f6de3c054b8091da"
 }

src/provider.js

@@ -0,1 +1,2 @@
+import { useEffect, useReducer } from 'react'
 import { ThemeContext as EmotionContext } from '@emotion/core'
@@ -10,2 +11,4 @@ import { MDXProvider } from '@mdx-js/react'
 
+const mergeState = (state, next) => merge.all({}, state, next)
+
 const colorModesToCSSProperties = modes => {
@@ -69,2 +72,3 @@ return Object.keys(modes).reduce((parsedModes, modeKey) => {
   const [colorMode, setColorMode] = useColorState(theme.initialColorMode)
+  const [themeState, setThemeState] = useReducer(mergeState, theme)
 
@@ -76,5 +80,10 @@ const context = {
     components: { ...outer.components, ...createComponents(components) },
-    theme,
+    theme: themeState,
+    setTheme: setThemeState,
   }
 
+  useEffect(() => {
+    window.__THEME_UI__ = context
+  }, [context.theme, context.colorMode])
+
   return jsx(BaseProvider, {
@@ -81,0 +90,0 @@ context,

No alert changes

Improved metrics

Total package byte prevSize

124542

3.2%

Lines of code

1722

2.38%

No dependency changes