Require Node.js 12 and move to ESM

Author: sindresorhus

.github/funding.yml

@@ -10,13 +10,12 @@ jobs:
       fail-fast: false
       matrix:
         node-version:
+          - 16
           - 14
           - 12
-          - 10
-          - 8
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm install

.github/workflows/main.yml

@@ -1,3 +1,3 @@
-const browserEnv = require('browser-env');
+import browserEnv from 'browser-env';
 
 browserEnv();

browser-env.js

@@ -11,7 +11,7 @@ import React from 'react';
 import {render} from 'react-dom';
 import {Provider} from 'unstated';
 import UNSTATED from 'unstated-debug';
-import App from './components/App';
+import App from './components/App.js';
 
 UNSTATED.logStateChanges = false;
 
@@ -48,16 +48,12 @@ declare const UNSTATED: {
 	/**
 	Your containers.
 	*/
-	containers: {
-		[containerName: string]: Container<{[stateName: string]: unknown}>;
-	};
+	containers: Record<string, Container<Record<string, unknown>>>;
 
 	/**
 	All of the state values.
 	*/
-	states: {
-		[containerName: string]: {[stateName: string]: unknown};
-	};
+	states: Record<string, Record<string, unknown>>;
 
 	/**
 	Logs the current state of your containers.

index.d.ts

@@ -1,19 +1,15 @@
-'use strict';
-const {detailedDiff} = require('deep-object-diff');
-const {__SUPER_SECRET_CONTAINER_DEBUG_HOOK__} = require('unstated');
+import {detailedDiff} from 'deep-object-diff';
+import {__SUPER_SECRET_CONTAINER_DEBUG_HOOK__} from 'unstated';
 
 const UNSTATED = {
 	isEnabled: true,
 	isCollapsed: false,
 	logStateChanges: true,
 	containers: {},
 	get states() {
-		const ret = {};
-		for (const [key, value] of Object.entries(this.containers)) {
-			ret[key] = value.state;
-		}
-
-		return ret;
+		return Object.fromEntries(
+			Object.entries(this.containers).map(([key, value]) => [key, value.state])
+		);
 	},
 	logState() {
 		for (const [key, value] of Object.entries(this.containers)) {
@@ -31,20 +27,20 @@ __SUPER_SECRET_CONTAINER_DEBUG_HOOK__(container => {
 
 	UNSTATED.containers[name] = container;
 
-	let prevState = container.state;
+	let previousState = container.state;
 
 	container.subscribe(() => {
 		if (!(UNSTATED.isEnabled && UNSTATED.logStateChanges)) {
 			return;
 		}
 
 		const {state} = container;
-		const diff = detailedDiff(prevState, state);
+		const diff = detailedDiff(previousState, state);
 
 		const group = UNSTATED.isCollapsed ? console.groupCollapsed : console.group;
 		group(name);
 
-		const hasChanges = obj => Object.keys(obj).length > 0;
+		const hasChanges = object => Object.keys(object).length > 0;
 
 		if (hasChanges(diff.added)) {
 			console.log('Added\n', diff.added);
@@ -59,15 +55,16 @@ __SUPER_SECRET_CONTAINER_DEBUG_HOOK__(container => {
 		}
 
 		console.log('New state\n', state);
-		console.log('Old state\n', prevState);
+		console.log('Old state\n', previousState);
 
 		console.groupEnd(name);
 
-		prevState = state;
+		previousState = state;
 	});
 });
+
 if (typeof window !== 'undefined') {
 	window.UNSTATED = UNSTATED;
 }
 
-module.exports = UNSTATED;
+export default UNSTATED;

index.js

@@ -1,17 +1,14 @@
 import {expectType} from 'tsd';
 import {Container} from 'unstated';
-import UNSTATED from '.';
+import UNSTATED from './index.js';
 
 expectType<boolean>(UNSTATED.isEnabled);
 expectType<boolean>(UNSTATED.logStateChanges);
 
-expectType<{
-	[containerName: string]: Container<{[stateName: string]: unknown}>;
-}>(UNSTATED.containers);
+expectType<Record<string, Container<Record<string, unknown>>>>(UNSTATED.containers);
 
 expectType<() => void>(UNSTATED.logState);
-expectType<void>(UNSTATED.logState());
 
-expectType<{[containerName: string]: {[stateName: string]: unknown }}>(
+expectType<Record<string, Record<string, unknown>>>(
 	UNSTATED.states
 );

index.test-d.ts

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

license

@@ -4,13 +4,16 @@
 	"description": "Debug your Unstated containers with ease",
 	"license": "MIT",
 	"repository": "sindresorhus/unstated-debug",
+	"funding": "https://github.com/sponsors/sindresorhus",
 	"author": {
 		"name": "Sindre Sorhus",
 		"email": "sindresorhus@gmail.com",
-		"url": "sindresorhus.com"
+		"url": "https://sindresorhus.com"
 	},
+	"type": "module",
+	"exports": "./index.js",
 	"engines": {
-		"node": ">=8"
+		"node": ">=12"
 	},
 	"scripts": {
 		"test": "xo && ava && tsd"
@@ -36,16 +39,16 @@
 		"deep-object-diff": "^1.1.0"
 	},
 	"devDependencies": {
-		"@types/react": "^16.9.4",
-		"ava": "^2.4.0",
-		"browser-env": "^3.2.5",
-		"react": "^16.3.0",
-		"tsd": "^0.9.0",
-		"unstated": "^2.0.2",
-		"xo": "^0.25.0"
+		"@types/react": "^17.0.4",
+		"ava": "^3.15.0",
+		"browser-env": "^3.3.0",
+		"react": "^16.0.0",
+		"tsd": "^0.14.0",
+		"unstated": "^2.1.1",
+		"xo": "^0.39.1"
 	},
 	"peerDependencies": {
-		"unstated": "^2.0.2"
+		"unstated": "^2.1.1"
 	},
 	"xo": {
 		"envs": [

package.json

@@ -5,14 +5,12 @@
 <br>
 <img src="screenshot.png" width="1145">
 
-
 ## Install
 
 ```
 $ npm install unstated-debug
 ```
 
-
 ## Setup
 
 In the root of your app, import `unstated-debug`:
@@ -22,7 +20,7 @@ import React from 'react';
 import {render} from 'react-dom';
 import {Provider} from 'unstated';
 import UNSTATED from 'unstated-debug';
-import App from './components/App';
+import App from './components/App.js';
 
 UNSTATED.logStateChanges = false;
 
@@ -34,7 +32,6 @@ render(
 );
 ```
 
-
 ## Usage
 
 When enabled, it exposes a global object `UNSTATED` which you can use in DevTools to explore the containers and their state.
@@ -50,14 +47,13 @@ The object contains the following properties:
 - `states` - The state objects of your containers.
 - `logState()` - Logs the current state of your containers.
 
-
 ## API
 
 ### UNSTATED
 
 ##### isEnabled
 
-Type: `boolean`<br>
+Type: `boolean`\
 Default: `true`
 
 Toggle debugging.
@@ -66,7 +62,7 @@ For example, if you use this in an Electron app, you could pass it [`is.developm
 
 ##### logStateChanges
 
-Type: `boolean`<br>
+Type: `boolean`\
 Default: `true`
 
 Logs a diff for each state change to the containers. This gives you a live insight into state changes in your app.

readme.md

@@ -1,6 +1,6 @@
 import test from 'ava';
 import {Container} from 'unstated';
-import m from '.';
+import UNSTATED from './index.js';
 
 class FixtureContainer extends Container {
 	constructor() {
@@ -19,7 +19,7 @@ test('main', t => {
 });
 
 test('exposes window global', t => {
-	t.is(m, window.UNSTATED);
+	t.is(UNSTATED, window.UNSTATED);
 	t.is(typeof window.UNSTATED, 'object');
 	t.true(window.UNSTATED.containers.FixtureContainer.state.foo);
 });