Merge branch 'master' into onmount_triggers_in_reverse_order_for_siblings

* master: (35 commits)
  Fix overwrite of 'offset' value in reactive statement
  fix slide example
  typos
  update svelte-repl (fixes download button)
  update svelte-repl
  update svelte-repl version
  use better eliza package
  gitignore workers
  add compiler typings to list of published files
  improve typings for animate, easing, transition, motion and internal apis
  update bundler worker
  fix gitignore
  fix types for easing functions
  fix build order
  generate internal-exports file
  update gitignore
  update folder structure - #2790
  bump estree-walker to fix some svelte.walk bugs
  bundle locally
  -> v3.4.4
  ...

.eslintrc.json

@@ -38,7 +38,6 @@
 		"sourceType": "module"
 	},
 	"settings": {
-		"import/core-modules": ["svelte"],
+		"import/core-modules": ["svelte"]
-		"svelte3/extensions": ["html"]
 	}
 }

.flowconfig

@@ -1,5 +1,5 @@
 [ignore]
-<PROJECT_ROOT>/dist/.*
+<PROJECT_ROOT>/types/.*
 
 [include]
 

.gitignore

@@ -3,15 +3,15 @@
 .nyc_output
 node_modules
 *.map
-/src/compile/internal-exports.ts
+/src/compiler/compile/internal-exports.ts
 /compiler.*js
 /index.*js
-/internal.*js
+/internal
-/store.*js
+/store
-/easing.*js
+/easing
-/motion.*js
+/motion
-/transition.*js
+/transition
-/animate.*js
+/animate
 /scratch/
 /coverage/
 /coverage.lcov/
@@ -21,7 +21,7 @@ node_modules
 /test/sourcemaps/samples/*/output.css.map
 /yarn-error.log
 _actual*.*
-/dist
+/types
 
 /site/cypress/screenshots/
 /site/__sapper__/
@@ -29,5 +29,6 @@ _actual*.*
 /site/.sessions
 /site/static/svelte-app.json
 /site/static/contributors.jpg
+/site/static/workers
 /site/scripts/svelte-app
 /site/src/routes/_contributors.js

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Svelte changelog
 
+## 3.4.4
+
+* Publish type declaration files ([#2874](https://github.com/sveltejs/svelte/issues/2874))
+* Don't trigger updates for unreferenced values ([#2865](https://github.com/sveltejs/svelte/pull/2865))
+* Omit readonly bindings from SSR output ([#2339](https://github.com/sveltejs/svelte/issues/2339))
+* Prevent outdated animation CSS ([#2871](https://github.com/sveltejs/svelte/issues/2871))
+* Repair dynamic `{@html ...}` in head ([#2880](https://github.com/sveltejs/svelte/pull/2880))
+* Don't create unknown prop warnings for internal props, or if component has `$$props` ([#2881](https://github.com/sveltejs/svelte/pull/2881))
+
+
 ## 3.4.3
 
 * Add type declaration files for everything ([#2842](https://github.com/sveltejs/svelte/pull/2842))

animate.d.ts

@@ -1 +0,0 @@
-export * from './dist/animate';

compiler.d.ts

@@ -1 +1 @@
-export * from './dist/compiler';
+export * from './types/compiler';

easing.d.ts

@@ -1 +0,0 @@
-export * from './dist/easing';

index.d.ts

@@ -1 +0,0 @@
-export * from './dist/index';

internal.d.ts

@@ -1 +0,0 @@
-export * from './dist/internal';

motion.d.ts

@@ -1 +0,0 @@
-export * from './dist/motion';

package.json

@@ -1,22 +1,24 @@
 {
   "name": "svelte",
-  "version": "3.4.3",
+  "version": "3.4.4",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",
   "files": [
-    "compiler.js",
+    "types",
+    "compiler.*",
     "register.js",
     "index.*",
-    "internal.*",
+    "internal",
-    "store.*",
+    "store",
-    "animate.*",
+    "animate",
-    "transition.*",
+    "transition",
-    "easing.*",
+    "easing",
-    "motion.*",
+    "motion",
     "svelte",
     "README.md"
   ],
+  "types": "types/runtime",
   "scripts": {
     "test": "mocha --opts mocha.opts",
     "test:unit": "mocha --require sucrase/register --recursive ./**/__test__.ts",
