@dev-to/react-plugin 0.3.0 → 0.4.1

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 (10) hide show
  1. package/README.md +2 -2
  2. package/dist/debugHtml.d.ts.map +1 -1
  3. package/dist/debugTools.d.ts.map +1 -1
  4. package/dist/index.js +190 -70
  5. package/dist/loaderUmdWrapper.d.ts.map +1 -1
  6. package/dist/plugin.d.ts +43 -3
  7. package/dist/plugin.d.ts.map +1 -1
  8. package/dist/types.d.ts +71 -11
  9. package/dist/types.d.ts.map +1 -1
  10. package/package.json +1 -1
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: '/' }`。
@@ -50,7 +50,7 @@ export default defineConfig({
50
50
 
51
51
  ## 生产构建（Library Mode）
52
52
 
53
- 执行 `vite build --mode lib` 时，插件会按 `devComponentMap` 为每个组件产出一个 UMD bundle，默认输出到 `dist/<component>/`。
53
+ 执行 `vite build --mode lib` 时，插件会按 `components` 参数为每个组件产出一个 UMD bundle，默认输出到 `dist/<component>/`。
54
54
 
55
55
  > 提示：`'*': '/'` 的通配符模式仅适合开发；lib 构建请显式列出组件名。
56
56
 
package/dist/debugHtml.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"debugHtml.d.ts","sourceRoot":"","sources":["../src/debugHtml.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEhE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,iBAAiB,CAAA;IACxB,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,KAAK,EAAE,WAAW,CAAA;IAClB,gBAAgB,EAAE,oBAAoB,CAAA;IACtC,gBAAgB,EAAE,MAAM,EAAE,CAAA;IAC1B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,qBAAqB,UAyf5D"}
1
+ {"version":3,"file":"debugHtml.d.ts","sourceRoot":"","sources":["../src/debugHtml.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEhE,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,iBAAiB,CAAA;IACxB,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,KAAK,EAAE,WAAW,CAAA;IAClB,gBAAgB,EAAE,oBAAoB,CAAA;IACtC,gBAAgB,EAAE,MAAM,EAAE,CAAA;IAC1B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,qBAAqB,UAskB5D"}
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":"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"}
package/dist/index.js CHANGED
@@ -4,6 +4,7 @@ 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";
@@ -238,17 +239,14 @@ function renderDebugHtml(params) {
238
239
 
239
240
  ${hasConfig ? `
240
241
  <table>
241
- <thead><tr><th>组件名称 <small class="muted">(Component Name)</small></th><th>映射入口 <small class="muted">(Short Path)</small></th></tr></thead>
242
+ <thead><tr><th>组件名称 <small class="muted">(Component Name)</small></th><th>映射入口 <small class="muted">(Short Path)</small></th><th>包装地址 <small class="muted">(UMD Wrapper)</small></th></tr></thead>
242
243
  <tbody>
243
244
  ${Object.entries(resolvedDevComponentMap).map(([name, entry])=>{
244
245
  const abs = entryPathMap[name];
245
246
  const displayPath = abs ? getShortPath(abs) : entry;
246
- return `<tr>
247
- <td><code class="code-name">${name}</code></td>
248
- <td>
249
- ${abs ? `<a href="${toVsCodeUrl(abs)}" class="link-code" title="点击在 IDE 中打开"><code>${escapeHtml(displayPath)}</code></a>` : `<code>${escapeHtml(entry)}</code>`}
250
- </td>
251
- </tr>`;
247
+ const wrapperUrl = (originCandidates[0] || 'http://localhost:5173') + '/__dev_to_react__/loader/' + name + '.js';
248
+ const entryHtml = abs ? '<a href="' + toVsCodeUrl(abs) + '" class="link-code" title="点击在 IDE 中打开"><code>' + escapeHtml(displayPath) + '</code></a>' : '<code>' + escapeHtml(entry) + '</code>';
249
+ 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>';
252
250
  }).join('')}
