npm - @lark-apaas/fullstack-rspack-preset - Versions diffs - 0.1.2-alpha.4 → 0.1.2-alpha.6 - Mend

@lark-apaas/fullstack-rspack-preset 0.1.2-alpha.4 → 0.1.2-alpha.6

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 (6) hide show

package/lib/preset.js CHANGED Viewed

@@ -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/slardar-performance-monitor-plugin.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 interface SlardarPerformanceMonitorPluginOptions {
-    position?: 'head-end' | 'body-start' | 'body-end';
     snippet?: string;
+    bid?: string;
+    globalName?: string;
 }
 declare class SlardarPerformanceMonitorPlugin {
     private options;

package/lib/rspack-plugins/slardar-performance-monitor-plugin.js CHANGED Viewed

@@ -32,21 +32,35 @@ class SlardarPerformanceMonitorPlugin {
                     return;
                 }
                 const hooks = HtmlPlugin.getHooks(compilation);
-                hooks.beforeEmit.tapAsync('SlardarPerformanceMonitorPlugin', (data, cb) => {
-                    const position = this.options.position ?? 'head-end';
-                    const snippet = this.options.snippet ?? getSlardarScript();
+                // 使用 alterAssetTagGroups 钩子，在标签数组层面操作
+                hooks.alterAssetTagGroups.tap('SlardarPerformanceMonitorPlugin', (data) => {
+                    const snippet = this.options.snippet ?? getSlardarScriptContent({
+                        bid: this.options.bid,
+                        globalName: this.options.globalName,
+                    });
                     if (!snippet)
-                        return;
-                    if (position === 'body-end') {
-                        data.html = data.html.replace('</body>', `${snippet}\n</body>`);
+                        return data;
+                    // 创建 Slardar 脚本标签对象
+                    const slardarTag = {
+                        tagName: 'script',
+                        voidTag: false,
+                        innerHTML: snippet,
+                        attributes: {},
+                    };
+                    // 找到 main.js 的索引位置
+                    const mainJsIndex = data.headTags.findIndex((tag) => tag.tagName === 'script' &&
+                        tag.attributes &&
+                        tag.attributes.src &&
+                        tag.attributes.src.includes('main.js'));
+                    if (mainJsIndex !== -1) {
+                        // 在 main.js 之前插入 Slardar 脚本
+                        data.headTags.splice(mainJsIndex, 0, slardarTag);
                     }
-                    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>`);
+                    else {
+                        // 如果没找到 main.js，插入到 headTags 最前面
+                        data.headTags.unshift(slardarTag);
                     }
-                    cb(null, data);
+                    return data;
                 });
             }
             catch (error) {
@@ -56,11 +70,10 @@ class SlardarPerformanceMonitorPlugin {
     }
 }
 exports.default = SlardarPerformanceMonitorPlugin;
-function getSlardarScript(option = {}) {
+function getSlardarScriptContent(option = {}) {
     const bid = option.bid || 'apaas_ai';
     const globalName = option.globalName || 'KSlardarWeb';
     return `
-  <script>
   // 创建 Slardar 脚本元素
     const slardarScript = document.createElement('script');
     slardarScript.src = 'https://lf3-short.ibytedapm.com/slardar/fe/sdk-web/browser.cn.js?bid=${bid}&globalName=${globalName}';
@@ -69,13 +82,13 @@ function getSlardarScript(option = {}) {
     // 添加 onload 事件处理
     slardarScript.onload = function() {
       // 脚本加载完成后执行初始化
-      if (window.KSlardarWeb) {
-        window.KSlardarWeb('init', {
-          bid: 'apaas_ai',
+      if (window.${globalName}) {
+        window.${globalName}('init', {
+          bid: '${bid}',
           // 四种类型：dev/boe/pre/online
           env: 'online',
         });
-        window.KSlardarWeb('start');
+        window.${globalName}('start');
       }
     };
@@ -91,7 +104,5 @@ function getSlardarScript(option = {}) {
     const performanceScript = document.createElement('script');
     performanceScript.src = 'https://sf3-scmcdn-cn.feishucdn.com/obj/unpkg/byted/performance/0.1.0/dist/performance.iife.js';
     document.head.appendChild(performanceScript);
-</script>
   `;
 }

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

@@ -0,0 +1,8 @@
+interface ViewContextInjectionPluginOptions {
+}
+declare class ViewContextInjectionPlugin {
+    private options;
+    constructor(options?: ViewContextInjectionPluginOptions);
+    apply(compiler: any): void;
+}
+export default ViewContextInjectionPlugin;

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

@@ -0,0 +1,74 @@
+"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);
+                // 使用 alterAssetTagGroups 钩子，在标签数组层面操作
+                hooks.alterAssetTagGroups.tap('ViewContextInjectionPlugin', (data) => {
+                    // 创建 ViewContext 脚本标签对象
+                    const viewContextTag = {
+                        tagName: 'script',
+                        voidTag: false,
+                        innerHTML: getViewContextScriptContent(),
+                        attributes: {},
+                    };
+                    // 找到 main.js 的索引位置
+                    const mainJsIndex = data.headTags.findIndex((tag) => tag.tagName === 'script' &&
+                        tag.attributes &&
+                        tag.attributes.src &&
+                        tag.attributes.src.includes('main.js'));
+                    if (mainJsIndex !== -1) {
+                        // 在 main.js 之前插入 ViewContext 脚本
+                        data.headTags.splice(mainJsIndex, 0, viewContextTag);
+                    }
+                    else {
+                        // 如果没找到 main.js，插入到 headTags 最前面
+                        data.headTags.unshift(viewContextTag);
+                    }
+                    return data;
+                });
+            }
+            catch (error) {
+                console.error('Error in ViewContextInjectionPlugin:', error);
+            }
+        });
+    }
+}
+exports.default = ViewContextInjectionPlugin;
+function getViewContextScriptContent() {
+    return `
+        window.csrfToken = "{{csrfToken}}";
+        window.userId = "{{userId}}";
+        window.tenantId = "{{tenantId}}";
+        window.appId = "{{appId}}";
+    `;
+}

package/package.json CHANGED Viewed

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