---
import { toHtml } from 'hast-util-to-html'
import { getPageData } from './page-data';
import { engine } from '../index'
// Extract the code and other props from the Astro component
const {
code,
raw_url,
locale,
lang = '',
meta = '',
...props
} = Astro.props
// Get the current block group index from the page data
const pageData = getPageData(Astro.request)
// Note: It's important to store the incremented index in a local variable immediately,
// as the `pageData` object is shared between all components on the current page
// and can be changed by other Code components during the `await` calls below
const groupIndex = ++pageData.blockGroupIndex
// Get the base and theme styles, and the JS modules from the ExpressiveCode engine
const baseStyles = await engine.getBaseStyles();
const themeStyles = await engine.getThemeStyles();
const jsModules = await engine.getJsModules();
// Render the code using the ExpressiveCode engine
const { renderedGroupAst, styles } = await engine.render({
language: lang, meta, locale, code,
parentDocument: {
positionInDocument: { groupIndex,},
},
props, })
// Convert the rendered group AST to HTML
let htmlContent = toHtml(renderedGroupAst)
// Prepend the base and theme styles to the HTML content
const stylesToPrepend: string[] = []
stylesToPrepend.push(baseStyles, themeStyles, ...styles)
if (stylesToPrepend.length) {
htmlContent = `${htmlContent}`
}
// Prepend the JS modules to the HTML content
const scriptsToPrepend: string[] = []
scriptsToPrepend.push(...jsModules)
if (scriptsToPrepend.length) {
htmlContent = `${htmlContent}`
}
---