Switch to Preact CLI

README.md

@@ -1,6 +1,6 @@
 # Preact Redux Example
 
-A **10kb** Redux-powered alternative to [preact-boilerplate](https://github.com/developit/preact-boilerplate), implementing a To-Do List app.
+A **10kb** Preact + Redux boilerplate built with [Preact CLI], implementing a To-Do List app.
 
 
 <img src="https://i.gyazo.com/d655af6fc8768487897b13eb31500aa7.gif" width="207" />
@@ -100,4 +100,4 @@ MIT
 
 
 [Preact]: https://github.com/developit/preact
-[webpack]: https://webpack.github.io
+[Preact CLI]: https://github.com/developit/preact-cli

package.json

@@ -1,14 +1,16 @@
 {
  "name": "preact-redux-example",
  "version": "1.0.0",
- "description": "Ready-to-go Preact + Redux starter project, powered by webpack.",
+ "description": "Ready-to-go Preact + Redux starter project, powered by Preact CLI.",
  "scripts": {
- "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
- "start": "superstatic build -p 8080 --host 0.0.0.0 --gzip -c '{\"rewrites\": [{\"source\":\"**\",\"destination\":\"index.html\"}],\"headers\":[{\"source\":\"**\",\"headers\":[{\"key\":\"Cache-Control\",\"value\":\"max-age=86400\"}]}]}'",
- "prestart": "npm run build",
- "build": "cross-env NODE_ENV=production webpack -p --progress",
- "prebuild": "mkdirp build",
- "test": "eslint src tests/**/*.js"
+ "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
+ "build": "preact build",
+ "serve": "preact build && preact serve",
+ "dev": "preact watch",
+ "lint": "eslint src"
+ },
+ "eslintConfig": {
+ "extends": "eslint-config-synacor"
  },
  "keywords": [
  "preact",
@@ -17,37 +19,12 @@
  "license": "MIT",
  "author": "Jason Miller <[email protected]>",
  "devDependencies": {
- "autoprefixer": "^6.3.6",
- "babel": "^6.5.2",
- "babel-core": "^6.9.1",
- "babel-eslint": "^6.0.4",
- "babel-loader": "^6.2.4",
- "babel-plugin-transform-decorators-legacy": "^1.3.4",
- "babel-plugin-transform-react-jsx": "^6.8.0",
- "babel-preset-es2015": "^6.9.0",
- "babel-preset-es2015-minimal": "^2.0.0",
- "babel-preset-stage-0": "^6.5.0",
- "babel-register": "^6.9.0",
- "babel-runtime": "^6.9.2",
- "chai": "^3.5.0",
- "core-js": "^2.4.0",
- "cross-env": "^1.0.8",
- "css-loader": "^0.23.1",
- "eslint": "^2.11.1",
- "extract-text-webpack-plugin": "^1.0.1",
- "file-loader": "^0.8.5",
- "html-webpack-plugin": "^2.19.0",
- "json-loader": "^0.5.4",
- "less": "^2.7.1",
- "less-loader": "^2.2.3",
- "mkdirp": "^0.5.1",
- "postcss-loader": "^0.9.1",
- "raw-loader": "^0.5.1",
- "source-map-loader": "^0.1.5",
- "superstatic": "^4.0.2",
- "url-loader": "^0.5.7",
- "webpack": "^1.13.1",
- "webpack-dev-server": "^1.14.1"
+ "eslint": "^4.5.0",
+ "eslint-config-synacor": "^1.1.0",
+ "if-env": "^1.0.0",
+ "less": "^2.7.3",
+ "less-loader": "^4.0.5",
+ "preact-cli": "^2.0.0"
  },
  "dependencies": {
  "preact": "^8.1.0",

src/components/todo-item.js

@@ -1,15 +1,15 @@
 import { h, Component } from 'preact';
 
 export default class TodoItem extends Component {
- shouldComponentUpdate({ todo, onRemove }) {
- return todo !== this.props.todo || onRemove !== this.props.onRemove;
- }
-
  remove = () => {
  let { onRemove, todo } = this.props;
  onRemove(todo);
  };
 
+ shouldComponentUpdate({ todo, onRemove }) {
+ return todo !== this.props.todo || onRemove !== this.props.onRemove;
+ }
+
  render({ todo }) {
  return (
  <li>

src/index.js

@@ -1,13 +1,12 @@
-import { h, render } from 'preact';
 import { Provider } from 'preact-redux';
 import store from './store';
 import App from './components/app';
 import './style';
 
-render((
+export default () => (
  <div id="outer">
  <Provider store={store}>
  <App />
  </Provider>
  </div>
-), document.body);
+);

src/reducers.js

@@ -1,6 +1,4 @@
 
 const EMPTY = {};
 
-export default store => {
- return store || EMPTY;
-};
+export default store => store || EMPTY;

src/store.js

@@ -21,4 +21,4 @@ const INITIAL = {
 
 export default createStore( (state, action) => (
  action && ACTIONS[action.type] ? ACTIONS[action.type](state, action) : state
-), INITIAL, window.devToolsExtension && window.devToolsExtension());
+), INITIAL, typeof devToolsExtension==='function' ? devToolsExtension() : undefined);