revert remove contextual overflow (#4102)

src/compiler/compile/render_dom/Block.ts

@@ -1,7 +1,7 @@
 import Renderer from './Renderer';
 import Wrapper from './wrappers/shared/Wrapper';
 import { b, x } from 'code-red';
-import { Node, Identifier } from 'estree';
+import { Node, Identifier, ArrayPattern } from 'estree';
 import { is_head } from './wrappers/shared/is_head';
 
 export interface BlockOptions {
@@ -301,7 +301,12 @@ export default class Block {
 			} else {
 				const ctx = this.maintain_context ? x`#new_ctx` : x`#ctx`;
 
-				properties.update = x`function #update(${ctx}, #dirty) {
+				let dirty: Identifier | ArrayPattern = { type: 'Identifier', name: '#dirty' };
+				if (!this.renderer.context_overflow && !this.parent) {
+					dirty = { type: 'ArrayPattern', elements: [dirty] };
+				}
+
+				properties.update = x`function #update(${ctx}, ${dirty}) {
 					${this.maintain_context && b`#ctx = ${ctx};`}
 					${this.chunks.update}
 				}`;

src/compiler/compile/render_dom/Renderer.ts

@@ -26,6 +26,7 @@ export default class Renderer {
 
 	context: ContextMember[] = [];
 	context_lookup: Map<string, ContextMember> = new Map();
+	context_overflow: boolean;
 	blocks: Array<Block | Node | Node[]> = [];
 	readonly: Set<string> = new Set();
 	meta_bindings: Array<Node | Node[]> = []; // initial values for e.g. window.innerWidth, if there's a <svelte:window> meta tag
@@ -96,6 +97,8 @@ export default class Renderer {
 
 		this.fragment.render(this.block, null, x`#nodes` as Identifier);
 
+		this.context_overflow = this.context.length > 31;
+
 		this.context.forEach(member => {
 			const { variable } = member;
 			if (variable) {
@@ -237,11 +240,15 @@ export default class Renderer {
 					return x`${dirty} & /*${names.join(', ')}*/ 0` as BinaryExpression;
 				}
 
-				return bitmask
-					.map((b, i) => ({ b, i }))
-					.filter(({ b }) => b)
-					.map(({ b, i }) => x`${dirty}[${i}] & /*${b.names.join(', ')}*/ ${b.n}`)
-					.reduce((lhs, rhs) => x`${lhs} | ${rhs}`);
+				if (renderer.context_overflow) {
+					return bitmask
+						.map((b, i) => ({ b, i }))
+						.filter(({ b }) => b)
+						.map(({ b, i }) => x`${dirty}[${i}] & /*${b.names.join(', ')}*/ ${b.n}`)
+						.reduce((lhs, rhs) => x`${lhs} | ${rhs}`);
+				}
+
+				return x`${dirty} & /*${names.join(', ')}*/ ${bitmask[0].n}` as BinaryExpression;
 			}
 		} as any;
 	}

src/compiler/compile/render_dom/index.ts

@@ -429,7 +429,7 @@ export default function dom(
 	}` as ObjectExpression;
 
 	let dirty;
-	if (renderer.context.length > 31) {
+	if (renderer.context_overflow) {
 		dirty = x`[]`;
 		for (let i = 0; i < renderer.context.length; i += 31) {
 			dirty.elements.push(x`-1`);

src/compiler/compile/render_dom/wrappers/shared/get_slot_definition.ts

@@ -2,6 +2,7 @@ import Let from '../../../nodes/Let';
 import { x, p } from 'code-red';
 import Block from '../../Block';
 import TemplateScope from '../../../nodes/shared/TemplateScope';
+import { BinaryExpression } from 'estree';
 
 export function get_slot_definition(block: Block, scope: TemplateScope, lets: Let[]) {
 	if (lets.length === 0) return { block, scope };
@@ -35,30 +36,39 @@ export function get_slot_definition(block: Block, scope: TemplateScope, lets: Le
 	const changes = {
 		type: 'ParenthesizedExpression',
 		get expression() {
-			const grouped = [];
+			if (block.renderer.context_overflow) {
+				const grouped = [];
 
-			Array.from(names).forEach(name => {
-				const i = context_lookup.get(name).index.value as number;
-				const g = Math.floor(i / 31);
+				Array.from(names).forEach(name => {
+					const i = context_lookup.get(name).index.value as number;
+					const g = Math.floor(i / 31);
 
-				if (!grouped[g]) grouped[g] = [];
-				grouped[g].push({ name, n: i % 31 });
-			});
+					if (!grouped[g]) grouped[g] = [];
+					grouped[g].push({ name, n: i % 31 });
+				});
 
-			const elements = [];
+				const elements = [];
 
-			for (let g = 0; g < grouped.length; g += 1) {
-				elements[g] = grouped[g]
-					? grouped[g]
-						.map(({ name, n }) => x`${name} ? ${1 << n} : 0`)
-						.reduce((lhs, rhs) => x`${lhs} | ${rhs}`)
-					: x`0`;
+				for (let g = 0; g < grouped.length; g += 1) {
+					elements[g] = grouped[g]
+						? grouped[g]
+							.map(({ name, n }) => x`${name} ? ${1 << n} : 0`)
+							.reduce((lhs, rhs) => x`${lhs} | ${rhs}`)
+						: x`0`;
+				}
+
+				return {
+					type: 'ArrayExpression',
+					elements
+				};
 			}
 
-			return {
-				type: 'ArrayExpression',
-				elements
-			};
+			return Array.from(names)
+				.map(name => {
+					const i = context_lookup.get(name).index.value as number;
+					return x`${name} ? ${1 << i} : 0`;
+				})
+				.reduce((lhs, rhs) => x`${lhs} | ${rhs}`) as BinaryExpression;
 		}
 	};
 

src/runtime/internal/utils.ts

@@ -80,16 +80,17 @@ export function get_slot_changes(definition, $$scope, dirty, fn) {
 	if (definition[2] && fn) {
 		const lets = definition[2](fn(dirty));
 
-		if ($$scope.dirty) {
+		if (typeof $$scope.dirty === 'object') {
 			const merged = [];
 			const len = Math.max($$scope.dirty.length, lets.length);
 			for (let i = 0; i < len; i += 1) {
 				merged[i] = $$scope.dirty[i] | lets[i];
 			}
+
 			return merged;
 		}
 
-		return lets;
+		return $$scope.dirty | lets;
 	}
 
 	return $$scope.dirty;

test/js/samples/action-custom-event-handler/expected.js

@@ -23,8 +23,8 @@ function create_fragment(ctx) {
 			insert(target, button, anchor);
 			foo_action = foo.call(null, button, /*foo_function*/ ctx[1]) || ({});
 		},
-		p(ctx, dirty) {
-			if (is_function(foo_action.update) && dirty[0] & /*bar*/ 1) foo_action.update.call(null, /*foo_function*/ ctx[1]);
+		p(ctx, [dirty]) {
+			if (is_function(foo_action.update) && dirty & /*bar*/ 1) foo_action.update.call(null, /*foo_function*/ ctx[1]);
 		},
 		i: noop,
 		o: noop,

test/js/samples/bind-open/expected.js

@@ -27,8 +27,8 @@ function create_fragment(ctx) {
 			insert(target, details, anchor);
 			details.open = /*open*/ ctx[0];
 		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*open*/ 1) {
+		p(ctx, [dirty]) {
+			if (dirty & /*open*/ 1) {
 				details.open = /*open*/ ctx[0];
 			}
 		},

test/js/samples/capture-inject-dev-only/expected.js

@@ -37,10 +37,10 @@ function create_fragment(ctx) {
 			insert(target, input, anchor);
 			set_input_value(input, /*foo*/ ctx[0]);
 		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*foo*/ 1) set_data(t0, /*foo*/ ctx[0]);
+		p(ctx, [dirty]) {
+			if (dirty & /*foo*/ 1) set_data(t0, /*foo*/ ctx[0]);
 
-			if (dirty[0] & /*foo*/ 1 && input.value !== /*foo*/ ctx[0]) {
+			if (dirty & /*foo*/ 1 && input.value !== /*foo*/ ctx[0]) {
 				set_input_value(input, /*foo*/ ctx[0]);
 			}
 		},

test/js/samples/collapses-text-around-comments/expected.js

@@ -34,8 +34,8 @@ function create_fragment(ctx) {
 			insert(target, p, anchor);
 			append(p, t);
 		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*foo*/ 1) set_data(t, /*foo*/ ctx[0]);
+		p(ctx, [dirty]) {
+			if (dirty & /*foo*/ 1) set_data(t, /*foo*/ ctx[0]);
 		},
 		i: noop,
 		o: noop,

test/js/samples/component-static-var/expected.js

@@ -46,12 +46,12 @@ function create_fragment(ctx) {
 			set_input_value(input, /*z*/ ctx[0]);
 			current = true;
 		},
-		p(ctx, dirty) {
+		p(ctx, [dirty]) {
 			const bar_changes = {};
-			if (dirty[0] & /*z*/ 1) bar_changes.x = /*z*/ ctx[0];
+			if (dirty & /*z*/ 1) bar_changes.x = /*z*/ ctx[0];
 			bar.$set(bar_changes);
 
-			if (dirty[0] & /*z*/ 1 && input.value !== /*z*/ ctx[0]) {
+			if (dirty & /*z*/ 1 && input.value !== /*z*/ ctx[0]) {
 				set_input_value(input, /*z*/ ctx[0]);
 			}
 		},

test/js/samples/component-store-access-invalidate/expected.js

@@ -28,8 +28,8 @@ function create_fragment(ctx) {
 			insert(target, h1, anchor);
 			append(h1, t);
 		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*$foo*/ 1) set_data(t, /*$foo*/ ctx[0]);
+		p(ctx, [dirty]) {
+			if (dirty & /*$foo*/ 1) set_data(t, /*$foo*/ ctx[0]);
 		},
 		i: noop,
 		o: noop,

test/js/samples/component-store-reassign-invalidate/expected.js

@@ -39,8 +39,8 @@ function create_fragment(ctx) {
 			insert(target, t1, anchor);
 			insert(target, button, anchor);
 		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*$foo*/ 2) set_data(t0, /*$foo*/ ctx[1]);
+		p(ctx, [dirty]) {
+			if (dirty & /*$foo*/ 2) set_data(t0, /*$foo*/ ctx[1]);
 		},
 		i: noop,
 		o: noop,

test/js/samples/data-attribute/expected.js

@@ -29,8 +29,8 @@ function create_fragment(ctx) {
 			insert(target, t, anchor);
 			insert(target, div1, anchor);
 		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*bar*/ 1) {
+		p(ctx, [dirty]) {
+			if (dirty & /*bar*/ 1) {
 				attr(div1, "data-foo", /*bar*/ ctx[0]);
 			}
 		},

test/js/samples/debug-empty/expected.js

@@ -44,8 +44,8 @@ function create_fragment(ctx) {
 			append_dev(h1, t2);
 			insert_dev(target, t3, anchor);
 		},
-		p: function update(ctx, dirty) {
-			if (dirty[0] & /*name*/ 1) set_data_dev(t1, /*name*/ ctx[0]);
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*name*/ 1) set_data_dev(t1, /*name*/ ctx[0]);
 			debugger;
 		},
 		i: noop,

test/js/samples/debug-foo-bar-baz-things/expected.js

@@ -54,9 +54,9 @@ function create_each_block(ctx) {
 			insert_dev(target, t1, anchor);
 		},
 		p: function update(ctx, dirty) {
-			if (dirty[0] & /*things*/ 1 && t0_value !== (t0_value = /*thing*/ ctx[4].name + "")) set_data_dev(t0, t0_value);
+			if (dirty & /*things*/ 1 && t0_value !== (t0_value = /*thing*/ ctx[4].name + "")) set_data_dev(t0, t0_value);
 
-			if (dirty[0] & /*foo, bar, baz, things*/ 15) {
+			if (dirty & /*foo, bar, baz, things*/ 15) {
 				const foo = /*foo*/ ctx[1];
 				const bar = /*bar*/ ctx[2];
 				const baz = /*baz*/ ctx[3];
@@ -119,8 +119,8 @@ function create_fragment(ctx) {
 			append_dev(p, t1);
 			append_dev(p, t2);
 		},
-		p: function update(ctx, dirty) {
-			if (dirty[0] & /*things*/ 1) {
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*things*/ 1) {
 				each_value = /*things*/ ctx[0];
 				let i;
 
@@ -143,7 +143,7 @@ function create_fragment(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (dirty[0] & /*foo*/ 2) set_data_dev(t2, /*foo*/ ctx[1]);
+			if (dirty & /*foo*/ 2) set_data_dev(t2, /*foo*/ ctx[1]);
 		},
 		i: noop,
 		o: noop,

test/js/samples/debug-foo/expected.js

@@ -51,9 +51,9 @@ function create_each_block(ctx) {
 			insert_dev(target, t1, anchor);
 		},
 		p: function update(ctx, dirty) {
-			if (dirty[0] & /*things*/ 1 && t0_value !== (t0_value = /*thing*/ ctx[2].name + "")) set_data_dev(t0, t0_value);
+			if (dirty & /*things*/ 1 && t0_value !== (t0_value = /*thing*/ ctx[2].name + "")) set_data_dev(t0, t0_value);
 
-			if (dirty[0] & /*foo*/ 2) {
+			if (dirty & /*foo*/ 2) {
 				const foo = /*foo*/ ctx[1];
 				console.log({ foo });
 				debugger;
@@ -113,8 +113,8 @@ function create_fragment(ctx) {
 			append_dev(p, t1);
 			append_dev(p, t2);
 		},
-		p: function update(ctx, dirty) {
-			if (dirty[0] & /*things*/ 1) {
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*things*/ 1) {
 				each_value = /*things*/ ctx[0];
 				let i;
 
@@ -137,7 +137,7 @@ function create_fragment(ctx) {
 				each_blocks.length = each_value.length;
 			}
 
-			if (dirty[0] & /*foo*/ 2) set_data_dev(t2, /*foo*/ ctx[1]);
+			if (dirty & /*foo*/ 2) set_data_dev(t2, /*foo*/ ctx[1]);
 		},
 		i: noop,
 		o: noop,

test/js/samples/debug-hoisted/expected.js

@@ -23,8 +23,8 @@ function create_fragment(ctx) {
 			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
 		},
 		m: noop,
-		p: function update(ctx, dirty) {
-			if (dirty[0] & /*obj, kobzol*/ 3) {
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*obj, kobzol*/ 3) {
 				const obj = /*obj*/ ctx[0];
 				const kobzol = /*kobzol*/ ctx[1];
 				console.log({ obj, kobzol });

test/js/samples/debug-no-dependencies/expected.js

@@ -88,7 +88,7 @@ function create_fragment(ctx) {
 
 			insert_dev(target, each_1_anchor, anchor);
 		},
-		p: function update(ctx, dirty) {
+		p: function update(ctx, [dirty]) {
 			if (dirty & /*things*/ 0) {
 				each_value = things;
 				let i;

test/js/samples/deconflict-builtins/expected.js

@@ -36,7 +36,7 @@ function create_each_block(ctx) {
 			append(span, t);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*createElement*/ 1 && t_value !== (t_value = /*node*/ ctx[1] + "")) set_data(t, t_value);
+			if (dirty & /*createElement*/ 1 && t_value !== (t_value = /*node*/ ctx[1] + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(span);
@@ -68,8 +68,8 @@ function create_fragment(ctx) {
 
 			insert(target, each_1_anchor, anchor);
 		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*createElement*/ 1) {
+		p(ctx, [dirty]) {
+			if (dirty & /*createElement*/ 1) {
 				each_value = /*createElement*/ ctx[0];
 				let i;
 

test/js/samples/dev-warning-missing-data-computed/expected.js

@@ -41,9 +41,9 @@ function create_fragment(ctx) {
 			append_dev(p, t1);
 			append_dev(p, t2);
 		},
-		p: function update(ctx, dirty) {
-			if (dirty[0] & /*foo*/ 1 && t0_value !== (t0_value = Math.max(0, /*foo*/ ctx[0]) + "")) set_data_dev(t0, t0_value);
-			if (dirty[0] & /*bar*/ 2) set_data_dev(t2, /*bar*/ ctx[1]);
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*foo*/ 1 && t0_value !== (t0_value = Math.max(0, /*foo*/ ctx[0]) + "")) set_data_dev(t0, t0_value);
+			if (dirty & /*bar*/ 2) set_data_dev(t2, /*bar*/ ctx[1]);
 		},
 		i: noop,
 		o: noop,
@@ -86,7 +86,7 @@ function instance($$self, $$props, $$invalidate) {
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*foo*/ 1) {
+		if ($$self.$$.dirty & /*foo*/ 1) {
 			$: $$invalidate(1, bar = foo * 2);
 		}
 	};