@theme-ui/color-modes - npm Package Compare versions

Comparing version 0.3.0-alpha.6 to 0.3.0

dist/index.esm.js

@@ -105,6 +105,17 @@ import React from 'react';
 var STORAGE_KEY = 'theme-ui-color-mode';
-var HAS_STORAGE = typeof Storage !== 'undefined';
 var storage = {
-  get: function (init) { return HAS_STORAGE && window.localStorage.getItem(STORAGE_KEY) || init; },
-  set: function (value) { return HAS_STORAGE && window.localStorage.setItem(STORAGE_KEY, value); }
+  get: function (init) {
+    try {
+      return window.localStorage.getItem(STORAGE_KEY) || init;
+    } catch (e) {
+      console.warn('localStorage is disabled and color mode might not work as expected.', 'Please check your Site Settings.', e);
+    }
+  },
+  set: function (value) {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, value);
+    } catch (e) {
+      console.warn('localStorage is disabled and color mode might not work as expected.', 'Please check your Site Settings.', e);
+    }
+  }
 };
@@ -111,0 +122,0 @@

dist/index.js

@@ -107,6 +107,17 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var STORAGE_KEY = 'theme-ui-color-mode';
-var HAS_STORAGE = typeof Storage !== 'undefined';
 var storage = {
-  get: function (init) { return HAS_STORAGE && window.localStorage.getItem(STORAGE_KEY) || init; },
-  set: function (value) { return HAS_STORAGE && window.localStorage.setItem(STORAGE_KEY, value); }
+  get: function (init) {
+    try {
+      return window.localStorage.getItem(STORAGE_KEY) || init;
+    } catch (e) {
+      console.warn('localStorage is disabled and color mode might not work as expected.', 'Please check your Site Settings.', e);
+    }
+  },
+  set: function (value) {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, value);
+    } catch (e) {
+      console.warn('localStorage is disabled and color mode might not work as expected.', 'Please check your Site Settings.', e);
+    }
+  }
 };
@@ -113,0 +124,0 @@

dist/index.umd.js

@@ -107,6 +107,17 @@ (function (global, factory) {
   var STORAGE_KEY = 'theme-ui-color-mode';
-  var HAS_STORAGE = typeof Storage !== 'undefined';
   var storage = {
-    get: function (init) { return HAS_STORAGE && window.localStorage.getItem(STORAGE_KEY) || init; },
-    set: function (value) { return HAS_STORAGE && window.localStorage.setItem(STORAGE_KEY, value); }
+    get: function (init) {
+      try {
+        return window.localStorage.getItem(STORAGE_KEY) || init;
+      } catch (e) {
+        console.warn('localStorage is disabled and color mode might not work as expected.', 'Please check your Site Settings.', e);
+      }
+    },
+    set: function (value) {
+      try {
+        window.localStorage.setItem(STORAGE_KEY, value);
+      } catch (e) {
+        console.warn('localStorage is disabled and color mode might not work as expected.', 'Please check your Site Settings.', e);
+      }
+    }
   };
@@ -113,0 +124,0 @@

package.json

 {
   "name": "@theme-ui/color-modes",
-  "version": "0.3.0-alpha.6",
+  "version": "0.3.0",
   "main": "dist/index.js",
@@ -19,4 +19,4 @@ "module": "dist/index.esm.js",
     "@emotion/core": "^10.0.0",
-    "@theme-ui/core": "^0.3.0-alpha.6",
-    "@theme-ui/css": "^0.3.0-alpha.6",
+    "@theme-ui/core": "^0.3.0",
+    "@theme-ui/css": "^0.3.0",
     "deepmerge": "^4.2.2"
@@ -30,3 +30,3 @@ },
   },
-  "gitHead": "fc8f24c4f54aa0cdd6ec50dcf06ef47b132f84d9"
+  "gitHead": "7663897ec671e1ff66b0d4ef946611dd57f3bb99"
 }

src/index.js

 import React from 'react'
-import {
-  jsx,
-  useThemeUI,
-  merge,
-  Context,
-} from '@theme-ui/core'
+import { jsx, useThemeUI, merge, Context } from '@theme-ui/core'
 import { get } from '@theme-ui/css'
