Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
hyperapp
Advanced tools
Readme
The tiny framework for building hypertext applications.
Here's the first example to get you started. Try it here—no build step required!
<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.
npm install hyperapp
Learn the basics in the Tutorial, check out the Examples, or visit the Reference.
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 | Inspect the DOM, focus and blur. | |
@hyperapp/svg | Draw SVG with plain functions. | |
@hyperapp/html | Write HTML with plain functions. | |
@hyperapp/time | Subscribe to intervals, get the time now. | |
@hyperapp/events | Subscribe to mouse, keyboard, window, and frame events. | |
@hyperapp/http | Talk to servers, make HTTP requests (#1027). | |
@hyperapp/random | Declarative random numbers and values. | |
@hyperapp/navigation | Subscribe and manage the browser URL history. |
Need to create your own effects and subscriptions? You can do that too.
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.
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
FAQs
The tiny framework for building hypertext applications.
The npm package hyperapp receives a total of 1,767 weekly downloads. As such, hyperapp popularity was classified as popular.
We found that hyperapp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.