https://github.com/attack-monkey/hyperapp-count-ts-jsx-parcel
hyperapp's counter app built using jsx in typescript and bundled with parcel.js
https://github.com/attack-monkey/hyperapp-count-ts-jsx-parcel
hyperapp hyperapp-boilerplate jsx parceljs typescript
Last synced: about 1 month ago
JSON representation
hyperapp's counter app built using jsx in typescript and bundled with parcel.js
- Host: GitHub
- URL: https://github.com/attack-monkey/hyperapp-count-ts-jsx-parcel
- Owner: attack-monkey
- Created: 2018-10-31T19:39:03.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-02T19:10:26.000Z (over 7 years ago)
- Last Synced: 2025-01-25T08:44:04.031Z (over 1 year ago)
- Topics: hyperapp, hyperapp-boilerplate, jsx, parceljs, typescript
- Language: TypeScript
- Size: 8.79 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hyperapp - Counter App (typescript / parcel / jsx)
> Hyperapp's counter app modularised and typed using parcel.js (bundler) and typescript.
## Install
Install parcel.js globally (This is the bundler)
```
npm install -g parcel-bundler
```
Install dependencies
```
npm install
```
## Start
```
npm start
```
## Immutable Update
This app uses iu-ts (immutable update - typescript) to immutably update deep nested objects.
**Declarative actions are still recommended**, however using iu-ts removes the need to nest actions (allowing for easier refactor).
eg.
```tsx
// The following immutably increments state.counter.count using iu
actions.counterUp(1))}>-
```
```ts
export const actions: Actions = {
counterUp: value => state => iu(state, 'counter/count', state.counter.count + value),
counterDown: value => state => iu(state, 'counter/count', state.counter.count - value)
}
```
## Dir Structure
```
- index.html
- index.tsx
- src
- actions
- components
- main (entry component)
- main.component.tsx
- *Next component down - etc.*
- shared (shared components)
- state
- utils
```