astro/packages/astro/CHANGELOG.md

astro

0.18.1

Patch Changes

• d8cebb0: Removes a warning in Svelte hydrated components
• e90615f: Fixes warnings for Astro internals for fetch-content and slots

0.18.0

Minor Changes

• f67e8f5: New Collections API (createCollection)

  BREAKING CHANGE: The expected return format from createCollection() has been changed. Visit https://docs.astro.build/core-concepts/collections to learn the new API.

  This feature was implemented with backwards-compatible deprecation warnings, to help you find and update pages that are using the legacy API.

• 40c882a: Fix url to find page with "index" at the end file name

• 0340b0f: Adds support for the client:media hydrator

  The new client:media hydrator allows you to define a component that should only be loaded when a media query matches. An example usage:

  ---
  import Sidebar from '../components/Sidebar.jsx';
  ---
  
  <Sidebar client:media="(max-width: 700px)" />
  

  This allows you to define components which, for example, only run on mobile devices. A common example is a slide-in sidebar that is needed to add navigation to a mobile app, but is never displayed in desktop view.

  Since Astro components can have expressions, you can move common media queries to a module for sharing. For example here are defining:

  media.js

  export const MOBILE = '(max-width: 700px)';
  

  And then you can reference this in your page:

  index.astro

  import Sidebar from '../components/Sidebar.jsx';
  import { MOBILE } from '../media.js';
  ---(<Sidebar client:media={MOBILE} />);
  

Patch Changes

• e89a99f: This includes the props passed to a hydration component when generating the hash/id. This prevents multiple instances of the same component with differing props to be treated as the same component when hydrated by Astro.

• b8af49f: Added sass support

• a7e6666: compile javascript to target Node v12.x

• fb8bf7e: Allow multiple Astro servers to be running simultaneously by choosing random ports if the defaults are taken.

• 294a656: Adds support for global style blocks via <style global>

  Be careful with this escape hatch! This is best reserved for uses like importing styling libraries like Tailwind, or changing global CSS variables.

• 8f4562a: Improve slot support, adding support for named slots and fallback content within slot elements.

  See the new Slots documentation for more information.

• 4a601ad: Restores the ability to use Fragment in astro components

• 0e761b9: Add ability to specify hostname in devOptions

• 164489f: Fix for false being rendered in conditionals

• e3182c7: Adds a missing dependency

• af935c1: Fix error when no renderers are passed

• 4726e34: Fixes cases where buildOptions.site is not respected

• c82e6be: Fix unfound ./snowpack-plugin-jsx.cjs error

• 007c220: Remove custom Astro.fetchContent() glob implementation, use import.meta.globEager internally instead.

• 9859f53: Correcting typo in ReadMe

• b85e68a: Fixes case where custom elements are not handled within JSX expressions

• Updated dependencies [a7e6666]

• Updated dependencies [294a656]

• Updated dependencies [bd18e14]

• Updated dependencies [bd18e14]

• Updated dependencies [1f79144]

• Updated dependencies [b85e68a]

  • @astrojs/parser@0.18.0
  • @astrojs/renderer-preact@0.2.0
  • @astrojs/renderer-react@0.2.0
  • @astrojs/renderer-vue@0.1.4

0.18.0-next.7

Patch Changes

• e89a99f: This includes the props passed to a hydration component when generating the hash/id. This prevents multiple instances of the same component with differing props to be treated as the same component when hydrated by Astro.
• b8af49f: Added sass support
• 4726e34: Fixes cases where buildOptions.site is not respected

0.18.0-next.6

Patch Changes

• Updated dependencies [1f79144]
  • @astrojs/renderer-vue@0.1.4-next.0

0.18.0-next.5

Patch Changes

• 294a656: Adds support for global style blocks via <style global>

  Be careful with this escape hatch! This is best reserved for uses like importing styling libraries like Tailwind, or changing global CSS variables.

• 164489f: Fix for false being rendered in conditionals

• af935c1: Fix error when no renderers are passed

• Updated dependencies [294a656]

  • @astrojs/parser@0.18.0-next.5

0.18.0-next.4

Patch Changes

• c82e6be: Fix unfound ./snowpack-plugin-jsx.cjs error

0.18.0-next.3

Minor Changes

• Add support for the new JSX transform for React 17 and Preact.
• Add support for Solid when using the new @astrojs/renderer-solid package.

Patch Changes

• 4a601ad: Restores the ability to use Fragment in astro components
• Updated dependencies [bd18e14]
• Updated dependencies [bd18e14]
  • @astrojs/renderer-preact@0.2.0-next.0
  • @astrojs/renderer-react@0.2.0-next.0

0.18.0-next.2

Minor Changes

