Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shadow endpoints #3679

Merged
merged 39 commits into from
Feb 3, 2022
Merged

Shadow endpoints #3679

merged 39 commits into from
Feb 3, 2022

Conversation

Rich-Harris
Copy link
Member

@Rich-Harris Rich-Harris commented Feb 2, 2022

This PR implements shadow endpoints — see #3532.

  • Load shadow data during SSR
  • Serialize shadow data
  • Load shadow data during hydration (from serialized data) and client-side navigation
  • Make data available at ${path}/__data.json
  • Prevent prerendering of shadowed pages with non-GET methods
  • skip page response when accept does not include text/html
  • invalidate('/foo') should invalidate /foo/__data.json (at least conceptually)
  • Update docs

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

  • If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

@changeset-bot
Copy link

changeset-bot bot commented Feb 2, 2022

🦋 Changeset detected

Latest commit: 238d1b0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@sveltejs/kit Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Feb 2, 2022

✔️ Deploy Preview for kit-demo canceled.

🔨 Explore the source changes: 238d1b0

🔍 Inspect the deploy log: https://app.netlify.com/sites/kit-demo/deploys/61fc0796b4445200075fb7f9

@Rich-Harris
Copy link
Member Author

As mentioned in #3532, we need to accommodate prerendering. I think the neatest way to do this is to make shadow endpoint data available at ${path}/__data.json. Since double-underscore-prefixed routes are already verboten, this is safe to do, and provides a nice debugging experience (no need to fire up curl to set accept headers, just append /__data.json to the URL).

Maybe GET ${path} directly with an accept header that includes application/json but not text/html should redirect to this file? Not 100% sure what the HTTP etiquette is here.

@vercel
Copy link

vercel bot commented Feb 3, 2022

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

kit-svelte-dev – ./sites/kit.svelte.dev

🔍 Inspect: https://vercel.com/svelte/kit-svelte-dev/3JHuew9mkoZXXbBbXfCD8yg9KZML
✅ Preview: https://kit-svelte-dev-git-shadow-endpoints-svelte.vercel.app

Comment on lines +438 to +443
if (status >= 400) {
return {
status,
error: new Error('Failed to load data')
};
}
Copy link
Contributor

@hyunbinseo hyunbinseo Feb 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now possible in @sveltejs/[email protected] #5314


Is there a way to distinguish an error page rendered due to a shadow endpoint's 4xx or 5xx response?

Used to fetch endpoints in the load function, and return custom error messages according to the response.

<script lang="ts" context="module">
  import type { Load } from '@sveltejs/kit';

  export const load: Load = async ({ fetch }) => {
    const response = await fetch('/path/to/endpoint');

    if (!response.ok) return { error: 'Custom Error Message' };

    return { status: 200 };
  };
</script>

Above no longer seems feasible since the error message defaults to Failed to load data.

Checking for error.message === 'Failed to load data' in the __error.svelte seems wrong.

@deshartman
Copy link

Hi,

This change has broken the demo application build process for static adapter. It now shows a 500 error:


Steps to reproduce:
npm init svelte@next functions

Use TypeScript? … Yes
Add ESLint for code linting? … Yes
Add Prettier for code formatting? … Yes

cd functions
npm install


Change adaptor to static in svelte.config.js
import adapter from '@sveltejs/adapter-static';

Install the static adapter:
npm install @sveltejs/adapter-static@next

Build project
npm run build

npm run build

[email protected] build
svelte-kit build

vite v2.8.0 building for production...
✓ 34 modules transformed.
.svelte-kit/output/client/_app/assets/svelte-logo-87df40b8.svg 1.85 KiB
.svelte-kit/output/client/_app/assets/fira-mono-greek-ext-400-normal-9e2fe623.woff2 7.33 KiB
.svelte-kit/output/client/_app/assets/fira-mono-cyrillic-ext-400-normal-3df7909e.woff2 15.40 KiB
.svelte-kit/output/client/_app/assets/fira-mono-latin-ext-400-normal-6bfabd30.woff2 11.10 KiB
.svelte-kit/output/client/_app/assets/fira-mono-cyrillic-400-normal-c7d433fd.woff2 8.89 KiB
.svelte-kit/output/client/_app/assets/fira-mono-greek-400-normal-a8be01ce.woff2 10.27 KiB
.svelte-kit/output/client/_app/assets/fira-mono-latin-400-normal-e43b3538.woff2 15.90 KiB
.svelte-kit/output/client/_app/assets/fira-mono-all-400-normal-1e3b098c.woff 75.55 KiB
.svelte-kit/output/client/_app/manifest.json 2.51 KiB
.svelte-kit/output/client/_app/pages/__layout.svelte-1fdcf5b9.js 4.76 KiB / gzip: 1.86 KiB
.svelte-kit/output/client/_app/error.svelte-6f6d00da.js 1.56 KiB / gzip: 0.75 KiB
.svelte-kit/output/client/_app/pages/index.svelte-92dd2217.js 4.08 KiB / gzip: 1.69 KiB
.svelte-kit/output/client/_app/pages/about.svelte-64b29582.js 2.38 KiB / gzip: 1.09 KiB
.svelte-kit/output/client/_app/pages/todos/index.svelte-0cc5f931.js 5.91 KiB / gzip: 2.40 KiB
.svelte-kit/output/client/_app/chunks/singletons-a6a7384f.js 0.05 KiB / gzip: 0.07 KiB
.svelte-kit/output/client/_app/start-f44d78f5.js 23.36 KiB / gzip: 7.95 KiB
.svelte-kit/output/client/_app/assets/pages/todos/index.svelte-784042c1.css 3.70 KiB / gzip: 1.04 KiB
.svelte-kit/output/client/_app/assets/pages/index.svelte-1d45bd0c.css 1.40 KiB / gzip: 0.50 KiB
.svelte-kit/output/client/_app/assets/pages/about.svelte-bf4528fa.css 0.11 KiB / gzip: 0.10 KiB
.svelte-kit/output/client/_app/chunks/vendor-ee294e9e.js 14.16 KiB / gzip: 6.04 KiB
.svelte-kit/output/client/_app/assets/pages/__layout.svelte-15681802.css 4.96 KiB / gzip: 1.55 KiB
vite v2.8.0 building SSR bundle for production...
✓ 36 modules transformed.
.svelte-kit/output/server/manifest.json 2.15 KiB
.svelte-kit/output/server/app.js 63.28 KiB
.svelte-kit/output/server/entries/endpoints/todos/index.ts.js 1.23 KiB
.svelte-kit/output/server/entries/pages/__layout.svelte.js 4.60 KiB
.svelte-kit/output/server/entries/pages/error.svelte.js 0.72 KiB
.svelte-kit/output/server/entries/pages/index.svelte.js 8.07 KiB
.svelte-kit/output/server/entries/pages/about.svelte.js 1.30 KiB
.svelte-kit/output/server/entries/pages/todos/index.svelte.js 5.84 KiB
.svelte-kit/output/server/chunks/index-ee9fdf1a.js 4.24 KiB

Run npm run preview to preview your production build locally.

Using @sveltejs/adapter-static
500 /todos
at file:///functions/node_modules/@sveltejs/kit/dist/chunks/index5.js:408:11
at visit (file:///functions/node_modules/@sveltejs/kit/dist/chunks/index5.js:585:4)
at processTicksAndRejections (internal/process/task_queues.js:95:5)


What has changed:

  • Missing [uid].json.ts
  • Missing index.json.ts
  • New file index.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants