Skip to content

Instantly share code, notes, and snippets.

@surma surma/.gitignore Secret
Last active Sep 20, 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);
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.