├── .browserslistrc ├── .gitignore ├── .postcssrc ├── .travis.yml ├── .vscode ├── extensions.json └── settings.json ├── LICENSE.md ├── README.md ├── package.json ├── public ├── assets │ └── images │ │ └── logo.png └── index.html ├── src ├── @types │ ├── README.md │ └── files.d.ts ├── app.tsx ├── components │ ├── counter │ │ ├── index.tsx │ │ └── style.scss │ └── logo │ │ ├── index.tsx │ │ └── style.scss ├── main.tsx ├── store.ts ├── styles │ ├── style.scss │ └── variables.scss └── types.ts ├── test └── app.spec.tsx ├── tsconfig.json ├── tslint.json └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 2 versions 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | *cache 4 | *.log 5 | .env 6 | coverage 7 | -------------------------------------------------------------------------------- /.postcssrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "autoprefixer": { 4 | "grid": false 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | 5 | node_js: 6 | - '8' 7 | - '10' 8 | 9 | git: 10 | depth: 1 11 | 12 | cache: 13 | yarn: true 14 | directories: 15 | - node_modules 16 | 17 | notifications: 18 | email: false 19 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "eg2.tslint" 4 | ] 5 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.tabSize": 2, 4 | "editor.rulers": [ 5 | 120 6 | ], 7 | "files.trimTrailingWhitespace": true, 8 | "files.insertFinalNewline": true, 9 | "files.exclude": { 10 | "**/.git": true, 11 | "**/.DS_Store": true, 12 | "node_modules": true, 13 | "test-lib": true, 14 | "lib": true, 15 | "coverage": true, 16 | "npm": true 17 | }, 18 | "eslint.enable": false, 19 | "typescript.format.enable": false, 20 | "tslint.enable": true, 21 | "tslint.autoFixOnSave": true, 22 | "tslint.alwaysShowStatus": true, 23 | "tslint.validateWithDefaultConfig": true, 24 | "typescript.reportStyleChecksAsWarnings": true, 25 | "typescript.tsdk": "node_modules/typescript/lib", 26 | } 27 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 joseluisq 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hyperapp Starter [![Build Status](https://travis-ci.org/joseluisq/hyperapp-starter.svg?branch=master)](https://travis-ci.org/joseluisq/hyperapp-starter) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 2 | 3 | > Minimal [Hyperapp](https://hyperapp.js.org), [Typescript](https://www.typescriptlang.org/) and [Parcel](https://en.parceljs.org) starter. :package::rocket::tada: 4 | 5 | ![Hyperapp Starter CLI](https://user-images.githubusercontent.com/1700322/43285644-db442eb2-911f-11e8-8853-0b9fbee6b4b6.png) 6 | 7 | ## Features 8 | 9 | - [x] [Typescript](https://www.typescriptlang.org/) with TSX 10 | - [x] [Parcel](https://github.com/parcel-bundler/parcel) bundler 11 | - [x] [CSS/Sass/SCSS](https://github.com/sass/node-sass) support 12 | - [x] [PostCSS with Autoprefixer](https://github.com/postcss/autoprefixer) 13 | - [x] [Jest](http://jestjs.io/) testing with [Typescript support](https://github.com/kulshekhar/ts-jest) 14 | - [x] [TSLint](https://github.com/palantir/tslint) with [Standard Plus](https://github.com/joseluisq/tslint-config-standard-plus) rules 15 | - [x] [VS Code User Workspace](https://code.visualstudio.com/docs/getstarted/settings) pre-configured and ready to use 16 | 17 | ## Demo 18 | :rocket: [View live demo](https://codesandbox.io/s/o7xpqr69x5) 19 | 20 | ## Usage 21 | 22 | __Clone repository__ 23 | ```sh 24 | git clone \ 25 | --depth 1 \ 26 | --single-branch \ 27 | --branch {RELEASE} \ 28 | https://github.com/joseluisq/hyperapp-starter.git 29 | cd hyperapp-starter 30 | ``` 31 | 32 | *__Note:__ Change `{RELEASE}` with release version (E.g. `1.0.0`)* 33 | 34 | __Install dependencies__ 35 | ``` 36 | yarn 37 | ``` 38 | 39 | ### Development 40 | 41 | ``` 42 | yarn start 43 | ``` 44 | 45 | ### Production 46 | 47 | ``` 48 | yarn build 49 | ``` 50 | 51 | ### Testing 52 | 53 | ``` 54 | yarn test 55 | ``` 56 | 57 | ## Contributions 58 | 59 | Feel free to send some [Pull request](https://github.com/joseluisq/hyperapp-starter/pulls) or [issue](https://github.com/joseluisq/hyperapp-starter/issues). 60 | 61 | ## Related 62 | 63 | - [preact-starter](https://github.com/joseluisq/preact-starter) - Minimal Preact, Typescript and Parcel starter. :rocket: 64 | - [vue-typescript-starter](https://github.com/joseluisq/vue-typescript-starter) - Tiny Vue 2 & Typescript frontend starter. :rocket:. 65 | 66 | ## License 67 | MIT license 68 | 69 | © 2018 [José Luis Quintana](http://git.io/joseluisq) 70 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hyperapp-starter", 3 | "version": "0.0.0", 4 | "private": true, 5 | "description": "Minimal Hyperapp, Typescript and Parcel starter.", 6 | "author": "José Quintana ", 7 | "license": "MIT", 8 | "main": "public/index.html", 9 | "scripts": { 10 | "clean": "rm -rf dist .cache", 11 | "prestart": "yarn clean", 12 | "start": "parcel public/index.html", 13 | "prebuild": "yarn lint && yarn clean", 14 | "build": "env NODE_ENV=production parcel build --experimental-scope-hoisting --detailed-report --public-url ./ ./public/index.html", 15 | "lint": "tslint --format stylish --project tsconfig.json", 16 | "pretest": "yarn lint", 17 | "test": "jest", 18 | "test:watch": "jest --watch" 19 | }, 20 | "dependencies": { 21 | "hyperapp": "^1.2.9", 22 | "parcel-bundler": "^1.11.0" 23 | }, 24 | "devDependencies": { 25 | "@types/jest": "^23.3.9", 26 | "@types/node": "^10.12.9", 27 | "autoprefixer": "^9.3.1", 28 | "identity-obj-proxy": "^3.0.0", 29 | "jest": "^23.4.1", 30 | "node-sass": "^4.10.0", 31 | "ts-jest": "^23.0.1", 32 | "tslint": "^5.11.0", 33 | "tslint-config-standard-plus": "^2.1.1", 34 | "typescript": "^2.9.2" 35 | }, 36 | "jest": { 37 | "transform": { 38 | "^.+\\.tsx?$": "ts-jest" 39 | }, 40 | "testMatch": [ 41 | "**/test/**.spec.+(ts|tsx|js)" 42 | ], 43 | "moduleNameMapper": { 44 | "\\.(css|less|scss|sass|svg|png|jpg|jpeg|ttf|woff|woff2)$": "identity-obj-proxy" 45 | }, 46 | "moduleFileExtensions": [ 47 | "ts", 48 | "tsx", 49 | "js", 50 | "jsx", 51 | "json", 52 | "node" 53 | ] 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /public/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joseluisq/hyperapp-starter/d32542d09266479176f18e9c933b832a9b88d4eb/public/assets/images/logo.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hyperapp Starter 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/@types/README.md: -------------------------------------------------------------------------------- 1 | # Custom Typescript Declaration files 2 | 3 | Create in this directory your custom type definitions. For example, declaration files for untyped npm modules. 4 | 5 | First, create some `.d.ts` file like `./my-npm-js-module.d.ts` or using a directory with the module name `./my-npm-js-module/index.d.ts` 6 | 7 | Then create your declaration module 8 | 9 | ```ts 10 | declare module 'my-npm-js-module' { 11 | // all your stuff here like interfaces, classes, external imports, etc... 12 | } 13 | ``` 14 | 15 | For more info about see [Typescript Module Augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) docs. 16 | -------------------------------------------------------------------------------- /src/@types/files.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png' 2 | declare module '*.jpg' 3 | declare module '*.jpeg' 4 | declare module '*.svg' 5 | declare module '*.css' 6 | declare module '*.scss' 7 | declare module '*.sass' 8 | -------------------------------------------------------------------------------- /src/app.tsx: -------------------------------------------------------------------------------- 1 | import { ActionsType, h, View } from 'hyperapp' 2 | import { Actions, State } from './types' 3 | import { Store } from './store' 4 | import { CounterComponent as Counter } from './components/counter' 5 | import { Logo } from './components/logo' 6 | import './styles/style.scss' 7 | 8 | export const state: State = Store.state 9 | export const actions: ActionsType = Store.actions 10 | 11 | export const view: View = ({ count }, actions) => ( 12 |
13 |

14 | 15 |
16 | ) 17 | -------------------------------------------------------------------------------- /src/components/counter/index.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from 'hyperapp' 2 | import { Button, Counter, Label } from '../../types' 3 | import './style.scss' 4 | 5 | export const CounterLabel: Component