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") | |
}; | |
} | |
} | |
] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Great write up!🙌
For anyone that's running this gist, the
build
script was producing an invalidindex.html
file:index.html
The simple fix (without diving into dependencies) for me was to remove the caret ranges in all the dependency versions before running
npm install
.