Compare commits

..

1 commit

Author SHA1 Message Date
bluwy
9884738094 Fix markdown encoding as utf-8 by default 2023-10-10 23:11:22 +08:00
23 changed files with 166 additions and 179 deletions

View file

@ -1,5 +0,0 @@
---
'astro': patch
---
Fixed an issue where the transitions router did not work within framework components.

View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix markdown page encoding to be utf-8 by default (same as Astro 2)

View file

@ -1,5 +0,0 @@
---
'@astrojs/cloudflare': patch
---
fixes `AdvancedRuntime` & `DirectoryRuntime` types to work woth Cloudflare caches

View file

@ -1,5 +0,0 @@
import React from 'react';
import { navigate } from "astro:transitions/client";
export default function ClickToNavigate({ to, id }) {
return <button id={id} onClick={() => navigate(to)}>Navigate to `{to}`</button>;
}

View file

@ -1,12 +0,0 @@
---
import ClickToNavigate from "../components/ClickToNavigate.jsx"
import { ViewTransitions } from "astro:transitions";
---
<html>
<head>
<ViewTransitions />
</head>
<body>
<ClickToNavigate id="react-client-load-navigate-button" to="/two" client:load/>
</body>
</html>

View file

@ -753,21 +753,6 @@ test.describe('View Transitions', () => {
await expect(p, 'should have content').toHaveText('Page 1');
});
test('Use the client side router in framework components', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/client-load'));
// the button is set to naviagte() to /two
const button = page.locator('#react-client-load-navigate-button');
await expect(button, 'should have content').toHaveText('Navigate to `/two`');
await button.click();
const p = page.locator('#two');
await expect(p, 'should have content').toHaveText('Page 2');
});
test('body inline scripts do not re-execute on navigation', async ({ page, astro }) => {
const errors = [];
page.addListener('pageerror', (err) => {

View file

@ -30,7 +30,7 @@ type RawContentEvent = { name: ChokidarEvent; entry: string };
type ContentEvent = { name: ChokidarEvent; entry: URL };
type DataEntryMetadata = Record<string, never>;
type ContentEntryMetadata = { slug: string, path: string };
type ContentEntryMetadata = { slug: string };
type CollectionEntryMap = {
[collection: string]:
| {
@ -276,7 +276,7 @@ export async function createContentTypesGenerator({
if (!(entryKey in collectionEntryMap[collectionKey].entries)) {
collectionEntryMap[collectionKey] = {
type: 'content',
entries: { ...collectionInfo.entries, [entryKey]: { slug: addedSlug, path: event.entry.toString() } },
entries: { ...collectionInfo.entries, [entryKey]: { slug: addedSlug } },
};
}
return { shouldGenerateTypes: true };
@ -453,15 +453,7 @@ async function writeContentFiles({
)}] }`;
const slugType = JSON.stringify(entryMetadata.slug);
contentTypesStr += [
`${entryKey}: {`,
` id: ${entryKey};`,
` slug: ${slugType};`,
` path: ${JSON.stringify(entryMetadata.path)};`,
` body: string;`,
` collection: ${collectionKey};`,
` data: ${dataType}`,
`} & ${renderType};`].join("\n");
contentTypesStr += `${entryKey}: {\n id: ${entryKey};\n slug: ${slugType};\n body: string;\n collection: ${collectionKey};\n data: ${dataType}\n} & ${renderType};\n`;
}
contentTypesStr += `};\n`;
break;

View file

@ -63,6 +63,11 @@ export async function renderPage(
body = encoder.encode(body);
headers.set('Content-Length', body.byteLength.toString());
}
// TODO: Revisit if user should manually set charset by themselves in Astro 4
// This code preserves the existing behaviour for markdown pages since Astro 2
if (route?.component.endsWith('.md')) {
headers.set('Content-Type', 'text/html; charset=utf-8');
}
const response = new Response(body, { ...init, headers });
return response;
}

View file

@ -13,14 +13,9 @@ type Events = 'astro:page-load' | 'astro:after-swap';
// only update history entries that are managed by us
// leave other entries alone and do not accidently add state.
const persistState = (state: State) => history.state && history.replaceState(state, '');
const inBrowser = import.meta.env.SSR === false;
export const supportsViewTransitions = inBrowser && !!document.startViewTransition;
export const supportsViewTransitions = !!document.startViewTransition;
export const transitionEnabledOnThisPage = () =>
inBrowser && !!document.querySelector('[name="astro-view-transitions-enabled"]');
!!document.querySelector('[name="astro-view-transitions-enabled"]');
const samePage = (otherLocation: URL) =>
location.pathname === otherLocation.pathname && location.search === otherLocation.search;
const triggerEvent = (name: Events) => document.dispatchEvent(new Event(name));
@ -45,27 +40,21 @@ const announce = () => {
60
);
};
const PERSIST_ATTR = 'data-astro-transition-persist';
let parser: DOMParser;
const parser = new DOMParser();
// The History API does not tell you if navigation is forward or back, so
// you can figure it using an index. On pushState the index is incremented so you
// can use that to determine popstate if going forward or back.
let currentHistoryIndex = 0;
if (inBrowser) {
if (history.state) {
// we reloaded a page with history state
// (e.g. history navigation from non-transition page or browser reload)
currentHistoryIndex = history.state.index;
scrollTo({ left: history.state.scrollX, top: history.state.scrollY });
} else if (transitionEnabledOnThisPage()) {
history.replaceState({ index: currentHistoryIndex, scrollX, scrollY, intraPage: false }, '');
}
if (history.state) {
// we reloaded a page with history state
// (e.g. history navigation from non-transition page or browser reload)
currentHistoryIndex = history.state.index;
scrollTo({ left: history.state.scrollX, top: history.state.scrollY });
} else if (transitionEnabledOnThisPage()) {
history.replaceState({ index: currentHistoryIndex, scrollX, scrollY, intraPage: false }, '');
}
const throttle = (cb: (...args: any[]) => any, delay: number) => {
let wait = false;
// During the waiting time additional events are lost.
@ -347,8 +336,6 @@ async function transition(
toLocation = new URL(response.redirected);
}
parser ??= new DOMParser();
const newDocument = parser.parseFromString(response.html, response.mediaType);
// The next line might look like a hack,
// but it is actually necessary as noscript elements
@ -385,22 +372,7 @@ async function transition(
}
}
let navigateOnServerWarned = false;
export function navigate(href: string, options?: Options) {
if (inBrowser === false) {
if (!navigateOnServerWarned) {
// instantiate an error for the stacktrace to show to user.
const warning = new Error(
'The view transtions client API was called during a server side render. This may be unintentional as the navigate() function is expected to be called in response to user interactions. Please make sure that your usage is correct.'
);
warning.name = 'Warning';
console.warn(warning);
navigateOnServerWarned = true;
}
return;
}
// not ours
if (!transitionEnabledOnThisPage()) {
location.href = href;
@ -418,61 +390,58 @@ export function navigate(href: string, options?: Options) {
}
}
function onPopState(ev: PopStateEvent) {
if (!transitionEnabledOnThisPage() && ev.state) {
// The current page doesn't have View Transitions enabled
// but the page we navigate to does (because it set the state).
// Do a full page refresh to reload the client-side router from the new page.
// Scroll restauration will then happen during the reload when the router's code is re-executed
if (supportsViewTransitions || getFallback() !== 'none') {
addEventListener('popstate', (ev) => {
if (!transitionEnabledOnThisPage() && ev.state) {
// The current page doesn't have View Transitions enabled
// but the page we navigate to does (because it set the state).
// Do a full page refresh to reload the client-side router from the new page.
// Scroll restauration will then happen during the reload when the router's code is re-executed
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}
location.reload();
return;
}
// History entries without state are created by the browser (e.g. for hash links)
// Our view transition entries always have state.
// Just ignore stateless entries.
// The browser will handle navigation fine without our help
if (ev.state === null) {
if (history.scrollRestoration) {
history.scrollRestoration = 'auto';
}
return;
}
// With the default "auto", the browser will jump to the old scroll position
// before the ViewTransition is complete.
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}
location.reload();
return;
}
// History entries without state are created by the browser (e.g. for hash links)
// Our view transition entries always have state.
// Just ignore stateless entries.
// The browser will handle navigation fine without our help
if (ev.state === null) {
if (history.scrollRestoration) {
history.scrollRestoration = 'auto';
const state: State = history.state;
if (state.intraPage) {
// this is non transition intra-page scrolling
scrollTo(state.scrollX, state.scrollY);
} else {
const nextIndex = state.index;
const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
currentHistoryIndex = nextIndex;
transition(direction, new URL(location.href), {}, state);
}
return;
}
});
// With the default "auto", the browser will jump to the old scroll position
// before the ViewTransition is complete.
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}
addEventListener('load', onPageLoad);
// There's not a good way to record scroll position before a back button.
// So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position.
const updateState = () => {
persistState({ ...history.state, scrollX, scrollY });
};
const state: State = history.state;
if (state.intraPage) {
// this is non transition intra-page scrolling
scrollTo(state.scrollX, state.scrollY);
} else {
const nextIndex = state.index;
const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
currentHistoryIndex = nextIndex;
transition(direction, new URL(location.href), {}, state);
}
}
if (inBrowser) {
if (supportsViewTransitions || getFallback() !== 'none') {
addEventListener('popstate', onPopState);
addEventListener('load', onPageLoad);
// There's not a good way to record scroll position before a back button.
// So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position.
const updateState = () => {
persistState({ ...history.state, scrollX, scrollY });
};
if ('onscrollend' in window) addEventListener('scrollend', updateState);
else addEventListener('scroll', throttle(updateState, 300));
markScriptsExec();
}
if ('onscrollend' in window) addEventListener('scrollend', updateState);
else addEventListener('scroll', throttle(updateState, 300));
markScriptsExec();
}

View file

@ -3,23 +3,31 @@ import * as cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
describe('Astro basics', () => {
/** @type {import('./test-utils').Fixture} */
let fixture;
let previewServer;
before(async () => {
fixture = await loadFixture({
root: './fixtures/astro-basic/',
});
await fixture.build();
previewServer = await fixture.preview();
});
// important: close preview server (free up port and connection)
after(async () => {
await previewServer.stop();
});
describe('build', () => {
let previewServer;
before(async () => {
fixture = await loadFixture({
root: './fixtures/astro-basic/',
});
await fixture.build();
previewServer = await fixture.preview();
});
// important: close preview server (free up port and connection)
after(async () => {
await previewServer.stop();
});
it('Can load page', async () => {
const html = await fixture.readFile(`/index.html`);
const $ = cheerio.load(html);
@ -108,6 +116,18 @@ describe('Astro basics', () => {
const $ = cheerio.load(html);
expect($('#rendered-order').text()).to.eq('Rendered order: A, B');
});
it('renders markdown in utf-8 by default', async () => {
const html = await fixture.readFile('/chinese-encoding-md/index.html');
const $ = cheerio.load(html);
expect($('h1').text()).to.equal('我的第一篇博客文章');
});
it('renders MDX in utf-8 by default', async () => {
const html = await fixture.readFile('/chinese-encoding-mdx/index.html');
const $ = cheerio.load(html);
expect($('h1').text()).to.equal('我的第一篇博客文章');
});
});
it('Supports void elements whose name is a string (#2062)', async () => {
@ -143,4 +163,40 @@ describe('Astro basics', () => {
expect(result.status).to.equal(404);
});
});
describe('development', () => {
/** @type {import('./test-utils').DevServer} */
let devServer;
before(async () => {
devServer = await fixture.startDevServer();
});
after(async () => {
await devServer.stop();
});
it('Renders markdown in utf-8 by default', async () => {
const res = await fixture.fetch('/chinese-encoding-md');
expect(res.status).to.equal(200);
const html = await res.text();
const $ = cheerio.load(html);
expect($('h1').text()).to.equal('我的第一篇博客文章');
const isUtf8 =
res.headers.get('content-type').includes('charset=utf-8') ||
html.includes('<meta charset="utf-8">');
expect(isUtf8).to.be.true;
});
it('Renders MDX in utf-8 by default', async () => {
const res = await fixture.fetch('/chinese-encoding-mdx');
expect(res.status).to.equal(200);
const html = await res.text();
const $ = cheerio.load(html);
expect($('h1').text()).to.equal('我的第一篇博客文章');
const isUtf8 =
res.headers.get('content-type').includes('charset=utf-8') ||
html.includes('<meta charset="utf-8">');
expect(isUtf8).to.be.true;
});
});
});

View file

@ -1,9 +1,10 @@
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import mdx from '@astrojs/mdx';
// https://astro.build/config
export default defineConfig({
integrations: [preact()],
integrations: [preact(), mdx()],
// make sure CLI flags have precedence
server: () => ({ port: 4321 })
});

View file

@ -3,6 +3,7 @@
"version": "0.0.0",
"private": true,
"dependencies": {
"@astrojs/mdx": "workspace:*",
"@astrojs/preact": "workspace:*",
"astro": "workspace:*",
"preact": "^10.17.1"

View file

@ -0,0 +1,3 @@
# 我的第一篇博客文章
发表于2022-07-01

View file

@ -0,0 +1,3 @@
# 我的第一篇博客文章
发表于2022-07-01

View file

@ -90,7 +90,7 @@ describe('core/render', () => {
const PageModule = createAstroModule(Page);
const ctx = await createRenderContext({
route: { type: 'page', pathname: '/index' },
route: { type: 'page', pathname: '/index', component: 'src/pages/index.astro' },
request: new Request('http://example.com/'),
links: [{ name: 'link', props: { rel: 'stylesheet', href: '/main.css' }, children: '' }],
mod: PageModule,
@ -171,7 +171,7 @@ describe('core/render', () => {
const PageModule = createAstroModule(Page);
const ctx = await createRenderContext({
route: { type: 'page', pathname: '/index' },
route: { type: 'page', pathname: '/index', component: 'src/pages/index.astro' },
request: new Request('http://example.com/'),
links: [{ name: 'link', props: { rel: 'stylesheet', href: '/main.css' }, children: '' }],
env,
@ -218,7 +218,7 @@ describe('core/render', () => {
const PageModule = createAstroModule(Page);
const ctx = await createRenderContext({
route: { type: 'page', pathname: '/index' },
route: { type: 'page', pathname: '/index', component: 'src/pages/index.astro' },
request: new Request('http://example.com/'),
links: [{ name: 'link', props: { rel: 'stylesheet', href: '/main.css' }, children: '' }],
env,

View file

@ -45,7 +45,7 @@ describe('core/render', () => {
const mod = createAstroModule(Page);
const ctx = await createRenderContext({
route: { type: 'page', pathname: '/index' },
route: { type: 'page', pathname: '/index', component: 'src/pages/index.mdx' },
request: new Request('http://example.com/'),
env,
mod,
@ -91,7 +91,7 @@ describe('core/render', () => {
const mod = createAstroModule(Page);
const ctx = await createRenderContext({
route: { type: 'page', pathname: '/index' },
route: { type: 'page', pathname: '/index', component: 'src/pages/index.mdx' },
request: new Request('http://example.com/'),
env,
mod,
@ -117,7 +117,7 @@ describe('core/render', () => {
const mod = createAstroModule(Page);
const ctx = await createRenderContext({
route: { type: 'page', pathname: '/index' },
route: { type: 'page', pathname: '/index', component: 'src/pages/index.mdx' },
request: new Request('http://example.com/'),
env,
mod,

View file

@ -169,7 +169,7 @@ default: `false`
Whether or not to import `.wasm` files [directly as ES modules](https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration) using the `.wasm?module` import syntax.
Add `wasmModuleImports: true` to `astro.config.mjs` to enable this functionality in both the Cloudflare build and the Astro dev server. Read more about [using Wasm modules](#use-wasm-modules).
Add `wasmModuleImports: true` to `astro.config.mjs` to enable this functionality in both the Cloudflare build and the Astro dev server. Read more about [using Wasm modules](#use-wasm-modules)
```diff lang="js"
// astro.config.mjs
@ -221,7 +221,7 @@ Currently supported bindings:
- [Cloudflare Workers KV](https://developers.cloudflare.com/kv/)
- [Cloudflare Durable Objects](https://developers.cloudflare.com/durable-objects/)
You can access the runtime from Astro components through `Astro.locals` inside any `.astro` file.
You can access the runtime from Astro components through `Astro.locals` inside any .astro` file.
```astro
---

View file

@ -1,8 +1,4 @@
import type {
Request as CFRequest,
CacheStorage,
ExecutionContext,
} from '@cloudflare/workers-types';
import type { Request as CFRequest, ExecutionContext } from '@cloudflare/workers-types';
import type { SSRManifest } from 'astro';
import { App } from 'astro/app';
import { getProcessEnvProxy, isNode } from '../util.js';
@ -20,7 +16,7 @@ export interface AdvancedRuntime<T extends object = object> {
waitUntil: (promise: Promise<any>) => void;
env: Env & T;
cf: CFRequest['cf'];
caches: CacheStorage;
caches: typeof caches;
};
}
@ -54,7 +50,7 @@ export function createExports(manifest: SSRManifest) {
},
env: env,
cf: request.cf,
caches: caches as unknown as CacheStorage,
caches: caches,
},
};

View file

@ -1,4 +1,4 @@
import type { Request as CFRequest, CacheStorage, EventContext } from '@cloudflare/workers-types';
import type { Request as CFRequest, EventContext } from '@cloudflare/workers-types';
import type { SSRManifest } from 'astro';
import { App } from 'astro/app';
import { getProcessEnvProxy, isNode } from '../util.js';
@ -6,12 +6,13 @@ import { getProcessEnvProxy, isNode } from '../util.js';
if (!isNode) {
process.env = getProcessEnvProxy();
}
export interface DirectoryRuntime<T extends object = object> {
runtime: {
waitUntil: (promise: Promise<any>) => void;
env: EventContext<unknown, string, unknown>['env'] & T;
cf: CFRequest['cf'];
caches: CacheStorage;
caches: typeof caches;
};
}
@ -47,7 +48,7 @@ export function createExports(manifest: SSRManifest) {
},
env: context.env,
cf: request.cf,
caches: caches as unknown as CacheStorage,
caches: caches,
},
};

View file

@ -116,14 +116,14 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
if (!id.endsWith('.mdx')) return;
// Read code from file manually to prevent Vite from parsing `import.meta.env` expressions
const { fileId, fileUrl } = getFileInfo(id, config);
const { fileId } = getFileInfo(id, config);
const code = await fs.readFile(fileId, 'utf-8');
const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
const vfile = new VFile({ value: pageContent, path: id });
// Ensure `data.astro` is available to all remark plugins
setVfileFrontmatter(vfile, frontmatter, { fileURL: new URL(fileUrl) });
setVfileFrontmatter(vfile, frontmatter);
try {
const compiled = await processor.process(vfile);

View file

@ -1,5 +1,5 @@
import type { VFileData as Data, VFile } from 'vfile';
import type { MarkdownAstroData, MarkdownProcessorRenderOptions } from './types.js';
import type { MarkdownAstroData } from './types.js';
function isValidAstroData(obj: unknown): obj is MarkdownAstroData {
if (typeof obj === 'object' && obj !== null && obj.hasOwnProperty('frontmatter')) {
@ -27,15 +27,10 @@ export function safelyGetAstroData(vfileData: Data): MarkdownAstroData | Invalid
return astro;
}
export function setVfileFrontmatter(
vfile: VFile,
frontmatter: Record<string, any>,
renderOpts: MarkdownProcessorRenderOptions | undefined
) {
export function setVfileFrontmatter(vfile: VFile, frontmatter: Record<string, any>) {
vfile.data ??= {};
vfile.data.astro ??= {};
(vfile.data.astro as any).frontmatter = frontmatter;
(vfile.data.astro as any).fileURL = renderOpts?.fileURL;
}
/**

View file

@ -124,9 +124,8 @@ export async function createMarkdownProcessor(
return {
async render(content, renderOpts) {
console.log('url', renderOpts?.fileURL);
const vfile = new VFile({ value: content, path: renderOpts?.fileURL });
setVfileFrontmatter(vfile, renderOpts?.frontmatter ?? {}, renderOpts);
setVfileFrontmatter(vfile, renderOpts?.frontmatter ?? {});
const result: MarkdownVFile = await parser.process(vfile).catch((err) => {
// Ensure that the error message contains the input filename

View file

@ -1747,6 +1747,9 @@ importers:
packages/astro/test/fixtures/astro-basic:
dependencies:
'@astrojs/mdx':
specifier: workspace:*
version: link:../../../../integrations/mdx
'@astrojs/preact':
specifier: workspace:*
version: link:../../../../integrations/preact