[WIP] Bitmask-based change tracking

.eslintrc.js

@@ -35,12 +35,7 @@ module.exports = {
 				argsIgnorePattern: '^_'
 			}
 		],
-		'@typescript-eslint/no-object-literal-type-assertion': [
-			'error',
-			{
-				allowAsParameter: true
-			}
-		],
+		'@typescript-eslint/no-object-literal-type-assertion': 'off',
 		'@typescript-eslint/no-unused-vars': 'off'
 	},
 	globals: {

package.json

@@ -64,7 +64,7 @@
     "acorn": "^7.1.0",
     "agadoo": "^1.1.0",
     "c8": "^5.0.1",
-    "code-red": "0.0.25",
+    "code-red": "0.0.26",
     "codecov": "^3.5.0",
     "css-tree": "1.0.0-alpha22",
     "eslint": "^6.3.0",

src/compiler/compile/Component.ts

@@ -209,7 +209,6 @@ export default class Component {
 			});
 
 			const subscribable_name = name.slice(1);
-			this.add_reference(subscribable_name);
 
 			const variable = this.var_lookup.get(subscribable_name);
 			if (variable) variable.subscribable = true;
@@ -889,50 +888,6 @@ export default class Component {
 		return null;
 	}
 
-	invalidate(name, value?) {
-		const variable = this.var_lookup.get(name);
-
-		if (variable && (variable.subscribable && (variable.reassigned || variable.export_name))) {
-			return x`${`$$subscribe_${name}`}($$invalidate('${name}', ${value || name}))`;
-		}
-
-		if (name[0] === '$' && name[1] !== '$') {
-			return x`${name.slice(1)}.set(${value || name})`;
-		}
-
-		if (
-			variable &&
-			!variable.referenced &&
-			!variable.is_reactive_dependency &&
-			!variable.export_name &&
-			!name.startsWith('$$')
-		) {
-			return value || name;
-		}
-
-		if (value) {
-			return x`$$invalidate('${name}', ${value})`;
-		}
-
-		// if this is a reactive declaration, invalidate dependencies recursively
-		const deps = new Set([name]);
-
-		deps.forEach(name => {
-			const reactive_declarations = this.reactive_declarations.filter(x =>
-				x.assignees.has(name)
-			);
-			reactive_declarations.forEach(declaration => {
-				declaration.dependencies.forEach(name => {
-					deps.add(name);
-				});
-			});
-		});
-
-		return Array.from(deps)
-			.map(n => x`$$invalidate('${n}', ${n})`)
-			.reduce((lhs, rhs) => x`${lhs}, ${rhs}}`);
-	}
-
 	rewrite_props(get_insert: (variable: Var) => Node[]) {
 		if (!this.ast.instance) return;
 
@@ -1054,6 +1009,10 @@ export default class Component {
 					if (!d.init) return false;
 					if (d.init.type !== 'Literal') return false;
 
+					// everything except const values can be changed by e.g. svelte devtools
+					// which means we can't hoist it
+					if (node.kind !== 'const' && this.compile_options.dev) return false;
+
 					const { name } = d.id as Identifier;
 
 					const v = this.var_lookup.get(name);
@@ -1325,25 +1284,6 @@ export default class Component {
 		});
 	}
 
