humn 1.6.0 → 1.7.0
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/.cursor/rules/humn.mdc +20 -0
- package/AGENTS.md +64 -0
- package/CLAUDE.md +64 -0
- package/README.md +18 -6
- package/bin/humn.js +56 -0
- package/dist/cortex.d.ts +1 -1
- package/dist/humn.js +324 -278
- package/dist/humn.js.map +1 -1
- package/dist/humn.umd.js +2 -2
- package/dist/humn.umd.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/resource.d.ts +2 -0
- package/humn.ai.json +18 -0
- package/llms-full.txt +134 -0
- package/llms.txt +25 -0
- package/package.json +12 -3
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Use this rule when working with Humn frontend framework code (.humn files, Cortexes).
|
|
3
|
+
globs: ["*.humn", "src/**/*.js", "src/**/*.ts"]
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Humn
|
|
7
|
+
|
|
8
|
+
Humn is a reactive frontend framework. It uses `.humn` files and Cortex state.
|
|
9
|
+
|
|
10
|
+
## Rules
|
|
11
|
+
|
|
12
|
+
- Humn is NOT React, Vue, Svelte, or Solid.
|
|
13
|
+
- Do not use React hooks, JSX, Svelte `$:` syntax, or Solid signals.
|
|
14
|
+
- Do not start fetches directly in the `<script>` block. It runs on every render. Use `onMount()` instead.
|
|
15
|
+
- Use `resource()` and `resourceSynapse()` for async data fetching.
|
|
16
|
+
- Use `.humn` files for components. They contain `<script>`, template markup, and `<style>`.
|
|
17
|
+
- Use `Cortex` for state management, with `memory` for state and `synapses` for actions.
|
|
18
|
+
- Read state via `cortex.memory`, mutate via `cortex.synapses` which calls `set((state) => ...)`.
|
|
19
|
+
- Component styles inside `<style>` are automatically scoped.
|
|
20
|
+
- Instantiate Cortex with an object: `new Cortex({ memory: {...}, synapses: (set) => ({...}) })`.
|
package/AGENTS.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Humn project instructions
|
|
2
|
+
|
|
3
|
+
This project uses Humn.
|
|
4
|
+
|
|
5
|
+
## Commands
|
|
6
|
+
|
|
7
|
+
- Install: `npm install`
|
|
8
|
+
- Dev server: `npm run dev`
|
|
9
|
+
- Build: `npm run build`
|
|
10
|
+
- Tests: `npm test` if present
|
|
11
|
+
|
|
12
|
+
## Humn conventions
|
|
13
|
+
|
|
14
|
+
- Components use `.humn` files.
|
|
15
|
+
- A `.humn` file may contain `<script>`, template markup and `<style>`.
|
|
16
|
+
- Component styles are scoped.
|
|
17
|
+
- Shared state should live in Cortexes.
|
|
18
|
+
- Do not start fetches or side effects directly in the `<script>` block. It runs on every render. Use `onMount()`.
|
|
19
|
+
- Use `resource()` and `resourceSynapse()` for async server state.
|
|
20
|
+
- Read state from `cortex.memory`.
|
|
21
|
+
- Change state through `cortex.synapses`.
|
|
22
|
+
- Use `persist(initial, { key })` for localStorage-backed state.
|
|
23
|
+
- Do not use React hooks, JSX component files, Svelte stores or Solid signals unless the project explicitly adds those libraries.
|
|
24
|
+
|
|
25
|
+
## Cortex example
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import { Cortex, persist } from 'humn'
|
|
29
|
+
|
|
30
|
+
export const uiCortex = new Cortex({
|
|
31
|
+
memory: {
|
|
32
|
+
activeView: persist('accounts', { key: 'active-view' }),
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
synapses: (set) => ({
|
|
36
|
+
setActiveView(view) {
|
|
37
|
+
set((state) => {
|
|
38
|
+
state.activeView = view
|
|
39
|
+
})
|
|
40
|
+
},
|
|
41
|
+
}),
|
|
42
|
+
})
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Component example
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<script>
|
|
49
|
+
import { uiCortex } from './cortexes/uiCortex.js'
|
|
50
|
+
|
|
51
|
+
const { activeView } = uiCortex.memory
|
|
52
|
+
const { setActiveView } = uiCortex.synapses
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<button onclick="{()" ="">
|
|
56
|
+
setActiveView('accounts')}> Current view: {activeView}
|
|
57
|
+
</button>
|
|
58
|
+
|
|
59
|
+
<style>
|
|
60
|
+
button {
|
|
61
|
+
border-radius: 8px;
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
64
|
+
```
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Humn project instructions
|
|
2
|
+
|
|
3
|
+
This project uses Humn.
|
|
4
|
+
|
|
5
|
+
## Commands
|
|
6
|
+
|
|
7
|
+
- Install: `npm install`
|
|
8
|
+
- Dev server: `npm run dev`
|
|
9
|
+
- Build: `npm run build`
|
|
10
|
+
- Tests: `npm test` if present
|
|
11
|
+
|
|
12
|
+
## Humn conventions
|
|
13
|
+
|
|
14
|
+
- Components use `.humn` files.
|
|
15
|
+
- A `.humn` file may contain `<script>`, template markup and `<style>`.
|
|
16
|
+
- Component styles are scoped.
|
|
17
|
+
- Shared state should live in Cortexes.
|
|
18
|
+
- Do not start fetches or side effects directly in the `<script>` block. It runs on every render. Use `onMount()`.
|
|
19
|
+
- Use `resource()` and `resourceSynapse()` for async server state.
|
|
20
|
+
- Read state from `cortex.memory`.
|
|
21
|
+
- Change state through `cortex.synapses`.
|
|
22
|
+
- Use `persist(initial, { key })` for localStorage-backed state.
|
|
23
|
+
- Do not use React hooks, JSX component files, Svelte stores or Solid signals unless the project explicitly adds those libraries.
|
|
24
|
+
|
|
25
|
+
## Cortex example
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import { Cortex, persist } from 'humn'
|
|
29
|
+
|
|
30
|
+
export const uiCortex = new Cortex({
|
|
31
|
+
memory: {
|
|
32
|
+
activeView: persist('accounts', { key: 'active-view' }),
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
synapses: (set) => ({
|
|
36
|
+
setActiveView(view) {
|
|
37
|
+
set((state) => {
|
|
38
|
+
state.activeView = view
|
|
39
|
+
})
|
|
40
|
+
},
|
|
41
|
+
}),
|
|
42
|
+
})
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Component example
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<script>
|
|
49
|
+
import { uiCortex } from './cortexes/uiCortex.js'
|
|
50
|
+
|
|
51
|
+
const { activeView } = uiCortex.memory
|
|
52
|
+
const { setActiveView } = uiCortex.synapses
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<button onclick="{()" ="">
|
|
56
|
+
setActiveView('accounts')}> Current view: {activeView}
|
|
57
|
+
</button>
|
|
58
|
+
|
|
59
|
+
<style>
|
|
60
|
+
button {
|
|
61
|
+
border-radius: 8px;
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
64
|
+
```
|
package/README.md
CHANGED
|
@@ -10,19 +10,31 @@ While you can use `humn` standalone with the `h()` syntax, we recommend using it
|
|
|
10
10
|
npm install humn
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
+
## AI & Agent Support
|
|
14
|
+
|
|
15
|
+
Humn includes built-in instructions to help AI coding agents (like Cursor, Claude Code, GitHub Copilot) understand its conventions and write idiomatic code.
|
|
16
|
+
|
|
17
|
+
To initialize the AI instructions in your project, run:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npx humn init-ai
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
This will create `AGENTS.md`, `CLAUDE.md`, and `.cursor/rules/humn.mdc` in your workspace, ensuring coding agents don't confuse Humn with React or Svelte.
|
|
24
|
+
|
|
13
25
|
## Quick Start with `h()`
|
|
14
26
|
|
|
15
27
|
Here's a simple counter example using the `h()` syntax.
|
|
16
28
|
|
|
17
|
-
### 1. Create a Cortex (
|
|
29
|
+
### 1. Create a Cortex (Cortex)
|
|
18
30
|
|
|
19
31
|
The `Cortex` holds your application's state (`memory`) and the actions that can modify it (`synapses`).
|
|
20
32
|
|
|
21
33
|
```javascript
|
|
22
|
-
//
|
|
34
|
+
// cortex.js
|
|
23
35
|
import { Cortex } from 'humn'
|
|
24
36
|
|
|
25
|
-
export const
|
|
37
|
+
export const counterCortex = new Cortex({
|
|
26
38
|
memory: {
|
|
27
39
|
count: 0,
|
|
28
40
|
},
|
|
@@ -46,11 +58,11 @@ Components are functions that return a tree of `h()` calls.
|
|
|
46
58
|
```javascript
|
|
47
59
|
// App.js
|
|
48
60
|
import { h } from 'humn'
|
|
49
|
-
import {
|
|
61
|
+
import { counterCortex } from './cortex'
|
|
50
62
|
|
|
51
63
|
export function App() {
|
|
52
|
-
const { count } =
|
|
53
|
-
const { increment, decrement } =
|
|
64
|
+
const { count } = counterCortex.memory
|
|
65
|
+
const { increment, decrement } = counterCortex.synapses
|
|
54
66
|
|
|
55
67
|
return h('div', {}, [
|
|
56
68
|
h('h1', {}, `Count: ${count}`),
|
package/bin/humn.js
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import fs from 'fs'
|
|
4
|
+
import path from 'path'
|
|
5
|
+
import { fileURLToPath } from 'url'
|
|
6
|
+
|
|
7
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
|
8
|
+
const pkgDir = path.resolve(__dirname, '..')
|
|
9
|
+
|
|
10
|
+
const args = process.argv.slice(2)
|
|
11
|
+
|
|
12
|
+
if (args[0] === 'init-ai') {
|
|
13
|
+
console.log('Initializing Humn AI guidance files...')
|
|
14
|
+
|
|
15
|
+
const destDir = process.cwd()
|
|
16
|
+
|
|
17
|
+
// Create .cursor/rules if needed
|
|
18
|
+
const cursorRulesDir = path.join(destDir, '.cursor', 'rules')
|
|
19
|
+
if (!fs.existsSync(cursorRulesDir)) {
|
|
20
|
+
fs.mkdirSync(cursorRulesDir, { recursive: true })
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Files to copy
|
|
24
|
+
const filesToCopy = [
|
|
25
|
+
{ src: 'AGENTS.md', dest: 'AGENTS.md' },
|
|
26
|
+
{ src: 'CLAUDE.md', dest: 'CLAUDE.md' },
|
|
27
|
+
{ src: '.cursor/rules/humn.mdc', dest: '.cursor/rules/humn.mdc' },
|
|
28
|
+
]
|
|
29
|
+
|
|
30
|
+
filesToCopy.forEach((file) => {
|
|
31
|
+
const srcPath = path.join(pkgDir, file.src)
|
|
32
|
+
const destPath = path.join(destDir, file.dest)
|
|
33
|
+
|
|
34
|
+
if (fs.existsSync(srcPath)) {
|
|
35
|
+
if (!fs.existsSync(destPath)) {
|
|
36
|
+
fs.copyFileSync(srcPath, destPath)
|
|
37
|
+
console.log(`✓ Created ${file.dest}`)
|
|
38
|
+
} else {
|
|
39
|
+
console.log(`! Skipped ${file.dest} (already exists)`)
|
|
40
|
+
}
|
|
41
|
+
} else {
|
|
42
|
+
console.warn(`? Source file ${file.src} not found in package.`)
|
|
43
|
+
}
|
|
44
|
+
})
|
|
45
|
+
|
|
46
|
+
console.log(
|
|
47
|
+
'\nAI context initialized! Agentic tools will now understand Humn conventions better.',
|
|
48
|
+
)
|
|
49
|
+
} else {
|
|
50
|
+
console.log(`
|
|
51
|
+
Usage: humn <command>
|
|
52
|
+
|
|
53
|
+
Commands:
|
|
54
|
+
init-ai Copy AI guidance files (AGENTS.md, CLAUDE.md, .cursor/rules) into your project
|
|
55
|
+
`)
|
|
56
|
+
}
|
package/dist/cortex.d.ts
CHANGED
|
@@ -53,7 +53,7 @@ export class Cortex<MemoryType extends unknown, SynapsesType extends unknown> {
|
|
|
53
53
|
synapses: SynapsesType;
|
|
54
54
|
/**
|
|
55
55
|
* Creates a copy-on-write mutation draft that tracks changed paths without
|
|
56
|
-
* cloning the whole
|
|
56
|
+
* cloning the whole cortex before every mutative update.
|
|
57
57
|
*/
|
|
58
58
|
_createMutationDraft(base: any, changedPaths: any): {
|
|
59
59
|
getNextState: () => any;
|