• f67e8f5: New Collections API (createCollection)

  BREAKING CHANGE: The expected return format from createCollection() has been changed. Visit https://docs.astro.build/core-concepts/collections to learn the new API.

  This feature was implemented with backwards-compatible deprecation warnings, to help you find and update pages that are using the legacy API.

• 40c882a: Fix url to find page with "index" at the end file name

Patch Changes

• a7e6666: compile javascript to target Node v12.x
• fb8bf7e: Allow multiple Astro servers to be running simultaneously by choosing random ports if the defaults are taken.
• 0e761b9: Add ability to specify hostname in devOptions
• 007c220: Remove custom Astro.fetchContent() glob implementation, use import.meta.globEager internally instead.
• b85e68a: Fixes case where custom elements are not handled within JSX expressions
• Updated dependencies [a7e6666]
• Updated dependencies [b85e68a]
  • @astrojs/parser@0.18.0-next.2

0.18.0-next.1

Patch Changes

• e3182c7: Adds a missing dependency

0.18.0-next.0

Minor Changes

• 0340b0f: Adds support for the client:media hydrator

  The new client:media hydrator allows you to define a component that should only be loaded when a media query matches. An example usage:

  ---
  import Sidebar from '../components/Sidebar.jsx';
  ---
  
  <Sidebar client:media="(max-width: 700px)" />
  

  This allows you to define components which, for example, only run on mobile devices. A common example is a slide-in sidebar that is needed to add navigation to a mobile app, but is never displayed in desktop view.

  Since Astro components can have expressions, you can move common media queries to a module for sharing. For example here are defining:

  media.js

  export const MOBILE = '(max-width: 700px)';
  

  And then you can reference this in your page:

  index.astro

  import Sidebar from '../components/Sidebar.jsx';
  import { MOBILE } from '../media.js';
  ---(<Sidebar client:media={MOBILE} />);
  

Patch Changes

• 8f4562a: Improve slot support, adding support for named slots and fallback content within slot elements.

  See the new Slots documentation for more information.

• 9859f53: Correcting typo in ReadMe

0.17.3

Patch Changes

• [release/0.17] Update compile target to better support Node v12.

0.17.2

Patch Changes

• 1b73f95: Only show the buildOptions.site notice if not already set

• fb78b76: Improve error handling for unsupported Node versions

• d93f768: Add support for components defined in Frontmatter. Previously, the following code would throw an error. Now it is officially supported!

  ---
  const { level = 1 } = Astro.props;
  const Element = `h${level}`;
  ---
  
  <Element>Hello world!</Element>
  

0.17.1

Patch Changes

• 1e01251: Fixes bug with React renderer that would not hydrate correctly

• 42a6ace: Add support for components defined in Frontmatter. Previously, the following code would throw an error. Now it is officially supported!

  ---
  const { level = 1 } = Astro.props;
  const Element = `h${level}`;
  ---
  
  <Element>Hello world!</Element>
  

• Updated dependencies [1e01251]

  • @astrojs/renderer-react@0.1.5

0.17.0

Minor Changes

• 0a7b6de: ## Adds directive syntax for component hydration

  This change updates the syntax for partial hydration from <Button:load /> to <Button client:load />.

  Why?

  Partial hydration is about to get super powers! This clears the way for more dynamic partial hydration, i.e. <MobileMenu client:media="(max-width: 40em)" />.

  How to upgrade

  Just update :load, :idle, and :visible to match the client:load format, thats it! Don't worry, the original syntax is still supported but it's recommended to future-proof your project by updating to the newer syntax.

0.16.3

Patch Changes

• 5d1ff62: Hotfix for snowpack regression

0.16.2

Patch Changes

• 20b4a60: Bugfix: do not override user alias passed into snowpack config
• 42a1fd7: Add command line flag --silent to astro to set no output.

0.16.1

Patch Changes

• 2d3e369: Fix for using the snowpack polyfillNode option

0.16.0

Minor Changes

• d396943: Add support for remark and rehype plugins for both .md pages and .astro pages using the <Markdown> component.

  For example, the astro.config.mjs could be updated to include the following. Read the Markdown documentation for more information.

  Note

  Enabling custom remarkPlugins or rehypePlugins removes Astro's built-in support for GitHub-flavored Markdown support, Footnotes syntax, Smartypants. You must explicitly add these plugins to your astro.config.mjs file, if desired.

  export default {
    markdownOptions: {
      remarkPlugins: ['remark-slug', ['remark-autolink-headings', { behavior: 'prepend' }]],
      rehypePlugins: ['rehype-slug', ['rehype-autolink-headings', { behavior: 'prepend' }]],
    },
  };
  

Patch Changes

