@lark-apaas/fullstack-rspack-preset 0.1.2-alpha.3 → 0.1.2-alpha.5

package/README.md

@@ -32,9 +32,9 @@ yarn add @lark-apaas/fullstack-rspack-preset
 ```javascript
 // rspack.config.js
 const path = require('path');
-const { createFullstackRspackConfig } = require('@lark-apaas/fullstack-rspack-preset');
+const { defineConfig } = require('@lark-apaas/fullstack-rspack-preset');
 
-module.exports = createFullstackRspackConfig({
+module.exports = defineConfig({
   entry: {
     main: './client/src/index.tsx',
   },
@@ -80,11 +80,16 @@ NODE_ENV=production npx rspack build --config rspack.config.js
 
 ## API 文档
 
-### createFullstackRspackConfig (简化版)
+### createFullstackRspackConfig / defineConfig（推荐）
 
 自动从环境变量读取配置，用户只需提供覆盖配置。
 
 ```typescript
+function defineConfig(
+  overrides?: Partial<Configuration>
+): Configuration;
+
+// 别名：createFullstackRspackConfig（向后兼容）
 function createFullstackRspackConfig(
   overrides?: Partial<Configuration>
 ): Configuration;
@@ -234,9 +239,9 @@ module.exports = defineConfig(({mode}) => {
 
 ```javascript
 const path = require('path');
-const { createFullstackRspackConfig } = require('@lark-apaas/fullstack-rspack-preset');
+const { defineConfig } = require('@lark-apaas/fullstack-rspack-preset');
 
-module.exports = createFullstackRspackConfig({
+module.exports = defineConfig({
   entry: {
     main: './client/src/index.tsx',
   },
@@ -250,7 +255,7 @@ module.exports = createFullstackRspackConfig({
 
 **迁移步骤：**
 
-1. 修改导入：`createRecommendRspackConfig` → `createFullstackRspackConfig`
+1. 修改导入：`createRecommendRspackConfig` → `defineConfig`
 2. 删除手动环境变量处理代码
 3. 删除 `defineConfig`、`normalizeBasePath`、`merge` 等导入
 4. 只保留覆盖配置（entry、resolve 等）
@@ -275,7 +280,10 @@ ENABLE_REACT_REFRESH=false
 直接在 `overrides` 中添加：
 
 ```javascript
-module.exports = createFullstackRspackConfig({
+const { defineConfig } = require('@lark-apaas/fullstack-rspack-preset');
+const rspack = require('@rspack/core');
+
+module.exports = defineConfig({
   plugins: [
     new rspack.DefinePlugin({
       'process.env.CUSTOM_VAR': JSON.stringify('custom-value'),
@@ -302,6 +310,11 @@ ASSETS_CDN_PATH=https://cdn.example.com
 
 ## 版本历史
 
+### 0.1.2-alpha.3
+- ✨ 新增 `defineConfig` API（对齐 rspack 官方）
+- ✨ 保持 `createFullstackRspackConfig` 向后兼容
+- 🐛 修复 .env 异步加载问题
+
 ### 0.1.2-alpha.2
 - ✨ 新增 `createFullstackRspackConfig` 简化 API
 - ✨ 自动加载 `.env` 环境变量

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 import type { Configuration } from '@rspack/core';
 /**
- * 创建 Fullstack Rspack 配置（简化版）
+ * 定义 Fullstack Rspack 配置
  *
  * 自动从环境变量读取配置，用户只需提供覆盖配置
  *
@@ -9,9 +9,9 @@ import type { Configuration } from '@rspack/core';
  *
  * @example
  * ```javascript
- * const { createFullstackRspackConfig } = require('@lark-apaas/fullstack-rspack-preset');
+ * const { defineConfig } = require('@lark-apaas/fullstack-rspack-preset');
  *
- * module.exports = createFullstackRspackConfig({
+ * module.exports = defineConfig({
  *   entry: {
  *     main: './client/src/index.tsx',
  *   },
@@ -34,4 +34,5 @@ import type { Configuration } from '@rspack/core';
  * - CLIENT_DEV_PORT: 客户端开发端口 (默认: 8080)
  */
 export declare function createFullstackRspackConfig(overrides?: Partial<Configuration>): Configuration;
+export { createFullstackRspackConfig as defineConfig };
 export default createFullstackRspackConfig;

package/lib/index.js

@@ -1,48 +1,12 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFullstackRspackConfig = createFullstackRspackConfig;
+exports.defineConfig = createFullstackRspackConfig;
 const webpack_merge_1 = require("webpack-merge");
 const devtool_kits_1 = require("@lark-apaas/devtool-kits");
-const path_1 = __importDefault(require("path"));
 const preset_1 = require("./preset");
 /**
- * 创建 Fullstack Rspack 配置（简化版）
+ * 定义 Fullstack Rspack 配置
  *
  * 自动从环境变量读取配置，用户只需提供覆盖配置
  *
@@ -51,9 +15,9 @@ const preset_1 = require("./preset");
  *
  * @example
  * ```javascript
- * const { createFullstackRspackConfig } = require('@lark-apaas/fullstack-rspack-preset');
+ * const { defineConfig } = require('@lark-apaas/fullstack-rspack-preset');
  *
- * module.exports = createFullstackRspackConfig({
+ * module.exports = defineConfig({
  *   entry: {
  *     main: './client/src/index.tsx',
  *   },
@@ -76,11 +40,10 @@ const preset_1 = require("./preset");
  * - CLIENT_DEV_PORT: 客户端开发端口 (默认: 8080)
  */
 function createFullstackRspackConfig(overrides = {}) {
-    // 1. 自动加载 .env 文件
+    // 1. 自动加载 .env 文件（同步加载，确保环境变量立即可用）
     try {
-        Promise.resolve().then(() => __importStar(require('dotenv'))).then((dotenv) => dotenv.config({
-            path: path_1.default.resolve(process.cwd(), '.env'),
-        }));
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        require('dotenv').config();
     }
     catch (e) {
         // dotenv 是可选依赖，如果没有安装也不影响使用
@@ -108,5 +71,5 @@ function createFullstackRspackConfig(overrides = {}) {
     // 5. 深度合并用户配置
     return (0, webpack_merge_1.merge)(baseConfig, overrides);
 }
-// 默认导出简化版 API
+// 默认导出
 exports.default = createFullstackRspackConfig;

package/lib/preset.js

@@ -11,6 +11,7 @@ const plugin_react_refresh_1 = __importDefault(require("@rspack/plugin-react-ref
 const dev_server_listener_1 = require("./utils/dev-server-listener");
 const route_parser_plugin_1 = __importDefault(require("./rspack-plugins/route-parser-plugin"));
 const slardar_performance_monitor_plugin_1 = __importDefault(require("./rspack-plugins/slardar-performance-monitor-plugin"));
+const view_context_injection_plugin_1 = __importDefault(require("./rspack-plugins/view-context-injection-plugin"));
 function createRecommendRspackConfig(options) {
     const { isDev = true, enableReactRefresh = isDev, needRoutes = true, clientBasePath = '', publicPath = '', // 静态资源路径
      } = options;
@@ -152,6 +153,8 @@ function createRecommendRspackConfig(options) {
             }),
             // 性能监控插件
             new slardar_performance_monitor_plugin_1.default(),
+            // 视图上下文注入插件
+            new view_context_injection_plugin_1.default(),
             // 开发环境下，解析路由
             isDev && needRoutes &&
                 new route_parser_plugin_1.default({

package/lib/rspack-plugins/view-context-injection-plugin.d.ts

@@ -0,0 +1,9 @@
+interface ViewContextInjectionPluginOptions {
+    position?: 'head-end' | 'body-start' | 'body-end';
+}
+declare class ViewContextInjectionPlugin {
+    private options;
+    constructor(options?: ViewContextInjectionPluginOptions);
+    apply(compiler: any): void;
+}
+export default ViewContextInjectionPlugin;

package/lib/rspack-plugins/view-context-injection-plugin.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class ViewContextInjectionPlugin {
+    constructor(options) {
+        this.options = options || {};
+    }
+    apply(compiler) {
+        compiler.hooks.compilation.tap('ViewContextInjectionPlugin', (compilation) => {
+            try {
+                // 从 compiler.webpack 或 compiler.rspack 获取 HtmlRspackPlugin
+                // 这样可以避免在 npm link 环境下的模块解析问题
+                let HtmlPlugin;
+                try {
+                    // 尝试从 compiler 中获取 rspack
+                    const rspack = compiler.webpack || compiler.rspack || compiler.constructor.webpack;
+                    if (rspack && rspack.HtmlRspackPlugin) {
+                        HtmlPlugin = rspack.HtmlRspackPlugin;
+                    }
+                    else {
+                        // 降级到 require，但这在 npm link 下可能失败
+                        try {
+                            HtmlPlugin = require('html-webpack-plugin');
+                        }
+                        catch (e2) {
+                            console.warn('ViewContextInjectionPlugin: HtmlRspackPlugin not found');
+                            return;
+                        }
+                    }
+                }
+                catch (e) {
+                    console.warn('ViewContextInjectionPlugin: Failed to get HtmlRspackPlugin');
+                    return;
+                }
+                const hooks = HtmlPlugin.getHooks(compilation);
+                hooks.beforeEmit.tapAsync('ViewContextInjectionPlugin', (data, cb) => {
+                    const position = this.options.position ?? 'head-end';
+                    const snippet = getViewContextScript();
+                    if (position === 'body-end') {
+                        data.html = data.html.replace('</body>', `${snippet}\n</body>`);
+                    }
+                    else if (position === 'body-start') {
+                        data.html = data.html.replace('<body>', `<body>\n${snippet}`);
+                    }
+                    else if (position === 'head-end') {
+                        data.html = data.html.replace('</head>', `${snippet}\n</head>`);
+                    }
+                    cb(null, data);
+                });
+            }
+            catch (error) {
+                console.error('Error in ViewContextInjectionPlugin:', error);
+            }
+        });
+    }
+}
+exports.default = ViewContextInjectionPlugin;
+function getViewContextScript() {
+    return `    <script>
+        window.csrfToken = "{{csrfToken}}";
+        window.userId = "{{userId}}";
+        window.tenantId = "{{tenantId}}";
+        window.appId = "{{appId}}";
+    </script>`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/fullstack-rspack-preset",
-  "version": "0.1.2-alpha.3",
+  "version": "0.1.2-alpha.5",
   "files": [
     "lib"
   ],