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