From 6f88597c36339a8c7760023f530293a2dceaf493 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A1s=20Torma?= Date: Mon, 25 Jul 2022 17:11:08 +0200 Subject: [PATCH 1/9] Added missing "loading" attribute for "IFrameHTMLAttributes" (#4044) * Add missing "loading" attr to iFrame * Add changeset * re-ordering attributes --- .changeset/rude-stingrays-fry.md | 5 +++++ packages/astro/astro-jsx.d.ts | 2 ++ 2 files changed, 7 insertions(+) create mode 100644 .changeset/rude-stingrays-fry.md diff --git a/.changeset/rude-stingrays-fry.md b/.changeset/rude-stingrays-fry.md new file mode 100644 index 000000000000..53eb4047755d --- /dev/null +++ b/.changeset/rude-stingrays-fry.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Added missing "loading" attribute to IFrameHTMLAttributes diff --git a/packages/astro/astro-jsx.d.ts b/packages/astro/astro-jsx.d.ts index 59ef899f2b8a..ccbb1833bfbb 100644 --- a/packages/astro/astro-jsx.d.ts +++ b/packages/astro/astro-jsx.d.ts @@ -666,6 +666,7 @@ declare namespace astroHTML.JSX { /** @deprecated */ frameborder?: number | string | undefined | null; height?: number | string | undefined | null; + loading?: 'eager' | 'lazy' | undefined | null; /** @deprecated */ marginheight?: number | string | undefined | null; /** @deprecated */ @@ -679,6 +680,7 @@ declare namespace astroHTML.JSX { src?: string | undefined | null; srcdoc?: string | undefined | null; width?: number | string | undefined | null; + } interface ImgHTMLAttributes extends HTMLAttributes { From 149780493e860171522959865472c6f86c29eb88 Mon Sep 17 00:00:00 2001 From: Princesseuh Date: Mon, 25 Jul 2022 15:12:45 +0000 Subject: [PATCH 2/9] [ci] format --- packages/astro/astro-jsx.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/astro/astro-jsx.d.ts b/packages/astro/astro-jsx.d.ts index ccbb1833bfbb..226391a82e12 100644 --- a/packages/astro/astro-jsx.d.ts +++ b/packages/astro/astro-jsx.d.ts @@ -680,7 +680,6 @@ declare namespace astroHTML.JSX { src?: string | undefined | null; srcdoc?: string | undefined | null; width?: number | string | undefined | null; - } interface ImgHTMLAttributes extends HTMLAttributes { From 7e5ac1f45c4865cfc04c658d18e70aedbae38772 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Mon, 25 Jul 2022 12:14:41 -0400 Subject: [PATCH 3/9] Build the before-hydration script (#4042) * Build the before-hydration script * Adding a changeset --- .changeset/chilled-pandas-confess.md | 5 + .../lit-component/src/components/Counter.js | 6 +- .../lit-component/src/pages/index.astro | 14 +- .../lit-component/src/pages/media.astro | 6 +- .../lit-component/src/pages/solo.astro | 18 ++ packages/astro/e2e/lit-component.test.js | 168 +++++++++++------- packages/astro/src/core/build/static-build.ts | 2 +- .../src/core/build/vite-plugin-analyzer.ts | 1 - .../astro/src/core/build/vite-plugin-ssr.ts | 4 +- .../astro/src/vite-plugin-scripts/index.ts | 19 +- 10 files changed, 151 insertions(+), 92 deletions(-) create mode 100644 .changeset/chilled-pandas-confess.md create mode 100644 packages/astro/e2e/fixtures/lit-component/src/pages/solo.astro diff --git a/.changeset/chilled-pandas-confess.md b/.changeset/chilled-pandas-confess.md new file mode 100644 index 000000000000..2f77aac40840 --- /dev/null +++ b/.changeset/chilled-pandas-confess.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Ensure the before-hydration scripts are built diff --git a/packages/astro/e2e/fixtures/lit-component/src/components/Counter.js b/packages/astro/e2e/fixtures/lit-component/src/components/Counter.js index 3316a7342ccb..72843f8efc55 100644 --- a/packages/astro/e2e/fixtures/lit-component/src/components/Counter.js +++ b/packages/astro/e2e/fixtures/lit-component/src/components/Counter.js @@ -1,8 +1,6 @@ import { LitElement, html } from 'lit'; -export const tagName = 'my-counter'; - -class Counter extends LitElement { +export default class Counter extends LitElement { static get properties() { return { count: { @@ -33,4 +31,4 @@ class Counter extends LitElement { } } -customElements.define(tagName, Counter); +customElements.define('my-counter', Counter); diff --git a/packages/astro/e2e/fixtures/lit-component/src/pages/index.astro b/packages/astro/e2e/fixtures/lit-component/src/pages/index.astro index 48eb7d2f9372..ef86839d6deb 100644 --- a/packages/astro/e2e/fixtures/lit-component/src/pages/index.astro +++ b/packages/astro/e2e/fixtures/lit-component/src/pages/index.astro @@ -1,5 +1,5 @@ --- -import '../components/Counter.js'; +import MyCounter from '../components/Counter.js'; const someProps = { count: 0, @@ -11,16 +11,16 @@ const someProps = { - +

Hello, client:idle!

- + - +

Hello, client:load!

- + - +

Hello, client:visible!

- + diff --git a/packages/astro/e2e/fixtures/lit-component/src/pages/media.astro b/packages/astro/e2e/fixtures/lit-component/src/pages/media.astro index e54cec071e8b..a05d52863168 100644 --- a/packages/astro/e2e/fixtures/lit-component/src/pages/media.astro +++ b/packages/astro/e2e/fixtures/lit-component/src/pages/media.astro @@ -1,5 +1,5 @@ --- -import '../components/Counter.js'; +import MyCounter from '../components/Counter.js'; const someProps = { count: 0, @@ -11,8 +11,8 @@ const someProps = { - +

Hello, client:media!

- + diff --git a/packages/astro/e2e/fixtures/lit-component/src/pages/solo.astro b/packages/astro/e2e/fixtures/lit-component/src/pages/solo.astro new file mode 100644 index 000000000000..1d2745e472a3 --- /dev/null +++ b/packages/astro/e2e/fixtures/lit-component/src/pages/solo.astro @@ -0,0 +1,18 @@ +--- +import MyCounter from '../components/Counter.js'; + +const someProps = { + count: 0, +}; +--- + + + + + + + +

Hello, client:idle!

+ + + diff --git a/packages/astro/e2e/lit-component.test.js b/packages/astro/e2e/lit-component.test.js index acf07f9d9d97..66355af17bea 100644 --- a/packages/astro/e2e/lit-component.test.js +++ b/packages/astro/e2e/lit-component.test.js @@ -1,100 +1,138 @@ import { expect } from '@playwright/test'; import { testFactory } from './test-utils.js'; -const test = testFactory({ root: './fixtures/lit-component/' }); - -let devServer; - -test.beforeEach(async ({ astro }) => { - devServer = await astro.startDevServer(); -}); - -test.afterEach(async () => { - await devServer.stop(); +const test = testFactory({ + root: './fixtures/lit-component/', }); // TODO: configure playwright to handle web component APIs // https://github.com/microsoft/playwright/issues/14241 -test.describe.skip('Lit components', () => { - test('client:idle', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/')); +test.describe('Lit components', () => { + test.beforeEach(() => { + delete globalThis.window; + }); + + test.describe('Development', () => { + let devServer; + const t = test.extend({}); - const counter = page.locator('#client-idle'); - await expect(counter, 'component is visible').toBeVisible(); + t.beforeEach(async ({ astro }) => { + devServer = await astro.startDevServer(); + }); + + t.afterEach(async () => { + await devServer.stop(); + }); - const count = counter.locator('p'); - await expect(count, 'initial count is 0').toHaveText('Count: 0'); + t('client:idle', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); - const inc = counter.locator('button'); - await inc.click(); + const counter = page.locator('#client-idle'); + await expect(counter, 'component is visible').toBeVisible(); + await expect(counter).toHaveCount(1); - await expect(count, 'count incremented by 1').toHaveText('Count: 1'); - }); + const count = counter.locator('p'); + await expect(count, 'initial count is 0').toHaveText('Count: 0'); - test('client:load', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/')); + const inc = counter.locator('button'); + await inc.click(); - const counter = page.locator('#client-load'); - await expect(counter, 'component is visible').toBeVisible(); + await expect(count, 'count incremented by 1').toHaveText('Count: 1'); + }); - const count = counter.locator('p'); - await expect(count, 'initial count is 0').toHaveText('Count: 0'); + t('client:load', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); - const inc = counter.locator('button'); - await inc.click(); + const counter = page.locator('#client-load'); + await expect(counter, 'component is visible').toBeVisible(); - await expect(count, 'count incremented by 1').toHaveText('Count: 1'); - }); + const count = counter.locator('p'); + await expect(count, 'initial count is 0').toHaveText('Count: 0'); - test('client:visible', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/')); + const inc = counter.locator('button'); + await inc.click(); - // Make sure the component is on screen to trigger hydration - const counter = page.locator('#client-visible'); - await counter.scrollIntoViewIfNeeded(); - await expect(counter, 'component is visible').toBeVisible(); + await expect(count, 'count incremented by 1').toHaveText('Count: 1'); + }); - const count = counter.locator('p'); - await expect(count, 'initial count is 0').toHaveText('Count: 0'); + t('client:visible', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); - const inc = counter.locator('button'); - await inc.click(); + // Make sure the component is on screen to trigger hydration + const counter = page.locator('#client-visible'); + await counter.scrollIntoViewIfNeeded(); + await expect(counter, 'component is visible').toBeVisible(); - await expect(count, 'count incremented by 1').toHaveText('Count: 1'); - }); + const count = counter.locator('p'); + await expect(count, 'initial count is 0').toHaveText('Count: 0'); - test('client:media', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/media')); + const inc = counter.locator('button'); + await inc.click(); - const counter = page.locator('#client-media'); - await expect(counter, 'component is visible').toBeVisible(); + await expect(count, 'count incremented by 1').toHaveText('Count: 1'); + }); - const count = counter.locator('p'); - await expect(count, 'initial count is 0').toHaveText('Count: 0'); + t('client:media', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/media')); - const inc = counter.locator('button'); - await inc.click(); + const counter = page.locator('#client-media'); + await expect(counter, 'component is visible').toBeVisible(); - await expect(count, 'component not hydrated yet').toHaveText('Count: 0'); + const count = counter.locator('p'); + await expect(count, 'initial count is 0').toHaveText('Count: 0'); - // Reset the viewport to hydrate the component (max-width: 50rem) - await page.setViewportSize({ width: 414, height: 1124 }); + const inc = counter.locator('button'); + await inc.click(); - await inc.click(); - await expect(count, 'count incremented by 1').toHaveText('Count: 1'); + await expect(count, 'component not hydrated yet').toHaveText('Count: 0'); + + // Reset the viewport to hydrate the component (max-width: 50rem) + await page.setViewportSize({ width: 414, height: 1124 }); + + await inc.click(); + await expect(count, 'count incremented by 1').toHaveText('Count: 1'); + }); + + t.skip('HMR', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const counter = page.locator('#client-idle'); + const label = counter.locator('h1'); + + await astro.editFile('./src/pages/index.astro', (original) => + original.replace('Hello, client:idle!', 'Hello, updated client:idle!') + ); + + await expect(label, 'slot text updated').toHaveText('Hello, updated client:idle!'); + await expect(counter, 'component styles persisted').toHaveCSS('display', 'grid'); + }); }); - test('HMR', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/')); + test.describe('Production', () => { + let previewServer; + const t = test.extend({}); + + t.beforeAll(async ({ astro }) => { + // Playwright's Node version doesn't have these functions, so stub them. + process.stdout.clearLine = () => {}; + process.stdout.cursorTo = () => {}; + await astro.build(); + }); + + t.beforeEach(async ({ astro }) => { + previewServer = await astro.preview(); + }); - const counter = page.locator('#client-idle'); - const label = counter.locator('h1'); + t.afterEach(async () => { + await previewServer.stop(); + }); - await astro.editFile('./src/pages/index.astro', (original) => - original.replace('Hello, client:idle!', 'Hello, updated client:idle!') - ); + t('Only one component in prod', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/solo')); - await expect(label, 'slot text updated').toHaveText('Hello, updated client:idle!'); - await expect(counter, 'component styles persisted').toHaveCSS('display', 'grid'); + const counter = page.locator('my-counter'); + await expect(counter, 'component is visible').toBeVisible(); + await expect(counter, 'there is only one counter').toHaveCount(1); + }); }); }); diff --git a/packages/astro/src/core/build/static-build.ts b/packages/astro/src/core/build/static-build.ts index 64430da6ed68..110a85d677b4 100644 --- a/packages/astro/src/core/build/static-build.ts +++ b/packages/astro/src/core/build/static-build.ts @@ -154,7 +154,7 @@ async function ssrBuild(opts: StaticBuildOptions, internals: BuildInternals, inp // SSR needs to be last opts.astroConfig.output === 'server' && vitePluginSSR(internals, opts.astroConfig._ctx.adapter!), - vitePluginAnalyzer(opts.astroConfig, internals), + vitePluginAnalyzer(internals), ], publicDir: ssr ? false : viteConfig.publicDir, root: viteConfig.root, diff --git a/packages/astro/src/core/build/vite-plugin-analyzer.ts b/packages/astro/src/core/build/vite-plugin-analyzer.ts index 8b9950ff182e..1f84dffe364a 100644 --- a/packages/astro/src/core/build/vite-plugin-analyzer.ts +++ b/packages/astro/src/core/build/vite-plugin-analyzer.ts @@ -10,7 +10,6 @@ import { getTopLevelPages } from './graph.js'; import { getPageDataByViteID, trackClientOnlyPageDatas } from './internal.js'; export function vitePluginAnalyzer( - astroConfig: AstroConfig, internals: BuildInternals ): VitePlugin { function hoistedScriptScanner() { diff --git a/packages/astro/src/core/build/vite-plugin-ssr.ts b/packages/astro/src/core/build/vite-plugin-ssr.ts index d8e6ff728866..bf46fc5d6eed 100644 --- a/packages/astro/src/core/build/vite-plugin-ssr.ts +++ b/packages/astro/src/core/build/vite-plugin-ssr.ts @@ -145,8 +145,10 @@ function buildManifest( // HACK! Patch this special one. const entryModules = Object.fromEntries(internals.entrySpecifierToBundleMap.entries()); - entryModules[BEFORE_HYDRATION_SCRIPT_ID] = + if(!(BEFORE_HYDRATION_SCRIPT_ID in entryModules)) { + entryModules[BEFORE_HYDRATION_SCRIPT_ID] = 'data:text/javascript;charset=utf-8,//[no before-hydration script]'; + } const ssrManifest: SerializedSSRManifest = { adapterName: opts.astroConfig._ctx.adapter!.name, diff --git a/packages/astro/src/vite-plugin-scripts/index.ts b/packages/astro/src/vite-plugin-scripts/index.ts index 20f4fdafec46..a722d3534d8c 100644 --- a/packages/astro/src/vite-plugin-scripts/index.ts +++ b/packages/astro/src/vite-plugin-scripts/index.ts @@ -1,4 +1,4 @@ -import { Plugin as VitePlugin } from 'vite'; +import { Plugin as VitePlugin, ConfigEnv } from 'vite'; import { AstroConfig, InjectedScriptStage } from '../@types/astro.js'; // NOTE: We can't use the virtual "\0" ID convention because we need to @@ -12,8 +12,14 @@ export const PAGE_SCRIPT_ID = `${SCRIPT_ID_PREFIX}${'page' as InjectedScriptStag export const PAGE_SSR_SCRIPT_ID = `${SCRIPT_ID_PREFIX}${'page-ssr' as InjectedScriptStage}.js`; export default function astroScriptsPlugin({ config }: { config: AstroConfig }): VitePlugin { + let env: ConfigEnv | undefined = undefined; return { name: 'astro:scripts', + + config(_config, _env) { + env = _env; + }, + async resolveId(id) { if (id.startsWith(SCRIPT_ID_PREFIX)) { return id; @@ -43,21 +49,14 @@ export default function astroScriptsPlugin({ config }: { config: AstroConfig }): return null; }, buildStart(options) { - // We only want to inject this script if we are building - // for the frontend AND some hydrated components exist in - // the final build. We can detect this by looking for a - // `astro/client/*` input, which signifies both conditions are met. - const hasHydratedComponents = - Array.isArray(options.input) && - options.input.some((input) => input.startsWith('astro/client')); const hasHydrationScripts = config._ctx.scripts.some((s) => s.stage === 'before-hydration'); - if (hasHydratedComponents && hasHydrationScripts) { + if (hasHydrationScripts && env?.command === 'build' && !env?.ssrBuild) { this.emitFile({ type: 'chunk', id: BEFORE_HYDRATION_SCRIPT_ID, name: BEFORE_HYDRATION_SCRIPT_ID, }); } - }, + } }; } From f9e8e72a489495a6cd01fde771e298460493708f Mon Sep 17 00:00:00 2001 From: matthewp Date: Mon, 25 Jul 2022 16:16:22 +0000 Subject: [PATCH 4/9] [ci] format --- packages/astro/e2e/lit-component.test.js | 8 ++++---- packages/astro/src/core/build/vite-plugin-analyzer.ts | 5 +---- packages/astro/src/core/build/vite-plugin-ssr.ts | 4 ++-- packages/astro/src/vite-plugin-scripts/index.ts | 4 ++-- 4 files changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/astro/e2e/lit-component.test.js b/packages/astro/e2e/lit-component.test.js index 66355af17bea..c7e4d8c80e2b 100644 --- a/packages/astro/e2e/lit-component.test.js +++ b/packages/astro/e2e/lit-component.test.js @@ -11,7 +11,7 @@ test.describe('Lit components', () => { test.beforeEach(() => { delete globalThis.window; }); - + test.describe('Development', () => { let devServer; const t = test.extend({}); @@ -19,7 +19,7 @@ test.describe('Lit components', () => { t.beforeEach(async ({ astro }) => { devServer = await astro.startDevServer(); }); - + t.afterEach(async () => { await devServer.stop(); }); @@ -110,12 +110,12 @@ test.describe('Lit components', () => { test.describe('Production', () => { let previewServer; - const t = test.extend({}); + const t = test.extend({}); t.beforeAll(async ({ astro }) => { // Playwright's Node version doesn't have these functions, so stub them. process.stdout.clearLine = () => {}; - process.stdout.cursorTo = () => {}; + process.stdout.cursorTo = () => {}; await astro.build(); }); diff --git a/packages/astro/src/core/build/vite-plugin-analyzer.ts b/packages/astro/src/core/build/vite-plugin-analyzer.ts index 1f84dffe364a..ed92dfe5fa4e 100644 --- a/packages/astro/src/core/build/vite-plugin-analyzer.ts +++ b/packages/astro/src/core/build/vite-plugin-analyzer.ts @@ -1,6 +1,5 @@ import type { PluginContext } from 'rollup'; import type { Plugin as VitePlugin } from 'vite'; -import type { AstroConfig } from '../../@types/astro'; import type { BuildInternals } from '../../core/build/internal.js'; import type { PluginMetadata as AstroPluginMetadata } from '../../vite-plugin-astro/types'; @@ -9,9 +8,7 @@ import { resolveClientDevPath } from '../../core/render/dev/resolve.js'; import { getTopLevelPages } from './graph.js'; import { getPageDataByViteID, trackClientOnlyPageDatas } from './internal.js'; -export function vitePluginAnalyzer( - internals: BuildInternals -): VitePlugin { +export function vitePluginAnalyzer(internals: BuildInternals): VitePlugin { function hoistedScriptScanner() { const uniqueHoistedIds = new Map(); const pageScripts = new Map>(); diff --git a/packages/astro/src/core/build/vite-plugin-ssr.ts b/packages/astro/src/core/build/vite-plugin-ssr.ts index bf46fc5d6eed..5ce5640a2787 100644 --- a/packages/astro/src/core/build/vite-plugin-ssr.ts +++ b/packages/astro/src/core/build/vite-plugin-ssr.ts @@ -145,9 +145,9 @@ function buildManifest( // HACK! Patch this special one. const entryModules = Object.fromEntries(internals.entrySpecifierToBundleMap.entries()); - if(!(BEFORE_HYDRATION_SCRIPT_ID in entryModules)) { + if (!(BEFORE_HYDRATION_SCRIPT_ID in entryModules)) { entryModules[BEFORE_HYDRATION_SCRIPT_ID] = - 'data:text/javascript;charset=utf-8,//[no before-hydration script]'; + 'data:text/javascript;charset=utf-8,//[no before-hydration script]'; } const ssrManifest: SerializedSSRManifest = { diff --git a/packages/astro/src/vite-plugin-scripts/index.ts b/packages/astro/src/vite-plugin-scripts/index.ts index a722d3534d8c..d055cf59d918 100644 --- a/packages/astro/src/vite-plugin-scripts/index.ts +++ b/packages/astro/src/vite-plugin-scripts/index.ts @@ -1,4 +1,4 @@ -import { Plugin as VitePlugin, ConfigEnv } from 'vite'; +import { ConfigEnv, Plugin as VitePlugin } from 'vite'; import { AstroConfig, InjectedScriptStage } from '../@types/astro.js'; // NOTE: We can't use the virtual "\0" ID convention because we need to @@ -57,6 +57,6 @@ export default function astroScriptsPlugin({ config }: { config: AstroConfig }): name: BEFORE_HYDRATION_SCRIPT_ID, }); } - } + }, }; } From c811be49abf17b151e04b9a63126267065f53b3f Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Mon, 25 Jul 2022 15:14:53 -0400 Subject: [PATCH 5/9] Add warnings on markdown deprecations (#4046) * Warn when using content.astro.headers * Warn when using setup without the legacy flag enabled * Adds a changeset --- .changeset/large-seas-drum.md | 5 +++++ packages/astro/src/core/create-vite.ts | 2 +- .../astro/src/vite-plugin-markdown/index.ts | 21 +++++++++++++++++-- 3 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 .changeset/large-seas-drum.md diff --git a/.changeset/large-seas-drum.md b/.changeset/large-seas-drum.md new file mode 100644 index 000000000000..81cdc898d65a --- /dev/null +++ b/.changeset/large-seas-drum.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Adds warnings for legacy markdown behavior diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index 35029b7fccb7..0855112ea600 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -73,7 +73,7 @@ export async function createVite( // the build to run very slow as the filewatcher is triggered often. mode === 'dev' && astroViteServerPlugin({ config: astroConfig, logging }), envVitePlugin({ config: astroConfig }), - markdownVitePlugin({ config: astroConfig }), + markdownVitePlugin({ config: astroConfig, logging }), htmlVitePlugin(), jsxVitePlugin({ config: astroConfig, logging }), astroPostprocessVitePlugin({ config: astroConfig }), diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts index 8b5c58425091..f481685213bb 100644 --- a/packages/astro/src/vite-plugin-markdown/index.ts +++ b/packages/astro/src/vite-plugin-markdown/index.ts @@ -6,6 +6,7 @@ import matter from 'gray-matter'; import { fileURLToPath } from 'url'; import type { Plugin } from 'vite'; import type { AstroConfig } from '../@types/astro'; +import type { LogOptions } from '../core/logger/core.js'; import { pagesVirtualModuleId } from '../core/app/index.js'; import { collectErrorMetadata } from '../core/errors.js'; import { resolvePages } from '../core/util.js'; @@ -14,9 +15,11 @@ import { getViteTransform, TransformHook } from '../vite-plugin-astro/styles.js' import type { PluginMetadata as AstroPluginMetadata } from '../vite-plugin-astro/types'; import { PAGE_SSR_SCRIPT_ID } from '../vite-plugin-scripts/index.js'; import { getFileInfo } from '../vite-plugin-utils/index.js'; +import { warn } from '../core/logger/core.js'; interface AstroPluginOptions { config: AstroConfig; + logging: LogOptions; } const MARKDOWN_IMPORT_FLAG = '?mdImport'; @@ -34,7 +37,7 @@ function safeMatter(source: string, id: string) { // TODO: Clean up some of the shared logic between this Markdown plugin and the Astro plugin. // Both end up connecting a `load()` hook to the Astro compiler, and share some copy-paste // logic in how that is done. -export default function markdown({ config }: AstroPluginOptions): Plugin { +export default function markdown({ config, logging }: AstroPluginOptions): Plugin { function normalizeFilename(filename: string) { if (filename.startsWith('/@fs')) { filename = filename.slice('/@fs'.length); @@ -170,6 +173,12 @@ export default function markdown({ config }: AstroPluginOptions): Plugin { content.astro = metadata; content.url = getFileInfo(id, config).fileUrl; content.file = filename; + + // Warn when attempting to use setup without the legacy flag + if(setup && !isAstroFlavoredMd) { + warn(logging, 'markdown', `The setup: property in frontmatter only works with the legacy.astroFlavoredMarkdown flag enabled.`); + } + const prelude = `--- import Slugger from 'github-slugger'; ${layout ? `import Layout from '${layout}';` : ''} @@ -188,8 +197,16 @@ const $$content = ${JSON.stringify( : // Avoid stripping "setup" and "components" // in plain MD mode { ...content, setup, components } - )} + )}; + +Object.defineProperty($$content.astro, 'headers', { + get() { + console.warn('content.astro.headers has been removed and replaced with content.astro.headings.'); + return undefined; + } +}); ---`; + const imports = `${layout ? `import Layout from '${layout}';` : ''} ${isAstroFlavoredMd ? setup : ''}`.trim(); From 813d3927172e530361be43037e29bc37e4ff76f2 Mon Sep 17 00:00:00 2001 From: matthewp Date: Mon, 25 Jul 2022 19:17:18 +0000 Subject: [PATCH 6/9] [ci] format --- packages/astro/src/vite-plugin-markdown/index.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts index f481685213bb..72821b3580e8 100644 --- a/packages/astro/src/vite-plugin-markdown/index.ts +++ b/packages/astro/src/vite-plugin-markdown/index.ts @@ -6,16 +6,16 @@ import matter from 'gray-matter'; import { fileURLToPath } from 'url'; import type { Plugin } from 'vite'; import type { AstroConfig } from '../@types/astro'; -import type { LogOptions } from '../core/logger/core.js'; import { pagesVirtualModuleId } from '../core/app/index.js'; import { collectErrorMetadata } from '../core/errors.js'; +import type { LogOptions } from '../core/logger/core.js'; +import { warn } from '../core/logger/core.js'; import { resolvePages } from '../core/util.js'; import { cachedCompilation, CompileProps } from '../vite-plugin-astro/compile.js'; import { getViteTransform, TransformHook } from '../vite-plugin-astro/styles.js'; import type { PluginMetadata as AstroPluginMetadata } from '../vite-plugin-astro/types'; import { PAGE_SSR_SCRIPT_ID } from '../vite-plugin-scripts/index.js'; import { getFileInfo } from '../vite-plugin-utils/index.js'; -import { warn } from '../core/logger/core.js'; interface AstroPluginOptions { config: AstroConfig; @@ -175,8 +175,12 @@ export default function markdown({ config, logging }: AstroPluginOptions): Plugi content.file = filename; // Warn when attempting to use setup without the legacy flag - if(setup && !isAstroFlavoredMd) { - warn(logging, 'markdown', `The setup: property in frontmatter only works with the legacy.astroFlavoredMarkdown flag enabled.`); + if (setup && !isAstroFlavoredMd) { + warn( + logging, + 'markdown', + `The setup: property in frontmatter only works with the legacy.astroFlavoredMarkdown flag enabled.` + ); } const prelude = `--- From ab8f4901a259c78534823e7bd22c4f768683ae4b Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Mon, 25 Jul 2022 16:39:58 -0300 Subject: [PATCH 7/9] [docs content] use "version" not since (#4043) * [docs content] use "version" not since Change to use `@version` to create the `` component for docs. (not `@since) Also, quick sentence edit. * Update packages/astro/src/@types/astro.ts Co-authored-by: Nate Moore --- packages/astro/src/@types/astro.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index d4ee10dd4ad3..5003f42ab9c8 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -710,7 +710,7 @@ export interface AstroUserConfig { * @name Legacy Flags * @description * To help some users migrate between versions of Astro, we occasionally introduce `legacy` flags. - * These flags let you to opt-in to some deprecated or otherwise outdated behavior of Astro + * These flags allow you to opt in to some deprecated or otherwise outdated behavior of Astro * in the latest version, so that you can continue to upgrade and take advantage of new Astro releases. */ legacy?: { @@ -719,7 +719,7 @@ export interface AstroUserConfig { * @name legacy.astroFlavoredMarkdown * @type {boolean} * @default `false` - * @since 1.0.0-rc + * @version 1.0.0-rc.1 * @description * Enable Astro's pre-v1.0 support for components and JSX expressions in `.md` Markdown files. * In Astro `1.0.0-rc`, this original behavior was removed as the default, in favor of our new [MDX integration](/en/guides/integrations-guide/mdx/). From e60d6d9c1df7d53613c2bf46c6cfc06ac04100c5 Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Mon, 25 Jul 2022 21:14:03 +0000 Subject: [PATCH 8/9] Removes `fileURLToPath` dependency from `@astrojs/image` SSR production endpoint (#4048) * removing fileURLToPath dependency from SSR production endpoint * chore: add changeset --- .changeset/khaki-tables-design.md | 5 +++++ packages/integrations/image/package.json | 6 +++--- packages/integrations/image/src/build/ssg.ts | 6 +++--- packages/integrations/image/src/build/ssr.ts | 6 +++--- packages/integrations/image/src/endpoints/prod.ts | 6 +++--- packages/integrations/image/src/lib/get-picture.ts | 2 +- packages/integrations/image/src/utils/images.ts | 2 +- packages/integrations/image/src/utils/metadata.ts | 2 +- packages/integrations/image/src/utils/paths.ts | 4 ++-- packages/integrations/image/src/vite-plugin-astro-image.ts | 2 +- pnpm-lock.yaml | 5 +---- 11 files changed, 24 insertions(+), 22 deletions(-) create mode 100644 .changeset/khaki-tables-design.md diff --git a/.changeset/khaki-tables-design.md b/.changeset/khaki-tables-design.md new file mode 100644 index 000000000000..210b97e845bd --- /dev/null +++ b/.changeset/khaki-tables-design.md @@ -0,0 +1,5 @@ +--- +'@astrojs/image': patch +--- + +Removes Node's `fileURLToPath` dependency in the production SSR endpoint diff --git a/packages/integrations/image/package.json b/packages/integrations/image/package.json index 816f08141754..324273799afe 100644 --- a/packages/integrations/image/package.json +++ b/packages/integrations/image/package.json @@ -48,13 +48,13 @@ "image-type": "^4.1.0", "mrmime": "^1.0.0", "sharp": "^0.30.6", - "slash": "^4.0.0" + "slash": "^4.0.0", + "tiny-glob": "^0.2.9" }, "devDependencies": { "@types/etag": "^1.8.1", "@types/sharp": "^0.30.4", "astro": "workspace:*", - "astro-scripts": "workspace:*", - "tiny-glob": "^0.2.9" + "astro-scripts": "workspace:*" } } diff --git a/packages/integrations/image/src/build/ssg.ts b/packages/integrations/image/src/build/ssg.ts index 951f62331f11..78510889c3d4 100644 --- a/packages/integrations/image/src/build/ssg.ts +++ b/packages/integrations/image/src/build/ssg.ts @@ -1,6 +1,6 @@ -import fs from 'fs/promises'; -import path from 'path'; -import { fileURLToPath } from 'url'; +import fs from 'node:fs/promises'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; import { OUTPUT_DIR } from '../constants.js'; import type { SSRImageService, TransformOptions } from '../types.js'; import { isRemoteImage, loadLocalImage, loadRemoteImage } from '../utils/images.js'; diff --git a/packages/integrations/image/src/build/ssr.ts b/packages/integrations/image/src/build/ssr.ts index 2585868b9c8a..7108962a42dc 100644 --- a/packages/integrations/image/src/build/ssr.ts +++ b/packages/integrations/image/src/build/ssr.ts @@ -1,7 +1,7 @@ -import fs from 'fs/promises'; -import path from 'path'; +import fs from 'node:fs/promises'; +import path from 'node:path'; import glob from 'tiny-glob'; -import { fileURLToPath } from 'url'; +import { fileURLToPath } from 'node:url'; import { ensureDir } from '../utils/paths.js'; async function globImages(dir: URL) { diff --git a/packages/integrations/image/src/endpoints/prod.ts b/packages/integrations/image/src/endpoints/prod.ts index 8a15c2e888bd..657f3856dac5 100644 --- a/packages/integrations/image/src/endpoints/prod.ts +++ b/packages/integrations/image/src/endpoints/prod.ts @@ -1,7 +1,6 @@ import type { APIRoute } from 'astro'; import etag from 'etag'; import { lookup } from 'mrmime'; -import { fileURLToPath } from 'url'; // @ts-ignore import loader from 'virtual:image-loader'; import { isRemoteImage, loadLocalImage, loadRemoteImage } from '../utils/images.js'; @@ -20,8 +19,9 @@ export const get: APIRoute = async ({ request }) => { if (isRemoteImage(transform.src)) { inputBuffer = await loadRemoteImage(transform.src); } else { - const pathname = fileURLToPath(new URL(`../client${transform.src}`, import.meta.url)); - inputBuffer = await loadLocalImage(pathname); + const clientRoot = new URL('../client/', import.meta.url); + const localPath = new URL('.' + transform.src, clientRoot); + inputBuffer = await loadLocalImage(localPath.pathname); } if (!inputBuffer) { diff --git a/packages/integrations/image/src/lib/get-picture.ts b/packages/integrations/image/src/lib/get-picture.ts index 7b72736166fd..82bf9f7c565b 100644 --- a/packages/integrations/image/src/lib/get-picture.ts +++ b/packages/integrations/image/src/lib/get-picture.ts @@ -1,5 +1,5 @@ import { lookup } from 'mrmime'; -import { extname } from 'path'; +import { extname } from 'node:path'; import { ImageAttributes, ImageMetadata, OutputFormat, TransformOptions } from '../types.js'; import { parseAspectRatio } from '../utils/images.js'; import { getImage } from './get-image.js'; diff --git a/packages/integrations/image/src/utils/images.ts b/packages/integrations/image/src/utils/images.ts index 55a45d1ce94d..d36c64fc0027 100644 --- a/packages/integrations/image/src/utils/images.ts +++ b/packages/integrations/image/src/utils/images.ts @@ -1,4 +1,4 @@ -import fs from 'fs/promises'; +import fs from 'node:fs/promises'; import type { OutputFormat, TransformOptions } from '../types.js'; export function isOutputFormat(value: string): value is OutputFormat { diff --git a/packages/integrations/image/src/utils/metadata.ts b/packages/integrations/image/src/utils/metadata.ts index 38859b817463..9df87b7c8410 100644 --- a/packages/integrations/image/src/utils/metadata.ts +++ b/packages/integrations/image/src/utils/metadata.ts @@ -1,4 +1,4 @@ -import fs from 'fs/promises'; +import fs from 'node:fs/promises'; import sizeOf from 'image-size'; import { ImageMetadata, InputFormat } from '../types.js'; diff --git a/packages/integrations/image/src/utils/paths.ts b/packages/integrations/image/src/utils/paths.ts index 1ba299526e99..a958d49117ff 100644 --- a/packages/integrations/image/src/utils/paths.ts +++ b/packages/integrations/image/src/utils/paths.ts @@ -1,5 +1,5 @@ -import fs from 'fs'; -import path from 'path'; +import fs from 'node:fs'; +import path from 'node:path'; import { OUTPUT_DIR } from '../constants.js'; import type { TransformOptions } from '../types.js'; import { isRemoteImage } from './images.js'; diff --git a/packages/integrations/image/src/vite-plugin-astro-image.ts b/packages/integrations/image/src/vite-plugin-astro-image.ts index 7a494e98900a..0f3c8398cefb 100644 --- a/packages/integrations/image/src/vite-plugin-astro-image.ts +++ b/packages/integrations/image/src/vite-plugin-astro-image.ts @@ -1,7 +1,7 @@ import type { AstroConfig } from 'astro'; import type { PluginContext } from 'rollup'; import slash from 'slash'; -import { pathToFileURL } from 'url'; +import { pathToFileURL } from 'node:url'; import type { Plugin, ResolvedConfig } from 'vite'; import type { IntegrationOptions } from './types.js'; import { metadata } from './utils/metadata.js'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 76f85507b9fc..9ced36a11c90 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2090,12 +2090,12 @@ importers: mrmime: 1.0.1 sharp: 0.30.7 slash: 4.0.0 + tiny-glob: 0.2.9 devDependencies: '@types/etag': 1.8.1 '@types/sharp': 0.30.4 astro: link:../../astro astro-scripts: link:../../../scripts - tiny-glob: 0.2.9 packages/integrations/image/test/fixtures/basic-image: specifiers: @@ -11046,7 +11046,6 @@ packages: /globalyzer/0.1.0: resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==} - dev: true /globby/11.1.0: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} @@ -11074,7 +11073,6 @@ packages: /globrex/0.1.2: resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} - dev: true /graceful-fs/4.2.10: resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==} @@ -15340,7 +15338,6 @@ packages: dependencies: globalyzer: 0.1.0 globrex: 0.1.2 - dev: true /tmp/0.0.33: resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==} From 2a13e430b1d66dd89a2326c16a6c2877e83c2da4 Mon Sep 17 00:00:00 2001 From: tony-sull Date: Mon, 25 Jul 2022 21:16:11 +0000 Subject: [PATCH 9/9] [ci] format --- packages/integrations/image/src/build/ssr.ts | 2 +- packages/integrations/image/src/utils/metadata.ts | 2 +- packages/integrations/image/src/vite-plugin-astro-image.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/integrations/image/src/build/ssr.ts b/packages/integrations/image/src/build/ssr.ts index 7108962a42dc..e8de6ae3c710 100644 --- a/packages/integrations/image/src/build/ssr.ts +++ b/packages/integrations/image/src/build/ssr.ts @@ -1,7 +1,7 @@ import fs from 'node:fs/promises'; import path from 'node:path'; -import glob from 'tiny-glob'; import { fileURLToPath } from 'node:url'; +import glob from 'tiny-glob'; import { ensureDir } from '../utils/paths.js'; async function globImages(dir: URL) { diff --git a/packages/integrations/image/src/utils/metadata.ts b/packages/integrations/image/src/utils/metadata.ts index 9df87b7c8410..fa60281b6892 100644 --- a/packages/integrations/image/src/utils/metadata.ts +++ b/packages/integrations/image/src/utils/metadata.ts @@ -1,5 +1,5 @@ -import fs from 'node:fs/promises'; import sizeOf from 'image-size'; +import fs from 'node:fs/promises'; import { ImageMetadata, InputFormat } from '../types.js'; export async function metadata(src: string): Promise { diff --git a/packages/integrations/image/src/vite-plugin-astro-image.ts b/packages/integrations/image/src/vite-plugin-astro-image.ts index 0f3c8398cefb..81593c142aed 100644 --- a/packages/integrations/image/src/vite-plugin-astro-image.ts +++ b/packages/integrations/image/src/vite-plugin-astro-image.ts @@ -1,7 +1,7 @@ import type { AstroConfig } from 'astro'; +import { pathToFileURL } from 'node:url'; import type { PluginContext } from 'rollup'; import slash from 'slash'; -import { pathToFileURL } from 'node:url'; import type { Plugin, ResolvedConfig } from 'vite'; import type { IntegrationOptions } from './types.js'; import { metadata } from './utils/metadata.js';