@useavalon/avalon 0.1.11 → 0.1.13

package/src/client/css-hmr-handler.js

@@ -1,263 +0,0 @@
-/**
-* CSS HMR Handler class
-* Manages CSS hot updates without page reload
-*/
-export class CSSHMRHandler {
-	cssModuleMap = new Map();
-	styleElementMap = new Map();
-	/**
-	* Handle CSS update from Vite HMR
-	*/
-	handleCSSUpdate(update) {
-		const updateInfo = this.classifyCSSUpdate(update);
-		switch (updateInfo.type) {
-			case "global":
-				this.handleGlobalCSSUpdate(updateInfo);
-				break;
-			case "module":
-				this.handleCSSModuleUpdate(updateInfo);
-				break;
-			case "scoped":
-				this.handleScopedCSSUpdate(updateInfo);
-				break;
-		}
-	}
-	/**
-	* Classify the type of CSS update
-	*/
-	classifyCSSUpdate(update) {
-		const path = update.path || update.acceptedPath;
-		// Check if it's a CSS module
-		if (path.includes(".module.css") || path.includes(".module.scss")) {
-			return {
-				type: "module",
-				path,
-				timestamp: update.timestamp
-			};
-		}
-		// Check if it's a scoped style (Svelte or Vue)
-		if (path.includes(".svelte") || path.includes(".vue")) {
-			return {
-				type: "scoped",
-				path,
-				timestamp: update.timestamp
-			};
-		}
-		// Default to global CSS
-		return {
-			type: "global",
-			path,
-			timestamp: update.timestamp
-		};
-	}
-	/**
-	* Handle global CSS file update
-	* Injects updated styles without page reload
-	*/
-	handleGlobalCSSUpdate(info) {
-		try {
-			// Find existing style element for this CSS file
-			const existingStyle = this.styleElementMap.get(info.path);
-			if (existingStyle) {
-				// Remove old style element
-				existingStyle.remove();
-				this.styleElementMap.delete(info.path);
-			}
-			// Vite automatically injects the updated CSS via its HMR mechanism
-			// We just need to ensure old styles are removed
-			// The new styles will be injected by Vite's CSS handling
-			// Find the newly injected style element
-			// Vite adds a data-vite-dev-id attribute to style elements
-			const newStyle = document.querySelector(`style[data-vite-dev-id*="${this.getFileId(info.path)}"]`);
-			if (newStyle) {
-				this.styleElementMap.set(info.path, newStyle);
-			}
-			// Dispatch event for feedback
-			this.dispatchCSSUpdateEvent(info, true);
-		} catch (error) {
-			console.error(`Failed to update global CSS: ${info.path}`, error);
-			this.dispatchCSSUpdateEvent(info, false, error);
-			throw error;
-		}
-	}
-	/**
-	* Handle CSS module update
-	* Re-renders components using the updated CSS module
-	*/
-	handleCSSModuleUpdate(info) {
-		try {
-			const affectedIslands = this.findIslandsUsingCSSModule(info.path);
-			if (affectedIslands.length === 0) {
-				return;
-			}
-			for (const island of affectedIslands) {
-				this.triggerIslandRerender(island, info);
-			}
-			this.dispatchCSSUpdateEvent(info, true);
-		} catch (error) {
-			console.error(`[HMR] Failed to update CSS module: ${info.path}`, error);
-			this.dispatchCSSUpdateEvent(info, false, error);
-			throw error;
-		}
-	}
-	/**
-	* Handle scoped CSS update (Svelte/Vue)
-	* Updates only the affected component's styles
-	*/
-	handleScopedCSSUpdate(info) {
-		try {
-			const affectedIslands = this.findIslandsUsingComponent(info.path);
-			if (affectedIslands.length === 0) {
-				return;
-			}
-			this.dispatchCSSUpdateEvent(info, true);
-		} catch (error) {
-			console.error(`[HMR] Failed to update scoped CSS: ${info.path}`, error);
-			this.dispatchCSSUpdateEvent(info, false, error);
-			throw error;
-		}
-	}
-	/**
-	* Find islands that use a specific CSS module
-	*/
-	findIslandsUsingCSSModule(cssPath) {
-		const islands = [];
-		const normalizedPath = this.normalizePath(cssPath);
-		// Check cached mapping first
-		const cached = this.cssModuleMap.get(normalizedPath);
-		if (cached) {
-			return Array.from(cached);
-		}
-		// Find all islands
-		const allIslands = document.querySelectorAll("[data-src]");
-		for (const island of allIslands) {
-			const src = island.getAttribute("data-src");
-			if (!src) continue;
-			// Check if the island's component likely imports this CSS module
-			// This is a heuristic - we look for islands in the same directory
-			const componentDir = this.getDirectory(src);
-			const cssDir = this.getDirectory(cssPath);
-			if (componentDir === cssDir) {
-				islands.push(island);
-			}
-		}
-		// Cache the mapping
-		if (islands.length > 0) {
-			this.cssModuleMap.set(normalizedPath, new Set(islands));
-		}
-		return islands;
-	}
-	/**
-	* Find islands using a specific component file
-	*/
-	findIslandsUsingComponent(componentPath) {
-		const islands = [];
-		const normalizedPath = this.normalizePath(componentPath);
-		const allIslands = document.querySelectorAll("[data-src]");
-		for (const island of allIslands) {
-			const src = island.getAttribute("data-src");
-			if (!src) continue;
-			const normalizedSrc = this.normalizePath(src);
-			if (normalizedSrc === normalizedPath || normalizedSrc.includes(normalizedPath)) {
-				islands.push(island);
-			}
-		}
-		return islands;
-	}
-	/**
-	* Trigger re-render of an island to apply new CSS module classes
-	*/
-	triggerIslandRerender(island, info) {
-		// Dispatch event to trigger island re-render
-		// The HMR coordinator will handle the actual re-render
-		island.dispatchEvent(new CustomEvent("css-module-update", {
-			detail: {
-				cssPath: info.path,
-				timestamp: info.timestamp
-			},
-			bubbles: true
-		}));
-		// Also trigger a standard HMR update event
-		// This will be picked up by the HMR coordinator
-		const src = island.getAttribute("data-src");
-		if (src) {
-			island.dispatchEvent(new CustomEvent("hmr-update-required", {
-				detail: {
-					src,
-					reason: "css-module-update",
-					cssPath: info.path
-				},
-				bubbles: true
-			}));
-		}
-	}
-	/**
-	* Dispatch CSS update event for feedback
-	*/
-	dispatchCSSUpdateEvent(info, success, error) {
-		const event = new CustomEvent("css-hmr-update", {
-			detail: {
-				type: info.type,
-				path: info.path,
-				timestamp: info.timestamp,
-				success,
-				error: error?.message
-			},
-			bubbles: true
-		});
-		document.dispatchEvent(event);
-	}
-	/**
-	* Normalize a file path for comparison
-	*/
-	normalizePath(path) {
-		return path.replace(/\\/g, "/").replace(/^\//, "").replace(/\?.*$/, "").replace(/#.*$/, "");
-	}
-	/**
-	* Get directory from a file path
-	*/
-	getDirectory(path) {
-		const normalized = this.normalizePath(path);
-		const lastSlash = normalized.lastIndexOf("/");
-		return lastSlash >= 0 ? normalized.substring(0, lastSlash) : "";
-	}
-	/**
-	* Get file ID from path (for Vite's data-vite-dev-id)
-	*/
-	getFileId(path) {
-		const normalized = this.normalizePath(path);
-		// Vite uses the file path as the ID
-		return normalized;
-	}
-	/**
-	* Clear cached mappings
-	*/
-	clearCache() {
-		this.cssModuleMap.clear();
-		this.styleElementMap.clear();
-	}
-	/**
-	* Register an island as using a CSS module
-	* Useful for explicit tracking
-	*/
-	registerCSSModuleUsage(cssPath, island) {
-		const normalized = this.normalizePath(cssPath);
-		if (!this.cssModuleMap.has(normalized)) {
-			this.cssModuleMap.set(normalized, new Set());
-		}
-		this.cssModuleMap.get(normalized).add(island);
-	}
-}
-/**
-* Global CSS HMR handler instance
-*/
-let cssHandlerInstance = null;
-/**
-* Get or create the global CSS HMR handler instance
-*/
-export function getCSSHMRHandler() {
-	if (!cssHandlerInstance) {
-		cssHandlerInstance = new CSSHMRHandler();
-	}
-	return cssHandlerInstance;
-}

package/src/client/framework-adapter.js

@@ -1,283 +0,0 @@
-/**
-* Adapter registry for managing framework-specific HMR adapters
-*/
-export class AdapterRegistry {
-	adapters = new Map();
-	/**
-	* Register a framework-specific HMR adapter
-	*
-	* @param framework - Framework name (case-insensitive)
-	* @param adapter - The adapter implementation
-	* @throws Error if adapter is invalid or already registered
-	*
-	* Requirements: 2.1-2.7
-	*/
-	register(framework, adapter) {
-		const normalizedName = framework.toLowerCase();
-		// Validate adapter
-		if (!adapter) {
-			throw new Error(`Cannot register null/undefined adapter for framework: ${framework}`);
-		}
-		if (!adapter.name) {
-			throw new Error(`Adapter for framework ${framework} must have a name property`);
-		}
-		if (typeof adapter.canHandle !== "function") {
-			throw new Error(`Adapter for framework ${framework} must implement canHandle method`);
-		}
-		if (typeof adapter.preserveState !== "function") {
-			throw new Error(`Adapter for framework ${framework} must implement preserveState method`);
-		}
-		if (typeof adapter.update !== "function") {
-			throw new Error(`Adapter for framework ${framework} must implement update method`);
-		}
-		if (typeof adapter.restoreState !== "function") {
-			throw new Error(`Adapter for framework ${framework} must implement restoreState method`);
-		}
-		if (typeof adapter.handleError !== "function") {
-			throw new Error(`Adapter for framework ${framework} must implement handleError method`);
-		}
-		// Check if already registered
-		if (this.adapters.has(normalizedName)) {
-			console.warn(`Overwriting existing HMR adapter for framework: ${framework}`);
-		}
-		this.adapters.set(normalizedName, adapter);
-	}
-	/**
-	* Get an adapter for a specific framework
-	*
-	* @param framework - Framework name (case-insensitive)
-	* @returns The adapter or undefined if not found
-	*/
-	get(framework) {
-		return this.adapters.get(framework.toLowerCase());
-	}
-	/**
-	* Check if an adapter is registered for a framework
-	*
-	* @param framework - Framework name (case-insensitive)
-	* @returns true if adapter is registered
-	*/
-	has(framework) {
-		return this.adapters.has(framework.toLowerCase());
-	}
-	/**
-	* Get all registered framework names
-	*
-	* @returns Array of registered framework names
-	*/
-	getRegisteredFrameworks() {
-		return Array.from(this.adapters.keys());
-	}
-	/**
-	* Find an adapter that can handle a specific component
-	*
-	* Iterates through all registered adapters and returns the first one
-	* that can handle the component.
-	*
-	* @param component - The component to check
-	* @returns The adapter that can handle the component, or undefined
-	*/
-	findAdapter(component) {
-		for (const adapter of this.adapters.values()) {
-			if (adapter.canHandle(component)) {
-				return adapter;
-			}
-		}
-		return undefined;
-	}
-	/**
-	* Unregister an adapter
-	*
-	* @param framework - Framework name (case-insensitive)
-	* @returns true if adapter was removed, false if not found
-	*/
-	unregister(framework) {
-		const normalizedName = framework.toLowerCase();
-		const removed = this.adapters.delete(normalizedName);
-		return removed;
-	}
-	/**
-	* Clear all registered adapters
-	*/
-	clear() {
-		this.adapters.clear();
-	}
-	/**
-	* Get the number of registered adapters
-	*/
-	get size() {
-		return this.adapters.size;
-	}
-}
-/**
-* Base adapter class with common functionality
-*
-* Framework-specific adapters can extend this class to inherit common behavior
-* and only override framework-specific methods.
-*/
-export class BaseFrameworkAdapter {
-	/**
-	* Default state preservation implementation
-	* Captures DOM state (scroll, focus, form values)
-	*
-	* Subclasses should override to add framework-specific state
-	*/
-	preserveState(island) {
-		try {
-			const snapshot = {
-				framework: this.name,
-				timestamp: Date.now(),
-				data: {},
-				dom: this.captureDOMState(island)
-			};
-			return snapshot;
-		} catch (error) {
-			console.warn(`Failed to preserve state for ${this.name}:`, error);
-			return null;
-		}
-	}
-	/**
-	* Default state restoration implementation
-	* Restores DOM state (scroll, focus, form values)
-	*
-	* Subclasses should override to add framework-specific state restoration
-	*/
-	restoreState(island, state) {
-		try {
-			if (state.dom) {
-				this.restoreDOMState(island, state.dom);
-			}
-		} catch (error) {
-			console.warn(`Failed to restore state for ${this.name}:`, error);
-		}
-	}
-	/**
-	* Default error handling implementation
-	* Shows error indicator and preserves SSR HTML
-	*/
-	handleError(island, error) {
-		console.error(`HMR error in ${this.name} island:`, error);
-		// Add error indicator
-		const errorIndicator = document.createElement("div");
-		errorIndicator.className = "hmr-error-indicator";
-		errorIndicator.style.cssText = `
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      background: #ff4444;
-      color: white;
-      padding: 8px;
-      font-size: 12px;
-      font-family: monospace;
-      z-index: 10000;
-      border-bottom: 2px solid #cc0000;
-    `;
-		errorIndicator.textContent = `HMR Error: ${error.message}`;
-		// Remove existing error indicators
-		const existing = island.querySelector(".hmr-error-indicator");
-		if (existing) {
-			existing.remove();
-		}
-		island.style.position = "relative";
-		island.insertBefore(errorIndicator, island.firstChild);
-		// Mark island as having error
-		island.setAttribute("data-hmr-error", "true");
-		island.setAttribute("data-hmr-error-message", error.message);
-	}
-	/**
-	* Capture DOM state (scroll, focus, form values)
-	*/
-	captureDOMState(island) {
-		const dom = {};
-		// Capture scroll position
-		const scrollableElements = island.querySelectorAll("[data-preserve-scroll]");
-		if (scrollableElements.length > 0 || island.scrollTop > 0 || island.scrollLeft > 0) {
-			dom.scrollPosition = {
-				x: island.scrollLeft,
-				y: island.scrollTop
-			};
-		}
-		// Capture focused element
-		const activeElement = document.activeElement;
-		if (activeElement && island.contains(activeElement)) {
-			const selector = this.getElementSelector(activeElement);
-			if (selector) {
-				dom.focusedElement = selector;
-			}
-		}
-		// Capture form values
-		const formElements = island.querySelectorAll("input, textarea, select");
-		if (formElements.length > 0) {
-			dom.formValues = {};
-			formElements.forEach((element, index) => {
-				const input = element;
-				const name = input.name || input.id || `element-${index}`;
-				if (input.type === "checkbox" || input.type === "radio") {
-					dom.formValues[name] = input.checked;
-				} else {
-					dom.formValues[name] = input.value;
-				}
-			});
-		}
-		return dom;
-	}
-	/**
-	* Restore DOM state (scroll, focus, form values)
-	*/
-	restoreDOMState(island, dom) {
-		if (!dom) return;
-		// Restore scroll position
-		if (dom.scrollPosition) {
-			island.scrollLeft = dom.scrollPosition.x;
-			island.scrollTop = dom.scrollPosition.y;
-		}
-		// Restore focused element
-		if (dom.focusedElement) {
-			try {
-				const element = island.querySelector(dom.focusedElement);
-				if (element && typeof element.focus === "function") {
-					element.focus();
-				}
-			} catch (error) {
-				console.warn("Failed to restore focus:", error);
-			}
-		}
-		// Restore form values
-		if (dom.formValues) {
-			const formElements = island.querySelectorAll("input, textarea, select");
-			formElements.forEach((element, index) => {
-				const input = element;
-				const name = input.name || input.id || `element-${index}`;
-				const value = dom.formValues[name];
-				if (value !== undefined) {
-					if (input.type === "checkbox" || input.type === "radio") {
-						input.checked = value;
-					} else {
-						input.value = value;
-					}
-				}
-			});
-		}
-	}
-	/**
-	* Get a CSS selector for an element
-	*/
-	getElementSelector(element) {
-		if (element.id) {
-			return `#${element.id}`;
-		}
-		// Check if element has name attribute (for form elements)
-		const nameAttr = element.getAttribute("name");
-		if (nameAttr) {
-			return `[name="${nameAttr}"]`;
-		}
-		// Fallback to nth-child selector
-		const parent = element.parentElement;
-		if (parent) {
-			const index = Array.from(parent.children).indexOf(element);
-			return `${element.tagName.toLowerCase()}:nth-child(${index + 1})`;
-		}
-		return null;
-	}
-}