Registry / web-framework / fusee-framework

fusee-framework

library1.6.0jsnpmunverified

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.

web-framework llm-agents ai-ml

npm install fusee-framework

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FUSEE-FRAMEWORK

fusee-framework

web-frameworkjavascriptv1.6.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

defineComponent

✓ import { defineComponent } from 'fusee-framework';

✗ const defineComponent = require('fusee-framework').defineComponent;

Fusée primarily uses ESM; CommonJS `require` is generally not supported for direct module imports in modern projects, especially with Vite.

signal

✓ import { signal } from 'fusee-framework';

✗ import signal from 'fusee-framework/signal';

`signal` is a named export from the main package. Do not try to import it from a subpath.

computed

✓ import { computed } from 'fusee-framework';

✗ import { computedValue } from 'fusee-framework';

The reactive primitive for derived state is `computed`, not `computedValue` or similar.

onMount

✓ import { onMount } from 'fusee-framework';

✗ import { OnMount } from 'fusee-framework';

Lifecycle hooks like `onMount` are named exports, typically used inside `defineComponent`'s `setup` function.

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

fusee --version

Debug

Known issues

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

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

Errors

Common errors & fixes

ReferenceError: defineComponent is not defined

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

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

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

Upgrade

Version history

1.6.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

22 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/SebiSomu/fusee ↗

packagehttps://www.npmjs.com/package/fusee-framework ↗

homepagehttps://fusee.js.org ↗