fusee-framework 2.7.0 → 2.7.2

package/README.md

@@ -5,7 +5,7 @@
 <h1 align="center">Fusée Framework</h1>
 
 <p align="center">
-  <strong>v2.7.0 — Signals-First JS Framework | Atomic Reactivity | Rust Compiler | Go Toolchain</strong>
+  <strong>v2.7.1 — 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.2
 
 - 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
@@ -25,18 +25,27 @@ Fusée is a custom, high-performance fine-grained reactive JavaScript framework
   (`renderElementsSSR()`) and in the Go SSR engine (elements are read from `app/elements`
   by `npm run manifest`).
 - Added `fusee generate element <tag-name>`.
+- **Smaller bundles:** importing `fusee-framework` no longer copies the API onto `globalThis`,
+  so bundlers drop the modules an app doesn't use (a counter app went from 23.6 KB to
+  11.0 KB gzip). The auto-import preset now covers every export.
+  **Breaking:** code that calls the API with neither imports nor auto-imports (e.g. a plain
+  `<script>`) must add `import 'fusee-framework/globals'`.
 - Fixed: delegated events (`@click`) inside shadow roots; the first `:binding` on a tag being
   ignored in string templates; content right after an `f-if` element being dropped by the
   compiler; manifest pages in the Go dev server not receiving their `Load` data;
   `fusee-framework` and `fusee-framework/server` failing to import in plain Node.
-
-## 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 compiled templates (`.fusee` files and JSX `render()`): nested elements were flattened
+  into the component's container; `f-for` lists and `f-if` branches that were already non-empty
+  or true at mount rendered nothing; swapping two keyed rows had no effect; loops without
+  `:key` rendered only their last item.
+- `f-for` items now use the same syntax on the client, in SSR and in the Go engine:
+  `{{ row.id }}`. Compiled client templates used to need `{{ row().id }}`, which still works.
+- Added `defineCompiledComponent()` for components with a compiled `render`: it leaves the
+  runtime template compiler out of the bundle (a counter component: 11.9 KB → 6.4 KB gzip).
+  JSX components use it automatically.
+- Fixed the JSX runtime: it failed to load (wrong import path), and text and `{expression}`
+  children were not rendered.
+- Fixed dependency tracking in f-for for h.js
 
 ## Quick Start
 
