Skip to content

Commit

Permalink
Merge branch 'main' into ci/lockfile
Browse files Browse the repository at this point in the history
  • Loading branch information
FredKSchott authored Jul 26, 2022
2 parents a87e845 + 2a13e43 commit ac28821
Show file tree
Hide file tree
Showing 27 changed files with 213 additions and 123 deletions.
5 changes: 5 additions & 0 deletions .changeset/chilled-pandas-confess.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Ensure the before-hydration scripts are built
5 changes: 5 additions & 0 deletions .changeset/khaki-tables-design.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/image': patch
---

Removes Node's `fileURLToPath` dependency in the production SSR endpoint
5 changes: 5 additions & 0 deletions .changeset/large-seas-drum.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Adds warnings for legacy markdown behavior
5 changes: 5 additions & 0 deletions .changeset/rude-stingrays-fry.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Added missing "loading" attribute to IFrameHTMLAttributes
1 change: 1 addition & 0 deletions packages/astro/astro-jsx.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down Expand Up @@ -33,4 +31,4 @@ class Counter extends LitElement {
}
}

customElements.define(tagName, Counter);
customElements.define('my-counter', Counter);
14 changes: 7 additions & 7 deletions packages/astro/e2e/fixtures/lit-component/src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import '../components/Counter.js';
import MyCounter from '../components/Counter.js';
const someProps = {
count: 0,
Expand All @@ -11,16 +11,16 @@ const someProps = {
<!-- Head Stuff -->
</head>
<body>
<my-counter id="client-idle" {...someProps} client:idle>
<MyCounter id="client-idle" {...someProps} client:idle>
<h1>Hello, client:idle!</h1>
</my-counter>
</MyCounter>

<my-counter id="client-load" {...someProps} client:load>
<MyCounter id="client-load" {...someProps} client:load>
<h1>Hello, client:load!</h1>
</my-counter>
</MyCounter>

<my-counter id="client-visible" {...someProps} client:visible>
<MyCounter id="client-visible" {...someProps} client:visible>
<h1>Hello, client:visible!</h1>
</my-counter>
</MyCounter>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import '../components/Counter.js';
import MyCounter from '../components/Counter.js';
const someProps = {
count: 0,
Expand All @@ -11,8 +11,8 @@ const someProps = {
<!-- Head Stuff -->
</head>
<body>
<my-counter id="client-media" {...someProps} client:media="(max-width: 50em)">
<MyCounter id="client-media" {...someProps} client:media="(max-width: 50em)">
<h1>Hello, client:media!</h1>
</my-counter>
</MyCounter>
</body>
</html>
18 changes: 18 additions & 0 deletions packages/astro/e2e/fixtures/lit-component/src/pages/solo.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
import MyCounter from '../components/Counter.js';
const someProps = {
count: 0,
};
---

<html>
<head>
<!-- Head Stuff -->
</head>
<body>
<MyCounter {...someProps} client:idle>
<h1>Hello, client:idle!</h1>
</MyCounter>
</body>
</html>
168 changes: 103 additions & 65 deletions packages/astro/e2e/lit-component.test.js
Original file line number Diff line number Diff line change
@@ -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;
});

const counter = page.locator('#client-idle');
await expect(counter, 'component is visible').toBeVisible();
test.describe('Development', () => {
let devServer;
const t = test.extend({});

const count = counter.locator('p');
await expect(count, 'initial count is 0').toHaveText('Count: 0');
t.beforeEach(async ({ astro }) => {
devServer = await astro.startDevServer();
});

const inc = counter.locator('button');
await inc.click();
t.afterEach(async () => {
await devServer.stop();
});

await expect(count, 'count incremented by 1').toHaveText('Count: 1');
});
t('client:idle', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));

test('client:load', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const counter = page.locator('#client-idle');
await expect(counter, 'component is visible').toBeVisible();
await expect(counter).toHaveCount(1);

const counter = page.locator('#client-load');
await expect(counter, 'component is visible').toBeVisible();
const count = counter.locator('p');
await expect(count, 'initial count is 0').toHaveText('Count: 0');

const count = counter.locator('p');
await expect(count, 'initial count is 0').toHaveText('Count: 0');
const inc = counter.locator('button');
await inc.click();

const inc = counter.locator('button');
await inc.click();
await expect(count, 'count incremented by 1').toHaveText('Count: 1');
});

