Merge pull request #1299 from sveltejs/gh-1257

Stats

src/Stats.ts

@@ -0,0 +1,102 @@
+import { Node, Warning } from './interfaces';
+import Generator from './generators/Generator';
+
+const now = (typeof process !== 'undefined' && process.hrtime)
+	? () => {
+		const t = process.hrtime();
+		return t[0] * 1e3 + t[1] / 1e6;
+	}
+	: () => window.performance.now();
+
+type Timing = {
+	label: string;
+	start: number;
+	end: number;
+	children: Timing[];
+}
+
+function collapseTimings(timings) {
+	const result = {};
+	timings.forEach(timing => {
+		result[timing.label] = Object.assign({
+			total: timing.end - timing.start
+		}, timing.children && collapseTimings(timing.children));
+	});
+	return result;
+}
+
+export default class Stats {
+	startTime: number;
+	currentTiming: Timing;
+	currentChildren: Timing[];
+	timings: Timing[];
+	stack: Timing[];
+	warnings: Warning[];
+
+	constructor() {
+		this.startTime = now();
+		this.stack = [];
+		this.currentChildren = this.timings = [];
+
+		this.warnings = [];
+	}
+
+	start(label) {
+		const timing = {
+			label,
+			start: now(),
+			end: null,
+			children: []
+		};
+
+		this.currentChildren.push(timing);
+		this.stack.push(timing);
+
+		this.currentTiming = timing;
+		this.currentChildren = timing.children;
+	}
+
+	stop(label) {
+		if (label !== this.currentTiming.label) {
+			throw new Error(`Mismatched timing labels`);
+		}
+
+		this.currentTiming.end = now();
+		this.stack.pop();
+		this.currentTiming = this.stack[this.stack.length - 1];
+		this.currentChildren = this.currentTiming ? this.currentTiming.children : this.timings;
+	}
+
+	render(generator: Generator) {
+		const timings = Object.assign({
+			total: now() - this.startTime
+		}, collapseTimings(this.timings));
+
+		const imports = generator.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
+					};
+				})
+			}
+		});
+
+		const hooks: Record<string, boolean> = {};
+		if (generator.templateProperties.oncreate) hooks.oncreate = true;
+		if (generator.templateProperties.ondestroy) hooks.ondestroy = true;
+
+		return {
+			timings,
+			warnings: this.warnings,
+			imports,
+			hooks
+		};
+	}
+}

src/generators/Generator.ts

@@ -2,6 +2,7 @@ import MagicString, { Bundle } from 'magic-string';
 import isReference from 'is-reference';
 import { walk, childKeys } from 'estree-walker';
 import { getLocator } from 'locate-character';
+import Stats from '../Stats';
 import deindent from '../utils/deindent';
 import CodeBuilder from '../utils/CodeBuilder';
 import getCodeFrame from '../utils/getCodeFrame';
@@ -76,6 +77,8 @@ childKeys.EachBlock = childKeys.IfBlock = ['children', 'else'];
 childKeys.Attribute = ['value'];
 
 export default class Generator {
+	stats: Stats;
+
 	ast: Parsed;
 	parsed: Parsed;
 	source: string;
@@ -123,8 +126,12 @@ export default class Generator {
 		name: string,
 		stylesheet: Stylesheet,
 		options: CompileOptions,
+		stats: Stats,
 		dom: boolean
 	) {
+		stats.start('compile');
+		this.stats = stats;
+
 		this.ast = clone(parsed);
 
 		this.parsed = parsed;
@@ -372,10 +379,13 @@ export default class Generator {
 			}
 		});
 