• Updated dependencies [d396943]
• Updated dependencies [f83407e]
  • @astrojs/markdown-support@0.2.0

0.15.5

Patch Changes

• 7b4c97c: Adds support for hydrationPolyfills in renderers

  Renderers can not specify polyfills that must run before the component code runs for hydration:

  export default {
    name: '@matthewp/my-renderer',
    server: './server.js',
    client: './client.js',
    hydrationPolyfills: ['./my-polyfill.js'],
  };
  

  These will still wait for hydration to occur, but will run before the component script does.

0.15.4

Patch Changes

• 6a660f1: Adds low-level custom element support that renderers can use to enable server side rendering. This will be used in renderers such as a Lit renderer.
• Updated dependencies [6a660f1]
  • @astrojs/parser@0.15.4

0.15.3

Patch Changes

• 17579c2: Improves the error message when attempting to use window in a component.

0.15.2

Patch Changes

• 1e735bb: Allows passing in a class to a child component which will be scoped
• e28d5cb: Improve error handling within .astro files (#526)
• aa86057: Updates collections to match URLs by exact template filename
• f721275: Fix issue where Markdown could close it's parent element early (#494)

0.15.1

Patch Changes

• 8865158: Fixes postcss bug with the 'from' property

0.15.0

Minor Changes

• a136c85: This is a breaking change!

  Astro props are now accessed from the Astro.props global. This change is meant to make prop definitions more ergonomic, leaning into JavaScript patterns you already know (destructuring and defaults). Astro components previously used a prop syntax borrowed from Svelte, but it became clear that this was pretty confusing for most users.

   ---
  + const { text = 'Hello world!' } = Astro.props;
  - export let text = 'Hello world!';
   ---
  
   <div>{text}</div>
  

  Read more about the .astro syntax

  ---

  How do I define what props my component accepts?

  Astro frontmatter scripts are TypeScript! Because of this, we can leverage TypeScript types to define the shape of your props.

  ---
  export interface Props {
    text?: string;
  }
  const { text = 'Hello world!' } = Astro.props as Props;
  ---
  

  Note

  Casting Astro.props as Props is a temporary workaround. We expect our Language Server to handle this automatically soon!

  How do I access props I haven't explicitly defined?

  One of the great things about this change is that it's straight-forward to access any props. Just use ...props!

  ---
  export interface Props {
    text?: string;
    [attr: string]: unknown;
  }
  const { text = 'Hello world!', ...props } = Astro.props as Props;
  ---
  

  What about prop validation?

  We considered building prop validation into Astro, but decided to leave that implementation up to you! This way, you can use any set of tools you like.

  ---
  const { text = 'Hello world!' } = Astro.props;
  
  if (typeof text !== 'string') throw new Error(`Expected "text" to be of type "string" but recieved "${typeof string}"!`);
  ---
  

Patch Changes

• 4cd84c6: #528 Removes unused trapWarn function
• feb9a31: Fixes livereload on static pages
• 47ac2cc: Fix #521, allowing {...spread} props to work again
• 5629349: Bugfix: PostCSS errors in internal Snowpack PostCSS plugin
• Updated dependencies [21dc28c]
• Updated dependencies [47ac2cc]
  • @astrojs/renderer-react@0.1.4
  • @astrojs/parser@0.15.0

0.14.1

Patch Changes

• 3f3e4f1: Allow pageSize: Infinity when creating a collection
• 44f429a: Allow node: prefix to load builtins

0.14.0

Minor Changes

• 09b5779: Removes mounting the project folder and adds a src root option

0.13.12

Rolling back to 0.13.10 to prevent a regression in the dev server output.

0.13.11

Patch Changes

• 6573bea: Fixed README header aspect ratio
• 2671b6f: Fix 472 by not injecting astro-* scoped class unless it is actually used
• b547892: Makes providing a head element on pages optional
• b547892: Allows astro documents to omit the head element
• 0abd251: Allows renderers to provide knownEntrypoint config values
• Updated dependencies [0abd251]
  • @astrojs/renderer-preact@0.1.3
  • @astrojs/renderer-react@0.1.3
  • @astrojs/renderer-vue@0.1.3

0.13.10

Patch Changes

• 233fbcd: Fix race condition caused by parallel build
• Updated dependencies [7f8d586]
  • @astrojs/parser@0.13.10

0.13.9

Patch Changes

• 3ada25d: Pass configured Tailwind config file to the tailwindcss plugin
• f9f2da4: Add repository key to all package.json
• Updated dependencies [f9f2da4]
  • @astrojs/parser@0.13.9
  • @astrojs/prism@0.2.2
  • @astrojs/markdown-support@0.1.2

0.13.8

Patch Changes

• 251b0b5: Less verbose HMR script
• 54c291e: Fix