@dev-to/react-plugin 0.4.0 → 1.0.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 (12) hide show
  1. package/README.md +18 -7
  2. package/dist/constants.d.ts +13 -10
  3. package/dist/constants.d.ts.map +1 -1
  4. package/dist/debugTools.d.ts.map +1 -1
  5. package/dist/index.d.ts +3 -3
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +152 -73
  8. package/dist/plugin.d.ts +42 -4
  9. package/dist/plugin.d.ts.map +1 -1
  10. package/dist/types.d.ts +71 -13
  11. package/dist/types.d.ts.map +1 -1
  12. package/package.json +2 -2
package/README.md CHANGED
@@ -31,7 +31,7 @@ export default defineConfig({
31
31
  })
32
32
  ```
33
33
 
34
- ### devComponentMap 形态
34
+ ### components 参数形态
35
35
 
36
36
  - `devToReactPlugin()`：通配符模式（默认 `'*': '/'`），便于开发；但 `vite build --mode lib` 需要显式 componentName。
37
37
  - `devToReactPlugin('MyCard')`：字符串快捷模式，等价于 `{ MyCard: '/' }`。
@@ -39,18 +39,29 @@ export default defineConfig({
39
39
 
40
40
  ## 稳定桥接路径
41
41
 
42
- 插件会提供以下稳定路径（下划线版本）：
42
+ 插件会提供以下稳定路径（v2.0+ 统一命名空间）：
43
43
 
44
- - Contract：`/__dev_to_react__/contract.js`
45
- - Init（安装 HMR + React Refresh preamble）：`/__dev_to_react__/init.js`
46
- - React Runtime（React + ReactDOMClient）：`/__dev_to_react__/react-runtime.js`
47
- - Debug：`/__dev_to_react__/debug.html` / `debug.json`
44
+ ### 框架无关端点（Framework-Agnostic）
45
+ - **Discovery** (新): `/__dev_to__/discovery.json` - 统一发现端点，包含框架信息、服务器元数据、所有可用端点
46
+ - **Debug HTML**: `/__dev_to__/debug.html` - 可视化调试面板
47
+ - **Debug JSON**: `/__dev_to__/debug.json` - JSON 格式的调试信息
48
+
49
+ ### React 专用端点（React-Specific）
50
+ - **Contract** (兼容): `/__dev_to__/react/contract.js` - 桥接合约
51
+ - **Init**: `/__dev_to__/react/init.js` - 安装 HMR + React Refresh preamble
52
+ - **Runtime**: `/__dev_to__/react/runtime.js` - React + ReactDOMClient
53
+ - **Loader UMD**: `/__dev_to__/react/loader.js` - ReactLoader UMD 构建
54
+ - **Component Loaders**: `/__dev_to__/react/loader/{ComponentName}.js` - 单组件加载器
48
55
 
49
56
  这些路径与事件名常量集中在 `@dev-to/react-shared`，用于保证 Vite 侧与宿主侧协议一致。
50
57
 
58
+ ### HMR 事件
59
+ - Full Reload: `dev_to:react:full-reload`
60
+ - HMR Update: `dev_to:react:hmr-update`
61
+
51
62
  ## 生产构建（Library Mode）
52
63
 
53
- 执行 `vite build --mode lib` 时，插件会按 `devComponentMap` 为每个组件产出一个 UMD bundle，默认输出到 `dist/<component>/`。
64
+ 执行 `vite build --mode lib` 时，插件会按 `components` 参数为每个组件产出一个 UMD bundle，默认输出到 `dist/<component>/`。
54
65
 
55
66
  > 提示：`'*': '/'` 的通配符模式仅适合开发；lib 构建请显式列出组件名。
56
67
 
package/dist/constants.d.ts CHANGED
@@ -1,12 +1,15 @@
1
1
  export declare const PLUGIN_NAME: "dev_to_react";
2
- export declare const PLUGIN_LOG_PREFIX: "[dev_to_react]";
3
- export declare const STABLE_BASE_PATH: "/__dev_to_react__";
4
- export declare const STABLE_CONTRACT_PATH: "/__dev_to_react__/contract.js";
5
- export declare const STABLE_INIT_PATH: "/__dev_to_react__/init.js";
6
- export declare const STABLE_REACT_RUNTIME_PATH: "/__dev_to_react__/react-runtime.js";
7
- export declare const STABLE_DEBUG_HTML_PATH: "/__dev_to_react__/debug.html";
8
- export declare const STABLE_DEBUG_JSON_PATH: "/__dev_to_react__/debug.json";
9
- export declare const STABLE_LOADER_BASE_PATH: "/__dev_to_react__/loader";
10
- export declare const EVENT_FULL_RELOAD: "dev_to_react:full-reload";
11
- export declare const EVENT_HMR_UPDATE: "dev_to_react:hmr-update";
2
+ export declare const PLUGIN_LOG_PREFIX: "[dev_to:react]";
3
+ export declare const STABLE_BASE_PATH: "/__dev_to__";
4
+ export declare const STABLE_DISCOVERY_PATH: "/__dev_to__/discovery.json";
5
+ export declare const STABLE_DEBUG_HTML_PATH: "/__dev_to__/debug.html";
6
+ export declare const STABLE_DEBUG_JSON_PATH: "/__dev_to__/debug.json";
7
+ export declare const STABLE_REACT_BASE_PATH: "/__dev_to__/react";
8
+ export declare const STABLE_CONTRACT_PATH: "/__dev_to__/react/contract.js";
9
+ export declare const STABLE_INIT_PATH: "/__dev_to__/react/init.js";
10
+ export declare const STABLE_REACT_RUNTIME_PATH: "/__dev_to__/react/runtime.js";
11
+ export declare const STABLE_LOADER_UMD_PATH: "/__dev_to__/react/loader.js";
12
+ export declare const STABLE_LOADER_BASE_PATH: "/__dev_to__/react/loader";
13
+ export declare const EVENT_FULL_RELOAD: "dev_to:react:full-reload";
14
+ export declare const EVENT_HMR_UPDATE: "dev_to:react:hmr-update";
12
15
  //# sourceMappingURL=constants.d.ts.map
package/dist/constants.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,WAAW,gBAAyB,CAAA;AACjD,eAAO,MAAM,iBAAiB,kBAA8B,CAAA;AAE5D,eAAO,MAAM,gBAAgB,qBAAyB,CAAA;AACtD,eAAO,MAAM,oBAAoB,iCAA6B,CAAA;AAC9D,eAAO,MAAM,gBAAgB,6BAAyB,CAAA;AACtD,eAAO,MAAM,yBAAyB,sCAAkC,CAAA;AACxE,eAAO,MAAM,sBAAsB,gCAA+B,CAAA;AAClE,eAAO,MAAM,sBAAsB,gCAA+B,CAAA;AAClE,eAAO,MAAM,uBAAuB,4BAAgC,CAAA;AAEpE,eAAO,MAAM,iBAAiB,4BAAiC,CAAA;AAC/D,eAAO,MAAM,gBAAgB,2BAAgC,CAAA"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,WAAW,gBAA2D,CAAA;AACnF,eAAO,MAAM,iBAAiB,kBAA6D,CAAA;AAG3F,eAAO,MAAM,gBAAgB,eAAmB,CAAA;AAChD,eAAO,MAAM,qBAAqB,8BAAwB,CAAA;AAC1D,eAAO,MAAM,sBAAsB,0BAAyB,CAAA;AAC5D,eAAO,MAAM,sBAAsB,0BAAyB,CAAA;AAG5D,eAAO,MAAM,sBAAsB,qBAAyB,CAAA;AAC5D,eAAO,MAAM,oBAAoB,iCAA6B,CAAA;AAC9D,eAAO,MAAM,gBAAgB,6BAAyB,CAAA;AACtD,eAAO,MAAM,yBAAyB,gCAA4B,CAAA;AAClE,eAAO,MAAM,sBAAsB,+BAA+B,CAAA;AAClE,eAAO,MAAM,uBAAuB,4BAAgC,CAAA;AAEpE,eAAO,MAAM,iBAAiB,4BAAiC,CAAA;AAC/D,eAAO,MAAM,gBAAgB,2BAAgC,CAAA"}
package/dist/debugTools.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"debugTools.d.ts","sourceRoot":"","sources":["../src/debugTools.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,MAAM,CAAA;AAEzC,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAG/H,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,cAAc,CAAA;IACxB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,iBAAiB,CAAA;IACxB,cAAc,EAAE,0BAA0B,CAAA;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAqFD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,QAwUxG"}
1
+ {"version":3,"file":"debugTools.d.ts","sourceRoot":"","sources":["../src/debugTools.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,MAAM,CAAA;AAEzC,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAA;AAG/H,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,cAAc,CAAA;IACxB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,iBAAiB,CAAA;IACxB,cAAc,EAAE,0BAA0B,CAAA;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AA4ID,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,QA0YxG"}
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { EVENT_FULL_RELOAD, EVENT_HMR_UPDATE, PLUGIN_LOG_PREFIX, PLUGIN_NAME, STABLE_BASE_PATH, STABLE_CONTRACT_PATH, STABLE_DEBUG_HTML_PATH, STABLE_DEBUG_JSON_PATH, STABLE_INIT_PATH, STABLE_REACT_RUNTIME_PATH, } from './constants.js';
2
- export { devToReactPlugin, viteHostReactBridgePlugin } from './plugin.js';
3
- export type { BridgeContract, BridgeStats, BridgeStatsBucket, DebugStartupState, DevComponentAudit, DevComponentMapInput, DevToReactPluginOptions, ResolvedDevComponentConfig, ViteHostReactBridgePluginOptions, } from './types.js';
1
+ export { EVENT_FULL_RELOAD, EVENT_HMR_UPDATE, PLUGIN_LOG_PREFIX, PLUGIN_NAME, STABLE_BASE_PATH, STABLE_CONTRACT_PATH, STABLE_DEBUG_HTML_PATH, STABLE_DEBUG_JSON_PATH, STABLE_DISCOVERY_PATH, STABLE_INIT_PATH, STABLE_LOADER_BASE_PATH, STABLE_LOADER_UMD_PATH, STABLE_REACT_BASE_PATH, STABLE_REACT_RUNTIME_PATH, } from './constants.js';
2
+ export { devToReactPlugin } from './plugin.js';
3
+ export type { BridgeContract, BridgeStats, BridgeStatsBucket, DebugStartupState, DevComponentAudit, DevComponentMapInput, DevToReactPluginOptions, ResolvedDevComponentConfig, } from './types.js';
4
4
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,sBAAsB,EACtB,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,gBAAgB,CAAA;AAEvB,OAAO,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAA;AAEzE,YAAY,EACV,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,0BAA0B,EAC1B,gCAAgC,GACjC,MAAM,YAAY,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,sBAAsB,EACtB,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,gBAAgB,CAAA;AAEvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAE9C,YAAY,EACV,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,0BAA0B,GAC3B,MAAM,YAAY,CAAA"}
package/dist/index.js CHANGED
@@ -1,21 +1,25 @@
1
- import { DEV_TO_REACT_BASE_PATH, DEV_TO_REACT_CONTRACT_KEY, DEV_TO_REACT_CONTRACT_PATH, DEV_TO_REACT_DEBUG_HTML_PATH, DEV_TO_REACT_DEBUG_JSON_PATH, DEV_TO_REACT_DEBUG_STATE_KEY, DEV_TO_REACT_DID_OPEN_BROWSER_KEY, DEV_TO_REACT_EVENT_FULL_RELOAD, DEV_TO_REACT_EVENT_HMR_UPDATE, DEV_TO_REACT_INIT_PATH, DEV_TO_REACT_LOADER_BASE_PATH, DEV_TO_REACT_NAMESPACE, DEV_TO_REACT_ORIGIN_KEY, DEV_TO_REACT_REACT_RUNTIME_PATH, DEV_TO_REACT_RESOLVE_ASSET_KEY } from "@dev-to/react-shared";
1
+ import { DEV_TO_BASE_PATH, DEV_TO_DEBUG_HTML_PATH, DEV_TO_DEBUG_JSON_PATH, DEV_TO_DISCOVERY_PATH, DEV_TO_NAMESPACE, DEV_TO_REACT_BASE_PATH, DEV_TO_REACT_CONTRACT_KEY, DEV_TO_REACT_CONTRACT_PATH, DEV_TO_REACT_DEBUG_STATE_KEY, DEV_TO_REACT_DID_OPEN_BROWSER_KEY, DEV_TO_REACT_EVENT_FULL_RELOAD, DEV_TO_REACT_EVENT_HMR_UPDATE, DEV_TO_REACT_INIT_PATH, DEV_TO_REACT_LOADER_BASE_PATH, DEV_TO_REACT_LOADER_UMD_PATH, DEV_TO_REACT_NAMESPACE, DEV_TO_REACT_ORIGIN_KEY, DEV_TO_REACT_RESOLVE_ASSET_KEY, DEV_TO_REACT_RUNTIME_PATH } from "@dev-to/react-shared";
2
2
  import node_fs from "node:fs";
3
3
  import node_path from "node:path";
4
4
  import picocolors from "picocolors";
5
5
  import { mergeConfig } from "vite";
6
6
  import { exec } from "node:child_process";
7
+ import { createRequire } from "node:module";
7
8
  import { fileURLToPath } from "node:url";
8
9
  import node_os from "node:os";
9
10
  import typescript from "typescript";
10
- const PLUGIN_NAME = DEV_TO_REACT_NAMESPACE;
11
- const constants_PLUGIN_LOG_PREFIX = `[${PLUGIN_NAME}]`;
12
- const STABLE_BASE_PATH = DEV_TO_REACT_BASE_PATH;
11
+ const PLUGIN_NAME = `${DEV_TO_NAMESPACE}_${DEV_TO_REACT_NAMESPACE}`;
12
+ const constants_PLUGIN_LOG_PREFIX = `[${DEV_TO_NAMESPACE}:${DEV_TO_REACT_NAMESPACE}]`;
13
+ const STABLE_BASE_PATH = DEV_TO_BASE_PATH;
14
+ const STABLE_DISCOVERY_PATH = DEV_TO_DISCOVERY_PATH;
15
+ const STABLE_DEBUG_HTML_PATH = DEV_TO_DEBUG_HTML_PATH;
16
+ const STABLE_DEBUG_JSON_PATH = DEV_TO_DEBUG_JSON_PATH;
17
+ const STABLE_REACT_BASE_PATH = DEV_TO_REACT_BASE_PATH;
13
18
  const constants_STABLE_CONTRACT_PATH = DEV_TO_REACT_CONTRACT_PATH;
14
19
  const STABLE_INIT_PATH = DEV_TO_REACT_INIT_PATH;
15
- const STABLE_REACT_RUNTIME_PATH = DEV_TO_REACT_REACT_RUNTIME_PATH;
16
- const STABLE_DEBUG_HTML_PATH = DEV_TO_REACT_DEBUG_HTML_PATH;
17
- const STABLE_DEBUG_JSON_PATH = DEV_TO_REACT_DEBUG_JSON_PATH;
18
- const STABLE_LOADER_BASE_PATH = DEV_TO_REACT_LOADER_BASE_PATH;
20
+ const STABLE_REACT_RUNTIME_PATH = DEV_TO_REACT_RUNTIME_PATH;
21
+ const STABLE_LOADER_UMD_PATH = DEV_TO_REACT_LOADER_UMD_PATH;
22
+ const constants_STABLE_LOADER_BASE_PATH = DEV_TO_REACT_LOADER_BASE_PATH;
19
23
  const EVENT_FULL_RELOAD = DEV_TO_REACT_EVENT_FULL_RELOAD;
20
24
  const EVENT_HMR_UPDATE = DEV_TO_REACT_EVENT_HMR_UPDATE;
21
25
  function renderDebugHtml(params) {
@@ -243,7 +247,7 @@ function renderDebugHtml(params) {
243
247
  ${Object.entries(resolvedDevComponentMap).map(([name, entry])=>{
244
248
  const abs = entryPathMap[name];
245
249
  const displayPath = abs ? getShortPath(abs) : entry;
246
- const wrapperUrl = (originCandidates[0] || 'http://localhost:5173') + '/__dev_to_react__/loader/' + name + '.js';
250
+ const wrapperUrl = (originCandidates[0] || 'http://localhost:5173') + '/__dev_to__/react/loader/' + name + '.js';
247
251
  const entryHtml = abs ? '<a href="' + toVsCodeUrl(abs) + '" class="link-code" title="点击在 IDE 中打开"><code>' + escapeHtml(displayPath) + '</code></a>' : '<code>' + escapeHtml(entry) + '</code>';
248
252
  return '<tr><td><code class="code-name">' + name + "</code></td><td>" + entryHtml + '</td><td><div style="display: flex; align-items: center; gap: 6px;"><code style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;">' + escapeHtml(wrapperUrl) + '</code><button class="copy-wrapper-btn" data-url="' + wrapperUrl + '" style="padding: 2px 8px; font-size: 11px; border: 1px solid var(--b); background: #fff; border-radius: 4px; cursor: pointer; color: var(--t); transition: .2s;" title="复制包装地址">\uD83D\uDCCB</button></div></td></tr>';
249
253
  }).join('')}
@@ -255,14 +259,14 @@ function renderDebugHtml(params) {
255
259
  <summary>插件参数与配置说明 (Plugin API)</summary>
256
260
  <div class="parameter-desc">
257
261
  <div style="margin-bottom: 24px;">
258
- <pre style="background: #ebf8ff; color: #2c5282; border-color: #bee3f8; font-size: 14px; font-weight: 600;">reactHmrHostPlugin(devComponentMap?, options?)</pre>
262
+ <pre style="background: #ebf8ff; color: #2c5282; border-color: #bee3f8; font-size: 14px; font-weight: 600;">devToReactPlugin(components?, options?)</pre>
259
263
  <div class="muted" style="margin-top: 8px;">
260
264
  支持单组件简写、对象全量映射，以及透传 Vite 原生配置。
261
265
  </div>
262
266
  </div>
263
267
 
264
268
  <div class="parameter-item">
265
- <span class="parameter-name">1. devComponentMap (第一个参数)</span>
269
+ <span class="parameter-name">1. components (第一个参数)</span>
266
270
  <div class="parameter-info">
267
271
  定义组件名与本地入口文件的映射：
268
272
  <ul style="margin-top: 8px;">
@@ -271,10 +275,10 @@ function renderDebugHtml(params) {
271
275
  <li><b>多组件映射</b>：支持具体的相对/绝对路径。</li>
272
276
  </ul>
273
277
  <pre><span class="cmt">// Option 1: Shorthand (Default)</span>
274
- reactHmrHostPlugin(<span class="str">'Demo'</span>)
278
+ devToReactPlugin(<span class="str">'Demo'</span>)
275
279
 
276
280
  <span class="cmt">// Option 2: Explicit Mapping with Wildcard</span>
277
- reactHmrHostPlugin({
281
+ devToReactPlugin({
278
282
  <span class="str">'*'</span>: <span class="str">'/'</span>, <span class="cmt">// Wildcard to default entry</span>
279
283
  <span class="str">'Card'</span>: <span class="str">'src/Card.tsx'</span> <span class="cmt">// Specific file</span>
280
284
  })</pre>
@@ -295,8 +299,8 @@ reactHmrHostPlugin({
295
299
  <li>详细配置请参考 <a href="https://cn.vite.dev/config/shared-options#css-modules" target="_blank" style="color:#3b82f6;">Vite CSS 官方文档 ↗</a></li>
296
300
  </ul>
297
301
  <pre><span class="cmt">// Disable plugin CSS config or provide custom overrides</span>
298
- reactHmrHostPlugin(<span class="str">'Demo'</span>, { css: <span class="kw">false</span> })
299
- reactHmrHostPlugin(<span class="str">'Demo'</span>, { css: { ... } })</pre>
302
+ devToReactPlugin(<span class="str">'Demo'</span>, { css: <span class="kw">false</span> })
303
+ devToReactPlugin(<span class="str">'Demo'</span>, { css: { ... } })</pre>
300
304
  </li>
301
305
  <li style="margin-top: 12px;"><code class="kw">build</code>:
302
306
  <ul>
@@ -308,7 +312,7 @@ globals: { react: <span class="str">'React'</span>, <span class="str">'react-dom
308
312
  <li>详细配置请参考 <a href="https://cn.vite.dev/config/build-options" target="_blank" style="color:#3b82f6;">Vite 构建官方文档 ↗</a></li>
309
313
  </ul>
310
314
  <pre><span class="cmt">// Example: Disable asset inlining during build</span>
311
- reactHmrHostPlugin(<span class="str">'Demo'</span>, {
315
+ devToReactPlugin(<span class="str">'Demo'</span>, {
312
316
  build: { assetsInlineLimit: <span class="val">0</span> }
313
317
  })</pre>
314
318
  </li>
@@ -318,7 +322,7 @@ reactHmrHostPlugin(<span class="str">'Demo'</span>, {
318
322
  <li>是否在启动 Vite 开发服务器后自动在浏览器中打开此调试面板。</li>
319
323
  </ul>
320
324
  <pre><span class="cmt">// Enable auto-open</span>
321
- reactHmrHostPlugin(<span class="str">'Demo'</span>, { open: <span class="kw">true</span> })</pre>
325
+ devToReactPlugin(<span class="str">'Demo'</span>, { open: <span class="kw">true</span> })</pre>
322
326
  </li>
323
327
  </ul>
324
328
  </div>
@@ -333,7 +337,7 @@ reactHmrHostPlugin(<span class="str">'Demo'</span>, { open: <span class="kw">tru
333
337
 
334
338
  <div class="info-grid">
335
339
  <div class="info-label">端点:</div>
336
- <div class="info-value"><code>/__dev_to_react__/loader/{ComponentName}.js</code></div>
340
+ <div class="info-value"><code>/__dev_to__/react/loader/{ComponentName}.js</code></div>
337
341
  <div class="info-label">作用:</div>
338
342
  <div class="info-value">自动将组件导出为 React 组件实例，无需宿主集成 @dev-to/react-loader</div>
339
343
  <div class="info-label">依赖:</div>
@@ -356,7 +360,7 @@ reactHmrHostPlugin(<span class="str">'Demo'</span>, { open: <span class="kw">tru
356
360
  <span class="kw">&lt;script&gt;</span> <span class="kw">src</span>=<span class="str">"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"</span> <span class="kw">&lt;/script&gt;</span>
357
361
 
358
362
  <span class="cmt">// 2. 加载包装器脚本</span>
359
- <span class="kw">&lt;script&gt;</span> <span class="kw">src</span>=<span class="str">"\${originCandidates[0] || 'http://localhost:5173'}/__dev_to_react__/loader/{ComponentName}.js"</span> <span class="kw">&lt;/script&gt;</span>
363
+ <span class="kw">&lt;script&gt;</span> <span class="kw">src</span>=<span class="str">"\${originCandidates[0] || 'http://localhost:5173'}/__dev_to__/react/loader/{ComponentName}.js"</span> <span class="kw">&lt;/script&gt;</span>
360
364
 
361
365
  <span class="cmt">// 3. 直接作为 React 组件使用</span>
362
366
  <span class="kw">const</span> root = ReactDOM.createRoot(document.getElementById(<span class="str">'app'</span>));
@@ -900,7 +904,7 @@ function createLoaderUmdWrapper(options) {
900
904
  * <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
901
905
  *
902
906
  * 2. Load this wrapper:
903
- * <script src="${origin}/__dev_to_react__/loader/${componentName}.js"></script>
907
+ * <script src="${origin}/__dev_to__/react/loader/${componentName}.js"></script>
904
908
  *
905
909
  * 3. Use as a React component:
906
910
  *
@@ -1140,6 +1144,27 @@ function openBrowser(url) {
1140
1144
  if ('win32' === process.platform) return void exec(`start "" "${url}"`);
1141
1145
  exec(`xdg-open "${url}"`);
1142
1146
  }
1147
+ function getReactLoaderUmdPath() {
1148
+ const require = createRequire(import.meta.url);
1149
+ try {
1150
+ const loaderPkgPath = require.resolve('@dev-to/react-loader/package.json');
1151
+ const loaderPkgDir = node_path.dirname(loaderPkgPath);
1152
+ const umdPath = node_path.join(loaderPkgDir, 'dist/index.umd.js');
1153
+ if (node_fs.existsSync(umdPath)) return umdPath;
1154
+ } catch {}
1155
+ try {
1156
+ const loaderMainPath = require.resolve('@dev-to/react-loader');
1157
+ const loaderPkgDir = node_path.dirname(node_path.dirname(loaderMainPath));
1158
+ const umdPath = node_path.join(loaderPkgDir, 'dist/index.umd.js');
1159
+ if (node_fs.existsSync(umdPath)) return umdPath;
1160
+ } catch {}
1161
+ try {
1162
+ const __dirname = node_path.dirname(fileURLToPath(import.meta.url));
1163
+ const umdPath = node_path.resolve(__dirname, '../../react-loader/dist/index.umd.js');
1164
+ if (node_fs.existsSync(umdPath)) return umdPath;
1165
+ } catch {}
1166
+ throw new Error(`${constants_PLUGIN_LOG_PREFIX} react-loader UMD not found. Run 'pnpm build' in react-loader package.`);
1167
+ }
1143
1168
  const globalState = globalThis;
1144
1169
  let didOpenBrowser = Boolean(globalState[DEV_TO_REACT_DID_OPEN_BROWSER_KEY]);
1145
1170
  function installDebugTools(server, ctx, state) {
@@ -1155,24 +1180,17 @@ function installDebugTools(server, ctx, state) {
1155
1180
  if ('number' == typeof server.config.server.port) return server.config.server.port;
1156
1181
  return 5173;
1157
1182
  })();
1158
- const lanHosts = getLanIPv4Hosts();
1159
- const candidateHosts = [
1160
- 'localhost',
1161
- '127.0.0.1',
1162
- ...lanHosts
1163
- ];
1164
- const urls = candidateHosts.map((h)=>`${proto}://${h}:${port}${STABLE_DEBUG_HTML_PATH}`);
1165
1183
  const logger = server.config.logger;
