react-client 1.0.11 ā 1.0.12
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/dist/cli/commands/dev.js +26 -14
- package/package.json +1 -1
package/dist/cli/commands/dev.js
CHANGED
|
@@ -19,7 +19,7 @@ const child_process_1 = require("child_process");
|
|
|
19
19
|
const chalk_1 = __importDefault(require("chalk"));
|
|
20
20
|
async function dev() {
|
|
21
21
|
const root = process.cwd();
|
|
22
|
-
// š§© Load config
|
|
22
|
+
// š§© Load user config
|
|
23
23
|
const userConfig = await (0, loadConfig_1.loadReactClientConfig)(root);
|
|
24
24
|
const appRoot = path_1.default.resolve(root, userConfig.root || '.');
|
|
25
25
|
const defaultPort = userConfig.server?.port || 5173;
|
|
@@ -33,7 +33,7 @@ async function dev() {
|
|
|
33
33
|
}
|
|
34
34
|
const indexHtml = path_1.default.join(appRoot, 'index.html');
|
|
35
35
|
await fs_extra_1.default.ensureDir(outDir);
|
|
36
|
-
//
|
|
36
|
+
// āļø Detect open port
|
|
37
37
|
const availablePort = await (0, detect_port_1.default)(defaultPort);
|
|
38
38
|
const port = availablePort;
|
|
39
39
|
if (availablePort !== defaultPort) {
|
|
@@ -73,7 +73,7 @@ async function dev() {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
const reactRefreshRuntime = safeResolveReactRefresh();
|
|
76
|
-
// šļø esbuild context
|
|
76
|
+
// šļø Create esbuild context
|
|
77
77
|
const ctx = await esbuild_1.default.context({
|
|
78
78
|
entryPoints: [entry],
|
|
79
79
|
bundle: true,
|
|
@@ -88,7 +88,7 @@ async function dev() {
|
|
|
88
88
|
console.log(chalk_1.default.gray('š¦ Watching and building dev bundle...'));
|
|
89
89
|
console.log(chalk_1.default.gray(' Output dir:'), chalk_1.default.blue(outDir));
|
|
90
90
|
console.log(chalk_1.default.gray(' Entry file:'), chalk_1.default.yellow(entry));
|
|
91
|
-
// š
|
|
91
|
+
// š Connect server setup
|
|
92
92
|
const app = (0, connect_1.default)();
|
|
93
93
|
// š” Security headers
|
|
94
94
|
app.use((_req, res, next) => {
|
|
@@ -96,11 +96,12 @@ async function dev() {
|
|
|
96
96
|
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
|
|
97
97
|
next();
|
|
98
98
|
});
|
|
99
|
+
// š§ In-memory cache for /@modules
|
|
100
|
+
const moduleCache = new Map();
|
|
99
101
|
// 1ļøā£ Serve react-refresh runtime with safe browser shim
|
|
100
102
|
app.use('/@react-refresh', async (_req, res) => {
|
|
101
103
|
const runtime = await fs_extra_1.default.readFile(reactRefreshRuntime, 'utf8');
|
|
102
104
|
const shim = `
|
|
103
|
-
// React Refresh browser shims
|
|
104
105
|
window.process = window.process || { env: { NODE_ENV: 'development' } };
|
|
105
106
|
window.module = { exports: {} };
|
|
106
107
|
window.global = window;
|
|
@@ -109,31 +110,39 @@ async function dev() {
|
|
|
109
110
|
res.setHeader('Content-Type', 'application/javascript');
|
|
110
111
|
res.end(shim + '\n' + runtime);
|
|
111
112
|
});
|
|
112
|
-
// 2ļøā£
|
|
113
|
+
// 2ļøā£ Bare module resolver with memory cache
|
|
113
114
|
app.use('/@modules/', async (req, res, next) => {
|
|
114
115
|
const id = req.url?.replace(/^\/@modules\//, '');
|
|
115
116
|
if (!id)
|
|
116
117
|
return next();
|
|
118
|
+
if (moduleCache.has(id)) {
|
|
119
|
+
res.setHeader('Content-Type', 'application/javascript');
|
|
120
|
+
res.end(moduleCache.get(id));
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
117
123
|
try {
|
|
118
|
-
const
|
|
124
|
+
const entryPath = require.resolve(id, { paths: [appRoot] });
|
|
119
125
|
const out = await esbuild_1.default.build({
|
|
120
|
-
entryPoints: [
|
|
126
|
+
entryPoints: [entryPath],
|
|
121
127
|
bundle: true,
|
|
122
128
|
write: false,
|
|
123
129
|
platform: 'browser',
|
|
124
130
|
format: 'esm',
|
|
125
131
|
target: 'es2020',
|
|
126
132
|
});
|
|
133
|
+
const code = out.outputFiles[0].text;
|
|
134
|
+
moduleCache.set(id, code); // ā
cache module
|
|
127
135
|
res.setHeader('Content-Type', 'application/javascript');
|
|
128
|
-
res.end(
|
|
136
|
+
res.end(code);
|
|
129
137
|
}
|
|
130
138
|
catch (err) {
|
|
131
|
-
|
|
139
|
+
const msg = err instanceof Error ? err.message : String(err);
|
|
140
|
+
console.error(chalk_1.default.red(`Failed to resolve module ${id}: ${msg}`));
|
|
132
141
|
res.writeHead(500);
|
|
133
142
|
res.end(`// Could not resolve module ${id}`);
|
|
134
143
|
}
|
|
135
144
|
});
|
|
136
|
-
// 3ļøā£ Serve /src/* files
|
|
145
|
+
// 3ļøā£ Serve /src/* files ā on-the-fly transform + bare import rewrite
|
|
137
146
|
app.use(async (req, res, next) => {
|
|
138
147
|
if (!req.url || !req.url.startsWith('/src/'))
|
|
139
148
|
return next();
|
|
@@ -141,8 +150,10 @@ async function dev() {
|
|
|
141
150
|
const filePath = path_1.default.join(appRoot, decodeURIComponent(req.url.split('?')[0]));
|
|
142
151
|
if (!(await fs_extra_1.default.pathExists(filePath)))
|
|
143
152
|
return next();
|
|
144
|
-
|
|
153
|
+
let code = await fs_extra_1.default.readFile(filePath, 'utf8');
|
|
145
154
|
const ext = path_1.default.extname(filePath).toLowerCase();
|
|
155
|
+
// šŖ Rewrite bare imports ā /@modules/
|
|
156
|
+
code = code.replace(/from\s+['"]([^'".\/][^'"]*)['"]/g, (_match, dep) => `from "/@modules/${dep}"`);
|
|
146
157
|
let loader = 'js';
|
|
147
158
|
if (ext === '.ts')
|
|
148
159
|
loader = 'ts';
|
|
@@ -163,7 +174,7 @@ async function dev() {
|
|
|
163
174
|
}
|
|
164
175
|
catch (err) {
|
|
165
176
|
const msg = err instanceof Error ? err.message : String(err);
|
|
166
|
-
console.error('Error serving src file:', msg);
|
|
177
|
+
console.error('Error serving /src file:', msg);
|
|
167
178
|
res.writeHead(500);
|
|
168
179
|
res.end(`// Error: ${msg}`);
|
|
169
180
|
}
|
|
@@ -214,7 +225,7 @@ async function dev() {
|
|
|
214
225
|
next();
|
|
215
226
|
}
|
|
216
227
|
});
|
|
217
|
-
// š HMR
|
|
228
|
+
// š HMR WebSocket server
|
|
218
229
|
const server = http_1.default.createServer(app);
|
|
219
230
|
const wss = new ws_1.WebSocketServer({ server });
|
|
220
231
|
const broadcast = (data) => {
|
|
@@ -236,6 +247,7 @@ async function dev() {
|
|
|
236
247
|
}
|
|
237
248
|
}
|
|
238
249
|
});
|
|
250
|
+
// š¢ Start server
|
|
239
251
|
server.listen(port, async () => {
|
|
240
252
|
const url = `http://localhost:${port}`;
|
|
241
253
|
console.log(chalk_1.default.cyan.bold(`\nš React Client Dev Server`));
|