fusee-framework 2.7.1 → 2.7.3

package/README.md

@@ -5,7 +5,7 @@
 <h1 align="center">Fusée Framework</h1>
 
 <p align="center">
-  <strong>v2.7.1 — Signals-First JS Framework | Atomic Reactivity | Rust Compiler | Go Toolchain</strong>
+  <strong>v2.7.3 — Signals-First JS Framework | Atomic Reactivity | Rust Compiler | Go Toolchain</strong>
 </p>
 
 <br />
@@ -14,7 +14,7 @@ Fusée is a custom, high-performance fine-grained reactive JavaScript framework
 
 ---
 
-## What's New in 2.7.0
+## What's New in 2.7.3
 
 - Added **Web Components**: `defineElement()` turns a fusée component into a native custom
   element with reactive props synced to attributes, shadow DOM, scoped `css` styles, native
@@ -45,14 +45,25 @@ Fusée is a custom, high-performance fine-grained reactive JavaScript framework
   JSX components use it automatically.
 - Fixed the JSX runtime: it failed to load (wrong import path), and text and `{expression}`
   children were not rendered.
-
-## What's New in 2.6.1
-
-- Added package manager choice in the `fusee init` command and automatic installation
-  of dependencies; (2.6.0)
-- Added `--install` and `--skip-install` flags to the `fusee init` command; (2.6.0)
-- Added `pm` flag to the `fusee init` command; (2.6.0)
-- Updated dev dependency for vite babel plugin. (2.6.1)
+- Fixed dependency tracking in f-for for h.js
+- Fixed shipping of intended libraries into separated dedicated libraries in npm (like router, di, store, etc.).
+  `fusee-framework` is now the core only (reactivity, components, elements, templates,
+  `createApp`). The rest has its own entry point:
+
+  | Entry                     | Exports                                                              |
+  | ------------------------- | -------------------------------------------------------------------- |
+  | `fusee-framework/router`  | `createRouter`, `navigate`, `generateRoutes`, guards, route signals  |
+  | `fusee-framework/store`   | `defineStore`, `storeToRefs`, `useNestedStore`, store plugins        |
+  | `fusee-framework/di`      | `InjectionToken`, `provideGlobal`, `EnvironmentInjector`             |
+  | `fusee-framework/actions` | `defineAction`, `createActionProxy`, `useAction` (client side)       |
+  | `fusee-framework/plugins` | `defineFuseePlugin` and the other plugin descriptors                 |
+  | `fusee-framework/server`  | Node: `handleActionRequest`, SSR helpers, `generateManifest`         |
+
+  **Breaking:** import these from their entry, e.g.
+  `import { createRouter } from 'fusee-framework/router'`. Auto-imports and new projects from
+  `fusee init` already do. `provide()` / `inject()` stay in the core.
+  FREL, Comet and the Go SSR engine are no longer in the npm package: install them with
+  `fusee add frel | comet | server`.
 
 ## Quick Start
 
@@ -493,13 +504,10 @@ my-app/
 Full type definitions are available for all framework primitives:
 
 ```typescript
-import type {
-  Signal,
-  Computed,
-  Component,
-  Router,
-  ServerAction,
-} from "./framework/types";
+import type { Signal, Computed, ComponentFactory } from "fusee-framework";
+import type { Router, Route } from "fusee-framework/router";
+import type { StoreHook } from "fusee-framework/store";
+import type { ActionProxy } from "fusee-framework/actions";
 ```
 
 Every fusée export is auto-imported in Vite builds (`framework/auto-import-preset.js`, typed in `framework/auto-imports.d.ts`). Your own services, components, stores, actions, utilities, and types should be imported explicitly.
