@carry0987/darkmode - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

dist/darkMode.esm.js

@@ -8,5 +8,2 @@ function reportError(...error) {
     if (typeof ele !== 'string') {
-        if (mode === 'all') {
-            return [ele];
-        }
         return ele;
@@ -29,4 +26,7 @@ }
 function isObject(item) {
-    return typeof item === 'object' && item !== null && !Array.isArray(item);
+    return typeof item === 'object' && item !== null && !isArray(item);
 }
+function isArray(item) {
+    return Array.isArray(item);
+}
 function deepMerge(target, ...sources) {
@@ -42,5 +42,5 @@ if (!sources.length)
                 const targetKey = key;
-                if (isObject(value)) {
+                if (isObject(value) || isArray(value)) {
                     if (!target[targetKey] || typeof target[targetKey] !== 'object') {
-                        target[targetKey] = {};
+                        target[targetKey] = isArray(value) ? [] : {};
                     }
@@ -82,3 +82,3 @@ deepMerge(target[targetKey], value);
     static instance = null;
-    static version = '1.1.3';
+    static version = '1.2.0';
     darkModeToggleButton;
@@ -96,3 +96,3 @@ options;
         darkModeMediaQueryKey: '--color-mode',
-        rootElementDarkModeAttributeName: 'data-user-color-scheme',
+        rootElementDarkModeAttributeName: 'data-user-color-scheme'
     };
@@ -105,7 +105,7 @@ // Methods for external use
         dark: true,
-        light: true,
+        light: true
     };
     invertDarkModeObj = {
         dark: 'light',
-        light: 'dark',
+        light: 'dark'
     };
@@ -231,3 +231,3 @@ constructor(options = {}) {
     listenToSystemDarkModeChange() {
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
             const hasCustomSetting = getLocalValue(this.options.darkModeStorageKey);
@@ -283,2 +283,10 @@ if (hasCustomSetting === null) {
 
-export { DarkMode as default };
+var interfaces = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+var types = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+export { DarkMode, interfaces as DarkModeInterface, types as DarkModeType };

dist/darkMode.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).DarkMode=e()}(this,(function(){"use strict";function t(e,...o){if(!o.length)return e;const r=o.shift();if(r)for(const o in r)if(Object.prototype.hasOwnProperty.call(r,o)){const n=r[o],a=o;"object"!=typeof(i=n)||null===i||Array.isArray(i)?e[a]=n:(e[a]&&"object"==typeof e[a]||(e[a]={}),t(e[a],n))}var i;return t(e,...o)}function e(t,e,o=!0){o&&(e=JSON.stringify(e)),window.localStorage.setItem(t,e)}function o(t,e=!0){let o=window.localStorage.getItem(t);if(e)try{o=JSON.parse(o)}catch(t){!function(...t){console.error(...t)}("Error while parsing stored json value: ",t)}return o}class r{static instance=null;static version="1.1.3";darkModeToggleButton;options;defaults={buttonSelector:null,onChange:t=>{},onDark:()=>{},onLight:()=>{},autoDetect:!0,preferSystem:!1,rootElement:document.documentElement,darkModeStorageKey:"user-color-scheme",darkModeMediaQueryKey:"--color-mode",rootElementDarkModeAttributeName:"data-user-color-scheme"};onChangeCallback=t=>{};onDarkCallback=()=>{};onLightCallback=()=>{};validColorModeKeys={dark:!0,light:!0};invertDarkModeObj={dark:"light",light:"dark"};constructor(t={}){if(r.instance)return r.instance;this.init(t),r.instance=this,Object.seal(this)}init(e){const o=t(this.defaults,e),{buttonSelector:i}=o;let n=null;if(null!==i&&(n=i instanceof HTMLElement?i:function(t,e,o){if("string"!=typeof t)return"all"===e?[t]:t;let r=document;return null===e&&o?r=o:e&&e instanceof Node&&"querySelector"in e?r=e:o&&o instanceof Node&&"querySelector"in o&&(r=o),"all"===e?r.querySelectorAll(t):r.querySelector(t)}(i),!n))throw new Error("ToggleButton could not be found with the selector provided.");o.autoDetect=!!o.preferSystem||o.autoDetect,this.options=o,this.darkModeToggleButton=n,this.onChangeCallback=this.options.onChange||this.onChangeCallback,this.onDarkCallback=this.options.onDark||this.onDarkCallback,this.onLightCallback=this.options.onLight||this.onLightCallback,this.setupDarkMode(),console.log(`DarkMode is loaded, version: ${r.version}`)}setupDarkMode(){this.options.preferSystem&&this.resetRootDarkModeAttribute();let t=this.options.preferSystem?null:o(this.options.darkModeStorageKey);null===t&&this.options.autoDetect?t=this.getModeFromSystemPreference():null===t&&(t="light"),this.applyCustomDarkModeSettings(t),"dark"===t?this.onDarkCallback():this.onLightCallback(),this.bindEvents(),(this.options.autoDetect||this.options.preferSystem)&&this.listenToSystemDarkModeChange()}bindEvents(){null!==this.darkModeToggleButton&&this.darkModeToggleButton.addEventListener("click",(()=>{const t=this.toggleCustomDarkMode();this.applyCustomDarkModeSettings(t),t&&(this.onChangeCallback(t),"dark"===t?this.onDarkCallback():"light"===t&&this.onLightCallback())}))}getModeFromSystemPreference(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}getModeFromCSSMediaQuery(){const t=getComputedStyle(this.options.rootElement).getPropertyValue(this.options.darkModeMediaQueryKey);return t.length?t.replace(/\"/g,"").trim():"dark"===t?"dark":"light"}resetRootDarkModeAttribute(){var t;this.options.rootElement.removeAttribute(this.options.rootElementDarkModeAttributeName),t=this.options.darkModeStorageKey,window.localStorage.removeItem(t)}applyCustomDarkModeSettings(t){const e=t||o(this.options.darkModeStorageKey)||this.getModeFromCSSMediaQuery();return this.validColorModeKeys[e]?this.options.rootElement.setAttribute(this.options.rootElementDarkModeAttributeName,e):this.resetRootDarkModeAttribute(),this.darkModeToggleButton&&this.darkModeToggleButton instanceof Element&&(this.darkModeToggleButton.classList.remove("dm-"+this.invertDarkModeObj[e]),this.darkModeToggleButton.classList.add("dm-"+e)),e}toggleCustomDarkMode(){let t=o(this.options.darkModeStorageKey);if(this.validColorModeKeys[t])t=this.invertDarkModeObj[t];else{if(null!==t)return;t=this.invertDarkModeObj[this.getModeFromCSSMediaQuery()]}return e(this.options.darkModeStorageKey,t),t}listenToSystemDarkModeChange(){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(t=>{if(null===o(this.options.darkModeStorageKey)){const e=t.matches?"dark":"light";this.applyCustomDarkModeSettings(e),this.onChangeCallback(e),"dark"===e?this.onDarkCallback():this.onLightCallback()}}))}destroy(){this.resetRootDarkModeAttribute()}switchMode(t){if(!this.validColorModeKeys[t])return;const o=this.applyCustomDarkModeSettings(t);o&&(this.onChangeCallback(o),"dark"===o?this.onDarkCallback():this.onLightCallback(),e(this.options.darkModeStorageKey,o))}set onChange(t){this.onChangeCallback=t}set onDark(t){this.onDarkCallback=t}set onLight(t){this.onLightCallback=t}}return r}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).darkModejs={})}(this,(function(t){"use strict";function e(t){return Array.isArray(t)}function o(t,...r){if(!r.length)return t;const i=r.shift();if(i)for(const r in i)if(Object.prototype.hasOwnProperty.call(i,r)){const a=i[r],s=r;"object"==typeof(n=a)&&null!==n&&!e(n)||e(a)?(t[s]&&"object"==typeof t[s]||(t[s]=e(a)?[]:{}),o(t[s],a)):t[s]=a}var n;return o(t,...r)}function r(t,e,o=!0){o&&(e=JSON.stringify(e)),window.localStorage.setItem(t,e)}function i(t,e=!0){let o=window.localStorage.getItem(t);if(e)try{o=JSON.parse(o)}catch(t){!function(...t){console.error(...t)}("Error while parsing stored json value: ",t)}return o}class n{static instance=null;static version="1.2.0";darkModeToggleButton;options;defaults={buttonSelector:null,onChange:t=>{},onDark:()=>{},onLight:()=>{},autoDetect:!0,preferSystem:!1,rootElement:document.documentElement,darkModeStorageKey:"user-color-scheme",darkModeMediaQueryKey:"--color-mode",rootElementDarkModeAttributeName:"data-user-color-scheme"};onChangeCallback=t=>{};onDarkCallback=()=>{};onLightCallback=()=>{};validColorModeKeys={dark:!0,light:!0};invertDarkModeObj={dark:"light",light:"dark"};constructor(t={}){if(n.instance)return n.instance;this.init(t),n.instance=this,Object.seal(this)}init(t){const e=o(this.defaults,t),{buttonSelector:r}=e;let i=null;if(null!==r&&(i=r instanceof HTMLElement?r:function(t,e,o){if("string"!=typeof t)return t;let r=document;return null===e&&o?r=o:e&&e instanceof Node&&"querySelector"in e?r=e:o&&o instanceof Node&&"querySelector"in o&&(r=o),"all"===e?r.querySelectorAll(t):r.querySelector(t)}(r),!i))throw new Error("ToggleButton could not be found with the selector provided.");e.autoDetect=!!e.preferSystem||e.autoDetect,this.options=e,this.darkModeToggleButton=i,this.onChangeCallback=this.options.onChange||this.onChangeCallback,this.onDarkCallback=this.options.onDark||this.onDarkCallback,this.onLightCallback=this.options.onLight||this.onLightCallback,this.setupDarkMode(),console.log(`DarkMode is loaded, version: ${n.version}`)}setupDarkMode(){this.options.preferSystem&&this.resetRootDarkModeAttribute();let t=this.options.preferSystem?null:i(this.options.darkModeStorageKey);null===t&&this.options.autoDetect?t=this.getModeFromSystemPreference():null===t&&(t="light"),this.applyCustomDarkModeSettings(t),"dark"===t?this.onDarkCallback():this.onLightCallback(),this.bindEvents(),(this.options.autoDetect||this.options.preferSystem)&&this.listenToSystemDarkModeChange()}bindEvents(){null!==this.darkModeToggleButton&&this.darkModeToggleButton.addEventListener("click",(()=>{const t=this.toggleCustomDarkMode();this.applyCustomDarkModeSettings(t),t&&(this.onChangeCallback(t),"dark"===t?this.onDarkCallback():"light"===t&&this.onLightCallback())}))}getModeFromSystemPreference(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}getModeFromCSSMediaQuery(){const t=getComputedStyle(this.options.rootElement).getPropertyValue(this.options.darkModeMediaQueryKey);return t.length?t.replace(/\"/g,"").trim():"dark"===t?"dark":"light"}resetRootDarkModeAttribute(){var t;this.options.rootElement.removeAttribute(this.options.rootElementDarkModeAttributeName),t=this.options.darkModeStorageKey,window.localStorage.removeItem(t)}applyCustomDarkModeSettings(t){const e=t||i(this.options.darkModeStorageKey)||this.getModeFromCSSMediaQuery();return this.validColorModeKeys[e]?this.options.rootElement.setAttribute(this.options.rootElementDarkModeAttributeName,e):this.resetRootDarkModeAttribute(),this.darkModeToggleButton&&this.darkModeToggleButton instanceof Element&&(this.darkModeToggleButton.classList.remove("dm-"+this.invertDarkModeObj[e]),this.darkModeToggleButton.classList.add("dm-"+e)),e}toggleCustomDarkMode(){let t=i(this.options.darkModeStorageKey);if(this.validColorModeKeys[t])t=this.invertDarkModeObj[t];else{if(null!==t)return;t=this.invertDarkModeObj[this.getModeFromCSSMediaQuery()]}return r(this.options.darkModeStorageKey,t),t}listenToSystemDarkModeChange(){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(t=>{if(null===i(this.options.darkModeStorageKey)){const e=t.matches?"dark":"light";this.applyCustomDarkModeSettings(e),this.onChangeCallback(e),"dark"===e?this.onDarkCallback():this.onLightCallback()}}))}destroy(){this.resetRootDarkModeAttribute()}switchMode(t){if(!this.validColorModeKeys[t])return;const e=this.applyCustomDarkModeSettings(t);e&&(this.onChangeCallback(e),"dark"===e?this.onDarkCallback():this.onLightCallback(),r(this.options.darkModeStorageKey,e))}set onChange(t){this.onChangeCallback=t}set onDark(t){this.onDarkCallback=t}set onLight(t){this.onLightCallback=t}}var a=Object.freeze({__proto__:null}),s=Object.freeze({__proto__:null});t.DarkMode=n,t.DarkModeInterface=a,t.DarkModeType=s}));

package.json

 {
   "name": "@carry0987/darkmode",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "A simple and lightweight JavaScript library for dark mode toggle with localStorage support.",
@@ -8,10 +8,12 @@ "type": "module",
   "module": "dist/darkMode.esm.js",
-  "types": "dist/darkMode.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "rollup --config rollup.config.js",
-    "build": "rollup --config rollup.config.js --environment BUILD:production"
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "umd": "./dist/darkMode.min.js",
+      "import": "./dist/darkMode.esm.js",
+      "types": "./dist/index.d.ts"
+    }
   },
   "files": [
-    "dist"
+    "dist/*"
   ],
@@ -32,13 +34,23 @@ "repository": {
   "devDependencies": {
-    "@carry0987/utils": "^3.2.14",
-    "@rollup/plugin-replace": "^5.0.5",
+    "@carry0987/utils": "^3.7.7",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "rollup": "^4.12.1",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^6.1.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.2"
+    "@rollup/plugin-typescript": "^12.1.0",
+    "happy-dom": "^15.7.4",
+    "prettier": "^3.3.3",
+    "rollup": "^4.24.0",
+    "rollup-plugin-delete": "^2.1.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "tslib": "^2.7.0",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.2"
+  },
+  "scripts": {
+    "format": "prettier --write \"src/**/*.{ts,scss}\" \"test/**/*.ts\"",
+    "start": "rollup --config rollup.config.ts --configPlugin typescript",
+    "build": "rollup --config rollup.config.ts --configPlugin typescript --environment BUILD:production",
+    "test": "vitest run"
   }
-}
+}

README.md

 # DarkMode
-[![version](https://img.shields.io/npm/v/@carry0987/darkmode.svg)](https://www.npmjs.com/package/@carry0987/darkmode)  
+[![version](https://img.shields.io/npm/v/@carry0987/darkmode.svg)](https://www.npmjs.com/package/@carry0987/darkmode)
+![CI](https://github.com/carry0987/DarkMode/actions/workflows/ci.yml/badge.svg)  
 A simple DarkMode switcher, written in TypeScript
@@ -7,3 +8,51 @@
 ```bash
-npm install @carry0987/darkmode
+pnpm i @carry0987/darkmode
 ```
+
+## Usage
+Here is a simple example to use DarkMode
+
+#### UMD
+```html
+<div class="container py-5">
+    <div id="app" class="d-flex flex-column justify-content-center align-items-center">
+        <h1 class="mb-4">DarkMode</h1>
+        <button id="btn-toggle-dark" class="darkmode-switch">Toggle Dark Mode</button>
+    </div>
+</div>
+<script src="dist/darkMode.min.js"></script>
+<script type="text/javascript">
+document.addEventListener('DOMContentLoaded', () => {
+    let darkmode = new darkModejs.DarkMode({
+        buttonSelector: '#btn-toggle-dark',
+        autoDetect: true,
+        preferSystem: false,
+        rootElement: document.documentElement,
+        darkModeStorageKey: 'user-color-scheme',
+        darkModeMediaQueryKey: '--color-mode',
+        rootElementDarkModeAttributeName: 'data-user-color-scheme',
+        onChange: () => {
+            console.log('onChange');
+        },
+        onDark() {
+            console.log('onDark');
+        },
+        onLight() {
+            console.log('onLight');
+        }
+    });
+    darkmode.onChange = (currentMode) => {
+        console.log('onChange, current mode: ' + currentMode);
+    };
+});
+</script>
+```
+
+#### ES Module
+```ts
+import { DarkMode } from '@carry0987/darkmode';
+
+let darkmode = new DarkMode({
+    //...
+});
+```

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21094

increased by13.56%

Lines of code

356

increased by4.71%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

58

increased by544.44%

Worsened metrics

Dev dependency count

14

increased by40%

No dependency changes