@@ -25,13 +27,13 @@
     "coverage": "c8 report --reporter=text-lcov > coverage.lcov && c8 report --reporter=html",
     "codecov": "codecov",
     "precodecov": "npm run coverage",
-    "lint": "eslint src test/*.js",
     "build": "rollup -c",
     "prepare": "npm run build && npm run tsd",
     "dev": "rollup -cw",
     "pretest": "npm run build",
-    "posttest": "agadoo internal.mjs",
+    "posttest": "agadoo internal/index.mjs",
-    "prepublishOnly": "export PUBLISH=true && npm run lint && npm test",
+    "prepublishOnly": "export PUBLISH=true && npm test && npm run create-stubs",
+    "create-stubs": "node scripts/create-stubs.js",
     "tsd": "tsc -p . --emitDeclarationOnly",
     "typecheck": "tsc -p . --noEmit"
   },
@@ -61,10 +63,7 @@
     "c8": "^3.4.0",
     "codecov": "^3.0.0",
     "css-tree": "1.0.0-alpha22",
-    "eslint": "^5.3.0",
+    "estree-walker": "^0.6.1",
-    "eslint-plugin-html": "^5.0.0",
-    "eslint-plugin-import": "^2.11.0",
-    "estree-walker": "^0.6.0",
     "is-reference": "^1.1.1",
     "jsdom": "^12.2.0",
     "kleur": "^3.0.0",

rollup.config.js

@@ -9,7 +9,7 @@ import pkg from './package.json';
 
 const is_publish = !!process.env.PUBLISH;
 
-const tsPlugin = is_publish
+const ts_plugin = is_publish
 	? typescript({
 		include: 'src/**',
 		typescript: require('typescript')
@@ -18,39 +18,61 @@ const tsPlugin = is_publish
 		transforms: ['typescript']
 	});
 
+const external = id => id.startsWith('svelte/');
+
 export default [
-	/* internal.[m]js */
+	/* runtime */
 	{
-		input: `src/internal/index.ts`,
+		input: `src/runtime/index.ts`,
 		output: [
 			{
-				file: `internal.mjs`,
+				file: `index.mjs`,
 				format: 'esm',
-				paths: id => id.startsWith('svelte/') && id.replace('svelte', '.')
+				paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}`
 			},
 			{
-				file: `internal.js`,
+				file: `index.js`,
 				format: 'cjs',
-				paths: id => id.startsWith('svelte/') && id.replace('svelte', '.')
+				paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}`
 			}
 		],
-		external: id => id.startsWith('svelte/'),
+		external,
+		plugins: [ts_plugin]
+	},
 
