surma/.gitignore Secret

## .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 { html } from "htm/react/index.mjs";

import { wrap } from "comlink";

import remoteStoreWrapper from "./remote-store-wrapper.js";

async function run() {
  const remoteStore = await wrap(new Worker("./worker.js"));
  const store = await remoteStoreWrapper(remoteStore);

  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": {
    "@surma/rollup-plugin-off-main-thread": "^1.1.1",
    "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"
  }
}

## remote-store-wrapper.js
import { proxy } from "comlink";

export default async function(store) {
  const subscribers = new Set();

  let latestState = await store.getState();
  store.subscribe(
    proxy(async () => {
      latestState = await store.getState();
      subscribers.forEach(f => f());
    })
  );
  return {
    dispatch: action => store.dispatch(action),
    getState: () => latestState,
    subscribe: listener => {
      subscribers.add(listener);
      return () => subscribers.delete(listener);
    },
    replaceReducer: () => {
      throw new Error("Can’t transfer a function");
    }
  };
}

## 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";
import OMT from "@surma/rollup-plugin-off-main-thread";

export default {
  input: "main.js",
  output: {
    dir: "dist",
    format: "amd"
  },
  plugins: [
    OMT(),
    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")
        };
      }
    }
  ]
};

## worker.js
import { createStore } from "redux";

import { expose } from "comlink";

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

const store = createStore(reducer);
expose(store);
	<!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 { html } from "htm/react/index.mjs";

	import { wrap } from "comlink";

	import remoteStoreWrapper from "./remote-store-wrapper.js";

	async function run() {
	const remoteStore = await wrap(new Worker("./worker.js"));
	const store = await remoteStoreWrapper(remoteStore);

	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": {
	"@surma/rollup-plugin-off-main-thread": "^1.1.1",
	"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 { proxy } from "comlink";

	export default async function(store) {
	const subscribers = new Set();

	let latestState = await store.getState();
	store.subscribe(
	proxy(async () => {
	latestState = await store.getState();
	subscribers.forEach(f => f());
	})
	);
	return {
	dispatch: action => store.dispatch(action),
	getState: () => latestState,
	subscribe: listener => {
	subscribers.add(listener);
	return () => subscribers.delete(listener);
	},
	replaceReducer: () => {
	throw new Error("Can’t transfer a function");
	}
	};
	}
	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";
	import OMT from "@surma/rollup-plugin-off-main-thread";

	export default {
	input: "main.js",
	output: {
	dir: "dist",
	format: "amd"
	},
	plugins: [
	OMT(),
	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")
	};
	}
	}
	]
	};
	import { createStore } from "redux";

	import { expose } from "comlink";

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

	const store = createStore(reducer);
	expose(store);