@lark-apaas/fullstack-rspack-preset 1.0.20-alpha.app.1 → 1.0.20-alpha.app.3

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 (2) hide show
  1. package/lib/rspack-plugins/og-meta-injection-plugin.js +49 -64
  2. package/package.json +1 -1
package/lib/rspack-plugins/og-meta-injection-plugin.js CHANGED
@@ -43,75 +43,60 @@ class OgMetaInjectionPlugin {
43
43
  return;
44
44
  }
45
45
  const hooks = HtmlPlugin.getHooks(compilation);
46
- // 使用 alterAssetTagGroups 钩子，在标签数组层面操作
47
- hooks.alterAssetTagGroups.tap('OgMetaInjectionPlugin', (data) => {
48
- // 1. 处理 OG Meta 标签
49
- const ogTags = this.options.customTags || this.defaultOgTags;
50
- // 遍历每个 OG 标签配置
51
- ogTags.forEach(({ property, placeholder }) => {
52
- // 检查是否已经存在该 property 的 meta 标签
53
- const existingMetaIndex = data.headTags.findIndex((tag) => tag.tagName === 'meta' &&
54
- tag.attributes &&
55
- tag.attributes.property === property);
56
- if (existingMetaIndex !== -1) {
57
- // 如果存在，更新其 content 为占位符
58
- data.headTags[existingMetaIndex].attributes.content = placeholder;
46
+ // 使用 beforeEmit 钩子，在 HTML 字符串层面操作
47
+ hooks.beforeEmit.tapAsync('OgMetaInjectionPlugin', (data, callback) => {
48
+ try {
49
+ let html = data.html;
50
+ // 1. 处理 OG Meta 标签
51
+ const ogTags = this.options.customTags || this.defaultOgTags;
52
+ ogTags.forEach(({ property, placeholder }) => {
53
+ // 转义特殊字符，避免正则表达式错误
54
+ const escapedProperty = property.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
55
+ // 检查是否存在该 property 的 meta 标签
56
+ const metaRegex = new RegExp(`<meta\\s+[^>]*property=["']?${escapedProperty}["']?[^>]*>`, 'i');
57
+ if (metaRegex.test(html)) {
58
+ // 如果存在，替换其 content 为占位符
59
+ const replaceRegex = new RegExp(`(<meta\\s+[^>]*property=["']?${escapedProperty}["']?[^>]*content=)["'][^"']*["']([^>]*>)`, 'gi');
60
+ html = html.replace(replaceRegex, `$1"${placeholder}"$2`);
61
+ }
62
+ else {
63
+ // 如果不存在，在 </head> 前插入新标签
64
+ const newMetaTag = `\n <meta property="${property}" content="${placeholder}">`;
65
+ html = html.replace('</head>', `${newMetaTag}\n </head>`);
66
+ }
67
+ });
68
+ // 2. 处理 <title> 标签
69
+ const titlePlaceholder = this.options.titlePlaceholder || this.defaultTitlePlaceholder;
70
+ const titleRegex = /<title>[^<]*<\/title>/i;
71
+ if (titleRegex.test(html)) {
72
+ // 如果存在 title 标签，替换其内容
73
+ html = html.replace(/<title>[^<]*<\/title>/gi, `<title>${titlePlaceholder}</title>`);
59
74
  }
60
75
  else {
61
- // 如果不存在，创建新的 meta 标签并添加到 headTags
62
- const newMetaTag = {
63
- tagName: 'meta',
64
- voidTag: true,
65
- attributes: {
66
- property: property,
67
- content: placeholder,
68
- },
69
- };
70
- // 将新标签插入到 headTags 的开头
71
- data.headTags.unshift(newMetaTag);
76
+ // 如果不存在，在 </head> 前插入
77
+ const newTitleTag = `\n <title>${titlePlaceholder}</title>`;
78
+ html = html.replace('</head>', `${newTitleTag}\n </head>`);
72
79
  }
73
- });
74
- // 2. 处理 <title> 标签
75
- const titlePlaceholder = this.options.titlePlaceholder || this.defaultTitlePlaceholder;
76
- const titleTagIndex = data.headTags.findIndex((tag) => tag.tagName === 'title');
77
- if (titleTagIndex !== -1) {
78
- // 如果存在 title 标签，更新其内容为占位符
79
- data.headTags[titleTagIndex].innerHTML = titlePlaceholder;
80
- }
81
- else {
82
- // 如果不存在，创建新的 title 标签
83
- const newTitleTag = {
84
- tagName: 'title',
85
- voidTag: false,
86
- innerHTML: titlePlaceholder,
87
- attributes: {},
88
- };
89
- // 将 title 标签插入到 headTags 的开头
90
- data.headTags.unshift(newTitleTag);
91
- }
92
- // 3. 处理 <link rel="icon"> 标签
93
- const faviconPlaceholder = this.options.faviconPlaceholder || this.defaultFaviconPlaceholder;
94
- const iconTagIndex = data.headTags.findIndex((tag) => tag.tagName === 'link' &&
95
- tag.attributes &&
96
- (tag.attributes.rel === 'icon' || tag.attributes.rel === 'shortcut icon'));
97
- if (iconTagIndex !== -1) {
98
- // 如果存在 icon 标签，更新其 href 为占位符
99
- data.headTags[iconTagIndex].attributes.href = faviconPlaceholder;
80
+ // 3. 处理 <link rel="icon"> 标签
81
+ const faviconPlaceholder = this.options.faviconPlaceholder || this.defaultFaviconPlaceholder;
82
+ const iconRegex = /<link\s+[^>]*rel=["']?(?:icon|shortcut icon)["']?[^>]*>/i;
83
+ if (iconRegex.test(html)) {
84
+ // 如果存在 icon 标签，替换其 href
85
+ const replaceIconRegex = /(<link\s+[^>]*rel=["']?(?:icon|shortcut icon)["']?[^>]*href=)["'][^"']*["']([^>]*>)/gi;
86
+ html = html.replace(replaceIconRegex, `$1"${faviconPlaceholder}"$2`);
87
+ }
88
+ else {
89
+ // 如果不存在，在 </head> 前插入
90
+ const newIconTag = `\n <link rel="icon" href="${faviconPlaceholder}">`;
91
+ html = html.replace('</head>', `${newIconTag}\n </head>`);
92
+ }
93
+ data.html = html;
94
+ callback(null, data);
100
95
  }
101
- else {
102
- // 如果不存在，创建新的 icon 标签
103
- const newIconTag = {
104
- tagName: 'link',
105
- voidTag: true,
106
- attributes: {
107
- rel: 'icon',
108
- href: faviconPlaceholder,
109
- },
110
- };
111
- // 将 icon 标签插入到 headTags
112
- data.headTags.unshift(newIconTag);
96
+ catch (error) {
97
+ console.error('Error in OgMetaInjectionPlugin:', error);
98
+ callback(error);
113
99
  }
114
- return data;
115
100
  });
116
101
  }
117
102
  catch (error) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lark-apaas/fullstack-rspack-preset",
3
- "version": "1.0.20-alpha.app.1",
3
+ "version": "1.0.20-alpha.app.3",
4
4
  "files": [
5
5
  "lib",
6
6
  "patches",