diff --git a/src/compile/Component.ts b/src/compile/Component.ts index 7501c2873d..e5ecf2842c 100644 --- a/src/compile/Component.ts +++ b/src/compile/Component.ts @@ -23,7 +23,7 @@ import getObject from '../utils/getObject'; import deindent from '../utils/deindent'; import globalWhitelist from '../utils/globalWhitelist'; -type Options = { +type ComponentOptions = { namespace?: string; tag?: string; immutable?: boolean; @@ -45,13 +45,13 @@ export default class Component { source: string; code: MagicString; name: string; - options: CompileOptions; + compileOptions: CompileOptions; fragment: Fragment; module_scope: Scope; instance_scope: Scope; instance_scope_map: WeakMap; - optionsTag: Options; + componentOptions: ComponentOptions; namespace: string; tag: string; @@ -90,7 +90,7 @@ export default class Component { ast: Ast, source: string, name: string, - options: CompileOptions, + compileOptions: CompileOptions, stats: Stats ) { this.name = this.getUniqueName(name); @@ -98,34 +98,34 @@ export default class Component { this.stats = stats; this.ast = ast; this.source = source; - this.options = options; + this.compileOptions = compileOptions; - this.file = options.filename && ( - typeof process !== 'undefined' ? options.filename.replace(process.cwd(), '').replace(/^[\/\\]/, '') : options.filename + this.file = compileOptions.filename && ( + typeof process !== 'undefined' ? compileOptions.filename.replace(process.cwd(), '').replace(/^[\/\\]/, '') : compileOptions.filename ); this.locate = getLocator(this.source); this.code = new MagicString(source); // styles - this.stylesheet = new Stylesheet(source, ast, options.filename, options.dev); + this.stylesheet = new Stylesheet(source, ast, compileOptions.filename, compileOptions.dev); this.stylesheet.validate(this); - this.optionsTag = process_options_tag(this, this.ast.html.children); - this.namespace = namespaces[this.optionsTag.namespace] || this.optionsTag.namespace; + this.componentOptions = process_component_options(this, this.ast.html.children); + this.namespace = namespaces[this.componentOptions.namespace] || this.componentOptions.namespace; - if (this.optionsTag.props) { + if (this.componentOptions.props) { this.has_reactive_assignments = true; } - if (options.customElement === true && !this.optionsTag.tag) { + if (compileOptions.customElement === true && !this.componentOptions.tag) { throw new Error(`No tag name specified`); // TODO better error } - this.tag = options.customElement - ? options.customElement === true - ? this.optionsTag.tag - : options.customElement as string + this.tag = compileOptions.customElement + ? compileOptions.customElement === true + ? this.componentOptions.tag + : compileOptions.customElement as string : this.name; this.walk_module_js(); @@ -135,7 +135,7 @@ export default class Component { this.walk_instance_js_post_template(); - if (!options.customElement) this.stylesheet.reify(); + if (!compileOptions.customElement) this.stylesheet.reify(); this.stylesheet.warnOnUnusedSelectors(stats); } @@ -195,18 +195,18 @@ export default class Component { } generate(result: string) { - const { options, name } = this; - const { format = 'esm' } = options; + const { compileOptions, name } = this; + const { format = 'esm' } = compileOptions; const banner = `/* ${this.file ? `${this.file} ` : ``}generated by Svelte v${"__VERSION__"} */`; const helpers = new Set(); // TODO use same regex for both - result = result.replace(options.generate === 'ssr' ? /(@+|#+)(\w*(?:-\w*)?)/g : /(@+)(\w*(?:-\w*)?)/g, (match: string, sigil: string, name: string) => { + result = result.replace(compileOptions.generate === 'ssr' ? /(@+|#+)(\w*(?:-\w*)?)/g : /(@+)(\w*(?:-\w*)?)/g, (match: string, sigil: string, name: string) => { if (sigil === '@') { if (internal_exports.has(name)) { - if (options.dev && internal_exports.has(`${name}Dev`)) name = `${name}Dev`; + if (compileOptions.dev && internal_exports.has(`${name}Dev`)) name = `${name}Dev`; helpers.add(name); } @@ -227,10 +227,10 @@ export default class Component { result, format, name, - options, + compileOptions, this.stats, banner, - options.sveltePath, + compileOptions.sveltePath, importedHelpers, this.imports, this.vars.filter(variable => variable.module && variable.export_name).map(variable => ({ @@ -251,7 +251,7 @@ export default class Component { }); } - const { filename } = options; + const { filename } = compileOptions; // special case — the source file doesn't actually get used anywhere. we need // to add an empty file to populate map.sources and map.sourcesContent @@ -280,15 +280,15 @@ export default class Component { addString(finalChunk); - const css = options.customElement ? + const css = compileOptions.customElement ? { code: null, map: null } : - this.stylesheet.render(options.cssOutputFilename, true); + this.stylesheet.render(compileOptions.cssOutputFilename, true); const js = { code: compiled.toString(), map: compiled.generateMap({ includeContent: true, - file: options.outputFilename, + file: compileOptions.outputFilename, }) }; @@ -354,7 +354,7 @@ export default class Component { source: this.source, start: pos.start, end: pos.end, - filename: this.options.filename + filename: this.compileOptions.filename }); } @@ -384,7 +384,7 @@ export default class Component { start, end, pos: pos.start, - filename: this.options.filename, + filename: this.compileOptions.filename, toString: () => `${warning.message} (${start.line + 1}:${start.column})\n${frame}`, }); } @@ -691,7 +691,7 @@ export default class Component { rewrite_props() { const component = this; - const { code, instance_scope, instance_scope_map: map, optionsTag } = this; + const { code, instance_scope, instance_scope_map: map, componentOptions } = this; let scope = instance_scope; const coalesced_declarations = []; @@ -717,7 +717,7 @@ export default class Component { extractNames(declarator.id).forEach(name => { const variable = component.var_lookup.get(name); - if (name === optionsTag.props_object) { + if (name === componentOptions.props_object) { if (variable.export_name) { component.error(declarator, { code: 'exported-options-props', @@ -1072,9 +1072,9 @@ export default class Component { } } -function process_options_tag(component, nodes) { - const optionsTag: Options = { - immutable: component.options.immutable || false +function process_component_options(component: Component, nodes) { + const componentOptions: ComponentOptions = { + immutable: component.compileOptions.immutable || false }; const node = nodes.find(node => node.name === 'svelte:options'); @@ -1118,7 +1118,7 @@ function process_options_tag(component, nodes) { }); } - optionsTag.tag = tag; + componentOptions.tag = tag; break; } @@ -1144,7 +1144,7 @@ function process_options_tag(component, nodes) { } } - optionsTag.namespace = ns; + componentOptions.namespace = ns; break; } @@ -1155,7 +1155,7 @@ function process_options_tag(component, nodes) { if (typeof value !== 'boolean') component.error(attribute, { code, message }); - optionsTag.immutable = value; + componentOptions.immutable = value; break; default: @@ -1177,8 +1177,8 @@ function process_options_tag(component, nodes) { const { start, end } = attribute.expression; const { name } = flattenReference(attribute.expression); - optionsTag.props = `[✂${start}-${end}✂]`; - optionsTag.props_object = name; + componentOptions.props = `[✂${start}-${end}✂]`; + componentOptions.props_object = name; } else { @@ -1190,5 +1190,5 @@ function process_options_tag(component, nodes) { }); } - return optionsTag; + return componentOptions; } diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts index 44e91b6408..ed0a0a3265 100644 --- a/src/compile/nodes/Element.ts +++ b/src/compile/nodes/Element.ts @@ -618,7 +618,7 @@ export default class Element extends Node { } } - if (component.options.legacy && (modifier === 'once' || modifier === 'passive')) { + if (component.compileOptions.legacy && (modifier === 'once' || modifier === 'passive')) { // TODO this could be supported, but it would need a few changes to // how event listeners work component.error(handler, { @@ -695,4 +695,4 @@ function shouldHaveAttribute( code: `a11y-missing-attribute`, message: `A11y: <${name}> element should have ${article} ${sequence} attribute` }); -} \ No newline at end of file +} diff --git a/src/compile/nodes/shared/Node.ts b/src/compile/nodes/shared/Node.ts index 5d8435965c..330dac3e35 100644 --- a/src/compile/nodes/shared/Node.ts +++ b/src/compile/nodes/shared/Node.ts @@ -49,7 +49,7 @@ export default class Node { } warnIfEmptyBlock() { - if (!this.component.options.dev) return; + if (!this.component.compileOptions.dev) return; if (!/Block$/.test(this.type) || !this.children) return; if (this.children.length > 1) return; @@ -62,4 +62,4 @@ export default class Node { }); } } -} \ No newline at end of file +} diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index e868582dd0..ecfe790f38 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -28,7 +28,7 @@ export default function dom( const builder = new CodeBuilder(); - if (component.options.dev) { + if (component.compileOptions.dev) { builder.addLine(`const ${renderer.fileVar} = ${JSON.stringify(component.file)};`); } @@ -37,7 +37,7 @@ export default function dom( `${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */` : css.code, { onlyEscapeAtSymbol: true }); - if (styles && component.options.css !== false && !options.customElement) { + if (styles && component.compileOptions.css !== false && !options.customElement) { builder.addBlock(deindent` function @add_css() { var style = @createElement("style"); @@ -73,13 +73,13 @@ export default function dom( const props = component.vars.filter(variable => !variable.module && variable.export_name); const writable_props = props.filter(variable => variable.writable); - const set = (component.optionsTag.props || writable_props.length > 0 || renderer.slots.size > 0) + const set = (component.componentOptions.props || writable_props.length > 0 || renderer.slots.size > 0) ? deindent` $$props => { - ${component.optionsTag.props && deindent` - if (!${component.optionsTag.props}) ${component.optionsTag.props} = {}; - @assign(${component.optionsTag.props}, $$props); - $$invalidate('${component.optionsTag.props_object}', ${component.optionsTag.props_object}); + ${component.componentOptions.props && deindent` + if (!${component.componentOptions.props}) ${component.componentOptions.props} = {}; + @assign(${component.componentOptions.props}, $$props); + $$invalidate('${component.componentOptions.props_object}', ${component.componentOptions.props_object}); `} ${writable_props.map(prop => `if ('${prop.export_name}' in $$props) $$invalidate('${prop.name}', ${prop.name} = $$props.${prop.export_name});`)} @@ -91,7 +91,7 @@ export default function dom( const body = []; - const not_equal = component.optionsTag.immutable ? `@not_equal` : `@safe_not_equal`; + const not_equal = component.componentOptions.immutable ? `@not_equal` : `@safe_not_equal`; let dev_props_check; props.forEach(x => { @@ -118,7 +118,7 @@ export default function dom( @flush(); } `); - } else if (component.options.dev) { + } else if (component.compileOptions.dev) { body.push(deindent` set ${x.export_name}(value) { throw new Error("<${component.tag}>: Cannot set read-only property '${x.export_name}'"); @@ -127,7 +127,7 @@ export default function dom( } }); - if (component.options.dev) { + if (component.compileOptions.dev) { // TODO check no uunexpected props were passed, as well as // checking that expected ones were passed const expected = props.filter(prop => !prop.initialised); @@ -306,7 +306,7 @@ export default function dom( const reactive_store_subscriptions = reactive_stores.length > 0 && reactive_stores .map(({ name }) => deindent` let ${name}; - ${component.options.dev && `@validate_store(${name.slice(1)}, '${name.slice(1)}');`} + ${component.compileOptions.dev && `@validate_store(${name.slice(1)}, '${name.slice(1)}');`} $$self.$$.on_destroy.push(${name.slice(1)}.subscribe($$value => { ${name} = $$value; $$invalidate('${name}', ${name}); })); `) .join('\n\n'); @@ -355,7 +355,7 @@ export default function dom( @insert(options.target, this, options.anchor); } - ${(props.length > 0 || component.optionsTag.props) && deindent` + ${(props.length > 0 || component.componentOptions.props) && deindent` if (options.props) { this.$set(options.props); @flush(); diff --git a/src/compile/render-dom/wrappers/Element/Attribute.ts b/src/compile/render-dom/wrappers/Element/Attribute.ts index ba4186f360..b098f68248 100644 --- a/src/compile/render-dom/wrappers/Element/Attribute.ts +++ b/src/compile/render-dom/wrappers/Element/Attribute.ts @@ -64,9 +64,9 @@ export default class AttributeWrapper { ? '@setXlinkAttribute' : '@setAttribute'; - const isLegacyInputType = element.renderer.component.options.legacy && name === 'type' && this.parent.node.name === 'input'; + const isLegacyInputType = element.renderer.component.compileOptions.legacy && name === 'type' && this.parent.node.name === 'input'; - const isDataSet = /^data-/.test(name) && !element.renderer.component.options.legacy && !element.node.namespace; + const isDataSet = /^data-/.test(name) && !element.renderer.component.compileOptions.legacy && !element.node.namespace; const camelCaseName = isDataSet ? name.replace('data-', '').replace(/(-\w)/g, function (m) { return m[1].toUpperCase(); }) : name; diff --git a/src/compile/render-dom/wrappers/InlineComponent/index.ts b/src/compile/render-dom/wrappers/InlineComponent/index.ts index f4dfe6f123..5a07e3533a 100644 --- a/src/compile/render-dom/wrappers/InlineComponent/index.ts +++ b/src/compile/render-dom/wrappers/InlineComponent/index.ts @@ -138,7 +138,7 @@ export default class InlineComponentWrapper extends Wrapper { }); } - if (component.options.dev) { + if (component.compileOptions.dev) { // TODO this is a terrible hack, but without it the component // will complain that options.target is missing. This would // work better if components had separate public and private @@ -507,4 +507,4 @@ function isComputed(node: Node) { } return false; -} \ No newline at end of file +} diff --git a/src/compile/render-dom/wrappers/Window.ts b/src/compile/render-dom/wrappers/Window.ts index 18a15dcd77..0ccf9553f5 100644 --- a/src/compile/render-dom/wrappers/Window.ts +++ b/src/compile/render-dom/wrappers/Window.ts @@ -162,9 +162,9 @@ export default class WindowWrapper extends Wrapper { const handler_name = block.getUniqueName(`onlinestatuschanged`); block.builders.init.addBlock(deindent` function ${handler_name}(event) { - ${component.options.dev && `component._updatingReadonlyProperty = true;`} + ${component.compileOptions.dev && `component._updatingReadonlyProperty = true;`} #component.set({ ${bindings.online}: navigator.onLine }); - ${component.options.dev && `component._updatingReadonlyProperty = false;`} + ${component.compileOptions.dev && `component._updatingReadonlyProperty = false;`} } window.addEventListener("online", ${handler_name}); window.addEventListener("offline", ${handler_name}); diff --git a/src/compile/render-ssr/index.ts b/src/compile/render-ssr/index.ts index 351a36570a..0ade0da8b4 100644 --- a/src/compile/render-ssr/index.ts +++ b/src/compile/render-ssr/index.ts @@ -38,7 +38,7 @@ export default function ssr( const reactive_store_values = reactive_stores.map(({ name }) => { const assignment = `const ${name} = @get_store_value(${name.slice(1)});`; - return component.options.dev + return component.compileOptions.dev ? `@validate_store(${name.slice(1)}, '${name.slice(1)}'); ${assignment}` : assignment; });