remove built-in AMP support

.changeset/big-cups-exist.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] remove amp config option in favour of amp.transform helper function

documentation/docs/14-configuration.md

@@ -16,7 +16,6 @@ const config = {
 
 	kit: {
 		adapter: undefined,
-		amp: false,
 		appDir: '_app',
 		browser: {
 			hydrate: true,
@@ -92,10 +91,6 @@ export default config;
 
 Required when running `svelte-kit build` and determines how the output is converted for different platforms. See [Adapters](/docs/adapters).
 
-### amp
-
-Enable [AMP](/docs/seo#amp) mode.
-
 ### appDir
 
 The directory relative to `paths.assets` where the built JS and CSS (and imported assets) are served from. (The filenames therein contain content-based hashes, meaning they can be cached indefinitely). Must not start or end with `/`.

documentation/docs/16-seo.md

@@ -22,7 +22,7 @@ SvelteKit redirects pathnames with trailing slashes to ones without (or vice ver
 
 ### Manual setup
 
-#### <title> and <meta> 
+#### <title> and <meta>
 
 Every page should have well-written and unique `<title>` and `<meta name="description">` elements inside a [`<svelte:head>`](https://svelte.dev/docs#template-syntax-svelte-head). Guidance on how to write descriptive titles and descriptions, along with other suggestions on making content understandable by search engines, can be found on Google's [Lighthouse SEO audits](https://web.dev/lighthouse-seo/) documentation.
 
@@ -82,8 +82,40 @@ export async function get() {
 
 #### AMP
 
-An unfortunate reality of modern web development is that it is sometimes necessary to create an [Accelerated Mobile Pages (AMP)](https://amp.dev/) version of your site. In SvelteKit this can be done by setting the [`amp`](/docs/configuration#amp) config option, which has the following effects:
+An unfortunate reality of modern web development is that it is sometimes necessary to create an [Accelerated Mobile Pages (AMP)](https://amp.dev/) version of your site. In SvelteKit this can be done by enforcing the following [configuration](/docs/configuration) options...
 
-- Client-side JavaScript, including the router, is disabled
-- Styles are concatenated into `<style amp-custom>`, and the [AMP boilerplate](https://amp.dev/boilerplate/) is injected
-- In development, requests are checked against the [AMP validator](https://validator.ampproject.org/) so you get early warning of any errors
+```js
+/// file: svelte.config.js
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		// the combination of these options
+		// disables JavaScript
+		browser: {
+			hydrate: false,
+			router: false
+		},
+
+		// since <link rel="stylesheet"> isn't
+		// allowed, inline all styles
+		inlineStyleThreshold: Infinity
+	}
+};
+
+export default config;
+```
+
+...and transforming the HTML using `transformPage` along with `transform` imported from `@sveltejs/amp`:
+
+```js
+import * as amp from '@sveltejs/amp';
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	return resolve(event, {
+		transformPage: ({ html }) => amp.transform(html)
+	});
+}
+```
+
+> It's a good idea to use the `handle` hook to validate the transformed HTML using `amphtml-validator`, but only if you're prerendering pages since it's very slow.

packages/adapter-vercel/index.js

@@ -405,7 +405,9 @@ function get_node_version() {
 	const major = parseInt(full.split('.')[0]); // '16.5.0' --> 16
 
 	if (major < 16) {
-		throw new Error(`SvelteKit only supports Node.js version 16 or greater (currently using v${full}). Consult the documentation: https://vercel.com/docs/runtimes#official-runtimes/node-js/node-js-version`)
+		throw new Error(
+			`SvelteKit only supports Node.js version 16 or greater (currently using v${full}). Consult the documentation: https://vercel.com/docs/runtimes#official-runtimes/node-js/node-js-version`
+		);
 	}
 
 	return { major, full };

packages/amp/index.d.ts

@@ -0,0 +1 @@
+export function transform(html: string): string;

packages/amp/index.js

@@ -0,0 +1,28 @@
+// https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/
+const boilerplate = `
+	<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+	<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
+	<script async src="https://cdn.ampproject.org/v0.js"></script>
+`;
+
+/** @param {string} html */
+export function transform(html) {
+	return html
+		.replace(/<style([^]+?)<\/style>/, (match, $1) => `<style amp-custom${$1}</style>`)
+		.replace(/<script[^]+?<\/script>/g, '')
+		.replace(/<link[^>]+>/g, (match) => {
+			if (/rel=('|")?stylesheet\1/.test(match)) {
+				if (/ disabled /.test(match)) return '';
+				throw new Error(
+					'An AMP document cannot contain <link rel="stylesheet"> — ensure that inlineStyleThreshold is set to Infinity, and remove links from your page template and <svelte:head> elements'
+				);
+			}
+
+			return match;
+		})
+		.replace(/<meta[^>]+>/g, (match) => {
+			if (match.includes('http-equiv')) return '';
+			return match;
+		})
+		.replace('</head>', boilerplate + '</head>');
+}

packages/amp/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "@sveltejs/amp",
+	"version": "1.0.0-next.0",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/sveltejs/kit",
+		"directory": "packages/adapter-auto"
+	},
+	"license": "MIT",
+	"homepage": "https://kit.svelte.dev",
+	"type": "module",
+	"exports": {
+		".": {
+			"import": "./index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"main": "index.js",
+	"types": "index.d.ts",
+	"files": [
+		"index.js"
+	],
+	"scripts": {
+		"lint": "eslint --ignore-path .gitignore \"**/*.{ts,js,svelte}\" && npm run check-format",
+		"format": "npm run check-format -- --write",
+		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore"
+	}
+}

packages/kit/package.json

@@ -18,15 +18,13 @@
 	"devDependencies": {
 		"@playwright/test": "^1.21.0",
 		"@rollup/plugin-replace": "^4.0.0",
-		"@types/amphtml-validator": "^1.0.1",
 		"@types/connect": "^3.4.35",
 		"@types/cookie": "^0.5.0",
 		"@types/marked": "^4.0.1",
 		"@types/mime": "^2.0.3",
 		"@types/node": "^16.11.11",
 		"@types/sade": "^1.7.3",
 		"@types/set-cookie-parser": "^2.4.2",
-		"amphtml-validator": "^1.0.35",
 		"cookie": "^0.5.0",
 		"cross-env": "^7.0.3",
 		"devalue": "^2.0.1",

packages/kit/src/core/build/build_client.js

@@ -31,8 +31,6 @@ export async function build_client({
 	process.env.VITE_SVELTEKIT_APP_VERSION_FILE = `${config.kit.appDir}/version.json`;
 	process.env.VITE_SVELTEKIT_APP_VERSION_POLL_INTERVAL = `${config.kit.version.pollInterval}`;
 
-	process.env.VITE_SVELTEKIT_AMP = config.kit.amp ? 'true' : '';
-
 	const client_out_dir = `${output_dir}/client/${config.kit.appDir}`;
 
 	/** @type {Record<string, string>} */
@@ -79,12 +77,7 @@ export async function build_client({
 		plugins: [
 			svelte({
 				...config,
-				// In AMP mode, we know that there are no conditional component imports. In that case, we
-				// don't need to include CSS for components that are imported but unused, so we can just
-				// include rendered CSS.
-				// This would also apply if hydrate and router are both false, but we don't know if one
-				// has been enabled at the page level, so we don't do anything there.
-				emitCss: !config.kit.amp,
+				emitCss: true,
 				compilerOptions: {
 					...config.compilerOptions,
 					hydratable: !!config.kit.browser.hydrate

packages/kit/src/core/build/build_server.js

@@ -47,7 +47,6 @@ export function override(settings) {
 export class Server {
 	constructor(manifest) {
 		this.options = {
-			amp: ${config.kit.amp},
 			csp: ${s(config.kit.csp)},
 			dev: false,
 			floc: ${config.kit.floc},
@@ -260,7 +259,7 @@ export async function build_server(
 
 	client.assets.forEach((asset) => {
 		if (asset.fileName.endsWith('.css')) {
-			if (config.kit.amp || asset.source.length < config.kit.inlineStyleThreshold) {
+			if (asset.source.length < config.kit.inlineStyleThreshold) {
 				const index = stylesheet_lookup.size;
 				const file = `${output_dir}/server/stylesheets/${index}.js`;
 

packages/kit/src/core/config/index.spec.js

@@ -12,7 +12,7 @@ const get_defaults = (prefix = '') => ({
 	extensions: ['.svelte'],
 	kit: {
 		adapter: null,
-		amp: false,
+		amp: undefined,
 		appDir: '_app',
 		browser: {
 			hydrate: true,

packages/kit/src/core/config/options.js

@@ -39,7 +39,11 @@ const options = object(
 				return input;
 			}),
 
-			amp: boolean(false),
+			// TODO: remove this for the 1.0 release
+			amp: error(
+				(keypath) =>
+					`${keypath} has been removed. See https://kit.svelte.dev/docs/seo#amp for details on how to support AMP`
+			),
 
 			appDir: validate('_app', (input, keypath) => {
 				assert_string(input, keypath);

packages/kit/src/core/dev/index.js

@@ -64,12 +64,7 @@ export async function dev({ cwd, port, host, https, config }) {
 		plugins: [
 			svelte({
 				...config,
-				// In AMP mode, we know that there are no conditional component imports. In that case, we
-				// don't need to include CSS for components that are imported but unused, so we can just
-				// include rendered CSS.
-				// This would also apply if hydrate and router are both false, but we don't know if one
-				// has been enabled at the page level, so we don't do anything there.
-				emitCss: !config.kit.amp,
+				emitCss: true,
 				compilerOptions: {
 					...config.compilerOptions,
 					hydratable: !!config.kit.browser.hydrate

packages/kit/src/core/dev/plugin.js

@@ -10,7 +10,6 @@ import { SVELTE_KIT_ASSETS } from '../constants.js';
 import { get_mime_lookup, get_runtime_path, resolve_entry } from '../utils.js';
 import { coalesce_to_error } from '../../utils/error.js';
 import { load_template } from '../config/index.js';
-import { sequence } from '../../hooks.js';
 import { posixify } from '../../utils/filesystem.js';
 import { parse_route_id } from '../../utils/routing.js';
 
@@ -26,14 +25,6 @@ const style_pattern = /\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/;
 export async function create_plugin(config, cwd) {
 	const runtime = get_runtime_path(config);
 
-	/** @type {import('types').Handle} */
-	let amp;
-
-	if (config.kit.amp) {
-		process.env.VITE_SVELTEKIT_AMP = 'true';
-		amp = (await import('./amp_hook.js')).handle;
-	}
-
 	process.env.VITE_SVELTEKIT_APP_VERSION_POLL_INTERVAL = '0';
 
 	/** @type {import('types').Respond} */
@@ -220,7 +211,7 @@ export async function create_plugin(config, cwd) {
 						/** @type {import('types').Hooks} */
 						const hooks = {
 							getSession: user_hooks.getSession || (() => ({})),
-							handle: amp ? sequence(amp, handle) : handle,
+							handle,
 							handleError:
 								user_hooks.handleError ||
 								(({ /** @type {Error & { frame?: string }} */ error }) => {
@@ -282,7 +273,6 @@ export async function create_plugin(config, cwd) {
 						const rendered = await respond(
 							request,
 							{
-								amp: config.kit.amp,
 								csp: config.kit.csp,
 								dev: true,
 								floc: config.kit.floc,

packages/kit/src/runtime/app/env.js

@@ -10,9 +10,5 @@ export const dev = !!import.meta.env.DEV;
  * @type {import('$app/env').mode}
  */
 export const mode = import.meta.env.MODE;
-/**
- * @type {import('$app/env').amp}
- */
-export const amp = !!import.meta.env.VITE_SVELTEKIT_AMP;
 
 export { prerendering } from '../env.js';