.editorconfig

@@ -1,17 +0,0 @@
-# http://editorconfig.org
-
-# this file is the top-most editorconfig file
-root = true
-
-# all files
-[*]
-charset = utf-8
-end_of_line = lf
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-# site content
-[*.md]
-trim_trailing_whitespace = false

.eslintrc.json

@@ -1,16 +1,18 @@
 {
   "extends": [
-    "@jakejarvis/eslint-config",
+    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:compat/recommended"
   ],
-  "plugins": [
-    "@typescript-eslint"
-  ],
-  "parser": "@typescript-eslint/parser",
   "env": {
-    "browser": true
+    "browser": true,
+    "node": true
   },
-  "ignorePatterns": [
+  "parserOptions": {
-    "dist/**"
+    "ecmaVersion": 2015,
-  ]
+    "sourceType": "module"
+  },
+  "rules": {
+    "quotes": ["error", "double"],
+    "semi": ["error", "always"]
+  }
 }

.gitattributes

@@ -1,2 +0,0 @@
-# Set default behavior to automatically normalize line endings.
-* text=auto eol=lf

.github/workflows/ci.yml

@@ -3,17 +3,17 @@ name: CI
 on:
   push:
     branches:
-      - main
+    - main
   pull_request:
 
 jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+    - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v2
-        with:
+      with:
-          node-version: 16.x
+        node-version: '14.x'
-      - run: yarn install --frozen-lockfile
+    - run: yarn install --frozen-lockfile
-      - run: yarn lint
+    - run: yarn lint
-      - run: yarn build
+    - run: yarn build

.github/workflows/release.yml

@@ -3,18 +3,36 @@ name: Release
 on:
   push:
     tags:
-      - 'v*'
+    - '*'
 
 jobs:
   npm:
+    name: Publish to NPM
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+    - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v2
-        with:
+      with:
-          node-version: 16.x
+        node-version: 14
-          registry-url: https://registry.npmjs.org/
+        registry-url: https://registry.npmjs.org/
-      - run: yarn install --frozen-lockfile
+    - env:
-      - run: yarn publish
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        env:
+      run: |
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        yarn install --frozen-lockfile
+        yarn publish
+
+  gpr:
+    name: Publish to GitHub
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: 14
+        registry-url: https://npm.pkg.github.com/
+        scope: '@jakejarvis'
+    - env:
+        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: |
+        yarn install --frozen-lockfile
+        yarn publish

README.md

@@ -1,9 +1,10 @@
 # 🌓 Dark Mode Switcheroo™
 
