{"id":10924,"library":"fusee-framework","title":"Fusée Framework","description":"Fusée is a JavaScript framework, currently at v1.6.0, designed for high-performance and fine-grained reactivity. It emphasizes a \"signals-first\" approach, where atomic updates ensure only modified DOM parts are rendered, aiming for peak performance. The framework features a recursive, non-greedy compiler for efficient node traversal and a strict component system that includes prop validation, lifecycle hooks like `onMount` and `onUnmount`, and automated cleanup. It also provides optimized directives such as `f-if`, `f-for`, and `f-model`, alongside a `Performance Shield (f-once)` for stabilizing static subtrees. Fusée integrates with Vite for a fast development workflow and offers a comprehensive CLI for project scaffolding, supporting both JavaScript and TypeScript templates. It differentiates itself through its custom compiler and strong focus on explicit performance optimizations, backed by a robust test suite covering reactivity, components, dependency injection, and type safety. There's no fixed release cadence mentioned, but updates appear regular.","status":"active","version":"1.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/SebiSomu/fusee","tags":["javascript","typescript"],"install":[{"cmd":"npm install fusee-framework","lang":"bash","label":"npm"},{"cmd":"yarn add fusee-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add fusee-framework","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Fusée primarily uses ESM; CommonJS `require` is generally not supported for direct module imports in modern projects, especially with Vite.","wrong":"const defineComponent = require('fusee-framework').defineComponent;","symbol":"defineComponent","correct":"import { defineComponent } from 'fusee-framework';"},{"note":"`signal` is a named export from the main package. Do not try to import it from a subpath.","wrong":"import signal from 'fusee-framework/signal';","symbol":"signal","correct":"import { signal } from 'fusee-framework';"},{"note":"The reactive primitive for derived state is `computed`, not `computedValue` or similar.","wrong":"import { computedValue } from 'fusee-framework';","symbol":"computed","correct":"import { computed } from 'fusee-framework';"},{"note":"Lifecycle hooks like `onMount` are named exports, typically used inside `defineComponent`'s `setup` function.","wrong":"import { OnMount } from 'fusee-framework';","symbol":"onMount","correct":"import { onMount } from 'fusee-framework';"}],"quickstart":{"code":"npm install -g fusee-framework\ncreate-fusee-app my-fusee-app\ncd my-fusee-app\nnpm install\nnpm run dev","lang":"bash","description":"This demonstrates how to install the Fusée CLI globally and scaffold a new project, then run it in development mode."},"warnings":[{"fix":"Always update signals by calling them with the new value: `mySignal(newValue)` instead of `mySignal.value = newValue` or other direct mutations.","message":"Directly modifying a signal's value outside its setter (e.g., `signalObject.value = 'new'`) will not trigger reactivity. Always use the signal function as a setter (`signal('new value')`).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Reserve `f-once` for genuinely static subtrees of your DOM. If content within `f-once` needs to react to changes, remove the directive or restructure your component.","message":"Using the `f-once` directive incorrectly on dynamic content can prevent updates from propagating, effectively freezing that subtree's reactivity.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure all `onMount`, `onUnmount` (and similar) calls are made directly at the top level of your `setup` function and not inside `if` statements, `setTimeout`, or `async` blocks.","message":"Lifecycle hooks like `onMount` and `onUnmount` must be called synchronously within the `setup` function of `defineComponent`. Calling them conditionally or asynchronously will lead to undefined behavior or errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Follow the official Fusée scaffolding via `create-fusee-app` for a guaranteed working Vite setup. If customizing, ensure Vite targets a browser environment for client-side rendering.","message":"While Fusée supports Vite, ensure your Vite configuration is set up correctly for client-side rendering. Attempting SSR without explicit framework support or using a misconfigured Vite setup can lead to hydration issues.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `import { defineComponent } from 'fusee-framework';` at the top of your component file.","cause":"The `defineComponent` function was not imported or is out of scope.","error":"ReferenceError: defineComponent is not defined"},{"fix":"Ensure `import { signal } from 'fusee-framework';` is present and that `signal` is not redeclared in your scope.","cause":"Attempted to call `signal` without importing it, or `signal` was overshadowed by another variable.","error":"TypeError: signal is not a function"},{"fix":"Ensure `f-model` is assigned directly to a signal's name (e.g., `<input f-model=\"mySignal\" />`) and not an expression like `mySignal()` or `mySignal.value`.","cause":"The `f-model` directive expects a variable name for two-way binding, but received an expression or incorrect syntax.","error":"Failed to parse template: Invalid directive f-model syntax"}],"ecosystem":"npm"}