Merge pull request #2102 from sveltejs/warnings-and-vars

move warnings and vars out of stats

Author: Rich-Harris

src/Stats.ts

@@ -1,6 +1,3 @@
-import { Warning } from './interfaces';
-import Component from './compile/Component';
-
 const now = (typeof process !== 'undefined' && process.hrtime)
 	? () => {
 		const t = process.hrtime();
@@ -31,14 +28,11 @@ export default class Stats {
 	currentChildren: Timing[];
 	timings: Timing[];
 	stack: Timing[];
-	warnings: Warning[];
 
 	constructor() {
 		this.startTime = now();
 		this.stack = [];
 		this.currentChildren = this.timings = [];
-
-		this.warnings = [];
 	}
 
 	start(label) {
@@ -67,46 +61,13 @@ export default class Stats {
 		this.currentChildren = this.currentTiming ? this.currentTiming.children : this.timings;
 	}
 
-	render(component: Component) {
+	render() {
 		const timings = Object.assign({
 			total: now() - this.startTime
 		}, collapseTimings(this.timings));
 
-		// TODO would be good to have this info even
-		// if options.generate is false
-		const imports = component && component.imports.map(node => {
-			return {
-				source: node.source.value,
-				specifiers: node.specifiers.map(specifier => {
-					return {
-						name: (
-							specifier.type === 'ImportDefaultSpecifier' ? 'default' :
-							specifier.type === 'ImportNamespaceSpecifier' ? '*' :
-							specifier.imported.name
-						),
-						as: specifier.local.name
-					};
-				})
-			}
-		});
-
 		return {
-			timings,
-			warnings: this.warnings,
-			vars: component.vars.filter(variable => !variable.global && !variable.implicit && !variable.internal).map(variable => ({
-				name: variable.name,
-				export_name: variable.export_name || null,
-				injected: variable.injected || false,
-				module: variable.module || false,
-				mutated: variable.mutated || false,
-				reassigned: variable.reassigned || false,
-				referenced: variable.referenced || false,
-				writable: variable.writable || false
-			}))
+			timings
 		};
 	}
-
-	warn(warning) {
-		this.warnings.push(warning);
-	}
 }

src/compile/Component.ts

@@ -11,7 +11,7 @@ import Stylesheet from './css/Stylesheet';
 import { test } from '../config';
 import Fragment from './nodes/Fragment';
 import internal_exports from './internal-exports';
-import { Node, Ast, CompileOptions, Var } from '../interfaces';
+import { Node, Ast, CompileOptions, Var, Warning } from '../interfaces';
 import error from '../utils/error';
 import getCodeFrame from '../utils/getCodeFrame';
 import flattenReference from '../utils/flattenReference';
@@ -40,6 +40,7 @@ childKeys.ExportNamedDeclaration = ['declaration', 'specifiers'];
 
 export default class Component {
 	stats: Stats;
+	warnings: Warning[];
 
 	ast: Ast;
 	source: string;
@@ -93,11 +94,13 @@ export default class Component {
 		source: string,
 		name: string,
 		compileOptions: CompileOptions,
-		stats: Stats
+		stats: Stats,
+		warnings: Warning[]
 	) {
 		this.name = name;
 
 		this.stats = stats;
+		this.warnings = warnings;
 		this.ast = ast;
 		this.source = source;
 		this.compileOptions = compileOptions;
@@ -161,7 +164,7 @@ export default class Component {
 
 		if (!compileOptions.customElement) this.stylesheet.reify();
 
-		this.stylesheet.warnOnUnusedSelectors(stats);
+		this.stylesheet.warnOnUnusedSelectors(this);
 	}
 
 	add_var(variable: Var) {
@@ -214,105 +217,121 @@ export default class Component {
 	}
 
 	generate(result: string) {
-		const { compileOptions, name } = this;
-		const { format = 'esm' } = compileOptions;
+		let js = null;
+		let css = null;
 
-		const banner = `/* ${this.file ? `${this.file} ` : ``}generated by Svelte v${"__VERSION__"} */`;
+		if (result) {
+			const { compileOptions, name } = this;
+			const { format = 'esm' } = compileOptions;
 
-		// TODO use same regex for both
-		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 (compileOptions.dev && internal_exports.has(`${name}Dev`)) name = `${name}Dev`;
-					this.helpers.add(name);
-				}
+			const banner = `/* ${this.file ? `${this.file} ` : ``}generated by Svelte v${"__VERSION__"} */`;
 
-				return this.alias(name);
-			}
+			// TODO use same regex for both
+			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 (compileOptions.dev && internal_exports.has(`${name}Dev`)) name = `${name}Dev`;
+						this.helpers.add(name);
+					}
 
-			return sigil.slice(1) + name;
-		});
+					return this.alias(name);
+				}
 
-		const importedHelpers = Array.from(this.helpers)
-			.sort()
-			.map(name => {
-				const alias = this.alias(name);
-				return { name, alias };
+				return sigil.slice(1) + name;
 			});
 
-		const module = wrapModule(
-			result,
-			format,
-			name,
-			compileOptions,
-			banner,
-			compileOptions.sveltePath,
-			importedHelpers,
-			this.imports,
-			this.vars.filter(variable => variable.module && variable.export_name).map(variable => ({
-				name: variable.name,
-				as: variable.export_name
-			})),
-			this.source
-		);
+			const importedHelpers = Array.from(this.helpers)
+				.sort()
+				.map(name => {
+					const alias = this.alias(name);
+					return { name, alias };
+				});
+
+			const module = wrapModule(
+				result,
+				format,
+				name,
+				compileOptions,
+				banner,
+				compileOptions.sveltePath,
+				importedHelpers,
+				this.imports,
+				this.vars.filter(variable => variable.module && variable.export_name).map(variable => ({
+					name: variable.name,
+					as: variable.export_name
+				})),
+				this.source
+			);
 
-		const parts = module.split('✂]');
-		const finalChunk = parts.pop();
+			const parts = module.split('✂]');
+			const finalChunk = parts.pop();
 
-		const compiled = new Bundle({ separator: '' });
+			const compiled = new Bundle({ separator: '' });
 
-		function addString(str: string) {
-			compiled.addSource({
-				content: new MagicString(str),
-			});
-		}
+			function addString(str: string) {
+				compiled.addSource({
+					content: new MagicString(str),
+				});
+			}
 
-		const { filename } = compileOptions;
+			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
-		if (!parts.length) {
-			compiled.addSource({
-				filename,
-				content: new MagicString(this.source).remove(0, this.source.length),
-			});
-		}
+			// 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
+			if (!parts.length) {
+				compiled.addSource({
+					filename,
+					content: new MagicString(this.source).remove(0, this.source.length),
+				});
+			}
 
-		const pattern = /\[✂(\d+)-(\d+)$/;
+			const pattern = /\[✂(\d+)-(\d+)$/;
 
-		parts.forEach((str: string) => {
-			const chunk = str.replace(pattern, '');
-			if (chunk) addString(chunk);
+			parts.forEach((str: string) => {
+				const chunk = str.replace(pattern, '');
+				if (chunk) addString(chunk);
 
-			const match = pattern.exec(str);
+				const match = pattern.exec(str);
 
-			const snippet = this.code.snip(+match[1], +match[2]);
+				const snippet = this.code.snip(+match[1], +match[2]);
 
-			compiled.addSource({
-				filename,
-				content: snippet,
+				compiled.addSource({
+					filename,
+					content: snippet,
+				});
 			});
-		});
 
-		addString(finalChunk);
+			addString(finalChunk);
 
-		const css = compileOptions.customElement ?
-			{ code: null, map: null } :
-			this.stylesheet.render(compileOptions.cssOutputFilename, true);
+			css = compileOptions.customElement ?
+				{ code: null, map: null } :
+				this.stylesheet.render(compileOptions.cssOutputFilename, true);
 
-		const js = {
-			code: compiled.toString(),
-			map: compiled.generateMap({
-				includeContent: true,
-				file: compileOptions.outputFilename,
-			})
-		};
+			js = {
+				code: compiled.toString(),
+				map: compiled.generateMap({
+					includeContent: true,
+					file: compileOptions.outputFilename,
+				})
+			};
+		}
 
 		return {
-			ast: this.ast,
 			js,
 			css,
-			stats: this.stats.render(this)
+			ast: this.ast,
+			warnings: this.warnings,
+			vars: this.vars.filter(v => !v.global && !v.implicit && !v.internal).map(v => ({
+				name: v.name,
+				export_name: v.export_name || null,
+				injected: v.injected || false,
+				module: v.module || false,
+				mutated: v.mutated || false,
+				reassigned: v.reassigned || false,
+				referenced: v.referenced || false,
+				writable: v.writable || false
+			})),
+			stats: this.stats.render()
 		};
 	}
 
@@ -393,7 +412,7 @@ export default class Component {
 
 		const frame = getCodeFrame(this.source, start.line - 1, start.column);
 
-		this.stats.warn({
+		this.warnings.push({
 			code: warning.code,
 			message: warning.message,
 			frame,

src/compile/css/Stylesheet.ts

@@ -1,14 +1,11 @@
 import MagicString from 'magic-string';
 import { walk } from 'estree-walker';
-import { getLocator } from 'locate-character';
 import Selector from './Selector';
-import getCodeFrame from '../../utils/getCodeFrame';
 import hash from '../../utils/hash';
 import removeCSSPrefix from '../../utils/removeCSSPrefix';
 import Element from '../nodes/Element';
-import { Node, Ast, Warning } from '../../interfaces';
+import { Node, Ast } from '../../interfaces';
 import Component from '../Component';
-import Stats from '../../Stats';
 
 const isKeyframesNode = (node: Node) => removeCSSPrefix(node.name) === 'keyframes'
 
@@ -392,33 +389,14 @@ export default class Stylesheet {
 		});
 	}
 
-	warnOnUnusedSelectors(stats: Stats) {
-		let locator;
-
-		const handler = (selector: Selector) => {
-			const pos = selector.node.start;
-
-			if (!locator) locator = getLocator(this.source, { offsetLine: 1 });
-			const start = locator(pos);
-			const end = locator(selector.node.end);
-
-			const frame = getCodeFrame(this.source, start.line - 1, start.column);
-			const message = `Unused CSS selector`;
-
-			stats.warn({
-				code: `css-unused-selector`,
-				message,
-				frame,
-				start,
-				end,
-				pos,
-				filename: this.filename,
-				toString: () => `${message} (${start.line}:${start.column})\n${frame}`,
-			});
-		};
-
+	warnOnUnusedSelectors(component: Component) {
 		this.children.forEach(child => {
-			child.warnOnUnusedSelector(handler);
+			child.warnOnUnusedSelector((selector: Selector) => {
+				component.warn(selector.node, {
+					code: `css-unused-selector`,
+					message: `Unused CSS selector`
+				});
+			});
 		});
 	}
 }