From c20800a126f15382e1c523e1f9461ed48fa76e00 Mon Sep 17 00:00:00 2001 From: Sathvik C Date: Thu, 7 May 2026 00:14:09 -0500 Subject: [PATCH 1/9] feat: add Lume.js weather app with core functionality and styles --- apps/lume-js/README.md | 36 +++ apps/lume-js/index.html | 195 ++++++++++++++ apps/lume-js/js/weather-app.js | 307 ++++++++++++++++++++++ apps/lume-js/js/weather-service.js | 165 ++++++++++++ apps/lume-js/js/weather-utils.js | 128 +++++++++ apps/lume-js/package.json | 14 + apps/lume-js/styles.css | 36 +++ frameworks.json | 35 +++ package.json | 4 + tests/config/playwright-lume-js.config.js | 3 + tests/config/playwright.config.base.js | 7 + 11 files changed, 930 insertions(+) create mode 100644 apps/lume-js/README.md create mode 100644 apps/lume-js/index.html create mode 100644 apps/lume-js/js/weather-app.js create mode 100644 apps/lume-js/js/weather-service.js create mode 100644 apps/lume-js/js/weather-utils.js create mode 100644 apps/lume-js/package.json create mode 100644 apps/lume-js/styles.css create mode 100644 tests/config/playwright-lume-js.config.js diff --git a/apps/lume-js/README.md b/apps/lume-js/README.md new file mode 100644 index 00000000..9328ce51 --- /dev/null +++ b/apps/lume-js/README.md @@ -0,0 +1,36 @@ +# Weather App — Lume.js + +A minimal reactive weather application built with [Lume.js](https://github.com/sathvikc/lume-js) (~2.4 KB gzipped). + +## Usage + +```bash +# Dev server (no build step required) +npm run dev # python3 -m http.server 3000 + +# Run tests +npm run test # Playwright E2E + +# Lint +npm run lint +``` + +## Implementation + +Lume.js is closest to Alpine in philosophy — HTML-first, no build step, minimal overhead. The implementation uses: + +- **`state()`** — flat reactive store holding all UI state +- **`bindDom()`** — binds `data-bind`, `data-show`, `data-disabled`, and a custom `data-classname` handler to DOM elements +- **`repeat()`** — keyed list rendering for the 7-day forecast (from `lume-js/addons`) + +All three are loaded via ESM CDN in ` + + + + + diff --git a/apps/lume-js/js/weather-app.js b/apps/lume-js/js/weather-app.js new file mode 100644 index 00000000..8e030c53 --- /dev/null +++ b/apps/lume-js/js/weather-app.js @@ -0,0 +1,307 @@ +const { state, bindDom, repeat, show } = window.Lume; + +// Custom handler: sets el.className to the full class string +const classNameHandler = { + attr: 'data-classname', + apply(el, val) { el.className = val || ''; } +}; + +const store = state({ + searchQuery: '', + isLoading: false, + hasError: false, + hasData: false, + showWeather: false, + errorMessage: 'Please check the city name and try again.', + buttonText: 'Get Weather', + + // Current weather (flat — each key is data-bind'able) + locationDisplay: '', + temperature: '', + condition: '', + conditionClass: 'current-weather__condition', + icon: '🌤️', + feelsLike: '', + humidity: '', + windSpeed: '', + pressure: '', + cloudCover: '', + windDirection: '', + + // Forecast + forecast: [], + activeForecastIndex: null, +}); + +const weatherService = new WeatherService(); + +// Bind reactive data-* attributes to DOM +bindDom(document.body, store, { + immediate: true, + handlers: [show, classNameHandler], +}); + +// Forecast list rendered via repeat() +repeat('#forecast-list', store, 'forecast', { + key: item => item.day, + element: 'div', + + create(item, el, index) { + el.className = 'forecast-item'; + el.setAttribute('data-testid', 'forecast-item'); + el.setAttribute('tabindex', '0'); + el.setAttribute('role', 'button'); + + el.innerHTML = ` +
+
+
+
+
+ + +
+
+
+
+
Sunrise
+
+
+
+
Sunset
+
+
+
+
Rain
+
+
+
+
UV Index
+
+
+
+
Precipitation
+
+
+
+
Temperature
+
+
+
+ `; + + const details = el.querySelector('.forecast-item__details'); + details.hidden = true; + + // Keep details visibility and active class in sync with activeForecastIndex. + // Captures `index` from create — stable because forecast order never changes. + store.$subscribe('activeForecastIndex', activeIdx => { + const isActive = activeIdx === index; + details.hidden = !isActive; + el.classList.toggle('active', isActive); + }); + + const toggle = () => { + const next = store.activeForecastIndex === index ? null : index; + store.activeForecastIndex = next; + if (next === index) { + setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100); + } + }; + + el.addEventListener('click', toggle); + el.addEventListener('keydown', e => { + if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } + }); + }, + + update(item, el) { + el.setAttribute('aria-label', `View detailed forecast for ${item.day}`); + el.querySelector('.forecast-item__day').textContent = item.day; + el.querySelector('.forecast-item__icon').textContent = item.icon; + el.querySelector('.forecast-item__condition').textContent = item.condition; + el.querySelector('[data-testid="forecast-high"]').textContent = item.high; + el.querySelector('[data-testid="forecast-low"]').textContent = item.low; + el.querySelector('[data-detail="sunrise"]').textContent = item.sunrise; + el.querySelector('[data-detail="sunset"]').textContent = item.sunset; + el.querySelector('[data-detail="rain"]').textContent = item.rain; + el.querySelector('[data-detail="uvIndex"]').textContent = item.uvIndex; + el.querySelector('[data-detail="precipitation"]').textContent = item.precipitation; + el.querySelector('[data-detail="tempRange"]').textContent = item.tempRange; + }, +}); + +// Form submission +document.getElementById('search-form').addEventListener('submit', e => { + e.preventDefault(); + handleSearch(); +}); + +// --- State helpers --- + +function updateShowWeather() { + store.showWeather = store.hasData && !store.isLoading && !store.hasError; +} + +function setLoading(loading) { + store.isLoading = loading; + store.buttonText = loading ? 'Loading...' : 'Get Weather'; + updateShowWeather(); +} + +function showError(message) { + store.hasError = true; + store.hasData = false; + store.errorMessage = message; + updateShowWeather(); +} + +function clearError() { + store.hasError = false; + store.errorMessage = 'Please check the city name and try again.'; +} + +function showWeatherContent() { + store.hasData = true; + store.hasError = false; + updateShowWeather(); +} + +function saveLocation(city) { + try { localStorage.setItem('weather-app-location', city); } catch {} +} + +function getSavedLocation() { + try { return localStorage.getItem('weather-app-location'); } catch { return null; } +} + +function processWeatherData(weatherData) { + const { current, daily, locationName, country } = weatherData; + + store.locationDisplay = locationName + (country ? `, ${country}` : ''); + store.temperature = WeatherUtils.formatTemperature(current.temperature_2m); + store.condition = WeatherUtils.getWeatherDescription(current.weather_code); + store.conditionClass = `current-weather__condition ${WeatherUtils.getConditionClass(current.weather_code)}`; + store.icon = WeatherUtils.getWeatherIcon(current.weather_code, current.is_day); + store.feelsLike = WeatherUtils.formatTemperature(current.apparent_temperature); + store.humidity = WeatherUtils.formatPercentage(current.relative_humidity_2m); + store.windSpeed = WeatherUtils.formatWindSpeed(current.wind_speed_10m); + store.pressure = WeatherUtils.formatPressure(current.pressure_msl); + store.cloudCover = WeatherUtils.formatPercentage(current.cloud_cover); + store.windDirection = WeatherUtils.getWindDirection(current.wind_direction_10m); + + store.activeForecastIndex = null; + store.forecast = daily.time.map((date, i) => ({ + day: WeatherUtils.formatDate(date), + icon: WeatherUtils.getWeatherIcon(daily.weather_code[i]), + condition: WeatherUtils.getWeatherDescription(daily.weather_code[i]), + high: WeatherUtils.formatTemperature(daily.temperature_2m_max[i]), + low: WeatherUtils.formatTemperature(daily.temperature_2m_min[i]), + sunrise: WeatherUtils.formatTime(daily.sunrise[i]), + sunset: WeatherUtils.formatTime(daily.sunset[i]), + rain: `${daily.rain_sum[i]?.toFixed(1) || 0} mm`, + uvIndex: daily.uv_index_max[i]?.toFixed(1) || 0, + precipitation: WeatherUtils.formatPercentage(daily.precipitation_probability_max[i] || 0), + tempRange: `${WeatherUtils.formatTemperature(daily.temperature_2m_min[i])} to ${WeatherUtils.formatTemperature(daily.temperature_2m_max[i])}`, + })); +} + +// --- Weather loading --- + +let _loadSeq = 0; + +async function loadWeather(city) { + const seq = ++_loadSeq; + try { + setLoading(true); + clearError(); + + const weatherData = await weatherService.getWeatherByCity(city); + if (seq !== _loadSeq) return; // stale — a newer request superseded this one + saveLocation(city); + processWeatherData(weatherData); + showWeatherContent(); + } catch (error) { + if (seq !== _loadSeq) return; + showError(error.message); + } finally { + if (seq === _loadSeq) setLoading(false); + } +} + +async function handleSearch() { + const city = store.searchQuery.trim(); + if (!city) { + showError('Please enter a city name'); + return; + } + await loadWeather(city); +} + +function getCurrentLocationWeather() { + return new Promise((resolve, reject) => { + if (!navigator.geolocation) { + reject(new Error('Geolocation not supported')); + return; + } + + navigator.geolocation.getCurrentPosition( + async position => { + try { + setLoading(true); + clearError(); + + const { latitude, longitude } = position.coords; + const weatherData = await weatherService.getWeatherData(latitude, longitude); + weatherData.locationName = 'Current Location'; + store.searchQuery = 'Current Location'; + + processWeatherData(weatherData); + showWeatherContent(); + resolve(); + } catch (error) { + reject(error); + } finally { + setLoading(false); + } + }, + error => reject(error), + { timeout: 10000, enableHighAccuracy: false, maximumAge: 300000 } + ); + }); +} + +// --- Initialization --- + +const _isHeadless = navigator.userAgent.includes('Playwright') || navigator.userAgent.includes('HeadlessChrome'); + +async function init() { + try { + const savedLocation = getSavedLocation(); + if (savedLocation) { + store.searchQuery = savedLocation; + await loadWeather(savedLocation); + return; + } + } catch (error) { + console.warn('Could not load saved location:', error); + } + + // Skip geolocation in headless/test environments — permission is always denied + // and the async denial can take several seconds, causing timeout flakiness. + if (!_isHeadless) { + try { + await getCurrentLocationWeather(); + return; + } catch (error) { + console.warn('Could not get current location:', error); + } + } + + if (_loadSeq === 0) { + store.searchQuery = 'London'; + await loadWeather('London'); + } +} + +init(); diff --git a/apps/lume-js/js/weather-service.js b/apps/lume-js/js/weather-service.js new file mode 100644 index 00000000..ca8b2218 --- /dev/null +++ b/apps/lume-js/js/weather-service.js @@ -0,0 +1,165 @@ +class WeatherService { + constructor() { + this.baseUrl = 'https://api.open-meteo.com/v1'; + this.geocodingUrl = 'https://geocoding-api.open-meteo.com/v1'; + this.useMockData = this.shouldUseMockData(); + } + + shouldUseMockData() { + // Check if we're in a testing environment (Playwright sets specific user agents) + const isTestEnvironment = navigator.userAgent.includes('Playwright') || + navigator.userAgent.includes('HeadlessChrome'); + + // Don't use mock data if we're explicitly testing API errors + if (window.location.search.includes('mock=false')) { + return false; + } + + // Use mock data if explicitly requested or if we're in a test environment + return window.location.search.includes('mock=true') || isTestEnvironment; + } + + async getMockData() { + try { + // Add delay in test environments to make loading state visible + if (this.isTestEnvironment()) { + await new Promise(resolve => setTimeout(resolve, 200)); + } + + const response = await fetch('./public/mocks/weather-data.json'); + if (!response.ok) { + throw new Error('Failed to load mock data'); + } + return await response.json(); + } catch (error) { + console.error('Error loading mock data:', error); + throw error; + } + } + + isTestEnvironment() { + return navigator.userAgent.includes('Playwright') || + navigator.userAgent.includes('HeadlessChrome'); + } + + getMockGeocodingData(cityName) { + // Mock geocoding data for different cities to enable proper testing + const mockCities = { + 'London': { + latitude: 51.5074, + longitude: -0.1278, + name: 'London', + country: 'United Kingdom' + }, + 'Tokyo': { + latitude: 35.6762, + longitude: 139.6503, + name: 'Tokyo', + country: 'Japan' + }, + 'Paris': { + latitude: 48.8566, + longitude: 2.3522, + name: 'Paris', + country: 'France' + }, + 'São Paulo': { + latitude: -23.5505, + longitude: -46.6333, + name: 'São Paulo', + country: 'Brazil' + }, + 'New York': { + latitude: 40.7128, + longitude: -74.0060, + name: 'New York', + country: 'United States' + } + }; + + // Handle invalid cities + if (cityName.includes('Invalid') || cityName.includes('123') || !cityName.trim()) { + throw new Error('Unable to find location. Please check the city name and try again.'); + } + + // Return mock data for known cities, or default to London for unknown cities + return mockCities[cityName] || mockCities['London']; + } + + async geocodeLocation(cityName) { + if (this.useMockData) { + return this.getMockGeocodingData(cityName); + } + + try { + const response = await fetch( + `${this.geocodingUrl}/search?name=${encodeURIComponent(cityName)}&count=1&language=en&format=json` + ); + + if (!response.ok) { + throw new Error('Geocoding failed'); + } + + const data = await response.json(); + + if (!data.results || data.results.length === 0) { + throw new Error('Location not found'); + } + + const location = data.results[0]; + return { + latitude: location.latitude, + longitude: location.longitude, + name: location.name, + country: location.country + }; + } catch (error) { + console.error('Geocoding error:', error); + throw new Error('Unable to find location. Please check the city name and try again.'); + } + } + + async getWeatherData(latitude, longitude) { + if (this.useMockData) { + return await this.getMockData(); + } + + try { + const params = new URLSearchParams({ + latitude: latitude.toString(), + longitude: longitude.toString(), + daily: 'temperature_2m_max,temperature_2m_min,weather_code,sunrise,sunset,rain_sum,uv_index_max,precipitation_probability_max', + current: 'temperature_2m,relative_humidity_2m,apparent_temperature,is_day,snowfall,showers,rain,precipitation,weather_code,cloud_cover,pressure_msl,surface_pressure,wind_direction_10m,wind_gusts_10m,wind_speed_10m', + timezone: 'GMT' + }); + + const response = await fetch(`${this.baseUrl}/forecast?${params}`); + + if (!response.ok) { + throw new Error(`Weather API error: ${response.status}`); + } + + const data = await response.json(); + return data; + } catch (error) { + console.error('Weather API error:', error); + throw new Error('Unable to fetch weather data. Please try again later.'); + } + } + + async getWeatherByCity(cityName) { + try { + const location = await this.geocodeLocation(cityName); + const weather = await this.getWeatherData(location.latitude, location.longitude); + + return { + ...weather, + locationName: location.name, + country: location.country + }; + } catch (error) { + console.error('Weather service error:', error); + throw error; + } + } +} diff --git a/apps/lume-js/js/weather-utils.js b/apps/lume-js/js/weather-utils.js new file mode 100644 index 00000000..8425889a --- /dev/null +++ b/apps/lume-js/js/weather-utils.js @@ -0,0 +1,128 @@ +class WeatherUtils { + static getWeatherDescription(weatherCode) { + const weatherCodes = { + 0: 'Clear sky', + 1: 'Mainly clear', + 2: 'Partly cloudy', + 3: 'Overcast', + 45: 'Fog', + 48: 'Depositing rime fog', + 51: 'Light drizzle', + 53: 'Moderate drizzle', + 55: 'Dense drizzle', + 56: 'Light freezing drizzle', + 57: 'Dense freezing drizzle', + 61: 'Slight rain', + 63: 'Moderate rain', + 65: 'Heavy rain', + 66: 'Light freezing rain', + 67: 'Heavy freezing rain', + 71: 'Slight snow fall', + 73: 'Moderate snow fall', + 75: 'Heavy snow fall', + 77: 'Snow grains', + 80: 'Slight rain showers', + 81: 'Moderate rain showers', + 82: 'Violent rain showers', + 85: 'Slight snow showers', + 86: 'Heavy snow showers', + 95: 'Thunderstorm', + 96: 'Thunderstorm with slight hail', + 99: 'Thunderstorm with heavy hail' + }; + + return weatherCodes[weatherCode] || 'Unknown'; + } + + static getWeatherIcon(weatherCode, isDay = true) { + if (weatherCode === 0) { + return isDay ? '☀️' : '🌙'; + } else if (weatherCode <= 3) { + return isDay ? '⛅' : '☁️'; + } else if (weatherCode <= 48) { + return '🌫️'; + } else if (weatherCode <= 57 || (weatherCode >= 80 && weatherCode <= 82)) { + return '🌧️'; + } else if (weatherCode >= 61 && weatherCode <= 67) { + return '🌧️'; + } else if (weatherCode >= 71 && weatherCode <= 77) { + return '❄️'; + } else if (weatherCode >= 85 && weatherCode <= 86) { + return '🌨️'; + } else if (weatherCode >= 95) { + return '⛈️'; + } + return '🌤️'; + } + + static formatTemperature(temp) { + return `${Math.round(temp)}°C`; + } + + static formatWindSpeed(speed) { + return `${Math.round(speed)} km/h`; + } + + static formatPressure(pressure) { + return `${Math.round(pressure)} hPa`; + } + + static formatPercentage(value) { + return `${Math.round(value)}%`; + } + + static getWindDirection(degrees) { + const directions = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW']; + const index = Math.round(degrees / 22.5) % 16; + return directions[index]; + } + + static formatDate(dateString) { + const date = new Date(dateString); + const today = new Date(); + const tomorrow = new Date(today); + tomorrow.setDate(today.getDate() + 1); + + if (date.toDateString() === today.toDateString()) { + return 'Today'; + } else if (date.toDateString() === tomorrow.toDateString()) { + return 'Tomorrow'; + } else { + return date.toLocaleDateString('en-US', { weekday: 'long' }); + } + } + + static formatTime(timeString) { + const date = new Date(timeString); + return date.toLocaleTimeString('en-US', { + hour: '2-digit', + minute: '2-digit', + hour12: false + }); + } + + static getConditionClass(weatherCode) { + if (weatherCode === 0) { + return 'weather-condition-sunny'; + } else if (weatherCode <= 3) { + return 'weather-condition-cloudy'; + } else if ((weatherCode >= 51 && weatherCode <= 67) || (weatherCode >= 80 && weatherCode <= 82)) { + return 'weather-condition-rainy'; + } else if (weatherCode >= 95) { + return 'weather-condition-stormy'; + } + return 'weather-condition-cloudy'; + } + + static debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; + } +} diff --git a/apps/lume-js/package.json b/apps/lume-js/package.json new file mode 100644 index 00000000..e18c78b6 --- /dev/null +++ b/apps/lume-js/package.json @@ -0,0 +1,14 @@ +{ + "name": "weather-app-lume-js", + "version": "1.0.0", + "description": "Weather app built with Lume.js", + "scripts": { + "dev": "python3 -m http.server 3000", + "start": "python3 -m http.server 3000", + "preview": "python3 -m http.server 3000" + }, + "dependencies": { + "lume-js": "^2.0.1" + }, + "devDependencies": {} +} diff --git a/apps/lume-js/styles.css b/apps/lume-js/styles.css new file mode 100644 index 00000000..80f079ac --- /dev/null +++ b/apps/lume-js/styles.css @@ -0,0 +1,36 @@ +/* Lume.js specific styles */ + +/* Ensure hidden attribute hides elements regardless of other CSS */ +[hidden] { display: none !important; } + +/* Loading state display when visible */ +.loading:not([hidden]) { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 200px; +} + +/* Error state when visible */ +.error:not([hidden]) { + display: block; + text-align: center; + padding: 2rem; +} + +/* Weather content when visible */ +.weather-content:not([hidden]) { + display: block; +} + +/* Forecast details expand/collapse */ +.forecast-item__details { + overflow: hidden; +} + +/* Active forecast item */ +.forecast-item.active { + background-color: var(--color-background-secondary); + border-radius: var(--border-radius-md); +} diff --git a/frameworks.json b/frameworks.json index f0c70eb1..560c6ec6 100644 --- a/frameworks.json +++ b/frameworks.json @@ -373,6 +373,41 @@ "logo": "https://storage.googleapis.com/as93-screenshots/project-screenshots/raid-caclularor.png" } }, + { + "id": "lume-js", + "name": "Lume.js", + "dir": "lume-js", + "assetsDir": "public", + "buildDir": ".", + "build": { + "buildCommand": "echo 'No build step required'", + "hasNodeModules": false, + "devCommand": "python3 -m http.server 3000 || python -m http.server 3000", + "testCommand": "playwright test --config=tests/config/playwright-lume-js.config.js", + "lintFiles": ["js"] + }, + "meta": { + "emoji": "💡", + "iconName": "javascript", + "website": "https://sathvikc.github.io/lume-js", + "docs": "https://sathvikc.github.io/lume-js", + "github": "https://github.com/sathvikc/lume-js", + "npmPackage": "lume-js", + "color": "#7C3AED", + "accentColor": "#7C3AED", + "logo": "", + "description": "Minimal reactive state library (~2.4KB gzipped) with no build step", + "longDescription": "Standards-only reactive library with state, DOM binding, and keyed list rendering.", + "video": "" + }, + "exampleRealApp": { + "title": "", + "description": "", + "repo": "", + "website": "", + "logo": "" + } + }, { "id": "vanilla", "name": "Vanilla JS", diff --git a/package.json b/package.json index 4245892c..385161bb 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "// DEV COMMANDS": "-------------------------------------------------------", "dev:all": "npm run dev:alpine && npm run dev:angular && npm run dev:jquery && npm run dev:lit && npm run dev:preact && npm run dev:qwik && npm run dev:react && npm run dev:solid && npm run dev:svelte && npm run dev:vanilla && npm run dev:vanjs && npm run dev:vue", "dev:alpine": "cd apps/alpine && python3 -m http.server 3000 || python -m http.server 3000", + "dev:lume-js": "cd apps/lume-js && python3 -m http.server 3000 || python -m http.server 3000", "dev:angular": "cd apps/angular && npx ng serve --port 3000", "dev:jquery": "cd apps/jquery && npx vite --port 3000", "dev:lit": "cd apps/lit && npx vite --port 3000", @@ -33,6 +34,7 @@ "// BUILD COMMANDS": "-----------------------------------------------------", "build:all": "npm run build:alpine && npm run build:angular && npm run build:jquery && npm run build:lit && npm run build:preact && npm run build:qwik && npm run build:react && npm run build:solid && npm run build:svelte && npm run build:vanilla && npm run build:vanjs && npm run build:vue", "build:alpine": "cd apps/alpine && echo 'No build step required'", + "build:lume-js": "cd apps/lume-js && echo 'No build step required'", "build:angular": "cd apps/angular && npx ng build", "build:jquery": "cd apps/jquery && npx vite build", "build:lit": "cd apps/lit && npx vite build", @@ -47,6 +49,7 @@ "// TEST COMMANDS": "------------------------------------------------------", "test:all": "npm run test:alpine && npm run test:angular && npm run test:jquery && npm run test:lit && npm run test:preact && npm run test:qwik && npm run test:react && npm run test:solid && npm run test:svelte && npm run test:vanilla && npm run test:vanjs && npm run test:vue", "test:alpine": "npx playwright test --config=tests/config/playwright-alpine.config.js --reporter=list", + "test:lume-js": "npx playwright test --config=tests/config/playwright-lume-js.config.js --reporter=list", "test:angular": "npx playwright test --config=tests/config/playwright-angular.config.js --reporter=list", "test:jquery": "npx playwright test --config=tests/config/playwright-jquery.config.js --reporter=list", "test:lit": "npx playwright test --config=tests/config/playwright-lit.config.js --reporter=list", @@ -61,6 +64,7 @@ "// LINT COMMANDS": "------------------------------------------------------", "lint:all": "npm run lint:alpine && npm run lint:angular && npm run lint:jquery && npm run lint:lit && npm run lint:preact && npm run lint:qwik && npm run lint:react && npm run lint:solid && npm run lint:svelte && npm run lint:vanilla && npm run lint:vanjs && npm run lint:vue", "lint:alpine": "eslint 'apps/alpine/**/*.js'", + "lint:lume-js": "eslint 'apps/lume-js/**/*.js'", "lint:angular": "eslint 'apps/angular/**/*.{ts,html}'", "lint:jquery": "eslint 'apps/jquery/**/*.js'", "lint:lit": "eslint 'apps/lit/**/*.js'", diff --git a/tests/config/playwright-lume-js.config.js b/tests/config/playwright-lume-js.config.js new file mode 100644 index 00000000..ca28bd6a --- /dev/null +++ b/tests/config/playwright-lume-js.config.js @@ -0,0 +1,3 @@ +const { createConfig } = require('./playwright.config.base.js'); + +module.exports = createConfig('lume-js'); diff --git a/tests/config/playwright.config.base.js b/tests/config/playwright.config.base.js index 9696c101..37dc4d8a 100644 --- a/tests/config/playwright.config.base.js +++ b/tests/config/playwright.config.base.js @@ -85,6 +85,13 @@ function createConfig(framework) { command: 'npm run dev:vanjs', url: 'http://localhost:3000/', } + }, + 'lume-js': { + baseURL: 'http://localhost:3000/?mock=true', + webServer: { + command: 'npm run dev:lume-js', + url: 'http://localhost:3000/', + } } }; From a62fcd28ebe6677acb8ef82bc53957b0618db76f Mon Sep 17 00:00:00 2001 From: Sathvik C Date: Thu, 7 May 2026 00:45:29 -0500 Subject: [PATCH 2/9] feat: refactor weather app to use ES modules and update script imports --- apps/lume-js/index.html | 5 +---- apps/lume-js/js/weather-app.js | 7 ++++++- apps/lume-js/js/weather-service.js | 2 +- apps/lume-js/js/weather-utils.js | 2 +- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/apps/lume-js/index.html b/apps/lume-js/index.html index 357f2e8c..709ec0cd 100644 --- a/apps/lume-js/index.html +++ b/apps/lume-js/index.html @@ -187,9 +187,6 @@

7-Day Forecast

- - - - + diff --git a/apps/lume-js/js/weather-app.js b/apps/lume-js/js/weather-app.js index 8e030c53..4a1c23b2 100644 --- a/apps/lume-js/js/weather-app.js +++ b/apps/lume-js/js/weather-app.js @@ -1,4 +1,9 @@ -const { state, bindDom, repeat, show } = window.Lume; +import { state, bindDom } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/index.mjs'; +import { repeat } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/addons.mjs'; +import { show } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/handlers.mjs'; + +import { WeatherService } from './weather-service.js'; +import { WeatherUtils } from './weather-utils.js'; // Custom handler: sets el.className to the full class string const classNameHandler = { diff --git a/apps/lume-js/js/weather-service.js b/apps/lume-js/js/weather-service.js index ca8b2218..1d8c5a48 100644 --- a/apps/lume-js/js/weather-service.js +++ b/apps/lume-js/js/weather-service.js @@ -1,4 +1,4 @@ -class WeatherService { +export class WeatherService { constructor() { this.baseUrl = 'https://api.open-meteo.com/v1'; this.geocodingUrl = 'https://geocoding-api.open-meteo.com/v1'; diff --git a/apps/lume-js/js/weather-utils.js b/apps/lume-js/js/weather-utils.js index 8425889a..00d84f5e 100644 --- a/apps/lume-js/js/weather-utils.js +++ b/apps/lume-js/js/weather-utils.js @@ -1,4 +1,4 @@ -class WeatherUtils { +export class WeatherUtils { static getWeatherDescription(weatherCode) { const weatherCodes = { 0: 'Clear sky', From a5ecd343cea140005b9be47c5e166ae931fc32d8 Mon Sep 17 00:00:00 2001 From: Sathvik C Date: Thu, 7 May 2026 00:45:36 -0500 Subject: [PATCH 3/9] feat: enhance weather app with computed state and transition handler --- apps/lume-js/js/weather-app.js | 34 ++++++++++++++------- apps/lume-js/js/weather-utils.js | 11 ------- frameworks.json | 11 +++---- results/summary.json | 51 ++++++++++++++++++++++++++++++++ 4 files changed, 81 insertions(+), 26 deletions(-) diff --git a/apps/lume-js/js/weather-app.js b/apps/lume-js/js/weather-app.js index 4a1c23b2..35ea1392 100644 --- a/apps/lume-js/js/weather-app.js +++ b/apps/lume-js/js/weather-app.js @@ -1,5 +1,5 @@ import { state, bindDom } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/index.mjs'; -import { repeat } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/addons.mjs'; +import { repeat, computed } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/addons.mjs'; import { show } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/handlers.mjs'; import { WeatherService } from './weather-service.js'; @@ -11,6 +11,14 @@ const classNameHandler = { apply(el, val) { el.className = val || ''; } }; +// Custom handler: applies CSS transition value (e.g. 'opacity 0.2s ease') +const transitionHandler = { + attr: 'data-transition', + apply(el, val) { + el.style.transition = val || ''; + } +}; + const store = state({ searchQuery: '', isLoading: false, @@ -40,10 +48,14 @@ const store = state({ const weatherService = new WeatherService(); +// Derived state: showWeather is true only when data is ready and no loading/error +computed(() => store.hasData && !store.isLoading && !store.hasError) + .subscribe(val => { store.showWeather = val; }); + // Bind reactive data-* attributes to DOM bindDom(document.body, store, { immediate: true, - handlers: [show, classNameHandler], + handlers: [show, classNameHandler, transitionHandler], }); // Forecast list rendered via repeat() @@ -100,11 +112,13 @@ repeat('#forecast-list', store, 'forecast', { // Keep details visibility and active class in sync with activeForecastIndex. // Captures `index` from create — stable because forecast order never changes. - store.$subscribe('activeForecastIndex', activeIdx => { + const unsubscribeActive = store.$subscribe('activeForecastIndex', activeIdx => { const isActive = activeIdx === index; details.hidden = !isActive; el.classList.toggle('active', isActive); }); + // Store cleanup so repeat's remove callback can dispose it + el._lumeCleanup = unsubscribeActive; const toggle = () => { const next = store.activeForecastIndex === index ? null : index; @@ -120,6 +134,13 @@ repeat('#forecast-list', store, 'forecast', { }); }, + remove(item, el) { + if (el._lumeCleanup) { + el._lumeCleanup(); + el._lumeCleanup = null; + } + }, + update(item, el) { el.setAttribute('aria-label', `View detailed forecast for ${item.day}`); el.querySelector('.forecast-item__day').textContent = item.day; @@ -144,21 +165,15 @@ document.getElementById('search-form').addEventListener('submit', e => { // --- State helpers --- -function updateShowWeather() { - store.showWeather = store.hasData && !store.isLoading && !store.hasError; -} - function setLoading(loading) { store.isLoading = loading; store.buttonText = loading ? 'Loading...' : 'Get Weather'; - updateShowWeather(); } function showError(message) { store.hasError = true; store.hasData = false; store.errorMessage = message; - updateShowWeather(); } function clearError() { @@ -169,7 +184,6 @@ function clearError() { function showWeatherContent() { store.hasData = true; store.hasError = false; - updateShowWeather(); } function saveLocation(city) { diff --git a/apps/lume-js/js/weather-utils.js b/apps/lume-js/js/weather-utils.js index 00d84f5e..c911eb67 100644 --- a/apps/lume-js/js/weather-utils.js +++ b/apps/lume-js/js/weather-utils.js @@ -114,15 +114,4 @@ export class WeatherUtils { return 'weather-condition-cloudy'; } - static debounce(func, wait) { - let timeout; - return function executedFunction(...args) { - const later = () => { - clearTimeout(timeout); - func(...args); - }; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - }; - } } diff --git a/frameworks.json b/frameworks.json index 560c6ec6..95a2a82a 100644 --- a/frameworks.json +++ b/frameworks.json @@ -384,7 +384,8 @@ "hasNodeModules": false, "devCommand": "python3 -m http.server 3000 || python -m http.server 3000", "testCommand": "playwright test --config=tests/config/playwright-lume-js.config.js", - "lintFiles": ["js"] + "lintFiles": ["js"], + "dir": "." }, "meta": { "emoji": "💡", @@ -401,10 +402,10 @@ "video": "" }, "exampleRealApp": { - "title": "", - "description": "", - "repo": "", - "website": "", + "title": "Lume.js", + "description": "Documentation and demo site built with Lume.js itself", + "repo": "https://github.com/sathvikc/lume-js", + "website": "https://sathvikc.github.io/lume-js", "logo": "" } }, diff --git a/results/summary.json b/results/summary.json index 459d0626..a9b36b08 100644 --- a/results/summary.json +++ b/results/summary.json @@ -611,6 +611,57 @@ "maintainability_index": 686.46, "physical_lines": 677 } + }, + "lume-js": { + "build_time": { + "build_time_ms": 0, + "build_time_success": true, + "output_size_mb": 0, + "success": true + }, + "bundle_size": { + "compression_ratio": 3.21, + "file_count": 4, + "js_percentage": 96.23, + "total_gzipped": 6303, + "total_size": 20245 + }, + "dev_server": { + "hmr_avg_time_ms": 0, + "startup_time_ms": 0 + }, + "lighthouse": { + "raw_metrics": { + "cls": 0, + "fcp": 2165.54, + "lcp": 2280.09, + "speed_index": 2560.46, + "tbt": 58 + }, + "scores": { + "accessibility": 100, + "best_practices": 100, + "performance": 96, + "seo": 90 + } + }, + "resource_usage": { + "average_cpu": 0, + "cpu": 0, + "heap_delta": 0, + "mem_efficiency": 0, + "memory": 0, + "memory_delta": 0, + "peak_cpu": 0 + }, + "source_analysis": { + "cyclomatic_complexity": 80, + "files_count": 3, + "halstead_volume": 22061.73, + "logical_lines": 355, + "maintainability_index": 76.36, + "physical_lines": 530 + } } }, "metadata": { From 77d721f6fc6408d3ec10793774b6a53011e0cd8e Mon Sep 17 00:00:00 2001 From: Sathvik C Date: Sat, 9 May 2026 13:53:45 -0500 Subject: [PATCH 4/9] feat(lume-js): upgrade to v2.1.0 CDN, refactor app, add quality improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - index.html: switch from local file to CDN lume-js@2.1.0 global build - index.html: add OG meta tags (og:title, og:description, og:type, og:url) - js/: split monolithic weather-app.js into three files: app.js (state + bindDom + repeat + init logic, ~160 LOC) weather-utils.js (pure static helpers, extracted) weather-service.js (WeatherService class, extracted) Cyclomatic complexity: 70 → 22.3 avg; Maintainability: 4.8 → 31.1 - eslint.config.js: add ESLint flat config with browser globals - package.json: add lint script and eslint devDependency - README.md: replace stale ESM CDN import with all three supported patterns (npm, CDN ESM, CDN Global IIFE) - assets/styles/design-system.css: add dark mode via @media (prefers-color-scheme: dark) overriding all semantic tokens - frameworks.json: add logo URL and update bundle size description Playwright: 22/22 passing against v2.1.0 CDN build --- apps/lume-js/README.md | 39 +- apps/lume-js/eslint.config.js | 23 + apps/lume-js/index.html | 11 +- apps/lume-js/js/app.js | 201 +++++ apps/lume-js/js/weather-app.js | 326 --------- apps/lume-js/js/weather-service.js | 170 ++--- apps/lume-js/js/weather-utils.js | 126 +--- apps/lume-js/package-lock.json | 1100 ++++++++++++++++++++++++++++ apps/lume-js/package.json | 8 +- assets/styles/design-system.css | 39 + frameworks.json | 4 +- results/summary.json | 51 +- 12 files changed, 1517 insertions(+), 581 deletions(-) create mode 100644 apps/lume-js/eslint.config.js create mode 100644 apps/lume-js/js/app.js delete mode 100644 apps/lume-js/js/weather-app.js create mode 100644 apps/lume-js/package-lock.json diff --git a/apps/lume-js/README.md b/apps/lume-js/README.md index 9328ce51..8b4e8832 100644 --- a/apps/lume-js/README.md +++ b/apps/lume-js/README.md @@ -1,6 +1,6 @@ # Weather App — Lume.js -A minimal reactive weather application built with [Lume.js](https://github.com/sathvikc/lume-js) (~2.4 KB gzipped). +A minimal reactive weather application built with [Lume.js](https://github.com/sathvikc/lume-js) (~5.58 KB gzipped, all-in-one). ## Usage @@ -22,13 +22,42 @@ Lume.js is closest to Alpine in philosophy — HTML-first, no build step, minima - **`state()`** — flat reactive store holding all UI state - **`bindDom()`** — binds `data-bind`, `data-show`, `data-disabled`, and a custom `data-classname` handler to DOM elements - **`repeat()`** — keyed list rendering for the 7-day forecast (from `lume-js/addons`) +- **`computed()`** — derives `showWeather` from `hasData`, `isLoading`, `hasError` +- **`show`** handler — built-in handler for `data-show` visibility toggling -All three are loaded via ESM CDN in ` + +``` + +## All Supported Import Patterns + +**npm (tree-shakeable ESM):** ```js -import { state, bindDom } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/index.mjs'; -import { repeat } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/addons.mjs'; -import { show } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/handlers.mjs'; +import { state, bindDom, effect, isReactive } from 'lume-js'; +import { computed, watch, repeat, debug } from 'lume-js/addons'; +import { show, classToggle, boolAttr } from 'lume-js/handlers'; +``` + +**CDN ESM (module script, tree-shakeable):** +```html + +``` + +**CDN Global (IIFE, all-in-one, what this benchmark uses):** +```html + + ``` ## Real-world example diff --git a/apps/lume-js/eslint.config.js b/apps/lume-js/eslint.config.js new file mode 100644 index 00000000..4a1b0e53 --- /dev/null +++ b/apps/lume-js/eslint.config.js @@ -0,0 +1,23 @@ +import globals from 'globals'; + +export default [ + { + files: ['js/**/*.js'], + languageOptions: { + ecmaVersion: 2022, + sourceType: 'script', + globals: { + ...globals.browser, + WeatherUtils: 'readonly', + WeatherService: 'readonly', + }, + }, + rules: { + 'no-unused-vars': ['warn', { varsIgnorePattern: '^[A-Z]' }], + 'no-undef': 'error', + 'eqeqeq': 'error', + 'no-var': 'error', + 'prefer-const': 'warn', + }, + }, +]; diff --git a/apps/lume-js/index.html b/apps/lume-js/index.html index 709ec0cd..7a9a7fcc 100644 --- a/apps/lume-js/index.html +++ b/apps/lume-js/index.html @@ -3,12 +3,21 @@ + + + + + Weather App - Lume.js + + + +
@@ -187,6 +196,6 @@

