From d02bc0177c80a9f2a6c87c10a5565520f8a8916e Mon Sep 17 00:00:00 2001 From: pengbo43 Date: Mon, 29 Apr 2024 17:29:07 +0800 Subject: [PATCH 1/2] feat: add headTagInsertCheck warning --- packages/vite/src/node/plugins/html.ts | 41 +++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index 7d971375040b5c..c86608fc3562cd 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -1265,6 +1265,45 @@ export function resolveHtmlTransforms( return [preHooks, normalHooks, postHooks] } +// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head#see_also +const HeadElement: Record = [ + 'title', + 'base', + 'link', + 'style', + 'meta', + 'script', + 'noscript', + 'template', +].reduce( + (res, tag) => ({ + ...res, + [tag]: true, + }), + {}, +) + +function headTagInsertCheck( + tags: HtmlTagDescriptor[], + ctx: IndexHtmlTransformContext, +) { + if (!tags.length) return + const { logger } = ctx.server?.config || {} + const message = tags.reduce((res, tagDescriptor) => { + if (!HeadElement[tagDescriptor.tag]) res.push(`<${tagDescriptor.tag}>`) + return res + }, []) + if (message.length) { + logger?.warn( + colors.yellow( + colors.bold( + `[${message.join(',')}] can not be used inside the Element, please check the 'injectTo' value`, + ), + ), + ) + } +} + export async function applyHtmlTransforms( html: string, hooks: IndexHtmlTransformHook[], @@ -1306,7 +1345,7 @@ export async function applyHtmlTransforms( ;(headPrependTags ??= []).push(tag) } } - + headTagInsertCheck([...(headTags || []), ...(headPrependTags || [])], ctx) if (headPrependTags) html = injectToHead(html, headPrependTags, true) if (headTags) html = injectToHead(html, headTags) if (bodyPrependTags) html = injectToBody(html, bodyPrependTags, true) From 286aea63dd83339d0caa0453db7f9522ca171d01 Mon Sep 17 00:00:00 2001 From: pengbo43 Date: Wed, 1 May 2024 12:36:18 +0800 Subject: [PATCH 2/2] chore: code review --- packages/vite/src/node/plugins/html.ts | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts index c86608fc3562cd..71c0ec5542496b 100644 --- a/packages/vite/src/node/plugins/html.ts +++ b/packages/vite/src/node/plugins/html.ts @@ -22,6 +22,7 @@ import { partialEncodeURIPath, processSrcSet, removeLeadingSlash, + unique, urlCanParse, } from '../utils' import type { ResolvedConfig } from '../config' @@ -1266,7 +1267,7 @@ export function resolveHtmlTransforms( } // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head#see_also -const HeadElement: Record = [ +const elementsAllowedInHead = new Set([ 'title', 'base', 'link', @@ -1275,13 +1276,7 @@ const HeadElement: Record = [ 'script', 'noscript', 'template', -].reduce( - (res, tag) => ({ - ...res, - [tag]: true, - }), - {}, -) +]) function headTagInsertCheck( tags: HtmlTagDescriptor[], @@ -1289,15 +1284,18 @@ function headTagInsertCheck( ) { if (!tags.length) return const { logger } = ctx.server?.config || {} - const message = tags.reduce((res, tagDescriptor) => { - if (!HeadElement[tagDescriptor.tag]) res.push(`<${tagDescriptor.tag}>`) - return res - }, []) - if (message.length) { + const disallowedTags = tags.filter( + (tagDescriptor) => !elementsAllowedInHead.has(tagDescriptor.tag), + ) + + if (disallowedTags.length) { + const dedupedTags = unique( + disallowedTags.map((tagDescriptor) => `<${tagDescriptor.tag}>`), + ) logger?.warn( colors.yellow( colors.bold( - `[${message.join(',')}] can not be used inside the Element, please check the 'injectTo' value`, + `[${dedupedTags.join(',')}] can not be used inside the Element, please check the 'injectTo' value`, ), ), )