Skip to content

Commit f00768b

Browse files
developitdevelopit
committed
Initial commit
0 parents  commit f00768b

File tree

17 files changed

+494
-0
lines changed

17 files changed

+494
-0
lines changed

‎.babelrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"sourceMaps": true,
3+
"presets": [
4+
"es2015-minimal",
5+
"stage-0"
6+
],
7+
"plugins": [
8+
["transform-decorators-legacy"],
9+
["transform-react-jsx", { "pragma": "h" }]
10+
]
11+
}

‎.editorconfig‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
root = true
2+
3+
[*]
4+
indent_style = tab
5+
end_of_line = lf
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
10+
[{package.json,.*rc,*.yml}]
11+
indent_style = space
12+
indent_size = 2
13+
14+
[*.md]
15+
trim_trailing_whitespace = false

‎.eslintrc‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"parser": "babel-eslint",
3+
"rules": {
4+
"semi": 2,
5+
"camelcase": 0,
6+
"comma-style": 2,
7+
"comma-dangle": [2, "never"],
8+
"indent": [2, "tab", {"SwitchCase": 1}],
9+
"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
10+
"no-trailing-spaces": [2, { "skipBlankLines": true }],
11+
"max-nested-callbacks": [2, 3],
12+
"no-eval": 2,
13+
"no-implied-eval": 2,
14+
"no-new-func": 2,
15+
"guard-for-in": 2,
16+
"eqeqeq": 2,
17+
"no-else-return": 2,
18+
"no-redeclare": 2,
19+
"no-dupe-keys": 2,
20+
"radix": 2,
21+
"strict": [2, "never"],
22+
"no-shadow": 0,
23+
"callback-return": [1, ["callback", "cb", "next", "done"]],
24+
"no-delete-var": 2,
25+
"no-undef-init": 2,
26+
"no-shadow-restricted-names": 2,
27+
"handle-callback-err": 0,
28+
"no-lonely-if": 2,
29+
"space-return-throw-case": 2,
30+
"constructor-super": 2,
31+
"no-this-before-super": 2,
32+
"no-dupe-class-members": 2,
33+
"no-const-assign": 2,
34+
"prefer-spread": 2,
35+
"no-useless-concat": 2,
36+
"no-var": 2,
37+
"object-shorthand": 2,
38+
"prefer-arrow-callback": 2
39+
}
40+
}

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules
2+
/npm-debug.log
3+
/build
4+
.DS_Store

