Fix TextInput.html to use correct RitzLoader API

Changed from RitzRuntime.loadComponent() (doesn't exist) to
new RitzLoader().load() (correct API).

Also updated DOM element IDs:
- #root → #app (RitzLoader default)
- Added #status div for load status messages
- Added styling for status indicator

Should now load properly in browser.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Aaron SinclairandClaude committed 2025-11-15 12:15:04 -08:00
1 parent 443cca5662
commit 60bbad9c68
1 file changed
+24 -5
+24 -5
View File
@@ -105,19 +105,38 @@
line-height: 1.6; line-height: 1.6;
} }
#root { #app {
width: 100%; width: 100%;
} }
#status {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.95);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 14px;
font-weight: 600;
color: #667eea;
}
</style> </style>
</head> </head>
<body> <body>
<div id="root">Loading...</div> <div id="app">Loading...</div>
<div id="status"></div>
<script src="../runtime/ritz-runtime.js"></script> <script src="../runtime/ritz-runtime.js"></script>
<script> <script>
RitzRuntime.loadComponent('TextInput.wasm', 'TextInput', 'root') // Wait for DOM to be ready
.then(() => console.log('✅ TextInput loaded')) if (document.readyState === 'loading') {
.catch(err => console.error('❌ Failed to load:', err)); document.addEventListener('DOMContentLoaded', () => {
new RitzLoader().load('TextInput.wasm', 'TextInput');
});
} else {
new RitzLoader().load('TextInput.wasm', 'TextInput');
}
</script> </script>
</body> </body>
</html> </html>