-		plugins: [
+	...fs.readdirSync('src/runtime')
-			tsPlugin,
+		.filter(dir => fs.statSync(`src/runtime/${dir}`).isDirectory())
+		.map(dir => ({
+			input: `src/runtime/${dir}/index.ts`,
+			output: [
+				{
+					file: `${dir}/index.mjs`,
+					format: 'esm',
+					paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}`
+				},
 				{
+					file: `${dir}/index.js`,
+					format: 'cjs',
+					paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}`
+				}
+			],
+			external,
+			plugins: [
+				ts_plugin,
+				dir === 'internal' && {
 					generateBundle(options, bundle) {
-					const mod = bundle['internal.mjs'];
+						const mod = bundle['index.mjs'];
 						if (mod) {
-						fs.writeFileSync('src/compile/internal-exports.ts', `// This file is automatically generated\nexport default new Set(${JSON.stringify(mod.exports)});`);
+							fs.writeFileSync('src/compiler/compile/internal-exports.ts', `// This file is automatically generated\nexport default new Set(${JSON.stringify(mod.exports)});`);
 						}
 					}
-			}]
+				}
-	},
+			]
+		})),
 
 	/* compiler.js */
 	{
-		input: 'src/compiler.ts',
+		input: 'src/compiler/index.ts',
 		plugins: [
 			replace({
 				__VERSION__: pkg.version
@@ -60,7 +82,7 @@ export default [
 				include: ['node_modules/**']
 			}),
 			json(),
-			tsPlugin
+			ts_plugin
 		],
 		output: {
 			file: 'compiler.js',
@@ -71,47 +93,5 @@ export default [
 		external: is_publish
 			? []
 			: id => id === 'acorn' || id === 'magic-string' || id.startsWith('css-tree')
-	},
-
-	/* motion.mjs */
-	{
-		input: `src/motion/index.ts`,
-		output: [
-			{
-				file: `motion.mjs`,
-				format: 'esm',
-				paths: id => id.startsWith('svelte/') && id.replace('svelte', '.')
-			},
-			{
-				file: `motion.js`,
-				format: 'cjs',
-				paths: id => id.startsWith('svelte/') && id.replace('svelte', '.')
-			}
-		],
-		plugins: [
-			tsPlugin
-		],
-		external: id => id.startsWith('svelte/')
-	},
-
-	// everything else
-	...['index', 'easing', 'transition', 'animate', 'store'].map(name => ({
-		input: `src/${name}.ts`,
-		output: [
-			{
-				file: `${name}.mjs`,
-				format: 'esm',
-				paths: id => id.startsWith('svelte/') && id.replace('svelte', '.')
-			},
-			{
-				file: `${name}.js`,
-				format: 'cjs',
-				paths: id => id.startsWith('svelte/') && id.replace('svelte', '.')
 	}
-		],
-		plugins: [
-			tsPlugin
-		],
-		external: id => id.startsWith('svelte/')
-	}))
 ];

scripts/create-stubs.js

@@ -0,0 +1,12 @@
+const fs = require('fs');
+
+fs.readdirSync('src/runtime')
+	.filter(dir => fs.statSync(`src/runtime/${dir}`).isDirectory())
+	.forEach(dir => {
+		fs.writeFileSync(`${dir}/package.json`, JSON.stringify({
+			main: './index.js',
+			module: './index.mjs'
+		}, null, '  '));
+
+		fs.writeFileSync(`${dir}/index.d.ts`, `export * from '../types/runtime/${dir}/index.d.ts';`);
+	});

site/content/docs/03-run-time.md

@@ -618,13 +618,13 @@ Slides an element in and out.
 
 ```html
 <script>
-	import { fly } from 'svelte/transition';
+	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 </script>
 
 {#if condition}
-	<div transition:fly="{{delay: 250, duration: 300, easing: quintOut }}">
+	<div transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
-		flies in and out
+		slides in and out
 	</div>
 {/if}
 ```

site/content/examples/06-lifecycle/02-update/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Eliza from 'elizanode';
+	import Eliza from 'elizabot';
 	import { beforeUpdate, afterUpdate } from 'svelte';
 
 	let div;

site/content/tutorial/07-lifecycle/03-update/app-a/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Eliza from 'elizanode';
+	import Eliza from 'elizabot';
 	import { beforeUpdate, afterUpdate } from 'svelte';
 
 	let div;

site/content/tutorial/07-lifecycle/03-update/app-b/App.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Eliza from 'elizanode';
+	import Eliza from 'elizabot';
 	import { beforeUpdate, afterUpdate } from 'svelte';
 
 	let div;

site/package-lock.json

@@ -1362,13 +1362,15 @@
       }
     },
     "@sveltejs/svelte-repl": {
-      "version": "0.0.11",
+      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-repl/-/svelte-repl-0.1.2.tgz",
-      "integrity": "sha512-F284f8qaUs1rp8akqWXcB6oovlaso7qmsUz1rqm80FwUKLffjYIWy2a1p6+Yo1kRy6Q+fW8kj21JLEqv7pjOwA==",
+      "integrity": "sha512-OHIj01ly4+/WwNb0zGqLSQL7POSs2BPx47CzryVsbu0omVDe7olYTJnCYV4ePUENnlL5JzZihzvlvxmVGP6knw==",
       "dev": true,
       "requires": {
         "codemirror": "^5.45.0",
-        "sourcemap-codec": "^1.4.4"
+        "estree-walker": "^0.6.0",
+        "sourcemap-codec": "^1.4.4",
+        "yootils": "0.0.15"
       }
     },
     "@types/estree": {
@@ -1799,9 +1801,9 @@
       "dev": true
     },
     "codemirror": {
-      "version": "5.46.0",
+      "version": "5.47.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.46.0.tgz",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.47.0.tgz",
-      "integrity": "sha512-3QpMge0vg4QEhHW3hBAtCipJEWjTJrqLLXdIaWptJOblf1vHFeXLNtFhPai/uX2lnFCehWNk4yOdaMR853Z02w==",
+      "integrity": "sha512-kV49Fr+NGFHFc/Imsx6g180hSlkGhuHxTSDDmDHOuyln0MQYFLixDY4+bFkBVeCEiepYfDimAF/e++9jPJk4QA==",
       "dev": true
     },
     "collection-visit": {

site/package.json

@@ -3,9 +3,10 @@
   "version": "1.0.0",
   "description": "Docs and examples for Svelte",
   "scripts": {
-    "dev": "sapper dev",
+    "dev": "npm run copy-workers && sapper dev",
+    "copy-workers": "rm -rf static/workers && cp -r node_modules/@sveltejs/svelte-repl/workers static",
     "migrate": "node-pg-migrate -r dotenv/config",
-    "sapper": "sapper build --legacy",
+    "sapper": "npm run copy-workers && sapper build --legacy",
     "update_shimport": "cp node_modules/shimport/index.js __sapper__/build/client/shimport@0.0.14.js",
     "update": "node scripts/update_template.js && node scripts/get-contributors.js",
     "start": "node __sapper__/build",
@@ -38,7 +39,7 @@
     "@babel/runtime": "^7.4.4",
     "@sindresorhus/slugify": "^0.9.1",
     "@sveltejs/site-kit": "^1.0.4",
-    "@sveltejs/svelte-repl": "0.0.11",
+    "@sveltejs/svelte-repl": "^0.1.2",
     "degit": "^2.1.3",
     "dotenv": "^8.0.0",
     "eslint-plugin-svelte3": "^1.0.0",

site/src/components/Repl/ReplWidget.svelte

@@ -116,6 +116,7 @@
 		{#if process.browser}
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				fixed={mobile}
 				{svelteUrl}
 				{rollupUrl}

site/src/routes/examples/index.svelte

@@ -39,6 +39,10 @@
 	let isLoading = false;
 	const cache = {};
 
+	function showExampleCodeOnChange() {
+		offset = 1;
+	}
+
 	$: title = title_by_slug[active_slug] || '';
 	$: first_slug = sections[0].examples[0].slug;
 	$: mobile = width < 768; // note: same as per media query below
@@ -46,7 +50,7 @@
 	$: if (repl && active_slug) {
 		if (active_slug in cache) {
 			repl.set({ components: cache[active_slug] });
-			offset = 1;
+			showExampleCodeOnChange();
 		} else {
 			isLoading = true;
 			fetch(`examples/${active_slug}.json`)
@@ -59,7 +63,7 @@
 				.then(components => {
 					cache[active_slug] = components;
 					repl.set({components});
-					offset = 1;
+					showExampleCodeOnChange();
 					isLoading = false;
 				})
 				.catch(() => {
@@ -102,6 +106,7 @@
 		<div class="repl-container" class:loading={isLoading}>
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				{svelteUrl}
 				{rollupUrl}
 				orientation={replOrientation}

site/src/routes/repl/[id]/index.svelte

@@ -206,6 +206,7 @@
 		<div class="viewport" class:offset={checked}>
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				{svelteUrl}
 				{rollupUrl}
 				{relaxed}

site/src/routes/tutorial/[slug]/index.svelte

@@ -302,6 +302,7 @@
 		<div class="tutorial-repl">
 			<Repl
 				bind:this={repl}
+				workersUrl="workers"
 				{svelteUrl}
 				{rollupUrl}
 				orientation={mobile ? 'columns' : 'rows'}

site/src/server.js

@@ -7,6 +7,7 @@ const { PORT=3000 } = process.env;
 API()
 	.use(
 		sirv('static', {
+			dev: process.env.NODE_ENV === 'development',
 			setHeaders(res) {
 				res.setHeader('Access-Control-Allow-Origin', '*');
 				res.hasHeader('Cache-Control') || res.setHeader('Cache-Control', 'max-age=600'); // 10min default

src/compiler/compile/Component.ts

@@ -789,6 +789,10 @@ export default class Component {
 			return `${name.slice(1)}.set(${name})`
 		}
 
+		if (variable && !variable.referenced && !variable.is_reactive_dependency && !variable.export_name && !name.startsWith('$$')) {
+			return value || name;
+		}
+
 		if (value) {
 			return `$$invalidate('${name}', ${value})`;
 		}
@@ -1120,8 +1124,9 @@ export default class Component {
 							if (!assignee_nodes.has(identifier)) {
 								const { name } = identifier;
 								const owner = scope.find_owner(name);
-								const component_var = component.var_lookup.get(name);
+								const variable = component.var_lookup.get(name);
-								const is_writable_or_mutated = component_var && (component_var.writable || component_var.mutated);
+								if (variable) variable.is_reactive_dependency = true;
+								const is_writable_or_mutated = variable && (variable.writable || variable.mutated);
 								if (
 									(!owner || owner === component.instance_scope) &&
 									(name[0] === '$' || is_writable_or_mutated)

src/compiler/compile/index.ts

@@ -1,4 +1,4 @@
-import { assign } from '../internal/index';
+import { assign } from '../../runtime/internal/index';
 import Stats from '../Stats';
 import parse from '../parse/index';
 import render_dom from './render-dom/index';

src/compiler/compile/nodes/Binding.ts

@@ -3,6 +3,15 @@ import get_object from '../utils/get_object';
 import Expression from './shared/Expression';
 import Component from '../Component';
 import TemplateScope from './shared/TemplateScope';
+import {dimensions} from "../../utils/patterns";
+
+// TODO this should live in a specific binding
+const read_only_media_attributes = new Set([
+	'duration',
+	'buffered',
+	'seekable',
+	'played'
+]);
 
 export default class Binding extends Node {
 	type: 'Binding';
@@ -11,6 +20,7 @@ export default class Binding extends Node {
 	is_contextual: boolean;
 	obj: string;
 	prop: string;
+	is_readonly: boolean;
 
 	constructor(component: Component, parent, scope: TemplateScope, info) {
 		super(component, parent, scope, info);
@@ -64,5 +74,17 @@ export default class Binding extends Node {
 
 		this.obj = obj;
 		this.prop = prop;
+
+		const type = parent.get_static_attribute_value('type');
+
+		this.is_readonly = (
+			dimensions.test(this.name) ||
+			(parent.is_media_node && parent.is_media_node() && read_only_media_attributes.has(this.name)) ||
+			(parent.name === 'input' && type === 'file') // TODO others?
+		);
+	}
+
+	is_readonly_media_attribute() {
+		return read_only_media_attributes.has(this.name);
 	}
 }

src/compiler/compile/nodes/shared/AbstractBlock.ts

@@ -1,5 +1,5 @@
 import Block from '../../render-dom/Block';
-import Component from './../../Component';
+import Component from '../../Component';
 import Node from './Node';
 import { INode } from '../interfaces';
 

src/compiler/compile/nodes/shared/Node.ts

@@ -1,5 +1,5 @@
-import Attribute from './../Attribute';
+import Attribute from '../Attribute';
-import Component from './../../Component';
+import Component from '../../Component';
 import { INode } from '../interfaces';
 import Text from '../Text';
 
@@ -47,7 +47,7 @@ export default class Node {
 	}
 
 	get_static_attribute_value(name: string) {
-		const attribute = this.attributes.find(
+		const attribute = this.attributes && this.attributes.find(
 			(attr: Attribute) => attr.type === 'Attribute' && attr.name.toLowerCase() === name
 		);
 

src/compiler/compile/render-dom/Block.ts

@@ -164,7 +164,7 @@ export default class Block {
 
 		if (parent_node) {
 			this.builders.mount.add_line(`@append(${parent_node}, ${name});`);
-			if (parent_node === 'document.head') this.builders.destroy.add_line(`@detach(${name});`);
+			if (parent_node === 'document.head' && !no_detach) this.builders.destroy.add_line(`@detach(${name});`);
 		} else {
 			this.builders.mount.add_line(`@insert(#target, ${name}, anchor);`);
 			if (!no_detach) this.builders.destroy.add_conditional('detaching', `@detach(${name});`);

src/compiler/compile/render-dom/index.ts

@@ -203,8 +203,10 @@ export default function dom(
 							if (variable && (variable.hoistable || variable.global || variable.module)) return;
 
 							if (single && !(variable.subscribable && variable.reassigned)) {
+								if (variable.referenced || variable.is_reactive_dependency || variable.export_name) {
 									code.prependRight(node.start, `$$invalidate('${name}', `);
 									code.appendLeft(node.end, `)`);
+								}
 							} else {
 								pending_assignments.add(name);
 							}
@@ -395,11 +397,11 @@ export default function dom(
 		});
 
 		let unknown_props_check;
-		if (component.compile_options.dev && writable_props.length) {
+		if (component.compile_options.dev && !component.var_lookup.has('$$props') && writable_props.length) {
 			unknown_props_check = deindent`
 				const writable_props = [${writable_props.map(prop => `'${prop.export_name}'`).join(', ')}];
 				Object.keys($$props).forEach(key => {
-					if (!writable_props.includes(key)) console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`);
+					if (!writable_props.includes(key) && !key.startsWith('$$')) console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`);
 				});
 			`;
 		}

src/compiler/compile/render-dom/wrappers/Element/Binding.ts

@@ -1,5 +1,5 @@
 import Binding from '../../../nodes/Binding';
-import ElementWrapper from '.';
+import ElementWrapper from '../Element';
 import { dimensions } from '../../../../utils/patterns';
 import get_object from '../../../utils/get_object';
 import Block from '../../Block';
@@ -9,14 +9,6 @@ import flatten_reference from '../../../utils/flatten_reference';
 import EachBlock from '../../../nodes/EachBlock';
 import { Node as INode } from '../../../../interfaces';
 
-// TODO this should live in a specific binding
-const read_only_media_attributes = new Set([
-	'duration',
-	'buffered',
-	'seekable',
-	'played'
-]);
-
 function get_tail(node: INode) {
 	const end = node.end;
 	while (node.type === 'MemberExpression') node = node.object;
@@ -74,13 +66,7 @@ export default class BindingWrapper {
 
 		this.snippet = this.node.expression.render(block);
 
-		const type = parent.node.get_static_attribute_value('type');
+		this.is_readonly = this.node.is_readonly;
-
-		this.is_readonly = (
-			dimensions.test(this.node.name) ||
-			(parent.node.is_media_node() && read_only_media_attributes.has(this.node.name)) ||
-			(parent.node.name === 'input' && type === 'file') // TODO others?
-		);
 
 		this.needs_lock = this.node.name === 'currentTime'; // TODO others?
 	}
@@ -101,7 +87,7 @@ export default class BindingWrapper {
 	}
 
 	is_readonly_media_attribute() {
-		return read_only_media_attributes.has(this.node.name);
+		return this.node.is_readonly_media_attribute()
 	}
 
 	render(block: Block, lock: string) {

src/compiler/compile/render-dom/wrappers/Element/StyleAttribute.ts

@@ -1,7 +1,7 @@
 import Attribute from '../../../nodes/Attribute';
 import Block from '../../Block';
 import AttributeWrapper from './Attribute';
-import ElementWrapper from '.';
+import ElementWrapper from '../Element';
 import { stringify } from '../../../utils/stringify';
 import add_to_set from '../../../utils/add_to_set';
 import Expression from '../../../nodes/shared/Expression';

src/compiler/compile/render-dom/wrappers/Head.ts

@@ -30,6 +30,6 @@ export default class HeadWrapper extends Wrapper {
 	}
 
 	render(block: Block, parent_node: string, parent_nodes: string) {
-		this.fragment.render(block, 'document.head', null);
+		this.fragment.render(block, 'document.head', 'nodes');
 	}
 }

src/compiler/compile/render-dom/wrappers/IfBlock.ts

@@ -154,16 +154,18 @@ export default class IfBlockWrapper extends Wrapper {
 
 		const vars = { name, anchor, if_name, has_else, has_transitions };
 
+		const detaching = (parent_node && parent_node !== 'document.head') ? '' : 'detaching';
+
 		if (this.node.else) {
 			if (has_outros) {
-				this.render_compound_with_outros(block, parent_node, parent_nodes, dynamic, vars);
+				this.render_compound_with_outros(block, parent_node, parent_nodes, dynamic, vars, detaching);
 
 				block.builders.outro.add_line(`if (${name}) ${name}.o();`);
 			} else {
-				this.render_compound(block, parent_node, parent_nodes, dynamic, vars);
+				this.render_compound(block, parent_node, parent_nodes, dynamic, vars, detaching);
 			}
 		} else {
-			this.render_simple(block, parent_node, parent_nodes, dynamic, vars);
+			this.render_simple(block, parent_node, parent_nodes, dynamic, vars, detaching);
 
 			if (has_outros) {
 				block.builders.outro.add_line(`if (${name}) ${name}.o();`);
@@ -201,7 +203,8 @@ export default class IfBlockWrapper extends Wrapper {
 		parent_node: string,
 		parent_nodes: string,
 		dynamic,
-		{ name, anchor, has_else, if_name, has_transitions }
+		{ name, anchor, has_else, if_name, has_transitions },
+		detaching
 	) {
 		const select_block_type = this.renderer.component.get_unique_name(`select_block_type`);
 		const current_block_type = block.get_unique_name(`current_block_type`);
@@ -254,7 +257,7 @@ export default class IfBlockWrapper extends Wrapper {
 			`);
 		}
 
-		block.builders.destroy.add_line(`${if_name}${name}.d(${parent_node ? '' : 'detaching'});`);
+		block.builders.destroy.add_line(`${if_name}${name}.d(${detaching});`);
 	}
 
 	// if any of the siblings have outros, we need to keep references to the blocks
@@ -264,7 +267,8 @@ export default class IfBlockWrapper extends Wrapper {
 		parent_node: string,
 		parent_nodes: string,
 		dynamic,
-		{ name, anchor, has_else, has_transitions }
+		{ name, anchor, has_else, has_transitions },
+		detaching
 	) {
 		const select_block_type = this.renderer.component.get_unique_name(`select_block_type`);
 		const current_block_type_index = block.get_unique_name(`current_block_type_index`);
@@ -375,7 +379,7 @@ export default class IfBlockWrapper extends Wrapper {
 		}
 
 		block.builders.destroy.add_line(deindent`
-			${if_current_block_type_index}${if_blocks}[${current_block_type_index}].d(${parent_node ? '' : 'detaching'});
+			${if_current_block_type_index}${if_blocks}[${current_block_type_index}].d(${detaching});
 		`);
 	}
 
@@ -384,7 +388,8 @@ export default class IfBlockWrapper extends Wrapper {
 		parent_node: string,
 		parent_nodes: string,
 		dynamic,
-		{ name, anchor, if_name, has_transitions }
+		{ name, anchor, if_name, has_transitions },
+		detaching
 	) {
 		const branch = this.branches[0];
 
@@ -450,6 +455,6 @@ export default class IfBlockWrapper extends Wrapper {
 			}
 		`);
 
-		block.builders.destroy.add_line(`${if_name}${name}.d(${parent_node ? '' : 'detaching'});`);
+		block.builders.destroy.add_line(`${if_name}${name}.d(${detaching});`);
 	}
 }

src/compiler/compile/render-dom/wrappers/RawMustacheTag.ts

@@ -22,9 +22,18 @@ export default class RawMustacheTagWrapper extends Tag {
 	render(block: Block, parent_node: string, parent_nodes: string) {
 		const name = this.var;
 
+		const in_head = parent_node === 'document.head';
+		const needs_anchors = !parent_node || in_head;
+
+		// if in head always needs anchors
+		if (in_head) {
+			this.prev = null;
+			this.next = null;
+		}
+
 		// TODO use is_dom_node instead of type === 'Element'?
-		const needs_anchor_before = this.prev ? this.prev.node.type !== 'Element' : !parent_node;
+		const needs_anchor_before = this.prev ? this.prev.node.type !== 'Element' : needs_anchors;
-		const needs_anchor_after = this.next ? this.next.node.type !== 'Element' : !parent_node;
+		const needs_anchor_after = this.next ? this.next.node.type !== 'Element' : needs_anchors;
 
 		const anchor_before = needs_anchor_before
 			? block.get_unique_name(`${name}_before`)
@@ -90,7 +99,7 @@ export default class RawMustacheTagWrapper extends Tag {
 
 		block.builders.mount.add_line(insert(init));
 
-		if (!parent_node) {
+		if (needs_anchors) {
 			block.builders.destroy.add_conditional('detaching', needs_anchor_before
 				? `${detach}\n@detach(${anchor_before});`
 				: detach);