-	qualify(name) {
-		if (name === `$$props`) return x`#ctx.$$props`;
-
-		let [head, ...tail] = name.split('.');
-
-		const variable = this.var_lookup.get(head);
-
-		if (variable) {
-			this.add_reference(name); // TODO we can probably remove most other occurrences of this
-
-			if (!variable.hoistable) {
-				tail.unshift(head);
-				head = '#ctx';
-			}
-		}
-
-		return [head, ...tail].reduce((lhs, rhs) => x`${lhs}.${rhs}`);
-	}
-
 	warn_if_undefined(name: string, node, template_scope: TemplateScope) {
 		if (name[0] === '$') {
 			if (name === '$' || name[1] === '$' && name !== '$$props') {

src/compiler/compile/nodes/Action.ts

@@ -14,7 +14,7 @@ export default class Action extends Node {
 		component.warn_if_undefined(info.name, info, scope);
 
 		this.name = info.name;
-		component.qualify(info.name);
+		component.add_reference(info.name.split('.')[0]);
 
 		this.expression = info.expression
 			? new Expression(component, this, scope, info.expression)

src/compiler/compile/nodes/Animation.ts

@@ -13,7 +13,7 @@ export default class Animation extends Node {
 		component.warn_if_undefined(info.name, info, scope);
 
 		this.name = info.name;
-		component.qualify(info.name);
+		component.add_reference(info.name.split('.')[0]);
 
 		if (parent.animation) {
 			component.error(this, {

src/compiler/compile/nodes/Transition.ts

@@ -15,7 +15,7 @@ export default class Transition extends Node {
 		component.warn_if_undefined(info.name, info, scope);
 
 		this.name = info.name;
-		component.qualify(info.name);
+		component.add_reference(info.name.split('.')[0]);
 
 		this.directive = info.intro && info.outro ? 'transition' : info.intro ? 'in' : 'out';
 		this.is_local = info.modifiers.includes('local');

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

@@ -9,9 +9,9 @@ import TemplateScope from './TemplateScope';
 import get_object from '../../utils/get_object';
 import Block from '../../render_dom/Block';
 import is_dynamic from '../../render_dom/wrappers/shared/is_dynamic';
-import { x, b, p } from 'code-red';
-import { invalidate } from '../../utils/invalidate';
-import { Node, FunctionExpression } from 'estree';
+import { b } from 'code-red';
+import { invalidate } from '../../render_dom/invalidate';
+import { Node, FunctionExpression, Identifier } from 'estree';
 import { TemplateNode } from '../../../interfaces';
 
 type Owner = Wrapper | TemplateNode;
@@ -213,7 +213,8 @@ export default class Expression {
 							component.add_reference(name); // TODO is this redundant/misplaced?
 						}
 					} else if (is_contextual(component, template_scope, name)) {
-						this.replace(x`#ctx.${node}`);
+						const reference = block.renderer.reference(node);
+						this.replace(reference);
 					}
 
 					this.skip();
@@ -260,42 +261,38 @@ export default class Expression {
 						// function can be hoisted inside the component init
 						component.partly_hoisted.push(declaration);
 
-						this.replace(x`#ctx.${id}` as any);
-
-						component.add_var({
-							name: id.name,
-							internal: true,
-							referenced: true
-						});
+						block.renderer.add_to_context(id.name);
+						this.replace(block.renderer.reference(id));
 					}
 
 					else {
 						// we need a combo block/init recipe
-						(node as FunctionExpression).params.unshift({
-							type: 'ObjectPattern',
-							properties: Array.from(contextual_dependencies).map(name => p`${name}` as any)
-						});
+						const deps = Array.from(contextual_dependencies);
+
+						(node as FunctionExpression).params = [
+							...deps.map(name => ({ type: 'Identifier', name } as Identifier)),
+							...(node as FunctionExpression).params
+						];
+
+						const context_args = deps.map(name => block.renderer.reference(name));
 
 						component.partly_hoisted.push(declaration);
 
-						this.replace(id as any);
+						block.renderer.add_to_context(id.name);
+						const callee = block.renderer.reference(id);
 
-						component.add_var({
-							name: id.name,
-							internal: true,
-							referenced: true
-						});
+						this.replace(id as any);
 
 						if ((node as FunctionExpression).params.length > 0) {
 							declarations.push(b`
 								function ${id}(...args) {
-									return #ctx.${id}(#ctx, ...args);
+									return ${callee}(${context_args}, ...args);
 								}
 							`);
 						} else {
 							declarations.push(b`
 								function ${id}() {
-									return #ctx.${id}(#ctx);
+									return ${callee}(${context_args});
 								}
 							`);
 						}
@@ -329,7 +326,7 @@ export default class Expression {
 						}
 					});
 
-					this.replace(invalidate(component, scope, node, traced));
+					this.replace(invalidate(block.renderer, scope, node, traced));
 				}
 			}
 		});

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 {
@@ -34,7 +34,7 @@ export default class Block {
 	key: Identifier;
 	first: Identifier;
 
-	dependencies: Set<string>;
+	dependencies: Set<string> = new Set();
 
 	bindings: Map<string, {
 		object: Identifier;
@@ -90,8 +90,6 @@ export default class Block {
 		this.key = options.key;
 		this.first = null;
 
-		this.dependencies = new Set();
-
 		this.bindings = options.bindings;
 
 		this.chunks = {
@@ -302,7 +300,13 @@ export default class Block {
 				properties.update = noop;
 			} else {
 				const ctx = this.maintain_context ? x`#new_ctx` : x`#ctx`;
-				properties.update = x`function #update(#changed, ${ctx}) {
+
+				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}
 				}`;