Packaging & Configuration

fuse.config.ts

Every Fuse project — whether it's a reusable package or a consumer app — uses a fuse.config.ts file.

Library package config

fuse.config.ts

import { defineConfig } from "solid-fuse/config";

export default defineConfig({
  library: true,
  register: "register",   // Name of the Dart top-level registration function
});

library: true opts the package into fuse build's library mode (ESM output with solid-js and @solidjs/universal externalised). register names a top-level Dart function that fuse link will call. The Dart side exports it like this:

dart/lib/src/register.dart

import 'package:solid_fuse/solid_fuse.dart';

void register(FuseRuntime runtime) {
  runtime.registerWidget('myWidget', FuseMyWidget.new);
  runtime.registerHandle('myController', FuseMyController.new);
  runtime.registerHandle('myPage', FuseMyPage.new);
}

The registerHandle call covers both imperative handles (extending FuseHandle<T>) and custom navigator pages (extending FusePageHandle).

App config

Consumer apps can override Vite and Solid plugin settings:

fuse.config.ts

import { defineConfig } from "solid-fuse/config";

export default defineConfig({
  vite: {
    resolve: {
      alias: { "~": "./src" },
    },
  },
});

Fuse auto-configures the Solid plugin with generate: "universal" and moduleName: "solid-fuse", and sets up Vite with an es2020 target and IIFE build output. You only override what you need.

Config options

Option	Type	Default	Description
`library`	`boolean`	`false`	Mark this package as a Fuse library. Enables `fuse build`'s library mode (ESM with externalised peers).
`register`	`string`	`"register"`	Name of the Dart top-level registration function
`dart`	`string`	`"dart"`	Path to the Dart/Flutter package directory
`solid`	`object`	`{}`	`vite-plugin-solid` option overrides
`vite`	`object`	`{}`	Vite config overrides

How fuse link works

fuse link is the glue between npm packages and Dart. Run it from your app directory after installing Fuse packages:

fuse link

It does two things:

1. Generates pubspec_overrides.yaml

Adds Dart path dependencies for each Fuse package found in node_modules:

dart/pubspec_overrides.yaml

dependency_overrides:
  my_fuse_package:
    path: ../../node_modules/my-fuse-package/dart

2. Generates fuse_packages.dart

Creates a Dart file that imports each package with an alias and calls its top-level register function (whatever name was configured in fuse.config.ts):

dart/lib/_generated/fuse_packages.dart

// Generated by fuse link. Do not edit.
import 'package:solid_fuse/solid_fuse.dart' show FuseRuntime;
import 'package:solid_fuse/solid_fuse.dart' as solid_fuse;
import 'package:my_fuse_package/my_fuse_package.dart' as my_fuse_package;

void registerFusePackages(FuseRuntime runtime) {
  solid_fuse.registerSolidFuse(runtime);   // core package
  my_fuse_package.register(runtime);       // your package
}

The consumer app just calls registerFusePackages(runtime) in main.dart and everything is wired up. fuse dev runs fuse link automatically, so consumers don't need to re-run it manually after adding a package.

Package structure

A typical Fuse package looks like:

my-fuse-package/
  src/                    # JS source — wrapper components, factories, exports
    index.ts
    my-widget.tsx
  dart/                   # Dart package
    lib/
      src/
        widgets/          # Widget implementations
        handles/          # Controller and page handle implementations
        register.dart     # register() function
      my_fuse_package.dart  # barrel export (exports register + handles)
    pubspec.yaml
  dist/                   # Built JS output
  fuse.config.ts          # Package config
  package.json

CLI commands

Command	Description
`fuse dev`	Start Vite dev server + Flutter app with HMR
`fuse build`	Production build (Vite IIFE bundle + Flutter release)
`fuse link`	Scan packages, generate Dart glue code

Packaging & Configuration

On this page