-import {
-  Global,
-  ThemeContext as EmotionContext
-} from '@emotion/core'
-import {
-  toCustomProperties,
-  createColorStyles,
-} from './custom-properties'
+import { Global, ThemeContext as EmotionContext } from '@emotion/core'
+import { toCustomProperties, createColorStyles } from './custom-properties'
 
 const STORAGE_KEY = 'theme-ui-color-mode'
-const HAS_STORAGE = typeof Storage !== 'undefined'
 
 const storage = {
-  get: init => HAS_STORAGE && window.localStorage.getItem(STORAGE_KEY) || init,
-  set: value => HAS_STORAGE && window.localStorage.setItem(STORAGE_KEY, value),
+  get: init => {
+    try {
+      return window.localStorage.getItem(STORAGE_KEY) || init
+    } catch (e) {
+      console.warn(
+        'localStorage is disabled and color mode might not work as expected.',
+        'Please check your Site Settings.',
+        e
+      )
+    }
+  },
+  set: value => {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, value)
+    } catch (e) {
+      console.warn(
+        'localStorage is disabled and color mode might not work as expected.',
+        'Please check your Site Settings.',
+        e
+      )
+    }
+  },
 }
@@ -39,3 +47,5 @@
 const useColorModeState = (theme = {}) => {
-  const [mode, setMode] = React.useState(theme.initialColorModeName || 'default')
+  const [mode, setMode] = React.useState(
+    theme.initialColorModeName || 'default'
+  )
 
@@ -96,12 +106,10 @@ // initialize state
   jsx(Global, {
-    styles: theme => createColorStyles(theme)
+    styles: theme => createColorStyles(theme),
   })
 
-export const ColorModeProvider = ({
-  children,
-}) => {
+export const ColorModeProvider = ({ children }) => {
   const outer = useThemeUI()
   const [colorMode, setColorMode] = useColorModeState(outer.theme)
   const theme = applyColorMode(outer.theme || {}, colorMode)
-  const emotionTheme = {...theme}
+  const emotionTheme = { ...theme }
 
@@ -119,4 +127,8 @@ if (theme.useCustomProperties !== false) {
 
-  return jsx(EmotionContext.Provider, { value: emotionTheme },
-    jsx(Context.Provider, { value: context },
+  return jsx(
+    EmotionContext.Provider,
+    { value: emotionTheme },
+    jsx(
+      Context.Provider,
+      { value: context },
       jsx(BodyStyles, { key: 'color-mode' }),
@@ -134,3 +146,3 @@ children
 
-export const InitializeColorMode = () => (
+export const InitializeColorMode = () =>
   jsx('script', {
@@ -140,4 +152,3 @@ key: 'theme-ui-no-flash',
       __html: noflash,
-    }
+    },
   })
-)

test/index.js

@@ -8,7 +8,3 @@ /** @jsx jsx */
 import { jsx, ThemeProvider, useThemeUI } from '@theme-ui/core'
-import {
-  ColorModeProvider,
-  useColorMode,
-  InitializeColorMode,
-} from '../src'
+import { ColorModeProvider, useColorMode, InitializeColorMode } from '../src'
 
@@ -42,5 +38,5 @@ const STORAGE_KEY = 'theme-ui-color-mode'
                 text: 'white',
-              }
-            }
-          }
+              },
+            },
+          },
         }}>
@@ -72,4 +68,4 @@ <ColorModeProvider>
               dark: {},
-            }
-          }
+            },
+          },
         }}>
@@ -576,6 +572,28 @@ <ColorModeProvider>
 test('InitializeColorMode renders', () => {
-  const json = renderJSON(
-    <InitializeColorMode />
-  )
+  const json = renderJSON(<InitializeColorMode />)
   expect(json).toMatchSnapshot()
 })
+
+test('warns when localStorage is disabled', () => {
+  Object.defineProperty(window, 'localStorage', {
+    get: jest.fn(() => {
+      throw 'SecurityError: The operation is insecure.'
+    }),
+  })
+
+  let mode
+  const Consumer = props => {
+    const [colorMode] = useColorMode()
+    mode = colorMode
+    return false
+  }
+
+  render(
+    <ThemeProvider>
+      <ColorModeProvider>
+        <Consumer />
+      </ColorModeProvider>
+    </ThemeProvider>
+  )
+  expect(mode).toBe('default')
+})

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82424

increased by3.67%

Lines of code

1420

increased by4.34%

Dependency changes

• Updated@theme-ui/core@^0.3.0

• Updated@theme-ui/css@^0.3.0