@lark-apaas/fullstack-rspack-preset 1.0.21-alpha.2 → 1.0.21-alpha.3

package/lib/preset.js

@@ -12,6 +12,7 @@ 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"));
+const og_meta_injection_plugin_1 = __importDefault(require("./rspack-plugins/og-meta-injection-plugin"));
 const dev_server_snapdom_proxy_1 = require("./utils/dev-server-snapdom-proxy");
 function createRecommendRspackConfig(options) {
     const { isDev = true, enableReactRefresh = isDev, needRoutes = true, clientBasePath = '', publicPath = '', // 静态资源路径
@@ -163,6 +164,8 @@ function createRecommendRspackConfig(options) {
             new slardar_performance_monitor_plugin_1.default(),
             // 视图上下文注入插件
             new view_context_injection_plugin_1.default(),
+            // OG Meta 标签注入插件
+            new og_meta_injection_plugin_1.default(),
             // 开发环境下，解析路由
             isDev && needRoutes &&
                 new route_parser_plugin_1.default({
@@ -281,6 +284,11 @@ function createRecommendRspackConfig(options) {
                     target: `http://localhost:${serverPort}`,
                     changeOrigin: true,
                 },
+                {
+                    context: [`${clientBasePath}/__innerapi__`],
+                    target: `http://localhost:${serverPort}`,
+                    changeOrigin: true,
+                },
                 {
                     context: (pathname, req) => {
                         // 代理所有请求 HTML 响应的请求（页面路由）

package/lib/rspack-plugins/og-meta-injection-plugin.d.ts

@@ -0,0 +1,17 @@
+interface OgMetaInjectionPluginOptions {
+    customTags?: Array<{
+        property: string;
+        placeholder: string;
+    }>;
+    titlePlaceholder?: string;
+    faviconPlaceholder?: string;
+}
+declare class OgMetaInjectionPlugin {
+    private options;
+    private defaultOgTags;
+    private defaultTitlePlaceholder;
+    private defaultFaviconPlaceholder;
+    constructor(options?: OgMetaInjectionPluginOptions);
+    apply(compiler: any): void;
+}
+export default OgMetaInjectionPlugin;

package/lib/rspack-plugins/og-meta-injection-plugin.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class OgMetaInjectionPlugin {
+    constructor(options) {
+        // 默认需要处理的 OG 标签配置
+        this.defaultOgTags = [
+            { property: 'og:title', placeholder: '{{appName}}' },
+            { property: 'og:description', placeholder: '{{appDescription}}' },
+            { property: 'og:image', placeholder: '{{appAvatar}}' },
+            { property: 'og:url', placeholder: '{{currentUrl}}' },
+        ];
+        // 默认 title 占位符
+        this.defaultTitlePlaceholder = '{{appName}}';
+        // 默认 favicon 占位符
+        this.defaultFaviconPlaceholder = '{{appAvatar}}';
+        this.options = options || {};
+    }
+    apply(compiler) {
+        compiler.hooks.compilation.tap('OgMetaInjectionPlugin', (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('OgMetaInjectionPlugin: HtmlRspackPlugin not found');
+                            return;
+                        }
+                    }
+                }
+                catch (e) {
+                    console.warn('OgMetaInjectionPlugin: Failed to get HtmlRspackPlugin');
+                    return;
+                }
+                const hooks = HtmlPlugin.getHooks(compilation);
+                // 使用 beforeEmit 钩子，在 HTML 字符串层面操作
+                hooks.beforeEmit.tapAsync('OgMetaInjectionPlugin', (data, callback) => {
+                    try {
+                        let html = data.html;
+                        // 1. 处理 OG Meta 标签
+                        const ogTags = this.options.customTags || this.defaultOgTags;
+                        ogTags.forEach(({ property, placeholder }) => {
+                            // 转义特殊字符，避免正则表达式错误
+                            const escapedProperty = property.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                            // 检查是否存在该 property 的 meta 标签
+                            const metaRegex = new RegExp(`<meta\\s+[^>]*property=["']?${escapedProperty}["']?[^>]*>`, 'i');
+                            if (metaRegex.test(html)) {
+                                // 如果存在，替换其 content 为占位符
+                                const replaceRegex = new RegExp(`(<meta\\s+[^>]*property=["']?${escapedProperty}["']?[^>]*content=)["'][^"']*["']([^>]*>)`, 'gi');
+                                html = html.replace(replaceRegex, `$1"${placeholder}"$2`);
+                            }
+                            else {
+                                // 如果不存在，在 </head> 前插入新标签
+                                const newMetaTag = `\n    <meta property="${property}" content="${placeholder}">`;
+                                html = html.replace('</head>', `${newMetaTag}\n  </head>`);
+                            }
+                        });
+                        // 2. 处理 <title> 标签
+                        const titlePlaceholder = this.options.titlePlaceholder || this.defaultTitlePlaceholder;
+                        const titleRegex = /<title>[^<]*<\/title>/i;
+                        if (titleRegex.test(html)) {
+                            // 如果存在 title 标签，替换其内容
+                            html = html.replace(/<title>[^<]*<\/title>/gi, `<title>${titlePlaceholder}</title>`);
+                        }
+                        else {
+                            // 如果不存在，在 </head> 前插入
+                            const newTitleTag = `\n    <title>${titlePlaceholder}</title>`;
+                            html = html.replace('</head>', `${newTitleTag}\n  </head>`);
+                        }
+                        // 3. 处理 <link rel="icon"> 标签
+                        const faviconPlaceholder = this.options.faviconPlaceholder || this.defaultFaviconPlaceholder;
+                        const iconRegex = /<link\s+[^>]*rel=["']?(?:icon|shortcut icon)["']?[^>]*>/i;
+                        if (iconRegex.test(html)) {
+                            // 如果存在 icon 标签，替换其 href
+                            const replaceIconRegex = /(<link\s+[^>]*rel=["']?(?:icon|shortcut icon)["']?[^>]*href=)["'][^"']*["']([^>]*>)/gi;
+                            html = html.replace(replaceIconRegex, `$1"${faviconPlaceholder}"$2`);
+                        }
+                        else {
+                            // 如果不存在，在 </head> 前插入
+                            const newIconTag = `\n    <link rel="icon" href="${faviconPlaceholder}">`;
+                            html = html.replace('</head>', `${newIconTag}\n  </head>`);
+                        }
+                        data.html = html;
+                        callback(null, data);
+                    }
+                    catch (error) {
+                        console.error('Error in OgMetaInjectionPlugin:', error);
+                        callback(error);
+                    }
+                });
+            }
+            catch (error) {
+                console.error('Error in OgMetaInjectionPlugin:', error);
+            }
+        });
+    }
+}
+exports.default = OgMetaInjectionPlugin;

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

@@ -70,5 +70,13 @@ function getViewContextScriptContent() {
         window.userId = "{{userId}}";
         window.tenantId = "{{tenantId}}";
         window.appId = "{{appId}}";
+        const appInfo = {
+          name: "{{appName}}",
+          avatar: "{{appAvatar}}",
+          description: "{{appDescription}}",
+        };
+        if (appInfo.name) {
+          window._appInfo = appInfo;
+        }
     `;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/fullstack-rspack-preset",
-  "version": "1.0.21-alpha.2",
+  "version": "1.0.21-alpha.3",
   "files": [
     "lib",
     "patches",
@@ -31,7 +31,7 @@
     "@babel/parser": "^7.28.0",
     "@babel/traverse": "^7.28.0",
     "@babel/types": "^7.28.2",
-    "@lark-apaas/devtool-kits": "^1.2.5",
+    "@lark-apaas/devtool-kits": "1.2.8-alpha.1",
     "@lark-apaas/miaoda-inspector-babel-plugin": "^1.0.0",
     "@lark-apaas/miaoda-inspector-jsx-runtime": "^1.0.0",
     "@rspack/plugin-react-refresh": "^1.5.1",