Skip to content

Commit a519934

Browse files
jcbrandjcbrand
committed
feat: Add ESM build support and update package exports
Updates #3764 - Configure RSPack to generate both CJS (.js) and ESM (.esm.js) builds - Update package.json exports to properly reference both build formats: - ESM imports now point to dist/converse.esm.js - CJS requires continue using dist/converse.js Use ESM build in dev.html
1 parent cdcaa92 commit a519934

File tree

3 files changed

+135
-69
lines changed

3 files changed

+135
-69
lines changed

‎dev.html‎

Lines changed: 67 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,38 +11,75 @@
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-
<script src="3rdparty/libsignal-protocol.js"></script>
15-
<script src="dist/converse.js"></script>
16-
</head>
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+
}
1723

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

20-
<script>
21-
converse.plugins.add('converse-debug', {
22-
initialize () {
23-
const { _converse } = this;
24-
window._converse = _converse;
25-
}
26-
});
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+
});
2738

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>
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>
4784
</body>
4885
</html>

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
"name": "converse.js",
33
"version": "11.0.1",
44
"description": "Browser based XMPP chat client",
5-
"browser": "dist/converse.js",
65
"workspaces": [
76
"src/headless",
87
"src/log"
@@ -11,7 +10,7 @@
1110
".": {
1211
"import": {
1312
"types": "./src/types/index.d.ts",
14-
"default": "./src/index.js"
13+
"default": "./dist/converse.esm.js"
1514
},
1615
"require": {
1716
"types": "./types/index.d.ts",
@@ -22,8 +21,9 @@
2221
"./shared/*": "./src/shared/*"
2322
},
2423
"types": "./src/types/index.d.ts",
25-
"main": "./src/index.js",
26-
"module": "./src/index.js",
24+
"browser": "dist/converse.js",
25+
"main": "dist/converse.js",
26+
"module": "dist/converse.esm.js",
2727
"files": [
2828
"CHANGES.md",
2929
"LICENSE.txt",

‎rspack/rspack.build.js‎

Lines changed: 64 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,7 @@ const path = require('path');
33
const { merge } = require('webpack-merge');
44
const common = require('../rspack/rspack.common.js');
55

6-
const plugins = [
7-
new rspack.CssExtractRspackPlugin({
8-
filename: '../dist/converse.min.css',
9-
}),
10-
new rspack.CssExtractRspackPlugin({
11-
filename: '../dist/converse.css',
12-
}),
13-
new rspack.CopyRspackPlugin({
14-
patterns: [
15-
{ from: 'node_modules/strophe.js/src/shared-connection-worker.js', to: 'shared-connection-worker.js' },
16-
{ from: 'sounds', to: 'sounds' },
17-
{ from: 'images/favicon.ico', to: 'images/favicon.ico' },
18-
{ from: 'images/custom_emojis', to: 'images/custom_emojis' },
19-
{ from: 'logo/conversejs-filled-192.png', to: 'images/logo' },
20-
{ from: 'logo/conversejs-filled-512.png', to: 'images/logo' },
21-
{ from: 'logo/conversejs-filled-192.svg', to: 'images/logo' },
22-
{ from: 'logo/conversejs-filled-512.svg', to: 'images/logo' },
23-
{ from: 'logo/conversejs-filled.svg', to: 'images/logo' },
24-
{ from: 'logo/conversejs-gold-gradient.svg', to: 'images/logo' },
25-
{ from: 'src/shared/styles/webfonts', to: 'webfonts' },
26-
{ from: 'manifest.json', to: 'manifest.json' },
27-
],
28-
}),
29-
];
30-
31-
module.exports = merge(common, {
32-
plugins,
33-
entry: {
34-
'converse': path.resolve(__dirname, '../src/entry.js'),
35-
'converse.min': path.resolve(__dirname, '../src/entry.js'),
36-
},
37-
output: {
38-
filename: '[name].js',
39-
},
6+
const sharedConfig = {
407
mode: 'production',
418
optimization: {
429
minimize: true,
@@ -98,4 +65,66 @@ module.exports = merge(common, {
9865
},
9966
],
10067
},
101-
});
68+
};
69+
70+
const plugins = [
71+
new rspack.CssExtractRspackPlugin({
72+
filename: '../dist/converse.min.css',
73+
}),
74+
new rspack.CssExtractRspackPlugin({
75+
filename: '../dist/converse.css',
76+
}),
77+
new rspack.CopyRspackPlugin({
78+
patterns: [
79+
{ from: 'node_modules/strophe.js/src/shared-connection-worker.js', to: 'shared-connection-worker.js' },
80+
{ from: 'sounds', to: 'sounds' },
81+
{ from: 'images/favicon.ico', to: 'images/favicon.ico' },
82+
{ from: 'images/custom_emojis', to: 'images/custom_emojis' },
83+
{ from: 'logo/conversejs-filled-192.png', to: 'images/logo' },
84+
{ from: 'logo/conversejs-filled-512.png', to: 'images/logo' },
85+
{ from: 'logo/conversejs-filled-192.svg', to: 'images/logo' },
86+
{ from: 'logo/conversejs-filled-512.svg', to: 'images/logo' },
87+
{ from: 'logo/conversejs-filled.svg', to: 'images/logo' },
88+
{ from: 'logo/conversejs-gold-gradient.svg', to: 'images/logo' },
89+
{ from: 'src/shared/styles/webfonts', to: 'webfonts' },
90+
{ from: 'manifest.json', to: 'manifest.json' },
91+
],
92+
}),
93+
];
94+
95+
module.exports = [
96+
// CJS Build
97+
merge(common, {
98+
...sharedConfig,
99+
plugins,
100+
entry: {
101+
'converse': path.resolve(__dirname, '../src/entry.js'),
102+
'converse.min': path.resolve(__dirname, '../src/entry.js'),
103+
},
104+
output: {
105+
filename: '[name].js',
106+
library: {
107+
type: 'umd',
108+
name: 'converse'
109+
}
110+
},
111+
}),
112+
// ESM Build
113+
merge(common, {
114+
...sharedConfig,
115+
plugins,
116+
entry: {
117+
'converse': path.resolve(__dirname, '../src/entry.js'),
118+
'converse.min': path.resolve(__dirname, '../src/entry.js'),
119+
},
120+
experiments: {
121+
outputModule: true
122+
},
123+
output: {
124+
filename: '[name].esm.js',
125+
library: {
126+
type: 'module'
127+
}
128+
},
129+
})
130+
];

0 commit comments

Comments
 (0)