humn 1.3.1 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
# humn
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This package is the core `humn` library. It provides the rendering engine and state management capabilities.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
While you can use `humn` standalone with the `h()` syntax, we recommend using it with the `vite-plugin-humn` for the best experience with `.humn` single-file components. For more information, please see the [**root README**](../../README.md).
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
npm install humn
|
|
11
|
-
npm install -D vite-plugin-humn
|
|
12
11
|
```
|
|
13
12
|
|
|
14
|
-
## Quick Start
|
|
13
|
+
## Quick Start with `h()`
|
|
15
14
|
|
|
16
|
-
Here's a simple counter example using
|
|
15
|
+
Here's a simple counter example using the `h()` syntax.
|
|
17
16
|
|
|
18
17
|
### 1. Create a Cortex (Store)
|
|
19
18
|
|
|
@@ -42,22 +41,23 @@ export const counterStore = new Cortex({
|
|
|
42
41
|
|
|
43
42
|
### 2. Create a Component
|
|
44
43
|
|
|
45
|
-
Components are
|
|
44
|
+
Components are functions that return a tree of `h()` calls.
|
|
46
45
|
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
```javascript
|
|
47
|
+
// App.js
|
|
48
|
+
import { h } from 'humn'
|
|
49
|
+
import { counterStore } from './store'
|
|
51
50
|
|
|
51
|
+
export function App() {
|
|
52
52
|
const { count } = counterStore.memory
|
|
53
53
|
const { increment, decrement } = counterStore.synapses
|
|
54
|
-
</script>
|
|
55
54
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
return h('div', {}, [
|
|
56
|
+
h('h1', {}, `Count: ${count}`),
|
|
57
|
+
h('button', { onclick: increment }, '+'),
|
|
58
|
+
h('button', { onclick: decrement }, '-'),
|
|
59
|
+
])
|
|
60
|
+
}
|
|
61
61
|
```
|
|
62
62
|
|
|
63
63
|
### 3. Mount
|
|
@@ -65,7 +65,7 @@ Components are defined in `.humn` files, which combine logic, template, and styl
|
|
|
65
65
|
```javascript
|
|
66
66
|
// main.js
|
|
67
67
|
import { mount } from 'humn'
|
|
68
|
-
import App from './App.
|
|
68
|
+
import { App } from './App.js'
|
|
69
69
|
|
|
70
70
|
mount(document.getElementById('root'), App)
|
|
71
71
|
```
|