@dev-to/react-plugin 1.0.2 → 1.1.3

package/README.md

@@ -33,7 +33,7 @@ export default defineConfig({
 
 ### components 参数形态
 
-- `devToReactPlugin()`：通配符模式（默认 `'*': '/'`），便于开发；但 `vite build --mode lib` 需要显式 componentName。
+- `devToReactPlugin()`：通配符模式（默认 `'*': '/'`），便于开发；但 `dev-to build`（等价于 `vite build --mode lib`）需要显式 componentName。
 - `devToReactPlugin('MyCard')`：字符串快捷模式，等价于 `{ MyCard: '/' }`。
 - `devToReactPlugin({ MyCard: 'src/MyCard.tsx' })`：显式映射（推荐，且 lib 构建必须）。
 
@@ -61,7 +61,8 @@ export default defineConfig({
 
 ## 生产构建（Library Mode）
 
-执行 `vite build --mode lib` 时，插件会按 `components` 参数为每个组件产出一个 UMD bundle，默认输出到 `dist/<component>/`。
+执行 `dev-to build`（等价于 `vite build --mode lib`）时，插件会按 `components` 参数为每个组件产出一个 UMD bundle，默认输出到 `dist/<component>/`。
+支持透传 Vite build 参数，例如：`dev-to build --sourcemap --outDir dist-lib`。
 
 > 提示：`'*': '/'` 的通配符模式仅适合开发；lib 构建请显式列出组件名。
 

package/bin/dev-to.js

@@ -0,0 +1,179 @@
+#!/usr/bin/env node
+import { spawnSync } from 'node:child_process'
+import fs from 'node:fs'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import process from 'node:process'
+
+const { console } = globalThis
+
+const args = process.argv.slice(2)
+
+if (args.length === 0 || args[0] === '-h' || args[0] === '--help') {
+  printHelp()
+  process.exit(0)
+}
+
+const command = args[0]
+if (command !== 'build') {
+  console.error(`Unknown command: ${command}`)
+  printHelp()
+  process.exit(1)
+}
+
+const { args: forwardedArgs, removed } = stripModeArgs(args.slice(1))
+if (removed) {
+  console.error('Note: --mode is managed by dev-to (lib). The provided mode is ignored.')
+}
+
+const result = spawnSync(
+  process.execPath,
+  [resolveViteBin(), 'build', '--mode', 'lib', ...forwardedArgs],
+  { stdio: 'inherit' },
+)
+
+if (result.error) {
+  console.error(`Failed to run Vite: ${result.error.message}`)
+  process.exit(1)
+}
+
+process.exit(result.status ?? 1)
+
+function stripModeArgs(userArgs) {
+  const cleaned = []
+  let removed = false
+
+  for (let i = 0; i < userArgs.length; i += 1) {
+    const arg = userArgs[i]
+    if (arg === '--') {
+      continue
+    }
+    if (arg === '--mode' || arg === '-m') {
+      removed = true
+      i += 1
+      continue
+    }
+    if (arg.startsWith('--mode=')) {
+      removed = true
+      continue
+    }
+    if (arg.startsWith('-m') && arg.length > 2) {
+      removed = true
+      continue
+    }
+    cleaned.push(arg)
+  }
+
+  return { args: cleaned, removed }
+}
+
+function resolveViteBin() {
+  const require = createRequire(import.meta.url)
+  const searchPaths = [process.cwd(), path.join(process.cwd(), 'node_modules')]
+
+  const resolved = resolvePath(require, 'vite/bin/vite.js', searchPaths)
+  if (resolved) {
+    return resolved
+  }
+
+  const viteEntry = resolvePath(require, 'vite', searchPaths)
+  if (viteEntry) {
+    const viteRoot = findPackageRoot(viteEntry)
+    if (viteRoot) {
+      const binPath = resolveBinFromPackage(viteRoot)
+      if (binPath) {
+        return binPath
+      }
+    }
+  }
+
+  console.error('Vite is not installed or could not be resolved. Please add it to devDependencies.')
+  process.exit(1)
+}
+
+function resolvePath(require, specifier, searchPaths) {
+  for (const base of searchPaths) {
+    try {
+      return require.resolve(specifier, { paths: [base] })
+    }
+    catch {
+      // Try next path.
+    }
+  }
+
+  try {
+    return require.resolve(specifier)
+  }
+  catch {
+    return null
+  }
+}
+
+function findPackageRoot(startPath) {
+  let current = path.dirname(startPath)
+  while (true) {
+    const pkgPath = path.join(current, 'package.json')
+    if (fs.existsSync(pkgPath)) {
+      try {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+        if (pkg && pkg.name === 'vite') {
+          return current
+        }
+      }
+      catch {
+        // Keep walking up.
+      }
+    }
+
+    const parent = path.dirname(current)
+    if (parent === current) {
+      break
+    }
+    current = parent
+  }
+
+  return null
+}
+
+function resolveBinFromPackage(pkgRoot) {
+  const pkgPath = path.join(pkgRoot, 'package.json')
+  if (!fs.existsSync(pkgPath)) {
+    return null
+  }
+
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+    if (pkg && pkg.bin) {
+      const binEntry = typeof pkg.bin === 'string'
+        ? pkg.bin
+        : pkg.bin.vite || pkg.bin['vite']
+      if (binEntry) {
+        const binPath = path.resolve(pkgRoot, binEntry)
+        if (fs.existsSync(binPath)) {
+          return binPath
+        }
+      }
+    }
+  }
+  catch {
+    // Fall back to default path.
+  }
+
+  const fallback = path.resolve(pkgRoot, 'bin', 'vite.js')
+  return fs.existsSync(fallback) ? fallback : null
+}
+
+function printHelp() {
+  console.log(
+    [
+      'dev-to <command>',
+      '',
+      'Commands:',
+      '  build     Run "vite build --mode lib" and forward extra args.',
+      '',
+      'Examples:',
+      '  dev-to build',
+      '  dev-to build --sourcemap --outDir dist-lib',
+    ].join('\n'),
+  )
+}

package/dist/876.js

@@ -0,0 +1,3 @@
+export { default as node_path } from "node:path";
+export { exec, spawnSync } from "node:child_process";
+export { createRequire } from "node:module";

package/dist/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+import node_process from "node:process";
+import { createRequire, node_path, spawnSync } from "./876.js";
+const args = node_process.argv.slice(2);
+if (0 === args.length || '-h' === args[0] || '--help' === args[0]) {
+    printHelp();
+    node_process.exit(0);
+}
+const command = args[0];
+if ('build' !== command) {
+    console.error(`Unknown command: ${command}`);
+    printHelp();
+    node_process.exit(1);
+}
+const { args: forwardedArgs, removed: cli_removed } = stripModeArgs(args.slice(1));
+if (cli_removed) console.error('Note: --mode is managed by dev-to (lib). The provided mode is ignored.');
+const viteBin = resolveViteBin();
+const result = spawnSync(node_process.execPath, [
+    viteBin,
+    'build',
+    '--mode',
+    'lib',
+    ...forwardedArgs
+], {
+    stdio: 'inherit'
+});
+if (result.error) {
+    console.error(`Failed to run Vite: ${result.error.message}`);
+    node_process.exit(1);
+}
+node_process.exit(result.status ?? 1);
+function stripModeArgs(userArgs) {
+    const cleaned = [];
+    let removed = false;
+    for(let i = 0; i < userArgs.length; i += 1){
+        const arg = userArgs[i];
+        if ('--' !== arg) {
+            if ('--mode' === arg || '-m' === arg) {
+                removed = true;
+                i += 1;
+                continue;
+            }
+            if (arg.startsWith('--mode=')) {
+                removed = true;
+                continue;
+            }
+            if (arg.startsWith('-m') && arg.length > 2) {
+                removed = true;
+                continue;
+            }
+            cleaned.push(arg);
+        }
+    }
+    return {
+        args: cleaned,
+        removed
+    };
+}
+function resolveViteBin() {
+    const require = createRequire(import.meta.url);
+    const searchPaths = [
+        node_process.cwd(),
+        node_path.join(node_process.cwd(), 'node_modules')
+    ];
+    for (const base of searchPaths)try {
+        return require.resolve('vite/bin/vite.js', {
+            paths: [
+                base
+            ]
+        });
+    } catch  {}
+    try {
+        return require.resolve('vite/bin/vite.js');
+    } catch  {
+        console.error('Vite is not installed. Please add it to devDependencies.');
+        node_process.exit(1);
+    }
+}
+function printHelp() {
+    console.log('dev-to <command>\n\nCommands:\n  build     Run "vite build --mode lib" and forward extra args.\n\nExamples:\n  dev-to build\n  dev-to build --sourcemap --outDir dist-lib');
+}

package/dist/index.js

@@ -1,13 +1,11 @@
 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";
 import { mergeConfig } from "vite";
-import { exec } from "node:child_process";
-import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
 import node_os from "node:os";
 import typescript from "typescript";
+import { exec, node_path, createRequire } from "./876.js";
 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;
@@ -383,7 +381,7 @@ root.render(React.createElement(window.ComponentName, { prop1: <span class="str"
 
         <div class="card">
             <h3>📦 构建与部署</h3>
-            <p class="muted">执行 <code>vite build --mode lib</code> 将组件打包为 UMD 格式以供发布。</p>
+            <p class="muted">执行 <code>dev-to build</code>（等价于 <code>vite build --mode lib</code>）将组件打包为 UMD 格式以供发布。</p>
 
             <div class="build-grid">
                 <div class="build-card">
@@ -1326,7 +1324,7 @@ function installDebugTools(server, ctx, state) {
                     suggested: requestOrigin,
                     snippet: `localStorage.setItem('VITE_DEV_SERVER_ORIGIN', '${requestOrigin}'); location.reload();`,
                     libBuild: {
-                        command: 'vite build --mode lib',
+                        command: 'dev-to build',
                         env: {
                             DEV_TO_REACT_LIB_SECTION: libComponentExample
                         },
@@ -1353,7 +1351,7 @@ function installDebugTools(server, ctx, state) {
                     '宿主侧需设置 localStorage.VITE_DEV_SERVER_ORIGIN（可从 originCandidates 里选择一个可访问的 origin）。',
                     'components 参数的 key 必须与后端返回的 componentName 完全一致（严格匹配）。',
                     'Fast Refresh 关键：必须先 import init.js（安装 react-refresh preamble），再 import react-dom/client。',
-                    '如需产出可分发 UMD 包：使用 `vite build --mode lib`（仅构建 components 指定的组件，输出到 dist/<component>/）。'
+                    '如需产出可分发 UMD 包：使用 `dev-to build`（等价于 `vite build --mode lib`，仅构建 components 指定的组件，输出到 dist/<component>/）。'
                 ]
             }, null, 2));
             return;
@@ -1891,7 +1889,7 @@ function devToReactPlugin(components, options) {
             if (1 === Object.keys(resolvedConfig.componentMap).length && '/' === resolvedConfig.componentMap['*']) {
                 const warn = server.config.logger?.warn?.bind(server.config.logger) ?? console.warn;
                 warn('');
-                warn(`⚠️  ${constants_PLUGIN_LOG_PREFIX} No componentName configured. This works in dev mode but will fail in library build (--mode lib).`);
+                warn(`⚠️  ${constants_PLUGIN_LOG_PREFIX} No componentName configured. This works in dev mode but will fail in library build (dev-to build / --mode lib).`);
                 warn('   Please use devToReactPlugin({ ComponentName: "src/ComponentName.tsx" }) or devToReactPlugin({ ComponentName: "/" }) to specify components.');
                 warn('   Or use wildcard: devToReactPlugin({ "*": "/" }) or devToReactPlugin("*")');
                 warn('');
@@ -1932,7 +1930,7 @@ function devToReactPlugin(components, options) {
             }).css;
             if (isLibBuild(env)) {
                 const actualNames = Object.keys(contract.dev.componentMap).filter((n)=>'*' !== n);
-                if (0 === actualNames.length && !process.env.DEV_TO_REACT_LIB_SECTION) throw new Error(` ${constants_PLUGIN_LOG_PREFIX} Library build (--mode lib) requires at least one explicit componentName for identification and distribution.\nCurrent configuration is in "global fallback mode", which cannot determine build targets.\n\nPlease use one of the following to specify components:\n  - devToReactPlugin('ComponentName')\n  - devToReactPlugin({ ComponentName: '/' })\n  - devToReactPlugin({ ComponentName: 'src/ComponentName.tsx' })\n\n💡 Tip: Wildcards are convenient for development, but explicit naming is required for production builds.`);
+                if (0 === actualNames.length && !process.env.DEV_TO_REACT_LIB_SECTION) throw new Error(` ${constants_PLUGIN_LOG_PREFIX} Library build (dev-to build / --mode lib) requires at least one explicit componentName for identification and distribution.\nCurrent configuration is in "global fallback mode", which cannot determine build targets.\n\nPlease use one of the following to specify components:\n  - devToReactPlugin('ComponentName')\n  - devToReactPlugin({ ComponentName: '/' })\n  - devToReactPlugin({ ComponentName: 'src/ComponentName.tsx' })\n\n💡 Tip: Wildcards are convenient for development, but explicit naming is required for production builds.`);
                 const isChild = '1' === process.env.DEV_TO_REACT_LIB_CHILD;
                 const buildTargets = resolveBuildTargets({
                     componentMap: contract.dev.componentMap,

package/dist/types.d.ts

@@ -31,7 +31,7 @@ export interface DevToReactPluginOptions {
      */
     css?: CSSOptions | false;
     /**
-     * Build configuration passed to Vite (only applies when running `vite build --mode lib`).
+     * Build configuration passed to Vite (only applies when running `dev-to build` / `vite build --mode lib`).
      *
      * Typical use cases:
      * - Adjust asset inlining: `assetsInlineLimit`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-to/react-plugin",
-  "version": "1.0.2",
+  "version": "1.1.3",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -11,8 +11,12 @@
       "import": "./dist/index.js"
     }
   },
+  "bin": {
+    "dev-to": "./bin/dev-to.js"
+  },
   "files": [
-    "dist"
+    "dist",
+    "bin"
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -31,7 +35,7 @@
   "dependencies": {
     "picocolors": "^1.1.0",
     "typescript": "^5.4.5",
-    "@dev-to/react-shared": "1.0.0"
+    "@dev-to/react-shared": "1.0.1"
   },
   "scripts": {
     "build": "rslib build",