astro-typst icon indicating copy to clipboard operation
astro-typst copied to clipboard

Remove the `body` param for HTML target

Open OverflowCat opened this issue 7 months ago • 0 comments

The body param maps to $typst.tryHtml(doc).result.body() / .html(). This parameter was used to provide a basic HTML layout when a .typ file is used directly as a route, since there is currently no layout prop available. However, this required the user to specify ?body every time they imported a .typ file, or to declare it in the configuration. Since we can determine if it's a standalone page from the componentMetadata, this param should be removed from config.

Example

Component

{
  result: {
    base: '/',
    userAssetsBase: undefined,
    cancelled: false,
    clientDirectives: Map(5) {
      'idle' => '(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();',
      'load' => '(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();',
      'media' => '(()=>{var n=(a,t)=>{let i=async()=>{await(await a())()};if(t.value){let e=matchMedia(t.value);e.matches?i():e.addEventListener("change",i,{once:!0})}};(self.Astro||(self.Astro={})).media=n;window.dispatchEvent(new Event("astro:media"));})();',
      'only' => '(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();',
      'visible' => '(()=>{var a=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let l of e)if(l.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=a;window.dispatchEvent(new Event("astro:visible"));})();'
    },
    inlinedScripts: Map(0) {},
    componentMetadata: Map(4) {
      '/Users/neko/Documents/astro-typst/src/pages/index.astro' => [Object],
      '\x00astro:content' => [Object],
      '/Users/neko/Documents/astro-typst/src/components/Typst.astro' => [Object],
      '/Users/neko/Documents/astro-typst/src/pages/simp.typ' => [Object]
    },
    compressHTML: true,
    cookies: AstroCookies {},
    createAstro: [Function: createAstro],
    links: Set(0) {},
    params: {},
    partial: false,
    pathname: '/',
    renderers: [ [Object] ],
    resolve: [AsyncFunction (anonymous)],
    response: { status: 200, statusText: 'OK', headers: [Getter/Setter] },
    request: Request {
      method: 'GET',
      url: 'http://localhost:4321/',
      headers: Headers {},
      destination: '',
      referrer: 'about:client',
      referrerPolicy: '',
      mode: 'cors',
      credentials: 'same-origin',
      cache: 'default',
      redirect: 'follow',
      integrity: '',
      keepalive: false,
      isReloadNavigation: false,
      isHistoryNavigation: false,
      signal: AbortSignal { aborted: false }
    },
    scripts: Set(3) { [Object], [Object], [Object] },
    styles: Set(0) {},
    actionResult: undefined,
    serverIslandNameMap: Map(0) {},
    key: Promise { CryptoKey {} },
    trailingSlash: 'ignore',
    _metadata: {
      hasHydrationScript: false,
      rendererSpecificHydrationScripts: Set(0) {},
      hasRenderedHead: true,
      renderedScripts: Set(0) {},
      hasDirectives: Set(0) {},
      hasRenderedServerIslandRuntime: false,
      headInTree: true,
      extraHead: [],
      propagators: Set(0) {}
    }
  },
  _props: { test: 'haha' },
  slot: undefined,
  html: [String (HTMLString): '<div test="haha"></div>']
}

Page

{
  result: {
    base: '/',
    userAssetsBase: undefined,
    cancelled: false,
    clientDirectives: Map(5) {
      'idle' => '(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();',
      'load' => '(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();',
      'media' => '(()=>{var n=(a,t)=>{let i=async()=>{await(await a())()};if(t.value){let e=matchMedia(t.value);e.matches?i():e.addEventListener("change",i,{once:!0})}};(self.Astro||(self.Astro={})).media=n;window.dispatchEvent(new Event("astro:media"));})();',
      'only' => '(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();',
      'visible' => '(()=>{var a=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let l of e)if(l.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=a;window.dispatchEvent(new Event("astro:visible"));})();'
    },
    inlinedScripts: Map(0) {},
    componentMetadata: Map(1) {
      '/Users/neko/Documents/astro-typst/src/pages/simp.typ' => [Object]
    },
    compressHTML: true,
    cookies: AstroCookies {},
    createAstro: [Function: createAstro],
    links: Set(0) {},
    params: {},
    partial: false,
    pathname: '/simp',
    renderers: [ [Object] ],
    resolve: [AsyncFunction (anonymous)],
    response: { status: 200, statusText: 'OK', headers: [Getter/Setter] },
    request: Request {
      method: 'GET',
      url: 'http://localhost:4321/simp',
      headers: Headers {},
      destination: '',
      referrer: 'about:client',
      referrerPolicy: '',
      mode: 'cors',
      credentials: 'same-origin',
      cache: 'default',
      redirect: 'follow',
      integrity: '',
      keepalive: false,
      isReloadNavigation: false,
      isHistoryNavigation: false,
      signal: AbortSignal { aborted: false }
    },
    scripts: Set(3) { [Object], [Object], [Object] },
    styles: Set(0) {},
    actionResult: undefined,
    serverIslandNameMap: Map(0) {},
    key: Promise { CryptoKey {} },
    trailingSlash: 'ignore',
    _metadata: {
      hasHydrationScript: false,
      rendererSpecificHydrationScripts: Set(0) {},
      hasRenderedHead: false,
      renderedScripts: Set(0) {},
      hasDirectives: Set(0) {},
      hasRenderedServerIslandRuntime: false,
      headInTree: false,
      extraHead: [],
      propagators: Set(0) {}
    }
  },
  _props: {},
  slot: undefined,
  html: [String (HTMLString): '<div></div>']
}

OverflowCat avatar Jul 09 '25 12:07 OverflowCat