mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
947 lines
24 KiB
947 lines
24 KiB
import { parseExpressionAt } from 'acorn';
|
|
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 reservedNames from '../utils/reservedNames';
|
|
import namespaces from '../utils/namespaces';
|
|
import { removeNode } from '../utils/removeNode';
|
|
import nodeToString from '../utils/nodeToString';
|
|
import wrapModule from './wrapModule';
|
|
import annotateWithScopes from '../utils/annotateWithScopes';
|
|
import getName from '../utils/getName';
|
|
import Stylesheet from '../css/Stylesheet';
|
|
import { test } from '../config';
|
|
import Fragment from './nodes/Fragment';
|
|
import shared from './shared';
|
|
import { DomTarget } from './dom';
|
|
import { SsrTarget } from './ssr';
|
|
import { Node, GenerateOptions, ShorthandImport, Ast, CompileOptions, CustomElementOptions } from '../interfaces';
|
|
import error from '../utils/error';
|
|
import getCodeFrame from '../utils/getCodeFrame';
|
|
import checkForComputedKeys from './validate/js/utils/checkForComputedKeys';
|
|
import checkForDupes from './validate/js/utils/checkForDupes';
|
|
import propValidators from './validate/js/propValidators';
|
|
import fuzzymatch from './validate/utils/fuzzymatch';
|
|
import flattenReference from '../utils/flattenReference';
|
|
|
|
interface Computation {
|
|
key: string;
|
|
deps: string[];
|
|
hasRestParam: boolean;
|
|
}
|
|
|
|
interface Declaration {
|
|
type: string;
|
|
name: string;
|
|
node: Node;
|
|
block: string;
|
|
}
|
|
|
|
function detectIndentation(str: string) {
|
|
const pattern = /^[\t\s]{1,4}/gm;
|
|
let match;
|
|
|
|
while (match = pattern.exec(str)) {
|
|
if (match[0][0] === '\t') return '\t';
|
|
if (match[0].length === 2) return ' ';
|
|
}
|
|
|
|
return ' ';
|
|
}
|
|
|
|
function getIndentationLevel(str: string, b: number) {
|
|
let a = b;
|
|
while (a > 0 && str[a - 1] !== '\n') a -= 1;
|
|
return /^\s*/.exec(str.slice(a, b))[0];
|
|
}
|
|
|
|
function getIndentExclusionRanges(node: Node) {
|
|
// TODO can we fold this into a different pass?
|
|
const ranges: Node[] = [];
|
|
walk(node, {
|
|
enter(node: Node) {
|
|
if (node.type === 'TemplateElement') ranges.push(node);
|
|
}
|
|
});
|
|
return ranges;
|
|
}
|
|
|
|
function removeIndentation(
|
|
code: MagicString,
|
|
start: number,
|
|
end: number,
|
|
indentationLevel: string,
|
|
ranges: Node[]
|
|
) {
|
|
const str = code.original.slice(start, end);
|
|
const pattern = new RegExp(`^${indentationLevel}`, 'gm');
|
|
let match;
|
|
|
|
while (match = pattern.exec(str)) {
|
|
// TODO bail if we're inside an exclusion range
|
|
code.remove(start + match.index, start + match.index + indentationLevel.length);
|
|
}
|
|
}
|
|
|
|
// We need to tell estree-walker that it should always
|
|
// look for an `else` block, otherwise it might get
|
|
// the wrong idea about the shape of each/if blocks
|
|
childKeys.EachBlock = childKeys.IfBlock = ['children', 'else'];
|
|
childKeys.Attribute = ['value'];
|
|
|
|
export default class Component {
|
|
stats: Stats;
|
|
|
|
ast: Ast;
|
|
source: string;
|
|
name: string;
|
|
options: CompileOptions;
|
|
fragment: Fragment;
|
|
target: DomTarget | SsrTarget;
|
|
|
|
customElement: CustomElementOptions;
|
|
tag: string;
|
|
props: string[];
|
|
|
|
properties: Map<string, Node>;
|
|
|
|
defaultExport: Node;
|
|
imports: Node[];
|
|
shorthandImports: ShorthandImport[];
|
|
helpers: Set<string>;
|
|
components: Set<string>;
|
|
events: Set<string>;
|
|
methods: Set<string>;
|
|
animations: Set<string>;
|
|
transitions: Set<string>;
|
|
actions: Set<string>;
|
|
importedComponents: Map<string, string>;
|
|
namespace: string;
|
|
hasComponents: boolean;
|
|
computations: Computation[];
|
|
templateProperties: Record<string, Node>;
|
|
slots: Set<string>;
|
|
javascript: [string, string];
|
|
|
|
used: {
|
|
components: Set<string>;
|
|
helpers: Set<string>;
|
|
events: Set<string>;
|
|
animations: Set<string>;
|
|
transitions: Set<string>;
|
|
actions: Set<string>;
|
|
};
|
|
|
|
declarations: Declaration[];
|
|
|
|
refCallees: Node[];
|
|
|
|
code: MagicString;
|
|
|
|
bindingGroups: string[];
|
|
indirectDependencies: Map<string, Set<string>>;
|
|
expectedProperties: Set<string>;
|
|
refs: Set<string>;
|
|
|
|
file: string;
|
|
fileVar: string;
|
|
locate: (c: number) => { line: number, column: number };
|
|
|
|
stylesheet: Stylesheet;
|
|
|
|
userVars: Set<string>;
|
|
templateVars: Map<string, string>;
|
|
aliases: Map<string, string>;
|
|
usedNames: Set<string>;
|
|
|
|
locator: (search: number, startIndex?: number) => {
|
|
line: number,
|
|
column: number
|
|
};
|
|
|
|
constructor(
|
|
ast: Ast,
|
|
source: string,
|
|
name: string,
|
|
options: CompileOptions,
|
|
stats: Stats,
|
|
target: DomTarget | SsrTarget
|
|
) {
|
|
this.stats = stats;
|
|
|
|
this.ast = ast;
|
|
this.source = source;
|
|
this.options = options;
|
|
this.target = target;
|
|
|
|
this.imports = [];
|
|
this.shorthandImports = [];
|
|
this.helpers = new Set();
|
|
this.components = new Set();
|
|
this.events = new Set();
|
|
this.methods = new Set();
|
|
this.animations = new Set();
|
|
this.transitions = new Set();
|
|
this.actions = new Set();
|
|
this.importedComponents = new Map();
|
|
this.slots = new Set();
|
|
|
|
this.used = {
|
|
components: new Set(),
|
|
helpers: new Set(),
|
|
events: new Set(),
|
|
animations: new Set(),
|
|
transitions: new Set(),
|
|
actions: new Set(),
|
|
};
|
|
|
|
this.declarations = [];
|
|
|
|
this.refs = new Set();
|
|
this.refCallees = [];
|
|
|
|
this.bindingGroups = [];
|
|
this.indirectDependencies = new Map();
|
|
|
|
this.file = options.filename && (
|
|
typeof process !== 'undefined' ? options.filename.replace(process.cwd(), '').replace(/^[\/\\]/, '') : options.filename
|
|
);
|
|
this.locate = getLocator(this.source);
|
|
|
|
// track which properties are needed, so we can provide useful info
|
|
// in dev mode
|
|
this.expectedProperties = new Set();
|
|
|
|
this.code = new MagicString(source);
|
|
|
|
// styles
|
|
this.stylesheet = new Stylesheet(source, ast, options.filename, options.dev);
|
|
this.stylesheet.validate(this);
|
|
|
|
// allow compiler to deconflict user's `import { get } from 'whatever'` and
|
|
// Svelte's builtin `import { get, ... } from 'svelte/shared.ts'`;
|
|
this.userVars = new Set();
|
|
this.templateVars = new Map();
|
|
this.aliases = new Map();
|
|
this.usedNames = new Set();
|
|
|
|
this.fileVar = options.dev && this.getUniqueName('file');
|
|
|
|
this.computations = [];
|
|
this.templateProperties = {};
|
|
this.properties = new Map();
|
|
|
|
this.walkJs();
|
|
this.name = this.alias(name);
|
|
|
|
if (options.customElement === true) {
|
|
this.customElement = {
|
|
tag: this.tag,
|
|
props: this.props
|
|
}
|
|
} else {
|
|
this.customElement = options.customElement;
|
|
}
|
|
|
|
if (this.customElement && !this.customElement.tag) {
|
|
throw new Error(`No tag name specified`); // TODO better error
|
|
}
|
|
|
|
this.fragment = new Fragment(this, ast.html);
|
|
// this.walkTemplate();
|
|
if (!this.customElement) this.stylesheet.reify();
|
|
|
|
this.stylesheet.warnOnUnusedSelectors(options.onwarn);
|
|
|
|
if (this.defaultExport) {
|
|
const categories = {
|
|
components: 'component',
|
|
helpers: 'helper',
|
|
events: 'event definition',
|
|
transitions: 'transition',
|
|
actions: 'actions',
|
|
};
|
|
|
|
Object.keys(categories).forEach(category => {
|
|
const definitions = this.defaultExport.declaration.properties.find(prop => prop.key.name === category);
|
|
if (definitions) {
|
|
definitions.value.properties.forEach(prop => {
|
|
const { name } = prop.key;
|
|
if (!this.used[category].has(name)) {
|
|
this.warn(prop, {
|
|
code: `unused-${category.slice(0, -1)}`,
|
|
message: `The '${name}' ${categories[category]} is unused`
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
this.refCallees.forEach(callee => {
|
|
const { parts } = flattenReference(callee);
|
|
const ref = parts[1];
|
|
|
|
if (this.refs.has(ref)) {
|
|
// TODO check method is valid, e.g. `audio.stop()` should be `audio.pause()`
|
|
} else {
|
|
const match = fuzzymatch(ref, Array.from(this.refs.keys()));
|
|
|
|
let message = `'refs.${ref}' does not exist`;
|
|
if (match) message += ` (did you mean 'refs.${match}'?)`;
|
|
|
|
this.error(callee, {
|
|
code: `missing-ref`,
|
|
message
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
addSourcemapLocations(node: Node) {
|
|
walk(node, {
|
|
enter: (node: Node) => {
|
|
this.code.addSourcemapLocation(node.start);
|
|
this.code.addSourcemapLocation(node.end);
|
|
},
|
|
});
|
|
}
|
|
|
|
alias(name: string) {
|
|
if (!this.aliases.has(name)) {
|
|
this.aliases.set(name, this.getUniqueName(name));
|
|
}
|
|
|
|
return this.aliases.get(name);
|
|
}
|
|
|
|
generate(result: string, options: CompileOptions, { banner = '', name, format }: GenerateOptions ) {
|
|
const pattern = /\[✂(\d+)-(\d+)$/;
|
|
|
|
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) => {
|
|
if (sigil === '@') {
|
|
if (name in shared) {
|
|
if (options.dev && `${name}Dev` in shared) name = `${name}Dev`;
|
|
helpers.add(name);
|
|
}
|
|
|
|
return this.alias(name);
|
|
}
|
|
|
|
if (sigil === '%') {
|
|
return this.templateVars.get(name);
|
|
}
|
|
|
|
return sigil.slice(1) + name;
|
|
});
|
|
|
|
let importedHelpers;
|
|
|
|
if (options.shared) {
|
|
if (format !== 'es' && format !== 'cjs') {
|
|
throw new Error(`Components with shared helpers must be compiled with \`format: 'es'\` or \`format: 'cjs'\``);
|
|
}
|
|
|
|
importedHelpers = Array.from(helpers).sort().map(name => {
|
|
const alias = this.alias(name);
|
|
return { name, alias };
|
|
});
|
|
} else {
|
|
let inlineHelpers = '';
|
|
|
|
const component = this;
|
|
|
|
importedHelpers = [];
|
|
|
|
helpers.forEach(name => {
|
|
const str = shared[name];
|
|
const code = new MagicString(str);
|
|
const expression = parseExpressionAt(str, 0);
|
|
|
|
let { scope } = annotateWithScopes(expression);
|
|
|
|
walk(expression, {
|
|
enter(node: Node, parent: Node) {
|
|
if (node._scope) scope = node._scope;
|
|
|
|
if (
|
|
node.type === 'Identifier' &&
|
|
isReference(node, parent) &&
|
|
!scope.has(node.name)
|
|
) {
|
|
if (node.name in shared) {
|
|
// this helper function depends on another one
|
|
const dependency = node.name;
|
|
helpers.add(dependency);
|
|
|
|
const alias = component.alias(dependency);
|
|
if (alias !== node.name) {
|
|
code.overwrite(node.start, node.end, alias);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
leave(node: Node) {
|
|
if (node._scope) scope = scope.parent;
|
|
},
|
|
});
|
|
|
|
if (name === 'transitionManager' || name === 'outros') {
|
|
// special case
|
|
const global = name === 'outros'
|
|
? `_svelteOutros`
|
|
: `_svelteTransitionManager`;
|
|
|
|
inlineHelpers += `\n\nvar ${this.alias(name)} = window.${global} || (window.${global} = ${code});\n\n`;
|
|
} else if (name === 'escaped' || name === 'missingComponent' || name === 'invalidAttributeNameCharacter') {
|
|
// vars are an awkward special case... would be nice to avoid this
|
|
const alias = this.alias(name);
|
|
inlineHelpers += `\n\nconst ${alias} = ${code};`
|
|
} else {
|
|
const alias = this.alias(expression.id.name);
|
|
if (alias !== expression.id.name) {
|
|
code.overwrite(expression.id.start, expression.id.end, alias);
|
|
}
|
|
|
|
inlineHelpers += `\n\n${code}`;
|
|
}
|
|
});
|
|
|
|
result += inlineHelpers;
|
|
}
|
|
|
|
const sharedPath = options.shared === true
|
|
? 'svelte/shared.js'
|
|
: options.shared || '';
|
|
|
|
const module = wrapModule(result, format, name, options, banner, sharedPath, importedHelpers, this.imports, this.shorthandImports, this.source);
|
|
|
|
const parts = module.split('✂]');
|
|
const finalChunk = parts.pop();
|
|
|
|
const compiled = new Bundle({ separator: '' });
|
|
|
|
function addString(str: string) {
|
|
compiled.addSource({
|
|
content: new MagicString(str),
|
|
});
|
|
}
|
|
|
|
const { filename } = options;
|
|
|
|
// 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),
|
|
});
|
|
}
|
|
|
|
parts.forEach((str: string) => {
|
|
const chunk = str.replace(pattern, '');
|
|
if (chunk) addString(chunk);
|
|
|
|
const match = pattern.exec(str);
|
|
|
|
const snippet = this.code.snip(+match[1], +match[2]);
|
|
|
|
compiled.addSource({
|
|
filename,
|
|
content: snippet,
|
|
});
|
|
});
|
|
|
|
addString(finalChunk);
|
|
|
|
const css = this.customElement ?
|
|
{ code: null, map: null } :
|
|
this.stylesheet.render(options.cssOutputFilename, true);
|
|
|
|
const js = {
|
|
code: compiled.toString(),
|
|
map: compiled.generateMap({
|
|
includeContent: true,
|
|
file: options.outputFilename,
|
|
})
|
|
};
|
|
|
|
return {
|
|
ast: this.ast,
|
|
js,
|
|
css,
|
|
stats: this.stats.render(this)
|
|
};
|
|
}
|
|
|
|
getUniqueName(name: string) {
|
|
if (test) name = `${name}$`;
|
|
let alias = name;
|
|
for (
|
|
let i = 1;
|
|
reservedNames.has(alias) ||
|
|
this.userVars.has(alias) ||
|
|
this.usedNames.has(alias);
|
|
alias = `${name}_${i++}`
|
|
);
|
|
this.usedNames.add(alias);
|
|
return alias;
|
|
}
|
|
|
|
getUniqueNameMaker() {
|
|
const localUsedNames = new Set();
|
|
|
|
function add(name: string) {
|
|
localUsedNames.add(name);
|
|
}
|
|
|
|
reservedNames.forEach(add);
|
|
this.userVars.forEach(add);
|
|
|
|
return (name: string) => {
|
|
if (test) name = `${name}$`;
|
|
let alias = name;
|
|
for (
|
|
let i = 1;
|
|
this.usedNames.has(alias) ||
|
|
localUsedNames.has(alias);
|
|
alias = `${name}_${i++}`
|
|
);
|
|
localUsedNames.add(alias);
|
|
return alias;
|
|
};
|
|
}
|
|
|
|
error(
|
|
pos: {
|
|
start: number,
|
|
end: number
|
|
},
|
|
e : {
|
|
code: string,
|
|
message: string
|
|
}
|
|
) {
|
|
error(e.message, {
|
|
name: 'ValidationError',
|
|
code: e.code,
|
|
source: this.source,
|
|
start: pos.start,
|
|
end: pos.end,
|
|
filename: this.options.filename
|
|
});
|
|
}
|
|
|
|
warn(
|
|
pos: {
|
|
start: number,
|
|
end: number
|
|
},
|
|
warning: {
|
|
code: string,
|
|
message: string
|
|
}
|
|
) {
|
|
if (!this.locator) {
|
|
this.locator = getLocator(this.source, { offsetLine: 1 });
|
|
}
|
|
|
|
const start = this.locator(pos.start);
|
|
const end = this.locator(pos.end);
|
|
|
|
const frame = getCodeFrame(this.source, start.line - 1, start.column);
|
|
|
|
this.stats.warn({
|
|
code: warning.code,
|
|
message: warning.message,
|
|
frame,
|
|
start,
|
|
end,
|
|
pos: pos.start,
|
|
filename: this.options.filename,
|
|
toString: () => `${warning.message} (${start.line + 1}:${start.column})\n${frame}`,
|
|
});
|
|
}
|
|
|
|
processDefaultExport(node, indentExclusionRanges) {
|
|
const { templateProperties, source, code } = this;
|
|
|
|
if (node.declaration.type !== 'ObjectExpression') {
|
|
this.error(node.declaration, {
|
|
code: `invalid-default-export`,
|
|
message: `Default export must be an object literal`
|
|
});
|
|
}
|
|
|
|
checkForComputedKeys(this, node.declaration.properties);
|
|
checkForDupes(this, node.declaration.properties);
|
|
|
|
const props = this.properties;
|
|
|
|
node.declaration.properties.forEach((prop: Node) => {
|
|
props.set(getName(prop.key), prop);
|
|
});
|
|
|
|
const validPropList = Object.keys(propValidators);
|
|
|
|
// ensure all exported props are valid
|
|
node.declaration.properties.forEach((prop: Node) => {
|
|
const name = getName(prop.key);
|
|
const propValidator = propValidators[name];
|
|
|
|
if (propValidator) {
|
|
propValidator(this, prop);
|
|
} else {
|
|
const match = fuzzymatch(name, validPropList);
|
|
if (match) {
|
|
this.error(prop, {
|
|
code: `unexpected-property`,
|
|
message: `Unexpected property '${name}' (did you mean '${match}'?)`
|
|
});
|
|
} else if (/FunctionExpression/.test(prop.value.type)) {
|
|
this.error(prop, {
|
|
code: `unexpected-property`,
|
|
message: `Unexpected property '${name}' (did you mean to include it in 'methods'?)`
|
|
});
|
|
} else {
|
|
this.error(prop, {
|
|
code: `unexpected-property`,
|
|
message: `Unexpected property '${name}'`
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
if (props.has('namespace')) {
|
|
const ns = nodeToString(props.get('namespace').value);
|
|
this.namespace = namespaces[ns] || ns;
|
|
}
|
|
|
|
node.declaration.properties.forEach((prop: Node) => {
|
|
templateProperties[getName(prop.key)] = prop;
|
|
});
|
|
|
|
['helpers', 'events', 'components', 'transitions', 'actions', 'animations'].forEach(key => {
|
|
if (templateProperties[key]) {
|
|
templateProperties[key].value.properties.forEach((prop: Node) => {
|
|
this[key].add(getName(prop.key));
|
|
});
|
|
}
|
|
});
|
|
|
|
const addArrowFunctionExpression = (type: string, name: string, node: Node) => {
|
|
const { body, params, async } = node;
|
|
const fnKeyword = async ? 'async function' : 'function';
|
|
|
|
const paramString = params.length ?
|
|
`[✂${params[0].start}-${params[params.length - 1].end}✂]` :
|
|
``;
|
|
|
|
const block = body.type === 'BlockStatement'
|
|
? deindent`
|
|
${fnKeyword} ${name}(${paramString}) [✂${body.start}-${body.end}✂]
|
|
`
|
|
: deindent`
|
|
${fnKeyword} ${name}(${paramString}) {
|
|
return [✂${body.start}-${body.end}✂];
|
|
}
|
|
`;
|
|
|
|
this.declarations.push({ type, name, block, node });
|
|
};
|
|
|
|
const addFunctionExpression = (type: string, name: string, node: Node) => {
|
|
const { async } = node;
|
|
const fnKeyword = async ? 'async function' : 'function';
|
|
|
|
let c = node.start;
|
|
while (this.source[c] !== '(') c += 1;
|
|
|
|
const block = deindent`
|
|
${fnKeyword} ${name}[✂${c}-${node.end}✂];
|
|
`;
|
|
|
|
this.declarations.push({ type, name, block, node });
|
|
};
|
|
|
|
const addValue = (type: string, name: string, node: Node) => {
|
|
const block = deindent`
|
|
var ${name} = [✂${node.start}-${node.end}✂];
|
|
`;
|
|
|
|
this.declarations.push({ type, name, block, node });
|
|
};
|
|
|
|
const addDeclaration = (
|
|
type: string,
|
|
key: string,
|
|
node: Node,
|
|
allowShorthandImport?: boolean,
|
|
disambiguator?: string,
|
|
conflicts?: Record<string, boolean>
|
|
) => {
|
|
const qualified = disambiguator ? `${disambiguator}-${key}` : key;
|
|
|
|
if (node.type === 'Identifier' && node.name === key) {
|
|
this.templateVars.set(qualified, key);
|
|
return;
|
|
}
|
|
|
|
let deconflicted = key;
|
|
if (conflicts) while (deconflicted in conflicts) deconflicted += '_'
|
|
|
|
let name = this.getUniqueName(deconflicted);
|
|
this.templateVars.set(qualified, name);
|
|
|
|
if (allowShorthandImport && node.type === 'Literal' && typeof node.value === 'string') {
|
|
this.shorthandImports.push({ name, source: node.value });
|
|
return;
|
|
}
|
|
|
|
// deindent
|
|
const indentationLevel = getIndentationLevel(source, node.start);
|
|
if (indentationLevel) {
|
|
removeIndentation(code, node.start, node.end, indentationLevel, indentExclusionRanges);
|
|
}
|
|
|
|
if (node.type === 'ArrowFunctionExpression') {
|
|
addArrowFunctionExpression(type, name, node);
|
|
} else if (node.type === 'FunctionExpression') {
|
|
addFunctionExpression(type, name, node);
|
|
} else {
|
|
addValue(type, name, node);
|
|
}
|
|
};
|
|
|
|
if (templateProperties.components) {
|
|
templateProperties.components.value.properties.forEach((property: Node) => {
|
|
addDeclaration('components', getName(property.key), property.value, true, 'components');
|
|
});
|
|
}
|
|
|
|
if (templateProperties.computed) {
|
|
const dependencies = new Map();
|
|
|
|
const fullStateComputations = [];
|
|
|
|
templateProperties.computed.value.properties.forEach((prop: Node) => {
|
|
const key = getName(prop.key);
|
|
const value = prop.value;
|
|
|
|
addDeclaration('computed', key, value, false, 'computed', {
|
|
state: true,
|
|
changed: true
|
|
});
|
|
|
|
const param = value.params[0];
|
|
|
|
const hasRestParam = (
|
|
param.properties &&
|
|
param.properties.some(prop => prop.type === 'RestElement')
|
|
);
|
|
|
|
if (param.type !== 'ObjectPattern' || hasRestParam) {
|
|
fullStateComputations.push({ key, deps: null, hasRestParam });
|
|
} else {
|
|
const deps = param.properties.map(prop => prop.key.name);
|
|
|
|
deps.forEach(dep => {
|
|
this.expectedProperties.add(dep);
|
|
});
|
|
dependencies.set(key, deps);
|
|
}
|
|
});
|
|
|
|
const visited = new Set();
|
|
|
|
const visit = (key: string) => {
|
|
if (!dependencies.has(key)) return; // not a computation
|
|
|
|
if (visited.has(key)) return;
|
|
visited.add(key);
|
|
|
|
const deps = dependencies.get(key);
|
|
deps.forEach(visit);
|
|
|
|
this.computations.push({ key, deps, hasRestParam: false });
|
|
|
|
const prop = templateProperties.computed.value.properties.find((prop: Node) => getName(prop.key) === key);
|
|
};
|
|
|
|
templateProperties.computed.value.properties.forEach((prop: Node) =>
|
|
visit(getName(prop.key))
|
|
);
|
|
|
|
if (fullStateComputations.length > 0) {
|
|
this.computations.push(...fullStateComputations);
|
|
}
|
|
}
|
|
|
|
if (templateProperties.data) {
|
|
addDeclaration('data', 'data', templateProperties.data.value);
|
|
}
|
|
|
|
if (templateProperties.events) {
|
|
templateProperties.events.value.properties.forEach((property: Node) => {
|
|
addDeclaration('events', getName(property.key), property.value, false, 'events');
|
|
});
|
|
}
|
|
|
|
if (templateProperties.helpers) {
|
|
templateProperties.helpers.value.properties.forEach((property: Node) => {
|
|
addDeclaration('helpers', getName(property.key), property.value, false, 'helpers');
|
|
});
|
|
}
|
|
|
|
if (templateProperties.methods) {
|
|
addDeclaration('methods', 'methods', templateProperties.methods.value);
|
|
|
|
templateProperties.methods.value.properties.forEach(property => {
|
|
this.methods.add(getName(property.key));
|
|
});
|
|
}
|
|
|
|
if (templateProperties.namespace) {
|
|
const ns = nodeToString(templateProperties.namespace.value);
|
|
this.namespace = namespaces[ns] || ns;
|
|
}
|
|
|
|
if (templateProperties.oncreate) {
|
|
addDeclaration('oncreate', 'oncreate', templateProperties.oncreate.value);
|
|
}
|
|
|
|
if (templateProperties.ondestroy) {
|
|
addDeclaration('ondestroy', 'ondestroy', templateProperties.ondestroy.value);
|
|
}
|
|
|
|
if (templateProperties.onstate) {
|
|
addDeclaration('onstate', 'onstate', templateProperties.onstate.value);
|
|
}
|
|
|
|
if (templateProperties.onupdate) {
|
|
addDeclaration('onupdate', 'onupdate', templateProperties.onupdate.value);
|
|
}
|
|
|
|
if (templateProperties.preload) {
|
|
addDeclaration('preload', 'preload', templateProperties.preload.value);
|
|
}
|
|
|
|
if (templateProperties.props) {
|
|
this.props = templateProperties.props.value.elements.map((element: Node) => nodeToString(element));
|
|
}
|
|
|
|
if (templateProperties.setup) {
|
|
addDeclaration('setup', 'setup', templateProperties.setup.value);
|
|
}
|
|
|
|
if (templateProperties.store) {
|
|
addDeclaration('store', 'store', templateProperties.store.value);
|
|
}
|
|
|
|
if (templateProperties.tag) {
|
|
this.tag = nodeToString(templateProperties.tag.value);
|
|
}
|
|
|
|
if (templateProperties.transitions) {
|
|
templateProperties.transitions.value.properties.forEach((property: Node) => {
|
|
addDeclaration('transitions', getName(property.key), property.value, false, 'transitions');
|
|
});
|
|
}
|
|
|
|
if (templateProperties.animations) {
|
|
templateProperties.animations.value.properties.forEach((property: Node) => {
|
|
addDeclaration('animations', getName(property.key), property.value, false, 'animations');
|
|
});
|
|
}
|
|
|
|
if (templateProperties.actions) {
|
|
templateProperties.actions.value.properties.forEach((property: Node) => {
|
|
addDeclaration('actions', getName(property.key), property.value, false, 'actions');
|
|
});
|
|
}
|
|
|
|
this.defaultExport = node;
|
|
}
|
|
|
|
walkJs() {
|
|
const { js } = this.ast;
|
|
if (!js) return;
|
|
|
|
this.addSourcemapLocations(js.content);
|
|
|
|
const { code, source, imports } = this;
|
|
|
|
const indentationLevel = getIndentationLevel(source, js.content.body[0].start);
|
|
const indentExclusionRanges = getIndentExclusionRanges(js.content);
|
|
|
|
const { scope, globals } = annotateWithScopes(js.content);
|
|
|
|
scope.declarations.forEach(name => {
|
|
this.userVars.add(name);
|
|
});
|
|
|
|
globals.forEach(name => {
|
|
this.userVars.add(name);
|
|
});
|
|
|
|
const body = js.content.body.slice(); // slice, because we're going to be mutating the original
|
|
|
|
body.forEach(node => {
|
|
// check there are no named exports
|
|
if (node.type === 'ExportNamedDeclaration') {
|
|
this.error(node, {
|
|
code: `named-export`,
|
|
message: `A component can only have a default export`
|
|
});
|
|
}
|
|
|
|
if (node.type === 'ExportDefaultDeclaration') {
|
|
this.processDefaultExport(node, indentExclusionRanges);
|
|
}
|
|
|
|
// imports need to be hoisted out of the IIFE
|
|
else if (node.type === 'ImportDeclaration') {
|
|
removeNode(code, js.content, node);
|
|
imports.push(node);
|
|
|
|
node.specifiers.forEach((specifier: Node) => {
|
|
this.userVars.add(specifier.local.name);
|
|
});
|
|
}
|
|
});
|
|
|
|
if (indentationLevel) {
|
|
if (this.defaultExport) {
|
|
removeIndentation(code, js.content.start, this.defaultExport.start, indentationLevel, indentExclusionRanges);
|
|
removeIndentation(code, this.defaultExport.end, js.content.end, indentationLevel, indentExclusionRanges);
|
|
} else {
|
|
removeIndentation(code, js.content.start, js.content.end, indentationLevel, indentExclusionRanges);
|
|
}
|
|
}
|
|
|
|
let a = js.content.start;
|
|
while (/\s/.test(source[a])) a += 1;
|
|
|
|
let b = js.content.end;
|
|
while (/\s/.test(source[b - 1])) b -= 1;
|
|
|
|
this.javascript = this.defaultExport
|
|
? [
|
|
a !== this.defaultExport.start ? `[✂${a}-${this.defaultExport.start}✂]` : '',
|
|
b !== this.defaultExport.end ?`[✂${this.defaultExport.end}-${b}✂]` : ''
|
|
]
|
|
: [
|
|
a !== b ? `[✂${a}-${b}✂]` : '',
|
|
''
|
|
];
|
|
}
|
|
}
|