Fix SyntaxError: Unexpected token '&' caused by HTML entity encoding in script

[Copilot]

Problem

The MLack chat application was showing a JavaScript syntax error when accessing the root page (/):

Uncaught SyntaxError: Unexpected token '&'

This error occurred because single quotes in inline JavaScript were being HTML entity encoded as ' when Hono rendered the JSX to HTML. For example:

// Original code in JSX template literal:
const messagesDiv = document.getElementById('messages');

// Rendered HTML output:
const messagesDiv = document.getElementById('messages');

The ' HTML entities broke JavaScript syntax, preventing the WebSocket functionality from working.

Solution

Extracted the inline JavaScript from the JSX template literal to a separate external file to avoid HTML encoding:

1. Created /hono/static/ChatPage.js - External JavaScript file with WebSocket functionality
2. Updated /hono/components/ChatPage.tsx - Replaced inline <script> with <script src="/static/ChatPage.js">
3. Updated /hono/app.tsx - Added static file serving for /static/* path
4. Updated test files to check for external script reference instead of inline code

Before vs After

Before (broken):

<script>
const messagesDiv = document.getElementById(&#39;messages&#39;);
// ^ Syntax error due to HTML entity encoding
</script>

After (working):

<script src="/static/ChatPage.js"></script>

Where ChatPage.js contains:

const messagesDiv = document.getElementById('messages');
// ^ Proper JavaScript syntax, no HTML encoding

Result

✅ The application now loads without JavaScript syntax errors
✅ WebSocket functionality works correctly
✅ Browser console shows "Connected to WebSocket" instead of syntax errors
✅ All existing tests pass

Fixes #34.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[mahata]

@copilot I like the general idea of this PR! However, I'd prefer if ChatPage.js was in TypeScript. Also, I'd like the file to be a target for Hot Module Reloading.

[Copilot]

@copilot I like the general idea of this PR! However, I'd prefer if ChatPage.js was in TypeScript. Also, I'd like the file to be a target for Hot Module Reloading.

I've converted ChatPage.js to TypeScript and set up Hot Module Reloading!

The changes include:

• Converted to ChatPage.ts with proper TypeScript types for DOM elements and events
• Created tsconfig.client.json for client-side TypeScript compilation
• Added build scripts for client-side compilation with watch mode for HMR
• Generated JavaScript files are now gitignored since they're compiled from TypeScript
• Use pnpm run dev:watch for full HMR experience

The TypeScript compiler now watches for changes and automatically recompiles the client-side code. Changes to ChatPage.ts will be immediately reflected in the served ChatPage.js. (556f9b3)

[mahata]

@copilot Fix CI in GitHub Actions.

[Copilot]

@copilot Fix CI in GitHub Actions.

Fixed CI issues by resolving linting problems. The CI was failing because:

1. Generated build artifacts in dist/ folder were being linted
2. TypeScript source code had some linting issues (unused parameters, template literal suggestions)
3. Generated JavaScript files from TypeScript compilation were being linted

Updated the CI workflow to clean build artifacts before linting and fixed all source code linting issues. CI now passes all steps: tests, linting, and build. (0fd103a)