github withastro/astro astro@4.10.0

latest releases: @astrojs/svelte@6.0.1, astro@4.16.13, @astrojs/solid-js@4.4.3...
5 months ago

Minor Changes

  • #10974 2668ef9 Thanks @florian-lefebvre! - Adds experimental support for the astro:env API.

    The astro:env API lets you configure a type-safe schema for your environment variables, and indicate whether they should be available on the server or the client. Import and use your defined variables from the appropriate /client or /server module:

    ---
    import { PUBLIC_APP_ID } from 'astro:env/client';
    import { PUBLIC_API_URL, getSecret } from 'astro:env/server';
    const API_TOKEN = getSecret('API_TOKEN');
    
    const data = await fetch(`${PUBLIC_API_URL}/users`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${API_TOKEN}`,
      },
      body: JSON.stringify({ appId: PUBLIC_APP_ID }),
    });
    ---

    To define the data type and properties of your environment variables, declare a schema in your Astro config in experimental.env.schema. The envField helper allows you define your variable as a string, number, or boolean and pass properties in an object:

    // astro.config.mjs
    import { defineConfig, envField } from 'astro/config';
    
    export default defineConfig({
      experimental: {
        env: {
          schema: {
            PUBLIC_API_URL: envField.string({ context: 'client', access: 'public', optional: true }),
            PUBLIC_PORT: envField.number({ context: 'server', access: 'public', default: 4321 }),
            API_SECRET: envField.string({ context: 'server', access: 'secret' }),
          },
        },
      },
    });

    There are three kinds of environment variables, determined by the combination of context (client or server) and access (private or public) settings defined in your env.schema:

    • Public client variables: These variables end up in both your final client and server bundles, and can be accessed from both client and server through the astro:env/client module:

      import { PUBLIC_API_URL } from 'astro:env/client';
    • Public server variables: These variables end up in your final server bundle and can be accessed on the server through the astro:env/server module:

      import { PUBLIC_PORT } from 'astro:env/server';
    • Secret server variables: These variables are not part of your final bundle and can be accessed on the server through the getSecret() helper function available from the astro:env/server module:

      import { getSecret } from 'astro:env/server';
      
      const API_SECRET = getSecret('API_SECRET'); // typed
      const SECRET_NOT_IN_SCHEMA = getSecret('SECRET_NOT_IN_SCHEMA'); // string | undefined

    Note: Secret client variables are not supported because there is no safe way to send this data to the client. Therefore, it is not possible to configure both context: "client" and access: "secret" in your schema.

    To learn more, check out the documentation.

Patch Changes

  • #11192 58b10a0 Thanks @liruifengv! - Improves DX by throwing the original AstroUserError when an error is thrown inside a .mdx file.

  • #11136 35ef53c Thanks @ematipico! - Errors that are emitted during a rewrite are now bubbled up and shown to the user. A 404 response is not returned anymore.

  • #11144 803dd80 Thanks @ematipico! - The integration now exposes a function called getContainerRenderer, that can be used inside the Container APIs to load the relative renderer.

    import { experimental_AstroContainer as AstroContainer } from 'astro/container';
    import ReactWrapper from '../src/components/ReactWrapper.astro';
    import { loadRenderers } from 'astro:container';
    import { getContainerRenderer } from '@astrojs/react';
    
    test('ReactWrapper with react renderer', async () => {
      const renderers = await loadRenderers([getContainerRenderer()]);
      const container = await AstroContainer.create({
        renderers,
      });
      const result = await container.renderToString(ReactWrapper);
    
      expect(result).toContain('Counter');
      expect(result).toContain('Count: <!-- -->5');
    });
  • #11144 803dd80 Thanks @ematipico! - BREAKING CHANGE to the experimental Container API only

    Changes the type of the renderers option of the AstroContainer::create function and adds a dedicated function loadRenderers() to load the rendering scripts from renderer integration packages (@astrojs/react, @astrojs/preact, @astrojs/solid-js, @astrojs/svelte, @astrojs/vue, @astrojs/lit, and @astrojs/mdx).

    You no longer need to know the individual, direct file paths to the client and server rendering scripts for each renderer integration package. Now, there is a dedicated function to load the renderer from each package, which is available from getContainerRenderer():

    import { experimental_AstroContainer as AstroContainer } from 'astro/container';
    import ReactWrapper from '../src/components/ReactWrapper.astro';
    import { loadRenderers } from "astro:container";
    import { getContainerRenderer } from "@astrojs/react";
    
    test('ReactWrapper with react renderer', async () => {
    + const renderers = await loadRenderers([getContainerRenderer()])
    - const renderers = [
    - {
    -  name: '@astrojs/react',
    -   clientEntrypoint: '@astrojs/react/client.js',
    -   serverEntrypoint: '@astrojs/react/server.js',
    -  },
    - ];
      const container = await AstroContainer.create({
        renderers,
      });
      const result = await container.renderToString(ReactWrapper);
    
      expect(result).toContain('Counter');
      expect(result).toContain('Count: <!-- -->5');
    });

    The new loadRenderers() helper function is available from astro:container, a virtual module that can be used when running the Astro container inside vite.

  • #11136 35ef53c Thanks @ematipico! - It's not possible anymore to use Astro.rewrite("/404") inside static pages. This isn't counterproductive because Astro will end-up emitting a page that contains the HTML of 404 error page.

    It's still possible to use Astro.rewrite("/404") inside on-demand pages, or pages that opt-out from prerendering.

  • #11191 6e29a17 Thanks @matthewp! - Fixes a case where Astro.url would be incorrect when having build.format set to 'preserve' in the Astro config

  • #11182 40b0b4d Thanks @ematipico! - Fixes an issue where Astro.rewrite wasn't carrying over the body of a Request in on-demand pages.

  • #11194 97fbe93 Thanks @ematipico! - Fixes an issue where the function getViteConfig wasn't returning the correct merged Astro configuration

Don't miss a new astro release

NewReleases is sending notifications on new releases.