await expect(count, 'count incremented by 1').toHaveText('Count: 1');
});
t('client:load', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));

test('client:visible', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
const counter = page.locator('#client-load');
await expect(counter, 'component is visible').toBeVisible();

// 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();
const count = counter.locator('p');
await expect(count, 'initial count is 0').toHaveText('Count: 0');

const count = counter.locator('p');
await expect(count, 'initial count is 0').toHaveText('Count: 0');
const inc = counter.locator('button');
await inc.click();

const inc = counter.locator('button');
await inc.click();
await expect(count, 'count incremented by 1').toHaveText('Count: 1');
});

await expect(count, 'count incremented by 1').toHaveText('Count: 1');
});
t('client:visible', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));

// 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();

test('client:media', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/media'));
const count = counter.locator('p');
await expect(count, 'initial count is 0').toHaveText('Count: 0');

const counter = page.locator('#client-media');
await expect(counter, 'component is visible').toBeVisible();
const inc = counter.locator('button');
await inc.click();

const count = counter.locator('p');
await expect(count, 'initial count is 0').toHaveText('Count: 0');
await expect(count, 'count incremented by 1').toHaveText('Count: 1');
});

const inc = counter.locator('button');
await inc.click();
t('client:media', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/media'));

await expect(count, 'component not hydrated yet').toHaveText('Count: 0');
const counter = page.locator('#client-media');
await expect(counter, 'component is visible').toBeVisible();

// Reset the viewport to hydrate the component (max-width: 50rem)
await page.setViewportSize({ width: 414, height: 1124 });
const count = counter.locator('p');
await expect(count, 'initial count is 0').toHaveText('Count: 0');

await inc.click();
await expect(count, 'count incremented by 1').toHaveText('Count: 1');
const inc = counter.locator('button');
await inc.click();

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);
});
});
});
4 changes: 2 additions & 2 deletions packages/astro/src/@types/astro.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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?: {
Expand All @@ -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/).
Expand Down
2 changes: 1 addition & 1 deletion packages/astro/src/core/build/static-build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 1 addition & 5 deletions packages/astro/src/core/build/vite-plugin-analyzer.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -9,10 +8,7 @@ import { resolveClientDevPath } from '../../core/render/dev/resolve.js';
import { getTopLevelPages } from './graph.js';
import { getPageDataByViteID, trackClientOnlyPageDatas } from './internal.js';

export function vitePluginAnalyzer(
astroConfig: AstroConfig,
internals: BuildInternals
): VitePlugin {
export function vitePluginAnalyzer(internals: BuildInternals): VitePlugin {
function hoistedScriptScanner() {
const uniqueHoistedIds = new Map<string, string>();
const pageScripts = new Map<string, Set<string>>();
Expand Down
6 changes: 4 additions & 2 deletions packages/astro/src/core/build/vite-plugin-ssr.ts
Original file line number Diff line number Diff line change
Expand Up @@ -145,8 +145,10 @@ function buildManifest(

// HACK! Patch this special one.
const entryModules = Object.fromEntries(internals.entrySpecifierToBundleMap.entries());
entryModules[BEFORE_HYDRATION_SCRIPT_ID] =
'data:text/javascript;charset=utf-8,//[no before-hydration script]';
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,
Expand Down
2 changes: 1 addition & 1 deletion packages/astro/src/core/create-vite.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 }),
Expand Down
Loading

0 comments on commit ac28821

Please sign in to comment.