OpenNoodl/dev-docs/tasks/phase-2-react-migration/TASK-006-preview-font-loading/NOTES.md

TASK-006 Working Notes

Research

Development Server Architecture

Question: Where is localhost:8574 configured and what serves it?

Findings:

• ✅ Located: packages/noodl-editor/src/main/src/web-server.js
• Port 8574 defined in config files: src/shared/config/config-dev.js, config-dist.js, config-test.js
• Server type: Node.js HTTP/HTTPS server (not webpack-dev-server)
• Main process at packages/noodl-editor/src/main/main.js starts the server with startServer()

Dev Server Type:

• webpack-dev-server
• Electron static file handler
• Express server
• Other: Node.js HTTP Server (custom)

Project Path Management

Question: How does the editor track which project is currently open?

Findings:

• ✅ Project path accessed via projectGetInfo() callback in main process
• Located at: packages/noodl-editor/src/main/main.js
• Path retrieved from renderer process via IPC: makeEditorAPIRequest('projectGetInfo', undefined, callback)
• Updated automatically on each request - no caching needed
• Always returns current project directory

Current Asset Handling

What Works:

• Fonts load correctly in deployed apps
• Font loader logic is sound (fontloader.js)
• @font-face CSS generation works

What Doesn't Work:

• Preview cannot access project directory files
• http://localhost:8574/fonts/file.ttf → 404
• Browser receives HTML error page instead of font binary

Existing Patterns Found

Similar Asset Serving:

• (Search codebase for similar patterns)
• Check how viewer bundles are served
• Check how static assets are currently handled

---

Architecture Decisions

Approach Selection

Option A: Static Middleware

• Pros:
• Cons:
• Feasibility: ⭐⭐⭐ (1-5 stars)

Option B: Custom Protocol

• Pros:
• Cons:
• Feasibility: ⭐⭐⭐ (1-5 stars)

Option C: Copy to Temp

• Pros:
• Cons:
• Feasibility: ⭐⭐⭐ (1-5 stars)

Decision: Going with Option ___ because:

• Reason 1
• Reason 2
• Reason 3

Implementation Details

Path Resolution Strategy:

Request: http://localhost:8574/fonts/Inter-Regular.ttf
↓
Extract: /fonts/Inter-Regular.ttf
↓
Combine: currentProjectPath + /fonts/Inter-Regular.ttf
↓
Serve: /absolute/path/to/project/fonts/Inter-Regular.ttf

Security Measures:

• Path sanitization method: ...
• Directory traversal prevention: ...
• Allowed file types: fonts, images, (others?)
• Blocked paths: ...

MIME Type Configuration:

const mimeTypes = {
  '.ttf': 'font/ttf',
  '.otf': 'font/otf',
  '.woff': 'font/woff',
  '.woff2': 'font/woff2',
  '.png': 'image/png',
  '.jpg': 'image/jpeg',
  '.svg': 'image/svg+xml'
};

---

Implementation Notes

Code Locations Identified

File	Purpose	Changes Needed
(to be filled in)

Gotchas / Surprises

• (Document unexpected discoveries)

Useful Commands

# Find where port 8574 is configured
grep -r "8574" packages/noodl-editor/

# Find project path references
grep -r "projectPath\|ProjectPath" packages/noodl-editor/src/

# Find dev server setup
find packages/noodl-editor -name "*dev*.js" -o -name "*server*.ts"

# Check what's currently served
curl -I http://localhost:8574/fonts/test.ttf

---

Testing Notes

Test Project Setup

Project Name: font-test-project Location: (path to test project) Fonts Used:

• Inter-Regular.ttf (254 KB)
• (others as needed)

Test Results

Test 1: Basic Font Loading

• Date:
• Setup: Single TTF font, one Text node
• Result: ✅ Pass / ❌ Fail
• Notes:

Test 2: Multiple Formats

• Date:
• Setup: TTF, OTF, WOFF, WOFF2
• Result: ✅ Pass / ❌ Fail
• Notes:

Test 3: Project Switching

• Date:
• Setup: Project A (Font X), Project B (Font Y)
• Result: ✅ Pass / ❌ Fail
• Notes:

Test 4: Security (Directory Traversal)

• Date:
• Attempt: http://localhost:8574/fonts/../../secret.txt
• Result: ✅ Blocked / ❌ Exposed
• Notes:

Console Errors Before Fix

GET http://localhost:8574/fonts/Inter-Regular.ttf 404 (Not Found)
OTS parsing error: GDEF: misaligned table

Console After Fix

Important: The fix requires restarting the dev server!

Steps to test:

1. Stop current npm run dev with Ctrl+C
2. Run npm run dev again to recompile with new code
3. Open a project with custom fonts
4. Check console - should see NO 404 errors or OTS parsing errors

First Test Results (Dev server not restarted):

• Still seeing 404 errors - this is EXPECTED
• Old compiled code still running in Electron
• Changes in source files don't apply until recompilation

After Restart (To be documented):

• Fonts should load successfully
• No 404 errors
• No "OTS parsing error" messages

---

Debug Log

[Date/Time] - Investigation Start

Trying: Locate dev server configuration Found: Next:

[Date/Time] - Dev Server Located

Trying: Understand server architecture Found: Next:

[Date/Time] - Implementation Start

Trying: Add middleware for project assets Code: (paste relevant code snippets) Result: Next:

[Date/Time] - First Test

Trying: Load font in preview Result: Issues: Next:

---

Questions & Decisions

Question: Should we serve all file types or limit to specific extensions?

Options:

1. Serve everything in project directory
2. Whitelist specific extensions (fonts, images)
3. Blacklist dangerous file types

Decision: (Document decision and reasoning)

Question: How to handle project switching?

Options:

1. Update middleware path dynamically
2. Restart dev server with new path
3. Path lookup on each request

Decision: (Document decision and reasoning)

Question: Where should error handling live?

Options:

1. In middleware (return proper 404)
2. In Electron main process
3. Both

Decision: (Document decision and reasoning)

---

Performance Considerations

Measurements

Before Changes:

• Project load time: ___ ms
• First font render: ___ ms
• Memory usage: ___ MB

After Changes:

• Project load time: ___ ms (Δ ___)
• First font render: ___ ms (Δ ___)
• Memory usage: ___ MB (Δ ___)

Optimization Ideas

• Caching strategy for frequently accessed fonts?
• Pre-load fonts on project open?
• Lazy load only when needed?

---

References & Resources

Relevant Documentation

• webpack-dev-server middleware
• Electron protocol API
• Node.js MIME types

Similar Issues

• (Link to any similar problems found in codebase)

Code Examples

• (Link to relevant code patterns found elsewhere)

---

Final Checklist

Before marking task complete:

• All test scenarios pass
• No console errors
• Performance acceptable
• Security verified
• Cross-platform tested (if possible)
• Code documented
• CHANGELOG.md updated
• LEARNINGS.md updated (if applicable)