diff --git a/.changeset/few-ants-brake.md b/.changeset/few-ants-brake.md new file mode 100644 index 000000000000..607c248ae5c7 --- /dev/null +++ b/.changeset/few-ants-brake.md @@ -0,0 +1,5 @@ +--- +"@astrojs/image": patch +--- + +fix: make `Picture` generate valid dev URLs diff --git a/.changeset/giant-crews-tell.md b/.changeset/giant-crews-tell.md new file mode 100644 index 000000000000..c4fe8b89f7d9 --- /dev/null +++ b/.changeset/giant-crews-tell.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix bug when using `define:vars` with a `style` object diff --git a/.changeset/grumpy-readers-draw.md b/.changeset/grumpy-readers-draw.md new file mode 100644 index 000000000000..32156bc8b81e --- /dev/null +++ b/.changeset/grumpy-readers-draw.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Add `Props` generic for `APIRoute` type diff --git a/packages/astro/package.json b/packages/astro/package.json index 6e4ccdd2d453..821d635095ee 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -113,7 +113,7 @@ "test:e2e:match": "playwright test -g" }, "dependencies": { - "@astrojs/compiler": "^1.5.0", + "@astrojs/compiler": "^1.5.3", "@astrojs/internal-helpers": "^0.1.1", "@astrojs/language-server": "^1.0.0", "@astrojs/markdown-remark": "^2.2.1", diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index ef958d2a89e1..69c0ffed585c 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -1764,21 +1764,21 @@ export interface APIContext = Record; - export interface EndpointOutput { body: Body; encoding?: BufferEncoding; } -export type APIRoute = ( - context: APIContext +export type APIRoute = Record> = ( + context: APIContext ) => EndpointOutput | Response | Promise; export interface EndpointHandler { [method: string]: APIRoute | ((params: Params, request: Request) => EndpointOutput | Response); } +export type Props = Record; + export interface AstroRenderer { /** Name of the renderer. */ name: string; diff --git a/packages/astro/src/runtime/server/render/util.ts b/packages/astro/src/runtime/server/render/util.ts index 182700976cbc..817ca5c32484 100644 --- a/packages/astro/src/runtime/server/render/util.ts +++ b/packages/astro/src/runtime/server/render/util.ts @@ -90,8 +90,15 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the } // support object styles for better JSX compat - if (key === 'style' && !(value instanceof HTMLString) && typeof value === 'object') { - return markHTMLString(` ${key}="${toAttributeString(toStyleString(value), shouldEscape)}"`); + if (key === 'style' && !(value instanceof HTMLString)) { + if (Array.isArray(value) && value.length === 2) { + return markHTMLString( + ` ${key}="${toAttributeString(`${toStyleString(value[0])};${value[1]}`, shouldEscape)}"` + ); + } + if (typeof value === 'object') { + return markHTMLString(` ${key}="${toAttributeString(toStyleString(value), shouldEscape)}"`); + } } // support `className` for better JSX compat diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js index 9afbbbe973ce..2a86e4ba2c67 100644 --- a/packages/astro/test/astro-directives.test.js +++ b/packages/astro/test/astro-directives.test.js @@ -53,6 +53,19 @@ describe('Directives', async () => { expect($('h1').attr('style').toString()).to.include('--textColor: red;'); }); + it('Properly handles define:vars on style elements with style object', async () => { + const html = await fixture.readFile('/define-vars/index.html'); + const $ = cheerio.load(html); + + // All styles should be bundled + expect($('style')).to.have.lengthOf(0); + + // Inject style attribute on top-level element in page + expect($('#compound-style').attr('style').toString()).to.include( + 'color:var(--fg);--fg: black;--bg: white;' + ); + }); + it('set:html', async () => { const html = await fixture.readFile('/set-html/index.html'); const $ = cheerio.load(html); diff --git a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro index 47ec64fb7870..108a120355d4 100644 --- a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro +++ b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro @@ -36,7 +36,7 @@ let undef: undefined; - +
</body> </html> diff --git a/packages/integrations/alpinejs/README.md b/packages/integrations/alpinejs/README.md index 83991f8440d1..bb91966cd968 100644 --- a/packages/integrations/alpinejs/README.md +++ b/packages/integrations/alpinejs/README.md @@ -43,9 +43,8 @@ npm install alpinejs @types/alpinejs Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "alpine()" +```js ins={3} "alpine()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import alpine from '@astrojs/alpinejs'; diff --git a/packages/integrations/deno/README.md b/packages/integrations/deno/README.md index 03e7204ad8ef..01908317b662 100644 --- a/packages/integrations/deno/README.md +++ b/packages/integrations/deno/README.md @@ -96,9 +96,8 @@ deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs To configure this adapter, pass an object to the `deno()` function call in `astro.config.mjs`. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import deno from '@astrojs/deno'; diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index ea778ed37b74..f0601a948bac 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -63,9 +63,8 @@ npm install @astrojs/image Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "image()" +```js ins={3} "image()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; @@ -85,9 +84,8 @@ npm install sharp Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer. -**`astro.config.mjs`** - -```js ins={7} +```js ins={8} +// astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; @@ -478,9 +476,8 @@ The integration can be configured to run with a different image service, either The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/squoosh`, which resolves to the entry point exported from this integration's `package.json`. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; @@ -498,9 +495,8 @@ export default defineConfig({ The `logLevel` controls can be used to control how much detail is logged by the integration during builds. This may be useful to track down a specific image or transformation that is taking a long time to build. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; @@ -523,9 +519,8 @@ Local images will be cached for 1 year and invalidated when the original image f By default, transformed images will be cached to `./node_modules/.astro/image`. This can be configured in the integration's config options. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; diff --git a/packages/integrations/image/src/lib/get-picture.ts b/packages/integrations/image/src/lib/get-picture.ts index 53b9aea8ab69..c0eaa405888c 100644 --- a/packages/integrations/image/src/lib/get-picture.ts +++ b/packages/integrations/image/src/lib/get-picture.ts @@ -85,7 +85,7 @@ export async function getPicture(params: GetPictureParams): Promise<GetPictureRe image = img; } - return `${encodeURI(img.src ?? '')} ${width}w`; + return `${img.src?.replaceAll(' ', encodeURI)} ${width}w`; }) ); diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js index 61b4f8e2b490..6601e74f7be8 100644 --- a/packages/integrations/image/test/picture-ssg.test.js +++ b/packages/integrations/image/test/picture-ssg.test.js @@ -195,6 +195,18 @@ describe('SSG pictures with subpath - dev', function () { const src = image.attr('src'); const [route, params] = src.split('?'); + for (const srcset of picture + .children('source') + .map((_, source) => source.attribs['srcset'])) { + for (const pictureSrc of srcset.split(',')) { + const pictureParams = pictureSrc.split('?')[1]; + + const expected = new URLSearchParams(params).get('href'); + const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, ''); + expect(expected).to.equal(actual); + } + } + expect(route).to.equal(url); const searchParams = new URLSearchParams(params); diff --git a/packages/integrations/image/test/picture-ssr-build.test.js b/packages/integrations/image/test/picture-ssr-build.test.js index 5e760d0b4349..8aba191a403a 100644 --- a/packages/integrations/image/test/picture-ssr-build.test.js +++ b/packages/integrations/image/test/picture-ssr-build.test.js @@ -223,6 +223,18 @@ describe('SSR pictures with subpath - build', function () { const src = image.attr('src'); const [route, params] = src.split('?'); + for (const srcset of picture + .children('source') + .map((_, source) => source.attribs['srcset'])) { + for (const pictureSrc of srcset.split(',')) { + const pictureParams = pictureSrc.split('?')[1]; + + const expected = new URLSearchParams(params).get('href'); + const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, ''); + expect(expected).to.equal(actual); + } + } + expect(route).to.equal(url); const searchParams = new URLSearchParams(params); diff --git a/packages/integrations/image/test/picture-ssr-dev.test.js b/packages/integrations/image/test/picture-ssr-dev.test.js index 325e0d08b45f..896ff8262258 100644 --- a/packages/integrations/image/test/picture-ssr-dev.test.js +++ b/packages/integrations/image/test/picture-ssr-dev.test.js @@ -127,6 +127,18 @@ describe('SSR pictures - dev', function () { const src = image.attr('src'); const [route, params] = src.split('?'); + for (const srcset of picture + .children('source') + .map((_, source) => source.attribs['srcset'])) { + for (const pictureSrc of srcset.split(',')) { + const pictureParams = pictureSrc.split('?')[1]; + + const expected = new URLSearchParams(params).get('href'); + const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, ''); + expect(expected).to.equal(actual); + } + } + expect(route).to.equal(url); const searchParams = new URLSearchParams(params); diff --git a/packages/integrations/lit/README.md b/packages/integrations/lit/README.md index 570b4921135b..1a71ce3c622f 100644 --- a/packages/integrations/lit/README.md +++ b/packages/integrations/lit/README.md @@ -42,9 +42,8 @@ npm install lit @webcomponents/template-shadowroot Now, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "lit()" +```js ins={3} "lit()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import lit from '@astrojs/lit'; @@ -66,9 +65,8 @@ However, there's a key difference with Lit _custom elements_ over conventional _ Astro needs to know which tag is associated with which component script. We expose this through exporting a `tagName` variable from the component script. It looks like this: -**`src/components/my-element.js`** - ```js +// src/components/my-element.js import { LitElement, html } from 'lit'; const tagName = 'my-element'; @@ -86,10 +84,9 @@ customElements.define(tagName, MyElement); In your Astro template import this component as a side-effect and use the element. -**`src/pages/index.astro`** - ```astro --- +// src/pages/index.astro import { MyElement } from '../components/my-element.js'; --- diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md index 15eec3577b00..2303b4465432 100644 --- a/packages/integrations/markdoc/README.md +++ b/packages/integrations/markdoc/README.md @@ -42,9 +42,8 @@ npm install @astrojs/markdoc Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "markdoc()" +```js ins={3} "markdoc()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import markdoc from '@astrojs/markdoc'; diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index 319a1e962d0b..ee20236c4c97 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -42,9 +42,8 @@ npm install @astrojs/mdx Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "mdx()" +```js ins={3} "mdx()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; @@ -95,9 +94,8 @@ All [`markdown` configuration options](https://docs.astro.build/en/reference/con There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically. ::: -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; import remarkToc from 'remark-toc'; @@ -132,9 +130,8 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default: -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; @@ -160,9 +157,8 @@ export default defineConfig({ You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`: -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; @@ -194,9 +190,8 @@ This is an optional configuration setting to optimize the MDX output for faster This is disabled by default. To enable MDX optimization, add the following to your MDX integration configuration: -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; @@ -230,9 +225,8 @@ import Heading from '../Heading.astro'; To configure optimization for this using the `customComponentNames` property, specify an array of HTML element names that should be treated as custom components: -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; diff --git a/packages/integrations/partytown/README.md b/packages/integrations/partytown/README.md index f9d457fd8de3..3e275f58a8d3 100644 --- a/packages/integrations/partytown/README.md +++ b/packages/integrations/partytown/README.md @@ -46,9 +46,8 @@ npm install @astrojs/partytown Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import partytown from '@astrojs/partytown'; @@ -73,9 +72,8 @@ If you open the "Network" tab from [your browser's dev tools](https://developer. To configure this integration, pass a 'config' object to the `partytown()` function call in `astro.config.mjs`. -**`astro.config.mjs`** - ```js +// astro.config.mjs // ... export default defineConfig({ integrations: [ @@ -96,9 +94,8 @@ Partytown ships with a `debug` mode; enable or disable it by passing `true` or ` If this option isn't set, `debug` mode will be on by default in [dev](https://docs.astro.build/en/reference/cli-reference/#astro-dev) or [preview](https://docs.astro.build/en/reference/cli-reference/#astro-preview) mode. -**`astro.config.mjs`** - ```js +// astro.config.mjs export default defineConfig({ integrations: [ partytown({ @@ -117,9 +114,8 @@ To solve this, Partytown can "patch" variables to the global window object and f You can specify which variables to forward with the `config.forward` option. [Read more in Partytown's documentation.](https://partytown.builder.io/forwarding-events) -**`astro.config.mjs`** - ```js +// astro.config.mjs export default defineConfig({ integrations: [ partytown({ diff --git a/packages/integrations/preact/README.md b/packages/integrations/preact/README.md index 6eba098d1400..f0ae3b364742 100644 --- a/packages/integrations/preact/README.md +++ b/packages/integrations/preact/README.md @@ -53,9 +53,8 @@ npm install preact Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "preact()" +```js ins={3} "preact()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import preact from '@astrojs/preact'; @@ -87,9 +86,8 @@ You can enable `preact/compat`, Preact’s compatibility layer for rendering Rea To do so, pass an object to the Preact integration and set `compat: true`. -**`astro.config.mjs`** - ```js "compat: true" +// astro.config.mjs import { defineConfig } from 'astro/config'; import preact from '@astrojs/preact'; diff --git a/packages/integrations/prefetch/README.md b/packages/integrations/prefetch/README.md index 8f63913ab941..4dab2121bdd6 100644 --- a/packages/integrations/prefetch/README.md +++ b/packages/integrations/prefetch/README.md @@ -41,9 +41,8 @@ npm install @astrojs/prefetch Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "prefetch()" +```js ins={3} "prefetch()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import prefetch from '@astrojs/prefetch'; @@ -65,9 +64,8 @@ The Astro Prefetch integration handles which links on the site are prefetched an By default the prefetch script searches the page for any links that include a `rel="prefetch"` attribute, ex: `<a rel="prefetch" />` or `<a rel="nofollow prefetch" />`. This behavior can be changed in your `astro.config.*` file to use a custom query selector when finding prefetch links. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import prefetch from '@astrojs/prefetch'; @@ -86,9 +84,8 @@ export default defineConfig({ By default the prefetch script will only prefetch one link at a time. This behavior can be changed in your `astro.config.*` file to increase the limit for concurrent downloads. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import prefetch from '@astrojs/prefetch'; diff --git a/packages/integrations/react/README.md b/packages/integrations/react/README.md index 68daef6e420b..48c45881f059 100644 --- a/packages/integrations/react/README.md +++ b/packages/integrations/react/README.md @@ -42,9 +42,8 @@ npm install react react-dom Now, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "react()" +```js ins={3} "react()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import react from '@astrojs/react'; diff --git a/packages/integrations/sitemap/README.md b/packages/integrations/sitemap/README.md index ab6d6b1939dd..3e46bb7bb324 100644 --- a/packages/integrations/sitemap/README.md +++ b/packages/integrations/sitemap/README.md @@ -46,9 +46,8 @@ npm install @astrojs/sitemap Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "sitemap()" +```js ins={3} "sitemap()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -62,9 +61,8 @@ export default defineConfig({ `@astrojs/sitemap` requires a deployment / site URL for generation. Add your site's URL under your `astro.config.*` using the `site` property. This must begin with `http:` or `https:`. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -85,14 +83,14 @@ Now, [build your site for production](https://docs.astro.build/en/reference/cli- After verifying that the sitemaps are built, you can add them to your site's `<head>` and the `robots.txt` file for crawlers to pick up. ```html ins={3} -// src/layouts/Layout.astro +<!-- src/layouts/Layout.astro --> <head> <link rel="sitemap" href="/sitemap-index.xml" /> </head> ``` <!-- prettier-ignore --> -``` ins={4} title="public/robots.txt" +```diff ins={4} title="public/robots.txt" User-agent: * Allow: / @@ -101,9 +99,7 @@ Sitemap: https://<YOUR SITE>/sitemap-index.xml ### Example of generated files for a two-page website -**`sitemap-index.xml`** - -```xml +```xml title="sitemap-index.xml" <?xml version="1.0" encoding="UTF-8"?> <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <sitemap> @@ -112,9 +108,7 @@ Sitemap: https://<YOUR SITE>/sitemap-index.xml </sitemapindex> ``` -**`sitemap-0.xml`** - -```xml +```xml title="sitemap-0.xml" <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"> <url> @@ -130,9 +124,8 @@ Sitemap: https://<YOUR SITE>/sitemap-index.xml To configure this integration, pass an object to the `sitemap()` function call in `astro.config.mjs`. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -149,9 +142,8 @@ export default defineConfig({ All pages are included in your sitemap by default. By adding a custom `filter` function, you can filter included pages by URL. -**`astro.config.mjs`** - ```js +// astro.config.mjs // ... sitemap({ filter: (page) => page !== 'https://stargazers.club/secret-vip-lounge', @@ -162,9 +154,8 @@ The function will be called for every page on your site. The `page` function par To filter multiple pages, add arguments with target URLs. -**`astro.config.mjs`** - ```js +// astro.config.mjs // ... sitemap({ filter: (page) => @@ -179,9 +170,8 @@ sitemap({ In some cases, a page might be part of your deployed site but not part of your Astro project. If you'd like to include a page in your sitemap that _isn't_ created by Astro, you can use this option. -**`astro.config.mjs`** - ```js +// astro.config.mjs // ... sitemap({ customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2'], @@ -192,9 +182,8 @@ sitemap({ The maximum number entries per sitemap file. The default value is 45000. A sitemap index and multiple sitemaps are created if you have more entries. See this [explanation of splitting up a large sitemap](https://developers.google.com/search/docs/advanced/sitemaps/large-sitemaps). -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -217,9 +206,8 @@ Note that `changefreq` and `priority` are ignored by Google. > **Note** > Due to limitations of Astro's [Integration API](https://docs.astro.build/en/reference/integrations-reference/), this integration can't analyze a given page's source code. This configuration option can set `changefreq`, `lastmod` and `priority` on a _site-wide_ basis; see the next option **serialize** for how you can set these values on a per-page basis. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -255,9 +243,8 @@ The `serialize` function should return `SitemapItem`, touched or not. The example below shows the ability to add sitemap specific properties individually. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -294,9 +281,8 @@ This object has two required properties: [Read more about localization](https://developers.google.com/search/docs/advanced/crawling/localized-versions#all-method-guidelines). -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; diff --git a/packages/integrations/solid/README.md b/packages/integrations/solid/README.md index e9f123f14cdf..5c3dbeeb8aa8 100644 --- a/packages/integrations/solid/README.md +++ b/packages/integrations/solid/README.md @@ -42,9 +42,8 @@ npm install solid-js Now, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "solid()" +```js ins={3} "solid()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import solid from '@astrojs/solid-js'; diff --git a/packages/integrations/svelte/README.md b/packages/integrations/svelte/README.md index 70e14ebb871a..d3645052673f 100644 --- a/packages/integrations/svelte/README.md +++ b/packages/integrations/svelte/README.md @@ -42,9 +42,8 @@ npm install svelte Now, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "svelte()" +```js ins={3} "svelte()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import svelte from '@astrojs/svelte'; @@ -97,9 +96,8 @@ Providing your own `preprocess` options **will** override the [`vitePreprocess() You can set options either by passing them to the `svelte` integration in `astro.config.mjs` or in `svelte.config.js`. Either of these would override the default `preprocess` setting: -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import svelte from '@astrojs/svelte'; @@ -108,9 +106,8 @@ export default defineConfig({ }); ``` -**`svelte.config.js`** - ```js +// svelte.config.js export default { preprocess: [], }; @@ -122,9 +119,8 @@ export default { If you're using a preprocessor like TypeScript or SCSS in your Svelte files, you can create a `svelte.config.js` file so that the Svelte IDE extension can correctly parse the Svelte files. -**`svelte.config.js`** - ```js +// svelte.config.js import { vitePreprocess } from '@astrojs/svelte'; export default { diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index fb62efade7fb..635b2cb83e65 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -50,9 +50,8 @@ npm install @astrojs/tailwind tailwindcss Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "tailwind()" +```js ins={3} "tailwind()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import tailwind from '@astrojs/tailwind'; @@ -91,9 +90,8 @@ If you want to use a different Tailwind configuration file instead of the defaul > **Warning** > Changing this isn't recommended since it can cause problems with other tools that integrate with Tailwind, like the official Tailwind VSCode extension. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import tailwind from '@astrojs/tailwind'; @@ -122,9 +120,8 @@ By default, the integration imports a basic `base.css` file on every page of you To disable this default behavior, set `applyBaseStyles` to `false`. This can be useful if you need to define your own `base.css` file (to include a [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer), for example). This can also be useful if you do not want `base.css` to be imported on every page of your project. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; export default defineConfig({ diff --git a/packages/integrations/vue/README.md b/packages/integrations/vue/README.md index c9435e3ccb7b..688a7a7b9195 100644 --- a/packages/integrations/vue/README.md +++ b/packages/integrations/vue/README.md @@ -42,9 +42,8 @@ npm install vue Now, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "vue()" +```js ins={3} "vue()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; @@ -79,9 +78,8 @@ This package is maintained by Astro's Core team. You're welcome to submit an iss This integration is powered by `@vitejs/plugin-vue`. To customize the Vue compiler, options can be provided to the integration. See the `@vitejs/plugin-vue` [docs](https://www.npmjs.com/package/@vitejs/plugin-vue) for more details. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; @@ -107,9 +105,8 @@ You can extend the Vue `app` instance setting the `appEntrypoint` option to a ro The default export of this file should be a function that accepts a Vue `App` instance prior to rendering, allowing the use of [custom Vue plugins](https://vuejs.org/guide/reusability/plugins.html), `app.use`, and other customizations for advanced use cases. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; @@ -118,9 +115,8 @@ export default defineConfig({ }); ``` -**`src/pages/_app.ts`** - ```js +// src/pages/_app.ts import type { App } from 'vue'; import i18nPlugin from 'my-vue-i18n-plugin'; @@ -133,9 +129,8 @@ export default (app: App) => { You can use Vue JSX by setting `jsx: true`. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; @@ -146,9 +141,8 @@ export default defineConfig({ This will enable rendering for both Vue and Vue JSX components. To customize the Vue JSX compiler, pass an options object instead of a boolean. See the `@vitejs/plugin-vue-jsx` [docs](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx) for more details. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 94cdbac2609e..7ba0eca3990e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -485,8 +485,8 @@ importers: packages/astro: dependencies: '@astrojs/compiler': - specifier: ^1.5.0 - version: 1.5.0 + specifier: ^1.5.3 + version: 1.5.3 '@astrojs/internal-helpers': specifier: ^0.1.1 version: link:../internal-helpers @@ -5490,14 +5490,14 @@ packages: sisteransi: 1.0.5 dev: false - /@astrojs/compiler@1.5.0: - resolution: {integrity: sha512-k04X/7nlMklU0HQUScxbCTf5n8/Vr+0U0bawb9QWulWxd6qJf3FmBrNATgTYiltjB4pc5HBqmmttAfFi7m4lLg==} + /@astrojs/compiler@1.5.3: + resolution: {integrity: sha512-/HSFkJ+Yv+WUWSq0QVsIlhBKam5VUpGV+s8MvPguC/krHmw4Ww9TIgmfJSvV8/BN0sHJB7pCgf7yInae1zb+TQ==} /@astrojs/language-server@1.0.0: resolution: {integrity: sha512-oEw7AwJmzjgy6HC9f5IdrphZ1GVgfV/+7xQuyf52cpTiRWd/tJISK3MsKP0cDkVlfodmNABNFnAaAWuLZEiiiA==} hasBin: true dependencies: - '@astrojs/compiler': 1.5.0 + '@astrojs/compiler': 1.5.3 '@jridgewell/trace-mapping': 0.3.18 '@vscode/emmet-helper': 2.8.8 events: 3.3.0 @@ -15191,7 +15191,7 @@ packages: resolution: {integrity: sha512-dPzop0gKZyVGpTDQmfy+e7FKXC9JT3mlpfYA2diOVz+Ui+QR1U4G/s+OesKl2Hib2JJOtAYJs/l+ovgT0ljlFA==} engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'} dependencies: - '@astrojs/compiler': 1.5.0 + '@astrojs/compiler': 1.5.3 prettier: 2.8.8 sass-formatter: 0.7.6 dev: true @@ -15200,7 +15200,7 @@ packages: resolution: {integrity: sha512-lJ/mG/Lz/ccSwNtwqpFS126mtMVzFVyYv0ddTF9wqwrEG4seECjKDAyw/oGv915rAcJi8jr89990nqfpmG+qdg==} engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'} dependencies: - '@astrojs/compiler': 1.5.0 + '@astrojs/compiler': 1.5.3 prettier: 2.8.8 sass-formatter: 0.7.6 synckit: 0.8.5