7-Day Forecast

- + diff --git a/apps/lume-js/js/app.js b/apps/lume-js/js/app.js new file mode 100644 index 00000000..f92d3d90 --- /dev/null +++ b/apps/lume-js/js/app.js @@ -0,0 +1,201 @@ +// Lume.js Weather App — requires lume.global.js, weather-utils.js, weather-service.js loaded first. +const { state, bindDom, repeat, computed, show } = window.Lume; + +const classNameHandler = { + attr: 'data-classname', + apply(el, val) { el.className = val || ''; }, +}; + +const store = state({ + searchQuery: '', + isLoading: false, + hasError: false, + hasData: false, + showWeather: false, + errorMessage: 'Please check the city name and try again.', + buttonText: 'Get Weather', + locationDisplay: '', + temperature: '', + condition: '', + conditionClass: 'current-weather__condition', + icon: '🌤️', + feelsLike: '', + humidity: '', + windSpeed: '', + pressure: '', + cloudCover: '', + windDirection: '', + forecast: [], + activeForecastIndex: null, +}); + +const weatherService = new WeatherService(); + +computed(() => store.hasData && !store.isLoading && !store.hasError) + .subscribe(val => { store.showWeather = val; }); + +bindDom(document.body, store, { immediate: true, handlers: [show, classNameHandler] }); + +repeat('#forecast-list', store, 'forecast', { + key: item => item.day, + element: 'div', + + create(item, el, index) { + el.className = 'forecast-item'; + el.setAttribute('data-testid', 'forecast-item'); + el.setAttribute('tabindex', '0'); + el.setAttribute('role', 'button'); + + el.innerHTML = ` +
+
+
+
+
+ + +
+
+
+
Sunrise
+
Sunset
+
Rain
+
UV Index
+
Precipitation
+
Temperature
+
+ `; + + const details = el.querySelector('.forecast-item__details'); + details.hidden = true; + + const unsubscribe = store.$subscribe('activeForecastIndex', idx => { + const active = idx === index; + details.hidden = !active; + el.classList.toggle('active', active); + }); + + const toggle = () => { + const next = store.activeForecastIndex === index ? null : index; + store.activeForecastIndex = next; + if (next === index) setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100); + }; + + el.addEventListener('click', toggle); + el.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } }); + + return () => unsubscribe(); + }, + + update(item, el) { + el.setAttribute('aria-label', `View detailed forecast for ${item.day}`); + el.querySelector('.forecast-item__day').textContent = item.day; + el.querySelector('.forecast-item__icon').textContent = item.icon; + el.querySelector('.forecast-item__condition').textContent = item.condition; + el.querySelector('[data-testid="forecast-high"]').textContent = item.high; + el.querySelector('[data-testid="forecast-low"]').textContent = item.low; + el.querySelector('[data-detail="sunrise"]').textContent = item.sunrise; + el.querySelector('[data-detail="sunset"]').textContent = item.sunset; + el.querySelector('[data-detail="rain"]').textContent = item.rain; + el.querySelector('[data-detail="uvIndex"]').textContent = item.uvIndex; + el.querySelector('[data-detail="precipitation"]').textContent = item.precipitation; + el.querySelector('[data-detail="tempRange"]').textContent = item.tempRange; + }, +}); + +document.getElementById('search-form').addEventListener('submit', e => { e.preventDefault(); handleSearch(); }); + +function setLoading(loading) { + store.isLoading = loading; + store.buttonText = loading ? 'Loading...' : 'Get Weather'; +} + +function processWeatherData(weatherData) { + const { current, daily, locationName, country } = weatherData; + store.locationDisplay = locationName + (country ? `, ${country}` : ''); + store.temperature = WeatherUtils.formatTemperature(current.temperature_2m); + store.condition = WeatherUtils.getWeatherDescription(current.weather_code); + store.conditionClass = `current-weather__condition ${WeatherUtils.getConditionClass(current.weather_code)}`; + store.icon = WeatherUtils.getWeatherIcon(current.weather_code, current.is_day); + store.feelsLike = WeatherUtils.formatTemperature(current.apparent_temperature); + store.humidity = WeatherUtils.formatPercentage(current.relative_humidity_2m); + store.windSpeed = WeatherUtils.formatWindSpeed(current.wind_speed_10m); + store.pressure = WeatherUtils.formatPressure(current.pressure_msl); + store.cloudCover = WeatherUtils.formatPercentage(current.cloud_cover); + store.windDirection = WeatherUtils.getWindDirection(current.wind_direction_10m); + store.activeForecastIndex = null; + store.forecast = daily.time.map((date, i) => ({ + day: WeatherUtils.formatDate(date), + icon: WeatherUtils.getWeatherIcon(daily.weather_code[i]), + condition: WeatherUtils.getWeatherDescription(daily.weather_code[i]), + high: WeatherUtils.formatTemperature(daily.temperature_2m_max[i]), + low: WeatherUtils.formatTemperature(daily.temperature_2m_min[i]), + sunrise: WeatherUtils.formatTime(daily.sunrise[i]), + sunset: WeatherUtils.formatTime(daily.sunset[i]), + rain: `${daily.rain_sum[i]?.toFixed(1) || 0} mm`, + uvIndex: daily.uv_index_max[i]?.toFixed(1) || 0, + precipitation: WeatherUtils.formatPercentage(daily.precipitation_probability_max[i] || 0), + tempRange: `${WeatherUtils.formatTemperature(daily.temperature_2m_min[i])} to ${WeatherUtils.formatTemperature(daily.temperature_2m_max[i])}`, + })); +} + +let _loadSeq = 0; + +async function loadWeather(city) { + const seq = ++_loadSeq; + try { + setLoading(true); + store.hasError = false; + const weatherData = await weatherService.getWeatherByCity(city); + if (seq !== _loadSeq) return; + try { localStorage.setItem('weather-app-location', city); } catch {} + processWeatherData(weatherData); + store.hasData = true; + store.hasError = false; + } catch (error) { + if (seq !== _loadSeq) return; + store.hasError = true; + store.hasData = false; + store.errorMessage = error.message; + } finally { + if (seq === _loadSeq) setLoading(false); + } +} + +async function handleSearch() { + const city = store.searchQuery.trim(); + if (!city) { store.hasError = true; store.hasData = false; store.errorMessage = 'Please enter a city name'; return; } + await loadWeather(city); +} + +async function init() { + const isHeadless = navigator.userAgent.includes('Playwright') || navigator.userAgent.includes('HeadlessChrome'); + try { + const saved = localStorage.getItem('weather-app-location'); + if (saved) { store.searchQuery = saved; await loadWeather(saved); return; } + } catch {} + + if (!isHeadless) { + try { + await new Promise((resolve, reject) => { + if (!navigator.geolocation) { reject(); return; } + navigator.geolocation.getCurrentPosition(async pos => { + try { + setLoading(true); + const data = await weatherService.getWeatherData(pos.coords.latitude, pos.coords.longitude); + data.locationName = 'Current Location'; + store.searchQuery = 'Current Location'; + processWeatherData(data); + store.hasData = true; + resolve(); + } catch (e) { reject(e); } finally { setLoading(false); } + }, reject, { timeout: 10000, enableHighAccuracy: false, maximumAge: 300000 }); + }); + return; + } catch {} + } + + if (_loadSeq === 0) { store.searchQuery = 'London'; await loadWeather('London'); } +} + +init(); diff --git a/apps/lume-js/js/weather-app.js b/apps/lume-js/js/weather-app.js deleted file mode 100644 index 35ea1392..00000000 --- a/apps/lume-js/js/weather-app.js +++ /dev/null @@ -1,326 +0,0 @@ -import { state, bindDom } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/index.mjs'; -import { repeat, computed } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/addons.mjs'; -import { show } from 'https://cdn.jsdelivr.net/npm/lume-js@2.0.1/dist/handlers.mjs'; - -import { WeatherService } from './weather-service.js'; -import { WeatherUtils } from './weather-utils.js'; - -// Custom handler: sets el.className to the full class string -const classNameHandler = { - attr: 'data-classname', - apply(el, val) { el.className = val || ''; } -}; - -// Custom handler: applies CSS transition value (e.g. 'opacity 0.2s ease') -const transitionHandler = { - attr: 'data-transition', - apply(el, val) { - el.style.transition = val || ''; - } -}; - -const store = state({ - searchQuery: '', - isLoading: false, - hasError: false, - hasData: false, - showWeather: false, - errorMessage: 'Please check the city name and try again.', - buttonText: 'Get Weather', - - // Current weather (flat — each key is data-bind'able) - locationDisplay: '', - temperature: '', - condition: '', - conditionClass: 'current-weather__condition', - icon: '🌤️', - feelsLike: '', - humidity: '', - windSpeed: '', - pressure: '', - cloudCover: '', - windDirection: '', - - // Forecast - forecast: [], - activeForecastIndex: null, -}); - -const weatherService = new WeatherService(); - -// Derived state: showWeather is true only when data is ready and no loading/error -computed(() => store.hasData && !store.isLoading && !store.hasError) - .subscribe(val => { store.showWeather = val; }); - -// Bind reactive data-* attributes to DOM -bindDom(document.body, store, { - immediate: true, - handlers: [show, classNameHandler, transitionHandler], -}); - -// Forecast list rendered via repeat() -repeat('#forecast-list', store, 'forecast', { - key: item => item.day, - element: 'div', - - create(item, el, index) { - el.className = 'forecast-item'; - el.setAttribute('data-testid', 'forecast-item'); - el.setAttribute('tabindex', '0'); - el.setAttribute('role', 'button'); - - el.innerHTML = ` -
-
-
-
-
- - -
-
-
-
-
Sunrise
-
-
-
-
Sunset
-
-
-
-
Rain
-
-
-
-
UV Index
-
-
-
-
Precipitation
-
-
-
-
Temperature
-
-
-
- `; - - const details = el.querySelector('.forecast-item__details'); - details.hidden = true; - - // Keep details visibility and active class in sync with activeForecastIndex. - // Captures `index` from create — stable because forecast order never changes. - const unsubscribeActive = store.$subscribe('activeForecastIndex', activeIdx => { - const isActive = activeIdx === index; - details.hidden = !isActive; - el.classList.toggle('active', isActive); - }); - // Store cleanup so repeat's remove callback can dispose it - el._lumeCleanup = unsubscribeActive; - - const toggle = () => { - const next = store.activeForecastIndex === index ? null : index; - store.activeForecastIndex = next; - if (next === index) { - setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100); - } - }; - - el.addEventListener('click', toggle); - el.addEventListener('keydown', e => { - if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } - }); - }, - - remove(item, el) { - if (el._lumeCleanup) { - el._lumeCleanup(); - el._lumeCleanup = null; - } - }, - - update(item, el) { - el.setAttribute('aria-label', `View detailed forecast for ${item.day}`); - el.querySelector('.forecast-item__day').textContent = item.day; - el.querySelector('.forecast-item__icon').textContent = item.icon; - el.querySelector('.forecast-item__condition').textContent = item.condition; - el.querySelector('[data-testid="forecast-high"]').textContent = item.high; - el.querySelector('[data-testid="forecast-low"]').textContent = item.low; - el.querySelector('[data-detail="sunrise"]').textContent = item.sunrise; - el.querySelector('[data-detail="sunset"]').textContent = item.sunset; - el.querySelector('[data-detail="rain"]').textContent = item.rain; - el.querySelector('[data-detail="uvIndex"]').textContent = item.uvIndex; - el.querySelector('[data-detail="precipitation"]').textContent = item.precipitation; - el.querySelector('[data-detail="tempRange"]').textContent = item.tempRange; - }, -}); - -// Form submission -document.getElementById('search-form').addEventListener('submit', e => { - e.preventDefault(); - handleSearch(); -}); - -// --- State helpers --- - -function setLoading(loading) { - store.isLoading = loading; - store.buttonText = loading ? 'Loading...' : 'Get Weather'; -} - -function showError(message) { - store.hasError = true; - store.hasData = false; - store.errorMessage = message; -} - -function clearError() { - store.hasError = false; - store.errorMessage = 'Please check the city name and try again.'; -} - -function showWeatherContent() { - store.hasData = true; - store.hasError = false; -} - -function saveLocation(city) { - try { localStorage.setItem('weather-app-location', city); } catch {} -} - -function getSavedLocation() { - try { return localStorage.getItem('weather-app-location'); } catch { return null; } -} - -function processWeatherData(weatherData) { - const { current, daily, locationName, country } = weatherData; - - store.locationDisplay = locationName + (country ? `, ${country}` : ''); - store.temperature = WeatherUtils.formatTemperature(current.temperature_2m); - store.condition = WeatherUtils.getWeatherDescription(current.weather_code); - store.conditionClass = `current-weather__condition ${WeatherUtils.getConditionClass(current.weather_code)}`; - store.icon = WeatherUtils.getWeatherIcon(current.weather_code, current.is_day); - store.feelsLike = WeatherUtils.formatTemperature(current.apparent_temperature); - store.humidity = WeatherUtils.formatPercentage(current.relative_humidity_2m); - store.windSpeed = WeatherUtils.formatWindSpeed(current.wind_speed_10m); - store.pressure = WeatherUtils.formatPressure(current.pressure_msl); - store.cloudCover = WeatherUtils.formatPercentage(current.cloud_cover); - store.windDirection = WeatherUtils.getWindDirection(current.wind_direction_10m); - - store.activeForecastIndex = null; - store.forecast = daily.time.map((date, i) => ({ - day: WeatherUtils.formatDate(date), - icon: WeatherUtils.getWeatherIcon(daily.weather_code[i]), - condition: WeatherUtils.getWeatherDescription(daily.weather_code[i]), - high: WeatherUtils.formatTemperature(daily.temperature_2m_max[i]), - low: WeatherUtils.formatTemperature(daily.temperature_2m_min[i]), - sunrise: WeatherUtils.formatTime(daily.sunrise[i]), - sunset: WeatherUtils.formatTime(daily.sunset[i]), - rain: `${daily.rain_sum[i]?.toFixed(1) || 0} mm`, - uvIndex: daily.uv_index_max[i]?.toFixed(1) || 0, - precipitation: WeatherUtils.formatPercentage(daily.precipitation_probability_max[i] || 0), - tempRange: `${WeatherUtils.formatTemperature(daily.temperature_2m_min[i])} to ${WeatherUtils.formatTemperature(daily.temperature_2m_max[i])}`, - })); -} - -// --- Weather loading --- - -let _loadSeq = 0; - -async function loadWeather(city) { - const seq = ++_loadSeq; - try { - setLoading(true); - clearError(); - - const weatherData = await weatherService.getWeatherByCity(city); - if (seq !== _loadSeq) return; // stale — a newer request superseded this one - saveLocation(city); - processWeatherData(weatherData); - showWeatherContent(); - } catch (error) { - if (seq !== _loadSeq) return; - showError(error.message); - } finally { - if (seq === _loadSeq) setLoading(false); - } -} - -async function handleSearch() { - const city = store.searchQuery.trim(); - if (!city) { - showError('Please enter a city name'); - return; - } - await loadWeather(city); -} - -function getCurrentLocationWeather() { - return new Promise((resolve, reject) => { - if (!navigator.geolocation) { - reject(new Error('Geolocation not supported')); - return; - } - - navigator.geolocation.getCurrentPosition( - async position => { - try { - setLoading(true); - clearError(); - - const { latitude, longitude } = position.coords; - const weatherData = await weatherService.getWeatherData(latitude, longitude); - weatherData.locationName = 'Current Location'; - store.searchQuery = 'Current Location'; - - processWeatherData(weatherData); - showWeatherContent(); - resolve(); - } catch (error) { - reject(error); - } finally { - setLoading(false); - } - }, - error => reject(error), - { timeout: 10000, enableHighAccuracy: false, maximumAge: 300000 } - ); - }); -} - -// --- Initialization --- - -const _isHeadless = navigator.userAgent.includes('Playwright') || navigator.userAgent.includes('HeadlessChrome'); - -async function init() { - try { - const savedLocation = getSavedLocation(); - if (savedLocation) { - store.searchQuery = savedLocation; - await loadWeather(savedLocation); - return; - } - } catch (error) { - console.warn('Could not load saved location:', error); - } - - // Skip geolocation in headless/test environments — permission is always denied - // and the async denial can take several seconds, causing timeout flakiness. - if (!_isHeadless) { - try { - await getCurrentLocationWeather(); - return; - } catch (error) { - console.warn('Could not get current location:', error); - } - } - - if (_loadSeq === 0) { - store.searchQuery = 'London'; - await loadWeather('London'); - } -} - -init(); diff --git a/apps/lume-js/js/weather-service.js b/apps/lume-js/js/weather-service.js index 1d8c5a48..04f0bf7d 100644 --- a/apps/lume-js/js/weather-service.js +++ b/apps/lume-js/js/weather-service.js @@ -1,165 +1,77 @@ -export class WeatherService { +// WeatherService — fetches real or mock weather data. +class WeatherService { constructor() { this.baseUrl = 'https://api.open-meteo.com/v1'; this.geocodingUrl = 'https://geocoding-api.open-meteo.com/v1'; - this.useMockData = this.shouldUseMockData(); + this.useMockData = this._shouldUseMock(); } - shouldUseMockData() { - // Check if we're in a testing environment (Playwright sets specific user agents) - const isTestEnvironment = navigator.userAgent.includes('Playwright') || - navigator.userAgent.includes('HeadlessChrome'); - - // Don't use mock data if we're explicitly testing API errors - if (window.location.search.includes('mock=false')) { - return false; - } - - // Use mock data if explicitly requested or if we're in a test environment - return window.location.search.includes('mock=true') || isTestEnvironment; + _shouldUseMock() { + const ua = navigator.userAgent; + const isHeadless = ua.includes('Playwright') || ua.includes('HeadlessChrome'); + if (window.location.search.includes('mock=false')) return false; + return window.location.search.includes('mock=true') || isHeadless; } - async getMockData() { - try { - // Add delay in test environments to make loading state visible - if (this.isTestEnvironment()) { - await new Promise(resolve => setTimeout(resolve, 200)); - } - - const response = await fetch('./public/mocks/weather-data.json'); - if (!response.ok) { - throw new Error('Failed to load mock data'); - } - return await response.json(); - } catch (error) { - console.error('Error loading mock data:', error); - throw error; - } + _isHeadless() { + return navigator.userAgent.includes('Playwright') || navigator.userAgent.includes('HeadlessChrome'); } - isTestEnvironment() { - return navigator.userAgent.includes('Playwright') || - navigator.userAgent.includes('HeadlessChrome'); + async _getMockData() { + if (this._isHeadless()) await new Promise(r => setTimeout(r, 200)); + const res = await fetch('./public/mocks/weather-data.json'); + if (!res.ok) throw new Error('Failed to load mock data'); + return res.json(); } - getMockGeocodingData(cityName) { - // Mock geocoding data for different cities to enable proper testing - const mockCities = { - 'London': { - latitude: 51.5074, - longitude: -0.1278, - name: 'London', - country: 'United Kingdom' - }, - 'Tokyo': { - latitude: 35.6762, - longitude: 139.6503, - name: 'Tokyo', - country: 'Japan' - }, - 'Paris': { - latitude: 48.8566, - longitude: 2.3522, - name: 'Paris', - country: 'France' - }, - 'São Paulo': { - latitude: -23.5505, - longitude: -46.6333, - name: 'São Paulo', - country: 'Brazil' - }, - 'New York': { - latitude: 40.7128, - longitude: -74.0060, - name: 'New York', - country: 'United States' - } + _getMockGeocoding(cityName) { + const cities = { + 'London': { latitude: 51.5074, longitude: -0.1278, name: 'London', country: 'United Kingdom' }, + 'Tokyo': { latitude: 35.6762, longitude: 139.6503, name: 'Tokyo', country: 'Japan' }, + 'Paris': { latitude: 48.8566, longitude: 2.3522, name: 'Paris', country: 'France' }, + 'São Paulo': { latitude: -23.5505, longitude: -46.6333, name: 'São Paulo', country: 'Brazil' }, + 'New York': { latitude: 40.7128, longitude: -74.0060, name: 'New York', country: 'United States' }, }; - - // Handle invalid cities if (cityName.includes('Invalid') || cityName.includes('123') || !cityName.trim()) { throw new Error('Unable to find location. Please check the city name and try again.'); } - - // Return mock data for known cities, or default to London for unknown cities - return mockCities[cityName] || mockCities['London']; + return cities[cityName] || cities['London']; } async geocodeLocation(cityName) { - if (this.useMockData) { - return this.getMockGeocodingData(cityName); - } - + if (this.useMockData) return this._getMockGeocoding(cityName); try { - const response = await fetch( - `${this.geocodingUrl}/search?name=${encodeURIComponent(cityName)}&count=1&language=en&format=json` - ); - - if (!response.ok) { - throw new Error('Geocoding failed'); - } - - const data = await response.json(); - - if (!data.results || data.results.length === 0) { - throw new Error('Location not found'); - } - - const location = data.results[0]; - return { - latitude: location.latitude, - longitude: location.longitude, - name: location.name, - country: location.country - }; - } catch (error) { - console.error('Geocoding error:', error); + const res = await fetch(`${this.geocodingUrl}/search?name=${encodeURIComponent(cityName)}&count=1&language=en&format=json`); + if (!res.ok) throw new Error('Geocoding failed'); + const data = await res.json(); + if (!data.results?.length) throw new Error('Location not found'); + const { latitude, longitude, name, country } = data.results[0]; + return { latitude, longitude, name, country }; + } catch { throw new Error('Unable to find location. Please check the city name and try again.'); } } async getWeatherData(latitude, longitude) { - if (this.useMockData) { - return await this.getMockData(); - } - + if (this.useMockData) return this._getMockData(); try { const params = new URLSearchParams({ - latitude: latitude.toString(), - longitude: longitude.toString(), + latitude: latitude.toString(), longitude: longitude.toString(), daily: 'temperature_2m_max,temperature_2m_min,weather_code,sunrise,sunset,rain_sum,uv_index_max,precipitation_probability_max', current: 'temperature_2m,relative_humidity_2m,apparent_temperature,is_day,snowfall,showers,rain,precipitation,weather_code,cloud_cover,pressure_msl,surface_pressure,wind_direction_10m,wind_gusts_10m,wind_speed_10m', - timezone: 'GMT' + timezone: 'GMT', }); - - const response = await fetch(`${this.baseUrl}/forecast?${params}`); - - if (!response.ok) { - throw new Error(`Weather API error: ${response.status}`); - } - - const data = await response.json(); - return data; - } catch (error) { - console.error('Weather API error:', error); + const res = await fetch(`${this.baseUrl}/forecast?${params}`); + if (!res.ok) throw new Error(`Weather API error: ${res.status}`); + return res.json(); + } catch { throw new Error('Unable to fetch weather data. Please try again later.'); } } async getWeatherByCity(cityName) { - try { - const location = await this.geocodeLocation(cityName); - const weather = await this.getWeatherData(location.latitude, location.longitude); - - return { - ...weather, - locationName: location.name, - country: location.country - }; - } catch (error) { - console.error('Weather service error:', error); - throw error; - } + const location = await this.geocodeLocation(cityName); + const weather = await this.getWeatherData(location.latitude, location.longitude); + return { ...weather, locationName: location.name, country: location.country }; } } diff --git a/apps/lume-js/js/weather-utils.js b/apps/lume-js/js/weather-utils.js index c911eb67..9fb37452 100644 --- a/apps/lume-js/js/weather-utils.js +++ b/apps/lume-js/js/weather-utils.js @@ -1,80 +1,50 @@ -export class WeatherUtils { +// Weather utility functions — pure, stateless helpers. +class WeatherUtils { static getWeatherDescription(weatherCode) { const weatherCodes = { - 0: 'Clear sky', - 1: 'Mainly clear', - 2: 'Partly cloudy', - 3: 'Overcast', - 45: 'Fog', - 48: 'Depositing rime fog', - 51: 'Light drizzle', - 53: 'Moderate drizzle', - 55: 'Dense drizzle', - 56: 'Light freezing drizzle', - 57: 'Dense freezing drizzle', - 61: 'Slight rain', - 63: 'Moderate rain', - 65: 'Heavy rain', - 66: 'Light freezing rain', - 67: 'Heavy freezing rain', - 71: 'Slight snow fall', - 73: 'Moderate snow fall', - 75: 'Heavy snow fall', + 0: 'Clear sky', 1: 'Mainly clear', 2: 'Partly cloudy', 3: 'Overcast', + 45: 'Fog', 48: 'Depositing rime fog', + 51: 'Light drizzle', 53: 'Moderate drizzle', 55: 'Dense drizzle', + 56: 'Light freezing drizzle', 57: 'Dense freezing drizzle', + 61: 'Slight rain', 63: 'Moderate rain', 65: 'Heavy rain', + 66: 'Light freezing rain', 67: 'Heavy freezing rain', + 71: 'Slight snow fall', 73: 'Moderate snow fall', 75: 'Heavy snow fall', 77: 'Snow grains', - 80: 'Slight rain showers', - 81: 'Moderate rain showers', - 82: 'Violent rain showers', - 85: 'Slight snow showers', - 86: 'Heavy snow showers', - 95: 'Thunderstorm', - 96: 'Thunderstorm with slight hail', - 99: 'Thunderstorm with heavy hail' + 80: 'Slight rain showers', 81: 'Moderate rain showers', 82: 'Violent rain showers', + 85: 'Slight snow showers', 86: 'Heavy snow showers', + 95: 'Thunderstorm', 96: 'Thunderstorm with slight hail', 99: 'Thunderstorm with heavy hail', }; - return weatherCodes[weatherCode] || 'Unknown'; } static getWeatherIcon(weatherCode, isDay = true) { - if (weatherCode === 0) { - return isDay ? '☀️' : '🌙'; - } else if (weatherCode <= 3) { - return isDay ? '⛅' : '☁️'; - } else if (weatherCode <= 48) { - return '🌫️'; - } else if (weatherCode <= 57 || (weatherCode >= 80 && weatherCode <= 82)) { - return '🌧️'; - } else if (weatherCode >= 61 && weatherCode <= 67) { - return '🌧️'; - } else if (weatherCode >= 71 && weatherCode <= 77) { - return '❄️'; - } else if (weatherCode >= 85 && weatherCode <= 86) { - return '🌨️'; - } else if (weatherCode >= 95) { - return '⛈️'; - } + if (weatherCode === 0) return isDay ? '☀️' : '🌙'; + if (weatherCode <= 3) return isDay ? '⛅' : '☁️'; + if (weatherCode <= 48) return '🌫️'; + if (weatherCode <= 57 || (weatherCode >= 80 && weatherCode <= 82)) return '🌧️'; + if (weatherCode >= 61 && weatherCode <= 67) return '🌧️'; + if (weatherCode >= 71 && weatherCode <= 77) return '❄️'; + if (weatherCode >= 85 && weatherCode <= 86) return '🌨️'; + if (weatherCode >= 95) return '⛈️'; return '🌤️'; } - static formatTemperature(temp) { - return `${Math.round(temp)}°C`; - } - - static formatWindSpeed(speed) { - return `${Math.round(speed)} km/h`; - } - - static formatPressure(pressure) { - return `${Math.round(pressure)} hPa`; + static getConditionClass(weatherCode) { + if (weatherCode === 0) return 'weather-condition-sunny'; + if (weatherCode <= 3) return 'weather-condition-cloudy'; + if ((weatherCode >= 51 && weatherCode <= 67) || (weatherCode >= 80 && weatherCode <= 82)) return 'weather-condition-rainy'; + if (weatherCode >= 95) return 'weather-condition-stormy'; + return 'weather-condition-cloudy'; } - static formatPercentage(value) { - return `${Math.round(value)}%`; - } + static formatTemperature(temp) { return `${Math.round(temp)}°C`; } + static formatWindSpeed(speed) { return `${Math.round(speed)} km/h`; } + static formatPressure(pressure) { return `${Math.round(pressure)} hPa`; } + static formatPercentage(value) { return `${Math.round(value)}%`; } static getWindDirection(degrees) { - const directions = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW']; - const index = Math.round(degrees / 22.5) % 16; - return directions[index]; + const dirs = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW']; + return dirs[Math.round(degrees / 22.5) % 16]; } static formatDate(dateString) { @@ -82,36 +52,12 @@ export class WeatherUtils { const today = new Date(); const tomorrow = new Date(today); tomorrow.setDate(today.getDate() + 1); - - if (date.toDateString() === today.toDateString()) { - return 'Today'; - } else if (date.toDateString() === tomorrow.toDateString()) { - return 'Tomorrow'; - } else { - return date.toLocaleDateString('en-US', { weekday: 'long' }); - } + if (date.toDateString() === today.toDateString()) return 'Today'; + if (date.toDateString() === tomorrow.toDateString()) return 'Tomorrow'; + return date.toLocaleDateString('en-US', { weekday: 'long' }); } static formatTime(timeString) { - const date = new Date(timeString); - return date.toLocaleTimeString('en-US', { - hour: '2-digit', - minute: '2-digit', - hour12: false - }); + return new Date(timeString).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }); } - - static getConditionClass(weatherCode) { - if (weatherCode === 0) { - return 'weather-condition-sunny'; - } else if (weatherCode <= 3) { - return 'weather-condition-cloudy'; - } else if ((weatherCode >= 51 && weatherCode <= 67) || (weatherCode >= 80 && weatherCode <= 82)) { - return 'weather-condition-rainy'; - } else if (weatherCode >= 95) { - return 'weather-condition-stormy'; - } - return 'weather-condition-cloudy'; - } - } diff --git a/apps/lume-js/package-lock.json b/apps/lume-js/package-lock.json new file mode 100644 index 00000000..dfcd6d82 --- /dev/null +++ b/apps/lume-js/package-lock.json @@ -0,0 +1,1100 @@ +{ + "name": "weather-app-lume-js", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "weather-app-lume-js", + "version": "1.0.0", + "dependencies": { + "lume-js": "^2.0.1" + }, + "devDependencies": { + "eslint": "^9.39.4" + } + }, + "node_modules/@eslint-community/eslint-utils": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz", + "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "eslint-visitor-keys": "^3.4.3" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" + } + }, + "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint-community/regexpp": { + "version": "4.12.2", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz", + "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + } + }, + "node_modules/@eslint/config-array": { + "version": "0.21.2", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz", + "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/object-schema": "^2.1.7", + "debug": "^4.3.1", + "minimatch": "^3.1.5" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/config-helpers": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz", + "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^0.17.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/core": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz", + "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@types/json-schema": "^7.0.15" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/eslintrc": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz", + "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==", + "dev": true, + "license": "MIT", + "dependencies": { + "ajv": "^6.14.0", + "debug": "^4.3.2", + "espree": "^10.0.1", + "globals": "^14.0.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.1", + "minimatch": "^3.1.5", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint/js": { + "version": "9.39.4", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz", + "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://eslint.org/donate" + } + }, + "node_modules/@eslint/object-schema": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz", + "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/plugin-kit": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz", + "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^0.17.0", + "levn": "^0.4.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@humanfs/core": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz", + "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@humanfs/types": "^0.15.0" + }, + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/@humanfs/node": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz", + "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@humanfs/core": "^0.19.2", + "@humanfs/types": "^0.15.0", + "@humanwhocodes/retry": "^0.4.0" + }, + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/@humanfs/types": { + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz", + "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=12.22" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/retry": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz", + "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@types/estree": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/json-schema": { + "version": "7.0.15", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", + "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", + "dev": true, + "license": "MIT" + }, + "node_modules/acorn": { + "version": "8.16.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", + "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", + "dev": true, + "license": "MIT", + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-jsx": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/ajv": { + "version": "6.15.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz", + "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true, + "license": "Python-2.0" + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true, + "license": "MIT" + }, + "node_modules/brace-expansion": { + "version": "1.1.14", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz", + "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "license": "MIT" + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true, + "license": "MIT" + }, + "node_modules/cross-spawn": { + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", + "dev": true, + "license": "MIT", + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint": { + "version": "9.39.4", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz", + "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/eslint-utils": "^4.8.0", + "@eslint-community/regexpp": "^4.12.1", + "@eslint/config-array": "^0.21.2", + "@eslint/config-helpers": "^0.4.2", + "@eslint/core": "^0.17.0", + "@eslint/eslintrc": "^3.3.5", + "@eslint/js": "9.39.4", + "@eslint/plugin-kit": "^0.4.1", + "@humanfs/node": "^0.16.6", + "@humanwhocodes/module-importer": "^1.0.1", + "@humanwhocodes/retry": "^0.4.2", + "@types/estree": "^1.0.6", + "ajv": "^6.14.0", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.6", + "debug": "^4.3.2", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^8.4.0", + "eslint-visitor-keys": "^4.2.1", + "espree": "^10.4.0", + "esquery": "^1.5.0", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^8.0.0", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "ignore": "^5.2.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.5", + "natural-compare": "^1.4.0", + "optionator": "^0.9.3" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://eslint.org/donate" + }, + "peerDependencies": { + "jiti": "*" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + } + } + }, + "node_modules/eslint-scope": { + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz", + "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-visitor-keys": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz", + "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/espree": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz", + "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "acorn": "^8.15.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^4.2.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/esquery": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz", + "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "estraverse": "^5.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "estraverse": "^5.2.0" + }, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true, + "license": "MIT" + }, + "node_modules/fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", + "dev": true, + "license": "MIT" + }, + "node_modules/file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "flat-cache": "^4.0.0" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, + "license": "MIT", + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", + "dev": true, + "license": "MIT", + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.4" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/flatted": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz", + "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==", + "dev": true, + "license": "ISC" + }, + "node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/globals": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz", + "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/ignore": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, + "node_modules/import-fresh": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", + "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/imurmurhash": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", + "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.8.19" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true, + "license": "ISC" + }, + "node_modules/js-yaml": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", + "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/json-buffer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", + "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true, + "license": "MIT" + }, + "node_modules/json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true, + "license": "MIT" + }, + "node_modules/keyv": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", + "dev": true, + "license": "MIT", + "dependencies": { + "json-buffer": "3.0.1" + } + }, + "node_modules/levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/lume-js": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/lume-js/-/lume-js-2.0.1.tgz", + "integrity": "sha512-N3bI2KU7PO/z9KUOsi7ASM6F3Mo16FaOqScVPQCIXg9B9Ee3p6y3XSrkRQowAQeSQmGQT2Bv0cEpLOTb//EIZA==", + "license": "MIT", + "engines": { + "node": ">=20.19.0" + } + }, + "node_modules/minimatch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz", + "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", + "dev": true, + "license": "MIT" + }, + "node_modules/optionator": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", + "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==", + "dev": true, + "license": "MIT", + "dependencies": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.5" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "license": "MIT", + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/punycode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", + "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "license": "MIT", + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "punycode": "^2.1.0" + } + }, + "node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/word-wrap": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + } + } +} diff --git a/apps/lume-js/package.json b/apps/lume-js/package.json index e18c78b6..1b797a1c 100644 --- a/apps/lume-js/package.json +++ b/apps/lume-js/package.json @@ -5,10 +5,14 @@ "scripts": { "dev": "python3 -m http.server 3000", "start": "python3 -m http.server 3000", - "preview": "python3 -m http.server 3000" + "preview": "python3 -m http.server 3000", + "lint": "eslint js/" }, "dependencies": { "lume-js": "^2.0.1" }, - "devDependencies": {} + "type": "module", + "devDependencies": { + "eslint": "^9.39.4" + } } diff --git a/assets/styles/design-system.css b/assets/styles/design-system.css index d264b8bb..4e6cbb99 100644 --- a/assets/styles/design-system.css +++ b/assets/styles/design-system.css @@ -198,3 +198,42 @@ --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; } + +@media (prefers-color-scheme: dark) { + :root { + /* Background */ + --color-bg-primary: var(--neutral-900); + --color-bg-secondary: var(--neutral-800); + --color-bg-elevated: var(--neutral-800); + --color-bg-surface: var(--neutral-800); + + /* Text */ + --color-text-primary: var(--neutral-50); + --color-text-secondary: var(--neutral-300); + --color-text-muted: var(--neutral-500); + --color-text-link: var(--primary-300); + + /* Interactive */ + --color-interactive-primary: var(--primary-400); + --color-interactive-primary-hover: var(--primary-300); + --color-interactive-primary-active: var(--primary-200); + --color-interactive-secondary: var(--neutral-700); + --color-interactive-secondary-hover: var(--neutral-600); + + /* Border */ + --color-border-primary: var(--neutral-700); + --color-border-secondary: var(--neutral-800); + --color-border-interactive: var(--primary-600); + --color-border-focus: var(--primary-400); + + /* Soft UI (dark equivalents) */ + --color-bg-soft: #1a1f2e; + --color-surface-soft: var(--neutral-800); + --color-shadow: rgba(0, 0, 0, 0.4); + --color-shadow-dark: #0d1117; + + /* Gradients */ + --gradient-card: linear-gradient(145deg, var(--neutral-800), #1a1f2e); + --gradient-subtle: linear-gradient(145deg, var(--neutral-800), var(--neutral-900)); + } +} diff --git a/frameworks.json b/frameworks.json index 95a2a82a..7b72e1b3 100644 --- a/frameworks.json +++ b/frameworks.json @@ -396,8 +396,8 @@ "npmPackage": "lume-js", "color": "#7C3AED", "accentColor": "#7C3AED", - "logo": "", - "description": "Minimal reactive state library (~2.4KB gzipped) with no build step", + "logo": "https://raw.githubusercontent.com/sathvikc/lume-js/refs/heads/main/lume-logo.png", + "description": "Minimal reactive state library (~2.4KB gzipped core, ~5.5KB global build) with no build step", "longDescription": "Standards-only reactive library with state, DOM binding, and keyed list rendering.", "video": "" }, diff --git a/results/summary.json b/results/summary.json index a9b36b08..4b58c819 100644 --- a/results/summary.json +++ b/results/summary.json @@ -620,47 +620,46 @@ "success": true }, "bundle_size": { - "compression_ratio": 3.21, - "file_count": 4, - "js_percentage": 96.23, - "total_gzipped": 6303, - "total_size": 20245 + "total_size": 18867, + "total_gzipped": 5378, + "file_count": 2, + "js_percentage": 95.9506015794774, + "compression_ratio": 3.51 }, "dev_server": { - "hmr_avg_time_ms": 0, - "startup_time_ms": 0 + "startup_time_ms": 0, + "hmr_avg_time_ms": 0 }, "lighthouse": { - "raw_metrics": { - "cls": 0, - "fcp": 2165.54, - "lcp": 2280.09, - "speed_index": 2560.46, - "tbt": 58 - }, "scores": { + "performance": 98.0, "accessibility": 100, "best_practices": 100, - "performance": 96, - "seo": 90 + "seo": 90.0 + }, + "raw_metrics": { + "fcp": 1517.726, + "lcp": 2184.059, + "cls": 0, + "tbt": 10, + "speed_index": 2127.9409372403397 } }, "resource_usage": { - "average_cpu": 0, + "memory": 0, "cpu": 0, + "peak_cpu": 0, + "average_cpu": 0, "heap_delta": 0, - "mem_efficiency": 0, - "memory": 0, "memory_delta": 0, - "peak_cpu": 0 + "mem_efficiency": 0 }, "source_analysis": { - "cyclomatic_complexity": 80, - "files_count": 3, - "halstead_volume": 22061.73, - "logical_lines": 355, - "maintainability_index": 76.36, - "physical_lines": 530 + "files_count": 1, + "physical_lines": 491, + "logical_lines": 346, + "cyclomatic_complexity": 71, + "maintainability_index": 4.58 } } }, From 9b453b55cca969849c42677ae9a01ac563a2da4f Mon Sep 17 00:00:00 2001 From: Sathvik C Date: Sat, 9 May 2026 14:00:18 -0500 Subject: [PATCH 5/9] docs: add Lume.js to framework list, stats table, and CI status table --- .github/README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/README.md b/.github/README.md index 7209c9ee..c71687d5 100644 --- a/.github/README.md +++ b/.github/README.md @@ -54,6 +54,7 @@ So, without further ado, let's see how every framework weathers the storm! ⛈ +
Click a framework to view info, test/lint/build/etc statuses, and to preview the demo app

@@ -194,6 +195,7 @@ and also view a stats on a per-framework basis. | 🏔️ [**Alpine.js**](https://github.com/alpinejs/alpine) | 31.6k | 2.1M | 8.8 MB | 316 | 6.5y | 1 week ago | MIT | | 🔥 [**Lit**](https://github.com/lit/lit) | 21.6k | 23.3M | 60.8 MB | 210 | 8.9y | 4 days ago | BSD-3-Clause | | 🚐 [**VanJS**](https://github.com/vanjs-org/van) | 4.4k | 7.1k | 3.8 MB | 24 | 3.0y | 3 months ago | MIT | +| 💡 [**Lume.js**](https://github.com/sathvikc/lume-js) | 39 | 524 | 0.4 MB | 1 | 0.6y | today | MIT | --- @@ -251,6 +253,7 @@ Each app gets built and tested to ensure that it is functional, compliant with t | Lit | ![Lit Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-lit.svg) | ![Lit Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-lit.svg) | ![Lit Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-lit.svg) | | VanJS | ![VanJS Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-vanjs.svg) | ![VanJS Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-vanjs.svg) | ![VanJS Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-vanjs.svg) | | Vanilla JavaScript | ![Vanilla JavaScript Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-vanilla.svg) | ![Vanilla JavaScript Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-vanilla.svg) | ![Vanilla JavaScript Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-vanilla.svg) | +| Lume.js | ![Lume.js Build Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/build-lume-js.svg) | ![Lume.js Test Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/test-lume-js.svg) | ![Lume.js Lint Status](https://raw.githubusercontent.com/lissy93/framework-benchmarks/badges/lint-lume-js.svg) | --- From 35ea43f32ac0a5b36b60244489768df063f82c6e Mon Sep 17 00:00:00 2001 From: Sathvik C Date: Sat, 9 May 2026 14:49:07 -0500 Subject: [PATCH 6/9] refactor(lume-js): use built-in stringAttr and effect instead of custom handler and computed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace custom classNameHandler with stringAttr('class') — built-in handler that sets el.className via data-class attribute, no custom code needed - Replace computed().subscribe() pattern with effect() for derived showWeather state — simpler, auto-tracked, idiomatic for writing back to store - Update data-classname attr to data-class in index.html to match stringAttr pattern - Update README to document corrected patterns --- apps/lume-js/README.md | 5 +++-- apps/lume-js/index.html | 2 +- apps/lume-js/js/app.js | 12 +++--------- 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/apps/lume-js/README.md b/apps/lume-js/README.md index 8b4e8832..fd1a4aa0 100644 --- a/apps/lume-js/README.md +++ b/apps/lume-js/README.md @@ -20,10 +20,11 @@ npm run lint Lume.js is closest to Alpine in philosophy — HTML-first, no build step, minimal overhead. The implementation uses: - **`state()`** — flat reactive store holding all UI state -- **`bindDom()`** — binds `data-bind`, `data-show`, `data-disabled`, and a custom `data-classname` handler to DOM elements +- **`bindDom()`** — binds `data-bind`, `data-show`, `data-disabled`, and `data-class` (via `stringAttr('class')`) to DOM elements - **`repeat()`** — keyed list rendering for the 7-day forecast (from `lume-js/addons`) -- **`computed()`** — derives `showWeather` from `hasData`, `isLoading`, `hasError` +- **`effect()`** — derives `showWeather` from `hasData`, `isLoading`, `hasError` via auto-tracked reactive effect - **`show`** handler — built-in handler for `data-show` visibility toggling +- **`stringAttr('class')`** handler — sets full `className` from state via `data-class` attribute This benchmark app uses the **CDN Global (IIFE)** build — a single ` + diff --git a/apps/lume-js/package.json b/apps/lume-js/package.json index 1b797a1c..38610790 100644 --- a/apps/lume-js/package.json +++ b/apps/lume-js/package.json @@ -9,7 +9,7 @@ "lint": "eslint js/" }, "dependencies": { - "lume-js": "^2.0.1" + "lume-js": "^2.2.1" }, "type": "module", "devDependencies": { From 3423e4756a691021f358de76a12fc725c7520174 Mon Sep 17 00:00:00 2001 From: Sathvik C Date: Mon, 18 May 2026 09:56:42 -0500 Subject: [PATCH 9/9] style: enforce consistent code style with braces and trailing commas - Add braces to all single-statement if blocks for consistency - Remove trailing commas from object/array literals - Add explanatory comments to empty catch blocks - Improve error message clarity in geolocation rejection --- apps/lume-js/eslint.config.js | 10 +++++----- apps/lume-js/js/app.js | 22 +++++++++++----------- apps/lume-js/js/weather-service.js | 20 ++++++++++---------- apps/lume-js/js/weather-utils.js | 30 +++++++++++++++--------------- 4 files changed, 41 insertions(+), 41 deletions(-) diff --git a/apps/lume-js/eslint.config.js b/apps/lume-js/eslint.config.js index 4a1b0e53..b0e0f019 100644 --- a/apps/lume-js/eslint.config.js +++ b/apps/lume-js/eslint.config.js @@ -9,15 +9,15 @@ export default [ globals: { ...globals.browser, WeatherUtils: 'readonly', - WeatherService: 'readonly', - }, + WeatherService: 'readonly' + } }, rules: { 'no-unused-vars': ['warn', { varsIgnorePattern: '^[A-Z]' }], 'no-undef': 'error', 'eqeqeq': 'error', 'no-var': 'error', - 'prefer-const': 'warn', - }, - }, + 'prefer-const': 'warn' + } + } ]; diff --git a/apps/lume-js/js/app.js b/apps/lume-js/js/app.js index c2ca8297..1ef198b6 100644 --- a/apps/lume-js/js/app.js +++ b/apps/lume-js/js/app.js @@ -21,7 +21,7 @@ const store = state({ cloudCover: '', windDirection: '', forecast: [], - activeForecastIndex: null, + activeForecastIndex: null }); const weatherService = new WeatherService(); @@ -72,7 +72,7 @@ repeat('#forecast-list', store, 'forecast', { const toggle = () => { const next = store.activeForecastIndex === index ? null : index; store.activeForecastIndex = next; - if (next === index) setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100); + if (next === index) {setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100);} }; el.addEventListener('click', toggle); @@ -94,7 +94,7 @@ repeat('#forecast-list', store, 'forecast', { el.querySelector('[data-detail="uvIndex"]').textContent = item.uvIndex; el.querySelector('[data-detail="precipitation"]').textContent = item.precipitation; el.querySelector('[data-detail="tempRange"]').textContent = item.tempRange; - }, + } }); document.getElementById('search-form').addEventListener('submit', e => { e.preventDefault(); handleSearch(); }); @@ -129,7 +129,7 @@ function processWeatherData(weatherData) { rain: `${daily.rain_sum[i]?.toFixed(1) || 0} mm`, uvIndex: daily.uv_index_max[i]?.toFixed(1) || 0, precipitation: WeatherUtils.formatPercentage(daily.precipitation_probability_max[i] || 0), - tempRange: `${WeatherUtils.formatTemperature(daily.temperature_2m_min[i])} to ${WeatherUtils.formatTemperature(daily.temperature_2m_max[i])}`, + tempRange: `${WeatherUtils.formatTemperature(daily.temperature_2m_min[i])} to ${WeatherUtils.formatTemperature(daily.temperature_2m_max[i])}` })); } @@ -141,18 +141,18 @@ async function loadWeather(city) { setLoading(true); store.hasError = false; const weatherData = await weatherService.getWeatherByCity(city); - if (seq !== _loadSeq) return; - try { localStorage.setItem('weather-app-location', city); } catch {} + if (seq !== _loadSeq) {return;} + try { localStorage.setItem('weather-app-location', city); } catch { /* storage unavailable */ } processWeatherData(weatherData); store.hasData = true; store.hasError = false; } catch (error) { - if (seq !== _loadSeq) return; + if (seq !== _loadSeq) {return;} store.hasError = true; store.hasData = false; store.errorMessage = error.message; } finally { - if (seq === _loadSeq) setLoading(false); + if (seq === _loadSeq) {setLoading(false);} } } @@ -167,12 +167,12 @@ async function init() { try { const saved = localStorage.getItem('weather-app-location'); if (saved) { store.searchQuery = saved; await loadWeather(saved); return; } - } catch {} + } catch { /* ignore read errors */ } if (!isHeadless) { try { await new Promise((resolve, reject) => { - if (!navigator.geolocation) { reject(); return; } + if (!navigator.geolocation) { reject(new Error('Geolocation not available')); return; } navigator.geolocation.getCurrentPosition(async pos => { try { setLoading(true); @@ -186,7 +186,7 @@ async function init() { }, reject, { timeout: 10000, enableHighAccuracy: false, maximumAge: 300000 }); }); return; - } catch {} + } catch { /* ignore geolocation errors */ } } if (_loadSeq === 0) { store.searchQuery = 'London'; await loadWeather('London'); } diff --git a/apps/lume-js/js/weather-service.js b/apps/lume-js/js/weather-service.js index 04f0bf7d..c7a7214e 100644 --- a/apps/lume-js/js/weather-service.js +++ b/apps/lume-js/js/weather-service.js @@ -9,7 +9,7 @@ class WeatherService { _shouldUseMock() { const ua = navigator.userAgent; const isHeadless = ua.includes('Playwright') || ua.includes('HeadlessChrome'); - if (window.location.search.includes('mock=false')) return false; + if (window.location.search.includes('mock=false')) {return false;} return window.location.search.includes('mock=true') || isHeadless; } @@ -18,9 +18,9 @@ class WeatherService { } async _getMockData() { - if (this._isHeadless()) await new Promise(r => setTimeout(r, 200)); + if (this._isHeadless()) {await new Promise(r => setTimeout(r, 200));} const res = await fetch('./public/mocks/weather-data.json'); - if (!res.ok) throw new Error('Failed to load mock data'); + if (!res.ok) {throw new Error('Failed to load mock data');} return res.json(); } @@ -30,7 +30,7 @@ class WeatherService { 'Tokyo': { latitude: 35.6762, longitude: 139.6503, name: 'Tokyo', country: 'Japan' }, 'Paris': { latitude: 48.8566, longitude: 2.3522, name: 'Paris', country: 'France' }, 'São Paulo': { latitude: -23.5505, longitude: -46.6333, name: 'São Paulo', country: 'Brazil' }, - 'New York': { latitude: 40.7128, longitude: -74.0060, name: 'New York', country: 'United States' }, + 'New York': { latitude: 40.7128, longitude: -74.0060, name: 'New York', country: 'United States' } }; if (cityName.includes('Invalid') || cityName.includes('123') || !cityName.trim()) { throw new Error('Unable to find location. Please check the city name and try again.'); @@ -39,12 +39,12 @@ class WeatherService { } async geocodeLocation(cityName) { - if (this.useMockData) return this._getMockGeocoding(cityName); + if (this.useMockData) {return this._getMockGeocoding(cityName);} try { const res = await fetch(`${this.geocodingUrl}/search?name=${encodeURIComponent(cityName)}&count=1&language=en&format=json`); - if (!res.ok) throw new Error('Geocoding failed'); + if (!res.ok) {throw new Error('Geocoding failed');} const data = await res.json(); - if (!data.results?.length) throw new Error('Location not found'); + if (!data.results?.length) {throw new Error('Location not found');} const { latitude, longitude, name, country } = data.results[0]; return { latitude, longitude, name, country }; } catch { @@ -53,16 +53,16 @@ class WeatherService { } async getWeatherData(latitude, longitude) { - if (this.useMockData) return this._getMockData(); + if (this.useMockData) {return this._getMockData();} try { const params = new URLSearchParams({ latitude: latitude.toString(), longitude: longitude.toString(), daily: 'temperature_2m_max,temperature_2m_min,weather_code,sunrise,sunset,rain_sum,uv_index_max,precipitation_probability_max', current: 'temperature_2m,relative_humidity_2m,apparent_temperature,is_day,snowfall,showers,rain,precipitation,weather_code,cloud_cover,pressure_msl,surface_pressure,wind_direction_10m,wind_gusts_10m,wind_speed_10m', - timezone: 'GMT', + timezone: 'GMT' }); const res = await fetch(`${this.baseUrl}/forecast?${params}`); - if (!res.ok) throw new Error(`Weather API error: ${res.status}`); + if (!res.ok) {throw new Error(`Weather API error: ${res.status}`);} return res.json(); } catch { throw new Error('Unable to fetch weather data. Please try again later.'); diff --git a/apps/lume-js/js/weather-utils.js b/apps/lume-js/js/weather-utils.js index 9fb37452..15357e1a 100644 --- a/apps/lume-js/js/weather-utils.js +++ b/apps/lume-js/js/weather-utils.js @@ -12,28 +12,28 @@ class WeatherUtils { 77: 'Snow grains', 80: 'Slight rain showers', 81: 'Moderate rain showers', 82: 'Violent rain showers', 85: 'Slight snow showers', 86: 'Heavy snow showers', - 95: 'Thunderstorm', 96: 'Thunderstorm with slight hail', 99: 'Thunderstorm with heavy hail', + 95: 'Thunderstorm', 96: 'Thunderstorm with slight hail', 99: 'Thunderstorm with heavy hail' }; return weatherCodes[weatherCode] || 'Unknown'; } static getWeatherIcon(weatherCode, isDay = true) { - if (weatherCode === 0) return isDay ? '☀️' : '🌙'; - if (weatherCode <= 3) return isDay ? '⛅' : '☁️'; - if (weatherCode <= 48) return '🌫️'; - if (weatherCode <= 57 || (weatherCode >= 80 && weatherCode <= 82)) return '🌧️'; - if (weatherCode >= 61 && weatherCode <= 67) return '🌧️'; - if (weatherCode >= 71 && weatherCode <= 77) return '❄️'; - if (weatherCode >= 85 && weatherCode <= 86) return '🌨️'; - if (weatherCode >= 95) return '⛈️'; + if (weatherCode === 0) {return isDay ? '☀️' : '🌙';} + if (weatherCode <= 3) {return isDay ? '⛅' : '☁️';} + if (weatherCode <= 48) {return '🌫️';} + if (weatherCode <= 57 || (weatherCode >= 80 && weatherCode <= 82)) {return '🌧️';} + if (weatherCode >= 61 && weatherCode <= 67) {return '🌧️';} + if (weatherCode >= 71 && weatherCode <= 77) {return '❄️';} + if (weatherCode >= 85 && weatherCode <= 86) {return '🌨️';} + if (weatherCode >= 95) {return '⛈️';} return '🌤️'; } static getConditionClass(weatherCode) { - if (weatherCode === 0) return 'weather-condition-sunny'; - if (weatherCode <= 3) return 'weather-condition-cloudy'; - if ((weatherCode >= 51 && weatherCode <= 67) || (weatherCode >= 80 && weatherCode <= 82)) return 'weather-condition-rainy'; - if (weatherCode >= 95) return 'weather-condition-stormy'; + if (weatherCode === 0) {return 'weather-condition-sunny';} + if (weatherCode <= 3) {return 'weather-condition-cloudy';} + if ((weatherCode >= 51 && weatherCode <= 67) || (weatherCode >= 80 && weatherCode <= 82)) {return 'weather-condition-rainy';} + if (weatherCode >= 95) {return 'weather-condition-stormy';} return 'weather-condition-cloudy'; } @@ -52,8 +52,8 @@ class WeatherUtils { const today = new Date(); const tomorrow = new Date(today); tomorrow.setDate(today.getDate() + 1); - if (date.toDateString() === today.toDateString()) return 'Today'; - if (date.toDateString() === tomorrow.toDateString()) return 'Tomorrow'; + if (date.toDateString() === today.toDateString()) {return 'Today';} + if (date.toDateString() === tomorrow.toDateString()) {return 'Tomorrow';} return date.toLocaleDateString('en-US', { weekday: 'long' }); }