vanillaforge 1.9.0 → 1.9.1

package/CHANGELOG.md

@@ -7,6 +7,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.9.1] - 2026-06-23
+
+### Fixed
+
+#### Font data now loads lazily (`src/plugins/fonts/`)
+- `font-manifests.js` converted static imports of `inter.js` and `jetbrains-mono.js`
+  (~244 KB of base64 font data) to dynamic `import()` inside each `dataUri()` function.
+  The data is only fetched the first time `fontsPlugin` is actually installed.
+  Previously, every `import { createApp } from 'vanillaforge'` — including projects that
+  never use fonts — paid the 244 KB parsing cost up front, which broke the demo and
+  generated apps in VS Code's built-in browser (module-load timeout / stuck loading spinner).
+- `FontsService._src()`, `_buildCSS()`, and `_reinject()` are now `async` to handle the
+  lazy data loading. A `_ready` Promise is exposed so callers can `await svc._ready`
+  after installation.
+- `ESLint` config updated: `AbortController` added to browser globals.
+
+#### `autoLoadCSS` no longer hangs in file:// environments (`src/components/base-component.js`)
+- Added `AbortController` with a 500 ms timeout to the `fetch HEAD` call in `autoLoadCSS`.
+  In environments where `fetch` never rejects (VS Code webview, `file://` protocol),
+  the old code left `init()` suspended indefinitely. The abort ensures the method always
+  returns within half a second even when the network is unavailable.
+
+#### Demo CSS always loads in VS Code's built-in browser (`index.html`)
+- Added explicit `<link>` tags for `home-component.css` and `not-found-component.css`.
+  All visual styling for the demo lives in those files; relying solely on `autoLoadCSS`
+  meant a blank/unstyled page whenever `fetch` was unavailable.
+
 ## [1.9.0] - 2026-06-23
 
 This release completes the public API surface and prepares the package for npm

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanillaforge",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "VanillaForge - A modern, lightweight vanilla JavaScript framework for forging Single Page Applications",
   "type": "module",
   "main": "src/framework.js",

package/src/components/base-component.js

@@ -549,31 +549,41 @@ export class BaseComponent {
      */
     async autoLoadCSS() {
         if (!this.name || typeof window === 'undefined') return;
-        
-        // Generate CSS filename from component name
+
         const cssFileName = this.name.toLowerCase()
-            .replace(/component$/, '') // Remove 'component' suffix if present
-            .replace(/[^a-z0-9]/g, '-') // Replace non-alphanumeric with hyphens
-            .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
-            .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
-        
-        // Add 'component' suffix back for CSS file naming convention
+            .replace(/component$/, '')
+            .replace(/[^a-z0-9]/g, '-')
+            .replace(/-+/g, '-')
+            .replace(/^-|-$/g, '');
+
         const fullCssName = cssFileName ? `${cssFileName}-component` : this.name.toLowerCase();
-        
+
         const cssPaths = [
-            `styles/components/${fullCssName}.css`,     // For built version (primary)
-            `src/styles/components/${fullCssName}.css`, // For development
-            `styles/components/${this.name.toLowerCase()}.css`, // Fallback with exact name
-            `src/styles/components/${this.name.toLowerCase()}.css` // Fallback development
+            `styles/components/${fullCssName}.css`,
+            `src/styles/components/${fullCssName}.css`,
+            `styles/components/${this.name.toLowerCase()}.css`,
+            `src/styles/components/${this.name.toLowerCase()}.css`,
         ];
-        
+
         for (const cssPath of cssPaths) {
             try {
+                // HEAD check avoids a visible 404 in the browser console when
+                // the file simply doesn't exist (common in generated projects).
+                // AbortController prevents the fetch from hanging indefinitely
+                // in file:// environments (e.g. VS Code's built-in browser).
+                const controller = new AbortController();
+                const timeout = setTimeout(() => controller.abort(), 500);
+                let resp;
+                try {
+                    resp = await fetch(cssPath, { method: 'HEAD', signal: controller.signal });
+                } finally {
+                    clearTimeout(timeout);
+                }
+                if (!resp.ok) continue;
                 await this.loadCSS(cssPath);
                 this.logger.debug(`Auto-loaded CSS: ${cssPath}`);
-                break; // Stop after first successful load
+                break;
             } catch (_e) {
-                // Continue to next path - this is expected behavior
                 continue;
             }
         }

package/src/framework.js

@@ -319,5 +319,5 @@ export function createApp(config = {}) {
 }
 
 // Framework metadata
-export const FRAMEWORK_VERSION = '1.9.0';
+export const FRAMEWORK_VERSION = '1.9.1';
 export const FRAMEWORK_NAME = 'VanillaForge';

package/src/plugins/fonts/font-manifests.js

@@ -1,9 +1,10 @@
 /**
  * Built-in font manifests for VanillaForge fontsPlugin.
  *
- * Each manifest describes a font family. The font data is bundled directly as
- * base64 data URIs so no external requests or file setup are needed — the
- * plugin works out of the box.
+ * Each manifest describes a font family. Font data is loaded lazily via
+ * dynamic import — it is only fetched when fontsPlugin is actually installed
+ * with a given family. This prevents ~244 KB of base64 font data from being
+ * eagerly parsed by every app that imports framework.js.
  *
  * Bundled fonts are Latin-subset, variable-weight woff2 files sourced from
  * the @fontsource-variable packages (open-source, MIT-licensed subsets).
@@ -15,13 +16,11 @@
  * @property {boolean}  variable     - True when a single file covers all weights.
  * @property {number[]} weights      - [min, max] for variable fonts; list for static.
  * @property {string[]} styles       - Available styles ('normal', 'italic').
- * @property {function(string): string|null} dataUri - Returns the bundled data URI for a style,
- *                                     or null if not bundled (triggers URL path lookup instead).
+ * @property {function(string): Promise<string|null>} dataUri - Async function returning the
+ *                                     bundled data URI for a style, or null (triggers URL path
+ *                                     lookup instead).
  */
 
-import { INTER_NORMAL, INTER_ITALIC } from './files/inter.js';
-import { JETBRAINS_MONO_NORMAL, JETBRAINS_MONO_ITALIC } from './files/jetbrains-mono.js';
-
 /** @type {Map<string, FontManifest>} */
 export const FONT_MANIFESTS = new Map([
   [
@@ -33,7 +32,10 @@ export const FONT_MANIFESTS = new Map([
       variable: true,
       weights: [100, 900],
       styles: ['normal', 'italic'],
-      dataUri: (style) => style === 'italic' ? INTER_ITALIC : INTER_NORMAL,
+      dataUri: async (style) => {
+        const { INTER_NORMAL, INTER_ITALIC } = await import('./files/inter.js');
+        return style === 'italic' ? INTER_ITALIC : INTER_NORMAL;
+      },
       filename: () => 'Inter-Variable.woff2',
     },
   ],
@@ -46,7 +48,10 @@ export const FONT_MANIFESTS = new Map([
       variable: true,
       weights: [100, 800],
       styles: ['normal', 'italic'],
-      dataUri: (style) => style === 'italic' ? JETBRAINS_MONO_ITALIC : JETBRAINS_MONO_NORMAL,
+      dataUri: async (style) => {
+        const { JETBRAINS_MONO_NORMAL, JETBRAINS_MONO_ITALIC } = await import('./files/jetbrains-mono.js');
+        return style === 'italic' ? JETBRAINS_MONO_ITALIC : JETBRAINS_MONO_NORMAL;
+      },
       filename: () => 'JetBrainsMono-Variable.woff2',
     },
   ],

package/src/plugins/fonts/fonts-plugin.js

@@ -38,6 +38,7 @@
  *   Installing JetBrains Mono sets --vf-font-mono to 'JetBrains Mono', monospace, ...
  *
  * Bundled fonts are Latin-subset, variable-weight woff2 (open-source, MIT-licensed).
+ * Font data is loaded lazily — it is only fetched when the plugin is actually installed.
  */
 
 import { FONT_MANIFESTS } from './font-manifests.js';
@@ -64,10 +65,13 @@ export class FontsService {
     this._manifests = new Map(FONT_MANIFESTS);
     this._loadedFamilies = [];
     this._styleEl = null;
+    // Resolves once @font-face CSS has been injected (after any lazy font data loads).
+    this._ready = Promise.resolve();
 
     const requested = options.families || [];
     if (requested.length > 0) {
       this._load(requested);
+      this._ready = this._reinject();
     }
   }
 
@@ -92,7 +96,7 @@ export class FontsService {
   addFamily(name, manifest) {
     this._manifests.set(name, manifest);
     this._loadOne(name, manifest, null, null);
-    this._reinject();
+    this._ready = this._reinject();
     return this;
   }
 
@@ -115,8 +119,7 @@ export class FontsService {
 
       this._loadOne(name, manifest, weightFilter, styleFilter);
     }
-
-    this._reinject();
+    // _reinject() is called by the constructor after _load()
   }
 
   _loadOne(name, manifest, weightFilter, styleFilter) {
@@ -125,10 +128,12 @@ export class FontsService {
     this._loadedFamilies.push({ name, manifest, weights, styles, cssFamily: manifest.cssFamily });
   }
 
-  _reinject() {
+  async _reinject() {
     if (typeof document === 'undefined') return;
 
     if (!this._styleEl) {
+      // Create / reuse the style element synchronously before any await so that
+      // the element exists in the DOM as soon as _reinject() is called.
       this._styleEl = document.getElementById('vf-fonts');
       if (!this._styleEl) {
         this._styleEl = document.createElement('style');
@@ -137,23 +142,24 @@ export class FontsService {
       }
     }
 
-    this._styleEl.textContent = this._buildCSS();
+    // Build CSS — may trigger lazy font data imports (async).
+    this._styleEl.textContent = await this._buildCSS();
   }
 
-  _buildCSS() {
+  async _buildCSS() {
     const blocks = [];
 
     for (const { manifest, weights, styles, cssFamily } of this._loadedFamilies) {
       if (manifest.variable) {
         const [minW, maxW] = [Math.min(...weights), Math.max(...weights)];
         for (const style of styles) {
-          const src = this._src(manifest, null, style);
+          const src = await this._src(manifest, null, style);
           blocks.push(this._block(cssFamily, style, `${minW} ${maxW}`, src));
         }
       } else {
         for (const weight of weights) {
           for (const style of styles) {
-            const src = this._src(manifest, weight, style);
+            const src = await this._src(manifest, weight, style);
             blocks.push(this._block(cssFamily, style, String(weight), src));
           }
         }
@@ -169,9 +175,9 @@ export class FontsService {
    *   - a path was explicitly provided, OR
    *   - the manifest has no dataUri function (custom family).
    */
-  _src(manifest, weight, style) {
+  async _src(manifest, weight, style) {
     if (!this._path && typeof manifest.dataUri === 'function') {
-      const uri = manifest.dataUri(style);
+      const uri = await manifest.dataUri(style);
       if (uri) return `url('${uri}') format('woff2')`;
     }
 
@@ -231,7 +237,7 @@ export class FontsService {
  *   display  {string} - CSS font-display value (default 'swap').
  *
  * Side effects on install:
- *   - Injects <style id="vf-fonts"> with @font-face declarations.
+ *   - Injects <style id="vf-fonts"> with @font-face declarations (async, after dynamic import).
  *   - Registers FontsService under 'fonts' (app.get('fonts')).
  *   - If themePlugin is installed, updates --vf-font-sans / --vf-font-mono.
  */