@faber1999/axon.js 0.1.0 → 0.3.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/README.md +27 -12
- package/package.json +7 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ A fine-grained reactive frontend framework built from scratch.
|
|
|
4
4
|
JSX syntax · Signals reactivity · Router · Store · No Virtual DOM · Zero dependencies.
|
|
5
5
|
|
|
6
6
|
```tsx
|
|
7
|
-
import { signal, createApp } from 'axon.js'
|
|
7
|
+
import { signal, createApp } from '@faber1999/axon.js'
|
|
8
8
|
|
|
9
9
|
function Counter() {
|
|
10
10
|
const [count, setCount] = signal(0)
|
|
@@ -27,7 +27,13 @@ Components run **once**. Only the exact DOM nodes that depend on a signal update
|
|
|
27
27
|
## Installation
|
|
28
28
|
|
|
29
29
|
```bash
|
|
30
|
-
npm install axon.js
|
|
30
|
+
npm install @faber1999/axon.js
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
You also need Vite and TypeScript as dev dependencies:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm install -D vite typescript
|
|
31
37
|
```
|
|
32
38
|
|
|
33
39
|
### Vite setup
|
|
@@ -41,7 +47,7 @@ export default defineConfig({
|
|
|
41
47
|
esbuild: {
|
|
42
48
|
jsxFactory: 'h',
|
|
43
49
|
jsxFragment: 'Fragment',
|
|
44
|
-
jsxInject: `import { h, Fragment } from 'axon.js/jsx'`
|
|
50
|
+
jsxInject: `import { h, Fragment } from '@faber1999/axon.js/jsx'`
|
|
45
51
|
}
|
|
46
52
|
})
|
|
47
53
|
```
|
|
@@ -51,14 +57,23 @@ export default defineConfig({
|
|
|
51
57
|
```json
|
|
52
58
|
{
|
|
53
59
|
"compilerOptions": {
|
|
60
|
+
"target": "ES2020",
|
|
61
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
62
|
+
"module": "ESNext",
|
|
63
|
+
"moduleResolution": "bundler",
|
|
64
|
+
"noEmit": true,
|
|
65
|
+
"allowImportingTsExtensions": true,
|
|
66
|
+
"strict": true,
|
|
54
67
|
"jsx": "preserve",
|
|
55
68
|
"jsxFactory": "h",
|
|
56
|
-
"jsxFragmentFactory": "Fragment"
|
|
57
|
-
|
|
58
|
-
|
|
69
|
+
"jsxFragmentFactory": "Fragment"
|
|
70
|
+
},
|
|
71
|
+
"include": ["src"]
|
|
59
72
|
}
|
|
60
73
|
```
|
|
61
74
|
|
|
75
|
+
The last three `jsx*` options are the only ones specific to axon.js. The rest is standard Vite + TypeScript configuration.
|
|
76
|
+
|
|
62
77
|
That's it. No plugins, no Babel, no extra config.
|
|
63
78
|
|
|
64
79
|
---
|
|
@@ -68,7 +83,7 @@ That's it. No plugins, no Babel, no extra config.
|
|
|
68
83
|
### Reactivity
|
|
69
84
|
|
|
70
85
|
```ts
|
|
71
|
-
import { signal, effect, computed, batch, untrack } from 'axon.js'
|
|
86
|
+
import { signal, effect, computed, batch, untrack } from '@faber1999/axon.js'
|
|
72
87
|
|
|
73
88
|
// signal — reactive value
|
|
74
89
|
const [count, setCount] = signal(0)
|
|
@@ -101,7 +116,7 @@ effect(() => {
|
|
|
101
116
|
### JSX & Components
|
|
102
117
|
|
|
103
118
|
```tsx
|
|
104
|
-
import { onMount, onCleanup, createApp } from 'axon.js'
|
|
119
|
+
import { onMount, onCleanup, createApp } from '@faber1999/axon.js'
|
|
105
120
|
|
|
106
121
|
function Timer() {
|
|
107
122
|
const [seconds, setSeconds] = signal(0)
|
|
@@ -120,7 +135,7 @@ createApp(Timer).mount('#app')
|
|
|
120
135
|
### Control flow
|
|
121
136
|
|
|
122
137
|
```tsx
|
|
123
|
-
import { Show, For, Dynamic, Portal } from 'axon.js'
|
|
138
|
+
import { Show, For, Dynamic, Portal } from '@faber1999/axon.js'
|
|
124
139
|
|
|
125
140
|
// Conditional rendering
|
|
126
141
|
<Show when={isLoggedIn} fallback={<Login />}>
|
|
@@ -144,7 +159,7 @@ import { Show, For, Dynamic, Portal } from 'axon.js'
|
|
|
144
159
|
### Router
|
|
145
160
|
|
|
146
161
|
```tsx
|
|
147
|
-
import { createRouter, RouterView, Link, useRouter, useParams } from 'axon.js'
|
|
162
|
+
import { createRouter, RouterView, Link, useRouter, useParams } from '@faber1999/axon.js'
|
|
148
163
|
|
|
149
164
|
createRouter(
|
|
150
165
|
[
|
|
@@ -204,7 +219,7 @@ const navigate = useNavigate() // navigate('/path')
|
|
|
204
219
|
### Store
|
|
205
220
|
|
|
206
221
|
```ts
|
|
207
|
-
import { createStore, select } from 'axon.js'
|
|
222
|
+
import { createStore, select } from '@faber1999/axon.js'
|
|
208
223
|
|
|
209
224
|
interface AppState {
|
|
210
225
|
theme: 'dark' | 'light'
|
|
@@ -231,7 +246,7 @@ Multiple independent stores are supported — just call `createStore` multiple t
|
|
|
231
246
|
### Context
|
|
232
247
|
|
|
233
248
|
```tsx
|
|
234
|
-
import { createContext } from 'axon.js'
|
|
249
|
+
import { createContext } from '@faber1999/axon.js'
|
|
235
250
|
|
|
236
251
|
const ThemeContext = createContext<'dark' | 'light'>('dark')
|
|
237
252
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faber1999/axon.js",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "A fine-grained reactive frontend framework with JSX",
|
|
5
|
+
"author": "Faber Grajales Hincapié <faber1999> (https://github.com/faber1999)",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/faber1999/axon.js"
|
|
9
|
+
},
|
|
10
|
+
"homepage": "https://github.com/faber1999/axon.js#readme",
|
|
5
11
|
"type": "module",
|
|
6
12
|
"license": "MIT",
|
|
7
13
|
"files": [
|