msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix: improve partial evaluation (#15781)

Browse Source 
* init

* remove console log

* Update packages/svelte/src/compiler/phases/scope.js

* fix each indices

* dedupe

* Update packages/svelte/src/compiler/phases/scope.js

* always break

* fix formatting

* Apply suggestions from code review

* compactify

* compactify

* reuse values

* add more globals, template literals, try functions and (some) member expressions

* remove console logs

* remove function handling, tweak failing test

* changeset

* try putting static stuff in the template

* nevermind

* unused

* simplify

* Update packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js

* YAGNI

* simplify and fix (should use cooked, not raw)

* unused

* changeset

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
pull/15798/head
ComputerGuy 5 months ago committed by GitHub
parent 5b7af5e289
commit d0dcc0b795
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 243 additions and 24 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/serious-adults-sit.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': minor
---
feat: partially evaluate more expressions

10
packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
Unescape View File

@ -69,11 +69,17 @@ export function build_template_chunk(
node.metadata.expression
);
has_state ||= node.metadata.expression.has_state;
const evaluated = state.scope.evaluate(value);
has_state ||= node.metadata.expression.has_state && !evaluated.is_known;
if (values.length === 1) {
// If we have a single expression, then pass that in directly to possibly avoid doing
// extra work in the template_effect (instead we do the work in set_text).
if (evaluated.is_known) {
value = b.literal(evaluated.value);
}
return { value, has_state };
}
@ -89,8 +95,6 @@ export function build_template_chunk(
}
}
const evaluated = state.scope.evaluate(value);
if (evaluated.is_known) {
quasi.value.cooked += evaluated.value + '';
} else {

210
packages/svelte/src/compiler/phases/scope.js
Unescape View File

@ -1,4 +1,4 @@
/** @import { ArrowFunctionExpression, BinaryOperator, ClassDeclaration, Expression, FunctionDeclaration, FunctionExpression, Identifier, ImportDeclaration, MemberExpression, LogicalOperator, Node, Pattern, UnaryOperator, VariableDeclarator } from 'estree' */
/** @import { ArrowFunctionExpression, BinaryOperator, ClassDeclaration, Expression, FunctionDeclaration, FunctionExpression, Identifier, ImportDeclaration, MemberExpression, LogicalOperator, Node, Pattern, UnaryOperator, VariableDeclarator, Super } from 'estree' */
/** @import { Context, Visitor } from 'zimmerframe' */
/** @import { AST, BindingKind, DeclarationKind } from '#compiler' */
import is_reference from 'is-reference';
@ -18,8 +18,71 @@ import { validate_identifier_name } from './2-analyze/visitors/shared/utils.js';
const UNKNOWN = Symbol('unknown');
/** Includes `BigInt` */
const NUMBER = Symbol('number');
const STRING = Symbol('string');
export const NUMBER = Symbol('number');
export const STRING = Symbol('string');
/** @type {Record<string, [type: NUMBER | STRING | UNKNOWN, fn?: Function]>} */
const globals = {
BigInt: [NUMBER, BigInt],
'Math.min': [NUMBER, Math.min],
'Math.max': [NUMBER, Math.max],
'Math.random': [NUMBER],
'Math.floor': [NUMBER, Math.floor],
// @ts-expect-error
'Math.f16round': [NUMBER, Math.f16round],
'Math.round': [NUMBER, Math.round],
'Math.abs': [NUMBER, Math.abs],
'Math.acos': [NUMBER, Math.acos],
'Math.asin': [NUMBER, Math.asin],
'Math.atan': [NUMBER, Math.atan],
'Math.atan2': [NUMBER, Math.atan2],
'Math.ceil': [NUMBER, Math.ceil],
'Math.cos': [NUMBER, Math.cos],
'Math.sin': [NUMBER, Math.sin],
'Math.tan': [NUMBER, Math.tan],
'Math.exp': [NUMBER, Math.exp],
'Math.log': [NUMBER, Math.log],
'Math.pow': [NUMBER, Math.pow],
'Math.sqrt': [NUMBER, Math.sqrt],
'Math.clz32': [NUMBER, Math.clz32],
'Math.imul': [NUMBER, Math.imul],
'Math.sign': [NUMBER, Math.sign],
'Math.log10': [NUMBER, Math.log10],
'Math.log2': [NUMBER, Math.log2],
'Math.log1p': [NUMBER, Math.log1p],
'Math.expm1': [NUMBER, Math.expm1],
'Math.cosh': [NUMBER, Math.cosh],
'Math.sinh': [NUMBER, Math.sinh],
'Math.tanh': [NUMBER, Math.tanh],
'Math.acosh': [NUMBER, Math.acosh],
'Math.asinh': [NUMBER, Math.asinh],
'Math.atanh': [NUMBER, Math.atanh],
'Math.trunc': [NUMBER, Math.trunc],
'Math.fround': [NUMBER, Math.fround],
'Math.cbrt': [NUMBER, Math.cbrt],
Number: [NUMBER, Number],
'Number.isInteger': [NUMBER, Number.isInteger],
'Number.isFinite': [NUMBER, Number.isFinite],
'Number.isNaN': [NUMBER, Number.isNaN],
'Number.isSafeInteger': [NUMBER, Number.isSafeInteger],
'Number.parseFloat': [NUMBER, Number.parseFloat],
'Number.parseInt': [NUMBER, Number.parseInt],
String: [STRING, String],
'String.fromCharCode': [STRING, String.fromCharCode],
'String.fromCodePoint': [STRING, String.fromCodePoint]
};
/** @type {Record<string, any>} */
const global_constants = {
'Math.PI': Math.PI,
'Math.E': Math.E,
'Math.LN10': Math.LN10,
'Math.LN2': Math.LN2,
'Math.LOG10E': Math.LOG10E,
'Math.LOG2E': Math.LOG2E,
'Math.SQRT2': Math.SQRT2,
'Math.SQRT1_2': Math.SQRT1_2
};
export class Binding {
/** @type {Scope} */
@ -107,7 +170,7 @@ export class Binding {
class Evaluation {
/** @type {Set<any>} */
values = new Set();
values;
/**
* True if there is exactly one possible value
@ -147,8 +210,11 @@ class Evaluation {
*
* @param {Scope} scope
* @param {Expression} expression
* @param {Set<any>} values
*/
constructor(scope, expression) {
constructor(scope, expression, values) {
this.values = values;
switch (expression.type) {
case 'Literal': {
this.values.add(expression.value);
@ -172,15 +238,18 @@ class Evaluation {
binding.kind === 'rest_prop' ||
binding.kind === 'bindable_prop';
if (!binding.updated && binding.initial !== null && !is_prop) {
const evaluation = binding.scope.evaluate(/** @type {Expression} */ (binding.initial));
for (const value of evaluation.values) {
this.values.add(value);
}
if (binding.initial?.type === 'EachBlock' && binding.initial.index === expression.name) {
this.values.add(NUMBER);
break;
}
// TODO each index is always defined
if (!binding.updated && binding.initial !== null && !is_prop) {
binding.scope.evaluate(/** @type {Expression} */ (binding.initial), this.values);
break;
}
} else if (expression.name === 'undefined') {
this.values.add(undefined);
break;
}
// TODO glean what we can from reassignments
@ -336,6 +405,101 @@ class Evaluation {
break;
}
case 'CallExpression': {
const keypath = get_global_keypath(expression.callee, scope);
if (keypath) {
if (is_rune(keypath)) {
const arg = /** @type {Expression | undefined} */ (expression.arguments[0]);
switch (keypath) {
case '$state':
case '$state.raw':
case '$derived':
if (arg) {
scope.evaluate(arg, this.values);
} else {
this.values.add(undefined);
}
break;
case '$props.id':
this.values.add(STRING);
break;
case '$effect.tracking':
this.values.add(false);
this.values.add(true);
break;
case '$derived.by':
if (arg?.type === 'ArrowFunctionExpression' && arg.body.type !== 'BlockStatement') {
scope.evaluate(arg.body, this.values);
break;
}
this.values.add(UNKNOWN);
break;
default: {
this.values.add(UNKNOWN);
}
}
break;
}
if (
Object.hasOwn(globals, keypath) &&
expression.arguments.every((arg) => arg.type !== 'SpreadElement')
) {
const [type, fn] = globals[keypath];
const values = expression.arguments.map((arg) => scope.evaluate(arg));
if (fn && values.every((e) => e.is_known)) {
this.values.add(fn(...values.map((e) => e.value)));
} else {
this.values.add(type);
}
break;
}
}
this.values.add(UNKNOWN);
break;
}
case 'TemplateLiteral': {
let result = expression.quasis[0].value.cooked;
for (let i = 0; i < expression.expressions.length; i += 1) {
const e = scope.evaluate(expression.expressions[i]);
if (e.is_known) {
result += e.value + expression.quasis[i + 1].value.cooked;
} else {
this.values.add(STRING);
break;
}
}
this.values.add(result);
break;
}
case 'MemberExpression': {
const keypath = get_global_keypath(expression, scope);
if (keypath && Object.hasOwn(global_constants, keypath)) {
this.values.add(global_constants[keypath]);
break;
}
this.values.add(UNKNOWN);
break;
}
default: {
this.values.add(UNKNOWN);
}
@ -548,10 +712,10 @@ export class Scope {
* Only call this once scope has been fully generated in a first pass,
* else this evaluates on incomplete data and may yield wrong results.
* @param {Expression} expression
* @param {Set<any>} values
* @param {Set<any>} [values]
*/
evaluate(expression, values = new Set()) {
return new Evaluation(this, expression);
return new Evaluation(this, expression, values);
}
}
@ -1115,7 +1279,19 @@ export function get_rune(node, scope) {
if (!node) return null;
if (node.type !== 'CallExpression') return null;
let n = node.callee;
const keypath = get_global_keypath(node.callee, scope);
if (!keypath || !is_rune(keypath)) return null;
return keypath;
}
/**
* Returns the name of the rune if the given expression is a `CallExpression` using a rune.
* @param {Expression | Super} node
* @param {Scope} scope
*/
function get_global_keypath(node, scope) {
let n = node;
let joined = '';
@ -1133,12 +1309,8 @@ export function get_rune(node, scope) {
if (n.type !== 'Identifier') return null;
joined = n.name + joined;
if (!is_rune(joined)) return null;
const binding = scope.get(n.name);
if (binding !== null) return null; // rune name, but references a variable or store
return joined;
return n.name + joined;
}

3
packages/svelte/tests/snapshot/samples/each-index-non-null/_config.js
Unescape View File

@ -0,0 +1,3 @@
import { test } from '../../test';
export default test({});

19
packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client/index.svelte.js
Unescape View File

@ -0,0 +1,19 @@
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
var root_1 = $.template(`<p></p>`);
export default function Each_index_non_null($$anchor) {
var fragment = $.comment();
var node = $.first_child(fragment);
$.each(node, 0, () => Array(10), $.index, ($$anchor, $$item, i) => {
var p = root_1();
p.textContent = `index: ${i}`;
$.append($$anchor, p);
});
$.append($$anchor, fragment);
}

13
packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/server/index.svelte.js
Unescape View File

@ -0,0 +1,13 @@
import * as $ from 'svelte/internal/server';
export default function Each_index_non_null($$payload) {
const each_array = $.ensure_array_like(Array(10));
$$payload.out += `<!--[-->`;
for (let i = 0, $$length = each_array.length; i < $$length; i++) {
$$payload.out += `<p>index: ${$.escape(i)}</p>`;
}
$$payload.out += `<!--]-->`;
}

3
packages/svelte/tests/snapshot/samples/each-index-non-null/index.svelte
Unescape View File

@ -0,0 +1,3 @@
{#each Array(10), i}
<p>index: {i}</p>
{/each}

2
packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
Unescape View File

@ -8,7 +8,7 @@ export default function Purity($$anchor) {
var fragment = root();
var p = $.first_child(fragment);
p.textContent = Math.max(0, Math.min(0, 100));
p.textContent = 0;
var p_1 = $.sibling(p, 2);

2
packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
Unescape View File

@ -1,7 +1,7 @@
import * as $ from 'svelte/internal/server';
export default function Purity($$payload) {
$$payload.out += `<p>${$.escape(Math.max(0, Math.min(0, 100)))}</p> <p>${$.escape(location.href)}</p> `;
$$payload.out += `<p>0</p> <p>${$.escape(location.href)}</p> `;
Child($$payload, { prop: encodeURIComponent('hello') });
$$payload.out += `<!---->`;
}
Write Preview
Loading…
Cancel
Save