|
|
|
@ -1,7 +1,6 @@
|
|
|
|
import Component from '../../Component';
|
|
|
|
import Component from '../../Component';
|
|
|
|
import { walk } from 'estree-walker';
|
|
|
|
import { walk } from 'estree-walker';
|
|
|
|
import is_reference from 'is-reference';
|
|
|
|
import is_reference from 'is-reference';
|
|
|
|
// import { b } from 'code-red';
|
|
|
|
|
|
|
|
import flatten_reference from '../../utils/flatten_reference';
|
|
|
|
import flatten_reference from '../../utils/flatten_reference';
|
|
|
|
import { create_scopes, Scope, extract_names } from '../../utils/scope';
|
|
|
|
import { create_scopes, Scope, extract_names } from '../../utils/scope';
|
|
|
|
import { Node } from '../../../interfaces';
|
|
|
|
import { Node } from '../../../interfaces';
|
|
|
|
@ -12,7 +11,8 @@ import get_object from '../../utils/get_object';
|
|
|
|
import Block from '../../render_dom/Block';
|
|
|
|
import Block from '../../render_dom/Block';
|
|
|
|
import { INode } from '../interfaces';
|
|
|
|
import { INode } from '../interfaces';
|
|
|
|
import is_dynamic from '../../render_dom/wrappers/shared/is_dynamic';
|
|
|
|
import is_dynamic from '../../render_dom/wrappers/shared/is_dynamic';
|
|
|
|
// import { invalidate } from '../../utils/invalidate';
|
|
|
|
import { x } from 'code-red';
|
|
|
|
|
|
|
|
import { invalidate } from '../../utils/invalidate';
|
|
|
|
|
|
|
|
|
|
|
|
const binary_operators: Record<string, number> = {
|
|
|
|
const binary_operators: Record<string, number> = {
|
|
|
|
'**': 15,
|
|
|
|
'**': 15,
|
|
|
|
@ -82,8 +82,6 @@ export default class Expression {
|
|
|
|
declarations: Node[] = [];
|
|
|
|
declarations: Node[] = [];
|
|
|
|
uses_context = false;
|
|
|
|
uses_context = false;
|
|
|
|
|
|
|
|
|
|
|
|
rendered: string;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// todo: owner type
|
|
|
|
// todo: owner type
|
|
|
|
constructor(component: Component, owner: Owner, template_scope: TemplateScope, info, lazy?: boolean) {
|
|
|
|
constructor(component: Component, owner: Owner, template_scope: TemplateScope, info, lazy?: boolean) {
|
|
|
|
// TODO revert to direct property access in prod?
|
|
|
|
// TODO revert to direct property access in prod?
|
|
|
|
@ -224,193 +222,191 @@ export default class Expression {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// TODO move this into a render-dom wrapper?
|
|
|
|
// TODO move this into a render-dom wrapper?
|
|
|
|
render(_block?: Block) {
|
|
|
|
manipulate(block?: Block) {
|
|
|
|
// TODO
|
|
|
|
const {
|
|
|
|
|
|
|
|
component,
|
|
|
|
// if (this.rendered) return this.rendered;
|
|
|
|
declarations,
|
|
|
|
|
|
|
|
scope_map: map,
|
|
|
|
// const {
|
|
|
|
template_scope,
|
|
|
|
// component,
|
|
|
|
is_synthetic
|
|
|
|
// declarations,
|
|
|
|
} = this;
|
|
|
|
// scope_map: map,
|
|
|
|
let scope = this.scope;
|
|
|
|
// template_scope,
|
|
|
|
|
|
|
|
// owner,
|
|
|
|
let function_expression;
|
|
|
|
// is_synthetic
|
|
|
|
|
|
|
|
// } = this;
|
|
|
|
let dependencies: Set<string>;
|
|
|
|
// let scope = this.scope;
|
|
|
|
let contextual_dependencies: Set<string>;
|
|
|
|
|
|
|
|
|
|
|
|
// let function_expression;
|
|
|
|
// TODO this feels a lil messy
|
|
|
|
|
|
|
|
let return_value = this.node;
|
|
|
|
// let dependencies: Set<string>;
|
|
|
|
|
|
|
|
// let contextual_dependencies: Set<string>;
|
|
|
|
walk(this.node, {
|
|
|
|
|
|
|
|
enter(node: any, parent: any, key: string, index: number) {
|
|
|
|
// // rewrite code as appropriate
|
|
|
|
// don't manipulate shorthand props twice
|
|
|
|
// walk(this.node, {
|
|
|
|
if (key === 'value' && parent.shorthand) return;
|
|
|
|
// enter(node: any, parent: any, key: string) {
|
|
|
|
|
|
|
|
// // don't manipulate shorthand props twice
|
|
|
|
if (map.has(node)) {
|
|
|
|
// if (key === 'value' && parent.shorthand) return;
|
|
|
|
scope = map.get(node);
|
|
|
|
|
|
|
|
}
|
|
|
|
// if (map.has(node)) {
|
|
|
|
|
|
|
|
// scope = map.get(node);
|
|
|
|
if (is_reference(node, parent)) {
|
|
|
|
// }
|
|
|
|
const { name } = flatten_reference(node);
|
|
|
|
|
|
|
|
|
|
|
|
// if (is_reference(node, parent)) {
|
|
|
|
if (scope.has(name)) return;
|
|
|
|
// const { name, nodes } = flatten_reference(node);
|
|
|
|
if (globals.has(name) && !component.var_lookup.has(name)) return;
|
|
|
|
|
|
|
|
|
|
|
|
// if (scope.has(name)) return;
|
|
|
|
if (function_expression) {
|
|
|
|
// if (globals.has(name) && !component.var_lookup.has(name)) return;
|
|
|
|
if (template_scope.names.has(name)) {
|
|
|
|
|
|
|
|
contextual_dependencies.add(name);
|
|
|
|
// if (function_expression) {
|
|
|
|
|
|
|
|
// if (template_scope.names.has(name)) {
|
|
|
|
template_scope.dependencies_for_name.get(name).forEach(dependency => {
|
|
|
|
// contextual_dependencies.add(name);
|
|
|
|
dependencies.add(dependency);
|
|
|
|
|
|
|
|
});
|
|
|
|
// template_scope.dependencies_for_name.get(name).forEach(dependency => {
|
|
|
|
} else {
|
|
|
|
// dependencies.add(dependency);
|
|
|
|
dependencies.add(name);
|
|
|
|
// });
|
|
|
|
component.add_reference(name); // TODO is this redundant/misplaced?
|
|
|
|
// } else {
|
|
|
|
}
|
|
|
|
// dependencies.add(name);
|
|
|
|
} else if (!is_synthetic && is_contextual(component, template_scope, name)) {
|
|
|
|
// component.add_reference(name); // TODO is this redundant/misplaced?
|
|
|
|
const replaced = x`ctx.${node}`;
|
|
|
|
// }
|
|
|
|
|
|
|
|
// } else if (!is_synthetic && is_contextual(component, template_scope, name)) {
|
|
|
|
if (parent) {
|
|
|
|
// code.prependRight(node.start, key === 'key' && parent.shorthand
|
|
|
|
if (index !== null) {
|
|
|
|
// ? `${name}: ctx.`
|
|
|
|
// TODO can this happen?
|
|
|
|
// : 'ctx.');
|
|
|
|
parent[key][index] = replaced;
|
|
|
|
// }
|
|
|
|
} else {
|
|
|
|
|
|
|
|
parent[key] = replaced;
|
|
|
|
// if (node.type === 'MemberExpression') {
|
|
|
|
}
|
|
|
|
// nodes.forEach(node => {
|
|
|
|
} else {
|
|
|
|
// code.addSourcemapLocation(node.start);
|
|
|
|
return_value = replaced;
|
|
|
|
// code.addSourcemapLocation(node.end);
|
|
|
|
}
|
|
|
|
// });
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
this.skip();
|
|
|
|
// this.skip();
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
if (!function_expression) {
|
|
|
|
// if (!function_expression) {
|
|
|
|
if (node.type === 'AssignmentExpression') {
|
|
|
|
// if (node.type === 'AssignmentExpression') {
|
|
|
|
// TODO should this be a warning/error? `<p>{foo = 1}</p>`
|
|
|
|
// // TODO should this be a warning/error? `<p>{foo = 1}</p>`
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
if (node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
|
|
|
|
// if (node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
|
|
|
|
function_expression = node;
|
|
|
|
// function_expression = node;
|
|
|
|
dependencies = new Set();
|
|
|
|
// dependencies = new Set();
|
|
|
|
contextual_dependencies = new Set();
|
|
|
|
// contextual_dependencies = new Set();
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
leave(node: Node, _parent: Node) {
|
|
|
|
// leave(node: Node, parent: Node) {
|
|
|
|
if (map.has(node)) scope = scope.parent;
|
|
|
|
// if (map.has(node)) scope = scope.parent;
|
|
|
|
|
|
|
|
|
|
|
|
if (node === function_expression) {
|
|
|
|
// if (node === function_expression) {
|
|
|
|
// const id = component.get_unique_name(
|
|
|
|
// const id = component.get_unique_name(
|
|
|
|
// sanitize(get_function_name(node, owner))
|
|
|
|
// sanitize(get_function_name(node, owner))
|
|
|
|
// );
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
|
|
// const args = contextual_dependencies.size > 0
|
|
|
|
// const args = contextual_dependencies.size > 0
|
|
|
|
// ? [`{ ${Array.from(contextual_dependencies).join(', ')} }`]
|
|
|
|
// ? [`{ ${Array.from(contextual_dependencies).join(', ')} }`]
|
|
|
|
// : [];
|
|
|
|
// : [];
|
|
|
|
|
|
|
|
|
|
|
|
// let original_params;
|
|
|
|
// let original_params;
|
|
|
|
|
|
|
|
|
|
|
|
// if (node.params.length > 0) {
|
|
|
|
// if (node.params.length > 0) {
|
|
|
|
// original_params = code.slice(node.params[0].start, node.params[node.params.length - 1].end);
|
|
|
|
// original_params = code.slice(node.params[0].start, node.params[node.params.length - 1].end);
|
|
|
|
// args.push(original_params);
|
|
|
|
// args.push(original_params);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// const body = code.slice(node.body.start, node.body.end).trim();
|
|
|
|
// const body = code.slice(node.body.start, node.body.end).trim();
|
|
|
|
|
|
|
|
|
|
|
|
// const fn = node.type === 'FunctionExpression'
|
|
|
|
// const fn = node.type === 'FunctionExpression'
|
|
|
|
// ? b`${node.async ? 'async ' : ''}function${node.generator ? '*' : ''} ${id}(${args.join(', ')}) ${body}`
|
|
|
|
// ? b`${node.async ? 'async ' : ''}function${node.generator ? '*' : ''} ${id}(${args.join(', ')}) ${body}`
|
|
|
|
// : b`const ${id} = ${node.async ? 'async ' : ''}(${args.join(', ')}) => ${body};`;
|
|
|
|
// : b`const ${id} = ${node.async ? 'async ' : ''}(${args.join(', ')}) => ${body};`;
|
|
|
|
|
|
|
|
|
|
|
|
// if (dependencies.size === 0 && contextual_dependencies.size === 0) {
|
|
|
|
// if (dependencies.size === 0 && contextual_dependencies.size === 0) {
|
|
|
|
// // we can hoist this out of the component completely
|
|
|
|
// // we can hoist this out of the component completely
|
|
|
|
// component.fully_hoisted.push(fn);
|
|
|
|
// component.fully_hoisted.push(fn);
|
|
|
|
|
|
|
|
// code.overwrite(node.start, node.end, id.name);
|
|
|
|
// // code.overwrite(node.start, node.end, id.name);
|
|
|
|
|
|
|
|
|
|
|
|
// component.add_var({
|
|
|
|
// component.add_var({
|
|
|
|
// name: id.name,
|
|
|
|
// name: id.name,
|
|
|
|
// internal: true,
|
|
|
|
// internal: true,
|
|
|
|
// hoistable: true,
|
|
|
|
// hoistable: true,
|
|
|
|
// referenced: true
|
|
|
|
// referenced: true
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// else if (contextual_dependencies.size === 0) {
|
|
|
|
// else if (contextual_dependencies.size === 0) {
|
|
|
|
// // function can be hoisted inside the component init
|
|
|
|
// // function can be hoisted inside the component init
|
|
|
|
// component.partly_hoisted.push(fn);
|
|
|
|
// component.partly_hoisted.push(fn);
|
|
|
|
// code.overwrite(node.start, node.end, `ctx.${id}`);
|
|
|
|
// code.overwrite(node.start, node.end, `ctx.${id}`);
|
|
|
|
|
|
|
|
|
|
|
|
// component.add_var({
|
|
|
|
// component.add_var({
|
|
|
|
// name: id.name,
|
|
|
|
// name: id.name,
|
|
|
|
// internal: true,
|
|
|
|
// internal: true,
|
|
|
|
// referenced: true
|
|
|
|
// referenced: true
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// else {
|
|
|
|
// else {
|
|
|
|
// // we need a combo block/init recipe
|
|
|
|
// // we need a combo block/init recipe
|
|
|
|
// component.partly_hoisted.push(fn);
|
|
|
|
// component.partly_hoisted.push(fn);
|
|
|
|
// code.overwrite(node.start, node.end, id.name);
|
|
|
|
// code.overwrite(node.start, node.end, id.name);
|
|
|
|
|
|
|
|
|
|
|
|
// component.add_var({
|
|
|
|
// component.add_var({
|
|
|
|
// name: id.name,
|
|
|
|
// name: id.name,
|
|
|
|
// internal: true,
|
|
|
|
// internal: true,
|
|
|
|
// referenced: true
|
|
|
|
// referenced: true
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
// declarations.push(b`
|
|
|
|
// declarations.push(b`
|
|
|
|
// function ${id}(${original_params ? '...args' : ''}) {
|
|
|
|
// function ${id}(${original_params ? '...args' : ''}) {
|
|
|
|
// return ctx.${id}(ctx${original_params ? ', ...args' : ''});
|
|
|
|
// return ctx.${id}(ctx${original_params ? ', ...args' : ''});
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// `);
|
|
|
|
// `);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// if (parent && parent.method) {
|
|
|
|
// if (parent && parent.method) {
|
|
|
|
// code.prependRight(node.start, ': ');
|
|
|
|
// code.prependRight(node.start, ': ');
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// function_expression = null;
|
|
|
|
function_expression = null;
|
|
|
|
// dependencies = null;
|
|
|
|
dependencies = null;
|
|
|
|
// contextual_dependencies = null;
|
|
|
|
contextual_dependencies = null;
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// if (node.type === 'AssignmentExpression' || node.type === 'UpdateExpression') {
|
|
|
|
if (node.type === 'AssignmentExpression' || node.type === 'UpdateExpression') {
|
|
|
|
// const assignee = node.type === 'AssignmentExpression' ? node.left : node.argument;
|
|
|
|
const assignee = node.type === 'AssignmentExpression' ? node.left : node.argument;
|
|
|
|
|
|
|
|
|
|
|
|
// // normally (`a = 1`, `b.c = 2`), there'll be a single name
|
|
|
|
// normally (`a = 1`, `b.c = 2`), there'll be a single name
|
|
|
|
// // (a or b). In destructuring cases (`[d, e] = [e, d]`) there
|
|
|
|
// (a or b). In destructuring cases (`[d, e] = [e, d]`) there
|
|
|
|
// // may be more, in which case we need to tack the extra ones
|
|
|
|
// may be more, in which case we need to tack the extra ones
|
|
|
|
// // onto the initial function call
|
|
|
|
// onto the initial function call
|
|
|
|
// const names = new Set(extract_names(assignee));
|
|
|
|
const names = new Set(extract_names(assignee));
|
|
|
|
|
|
|
|
|
|
|
|
// const traced: Set<string> = new Set();
|
|
|
|
const traced: Set<string> = new Set();
|
|
|
|
// names.forEach(name => {
|
|
|
|
names.forEach(name => {
|
|
|
|
// const dependencies = template_scope.dependencies_for_name.get(name);
|
|
|
|
const dependencies = template_scope.dependencies_for_name.get(name);
|
|
|
|
// if (dependencies) {
|
|
|
|
if (dependencies) {
|
|
|
|
// dependencies.forEach(name => traced.add(name));
|
|
|
|
dependencies.forEach(name => traced.add(name));
|
|
|
|
// } else {
|
|
|
|
} else {
|
|
|
|
// traced.add(name);
|
|
|
|
traced.add(name);
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
// });
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// invalidate(component, scope, code, node, traced);
|
|
|
|
invalidate(component, scope, node, traced);
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
// });
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// if (declarations.length > 0) {
|
|
|
|
if (declarations.length > 0) {
|
|
|
|
// block.maintain_context = true;
|
|
|
|
block.maintain_context = true;
|
|
|
|
// declarations.forEach(declaration => {
|
|
|
|
declarations.forEach(declaration => {
|
|
|
|
// block.chunks.init.push(declaration);
|
|
|
|
block.chunks.init.push(declaration);
|
|
|
|
// });
|
|
|
|
});
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
throw new Error(`bad`);
|
|
|
|
return return_value;
|
|
|
|
|
|
|
|
|
|
|
|
return this.rendered = `[✂${this.node.start}-${this.node.end}✂]`;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -426,17 +422,17 @@ export default class Expression {
|
|
|
|
// return 'func';
|
|
|
|
// return 'func';
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// function is_contextual(component: Component, scope: TemplateScope, name: string) {
|
|
|
|
function is_contextual(component: Component, scope: TemplateScope, name: string) {
|
|
|
|
// if (name === '$$props') return true;
|
|
|
|
if (name === '$$props') return true;
|
|
|
|
|
|
|
|
|
|
|
|
// // if it's a name below root scope, it's contextual
|
|
|
|
// if it's a name below root scope, it's contextual
|
|
|
|
// if (!scope.is_top_level(name)) return true;
|
|
|
|
if (!scope.is_top_level(name)) return true;
|
|
|
|
|
|
|
|
|
|
|
|
// const variable = component.var_lookup.get(name);
|
|
|
|
const variable = component.var_lookup.get(name);
|
|
|
|
|
|
|
|
|
|
|
|
// // hoistables, module declarations, and imports are non-contextual
|
|
|
|
// hoistables, module declarations, and imports are non-contextual
|
|
|
|
// if (!variable || variable.hoistable) return false;
|
|
|
|
if (!variable || variable.hoistable) return false;
|
|
|
|
|
|
|
|
|
|
|
|
// // assume contextual
|
|
|
|
// assume contextual
|
|
|
|
// return true;
|
|
|
|
return true;
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
|
Richard Harris
6 years ago