@willwade/aac-processors 0.0.29 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -852
- package/dist/browser/core/baseProcessor.js +241 -0
- package/dist/browser/core/stringCasing.js +179 -0
- package/dist/browser/core/treeStructure.js +255 -0
- package/dist/browser/index.browser.js +73 -0
- package/dist/browser/processors/applePanelsProcessor.js +582 -0
- package/dist/browser/processors/astericsGridProcessor.js +1509 -0
- package/dist/browser/processors/dotProcessor.js +221 -0
- package/dist/browser/processors/gridset/commands.js +962 -0
- package/dist/browser/processors/gridset/crypto.js +53 -0
- package/dist/browser/processors/gridset/password.js +43 -0
- package/dist/browser/processors/gridset/pluginTypes.js +277 -0
- package/dist/browser/processors/gridset/resolver.js +137 -0
- package/dist/browser/processors/gridset/symbolAlignment.js +276 -0
- package/dist/browser/processors/gridset/symbols.js +421 -0
- package/dist/browser/processors/gridsetProcessor.js +2002 -0
- package/dist/browser/processors/obfProcessor.js +705 -0
- package/dist/browser/processors/opmlProcessor.js +274 -0
- package/dist/browser/types/aac.js +38 -0
- package/dist/browser/utilities/analytics/utils/idGenerator.js +89 -0
- package/dist/browser/utilities/translation/translationProcessor.js +200 -0
- package/dist/browser/utils/io.js +95 -0
- package/dist/browser/validation/baseValidator.js +156 -0
- package/dist/browser/validation/gridsetValidator.js +355 -0
- package/dist/browser/validation/obfValidator.js +500 -0
- package/dist/browser/validation/validationTypes.js +46 -0
- package/dist/cli/index.js +5 -5
- package/dist/core/analyze.d.ts +2 -2
- package/dist/core/analyze.js +2 -2
- package/dist/core/baseProcessor.d.ts +5 -4
- package/dist/core/baseProcessor.js +22 -27
- package/dist/core/treeStructure.d.ts +5 -5
- package/dist/core/treeStructure.js +1 -4
- package/dist/index.browser.d.ts +37 -0
- package/dist/index.browser.js +99 -0
- package/dist/index.d.ts +1 -48
- package/dist/index.js +1 -136
- package/dist/index.node.d.ts +48 -0
- package/dist/index.node.js +152 -0
- package/dist/processors/applePanelsProcessor.d.ts +5 -4
- package/dist/processors/applePanelsProcessor.js +58 -62
- package/dist/processors/astericsGridProcessor.d.ts +7 -6
- package/dist/processors/astericsGridProcessor.js +31 -42
- package/dist/processors/dotProcessor.d.ts +5 -4
- package/dist/processors/dotProcessor.js +25 -33
- package/dist/processors/excelProcessor.d.ts +4 -3
- package/dist/processors/excelProcessor.js +6 -3
- package/dist/processors/gridset/crypto.d.ts +18 -0
- package/dist/processors/gridset/crypto.js +57 -0
- package/dist/processors/gridset/helpers.d.ts +1 -1
- package/dist/processors/gridset/helpers.js +18 -8
- package/dist/processors/gridset/password.d.ts +20 -3
- package/dist/processors/gridset/password.js +17 -3
- package/dist/processors/gridset/wordlistHelpers.d.ts +3 -3
- package/dist/processors/gridset/wordlistHelpers.js +21 -20
- package/dist/processors/gridsetProcessor.d.ts +7 -12
- package/dist/processors/gridsetProcessor.js +118 -77
- package/dist/processors/obfProcessor.d.ts +9 -7
- package/dist/processors/obfProcessor.js +131 -56
- package/dist/processors/obfsetProcessor.d.ts +5 -4
- package/dist/processors/obfsetProcessor.js +10 -16
- package/dist/processors/opmlProcessor.d.ts +5 -4
- package/dist/processors/opmlProcessor.js +27 -34
- package/dist/processors/snapProcessor.d.ts +8 -7
- package/dist/processors/snapProcessor.js +15 -12
- package/dist/processors/touchchatProcessor.d.ts +8 -7
- package/dist/processors/touchchatProcessor.js +22 -17
- package/dist/types/aac.d.ts +0 -2
- package/dist/types/aac.js +2 -0
- package/dist/utils/io.d.ts +12 -0
- package/dist/utils/io.js +107 -0
- package/dist/validation/gridsetValidator.js +7 -7
- package/dist/validation/snapValidator.js +28 -35
- package/docs/BROWSER_USAGE.md +618 -0
- package/examples/README.md +77 -0
- package/examples/browser-test-server.js +81 -0
- package/examples/browser-test.html +331 -0
- package/examples/vitedemo/QUICKSTART.md +74 -0
- package/examples/vitedemo/README.md +157 -0
- package/examples/vitedemo/index.html +376 -0
- package/examples/vitedemo/package-lock.json +1221 -0
- package/examples/vitedemo/package.json +18 -0
- package/examples/vitedemo/src/main.ts +519 -0
- package/examples/vitedemo/test-files/example.dot +14 -0
- package/examples/vitedemo/test-files/example.grd +1 -0
- package/examples/vitedemo/test-files/example.gridset +0 -0
- package/examples/vitedemo/test-files/example.obz +0 -0
- package/examples/vitedemo/test-files/example.opml +18 -0
- package/examples/vitedemo/test-files/simple.obf +53 -0
- package/examples/vitedemo/tsconfig.json +24 -0
- package/examples/vitedemo/vite.config.ts +34 -0
- package/package.json +20 -4
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Simple HTTP server for testing AACProcessors in a browser
|
|
5
|
+
*
|
|
6
|
+
* Usage:
|
|
7
|
+
* node examples/browser-test-server.js
|
|
8
|
+
*
|
|
9
|
+
* Then open: http://localhost:8080/examples/browser-test.html
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
const http = require('http');
|
|
13
|
+
const fs = require('fs');
|
|
14
|
+
const path = require('path');
|
|
15
|
+
|
|
16
|
+
const PORT = 8080;
|
|
17
|
+
const MIME_TYPES = {
|
|
18
|
+
'.html': 'text/html',
|
|
19
|
+
'.js': 'text/javascript',
|
|
20
|
+
'.css': 'text/css',
|
|
21
|
+
'.json': 'application/json',
|
|
22
|
+
'.png': 'image/png',
|
|
23
|
+
'.jpg': 'image/jpg',
|
|
24
|
+
'.gif': 'image/gif',
|
|
25
|
+
'.svg': 'image/svg+xml',
|
|
26
|
+
'.ico': 'image/x-icon',
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const server = http.createServer((req, res) => {
|
|
30
|
+
// Enable CORS
|
|
31
|
+
res.setHeader('Access-Control-Allow-Origin', '*');
|
|
32
|
+
res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
|
33
|
+
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
|
|
34
|
+
|
|
35
|
+
if (req.method === 'OPTIONS') {
|
|
36
|
+
res.writeHead(200);
|
|
37
|
+
res.end();
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Parse URL
|
|
42
|
+
let filePath = '.' + req.url;
|
|
43
|
+
if (filePath === './') {
|
|
44
|
+
filePath = './examples/browser-test.html';
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Get file extension
|
|
48
|
+
const extname = String(path.extname(filePath)).toLowerCase();
|
|
49
|
+
const contentType = MIME_TYPES[extname] || 'application/octet-stream';
|
|
50
|
+
|
|
51
|
+
// Read and serve file
|
|
52
|
+
fs.readFile(filePath, (error, content) => {
|
|
53
|
+
if (error) {
|
|
54
|
+
if (error.code === 'ENOENT') {
|
|
55
|
+
res.writeHead(404, { 'Content-Type': 'text/html' });
|
|
56
|
+
res.end('<h1>404 Not Found</h1>', 'utf-8');
|
|
57
|
+
} else {
|
|
58
|
+
res.writeHead(500);
|
|
59
|
+
res.end(`Server Error: ${error.code}`, 'utf-8');
|
|
60
|
+
}
|
|
61
|
+
} else {
|
|
62
|
+
res.writeHead(200, { 'Content-Type': contentType });
|
|
63
|
+
res.end(content, 'utf-8');
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
server.listen(PORT, () => {
|
|
69
|
+
console.log(`
|
|
70
|
+
╔════════════════════════════════════════════════════════════╗
|
|
71
|
+
║ AACProcessors Browser Test Server ║
|
|
72
|
+
╠════════════════════════════════════════════════════════════╣
|
|
73
|
+
║ ║
|
|
74
|
+
║ Server running at: ║
|
|
75
|
+
║ 🌐 http://localhost:${PORT}/examples/browser-test.html ║
|
|
76
|
+
║ ║
|
|
77
|
+
║ Press Ctrl+C to stop ║
|
|
78
|
+
║ ║
|
|
79
|
+
╚════════════════════════════════════════════════════════════╝
|
|
80
|
+
`);
|
|
81
|
+
});
|
|
@@ -0,0 +1,331 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>AAC Processors - Browser Compatibility Test</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
10
|
+
max-width: 1200px;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: 20px;
|
|
13
|
+
background: #f5f5f5;
|
|
14
|
+
}
|
|
15
|
+
h1 {
|
|
16
|
+
color: #333;
|
|
17
|
+
border-bottom: 2px solid #007bff;
|
|
18
|
+
padding-bottom: 10px;
|
|
19
|
+
}
|
|
20
|
+
.test-section {
|
|
21
|
+
background: white;
|
|
22
|
+
border-radius: 8px;
|
|
23
|
+
padding: 20px;
|
|
24
|
+
margin: 20px 0;
|
|
25
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
26
|
+
}
|
|
27
|
+
.file-input {
|
|
28
|
+
margin: 10px 0;
|
|
29
|
+
}
|
|
30
|
+
.file-input label {
|
|
31
|
+
display: block;
|
|
32
|
+
font-weight: 600;
|
|
33
|
+
margin-bottom: 5px;
|
|
34
|
+
color: #555;
|
|
35
|
+
}
|
|
36
|
+
.file-input input {
|
|
37
|
+
display: block;
|
|
38
|
+
width: 100%;
|
|
39
|
+
padding: 8px;
|
|
40
|
+
border: 2px solid #ddd;
|
|
41
|
+
border-radius: 4px;
|
|
42
|
+
}
|
|
43
|
+
.test-button {
|
|
44
|
+
background: #007bff;
|
|
45
|
+
color: white;
|
|
46
|
+
border: none;
|
|
47
|
+
padding: 10px 20px;
|
|
48
|
+
border-radius: 4px;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
font-size: 14px;
|
|
51
|
+
margin-top: 10px;
|
|
52
|
+
}
|
|
53
|
+
.test-button:hover {
|
|
54
|
+
background: #0056b3;
|
|
55
|
+
}
|
|
56
|
+
.test-button:disabled {
|
|
57
|
+
background: #ccc;
|
|
58
|
+
cursor: not-allowed;
|
|
59
|
+
}
|
|
60
|
+
.result {
|
|
61
|
+
margin-top: 15px;
|
|
62
|
+
padding: 15px;
|
|
63
|
+
border-radius: 4px;
|
|
64
|
+
font-family: 'Monaco', 'Menlo', monospace;
|
|
65
|
+
font-size: 13px;
|
|
66
|
+
white-space: pre-wrap;
|
|
67
|
+
word-wrap: break-word;
|
|
68
|
+
}
|
|
69
|
+
.result.success {
|
|
70
|
+
background: #d4edda;
|
|
71
|
+
border: 1px solid #c3e6cb;
|
|
72
|
+
color: #155724;
|
|
73
|
+
}
|
|
74
|
+
.result.error {
|
|
75
|
+
background: #f8d7da;
|
|
76
|
+
border: 1px solid #f5c6cb;
|
|
77
|
+
color: #721c24;
|
|
78
|
+
}
|
|
79
|
+
.result.info {
|
|
80
|
+
background: #d1ecf1;
|
|
81
|
+
border: 1px solid #bee5eb;
|
|
82
|
+
color: #0c5460;
|
|
83
|
+
}
|
|
84
|
+
.info-box {
|
|
85
|
+
background: #fff3cd;
|
|
86
|
+
border: 1px solid #ffc107;
|
|
87
|
+
border-radius: 4px;
|
|
88
|
+
padding: 15px;
|
|
89
|
+
margin: 20px 0;
|
|
90
|
+
}
|
|
91
|
+
.info-box strong {
|
|
92
|
+
display: block;
|
|
93
|
+
margin-bottom: 5px;
|
|
94
|
+
}
|
|
95
|
+
.processor-list {
|
|
96
|
+
display: grid;
|
|
97
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
98
|
+
gap: 10px;
|
|
99
|
+
margin: 15px 0;
|
|
100
|
+
}
|
|
101
|
+
.processor-item {
|
|
102
|
+
background: #e7f3ff;
|
|
103
|
+
padding: 10px;
|
|
104
|
+
border-radius: 4px;
|
|
105
|
+
border-left: 3px solid #007bff;
|
|
106
|
+
}
|
|
107
|
+
.processor-item.supported {
|
|
108
|
+
border-left-color: #28a745;
|
|
109
|
+
background: #d4edda;
|
|
110
|
+
}
|
|
111
|
+
</style>
|
|
112
|
+
</head>
|
|
113
|
+
<body>
|
|
114
|
+
<h1>🧪 AAC Processors - Browser Compatibility Test</h1>
|
|
115
|
+
|
|
116
|
+
<div class="info-box">
|
|
117
|
+
<strong>ℹ️ About this test page</strong>
|
|
118
|
+
This page tests AACProcessors in a real browser environment. It verifies that processors
|
|
119
|
+
can load files using browser APIs (File, Blob, ArrayBuffer) without any Node.js dependencies.
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="test-section">
|
|
123
|
+
<h2>Supported Processors</h2>
|
|
124
|
+
<div class="processor-list">
|
|
125
|
+
<div class="processor-item supported">✅ DotProcessor (.dot)</div>
|
|
126
|
+
<div class="processor-item supported">✅ OpmlProcessor (.opml)</div>
|
|
127
|
+
<div class="processor-item supported">✅ ObfProcessor (.obf/.obz)</div>
|
|
128
|
+
<div class="processor-item supported">✅ GridsetProcessor (.gridset)</div>
|
|
129
|
+
<div class="processor-item supported">✅ ApplePanelsProcessor (.plist)</div>
|
|
130
|
+
<div class="processor-item supported">✅ AstericsGridProcessor (.grd)</div>
|
|
131
|
+
</div>
|
|
132
|
+
<p style="color: #666; font-size: 14px;">
|
|
133
|
+
<strong>Note:</strong> SnapProcessor and TouchChatProcessor require Node.js (sqlite).
|
|
134
|
+
GridsetProcessor .gridsetx files require Node.js (crypto).
|
|
135
|
+
</p>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div class="test-section">
|
|
139
|
+
<h2>📁 Load and Test Files</h2>
|
|
140
|
+
|
|
141
|
+
<div class="file-input">
|
|
142
|
+
<label for="fileInput">Select a file to test:</label>
|
|
143
|
+
<input type="file" id="fileInput" accept=".dot,.opml,.obf,.obz,.gridset,.plist,.grd">
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<button id="testButton" class="test-button" disabled>Test File</button>
|
|
147
|
+
<button id="clearButton" class="test-button">Clear Results</button>
|
|
148
|
+
|
|
149
|
+
<div id="result" class="result" style="display: none;"></div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="test-section">
|
|
153
|
+
<h2>🧪 Automated Tests</h2>
|
|
154
|
+
<button id="runAllTests" class="test-button">Run All Browser Tests</button>
|
|
155
|
+
<div id="testResults" class="result" style="display: none;"></div>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<!-- Note: Using a module loader to handle CommonJS exports -->
|
|
159
|
+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
160
|
+
<script data-type="module" type="text/babel" data-presets="env">
|
|
161
|
+
// Since the build outputs CommonJS, we need to dynamically import the processors
|
|
162
|
+
// For now, we'll use a simpler approach with inline test code
|
|
163
|
+
|
|
164
|
+
class AACProcessorsTest {
|
|
165
|
+
constructor() {
|
|
166
|
+
this.processors = {};
|
|
167
|
+
this.init();
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
async init() {
|
|
171
|
+
// Initialize processors after DOM is ready
|
|
172
|
+
const fileInput = document.getElementById('fileInput');
|
|
173
|
+
const testButton = document.getElementById('testButton');
|
|
174
|
+
const clearButton = document.getElementById('clearButton');
|
|
175
|
+
const runAllTestsButton = document.getElementById('runAllTests');
|
|
176
|
+
|
|
177
|
+
fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
|
|
178
|
+
testButton.addEventListener('click', () => this.testFile());
|
|
179
|
+
clearButton.addEventListener('click', () => this.clearResults());
|
|
180
|
+
runAllTestsButton.addEventListener('click', () => this.runAutomatedTests());
|
|
181
|
+
|
|
182
|
+
console.log('AAC Processors Browser Test Page Ready');
|
|
183
|
+
console.log('Note: This page tests the library structure but cannot run actual processors without a bundler.');
|
|
184
|
+
console.log('For actual browser usage, see docs/BROWSER_USAGE.md for bundler setup.');
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
showMessage(message, type = 'info') {
|
|
188
|
+
const resultDiv = document.getElementById('result');
|
|
189
|
+
resultDiv.style.display = 'block';
|
|
190
|
+
resultDiv.className = `result ${type}`;
|
|
191
|
+
resultDiv.textContent = message;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
showTestResults(results) {
|
|
195
|
+
const testResultsDiv = document.getElementById('testResults');
|
|
196
|
+
testResultsDiv.style.display = 'block';
|
|
197
|
+
testResultsDiv.className = 'result info';
|
|
198
|
+
testResultsDiv.textContent = results;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
handleFileSelect(event) {
|
|
202
|
+
const file = event.target.files[0];
|
|
203
|
+
const testButton = document.getElementById('testButton');
|
|
204
|
+
|
|
205
|
+
if (file) {
|
|
206
|
+
testButton.disabled = false;
|
|
207
|
+
this.showMessage(`Selected: ${file.name} (${file.size} bytes)\n\nNote: Actual processing requires a bundler (webpack/vite/rollup) to bundle the library for browser use.`, 'info');
|
|
208
|
+
} else {
|
|
209
|
+
testButton.disabled = true;
|
|
210
|
+
document.getElementById('result').style.display = 'none';
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
async testFile() {
|
|
215
|
+
this.showMessage(
|
|
216
|
+
'⚠️ Browser Build Note\n\n' +
|
|
217
|
+
'The current build outputs CommonJS modules which require a bundler.\n\n' +
|
|
218
|
+
'To use AACProcessors in a browser:\n\n' +
|
|
219
|
+
'1. Use a bundler (webpack, vite, rollup, etc.)\n' +
|
|
220
|
+
'2. Or use a CDN bundle (when available)\n' +
|
|
221
|
+
'3. See docs/BROWSER_USAGE.md for complete setup instructions\n\n' +
|
|
222
|
+
'Example with Vite:\n' +
|
|
223
|
+
'```js\n' +
|
|
224
|
+
'import { getProcessor } from "aac-processors";\n' +
|
|
225
|
+
'const processor = getProcessor(".obf");\n' +
|
|
226
|
+
'```',
|
|
227
|
+
'info'
|
|
228
|
+
);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
clearResults() {
|
|
232
|
+
document.getElementById('result').style.display = 'none';
|
|
233
|
+
document.getElementById('testResults').style.display = 'none';
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
async runAutomatedTests() {
|
|
237
|
+
const results = [];
|
|
238
|
+
results.push('=== AACProcessors Browser Test ===\n');
|
|
239
|
+
results.push('\nℹ️ Library Structure Tests:\n');
|
|
240
|
+
|
|
241
|
+
// Test 1: Check if dist files exist
|
|
242
|
+
results.push('1. Checking build files...');
|
|
243
|
+
try {
|
|
244
|
+
const response = await fetch('../dist/index.browser.js');
|
|
245
|
+
if (response.ok) {
|
|
246
|
+
const content = await response.text();
|
|
247
|
+
const hasExports = content.includes('exports.getProcessor') &&
|
|
248
|
+
content.includes('exports.GridsetProcessor') &&
|
|
249
|
+
content.includes('exports.ObfProcessor');
|
|
250
|
+
|
|
251
|
+
if (hasExports) {
|
|
252
|
+
results.push(' ✅ PASS: Browser build exists with expected exports');
|
|
253
|
+
results.push(` ✅ Size: ${(content.length / 1024).toFixed(2)} KB`);
|
|
254
|
+
} else {
|
|
255
|
+
results.push(' ⚠️ WARNING: Some exports may be missing');
|
|
256
|
+
}
|
|
257
|
+
} else {
|
|
258
|
+
results.push(' ❌ FAIL: Browser build not found');
|
|
259
|
+
}
|
|
260
|
+
} catch (error) {
|
|
261
|
+
results.push(` ❌ FAIL: ${error.message}`);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// Test 2: Check type definitions
|
|
265
|
+
results.push('\n2. Checking TypeScript definitions...');
|
|
266
|
+
try {
|
|
267
|
+
const response = await fetch('../dist/index.browser.d.ts');
|
|
268
|
+
if (response.ok) {
|
|
269
|
+
const content = await response.text();
|
|
270
|
+
const hasTypes = content.includes('getProcessor') &&
|
|
271
|
+
content.includes('DotProcessor') &&
|
|
272
|
+
content.includes('GridsetProcessor');
|
|
273
|
+
|
|
274
|
+
if (hasTypes) {
|
|
275
|
+
results.push(' ✅ PASS: Type definitions exist');
|
|
276
|
+
} else {
|
|
277
|
+
results.push(' ⚠️ WARNING: Some type definitions may be missing');
|
|
278
|
+
}
|
|
279
|
+
} else {
|
|
280
|
+
results.push(' ❌ FAIL: Type definitions not found');
|
|
281
|
+
}
|
|
282
|
+
} catch (error) {
|
|
283
|
+
results.push(` ❌ FAIL: ${error.message}`);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
// Test 3: Processor count
|
|
287
|
+
results.push('\n3. Counting processors...');
|
|
288
|
+
try {
|
|
289
|
+
const response = await fetch('../dist/index.browser.js');
|
|
290
|
+
const content = await response.text();
|
|
291
|
+
const processorExports = content.match(/exports\.\w+Processor/g);
|
|
292
|
+
|
|
293
|
+
if (processorExports) {
|
|
294
|
+
const uniqueProcessors = [...new Set(processorExports)];
|
|
295
|
+
results.push(` ✅ Found ${uniqueProcessors.length} processor exports:`);
|
|
296
|
+
uniqueProcessors.forEach(p => results.push(` - ${p.replace('exports.', '')}`));
|
|
297
|
+
}
|
|
298
|
+
} catch (error) {
|
|
299
|
+
results.push(` ❌ FAIL: ${error.message}`);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
results.push('\n=== Setup Instructions ===\n');
|
|
303
|
+
results.push('To use AACProcessors in your browser project:\n\n');
|
|
304
|
+
results.push('1. Install with npm: npm install @willwade/aac-processors\n');
|
|
305
|
+
results.push('2. Use a bundler (Vite example):\n');
|
|
306
|
+
results.push(' ```js\n');
|
|
307
|
+
results.push(' // vite.config.js\n');
|
|
308
|
+
results.push(' export default {\n');
|
|
309
|
+
results.push(' resolve: {\n');
|
|
310
|
+
results.push(' alias: {\n');
|
|
311
|
+
results.push(' "aac-processors": path.resolve(__dirname, "node_modules/@willwade/aac-processors/src/index.browser.ts")\n');
|
|
312
|
+
results.push(' }\n');
|
|
313
|
+
results.push(' }\n');
|
|
314
|
+
results.push(' }\n');
|
|
315
|
+
results.push(' ```\n\n');
|
|
316
|
+
results.push('3. Or use a CDN bundle (when available)\n\n');
|
|
317
|
+
results.push('See docs/BROWSER_USAGE.md for complete guide.');
|
|
318
|
+
|
|
319
|
+
this.showTestResults(results.join('\n'));
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
// Initialize when DOM is ready
|
|
324
|
+
if (document.readyState === 'loading') {
|
|
325
|
+
document.addEventListener('DOMContentLoaded', () => new AACProcessorsTest());
|
|
326
|
+
} else {
|
|
327
|
+
new AACProcessorsTest();
|
|
328
|
+
}
|
|
329
|
+
</script>
|
|
330
|
+
</body>
|
|
331
|
+
</html>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# 🎯 AAC Processors Browser Demo - Quick Start
|
|
2
|
+
|
|
3
|
+
## 🚀 Running the Demo
|
|
4
|
+
|
|
5
|
+
The demo is already running! Open your browser to:
|
|
6
|
+
|
|
7
|
+
**http://localhost:3000**
|
|
8
|
+
|
|
9
|
+
## 📁 Test Files Included
|
|
10
|
+
|
|
11
|
+
The `test-files/` folder contains example AAC files you can use:
|
|
12
|
+
|
|
13
|
+
- `example.dot` (392 bytes) - DOT format board
|
|
14
|
+
- `example.opml` (495 bytes) - OPML outline
|
|
15
|
+
- `simple.obf` (2.1 KB) - Open Board Format
|
|
16
|
+
- `example.obz` (13 MB) - Compressed OBF
|
|
17
|
+
- `example.gridset` (1.4 MB) - Grid 3 gridset
|
|
18
|
+
- `example.grd` (21 KB) - Asterics Grid
|
|
19
|
+
|
|
20
|
+
## 🧪 How to Test
|
|
21
|
+
|
|
22
|
+
### Option 1: Drag & Drop
|
|
23
|
+
1. Open http://localhost:3000
|
|
24
|
+
2. Drag any file from `test-files/` onto the upload area
|
|
25
|
+
3. Click "Process File"
|
|
26
|
+
4. Explore pages and buttons!
|
|
27
|
+
|
|
28
|
+
### Option 2: File Picker
|
|
29
|
+
1. Click the upload area
|
|
30
|
+
2. Select a file from `test-files/`
|
|
31
|
+
3. Click "Process File"
|
|
32
|
+
|
|
33
|
+
### Option 3: Run Tests
|
|
34
|
+
1. Click "Run Compatibility Tests"
|
|
35
|
+
2. See all 9 tests pass!
|
|
36
|
+
|
|
37
|
+
## ✨ Features to Try
|
|
38
|
+
|
|
39
|
+
- **Text-to-Speech**: Click any SPEAK button to hear the message
|
|
40
|
+
- **Navigation**: Click NAVIGATE buttons to jump between pages
|
|
41
|
+
- **Stats**: See page/button/text counts and load time
|
|
42
|
+
- **Logs**: Watch the processing log in real-time
|
|
43
|
+
|
|
44
|
+
## 🛠️ Development
|
|
45
|
+
|
|
46
|
+
### Restart Server
|
|
47
|
+
```bash
|
|
48
|
+
cd examples/vitedemo
|
|
49
|
+
npm run dev
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Build for Production
|
|
53
|
+
```bash
|
|
54
|
+
npm run build
|
|
55
|
+
npm run preview
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## 📊 What's Being Tested
|
|
59
|
+
|
|
60
|
+
This demo proves AACProcessors works in browsers with:
|
|
61
|
+
- ✅ Vite bundling
|
|
62
|
+
- ✅ All 6 browser-compatible processors
|
|
63
|
+
- ✅ File upload (drag & drop + picker)
|
|
64
|
+
- ✅ ArrayBuffer handling
|
|
65
|
+
- ✅ Tree structure parsing
|
|
66
|
+
- ✅ Text extraction
|
|
67
|
+
- ✅ Button interaction
|
|
68
|
+
- ✅ Browser Speech API integration
|
|
69
|
+
|
|
70
|
+
## 🎉 Success!
|
|
71
|
+
|
|
72
|
+
If you can see the demo and process files, congratulations! You now have a working browser-based AAC processor. This can be used as a template for your own browser applications.
|
|
73
|
+
|
|
74
|
+
See `docs/BROWSER_USAGE.md` for integration guides.
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
# AAC Processors Browser Demo
|
|
2
|
+
|
|
3
|
+
A real browser demo that uses Vite to bundle AACProcessors for browser use.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- ✅ **Real file processing** - Upload and process actual AAC files
|
|
8
|
+
- ✅ **All browser-compatible processors** - Tests Dot, OPML, OBF/OBZ, Gridset, ApplePanels, AstericsGrid
|
|
9
|
+
- ✅ **Interactive UI** - Drag & drop files, view pages and buttons
|
|
10
|
+
- ✅ **Text-to-speech** - Click SPEAK buttons to hear messages (browser speech API)
|
|
11
|
+
- ✅ **Navigation** - Click NAVIGATE buttons to jump between pages
|
|
12
|
+
- ✅ **Compatibility tests** - Automated tests for all processors
|
|
13
|
+
- ✅ **Performance metrics** - Load time, page/button/text counts
|
|
14
|
+
- ✅ **TypeScript** - Full type safety and IntelliSense
|
|
15
|
+
|
|
16
|
+
## Quick Start
|
|
17
|
+
|
|
18
|
+
### 1. Install Dependencies
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
cd examples/vitedemo
|
|
22
|
+
npm install
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### 2. Run Dev Server
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm run dev
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
The demo will open automatically at: http://localhost:3000
|
|
32
|
+
|
|
33
|
+
### 3. Build for Production
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm run build
|
|
37
|
+
npm run preview
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## How to Use
|
|
41
|
+
|
|
42
|
+
1. **Upload a file**
|
|
43
|
+
- Drag & drop an AAC file onto the upload area
|
|
44
|
+
- Or click to open file picker
|
|
45
|
+
- Supported formats: .dot, .opml, .obf, .obz, .gridset, .plist, .grd
|
|
46
|
+
|
|
47
|
+
2. **Process the file**
|
|
48
|
+
- Click "Process File" button
|
|
49
|
+
- View pages and buttons in the right panel
|
|
50
|
+
- Check stats: pages, buttons, texts, load time
|
|
51
|
+
|
|
52
|
+
3. **Interact with buttons**
|
|
53
|
+
- Click SPEAK buttons to hear text (uses browser speech API)
|
|
54
|
+
- Click NAVIGATE buttons to jump to target pages
|
|
55
|
+
|
|
56
|
+
4. **Run compatibility tests**
|
|
57
|
+
- Click "Run Compatibility Tests"
|
|
58
|
+
- See test results in the left panel
|
|
59
|
+
- Tests all 6 browser-compatible processors
|
|
60
|
+
|
|
61
|
+
## Supported File Types
|
|
62
|
+
|
|
63
|
+
| Format | Extensions | Processor |
|
|
64
|
+
|----------|-----------------|-------------------------|
|
|
65
|
+
| DOT | .dot | DotProcessor |
|
|
66
|
+
| OPML | .opml | OpmlProcessor |
|
|
67
|
+
| OBF/OBZ | .obf, .obz | ObfProcessor |
|
|
68
|
+
| Gridset | .gridset | GridsetProcessor |
|
|
69
|
+
| Apple | .plist | ApplePanelsProcessor |
|
|
70
|
+
| Asterics | .grd | AstericsGridProcessor |
|
|
71
|
+
|
|
72
|
+
## Test Files
|
|
73
|
+
|
|
74
|
+
You can use test files from the parent directory:
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
# From vitedemo directory
|
|
78
|
+
../../test/assets/dot/example.dot
|
|
79
|
+
../../test/assets/opml/example.opml
|
|
80
|
+
../../test/assets/obf/simple.obf
|
|
81
|
+
../../test/assets/gridset/example.gridset
|
|
82
|
+
../../test/assets/asterics/example.grd
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Technical Details
|
|
86
|
+
|
|
87
|
+
### Vite Configuration
|
|
88
|
+
|
|
89
|
+
The demo uses a custom Vite config to import from the source TypeScript:
|
|
90
|
+
|
|
91
|
+
```typescript
|
|
92
|
+
// vite.config.ts
|
|
93
|
+
export default defineConfig({
|
|
94
|
+
resolve: {
|
|
95
|
+
alias: {
|
|
96
|
+
'aac-processors': path.resolve(__dirname, '../../src/index.browser.ts')
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
This allows direct TypeScript import without pre-building.
|
|
103
|
+
|
|
104
|
+
### Import Example
|
|
105
|
+
|
|
106
|
+
```typescript
|
|
107
|
+
import { getProcessor } from 'aac-processors';
|
|
108
|
+
|
|
109
|
+
// Get processor for file type
|
|
110
|
+
const processor = getProcessor('.obf');
|
|
111
|
+
|
|
112
|
+
// Load file from input
|
|
113
|
+
const arrayBuffer = await file.arrayBuffer();
|
|
114
|
+
const tree = await processor.loadIntoTree(arrayBuffer);
|
|
115
|
+
|
|
116
|
+
// Extract texts
|
|
117
|
+
const texts = await processor.extractTexts(arrayBuffer);
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Troubleshooting
|
|
121
|
+
|
|
122
|
+
### Module not found errors
|
|
123
|
+
|
|
124
|
+
Make sure you're in the `examples/vitedemo` directory and have run `npm install`.
|
|
125
|
+
|
|
126
|
+
### TypeScript errors
|
|
127
|
+
|
|
128
|
+
Clear the Vite cache:
|
|
129
|
+
```bash
|
|
130
|
+
rm -rf node_modules/.vite
|
|
131
|
+
npm run dev
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### File processing errors
|
|
135
|
+
|
|
136
|
+
Check the browser console (F12) for detailed error messages. Common issues:
|
|
137
|
+
- Invalid file format
|
|
138
|
+
- Corrupted file
|
|
139
|
+
- Unsupported file type (check extensions)
|
|
140
|
+
|
|
141
|
+
## Browser Compatibility
|
|
142
|
+
|
|
143
|
+
- ✅ Chrome/Edge (recommended)
|
|
144
|
+
- ✅ Firefox
|
|
145
|
+
- ✅ Safari
|
|
146
|
+
- ⚠️ Speech API works best in Chrome/Edge
|
|
147
|
+
|
|
148
|
+
## Next Steps
|
|
149
|
+
|
|
150
|
+
This demonstrates that AACProcessors works in browsers with a bundler. To use in your own project:
|
|
151
|
+
|
|
152
|
+
1. Install AACProcessors: `npm install @willwade/aac-processors`
|
|
153
|
+
2. Set up Vite/Webpack/Rollup
|
|
154
|
+
3. Import from `'aac-processors'`
|
|
155
|
+
4. Use `getProcessor()` factory function
|
|
156
|
+
|
|
157
|
+
See `docs/BROWSER_USAGE.md` for complete setup guides.
|