git ssb

0+

punkmonk / double



Commit 1739ab2f646d5e903603c2b7e59b6dee0c17fd3e

Browse Files

basic skeleton

austinfrey committed on 10/28/2018, 7:36:29 PM
Parent: ba72abbf0c0d086d4b0abfbc1b10c734ae4bd4ec

Files changed

index.jschanged
package-lock.jsonchanged
package.jsonchanged
stores/clicks.jsdeleted
stores/ledger.jsadded
views/main.jschanged
index.jsView
@@ -9,9 +9,9 @@
99 … } else {
1010 … app.use(require('choo-service-worker')())
1111 … }
1212 …
13-app.use(require('./stores/clicks'))
13 …+app.use(require('./stores/ledger'))
1414 …
1515 … app.route('/', require('./views/main'))
1616 … app.route('/*', require('./views/404'))
1717 …
package-lock.jsonView
The diff is too large to show. Use a local git client to view these changes.
Old file size: 342571 bytes
New file size: 353462 bytes
package.jsonView
@@ -12,15 +12,21 @@
1212 … },
1313 … "dependencies": {
1414 … "choo": "^6.13.0",
1515 … "choo-service-worker": "^2.4.0",
16 …+ "flumedb": "^1.0.0",
17 …+ "flumelog-offset": "^3.3.2",
18 …+ "flumeview-reduce": "^1.3.14",
19 …+ "pull-paramap": "^1.2.2",
20 …+ "pull-stream": "^3.6.9",
1621 … "sheetify": "^7.3.3",
1722 … "tachyons": "^4.11.1"
1823 … },
1924 … "devDependencies": {
2025 … "bankai": "^9.15.0",
2126 … "choo-devtools": "^2.5.1",
2227 … "choo-scaffold": "^1.2.0",
2328 … "dependency-check": "^3.2.1",
29 …+ "flumelog-memory": "^0.1.3",
2430 … "standard": "^12.0.1"
2531 … }
2632 … }
stores/clicks.jsView
@@ -1,12 +1,0 @@
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-}
stores/ledger.jsView
@@ -1,0 +1,59 @@
1 …+const Flume = require('flumedb')
2 …+const Reduce = require('flumeview-reduce')
3 …+const FlumeLog = require('flumelog-memory')
4 …+
5 …+function ledger (state, emitter) {
6 …+ state.accounts = {}
7 …+ state.transactions = []
8 …+
9 …+ const db = Flume(FlumeLog())
10 …+ .use('transactions', Reduce(
11 …+ 1,
12 …+ transactionReducer,
13 …+ null,
14 …+ null,
15 …+ state.transactions))
16 …+ .use('account', Reduce(
17 …+ 1,
18 …+ accountReducer,
19 …+ null,
20 …+ null,
21 …+ state.accounts))
22 …+
23 …+ state.db = db
24 …+
25 …+ function transactionReducer (acc, item) {
26 …+ if (item.type !== 'transaction') return acc
27 …+ acc.push(item)
28 …+ return acc
29 …+ }
30 …+
31 …+ function accountReducer (acc, item) {
32 …+ if (item.type !== 'accounts') return acc
33 …+ const {msg} = item
34 …+ switch (msg.type) {
35 …+ case 'TOGGLE':
36 …+ acc[msg.name].archived = !acc[msg.name].archived
37 …+ return acc
38 …+ default:
39 …+ acc[msg.name] = msg
40 …+ return acc
41 …+ }
42 …+ }
43 …+
44 …+ function onLoad () {
45 …+ emitter.on('account', onEvent)
46 …+ emitter.on('transaction:add', onEvent)
47 …+ }
48 …+
49 …+ function onEvent (data) {
50 …+ db.append(data, (err, seq) => {
51 …+ if (err) throw err
52 …+ emitter.emit(state.events.RENDER)
53 …+ })
54 …+ }
55 …+
56 …+ emitter.on('DOMContentLoaded', onLoad)
57 …+}
58 …+
59 …+module.exports = ledger
views/main.jsView
@@ -1,158 +1,83 @@
11 … var html = require('choo/html')
22 …
33 … var TITLE = 'double - main'
44 …
5-module.exports = view
6-
75 … function view (state, emit) {
86 … if (state.title !== TITLE) emit(state.events.DOMTITLECHANGE, TITLE)
97 …
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>
8 …+ const {db} = state
199 …
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>
10 …+ const form = html`<form class="pv3">
11 …+ <div class="pb2">
12 …+ <label>debit account</label><br>
13 …+ <select>
14 …+ <option value="true">--- select debit account ---</option>
15 …+ ${generateAccountList()}
16 …+ </select>
17 …+ </div>
18 …+ <div class="pb2">
19 …+ <label>credit account</label><br>
20 …+ <select>
21 …+ <option value="true">--- select credit account ---</option>
22 …+ ${generateAccountList()}
23 …+ </select>
24 …+ </div>
25 …+ <div>
26 …+ <input class="mb2" id="amount" placeholder="amount"/><br>
27 …+ <input id="description" placeholder="description"/>
28 …+ </form>`
2429 …
25- <br>
26- </section>
30 …+ const submit = html`<div class="pb6">
31 …+ <button onclick=${handleTransaction}>submit</button>
32 …+ </div>`
2733 …
28- <section class="fl mw6 w-50-m w-third-l pa3">
29- <h2>2.</h2>
34 …+ return html`<body class="code ph3 lh-copy">
35 …+ <main>
36 …+ <div>double</div>
37 …+ ${form}
38 …+ ${submit}
39 …+ </main>
40 …+ <div>
41 …+ <form class="pb3">
42 …+ <input id="account"/>
43 …+ </form>
44 …+ <button onclick=${handleAccountCreate}>create account</button>
45 …+ </div>
46 …+ <div>
47 …+ ${Object.keys(state.accounts).map(key => {
48 …+ if (state.accounts[key].archived) return html`<div class="strike" onclick=${handleAccountArchive}>${state.accounts[key].name}</div>`
49 …+ return html`<div onclick=${handleAccountArchive}>${state.accounts[key].name}</div>`
50 …+ })}
51 …+ </div>
52 …+ </body>`
3053 …
31- <p>
32- We've outfitted your project with a small selection of commands to
33- help you achieve results faster:
34- </p>
54 …+ function generateAccountList () {
55 …+ return Object.keys(state.accounts).map(key => {
56 …+ if (state.accounts[key].archived) return
57 …+ return html`<option value="true">${state.accounts[key].name}</option>`
58 …+ })
59 …+ }
3560 …
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>
61 …+ function handleTransaction () {
62 …+ const amount = document.getElementById('amount').value
63 …+ const debit = document.getElementById('debit').value
64 …+ const credit = document.getElementById('credit').value
65 …+ const description = document.getElementById('description').value
5466 …
55- <br>
56- </section>
67 …+ emit('transaction:add', {type: 'transaction', msg: { amount, debit, credit, description }})
68 …+ }
5769 …
58- <section class="fl mw6 w-50-m w-third-l pa3">
59- <h2>3.</h2>
70 …+ function handleAccountCreate () {
71 …+ const account = document.getElementById('account').value
6072 …
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>
73 …+ emit('account', { type: 'accounts', msg: { name: account, archived: false }})
74 …+ }
6675 …
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>
76 …+ function handleAccountArchive () {
77 …+ const name = this.innerHTML
8578 …
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)
79 …+ emit('account', { type: 'accounts', msg: { name, type: 'TOGGLE' }})
15780 … }
15881 … }
82 …+
83 …+module.exports = view

Built with git-ssb-web