Compare commits
6 commits
Author | SHA1 | Date | |
---|---|---|---|
993c085952 | |||
|
3f231cefed | ||
|
a8b979ef40 | ||
|
bd5aa1cd35 | ||
|
03e6979c28 | ||
|
75781643a2 |
13 changed files with 147 additions and 73 deletions
5
.changeset/forty-singers-ring.md
Normal file
5
.changeset/forty-singers-ring.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fixed an issue where the transitions router did not work within framework components.
|
5
.changeset/unlucky-avocados-brake.md
Normal file
5
.changeset/unlucky-avocados-brake.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'@astrojs/cloudflare': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fixes `AdvancedRuntime` & `DirectoryRuntime` types to work woth Cloudflare caches
|
|
@ -0,0 +1,5 @@
|
||||||
|
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>;
|
||||||
|
}
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
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,6 +753,21 @@ test.describe('View Transitions', () => {
|
||||||
await expect(p, 'should have content').toHaveText('Page 1');
|
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 }) => {
|
test('body inline scripts do not re-execute on navigation', async ({ page, astro }) => {
|
||||||
const errors = [];
|
const errors = [];
|
||||||
page.addListener('pageerror', (err) => {
|
page.addListener('pageerror', (err) => {
|
||||||
|
|
|
@ -13,9 +13,14 @@ type Events = 'astro:page-load' | 'astro:after-swap';
|
||||||
// only update history entries that are managed by us
|
// only update history entries that are managed by us
|
||||||
// leave other entries alone and do not accidently add state.
|
// leave other entries alone and do not accidently add state.
|
||||||
const persistState = (state: State) => history.state && history.replaceState(state, '');
|
const persistState = (state: State) => history.state && history.replaceState(state, '');
|
||||||
export const supportsViewTransitions = !!document.startViewTransition;
|
|
||||||
|
const inBrowser = import.meta.env.SSR === false;
|
||||||
|
|
||||||
|
export const supportsViewTransitions = inBrowser && !!document.startViewTransition;
|
||||||
|
|
||||||
export const transitionEnabledOnThisPage = () =>
|
export const transitionEnabledOnThisPage = () =>
|
||||||
!!document.querySelector('[name="astro-view-transitions-enabled"]');
|
inBrowser && !!document.querySelector('[name="astro-view-transitions-enabled"]');
|
||||||
|
|
||||||
const samePage = (otherLocation: URL) =>
|
const samePage = (otherLocation: URL) =>
|
||||||
location.pathname === otherLocation.pathname && location.search === otherLocation.search;
|
location.pathname === otherLocation.pathname && location.search === otherLocation.search;
|
||||||
const triggerEvent = (name: Events) => document.dispatchEvent(new Event(name));
|
const triggerEvent = (name: Events) => document.dispatchEvent(new Event(name));
|
||||||
|
@ -40,13 +45,17 @@ const announce = () => {
|
||||||
60
|
60
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const PERSIST_ATTR = 'data-astro-transition-persist';
|
const PERSIST_ATTR = 'data-astro-transition-persist';
|
||||||
const parser = new DOMParser();
|
|
||||||
|
let parser: DOMParser;
|
||||||
|
|
||||||
// The History API does not tell you if navigation is forward or back, so
|
// 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
|
// 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.
|
// can use that to determine popstate if going forward or back.
|
||||||
let currentHistoryIndex = 0;
|
let currentHistoryIndex = 0;
|
||||||
|
|
||||||
|
if (inBrowser) {
|
||||||
if (history.state) {
|
if (history.state) {
|
||||||
// we reloaded a page with history state
|
// we reloaded a page with history state
|
||||||
// (e.g. history navigation from non-transition page or browser reload)
|
// (e.g. history navigation from non-transition page or browser reload)
|
||||||
|
@ -55,6 +64,8 @@ if (history.state) {
|
||||||
} else if (transitionEnabledOnThisPage()) {
|
} else if (transitionEnabledOnThisPage()) {
|
||||||
history.replaceState({ index: currentHistoryIndex, scrollX, scrollY, intraPage: false }, '');
|
history.replaceState({ index: currentHistoryIndex, scrollX, scrollY, intraPage: false }, '');
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const throttle = (cb: (...args: any[]) => any, delay: number) => {
|
const throttle = (cb: (...args: any[]) => any, delay: number) => {
|
||||||
let wait = false;
|
let wait = false;
|
||||||
// During the waiting time additional events are lost.
|
// During the waiting time additional events are lost.
|
||||||
|
@ -336,6 +347,8 @@ async function transition(
|
||||||
toLocation = new URL(response.redirected);
|
toLocation = new URL(response.redirected);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
parser ??= new DOMParser();
|
||||||
|
|
||||||
const newDocument = parser.parseFromString(response.html, response.mediaType);
|
const newDocument = parser.parseFromString(response.html, response.mediaType);
|
||||||
// The next line might look like a hack,
|
// The next line might look like a hack,
|
||||||
// but it is actually necessary as noscript elements
|
// but it is actually necessary as noscript elements
|
||||||
|
@ -372,7 +385,22 @@ async function transition(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let navigateOnServerWarned = false;
|
||||||
|
|
||||||
export function navigate(href: string, options?: Options) {
|
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
|
// not ours
|
||||||
if (!transitionEnabledOnThisPage()) {
|
if (!transitionEnabledOnThisPage()) {
|
||||||
location.href = href;
|
location.href = href;
|
||||||
|
@ -390,8 +418,7 @@ export function navigate(href: string, options?: Options) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (supportsViewTransitions || getFallback() !== 'none') {
|
function onPopState(ev: PopStateEvent) {
|
||||||
addEventListener('popstate', (ev) => {
|
|
||||||
if (!transitionEnabledOnThisPage() && ev.state) {
|
if (!transitionEnabledOnThisPage() && ev.state) {
|
||||||
// The current page doesn't have View Transitions enabled
|
// The current page doesn't have View Transitions enabled
|
||||||
// but the page we navigate to does (because it set the state).
|
// but the page we navigate to does (because it set the state).
|
||||||
|
@ -431,8 +458,11 @@ if (supportsViewTransitions || getFallback() !== 'none') {
|
||||||
currentHistoryIndex = nextIndex;
|
currentHistoryIndex = nextIndex;
|
||||||
transition(direction, new URL(location.href), {}, state);
|
transition(direction, new URL(location.href), {}, state);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
|
if (inBrowser) {
|
||||||
|
if (supportsViewTransitions || getFallback() !== 'none') {
|
||||||
|
addEventListener('popstate', onPopState);
|
||||||
addEventListener('load', onPageLoad);
|
addEventListener('load', onPageLoad);
|
||||||
// There's not a good way to record scroll position before a back button.
|
// 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.
|
// So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position.
|
||||||
|
@ -445,3 +475,4 @@ if (supportsViewTransitions || getFallback() !== 'none') {
|
||||||
|
|
||||||
markScriptsExec();
|
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.
|
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"
|
```diff lang="js"
|
||||||
// astro.config.mjs
|
// astro.config.mjs
|
||||||
|
@ -221,7 +221,7 @@ Currently supported bindings:
|
||||||
- [Cloudflare Workers KV](https://developers.cloudflare.com/kv/)
|
- [Cloudflare Workers KV](https://developers.cloudflare.com/kv/)
|
||||||
- [Cloudflare Durable Objects](https://developers.cloudflare.com/durable-objects/)
|
- [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
|
```astro
|
||||||
---
|
---
|
||||||
|
|
|
@ -1,4 +1,8 @@
|
||||||
import type { Request as CFRequest, ExecutionContext } from '@cloudflare/workers-types';
|
import type {
|
||||||
|
Request as CFRequest,
|
||||||
|
CacheStorage,
|
||||||
|
ExecutionContext,
|
||||||
|
} from '@cloudflare/workers-types';
|
||||||
import type { SSRManifest } from 'astro';
|
import type { SSRManifest } from 'astro';
|
||||||
import { App } from 'astro/app';
|
import { App } from 'astro/app';
|
||||||
import { getProcessEnvProxy, isNode } from '../util.js';
|
import { getProcessEnvProxy, isNode } from '../util.js';
|
||||||
|
@ -16,7 +20,7 @@ export interface AdvancedRuntime<T extends object = object> {
|
||||||
waitUntil: (promise: Promise<any>) => void;
|
waitUntil: (promise: Promise<any>) => void;
|
||||||
env: Env & T;
|
env: Env & T;
|
||||||
cf: CFRequest['cf'];
|
cf: CFRequest['cf'];
|
||||||
caches: typeof caches;
|
caches: CacheStorage;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -50,7 +54,7 @@ export function createExports(manifest: SSRManifest) {
|
||||||
},
|
},
|
||||||
env: env,
|
env: env,
|
||||||
cf: request.cf,
|
cf: request.cf,
|
||||||
caches: caches,
|
caches: caches as unknown as CacheStorage,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import type { Request as CFRequest, EventContext } from '@cloudflare/workers-types';
|
import type { Request as CFRequest, CacheStorage, EventContext } from '@cloudflare/workers-types';
|
||||||
import type { SSRManifest } from 'astro';
|
import type { SSRManifest } from 'astro';
|
||||||
import { App } from 'astro/app';
|
import { App } from 'astro/app';
|
||||||
import { getProcessEnvProxy, isNode } from '../util.js';
|
import { getProcessEnvProxy, isNode } from '../util.js';
|
||||||
|
@ -6,13 +6,12 @@ import { getProcessEnvProxy, isNode } from '../util.js';
|
||||||
if (!isNode) {
|
if (!isNode) {
|
||||||
process.env = getProcessEnvProxy();
|
process.env = getProcessEnvProxy();
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DirectoryRuntime<T extends object = object> {
|
export interface DirectoryRuntime<T extends object = object> {
|
||||||
runtime: {
|
runtime: {
|
||||||
waitUntil: (promise: Promise<any>) => void;
|
waitUntil: (promise: Promise<any>) => void;
|
||||||
env: EventContext<unknown, string, unknown>['env'] & T;
|
env: EventContext<unknown, string, unknown>['env'] & T;
|
||||||
cf: CFRequest['cf'];
|
cf: CFRequest['cf'];
|
||||||
caches: typeof caches;
|
caches: CacheStorage;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -48,7 +47,7 @@ export function createExports(manifest: SSRManifest) {
|
||||||
},
|
},
|
||||||
env: context.env,
|
env: context.env,
|
||||||
cf: request.cf,
|
cf: request.cf,
|
||||||
caches: caches,
|
caches: caches as unknown as CacheStorage,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -116,14 +116,14 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
|
||||||
if (!id.endsWith('.mdx')) return;
|
if (!id.endsWith('.mdx')) return;
|
||||||
|
|
||||||
// Read code from file manually to prevent Vite from parsing `import.meta.env` expressions
|
// Read code from file manually to prevent Vite from parsing `import.meta.env` expressions
|
||||||
const { fileId } = getFileInfo(id, config);
|
const { fileId, fileUrl } = getFileInfo(id, config);
|
||||||
const code = await fs.readFile(fileId, 'utf-8');
|
const code = await fs.readFile(fileId, 'utf-8');
|
||||||
|
|
||||||
const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
|
const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
|
||||||
|
|
||||||
const vfile = new VFile({ value: pageContent, path: id });
|
const vfile = new VFile({ value: pageContent, path: id });
|
||||||
// Ensure `data.astro` is available to all remark plugins
|
// Ensure `data.astro` is available to all remark plugins
|
||||||
setVfileFrontmatter(vfile, frontmatter, { filePath: id });
|
setVfileFrontmatter(vfile, frontmatter, { fileURL: new URL(fileUrl) });
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const compiled = await processor.process(vfile);
|
const compiled = await processor.process(vfile);
|
||||||
|
|
|
@ -35,7 +35,7 @@ export function setVfileFrontmatter(
|
||||||
vfile.data ??= {};
|
vfile.data ??= {};
|
||||||
vfile.data.astro ??= {};
|
vfile.data.astro ??= {};
|
||||||
(vfile.data.astro as any).frontmatter = frontmatter;
|
(vfile.data.astro as any).frontmatter = frontmatter;
|
||||||
(vfile.data.astro as any).filePath = renderOpts?.filePath;
|
(vfile.data.astro as any).fileURL = renderOpts?.fileURL;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -124,8 +124,8 @@ export async function createMarkdownProcessor(
|
||||||
|
|
||||||
return {
|
return {
|
||||||
async render(content, renderOpts) {
|
async render(content, renderOpts) {
|
||||||
console.log('RENDER OPTS', renderOpts);
|
console.log('url', renderOpts?.fileURL);
|
||||||
const vfile = new VFile({ value: content, path: renderOpts?.filePath });
|
const vfile = new VFile({ value: content, path: renderOpts?.fileURL });
|
||||||
setVfileFrontmatter(vfile, renderOpts?.frontmatter ?? {}, renderOpts);
|
setVfileFrontmatter(vfile, renderOpts?.frontmatter ?? {}, renderOpts);
|
||||||
|
|
||||||
const result: MarkdownVFile = await parser.process(vfile).catch((err) => {
|
const result: MarkdownVFile = await parser.process(vfile).catch((err) => {
|
||||||
|
@ -171,7 +171,6 @@ export async function renderMarkdown(
|
||||||
|
|
||||||
const result = await processor.render(content, {
|
const result = await processor.render(content, {
|
||||||
fileURL: opts.fileURL,
|
fileURL: opts.fileURL,
|
||||||
filePath: opts.filePath,
|
|
||||||
frontmatter: opts.frontmatter,
|
frontmatter: opts.frontmatter,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -68,7 +68,6 @@ export interface MarkdownProcessor {
|
||||||
export interface MarkdownProcessorRenderOptions {
|
export interface MarkdownProcessorRenderOptions {
|
||||||
/** @internal */
|
/** @internal */
|
||||||
fileURL?: URL;
|
fileURL?: URL;
|
||||||
filePath?: string;
|
|
||||||
/** Used for frontmatter injection plugins */
|
/** Used for frontmatter injection plugins */
|
||||||
frontmatter?: Record<string, any>;
|
frontmatter?: Record<string, any>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue