Skip to content

move warnings and vars out of stats #2102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 19, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 2 additions & 41 deletions src/Stats.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
import { Warning } from './interfaces';
import Component from './compile/Component';

const now = (typeof process !== 'undefined' && process.hrtime)
? () => {
const t = process.hrtime();
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}
}
175 changes: 97 additions & 78 deletions src/compile/Component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -40,6 +40,7 @@ childKeys.ExportNamedDeclaration = ['declaration', 'specifiers'];

export default class Component {
stats: Stats;
warnings: Warning[];

ast: Ast;
source: string;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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()
};
}

Expand Down Expand Up @@ -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,
Expand Down
38 changes: 8 additions & 30 deletions src/compile/css/Stylesheet.ts
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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`
});
});
});
}
}
Loading