mirror of
https://github.com/cloud-shuttle/leptos-shadcn-ui.git
synced 2025-12-22 22:00:00 +00:00
2b99fcc315
🚀 New Features: - Add leptos-shadcn-ui-wasm package with minimal dependencies - 10 core components optimized for WebAssembly - Feature flags for granular bundle control - WASM-specific utilities and helpers 🔧 Technical Improvements: - Fix WASM compatibility issues in test-utils package - Add conditional compilation for native vs WASM targets - Update contract-testing package for WASM compatibility - Add comprehensive WASM demo application 📦 Bundle Optimization: - 70% reduction in dependencies (150+ → 25) - WASM-compatible only dependencies - Gzipped bundle size: ~813KB for full demo 📚 Documentation: - Complete README with examples and migration guide - Bundle size comparisons and performance metrics - Comprehensive remediation plan and design docs ✅ Testing: - All packages compile for wasm32-unknown-unknown - Feature flags work correctly - Demo builds and runs successfully - Backward compatibility maintained
95 lines
3.2 KiB
HTML
95 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Leptos ShadCN UI WASM Demo</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom styles for the demo */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.loading {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid #3498db;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root">
|
|
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center">
|
|
<div class="text-center space-y-4">
|
|
<div class="loading mx-auto"></div>
|
|
<h2 class="text-xl font-semibold text-slate-700">Loading WASM Demo...</h2>
|
|
<p class="text-sm text-slate-500">Initializing Leptos ShadCN UI components</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import init from './pkg/wasm_demo.js';
|
|
|
|
async function run() {
|
|
try {
|
|
console.log('🚀 Initializing WASM demo...');
|
|
await init();
|
|
console.log('✅ WASM demo initialized successfully!');
|
|
} catch (error) {
|
|
console.error('❌ Failed to initialize WASM demo:', error);
|
|
document.getElementById('root').innerHTML = `
|
|
<div class="min-h-screen bg-red-50 flex items-center justify-center">
|
|
<div class="text-center space-y-4">
|
|
<div class="text-6xl">❌</div>
|
|
<h2 class="text-xl font-semibold text-red-700">Failed to Load</h2>
|
|
<p class="text-sm text-red-600">Error: ${error.message}</p>
|
|
<button onclick="location.reload()" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
run();
|
|
</script>
|
|
</body>
|
|
</html>
|