Skip to content

Instantly share code, notes, and snippets.

@surma surma/.gitignore Secret
Last active Nov 30, 2019

Embed
What would you like to do?
node_modules
dist
package-lock.json
<!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);
@thgaskell

This comment has been minimized.

Copy link

thgaskell commented Nov 23, 2019

Great write up! 🙌


For anyone that's running this gist, the build script was producing an invalid index.html file:

index.html

undefined

The simple fix (without diving into dependencies) for me was to remove the caret ranges in all the dependency versions before running npm install.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.