svelte 3.30.0 → 3.31.2

package/compiler.js

@@ -15924,6 +15924,7 @@
 	class Block$1 {
 	    constructor(options) {
 	        this.dependencies = new Set();
+	        this.binding_group_initialised = new Set();
 	        this.event_listeners = [];
 	        this.variables = new Map();
 	        this.has_update_method = false;
@@ -16998,8 +16999,9 @@
 	                ? '@outro_and_destroy_block'
 	                : '@destroy_block';
 	        if (this.dependencies.size) {
+	            this.block.maintain_context = true;
 	            this.updates.push(b `
-				const ${this.vars.each_block_value} = ${snippet};
+				${this.vars.each_block_value} = ${snippet};
 				${this.renderer.options.dev && b `@validate_each_argument(${this.vars.each_block_value});`}
 
 				${this.block.has_outros && b `@group_outros();`}
@@ -17749,10 +17751,18 @@
 	        }
 	    });
 	    if (binding.name === 'group') {
+	        const add_index_binding = (name) => {
+	            const each_block = parent.node.scope.get_owner(name);
+	            if (each_block.type === 'EachBlock') {
+	                each_block.has_index_binding = true;
+	                for (const dep of each_block.expression.contextual_dependencies) {
+	                    add_index_binding(dep);
+	                }
+	            }
+	        };
 	        // for `<input bind:group={} >`, we make sure that all the each blocks creates context with `index`
 	        for (const name of binding.expression.contextual_dependencies) {
-	            const each_block = parent.node.scope.get_owner(name);
-	            each_block.has_index_binding = true;
+	            add_index_binding(name);
 	        }
 	    }
 	}
@@ -17820,9 +17830,9 @@
 	        switch (this.node.name) {
 	            case 'group':
 	                {
-	                    const { binding_group, is_context, contexts, index } = get_binding_group(parent.renderer, this.node, block);
+	                    const { binding_group, is_context, contexts, index, keypath } = get_binding_group(parent.renderer, this.node, block);
 	                    block.renderer.add_to_context('$$binding_groups');
-	                    if (is_context) {
+	                    if (is_context && !block.binding_group_initialised.has(keypath)) {
 	                        if (contexts.length > 1) {
 	                            let binding_group = x `${block.renderer.reference('$$binding_groups')}[${index}]`;
 	                            for (const name of contexts.slice(0, -1)) {
@@ -17831,6 +17841,7 @@
 	                            }
 	                        }
 	                        block.chunks.init.push(b `${binding_group(true)} = [];`);
+	                        block.binding_group_initialised.add(keypath);
 	                    }
 	                    block.chunks.hydrate.push(b `${binding_group(true)}.push(${parent.var});`);
 	                    block.chunks.destroy.push(b `${binding_group(true)}.splice(${binding_group(true)}.indexOf(${parent.var}), 1);`);
@@ -17926,7 +17937,21 @@
 	    const { parts } = flatten_reference(value.raw_expression);
 	    let keypath = parts.join('.');
 	    const contexts = [];
+	    const contextual_dependencies = new Set();
+	    const { template_scope } = value.expression;
+	    const add_contextual_dependency = (dep) => {
+	        contextual_dependencies.add(dep);
+	        const owner = template_scope.get_owner(dep);
+	        if (owner.type === 'EachBlock') {
+	            for (const dep of owner.expression.contextual_dependencies) {
+	                add_contextual_dependency(dep);
+	            }
+	        }
+	    };
 	    for (const dep of value.expression.contextual_dependencies) {
+	        add_contextual_dependency(dep);
+	    }
+	    for (const dep of contextual_dependencies) {
 	        const context = block.bindings.get(dep);
 	        let key;
 	        let name;
@@ -17967,7 +17992,8 @@
 	            },
 	            is_context: contexts.length > 0,
 	            contexts,
-	            index
+	            index,
+	            keypath
 	        });
 	    }
 	    return renderer.binding_groups.get(keypath);
@@ -18038,11 +18064,30 @@
 	    return x `this.${name}`;
 	}
 
+	const reserved_keywords = new Set(['$$props', '$$restProps', '$$slots']);
+	function is_reserved_keyword(name) {
+	    return reserved_keywords.has(name);
+	}
+
+	function is_contextual(component, scope, name) {
+	    if (is_reserved_keyword(name))
+	        return true;
+	    // if it's a name below root scope, it's contextual
+	    if (!scope.is_top_level(name))
+	        return true;
+	    const variable = component.var_lookup.get(name);
+	    // hoistables, module declarations, and imports are non-contextual
+	    if (!variable || variable.hoistable)
+	        return false;
+	    // assume contextual
+	    return true;
+	}
+
 	function add_actions(block, target, actions) {
 	    actions.forEach(action => add_action(block, target, action));
 	}
 	function add_action(block, target, action) {
-	    const { expression } = action;
+	    const { expression, template_scope } = action;
 	    let snippet;
 	    let dependencies;
 	    if (expression) {
@@ -18052,9 +18097,12 @@
 	    const id = block.get_unique_name(`${action.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_action`);
 	    block.add_variable(id);
 	    const [obj, ...properties] = action.name.split('.');
-	    const fn = block.renderer.reference(obj);
+	    const fn = is_contextual(action.component, template_scope, obj)
+	        ? block.renderer.reference(obj)
+	        : obj;
 	    if (properties.length) {
-	        block.event_listeners.push(x `@action_destroyer(${id} = ${fn}.${properties.join('.')}(${target}, ${snippet}))`);
+	        const member_expression = properties.reduce((lhs, rhs) => x `${lhs}.${rhs}`, fn);
+	        block.event_listeners.push(x `@action_destroyer(${id} = ${member_expression}(${target}, ${snippet}))`);
 	    }
 	    else {
 	        block.event_listeners.push(x `@action_destroyer(${id} = ${fn}.call(null, ${target}, ${snippet}))`);
@@ -18215,11 +18263,6 @@
 	    return analyze(expression);
 	}
 
-	const reserved_keywords = new Set(['$$props', '$$restProps', '$$slots']);
-	function is_reserved_keyword(name) {
-	    return reserved_keywords.has(name);
-	}
-
 	function is_dynamic$1(variable) {
 	    if (variable) {
 	        if (variable.mutated || variable.reassigned)
@@ -18285,7 +18328,7 @@
 	        if (main_execution_context && !variable.subscribable && variable.name[0] !== '$') {
 	            return node;
 	        }
-	        return renderer.invalidate(variable.name, undefined, main_execution_context);
+	        return renderer_invalidate(renderer, variable.name, undefined, main_execution_context);
 	    }
 	    if (!head) {
 	        return node;
@@ -18322,6 +18365,55 @@
 	    }
 	    return invalidate;
 	}
+	function renderer_invalidate(renderer, name, value, main_execution_context = false) {
+	    const variable = renderer.component.var_lookup.get(name);
+	    if (variable && (variable.subscribable && (variable.reassigned || variable.export_name))) {
+	        if (main_execution_context) {
+	            return x `${`$$subscribe_${name}`}(${value || name})`;
+	        }
+	        else {
+	            const member = renderer.context_lookup.get(name);
+	            return x `${`$$subscribe_${name}`}($$invalidate(${member.index}, ${value || name}))`;
+	        }
+	    }
+	    if (name[0] === '$' && name[1] !== '$') {
+	        return x `${name.slice(1)}.set(${value || name})`;
+	    }
+	    if (variable && (variable.module || (!variable.referenced &&
+	        !variable.is_reactive_dependency &&
+	        !variable.export_name &&
+	        !name.startsWith('$$')))) {
+	        return value || name;
+	    }
+	    if (value) {
+	        if (main_execution_context) {
+	            return x `${value}`;
+	        }
+	        else {
+	            const member = renderer.context_lookup.get(name);
+	            return x `$$invalidate(${member.index}, ${value})`;
+	        }
+	    }
+	    if (main_execution_context)
+	        return;
+	    // if this is a reactive declaration, invalidate dependencies recursively
+	    const deps = new Set([name]);
+	    deps.forEach(name => {
+	        const reactive_declarations = renderer.component.reactive_declarations.filter(x => x.assignees.has(name));
+	        reactive_declarations.forEach(declaration => {
+	            declaration.dependencies.forEach(name => {
+	                deps.add(name);
+	            });
+	        });
+	    });
+	    // TODO ideally globals etc wouldn't be here in the first place
+	    const filtered = Array.from(deps).filter(n => renderer.context_lookup.has(n));
+	    if (!filtered.length)
+	        return null;
+	    return filtered
+	        .map(n => x `$$invalidate(${renderer.context_lookup.get(n).index}, ${n})`)
+	        .reduce((lhs, rhs) => x `${lhs}, ${rhs}`);
+	}
 
 	class Expression {
 	    constructor(component, owner, template_scope, info, lazy) {
@@ -18648,19 +18740,6 @@
 	    }
 	    return 'func';
 	}
-	function is_contextual(component, scope, name) {
-	    if (is_reserved_keyword(name))
-	        return true;
-	    // if it's a name below root scope, it's contextual
-	    if (!scope.is_top_level(name))
-	        return true;
-	    const variable = component.var_lookup.get(name);
-	    // hoistables, module declarations, and imports are non-contextual
-	    if (!variable || variable.hoistable)
-	        return false;
-	    // assume contextual
-	    return true;
-	}
 
 	class Action extends Node$1 {
 	    constructor(component, parent, scope, info) {
@@ -18672,6 +18751,7 @@
 	        this.expression = info.expression
 	            ? new Expression(component, this, scope, info.expression)
 	            : null;
+	        this.template_scope = scope;
 	        this.uses_context = this.expression && this.expression.uses_context;
 	    }
 	}
@@ -19527,7 +19607,20 @@
 			${stop_animation}();
 			${outro && b `@add_transform(${this.var}, ${rect});`}
 		`);
-	        const params = this.node.animation.expression ? this.node.animation.expression.manipulate(block) : x `{}`;
+	        let params;
+	        if (this.node.animation.expression) {
+	            params = this.node.animation.expression.manipulate(block);
+	            if (this.node.animation.expression.dynamic_dependencies().length) {
+	                // if `params` is dynamic, calculate params ahead of time in the `.r()` method
+	                const params_var = block.get_unique_name('params');
+	                block.add_variable(params_var);
+	                block.chunks.measure.push(b `${params_var} = ${params};`);
+	                params = params_var;
+	            }
+	        }
+	        else {
+	            params = x `{}`;
+	        }
 	        const name = this.renderer.reference(this.node.animation.name);
 	        block.chunks.animate.push(b `
 			${stop_animation}();
@@ -19957,7 +20050,7 @@
 					${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#ctx);
 					${name}.c();
 				} else {
-					${name}.p(#ctx, #dirty);
+					${dynamic && b `${name}.p(#ctx, #dirty);`}
 				}
 				${has_transitions && b `@transition_in(${name}, 1);`}
 				${name}.m(${update_mount_node}, ${anchor});
@@ -19979,10 +20072,12 @@
 						${name} = null;
 					}
 				`;
+	            block.chunks.update.push(b `
+				let ${previous_block_index} = ${current_block_type_index};
+				${current_block_type_index} = ${select_block_type}(#ctx, #dirty);
+			`);
 	            if (dynamic) {
 	                block.chunks.update.push(b `
-					let ${previous_block_index} = ${current_block_type_index};
-					${current_block_type_index} = ${select_block_type}(#ctx, #dirty);
 					if (${current_block_type_index} === ${previous_block_index}) {
 						${if_current_block_type_index(b `${if_blocks}[${current_block_type_index}].p(#ctx, #dirty);`)}
 					} else {
@@ -19992,8 +20087,6 @@
 	            }
 	            else {
 	                block.chunks.update.push(b `
-					let ${previous_block_index} = ${current_block_type_index};
-					${current_block_type_index} = ${select_block_type}(#ctx, #dirty);
 					if (${current_block_type_index} !== ${previous_block_index}) {
 						${change_block}
 					}
@@ -20870,11 +20963,13 @@
 	        add_actions(block, '@_window', this.node.actions);
 	        add_event_handlers(block, '@_window', this.handlers);
 	        this.node.bindings.forEach(binding => {
+	            // TODO: what if it's a MemberExpression?
+	            const binding_name = binding.expression.node.name;
 	            // in dev mode, throw if read-only values are written to
 	            if (readonly.has(binding.name)) {
-	                renderer.readonly.add(binding.expression.node.name);
+	                renderer.readonly.add(binding_name);
 	            }
-	            bindings[binding.name] = binding.expression.node.name;
+	            bindings[binding.name] = binding_name;
 	            // bind:online is a special case, we need to listen for two separate events
 	            if (binding.name === 'online')
 	                return;
@@ -20883,7 +20978,7 @@
 	            if (!events[associated_event])
 	                events[associated_event] = [];
 	            events[associated_event].push({
-	                name: binding.expression.node.name,
+	                name: binding_name,
 	                value: property
 	            });
 	        });
@@ -21192,42 +21287,7 @@
 	        return member;
 	    }
 	    invalidate(name, value, main_execution_context = false) {
-	        const variable = this.component.var_lookup.get(name);
-	        const member = this.context_lookup.get(name);
-	        if (variable && (variable.subscribable && (variable.reassigned || variable.export_name))) {
-	            return main_execution_context
-	                ? x `${`$$subscribe_${name}`}(${value || name})`
-	                : x `${`$$subscribe_${name}`}($$invalidate(${member.index}, ${value || name}))`;
-	        }
-	        if (name[0] === '$' && name[1] !== '$') {
-	            return x `${name.slice(1)}.set(${value || name})`;
-	        }
-	        if (variable && (variable.module || (!variable.referenced &&
-	            !variable.is_reactive_dependency &&
-	            !variable.export_name &&
-	            !name.startsWith('$$')))) {
-	            return value || name;
-	        }
-	        if (value) {
-	            return x `$$invalidate(${member.index}, ${value})`;
-	        }
-	        // if this is a reactive declaration, invalidate dependencies recursively
-	        const deps = new Set([name]);
-	        deps.forEach(name => {
-	            const reactive_declarations = this.component.reactive_declarations.filter(x => x.assignees.has(name));
-	            reactive_declarations.forEach(declaration => {
-	                declaration.dependencies.forEach(name => {
-	                    deps.add(name);
-	                });
-	            });
-	        });
-	        // TODO ideally globals etc wouldn't be here in the first place
-	        const filtered = Array.from(deps).filter(n => this.context_lookup.has(n));
-	        if (!filtered.length)
-	            return null;
-	        return filtered
-	            .map(n => x `$$invalidate(${this.context_lookup.get(n).index}, ${n})`)
-	            .reduce((lhs, rhs) => x `${lhs}, ${rhs}`);
+	        return renderer_invalidate(this, name, value, main_execution_context);
 	    }
 	    dirty(names, is_reactive_declaration = false) {
 	        const renderer = this;
@@ -22083,23 +22143,22 @@
 	    return s.length - s.lastIndexOf('\n') - 1;
 	}
 	// mutate map in-place
-	function sourcemap_add_offset(map, offset) {
+	function sourcemap_add_offset(map, offset, source_index) {
 	    if (map.mappings.length == 0)
-	        return map;
-	    // shift columns in first line
-	    const segment_list = map.mappings[0];
-	    for (let segment = 0; segment < segment_list.length; segment++) {
-	        const seg = segment_list[segment];
-	        if (seg[3])
-	            seg[3] += offset.column;
-	    }
-	    // shift lines
+	        return;
 	    for (let line = 0; line < map.mappings.length; line++) {
 	        const segment_list = map.mappings[line];
 	        for (let segment = 0; segment < segment_list.length; segment++) {
 	            const seg = segment_list[segment];
-	            if (seg[2])
+	            // shift only segments that belong to component source file
+	            if (seg[1] === source_index) { // also ensures that seg.length >= 4
+	                // shift column if it points at the first line
+	                if (seg[2] === 0) {
+	                    seg[3] += offset.column;
+	                }
+	                // shift line
 	                seg[2] += offset.line;
+	            }
 	        }
 	    }
 	}
@@ -22164,6 +22223,8 @@
 	            this.map = other.map;
 	            return this;
 	        }
+	        // compute last line length before mutating
+	        const column_offset = last_line_length(this.string);
 	        this.string += other.string;
 	        const m1 = this.map;
 	        const m2 = other.map;
@@ -22182,9 +22243,9 @@
 	                const segment_list = m2.mappings[line];
 	                for (let segment = 0; segment < segment_list.length; segment++) {
 	                    const seg = segment_list[segment];
-	                    if (seg[1])
+	                    if (seg[1] >= 0)
 	                        seg[1] = new_source_idx[seg[1]];
-	                    if (seg[4])
+	                    if (seg[4] >= 0)
 	                        seg[4] = new_name_idx[seg[4]];
 	                }
 	            }
@@ -22194,7 +22255,7 @@
 	                const segment_list = m2.mappings[line];
 	                for (let segment = 0; segment < segment_list.length; segment++) {
 	                    const seg = segment_list[segment];
-	                    if (seg[1])
+	                    if (seg[1] >= 0)
 	                        seg[1] = new_source_idx[seg[1]];
 	                }
 	            }
@@ -22204,7 +22265,7 @@
 	                const segment_list = m2.mappings[line];
 	                for (let segment = 0; segment < segment_list.length; segment++) {
 	                    const seg = segment_list[segment];
-	                    if (seg[4])
+	                    if (seg[4] >= 0)
 	                        seg[4] = new_name_idx[seg[4]];
 	                }
 	            }
@@ -22214,7 +22275,6 @@
 	        // 1. last line of first map
 	        // 2. first line of second map
 	        // columns of 2 must be shifted
-	        const column_offset = last_line_length(this.string);
 	        if (m2.mappings.length > 0 && column_offset > 0) {
 	            const first_line = m2.mappings[0];
 	            for (let i = 0; i < first_line.length; i++) {
@@ -22228,13 +22288,21 @@
 	        return this;
 	    }
 	    static from_processed(string, map) {
-	        if (map)
+	        const line_count = string.split('\n').length;
+	        if (map) {
+	            // ensure that count of source map mappings lines 
+	            // is equal to count of generated code lines
+	            // (some tools may produce less)
+	            const missing_lines = line_count - map.mappings.length;
+	            for (let i = 0; i < missing_lines; i++) {
+	                map.mappings.push([]);
+	            }
 	            return new StringWithSourcemap(string, map);
+	        }
 	        if (string == '')
 	            return new StringWithSourcemap();
 	        map = { version: 3, names: [], sources: [], mappings: [] };
 	        // add empty SourceMapSegment[] for every line
-	        const line_count = (string.match(/\n/g) || '').length;
 	        for (let i = 0; i < line_count; i++)
 	            map.mappings.push([]);
 	        return new StringWithSourcemap(string, map);
@@ -22653,6 +22721,8 @@
 	        };
 	        body.push(b `
 			function ${definition}(${args}) {
+				${injected.map(name => b `let ${name};`)}
+
 				${rest}
 
 				${reactive_store_declarations}
@@ -22679,8 +22749,6 @@
 
 				${inject_state && b `$$self.$inject_state = ${inject_state};`}
 
-				${injected.map(name => b `let ${name};`)}
-
 				${ /* before reactive declarations */props_inject}
 
 				${reactive_declarations.length > 0 && b `
@@ -23122,7 +23190,7 @@
 	}
 
 	function Head (node, renderer, options) {
-	    const head_options = Object.assign({}, options, { head_id: node.id });
+	    const head_options = Object.assign(Object.assign({}, options), { head_id: node.id });
 	    renderer.push();
 	    renderer.render(node.children, head_options);
 	    const result = renderer.pop();
@@ -23382,21 +23450,71 @@
 	    const uses_slots = component.var_lookup.has('$$slots');
 	    const slots = uses_slots ? b `let $$slots = @compute_slots(#slots);` : null;
 	    const reactive_stores = component.vars.filter(variable => variable.name[0] === '$' && variable.name[1] !== '$');
-	    const reactive_store_values = reactive_stores
+	    const reactive_store_subscriptions = reactive_stores
+	        .filter(store => {
+	        const variable = component.var_lookup.get(store.name.slice(1));
+	        return !variable || variable.hoistable;
+	    })
+	        .map(({ name }) => {
+	        const store_name = name.slice(1);
+	        return b `
+				${component.compile_options.dev && b `@validate_store(${store_name}, '${store_name}');`}
+				${`$$unsubscribe_${store_name}`} = @subscribe(${store_name}, #value => ${name} = #value)
+				${store_name}.subscribe($$value => ${name} = $$value);
+			`;
+	    });
+	    const reactive_store_unsubscriptions = reactive_stores.map(({ name }) => b `${`$$unsubscribe_${name.slice(1)}`}()`);
+	    const reactive_store_declarations = reactive_stores
 	        .map(({ name }) => {
 	        const store_name = name.slice(1);
 	        const store = component.var_lookup.get(store_name);
-	        if (store && store.hoistable)
-	            return null;
-	        const assignment = b `${name} = @get_store_value(${store_name});`;
-	        return component.compile_options.dev
-	            ? b `@validate_store(${store_name}, '${store_name}'); ${assignment}`
-	            : assignment;
-	    })
-	        .filter(Boolean);
-	    component.rewrite_props(({ name }) => {
+	        if (store && store.reassigned) {
+	            const unsubscribe = `$$unsubscribe_${store_name}`;
+	            const subscribe = `$$subscribe_${store_name}`;
+	            return b `let ${name}, ${unsubscribe} = @noop, ${subscribe} = () => (${unsubscribe}(), ${unsubscribe} = @subscribe(${store_name}, $$value => ${name} = $$value), ${store_name})`;
+	        }
+	        return b `let ${name}, ${`$$unsubscribe_${store_name}`};`;
+	    });
+	    // instrument get/set store value
+	    if (component.ast.instance) {
+	        let scope = component.instance_scope;
+	        const map = component.instance_scope_map;
+	        walk(component.ast.instance.content, {
+	            enter(node) {
+	                if (map.has(node)) {
+	                    scope = map.get(node);
+	                }
+	            },
+	            leave(node) {
+	                if (map.has(node)) {
+	                    scope = scope.parent;
+	                }
+	                if (node.type === 'AssignmentExpression' || node.type === 'UpdateExpression') {
+	                    const assignee = node.type === 'AssignmentExpression' ? node.left : node.argument;
+	                    const names = new Set(extract_names(assignee));
+	                    const to_invalidate = new Set();
+	                    for (const name of names) {
+	                        const variable = component.var_lookup.get(name);
+	                        if (variable &&
+	                            !variable.hoistable &&
+	                            !variable.global &&
+	                            !variable.module &&
+	                            (variable.subscribable || variable.name[0] === '$')) {
+	                            to_invalidate.add(variable.name);
+	                        }
+	                    }
+	                    if (to_invalidate.size) {
+	                        this.replace(invalidate({ component }, scope, node, to_invalidate, true));
+	                    }
+	                }
+	            }
+	        });
+	    }
+	    component.rewrite_props(({ name, reassigned }) => {
 	        const value = `$${name}`;
-	        let insert = b `${value} = @get_store_value(${name})`;
+	        let insert = reassigned
+	            ? b `${`$$subscribe_${name}`}()`
+	            : b `${`$$unsubscribe_${name}`} = @subscribe(${name}, #value => $${value} = #value)`;
 	        if (component.compile_options.dev) {
 	            insert = b `@validate_store(${name}, '${name}'); ${insert}`;
 	        }
@@ -23431,36 +23549,27 @@
 			do {
 				$$settled = true;
 
-				${reactive_store_values}
-
-				${injected.map(name => b `let ${name};`)}
-
 				${reactive_declarations}
 
 				$$rendered = ${literal};
 			} while (!$$settled);
 
+			${reactive_store_unsubscriptions}
+
 			return $$rendered;
 		`
 	        : b `
-			${reactive_store_values}
-
-			${injected.map(name => b `let ${name};`)}
-
 			${reactive_declarations}
 
+			${reactive_store_unsubscriptions}
+
 			return ${literal};`;
 	    const blocks = [
+	        ...injected.map(name => b `let ${name};`),
 	        rest,
 	        slots,
-	        ...reactive_stores.map(({ name }) => {
-	            const store_name = name.slice(1);
-	            const store = component.var_lookup.get(store_name);
-	            if (store && store.hoistable) {
-	                return b `let ${name} = @get_store_value(${store_name});`;
-	            }
-	            return b `let ${name};`;
-	        }),
+	        ...reactive_store_declarations,
+	        ...reactive_store_subscriptions,
 	        instance_javascript,
 	        ...parent_bindings,
 	        css.code && b `$$result.css.add(#css);`,
@@ -25719,7 +25828,7 @@
 	    constructor(component, parent, scope, info) {
 	        super(component, parent, scope, info);
 	        this.handlers = [];
-	        info.attributes.forEach(node => {
+	        info.attributes.forEach((node) => {
 	            if (node.type === 'EventHandler') {
 	                this.handlers.push(new EventHandler(component, this, scope, node));
 	            }
@@ -25928,15 +26037,19 @@
 	            }
 	        }
 	        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?
-	        );
+	        this.is_readonly =
+	            dimensions.test(this.name) ||
+	                (isElement(parent) &&
+	                    ((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);
 	    }
 	}
+	function isElement(node) {
+	    return !!node.is_media_node;
+	}
 
 	class Transition extends Node$1 {
 	    constructor(component, parent, scope, info) {
@@ -26079,7 +26192,7 @@
 	const svg$1 = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 	const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
 	const aria_attribute_set = new Set(aria_attributes);
-	const aria_roles = 'alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox complementary contentinfo definition deletion dialog directory document emphasis feed figure form generic grid gridcell group heading img link list listbox listitem log main marquee math meter menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option paragraph presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox separator slider spinbutton status strong subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem'.split(' ');
+	const aria_roles = 'alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox complementary contentinfo definition deletion dialog directory document emphasis feed figure form generic graphics-document graphics-object graphics-symbol grid gridcell group heading img link list listbox listitem log main marquee math meter menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option paragraph presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox separator slider spinbutton status strong subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem'.split(' ');
 	const aria_role_set = new Set(aria_roles);
 	const a11y_required_attributes = {
 	    a: ['href'],
@@ -26137,6 +26250,10 @@
 	    'touchend',
 	    'touchcancel'
 	]);
+	const react_attributes = new Map([
+	    ['className', 'class'],
+	    ['htmlFor', 'for']
+	]);
 	function get_namespace(parent, element, explicit_namespace) {
 	    const parent_element = parent.find_nearest(/^Element/);
 	    if (!parent_element) {
@@ -26433,6 +26550,12 @@
 	                    message: 'The \'is\' attribute is not supported cross-browser and should be avoided'
 	                });
 	            }
+	            if (react_attributes.has(attribute.name)) {
+	                component.warn(attribute, {
+	                    code: 'invalid-html-attribute',
+	                    message: `'${attribute.name}' is not a valid HTML attribute. Did you mean '${react_attributes.get(attribute.name)}'?`
+	                });
+	            }
 	            attribute_map.set(attribute.name, attribute);
 	        });
 	    }
@@ -26965,7 +27088,7 @@
 	class DebugTag$1 extends Node$1 {
 	    constructor(component, parent, scope, info) {
 	        super(component, parent, scope, info);
-	        this.expressions = info.identifiers.map(node => {
+	        this.expressions = info.identifiers.map((node) => {
 	            return new Expression(component, parent, scope, node);
 	        });
 	    }
@@ -27194,7 +27317,7 @@
 	}
 
 	// This file is automatically generated
-	var internal_exports = new Set(["HtmlTag", "SvelteComponent", "SvelteComponentDev", "SvelteElement", "action_destroyer", "add_attribute", "add_classes", "add_flush_callback", "add_location", "add_render_callback", "add_resize_listener", "add_transform", "afterUpdate", "append", "append_dev", "assign", "attr", "attr_dev", "attribute_to_object", "beforeUpdate", "bind", "binding_callbacks", "blank_object", "bubble", "check_outros", "children", "claim_component", "claim_element", "claim_space", "claim_text", "clear_loops", "component_subscribe", "compute_rest_props", "compute_slots", "createEventDispatcher", "create_animation", "create_bidirectional_transition", "create_component", "create_in_transition", "create_out_transition", "create_slot", "create_ssr_component", "current_component", "custom_event", "dataset_dev", "debug", "destroy_block", "destroy_component", "destroy_each", "detach", "detach_after_dev", "detach_before_dev", "detach_between_dev", "detach_dev", "dirty_components", "dispatch_dev", "each", "element", "element_is", "empty", "escape", "escaped", "exclude_internal_props", "fix_and_destroy_block", "fix_and_outro_and_destroy_block", "fix_position", "flush", "getContext", "get_binding_group_value", "get_current_component", "get_custom_elements_slots", "get_slot_changes", "get_slot_context", "get_spread_object", "get_spread_update", "get_store_value", "globals", "group_outros", "handle_promise", "hasContext", "has_prop", "identity", "init", "insert", "insert_dev", "intros", "invalid_attribute_name_character", "is_client", "is_crossorigin", "is_empty", "is_function", "is_promise", "listen", "listen_dev", "loop", "loop_guard", "missing_component", "mount_component", "noop", "not_equal", "now", "null_to_empty", "object_without_properties", "onDestroy", "onMount", "once", "outro_and_destroy_block", "prevent_default", "prop_dev", "query_selector_all", "raf", "run", "run_all", "safe_not_equal", "schedule_update", "select_multiple_value", "select_option", "select_options", "select_value", "self", "setContext", "set_attributes", "set_current_component", "set_custom_element_data", "set_data", "set_data_dev", "set_input_type", "set_input_value", "set_now", "set_raf", "set_store_value", "set_style", "set_svg_attributes", "space", "spread", "stop_propagation", "subscribe", "svg_element", "text", "tick", "time_ranges_to_array", "to_number", "toggle_class", "transition_in", "transition_out", "update_keyed_each", "update_slot", "update_slot_spread", "validate_component", "validate_each_argument", "validate_each_keys", "validate_slots", "validate_store", "xlink_attr"]);
+	var internal_exports = new Set(["HtmlTag", "SvelteComponent", "SvelteComponentDev", "SvelteComponentTyped", "SvelteElement", "action_destroyer", "add_attribute", "add_classes", "add_flush_callback", "add_location", "add_render_callback", "add_resize_listener", "add_transform", "afterUpdate", "append", "append_dev", "assign", "attr", "attr_dev", "attribute_to_object", "beforeUpdate", "bind", "binding_callbacks", "blank_object", "bubble", "check_outros", "children", "claim_component", "claim_element", "claim_space", "claim_text", "clear_loops", "component_subscribe", "compute_rest_props", "compute_slots", "createEventDispatcher", "create_animation", "create_bidirectional_transition", "create_component", "create_in_transition", "create_out_transition", "create_slot", "create_ssr_component", "current_component", "custom_event", "dataset_dev", "debug", "destroy_block", "destroy_component", "destroy_each", "detach", "detach_after_dev", "detach_before_dev", "detach_between_dev", "detach_dev", "dirty_components", "dispatch_dev", "each", "element", "element_is", "empty", "escape", "escaped", "exclude_internal_props", "fix_and_destroy_block", "fix_and_outro_and_destroy_block", "fix_position", "flush", "getContext", "get_binding_group_value", "get_current_component", "get_custom_elements_slots", "get_slot_changes", "get_slot_context", "get_spread_object", "get_spread_update", "get_store_value", "globals", "group_outros", "handle_promise", "hasContext", "has_prop", "identity", "init", "insert", "insert_dev", "intros", "invalid_attribute_name_character", "is_client", "is_crossorigin", "is_empty", "is_function", "is_promise", "listen", "listen_dev", "loop", "loop_guard", "missing_component", "mount_component", "noop", "not_equal", "now", "null_to_empty", "object_without_properties", "onDestroy", "onMount", "once", "outro_and_destroy_block", "prevent_default", "prop_dev", "query_selector_all", "raf", "run", "run_all", "safe_not_equal", "schedule_update", "select_multiple_value", "select_option", "select_options", "select_value", "self", "setContext", "set_attributes", "set_current_component", "set_custom_element_data", "set_data", "set_data_dev", "set_input_type", "set_input_value", "set_now", "set_raf", "set_store_value", "set_style", "set_svg_attributes", "space", "spread", "stop_propagation", "subscribe", "svg_element", "text", "tick", "time_ranges_to_array", "to_number", "toggle_class", "transition_in", "transition_out", "update_keyed_each", "update_slot", "update_slot_spread", "validate_component", "validate_each_argument", "validate_each_keys", "validate_slots", "validate_store", "xlink_attr"]);
 
 	function is_used_as_reference(node, parent) {
 	    if (!isReference(node, parent)) {
@@ -27389,7 +27512,7 @@
 	        if (result) {
 	            const { compile_options, name } = this;
 	            const { format = 'esm' } = compile_options;
-	            const banner = `${this.file ? `${this.file} ` : ''}generated by Svelte v${'3.30.0'}`;
+	            const banner = `${this.file ? `${this.file} ` : ''}generated by Svelte v${'3.31.2'}`;
 	            const program = { type: 'Program', body: result.js };
 	            walk(program, {
 	                enter: (node, parent, key) => {
@@ -28536,7 +28659,10 @@
 	    });
 	    return attrs;
 	}
-	async function replace_async(filename, source, get_location, re, func) {
+	function get_file_basename(filename) {
+	    return filename.split(/[/\\]/).pop();
+	}
+	async function replace_async(file_basename, source, get_location, re, func) {
 	    const replacements = [];
 	    source.replace(re, (...args) => {
 	        replacements.push(func(...args).then(res => ({
@@ -28550,21 +28676,86 @@
 	    let last_end = 0;
 	    for (const { offset, length, replacement } of await Promise.all(replacements)) {
 	        // content = unchanged source characters before the replaced segment
-	        const content = StringWithSourcemap.from_source(filename, source.slice(last_end, offset), get_location(last_end));
+	        const content = StringWithSourcemap.from_source(file_basename, source.slice(last_end, offset), get_location(last_end));
 	        out.concat(content).concat(replacement);
 	        last_end = offset + length;
 	    }
 	    // final_content = unchanged source characters after last replaced segment
-	    const final_content = StringWithSourcemap.from_source(filename, source.slice(last_end), get_location(last_end));
+	    const final_content = StringWithSourcemap.from_source(file_basename, source.slice(last_end), get_location(last_end));
 	    return out.concat(final_content);
 	}
+	/**
+	 * Import decoded sourcemap from mozilla/source-map/SourceMapGenerator
+	 * Forked from source-map/lib/source-map-generator.js
+	 * from methods _serializeMappings and toJSON.
+	 * We cannot use source-map.d.ts types, because we access hidden properties.
+	 */
+	function decoded_sourcemap_from_generator(generator) {
+	    let previous_generated_line = 1;
+	    const converted_mappings = [[]];
+	    let result_line;
+	    let result_segment;
+	    let mapping;
+	    const source_idx = generator._sources.toArray()
+	        .reduce((acc, val, idx) => (acc[val] = idx, acc), {});
+	    const name_idx = generator._names.toArray()
+	        .reduce((acc, val, idx) => (acc[val] = idx, acc), {});
+	    const mappings = generator._mappings.toArray();
+	    result_line = converted_mappings[0];
+	    for (let i = 0, len = mappings.length; i < len; i++) {
+	        mapping = mappings[i];
+	        if (mapping.generatedLine > previous_generated_line) {
+	            while (mapping.generatedLine > previous_generated_line) {
+	                converted_mappings.push([]);
+	                previous_generated_line++;
+	            }
+	            result_line = converted_mappings[mapping.generatedLine - 1]; // line is one-based
+	        }
+	        else if (i > 0) {
+	            const previous_mapping = mappings[i - 1];
+	            if (
+	            // sorted by selectivity
+	            mapping.generatedColumn === previous_mapping.generatedColumn &&
+	                mapping.originalColumn === previous_mapping.originalColumn &&
+	                mapping.name === previous_mapping.name &&
+	                mapping.generatedLine === previous_mapping.generatedLine &&
+	                mapping.originalLine === previous_mapping.originalLine &&
+	                mapping.source === previous_mapping.source) {
+	                continue;
+	            }
+	        }
+	        result_line.push([mapping.generatedColumn]);
+	        result_segment = result_line[result_line.length - 1];
+	        if (mapping.source != null) {
+	            result_segment.push(...[
+	                source_idx[mapping.source],
+	                mapping.originalLine - 1,
+	                mapping.originalColumn
+	            ]);
+	            if (mapping.name != null) {
+	                result_segment.push(name_idx[mapping.name]);
+	            }
+	        }
+	    }
+	    const map = {
+	        version: generator._version,
+	        sources: generator._sources.toArray(),
+	        names: generator._names.toArray(),
+	        mappings: converted_mappings
+	    };
+	    if (generator._file != null) {
+	        map.file = generator._file;
+	    }
+	    // not needed: map.sourcesContent and map.sourceRoot
+	    return map;
+	}
 	/**
 	 * Convert a preprocessor output and its leading prefix and trailing suffix into StringWithSourceMap
 	 */
-	function get_replacement(filename, offset, get_location, original, processed, prefix, suffix) {
+	function get_replacement(file_basename, offset, get_location, original, processed, prefix, suffix) {
 	    // Convert the unchanged prefix and suffix to StringWithSourcemap
-	    const prefix_with_map = StringWithSourcemap.from_source(filename, prefix, get_location(offset));
-	    const suffix_with_map = StringWithSourcemap.from_source(filename, suffix, get_location(offset + prefix.length + original.length));
+	    const prefix_with_map = StringWithSourcemap.from_source(file_basename, prefix, get_location(offset));
+	    const suffix_with_map = StringWithSourcemap.from_source(file_basename, suffix, get_location(offset + prefix.length + original.length));
 	    // Convert the preprocessed code and its sourcemap to a StringWithSourcemap
 	    let decoded_map;
 	    if (processed.map) {
@@ -28572,7 +28763,15 @@
 	        if (typeof (decoded_map.mappings) === 'string') {
 	            decoded_map.mappings = decode(decoded_map.mappings);
 	        }
-	        sourcemap_add_offset(decoded_map, get_location(offset + prefix.length));
+	        if (decoded_map._mappings && decoded_map.constructor.name === 'SourceMapGenerator') {
+	            // import decoded sourcemap from mozilla/source-map/SourceMapGenerator
+	            decoded_map = decoded_sourcemap_from_generator(decoded_map);
+	        }
+	        // offset only segments pointing at original component source
+	        const source_index = decoded_map.sources.indexOf(file_basename);
+	        if (source_index !== -1) {
+	            sourcemap_add_offset(decoded_map, get_location(offset + prefix.length), source_index);
+	        }
 	    }
 	    const processed_with_map = StringWithSourcemap.from_processed(processed.code, decoded_map);
 	    // Surround the processed code with the prefix and suffix, retaining valid sourcemappings
@@ -28582,6 +28781,8 @@
 	    // @ts-ignore todo: doublecheck
 	    const filename = (options && options.filename) || preprocessor.filename; // legacy
 	    const dependencies = [];
+	    // preprocess source must be relative to itself or equal null
+	    const file_basename = filename == null ? null : get_file_basename(filename);
 	    const preprocessors = preprocessor
 	        ? Array.isArray(preprocessor) ? preprocessor : [preprocessor]
 	        : [];
@@ -28612,11 +28813,11 @@
 	    }
 	    async function preprocess_tag_content(tag_name, preprocessor) {
 	        const get_location = getLocator(source);
-	        const tag_regex = tag_name == 'style'
+	        const tag_regex = tag_name === 'style'
 	            ? /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi
 	            : /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
-	        const res = await replace_async(filename, source, get_location, tag_regex, async (match, attributes = '', content = '', offset) => {
-	            const no_change = () => StringWithSourcemap.from_source(filename, match, get_location(offset));
+	        const res = await replace_async(file_basename, source, get_location, tag_regex, async (match, attributes = '', content = '', offset) => {
+	            const no_change = () => StringWithSourcemap.from_source(file_basename, match, get_location(offset));
 	            if (!attributes && !content) {
 	                return no_change();
 	            }
@@ -28628,11 +28829,13 @@
 	                attributes: parse_attributes(attributes),
 	                filename
 	            });
-	            if (!processed)
-	                return no_change();
-	            if (processed.dependencies)
+	            if (processed && processed.dependencies) {
 	                dependencies.push(...processed.dependencies);
-	            return get_replacement(filename, offset, get_location, content, processed, `<${tag_name}${attributes}>`, `</${tag_name}>`);
+	            }
+	            if (!processed || !processed.map && processed.code === content) {
+	                return no_change();
+	            }
+	            return get_replacement(file_basename, offset, get_location, content, processed, `<${tag_name}${attributes}>`, `</${tag_name}>`);
 	        });
 	        source = res.string;
 	        sourcemap_list.unshift(res.map);
@@ -28644,7 +28847,7 @@
 	        await preprocess_tag_content('style', fn);
 	    }
 	    // Combine all the source maps for each preprocessor function into one
-	    const map = combine_sourcemaps(filename, sourcemap_list);
+	    const map = combine_sourcemaps(file_basename, sourcemap_list);
 	    return {
 	        // TODO return separated output, in future version where svelte.compile supports it:
 	        // style: { code: styleCode, map: styleMap },
@@ -28659,7 +28862,7 @@
 	    };
 	}
 
-	const VERSION = '3.30.0';
+	const VERSION = '3.31.2';
 
 	exports.VERSION = VERSION;
 	exports.compile = compile;