1166
1184
  const info = 'function' == typeof logger?.info ? logger.info.bind(logger) : console.log;
1167
- info('');
1168
- info(`${constants_PLUGIN_LOG_PREFIX} Debug panel:`);
1169
- urls.forEach((u)=>info(` ${picocolors.cyan(u)}`));
1170
- info(` JSON: ${picocolors.cyan(`${proto}://localhost:${port}${STABLE_DEBUG_JSON_PATH}`)}`);
1171
- info('');
1185
+ setImmediate(()=>{
1186
+ info('');
1187
+ info(` ${picocolors.yellowBright('➜')} ${picocolors.bgCyanBright(picocolors.yellow(picocolors.bold(' DevTo ')))} ${picocolors.cyan(`${proto}://localhost:${port}${DEV_TO_BASE_PATH}`)}`);
1188
+ });
1172
1189
  if (ctx.open && !didOpenBrowser) {
1173
1190
  didOpenBrowser = true;
1174
1191
  globalState[DEV_TO_REACT_DID_OPEN_BROWSER_KEY] = true;
1175
- openBrowser(urls[0]);
1192
+ const debugUrl = `${proto}://localhost:${port}${STABLE_DEBUG_HTML_PATH}`;
1193
+ openBrowser(debugUrl);
1176
1194
  }
1177
1195
  };
1178
1196
  try {
@@ -1201,6 +1219,73 @@ function installDebugTools(server, ctx, state) {
1201
1219
  res.end();
1202
1220
  return;
1203
1221
  }
1222
+ if (url.startsWith(STABLE_DISCOVERY_PATH)) {
1223
+ const isHttps = !!server.config.server.https;
1224
+ const proto = isHttps ? 'https' : 'http';
1225
+ const addr = server.httpServer?.address();
1226
+ const actualPort = addr && 'object' == typeof addr ? addr.port : void 0;
1227
+ const lanHosts = getLanIPv4Hosts();
1228
+ const candidateHosts = [
1229
+ 'localhost',
1230
+ '127.0.0.1',
1231
+ ...lanHosts
1232
+ ];
1233
+ const originCandidates = candidateHosts.map((h)=>`${proto}://${h}${actualPort ? `:${actualPort}` : ''}`);
1234
+ const require = createRequire(import.meta.url);
1235
+ let reactVersion = '18.x';
1236
+ try {
1237
+ const reactPkgPath = require.resolve('react/package.json');
1238
+ const reactPkg = JSON.parse(node_fs.readFileSync(reactPkgPath, 'utf-8'));
1239
+ reactVersion = reactPkg.version || '18.x';
1240
+ } catch {}
1241
+ const components = {};
1242
+ for (const [name, entry] of Object.entries(ctx.contract?.dev?.componentMap || {}))components[name] = {
1243
+ name,
1244
+ entry,
1245
+ framework: 'react'
1246
+ };
1247
+ const discovery = {
1248
+ framework: {
1249
+ type: 'react',
1250
+ version: reactVersion
1251
+ },
1252
+ server: {
1253
+ host: String(server.config.server.host || 'localhost'),
1254
+ port: actualPort || server.config.server.port || 5173,
1255
+ protocol: proto,
1256
+ origins: originCandidates
1257
+ },
1258
+ endpoints: {
1259
+ discovery: STABLE_DISCOVERY_PATH,
1260
+ contract: constants_STABLE_CONTRACT_PATH,
1261
+ init: STABLE_INIT_PATH,
1262
+ runtime: STABLE_REACT_RUNTIME_PATH,
1263
+ debug: {
1264
+ html: STABLE_DEBUG_HTML_PATH,
1265
+ json: STABLE_DEBUG_JSON_PATH
1266
+ },
1267
+ loader: {
1268
+ base: constants_STABLE_LOADER_BASE_PATH,
1269
+ umd: STABLE_LOADER_UMD_PATH
1270
+ }
1271
+ },
1272
+ components,
1273
+ events: {
1274
+ fullReload: ctx.contract?.events?.fullReload || '',
1275
+ hmrUpdate: ctx.contract?.events?.hmrUpdate || ''
1276
+ },
1277
+ protocol: {
1278
+ version: '2.0.0',
1279
+ apiLevel: 1
1280
+ }
1281
+ };
1282
+ res.statusCode = 200;
1283
+ res.setHeader('Content-Type', 'application/json; charset=utf-8');
1284
+ res.setHeader('Access-Control-Allow-Origin', '*');
1285
+ res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
1286
+ res.end(JSON.stringify(discovery, null, 2));
1287
+ return;
1288
+ }
1204
1289
  if (url.startsWith(STABLE_DEBUG_JSON_PATH)) {
1205
1290
  const isHttps = !!server.config.server.https;
1206
1291
  const proto = isHttps ? 'https' : 'http';
@@ -1266,36 +1351,29 @@ function installDebugTools(server, ctx, state) {
1266
1351
  },
1267
1352
  tips: [
1268
1353
  '宿主侧需设置 localStorage.VITE_DEV_SERVER_ORIGIN（可从 originCandidates 里选择一个可访问的 origin）。',
1269
- 'devComponentMap 的 key 必须与后端返回的 componentName 完全一致（严格匹配）。',
1354
+ 'components 参数的 key 必须与后端返回的 componentName 完全一致（严格匹配）。',
1270
1355
  'Fast Refresh 关键：必须先 import init.js（安装 react-refresh preamble），再 import react-dom/client。',
1271
- '如需产出可分发 UMD 包：使用 `vite build --mode lib`（仅构建 componentMap 指定的组件，输出到 dist/<component>/）。'
1356
+ '如需产出可分发 UMD 包：使用 `vite build --mode lib`（仅构建 components 指定的组件，输出到 dist/<component>/）。'
1272
1357
  ]
1273
1358
  }, null, 2));
