much simpler bundling with rollup, also generate separate ESM and CJS files

2025-04-25 14:05:22 -04:00 · 2021-08-04 19:16:33 -04:00 · 2021-08-04 19:16:33 -04:00 · eedd0a96e0
commit eedd0a96e0
parent 1c2b15d70f
10 changed files with 2411 additions and 984 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,11 +1,7 @@
 {
  "extends": [
    "eslint:recommended",
-    "plugin:compat/recommended",
-    "plugin:prettier/recommended"
-  ],
-  "plugins": [
-    "prettier"
+    "plugin:compat/recommended"
  ],
  "env": {
    "browser": true,
@ -15,5 +11,8 @@
    "ecmaVersion": 2015,
    "sourceType": "module"
  },
-  "rules": {}
+  "rules": {
+    "quotes": ["error", "double"],
+    "semi": ["error", "always"]
+  }
 }
--- a/.prettierrc
+++ b/.prettierrc
@ -1,6 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": false
-}
--- a/README.md
+++ b/README.md
@ -1,10 +1,10 @@
-# 🌓 Dark mode switcheroo
+# 🌓 Dark Mode Switcheroo™

 [![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 (scoped)](https://img.shields.io/npm/v/@jakejarvis/dark-mode)](https://www.npmjs.com/package/@jakejarvis/dark-mode)
-[![GitHub](https://img.shields.io/github/license/jakejarvis/dark-mode?color=violet)](LICENSE)
+[![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 ~700 bytes gzipped!
+Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. Zero dependencies and only ~600 bytes gzipped!

 - [View the example.](https://jakejarvis.github.io/dark-mode-example/)
 - [Read the blog post.](https://jarv.is/notes/dark-mode/)
@ -14,7 +14,7 @@ Very simple CSS dark/light mode toggler with saved preference via local storage

 ### Options

-`darkMode([...options])`
+`darkMode.init([...options])`

 - **toggle:** The clickable HTML element used to toggle between the two themes. (optional, default: `null`)
 - **classes:** An object containing the `<body>` class names for the light and dark themes. (optional, default: `{ light: "light", dark: "dark" }`)
@ -26,7 +26,7 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
 ```html
 <button class="dark-mode-toggle">💡 Click to see the light... or not.</button>

-<script src="https://unpkg.com/@jakejarvis/dark-mode/dist/index.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"),
@ -48,10 +48,26 @@ npm install @jakejarvis/dark-mode
 yarn add @jakejarvis/dark-mode
 ```

+#### Module via `import`
+
 ```js
-import darkMode from "@jakejarvis/dark-mode";
-// or:
-// const darkMode = require("@jakejarvis/dark-mode");
+import { init } from "@jakejarvis/dark-mode";
+
+init({
+  toggle: document.querySelector(".dark-mode-toggle"),
+  classes: {
+    light: "light",
+    dark: "dark",
+  },
+  default: "light",
+  storageKey: "dark_mode_pref",
+});
+```
+
+#### CommonJS via `require()`
+
+```js
+const darkMode = require("@jakejarvis/dark-mode");

 darkMode.init({
  toggle: document.querySelector(".dark-mode-toggle"),
@ -68,6 +84,7 @@ darkMode.init({

 - [ ] Support more than two themes
 - [ ] Add callback function `onChange` (or `onToggle` etc.) passed in as an option
+- [ ] Better readme docs

 ## License

--- a/example/index.html
+++ b/example/index.html
@ -13,7 +13,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/index.js"></script>
+  <script src="../dist/dark-mode.js"></script>
  <script>
    window.darkMode.init({
      toggle: document.querySelector(".dark-mode-toggle"),
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "@jakejarvis/dark-mode",
  "version": "0.4.0",
-  "description": "Super simple CSS theme switching with saved preferences and automatic OS setting detection",
+  "description": "🌓 Simple CSS theme switching with saved preferences and automatic OS setting detection",
  "license": "MIT",
  "author": {
    "name": "Jake Jarvis",
@ -12,33 +12,38 @@
    "type": "git",
    "url": "https://github.com/jakejarvis/dark-mode.git"
  },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/dark-mode.cjs.js",
+  "module": "dist/dark-mode.esm.js",
+  "unpkg": "dist/dark-mode.min.js",
+  "types": "dist/dark-mode.d.ts",
  "scripts": {
-    "build": "webpack --mode production",
+    "build": "rollup -c",
    "lint": "eslint src/**/*.js",
-    "prepublishOnly": "run-s lint build"
+    "prepublishOnly": "yarn build"
  },
  "dependencies": {},
  "devDependencies": {
-    "copy-webpack-plugin": "^9.0.1",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-eslint": "^8.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.4",
    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-compat": "^3.11.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
-    "terser-webpack-plugin": "^5.1.4",
-    "webpack": "^5.48.0",
-    "webpack-cli": "^4.7.2"
+    "rollup": "^2.55.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-filesize": "^9.1.1",
+    "rollup-plugin-terser": "^7.0.2"
  },
  "files": [
-    "dist/index.js",
-    "dist/index.d.ts"
+    "dist"
  ],
  "keywords": [
    "frontend",
    "dark mode",
+    "theme",
+    "appearance",
+    "design",
    "css"
  ]
 }
--- a/rollup.config.js
+++ b/rollup.config.js
@ -0,0 +1,87 @@
+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 | 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(),
+    ],
+  },
+];
--- a/src/index.d.ts
+++ b/src/index.d.ts
@ -1,10 +1,8 @@
-export as namespace darkMode;
-
-export interface DarkModeOptions {
+interface DarkModeOptions {
  toggle?: HTMLElement;
  classes?: { dark: string, light: string };
  default?: string;
  storageKey?: string;
 }

-export function init(options?: Partial<DarkModeOptions>): void;
+export function init(options?: DarkModeOptions): void;
--- a/src/index.js
+++ b/src/index.js
@ -1,6 +1,6 @@
 "use strict";

-const initializeDarkMode = function (options) {
+const init = function (options) {
  // { toggle, classes: { light, dark }, default, storageKey }
  options = options || {};

@ -101,4 +101,4 @@ const isStorageAvailable = function () {
  }
 };

-module.exports.init = initializeDarkMode;
+export { init };
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,38 +0,0 @@
-const webpack = require("webpack");
-const path = require("path");
-const CopyPlugin = require("copy-webpack-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
-
-module.exports = {
-  mode: "production",
-  entry: "./src/index.js",
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: "index.js",
-    library: {
-      name: "darkMode",
-      type: "umd",
-    },
-    globalObject: "this",
-  },
-  plugins: [
-    new webpack.BannerPlugin({
-      banner: "Dark mode switcheroo | MIT License | jrvs.io/darkmode",
-    }),
-    new CopyPlugin({
-      patterns: [
-        {
-          from: path.join(__dirname, "src", "index.d.ts"),
-          to: path.join(__dirname, "dist", "index.d.ts"),
-        },
-      ],
-    }),
-  ],
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        extractComments: false,
-      }),
-    ],
-  },
-};
--- a/yarn.lock
+++ b/yarn.lock