Initial Commit

.babelrc

@@ -0,0 +1,11 @@
+{
+  "sourceMaps": true,
+  "presets": [
+    ["es2015", { "loose":true }],
+    "stage-0"
+  ],
+  "plugins": [
+    ["transform-decorators-legacy"],
+    ["transform-react-jsx", { "pragma": "h" }]
+  ]
+}

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{package.json,.*rc,*.yml}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,85 @@
+{
+  "parser": "babel-eslint",
+  "extends": "eslint:recommended",
+  "plugins": [
+    "react",
+    "jest"
+  ],
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "es6": true,
+    "jest/globals": true
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "modules": true,
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "pragma": "h"
+    }
+  },
+  "globals": {
+    "sleep": 1
+  },
+  "rules": {
+    "react/jsx-no-bind": [2, { "ignoreRefs": true }],
+    "react/jsx-no-duplicate-props": 2,
+    "react/self-closing-comp": 2,
+    "react/prefer-es6-class": 2,
+    "react/no-string-refs": 2,
+    "react/require-render-return": 2,
+    "react/no-find-dom-node": 2,
+    "react/no-is-mounted": 2,
+    "react/jsx-no-comment-textnodes": 2,
+    "react/jsx-curly-spacing": 2,
+    "react/jsx-no-undef": 2,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "jest/no-disabled-tests": 1,
+    "jest/no-focused-tests": 1,
+    "jest/no-identical-title": 2,
+    "no-empty": 0,
+    "no-console": 0,
+    "no-empty-pattern": 0,
+    "no-cond-assign": 1,
+    "semi": 2,
+    "camelcase": 0,
+    "comma-style": 2,
+    "comma-dangle": [2, "never"],
+    "indent": [2, "tab", {"SwitchCase": 1}],
+    "no-mixed-spaces-and-tabs": [2, "smart-tabs"],
+    "no-trailing-spaces": [2, { "skipBlankLines": true }],
+    "max-nested-callbacks": [2, 3],
+    "no-eval": 2,
+    "no-implied-eval": 2,
+    "no-new-func": 2,
+    "guard-for-in": 2,
+    "eqeqeq": 1,
+    "no-else-return": 2,
+    "no-redeclare": 2,
+    "no-dupe-keys": 2,
+    "radix": 2,
+    "strict": [2, "never"],
+    "no-shadow": 0,
+    "no-delete-var": 2,
+    "no-undef-init": 2,
+    "no-shadow-restricted-names": 2,
+    "handle-callback-err": 0,
+    "no-lonely-if": 2,
+    "keyword-spacing": 2,
+    "constructor-super": 2,
+    "no-this-before-super": 2,
+    "no-dupe-class-members": 2,
+    "no-const-assign": 2,
+    "prefer-spread": 2,
+    "no-useless-concat": 2,
+    "no-var": 2,
+    "object-shorthand": 2,
+    "prefer-arrow-callback": 2
+  }
+}

.gitignore

@@ -0,0 +1,8 @@
+/node_modules
+/npm-debug.log
+/build
+.DS_Store
+/coverage
+/.idea
+yarn.lock
+/.vscode

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - stable

netlify.toml

@@ -0,0 +1,4 @@
+[build]
+  command = "npm run build"
+  publish = "build"
+  branch = "master"

package.json

@@ -0,0 +1,103 @@
+{
+  "name": "hn",
+  "version": "6.0.0",
+  "description": "Ready-to-go Preact starter project powered by webpack.",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
+    "start": "serve build -s -c 1",
+    "prestart": "npm run build",
+    "build": "cross-env NODE_ENV=production webpack -p --progress",
+    "prebuild": "mkdirp build && ncp src/assets build/assets",
+    "test": "npm run -s lint && jest --coverage",
+    "test:watch": "npm run -s test -- --watch",
+    "lint": "eslint src test"
+  },
+  "keywords": [
+    "preact",
+    "boilerplate",
+    "webpack"
+  ],
+  "license": "MIT",
+  "author": "Jason Miller <jason@developit.ca>",
+  "jest": {
+    "setupFiles": [
+      "./test/setup.js"
+    ],
+    "testURL": "http://localhost:8080",
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "identity-obj-proxy",
+      "^react$": "preact-compat",
+      "^react-dom$": "preact-compat"
+    },
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.0.1",
+    "babel": "^6.5.2",
+    "babel-core": "^6.24.0",
+    "babel-eslint": "^7.2.2",
+    "babel-jest": "^20.0.0",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-react-jsx": "^6.8.0",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-register": "^6.24.0",
+    "babel-runtime": "^6.11.6",
+    "chai": "^3.5.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "core-js": "^2.4.1",
+    "cross-env": "^4.0.0",
+    "css-loader": "^0.28.0",
+    "eslint": "^3.19.0",
+    "eslint-plugin-jest": "^20.0.0",
+    "eslint-plugin-react": "^7.0.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
+    "html-webpack-plugin": "^2.28.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^20.0.0",
+    "json-loader": "^0.5.4",
+    "less": "^2.7.1",
+    "less-loader": "^4.0.3",
+    "mkdirp": "^0.5.1",
+    "ncp": "^2.0.0",
+    "offline-plugin": "^4.7.0",
+    "postcss-loader": "^2.0.3",
+    "preact-jsx-chai": "^2.2.1",
+    "raw-loader": "^0.5.1",
+    "regenerator-runtime": "^0.10.3",
+    "replace-bundle-webpack-plugin": "^1.0.0",
+    "script-ext-html-webpack-plugin": "^1.3.4",
+    "sinon": "^2.1.0",
+    "sinon-chai": "^2.9.0",
+    "source-map-loader": "^0.2.1",
+    "style-loader": "^0.17.0",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.4.1",
+    "webpack-dev-server": "^2.4.4"
+  },
+  "dependencies": {
+    "preact": "^8.1.0",
+    "preact-compat": "^3.15.0",
+    "preact-render-to-string": "^3.6.0",
+    "preact-router": "^2.5.1",
+    "promise-polyfill": "^6.0.2",
+    "proptypes": "^1.0.0",
+    "serve": "^5.1.4"
+  },
+  "main": "webpack.config.babel.js",
+  "directories": {
+    "test": "test"
+  }
+}