‎README.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Preact Boilerplate / Starter Kit
2+
3+
> :guitar: Ready-to-rock [Preact] starter project, powered by [webpack].
4+
>
5+
> :rocket: If you're starting a new project using [Preact], you've come to the right place.
6+
Below is a step-by-step guide that takes you straight from downloading this boilerplate to production.
7+
>
8+
> **[:boom: View Demo :boom:](https://preact-boilerplate.surge.sh)**
9+
10+
11+
---
12+
13+
14+
# Quick-Start Guide
15+
16+
- [Installation](#installation)
17+
- [Development Workflow](#development-workflow)
18+
- [Structure](#structure)
19+
- [Handling URLS](#handling-urls)
20+
21+
22+
## Installation
23+
24+
**1. Clone this repo:**
25+
26+
```sh
27+
git clone --depth 1 [email protected]:developit/preact-boilerplate.git my-app
28+
cd my-app
29+
```
30+
31+
32+
**2. Make it your own:**
33+
34+
```sh
35+
rm -rf .git && git init && npm init
36+
```
37+
38+
> :information_source: This re-initializes the repo and sets up your NPM project.
39+
40+
41+
**3. Install the dependencies:**
42+
43+
```sh
44+
npm install
45+
```
46+
47+
> You're done installing! Now let's get started developing.
48+
49+
50+
51+
## Development Workflow
52+
53+
54+
**4. Start a live-reload development server:**
55+
56+
```sh
57+
PORT=8080 npm run dev
58+
```
59+
60+
> This is a full web server nicely suited to your project. Any time you make changes within the `src` directory, it will rebuild and even refresh your browser.
61+
62+
63+
**5. Generate a production build in `./build`:**
64+
65+
```sh
66+
npm run build
67+
```
68+
69+
You can now deploy the contents of the `build` directory to production!
70+
71+
> **Example:** deploy to [surge.sh](https://surge.sh):
72+
>
73+
> `surge ./build -d my-app.surge.sh`
74+
75+
76+
---
77+
78+
79+
## Structure
80+
81+
Apps are built up from simple units of functionality called Components. A Component is responsible for rendering a small part of an application, given some input data called `props`, generally passed in as attributes in JSX. A component can be as simple as:
82+
83+
```js
84+
class Link extends Component {
85+
render({ to, children }) {
86+
return <a href={ to }>{ children }</a>;
87+
}
88+
}
89+
// usage:
90+
<Link to="/">Home</Link>
91+
```
92+
93+
94+
95+
## Handling URLS
96+
97+
:information_desk_person: This project contains a basic two-page app with [URL routing](http://git.io/preact-router).
98+
99+
Pages are just regular components that get mounted when you navigate to a certain URL. Any URL parameters get passed to the component as `props`.
100+
101+
Defining what component(s) to load for a given URL is easy and declarative. You can even mix-and-match URL parameters and normal props.
102+
103+
```js
104+
<Router>
105+
<A path="/" />
106+
<B path="/b" id="42" />
107+
<C path="/c/:id" />
108+
</Router>
109+
```
110+
111+
112+
---
113+
114+
115+
## License
116+
117+
MIT
118+
119+
120+
[Preact]: https://developit.github.io/preact
121+
[webpack]: https://webpack.github.io

‎package.json‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{
2+
"name": "preact-boilerplate",
3+
"version": "1.0.3",
4+
"description": "Ready-to-go Preact starter project powered by webpack.",
5+
"scripts": {
6+
"dev": "NODE_ENV=development webpack-dev-server --inline --progress",
7+
"start": "superstatic build -p ${PORT:-8080} --gzip -c '{\"routes\":{\"**\":\"index.html\"},\"cache_control\":{\"**\":86400}}'",
8+
"prestart": "npm run build",
9+
"build": "NODE_ENV=production webpack -p --progress",
10+
"prebuild": "mkdir -p build && ncp src/assets build/assets",
11+
"test": "eslint src tests/**/*.js"
12+
},
13+
"keywords": [
14+
"preact",
15+
"boilerplate",
16+
"webpack"
17+
],
18+
"license": "MIT",
19+
"author": "Jason Miller <[email protected]>",
20+
"devDependencies": {
21+
"autoprefixer": "^6.3.1",
22+
"babel": "^6.5.0",
23+
"babel-core": "^6.4.0",
24+
"babel-eslint": "^5.0.0-beta6",
25+
"babel-loader": "^6.2.1",
26+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
27+
"babel-plugin-transform-react-jsx": "^6.4.0",
28+
"babel-preset-es2015": "^6.3.13",
29+
"babel-preset-es2015-minimal": "^1.0.0",
30+
"babel-preset-stage-0": "^6.3.13",
31+
"babel-register": "^6.4.3",
32+
"babel-runtime": "^6.3.19",
33+
"chai": "^3.5.0",
34+
"core-js": "^2.0.3",
35+
"css-loader": "^0.23.1",
36+
"eslint": "^1.10.3",
37+
"extract-text-webpack-plugin": "^1.0.1",
38+
"file-loader": "^0.8.5",
39+
"html-webpack-plugin": "^1.7.0",
40+
"json-loader": "^0.5.4",
41+
"less": "^2.5.3",
42+
"less-loader": "^2.2.2",
43+
"ncp": "^2.0.0",
44+
"npm-run-all": "^1.5.1",
45+
"postcss-loader": "^0.8.0",
46+
"raw-loader": "^0.5.1",
47+
"source-map-loader": "^0.1.5",
48+
"superstatic": "^3.0.0",
49+
"url-loader": "^0.5.7",
50+
"webpack": "^1.12.11",
51+
"webpack-dev-server": "^1.14.1"
52+
},
53+
"dependencies": {
54+
"decko": "^1.1.3",
55+
"preact": "^3.2.0",
56+
"preact-compat": "^0.6.1",
57+
"preact-router": "^1.1.0",
58+
"proptypes": "^0.14.1",
59+
"react": "^0.14.7",
60+
"react-redux": "^4.4.0",
61+
"redux": "^3.3.1"
62+
}
63+
}

‎src/actions.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
export function addTodo(text) {
3+
return {
4+
type: 'ADD_TODO',
5+
text
6+
};
7+
}

‎src/app.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { h, Component } from 'preact';
2+
import { bind } from 'decko';
3+
import { connect } from 'react-redux';
4+
import { bindActions } from './util';
5+
import reduce from './reducers';
6+
import * as actions from './actions';
7+
8+
9+
@connect(reduce, bindActions(actions))
10+
export default class App extends Component {
11+
shouldComponentUpdate(props, state) {
12+
console.log(state.text, this.state.text);
13+
}
14+
@bind
15+
addTodos() {
16+
let { text } = this.state;
17+
this.setState({ text:'' });
18+
this.props.addTodo(text);
19+
return false;
20+
}
21+
render({ todos }, { text={} }) {
22+
console.log(this.state);
23+
return (
24+
<div>
25+
<form onSubmit={this.addTodos} action="javascript:">
26+
<input value={text.two} onInput={this.linkState('text.two')} />
27+
</form>
28+
<ul>
29+
{ todos.map( item => (
30+
<li>{ item }</li>
31+
)) }
32+
</ul>
33+
</div>
34+
);
35+
}
36+
}

‎src/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { h, render } from 'preact';
2+
import { Provider } from 'react-redux';
3+
import store from './store';
4+
import App from './app';
5+
import './style';
6+
7+
render((
8+
<div id="outer">
9+
<Provider store={store}>
10+
<App />
11+
</Provider>
12+
</div>
13+
), document.body);

‎src/reducers.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
const EMPTY = {};
3+
4+
export default store => {
5+
console.log('reducer: ', store);
6+
return store || EMPTY;
7+
};
8+
9+
// export default ({ items=[] }=EMPTY) => ({
10+
// items
11+
// });

0 commit comments

Comments
 (0)