svelte 3.30.0 → 3.31.2

package/compiler.mjs

@@ -15918,6 +15918,7 @@ function is_head(node) {
 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;
@@ -16992,8 +16993,9 @@ class EachBlockWrapper extends Wrapper {
                 ? '@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();`}
@@ -17743,10 +17745,18 @@ function mark_each_block_bindings(parent, binding) {
         }
     });
     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);
         }
     }
 }
@@ -17814,9 +17824,9 @@ class BindingWrapper {
         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)) {
@@ -17825,6 +17835,7 @@ class BindingWrapper {
                             }
                         }
                         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);`);
@@ -17920,7 +17931,21 @@ function get_binding_group(renderer, value, block) {
     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;
@@ -17961,7 +17986,8 @@ function get_binding_group(renderer, value, block) {
             },
             is_context: contexts.length > 0,
             contexts,
-            index
+            index,
+            keypath
         });
     }
     return renderer.binding_groups.get(keypath);
@@ -18032,11 +18058,30 @@ function get_value_from_dom(renderer, element, binding, block, contextual_depend
     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) {
@@ -18046,9 +18091,12 @@ function add_action(block, target, action) {
     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}))`);
@@ -18209,11 +18257,6 @@ function create_scopes(expression) {
     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)
@@ -18279,7 +18322,7 @@ function invalidate(renderer, scope, node, names, main_execution_context = false
         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;
@@ -18316,6 +18359,55 @@ function invalidate(renderer, scope, node, names, main_execution_context = false
     }
     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) {
@@ -18642,19 +18734,6 @@ function get_function_name(_node, parent) {
     }
     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) {
@@ -18666,6 +18745,7 @@ class Action extends Node$1 {
         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;
     }
 }
@@ -19521,7 +19601,20 @@ class ElementWrapper extends Wrapper {
 			${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}();
@@ -19951,7 +20044,7 @@ class IfBlockWrapper extends Wrapper {
 					${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});
@@ -19973,10 +20066,12 @@ class IfBlockWrapper extends Wrapper {
 						${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 {
@@ -19986,8 +20081,6 @@ class IfBlockWrapper extends Wrapper {
             }
             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}
 					}
@@ -20864,11 +20957,13 @@ class WindowWrapper extends Wrapper {
         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;
@@ -20877,7 +20972,7 @@ class WindowWrapper extends Wrapper {
             if (!events[associated_event])
                 events[associated_event] = [];
             events[associated_event].push({
-                name: binding.expression.node.name,
+                name: binding_name,
                 value: property
             });
         });
@@ -21186,42 +21281,7 @@ class Renderer {
         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;
@@ -22077,23 +22137,22 @@ function last_line_length(s) {
     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;
+            }
         }
     }
 }
@@ -22158,6 +22217,8 @@ class StringWithSourcemap {
             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;
@@ -22176,9 +22237,9 @@ class StringWithSourcemap {
                 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]];
                 }
             }
@@ -22188,7 +22249,7 @@ class StringWithSourcemap {
                 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]];
                 }
             }
@@ -22198,7 +22259,7 @@ class StringWithSourcemap {
                 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]];
                 }
             }
@@ -22208,7 +22269,6 @@ class StringWithSourcemap {
         // 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++) {
@@ -22222,13 +22282,21 @@ class StringWithSourcemap {
         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);
@@ -22647,6 +22715,8 @@ function dom(component, options) {
         };
         body.push(b `
 			function ${definition}(${args}) {
+				${injected.map(name => b `let ${name};`)}
+
 				${rest}
 
 				${reactive_store_declarations}
@@ -22673,8 +22743,6 @@ function dom(component, options) {
 
 				${inject_state && b `$$self.$inject_state = ${inject_state};`}
 
-				${injected.map(name => b `let ${name};`)}
-
 				${ /* before reactive declarations */props_inject}
 
 				${reactive_declarations.length > 0 && b `
@@ -23116,7 +23184,7 @@ function Element (node, renderer, options) {
 }
 
 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();
@@ -23376,21 +23444,71 @@ function ssr(component, options) {
     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}`;
         }
@@ -23425,36 +23543,27 @@ function ssr(component, options) {
 			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);`,
@@ -25713,7 +25822,7 @@ class Body extends Node$1 {
     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));
             }
@@ -25922,15 +26031,19 @@ class Binding extends Node$1 {
             }
         }
         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) {
@@ -26073,7 +26186,7 @@ class Let extends Node$1 {
 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'],
@@ -26131,6 +26244,10 @@ const passive_events = new Set([
     '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) {
@@ -26427,6 +26544,12 @@ class Element$1 extends Node$1 {
                     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);
         });
     }
@@ -26959,7 +27082,7 @@ class RawMustacheTag extends Tag$2 {
 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);
         });
     }
@@ -27188,7 +27311,7 @@ class Fragment extends Node$1 {
 }
 
 // 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)) {
@@ -27383,7 +27506,7 @@ class Component {
         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) => {
@@ -28530,7 +28653,10 @@ function parse_attributes(str) {
     });
     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 => ({
@@ -28544,21 +28670,86 @@ async function replace_async(filename, source, get_location, re, func) {
     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) {
@@ -28566,7 +28757,15 @@ function get_replacement(filename, offset, get_location, original, processed, pr
         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
@@ -28576,6 +28775,8 @@ async function preprocess(source, preprocessor, options) {
     // @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]
         : [];
@@ -28606,11 +28807,11 @@ async function preprocess(source, preprocessor, options) {
     }
     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();
             }
@@ -28622,11 +28823,13 @@ async function preprocess(source, preprocessor, options) {
                 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);
@@ -28638,7 +28841,7 @@ async function preprocess(source, preprocessor, options) {
         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 },
@@ -28653,7 +28856,7 @@ async function preprocess(source, preprocessor, options) {
     };
 }
 
-const VERSION = '3.30.0';
+const VERSION = '3.31.2';
 
 export { VERSION, compile, parse$3 as parse, preprocess, walk };
 //# sourceMappingURL=compiler.mjs.map