1274
1359
  return;
1275
1360
  }
1276
- if (pathname === `${STABLE_BASE_PATH}/react-loader.js`) try {
1277
- const __filename = fileURLToPath(import.meta.url);
1278
- const __dirname = node_path.dirname(__filename);
1279
- const reactLoaderUmdPath = node_path.resolve(__dirname, '../../react-loader/dist/index.umd.js');
1280
- if (node_fs.existsSync(reactLoaderUmdPath)) {
1281
- const umdCode = node_fs.readFileSync(reactLoaderUmdPath, 'utf-8');
1282
- res.statusCode = 200;
1283
- res.setHeader('Content-Type', "application/javascript; charset=utf-8");
1284
- res.setHeader('Access-Control-Allow-Origin', '*');
1285
- res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
1286
- res.end(umdCode);
1287
- return;
1288
- }
1289
- res.statusCode = 404;
1290
- res.end(`react-loader UMD not found at ${reactLoaderUmdPath}. Run 'pnpm build' in react-loader package.`);
1361
+ if (pathname === STABLE_LOADER_UMD_PATH) try {
1362
+ const reactLoaderUmdPath = getReactLoaderUmdPath();
1363
+ const umdCode = node_fs.readFileSync(reactLoaderUmdPath, 'utf-8');
1364
+ res.statusCode = 200;
1365
+ res.setHeader('Content-Type', "application/javascript; charset=utf-8");
1366
+ res.setHeader('Access-Control-Allow-Origin', '*');
1367
+ res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
1368
+ res.end(umdCode);
1291
1369
  return;
1292
1370
  } catch (error) {
1293
- res.statusCode = 500;
1294
- res.end(`Error loading react-loader UMD: ${error}`);
1371
+ res.statusCode = 404;
1372
+ res.end(`${error instanceof Error ? error.message : String(error)}`);
1295
1373
  return;
1296
1374
  }
1297
- if (pathname.startsWith(STABLE_LOADER_BASE_PATH)) {
1298
- const loaderPathPattern = new RegExp(`^${STABLE_LOADER_BASE_PATH}/([^/]+)\\.js$`);
1375
+ if (pathname.startsWith(constants_STABLE_LOADER_BASE_PATH)) {
1376
+ const loaderPathPattern = new RegExp(`^${constants_STABLE_LOADER_BASE_PATH}/([^/]+)\\.js$`);
1299
1377
  const match = pathname.match(loaderPathPattern);
1300
1378
  if (match) {
1301
1379
  const componentName = match[1];
@@ -1309,7 +1387,7 @@ function installDebugTools(server, ctx, state) {
1309
1387
  componentName,
1310
1388
  origin,
1311
1389
  contractEndpoint: constants_STABLE_CONTRACT_PATH,
1312
- reactLoaderUrl: `${origin}${STABLE_BASE_PATH}/react-loader.js`
1390
+ reactLoaderUrl: `${origin}${STABLE_LOADER_UMD_PATH}`
1313
1391
  });
1314
1392
  res.statusCode = 200;
1315
1393
  res.setHeader('Content-Type', "application/javascript; charset=utf-8");
@@ -1530,11 +1608,11 @@ function transformViteDevCssAssetUrls(code, id) {
1530
1608
  if (!/\.(css|less|sass|scss|styl|stylus)$/.test(cleanId)) return null;
1531
1609
  if (!code.includes('__vite__updateStyle') || !code.includes('const __vite__css')) return null;
1532
1610
  if (!/url\(\s*['"]?\//.test(code)) return null;
1533
- if (code.includes('__dev_to_react_css')) return null;
1611
+ if (code.includes('__dev_to__css')) return null;
1534
1612
  const updateCallRE = /__vite__updateStyle\(\s*__vite__id\s*,\s*__vite__css\s*\)/;
1535
1613
  if (!updateCallRE.test(code)) return null;
1536
1614
  const injected = `
1537
- const __dev_to_react_resolveAsset = (path) => {
1615
+ const __dev_to__resolveAsset = (path) => {
1538
1616
  if (!path) return path;
1539
1617
  if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('data:') || path.startsWith('blob:')) {
1540
1618
  return path;
@@ -1554,12 +1632,12 @@ const __dev_to_react_resolveAsset = (path) => {
1554
1632
  return path;
1555
1633
  }
1556
1634
  };
1557
- const __dev_to_react_css = __vite__css.replace(/url\\(\\s*(['"]?)(\\/(?!\\/)[^'")]+)\\1\\s*\\)/g, (_m, q, p) => {
1558
- const next = __dev_to_react_resolveAsset(p);
1635
+ const __dev_to__css = __vite__css.replace(/url\\(\\s*(['"]?)(\\/(?!\\/)[^'")]+)\\1\\s*\\)/g, (_m, q, p) => {
1636
+ const next = __dev_to__resolveAsset(p);
1559
1637
  return 'url(' + q + next + q + ')';
1560
1638
  });
1561
1639
  `;
1562
- const nextCode = code.replace(updateCallRE, `${injected}__vite__updateStyle(__vite__id, __dev_to_react_css)`);
1640
+ const nextCode = code.replace(updateCallRE, `${injected}__vite__updateStyle(__vite__id, __dev_to__css)`);
1563
1641
  return {
1564
1642
  code: nextCode,
1565
1643
  map: null
@@ -1580,7 +1658,7 @@ function createContractVirtualModuleCode(contract) {
1580
1658
  console.log('Events:', CONTRACT.events);
1581
1659
  console.log('Dev mode:', CONTRACT?.dev?.mode);
1582
1660
  console.log('Default entry:', CONTRACT?.dev?.defaultEntry);
1583
- console.log('devComponentMap keys:', Object.keys(CONTRACT?.dev?.componentMap || {}));
1661
+ console.log('Components:', Object.keys(CONTRACT?.dev?.componentMap || {}));
1584
1662
  console.log('Tip: open', ORIGIN + '${STABLE_DEBUG_HTML_PATH}');
1585
1663
  console.groupEnd();
1586
1664
  }
@@ -1680,7 +1758,9 @@ function createReactRuntimeVirtualModuleCode() {
1680
1758
  export default React;
1681
1759
  `;
1682
1760
  }
1683
- const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1761
+ function devToReactPlugin(components, options) {
1762
+ const componentsMap = components ?? {};
1763
+ const opts = options ?? {};
1684
1764
  const stats = {
1685
1765
  contract: {
1686
1766
  count: 0,
@@ -1700,7 +1780,7 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1700
1780
  };
1701
1781
  let configDir = process.cwd();
1702
1782
  let currentRootDir = configDir;
1703
- let resolvedConfig = resolveDevComponentConfig(currentRootDir, devComponentMap, configDir);
1783
+ let resolvedConfig = resolveDevComponentConfig(currentRootDir, componentsMap, configDir);
1704
1784
  let version = '0.0.0';
1705
1785
  try {
1706
1786
  const pkgPath = node_path.join(configDir, 'package.json');
@@ -1814,14 +1894,14 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1814
1894
  audit: resolvedConfig.audit,
1815
1895
  resolvedConfig,
1816
1896
  configDir,
1817
- open: options.open
1897
+ open: opts.open
1818
1898
  }, debugState);
1819
1899
  },
1820
1900
  config (userConfig, env) {
1821
1901
  const rootDir = configDir;
1822
1902
  if (rootDir !== currentRootDir) {
1823
1903
  currentRootDir = rootDir;
1824
- resolvedConfig = resolveDevComponentConfig(rootDir, devComponentMap, configDir);
1904
+ resolvedConfig = resolveDevComponentConfig(rootDir, componentsMap, configDir);
1825
1905
  const isDev = !isLibBuild(env);
1826
1906
  contract = createContract(resolvedConfig.componentMap, resolvedConfig.defaultEntryAbs, isDev);
1827
1907
  }
@@ -1836,11 +1916,11 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1836
1916
  }
1837
1917
  }
1838
1918
  };
1839
- if (false === options.css) next.css = void 0;
1840
- else if (options.css) next.css = mergeConfig({
1919
+ if (false === opts.css) next.css = void 0;
1920
+ else if (opts.css) next.css = mergeConfig({
1841
1921
  css: next.css
1842
1922
  }, {
1843
- css: options.css
1923
+ css: opts.css
1844
1924
  }).css;
1845
1925
  if (isLibBuild(env)) {
1846
1926
  const actualNames = Object.keys(contract.dev.componentMap).filter((n)=>'*' !== n);
@@ -1869,7 +1949,7 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1869
1949
  picked,
1870
1950
  componentMap: contract.dev.componentMap,
1871
1951
  resolvedConfig,
1872
- options,
1952
+ options: opts,
1873
1953
  userConfig
1874
1954
  });
1875
1955
  Object.assign(libBuildState, {
@@ -1901,7 +1981,7 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1901
1981
  if (nextConfigDir !== configDir) {
1902
1982
  configDir = nextConfigDir;
1903
1983
  currentRootDir = configDir;
1904
- resolvedConfig = resolveDevComponentConfig(currentRootDir, devComponentMap, configDir);
1984
+ resolvedConfig = resolveDevComponentConfig(currentRootDir, componentsMap, configDir);
1905
1985
  const isDev = 'serve' === resolved.command;
1906
1986
  contract = createContract(resolvedConfig.componentMap, resolvedConfig.defaultEntryAbs, isDev);
1907
1987
  }
@@ -2031,6 +2111,5 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
2031
2111
  devCssAssetPlugin,
2032
2112
  libPostPlugin
2033
2113
  ];
2034
- };
2035
- const viteHostReactBridgePlugin = devToReactPlugin;
2036
- export { EVENT_FULL_RELOAD, EVENT_HMR_UPDATE, PLUGIN_NAME, STABLE_BASE_PATH, STABLE_DEBUG_HTML_PATH, STABLE_DEBUG_JSON_PATH, STABLE_INIT_PATH, STABLE_REACT_RUNTIME_PATH, constants_PLUGIN_LOG_PREFIX as PLUGIN_LOG_PREFIX, constants_STABLE_CONTRACT_PATH as STABLE_CONTRACT_PATH, devToReactPlugin, viteHostReactBridgePlugin };
2114
+ }
2115
+ export { EVENT_FULL_RELOAD, EVENT_HMR_UPDATE, PLUGIN_NAME, STABLE_BASE_PATH, STABLE_DEBUG_HTML_PATH, STABLE_DEBUG_JSON_PATH, STABLE_DISCOVERY_PATH, STABLE_INIT_PATH, STABLE_LOADER_UMD_PATH, STABLE_REACT_BASE_PATH, STABLE_REACT_RUNTIME_PATH, constants_PLUGIN_LOG_PREFIX as PLUGIN_LOG_PREFIX, constants_STABLE_CONTRACT_PATH as STABLE_CONTRACT_PATH, constants_STABLE_LOADER_BASE_PATH as STABLE_LOADER_BASE_PATH, devToReactPlugin };
package/dist/plugin.d.ts CHANGED
@@ -1,6 +1,44 @@
1
- import { type Plugin } from 'vite';
2
1
  import type { DevComponentMapInput, DevToReactPluginOptions } from './types.js';
3
- export declare const devToReactPlugin: (devComponentMap?: DevComponentMapInput, options?: DevToReactPluginOptions) => Plugin[];
4
- /** @deprecated Use `devToReactPlugin` instead. */
5
- export declare const viteHostReactBridgePlugin: (devComponentMap?: DevComponentMapInput, options?: DevToReactPluginOptions) => Plugin[];
2
+ /**
3
+ * Dev-to React Plugin for Vite
4
+ *
5
+ * Enables rapid development and library building of React components with hot module replacement.
6
+ * Supports single or multiple component configurations with customizable CSS and build options.
7
+ *
8
+ * Compatible with Vite 4.0.0+
9
+ *
10
+ * @param components - Component configuration
11
+ * - `string`: Single component name as wildcard (e.g. `'Button'`)
12
+ * - `Record<string, string>`: Component name to file path mapping (e.g. `{ Button: 'src/Button.tsx' }`)
13
+ * - `undefined`: Fallback to root index file
14
+ * @param options - Plugin options for CSS and build configuration
15
+ * @returns Array of Vite plugins (compatible with all Vite versions)
16
+ *
17
+ * @example
18
+ * // Single component with wildcard
19
+ * devToReactPlugin('Button')
20
+ *
21
+ * @example
22
+ * // Multiple components
23
+ * devToReactPlugin({
24
+ * Button: 'src/Button.tsx',
25
+ * Dialog: 'src/Dialog.tsx',
26
+ * Input: 'src/Input.tsx',
27
+ * })
28
+ *
29
+ * @example
30
+ * // With custom options
31
+ * devToReactPlugin(
32
+ * { Button: 'src/Button.tsx' },
33
+ * {
34
+ * css: { modules: { localsConvention: 'camelCase' } },
35
+ * open: true,
36
+ * }
37
+ * )
38
+ *
39
+ * @example
40
+ * // Fallback to root entry
41
+ * devToReactPlugin(undefined, { css: false })
42
+ */
43
+ export declare function devToReactPlugin(components?: DevComponentMapInput, options?: DevToReactPluginOptions): any;
6
44
  //# sourceMappingURL=plugin.d.ts.map
package/dist/plugin.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAIA,OAAO,EAA+B,KAAK,MAAM,EAAwC,MAAM,MAAM,CAAA;AA4BrG,OAAO,KAAK,EAIV,oBAAoB,EACpB,uBAAuB,EACxB,MAAM,YAAY,CAAA;AA0BnB,eAAO,MAAM,gBAAgB,GAC3B,kBAAiB,oBAAyB,EAC1C,UAAS,uBAA4B,KACpC,MAAM,EA8fR,CAAA;AAED,kDAAkD;AAClD,eAAO,MAAM,yBAAyB,qBAngBnB,oBAAoB,YAC5B,uBAAuB,KAC/B,MAAM,EAigBgD,CAAA"}
1
+ {"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAIV,oBAAoB,EACpB,uBAAuB,EACxB,MAAM,YAAY,CAAA;AA0BnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,CAAC,EAAE,oBAAoB,EACjC,OAAO,CAAC,EAAE,uBAAuB,GAChC,GAAG,CAggBL"}
package/dist/types.d.ts CHANGED
@@ -1,34 +1,92 @@
1
1
  import type { BuildOptions, CSSOptions } from 'vite';
2
+ /**
3
+ * Plugin options for dev-to React plugin
4
+ *
5
+ * @example
6
+ * ```typescript
7
+ * devToReactPlugin('Button', {
8
+ * css: { modules: { localsConvention: 'camelCase' } },
9
+ * open: true,
10
+ * })
11
+ * ```
12
+ */
2
13
  export interface DevToReactPluginOptions {
3
14
  /**
4
- * 透传给 Vite 的 `css` 配置（开发与构建态均生效）。
15
+ * CSS configuration passed to Vite (applies in both dev and build modes).
5
16
  *
6
- * 默认提供稳定的 CSS Modules 命名规则：
17
+ * By default, stable CSS Modules naming rule is provided:
7
18
  * `[name]__[local]___[hash:base64:5]`
8
19
  *
9
- * - 传 `false`：禁用插件注入的所有 CSS 配置
10
- * - 传对象：与插件默认配置深度合并
20
+ * - `false`: Disable all CSS configuration injected by the plugin
21
+ * - `CSSOptions`: Deep merge with plugin's default configuration (user config takes precedence)
22
+ *
23
+ * @example
24
+ * ```typescript
25
+ * // Custom CSS Modules naming
26
+ * { css: { modules: { localsConvention: 'camelCase' } } }
27
+ *
28
+ * // Disable CSS configuration
29
+ * { css: false }
30
+ * ```
11
31
  */
12
32
  css?: CSSOptions | false;
13
33
  /**
14
- * 透传给 Vite 的 `build` 配置（仅在 `vite build --mode lib` 时生效）。
34
+ * Build configuration passed to Vite (only applies when running `vite build --mode lib`).
35
+ *
36
+ * Typical use cases:
37
+ * - Adjust asset inlining: `assetsInlineLimit`
38
+ * - Configure rollup: `rollupOptions`
39
+ * - Configure minification/output: `minify` / `sourcemap` / `target` etc.
15
40
  *
16
- * 典型用途：
17
- * - 调整资源内联：`assetsInlineLimit`
18
- * - 调整 rollup：`rollupOptions`
19
- * - 调整压缩/产物：`minify` / `sourcemap` / `target` 等
41
+ * This config will be deep merged with the plugin's internal `next.build` config
42
+ * (user config takes precedence).
20
43
  *
21
- * 插件会将此配置与内部生成的 `next.build` 做深度合并（以这里传入的为准）。
44
+ * @example
45
+ * ```typescript
46
+ * {
47
+ * build: {
48
+ * assetsInlineLimit: 0,
49
+ * rollupOptions: { external: ['react', 'react-dom'] }
50
+ * }
51
+ * }
52
+ * ```
22
53
  */
23
54
  build?: BuildOptions;
24
55
  /**
25
- * 启动开发服务器后，是否自动在浏览器中打开调试面板。
56
+ * Whether to automatically open the debug panel in browser after starting dev server.
57
+ *
26
58
  * @default false
59
+ *
60
+ * @example
61
+ * ```typescript
62
+ * { open: true } // Opens debug panel automatically
63
+ * ```
27
64
  */
28
65
  open?: boolean;
29
66
  }
30
- /** @deprecated Use `DevToReactPluginOptions` instead. */
31
- export type ViteHostReactBridgePluginOptions = DevToReactPluginOptions;
67
+ /**
68
+ * Component configuration input type
69
+ *
70
+ * Can be one of:
71
+ * - `string`: Single component name used as wildcard pattern
72
+ * - `Record<string, string>`: Map of component names to their file paths
73
+ * - `undefined` or `null`: Use default entry point
74
+ *
75
+ * @example
76
+ * ```typescript
77
+ * // Single component
78
+ * 'Button'
79
+ *
80
+ * // Multiple components
81
+ * {
82
+ * Button: 'src/Button.tsx',
83
+ * Dialog: 'src/Dialog.tsx',
84
+ * }
85
+ *
86
+ * // Default entry
87
+ * undefined
88
+ * ```
89
+ */
32
90
  export type DevComponentMapInput = Record<string, string> | string | undefined | null;
33
91
  export interface DevComponentAudit {
34
92
  defaultEntryAbs: string;
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AAEpD,MAAM,WAAW,uBAAuB;IACtC;;;;;;;;OAQG;IACH,GAAG,CAAC,EAAE,UAAU,GAAG,KAAK,CAAA;IAExB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,yDAAyD;AACzD,MAAM,MAAM,gCAAgC,GAAG,uBAAuB,CAAA;AAEtE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;AAErF,MAAM,WAAW,iBAAiB;IAChC,eAAe,EAAE,MAAM,CAAA;IACvB,kBAAkB,EAAE,OAAO,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,KAAK,CAAC;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnE;AAED,MAAM,WAAW,0BAA0B;IACzC,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,KAAK,EAAE,iBAAiB,CAAA;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,iBAAiB,CAAA;IACvB,OAAO,EAAE,iBAAiB,CAAA;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM,CAAA;QAChB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,MAAM,EAAE;QACN,UAAU,EAAE,MAAM,CAAA;QAClB,SAAS,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,GAAG,EAAE;QACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KACrC,CAAA;CACF;AAED,MAAM,WAAW,iBAAiB;IAChC,uBAAuB,EAAE,OAAO,CAAA;CACjC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AAEpD;;;;;;;;;;GAUG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;;;;;;;;;;;;;;;OAiBG;IACH,GAAG,CAAC,EAAE,UAAU,GAAG,KAAK,CAAA;IAExB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;AAErF,MAAM,WAAW,iBAAiB;IAChC,eAAe,EAAE,MAAM,CAAA;IACvB,kBAAkB,EAAE,OAAO,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,KAAK,CAAC;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnE;AAED,MAAM,WAAW,0BAA0B;IACzC,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,KAAK,EAAE,iBAAiB,CAAA;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,IAAI,EAAE,iBAAiB,CAAA;IACvB,OAAO,EAAE,iBAAiB,CAAA;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM,CAAA;QAChB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;IACD,MAAM,EAAE;QACN,UAAU,EAAE,MAAM,CAAA;QAClB,SAAS,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,GAAG,EAAE;QACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KACrC,CAAA;CACF;AAED,MAAM,WAAW,iBAAiB;IAChC,uBAAuB,EAAE,OAAO,CAAA;CACjC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dev-to/react-plugin",
3
- "version": "0.4.0",
3
+ "version": "1.0.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -31,7 +31,7 @@
31
31
  "dependencies": {
32
32
  "picocolors": "^1.1.0",
33
33
  "typescript": "^5.4.5",
34
- "@dev-to/react-shared": "0.1.2"
34
+ "@dev-to/react-shared": "1.0.0"
35
35
  },
36
36
  "scripts": {
37
37
  "build": "rslib build",