@dev-to/react-loader 0.1.0 → 0.2.0

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.
Files changed (3) hide show
  1. package/dist/index.umd.js +962 -0
  2. package/dist/index.umd.js.LICENSE.txt +9 -0
  3. package/package.json +4 -3
package/dist/index.umd.js ADDED
@@ -0,0 +1,962 @@
1
+ /*! For license information please see index.umd.js.LICENSE.txt */
2
+ (function(root, factory) {
3
+ if ('object' == typeof exports && 'object' == typeof module) module.exports = factory(require("React"));
4
+ else if ('function' == typeof define && define.amd) define([
5
+ "React"
6
+ ], factory);
7
+ else if ('object' == typeof exports) exports["DevToReactLoader"] = factory(require("React"));
8
+ else root["DevToReactLoader"] = factory(root["React"]);
9
+ })(globalThis, (__rspack_external_react)=>(()=>{
10
+ "use strict";
11
+ var __webpack_modules__ = {
12
+ "../../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-runtime.production.min.js" (__unused_rspack_module, exports1, __webpack_require__) {
13
+ /**
14
+ * @license React
15
+ * react-jsx-runtime.production.min.js
16
+ *
17
+ * Copyright (c) Facebook, Inc. and its affiliates.
18
+ *
19
+ * This source code is licensed under the MIT license found in the
20
+ * LICENSE file in the root directory of this source tree.
21
+ */ var f = __webpack_require__("react"), k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = {
22
+ key: !0,
23
+ ref: !0,
24
+ __self: !0,
25
+ __source: !0
26
+ };
27
+ function q(c, a, g) {
28
+ var b, d = {}, e = null, h = null;
29
+ void 0 !== g && (e = "" + g);
30
+ void 0 !== a.key && (e = "" + a.key);
31
+ void 0 !== a.ref && (h = a.ref);
32
+ for(b in a)m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
33
+ if (c && c.defaultProps) for(b in a = c.defaultProps)void 0 === d[b] && (d[b] = a[b]);
34
+ return {
35
+ $$typeof: k,
36
+ type: c,
37
+ key: e,
38
+ ref: h,
39
+ props: d,
40
+ _owner: n.current
41
+ };
42
+ }
43
+ exports1.Fragment = l;
44
+ exports1.jsx = q;
45
+ exports1.jsxs = q;
46
+ },
47
+ "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js" (module1, __unused_rspack_exports, __webpack_require__) {
48
+ module1.exports = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-runtime.production.min.js");
49
+ },
50
+ react (module1) {
51
+ module1.exports = __rspack_external_react;
52
+ }
53
+ };
54
+ var __webpack_module_cache__ = {};
55
+ function __webpack_require__(moduleId) {
56
+ var cachedModule = __webpack_module_cache__[moduleId];
57
+ if (void 0 !== cachedModule) return cachedModule.exports;
58
+ var module1 = __webpack_module_cache__[moduleId] = {
59
+ exports: {}
60
+ };
61
+ __webpack_modules__[moduleId](module1, module1.exports, __webpack_require__);
62
+ return module1.exports;
63
+ }
64
+ (()=>{
65
+ __webpack_require__.d = (exports1, definition)=>{
66
+ for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
67
+ enumerable: true,
68
+ get: definition[key]
69
+ });
70
+ };
71
+ })();
72
+ (()=>{
73
+ __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
74
+ })();
75
+ (()=>{
76
+ __webpack_require__.r = (exports1)=>{
77
+ if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
78
+ value: 'Module'
79
+ });
80
+ Object.defineProperty(exports1, '__esModule', {
81
+ value: true
82
+ });
83
+ };
84
+ })();
85
+ var __webpack_exports__ = {};
86
+ (()=>{
87
+ __webpack_require__.r(__webpack_exports__);
88
+ __webpack_require__.d(__webpack_exports__, {
89
+ resolveReactEntry: ()=>resolveReactEntry,
90
+ loadBridgeContract: ()=>loadBridgeContract,
91
+ DEFAULT_CONTRACT_ENDPOINT: ()=>DEFAULT_CONTRACT_ENDPOINT,
92
+ ensureBridgeInit: ()=>ensureBridgeInit,
93
+ ReactLoader: ()=>ReactLoader,
94
+ DEFAULT_INIT_ENDPOINT: ()=>DEFAULT_INIT_ENDPOINT,
95
+ resolveReactEntryForLoader: ()=>resolveReactEntryForLoader
96
+ });
97
+ var jsx_runtime = __webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js");
98
+ var external_React_ = __webpack_require__("react");
99
+ const DEV_TO_REACT_NAMESPACE = 'dev_to_react';
100
+ const DEV_TO_REACT_BASE_PATH = `/__${DEV_TO_REACT_NAMESPACE}__`;
101
+ const DEV_TO_REACT_CONTRACT_PATH = `${DEV_TO_REACT_BASE_PATH}/contract.js`;
102
+ const DEV_TO_REACT_INIT_PATH = `${DEV_TO_REACT_BASE_PATH}/init.js`;
103
+ const DEV_TO_REACT_DEBUG_HTML_PATH = `${DEV_TO_REACT_BASE_PATH}/debug.html`;
104
+ function isRecord(value) {
105
+ return 'object' == typeof value && null !== value;
106
+ }
107
+ function unwrapDefault(value) {
108
+ if (!isRecord(value)) return value;
109
+ const defaultValue = value['default'];
110
+ return null != defaultValue ? defaultValue : value;
111
+ }
112
+ function toError(value) {
113
+ return value instanceof Error ? value : new Error(String(value));
114
+ }
115
+ function resolveRemoteRuntime(runtimeModule) {
116
+ const runtimeRecord = isRecord(runtimeModule) ? runtimeModule : {};
117
+ const reactCandidate = runtimeRecord['default'] ?? runtimeRecord['React'] ?? runtimeModule;
118
+ const domCandidate = runtimeRecord['ReactDOMClient'];
119
+ if (!isRecord(reactCandidate) || 'function' != typeof reactCandidate['createElement'] || !isRecord(domCandidate) || 'function' != typeof domCandidate['createRoot']) throw new Error('Invalid React runtime module from dev server.');
120
+ return {
121
+ React: reactCandidate,
122
+ ReactDOMClient: domCandidate
123
+ };
124
+ }
125
+ const DEFAULT_CONTRACT_ENDPOINT = DEV_TO_REACT_CONTRACT_PATH;
126
+ const DEFAULT_INIT_ENDPOINT = DEV_TO_REACT_INIT_PATH;
127
+ function resolveEndpointUrl(origin, endpoint) {
128
+ if (endpoint.startsWith('http://') || endpoint.startsWith('https://')) return endpoint;
129
+ if (endpoint.startsWith('/')) return `${origin}${endpoint}`;
130
+ return `${origin}/${endpoint}`;
131
+ }
132
+ function isBridgeContract(value) {
133
+ if (!isRecord(value)) return false;
134
+ const paths = value['paths'];
135
+ const events = value['events'];
136
+ if (!isRecord(paths) || 'string' != typeof paths['reactRuntime']) return false;
137
+ if (!isRecord(events) || 'string' != typeof events['fullReload']) return false;
138
+ return true;
139
+ }
140
+ function resolveContract(initModule) {
141
+ const moduleRecord = isRecord(initModule) ? initModule : {};
142
+ const contractCandidate = moduleRecord['DEV_TO_REACT_CONTRACT'] ?? moduleRecord['default'] ?? null;
143
+ if (!contractCandidate) throw new Error('Dev server contract not found. Please ensure `@dev-to/react-plugin` (devToReactPlugin) is enabled in the Vite dev server.');
144
+ if (!isBridgeContract(contractCandidate)) throw new Error('Invalid dev server contract.');
145
+ return contractCandidate;
146
+ }
147
+ const nativeImport = new Function('url', 'return import(url)');
148
+ const contractCache = new Map();
149
+ const initCache = new Map();
150
+ async function loadBridgeContract(origin, contractEndpoint) {
151
+ const endpoint = contractEndpoint || DEFAULT_CONTRACT_ENDPOINT;
152
+ const initUrl = resolveEndpointUrl(origin, endpoint);
153
+ if (contractCache.has(initUrl)) return contractCache.get(initUrl);
154
+ const p = nativeImport(initUrl).then((m)=>resolveContract(m)).catch(async (e)=>{
155
+ contractCache.delete(initUrl);
156
+ const err = e instanceof Error ? e : new Error(String(e));
157
+ if (err.message.includes('Failed to fetch')) try {
158
+ const resp = await fetch(initUrl, {
159
+ method: 'HEAD'
160
+ }).catch(()=>null);
161
+ if (resp) err.statusCode = resp.status;
162
+ } catch {}
163
+ throw err;
164
+ });
165
+ contractCache.set(initUrl, p);
166
+ return p;
167
+ }
168
+ async function ensureBridgeInit(origin, contract) {
169
+ const initPath = contract?.paths?.initClient || DEFAULT_INIT_ENDPOINT;
170
+ const initUrl = resolveEndpointUrl(origin, initPath);
171
+ if (initCache.has(initUrl)) return initCache.get(initUrl);
172
+ const p = nativeImport(initUrl).then(()=>void 0).catch((e)=>{
173
+ initCache.delete(initUrl);
174
+ throw e instanceof Error ? e : new Error(String(e));
175
+ });
176
+ initCache.set(initUrl, p);
177
+ return p;
178
+ }
179
+ async function resolveReactEntry(origin, componentName, contractEndpoint) {
180
+ try {
181
+ const contract = await loadBridgeContract(origin, contractEndpoint);
182
+ const dev = contract?.dev || {};
183
+ const componentMap = dev.componentMap || {};
184
+ const entry = componentMap[componentName] || componentMap['*'];
185
+ if (!entry) {
186
+ const errorMessage = `Component "${componentName}" not found in devComponentMap`;
187
+ const isWildcardMode = !!componentMap['*'];
188
+ const errorReason = isWildcardMode ? `The component "${componentName}" is not configured, and the wildcard fallback is also missing or invalid.` : `The component "${componentName}" is not configured in devComponentMap. Please add it to your Vite configuration.`;
189
+ return {
190
+ success: false,
191
+ error: {
192
+ message: errorMessage,
193
+ type: 'COMPONENT_NOT_FOUND',
194
+ componentName,
195
+ errorReason,
196
+ setupGuide: {
197
+ title: 'Setup Guide',
198
+ steps: [
199
+ "import { devToReactPlugin } from '@dev-to/react-plugin'",
200
+ '',
201
+ "// Option 1: Shorthand (Default)",
202
+ `devToReactPlugin('${componentName}')`,
203
+ '',
204
+ "// Option 2: Explicit Mapping",
205
+ "devToReactPlugin({",
206
+ ` '${componentName}': '/', // Default entry`,
207
+ " 'Other': 'src/Card.tsx' // Specific file",
208
+ "})"
209
+ ]
210
+ }
211
+ }
212
+ };
213
+ }
214
+ const entryUrl = entry.startsWith('http://') || entry.startsWith('https://') ? entry : `${origin}${entry.startsWith('/') ? '' : '/'}${entry}`;
215
+ return {
216
+ success: true,
217
+ entryUrl
218
+ };
219
+ } catch (e) {
220
+ const errorMessage = e instanceof Error ? e.message : String(e);
221
+ return {
222
+ success: false,
223
+ error: {
224
+ message: errorMessage,
225
+ type: 'CONTRACT_LOAD_FAILED'
226
+ }
227
+ };
228
+ }
229
+ }
230
+ async function resolveReactEntryForLoader(origin, componentName, contractEndpoint) {
231
+ const r = await resolveReactEntry(origin, componentName, contractEndpoint);
232
+ if (r.success) return r;
233
+ const e = r.error;
234
+ return {
235
+ success: false,
236
+ loaderError: {
237
+ message: e.message,
238
+ origin,
239
+ componentName: e.componentName || componentName,
240
+ type: e.type,
241
+ errorReason: e.errorReason,
242
+ setupGuide: e.setupGuide
243
+ }
244
+ };
245
+ }
246
+ function safeLocationHref() {
247
+ if ("u" < typeof window) return '';
248
+ try {
249
+ return window.location.href;
250
+ } catch {
251
+ return '';
252
+ }
253
+ }
254
+ function safeOrigin() {
255
+ if ("u" < typeof window) return '';
256
+ try {
257
+ return window.location.origin;
258
+ } catch {
259
+ return '';
260
+ }
261
+ }
262
+ function getOriginFromFinalJsUrl(finalJsUrl) {
263
+ let origin = '';
264
+ try {
265
+ const urlParam = finalJsUrl.match(/url=([^&]+)/)?.[1] || '';
266
+ const decoded = urlParam ? decodeURIComponent(urlParam) : finalJsUrl;
267
+ const parsed = decoded.startsWith('http') ? new URL(decoded) : new URL(decoded, safeLocationHref() || 'http://localhost');
268
+ origin = parsed.origin;
269
+ } catch {
270
+ origin = safeOrigin();
271
+ }
272
+ return origin;
273
+ }
274
+ function useReactLoader(options) {
275
+ const { url: directUrl, origin, name, componentProps, contractEndpoint } = options;
276
+ const containerRef = (0, external_React_.useRef)(null);
277
+ const rootRef = (0, external_React_.useRef)(null);
278
+ const runtimeRef = (0, external_React_.useRef)(null);
279
+ const cardRef = (0, external_React_.useRef)(null);
280
+ const fullReloadListenerRef = (0, external_React_.useRef)(null);
281
+ const propsRef = (0, external_React_.useRef)(componentProps);
282
+ propsRef.current = componentProps;
283
+ const [isReady, setIsReady] = (0, external_React_.useState)(false);
284
+ const [error, setError] = (0, external_React_.useState)(null);
285
+ const [version, setVersion] = (0, external_React_.useState)(0);
286
+ const [resolvedUrl, setResolvedUrl] = (0, external_React_.useState)(directUrl);
287
+ (0, external_React_.useEffect)(()=>{
288
+ if (directUrl) {
289
+ setResolvedUrl(directUrl);
290
+ setError(null);
291
+ return;
292
+ }
293
+ if (!origin || !name) {
294
+ if (!directUrl && (origin || name)) setError(new Error('Missing dev server origin or component name for resolution.'));
295
+ return;
296
+ }
297
+ let cancelled = false;
298
+ setIsReady(false);
299
+ setError(null);
300
+ resolveReactEntryForLoader(origin, name, contractEndpoint).then((res)=>{
301
+ if (cancelled) return;
302
+ if (true === res.success) setResolvedUrl(res.entryUrl);
303
+ else setError(res.loaderError);
304
+ });
305
+ return ()=>{
306
+ cancelled = true;
307
+ };
308
+ }, [
309
+ directUrl,
310
+ origin,
311
+ name,
312
+ contractEndpoint
313
+ ]);
314
+ const ensureFullReloadListener = (0, external_React_.useCallback)((eventName)=>{
315
+ if (!eventName) return;
316
+ if ("u" < typeof window) return;
317
+ const { current } = fullReloadListenerRef;
318
+ if (current?.eventName === eventName) return;
319
+ if (current) window.removeEventListener(current.eventName, current.handler);
320
+ const handler = ()=>{
321
+ setVersion((v)=>v + 1);
322
+ };
323
+ window.addEventListener(eventName, handler);
324
+ fullReloadListenerRef.current = {
325
+ eventName,
326
+ handler
327
+ };
328
+ }, []);
329
+ (0, external_React_.useEffect)(()=>()=>{
330
+ if ("u" < typeof window) return;
331
+ const { current } = fullReloadListenerRef;
332
+ if (current) window.removeEventListener(current.eventName, current.handler);
333
+ }, []);
334
+ const renderViteRoot = (0, external_React_.useCallback)(()=>{
335
+ const runtime = runtimeRef.current;
336
+ const Card = cardRef.current;
337
+ if (!runtime || !Card) return;
338
+ if (!containerRef.current) return;
339
+ if (!rootRef.current) rootRef.current = runtime.ReactDOMClient.createRoot(containerRef.current);
340
+ rootRef.current.render(runtime.React.createElement(Card, propsRef.current));
341
+ }, []);
342
+ const loadViteComponent = (0, external_React_.useCallback)(async (entryUrl, exportName, currentVersion)=>{
343
+ if (!entryUrl) throw new Error('Not found entry url.');
344
+ const originFromUrl = getOriginFromFinalJsUrl(entryUrl);
345
+ const connector = entryUrl.includes('?') ? '&' : '?';
346
+ const jsUrlWithParam = currentVersion > 0 ? `${entryUrl}${connector}v=${currentVersion}` : entryUrl;
347
+ try {
348
+ const contract = await loadBridgeContract(originFromUrl, contractEndpoint);
349
+ await ensureBridgeInit(originFromUrl, contract);
350
+ ensureFullReloadListener(contract.events.fullReload);
351
+ const runtimeModule = await nativeImport(`${originFromUrl}${contract.paths.reactRuntime}`);
352
+ const runtime = resolveRemoteRuntime(runtimeModule);
353
+ const moduleNs = await nativeImport(jsUrlWithParam);
354
+ const moduleRecord = isRecord(moduleNs) ? moduleNs : {};
355
+ const exportCandidate = exportName ? moduleRecord[exportName] : void 0;
356
+ const candidate = exportName ? exportCandidate ?? moduleRecord['default'] ?? moduleNs : moduleRecord['default'] ?? moduleNs;
357
+ const Card = unwrapDefault(candidate);
358
+ if (Card) return {
359
+ Card: Card,
360
+ runtime
361
+ };
362
+ throw new Error('Vite Dev Component Load Fail: Component not found in module.');
363
+ } catch (e) {
364
+ const err = toError(e);
365
+ if (err.message.includes('Failed to fetch')) try {
366
+ const resp = await fetch(jsUrlWithParam, {
367
+ method: 'HEAD'
368
+ }).catch(()=>null);
369
+ if (resp) err.statusCode = resp.status;
370
+ } catch {}
371
+ throw err;
372
+ }
373
+ }, [
374
+ contractEndpoint,
375
+ ensureFullReloadListener
376
+ ]);
377
+ (0, external_React_.useEffect)(()=>{
378
+ if (!resolvedUrl) return;
379
+ let cancelled = false;
380
+ setIsReady(false);
381
+ if (error instanceof Error) setError(null);
382
+ loadViteComponent(resolvedUrl, name, version).then(({ Card, runtime })=>{
383
+ if (cancelled) return;
384
+ runtimeRef.current = runtime;
385
+ cardRef.current = Card;
386
+ setIsReady(true);
387
+ renderViteRoot();
388
+ }).catch((err)=>{
389
+ if (cancelled) return;
390
+ setError(err instanceof Error ? err : new Error(String(err)));
391
+ setIsReady(false);
392
+ });
393
+ return ()=>{
394
+ cancelled = true;
395
+ };
396
+ }, [
397
+ loadViteComponent,
398
+ renderViteRoot,
399
+ resolvedUrl,
400
+ name,
401
+ version,
402
+ error
403
+ ]);
404
+ (0, external_React_.useEffect)(()=>{
405
+ if (isReady) renderViteRoot();
406
+ });
407
+ (0, external_React_.useEffect)(()=>()=>{
408
+ try {
409
+ rootRef.current?.unmount?.();
410
+ } catch {}
411
+ rootRef.current = null;
412
+ }, []);
413
+ (0, external_React_.useEffect)(()=>{
414
+ if (error) {
415
+ try {
416
+ rootRef.current?.unmount?.();
417
+ } catch {}
418
+ rootRef.current = null;
419
+ }
420
+ }, [
421
+ error
422
+ ]);
423
+ return {
424
+ containerRef,
425
+ isReady,
426
+ error,
427
+ resolvedUrl
428
+ };
429
+ }
430
+ function InlineViteErrorView(props) {
431
+ const { errorMessage, currentOrigin, componentName, setupGuide, statusCode } = props;
432
+ const isComponentNotFound = errorMessage.includes('not found in devComponentMap');
433
+ const isFetchError = errorMessage.includes('Failed to fetch dynamically imported module');
434
+ const isInternalBridgeFile = errorMessage.includes(DEV_TO_REACT_BASE_PATH) || errorMessage.includes(DEV_TO_REACT_NAMESPACE);
435
+ const isContractError = errorMessage.includes('Vite dev contract not found') || errorMessage.includes('Failed to load Vite bridge contract') || errorMessage.includes('Failed to load contract from') || isFetchError && isInternalBridgeFile;
436
+ const isModuleFetchError = isFetchError && !isInternalBridgeFile;
437
+ let title = 'Vite Server Error';
438
+ let typeLabel = statusCode?.toString() || '500';
439
+ if (isComponentNotFound) {
440
+ title = 'Component Not Configured';
441
+ typeLabel = '412';
442
+ } else if (isModuleFetchError) {
443
+ title = 'Vite Module Not Found';
444
+ typeLabel = statusCode?.toString() || '404';
445
+ } else if (isContractError) {
446
+ title = 'Vite Server Connection Failed';
447
+ typeLabel = statusCode?.toString() || '503';
448
+ }
449
+ const theme = isContractError ? 'urgent' : 'warning';
450
+ const palette = 'urgent' === theme ? {
451
+ bg: 'linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%)',
452
+ border: '#fecaca',
453
+ title: '#dc2626',
454
+ accent: '#dc2626',
455
+ pillBg: 'rgba(220, 38, 38, 0.05)',
456
+ pillBorder: 'rgba(220, 38, 38, 0.2)',
457
+ tipsBg: '#fffbeb',
458
+ tipsBorder: '#fde68a',
459
+ tipsText: '#92400e'
460
+ } : {
461
+ bg: 'linear-gradient(135deg, #fffbeb 0%, #fffdf2 100%)',
462
+ border: '#fde68a',
463
+ title: '#d97706',
464
+ accent: '#d97706',
465
+ pillBg: 'rgba(217, 119, 6, 0.05)',
466
+ pillBorder: 'rgba(217, 119, 6, 0.2)',
467
+ tipsBg: '#fffbeb',
468
+ tipsBorder: '#fde68a',
469
+ tipsText: '#92400e'
470
+ };
471
+ const styles = {
472
+ container: {
473
+ padding: 12,
474
+ borderRadius: 8,
475
+ background: palette.bg,
476
+ border: `1px solid ${palette.border}`,
477
+ boxShadow: '0 1px 4px rgba(0,0,0,0.06)'
478
+ },
479
+ header: {
480
+ display: 'flex',
481
+ alignItems: 'center',
482
+ gap: 8,
483
+ marginBottom: 10,
484
+ paddingBottom: 8,
485
+ borderBottom: `1px solid ${palette.border}66`
486
+ },
487
+ icon: {
488
+ fontSize: 18,
489
+ fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif'
490
+ },
491
+ title: {
492
+ fontSize: 12,
493
+ fontWeight: 700,
494
+ color: palette.title,
495
+ display: 'flex',
496
+ alignItems: 'center',
497
+ gap: 6
498
+ },
499
+ typeTag: {
500
+ fontSize: 11,
501
+ fontWeight: 700,
502
+ padding: '1px 6px',
503
+ borderRadius: 999,
504
+ border: `1px solid ${palette.pillBorder}`,
505
+ background: palette.pillBg,
506
+ color: palette.accent,
507
+ lineHeight: 1
508
+ },
509
+ content: {
510
+ display: 'flex',
511
+ flexDirection: 'column',
512
+ gap: 8
513
+ },
514
+ message: {
515
+ fontSize: 9,
516
+ color: '#991b1b',
517
+ background: '#fee2e2',
518
+ padding: 5,
519
+ borderRadius: 6,
520
+ borderLeft: `1px solid ${palette.accent}`,
521
+ whiteSpace: 'pre-wrap',
522
+ fontFamily: 'monospace',
523
+ wordBreak: 'break-word'
524
+ },
525
+ info: {
526
+ background: '#fff',
527
+ padding: '8px 10px',
528
+ borderRadius: 6,
529
+ border: `1px solid ${palette.border}`,
530
+ display: 'flex',
531
+ flexDirection: 'column',
532
+ gap: 6
533
+ },
534
+ infoRow: {
535
+ display: 'flex',
536
+ gap: 8,
537
+ alignItems: 'center'
538
+ },
539
+ label: {
540
+ fontSize: 11,
541
+ color: '#64748b',
542
+ fontWeight: 600,
543
+ width: 110,
544
+ textAlign: 'right'
545
+ },
546
+ value: {
547
+ fontSize: 11,
548
+ color: '#1e293b',
549
+ background: '#f8fafc',
550
+ padding: '3px 6px',
551
+ borderRadius: 4,
552
+ fontFamily: 'monospace',
553
+ border: '1px solid #e2e8f0',
554
+ wordBreak: 'break-word',
555
+ flex: 1
556
+ },
557
+ tips: {
558
+ background: palette.tipsBg,
559
+ padding: '8px 10px',
560
+ borderRadius: 6,
561
+ border: `1px solid ${palette.tipsBorder}`
562
+ },
563
+ tipsTitle: {
564
+ fontSize: 12,
565
+ fontWeight: 800,
566
+ color: palette.tipsText,
567
+ marginBottom: 6,
568
+ textAlign: 'center'
569
+ },
570
+ list: {
571
+ padding: 0,
572
+ listStyle: 'none',
573
+ display: 'flex',
574
+ flexDirection: 'column',
575
+ gap: 6
576
+ },
577
+ li: {
578
+ fontSize: 11,
579
+ color: '#78350f'
580
+ },
581
+ code: {
582
+ fontFamily: 'monospace',
583
+ fontSize: 10
584
+ },
585
+ link: {
586
+ color: '#2563eb'
587
+ },
588
+ codeBlock: {
589
+ padding: '10px 12px',
590
+ background: '#1e293b',
591
+ borderRadius: 6,
592
+ border: '1px solid #334155',
593
+ overflowX: 'auto',
594
+ fontSize: 11,
595
+ color: '#e2e8f0',
596
+ fontFamily: 'monospace'
597
+ },
598
+ codeComment: {
599
+ color: '#94a3b8',
600
+ fontStyle: 'italic'
601
+ }
602
+ };
603
+ const debugPanelUrl = `${currentOrigin}${DEV_TO_REACT_DEBUG_HTML_PATH}`;
604
+ const componentNameLabel = componentName || '';
605
+ return /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
606
+ className: "vdev-container",
607
+ style: styles.container,
608
+ children: [
609
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
610
+ className: "vdev-header",
611
+ style: styles.header,
612
+ children: [
613
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
614
+ className: "vdev-icon",
615
+ style: styles.icon,
616
+ children: '\u26A0\uFE0F'
617
+ }),
618
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
619
+ className: "vdev-title",
620
+ style: styles.title,
621
+ children: [
622
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
623
+ className: "vdev-type-tag",
624
+ style: styles.typeTag,
625
+ children: typeLabel
626
+ }),
627
+ title
628
+ ]
629
+ })
630
+ ]
631
+ }),
632
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
633
+ className: "vdev-content",
634
+ style: styles.content,
635
+ children: [
636
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
637
+ className: "vdev-message",
638
+ style: styles.message,
639
+ children: errorMessage
640
+ }),
641
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
642
+ className: "vdev-info",
643
+ style: styles.info,
644
+ children: [
645
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
646
+ className: "vdev-info-row",
647
+ style: styles.infoRow,
648
+ children: [
649
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
650
+ className: "vdev-label",
651
+ style: styles.label,
652
+ children: "Server Address:"
653
+ }),
654
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
655
+ className: "vdev-value",
656
+ style: styles.value,
657
+ children: currentOrigin
658
+ })
659
+ ]
660
+ }),
661
+ componentNameLabel ? /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
662
+ className: "vdev-info-row",
663
+ style: styles.infoRow,
664
+ children: [
665
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
666
+ className: "vdev-label",
667
+ style: styles.label,
668
+ children: "Component Name:"
669
+ }),
670
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
671
+ className: "vdev-value",
672
+ style: styles.value,
673
+ children: componentNameLabel
674
+ })
675
+ ]
676
+ }) : null
677
+ ]
678
+ }),
679
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
680
+ className: "vdev-tips",
681
+ style: styles.tips,
682
+ children: [
683
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
684
+ className: "vdev-tips-title",
685
+ style: styles.tipsTitle,
686
+ children: "Next Steps:"
687
+ }),
688
+ setupGuide ? /*#__PURE__*/ (0, jsx_runtime.jsx)("pre", {
689
+ className: "vdev-code-block",
690
+ style: styles.codeBlock,
691
+ children: setupGuide.steps.map((step, idx)=>{
692
+ const stepKey = `step-${idx}`;
693
+ const commentIdx = step.indexOf('//');
694
+ if (-1 === commentIdx) return /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
695
+ children: step || ' '
696
+ }, stepKey);
697
+ const codePart = step.substring(0, commentIdx);
698
+ const commentPart = step.substring(commentIdx);
699
+ return /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
700
+ children: [
701
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
702
+ children: codePart
703
+ }),
704
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
705
+ className: "vdev-code-comment",
706
+ style: styles.codeComment,
707
+ children: commentPart
708
+ })
709
+ ]
710
+ }, stepKey);
711
+ })
712
+ }) : /*#__PURE__*/ (0, jsx_runtime.jsxs)("ul", {
713
+ className: "vdev-list",
714
+ style: styles.list,
715
+ children: [
716
+ isModuleFetchError ? /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
717
+ children: [
718
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("li", {
719
+ className: "vdev-li",
720
+ style: styles.li,
721
+ children: [
722
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("b", {
723
+ children: "Verify Path"
724
+ }),
725
+ ": check the entry mapping for",
726
+ ' ',
727
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
728
+ className: "vdev-code",
729
+ style: styles.code,
730
+ children: componentNameLabel || 'this component'
731
+ }),
732
+ ' ',
733
+ "in",
734
+ ' ',
735
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
736
+ className: "vdev-code",
737
+ style: styles.code,
738
+ children: "vite.config.ts"
739
+ }),
740
+ "."
741
+ ]
742
+ }),
743
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("li", {
744
+ className: "vdev-li",
745
+ style: styles.li,
746
+ children: [
747
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("b", {
748
+ children: "Check Terminal"
749
+ }),
750
+ ": look at the terminal where",
751
+ ' ',
752
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
753
+ className: "vdev-code",
754
+ style: styles.code,
755
+ children: currentOrigin
756
+ }),
757
+ ' ',
758
+ "is running for build errors."
759
+ ]
760
+ }),
761
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("li", {
762
+ className: "vdev-li",
763
+ style: styles.li,
764
+ children: [
765
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("b", {
766
+ children: "Check Export"
767
+ }),
768
+ ": ensure the entry module exports a React component (default export recommended)."
769
+ ]
770
+ })
771
+ ]
772
+ }) : null,
773
+ isComponentNotFound ? /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
774
+ children: [
775
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("li", {
776
+ className: "vdev-li",
777
+ style: styles.li,
778
+ children: [
779
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("b", {
780
+ children: "Update Config"
781
+ }),
782
+ ": map",
783
+ ' ',
784
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
785
+ className: "vdev-code",
786
+ style: styles.code,
787
+ children: componentNameLabel
788
+ }),
789
+ ' ',
790
+ "in",
791
+ ' ',
792
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
793
+ className: "vdev-code",
794
+ style: styles.code,
795
+ children: "devComponentMap"
796
+ }),
797
+ "."
798
+ ]
799
+ }),
800
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("li", {
801
+ className: "vdev-li",
802
+ style: styles.li,
803
+ children: [
804
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("b", {
805
+ children: "Wildcard Fallback"
806
+ }),
807
+ ": add",
808
+ ' ',
809
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
810
+ className: "vdev-code",
811
+ style: styles.code,
812
+ children: "'*': '/'"
813
+ }),
814
+ ' ',
815
+ "to map all components to the default entry."
816
+ ]
817
+ })
818
+ ]
819
+ }) : null,
820
+ isContractError ? /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
821
+ children: [
822
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("li", {
823
+ className: "vdev-li",
824
+ style: styles.li,
825
+ children: [
826
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("b", {
827
+ children: "Check Server"
828
+ }),
829
+ ": ensure your Vite server is running at",
830
+ ' ',
831
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
832
+ className: "vdev-code",
833
+ style: styles.code,
834
+ children: currentOrigin
835
+ }),
836
+ "."
837
+ ]
838
+ }),
839
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("li", {
840
+ className: "vdev-li",
841
+ style: styles.li,
842
+ children: [
843
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("b", {
844
+ children: "Verify Origin"
845
+ }),
846
+ ": confirm localStorage key",
847
+ ' ',
848
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
849
+ className: "vdev-code",
850
+ style: styles.code,
851
+ children: "VITE_DEV_SERVER_ORIGIN"
852
+ }),
853
+ ' ',
854
+ "is set to",
855
+ ' ',
856
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("code", {
857
+ className: "vdev-code",
858
+ style: styles.code,
859
+ children: currentOrigin
860
+ }),
861
+ "."
862
+ ]
863
+ }),
864
+ /*#__PURE__*/ (0, jsx_runtime.jsxs)("li", {
865
+ className: "vdev-li",
866
+ style: styles.li,
867
+ children: [
868
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("b", {
869
+ children: "Open Debug Panel"
870
+ }),
871
+ ":",
872
+ ' ',
873
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("a", {
874
+ className: "vdev-link",
875
+ style: styles.link,
876
+ href: debugPanelUrl,
877
+ target: "_blank",
878
+ rel: "noreferrer",
879
+ children: debugPanelUrl
880
+ })
881
+ ]
882
+ })
883
+ ]
884
+ }) : null,
885
+ isModuleFetchError || isComponentNotFound || isContractError ? null : /*#__PURE__*/ (0, jsx_runtime.jsxs)("li", {
886
+ className: "vdev-li",
887
+ style: styles.li,
888
+ children: [
889
+ "Open Debug Panel:",
890
+ ' ',
891
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("a", {
892
+ className: "vdev-link",
893
+ style: styles.link,
894
+ href: debugPanelUrl,
895
+ target: "_blank",
896
+ rel: "noreferrer",
897
+ children: debugPanelUrl
898
+ })
899
+ ]
900
+ })
901
+ ]
902
+ })
903
+ ]
904
+ })
905
+ ]
906
+ })
907
+ ]
908
+ });
909
+ }
910
+ function ReactLoader(props) {
911
+ const { url, origin, name, componentProps, contractEndpoint, loading, renderError, externalError } = props;
912
+ const state = useReactLoader({
913
+ url,
914
+ origin,
915
+ name,
916
+ componentProps,
917
+ contractEndpoint
918
+ });
919
+ const defaultLoading = /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
920
+ children: "Loading..."
921
+ });
922
+ const renderErrorNode = (0, external_React_.useCallback)((err)=>{
923
+ if (renderError) return renderError(err);
924
+ const isLoaderErrorObject = !(err instanceof Error);
925
+ const errorMessage = err.message || String(err);
926
+ const currentOrigin = (isLoaderErrorObject ? err.origin : void 0) || origin || (url ? getOriginFromFinalJsUrl(url) : '');
927
+ const componentName = (isLoaderErrorObject ? err.componentName : void 0) || name;
928
+ const setupGuide = isLoaderErrorObject ? err.setupGuide : void 0;
929
+ const statusCode = isLoaderErrorObject ? err.statusCode : err.statusCode;
930
+ return /*#__PURE__*/ (0, jsx_runtime.jsx)(InlineViteErrorView, {
931
+ errorMessage: errorMessage,
932
+ currentOrigin: currentOrigin,
933
+ componentName: componentName,
934
+ setupGuide: setupGuide,
935
+ statusCode: statusCode
936
+ });
937
+ }, [
938
+ renderError,
939
+ name,
940
+ origin,
941
+ url
942
+ ]);
943
+ if (externalError) return /*#__PURE__*/ (0, jsx_runtime.jsx)(jsx_runtime.Fragment, {
944
+ children: renderErrorNode(externalError)
945
+ });
946
+ if (state.error) return /*#__PURE__*/ (0, jsx_runtime.jsx)(jsx_runtime.Fragment, {
947
+ children: renderErrorNode(state.error)
948
+ });
949
+ return /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
950
+ children: [
951
+ /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
952
+ ref: state.containerRef,
953
+ className: "vdev-loader-container",
954
+ "data-is": "ReactLoader"
955
+ }),
956
+ state.isReady ? null : loading ?? defaultLoading
957
+ ]
958
+ });
959
+ }
960
+ })();
961
+ return __webpack_exports__;
962
+ })());
package/dist/index.umd.js.LICENSE.txt ADDED
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @license React
3
+ * react-jsx-runtime.production.min.js
4
+ *
5
+ * Copyright (c) Facebook, Inc. and its affiliates.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dev-to/react-loader",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -9,7 +9,8 @@
9
9
  ".": {
10
10
  "types": "./dist/index.d.ts",
11
11
  "import": "./dist/index.js"
12
- }
12
+ },
13
+ "./umd": "./dist/index.umd.js"
13
14
  },
14
15
  "files": [
15
16
  "dist"
@@ -28,7 +29,7 @@
28
29
  "access": "public"
29
30
  },
30
31
  "dependencies": {
31
- "@dev-to/react-shared": "0.1.0"
32
+ "@dev-to/react-shared": "0.1.1"
32
33
  },
33
34
  "scripts": {
34
35
  "build": "rslib build",