-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
36 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,23 +4,49 @@ A **jsx-free**, **super-lightweight** and **zero-dependency** library to add int | |
|
||
Read [this blog post](https://www.itsmeseb.dev/2024/01/03/tent.html) to get a better understanding of what Tent is and why it exists. You might also be interested in "[What is Tent?](https://tentjs.github.io/docs/what-is-it.html)". | ||
|
||
## Installation | ||
## ⚙️ Installation | ||
|
||
```bash | ||
npm install @tentjs/tent | ||
``` | ||
|
||
or, the official starter template | ||
## ⚡ Quickstart | ||
|
||
```bash | ||
git clone @tentjs/starter my-app | ||
cd my-app | ||
npm install | ||
npm run watch | ||
Getting started with Tent is easy. Here's a simple example component that increments a number when the button is clicked. This example demonstrates creating a stateful component, updating the state, and mounting it to the DOM. | ||
|
||
```typescript | ||
import { type Component, mount, tags } from '@tentjs/tent'; | ||
|
||
// Tags are functions that create elements | ||
// A tag takes 2 arguments: the children and the attributes (optional) | ||
// The attributes will be assigned to the element, and can be | ||
// onclick, onchange, disabled, classNames, etc.. | ||
const { button } = tags; | ||
|
||
type State = { count: number }; | ||
|
||
const Counter: Component<State> = { | ||
// Initial state | ||
state: { count: 0 }, | ||
// Define the view | ||
view: ({ state }) => { | ||
return button( | ||
`You clicked ${state.count} times`, | ||
// Assign an onclick event to the button | ||
{ onclick: () => state.count++ }, | ||
); | ||
}, | ||
}; | ||
|
||
// Append the component to the body | ||
mount(document.body, Counter); | ||
``` | ||
|
||
To get started you can read the [official and friendly documentation](https://tentjs.github.io/docs/). Or, you might be interested in some of the [examples](https://tentjs.github.io/cookbook/). | ||
## 👍🏻 Contribute | ||
|
||
## Contributing | ||
If you want to support the active development of Tent, there are a few ways you can help: | ||
|
||
Feel free to get involved in the [discussions](https://github.com/tentjs/tent/discussions), submit a pull request or send me an [email](mailto:[email protected]). | ||
1. [**Give a ⭐**](https://github.com/tentjs/tent/stargazers) — bring attention to the project. | ||
2. **Tweet about it** — share your excitement. | ||
3. [**Get involved**](https://github.com/tentjs/tent/discussions) — join the discussions. | ||
4. [**Contribute**](https://github.com/tentjs/tent/pulls) — submit a pull request. |