@dev-to/react-plugin 0.4.1 → 1.0.1

package/README.md

@@ -39,15 +39,26 @@ export default defineConfig({
 
 ## 稳定桥接路径
 
-插件会提供以下稳定路径（下划线版本）：
+插件会提供以下稳定路径（v2.0+ 统一命名空间）：
 
-- Contract：`/__dev_to_react__/contract.js`
-- Init（安装 HMR + React Refresh preamble）：`/__dev_to_react__/init.js`
-- React Runtime（React + ReactDOMClient）：`/__dev_to_react__/react-runtime.js`
-- Debug：`/__dev_to_react__/debug.html` / `debug.json`
+### 框架无关端点（Framework-Agnostic）
+- **Discovery** (新): `/__dev_to__/discovery.json` - 统一发现端点，包含框架信息、服务器元数据、所有可用端点
+- **Debug HTML**: `/__dev_to__/debug.html` - 可视化调试面板
+- **Debug JSON**: `/__dev_to__/debug.json` - JSON 格式的调试信息
+
+### React 专用端点（React-Specific）
+- **Contract** (兼容): `/__dev_to__/react/contract.js` - 桥接合约
+- **Init**: `/__dev_to__/react/init.js` - 安装 HMR + React Refresh preamble
+- **Runtime**: `/__dev_to__/react/runtime.js` - React + ReactDOMClient
+- **Loader UMD**: `/__dev_to__/react/loader.js` - ReactLoader UMD 构建
+- **Component Loaders**: `/__dev_to__/react/loader/{ComponentName}.js` - 单组件加载器
 
 这些路径与事件名常量集中在 `@dev-to/react-shared`，用于保证 Vite 侧与宿主侧协议一致。
 
+### HMR 事件
+- Full Reload: `dev_to:react:full-reload`
+- HMR Update: `dev_to:react:hmr-update`
+
 ## 生产构建（Library Mode）
 
 执行 `vite build --mode lib` 时，插件会按 `components` 参数为每个组件产出一个 UMD bundle，默认输出到 `dist/<component>/`。

package/dist/constants.d.ts

@@ -1,12 +1,15 @@
 export declare const PLUGIN_NAME: "dev_to_react";
-export declare const PLUGIN_LOG_PREFIX: "[dev_to_react]";
-export declare const STABLE_BASE_PATH: "/__dev_to_react__";
-export declare const STABLE_CONTRACT_PATH: "/__dev_to_react__/contract.js";
-export declare const STABLE_INIT_PATH: "/__dev_to_react__/init.js";
-export declare const STABLE_REACT_RUNTIME_PATH: "/__dev_to_react__/react-runtime.js";
-export declare const STABLE_DEBUG_HTML_PATH: "/__dev_to_react__/debug.html";
-export declare const STABLE_DEBUG_JSON_PATH: "/__dev_to_react__/debug.json";
-export declare const STABLE_LOADER_BASE_PATH: "/__dev_to_react__/loader";
-export declare const EVENT_FULL_RELOAD: "dev_to_react:full-reload";
-export declare const EVENT_HMR_UPDATE: "dev_to_react:hmr-update";
+export declare const PLUGIN_LOG_PREFIX: "[dev_to:react]";
+export declare const STABLE_BASE_PATH: "/__dev_to__";
+export declare const STABLE_DISCOVERY_PATH: "/__dev_to__/discovery.json";
+export declare const STABLE_DEBUG_HTML_PATH: "/__dev_to__/debug.html";
+export declare const STABLE_DEBUG_JSON_PATH: "/__dev_to__/debug.json";
+export declare const STABLE_REACT_BASE_PATH: "/__dev_to__/react";
+export declare const STABLE_CONTRACT_PATH: "/__dev_to__/react/contract.js";
+export declare const STABLE_INIT_PATH: "/__dev_to__/react/init.js";
+export declare const STABLE_REACT_RUNTIME_PATH: "/__dev_to__/react/runtime.js";
+export declare const STABLE_LOADER_UMD_PATH: "/__dev_to__/react/loader.js";
+export declare const STABLE_LOADER_BASE_PATH: "/__dev_to__/react/loader";
+export declare const EVENT_FULL_RELOAD: "dev_to:react:full-reload";
+export declare const EVENT_HMR_UPDATE: "dev_to:react:hmr-update";
 //# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -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"}
+{"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

@@ -1 +1 @@
-{"version":3,"file":"debugTools.d.ts","sourceRoot":"","sources":["../src/debugTools.ts"],"names":[],"mappings":"AAuBA,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,QA6TxG"}
+{"version":3,"file":"debugTools.d.ts","sourceRoot":"","sources":["../src/debugTools.ts"],"names":[],"mappings":"AAyBA,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;AA0ID,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,QA0ZxG"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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';
-export { devToReactPlugin, viteHostReactBridgePlugin } from './plugin.js';
-export type { BridgeContract, BridgeStats, BridgeStatsBucket, DebugStartupState, DevComponentAudit, DevComponentMapInput, DevToReactPluginOptions, ResolvedDevComponentConfig, ViteHostReactBridgePluginOptions, } from './types.js';
+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';
+export { devToReactPlugin } from './plugin.js';
+export type { BridgeContract, BridgeStats, BridgeStatsBucket, DebugStartupState, DevComponentAudit, DevComponentMapInput, DevToReactPluginOptions, ResolvedDevComponentConfig, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -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"}
+{"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

@@ -1,4 +1,4 @@
-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";
+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";
 import node_fs from "node:fs";
 import node_path from "node:path";
 import picocolors from "picocolors";
@@ -8,15 +8,18 @@ import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
 import node_os from "node:os";
 import typescript from "typescript";
-const PLUGIN_NAME = DEV_TO_REACT_NAMESPACE;
-const constants_PLUGIN_LOG_PREFIX = `[${PLUGIN_NAME}]`;
-const STABLE_BASE_PATH = DEV_TO_REACT_BASE_PATH;
+const PLUGIN_NAME = `${DEV_TO_NAMESPACE}_${DEV_TO_REACT_NAMESPACE}`;
+const constants_PLUGIN_LOG_PREFIX = `[${DEV_TO_NAMESPACE}:${DEV_TO_REACT_NAMESPACE}]`;
+const STABLE_BASE_PATH = DEV_TO_BASE_PATH;
+const STABLE_DISCOVERY_PATH = DEV_TO_DISCOVERY_PATH;
+const STABLE_DEBUG_HTML_PATH = DEV_TO_DEBUG_HTML_PATH;
+const STABLE_DEBUG_JSON_PATH = DEV_TO_DEBUG_JSON_PATH;
+const STABLE_REACT_BASE_PATH = DEV_TO_REACT_BASE_PATH;
 const constants_STABLE_CONTRACT_PATH = DEV_TO_REACT_CONTRACT_PATH;
 const STABLE_INIT_PATH = DEV_TO_REACT_INIT_PATH;
-const STABLE_REACT_RUNTIME_PATH = DEV_TO_REACT_REACT_RUNTIME_PATH;
-const STABLE_DEBUG_HTML_PATH = DEV_TO_REACT_DEBUG_HTML_PATH;
-const STABLE_DEBUG_JSON_PATH = DEV_TO_REACT_DEBUG_JSON_PATH;
-const STABLE_LOADER_BASE_PATH = DEV_TO_REACT_LOADER_BASE_PATH;
+const STABLE_REACT_RUNTIME_PATH = DEV_TO_REACT_RUNTIME_PATH;
+const STABLE_LOADER_UMD_PATH = DEV_TO_REACT_LOADER_UMD_PATH;
+const constants_STABLE_LOADER_BASE_PATH = DEV_TO_REACT_LOADER_BASE_PATH;
 const EVENT_FULL_RELOAD = DEV_TO_REACT_EVENT_FULL_RELOAD;
 const EVENT_HMR_UPDATE = DEV_TO_REACT_EVENT_HMR_UPDATE;
 function renderDebugHtml(params) {
@@ -244,7 +247,7 @@ function renderDebugHtml(params) {
                         ${Object.entries(resolvedDevComponentMap).map(([name, entry])=>{
         const abs = entryPathMap[name];
         const displayPath = abs ? getShortPath(abs) : entry;
-        const wrapperUrl = (originCandidates[0] || 'http://localhost:5173') + '/__dev_to_react__/loader/' + name + '.js';
+        const wrapperUrl = (originCandidates[0] || 'http://localhost:5173') + '/__dev_to__/react/loader/' + name + '.js';
         const entryHtml = abs ? '<a href="' + toVsCodeUrl(abs) + '" class="link-code" title="点击在 IDE 中打开"><code>' + escapeHtml(displayPath) + '</code></a>' : '<code>' + escapeHtml(entry) + '</code>';
         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>';
     }).join('')}
@@ -334,7 +337,7 @@ devToReactPlugin(<span class="str">'Demo'</span>, { open: <span class="kw">true<
 
             <div class="info-grid">
                 <div class="info-label">端点:</div>
-                <div class="info-value"><code>/__dev_to_react__/loader/{ComponentName}.js</code></div>
+                <div class="info-value"><code>/__dev_to__/react/loader/{ComponentName}.js</code></div>
                 <div class="info-label">作用:</div>
                 <div class="info-value">自动将组件导出为 React 组件实例，无需宿主集成 @dev-to/react-loader</div>
                 <div class="info-label">依赖:</div>
@@ -357,7 +360,7 @@ devToReactPlugin(<span class="str">'Demo'</span>, { open: <span class="kw">true<
 <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>
 
 <span class="cmt">// 2. 加载包装器脚本</span>
-<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>
+<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>
 
 <span class="cmt">// 3. 直接作为 React 组件使用</span>
 <span class="kw">const</span> root = ReactDOM.createRoot(document.getElementById(<span class="str">'app'</span>));
@@ -901,7 +904,7 @@ function createLoaderUmdWrapper(options) {
  *    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  *
  * 2. Load this wrapper:
- *    <script src="${origin}/__dev_to_react__/loader/${componentName}.js"></script>
+ *    <script src="${origin}/__dev_to__/react/loader/${componentName}.js"></script>
  *
  * 3. Use as a React component:
  *
@@ -1160,7 +1163,7 @@ function getReactLoaderUmdPath() {
         const umdPath = node_path.resolve(__dirname, '../../react-loader/dist/index.umd.js');
         if (node_fs.existsSync(umdPath)) return umdPath;
     } catch  {}
-    throw new Error(`${constants_PLUGIN_LOG_PREFIX} react-loader UMD not found. Run 'pnpm build' in react-loader package.`);
+    return null;
 }
 const globalState = globalThis;
 let didOpenBrowser = Boolean(globalState[DEV_TO_REACT_DID_OPEN_BROWSER_KEY]);
@@ -1177,24 +1180,17 @@ function installDebugTools(server, ctx, state) {
             if ('number' == typeof server.config.server.port) return server.config.server.port;
             return 5173;
         })();
-        const lanHosts = getLanIPv4Hosts();
-        const candidateHosts = [
-            'localhost',
-            '127.0.0.1',
-            ...lanHosts
-        ];
-        const urls = candidateHosts.map((h)=>`${proto}://${h}:${port}${STABLE_DEBUG_HTML_PATH}`);
         const logger = server.config.logger;
         const info = 'function' == typeof logger?.info ? logger.info.bind(logger) : console.log;
-        info('');
-        info(`${constants_PLUGIN_LOG_PREFIX} Debug panel:`);
-        urls.forEach((u)=>info(`  ${picocolors.cyan(u)}`));
-        info(`  JSON: ${picocolors.cyan(`${proto}://localhost:${port}${STABLE_DEBUG_JSON_PATH}`)}`);
-        info('');
+        setImmediate(()=>{
+            info('');
+            info(`  ${picocolors.yellowBright('➜')}  ${picocolors.bgCyanBright(picocolors.yellow(picocolors.bold(' DevTo ')))}  ${picocolors.cyan(`${proto}://localhost:${port}${DEV_TO_BASE_PATH}`)}`);
+        });
         if (ctx.open && !didOpenBrowser) {
             didOpenBrowser = true;
             globalState[DEV_TO_REACT_DID_OPEN_BROWSER_KEY] = true;
-            openBrowser(urls[0]);
+            const debugUrl = `${proto}://localhost:${port}${STABLE_DEBUG_HTML_PATH}`;
+            openBrowser(debugUrl);
         }
     };
     try {
@@ -1223,6 +1219,73 @@ function installDebugTools(server, ctx, state) {
             res.end();
             return;
         }
+        if (url.startsWith(STABLE_DISCOVERY_PATH)) {
+            const isHttps = !!server.config.server.https;
+            const proto = isHttps ? 'https' : 'http';
+            const addr = server.httpServer?.address();
+            const actualPort = addr && 'object' == typeof addr ? addr.port : void 0;
+            const lanHosts = getLanIPv4Hosts();
+            const candidateHosts = [
+                'localhost',
+                '127.0.0.1',
+                ...lanHosts
+            ];
+            const originCandidates = candidateHosts.map((h)=>`${proto}://${h}${actualPort ? `:${actualPort}` : ''}`);
+            const require = createRequire(import.meta.url);
+            let reactVersion = '18.x';
+            try {
+                const reactPkgPath = require.resolve('react/package.json');
+                const reactPkg = JSON.parse(node_fs.readFileSync(reactPkgPath, 'utf-8'));
+                reactVersion = reactPkg.version || '18.x';
+            } catch  {}
+            const components = {};
+            for (const [name, entry] of Object.entries(ctx.contract?.dev?.componentMap || {}))components[name] = {
+                name,
+                entry,
+                framework: 'react'
+            };
+            const discovery = {
+                framework: {
+                    type: 'react',
+                    version: reactVersion
+                },
+                server: {
+                    host: String(server.config.server.host || 'localhost'),
+                    port: actualPort || server.config.server.port || 5173,
+                    protocol: proto,
+                    origins: originCandidates
+                },
+                endpoints: {
+                    discovery: STABLE_DISCOVERY_PATH,
+                    contract: constants_STABLE_CONTRACT_PATH,
+                    init: STABLE_INIT_PATH,
+                    runtime: STABLE_REACT_RUNTIME_PATH,
+                    debug: {
+                        html: STABLE_DEBUG_HTML_PATH,
+                        json: STABLE_DEBUG_JSON_PATH
+                    },
+                    loader: {
+                        base: constants_STABLE_LOADER_BASE_PATH,
+                        umd: STABLE_LOADER_UMD_PATH
+                    }
+                },
+                components,
+                events: {
+                    fullReload: ctx.contract?.events?.fullReload || '',
+                    hmrUpdate: ctx.contract?.events?.hmrUpdate || ''
+                },
+                protocol: {
+                    version: '2.0.0',
+                    apiLevel: 1
+                }
+            };
+            res.statusCode = 200;
+            res.setHeader('Content-Type', 'application/json; charset=utf-8');
+            res.setHeader('Access-Control-Allow-Origin', '*');
+            res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+            res.end(JSON.stringify(discovery, null, 2));
+            return;
+        }
         if (url.startsWith(STABLE_DEBUG_JSON_PATH)) {
             const isHttps = !!server.config.server.https;
             const proto = isHttps ? 'https' : 'http';
@@ -1295,22 +1358,28 @@ function installDebugTools(server, ctx, state) {
             }, null, 2));
             return;
         }
-        if (pathname === `${STABLE_BASE_PATH}/react-loader.js`) try {
+        if (pathname === STABLE_LOADER_UMD_PATH) {
             const reactLoaderUmdPath = getReactLoaderUmdPath();
-            const umdCode = node_fs.readFileSync(reactLoaderUmdPath, 'utf-8');
-            res.statusCode = 200;
-            res.setHeader('Content-Type', "application/javascript; charset=utf-8");
-            res.setHeader('Access-Control-Allow-Origin', '*');
+            if (reactLoaderUmdPath) try {
+                const umdCode = node_fs.readFileSync(reactLoaderUmdPath, 'utf-8');
+                res.statusCode = 200;
+                res.setHeader('Content-Type', "application/javascript; charset=utf-8");
+                res.setHeader('Access-Control-Allow-Origin', '*');
+                res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+                res.end(umdCode);
+                return;
+            } catch (error) {
+                console.warn(`[dev_to:react] Failed to read local UMD: ${error}. Falling back to CDN.`);
+            }
+            const cdnUrl = 'https://cdn.jsdelivr.net/npm/@dev-to/react-loader@latest/dist/index.umd.js';
+            res.statusCode = 302;
+            res.setHeader('Location', cdnUrl);
             res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
-            res.end(umdCode);
-            return;
-        } catch (error) {
-            res.statusCode = 404;
-            res.end(`${error instanceof Error ? error.message : String(error)}`);
+            res.end();
             return;
         }
-        if (pathname.startsWith(STABLE_LOADER_BASE_PATH)) {
-            const loaderPathPattern = new RegExp(`^${STABLE_LOADER_BASE_PATH}/([^/]+)\\.js$`);
+        if (pathname.startsWith(constants_STABLE_LOADER_BASE_PATH)) {
+            const loaderPathPattern = new RegExp(`^${constants_STABLE_LOADER_BASE_PATH}/([^/]+)\\.js$`);
             const match = pathname.match(loaderPathPattern);
             if (match) {
                 const componentName = match[1];
@@ -1320,11 +1389,13 @@ function installDebugTools(server, ctx, state) {
                 const addr = server.httpServer?.address();
                 const actualPort = addr && 'object' == typeof addr ? addr.port : void 0;
                 const origin = hostHeader ? `${proto}://${hostHeader}` : `${proto}://localhost${actualPort ? `:${actualPort}` : ''}`;
+                const hasLocalUmd = null !== getReactLoaderUmdPath();
+                const reactLoaderUrl = hasLocalUmd ? `${origin}${STABLE_LOADER_UMD_PATH}` : 'https://cdn.jsdelivr.net/npm/@dev-to/react-loader@latest/dist/index.umd.js';
                 const code = createLoaderUmdWrapper({
                     componentName,
                     origin,
                     contractEndpoint: constants_STABLE_CONTRACT_PATH,
-                    reactLoaderUrl: `${origin}${STABLE_BASE_PATH}/react-loader.js`
+                    reactLoaderUrl
                 });
                 res.statusCode = 200;
                 res.setHeader('Content-Type', "application/javascript; charset=utf-8");
@@ -1545,11 +1616,11 @@ function transformViteDevCssAssetUrls(code, id) {
     if (!/\.(css|less|sass|scss|styl|stylus)$/.test(cleanId)) return null;
     if (!code.includes('__vite__updateStyle') || !code.includes('const __vite__css')) return null;
     if (!/url\(\s*['"]?\//.test(code)) return null;
-    if (code.includes('__dev_to_react_css')) return null;
+    if (code.includes('__dev_to__css')) return null;
     const updateCallRE = /__vite__updateStyle\(\s*__vite__id\s*,\s*__vite__css\s*\)/;
     if (!updateCallRE.test(code)) return null;
     const injected = `
-const __dev_to_react_resolveAsset = (path) => {
+const __dev_to__resolveAsset = (path) => {
   if (!path) return path;
   if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('data:') || path.startsWith('blob:')) {
     return path;
@@ -1569,12 +1640,12 @@ const __dev_to_react_resolveAsset = (path) => {
     return path;
   }
 };
-const __dev_to_react_css = __vite__css.replace(/url\\(\\s*(['"]?)(\\/(?!\\/)[^'")]+)\\1\\s*\\)/g, (_m, q, p) => {
-  const next = __dev_to_react_resolveAsset(p);
+const __dev_to__css = __vite__css.replace(/url\\(\\s*(['"]?)(\\/(?!\\/)[^'")]+)\\1\\s*\\)/g, (_m, q, p) => {
+  const next = __dev_to__resolveAsset(p);
   return 'url(' + q + next + q + ')';
 });
 `;
-    const nextCode = code.replace(updateCallRE, `${injected}__vite__updateStyle(__vite__id, __dev_to_react_css)`);
+    const nextCode = code.replace(updateCallRE, `${injected}__vite__updateStyle(__vite__id, __dev_to__css)`);
     return {
         code: nextCode,
         map: null
@@ -2049,5 +2120,4 @@ function devToReactPlugin(components, options) {
         libPostPlugin
     ];
 }
-const viteHostReactBridgePlugin = devToReactPlugin;
-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 };
+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

@@ -41,6 +41,4 @@ import type { DevComponentMapInput, DevToReactPluginOptions } from './types.js';
  * devToReactPlugin(undefined, { css: false })
  */
 export declare function devToReactPlugin(components?: DevComponentMapInput, options?: DevToReactPluginOptions): any;
-/** @deprecated Use `devToReactPlugin` instead. */
-export declare const viteHostReactBridgePlugin: typeof devToReactPlugin;
 //# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -1 +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;AAED,kDAAkD;AAClD,eAAO,MAAM,yBAAyB,yBAAmB,CAAA"}
+{"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

@@ -64,8 +64,6 @@ export interface DevToReactPluginOptions {
      */
     open?: boolean;
 }
-/** @deprecated Use `DevToReactPluginOptions` instead. */
-export type ViteHostReactBridgePluginOptions = DevToReactPluginOptions;
 /**
  * Component configuration input type
  *

package/dist/types.d.ts.map

@@ -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;;;;;;;;;;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,yDAAyD;AACzD,MAAM,MAAM,gCAAgC,GAAG,uBAAuB,CAAA;AAEtE;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@dev-to/react-plugin",
-  "version": "0.4.1",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -31,7 +31,7 @@
   "dependencies": {
     "picocolors": "^1.1.0",
     "typescript": "^5.4.5",
-    "@dev-to/react-shared": "0.1.2"
+    "@dev-to/react-shared": "1.0.0"
   },
   "scripts": {
     "build": "rslib build",