Merge pull request #2877 from colincasey/feat/omit_readonly_ssr_bindings

Omits readonly attributes from SSR code

src/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/compile/nodes/shared/Node.ts

@@ -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/compile/render-dom/wrappers/Element/Binding.ts

@@ -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 = (
-			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.is_readonly = this.node.is_readonly;
 
 		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/compile/render-ssr/handlers/Element.ts

@@ -140,6 +140,10 @@ export default function(node: Element, renderer: Renderer, options: RenderOption
 	node.bindings.forEach(binding => {
 		const { name, expression } = binding;
 
+		if (binding.is_readonly) {
+			return;
+		}
+
 		if (name === 'group') {
 			// TODO server-render group bindings
 		} else {

test/server-side-rendering/samples/bindings-readonly/_expected.html

@@ -0,0 +1,4 @@
+<div></div>
+<audio></audio>
+<video></video>
+<input type="file">

test/server-side-rendering/samples/bindings-readonly/main.svelte

@@ -0,0 +1,44 @@
+<script>
+	export let clientWidth = 1;
+	export let clientHeight = 2;
+	export let offsetHeight = 3;
+	export let offsetWidth = 4;
+
+	export let audioDuration = 5;
+	export let audioBuffered = 6;
+	export let audioSeekable = 7;
+	export let audioPlayed = 8;
+
+	export let videoDuration = 9;
+	export let videoBuffered = 10;
+	export let videoSeekable = 11;
+	export let videoPlayed = 12;
+
+	export let value = '/some/file';
+</script>
+
+<div
+	bind:clientWidth
+	bind:clientHeight
+	bind:offsetWidth
+	bind:offsetHeight
+></div>
+
+<audio
+	bind:duration="{audioDuration}"
+	bind:buffered="{audioBuffered}"
+	bind:seekable="{audioSeekable}"
+	bind:played="{audioPlayed}"
+></audio>
+
+<video
+	bind:duration="{videoDuration}"
+	bind:buffered="{videoBuffered}"
+	bind:seekable="{videoSeekable}"
+	bind:played="{videoPlayed}"
+></video>
+
+<input
+  type="file"
+	bind:value
+/>