mirror of https://github.com/sveltejs/svelte
remove some unused stuff (#10299)
Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/10348/head
Rich Harris
2 years ago
committed by
GitHub
parent
23b38a3471
commit
dc8ca4661f
@ -1,841 +0,0 @@
|
|||||||
import { parse } from 'acorn';
|
|
||||||
import type { OptimizeOptions } from '#compiler';
|
|
||||||
import { type NodePath, traverse, is, type Scope } from 'estree-toolkit';
|
|
||||||
import type {
|
|
||||||
CallExpression,
|
|
||||||
FunctionDeclaration,
|
|
||||||
ImportDeclaration,
|
|
||||||
VariableDeclaration,
|
|
||||||
Node,
|
|
||||||
Identifier,
|
|
||||||
Function,
|
|
||||||
BlockStatement,
|
|
||||||
Expression
|
|
||||||
} from 'estree';
|
|
||||||
import { print } from 'esrap';
|
|
||||||
import { error } from '../errors.js';
|
|
||||||
|
|
||||||
type Props =
|
|
||||||
| Map<string, { path: null | NodePath<VariableDeclaration>; type: 'static' | 'dynamic' }>
|
|
||||||
| 'unknown';
|
|
||||||
|
|
||||||
interface IfBlock {
|
|
||||||
condition: Node;
|
|
||||||
is_static: boolean;
|
|
||||||
type: 'if';
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AwaitBlock {
|
|
||||||
is_static: boolean;
|
|
||||||
type: 'await';
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EachBlock {
|
|
||||||
collection: Node;
|
|
||||||
is_static: boolean;
|
|
||||||
type: 'each';
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ComponentState {
|
|
||||||
props: Props;
|
|
||||||
needs_template: boolean;
|
|
||||||
is_static: boolean;
|
|
||||||
template: {
|
|
||||||
open: null | NodePath<VariableDeclaration>;
|
|
||||||
traverse: Array<NodePath<VariableDeclaration>>;
|
|
||||||
close: null | NodePath<CallExpression>;
|
|
||||||
components: {
|
|
||||||
path: NodePath<CallExpression>;
|
|
||||||
state: ComponentState;
|
|
||||||
}[];
|
|
||||||
blocks: Map<NodePath<CallExpression>, IfBlock | AwaitBlock | EachBlock>;
|
|
||||||
render_effects: Map<
|
|
||||||
NodePath<CallExpression>,
|
|
||||||
{
|
|
||||||
is_static: boolean;
|
|
||||||
anchors: Set<NodePath<VariableDeclaration>>;
|
|
||||||
expressions: Set<NodePath<VariableDeclaration>>;
|
|
||||||
}
|
|
||||||
>;
|
|
||||||
};
|
|
||||||
references: ComponentState[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ModuleContext {
|
|
||||||
parent: null;
|
|
||||||
needs_template: boolean;
|
|
||||||
type: 'module';
|
|
||||||
}
|
|
||||||
|
|
||||||
interface FunctionContext {
|
|
||||||
parent: ModuleContext | ComponentContext | FunctionContext;
|
|
||||||
needs_template: boolean;
|
|
||||||
type: 'function';
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ComponentContext {
|
|
||||||
parent: ModuleContext | ComponentContext;
|
|
||||||
needs_template: boolean;
|
|
||||||
type: 'component';
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OptimizeState {
|
|
||||||
components: Map<NodePath<FunctionDeclaration>, ComponentState>;
|
|
||||||
context: ModuleContext | FunctionContext | ComponentContext;
|
|
||||||
}
|
|
||||||
|
|
||||||
function visit_component(
|
|
||||||
component: NodePath<FunctionDeclaration>,
|
|
||||||
parent_component: null | ComponentState,
|
|
||||||
props: Props,
|
|
||||||
state: OptimizeState
|
|
||||||
): ComponentState {
|
|
||||||
let component_state = state.components.get(component);
|
|
||||||
let initial_visit = true;
|
|
||||||
|
|
||||||
if (component_state === undefined) {
|
|
||||||
component_state = {
|
|
||||||
props,
|
|
||||||
references: [],
|
|
||||||
is_static: true,
|
|
||||||
needs_template: state.context.needs_template,
|
|
||||||
template: {
|
|
||||||
open: null,
|
|
||||||
traverse: [],
|
|
||||||
close: null,
|
|
||||||
components: [],
|
|
||||||
blocks: new Map(),
|
|
||||||
render_effects: new Map()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (parent_component !== null) {
|
|
||||||
component_state.references.push(parent_component);
|
|
||||||
}
|
|
||||||
state.components.set(component, component_state);
|
|
||||||
} else {
|
|
||||||
initial_visit = false;
|
|
||||||
if (state.context.needs_template && !component_state.needs_template) {
|
|
||||||
component_state.needs_template = true;
|
|
||||||
component_state.is_static = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const template = component_state.template;
|
|
||||||
const visitor = {
|
|
||||||
CallExpression(path: NodePath<CallExpression>) {
|
|
||||||
const callee = path.node!.callee;
|
|
||||||
const callee_path = path.get('callee');
|
|
||||||
|
|
||||||
if (!is.identifier(callee)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const callee_name = callee.name;
|
|
||||||
const args = path.node!.arguments;
|
|
||||||
const grand_path = path.parentPath?.parentPath;
|
|
||||||
const blocks = component_state!.template.blocks;
|
|
||||||
|
|
||||||
if (initial_visit) {
|
|
||||||
// $.open
|
|
||||||
if (
|
|
||||||
is.variableDeclaration(grand_path) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
(callee_name === 'open' || callee_name === 'open_frag') &&
|
|
||||||
// TODO: this won't optimize slots, needs some thought
|
|
||||||
state.context.type === 'component'
|
|
||||||
) {
|
|
||||||
template.open = grand_path;
|
|
||||||
}
|
|
||||||
// $.close
|
|
||||||
if (
|
|
||||||
is.expressionStatement(path.parentPath) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
(callee_name === 'close' || callee_name === 'close_frag') &&
|
|
||||||
// TODO: this won't optimize slots, needs some thought
|
|
||||||
state.context.type === 'component'
|
|
||||||
) {
|
|
||||||
template.close = path;
|
|
||||||
}
|
|
||||||
// $.child / $.child_frag / $.sibling
|
|
||||||
if (
|
|
||||||
is.variableDeclaration(grand_path) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
(callee_name === 'child' || callee_name === 'child_frag' || callee_name === 'sibling') &&
|
|
||||||
state.context.type === 'component'
|
|
||||||
) {
|
|
||||||
template.traverse.push(grand_path);
|
|
||||||
}
|
|
||||||
// $.delegated_event / $.transition / $.in / $.out / $.action / $.event / $.slot / $.auto_focus / $.component / $.element
|
|
||||||
if (
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
(callee_name === 'delegated_event' ||
|
|
||||||
callee_name === 'transition' ||
|
|
||||||
callee_name === 'in_fn' ||
|
|
||||||
callee_name === 'out' ||
|
|
||||||
callee_name === 'event' ||
|
|
||||||
callee_name === 'action' ||
|
|
||||||
callee_name === 'slot' ||
|
|
||||||
callee_name === 'auto_focus' ||
|
|
||||||
callee_name === 'component' ||
|
|
||||||
callee_name === 'element') &&
|
|
||||||
state.context.type === 'component'
|
|
||||||
) {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
}
|
|
||||||
// $.bind_value / $.bind_content_editable / $.bind_group / $.bind_property / $.bind_scroll / $.bind_checked / $.bind_online / $.bind_this
|
|
||||||
// TODO: these should go likey be optimized out, but bail-out for now until we have that working
|
|
||||||
if (
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
(callee_name === 'bind_value' ||
|
|
||||||
callee_name === 'bind_content_editable' ||
|
|
||||||
callee_name === 'bind_group' ||
|
|
||||||
callee_name === 'bind_property' ||
|
|
||||||
callee_name === 'bind_scroll' ||
|
|
||||||
callee_name === 'bind_checked' ||
|
|
||||||
callee_name === 'bind_this' ||
|
|
||||||
callee_name === 'bind_online') &&
|
|
||||||
state.context.type === 'component'
|
|
||||||
) {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
}
|
|
||||||
// $.source / $.derived / $.prop_source
|
|
||||||
if (
|
|
||||||
is.variableDeclaration(grand_path) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
(callee_name === 'source' ||
|
|
||||||
callee_name === 'prop_source' ||
|
|
||||||
callee_name === 'derived') &&
|
|
||||||
state.context.type === 'component'
|
|
||||||
) {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
}
|
|
||||||
// $.effect / $.pre_effect
|
|
||||||
if (
|
|
||||||
is.expressionStatement(path.parentPath) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
(callee_name === 'effect' || callee_name === 'pre_effect') &&
|
|
||||||
state.context.type === 'component'
|
|
||||||
) {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
}
|
|
||||||
// $.render_effect
|
|
||||||
// TODO: what about detection of DOM properties that need to be client-side?
|
|
||||||
if (
|
|
||||||
is.expressionStatement(path.parentPath) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
callee_name === 'render_effect' &&
|
|
||||||
state.context.type === 'component'
|
|
||||||
) {
|
|
||||||
const closure = path.get('arguments')[0];
|
|
||||||
let render_effect = template.render_effects.get(path);
|
|
||||||
if (render_effect === undefined) {
|
|
||||||
render_effect = {
|
|
||||||
is_static: true,
|
|
||||||
anchors: new Set(),
|
|
||||||
expressions: new Set()
|
|
||||||
};
|
|
||||||
template.render_effects.set(path, render_effect);
|
|
||||||
}
|
|
||||||
let is_render_effect_static = true;
|
|
||||||
closure.traverse({
|
|
||||||
Identifier(path: NodePath<Identifier>) {
|
|
||||||
if (is_reactive(path, props, false)) {
|
|
||||||
is_render_effect_static = false;
|
|
||||||
} else if (path.node!.name.includes('_anchor')) {
|
|
||||||
const binding = path.scope!.getBinding(path.node!.name);
|
|
||||||
|
|
||||||
if (
|
|
||||||
binding != null &&
|
|
||||||
is.variableDeclarator(binding.path) &&
|
|
||||||
is.variableDeclaration(binding.path.parentPath)
|
|
||||||
) {
|
|
||||||
render_effect!.anchors.add(binding.path.parentPath);
|
|
||||||
}
|
|
||||||
} else if (path.node!.name.includes('_expression')) {
|
|
||||||
const binding = path.scope!.getBinding(path.node!.name);
|
|
||||||
|
|
||||||
if (
|
|
||||||
binding != null &&
|
|
||||||
is.variableDeclarator(binding.path) &&
|
|
||||||
is.variableDeclaration(binding.path.parentPath)
|
|
||||||
) {
|
|
||||||
render_effect!.expressions.add(binding.path.parentPath);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (!is_render_effect_static) {
|
|
||||||
render_effect.is_static = false;
|
|
||||||
component_state!.is_static = false;
|
|
||||||
}
|
|
||||||
path.skipChildren();
|
|
||||||
}
|
|
||||||
// $.prop
|
|
||||||
if (
|
|
||||||
is.variableDeclaration(grand_path) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
callee_name === 'prop' &&
|
|
||||||
state.context.type === 'component'
|
|
||||||
) {
|
|
||||||
const prop_key = args[1];
|
|
||||||
if (is.literal(prop_key) && props !== 'unknown') {
|
|
||||||
const prop = props.get(prop_key.value as string);
|
|
||||||
if (prop !== undefined) {
|
|
||||||
prop.path = grand_path;
|
|
||||||
if (prop.type === 'dynamic') {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// $.if
|
|
||||||
if (
|
|
||||||
is.expressionStatement(path.parentPath) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
callee_name.startsWith('if_block')
|
|
||||||
) {
|
|
||||||
let condition = path.get('arguments')[1] as NodePath<Expression>;
|
|
||||||
if (is.arrowFunctionExpression(condition)) {
|
|
||||||
condition = condition.get('body') as NodePath<Expression>;
|
|
||||||
}
|
|
||||||
const is_static = !state.context.needs_template && !is_reactive(condition, props, false);
|
|
||||||
let if_block = blocks.get(path) as undefined | IfBlock;
|
|
||||||
|
|
||||||
if (if_block === undefined) {
|
|
||||||
if_block = {
|
|
||||||
condition: condition.node!,
|
|
||||||
is_static,
|
|
||||||
type: 'if'
|
|
||||||
};
|
|
||||||
blocks.set(path, if_block);
|
|
||||||
} else if (!is_static) {
|
|
||||||
if_block.is_static = false;
|
|
||||||
}
|
|
||||||
path.skipChildren();
|
|
||||||
if (!if_block.is_static) {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
const consequent_fn = path.get('arguments')[0];
|
|
||||||
const alternate_fn = path.get('arguments')[1];
|
|
||||||
const prev_needs_template = state.context.needs_template;
|
|
||||||
state.context.needs_template = true;
|
|
||||||
if (is.function(consequent_fn)) {
|
|
||||||
consequent_fn.traverse(visitor);
|
|
||||||
}
|
|
||||||
if (is.function(alternate_fn)) {
|
|
||||||
alternate_fn.traverse(visitor);
|
|
||||||
}
|
|
||||||
state.context.needs_template = prev_needs_template;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// $.await
|
|
||||||
if (
|
|
||||||
is.expressionStatement(path.parentPath) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
callee_name === 'await_block'
|
|
||||||
) {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
}
|
|
||||||
// $.key
|
|
||||||
if (
|
|
||||||
is.expressionStatement(path.parentPath) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
callee_name === 'key'
|
|
||||||
) {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
}
|
|
||||||
// $.each
|
|
||||||
if (
|
|
||||||
is.expressionStatement(path.parentPath) &&
|
|
||||||
is_svelte_import(callee_path) &&
|
|
||||||
callee_name === 'each'
|
|
||||||
) {
|
|
||||||
let collection = path.get('arguments')[1] as NodePath<Expression>;
|
|
||||||
if (is.arrowFunctionExpression(collection)) {
|
|
||||||
collection = collection.get('body') as NodePath<Expression>;
|
|
||||||
}
|
|
||||||
const is_static = !state.context.needs_template && !is_reactive(collection, props, false);
|
|
||||||
let each_block = blocks.get(path) as undefined | EachBlock;
|
|
||||||
|
|
||||||
if (each_block === undefined) {
|
|
||||||
each_block = {
|
|
||||||
collection: collection.node!,
|
|
||||||
is_static,
|
|
||||||
type: 'each'
|
|
||||||
};
|
|
||||||
blocks.set(path, each_block);
|
|
||||||
} else {
|
|
||||||
error(null, 'TODO', '');
|
|
||||||
}
|
|
||||||
path.skipChildren();
|
|
||||||
if (!each_block.is_static) {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
const each_fn = path.get('arguments')[4];
|
|
||||||
const else_fn = path.get('arguments')[5];
|
|
||||||
const prev_needs_template = state.context.needs_template;
|
|
||||||
state.context.needs_template = true;
|
|
||||||
if (is.function(each_fn)) {
|
|
||||||
each_fn.traverse(visitor);
|
|
||||||
}
|
|
||||||
if (is.function(else_fn)) {
|
|
||||||
else_fn.traverse(visitor);
|
|
||||||
}
|
|
||||||
state.context.needs_template = prev_needs_template;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// <Component />
|
|
||||||
if (
|
|
||||||
callee_name[0] === callee_name[0].toUpperCase() &&
|
|
||||||
is.expressionStatement(path.parentPath)
|
|
||||||
) {
|
|
||||||
const binding = path.scope!.getBinding(callee_name);
|
|
||||||
if (
|
|
||||||
binding != null &&
|
|
||||||
is.functionDeclaration(binding.path) &&
|
|
||||||
binding.path.node!.params.length === 3 &&
|
|
||||||
is.identifier(binding.path.node!.params[1]) &&
|
|
||||||
binding.path.node!.params[1].name === '$$props'
|
|
||||||
) {
|
|
||||||
const context: ComponentContext = {
|
|
||||||
parent: state.context as ComponentContext,
|
|
||||||
needs_template: state.context.needs_template,
|
|
||||||
type: 'component'
|
|
||||||
};
|
|
||||||
state.context = context;
|
|
||||||
const child_props = get_props(path.get('arguments')[1], props);
|
|
||||||
const child_component_state = visit_component(
|
|
||||||
binding.path,
|
|
||||||
component_state!,
|
|
||||||
child_props,
|
|
||||||
state
|
|
||||||
);
|
|
||||||
if (!child_component_state.is_static) {
|
|
||||||
component_state!.is_static = false;
|
|
||||||
}
|
|
||||||
template.components.push({
|
|
||||||
path,
|
|
||||||
state: child_component_state
|
|
||||||
});
|
|
||||||
state.context = state.context.parent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
Function: {
|
|
||||||
enter(path: NodePath<Function>) {
|
|
||||||
if (path !== component) {
|
|
||||||
const context: FunctionContext = {
|
|
||||||
needs_template: state.context.needs_template,
|
|
||||||
parent: state.context as ComponentContext | FunctionContext | ModuleContext,
|
|
||||||
type: 'function'
|
|
||||||
};
|
|
||||||
state.context = context;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
leave(path: NodePath<Function>) {
|
|
||||||
if (path !== component) {
|
|
||||||
state.context = state.context.parent as
|
|
||||||
| ComponentContext
|
|
||||||
| FunctionContext
|
|
||||||
| ModuleContext;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
component.traverse(visitor);
|
|
||||||
return component_state;
|
|
||||||
}
|
|
||||||
|
|
||||||
function get_props(props_arg: NodePath<Node>, parent_props: Props | null): Props {
|
|
||||||
const props: Props = new Map();
|
|
||||||
|
|
||||||
if (is.objectExpression(props_arg)) {
|
|
||||||
for (const property of props_arg.get('properties')) {
|
|
||||||
if (
|
|
||||||
is.property(property) &&
|
|
||||||
(is.identifier(property.node!.key) || is.literal(property.node!.key))
|
|
||||||
) {
|
|
||||||
const value = property.get('value');
|
|
||||||
const kind = property.node!.kind;
|
|
||||||
if (kind === 'init') {
|
|
||||||
const dynamic = is_reactive(value, parent_props, true);
|
|
||||||
props.set(
|
|
||||||
is.literal(property.node!.key)
|
|
||||||
? (property.node!.key.value as string)
|
|
||||||
: property.node!.key.name,
|
|
||||||
{
|
|
||||||
type: dynamic ? 'dynamic' : 'static',
|
|
||||||
path: null
|
|
||||||
}
|
|
||||||
);
|
|
||||||
} else if (
|
|
||||||
kind === 'get' &&
|
|
||||||
is.functionExpression(value) &&
|
|
||||||
value.node!.body.body.length === 1 &&
|
|
||||||
is.returnStatement(value.node!.body.body[0])
|
|
||||||
) {
|
|
||||||
const expression = (value.get('body') as NodePath<BlockStatement>)
|
|
||||||
.get('body')[0]
|
|
||||||
.get('argument') as NodePath<Expression>;
|
|
||||||
const dynamic = is_reactive(expression, parent_props, true);
|
|
||||||
props.set(
|
|
||||||
is.literal(property.node!.key)
|
|
||||||
? (property.node!.key.value as string)
|
|
||||||
: property.node!.key.name,
|
|
||||||
{
|
|
||||||
type: dynamic ? 'dynamic' : 'static',
|
|
||||||
path: null
|
|
||||||
}
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return 'unknown';
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// TODO
|
|
||||||
error(null, 'TODO', '');
|
|
||||||
return 'unknown';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// TODO
|
|
||||||
error(null, 'TODO', '');
|
|
||||||
return 'unknown';
|
|
||||||
}
|
|
||||||
return props;
|
|
||||||
}
|
|
||||||
|
|
||||||
function is_reactive(
|
|
||||||
path: NodePath<Node>,
|
|
||||||
props: Props | null,
|
|
||||||
functions_are_reactive: boolean
|
|
||||||
): boolean {
|
|
||||||
if (is.identifier(path)) {
|
|
||||||
const binding = path.scope!.getBinding(path.node!.name);
|
|
||||||
if (binding != null && is.variableDeclarator(binding.path)) {
|
|
||||||
const init = binding.path.get('init');
|
|
||||||
if (init.node! !== null && is_reactive(init, props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (is.literal(path)) {
|
|
||||||
return false;
|
|
||||||
} else if (is.unaryExpression(path)) {
|
|
||||||
if (is_reactive(path.get('argument'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
} else if (is.updateExpression(path)) {
|
|
||||||
if (is_reactive(path.get('argument'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
} else if (is.assignmentExpression(path)) {
|
|
||||||
if (is_reactive(path.get('left'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (is_reactive(path.get('right'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
} else if (is.sequenceExpression(path)) {
|
|
||||||
for (const expression of path.get('expressions')) {
|
|
||||||
if (is_reactive(expression, props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (is.conditionalExpression(path)) {
|
|
||||||
if (is_reactive(path.get('test'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (is_reactive(path.get('consequent'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (is_reactive(path.get('alternate'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
} else if (is.binaryExpression(path)) {
|
|
||||||
if (is_reactive(path.get('left'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (is_reactive(path.get('right'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
} else if (is.logicalExpression(path)) {
|
|
||||||
if (is_reactive(path.get('left'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (is_reactive(path.get('right'), props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
} else if (is.arrayExpression(path)) {
|
|
||||||
for (const element of path.get('elements')) {
|
|
||||||
if (element !== null && is_reactive(element, props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (is.objectExpression(path)) {
|
|
||||||
for (const property of path.get('properties')) {
|
|
||||||
if (is_reactive(property, props, functions_are_reactive)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (is.function(path)) {
|
|
||||||
return functions_are_reactive;
|
|
||||||
} else if (is.callExpression(path)) {
|
|
||||||
if (is.identifier(path.node!.callee)) {
|
|
||||||
const prop_key = path.node!.arguments[1];
|
|
||||||
const callee_name = path.node!.callee.name;
|
|
||||||
// Check if prop
|
|
||||||
if (
|
|
||||||
is.variableDeclaration(path.parentPath?.parentPath) &&
|
|
||||||
is_svelte_import(path.get('callee')) &&
|
|
||||||
callee_name === 'prop' &&
|
|
||||||
is.literal(prop_key) &&
|
|
||||||
props !== 'unknown' &&
|
|
||||||
props !== null
|
|
||||||
) {
|
|
||||||
const prop = props.get(prop_key.value as string);
|
|
||||||
if (prop !== undefined && prop.type === 'static') {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Check if referencing prop
|
|
||||||
const binding = path.scope!.getBinding(callee_name);
|
|
||||||
if (binding != null) {
|
|
||||||
if (
|
|
||||||
is.variableDeclarator(binding.path) &&
|
|
||||||
is.variableDeclaration(binding.path.parentPath) &&
|
|
||||||
is.callExpression(binding.path.node!.init) &&
|
|
||||||
is.identifier(binding.path.node!.init.callee) &&
|
|
||||||
binding.path.node!.init.callee.name === 'prop' &&
|
|
||||||
is_svelte_import((binding.path.get('init') as NodePath<CallExpression>).get('callee')) &&
|
|
||||||
is.literal(binding.path.node!.init.arguments[1]) &&
|
|
||||||
props !== 'unknown' &&
|
|
||||||
props !== null
|
|
||||||
) {
|
|
||||||
const prop = props.get(binding.path.node!.init.arguments[1].value as string);
|
|
||||||
if (prop !== undefined && prop.type === 'static') {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Check if template
|
|
||||||
if (
|
|
||||||
is.variableDeclaration(path.parentPath?.parentPath) &&
|
|
||||||
is_svelte_import(path.get('callee')) &&
|
|
||||||
(callee_name === 'child' || callee_name === 'child_frag' || callee_name === 'sibling')
|
|
||||||
) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
} else if (is.memberExpression(path)) {
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
error(null, 'TODO', '');
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function is_svelte_import(path: NodePath<Node>): boolean {
|
|
||||||
if (is.identifier(path)) {
|
|
||||||
const binding = path.scope!.getBinding(path.node!.name);
|
|
||||||
if (binding != null && is.importSpecifier(binding.path)) {
|
|
||||||
const import_declaration = binding.path.parentPath as NodePath<ImportDeclaration>;
|
|
||||||
if ((import_declaration.node!.source.value as string).includes('vendor')) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function is_removed(path: NodePath<Node>): boolean {
|
|
||||||
let current_path: null | NodePath<Node> = path;
|
|
||||||
while (current_path !== null) {
|
|
||||||
if (current_path.removed) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
current_path = current_path.parentPath as null | NodePath<Node>;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function has_references(name: string, scope: Scope): boolean {
|
|
||||||
const binding = scope.getBinding(name)!;
|
|
||||||
let has_references = false;
|
|
||||||
for (const reference of binding.references) {
|
|
||||||
if (!is_removed(reference)) {
|
|
||||||
has_references = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return has_references;
|
|
||||||
}
|
|
||||||
|
|
||||||
function optimize_component(component_state: ComponentState): void {
|
|
||||||
const template = component_state.template;
|
|
||||||
const is_static = component_state.is_static;
|
|
||||||
if (template.open !== null) {
|
|
||||||
const arg_to_remove = template.open
|
|
||||||
.get('declarations')[0]
|
|
||||||
.get('init')
|
|
||||||
.get('arguments')[1] as NodePath<Identifier>;
|
|
||||||
const template_path = arg_to_remove.scope!.getBinding(arg_to_remove.node!.name)!.path
|
|
||||||
.parentPath!;
|
|
||||||
template_path.remove();
|
|
||||||
if (is_static) {
|
|
||||||
template.open.remove();
|
|
||||||
} else {
|
|
||||||
arg_to_remove.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (is_static && template.close !== null) {
|
|
||||||
template.close.remove();
|
|
||||||
}
|
|
||||||
for (const [path, render_effect] of template.render_effects) {
|
|
||||||
if (render_effect.is_static) {
|
|
||||||
path.remove();
|
|
||||||
for (const anchor of render_effect.anchors) {
|
|
||||||
anchor.remove();
|
|
||||||
}
|
|
||||||
for (const expression of render_effect.expressions) {
|
|
||||||
expression.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (const [block_path, block] of template.blocks) {
|
|
||||||
if (is_static || block.is_static) {
|
|
||||||
if (block.type === 'each') {
|
|
||||||
const collection = block.collection;
|
|
||||||
if (is.identifier(collection)) {
|
|
||||||
const binding = block_path.scope!.getBinding(collection.name);
|
|
||||||
if (binding != null && binding.references.length === 1) {
|
|
||||||
binding.path.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// remove the block
|
|
||||||
block_path.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const reverse_template = template.traverse.slice().reverse();
|
|
||||||
for (const path of reverse_template) {
|
|
||||||
const id = path.node!.declarations[0].id! as Identifier;
|
|
||||||
if (is_static || !has_references(id.name, path.scope!)) {
|
|
||||||
if (!path.removed) {
|
|
||||||
path.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (const { path, state } of template.components) {
|
|
||||||
if (state.is_static) {
|
|
||||||
path.parentPath?.getPrevSibling()?.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (component_state.props !== 'unknown') {
|
|
||||||
for (const [prop, { path, type }] of component_state.props) {
|
|
||||||
if (type === 'static' && path !== null && !has_references(prop, path.scope!)) {
|
|
||||||
path.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function is_optimizable(component_state: ComponentState): boolean {
|
|
||||||
if (component_state.needs_template || component_state.props === 'unknown') {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
for (const [, { type }] of component_state.props) {
|
|
||||||
if (type === 'dynamic') {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function optimize_chunk(source: string, options: OptimizeOptions): string | null {
|
|
||||||
const ast = parse(source, {
|
|
||||||
sourceType: 'module',
|
|
||||||
ecmaVersion: 13,
|
|
||||||
locations: true
|
|
||||||
});
|
|
||||||
|
|
||||||
const context: ModuleContext = {
|
|
||||||
parent: null,
|
|
||||||
needs_template: !options.hydrate,
|
|
||||||
type: 'module'
|
|
||||||
};
|
|
||||||
const state: OptimizeState = {
|
|
||||||
components: new Map(),
|
|
||||||
context
|
|
||||||
};
|
|
||||||
|
|
||||||
traverse(ast, {
|
|
||||||
$: { scope: true },
|
|
||||||
CallExpression(path: NodePath<CallExpression>) {
|
|
||||||
// TODO: mount signature changed, this needs updating
|
|
||||||
// Find the root component from a `mount(() => component(...), container)` call
|
|
||||||
const node = path.node!;
|
|
||||||
const callee = node.callee;
|
|
||||||
const args = node.arguments;
|
|
||||||
const first_arg = path.get('arguments')[0];
|
|
||||||
|
|
||||||
if (
|
|
||||||
is.identifier(callee) &&
|
|
||||||
callee.name === 'mount' &&
|
|
||||||
args.length === 2 &&
|
|
||||||
is.arrowFunctionExpression(first_arg) &&
|
|
||||||
is.callExpression(first_arg.node!.body)
|
|
||||||
) {
|
|
||||||
if (!is_svelte_import(path.get('callee'))) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const body = first_arg.get('body') as NodePath<CallExpression>;
|
|
||||||
const component_callee = body.node!.callee;
|
|
||||||
const component_args = body.node!.arguments[1];
|
|
||||||
|
|
||||||
if (!is.identifier(component_callee) || component_args == null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const component_binding = path.scope!.getBinding(component_callee.name);
|
|
||||||
|
|
||||||
if (
|
|
||||||
component_binding == null ||
|
|
||||||
!is.functionDeclaration(component_binding.path) ||
|
|
||||||
component_binding.references.length !== 1
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const component = component_binding.path;
|
|
||||||
const component_node = component.node!;
|
|
||||||
|
|
||||||
if (
|
|
||||||
component_node.params.length !== 3 ||
|
|
||||||
!is.identifier(component_node.params[1]) ||
|
|
||||||
component_node.params[1].name !== '$$props'
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// We have the root render node
|
|
||||||
const context: ComponentContext = {
|
|
||||||
parent: state.context as ModuleContext,
|
|
||||||
needs_template: state.context.needs_template,
|
|
||||||
type: 'component'
|
|
||||||
};
|
|
||||||
state.context = context;
|
|
||||||
const props = get_props(body.get('arguments')[1], null);
|
|
||||||
visit_component(component, null, props, state);
|
|
||||||
state.context = state.context.parent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
for (const [, component_state] of state.components) {
|
|
||||||
if (is_optimizable(component_state)) {
|
|
||||||
optimize_component(component_state);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return print(ast as Node).code;
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
const regex_tabs = /^\t+/;
|
|
||||||
|
|
||||||
/** @param {string} str */
|
|
||||||
function tabs_to_spaces(str) {
|
|
||||||
return str.replace(regex_tabs, /** @param {any} match */ (match) => match.split('\t').join(' '));
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {string} source
|
|
||||||
* @param {number} line
|
|
||||||
* @param {number} column
|
|
||||||
*/
|
|
||||||
export default function get_code_frame(source, line, column) {
|
|
||||||
const lines = source.split('\n');
|
|
||||||
|
|
||||||
const frame_start = Math.max(0, line - 2);
|
|
||||||
const frame_end = Math.min(line + 3, lines.length);
|
|
||||||
|
|
||||||
const digits = String(frame_end + 1).length;
|
|
||||||
|
|
||||||
return lines
|
|
||||||
.slice(frame_start, frame_end)
|
|
||||||
.map(
|
|
||||||
/**
|
|
||||||
* @param {any} str
|
|
||||||
* @param {any} i
|
|
||||||
*/ (str, i) => {
|
|
||||||
const is_error_line = frame_start + i === line;
|
|
||||||
const line_num = String(i + frame_start + 1).padStart(digits, ' ');
|
|
||||||
|
|
||||||
if (is_error_line) {
|
|
||||||
const indicator =
|
|
||||||
' '.repeat(digits + 2 + tabs_to_spaces(str.slice(0, column)).length) + '^';
|
|
||||||
return `${line_num}: ${tabs_to_spaces(str)}\n${indicator}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${line_num}: ${tabs_to_spaces(str)}`;
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.join('\n');
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
/** @param {import('#compiler').TemplateNode} node */
|
|
||||||
export function to_string(node) {
|
|
||||||
switch (node.type) {
|
|
||||||
case 'IfBlock':
|
|
||||||
return '{#if} block';
|
|
||||||
case 'AwaitBlock':
|
|
||||||
return '{#await} block';
|
|
||||||
case 'EachBlock':
|
|
||||||
return '{#each} block';
|
|
||||||
case 'HtmlTag':
|
|
||||||
return '{@html} block';
|
|
||||||
case 'DebugTag':
|
|
||||||
return '{@debug} block';
|
|
||||||
case 'ConstTag':
|
|
||||||
return '{@const} tag';
|
|
||||||
case 'RegularElement':
|
|
||||||
case 'Component':
|
|
||||||
case 'SlotElement':
|
|
||||||
case 'TitleElement':
|
|
||||||
return `<${node.name}> tag`;
|
|
||||||
default:
|
|
||||||
return node.type;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
/**
|
|
||||||
* Pushes all `items` into `array` using `push`, therefore mutating the array.
|
|
||||||
* We do this for memory and perf reasons, and because `array.push(...items)` would
|
|
||||||
* run into a "max call stack size exceeded" error with too many items (~65k).
|
|
||||||
* @param {T[]} array undefined
|
|
||||||
* @param {T[]} items undefined
|
|
||||||
* @template T
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
export function push_array(array, items) {
|
|
||||||
for (let i = 0; i < items.length; i++) {
|
|
||||||
array.push(items[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import { regex_starts_with_whitespaces, regex_ends_with_whitespaces } from '../../patterns.js';
|
|
||||||
|
|
||||||
/** @param {string} str */
|
|
||||||
export function trim_start(str) {
|
|
||||||
return str.replace(regex_starts_with_whitespaces, '');
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @param {string} str */
|
|
||||||
export function trim_end(str) {
|
|
||||||
return str.replace(regex_ends_with_whitespaces, '');
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue