Skip to content

Commit 0c9facc

Browse files
jcbrandjcbrand
committed
Add dev.esm.html for the ESM build
We revert dev.html because apparently RSPack has a lack of support for hot module reloading and ESM builds, so using the ESM build with `npm run watch` doesn't work properly.
1 parent a519934 commit 0c9facc

File tree

3 files changed

+116
-67
lines changed

3 files changed

+116
-67
lines changed

‎dev.esm.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Converse</title>
5+
<meta charset="utf-8">
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Converse XMPP/Jabber Chat" />
9+
<meta name="author" content="JC Brand" />
10+
<meta name="keywords" content="xmpp chat webchat converse.js" />
11+
<link rel="manifest" href="./manifest.json">
12+
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
13+
<link type="text/css" rel="stylesheet" media="screen" href="dist/converse.css" />
14+
<!-- Modern browsers will execute this -->
15+
<script type="module">
16+
(async () => {
17+
try {
18+
// Feature detection
19+
if (typeof window.Promise === 'undefined' ||
20+
typeof window.WeakMap === 'undefined') {
21+
throw new Error('Browser lacks required features');
22+
}
23+
24+
const { default: converse } = await import('./dist/converse.esm.js');
25+
26+
converse.plugins.add('converse-debug', {
27+
initialize () {
28+
// Expose for debugging but warn about direct usage
29+
if (window._converse) {
30+
console.warn('_converse already exists on window');
31+
}
32+
Object.defineProperty(window, '_converse', {
33+
get: () => this._converse,
34+
configurable: true // Allows tests to redefine
35+
});
36+
}
37+
});
38+
39+
await converse.initialize({
40+
theme: 'nordic',
41+
dark_theme: 'dracula',
42+
auto_away: 300,
43+
loglevel: 'debug',
44+
show_background: true,
45+
message_archiving: 'always',
46+
muc_show_logs_before_join: true,
47+
notify_all_room_messages: ['discuss@conference.conversejs.org'],
48+
fetch_url_headers: true,
49+
whitelisted_plugins: ['converse-debug'],
50+
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
51+
show_controlbox_by_default: true,
52+
// view_mode: 'overlayed',
53+
// websocket_url: 'wss://conversejs.org/xmpp-websocket',
54+
// websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
55+
// connection_options: { worker: '/dist/shared-connection-worker.js' }
56+
});
57+
} catch (error) {
58+
console.error('Failed to load Converse.js ESM:', error);
59+
document.getElementById('fallback-script').hidden = false;
60+
}
61+
})();
62+
</script>
63+
64+
<!-- Older browsers will execute this -->
65+
<script nomodule id="fallback-script" hidden>
66+
console.warn('Using legacy CJS build due to lack of module support');
67+
document.write('<script src="dist/converse.js"><\/script>');
68+
</script>
69+
70+
<!-- Error display -->
71+
<div id="load-error" style="display:none; padding:1em; background:#fcc; margin:1em">
72+
<h2>Loading Error</h2>
73+
<p>Failed to load Converse.js. Please try:</p>
74+
<ul>
75+
<li>Using a modern browser (Chrome, Firefox, Edge, Safari)</li>
76+
<li>Checking console for errors</li>
77+
</ul>
78+
</div>
79+
<script>
80+
window.addEventListener('error', () => {
81+
document.getElementById('load-error').style.display = 'block';
82+
});
83+
</script>
84+
</body>
85+
</html>

‎dev.html‎

Lines changed: 30 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -11,75 +11,38 @@
1111
<link rel="manifest" href="./manifest.json">
1212
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
1313
<link type="text/css" rel="stylesheet" media="screen" href="dist/converse.css" />
14-
<!-- Modern browsers will execute this -->
15-
<script type="module">
16-
(async () => {
17-
try {
18-
// Feature detection
19-
if (typeof window.Promise === 'undefined' ||
20-
typeof window.WeakMap === 'undefined') {
21-
throw new Error('Browser lacks required features');
22-
}
14+
<script src="3rdparty/libsignal-protocol.js"></script>
15+
<script src="dist/converse.js"></script>
16+
</head>
2317

24-
const { default: converse } = await import('./dist/converse.esm.js');
18+
<body class="reset" style="background-color: var(--global-background-color)">
2519

26-
converse.plugins.add('converse-debug', {
27-
initialize () {
28-
// Expose for debugging but warn about direct usage
29-
if (window._converse) {
30-
console.warn('_converse already exists on window');
31-
}
32-
Object.defineProperty(window, '_converse', {
33-
get: () => this._converse,
34-
configurable: true // Allows tests to redefine
35-
});
36-
}
37-
});
20+
<script>
21+
converse.plugins.add('converse-debug', {
22+
initialize () {
23+
const { _converse } = this;
24+
window._converse = _converse;
25+
}
26+
});
3827

39-
await converse.initialize({
40-
theme: 'nordic',
41-
dark_theme: 'dracula',
42-
auto_away: 300,
43-
loglevel: 'debug',
44-
show_background: true,
45-
message_archiving: 'always',
46-
muc_show_logs_before_join: true,
47-
notify_all_room_messages: ['discuss@conference.conversejs.org'],
48-
fetch_url_headers: true,
49-
whitelisted_plugins: ['converse-debug'],
50-
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
51-
show_controlbox_by_default: true,
52-
// view_mode: 'overlayed',
53-
// websocket_url: 'wss://conversejs.org/xmpp-websocket',
54-
// websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
55-
// connection_options: { worker: '/dist/shared-connection-worker.js' }
56-
});
57-
} catch (error) {
58-
console.error('Failed to load Converse.js ESM:', error);
59-
document.getElementById('fallback-script').hidden = false;
60-
}
61-
})();
62-
</script>
63-
64-
<!-- Older browsers will execute this -->
65-
<script nomodule id="fallback-script" hidden>
66-
console.warn('Using legacy CJS build due to lack of module support');
67-
document.write('<script src="dist/converse.js"><\/script>');
68-
</script>
69-
70-
<!-- Error display -->
71-
<div id="load-error" style="display:none; padding:1em; background:#fcc; margin:1em">
72-
<h2>Loading Error</h2>
73-
<p>Failed to load Converse.js. Please try:</p>
74-
<ul>
75-
<li>Using a modern browser (Chrome, Firefox, Edge, Safari)</li>
76-
<li>Checking console for errors</li>
77-
</ul>
78-
</div>
79-
<script>
80-
window.addEventListener('error', () => {
81-
document.getElementById('load-error').style.display = 'block';
82-
});
83-
</script>
28+
converse.initialize({
29+
theme: 'nordic',
30+
dark_theme: 'dracula',
31+
auto_away: 300,
32+
loglevel: 'debug',
33+
show_background: true,
34+
message_archiving: 'always',
35+
muc_show_logs_before_join: true,
36+
notify_all_room_messages: ['discuss@conference.conversejs.org'],
37+
fetch_url_headers: true,
38+
whitelisted_plugins: ['converse-debug'],
39+
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
40+
// view_mode: 'overlayed',
41+
show_controlbox_by_default: true,
42+
// websocket_url: 'wss://conversejs.org/xmpp-websocket',
43+
// websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
44+
// connection_options: { worker: '/dist/shared-connection-worker.js' }
45+
});
46+
</script>
8447
</body>
8548
</html>

‎rspack/rspack.serve.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ module.exports = merge(common, {
1919
allowedHosts: ['localhost'],
2020
devMiddleware: {
2121
publicPath: '/dist/',
22+
writeToDisk: true,
2223
},
2324
},
2425
watchOptions: {

0 commit comments

Comments
 (0)