10000 Merge branch 'from-action' into from-action-remove-interface · sveltejs/svelte@d166cd6 · GitHub
[go: up one dir, main page]
Skip to content

Commit d166cd6

Browse files
Rich-HarrisRich-Harris
committed
Merge branch 'from-action' into from-action-remove-interface
2 parents 585d81c + 35a3b47 commit d166cd6

File tree

88 files changed

+1537
-714
lines changed
  • class-state-constructor-7
  • class-state-constructor-8
  • class-state-constructor-9
  • const-tag-invalid-rune-usage
  • types

    • Some content is hidden

    Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

    88 files changed

    +1537
    -714
    lines changed

    ‎.changeset/silly-apples-remain.md

    Lines changed: 0 additions & 5 deletions
    This file was deleted.

    ‎documentation/docs/02-runes/02-$state.md

    Lines changed: 3 additions & 5 deletions
    Original file line numberDiff line numberDiff line change
    @@ -67,16 +67,15 @@ todos[0].done = !todos[0].done;
    6767

    6868
    ### Classes
    6969

    70-
    You can also use `$state` in class fields (whether public or private):
    70+
    You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
    7171

    7272
    ```js
    7373
    // @errors: 7006 2554
    7474
    class Todo {
    7575
    done = $state(false);
    76-
    text = $state();
    7776

    7877
    constructor(text) {
    79-
    this.text = text;
    78+
    this.text = $state(text);
    8079
    }
    8180

    8281
    reset() {
    @@ -110,10 +109,9 @@ You can either use an inline function...
    110109
    // @errors: 7006 2554
    111110
    class Todo {
    112111
    done = $state(false);
    113-
    text = $state();
    114112

    115113
    constructor(text) {
    116-
    this.text = text;
    114+
    this.text = $state(text);
    117115
    }
    118116

    119117
    +++reset = () => {+++

    ‎documentation/docs/03-template-syntax/09-@attach.md

    Lines changed: 40 additions & 10 deletions
    Original file line numberDiff line numberDiff line change
    @@ -2,7 +2,9 @@
    22
    title: {@attach ...}
    33
    ---
    44

    5-
    Attachments are functions that run when an element is mounted to the DOM. Optionally, they can return a function that is called when the element is later removed from the DOM.
    5+
    Attachments are functions that run in an [effect]($effect) when an element is mounted to the DOM or when [state]($state) read inside the function updates.
    6+
    7+
    Optionally, they can return a function that is called before the attachment re-runs, or after the element is later removed from the DOM.
    68

    79
    > [!NOTE]
    810
    > Attachments are available in Svelte 5.29 and newer.
    @@ -55,7 +57,7 @@ A useful pattern is for a function, such as `tooltip` in this example, to _retur
    5557
    </button>
    5658
    ```
    5759

    58-
    Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes.
    60+
    Since the `tooltip(content)` expression runs inside an [effect]($effect), the attachment will be destroyed and recreated whenever `content` changes. The same thing would happen for any state read _inside_ the attachment function when it first runs. (If this isn't what you want, see [Controlling when attachments re-run](#Controlling-when-attachments-re-run).)
    5961

    6062
    ## Inline attachments
    6163

    @@ -126,9 +128,42 @@ This allows you to create _wrapper components_ that augment elements ([demo](/pl
    126128
    </Button>
    127129
    ```
    128130

    129-
    ### Converting actions to attachments
    131+
    ## Controlling when attachments re-run
    132+
    133+
    Attachments, unlike [actions](use), are fully reactive: `{@attach foo(bar)}` will re-run on changes to `foo` _or_ `bar` (or any state read inside `foo`):
    134+
    135+
    ```js
    136+
    // @errors: 7006 2304 2552
    137+
    function foo(bar) {
    138+
    return (node) => {
    139+
    veryExpensiveSetupWork(node);
    140+
    update(node, bar);
    141+
    };
    142+
    }
    143+
    ```
    144+
    145+
    In the rare case that this is a problem (for example, if `foo` does expensive and unavoidable setup work) consider passing the data inside a function and reading it in a child effect:
    146+
    147+
    ```js
    148+
    // @errors: 7006 2304 2552
    149+
    function foo(+++getBar+++) {
    150+
    return (node) => {
    151+
    veryExpensiveSetupWork(node);
    152+
    153+
    +++ $effect(() => {
    154+
    update(node, getBar());
    155+
    });+++
    156+
    }
    157+
    }
    158+
    ```
    159+
    160+
    ## Creating attachments programmatically
    161+
    162+
    To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
    130163

    131-
    If you want to use this functionality on Components but you are using a library that only provides actions you can use the `fromAction` utility exported from `svelte/attachments` to convert between the two.
    164+
    ## Converting actions to attachments
    165+
    166+
    If you want to use this function D7AE ality on components but you are using a library that only provides actions you can use the [`fromAction`](svelte/attachments#fromAction) utility.
    132167

    133168
    This function accept an action as the first argument and a function returning the arguments of the action as the second argument and returns an attachment.
    134169

    @@ -146,9 +181,4 @@ This function accept an action as the first argument and a function returning th
    146181
    {@attach fromAction(log, () => count)}
    147182
    >
    148183
    {count}
    149-
    </Button>
    150-
    ```
    151-
    152-
    ## Creating attachments programmatically
    153-
    154-
    To add attachments to an object that will be spread onto a component or element, use [`createAttachmentKey`](svelte-attachments#createAttachmentKey).
    184+
    </Button>

    ‎documentation/docs/06-runtime/02-context.md

    Lines changed: 1 addition & 1 deletion
    Original file line numberDiff line numberDiff line change
    @@ -125,7 +125,7 @@ In many cases this is perfectly fine, but there is a risk: if you mutate the sta
    125125
    ```svelte
    126126
    <!--- file: App.svelte ---->
    127127
    <script>
    128-
    import { myGlobalState } from 'svelte';
    128+
    import { myGlobalState } from './state.svelte.js';
    129129
    130130
    let { data } = $props();
    131131

    ‎documentation/docs/98-reference/.generated/compile-errors.md

    Lines changed: 33 additions & 1 deletion
    Original file line numberDiff line numberDiff line change
    @@ -846,6 +846,38 @@ Cannot reassign or bind to snippet parameter
    846846
    This snippet is shadowing the prop `%prop%` with the same name
    847847
    ```
    848848

    849+
    ### state_field_duplicate
    850+
    851+
    ```
    852+
    `%name%` has already been declared on this class
    853+
    ```
    854+
    855+
    An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
    856+
    857+
    ```js
    858+
    class Counter {
    859+
    count = $state(0);
    860+
    }
    861+
    ```
    862+
    863+
    ...or inside the constructor...
    864+
    865+
    ```js
    866+
    class Counter {
    867+
    constructor() {
    868+
    this.count = $state(0);
    869+
    }
    870+
    }
    871+
    ```
    872+
    873+
    ...but it can only happen once.
    874+
    875+
    ### state_field_invalid_assignment
    876+
    877+
    ```
    878+
    Cannot assign to a state field before its declaration
    879+
    ```
    880+
    849881
    ### state_invalid_export
    850882

    851883
    ```
    @@ -855,7 +887,7 @@ Cannot export state from a module if it is reassigned. Either export a function
    855887
    ### state_invalid_placement
    856888

    857889
    ```
    858-
    `%rune%(...)` can only be used as a variable declaration initializer or a class field
    890+
    `%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
    859891
    ```
    860892

    861893
    ### store_invalid_scoped_subscription

    ‎packages/svelte/CHANGELOG.md

    Lines changed: 24 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1,5 +1,29 @@
    11
    # svelte
    22

    3+
    ## 5.31.1
    4+
    5+
    ### Patch Changes
    6+
    7+
    - fix: avoid auto-parenthesis for special-keywords-only `MediaQuery` ([#15937](https://github.com/sveltejs/svelte/pull/15937))
    8+
    9+
    ## 5.31.0
    10+
    11+
    ### Minor Changes
    12+
    13+
    - feat: allow state fields to be declared inside class constructors ([#15820](https://github.com/sveltejs/svelte/pull/15820))
    14+
    15+
    ### Patch Changes
    16+
    17+
    - fix: Add missing `AttachTag` in `Tag` union type inside the `AST` namespace from `"svelte/compiler"` ([#15946](https://github.com/sveltejs/svelte/pull/15946))
    18+
    19+
    ## 5.30.2
    20+
    21+
    ### Patch Changes
    22+
    23+
    - fix: falsy attachments types ([#15939](https://github.com/sveltejs/svelte/pull/15939))
    24+
    25+
    - fix: handle more hydration mismatches ([#15851](https://github.com/sveltejs/svelte/pull/15851))
    26+
    327
    ## 5.30.1
    428

    529
    ### Patch Changes

    ‎packages/svelte/elements.d.ts

    Lines changed: 2 additions & 2 deletions
    Original file line numberDiff line numberDiff line change
    @@ -863,8 +863,8 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
    863863
    // allow any data- attribute
    864864
    [key: `data-${string}`]: any;
    865865

    866-
    // allow any attachment
    867-
    [key: symbol]: Attachment<T>;
    866+
    // allow any attachment and falsy values (by using false we prevent the usage of booleans values by themselves)
    867+
    [key: symbol]: Attachment<T> | false | undefined | null;
    868868
    }
    869869

    870870
    export type HTMLAttributeAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {});

    ‎packages/svelte/messages/compile-errors/script.md

    Lines changed: 29 additions & 1 deletion
    Original file line numberDiff line numberDiff line change
    @@ -212,13 +212,41 @@ It's possible to export a snippet from a `<script module>` block, but only if it
    212212

    213213
    > Cannot reassign or bind to snippet parameter
    214214
    215+
    ## state_field_duplicate
    216+
    217+
    > `%name%` has already been declared on this class
    218+
    219+
    An assignment to a class field that uses a `$state` or `$derived` rune is considered a _state field declaration_. The declaration can happen in the class body...
    220+
    221+
    ```js
    222+
    class Counter {
    223+
    count = $state(0);
    224+
    }
    225+
    ```
    226+
    227+
    ...or inside the constructor...
    228+
    229+
    ```js
    230+
    class Counter {
    231+
    constructor() {
    232+
    this.count = $state(0);
    233+
    }
    234+
    }
    235+
    ```
    236+
    237+
    ...but it can only happen once.
    238+
    239+
    ## state_field_invalid_assignment
    240+
    241+
    > Cannot assign to a state field before its declaration
    242+
    215243
    ## state_invalid_export
    216244

    217245
    > Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
    218246
    219247
    ## state_invalid_placement
    220248

    221-
    > `%rune%(...)` can only be used as a variable declaration initializer or a class field
    249+
    > `%rune%(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.
    222250
    223251
    ## store_invalid_scoped_subscription
    224252

    ‎packages/svelte/package.json

    Lines changed: 2 additions & 2 deletions
    Original file line numberDiff line numberDiff line change
    @@ -2,7 +2,7 @@
    22
    "name": "svelte",
    33
    "description": "Cybernetically enhanced web apps",
    44
    "license": "MIT",
    5-
    "version": "5.30.1",
    5+
    "version": "5.31.1",
    66
    "type": "module",
    77
    "types": "./types/index.d.ts",
    88
    "engines": {
    @@ -136,7 +136,7 @@
    136136
    ],
    137137
    "scripts": {
    138138
    "build": "node scripts/process-messages && rollup -c && pnpm generate:types && node scripts/check-treeshakeability.js",
    139-
    "dev": "node scripts/process-messages && rollup -cw",
    139+
    "dev": "node scripts/process-messages -w & rollup -cw",
    140140
    "check": "tsc --project tsconfig.runtime.json && tsc && cd ./tests/types && tsc",
    141141
    "check:watch": "tsc --watch",
    142142
    "generate:version": "node ./scripts/generate-version.js",

    0 commit comments

    Comments
     (0)
    0