探客时代
Hyperapp
1kB-ish JavaScript framework for building hypertext applications.
README
Hyperapp
The tiny framework for building hypertext applications.
- Do more with less—We have minimized the concepts you need to learn to get stuff done. Views, actions, effects, and subscriptions are all pretty easy to get to grips with and work together seamlessly.
- Write what, not how—With a declarative API that's easy to read and fun to write, Hyperapp is the best way to build purely functional, feature-rich, browser-based apps using idiomatic JavaScript.
- Smaller than a favicon—1 kB, give or take. Hyperapp is an ultra-lightweight Virtual DOM, highly-optimized diff algorithm, and state management library obsessed with minimalism.
Here's the first example to get you started. Try it here—no build step required!
- ``` html
- <script type="module">
- import { h, text, app } from "https://unpkg.com/hyperapp"
- const AddTodo = (state) => ({
- ...state,
- value: "",
- todos: state.todos.concat(state.value),
- })
- const NewValue = (state, event) => ({
- ...state,
- value: event.target.value,
- })
- app({
- init: { todos: [], value: "" },
- view: ({ todos, value }) =>
- h("main", {}, [
- h("h1", {}, text("To do list")),
- h("input", { type: "text", oninput: NewValue, value }),
- h("ul", {},
- todos.map((todo) => h("li", {}, text(todo)))
- ),
- h("button", { onclick: AddTodo }, text("New!")),
- ]),
- node: document.getElementById("app"),
- })
- </script>
- <main id="app"></main>
- ```
The app starts by setting the initial state and rendering the view on the page. User input flows into actions, whose function is to update the state, causing Hyperapp to re-render the view.
When describing how a page looks in Hyperapp, we don't write markup. Instead, we use h() and text() to create a lightweight representation of the DOM (or virtual DOM for short), and Hyperapp takes care of updating the real DOM efficiently.
Installation
- ```console
- npm install hyperapp
- ```
Documentation
Packages
Official packages provide access to Web Platform APIs in a way that makes sense for Hyperapp. For third-party packages and real-world examples, browse the Hyperawesome collection.
| Package | Status | About |
|---|---|---|
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| [`@hyperapp/dom`](/packages/dom) | [](https://www.npmjs.com/package/@hyperapp/dom) | Inspect |
| [`@hyperapp/svg`](/packages/svg) | [](https://www.npmjs.com/package/@hyperapp/svg) | Draw |
| [`@hyperapp/html`](/packages/html) | [](https://www.npmjs.com/package/@hyperapp/html) | Write |
| [`@hyperapp/time`](/packages/time) | [](https://www.npmjs.com/package/@hyperapp/time) | Subscribe |
| [`@hyperapp/events`](/packages/events) | [](https://www.npmjs.com/package/@hyperapp/events) | Subscribe |
| [`@hyperapp/http`](/packages/http) | [](https://www.npmjs.com/package/@hyperapp/http) | Talk |
| [`@hyperapp/random`](/packages/random) | [](https://www.npmjs.com/package/@hyperapp/random) | Declarative |
| [`@hyperapp/navigation`](/packages/navigation) | [](https://www.npmjs.com/package/@hyperapp/navigation) | Subscribe |
Need to create your own effects and subscriptions? You can do that too.
Help, I'm stuck!
If you've hit a stumbling block, hop on our Discord server to get help, and if you remain stuck, please file an issue, and we'll help you figure it out.
Contributing
Hyperapp is free and open-source software. If you want to support Hyperapp, becoming a contributor or sponsoring is the best way to give back. Thank you to everyone who already contributed to Hyperapp! <3