253
251
  </tbody>
254
252
  </table>
@@ -258,14 +256,14 @@ function renderDebugHtml(params) {
258
256
  <summary>插件参数与配置说明 (Plugin API)</summary>
259
257
  <div class="parameter-desc">
260
258
  <div style="margin-bottom: 24px;">
261
- <pre style="background: #ebf8ff; color: #2c5282; border-color: #bee3f8; font-size: 14px; font-weight: 600;">reactHmrHostPlugin(devComponentMap?, options?)</pre>
259
+ <pre style="background: #ebf8ff; color: #2c5282; border-color: #bee3f8; font-size: 14px; font-weight: 600;">devToReactPlugin(components?, options?)</pre>
262
260
  <div class="muted" style="margin-top: 8px;">
263
261
  支持单组件简写、对象全量映射，以及透传 Vite 原生配置。
264
262
  </div>
265
263
  </div>
266
264
 
267
265
  <div class="parameter-item">
268
- <span class="parameter-name">1. devComponentMap (第一个参数)</span>
266
+ <span class="parameter-name">1. components (第一个参数)</span>
269
267
  <div class="parameter-info">
270
268
  定义组件名与本地入口文件的映射：
271
269
  <ul style="margin-top: 8px;">
@@ -274,10 +272,10 @@ function renderDebugHtml(params) {
274
272
  <li><b>多组件映射</b>：支持具体的相对/绝对路径。</li>
275
273
  </ul>
276
274
  <pre><span class="cmt">// Option 1: Shorthand (Default)</span>
277
- reactHmrHostPlugin(<span class="str">'Demo'</span>)
275
+ devToReactPlugin(<span class="str">'Demo'</span>)
278
276
 
279
277
  <span class="cmt">// Option 2: Explicit Mapping with Wildcard</span>
280
- reactHmrHostPlugin({
278
+ devToReactPlugin({
281
279
  <span class="str">'*'</span>: <span class="str">'/'</span>, <span class="cmt">// Wildcard to default entry</span>
282
280
  <span class="str">'Card'</span>: <span class="str">'src/Card.tsx'</span> <span class="cmt">// Specific file</span>
283
281
  })</pre>
@@ -298,8 +296,8 @@ reactHmrHostPlugin({
298
296
  <li>详细配置请参考 <a href="https://cn.vite.dev/config/shared-options#css-modules" target="_blank" style="color:#3b82f6;">Vite CSS 官方文档 ↗</a></li>
299
297
  </ul>
300
298
  <pre><span class="cmt">// Disable plugin CSS config or provide custom overrides</span>
301
- reactHmrHostPlugin(<span class="str">'Demo'</span>, { css: <span class="kw">false</span> })
302
- reactHmrHostPlugin(<span class="str">'Demo'</span>, { css: { ... } })</pre>
299
+ devToReactPlugin(<span class="str">'Demo'</span>, { css: <span class="kw">false</span> })
300
+ devToReactPlugin(<span class="str">'Demo'</span>, { css: { ... } })</pre>
303
301
  </li>
304
302
  <li style="margin-top: 12px;"><code class="kw">build</code>:
305
303
  <ul>
@@ -311,7 +309,7 @@ globals: { react: <span class="str">'React'</span>, <span class="str">'react-dom
311
309
  <li>详细配置请参考 <a href="https://cn.vite.dev/config/build-options" target="_blank" style="color:#3b82f6;">Vite 构建官方文档 ↗</a></li>
312
310
  </ul>
313
311
  <pre><span class="cmt">// Example: Disable asset inlining during build</span>
314
- reactHmrHostPlugin(<span class="str">'Demo'</span>, {
312
+ devToReactPlugin(<span class="str">'Demo'</span>, {
315
313
  build: { assetsInlineLimit: <span class="val">0</span> }
316
314
  })</pre>
317
315
  </li>
@@ -321,7 +319,7 @@ reactHmrHostPlugin(<span class="str">'Demo'</span>, {
321
319
  <li>是否在启动 Vite 开发服务器后自动在浏览器中打开此调试面板。</li>
322
320
  </ul>
323
321
  <pre><span class="cmt">// Enable auto-open</span>
324
- reactHmrHostPlugin(<span class="str">'Demo'</span>, { open: <span class="kw">true</span> })</pre>
322
+ devToReactPlugin(<span class="str">'Demo'</span>, { open: <span class="kw">true</span> })</pre>
325
323
  </li>
326
324
  </ul>
327
325
  </div>
@@ -330,6 +328,56 @@ reactHmrHostPlugin(<span class="str">'Demo'</span>, { open: <span class="kw">tru
330
328
  </details>
331
329
  </div>
332
330
 
331
+ <div class="card">
332
+ <h3>🎁 UMD 动态包装器 (Auto-Generated Wrapper)</h3>
333
+ <p class="muted">无需额外配置，每个组件都自动生成一个轻量级 UMD 包装器，可直接在无 React 框架支持的宿主环境中使用。</p>
334
+
335
+ <div class="info-grid">
336
+ <div class="info-label">端点:</div>
337
+ <div class="info-value"><code>/__dev_to_react__/loader/{ComponentName}.js</code></div>
338
+ <div class="info-label">作用:</div>
339
+ <div class="info-value">自动将组件导出为 React 组件实例，无需宿主集成 @dev-to/react-loader</div>
340
+ <div class="info-label">依赖:</div>
341
+ <div class="info-value"><code>react</code> &amp; <code>react-dom@18</code> (CDN 或本地)</div>
342
+ </div>
343
+
344
+ <details>
345
+ <summary>包装器工作原理与集成示例</summary>
346
+ <div style="margin-top: 12px;">
347
+ <h4 style="color: var(--t); font-size: 14px; margin-top: 0; margin-bottom: 8px;">🔧 什么是包装器？</h4>
348
+ <p class="muted" style="margin-bottom: 12px;">
349
+ 包装器是一个自动生成的 UMD 模块，它包装了原始的 render 函数并导出为 React 组件。
350
+ 这样，无论宿主是否集成了 ReactLoader，都能直接作为 React 组件使用。
351
+ </p>
352
+
353
+ <h4 style="color: var(--t); font-size: 14px; margin-top: 16px; margin-bottom: 8px;">📖 集成方式</h4>
354
+ <pre style="font-size: 12px; line-height: 1.7;">
355
+ <span class="cmt">// 1. 加载 React 和 ReactDOM</span>
356
+ <span class="kw">&lt;script&gt;</span> <span class="kw">src</span>=<span class="str">"https://unpkg.com/react@18/umd/react.production.min.js"</span> <span class="kw">&lt;/script&gt;</span>
357
+ <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>
358
+
359
+ <span class="cmt">// 2. 加载包装器脚本</span>
360
+ <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>
361
+
362
+ <span class="cmt">// 3. 直接作为 React 组件使用</span>
363
+ <span class="kw">const</span> root = ReactDOM.createRoot(document.getElementById(<span class="str">'app'</span>));
364
+ root.render(React.createElement(window.ComponentName, { prop1: <span class="str">'value1'</span> }));
365
+
366
+ <span class="cmt">// 或在宿主 React 组件中使用</span>
367
+ <span class="kw">const</span> Component = window.ComponentName;
368
+ <span class="kw">&lt;&gt;</span>&lt;Component prop1=<span class="str">"value1"</span> /&gt;<span class="kw">&lt;/&gt;</span></pre>
369
+
370
+ <h4 style="color: var(--t); font-size: 14px; margin-top: 16px; margin-bottom: 8px;">⚡ 关键特性</h4>
371
+ <ul class="muted" style="margin: 8px 0; padding-left: 20px;">
372
+ <li><b>零配置</b>：自动为每个组件生成包装器，无需手动编写</li>
373
+ <li><b>兼容现有宿主</b>：支持 CommonJS、AMD、浏览器全局三种模式</li>
374
+ <li><b>自动依赖管理</b>：若未加载 React，包装器会自动从 CDN 加载（可配置）</li>
375
+ <li><b>轻量级</b>：仅包含加载逻辑，核心渲染由 ReactLoader 负责</li>
376
+ </ul>
377
+ </div>
378
+ </details>
379
+ </div>
380
+
333
381
  <div class="card">
334
382
  <h3>📦 构建与部署</h3>
335
383
  <p class="muted">执行 <code>vite build --mode lib</code> 将组件打包为 UMD 格式以供发布。</p>
@@ -468,6 +516,27 @@ CSS: <span class="str">dist/&lt;name&gt;/&lt;name&gt;.css</span></pre>
468
516
  setTimeout(() => { copyFullBtn.textContent = '复制原始命令'; }, 2000);
469
517
  });
470
518
 
519
+ // 绑定包装地址复制按钮事件
520
+ document.querySelectorAll('.copy-wrapper-btn').forEach(btn => {
521
+ btn.onclick = (e) => {
522
+ e.preventDefault();
523
+ const url = btn.getAttribute('data-url');
524
+ copy(url, () => {
525
+ const originalText = btn.textContent;
526
+ btn.textContent = '✓';
527
+ btn.style.borderColor = '#10b981';
528
+ btn.style.color = '#10b981';
529
+ setTimeout(() => {
530
+ btn.textContent = originalText;
531
+ btn.style.borderColor = '';
532
+ btn.style.color = '';
533
+ }, 1500);
534
+ });
535
+ };
536
+ btn.onmouseover = () => { btn.style.borderColor = 'var(--p)'; btn.style.color = 'var(--p)'; };
537
+ btn.onmouseout = () => { btn.style.borderColor = ''; btn.style.color = ''; };
538
+ });
539
+
471
540
  const serverActualPort = ${'number' == typeof actualPort ? actualPort : 'null'};
472
541
  document.getElementById('actualPortDisplay').textContent = serverActualPort || location.port || '-';
473
542
  })();
@@ -822,33 +891,42 @@ function createLoaderUmdWrapper(options) {
822
891
  * Global name: ${globalName}
823
892
  * Generated by ${constants_PLUGIN_LOG_PREFIX}
824
893
  *
825
- * This wrapper uses @dev-to/react-loader to dynamically load and render the component.
894
+ * This wrapper automatically exports a React component that can be used in any React environment.
895
+ * No need to manually integrate @dev-to/react-loader.
896
+ *
897
+ * ============= Quick Start =============
826
898
  *
827
- * Usage:
828
899
  * 1. Load React and ReactDOM:
829
900
  * <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
830
901
  * <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
831
902
  *
832
- * 2. Load ReactLoader:
833
- * <script src="https://cdn.jsdelivr.net/npm/@dev-to/react-loader@latest/dist/index.umd.js"></script>
834
- *
835
- * 3. Load this wrapper:
903
+ * 2. Load this wrapper:
836
904
  * <script src="${origin}/__dev_to_react__/loader/${componentName}.js"></script>
837
905
  *
838
- * 4. Render the component (returns a Promise):
839
- * <div id="app"></div>
840
- * <script>
841
- * window.${globalName}.render(
842
- * document.getElementById('app'),
843
- * { prop1: 'value1', prop2: 'value2' }
844
- * ).then(function(root) {
845
- * console.log('Component rendered successfully');
846
- * }).catch(function(error) {
847
- * console.error('Failed to render component:', error);
848
- * });
849
- * </script>
906
+ * 3. Use as a React component:
907
+ *
908
+ * // Option A: Direct React rendering
909
+ * const Component = window.${globalName};
910
+ * const root = ReactDOM.createRoot(document.getElementById('app'));
911
+ * root.render(React.createElement(Component, { prop1: 'value1' }));
912
+ *
913
+ * // Option B: Use in JSX (if using Babel)
914
+ * const Component = window.${globalName};
915
+ * root.render(<Component prop1="value1" />);
850
916
  *
851
- * Note: ReactLoader will be automatically loaded from CDN if not already available.
917
+ * // Option C: Direct function call (legacy compatibility)
918
+ * window.${globalName}(document.getElementById('app'), { prop1: 'value1' })
919
+ * .then(root => console.log('Rendered'))
920
+ * .catch(err => console.error('Error:', err));
921
+ *
922
+ * ============= Features =============
923
+ * ✓ Zero configuration required
924
+ * ✓ Automatic React/ReactDOM detection
925
+ * ✓ Supports CommonJS, AMD, and global scope
926
+ * ✓ Auto-loads ReactLoader from CDN if needed
927
+ * ✓ Works in any React environment
928
+ *
929
+ * Note: Make sure React v18+ and react-dom/client are available globally.
852
930
  */
853
931
  (function (root, factory) {
854
932
  if (typeof exports === 'object' && typeof module !== 'undefined') {
@@ -860,7 +938,9 @@ function createLoaderUmdWrapper(options) {
860
938
  } else {
861
939
  // Browser globals
862
940
  var globalObj = typeof globalThis !== 'undefined' ? globalThis : (typeof self !== 'undefined' ? self : root);
863
- factory((globalObj.${globalName} = {}), globalObj.React, globalObj.ReactDOM, globalObj.DevToReactLoader);
941
+ var tempExports = {};
942
+ factory(tempExports, globalObj.React, globalObj.ReactDOM, globalObj.DevToReactLoader);
943
+ globalObj.${globalName} = tempExports.default;
864
944
  }
865
945
  })(this, function (exports, React, ReactDOM, ReactLoaderModule) {
866
946
  'use strict';
@@ -964,13 +1044,37 @@ function createLoaderUmdWrapper(options) {
964
1044
  });
965
1045
  }
966
1046
 
967
- // Export the API
968
- exports.render = render;
969
- exports.config = config;
970
- exports.default = { render: render, config: config };
1047
+ // Create a React component wrapper for the render function
1048
+ function ComponentWrapper(props) {
1049
+ var containerRef = React.useRef(null);
1050
+ var isFirstRender = React.useRef(true);
971
1051
 
972
- // Mark as ES module
973
- Object.defineProperty(exports, '__esModule', { value: true });
1052
+ React.useEffect(function() {
1053
+ if (!containerRef.current) return;
1054
+
1055
+ render(containerRef.current, props).catch(function(err) {
1056
+ console.error('${constants_PLUGIN_LOG_PREFIX} Failed to render ${componentName}:', err);
1057
+ console.error('${constants_PLUGIN_LOG_PREFIX} Props:', props);
1058
+ });
1059
+
1060
+ if (isFirstRender.current) {
1061
+ isFirstRender.current = false;
1062
+ if (typeof console !== 'undefined' && console.info) {
1063
+ console.info(
1064
+ '%c${constants_PLUGIN_LOG_PREFIX}%c Successfully loaded and rendered component: %c${componentName}',
1065
+ 'color: #10b981; font-weight: bold;',
1066
+ 'color: #64748b;',
1067
+ 'color: #3b82f6; font-weight: bold;'
1068
+ );
1069
+ }
1070
+ }
1071
+ }, [props]);
1072
+
1073
+ return React.createElement('div', { ref: containerRef });
1074
+ }
1075
+
1076
+ // Export the API
1077
+ exports.default = ComponentWrapper;
974
1078
  });
975
1079
  `;
976
1080
  return code;
@@ -1037,6 +1141,27 @@ function openBrowser(url) {
1037
1141
  if ('win32' === process.platform) return void exec(`start "" "${url}"`);
1038
1142
  exec(`xdg-open "${url}"`);
1039
1143
  }
1144
+ function getReactLoaderUmdPath() {
1145
+ const require = createRequire(import.meta.url);
1146
+ try {
1147
+ const loaderPkgPath = require.resolve('@dev-to/react-loader/package.json');
1148
+ const loaderPkgDir = node_path.dirname(loaderPkgPath);
1149
+ const umdPath = node_path.join(loaderPkgDir, 'dist/index.umd.js');
1150
+ if (node_fs.existsSync(umdPath)) return umdPath;
1151
+ } catch {}
1152
+ try {
1153
+ const loaderMainPath = require.resolve('@dev-to/react-loader');
1154
+ const loaderPkgDir = node_path.dirname(node_path.dirname(loaderMainPath));
1155
+ const umdPath = node_path.join(loaderPkgDir, 'dist/index.umd.js');
1156
+ if (node_fs.existsSync(umdPath)) return umdPath;
1157
+ } catch {}
1158
+ try {
1159
+ const __dirname = node_path.dirname(fileURLToPath(import.meta.url));
1160
+ const umdPath = node_path.resolve(__dirname, '../../react-loader/dist/index.umd.js');
1161
+ if (node_fs.existsSync(umdPath)) return umdPath;
1162
+ } catch {}
1163
+ throw new Error(`${constants_PLUGIN_LOG_PREFIX} react-loader UMD not found. Run 'pnpm build' in react-loader package.`);
1164
+ }
1040
1165
  const globalState = globalThis;
1041
1166
  let didOpenBrowser = Boolean(globalState[DEV_TO_REACT_DID_OPEN_BROWSER_KEY]);
1042
1167
  function installDebugTools(server, ctx, state) {
@@ -1163,32 +1288,25 @@ function installDebugTools(server, ctx, state) {
1163
1288
  },
1164
1289
  tips: [
1165
1290
  '宿主侧需设置 localStorage.VITE_DEV_SERVER_ORIGIN（可从 originCandidates 里选择一个可访问的 origin）。',
1166
- 'devComponentMap 的 key 必须与后端返回的 componentName 完全一致（严格匹配）。',
1291
+ 'components 参数的 key 必须与后端返回的 componentName 完全一致（严格匹配）。',
1167
1292
  'Fast Refresh 关键：必须先 import init.js（安装 react-refresh preamble），再 import react-dom/client。',
1168
- '如需产出可分发 UMD 包：使用 `vite build --mode lib`（仅构建 componentMap 指定的组件，输出到 dist/<component>/）。'
1293
+ '如需产出可分发 UMD 包：使用 `vite build --mode lib`（仅构建 components 指定的组件，输出到 dist/<component>/）。'
1169
1294
  ]
1170
1295
  }, null, 2));
1171
1296
  return;
1172
1297
  }
1173
1298
  if (pathname === `${STABLE_BASE_PATH}/react-loader.js`) try {
1174
- const __filename = fileURLToPath(import.meta.url);
1175
- const __dirname = node_path.dirname(__filename);
1176
- const reactLoaderUmdPath = node_path.resolve(__dirname, '../../react-loader/dist/index.umd.js');
1177
- if (node_fs.existsSync(reactLoaderUmdPath)) {
1178
- const umdCode = node_fs.readFileSync(reactLoaderUmdPath, 'utf-8');
1179
- res.statusCode = 200;
1180
- res.setHeader('Content-Type', "application/javascript; charset=utf-8");
1181
- res.setHeader('Access-Control-Allow-Origin', '*');
1182
- res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
1183
- res.end(umdCode);
1184
- return;
1185
- }
1186
- res.statusCode = 404;
1187
- res.end(`react-loader UMD not found at ${reactLoaderUmdPath}. Run 'pnpm build' in react-loader package.`);
1299
+ const reactLoaderUmdPath = getReactLoaderUmdPath();
1300
+ const umdCode = node_fs.readFileSync(reactLoaderUmdPath, 'utf-8');
1301
+ res.statusCode = 200;
1302
+ res.setHeader('Content-Type', "application/javascript; charset=utf-8");
1303
+ res.setHeader('Access-Control-Allow-Origin', '*');
1304
+ res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
1305
+ res.end(umdCode);
1188
1306
  return;
1189
1307
  } catch (error) {
1190
- res.statusCode = 500;
1191
- res.end(`Error loading react-loader UMD: ${error}`);
1308
+ res.statusCode = 404;
1309
+ res.end(`${error instanceof Error ? error.message : String(error)}`);
1192
1310
  return;
1193
1311
  }
1194
1312
  if (pathname.startsWith(STABLE_LOADER_BASE_PATH)) {
@@ -1477,7 +1595,7 @@ function createContractVirtualModuleCode(contract) {
1477
1595
  console.log('Events:', CONTRACT.events);
1478
1596
  console.log('Dev mode:', CONTRACT?.dev?.mode);
1479
1597
  console.log('Default entry:', CONTRACT?.dev?.defaultEntry);
1480
- console.log('devComponentMap keys:', Object.keys(CONTRACT?.dev?.componentMap || {}));
1598
+ console.log('Components:', Object.keys(CONTRACT?.dev?.componentMap || {}));
1481
1599
  console.log('Tip: open', ORIGIN + '${STABLE_DEBUG_HTML_PATH}');
1482
1600
  console.groupEnd();
1483
1601
  }
@@ -1577,7 +1695,9 @@ function createReactRuntimeVirtualModuleCode() {
1577
1695
  export default React;
1578
1696
  `;
1579
1697
  }
1580
- const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1698
+ function devToReactPlugin(components, options) {
1699
+ const componentsMap = components ?? {};
1700
+ const opts = options ?? {};
1581
1701
  const stats = {
1582
1702
  contract: {
1583
1703
  count: 0,
@@ -1597,7 +1717,7 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1597
1717
  };
1598
1718
  let configDir = process.cwd();
1599
1719
  let currentRootDir = configDir;
1600
- let resolvedConfig = resolveDevComponentConfig(currentRootDir, devComponentMap, configDir);
1720
+ let resolvedConfig = resolveDevComponentConfig(currentRootDir, componentsMap, configDir);
1601
1721
  let version = '0.0.0';
1602
1722
  try {
1603
1723
  const pkgPath = node_path.join(configDir, 'package.json');
@@ -1711,14 +1831,14 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1711
1831
  audit: resolvedConfig.audit,
1712
1832
  resolvedConfig,
1713
1833
  configDir,
1714
- open: options.open
1834
+ open: opts.open
1715
1835
  }, debugState);
1716
1836
  },
1717
1837
  config (userConfig, env) {
1718
1838
  const rootDir = configDir;
1719
1839
  if (rootDir !== currentRootDir) {
1720
1840
  currentRootDir = rootDir;
1721
- resolvedConfig = resolveDevComponentConfig(rootDir, devComponentMap, configDir);
1841
+ resolvedConfig = resolveDevComponentConfig(rootDir, componentsMap, configDir);
1722
1842
  const isDev = !isLibBuild(env);
1723
1843
  contract = createContract(resolvedConfig.componentMap, resolvedConfig.defaultEntryAbs, isDev);
1724
1844
  }
@@ -1733,11 +1853,11 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1733
1853
  }
1734
1854
  }
1735
1855
  };
1736
- if (false === options.css) next.css = void 0;
1737
- else if (options.css) next.css = mergeConfig({
1856
+ if (false === opts.css) next.css = void 0;
1857
+ else if (opts.css) next.css = mergeConfig({
1738
1858
  css: next.css
1739
1859
  }, {
1740
- css: options.css
1860
+ css: opts.css
1741
1861
  }).css;
1742
1862
  if (isLibBuild(env)) {
1743
1863
  const actualNames = Object.keys(contract.dev.componentMap).filter((n)=>'*' !== n);
@@ -1766,7 +1886,7 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1766
1886
  picked,
1767
1887
  componentMap: contract.dev.componentMap,
1768
1888
  resolvedConfig,
1769
- options,
1889
+ options: opts,
1770
1890
  userConfig
1771
1891
  });
1772
1892
  Object.assign(libBuildState, {
@@ -1798,7 +1918,7 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1798
1918
  if (nextConfigDir !== configDir) {
1799
1919
  configDir = nextConfigDir;
1800
1920
  currentRootDir = configDir;
1801
- resolvedConfig = resolveDevComponentConfig(currentRootDir, devComponentMap, configDir);
1921
+ resolvedConfig = resolveDevComponentConfig(currentRootDir, componentsMap, configDir);
1802
1922
  const isDev = 'serve' === resolved.command;
1803
1923
  contract = createContract(resolvedConfig.componentMap, resolvedConfig.defaultEntryAbs, isDev);
1804
1924
  }
@@ -1928,6 +2048,6 @@ const devToReactPlugin = (devComponentMap = {}, options = {})=>{
1928
2048
  devCssAssetPlugin,
1929
2049
  libPostPlugin
1930
2050
  ];
1931
- };
2051
+ }
1932
2052
  const viteHostReactBridgePlugin = devToReactPlugin;
1933
2053
  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 };
package/dist/loaderUmdWrapper.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loaderUmdWrapper.d.ts","sourceRoot":"","sources":["../src/loaderUmdWrapper.ts"],"names":[],"mappings":"AAGA,UAAU,6BAA6B;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,CAwKrF"}
1
+ {"version":3,"file":"loaderUmdWrapper.d.ts","sourceRoot":"","sources":["../src/loaderUmdWrapper.ts"],"names":[],"mappings":"AAGA,UAAU,6BAA6B;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,6BAA6B,GAAG,MAAM,CA2MrF"}
package/dist/plugin.d.ts CHANGED
@@ -1,6 +1,46 @@
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[];
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;
4
44
  /** @deprecated Use `devToReactPlugin` instead. */
5
- export declare const viteHostReactBridgePlugin: (devComponentMap?: DevComponentMapInput, options?: DevToReactPluginOptions) => Plugin[];
45
+ export declare const viteHostReactBridgePlugin: typeof devToReactPlugin;
6
46
  //# 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;AAED,kDAAkD;AAClD,eAAO,MAAM,yBAAyB,yBAAmB,CAAA"}
package/dist/types.d.ts CHANGED
@@ -1,34 +1,94 @@
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
67
  /** @deprecated Use `DevToReactPluginOptions` instead. */
31
68
  export type ViteHostReactBridgePluginOptions = DevToReactPluginOptions;
69
+ /**
70
+ * Component configuration input type
71
+ *
72
+ * Can be one of:
73
+ * - `string`: Single component name used as wildcard pattern
74
+ * - `Record<string, string>`: Map of component names to their file paths
75
+ * - `undefined` or `null`: Use default entry point
76
+ *
77
+ * @example
78
+ * ```typescript
79
+ * // Single component
80
+ * 'Button'
81
+ *
82
+ * // Multiple components
83
+ * {
84
+ * Button: 'src/Button.tsx',
85
+ * Dialog: 'src/Dialog.tsx',
86
+ * }
87
+ *
88
+ * // Default entry
89
+ * undefined
90
+ * ```
91
+ */
32
92
  export type DevComponentMapInput = Record<string, string> | string | undefined | null;
33
93
  export interface DevComponentAudit {
34
94
  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,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dev-to/react-plugin",
3
- "version": "0.3.0",
3
+ "version": "0.4.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",