use %sapper.scripts%

lib/index.js

@@ -149,7 +149,7 @@ function get_route_handler(fn) {
 				});
 
 				return templates.stream(res, 200, {
-					main: client.main_file,
+					scripts: `<script src='${client.main_file}'></script>`,
 					html: promise.then(rendered => rendered.html),
 					head: promise.then(({ head }) => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`),
 					styles: promise.then(({ css }) => (css && css.code ? `<style>${css.code}</style>` : ''))
@@ -158,7 +158,7 @@ function get_route_handler(fn) {
 				const { html, head, css } = mod.render(data);
 
 				const page = templates.render(200, {
-					main: client.main_file,
+					scripts: `<script src='${client.main_file}'></script>`,
 					html,
 					head: `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`,
 					styles: (css && css.code ? `<style>${css.code}</style>` : '')
@@ -221,7 +221,7 @@ function get_not_found_handler(fn) {
 			title: 'Not found',
 			status: 404,
 			method: req.method,
-			main: asset_cache.client.main_file,
+			scripts: `<script src='${asset_cache.client.main_file}'></script>`,
 			url: req.url
 		}));
 	};

lib/templates.js

@@ -1,10 +1,22 @@
 const fs = require('fs');
 const glob = require('glob');
+const chalk = require('chalk');
 const chokidar = require('chokidar');
+const framer = require('code-frame');
+const { locate } = require('locate-character');
 const { dev } = require('./config.js');
 
 let templates;
 
+function error(e) {
+	if (e.title) console.error(chalk.bold.red(e.title));
+	if (e.body) console.error(chalk.red(e.body));
+	if (e.url) console.error(chalk.cyan(e.url));
+	if (e.frame) console.error(chalk.grey(e.frame));
+
+	process.exit(1);
+}
+
 function create_templates() {
 	templates = glob.sync('*.html', { cwd: 'templates' })
 		.map(file => {
@@ -12,7 +24,24 @@ function create_templates() {
 			const status = file.replace('.html', '').toLowerCase();
 
 			if (!/^[0-9x]{3}$/.test(status)) {
-				throw new Error(`Bad template — should be a valid status code like 404.html, or a wildcard like 2xx.html`);
+				error({
+					title: `templates/${file}`,
+					body: `Bad template — should be a valid status code like 404.html, or a wildcard like 2xx.html`
+				});
+			}
+
+			const index = template.indexOf('%sapper.main%');
+			if (index !== -1) {
+				// TODO remove this in a future version
+				const { line, column } = locate(template, index, { offsetLine: 1 });
+				const frame = framer(template, line, column);
+
+				error({
+					title: `templates/${file}`,
+					body: `<script src='%sapper.main%'> has been removed — use %sapper.scripts% (without the <script> tag) instead`,
+					url: 'https://github.com/sveltejs/sapper/issues/86',
+					frame
+				});
 			}
 
 			const specificity = (

package.json

@@ -19,7 +19,9 @@
   "dependencies": {
     "chalk": "^2.3.0",
     "chokidar": "^1.7.0",
+    "code-frame": "^5.0.0",
     "escape-html": "^1.0.3",
+    "locate-character": "^2.0.5",
     "mkdirp": "^0.5.1",
     "relative": "^3.0.2",
     "require-relative": "^0.8.7",

test/app/templates/2xx.html

@@ -32,6 +32,6 @@
 	<!-- Sapper creates a <script> tag containing `templates/main.js`
 	     and anything else it needs to hydrate the app and
 	     initialise the router -->
-	<script src='%sapper.main%'></script>
+	%sapper.scripts%
 </body>
 </html>