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.
Files changed (2) hide show
  1. package/README.md +17 -17
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,19 +1,18 @@
1
1
  # humn
2
2
 
3
- Humn is a minimal, human-centric reactive UI library with built-in state management. It's designed to be simple, intuitive, and powerful.
3
+ This package is the core `humn` library. It provides the rendering engine and state management capabilities.
4
4
 
5
- This package is the core `humn` library.
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 `.humn` files.
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 defined in `.humn` files, which combine logic, template, and styles.
44
+ Components are functions that return a tree of `h()` calls.
46
45
 
47
- ```html
48
- <!-- App.humn -->
49
- <script>
50
- import { counterStore } from './store'
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
- <div>
57
- <h1>Count: {count}</h1>
58
- <button onclick="{increment}">+</button>
59
- <button onclick="{decrement}">-</button>
60
- </div>
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.humn'
68
+ import { App } from './App.js'
69
69
 
70
70
  mount(document.getElementById('root'), App)
71
71
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "humn",
3
- "version": "1.3.1",
3
+ "version": "1.3.2",
4
4
  "description": "A minimal, human-centric reactive UI library with built in state management.",
5
5
  "keywords": [
6
6
  "reactive",