ember-primitives 0.54.0 → 0.55.0

package/dist/color-scheme.js

@@ -153,6 +153,30 @@ function styleOf(element) {
   return document.documentElement.style;
 }
 sync();
+window.addEventListener('storage', e => {
+  try {
+    if (e.key !== LOCAL_PREF_KEY) return;
+
+    // If the key was removed in another tab, fall back to system preference
+    if (e.newValue === null) {
+      if (prefers.dark()) {
+        colorScheme.update('dark');
+        return;
+      } else if (prefers.light()) {
+        colorScheme.update('light');
+        return;
+      }
+
+      // default to light
+      colorScheme.update('light');
+      return;
+    }
+    const newScheme = e.newValue;
+    colorScheme.update(newScheme);
+  } catch {
+    // swallow errors from storage event handling
+  }
+});
 
 export { colorScheme, getColorScheme, localPreference, prefers, removeColorScheme, setColorScheme, sync };
 //# sourceMappingURL=color-scheme.js.map

package/dist/color-scheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-scheme.js","sources":["../src/color-scheme.ts"],"sourcesContent":["import { waitForPromise } from '@ember/test-waiters';\n\nimport { cell } from 'ember-resources';\n\nconst _colorScheme = cell<string | undefined>();\n\nlet callbacks: Set<(colorScheme: string) => void> = new Set();\n\nasync function runCallbacks(theme: string) {\n  await Promise.resolve();\n\n  for (const callback of callbacks.values()) {\n    callback(theme);\n  }\n}\n\n/**\n * Object for managing the color scheme\n */\nexport const colorScheme = {\n  /**\n   * Set's the current color scheme to the passed value\n   */\n  update: (value: string) => {\n    colorScheme.current = value;\n\n    void waitForPromise(runCallbacks(value));\n  },\n\n  on: {\n    /**\n     * register a function to be called when the color scheme changes.\n     */\n    update: (callback: (colorScheme: string) => void) => {\n      callbacks.add(callback);\n    },\n  },\n  off: {\n    /**\n     * unregister a function that would have been called when the color scheme changes.\n     */\n    update: (callback: (colorScheme: string) => void) => {\n      callbacks.delete(callback);\n    },\n  },\n\n  /**\n   * the current valuel of the \"color scheme\"\n   */\n  get current(): string | undefined {\n    return _colorScheme.current;\n  },\n  set current(value: string | undefined) {\n    _colorScheme.current = value;\n\n    if (!value) {\n      localPreference.delete();\n\n      return;\n    }\n\n    localPreference.update(value);\n    setColorScheme(value);\n  },\n\n  get isDark() {\n    return _colorScheme.current === 'dark';\n  },\n  get isLight() {\n    return _colorScheme.current !== 'dark';\n  },\n};\n\n/**\n * Synchronizes state of `colorScheme` with the users preferences as well as reconciles with previously set theme in local storage.\n *\n * This may only be called once per app.\n */\nexport function sync() {\n  /**\n   * reset the callbacks\n   */\n  callbacks = new Set();\n\n  /**\n   * If local prefs are set, then we don't care what prefers-color-scheme is\n   */\n  const userPreference = localPreference.read();\n\n  if (userPreference) {\n    setColorScheme(userPreference);\n    _colorScheme.current = userPreference;\n\n    return;\n  }\n\n  if (prefers.dark()) {\n    setColorScheme('dark');\n    _colorScheme.current = 'dark';\n  } else if (prefers.light()) {\n    setColorScheme('light');\n    _colorScheme.current = 'light';\n  }\n}\n\nconst queries = {\n  dark: window.matchMedia('(prefers-color-scheme: dark)'),\n  light: window.matchMedia('(prefers-color-scheme: light)'),\n  none: window.matchMedia('(prefers-color-scheme: no-preference)'),\n};\n\nqueries.dark.addEventListener('change', (e) => {\n  const mode = e.matches ? 'dark' : 'light';\n\n  colorScheme.update(mode);\n});\n\n/**\n * Helper methods to determining what the user's preferred color scheme is\n * based on the system preferences rather than the users explicit preference.\n */\nexport const prefers = {\n  dark: () => queries.dark.matches,\n  light: () => queries.light.matches,\n  none: () => queries.none.matches,\n  custom: (name: string) => window.matchMedia(`(prefers-color-scheme: ${name})`).matches,\n};\n\nconst LOCAL_PREF_KEY = 'ember-primitives/color-scheme#local-preference';\n\n/**\n * Helper methods for working with the color scheme preference in local storage\n */\nexport const localPreference = {\n  isSet: () => Boolean(localPreference.read()),\n  read: () => localStorage.getItem(LOCAL_PREF_KEY),\n  update: (value: string) => localStorage.setItem(LOCAL_PREF_KEY, value),\n  delete: () => localStorage.removeItem(LOCAL_PREF_KEY),\n};\n\n/**\n * For the given element, returns the `color-scheme` of that element.\n */\nexport function getColorScheme(element?: HTMLElement) {\n  const style = styleOf(element);\n\n  return style.getPropertyValue('color-scheme');\n}\n\nexport function setColorScheme(element: HTMLElement, value: string): void;\nexport function setColorScheme(value: string): void;\n\nexport function setColorScheme(...args: [string] | [HTMLElement, string]): void {\n  if (typeof args[0] === 'string') {\n    styleOf().setProperty('color-scheme', args[0]);\n\n    return;\n  }\n\n  if (typeof args[1] === 'string') {\n    styleOf(args[0]).setProperty('color-scheme', args[1]);\n\n    return;\n  }\n\n  throw new Error(`Invalid arity, expected up to 2 args, received ${args.length}`);\n}\n\n/**\n * Removes the `color-scheme` from the given element\n */\nexport function removeColorScheme(element?: HTMLElement) {\n  const style = styleOf(element);\n\n  style.removeProperty('color-scheme');\n}\n\nfunction styleOf(element?: HTMLElement) {\n  if (element) {\n    return element.style;\n  }\n\n  return document.documentElement.style;\n}\n\nsync();\n"],"names":["_colorScheme","cell","callbacks","Set","runCallbacks","theme","Promise","resolve","callback","values","colorScheme","update","value","current","waitForPromise","on","add","off","delete","localPreference","setColorScheme","isDark","isLight","sync","userPreference","read","prefers","dark","light","queries","window","matchMedia","none","addEventListener","e","mode","matches","custom","name","LOCAL_PREF_KEY","isSet","Boolean","localStorage","getItem","setItem","removeItem","getColorScheme","element","style","styleOf","getPropertyValue","args","setProperty","Error","length","removeColorScheme","removeProperty","document","documentElement"],"mappings":"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"}
+{"version":3,"file":"color-scheme.js","sources":["../src/color-scheme.ts"],"sourcesContent":["import { waitForPromise } from '@ember/test-waiters';\n\nimport { cell } from 'ember-resources';\n\nconst _colorScheme = cell<string | undefined>();\n\nlet callbacks: Set<(colorScheme: string) => void> = new Set();\n\nasync function runCallbacks(theme: string) {\n  await Promise.resolve();\n\n  for (const callback of callbacks.values()) {\n    callback(theme);\n  }\n}\n\n/**\n * Object for managing the color scheme\n */\nexport const colorScheme = {\n  /**\n   * Set's the current color scheme to the passed value\n   */\n  update: (value: string) => {\n    colorScheme.current = value;\n\n    void waitForPromise(runCallbacks(value));\n  },\n\n  on: {\n    /**\n     * register a function to be called when the color scheme changes.\n     */\n    update: (callback: (colorScheme: string) => void) => {\n      callbacks.add(callback);\n    },\n  },\n  off: {\n    /**\n     * unregister a function that would have been called when the color scheme changes.\n     */\n    update: (callback: (colorScheme: string) => void) => {\n      callbacks.delete(callback);\n    },\n  },\n\n  /**\n   * the current valuel of the \"color scheme\"\n   */\n  get current(): string | undefined {\n    return _colorScheme.current;\n  },\n  set current(value: string | undefined) {\n    _colorScheme.current = value;\n\n    if (!value) {\n      localPreference.delete();\n\n      return;\n    }\n\n    localPreference.update(value);\n    setColorScheme(value);\n  },\n\n  get isDark() {\n    return _colorScheme.current === 'dark';\n  },\n  get isLight() {\n    return _colorScheme.current !== 'dark';\n  },\n};\n\n/**\n * Synchronizes state of `colorScheme` with the users preferences as well as reconciles with previously set theme in local storage.\n *\n * This may only be called once per app.\n */\nexport function sync() {\n  /**\n   * reset the callbacks\n   */\n  callbacks = new Set();\n\n  /**\n   * If local prefs are set, then we don't care what prefers-color-scheme is\n   */\n  const userPreference = localPreference.read();\n\n  if (userPreference) {\n    setColorScheme(userPreference);\n    _colorScheme.current = userPreference;\n\n    return;\n  }\n\n  if (prefers.dark()) {\n    setColorScheme('dark');\n    _colorScheme.current = 'dark';\n  } else if (prefers.light()) {\n    setColorScheme('light');\n    _colorScheme.current = 'light';\n  }\n}\n\nconst queries = {\n  dark: window.matchMedia('(prefers-color-scheme: dark)'),\n  light: window.matchMedia('(prefers-color-scheme: light)'),\n  none: window.matchMedia('(prefers-color-scheme: no-preference)'),\n};\n\nqueries.dark.addEventListener('change', (e) => {\n  const mode = e.matches ? 'dark' : 'light';\n\n  colorScheme.update(mode);\n});\n\n/**\n * Helper methods to determining what the user's preferred color scheme is\n * based on the system preferences rather than the users explicit preference.\n */\nexport const prefers = {\n  dark: () => queries.dark.matches,\n  light: () => queries.light.matches,\n  none: () => queries.none.matches,\n  custom: (name: string) => window.matchMedia(`(prefers-color-scheme: ${name})`).matches,\n};\n\nconst LOCAL_PREF_KEY = 'ember-primitives/color-scheme#local-preference';\n\n/**\n * Helper methods for working with the color scheme preference in local storage\n */\nexport const localPreference = {\n  isSet: () => Boolean(localPreference.read()),\n  read: () => localStorage.getItem(LOCAL_PREF_KEY),\n  update: (value: string) => localStorage.setItem(LOCAL_PREF_KEY, value),\n  delete: () => localStorage.removeItem(LOCAL_PREF_KEY),\n};\n\n/**\n * For the given element, returns the `color-scheme` of that element.\n */\nexport function getColorScheme(element?: HTMLElement) {\n  const style = styleOf(element);\n\n  return style.getPropertyValue('color-scheme');\n}\n\nexport function setColorScheme(element: HTMLElement, value: string): void;\nexport function setColorScheme(value: string): void;\n\nexport function setColorScheme(...args: [string] | [HTMLElement, string]): void {\n  if (typeof args[0] === 'string') {\n    styleOf().setProperty('color-scheme', args[0]);\n\n    return;\n  }\n\n  if (typeof args[1] === 'string') {\n    styleOf(args[0]).setProperty('color-scheme', args[1]);\n\n    return;\n  }\n\n  throw new Error(`Invalid arity, expected up to 2 args, received ${args.length}`);\n}\n\n/**\n * Removes the `color-scheme` from the given element\n */\nexport function removeColorScheme(element?: HTMLElement) {\n  const style = styleOf(element);\n\n  style.removeProperty('color-scheme');\n}\n\nfunction styleOf(element?: HTMLElement) {\n  if (element) {\n    return element.style;\n  }\n\n  return document.documentElement.style;\n}\n\nsync();\n\nwindow.addEventListener('storage', (e: StorageEvent) => {\n  try {\n    if (e.key !== LOCAL_PREF_KEY) return;\n\n    // If the key was removed in another tab, fall back to system preference\n    if (e.newValue === null) {\n      if (prefers.dark()) {\n        colorScheme.update('dark');\n\n        return;\n      } else if (prefers.light()) {\n        colorScheme.update('light');\n\n        return;\n      }\n\n      // default to light\n      colorScheme.update('light');\n\n      return;\n    }\n\n    const newScheme = e.newValue;\n\n    colorScheme.update(newScheme);\n  } catch {\n    // swallow errors from storage event handling\n  }\n});\n"],"names":["_colorScheme","cell","callbacks","Set","runCallbacks","theme","Promise","resolve","callback","values","colorScheme","update","value","current","waitForPromise","on","add","off","delete","localPreference","setColorScheme","isDark","isLight","sync","userPreference","read","prefers","dark","light","queries","window","matchMedia","none","addEventListener","e","mode","matches","custom","name","LOCAL_PREF_KEY","isSet","Boolean","localStorage","getItem","setItem","removeItem","getColorScheme","element","style","styleOf","getPropertyValue","args","setProperty","Error","length","removeColorScheme","removeProperty","document","documentElement","key","newValue","newScheme"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-primitives",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "description": "Making apps easier to build",
   "keywords": [
     "ember-addon"

package/src/color-scheme.ts

@@ -184,3 +184,33 @@ function styleOf(element?: HTMLElement) {
 }
 
 sync();
+
+window.addEventListener('storage', (e: StorageEvent) => {
+  try {
+    if (e.key !== LOCAL_PREF_KEY) return;
+
+    // If the key was removed in another tab, fall back to system preference
+    if (e.newValue === null) {
+      if (prefers.dark()) {
+        colorScheme.update('dark');
+
+        return;
+      } else if (prefers.light()) {
+        colorScheme.update('light');
+
+        return;
+      }
+
+      // default to light
+      colorScheme.update('light');
+
+      return;
+    }
+
+    const newScheme = e.newValue;
+
+    colorScheme.update(newScheme);
+  } catch {
+    // swallow errors from storage event handling
+  }
+});