.gitignore

## .gitignore
node_modules
dist
package-lock.json

## index.html
<!DOCTYPE html>
<main id="root"></main>
<script type="module" src="main.js"></script>

## main.js
import React from "react";
import ReactDOM from "react-dom";

import { Provider, connect } from "react-redux";
import { createStore } from "redux";

import { html } from "htm/react/index.mjs";

async function run() {
  const reducer = (state = 0, { type }) => {
    switch (type) {
      case "INCREMENT":
        return state + 1;
      case "DECREMENT":
        return state - 1;
      default:
        return state;
    }
  };

  const store = createStore(reducer);

  const CounterDemo = connect(counter => ({ counter }))(
    ({ counter, dispatch }) => html`
      <div>
        <h1>Welcome</h1>
        <p>The current counter is: ${counter}</p>
        <button onClick=${() => dispatch({ type: "INCREMENT" })}>+</button>
        <button onClick=${() => dispatch({ type: "DECREMENT" })}>-</button>
      </div>
    `
  );

  ReactDOM.render(
    html`
      <${Provider} store=${store}> <${CounterDemo} /> <//>
    `,
    document.getElementById("root")
  );
}
run();

## package.json
{
  "name": "reduxdemo",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c",
    "serve": "http-server -c0 dist"
  },
  "keywords": [],
  "author": "Surma <surma@surma.link>",
  "license": "Apache-2.0",
  "dependencies": {
    "comlink": "^4.0.2",
    "htm": "^2.1.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "redux": "^4.0.4",
    "rollup": "^1.17.0",
    "rollup-plugin-commonjs": "^10.0.1",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-terser": "^5.1.1"
  },
  "devDependencies": {
    "http-server": "^0.11.1"
  }
}

## rollup.config.js
import { promises as fsp } from "fs";
import nodeResolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import replace from "rollup-plugin-replace";
import { terser } from "rollup-plugin-terser";

export default {
  input: "main.js",
  output: {
    dir: "dist",
    format: "esm"
  },
  plugins: [
    nodeResolve(),
    commonjs({
      namedExports: {
        react: [
          "Component",
          "useContext",
          "useMemo",
          "useEffect",
          "useLayoutEffect",
          "useRef",
          "useReducer",
          "createElement"
        ],
        "react-is": ["isValidElementType", "isContextConsumer"],
        "react-dom": ["unstable_batchedUpdates"]
      }
    }),
    replace({
      "process.env.NODE_ENV": JSON.stringify("production")
    }),
    terser(),
    {
      // Quick’n’dirty way to copy index.html to our output folder.
      async generateBundle(_options, bundle) {
        bundle["index.html"] = {
          fileName: "index.html",
          code: await fsp.readFile("index.html", "utf-8")
        };
      }
    }
  ]
};
	<!DOCTYPE html>
	<main id="root"></main>
	<script type="module" src="main.js"></script>
	import React from "react";
	import ReactDOM from "react-dom";

	import { Provider, connect } from "react-redux";
	import { createStore } from "redux";

	import { html } from "htm/react/index.mjs";

	async function run() {
	const reducer = (state = 0, { type }) => {
	switch (type) {
	case "INCREMENT":
	return state + 1;
	case "DECREMENT":
	return state - 1;
	default:
	return state;
	}
	};

	const store = createStore(reducer);

	const CounterDemo = connect(counter => ({ counter }))(
	({ counter, dispatch }) => html`
	<div>
	<h1>Welcome</h1>
	<p>The current counter is: ${counter}</p>
	<button onClick=${() => dispatch({ type: "INCREMENT" })}>+</button>
	<button onClick=${() => dispatch({ type: "DECREMENT" })}>-</button>
	</div>
	`
	);

	ReactDOM.render(
	html`
	<${Provider} store=${store}> <${CounterDemo} /> <//>
	`,
	document.getElementById("root")
	);
	}
	run();
	{
	"name": "reduxdemo",
	"version": "0.0.1",
	"description": "",
	"main": "index.js",
	"scripts": {
	"build": "rollup -c",
	"serve": "http-server -c0 dist"
	},
	"keywords": [],
	"author": "Surma <surma@surma.link>",
	"license": "Apache-2.0",
	"dependencies": {
	"comlink": "^4.0.2",
	"htm": "^2.1.1",
	"react": "^16.8.6",
	"react-dom": "^16.8.6",
	"react-redux": "^7.1.0",
	"redux": "^4.0.4",
	"rollup": "^1.17.0",
	"rollup-plugin-commonjs": "^10.0.1",
	"rollup-plugin-node-resolve": "^5.2.0",
	"rollup-plugin-replace": "^2.2.0",
	"rollup-plugin-terser": "^5.1.1"
	},
	"devDependencies": {
	"http-server": "^0.11.1"
	}
	}
	import { promises as fsp } from "fs";
	import nodeResolve from "rollup-plugin-node-resolve";
	import commonjs from "rollup-plugin-commonjs";
	import replace from "rollup-plugin-replace";
	import { terser } from "rollup-plugin-terser";

	export default {
	input: "main.js",
	output: {
	dir: "dist",
	format: "esm"
	},
	plugins: [
	nodeResolve(),
	commonjs({
	namedExports: {
	react: [
	"Component",
	"useContext",
	"useMemo",
	"useEffect",
	"useLayoutEffect",
	"useRef",
	"useReducer",
	"createElement"
	],
	"react-is": ["isValidElementType", "isContextConsumer"],
	"react-dom": ["unstable_batchedUpdates"]
	}
	}),
	replace({
	"process.env.NODE_ENV": JSON.stringify("production")
	}),
	terser(),
	{
	// Quick’n’dirty way to copy index.html to our output folder.
	async generateBundle(_options, bundle) {
	bundle["index.html"] = {
	fileName: "index.html",
	code: await fsp.readFile("index.html", "utf-8")
	};
	}
	}
	]
	};