Commit ba72abbf0c0d086d4b0abfbc1b10c734ae4bd4ec
.
austinfrey committed on 10/20/2018, 12:30:37 AMFiles changed
.gitignore | added |
README.md | added |
assets/icon.png | added |
index.js | added |
manifest.json | added |
package-lock.json | added |
package.json | added |
stores/clicks.js | added |
sw.js | added |
views/404.js | added |
views/main.js | added |
.gitignore | ||
---|---|---|
@@ -1,0 +1,7 @@ | ||
1 … | +node_modules/ | |
2 … | +.nyc_output/ | |
3 … | +coverage/ | |
4 … | +dist/ | |
5 … | +tmp/ | |
6 … | +npm-debug.log* | |
7 … | +.DS_Store |
README.md | ||
---|---|---|
@@ -1,0 +1,11 @@ | ||
1 … | +# double | |
2 … | +double entry accounting app | |
3 … | + | |
4 … | +## Commands | |
5 … | +Command | Description | | |
6 … | +-----------------------|--------------------------------------------------| | |
7 … | +`$ npm start` | Start the development server | |
8 … | +`$ npm test` | Lint, validate deps & run tests | |
9 … | +`$ npm run build` | Compile all files into `dist/` | |
10 … | +`$ npm run create` | Generate a scaffold file | |
11 … | +`$ npm run inspect` | Inspect the bundle's dependencies |
assets/icon.png |
---|
index.js | ||
---|---|---|
@@ -1,0 +1,18 @@ | ||
1 … | +var css = require('sheetify') | |
2 … | +var choo = require('choo') | |
3 … | + | |
4 … | +css('tachyons') | |
5 … | + | |
6 … | +var app = choo() | |
7 … | +if (process.env.NODE_ENV !== 'production') { | |
8 … | + app.use(require('choo-devtools')()) | |
9 … | +} else { | |
10 … | + app.use(require('choo-service-worker')()) | |
11 … | +} | |
12 … | + | |
13 … | +app.use(require('./stores/clicks')) | |
14 … | + | |
15 … | +app.route('/', require('./views/main')) | |
16 … | +app.route('/*', require('./views/404')) | |
17 … | + | |
18 … | +module.exports = app.mount('body') |
manifest.json | |||
---|---|---|---|
@@ -1,0 +1,14 @@ | |||
1 … | +{ | ||
2 … | + "name": "double", | ||
3 … | + "short_name": "double", | ||
4 … | + "description": "double entry accounting app", | ||
5 … | + "start_url": "/", | ||
6 … | + "display": "standalone", | ||
7 … | + "background_color": "#000", | ||
8 … | + "theme_color": "#000", | ||
9 … | + "icons": [{ | ||
10 … | + "src": "/assets/icon.png", | ||
11 … | + "type": "image/png", | ||
12 … | + "sizes": "512x512" | ||
13 … | + }] | ||
14 … | +} |
package-lock.json | ||
---|---|---|
The diff is too large to show. Use a local git client to view these changes. Old file size: 0 bytes New file size: 342571 bytes |
package.json | ||
---|---|---|
@@ -1,0 +1,26 @@ | ||
1 … | +{ | |
2 … | + "name": "double", | |
3 … | + "version": "1.0.0", | |
4 … | + "private": true, | |
5 … | + "scripts": { | |
6 … | + "build": "bankai build index.js", | |
7 … | + "create": "choo-scaffold", | |
8 … | + "inspect": "bankai inspect index.js", | |
9 … | + "start": "bankai start index.js", | |
10 … | + "test": "standard && npm run test-deps", | |
11 … | + "test-deps": "dependency-check . && dependency-check . --extra --no-dev -i tachyons" | |
12 … | + }, | |
13 … | + "dependencies": { | |
14 … | + "choo": "^6.13.0", | |
15 … | + "choo-service-worker": "^2.4.0", | |
16 … | + "sheetify": "^7.3.3", | |
17 … | + "tachyons": "^4.11.1" | |
18 … | + }, | |
19 … | + "devDependencies": { | |
20 … | + "bankai": "^9.15.0", | |
21 … | + "choo-devtools": "^2.5.1", | |
22 … | + "choo-scaffold": "^1.2.0", | |
23 … | + "dependency-check": "^3.2.1", | |
24 … | + "standard": "^12.0.1" | |
25 … | + } | |
26 … | +} |
stores/clicks.js | ||
---|---|---|
@@ -1,0 +1,12 @@ | ||
1 … | +module.exports = store | |
2 … | + | |
3 … | +function store (state, emitter) { | |
4 … | + state.totalClicks = 0 | |
5 … | + | |
6 … | + emitter.on('DOMContentLoaded', function () { | |
7 … | + emitter.on('clicks:add', function (count) { | |
8 … | + state.totalClicks += count | |
9 … | + emitter.emit(state.events.RENDER) | |
10 … | + }) | |
11 … | + }) | |
12 … | +} |
sw.js | ||
---|---|---|
@@ -1,0 +1,28 @@ | ||
1 … | +/* eslint-env serviceworker */ | |
2 … | + | |
3 … | +var VERSION = require('./package.json').version | |
4 … | +var URLS = process.env.FILE_LIST | |
5 … | + | |
6 … | +// Respond with cached resources | |
7 … | +self.addEventListener('fetch', function (e) { | |
8 … | + e.respondWith(self.caches.match(e.request).then(function (request) { | |
9 … | + if (request) return request | |
10 … | + else return self.fetch(e.request) | |
11 … | + })) | |
12 … | +}) | |
13 … | + | |
14 … | +// Register worker | |
15 … | +self.addEventListener('install', function (e) { | |
16 … | + e.waitUntil(self.caches.open(VERSION).then(function (cache) { | |
17 … | + return cache.addAll(URLS) | |
18 … | + })) | |
19 … | +}) | |
20 … | + | |
21 … | +// Remove outdated resources | |
22 … | +self.addEventListener('activate', function (e) { | |
23 … | + e.waitUntil(self.caches.keys().then(function (keyList) { | |
24 … | + return Promise.all(keyList.map(function (key, i) { | |
25 … | + if (keyList[i] !== VERSION) return self.caches.delete(keyList[i]) | |
26 … | + })) | |
27 … | + })) | |
28 … | +}) |
views/404.js | ||
---|---|---|
@@ -1,0 +1,15 @@ | ||
1 … | +var html = require('choo/html') | |
2 … | + | |
3 … | +var TITLE = 'double - route not found' | |
4 … | + | |
5 … | +module.exports = view | |
6 … | + | |
7 … | +function view (state, emit) { | |
8 … | + if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE) | |
9 … | + return html` | |
10 … | + <body class="sans-serif pa3"> | |
11 … | + <h1>Route not found.</h1> | |
12 … | + <a class="pt2" href="/">Back to main.</a> | |
13 … | + </body> | |
14 … | + ` | |
15 … | +} |
views/main.js | ||
---|---|---|
@@ -1,0 +1,158 @@ | ||
1 … | +var html = require('choo/html') | |
2 … | + | |
3 … | +var TITLE = 'double - main' | |
4 … | + | |
5 … | +module.exports = view | |
6 … | + | |
7 … | +function view (state, emit) { | |
8 … | + if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE) | |
9 … | + | |
10 … | + return html` | |
11 … | + <body class="code lh-copy"> | |
12 … | + <main class="pa3 cf center"> | |
13 … | + <section class="fl mw6 w-50-m w-third-l pa3"> | |
14 … | + <h2>1.</h2> | |
15 … | + <p> | |
16 … | + Welcome to your new Choo application. | |
17 … | + We're very happy you've made it this far. | |
18 … | + </p> | |
19 … | + | |
20 … | + <p> | |
21 … | + You're now in control of your own Choo app. The moment you decide to | |
22 … | + deploy it, it'll work offline and on any device. | |
23 … | + </p> | |
24 … | + | |
25 … | + <br> | |
26 … | + </section> | |
27 … | + | |
28 … | + <section class="fl mw6 w-50-m w-third-l pa3"> | |
29 … | + <h2>2.</h2> | |
30 … | + | |
31 … | + <p> | |
32 … | + We've outfitted your project with a small selection of commands to | |
33 … | + help you achieve results faster: | |
34 … | + </p> | |
35 … | + | |
36 … | + <ul> | |
37 … | + <li class="mb3"> | |
38 … | + <strong>npm start</strong><br> | |
39 … | + start your project for local development. | |
40 … | + </li> | |
41 … | + <li class="mb3"> | |
42 … | + <strong>npm run build</strong><br> | |
43 … | + compile your project for production. | |
44 … | + </li> | |
45 … | + <li class="mb3"> | |
46 … | + <strong>npm run inspect</strong><br> | |
47 … | + visualize your project's dependencies. | |
48 … | + </li> | |
49 … | + <li class="mb3"> | |
50 … | + <strong>npm run create</strong><br> | |
51 … | + scaffold a new file. | |
52 … | + </li> | |
53 … | + </ul> | |
54 … | + | |
55 … | + <br> | |
56 … | + </section> | |
57 … | + | |
58 … | + <section class="fl mw6 w-50-m w-third-l pa3"> | |
59 … | + <h2>3.</h2> | |
60 … | + | |
61 … | + <p> | |
62 … | + Your project also comes with a few directories. These names have | |
63 … | + special meanings for the build tool, so it's good to know what they | |
64 … | + do. | |
65 … | + </p> | |
66 … | + | |
67 … | + <ul> | |
68 … | + <li class="mb3"> | |
69 … | + <strong>assets/</strong><br> | |
70 … | + Static files that can be served up, such as images and fonts. | |
71 … | + </li> | |
72 … | + <li class="mb3"> | |
73 … | + <strong>components/</strong><br> | |
74 … | + Reusable fragments that can be composed into views. | |
75 … | + </li> | |
76 … | + <li class="mb3"> | |
77 … | + <strong>stores/</strong><br> | |
78 … | + Pieces of logic that are shared by multiple components. | |
79 … | + </li> | |
80 … | + <li class="mb3"> | |
81 … | + <strong>views/</strong><br> | |
82 … | + Combinations of components that are mapped to routes. | |
83 … | + </li> | |
84 … | + </ul> | |
85 … | + | |
86 … | + <br> | |
87 … | + </section> | |
88 … | + | |
89 … | + <section class="fl mw6 w-50-m w-third-l pa3"> | |
90 … | + <h2>4.</h2> | |
91 … | + | |
92 … | + <p> | |
93 … | + So far we've provided you with one base view, <a | |
94 … | + href="/oh-no">one fallback view</a>, and one store. This serves | |
95 … | + as an example. A place to start from. It's your project now, so | |
96 … | + go ahead and delete them once you know how they work. | |
97 … | + </p> | |
98 … | + | |
99 … | + <p>Number of clicks stored: ${state.totalClicks}</p> | |
100 … | + | |
101 … | + <button class="dim ph3 ba bw1 pv2 b--black pointer bg-white" | |
102 … | + onclick=${handleClick}> | |
103 … | + Emit a click event | |
104 … | + </button> | |
105 … | + | |
106 … | + <br><br> | |
107 … | + </section> | |
108 … | + | |
109 … | + <section class="fl mw6 w-50-m w-third-l pa3"> | |
110 … | + <h2>5.</h2> | |
111 … | + | |
112 … | + <p> | |
113 … | + To make your development journey more pleasant, we've also | |
114 … | + included <a | |
115 … | + href="https://github.com/choojs/choo-devtools">devtools</a>. If | |
116 … | + you open your browser console, here's a selection of the | |
117 … | + commands that are at your disposal: | |
118 … | + | |
119 … | + <ul> | |
120 … | + <li class="mb3"> | |
121 … | + <strong>choo.state</strong><br> | |
122 … | + Log the current application state. | |
123 … | + </li> | |
124 … | + <li class="mb3"> | |
125 … | + <strong>choo.log</strong><br> | |
126 … | + Log the last 150 events received by the event bus. | |
127 … | + </li> | |
128 … | + <li class="mb3"> | |
129 … | + <strong>choo.emit</strong><br> | |
130 … | + Emit an event inside the application event bus. | |
131 … | + </li> | |
132 … | + <li class="mb3"> | |
133 … | + <strong>choo.help</strong><br> | |
134 … | + See an overview of all available commands. | |
135 … | + </li> | |
136 … | + </ul> | |
137 … | + </p> | |
138 … | + </section> | |
139 … | + | |
140 … | + <section class="fl mw6 w-50-m w-third-l pa3"> | |
141 … | + <h2>6.</h2> | |
142 … | + | |
143 … | + <p> | |
144 … | + And that's about it! Thanks for reading. If you have any | |
145 … | + questions, check out the <a href="https://choo.io">docs</a> or reach | |
146 … | + out on <a href="https://github.com/choojs/choo">GitHub</a> or <a | |
147 … | + href="https://www.irccloud.com/irc/freenode/channel/choo">IRC</a>. | |
148 … | + We're online everyday, and always around to help. Happy hacking! | |
149 … | + </p> | |
150 … | + </section> | |
151 … | + </main> | |
152 … | + </body> | |
153 … | + ` | |
154 … | + | |
155 … | + function handleClick () { | |
156 … | + emit('clicks:add', 1) | |
157 … | + } | |
158 … | +} |
Built with git-ssb-web