What Framework is a JavaScript framework designed to be as close to vanilla JS as possible, leveraging a signals-based reactivity system and a compiler-first JSX approach, rather than a virtual DOM, to achieve fine-grained updates and high performance. It features an islands architecture for efficient server-side rendering (SSR) and re-exports core functionalities from `what-core`. The current stable version is 0.8.1, with recent updates (v0.7.0) focusing heavily on performance enhancements across signal reading, computed properties, effects, and DOM rendering. Key differentiators include its no-VDOM approach, native TypeScript support, and a comprehensive ecosystem offering React-familiar hooks (useState, useEffect), built-in data fetching (SWR/TanStack Query style), robust form handling, animation primitives, and a dedicated router.
npm install what-frameworkVerified import paths — ran on the pinned version, not inferred.
Demonstrates creating a reactive counter component using `useSignal` and mounting it to a DOM element (with a robust fallback if '#app' is not found).
For Vite users, ensure `what-compiler/vite` is installed as a dev dependency and configured in your `vite.config.js` under the `plugins` array (e.g., `plugins: [what()]`).
Thoroughly test React libraries when integrating them with What Framework. Consult the official 'React Compat' documentation for known limitations, compatibility guides, and potential workarounds.
Always use the signal's provided `set(newValue)` or `set(updaterFn)` method to update its value, ensuring the reactivity system correctly tracks changes and triggers updates.
Review applications for any highly performance-sensitive paths or edge cases that might have inadvertently relied on pre-0.7.0 internal behavior. Conduct thorough regression testing after upgrading to ensure consistent behavior.
Ensure you have the correct compiler plugin installed and configured for your build tool (e.g., `what-compiler/vite` for Vite) to correctly transform JSX into What Framework's internal rendering calls.
Refactor your code to ensure all hook calls are made directly within the body of a What Framework component function, adhering to the rules of hooks.
Verify that the sub-path export `what-framework/server` is correctly spelled. Ensure your build tool (e.g., Webpack, Vite, Node.js) supports and correctly configures package `exports` maps for module resolution.
Ensure your signal variables are always initialized with `useSignal()` or `signal()` and are accessible when you attempt to call `.set()`. Debug the component lifecycle to confirm the signal instance exists at the time of the update.