generated from coulomb/repo-seed
tegwick
1aea8b0d7d
Phase 6 Complete: - ✅ Created test/umd-test.html (UMD bundle verification) - ✅ Created test/minified-test.html (production build test) - ✅ Created test/esm-test.html (ES Module format test) Each test file demonstrates: - Bundle loading and initialization - marked.js peer dependency integration - Control panels and event system - Complete feature showcase - Usage examples and code snippets Tests verify all build outputs work correctly in browsers. Open any test/*.html file in a browser to verify functionality.
136 lines
3.7 KiB
HTML
136 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TestDrive-JSUI - ESM Bundle Test</title>
|
|
<link rel="stylesheet" href="../dist/testdrive-jsui.css">
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 40px auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
#editor {
|
|
background: white;
|
|
min-height: 400px;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
h1 { color: #333; }
|
|
.status {
|
|
background: #d1fae5;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.info {
|
|
background: #dbeafe;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
border-left: 4px solid #3b82f6;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>📦 TestDrive-JSUI ESM Bundle Test</h1>
|
|
|
|
<div class="info">
|
|
<strong>📍 Testing:</strong> ES Module build from <code>dist/testdrive-jsui.esm.js</code><br>
|
|
<strong>📦 Format:</strong> ES6 Modules (import/export syntax)<br>
|
|
<strong>🎯 Use Case:</strong> Modern bundlers (Webpack, Rollup, Vite)
|
|
</div>
|
|
|
|
<div class="status">
|
|
<strong>Status:</strong> <span id="status">Loading...</span>
|
|
</div>
|
|
|
|
<div id="editor"></div>
|
|
|
|
<!-- Load marked.js as regular script for this test -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
|
|
|
|
<!-- ES Module import -->
|
|
<script type="module">
|
|
import TestDriveJSUI from '../dist/testdrive-jsui.esm.js';
|
|
|
|
document.getElementById('status').textContent = 'Initializing...';
|
|
|
|
try {
|
|
const editor = new TestDriveJSUI({
|
|
container: '#editor',
|
|
markdown: `# ES Module Build Test 📦
|
|
|
|
## What is ESM?
|
|
|
|
**ES Modules** (ECMAScript Modules) use modern JavaScript \`import\` and \`export\` syntax.
|
|
|
|
### Features:
|
|
- ✅ Native browser support (no bundler required)
|
|
- ✅ Tree-shaking friendly
|
|
- ✅ Async loading by default
|
|
- ✅ Better for modern build tools
|
|
|
|
### This Build:
|
|
- **File:** \`dist/testdrive-jsui.esm.js\`
|
|
- **Size:** 199KB
|
|
- **Format:** Pure ES6 modules
|
|
- **Target:** Modern browsers & bundlers
|
|
|
|
## Usage in Modern Apps
|
|
|
|
### With Vite
|
|
\`\`\`javascript
|
|
import TestDriveJSUI from 'testdrive-jsui';
|
|
import 'testdrive-jsui/dist/testdrive-jsui.css';
|
|
|
|
const editor = new TestDriveJSUI({
|
|
container: '#app',
|
|
markdown: '# My App'
|
|
});
|
|
\`\`\`
|
|
|
|
### With Webpack 5
|
|
\`\`\`javascript
|
|
import TestDriveJSUI from 'testdrive-jsui';
|
|
// CSS handled by css-loader
|
|
import 'testdrive-jsui/dist/testdrive-jsui.css';
|
|
\`\`\`
|
|
|
|
### With Rollup
|
|
\`\`\`javascript
|
|
import TestDriveJSUI from 'testdrive-jsui';
|
|
// Rollup will tree-shake unused code
|
|
\`\`\`
|
|
|
|
## Benefits
|
|
|
|
1. **Tree Shaking**: Bundlers can remove unused code
|
|
2. **Code Splitting**: Modern bundlers can split this module
|
|
3. **Native Browser Support**: Works directly in modern browsers
|
|
4. **Better DX**: Cleaner import syntax
|
|
|
|
---
|
|
|
|
**Perfect for modern JavaScript applications! 🎯**`,
|
|
mode: 'edit',
|
|
theme: 'github'
|
|
});
|
|
|
|
editor.on('initialized', () => {
|
|
document.getElementById('status').textContent = '✅ ESM build initialized!';
|
|
console.log('✅ ES Module working perfectly');
|
|
});
|
|
|
|
} catch (error) {
|
|
document.getElementById('status').textContent = '❌ Error: ' + error.message;
|
|
console.error('Error:', error);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|