Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atomiks/hyperapp-kit
A starter kit for Hyperapp with prerendering.
https://github.com/atomiks/hyperapp-kit
Last synced: 3 months ago
JSON representation
A starter kit for Hyperapp with prerendering.
- Host: GitHub
- URL: https://github.com/atomiks/hyperapp-kit
- Owner: atomiks
- License: mit
- Created: 2018-06-16T06:45:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-07-23T09:52:18.000Z (over 6 years ago)
- Last Synced: 2024-06-14T02:35:12.336Z (5 months ago)
- Language: JavaScript
- Size: 326 KB
- Stars: 14
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Hyperapp Kit
A starter kit for Hyperapp projects with prerendering.
## Install
```shell
git clone https://github.com/atomiks/hyperapp-kit
cd hyperapp-kit
npm install
```
Wipe git commit history with `npm run wipe`.
## Development
```shell
# Start development server on http://localhost:1234
npm start
```
Hyperapp Kit uses [Parcel](https://github.com/parcel-bundler/parcel). It comes with a development server and hot module reloading out of the box.
## Production
```shell
# Build files to dist/
npm run build
```
The files are minified and tree-shaken for optimization, and given hashes for cache-busting.
### Prerendering
Upon build, the container element (`` by default) will contain the app as an HTML string with the initial state. This means the browser can paint the elements onto the screen progressively as the HTML is streamed from the server without needing to download the JavaScript bundle, parse it, and then execute it. This is great for user experience and SEO, especially on slow 3G connections and low-end mobile phones. Once the JavaScript is ready, the nodes are hydrated by Hyperapp to enable interactivity.
Prerendering is distinguished from server-side rendering (SSR) in that HTTP requests for dynamic content are still done on the client, not the server. This means only static content is prerendered, and `XMLHttpRequest` or `fetch` requests are still made client-side.
Google is able to index dynamic content loaded with AJAX most of the time. However, it generally does not wait longer than 5 seconds. Other search engines like Bing and Yandex currently do not execute JavaScript at all.
## Issues
Delete the `.cache` and `.localserver` folders if you encounter issues with the development server or building for production, as old data in these directories can sometimes cause issues.
## Testing
Hyperapp Kit uses [Jest](https://github.com/facebook/jest) for testing. It provides an automatic browser-like environment for Node with [JSDOM](https://github.com/jsdom/jsdom) to test your components.
```shell
# Run tests with coverage output
npm test
```
## Recommended config and style
### JSX
Virtual nodes as XML tags instead of `h` function calls is usually easier to mentally parse because of the terminating tag. It also looks stylistically pleasing due to familiarity with writing UIs as HTML.
### Sass
The most popular CSS preprocessor.
### CSS
Store styles in `src/css`. Each component should have its own stylesheet which is imported into the component's JavaScript file.
Use a methodology for scoping and maintainable CSS without styled components overhead.
```scss
.MyComponent {
background: #333;
}
.MyComponent-element {
color: white;
&--active {
color: pink;
}
}
```
Use the `cc` function in `src/js/utils.js` for conditional class concatenation:
```js
cc('static', { highlighted: false }) // "static"
cc('static', { highlighted: true }) // "static highlighted"
cc({ a: false, b: true }) // "b"
```
For generic or CSS framework components, use `kebab-case`:
```css
.css-component {
text-align: center;
}
```
For Hyperapp components, use `PascalCase`:
```css
.HyperappComponent {
text-align: center;
}
```
### Utility functions
Place utility functions as exported named functions inside `src/js/utils.js` to be imported throughout the app.
## License
MIT