switch to microbundle

.eslintrc.json

@@ -1,19 +1,16 @@
 {
   "extends": [
     "@jakejarvis/eslint-config",
-    "plugin:compat/recommended",
+    "plugin:@typescript-eslint/recommended"
-    "plugin:import/recommended"
   ],
-  "parser": "@babel/eslint-parser",
+  "plugins": [
-  "parserOptions": {
+    "@typescript-eslint"
-    "requireConfigFile": false
+  ],
-  },
+  "parser": "@typescript-eslint/parser",
   "env": {
-    "browser": true,
+    "browser": true
-    "node": true
   },
   "ignorePatterns": [
-    "*.d.ts",
     "dist/**"
   ]
 }

.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: '14.x'
+          node-version: 16.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,20 +3,18 @@ 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: 14
+          node-version: 16.x
-        registry-url: https://registry.npmjs.org/
+          registry-url: https://registry.npmjs.org/
-    - env:
+      - run: yarn install --frozen-lockfile
-        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - run: yarn publish
-      run: |
+        env:
-        yarn install --frozen-lockfile
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        yarn publish

README.md

@@ -1,8 +1,7 @@
 # 🌓 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)
-[![npm](https://img.shields.io/npm/v/dark-mode-switcheroo?logo=npm)](https://www.npmjs.com/package/dark-mode-switcheroo)
+[![npm](https://img.shields.io/npm/v/dark-mode-switcheroo)](https://www.npmjs.com/package/dark-mode-switcheroo)
-[![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)
 

package.json

@@ -17,41 +17,29 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/dark-mode.cjs.js",
+  "source": "./src/dark-mode.ts",
+  "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.js",
+    "require": "./dist/dark-mode.cjs",
     "import": "./dist/dark-mode.esm.js",
     "browser": "./dist/dark-mode.min.js"
   },
+  "types": "./dist/dark-mode.d.ts",
   "scripts": {
-    "build": "rollup -c",
+    "build": "microbundle --format cjs,esm,umd --name 'darkMode'",
-    "watch": "rollup -c -w",
     "lint": "eslint .",
     "prepublishOnly": "yarn build"
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/eslint-parser": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
     "@jakejarvis/eslint-config": "*",
-    "@rollup/plugin-babel": "^5.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.0.0",
+    "@typescript-eslint/parser": "^5.3.1",
-    "@rollup/plugin-eslint": "^8.0.1",
+    "eslint": "^8.2.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
+    "microbundle": "^0.14.1",
-    "builtin-modules": "^3.2.0",
+    "typescript": "^4.4.4"
-    "eslint": "^8.0.0",
-    "eslint-plugin-compat": "^3.13.0",
-    "eslint-plugin-import": "^2.25.2",
-    "rollup": "^2.58.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-filesize": "^9.1.1",
-    "rollup-plugin-node-externals": "^2.2.0",
-    "rollup-plugin-terser": "^7.0.2"
   },
   "keywords": [
     "front-end",

rollup.config.js

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

src/dark-mode.ts

@@ -1,4 +1,12 @@
-export function init(options) {
+export function init(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
@@ -19,7 +27,7 @@ export function init(options) {
   let active = defaultTheme === dark;
 
   // receives a class name and switches <body> to it
-  const activateTheme = function (theme, remember) {
+  const activateTheme = function (theme: string, remember?: boolean) {
     // optional onChange callback function passed as option
     if (typeof options.onChange === "function") {
       options.onChange(theme, toggle);
@@ -42,7 +50,7 @@ export function init(options) {
   // 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) {
+    const prefers = function (colorScheme: "dark" | "light") {
       // https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
       return `(prefers-color-scheme: ${colorScheme})`;
     };

src/index.d.ts

@@ -1,9 +0,0 @@
-export function init(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;