fusee-framework 2.7.0 → 2.7.1

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 />
@@ -25,10 +25,26 @@ 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.
+- 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.
 
 ## What's New in 2.6.1
 
@@ -486,7 +502,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.
 
 ---
 
@@ -514,6 +532,42 @@ Compared to other popular JS Frameworks:
 | **9**  | **Mithril**            |   128.35 ms    |
 | **10** | **Lit**                |   131.08 ms    |
 
+### 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.
+
 ---
 
 ## Building the CLI

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
+}