Make use of Component.props

[Myriad-Dreamin]

I would like to enhance ergonomics of import/render typst components, but this may break APIs a lot.

Import:

import HtmlContent, { doc: htmlDoc } from './about.typ?html';
import SvgContent, { doc: pagedDoc } from './about.typ?svg' or './about.typ?png' or './about.typ?pdf';

Render in slug pages:

const {HtmlContent/SvgContent, doc} = render();

The HtmlContent will accept body attribute:

<HtmlContent body={true}> // htmlDoc.body()

The HtmlContent will accept slots:

// typst-side code:
// #html.elem("slot", attrs: (name: "inject-element-into-typst-content"))

<HtmlContent>
  <slot name="inject-element-into-typst-content">
     <script define:var={{ prop: Astro.prop.outerProp }}>
         alert('injected! Astro.prop.outerProp', prop);
      </script>
  </slot>
</HtmlContent>

The htmlDoc and pagedDoc are the raw document from node binding (typst-ts-node-compiler).

htmlDoc/pagedDoc.title() -> string
htmlDoc/pagedDoc.description() -> string
htmlDoc/pagedDoc.authors() -> string[]

htmlDoc.html() -> <html/> string
htmlDoc.body() -> <body/> string
htmlDoc.getElementById(id) -> the element matching the `id` attr (O(n))
htmlDoc.getElementsByClassName(name) -> the element matching the class `name` attr (O(n))
htmlDoc.getElementsByTagName(name) -> the element matching the tag `name` attr (O(n))

// todo: this could be possible in future
pagedDoc.svg(width?, height?) -> <svg/> string
pagedDoc.png(opts) -> Buffer
pagedDoc.pdf(opts) -> Buffer