diff --git a/packages/astro/env.d.ts b/packages/astro/env.d.ts index 619a4422b..81b4cf140 100644 --- a/packages/astro/env.d.ts +++ b/packages/astro/env.d.ts @@ -27,7 +27,7 @@ declare module '*.md' { export default load; } -declare module "*.html" { - const Component: { render(opts: { slots: Record }): string }; - export default Component; +declare module '*.html' { + const Component: { render(opts: { slots: Record }): string }; + export default Component; } diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index 72e357470..35029b7fc 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -9,9 +9,9 @@ import astroViteServerPlugin from '../vite-plugin-astro-server/index.js'; import astroVitePlugin from '../vite-plugin-astro/index.js'; import configAliasVitePlugin from '../vite-plugin-config-alias/index.js'; import envVitePlugin from '../vite-plugin-env/index.js'; +import htmlVitePlugin from '../vite-plugin-html/index.js'; import astroIntegrationsContainerPlugin from '../vite-plugin-integrations-container/index.js'; import jsxVitePlugin from '../vite-plugin-jsx/index.js'; -import htmlVitePlugin from '../vite-plugin-html/index.js'; import markdownVitePlugin from '../vite-plugin-markdown/index.js'; import astroScriptsPlugin from '../vite-plugin-scripts/index.js'; import { createCustomViteLogger } from './errors.js'; diff --git a/packages/astro/src/vite-plugin-html/index.ts b/packages/astro/src/vite-plugin-html/index.ts index c593bc201..b44a28ace 100644 --- a/packages/astro/src/vite-plugin-html/index.ts +++ b/packages/astro/src/vite-plugin-html/index.ts @@ -9,6 +9,6 @@ export default function html() { async transform(source: string, id: string) { if (!id.endsWith('.html')) return; return await transform(source, id); - } - } + }, + }; } diff --git a/packages/astro/src/vite-plugin-html/transform/escape.ts b/packages/astro/src/vite-plugin-html/transform/escape.ts index 8b5805614..5f2ecf6d6 100644 --- a/packages/astro/src/vite-plugin-html/transform/escape.ts +++ b/packages/astro/src/vite-plugin-html/transform/escape.ts @@ -1,9 +1,9 @@ -import type { Plugin } from 'unified'; import type { Root, RootContent } from 'hast'; import type MagicString from 'magic-string'; +import type { Plugin } from 'unified'; import { visit } from 'unist-util-visit'; -import { replaceAttribute, needsEscape, escape } from './utils.js'; +import { escape, needsEscape, replaceAttribute } from './utils.js'; const rehypeEscape: Plugin<[{ s: MagicString }], Root> = ({ s }) => { return (tree, file) => { @@ -17,7 +17,7 @@ const rehypeEscape: Plugin<[{ s: MagicString }], Root> = ({ s }) => { const newKey = needsEscape(key) ? escape(key) : key; const newValue = needsEscape(value) ? escape(value) : value; if (newKey === key && newValue === value) continue; - replaceAttribute(s, node, key, (value === '') ? newKey : `${newKey}="${newValue}"`); + replaceAttribute(s, node, key, value === '' ? newKey : `${newKey}="${newValue}"`); } } }); diff --git a/packages/astro/src/vite-plugin-html/transform/index.ts b/packages/astro/src/vite-plugin-html/transform/index.ts index de6431ea7..2a2c8edc9 100644 --- a/packages/astro/src/vite-plugin-html/transform/index.ts +++ b/packages/astro/src/vite-plugin-html/transform/index.ts @@ -7,26 +7,25 @@ import slots, { SLOT_PREFIX } from './slots.js'; export async function transform(code: string, id: string) { const s = new MagicString(code, { filename: id }); const imports = new Map(); - const parser = rehype() - .data('settings', { fragment: true }) - .use(escape, { s }) - .use(slots, { s }); + const parser = rehype().data('settings', { fragment: true }).use(escape, { s }).use(slots, { s }); - const vfile = new VFile({ value: code, path: id }) - await parser.process(vfile) - s.prepend(`export default {\n\t"astro:html": true,\n\trender({ slots: ${SLOT_PREFIX} }) {\n\t\treturn \``); + const vfile = new VFile({ value: code, path: id }); + await parser.process(vfile); + s.prepend( + `export default {\n\t"astro:html": true,\n\trender({ slots: ${SLOT_PREFIX} }) {\n\t\treturn \`` + ); s.append('`\n\t}\n}'); if (imports.size > 0) { - let importText = '' + let importText = ''; for (const [path, importName] of imports.entries()) { - importText += `import ${importName} from "${path}";\n` + importText += `import ${importName} from "${path}";\n`; } s.prepend(importText); } return { code: s.toString(), - map: s.generateMap() - } + map: s.generateMap(), + }; } diff --git a/packages/astro/src/vite-plugin-html/transform/slots.ts b/packages/astro/src/vite-plugin-html/transform/slots.ts index c8cb32f13..5f0f432cb 100644 --- a/packages/astro/src/vite-plugin-html/transform/slots.ts +++ b/packages/astro/src/vite-plugin-html/transform/slots.ts @@ -1,26 +1,28 @@ -import type { Plugin } from 'unified'; import type { Root, RootContent } from 'hast'; +import type { Plugin } from 'unified'; -import { visit } from 'unist-util-visit'; import MagicString from 'magic-string'; +import { visit } from 'unist-util-visit'; import { escape } from './utils.js'; const rehypeSlots: Plugin<[{ s: MagicString }], Root> = ({ s }) => { - return (tree, file) => { - visit(tree, (node: Root | RootContent, index, parent) => { - if (node.type === 'element' && node.tagName === 'slot') { + return (tree, file) => { + visit(tree, (node: Root | RootContent, index, parent) => { + if (node.type === 'element' && node.tagName === 'slot') { if (typeof node.properties?.['is:inline'] !== 'undefined') return; const name = node.properties?.['name'] ?? 'default'; const start = node.position?.start.offset ?? 0; const end = node.position?.end.offset ?? 0; const first = node.children.at(0) ?? node; const last = node.children.at(-1) ?? node; - const text = file.value.slice(first.position?.start.offset ?? 0, last.position?.end.offset ?? 0).toString(); - s.overwrite(start, end, `\${${SLOT_PREFIX}["${name}"] ?? \`${escape(text).trim()}\`}`) - } - }); - } -} + const text = file.value + .slice(first.position?.start.offset ?? 0, last.position?.end.offset ?? 0) + .toString(); + s.overwrite(start, end, `\${${SLOT_PREFIX}["${name}"] ?? \`${escape(text).trim()}\`}`); + } + }); + }; +}; export default rehypeSlots; diff --git a/packages/astro/src/vite-plugin-html/transform/utils.ts b/packages/astro/src/vite-plugin-html/transform/utils.ts index 313bfe662..8a277ce72 100644 --- a/packages/astro/src/vite-plugin-html/transform/utils.ts +++ b/packages/astro/src/vite-plugin-html/transform/utils.ts @@ -5,18 +5,20 @@ const splitAttrsTokenizer = /([\$\{\}\@a-z0-9_\:\-]*)\s*?=\s*?(['"]?)(.*?)\2\s+/ export function replaceAttribute(s: MagicString, node: Element, key: string, newValue: string) { splitAttrsTokenizer.lastIndex = 0; - const text = s.original.slice(node.position?.start.offset ?? 0, node.position?.end.offset ?? 0).toString(); + const text = s.original + .slice(node.position?.start.offset ?? 0, node.position?.end.offset ?? 0) + .toString(); const offset = text.indexOf(key); if (offset === -1) return; const start = node.position!.start.offset! + offset; const tokens = text.slice(offset).split(splitAttrsTokenizer); - const token = tokens[0].replace(/([^>])(\>[\s\S]*$)/gmi, '$1'); + const token = tokens[0].replace(/([^>])(\>[\s\S]*$)/gim, '$1'); if (token.trim() === key) { const end = start + key.length; - s.overwrite(start, end, newValue) + s.overwrite(start, end, newValue); } else { const end = start + `${key}=${tokens[2]}${tokens[3]}${tokens[2]}`.length; - s.overwrite(start, end, newValue) + s.overwrite(start, end, newValue); } } export function needsEscape(value: any): value is string { diff --git a/packages/astro/test/html-escape.test.js b/packages/astro/test/html-escape.test.js index ed19105c6..047a56670 100644 --- a/packages/astro/test/html-escape.test.js +++ b/packages/astro/test/html-escape.test.js @@ -24,10 +24,10 @@ describe('HTML Escape', () => { expect(div.text()).to.equal('${foo}'); const span = $('span'); - expect(span.attr('${attr}')).to.equal(""); + expect(span.attr('${attr}')).to.equal(''); const ce = $('custom-element'); - expect(ce.attr('x-data')).to.equal("`${test}`"); + expect(ce.attr('x-data')).to.equal('`${test}`'); const script = $('script'); expect(script.text()).to.equal('console.log(`hello ${"world"}!`)'); @@ -57,10 +57,10 @@ describe('HTML Escape', () => { expect(div.text()).to.equal('${foo}'); const span = $('span'); - expect(span.attr('${attr}')).to.equal(""); + expect(span.attr('${attr}')).to.equal(''); const ce = $('custom-element'); - expect(ce.attr('x-data')).to.equal("`${test}`"); + expect(ce.attr('x-data')).to.equal('`${test}`'); const script = $('script'); expect(script.text()).to.equal('console.log(`hello ${"world"}!`)'); diff --git a/packages/astro/test/html-page.test.js b/packages/astro/test/html-page.test.js index fe4c01f68..8fc45a384 100644 --- a/packages/astro/test/html-page.test.js +++ b/packages/astro/test/html-page.test.js @@ -18,7 +18,7 @@ describe('HTML Page', () => { it('works', async () => { const html = await fixture.readFile('/index.html'); - const $ = cheerio.load(html) + const $ = cheerio.load(html); const h1 = $('h1'); @@ -43,7 +43,7 @@ describe('HTML Page', () => { expect(res.status).to.equal(200); const html = await res.text(); - const $ = cheerio.load(html) + const $ = cheerio.load(html); const h1 = $('h1');