Compare commits

..

1 commit

Author SHA1 Message Date
cfbcf1db7f wtf 2023-10-12 17:11:09 -05:00
13 changed files with 73 additions and 147 deletions

View file

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

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'); 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) => {

View file

@ -13,14 +13,9 @@ 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 = () =>
inBrowser && !!document.querySelector('[name="astro-view-transitions-enabled"]'); !!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));
@ -45,17 +40,13 @@ 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)
@ -64,8 +55,6 @@ if (inBrowser) {
} 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.
@ -347,8 +336,6 @@ 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
@ -385,22 +372,7 @@ 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;
@ -418,7 +390,8 @@ export function navigate(href: string, options?: Options) {
} }
} }
function onPopState(ev: PopStateEvent) { if (supportsViewTransitions || getFallback() !== 'none') {
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).
@ -458,11 +431,8 @@ function onPopState(ev: PopStateEvent) {
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.
@ -475,4 +445,3 @@ if (inBrowser) {
markScriptsExec(); markScriptsExec();
} }
}

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. 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
--- ---

View file

@ -1,8 +1,4 @@
import type { import type { Request as CFRequest, ExecutionContext } from '@cloudflare/workers-types';
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';
@ -20,7 +16,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: CacheStorage; caches: typeof caches;
}; };
} }
@ -54,7 +50,7 @@ export function createExports(manifest: SSRManifest) {
}, },
env: env, env: env,
cf: request.cf, 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 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,12 +6,13 @@ 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: CacheStorage; caches: typeof caches;
}; };
} }
@ -47,7 +48,7 @@ export function createExports(manifest: SSRManifest) {
}, },
env: context.env, env: context.env,
cf: request.cf, 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; 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, fileUrl } = getFileInfo(id, config); const { fileId } = 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, { fileURL: new URL(fileUrl) }); setVfileFrontmatter(vfile, frontmatter, { filePath: id });
try { try {
const compiled = await processor.process(vfile); const compiled = await processor.process(vfile);

View file

@ -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).fileURL = renderOpts?.fileURL; (vfile.data.astro as any).filePath = renderOpts?.filePath;
} }
/** /**

View file

@ -124,8 +124,8 @@ export async function createMarkdownProcessor(
return { return {
async render(content, renderOpts) { async render(content, renderOpts) {
console.log('url', renderOpts?.fileURL); console.log('RENDER OPTS', renderOpts);
const vfile = new VFile({ value: content, path: renderOpts?.fileURL }); const vfile = new VFile({ value: content, path: renderOpts?.filePath });
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,6 +171,7 @@ 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,
}); });

View file

@ -68,6 +68,7 @@ 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>;
} }