.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")
        };
      }
    }
  ]
};