@@ -516,21 +524,45 @@ It can be installed from the CLI after installing the SSR engine (default: not i
 
 ## Performance Benchmarks
 
-Framework Total Mean (Create, Update, Swap, Clear tests)
-Compared to other popular JS Frameworks:
-
-|  Rank  | Framework              | Execution Time |
-| :----: | :--------------------- | :------------: |
-| **1**  | **Qwik**               |   117.55 ms    |
-| **2**  | <mark>**Fusée**</mark> | **120.30 ms**  |
-| **3**  | **Angular**            |   121.29 ms    |
-| **4**  | **Solid**              |   121.54 ms    |
-| **5**  | **Preact**             |   123.18 ms    |
-| **6**  | **Vue**                |   123.99 ms    |
-| **7**  | **Svelte**             |   125.15 ms    |
-| **8**  | **React**              |   126.12 ms    |
-| **9**  | **Mithril**            |   128.35 ms    |
-| **10** | **Lit**                |   131.08 ms    |
+The benchmark runs the operations from
+[js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) on a keyed table in
+headless Chromium. Each sample is read from a Chrome trace: it is the busy main-thread time from
+the start of the operation until the frame that shows the result is committed (script, style,
+layout and paint), with time spent idle waiting for the next frame left out. Every sample starts
+from a freshly loaded page with 3 warmup runs, and the DOM is checked after each operation.
+Some tests slow the CPU down, as js-framework-benchmark does.
+
+Fusée (current `main`), median of 15 runs, AMD Ryzen 5 3500U laptop (lower is better):
+
+| Operation              | CPU slowdown |  Median  | ± 95% CI |  Script  |
+| :--------------------- | :----------: | :------: | :------: | :------: |
+| Create 1,000 rows      |      1x      |  51.6 ms |  ± 4.4 ms  |  14.5 ms |
+| Replace 1,000 rows     |      1x      |  51.0 ms |  ± 4.2 ms  |  20.1 ms |
+| Update every 10th row  |      4x      |  56.9 ms |  ± 4.6 ms  |   5.0 ms |
+| Select row             |      4x      |   9.0 ms |  ± 0.8 ms  |   2.5 ms |
+| Swap 2 rows            |      4x      |  39.3 ms |  ± 2.4 ms  |   3.2 ms |
+| Remove row             |      2x      |  25.7 ms |  ± 3.6 ms  |   2.6 ms |
+| Append 1,000 rows      |      1x      |  47.1 ms |  ± 4.1 ms  |  13.4 ms |
+| Clear 1,000 rows       |      4x      |  39.1 ms |  ± 8.2 ms  |  36.9 ms |
+
+"Script" is the part of the median spent in JavaScript, including garbage collection; the rest
+is the browser's style, layout and paint work.
+
+### Memory
+
+JS heap after a forced garbage collection:
+
+| Version        | Fresh page | 1,000 rows | After 5× create + clear |
+| :------------- | :--------: | :--------: | :---------------------: |
+| Current `main` |  1.10 MB   |  4.38 MB   |       **1.36 MB**       |
+| 2.7.2          |  1.10 MB   |  4.41 MB   |        10.81 MB         |
+
+Up to 2.7.1, `f-for` kept every row it had ever rendered reachable, so each create + clear
+cycle left about 1.9 MB behind. Removed rows are now freed.
+
+A ranking against React, Vue, Angular, Svelte, Solid, Preact, Qwik, Lit and Mithril with this
+method is being re-measured. The previous ranking measured each operation plus two animation
+frames, so frame timing (about 33 ms) hid most of the differences between frameworks.
 
 ### Bundle size
 

package/framework/actions/index.js

@@ -0,0 +1,12 @@
+// fusee-framework/actions — client side of server actions (browser-safe, no Node imports).
+// The server side (defineAction(fn), handleActionRequest) lives in fusee-framework/server.
+export {
+    defineAction,
+    createActionProxy,
+    useAction,
+    hydrateAction,
+    getHydratedAction,
+    clearActionHydration,
+    extractActionHydration,
+    loadActionHydration
+} from '../server/actions.js'

package/framework/auto-import-preset.js

@@ -1,3 +1,5 @@
+// Auto-import preset for unplugin-auto-import: every public name, mapped to the entry
+// point that exports it. Add-ons (FREL, Comet) are not auto-imported; import them explicitly.
 export const FuseePreset = {
     'fusee-framework': [
         'signal', 'computed', 'effect', 'watch',
@@ -6,14 +8,25 @@ export const FuseePreset = {
         'defineComponent', 'defineCompiledComponent', 'defineAsyncComponent', 'onMount', 'onUnmount', 'parseSlots',
         'defineElement', 'toCustomElement', 'css', 'unsafeCSS',
         'directive', 'reconcile', 'mountTemplate', 'emit',
-        'provide', 'inject', 'provideGlobal', 'InjectionToken', 'getCurrentInstance',
+        'provide', 'inject', 'getCurrentInstance',
         'defineComposable', 'assertSetupContext',
+        'createApp'
+    ],
+    'fusee-framework/router': [
         'createRouter', 'navigate', 'mountOutlet', 'currentRoute', 'routeParams', 'routeQuery',
-        'matchedRoutes', 'generateRoutes',
+        'matchedRoutes', 'routeMeta', 'generateRoutes', 'beforeEach', 'afterEach'
+    ],
+    'fusee-framework/store': [
         'defineStore', 'resetStore', 'clearStores', 'registerStorePlugin', 'storeToRefs',
-        'storeToState', 'storeToGetters', 'useNestedStore', 'MutationType',
-        'defineAction', 'createActionProxy', 'useAction',
-        'createApp',
+        'storeToState', 'storeToGetters', 'useNestedStore', 'MutationType'
+    ],
+    'fusee-framework/di': [
+        'InjectionToken', 'provideGlobal'
+    ],
+    'fusee-framework/actions': [
+        'defineAction', 'createActionProxy', 'useAction'
+    ],
+    'fusee-framework/plugins': [
         'defineCompilerPlugin', 'defineServerPlugin', 'defineDevToolsPlugin', 'defineRuntimeAdapter',
         'defineFuseePlugin'
     ]

package/framework/auto-imports.d.ts

@@ -6,63 +6,66 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-  const InjectionToken: typeof import('fusee-framework').InjectionToken
-  const MutationType: typeof import('fusee-framework').MutationType
+  const afterEach: typeof import('fusee-framework/router').afterEach
   const assertSetupContext: typeof import('fusee-framework').assertSetupContext
   const batch: typeof import('fusee-framework').batch
-  const clearStores: typeof import('fusee-framework').clearStores
+  const beforeEach: typeof import('fusee-framework/router').beforeEach
+  const clearStores: typeof import('fusee-framework/store').clearStores
   const computed: typeof import('fusee-framework').computed
-  const createActionProxy: typeof import('fusee-framework').createActionProxy
+  const createActionProxy: typeof import('fusee-framework/actions').createActionProxy
   const createApp: typeof import('fusee-framework').createApp
-  const createRouter: typeof import('fusee-framework').createRouter
+  const createRouter: typeof import('fusee-framework/router').createRouter
   const createSuspense: typeof import('fusee-framework').createSuspense
   const css: typeof import('fusee-framework').css
-  const currentRoute: typeof import('fusee-framework').currentRoute
-  const defineAction: typeof import('fusee-framework').defineAction
+  const currentRoute: typeof import('fusee-framework/router').currentRoute
+  const defineAction: typeof import('fusee-framework/actions').defineAction
   const defineAsyncComponent: typeof import('fusee-framework').defineAsyncComponent
   const defineCompiledComponent: typeof import('fusee-framework').defineCompiledComponent
-  const defineCompilerPlugin: typeof import('fusee-framework').defineCompilerPlugin
+  const defineCompilerPlugin: typeof import('fusee-framework/plugins').defineCompilerPlugin
   const defineComponent: typeof import('fusee-framework').defineComponent
   const defineComposable: typeof import('fusee-framework').defineComposable
-  const defineDevToolsPlugin: typeof import('fusee-framework').defineDevToolsPlugin
+  const defineDevToolsPlugin: typeof import('fusee-framework/plugins').defineDevToolsPlugin
   const defineElement: typeof import('fusee-framework').defineElement
-  const defineFuseePlugin: typeof import('fusee-framework').defineFuseePlugin
+  const defineFuseePlugin: typeof import('fusee-framework/plugins').defineFuseePlugin
   const defineResource: typeof import('fusee-framework').defineResource
-  const defineRuntimeAdapter: typeof import('fusee-framework').defineRuntimeAdapter
-  const defineServerPlugin: typeof import('fusee-framework').defineServerPlugin
-  const defineStore: typeof import('fusee-framework').defineStore
+  const defineRuntimeAdapter: typeof import('fusee-framework/plugins').defineRuntimeAdapter
+  const defineServerPlugin: typeof import('fusee-framework/plugins').defineServerPlugin
+  const defineStore: typeof import('fusee-framework/store').defineStore
   const directive: typeof import('fusee-framework').directive
   const effect: typeof import('fusee-framework').effect
   const emit: typeof import('fusee-framework').emit
-  const generateRoutes: typeof import('fusee-framework').generateRoutes
+  const generateRoutes: typeof import('fusee-framework/router').generateRoutes
   const getCurrentInstance: typeof import('fusee-framework').getCurrentInstance
   const inject: typeof import('fusee-framework').inject
+  const InjectionToken: typeof import('fusee-framework/di').InjectionToken
   const inspect: typeof import('fusee-framework').inspect
-  const matchedRoutes: typeof import('fusee-framework').matchedRoutes
-  const mountOutlet: typeof import('fusee-framework').mountOutlet
+  const matchedRoutes: typeof import('fusee-framework/router').matchedRoutes
+  const mountOutlet: typeof import('fusee-framework/router').mountOutlet
   const mountTemplate: typeof import('fusee-framework').mountTemplate
-  const navigate: typeof import('fusee-framework').navigate
+  const MutationType: typeof import('fusee-framework/store').MutationType
+  const navigate: typeof import('fusee-framework/router').navigate
   const onCleanup: typeof import('fusee-framework').onCleanup
   const onMount: typeof import('fusee-framework').onMount
   const onUnmount: typeof import('fusee-framework').onUnmount
   const parseSlots: typeof import('fusee-framework').parseSlots
   const provide: typeof import('fusee-framework').provide
-  const provideGlobal: typeof import('fusee-framework').provideGlobal
+  const provideGlobal: typeof import('fusee-framework/di').provideGlobal
   const reconcile: typeof import('fusee-framework').reconcile
-  const registerStorePlugin: typeof import('fusee-framework').registerStorePlugin
-  const resetStore: typeof import('fusee-framework').resetStore
+  const registerStorePlugin: typeof import('fusee-framework/store').registerStorePlugin
+  const resetStore: typeof import('fusee-framework/store').resetStore
   const resource: typeof import('fusee-framework').resource
-  const routeParams: typeof import('fusee-framework').routeParams
-  const routeQuery: typeof import('fusee-framework').routeQuery
+  const routeMeta: typeof import('fusee-framework/router').routeMeta
+  const routeParams: typeof import('fusee-framework/router').routeParams
+  const routeQuery: typeof import('fusee-framework/router').routeQuery
   const scheduleAsyncJob: typeof import('fusee-framework').scheduleAsyncJob
   const signal: typeof import('fusee-framework').signal
-  const storeToGetters: typeof import('fusee-framework').storeToGetters
-  const storeToRefs: typeof import('fusee-framework').storeToRefs
-  const storeToState: typeof import('fusee-framework').storeToState
+  const storeToGetters: typeof import('fusee-framework/store').storeToGetters
+  const storeToRefs: typeof import('fusee-framework/store').storeToRefs
+  const storeToState: typeof import('fusee-framework/store').storeToState
   const toCustomElement: typeof import('fusee-framework').toCustomElement
   const unsafeCSS: typeof import('fusee-framework').unsafeCSS
   const untrack: typeof import('fusee-framework').untrack
-  const useAction: typeof import('fusee-framework').useAction
-  const useNestedStore: typeof import('fusee-framework').useNestedStore
+  const useAction: typeof import('fusee-framework/actions').useAction
+  const useNestedStore: typeof import('fusee-framework/store').useNestedStore
   const watch: typeof import('fusee-framework').watch
 }