Astro 0.23

Автор
Fred Schott

Astro v0.23.0 выпущен с новыми функциями:

Dynamic File Routes

Теперь можно строить динамические не-HTML файлы через file routes Astro. JSON, XML, даже изображения при сборке. Одна из самых запрашиваемых функций с ранних дней Astro!

Создайте JS или TS файл в src/pages. File routes используют file-based router — включите расширение финального файла в имя.

src/pages/builtwith.json.ts
// Outputs: /builtwith.json


// File routes export a get() function, which gets called to generate the file.
// Return an object with `body` to save the file contents in your final build.
export async function get() {
  return {
    body: JSON.stringify({
      name: "Astro",
      url: "https://astro.build/",
    }),
  }
}

Только с флагом --experimental-static-build. Документация.

Automatic XSS Protection

Astro v0.23 начинает миграцию к автоматическому экранированию HTML в выражениях шаблона. Защита от случайной инъекции недоверенного HTML. Без неё — XSS-атаки с выполнением чужого кода.

<!-- Examples of untrusted HTML injection -->
<div>{`<span>Hello, dangerous HTML</span>`}</div>
<div>{`<script>alert('oh no');</script>`}</div>
<div>{untrustedHtml}</div>

React и другие UI-библиотеки сделали XSS редкостью. Astro стремится к той же планке — встроенная XSS-защита без усилий.

Для миграции v0.23 логирует предупреждение при неэкранированном HTML в выражении. В следующей версии выражения всегда экранируют содержимое.

New set:html and set:text directives

Две директивы для явной HTML-инъекции. Прямая установка HTML рискованна, но иногда нужна. set:html — как dangerouslySetInnerHTML в React.

<!-- Examples of explicit HTML setting -->
<div set:html={`<span>Hello, trusted or already escaped HTML</span>`} />
<div set:html={`<script>alert('oh yes');</script>`} />
<div set:html={trustedOrAlreadyEscapedHtml} />

Без обёртки <div> — set:html на Fragment:

- {`<span>Hello, dangerous HTML</span>`}
+ <Fragment set:html={`<span>Hello, trusted or already escaped HTML</span>`} />

set:text устанавливает текст элемента, как .text в браузере. Вместе — больше контроля над выводом Astro.

Safe access to sensitive environment variables

Vite загружает только переменные с префиксом PUBLIC_. Логично в браузере — защита от утечки секретов. Но приватные переменные были недоступны даже локально в SSR-компонентах Astro.

В Astro v0.23 import.meta.env даёт доступ к приватным переменным окружения в Astro и при локальном или серверном рендере. На клиенте Astro по-прежнему защищает — только PUBLIC_ попадают во frontend.

// DB_PASSWORD is only available when building your site.
// If any code tried to run this in the browser, it will be empty.
const data = await db(import.meta.env.DB_PASSWORD)


// PUBLIC_POKEAPI is available anywhere, thanks to the PUBLIC_ prefix!
const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`)

См. документацию Environment Variables.

Better builds with Vite v2.8

Astro v0.23 с обновлением Vite — новые функции и стабильность. Улучшена обработка npm-пакетов. Changelog Vite.

Better stability with @astro/compiler v0.11

Обновление компилятора — заметные улучшения производительности и стабильности. Changelog compiler.

Better build performance

--experimental-static-build выше — некоторые функции только за флагом. Флаг не нов в v0.23, но улучшается к официальному релизу. «Static build» скоро станет поведением по умолчанию.

Попробуйте --experimental-static-build и оставьте feedback в Discord. Пост Scaling Astro to 10,000+ Pages.

👋

Спасибо за чтение! Twitter — новости Astro.

Если дочитали — Discord. ;)