-[![CI](https://github.com/jakejarvis/dark-mode/actions/workflows/ci.yml/badge.svg)](https://github.com/jakejarvis/dark-mode/actions/workflows/ci.yml)
+[![CI](https://github.com/jakejarvis/dark-mode.js/actions/workflows/ci.yml/badge.svg)](https://github.com/jakejarvis/dark-mode.js/actions/workflows/ci.yml)
-[![npm](https://img.shields.io/npm/v/dark-mode-switcheroo)](https://www.npmjs.com/package/dark-mode-switcheroo)
+[![npm (scoped)](https://img.shields.io/npm/v/@jakejarvis/dark-mode)](https://www.npmjs.com/package/@jakejarvis/dark-mode)
+[![MIT License](https://img.shields.io/github/license/jakejarvis/dark-mode?color=violet)](LICENSE)
 
-Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. Zero dependencies and [only ~500 bytes gzipped!](https://bundlephobia.com/package/dark-mode-switcheroo)
+Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. Zero dependencies and [only ~500 bytes gzipped!](https://bundlephobia.com/package/@jakejarvis/dark-mode)
 
 - [View the example.](https://jakejarvis.github.io/dark-mode/)
 - [Read the blog post.](https://jarv.is/notes/dark-mode/)
@@ -20,7 +21,6 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
 - **`default`**: The initial `<body>` class hard-coded into the HTML template. (optional, default: `"light"`)
 - **`storageKey`**: Name of the `localStorage` key holding the user's preference. (optional, default: `"dark_mode_pref"`)
 - **`onInit([toggle])`**: Callback function executed at the end of initialization. The toggle above is passed in if set. (optional, default: `null`)
-- **`onUserToggle([toggle])`**: Callback function executed when a user manually interacts with the toggle button. The toggle above (if set) is passed in. (optional, default: `null`)
 - **`onChange([theme, toggle])`**: Callback function executed when theme is switched. The new theme and the toggle above (if set) are passed in. (optional, default: `null`)
 
 ### Browser
@@ -28,7 +28,7 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
 ```html
 <button class="dark-mode-toggle" style="visibility: hidden;">💡 Click to see the light... or not.</button>
 
-<script src="https://unpkg.com/dark-mode-switcheroo/dist/dark-mode.min.js"></script>
+<script src="https://unpkg.com/@jakejarvis/dark-mode/dist/dark-mode.min.js"></script>
 <script>
   window.darkMode.init({
     toggle: document.querySelector(".dark-mode-toggle"),
@@ -51,15 +51,15 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
 ### Node
 
 ```bash
-npm install dark-mode-switcheroo
+npm install @jakejarvis/dark-mode
 # or...
-yarn add dark-mode-switcheroo
+yarn add @jakejarvis/dark-mode
 ```
 
 #### Module via `import`
 
 ```js
-import { init } from "dark-mode-switcheroo";
+import { init } from "@jakejarvis/dark-mode";
 
 init({
   // ...same as browser.
@@ -69,7 +69,7 @@ init({
 #### CommonJS via `require()`
 
 ```js
-const darkMode = require("dark-mode-switcheroo");
+const darkMode = require("@jakejarvis/dark-mode");
 
 darkMode.init({
   // ...same as browser.

example/index.html

@@ -47,7 +47,7 @@
 
   <p><a href="https://github.com/jakejarvis/dark-mode" target="_blank" rel="noopener">View the source code</a> or <a href="https://jarv.is/notes/dark-mode/" target="_blank" rel="noopener">read the post</a>.</p>
 
-  <script src="../dist/dark-mode.min.js"></script> <!-- or use CDN: https://unpkg.com/dark-mode-switcheroo/dist/dark-mode.min.js -->
+  <script src="../dist/dark-mode.min.js"></script> <!-- or use CDN: https://unpkg.com/@jakejarvis/dark-mode/dist/dark-mode.min.js -->
   <script>
     window.darkMode.init({
       toggle: document.querySelector(".dark-mode-toggle"),

package.json

@@ -1,9 +1,8 @@
 {
-  "name": "dark-mode-switcheroo",
+  "name": "@jakejarvis/dark-mode",
-  "version": "0.10.0",
+  "version": "0.7.1",
   "description": "🌓 Simple CSS theme switching with saved preferences and automatic OS setting detection",
   "license": "MIT",
-  "homepage": "https://jrvs.io/darkmode",
   "author": {
     "name": "Jake Jarvis",
     "email": "jake@jarv.is",
@@ -14,35 +13,40 @@
     "url": "https://github.com/jakejarvis/dark-mode.git"
   },
   "type": "module",
+  "sideEffects": false,
   "files": [
     "dist"
   ],
-  "source": "./src/dark-mode.ts",
+  "main": "./dist/dark-mode.cjs.js",
-  "main": "./dist/dark-mode.cjs",
   "module": "./dist/dark-mode.esm.js",
   "unpkg": "./dist/dark-mode.min.js",
+  "types": "./dist/dark-mode.d.ts",
   "exports": {
-    "require": "./dist/dark-mode.cjs",
+    "require": "./dist/dark-mode.cjs.js",
     "import": "./dist/dark-mode.esm.js",
     "browser": "./dist/dark-mode.min.js"
   },
-  "types": "./dist/dark-mode.d.ts",
   "scripts": {
-    "build": "microbundle --format cjs,esm,umd --name 'darkMode'",
+    "build": "rollup -c",
-    "lint": "eslint .",
+    "lint": "eslint src/**/*.js",
-    "prepublishOnly": "yarn build"
+    "prepublishOnly": "rm -rf dist && yarn build"
   },
   "dependencies": {},
   "devDependencies": {
-    "@jakejarvis/eslint-config": "*",
+    "@babel/core": "^7.15.0",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@babel/preset-env": "^7.15.0",
-    "@typescript-eslint/parser": "^5.3.1",
+    "@rollup/plugin-babel": "^5.3.0",
-    "eslint": "^8.2.0",
+    "@rollup/plugin-eslint": "^8.0.1",
-    "microbundle": "^0.14.1",
+    "@rollup/plugin-node-resolve": "^13.0.4",
-    "typescript": "^4.4.4"
+    "eslint": "^7.32.0",
+    "eslint-plugin-compat": "^3.13.0",
+    "rollup": "^2.56.3",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-filesize": "^9.1.1",
+    "rollup-plugin-terser": "^7.0.2"
   },
   "keywords": [
-    "front-end",
+    "frontend",
     "dark mode",
     "theme",
     "appearance",

rollup.config.js

@@ -0,0 +1,88 @@
+import pkg from "./package.json";
+import resolve from "@rollup/plugin-node-resolve";
+import { babel } from "@rollup/plugin-babel";
+import { terser } from "rollup-plugin-terser";
+import eslint from "@rollup/plugin-eslint";
+import filesize from "rollup-plugin-filesize";
+import copy from "rollup-plugin-copy";
+
+const banner = `/*! Dark Mode Switcheroo v${pkg.version} | MIT License | jrvs.io/darkmode */`;
+
+export default [
+  {
+    // universal (browser and node)
+    input: "src/index.js",
+    output: [
+      {
+        name: "darkMode",
+        file: "dist/dark-mode.js",
+        format: "umd",
+        exports: "named",
+        esModule: false,
+        banner: banner,
+      },
+      {
+        name: "darkMode",
+        file: "dist/dark-mode.min.js",
+        format: "umd",
+        exports: "named",
+        esModule: false,
+        plugins: [
+          terser({
+            output: {
+              preamble: banner,
+            },
+          }),
+        ],
+      },
+    ],
+    plugins: [
+      copy({
+        // clearly this isn't really typescript, so we need to manually copy the type definition file
+        targets: [
+          {
+            src: "src/index.d.ts",
+            dest: "dist",
+            rename: "dark-mode.d.ts",
+          },
+        ],
+      }),
+      resolve(),
+      eslint(),
+      babel({
+        babelHelpers: "bundled",
+        presets: [["@babel/preset-env"]],
+        exclude: ["node_modules/**"],
+      }),
+      filesize(),
+    ],
+  },
+  {
+    // modules
+    input: "src/index.js",
+    output: [
+      {
+        // ES6 module (import)
+        file: "dist/dark-mode.esm.js",
+        format: "esm",
+        exports: "named",
+        banner: banner,
+      },
+      {
+        // commonjs (require)
+        file: "dist/dark-mode.cjs.js",
+        format: "cjs",
+        exports: "named",
+        banner: banner,
+      },
+    ],
+    plugins: [
+      resolve(),
+      babel({
+        babelHelpers: "bundled",
+        exclude: ["node_modules/**"],
+      }),
+      filesize(),
+    ],
+  },
+];

src/index.d.ts

@@ -0,0 +1,8 @@
+export function init(options?: {
+  toggle?: HTMLElement;
+  classes?: { dark: string, light: string };
+  default?: string;
+  storageKey?: string;
+  onInit?: (toggle?: HTMLElement) => unknown;
+  onChange?: (theme?: string, toggle?: HTMLElement) => unknown;
+}): void;

src/index.js

@@ -1,12 +1,4 @@
-export function init(options: {
+const init = function (options) {
-  toggle?: Element | null;
-  classes?: { dark: string, light: string };
-  default?: string;
-  storageKey?: string;
-  onInit?: (toggle?: Element | null) => unknown;
-  onUserToggle?: (toggle?: Element | null) => unknown;
-  onChange?: (theme: string, toggle?: Element | null) => unknown;
-}): void {
   options = options || {};
 
   // use a specified element(s) to trigger swap when clicked
@@ -27,12 +19,7 @@ export function init(options: {
   let active = defaultTheme === dark;
 
   // receives a class name and switches <body> to it
-  const activateTheme = function (theme: string, remember?: boolean) {
+  const activateTheme = function (theme, remember) {
-    // optional onChange callback function passed as option
-    if (typeof options.onChange === "function") {
-      options.onChange(theme, toggle);
-    }
-
     document.body.classList.remove(dark, light);
     document.body.classList.add(theme);
     active = theme === dark;
@@ -40,17 +27,17 @@ export function init(options: {
     if (remember) {
       localStorage.setItem(storageKey, theme);
     }
-  };
 
-  // optional onInit callback function passed as option
+    // optional onChange callback function passed as option
-  if (typeof options.onInit === "function") {
+    if (typeof options.onChange === "function") {
-    options.onInit(toggle);
+      options.onChange(theme, toggle);
-  }
+    }
+  };
 
   // user has never clicked the button, so go by their OS preference until/if they do so
   if (!pref) {
     // returns media query selector syntax
-    const prefers = function (colorScheme: "dark" | "light") {
+    const prefers = function (colorScheme) {
       // https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
       return `(prefers-color-scheme: ${colorScheme})`;
     };
@@ -88,11 +75,6 @@ export function init(options: {
   if (toggle !== null) {
     // handle toggle click
     toggle.addEventListener("click", function () {
-      // optional onUserToggle callback function passed as option
-      if (typeof options.onUserToggle === "function") {
-        options.onUserToggle(toggle);
-      }
-
       // switch to the opposite theme & save preference in local storage
       if (active) {
         activateTheme(light, true);
@@ -101,4 +83,11 @@ export function init(options: {
       }
     });
   }
-}
+
+  // optional onInit callback function passed as option
+  if (typeof options.onInit === "function") {
+    options.onInit(toggle);
+  }
+};
+
+export { init };