@system-capabilities/lit
v1.1.1
Published
Lit components for system-capabilities detection and validation
Maintainers
manufoselaReadme
@system-capabilities/lit
Componentes Lit (Web Components) para detección y validación de capacidades del sistema.
Instalación
Via npm
npm install @system-capabilities/litVia CDN (para sitios estáticos/SSG)
<!-- UMD Bundle (incluye todas las dependencias) -->
<script src="https://unpkg.com/@system-capabilities/[email protected]/dist/system-capabilities-lit.umd.min.js"></script>
<!-- O desde jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@system-capabilities/[email protected]/dist/system-capabilities-lit.umd.min.js"></script>
<!-- Usar los componentes -->
<script>
// Los componentes están automáticamente registrados
const status = document.createElement('system-status');
status.setAttribute('size', 'large');
status.setAttribute('autoCheck', '');
document.body.appendChild(status);
</script>Componentes
SystemStatus
Círculo de estado que muestra el nivel de compatibilidad del sistema mediante colores:
- 🟢 Verde: Sistema compatible
- 🟡 Amarillo: Advertencias
- 🔴 Rojo: Problemas críticos
<script type="module">
import '@system-capabilities/lit';
</script>
<system-status
.requirements=${{
features: { webGL: true, localStorage: true },
device: { minMemory: 4, minCores: 2 }
}}
size="medium"
autoCheck
showTooltip
></system-status>Propiedades
requirements(Object): Requisitos del sistema a validarsize('small' | 'medium' | 'large'): Tamaño del círculoautoCheck(boolean): Verificar automáticamente al cargarshowTooltip(boolean): Mostrar tooltip con información
Eventos
status-change: Se dispara cuando cambia el estadoclick: Se dispara al hacer click en el círculo
const status = document.querySelector('system-status');
status.addEventListener('status-change', (e) => {
console.log('Estado:', e.detail.status);
console.log('Fallos:', e.detail.failures);
});
status.addEventListener('click', (e) => {
console.log('Capacidades:', e.detail.capabilities);
});SystemChecker
Componente completo con modal para verificar requisitos y mostrar detalles.
<system-checker
.requirements=${{
features: { webGL: true },
device: { minMemory: 4 }
}}
autoCheck
showOnFail
></system-checker>Propiedades
requirements(Object): Requisitos del sistema a validarautoCheck(boolean): Verificar automáticamente al cargarshowOnFail(boolean): Mostrar modal si hay fallosopen(boolean): Si el modal debe estar abierto
Eventos
check-complete: Se dispara cuando completa la verificaciónmodal-open: Se dispara cuando se abre el modalmodal-close: Se dispara cuando se cierra el modal
const checker = document.querySelector('system-checker');
checker.addEventListener('check-complete', (e) => {
console.log('Pasó:', e.detail.passed);
console.log('Fallos:', e.detail.failures);
});Métodos
// Verificar el sistema manualmente
checker.checkSystem();
// Abrir el modal manualmente
checker.openModal();
// Cerrar el modal
checker.closeModal();Formato de requisitos
const requirements = {
features: {
webGL: true,
localStorage: true,
serviceWorker: true
},
device: {
minMemory: 4, // GB
minCores: 2, // Núcleos CPU
mobile: false // true/false
},
screen: {
minWidth: 1024, // pixels
minHeight: 768
},
network: {
minDownlink: 1.5, // Mbps
maxRTT: 300 // ms
}
};Uso en frameworks
Vanilla JS
<!DOCTYPE html>
<html>
<head>
<script type="module">
import '@system-capabilities/lit';
const requirements = {
features: { webGL: true }
};
const status = document.querySelector('system-status');
status.requirements = requirements;
</script>
</head>
<body>
<system-status size="large" autoCheck></system-status>
</body>
</html>React
import '@system-capabilities/lit';
function App() {
const requirements = {
features: { webGL: true }
};
return (
<system-checker
requirements={requirements}
autoCheck={true}
showOnFail={true}
/>
);
}Vue
<template>
<system-status
:requirements="requirements"
size="medium"
autoCheck
/>
</template>
<script setup>
import '@system-capabilities/lit';
import { ref } from 'vue';
const requirements = ref({
features: { webGL: true }
});
</script>Astro
---
// Este import puede estar en el servidor
---
<script>
// Este código se ejecuta en el cliente
import '@system-capabilities/lit';
</script>
<system-checker
autoCheck
showOnFail
client:load
/>Estilos personalizados
Los componentes usan Shadow DOM, pero exponen CSS custom properties:
system-status {
--status-success-color: #43a047;
--status-warning-color: #fb8c00;
--status-error-color: #e53935;
}Licencia
MIT