test: add browser test files for all bundle formats

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.
2025-12-16 22:47:56 +01:00
parent fa9ae3b9ff
commit 1aea8b0d7d
3 changed files with 436 additions and 0 deletions
--- a/test/esm-test.html
+++ b/test/esm-test.html
@@ -0,0 +1,135 @@
+<!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>