Move amp support to a plugin

[benmccann]

Describe the problem

I don't like amp. It's bad for the web

Also, it slows things down a lot:

kit/packages/kit/test/utils.js

Line 161 in 6c9b739

timeout: 15000 // AMP validator needs a long time to get moving

Describe the proposed solution

Can we use hooks, vite plugins (https://www.npmjs.com/package/vite-plugin-amp), or do we need to add new extension points?

Also, we can potentially move some of the stuff to other options like the proposed inlineCss option (#2620), so that it's not AMP-specific.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[JordyMoos]

Can you please elaborate why it is bad for the web?

I personally think it would be great if svelte has the amp support build in, as it is something used in front end websites.

[Conduitry]

The short answer is that it's something invented by Google with the primary goal of helping Google gain even more control over more of the internet than they already have.

[JordyMoos]

Ahh yea i just found out:
https://www.lafoo.com/the-end-of-amp/

Thanks good to know!

[benmccann]

There are many articles about it available online if you'd like to read more: https://www.google.com/search?q=amp+bad+for+web

[Rich-Harris]

I would love to get rid of built-in AMP support. AMP is flaming hot garbage.

SvelteKit's AMP support consists of the following elements:

1. Styles are inlined, regardless of size
2. HTML is run against the AMP validator during dev
3. import { amp } from '$app/env'
4. The AMP boilerplate is added
5. Instead of including all imported styles, it only includes rendered styles, since there's no possibility of components being dynamically added later

Most of this could be done in userland today, especially if we do #3511:

1. Set inlineStyleThreshold to Infinity
2. Do validation in handle
3. VITE_AMP=true npm run dev and import.meta.env.VITE_AMP
4. Boilerplate can be injected right before validation occurs

The last one is the only part that would need changes to Kit itself, I think. Proposal: if a page is rendered with router: false and hydrate: false — i.e. Kit doesn't include any JS — then we could use rendered CSS (instead of imported CSS) in all cases, rather than making it an AMP-specific feature.

We could then move the validation/boilerplate stuff to a separate package (@sveltejs/amp-kit?) and document the required config changes.

[Rich-Harris]

Another wrinkle we'll need to accommodate: #4073