mnfst 0.5.21 → 0.5.23

package/dist/manifest.appwrite.auth.js

@@ -8,11 +8,14 @@
 
 /* Auth config */
 
-// Load manifest if not already loaded
+// Load manifest if not already loaded (loader may set __manifestLoaded / registry.manifest)
 async function ensureManifest() {
     if (window.ManifestComponentsRegistry?.manifest) {
         return window.ManifestComponentsRegistry.manifest;
     }
+    if (window.__manifestLoaded) {
+        return window.__manifestLoaded;
+    }
 
     try {
         const response = await fetch('/manifest.json');

package/dist/manifest.code.js

@@ -47,11 +47,6 @@ async function loadHighlightJS() {
     return hljsPromise;
 }
 
-// Preload highlight.js as soon as script loads
-loadHighlightJS().catch(() => {
-    // Silently ignore errors during preload
-});
-
 // Optional optimization: Configure utilities plugin if present
 if (window.ManifestUtilities) {
     // Tell utilities plugin to ignore code-related DOM changes and classes
@@ -798,19 +793,24 @@ function initializeCodePlugin() {
                 customElements.define('x-code-group', XCodeGroupElement);
             }
 
-            // Process existing code blocks
-            await processExistingCodeBlocks();
-
-            // Listen for markdown plugin conversions
-            document.addEventListener('manifest:code-blocks-converted', async () => {
-                await processExistingCodeBlocks();
-            });
-
-            // Also listen for the event on the document body for better coverage
-            document.body.addEventListener('manifest:code-blocks-converted', async () => {
-                await processExistingCodeBlocks();
-            });
+            // Listen for markdown plugin conversions (always process when new blocks appear)
+            const runProcess = () => processExistingCodeBlocks();
+            document.addEventListener('manifest:code-blocks-converted', runProcess);
+            if (document.body) {
+                document.body.addEventListener('manifest:code-blocks-converted', runProcess);
+            }
 
+            // Defer loading highlight.js until first code block is in view (or process immediately if none to observe)
+            const codeTargets = document.querySelectorAll('pre > code:not(.hljs):not([data-highlighted="yes"]), x-code:not([data-highlighted="yes"])');
+            if (codeTargets.length === 0) {
+                return;
+            }
+            const io = new IntersectionObserver((entries) => {
+                if (!entries.some(e => e.isIntersecting)) return;
+                io.disconnect();
+                runProcess();
+            }, { rootMargin: '100px', threshold: 0 });
+            codeTargets.forEach(el => io.observe(el));
         } catch (error) {
             console.error('[Manifest] Failed to initialize code plugin:', error);
         }

package/dist/manifest.components.js

@@ -6,40 +6,50 @@ window.ManifestComponentsRegistry = {
     registered: new Set(),
     preloaded: [],
     initialize() {
-        // Load manifest.json synchronously
-        try {
-            const req = new XMLHttpRequest();
-            req.open('GET', '/manifest.json?t=' + Date.now(), false);
-            req.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
-            req.setRequestHeader('Pragma', 'no-cache');
-            req.setRequestHeader('Expires', '0');
-            req.send(null);
-            if (req.status === 200) {
-                this.manifest = JSON.parse(req.responseText);
-                // Register all components from manifest
-                const allComponents = [
-                    ...(this.manifest?.preloadedComponents || []),
-                    ...(this.manifest?.components || [])
-                ];
-                allComponents.forEach(path => {
-                    const name = path.split('/').pop().replace('.html', '');
-                    this.registered.add(name);
-                });
-                this.preloaded = (this.manifest?.preloadedComponents || []).map(path => path.split('/').pop().replace('.html', ''));
-            } else {
-                console.warn('[Manifest] Failed to load manifest.json (HTTP', req.status + ')');
+        // Use loader-provided manifest if set; otherwise load synchronously (standalone)
+        let manifest = window.__manifestLoaded || this.manifest;
+        if (!manifest) {
+            try {
+                const manifestUrl = (document.querySelector('link[rel="manifest"]')?.getAttribute('href')) || '/manifest.json';
+                const req = new XMLHttpRequest();
+                req.open('GET', manifestUrl + (manifestUrl.includes('?') ? '&' : '?') + 't=' + Date.now(), false);
+                req.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+                req.setRequestHeader('Pragma', 'no-cache');
+                req.setRequestHeader('Expires', '0');
+                req.send(null);
+                if (req.status === 200) {
+                    manifest = JSON.parse(req.responseText);
+                } else {
+                    console.warn('[Manifest] Failed to load manifest.json (HTTP', req.status + ')');
+                }
+            } catch (e) {
+                console.warn('[Manifest] Failed to load manifest.json:', e.message);
             }
-        } catch (e) {
-            console.warn('[Manifest] Failed to load manifest.json:', e.message);
+        }
+        if (manifest) {
+            this.manifest = manifest;
+            const allComponents = [
+                ...(this.manifest?.preloadedComponents || []),
+                ...(this.manifest?.components || [])
+            ];
+            allComponents.forEach(path => {
+                const name = path.split('/').pop().replace('.html', '');
+                this.registered.add(name);
+            });
+            this.preloaded = (this.manifest?.preloadedComponents || []).map(path => path.split('/').pop().replace('.html', ''));
         }
     }
 }; 
 
 // Components loader
+// Uses cache for resolved content and _loading for in-flight promises so duplicate
+// loadComponent(name) calls share one network request.
 window.ManifestComponentsLoader = {
     cache: {},
+    _loading: {},
     initialize() {
         this.cache = {};
+        this._loading = {};
         // Preload components listed in registry.preloaded
         const registry = window.ManifestComponentsRegistry;
         if (registry && Array.isArray(registry.preloaded)) {
@@ -54,6 +64,9 @@ window.ManifestComponentsLoader = {
         if (this.cache[name]) {
             return this.cache[name];
         }
+        if (this._loading[name]) {
+            return this._loading[name];
+        }
         const registry = window.ManifestComponentsRegistry;
         if (!registry || !registry.manifest) {
             console.warn('[Manifest] Manifest not loaded, cannot load component:', name);
@@ -65,19 +78,25 @@ window.ManifestComponentsLoader = {
             console.warn('[Manifest] Component', name, 'not found in manifest.');
             return null;
         }
-        try {
-            const response = await fetch('/' + path);
-            if (!response.ok) {
-                console.warn('[Manifest] HTML file not found for component', name, 'at path:', path, '(HTTP', response.status + ')');
+        const promise = (async () => {
+            try {
+                const response = await fetch('/' + path);
+                if (!response.ok) {
+                    console.warn('[Manifest] HTML file not found for component', name, 'at path:', path, '(HTTP', response.status + ')');
+                    return null;
+                }
+                const content = await response.text();
+                this.cache[name] = content;
+                return content;
+            } catch (error) {
+                console.warn('[Manifest] Failed to load component', name, 'from', path + ':', error.message);
                 return null;
+            } finally {
+                delete this._loading[name];
             }
-            const content = await response.text();
-            this.cache[name] = content;
-            return content;
-        } catch (error) {
-            console.warn('[Manifest] Failed to load component', name, 'from', path + ':', error.message);
-            return null;
-        }
+        })();
+        this._loading[name] = promise;
+        return promise;
     }
 }; 
 
@@ -716,19 +735,27 @@ function initializeComponents() {
     window.dispatchEvent(new CustomEvent('manifest:components-ready'));
 }
 
-// Wait for data plugin to be ready (including content pre-load) before initializing components
-// manifest:data-ready fires after critical data sources are loaded, so $x.content is ready when components render
+// When data plugin is loaded: wait for manifest:data-ready so $x.content is ready before components render.
+// When data plugin is absent: init immediately (no artificial delay).
 function waitForDataThenInitialize() {
+    const hasDataPlugin = typeof window.ManifestDataConfig !== 'undefined';
+
+    if (!hasDataPlugin) {
+        initializeComponents();
+        return;
+    }
+
     window.addEventListener('manifest:data-ready', () => {
         initializeComponents();
     }, { once: true });
 
-    // Fallback: if data plugin doesn't fire event within reasonable time, initialize anyway
+    // Fallback: if data plugin never fires (e.g. slow network, error), initialize anyway
+    const fallbackMs = 5000;
     setTimeout(() => {
         if (!window.__manifestComponentsInitialized) {
             initializeComponents();
         }
-    }, 1000);
+    }, fallbackMs);
 }
 
 if (document.readyState === 'loading') {

package/dist/manifest.data.js

@@ -1,10 +1,13 @@
 /* Manifest Data Sources - Configuration */
 
-// Load manifest if not already loaded
+// Load manifest if not already loaded (loader may set __manifestLoaded / registry.manifest)
 async function ensureManifest() {
     if (window.ManifestComponentsRegistry?.manifest) {
         return window.ManifestComponentsRegistry.manifest;
     }
+    if (window.__manifestLoaded) {
+        return window.__manifestLoaded;
+    }
 
     try {
         const response = await fetch('/manifest.json');
@@ -1148,10 +1151,38 @@ let yamlLoadingPromise = null;
 let papaparse = null;
 let csvLoadingPromise = null;
 
+// Collect all path-like strings from manifest.data (recursive; includes nested locale objects)
+function collectDataPaths(manifest) {
+    const paths = [];
+    if (!manifest?.data || typeof manifest.data !== 'object') return paths;
+    function visit(val) {
+        if (typeof val === 'string' && (val.startsWith('/') || /\.(yaml|yml|csv|json)$/i.test(val))) {
+            paths.push(val);
+        } else if (Array.isArray(val)) {
+            val.forEach(visit);
+        } else if (val && typeof val === 'object' && !Array.isArray(val)) {
+            Object.values(val).forEach(visit);
+        }
+    }
+    Object.values(manifest.data).forEach(visit);
+    return paths;
+}
+
+function manifestDataPathsInclude(manifest, extensions) {
+    const paths = collectDataPaths(manifest);
+    return paths.some(p => extensions.some(ext => p.toLowerCase().includes(ext)));
+}
+
 async function loadYamlLibrary() {
     if (jsyaml) return jsyaml;
     if (yamlLoadingPromise) return yamlLoadingPromise;
 
+    const manifest = await window.ManifestDataConfig?.ensureManifest?.();
+    if (manifest && !manifestDataPathsInclude(manifest, ['.yaml', '.yml'])) {
+        yamlLoadingPromise = Promise.reject(new Error('[Manifest Data] No YAML paths in manifest - skipping loader'));
+        return yamlLoadingPromise;
+    }
+
     yamlLoadingPromise = new Promise((resolve, reject) => {
         const script = document.createElement('script');
         script.src = 'https://cdn.jsdelivr.net/npm/js-yaml/dist/js-yaml.min.js';
@@ -1181,6 +1212,12 @@ async function loadCSVParser() {
     if (papaparse) return papaparse;
     if (csvLoadingPromise) return csvLoadingPromise;
 
+    const manifest = await window.ManifestDataConfig?.ensureManifest?.();
+    if (manifest && !manifestDataPathsInclude(manifest, ['.csv'])) {
+        csvLoadingPromise = Promise.reject(new Error('[Manifest Data] No CSV paths in manifest - skipping loader'));
+        return csvLoadingPromise;
+    }
+
     csvLoadingPromise = new Promise((resolve, reject) => {
         const script = document.createElement('script');
         script.src = 'https://cdn.jsdelivr.net/npm/papaparse@latest/papaparse.min.js';

package/dist/manifest.js

@@ -52,6 +52,33 @@
 		'appwrite-presence': ['data']
 	};
 
+	// Derive default plugin list from manifest (only load data/localization/components when manifest needs them)
+	function getDefaultPluginsFromManifest(manifest) {
+		if (!manifest || typeof manifest !== 'object') {
+			return AVAILABLE_PLUGINS.slice();
+		}
+		const hasData = manifest.data && typeof manifest.data === 'object' && Object.keys(manifest.data).length > 0;
+		const hasComponents = (manifest.components?.length > 0) || (manifest.preloadedComponents?.length > 0);
+		const hasLocalization = (() => {
+			if (!manifest.data || typeof manifest.data !== 'object') return false;
+			for (const collection of Object.values(manifest.data)) {
+				if (!collection || typeof collection !== 'object') continue;
+				if (typeof collection.locales === 'string') return true;
+				for (const key of Object.keys(collection)) {
+					if (['url', 'headers', 'params', 'transform', 'defaultValue', 'locales'].includes(key)) continue;
+					if (/^[a-zA-Z]{2}(-[a-zA-Z]{2})?$/.test(key)) return true;
+				}
+			}
+			return false;
+		})();
+		return AVAILABLE_PLUGINS.filter(p => {
+			if (p === 'data') return hasData;
+			if (p === 'localization') return hasLocalization;
+			if (p === 'components') return hasComponents;
+			return true;
+		});
+	}
+
 	// Get plugin URL from CDN
 	function getPluginUrl(pluginName, version = DEFAULT_VERSION) {
 		const base = getBaseUrl(version);
@@ -193,12 +220,13 @@
 		const version = script.getAttribute('data-version') || DEFAULT_VERSION;
 
 		let pluginList = [];
+		const deriveFromManifest = !plugins;
 
 		if (plugins) {
 			// Explicit declaration - load only specified plugins (core + Appwrite)
 			pluginList = plugins.split(',').map(p => p.trim()).filter(p => p);
 		} else {
-			// Default: load all available core plugins (Appwrite plugins are opt-in only)
+			// Default: start with all core plugins; loader will trim by manifest when manifest is available
 			pluginList = AVAILABLE_PLUGINS.slice();
 		}
 
@@ -213,6 +241,7 @@
 
 		return {
 			plugins: pluginList,
+			deriveFromManifest,
 			tailwind,
 			version
 		};
@@ -268,22 +297,45 @@
 	detectAppwriteFromManifest();
 
 	if (config && config.plugins.length > 0) {
-		// Load all plugins in parallel, then Alpine with defer
+		const MANIFEST_DEPENDENT_PLUGINS = [
+			'data', 'localization', 'components',
+			'appwrite-auth', 'appwrite-data', 'appwrite-presence'
+		];
+		const manifestUrl = (document.querySelector('link[rel="manifest"]')?.getAttribute('href')) || '/manifest.json';
+
 		const loadPlugins = async () => {
-			const pluginPromises = config.plugins.map(pluginName => {
+			let manifest = null;
+			let pluginsToLoad = config.plugins;
+			let manifestPromise = null;
+
+			if (config.deriveFromManifest) {
+				manifest = await fetch(manifestUrl).then(r => r.ok ? r.json() : null).catch(() => null);
+				pluginsToLoad = resolveDependencies(getDefaultPluginsFromManifest(manifest));
+			} else {
+				const needsManifest = config.plugins.some(p => MANIFEST_DEPENDENT_PLUGINS.includes(p));
+				if (needsManifest) {
+					manifestPromise = fetch(manifestUrl).then(r => r.ok ? r.json() : null).catch(() => null);
+				}
+			}
+
+			const pluginPromises = pluginsToLoad.map(pluginName => {
 				return addScript(pluginName, config.version).catch(error => {
 					console.warn(`[Manifest Loader] Failed to load plugin ${pluginName}:`, error);
 				});
 			});
-
-			// Load Tailwind in parallel if requested
 			if (config.tailwind) {
-				pluginPromises.push(loadTailwind(config.version).catch(error => {
-					console.warn(`[Manifest Loader] Failed to load Tailwind:`, error);
-				}));
+				pluginPromises.push(loadTailwind(config.version).catch(() => {}));
 			}
-
 			await Promise.all(pluginPromises);
+			if (manifestPromise) {
+				manifest = await manifestPromise;
+			}
+			if (manifest && typeof window !== 'undefined') {
+				window.__manifestLoaded = manifest;
+				if (window.ManifestComponentsRegistry) {
+					window.ManifestComponentsRegistry.manifest = manifest;
+				}
+			}
 			loadAlpine();
 		};
 

package/dist/manifest.localization.js

@@ -137,11 +137,15 @@ function initializeLocalizationPlugin() {
         }
 
         try {
-            const response = await fetch('/manifest.json');
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            let manifest = window.__manifestLoaded || window.ManifestComponentsRegistry?.manifest;
+            if (!manifest) {
+                const manifestUrl = (document.querySelector('link[rel="manifest"]')?.getAttribute('href')) || '/manifest.json';
+                const response = await fetch(manifestUrl);
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+                manifest = await response.json();
             }
-            const manifest = await response.json();
 
             // Validate manifest structure
             if (!manifest || typeof manifest !== 'object') {

package/dist/manifest.utilities.js

@@ -489,6 +489,7 @@ class TailwindCompiler {
         this.styleElement = document.createElement('style');
         this.styleElement.id = 'utility-styles';
         document.head.appendChild(this.styleElement);
+        this.setupUtilityStylesOrderObserver();
 
         // Initialize properties
         this.tailwindLink = null;
@@ -1028,6 +1029,7 @@ TailwindCompiler.prototype.generateSynchronousUtilities = function () {
                 } else {
                     this.styleElement.textContent = finalCss;
                 }
+                this.ensureUtilityStylesLast();
 
                 // Clear critical styles once we have generated utilities
                 if (this.criticalStyleElement && generated.trim()) {
@@ -1116,6 +1118,8 @@ TailwindCompiler.prototype.loadAndApplyCache = function () {
             if (cacheToUse && cacheToUse.css) {
                 const applyCacheStart = performance.now();
                 this.styleElement.textContent = cacheToUse.css;
+                this.ensureUtilityStylesLast();
+                this.scheduleEnsureUtilityStylesLast();
                 this.lastThemeHash = cacheToUse.themeHash;
 
                 // Also apply cache to critical style element
@@ -1192,6 +1196,38 @@ TailwindCompiler.prototype.cleanupCache = function () {
 // Helper methods
 // Utility functions for extracting, parsing, and processing CSS and classes
 
+// Ensure #utility-styles is last in head so our responsive/variant rules win over Tailwind and any later-injected styles
+TailwindCompiler.prototype.ensureUtilityStylesLast = function () {
+    if (this.styleElement && this.styleElement.parentNode && document.head.lastElementChild !== this.styleElement) {
+        document.head.appendChild(this.styleElement);
+    }
+};
+
+// When any element is added to head after ours, move #utility-styles to end. Handles CDN load order (e.g. Tailwind injecting after we run).
+TailwindCompiler.prototype.setupUtilityStylesOrderObserver = function () {
+    if (!document.head || !this.styleElement) return;
+    const self = this;
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.type !== 'childList' || !mutation.addedNodes.length) continue;
+            for (const node of mutation.addedNodes) {
+                if (node.nodeType !== Node.ELEMENT_NODE || node === self.styleElement) continue;
+                self.ensureUtilityStylesLast();
+                break;
+            }
+        }
+    });
+    observer.observe(document.head, { childList: true, subtree: false });
+};
+
+// Schedule ensureUtilityStylesLast at 0ms, 100ms, 500ms so we win when Tailwind (or other scripts) inject styles later (e.g. CDN).
+TailwindCompiler.prototype.scheduleEnsureUtilityStylesLast = function () {
+    const self = this;
+    [0, 100, 500].forEach((ms) => {
+        setTimeout(() => self.ensureUtilityStylesLast(), ms);
+    });
+};
+
 // Discover CSS files from stylesheets and imports
 TailwindCompiler.prototype.discoverCssFiles = function () {
     try {
@@ -2981,6 +3017,8 @@ TailwindCompiler.prototype.compile = async function () {
                     const finalCss = `@layer utilities {\n${allUtilities}\n}`;
 
                     this.styleElement.textContent = finalCss;
+                    this.ensureUtilityStylesLast();
+                    this.scheduleEnsureUtilityStylesLast();
 
                     // Remove critical style element entirely after compilation
                     // Use requestAnimationFrame to ensure styles are painted before removing
@@ -2991,6 +3029,7 @@ TailwindCompiler.prototype.compile = async function () {
                                 this.criticalStyleElement.parentNode.removeChild(this.criticalStyleElement);
                                 this.criticalStyleElement = null;
                             }
+                            this.ensureUtilityStylesLast();
                         });
                     });
                     this.lastClassesHash = staticUsedData.classes.sort().join(',');
@@ -3060,6 +3099,8 @@ TailwindCompiler.prototype.compile = async function () {
                     const finalCss = `@layer utilities {\n${allUtilities}\n}`;
 
                     this.styleElement.textContent = finalCss;
+                    this.ensureUtilityStylesLast();
+                    this.scheduleEnsureUtilityStylesLast();
 
                     // Remove critical style element entirely after compilation
                     // Use requestAnimationFrame to ensure styles are painted before removing
@@ -3070,6 +3111,7 @@ TailwindCompiler.prototype.compile = async function () {
                                 this.criticalStyleElement.parentNode.removeChild(this.criticalStyleElement);
                                 this.criticalStyleElement = null;
                             }
+                            this.ensureUtilityStylesLast();
                         });
                     });
                     this.lastClassesHash = dynamicClassesHash;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.21",
+    "version": "0.5.23",
     "private": false,
     "workspaces": [
         "templates/starter"