Compare commits
No commits in common. "main" and "latest" have entirely different histories.
13 changed files with 74 additions and 164 deletions
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Fixed an issue where the transitions router did not work within framework components.
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
'@astrojs/cloudflare': patch
|
||||
---
|
||||
|
||||
fixes `AdvancedRuntime` & `DirectoryRuntime` types to work woth Cloudflare caches
|
||||
|
|
@ -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>;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
---
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue