astro 2.3.3 → 2.4.0

package/client-base.d.ts

@@ -3,7 +3,26 @@
 declare module 'astro:assets' {
 	// Exporting things one by one is a bit cumbersome, not sure if there's a better way - erika, 2023-02-03
 	type AstroAssets = {
-		getImage: typeof import('./dist/assets/index.js').getImage;
+		// getImage's type here is different from the internal function since the Vite module implicitly pass the service config
+		/**
+		 * Get an optimized image and the necessary attributes to render it.
+		 *
+		 * **Example**
+		 * ```astro
+		 * ---
+		 * import { getImage } from 'astro:assets';
+		 * import originalImage from '../assets/image.png';
+		 *
+		 * const optimizedImage = await getImage({src: originalImage, width: 1280 });
+		 * ---
+		 * <img src={optimizedImage.src} {...optimizedImage.attributes} />
+		 * ```
+		 *
+		 * This is functionally equivalent to using the `<Image />` component, as the component calls this function internally.
+		 */
+		getImage: (
+			options: import('./dist/assets/types.js').ImageTransform
+		) => Promise<import('./dist/assets/types.js').GetImageResult>;
 		getConfiguredImageService: typeof import('./dist/assets/index.js').getConfiguredImageService;
 		Image: typeof import('./components/Image.astro').default;
 	};
@@ -368,3 +387,9 @@ declare module '*?inline' {
 	const src: string;
 	export default src;
 }
+
+// eslint-disable-next-line  @typescript-eslint/no-namespace
+export namespace App {
+	// eslint-disable-next-line  @typescript-eslint/no-empty-interface
+	export interface Locals {}
+}

package/components/Code.astro

@@ -1,5 +1,6 @@
 ---
 import type * as shiki from 'shiki';
+import { renderToHtml } from 'shiki';
 import { getHighlighter } from './Shiki.js';
 
 export interface Props {
@@ -30,36 +31,60 @@ export interface Props {
 	 * @default false
 	 */
 	wrap?: boolean | null;
+	/**
+	 * Generate inline code element only, without the pre element wrapper.
+	 *
+	 * @default false
+	 */
+	inline?: boolean;
 }
 
-const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.props;
-
-/** Replace the shiki class name with a custom astro class name. */
-function repairShikiTheme(html: string): string {
-	// Replace "shiki" class naming with "astro"
-	html = html.replace(/<pre class="(.*?)shiki(.*?)"/, '<pre class="$1astro-code$2"');
-	// Handle code wrapping
-	// if wrap=null, do nothing.
-	if (wrap === false) {
-		html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
-	} else if (wrap === true) {
-		html = html.replace(
-			/style="(.*?)"/,
-			'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
-		);
-	}
-	return html;
-}
+const {
+	code,
+	lang = 'plaintext',
+	theme = 'github-dark',
+	wrap = false,
+	inline = false,
+} = Astro.props;
 
+// 1. Get the shiki syntax highlighter
 const highlighter = await getHighlighter({
 	theme,
 	// Load custom lang if passed an object, otherwise load the default
 	langs: typeof lang !== 'string' ? [lang] : undefined,
 });
-const _html = highlighter.codeToHtml(code, {
-	lang: typeof lang === 'string' ? lang : lang.id,
+
+// 2. Turn code into shiki theme tokens
+const tokens = highlighter.codeToThemedTokens(code, typeof lang === 'string' ? lang : lang.id);
+
+// 3. Get shiki theme object
+const _theme = highlighter.getTheme();
+
+// 4. Render the theme tokens as html
+const html = renderToHtml(tokens, {
+	themeName: _theme.name,
+	fg: _theme.fg,
+	bg: _theme.bg,
+	elements: {
+		pre({ className, style, children }) {
+			// Swap to `code` tag if inline
+			const tag = inline ? 'code' : 'pre';
+			// Replace "shiki" class naming with "astro-code"
+			className = className.replace(/shiki/g, 'astro-code');
+			// Handle code wrapping
+			// if wrap=null, do nothing.
+			if (wrap === false) {
+				style += '; overflow-x: auto;"';
+			} else if (wrap === true) {
+				style += '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"';
+			}
+			return `<${tag} class="${className}" style="${style}" tabindex="0">${children}</${tag}>`;
+		},
+		code({ children }) {
+			return inline ? children : `<code>${children}</code>`;
+		},
+	},
 });
-const html = repairShikiTheme(_html);
 ---
 
 <Fragment set:html={html} />