src/components/app.js

@@ -0,0 +1,29 @@
+import { h, Component } from 'preact';
+import { Router } from 'preact-router';
+
+import Header from './header';
+import Home from './home';
+import Profile from './profile';
+
+export default class App extends Component {
+	/** Gets fired when the route changes.
+	 *	@param {Object} event		"change" event from [preact-router](http://git.io/preact-router)
+	 *	@param {string} event.url	The newly routed URL
+	 */
+	handleRoute = e => {
+		this.currentUrl = e.url;
+	};
+
+	render() {
+		return (
+			<div id="app">
+				<Header />
+				<Router onChange={this.handleRoute}>
+					<Home path="/" />
+					<Profile path="/profile/" user="me" />
+					<Profile path="/profile/:user" />
+				</Router>
+			</div>
+		);
+	}
+}

src/components/header/index.js

@@ -0,0 +1,18 @@
+import { h, Component } from 'preact';
+import { Link } from 'preact-router';
+import style from './style.less';
+
+export default class Header extends Component {
+	render() {
+		return (
+			<header class={style.header}>
+				<h1>Preact App</h1>
+				<nav>
+					<Link href="/">Home</Link>
+					<Link href="/profile">Me</Link>
+					<Link href="/profile/john">John</Link>
+				</nav>
+			</header>
+		);
+	}
+}

src/components/header/style.less

@@ -0,0 +1,45 @@
+@import '~style/helpers';
+
+.header {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 56px;
+	padding: 0;
+	background: #673AB7;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+	z-index: 50;
+
+	h1 {
+		float: left;
+		margin: 0;
+		padding: 0 15px;
+		font-size: 24px;
+		line-height: 56px;
+		font-weight: 400;
+		color: #FFF;
+	}
+
+	nav {
+		float: right;
+		font-size: 100%;
+
+		a {
+			display: inline-block;
+			height: 56px;
+			line-height: 56px;
+			padding: 0 15px;
+			min-width: 50px;
+			text-align: center;
+			background: rgba(255,255,255,0);
+			text-decoration: none;
+			color: #EEE;
+			will-change: background-color;
+
+			&:hover, &:active {
+				background: rgba(255,255,255,0.3);
+			}
+		}
+	}
+}

src/components/home/index.js

@@ -0,0 +1,13 @@
+import { h, Component } from 'preact';
+import style from './style.less';
+
+export default class Home extends Component {
+	render() {
+		return (
+			<div class={style.home}>
+				<h1>Home</h1>
+				<p>This is the Home component.</p>
+			</div>
+		);
+	}
+}

src/components/home/style.less

@@ -0,0 +1,7 @@
+@import '~style/helpers';
+
+.home {
+	padding: 56px 20px;
+	min-height: 100%;
+	width: 100%;
+}

src/components/profile/index.js

@@ -0,0 +1,42 @@
+import { h, Component } from 'preact';
+import style from './style.less';
+
+export default class Profile extends Component {
+	state = {
+		count: 0
+	};
+
+	// update the current time
+	updateTime = () => {
+		let time = new Date().toLocaleString();
+		this.setState({ time });
+	};
+
+	// gets called when this route is navigated to
+	componentDidMount() {
+		// start a timer for the clock:
+		this.timer = setInterval(this.updateTime, 1000);
+		this.updateTime();
+
+		// every time we get remounted, increment a counter:
+		this.setState({ count: this.state.count+1 });
+	}
+
+	// gets called just before navigating away from the route
+	componentWillUnmount() {
+		clearInterval(this.timer);
+	}
+
+	// Note: `user` comes from the URL, courtesy of our router
+	render({ user }, { time, count }) {
+		return (
+			<div class={style.profile}>
+				<h1>Profile: {user}</h1>
+				<p>This is the user profile for a user named {user}.</p>
+
+				<div>Current time: {time}</div>
+				<div>Profile route mounted {count} times.</div>
+			</div>
+		);
+	}
+}