Fusée Framework

1.6.0 · active · verified Sun Apr 19

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.

Common errors

```
ReferenceError: defineComponent is not defined
```
cause The `defineComponent` function was not imported or is out of scope.

fix Add `import { defineComponent } from 'fusee-framework';` at the top of your component file.
```
TypeError: signal is not a function
```
cause Attempted to call `signal` without importing it, or `signal` was overshadowed by another variable.

fix Ensure `import { signal } from 'fusee-framework';` is present and that `signal` is not redeclared in your scope.
```
Failed to parse template: Invalid directive f-model syntax
```
cause The `f-model` directive expects a variable name for two-way binding, but received an expression or incorrect syntax.

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`.

Warnings

gotcha 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')`).
Fix: Always update signals by calling them with the new value: `mySignal(newValue)` instead of `mySignal.value = newValue` or other direct mutations.
gotcha Using the `f-once` directive incorrectly on dynamic content can prevent updates from propagating, effectively freezing that subtree's reactivity.
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.
gotcha 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.
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.
gotcha 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.
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.

Install

npm install fusee-framework npm
yarn add fusee-framework yarn
pnpm add fusee-framework pnpm

Imports

defineComponent
wrong:
```
const defineComponent = require('fusee-framework').defineComponent;
```
correct:
```
import { defineComponent } from 'fusee-framework';
```
Fusée primarily uses ESM; CommonJS `require` is generally not supported for direct module imports in modern projects, especially with Vite.
signal
wrong:
```
import signal from 'fusee-framework/signal';
```
correct:
```
import { signal } from 'fusee-framework';
```
`signal` is a named export from the main package. Do not try to import it from a subpath.
computed
wrong:
```
import { computedValue } from 'fusee-framework';
```
correct:
```
import { computed } from 'fusee-framework';
```
The reactive primitive for derived state is `computed`, not `computedValue` or similar.
onMount
wrong:
```
import { OnMount } from 'fusee-framework';
```
correct:
```
import { onMount } from 'fusee-framework';
```
Lifecycle hooks like `onMount` are named exports, typically used inside `defineComponent`'s `setup` function.

Quickstart

This demonstrates how to install the Fusée CLI globally and scaffold a new project, then run it in development mode.

npm install -g fusee-framework
create-fusee-app my-fusee-app
cd my-fusee-app
npm install
npm run dev

view raw JSON →