@@ -486,7 +495,9 @@ import type {
 } from "./framework/types";
 ```
 
-Core auto-imports are declared in `framework/auto-imports.d.ts`. Application-owned services, components, stores, actions, router APIs, utilities, and types should be imported explicitly.
+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.
+
+Outside Vite (a plain `<script type="module">`, a quick demo), either import what you use or load `import 'fusee-framework/globals'`, which puts the whole API on `globalThis`. Avoid it in bundled apps: it keeps the entire framework in the bundle.
 
 ---
 
@@ -498,21 +509,82 @@ 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 |
+| Create 10,000 rows     |      1x      | 500.4 ms | ± 208.0 ms | 159.4 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
+
+Production JavaScript of the same benchmark app (a keyed 1,000-row table), built with Vite
+and compressed with gzip level 9 and brotli quality 11:
+
+|  Rank  | Framework              |     gzip     |    brotli    |
+| :----: | :--------------------- | :----------: | :----------: |
+| **1**  | **Solid**              |    3.9 KB    |    3.5 KB    |
+| **2**  | **Preact**             |    5.9 KB    |    5.4 KB    |
+| **3**  | **Lit**                |    6.3 KB    |    5.7 KB    |
+| **4**  | <mark>**Fusée**</mark> | **6.3 KB**   | **5.7 KB**   |
+| **5**  | **Svelte**             |   12.8 KB    |   11.7 KB    |
+| **6**  | **Mithril**            |   13.8 KB    |   12.1 KB    |
+| **7**  | **Vue**                |   24.5 KB    |   22.1 KB    |
+| **8**  | **Qwik**               |   27.3 KB    |   24.4 KB    |
+| **9**  | **Angular**            |   34.6 KB    |   31.0 KB    |
+| **10** | **React**              |   44.9 KB    |   39.3 KB    |
+
+Lit and Fusée are within a few bytes of each other: Lit is 12 bytes smaller with gzip, Fusée
+9 bytes smaller with brotli.
+
+Fusée is tree-shakable: an app only ships the parts it uses. The main cost to watch is the
+runtime template compiler, which string templates (`template: '...'`) need. Minimal counter
+component, gzip:
+
+| Component style                                         |  gzip   |
+| :------------------------------------------------------ | :-----: |
+| Compiled template + `defineCompiledComponent()`          | 6.4 KB  |
+| JSX (`render()`, via the fusée JSX runtime)              | 6.5 KB  |
+| String template + `defineComponent()`                    | 11.1 KB |
+| String template custom element, `defineElement()`        | 13.3 KB |
+
+`defineCompiledComponent()` works like `defineComponent()` for components with a compiled
+`render` (a `.fusee` file, or `.template.html` through the compiler plugin), and leaves the
+template compiler out. JSX components get the same saving automatically.
 
 ---
 

package/framework/auto-import-preset.js

@@ -1,12 +1,20 @@
-export const FuseePreset = {
-    'fusee-framework': [
-        'signal', 'computed', 'effect', 'watch',
-        'batch', 'untrack', 'inspect', 'onCleanup', 'resource', 'defineResource',
-        'createSuspense', 'scheduleAsyncJob',
-        'defineComponent', 'defineAsyncComponent', 'onMount', 'onUnmount', 'parseSlots',
-        'defineElement', 'toCustomElement', 'css', 'unsafeCSS',
-        'directive', 'reconcile', 'mountTemplate', 'emit',
-        'provide', 'inject', 'provideGlobal', 'InjectionToken',
-        'defineComposable', 'assertSetupContext'
-    ]
-}
+export const FuseePreset = {
+    'fusee-framework': [
+        'signal', 'computed', 'effect', 'watch',
+        'batch', 'untrack', 'inspect', 'onCleanup', 'resource', 'defineResource',
+        'createSuspense', 'scheduleAsyncJob',
+        'defineComponent', 'defineCompiledComponent', 'defineAsyncComponent', 'onMount', 'onUnmount', 'parseSlots',
+        'defineElement', 'toCustomElement', 'css', 'unsafeCSS',
+        'directive', 'reconcile', 'mountTemplate', 'emit',
+        'provide', 'inject', 'provideGlobal', 'InjectionToken', 'getCurrentInstance',
+        'defineComposable', 'assertSetupContext',
+        'createRouter', 'navigate', 'mountOutlet', 'currentRoute', 'routeParams', 'routeQuery',
+        'matchedRoutes', 'generateRoutes',
+        'defineStore', 'resetStore', 'clearStores', 'registerStorePlugin', 'storeToRefs',
+        'storeToState', 'storeToGetters', 'useNestedStore', 'MutationType',
+        'defineAction', 'createActionProxy', 'useAction',
+        'createApp',
+        'defineCompilerPlugin', 'defineServerPlugin', 'defineDevToolsPlugin', 'defineRuntimeAdapter',
+        'defineFuseePlugin'
+    ]
+}

package/framework/auto-imports.d.ts

@@ -1,39 +1,68 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-// biome-ignore lint: disable
-export {}
-declare global {
-  const InjectionToken: typeof import('fusee-framework').InjectionToken
-  const assertSetupContext: typeof import('fusee-framework').assertSetupContext
-  const batch: typeof import('fusee-framework').batch
-  const computed: typeof import('fusee-framework').computed
-  const createActionProxy: typeof import('fusee-framework').createActionProxy
-  const createSuspense: typeof import('fusee-framework').createSuspense
-  const defineAsyncComponent: typeof import('fusee-framework').defineAsyncComponent
-  const defineComponent: typeof import('fusee-framework').defineComponent
-  const defineComposable: typeof import('fusee-framework').defineComposable
-  const defineResource: typeof import('fusee-framework').defineResource
-  const directive: typeof import('fusee-framework').directive
-  const effect: typeof import('fusee-framework').effect
-  const emit: typeof import('fusee-framework').emit
-  const inject: typeof import('fusee-framework').inject
-  const inspect: typeof import('fusee-framework').inspect
-  const mountOutlet: typeof import('fusee-framework').mountOutlet
-  const mountTemplate: typeof import('fusee-framework').mountTemplate
-  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 reconcile: typeof import('fusee-framework').reconcile
-  const resetStore: typeof import('fusee-framework').resetStore
-  const resource: typeof import('fusee-framework').resource
-  const scheduleAsyncJob: typeof import('fusee-framework').scheduleAsyncJob
-  const signal: typeof import('fusee-framework').signal
-  const untrack: typeof import('fusee-framework').untrack
-  const watch: typeof import('fusee-framework').watch
-}
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const InjectionToken: typeof import('fusee-framework').InjectionToken
+  const MutationType: typeof import('fusee-framework').MutationType
+  const assertSetupContext: typeof import('fusee-framework').assertSetupContext
+  const batch: typeof import('fusee-framework').batch
+  const clearStores: typeof import('fusee-framework').clearStores
+  const computed: typeof import('fusee-framework').computed
+  const createActionProxy: typeof import('fusee-framework').createActionProxy
+  const createApp: typeof import('fusee-framework').createApp
+  const createRouter: typeof import('fusee-framework').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 defineAsyncComponent: typeof import('fusee-framework').defineAsyncComponent
+  const defineCompiledComponent: typeof import('fusee-framework').defineCompiledComponent
+  const defineCompilerPlugin: typeof import('fusee-framework').defineCompilerPlugin
+  const defineComponent: typeof import('fusee-framework').defineComponent
+  const defineComposable: typeof import('fusee-framework').defineComposable
+  const defineDevToolsPlugin: typeof import('fusee-framework').defineDevToolsPlugin
+  const defineElement: typeof import('fusee-framework').defineElement
+  const defineFuseePlugin: typeof import('fusee-framework').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 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 getCurrentInstance: typeof import('fusee-framework').getCurrentInstance
+  const inject: typeof import('fusee-framework').inject
+  const inspect: typeof import('fusee-framework').inspect
+  const matchedRoutes: typeof import('fusee-framework').matchedRoutes
+  const mountOutlet: typeof import('fusee-framework').mountOutlet
+  const mountTemplate: typeof import('fusee-framework').mountTemplate
+  const navigate: typeof import('fusee-framework').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 reconcile: typeof import('fusee-framework').reconcile
+  const registerStorePlugin: typeof import('fusee-framework').registerStorePlugin
+  const resetStore: typeof import('fusee-framework').resetStore
+  const resource: typeof import('fusee-framework').resource
+  const routeParams: typeof import('fusee-framework').routeParams
+  const routeQuery: typeof import('fusee-framework').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 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 watch: typeof import('fusee-framework').watch
+}