+		this.stats.stop('compile');
+
 		return {
 			ast: this.ast,
 			js,
 			css,
+			stats: this.stats.render(this),
 
 			// TODO deprecate
 			code: js.code,

src/generators/dom/index.ts

@@ -11,6 +11,7 @@ import reservedNames from '../../utils/reservedNames';
 import shared from './shared';
 import Generator from '../Generator';
 import Stylesheet from '../../css/Stylesheet';
+import Stats from '../../Stats';
 import Block from './Block';
 import { test } from '../../config';
 import { Parsed, CompileOptions, Node } from '../../interfaces';
@@ -34,9 +35,10 @@ export class DomGenerator extends Generator {
 		source: string,
 		name: string,
 		stylesheet: Stylesheet,
-		options: CompileOptions
+		options: CompileOptions,
+		stats: Stats
 	) {
-		super(parsed, source, name, stylesheet, options, true);
+		super(parsed, source, name, stylesheet, options, stats, true);
 		this.blocks = [];
 
 		this.readonly = new Set();
@@ -54,11 +56,12 @@ export default function dom(
 	parsed: Parsed,
 	source: string,
 	stylesheet: Stylesheet,
-	options: CompileOptions
+	options: CompileOptions,
+	stats: Stats
 ) {
 	const format = options.format || 'es';
 
-	const generator = new DomGenerator(parsed, source, options.name || 'SvelteComponent', stylesheet, options);
+	const generator = new DomGenerator(parsed, source, options.name || 'SvelteComponent', stylesheet, options, stats);
 
 	const {
 		computations,

src/generators/server-side-rendering/index.ts

@@ -1,5 +1,6 @@
 import deindent from '../../utils/deindent';
 import Generator from '../Generator';
+import Stats from '../../Stats';
 import Stylesheet from '../../css/Stylesheet';
 import Block from './Block';
 import visit from './visit';
@@ -20,9 +21,10 @@ export class SsrGenerator extends Generator {
 		source: string,
 		name: string,
 		stylesheet: Stylesheet,
-		options: CompileOptions
+		options: CompileOptions,
+		stats: Stats
 	) {
-		super(parsed, source, name, stylesheet, options, false);
+		super(parsed, source, name, stylesheet, options, stats, false);
 		this.bindings = [];
 		this.renderCode = '';
 		this.appendTargets = [];
@@ -45,11 +47,12 @@ export default function ssr(
 	parsed: Parsed,
 	source: string,
 	stylesheet: Stylesheet,
-	options: CompileOptions
+	options: CompileOptions,
+	stats: Stats
 ) {
 	const format = options.format || 'cjs';
 
-	const generator = new SsrGenerator(parsed, source, options.name || 'SvelteComponent', stylesheet, options);
+	const generator = new SsrGenerator(parsed, source, options.name || 'SvelteComponent', stylesheet, options, stats);
 
 	const { computations, name, templateProperties } = generator;
 

src/index.ts

@@ -2,6 +2,7 @@ import parse from './parse/index';
 import validate from './validate/index';
 import generate from './generators/dom/index';
 import generateSSR from './generators/server-side-rendering/index';
+import Stats from './Stats';
 import { assign } from './shared/index.js';
 import Stylesheet from './css/Stylesheet';
 import { Parsed, CompileOptions, Warning, PreprocessOptions, Preprocessor } from './interfaces';
@@ -109,20 +110,36 @@ export function compile(source: string, _options: CompileOptions) {
 	const options = normalizeOptions(_options);
 	let parsed: Parsed;
 
+	const stats = new Stats();
+
 	try {
+		stats.start('parse');
 		parsed = parse(source, options);
+		stats.stop('parse');
 	} catch (err) {
 		options.onerror(err);
 		return;
 	}
 
+	stats.start('stylesheet');
 	const stylesheet = new Stylesheet(source, parsed, options.filename, options.cascade !== false, options.dev);
+	stats.stop('stylesheet');
+
+	stats.start('validate');
+	// TODO remove this when we remove svelte.validate from public API — we
+	// can use the stats object instead
+	const onwarn = options.onwarn;
+	options.onwarn = warning => {
+		stats.warnings.push(warning);
+		onwarn(warning);
+	};
 
 	validate(parsed, source, stylesheet, options);
+	stats.stop('validate');
 
 	const compiler = options.generate === 'ssr' ? generateSSR : generate;
 
-	return compiler(parsed, source, stylesheet, options);
+	return compiler(parsed, source, stylesheet, options, stats);
 };
 
 export function create(source: string, _options: CompileOptions = {}) {

src/interfaces.ts

@@ -93,4 +93,4 @@ export interface PreprocessOptions {
 	filename?: string
 }
 
-export type Preprocessor = (options: {content: string, attributes: Record<string, string | boolean>, filename?: string}) => { code: string, map?: SourceMap | string };
+export type Preprocessor = (options: {content: string, attributes: Record<string, string | boolean>, filename?: string}) => { code: string, map?: SourceMap | string };

src/validate/index.ts

@@ -2,6 +2,7 @@ import validateJs from './js/index';
 import validateHtml from './html/index';
 import { getLocator, Location } from 'locate-character';
 import getCodeFrame from '../utils/getCodeFrame';
+import Stats from '../Stats';
 import error from '../utils/error';
 import Stylesheet from '../css/Stylesheet';
 import { Node, Parsed, CompileOptions, Warning } from '../interfaces';

test/stats/index.js

@@ -0,0 +1,59 @@
+import * as fs from 'fs';
+import assert from 'assert';
+import { svelte, loadConfig, tryToLoadJson } from '../helpers.js';
+
+describe('stats', () => {
+	fs.readdirSync('test/stats/samples').forEach(dir => {
+		if (dir[0] === '.') return;
+
+		// add .solo to a sample directory name to only run that test
+		const solo = /\.solo/.test(dir);
+		const skip = /\.skip/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		(solo ? it.only : skip ? it.skip : it)(dir, () => {
+			const config = loadConfig(`./stats/samples/${dir}/_config.js`);
+			const filename = `test/stats/samples/${dir}/input.html`;
+			const input = fs.readFileSync(filename, 'utf-8').replace(/\s+$/, '');
+
+			const expectedWarnings =
+				tryToLoadJson(`test/stats/samples/${dir}/warnings.json`) || [];
+			const expectedError = tryToLoadJson(
+				`test/stats/samples/${dir}/error.json`
+			);
+
+			let result;
+			let error;
+
+			try {
+				result = svelte.compile(input, config.options);
+			} catch (e) {
+				error = e;
+			}
+
+			config.test(assert, result.stats);
+
+			if (result.stats.warnings.length || expectedWarnings.length) {
+				// TODO check warnings are added to stats.warnings
+			}
+
+			if (error || expectedError) {
+				if (error && !expectedError) {
+					throw error;
+				}
+
+				if (expectedError && !error) {
+					throw new Error(`Expected an error: ${expectedError.message}`);
+				}
+
+				assert.equal(error.message, expectedError.message);
+				assert.deepEqual(error.loc, expectedError.loc);
+				assert.deepEqual(error.end, expectedError.end);
+				assert.equal(error.pos, expectedError.pos);
+			}
+		});
+	});
+});

test/stats/samples/basic/_config.js

@@ -0,0 +1,6 @@
+export default {
+	test(assert, stats) {
+		assert.equal(typeof stats.timings, 'object');
+		assert.equal(typeof stats.timings.total, 'number');
+	}
+};

test/stats/samples/hooks/_config.js

@@ -0,0 +1,7 @@
+export default {
+	test(assert, stats) {
+		assert.deepEqual(stats.hooks, {
+			oncreate: true
+		});
+	}
+};

test/stats/samples/hooks/input.html

@@ -0,0 +1,7 @@
+<script>
+	export default {
+		oncreate() {
+			console.log('creating');
+		}
+	};
+</script>

test/stats/samples/imports/_config.js

@@ -0,0 +1,18 @@
+export default {
+	test(assert, stats) {
+		assert.deepEqual(stats.imports, [
+			{
+				source: 'x',
+				specifiers: [{ name: 'default', as: 'x' }]
+			},
+			{
+				source: 'y',
+				specifiers: [{ name: 'y', as: 'y' }]
+			},
+			{
+				source: 'z',
+				specifiers: [{ name: '*', as: 'z' }]
+			}
+		]);
+	}
+};

test/stats/samples/imports/input.html

@@ -0,0 +1,5 @@
+<script>
+	import x from 'x';
+	import { y } from 'y';
+	import * as z from 'z';
+</script>

test/validator/index.js

@@ -26,7 +26,7 @@ describe("validate", () => {
 			try {
 				const warnings = [];
 
-				svelte.compile(input, {
+				const { stats } = svelte.compile(input, {
 					onwarn(warning) {
 						warnings.push({
 							message: warning.message,
@@ -38,6 +38,17 @@ describe("validate", () => {
 					dev: config.dev
 				});
 
+				assert.equal(stats.warnings.length, warnings.length);
+				stats.warnings.forEach((full, i) => {
+					const lite = warnings[i];
+					assert.deepEqual({
+						message: full.message,
+						pos: full.pos,
+						loc: full.loc,
+						end: full.end
+					}, lite);
+				});
+
 				assert.deepEqual(warnings, expectedWarnings);
 			} catch (e) {
 				error = e;