what-framework 0.5.1 → 0.5.4

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 +170 -0
  2. package/package.json +8 -8
package/README.md ADDED
@@ -0,0 +1,170 @@
1
+ # what-framework
2
+
3
+ The closest framework to vanilla JS. Signals-based reactivity, compiler-first JSX, islands architecture -- no virtual DOM diffing overhead.
4
+
5
+ This is the main package for What Framework. It re-exports everything from [`what-core`](https://www.npmjs.com/package/what-core) plus routing, server rendering, and the compiler.
6
+
7
+ ## Install
8
+
9
+ ```bash
10
+ npm install what-framework
11
+ ```
12
+
13
+ Or scaffold a new project:
14
+
15
+ ```bash
16
+ npx create-what my-app
17
+ cd my-app
18
+ npm install
19
+ npm run dev
20
+ ```
21
+
22
+ ## Quick Start
23
+
24
+ ```jsx
25
+ import { mount, useSignal } from 'what-framework';
26
+
27
+ function Counter() {
28
+ const count = useSignal(0);
29
+
30
+ return (
31
+ <div>
32
+ <p>Count: {count()}</p>
33
+ <button onClick={() => count.set(c => c + 1)}>+</button>
34
+ </div>
35
+ );
36
+ }
37
+
38
+ mount(<Counter />, '#app');
39
+ ```
40
+
41
+ ## Signals
42
+
43
+ Fine-grained reactivity without a virtual DOM. Updates flow directly to the DOM nodes that depend on a signal.
44
+
45
+ ```js
46
+ import { signal, computed, effect } from 'what-framework';
47
+
48
+ const name = signal('World');
49
+ const greeting = computed(() => `Hello, ${name()}!`);
50
+
51
+ effect(() => console.log(greeting()));
52
+
53
+ name.set('What');
54
+ // logs: "Hello, What!"
55
+ ```
56
+
57
+ ## Hooks
58
+
59
+ React-familiar hooks, powered by signals under the hood.
60
+
61
+ ```js
62
+ import { useState, useEffect, useMemo, useRef, useReducer, createContext, useContext } from 'what-framework';
63
+
64
+ const [count, setCount] = useState(0);
65
+
66
+ useEffect(() => {
67
+ document.title = `Count: ${count}`;
68
+ }, [count]);
69
+ ```
70
+
71
+ ## Components
72
+
73
+ ```jsx
74
+ import { memo, lazy, Suspense, ErrorBoundary, Show, For } from 'what-framework';
75
+
76
+ // Conditional rendering
77
+ <Show when={() => loggedIn()}>
78
+ <Dashboard />
79
+ </Show>
80
+
81
+ // List rendering
82
+ <For each={() => items()}>
83
+ {(item) => <li>{item.name}</li>}
84
+ </For>
85
+
86
+ // Code splitting
87
+ const Settings = lazy(() => import('./Settings'));
88
+
89
+ <Suspense fallback={<Spinner />}>
90
+ <Settings />
91
+ </Suspense>
92
+ ```
93
+
94
+ ## Data Fetching
95
+
96
+ SWR and TanStack Query-style data hooks built in.
97
+
98
+ ```js
99
+ import { useSWR, useQuery } from 'what-framework';
100
+
101
+ const { data, error, isLoading } = useSWR('user', () =>
102
+ fetch('/api/user').then(r => r.json())
103
+ );
104
+
105
+ const { data, refetch } = useQuery({
106
+ queryKey: ['todos'],
107
+ queryFn: () => fetch('/api/todos').then(r => r.json()),
108
+ staleTime: 5000,
109
+ });
110
+ ```
111
+
112
+ ## Forms
113
+
114
+ Built-in form handling with validation.
115
+
116
+ ```jsx
117
+ import { useForm, rules, simpleResolver } from 'what-framework';
118
+
119
+ const { register, handleSubmit, formState } = useForm({
120
+ resolver: simpleResolver({
121
+ email: [rules.required(), rules.email()],
122
+ password: [rules.required(), rules.minLength(8)],
123
+ }),
124
+ });
125
+ ```
126
+
127
+ ## Animation
128
+
129
+ Physics-based springs and gesture support.
130
+
131
+ ```js
132
+ import { spring, tween, useGesture } from 'what-framework';
133
+
134
+ const x = spring(0, { stiffness: 100, damping: 10 });
135
+ x.set(200); // animate to 200
136
+ ```
137
+
138
+ ## Sub-path Exports
139
+
140
+ | Path | Contents |
141
+ |---|---|
142
+ | `what-framework` | Full API (signals, hooks, components, forms, animation, a11y, etc.) |
143
+ | `what-framework/router` | Client-side routing |
144
+ | `what-framework/server` | SSR and static generation |
145
+ | `what-framework/render` | Fine-grained rendering primitives |
146
+ | `what-framework/testing` | Test utilities |
147
+ | `what-framework/jsx-runtime` | JSX automatic runtime |
148
+
149
+ ## Vite Setup
150
+
151
+ ```js
152
+ // vite.config.js
153
+ import { defineConfig } from 'vite';
154
+ import what from 'what-compiler/vite';
155
+
156
+ export default defineConfig({
157
+ plugins: [what()],
158
+ });
159
+ ```
160
+
161
+ ## Links
162
+
163
+ - [Documentation](https://whatfw.com)
164
+ - [GitHub](https://github.com/zvndev/what-fw)
165
+ - [Benchmarks](https://benchmarks.whatfw.com)
166
+ - [React Compat](https://react.whatfw.com) -- use 90+ React libraries with What
167
+
168
+ ## License
169
+
170
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "what-framework",
3
- "version": "0.5.1",
3
+ "version": "0.5.4",
4
4
  "description": "The closest framework to vanilla JS — signals, components, islands, SSR",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
@@ -58,16 +58,16 @@
58
58
  "license": "MIT",
59
59
  "repository": {
60
60
  "type": "git",
61
- "url": "git+https://github.com/aspect/what-fw.git"
61
+ "url": "https://github.com/zvndev/what-fw"
62
62
  },
63
63
  "bugs": {
64
- "url": "https://github.com/aspect/what-fw/issues"
64
+ "url": "https://github.com/zvndev/what-fw/issues"
65
65
  },
66
- "homepage": "https://github.com/aspect/what-fw#readme",
66
+ "homepage": "https://whatfw.com",
67
67
  "dependencies": {
68
- "what-core": "^0.5.1",
69
- "what-router": "^0.5.1",
70
- "what-server": "^0.5.1",
71
- "what-compiler": "^0.5.1"
68
+ "what-core": "^0.5.3",
69
+ "what-router": "^0.5.3",
70
+ "what-server": "^0.5.3",
71
+ "what-compiler": "^0.5.3"
72
72
  }
73
73
  }