michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix changesets destroying our Astro codeblocks in changelogs (#4227)

Browse source
This commit is contained in:
Erika 2022-08-10 15:30:00 -04:00 committed by GitHub
parent 5970ae0774
commit a862da8aae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 97 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
.prettierrc.js Normal file
View file

@ -0,0 +1,32 @@
// Heads up: This file should be renamed to `.cjs`, however if we did that, changesets wouldn't be able to load it
module.exports = {
printWidth: 100,
semi: true,
singleQuote: true,
tabWidth: 2,
trailingComma: 'es5',
useTabs: true,
plugins: ['./node_modules/prettier-plugin-astro'],
overrides: [
{
// Changesets run Prettier using our configuration, however it uses a very old version of Prettier that does
// not support our plugin and it ends up doing more harm than good. As such, we'll disable our plugin for changelogs
files: ['CHANGELOG.md'],
options: {
plugins: [],
},
},
{
files: ['.*', '*.json', '*.md', '*.toml', '*.yml'],
options: {
useTabs: false,
},
},
{
files: ['**/*.astro'],
options: {
parser: 'astro',
},
},
],
};

23
.prettierrc.json
View file

@ -1,23 +0,0 @@
{
"printWidth": 100,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": true,
"plugins": ["./node_modules/prettier-plugin-astro"],
"overrides": [
{
"files": [".*", "*.json", "*.md", "*.toml", "*.yml"],
"options": {
"useTabs": false
}
},
{
"files": ["**/*.astro"],
"options": {
"parser": "astro"
}
}
]
}

115
packages/astro/CHANGELOG.md
View file

@ -456,7 +456,18 @@ The **Astro v1.0.0 Release Candidate** comes includes new features, tons of bug
Astro supports streaming in its templates. Any time Astro encounters an async boundary it will stream out HTML that occurs before it. For example: Astro supports streaming in its templates. Any time Astro encounters an async boundary it will stream out HTML that occurs before it. For example:
```astro ```astro
---
import LoadTodos from '../components/LoadTodos.astro';
---
<html>
<head>
<title>App</title>
</head>
<body>
<LoadTodos />
</body>
</html>
``` ```
In this arbtrary example Astro will streaming out the `<head>` section and everything else until it encounters `<LoadTodos />` and then stop. LoadTodos, which is also an Astro component will stream its contents as well; stopping and waiting at any other asynchronous components. In this arbtrary example Astro will streaming out the `<head>` section and everything else until it encounters `<LoadTodos />` and then stop. LoadTodos, which is also an Astro component will stream its contents as well; stopping and waiting at any other asynchronous components.
@ -464,7 +475,15 @@ The **Astro v1.0.0 Release Candidate** comes includes new features, tons of bug
As part of this Astro also now supports async iterables within its templates. This means you can do this: As part of this Astro also now supports async iterables within its templates. This means you can do this:
```astro ```astro
<ul>
{(async function* () {
for (const number of numbers) {
await wait(1000);
yield <li>Number: {number}</li>;
yield '\n';
}
})()}
</ul>
``` ```
Which will stream out `<li>`s one at a time, waiting a second between each. Which will stream out `<li>`s one at a time, waiting a second between each.
@ -1687,18 +1706,15 @@ The **Astro v1.0.0 Release Candidate** comes includes new features, tons of bug
```typescript ```typescript
export async function getStaticPaths() { export async function getStaticPaths() {
return [ return [{ params: { slug: 'thing1' } }, { params: { slug: 'thing2' } }];
{ params: { slug: 'thing1' }},
{ params: { slug: 'thing2' }}
]
} }
export async function get(params) { export async function get(params) {
const { slug } = params const { slug } = params;
return { return {
body: // ...JSON.stringify() // body: JSON.stringify(...)
} };
} }
``` ```
@ -1725,7 +1741,7 @@ The **Astro v1.0.0 Release Candidate** comes includes new features, tons of bug
const app = await loadApp(new URL('./dist/server/', import.meta.url)); const app = await loadApp(new URL('./dist/server/', import.meta.url));
createServer((req, res) => { createServer(async (req, res) => {
const route = app.match(req); const route = app.match(req);
if (route) { if (route) {
let html = await app.render(req, route); let html = await app.render(req, route);
@ -1854,18 +1870,15 @@ The **Astro v1.0.0 Release Candidate** comes includes new features, tons of bug
```typescript ```typescript
export async function getStaticPaths() { export async function getStaticPaths() {
return [ return [{ params: { slug: 'thing1' } }, { params: { slug: 'thing2' } }];
{ params: { slug: 'thing1' }},
{ params: { slug: 'thing2' }}
]
} }
export async function get(params) { export async function get(params) {
const { slug } = params const { slug } = params;
return { return {
body: // ...JSON.stringify() // body: JSON.stringify(...)
} };
} }
``` ```
@ -1884,7 +1897,7 @@ The **Astro v1.0.0 Release Candidate** comes includes new features, tons of bug
const app = await loadApp(new URL('./dist/server/', import.meta.url)); const app = await loadApp(new URL('./dist/server/', import.meta.url));
createServer((req, res) => { createServer(async (req, res) => {
const route = app.match(req); const route = app.match(req);
if (route) { if (route) {
let html = await app.render(req, route); let html = await app.render(req, route);
@ -2605,7 +2618,9 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
This change adds support for hoisted scripts, allowing you to bundle scripts together for a page and hoist them to the top (in the head): This change adds support for hoisted scripts, allowing you to bundle scripts together for a page and hoist them to the top (in the head):
```astro ```astro
<script hoist>
// Anything goes here!
</script>
``` ```
- Updated dependencies [5d2ea578] - Updated dependencies [5d2ea578]
@ -2706,22 +2721,21 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
An example usage: An example usage:
```jsx ```astro
--- ---
import BarChart from '../components/BarChart.jsx'; import BarChart from '../components/BarChart.jsx';
--- ---
<BarChart client:only /> <BarChart client:only />
/**
* If multiple renderers are included in the Astro config, <!--
* this will ensure that the component is hydrated with If multiple renderers are included in the Astro config, this will ensure that the component is hydrated with * the Preact renderer.
* the Preact renderer. -->
*/
<BarChart client:only="preact" /> <BarChart client:only="preact" />
/**
* If a custom renderer is required, use the same name <!--
* provided in the Astro config. If a custom renderer is required, use the same name provided in the Astro config.
*/ -->
<BarChart client:only="my-custom-renderer" /> <BarChart client:only="my-custom-renderer" />
``` ```
@ -2745,22 +2759,16 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
An example usage: An example usage:
```jsx ```astro
--- ---
import BarChart from '../components/BarChart.jsx'; import BarChart from '../components/BarChart.jsx';
--- ---
<BarChart client:only /> <BarChart client:only />
/** /** * If multiple renderers are included in the Astro config, * this will ensure that the
* If multiple renderers are included in the Astro config, component is hydrated with * the Preact renderer. */
* this will ensure that the component is hydrated with
* the Preact renderer.
*/
<BarChart client:only="preact" /> <BarChart client:only="preact" />
/** /** * If a custom renderer is required, use the same name * provided in the Astro config. */
* If a custom renderer is required, use the same name
* provided in the Astro config.
*/
<BarChart client:only="my-custom-renderer" /> <BarChart client:only="my-custom-renderer" />
``` ```
@ -2908,7 +2916,7 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
The new `client:media` hydrator allows you to define a component that should only be loaded when a media query matches. An example usage: The new `client:media` hydrator allows you to define a component that should only be loaded when a media query matches. An example usage:
```jsx ```astro
--- ---
import Sidebar from '../components/Sidebar.jsx'; import Sidebar from '../components/Sidebar.jsx';
--- ---
@ -2930,10 +2938,13 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
**index.astro** **index.astro**
```jsx ```astro
---
import Sidebar from '../components/Sidebar.jsx'; import Sidebar from '../components/Sidebar.jsx';
import { MOBILE } from '../media.js'; import { MOBILE } from '../media.js';
---(<Sidebar client:media={MOBILE} />); ---
<Sidebar client:media={MOBILE} />;
``` ```
### Patch Changes ### Patch Changes
@ -3057,7 +3068,7 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
The new `client:media` hydrator allows you to define a component that should only be loaded when a media query matches. An example usage: The new `client:media` hydrator allows you to define a component that should only be loaded when a media query matches. An example usage:
```jsx ```astro
--- ---
import Sidebar from '../components/Sidebar.jsx'; import Sidebar from '../components/Sidebar.jsx';
--- ---
@ -3079,10 +3090,13 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
**index.astro** **index.astro**
```jsx ```astro
---
import Sidebar from '../components/Sidebar.jsx'; import Sidebar from '../components/Sidebar.jsx';
import { MOBILE } from '../media.js'; import { MOBILE } from '../media.js';
---(<Sidebar client:media={MOBILE} />); ---
<Sidebar client:media={MOBILE} />
``` ```
### Patch Changes ### Patch Changes
@ -3250,7 +3264,7 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
Astro frontmatter scripts are TypeScript! Because of this, we can leverage TypeScript types to define the shape of your props. Astro frontmatter scripts are TypeScript! Because of this, we can leverage TypeScript types to define the shape of your props.
```ts ```astro
--- ---
export interface Props { export interface Props {
text?: string; text?: string;
@ -3265,7 +3279,7 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
One of the great things about this change is that it's straight-forward to access _any_ props. Just use `...props`! One of the great things about this change is that it's straight-forward to access _any_ props. Just use `...props`!
```ts ```astro
--- ---
export interface Props { export interface Props {
text?: string; text?: string;
@ -3279,11 +3293,12 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
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. 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.
```ts ```astro
--- ---
const { text = 'Hello world!' } = Astro.props; const { text = 'Hello world!' } = Astro.props;
if (typeof text !== 'string') throw new Error(`Expected "text" to be of type "string" but recieved "${typeof string}"!`); if (typeof text !== 'string')
throw new Error(`Expected "text" to be of type "string" but recieved "${typeof string}"!`);
--- ---
``` ```