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

$derived.fn -> $derived.call

Browse Source
pull/10240/head
Rich Harris 3 years ago
parent f3681d8fc7
commit e3ff46e0de
13 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File

2
.changeset/nervous-spoons-relax.md
Unescape View File

@ -2,4 +2,4 @@
"svelte": patch
---
chore: add $derived.fn rune
chore: add $derived.call rune

6
packages/svelte/src/compiler/phases/2-analyze/index.js
Unescape View File

@ -674,7 +674,7 @@ const runes_scope_js_tweaker = {
rune !== '$state' &&
rune !== '$state.frozen' &&
rune !== '$derived' &&
rune !== '$derived.fn'
rune !== '$derived.call'
)
return;
@ -710,7 +710,7 @@ const runes_scope_tweaker = {
rune !== '$state' &&
rune !== '$state.frozen' &&
rune !== '$derived' &&
rune !== '$derived.fn' &&
rune !== '$derived.call' &&
rune !== '$props'
)
return;
@ -723,7 +723,7 @@ const runes_scope_tweaker = {
? 'state'
: rune === '$state.frozen'
? 'frozen_state'
: rune === '$derived' || rune === '$derived.fn'
: rune === '$derived' || rune === '$derived.call'
? 'derived'
: path.is_rest
? 'rest_prop'

2
packages/svelte/src/compiler/phases/2-analyze/validation.js
Unescape View File

@ -715,7 +715,7 @@ function validate_call_expression(node, scope, path) {
error(node, 'invalid-props-location');
}
if (rune === '$state' || rune === '$derived' || rune === '$derived.fn') {
if (rune === '$state' || rune === '$derived' || rune === '$derived.call') {
if (parent.type === 'VariableDeclarator') return;
if (parent.type === 'PropertyDefinition' && !parent.static && !parent.computed) return;
error(node, rune === '$derived' ? 'invalid-derived-location' : 'invalid-state-location');

2
packages/svelte/src/compiler/phases/3-transform/client/types.d.ts vendored
Unescape View File

@ -58,7 +58,7 @@ export interface ComponentClientTransformState extends ClientTransformState {
}
export interface StateField {
kind: 'state' | 'frozen_state' | 'derived' | 'derived_fn';
kind: 'state' | 'frozen_state' | 'derived' | 'derived_call';
id: PrivateIdentifier;
}

16
packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
Unescape View File

@ -33,7 +33,7 @@ export const javascript_visitors_runes = {
rune === '$state' ||
rune === '$state.frozen' ||
rune === '$derived' ||
rune === '$derived.fn'
rune === '$derived.call'
) {
/** @type {import('../types.js').StateField} */
const field = {
@ -42,8 +42,8 @@ export const javascript_visitors_runes = {
? 'state'
: rune === '$state.frozen'
? 'frozen_state'
: rune === '$derived.fn'
? 'derived_fn'
: rune === '$derived.call'
? 'derived_call'
: 'derived',
// @ts-expect-error this is set in the next pass
id: is_private ? definition.key : null
@ -102,7 +102,7 @@ export const javascript_visitors_runes = {
'$.source',
should_proxy_or_freeze(init) ? b.call('$.freeze', init) : init
)
: field.kind === 'derived_fn'
: field.kind === 'derived_call'
? b.call('$.derived', init)
: b.call('$.derived', b.thunk(init));
} else {
@ -146,7 +146,7 @@ export const javascript_visitors_runes = {
);
}
if ((field.kind === 'derived' || field.kind === 'derived_fn') && state.options.dev) {
if ((field.kind === 'derived' || field.kind === 'derived_call') && state.options.dev) {
body.push(
b.method(
'set',
@ -286,12 +286,12 @@ export const javascript_visitors_runes = {
continue;
}
if (rune === '$derived' || rune === '$derived.fn') {
if (rune === '$derived' || rune === '$derived.call') {
if (declarator.id.type === 'Identifier') {
declarations.push(
b.declarator(
declarator.id,
b.call('$.derived', rune === '$derived.fn' ? value : b.thunk(value))
b.call('$.derived', rune === '$derived.call' ? value : b.thunk(value))
)
);
} else {
@ -307,7 +307,7 @@ export const javascript_visitors_runes = {
b.block([
b.let(
declarator.id,
rune === '$derived.fn' ? b.call(value, b.id('$$derived')) : value
rune === '$derived.call' ? b.call(value, b.id('$$derived')) : value
),
b.return(b.array(bindings.map((binding) => binding.node)))
])

4
packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
Unescape View File

@ -558,7 +558,7 @@ const javascript_visitors_runes = {
: /** @type {import('estree').Expression} */ (visit(node.value.arguments[0]))
};
}
if (rune === '$derived.fn') {
if (rune === '$derived.call') {
return {
...node,
value:
@ -592,7 +592,7 @@ const javascript_visitors_runes = {
? b.id('undefined')
: /** @type {import('estree').Expression} */ (visit(args[0]));
if (rune === '$derived.fn') {
if (rune === '$derived.call') {
declarations.push(
b.declarator(
/** @type {import('estree').Pattern} */ (visit(declarator.id)),

2
packages/svelte/src/compiler/phases/constants.js
Unescape View File

@ -75,7 +75,7 @@ export const Runes = /** @type {const} */ ([
'$state.frozen',
'$props',
'$derived',
'$derived.fn',
'$derived.call',
'$effect',
'$effect.pre',
'$effect.active',

4
packages/svelte/src/main/ambient.d.ts vendored
Unescape View File

@ -62,11 +62,11 @@ declare function $derived<T>(expression: T): T;
declare namespace $derived {
/**
* Sometimes you need to create complex derivations which don't fit inside a short expression.
* In this case, you can resort to `$derived.fn` which accepts a function as its argument and returns its value.
* In this case, you can resort to `$derived.call` which accepts a function as its argument and returns its value.
*
* Example:
* ```ts
* $derived.fn(() => {
* $derived.call(() => {
* let tmp = count;
* if (count > 10) {
* tmp += 100;

2
packages/svelte/tests/runtime-runes/samples/class-state-derived-fn/main.svelte
Unescape View File

@ -1,7 +1,7 @@
<script>
class Counter {
count = $state(0);
doubled = $derived.fn(() => this.count * 2);
doubled = $derived.call(() => this.count * 2);
}
const counter = new Counter();

2
packages/svelte/tests/runtime-runes/samples/derived-fn/main.svelte
Unescape View File

@ -1,6 +1,6 @@
<script>
let count = $state(0);
let double = $derived.fn(() => count * 2);
let double = $derived.call(() => count * 2);
</script>
<button on:click={() => count++}>{double}</button>

36
packages/svelte/types/index.d.ts vendored
Unescape View File

@ -988,15 +988,15 @@ declare module 'svelte/compiler' {
filename?: string | undefined;
} | undefined): Promise<Processed>;
export class CompileError extends Error {
constructor(code: string, message: string, position: [number, number] | undefined);
filename: CompileError_1['filename'];
position: CompileError_1['position'];
start: CompileError_1['start'];
end: CompileError_1['end'];
code: string;
}
@ -1007,9 +1007,9 @@ declare module 'svelte/compiler' {
* */
export const VERSION: string;
class Scope {
constructor(root: ScopeRoot, parent: Scope | null, porous: boolean);
root: ScopeRoot;
/**
* A map of every identifier declared by this scope, and all the
@ -1033,25 +1033,25 @@ declare module 'svelte/compiler' {
* which is usually an error. Block statements do not increase this value
*/
function_depth: number;
declare(node: import('estree').Identifier, kind: Binding['kind'], declaration_kind: DeclarationKind, initial?: null | import('estree').Expression | import('estree').FunctionDeclaration | import('estree').ClassDeclaration | import('estree').ImportDeclaration | EachBlock): Binding;
child(porous?: boolean): Scope;
generate(preferred_name: string): string;
get(name: string): Binding | null;
get_bindings(node: import('estree').VariableDeclarator | LetDirective): Binding[];
owner(name: string): Scope | null;
reference(node: import('estree').Identifier, path: SvelteNode[]): void;
#private;
}
class ScopeRoot {
conflicts: Set<string>;
unique(preferred_name: string): import("estree").Identifier;
}
interface BaseNode {
@ -2464,11 +2464,11 @@ declare function $derived<T>(expression: T): T;
declare namespace $derived {
/**
* Sometimes you need to create complex derivations which don't fit inside a short expression.
* In this case, you can resort to `$derived.fn` which accepts a function as its argument and returns its value.
* In this case, you can resort to `$derived.call` which accepts a function as its argument and returns its value.
*
* Example:
* ```ts
* $derived.fn(() => {
* $derived.call(() => {
* let tmp = count;
* if (count > 10) {
* tmp += 100;
@ -2603,4 +2603,4 @@ declare function $inspect<T extends any[]>(
...values: T
): { with: (fn: (type: 'init' | 'update', ...values: T) => void) => void };
//# sourceMappingURL=index.d.ts.map
//# sourceMappingURL=index.d.ts.map

4
sites/svelte-5-preview/src/lib/CodeMirror.svelte
Unescape View File

@ -208,8 +208,8 @@
{ label: '$state', type: 'keyword', boost: 10 },
{ label: '$props', type: 'keyword', boost: 9 },
{ label: '$derived', type: 'keyword', boost: 8 },
snip('$derived.fn(() => {\n\t${}\n});', {
label: '$derived.fn',
snip('$derived.call(() => {\n\t${}\n});', {
label: '$derived.call',
type: 'keyword',
boost: 7
}),

6
sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
Unescape View File

@ -134,14 +134,14 @@ If the value of a reactive variable is being computed it should be replaced with
```
...`double` will be calculated first despite the source order. In runes mode, `triple` cannot reference `double` before it has been declared.
### `$derived.fn`
### `$derived.call`
Sometimes you need to create complex derivations which don't fit inside a short expression. In this case, you can resort to `$derived.fn` which accepts a function as its argument and returns its value.
Sometimes you need to create complex derivations which don't fit inside a short expression. In this case, you can resort to `$derived.call` which accepts a function as its argument and returns its value.
```svelte
<script>
let count = $state(0);
let complex = $derived.fn(() => {
let complex = $derived.call(() => {
let tmp = count;
if (count > 10) {
tmp += 100;

Write Preview
Loading…
Cancel
Save