2697: add base and asset transform to html template 🦎

.changeset/cuddly-lemons-live.md

@@ -0,0 +1,8 @@
+---
+'@sveltejs/kit': patch
+---
+
+# Add base and asset transform to html template
+
+- `%svelte.assets%` is the placeholder for `config.paths.assets`
+- `%svelte.base%` is the placeholder for `config.paths.base`

documentation/docs/14-configuration.md

@@ -158,6 +158,9 @@ An object containing zero or more of the following `string` values:
 
 - `assets` — an absolute path that your app's files are served from. This is useful if your files are served from a storage bucket of some kind
 - `base` — a root-relative path that must start, but not end with `/` (e.g. `/base-path`). This specifies where your app is served from and allows the app to live on a non-root path
+- the specified paths will be available through a placeholder in your `.html` template.
+	- `%svelte.assets%` is the placeholder for `config.paths.assets`
+	- `%svelte.base%` is the placeholder for `config.paths.base`
 
 ### prerender
 

documentation/migrating/03-project-files.md

@@ -33,7 +33,7 @@ Most imports from `@sapper/service-worker` have equivalents in [`$service-worker
 
 The `src/template.html` file should be renamed `src/app.html`.
 
-Remove `%sapper.base%`, `%sapper.scripts%` and `%sapper.styles%`. Replace `%sapper.head%` with `%svelte.head%` and `%sapper.html%` with `%svelte.body%`.
+Remove `%sapper.scripts%` and `%sapper.styles%`. Replace `%sapper.head%` with `%svelte.head%`, `%sapper.base%` with `%svelte.base%` and `%sapper.html%` with `%svelte.body%`.
 
 The `<div id="sapper">` is no longer necessary, though you can continue mounting the app to a wrapper element by specifying it with the [`target`](/docs#configuration-target) config option.
 

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

@@ -292,6 +292,8 @@ async function build_server(
 			import * as user_hooks from ${s(app_relative(hooks_file))};
 
 			const template = ({ head, body }) => ${s(fs.readFileSync(config.kit.files.template, 'utf-8'))
+				.replace(/%svelte.base%/g, config.kit.paths.base)
+				.replace(/%svelte.assets%/g, config.kit.paths.assets)
 				.replace('%svelte.head%', '" + head + "')
 				.replace('%svelte.body%', '" + body + "')};
 

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

@@ -460,6 +460,8 @@ async function create_plugin(config, dir, cwd, get_manifest) {
 						template: ({ head, body }) => {
 							let rendered = fs
 								.readFileSync(config.kit.files.template, 'utf8')
+								.replace(/%svelte.base%/g, config.kit.paths.base)
+								.replace(/%svelte.assets%/g, config.kit.paths.assets)
 								.replace('%svelte.head%', () => head)
 								.replace('%svelte.body%', () => body);