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

oops

Browse Source
bind-get-set
Dominic Gannaway 21 hours ago
parent a42ba71f46
commit 5d76cddc05
13 changed files with 32 additions and 39 deletions
Show Stats Download Patch File Download Diff File

1
packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
Unescape View File

@ -24,7 +24,6 @@ export function BindDirective(node, context) {
validate_no_const_assignment(node, node.expression, context.state.scope, true);
const assignee = node.expression;
const left = object(assignee);
if (left === null) {

3
sites/svelte-5-preview/src/lib/Input/ComponentSelector.svelte
Unescape View File

@ -248,8 +248,7 @@
<input
autofocus
spellcheck={false}
bind:value
input_value}
bind:value={input_value}
on:focus={select_input}
on:blur={close_edit}
on:keydown={(e) => {

3
sites/svelte-5-preview/src/lib/Input/ModuleEditor.svelte
Unescape View File

@ -21,8 +21,7 @@
<div class="editor-wrapper">
<div class="editor notranslate" translate="no">
<CodeMirror
bind:this
$module_editor}
bind:this={$module_editor}
diagnostics={() => {
if (error) {
return [

3
sites/svelte-5-preview/src/lib/Output/AstNode.svelte
Unescape View File

@ -77,8 +77,7 @@
</script>
<li
bind:this
list_item_el}
bind:this={list_item_el}
class:marked={!is_root && is_leaf}
on:mouseover={handle_mark_text}
on:focus={handle_mark_text}

12
sites/svelte-5-preview/src/lib/Output/CompilerOptions.svelte
Unescape View File

@ -11,32 +11,32 @@
<div class="option">
<span class="key">generate:</span>
<input id="client" type="radio" bind:group $compile_options.generate} value="client" />
<input id="client" type="radio" bind:group={$compile_options.generate} value="client" />
<label for="client"><span class="string">"client"</span></label>
<input id="server" type="radio" bind:group $compile_options.generate} value="server" />
<input id="server" type="radio" bind:group={$compile_options.generate} value="server" />
<label for="server"><span class="string">"server"</span>,</label>
</div>
<div class="option">
<span class="key">css:</span>
<input id="injected" type="radio" bind:group $compile_options.css} value="injected" />
<input id="injected" type="radio" bind:group={$compile_options.css} value="injected" />
<label for="injected"><span class="string">"injected"</span></label>
<input id="external" type="radio" bind:group $compile_options.css} value="external" />
<input id="external" type="radio" bind:group={$compile_options.css} value="external" />
<label for="external"><span class="string">"external"</span>,</label>
</div>
<label class="option">
<span class="key">dev:</span>
<Checkbox bind:checked $compile_options.dev} />
<Checkbox bind:checked={$compile_options.dev} />
<span class="boolean">{$compile_options.dev}</span>,
</label>
<label class="option">
<span class="key">hmr:</span>
<Checkbox bind:checked $compile_options.hmr} />
<Checkbox bind:checked={$compile_options.hmr} />
<span class="boolean">{$compile_options.hmr}</span>,
</label>
});

9
sites/svelte-5-preview/src/lib/Output/Output.svelte
Unescape View File

@ -77,8 +77,7 @@
<!-- component viewer -->
<div class="tab-content" class:visible={selected?.type !== 'md' && view === 'result'}>
<Viewer
bind:error
runtimeError}
bind:error={runtimeError}
{status}
{relaxed}
{injectedJS}
@ -90,11 +89,11 @@
<!-- js output -->
<div class="tab-content" class:visible={selected?.type !== 'md' && view === 'js'}>
{#if embedded}
<CodeMirror bind:this js_editor} readonly />
<CodeMirror bind:this={js_editor} readonly />
{:else}
<PaneWithPanel pos="50%" panel="Compiler options">
<div slot="main">
<CodeMirror bind:this js_editor} readonly />
<CodeMirror bind:this={js_editor} readonly />
</div>
<div slot="panel-body">
@ -106,7 +105,7 @@
<!-- css output -->
<div class="tab-content" class:visible={selected?.type !== 'md' && view === 'css'}>
<CodeMirror bind:this css_editor} readonly />
<CodeMirror bind:this={css_editor} readonly />
</div>
<!-- ast output -->

3
sites/svelte-5-preview/src/lib/Output/Viewer.svelte
Unescape View File

@ -254,8 +254,7 @@
<iframe
title="Result"
class:inited
bind:this
iframe}
bind:this={iframe}
sandbox={[
'allow-popups-to-escape-sandbox',
'allow-scripts',

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

@ -338,7 +338,7 @@
<svelte:window on:beforeunload={before_unload} />
<div class="container" class:toggleable={$toggleable} bind:clientWidth width}>
<div class="container" class:toggleable={$toggleable} bind:clientWidth={width}>
<div class="viewport" class:output={show_output}>
<SplitPane
--color="var(--sk-text-4)"
@ -374,7 +374,7 @@
</div>
{#if $toggleable}
<InputOutputToggle bind:checked show_output} />
<InputOutputToggle bind:checked={show_output} />
{/if}
</div>

3
sites/svelte-5-preview/src/routes/+page.svelte
Unescape View File

@ -88,8 +88,7 @@
/>
<Repl
bind:this
repl}
bind:this={repl}
autocomplete={true}
on:add={change_from_editor}
on:change={change_from_editor}

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

@ -193,7 +193,7 @@ To run _side-effects_ when the component is mounted to the DOM, and when values
});
</script>
<canvas bind:this canvas} width="100" height="100" />
<canvas bind:this={canvas} width="100" height="100" />
```
The function passed to `$effect` will run when the component mounts, and will re-run after any changes to the values it reads that were declared with `$state` or `$derived` (including those passed in with `$props`). Re-runs are batched (i.e. changing `color` and `size` in the same moment won't cause two separate runs), and happen after any DOM updates have been applied.
@ -346,12 +346,12 @@ You might be tempted to do something convoluted with effects to link one value t
</script>
<label>
<input type="range" bind:value spent} max={total} />
<input type="range" bind:value={spent} max={total} />
{spent}/{total} spent
</label>
<label>
<input type="range" bind:value left} max={total} />
<input type="range" bind:value={left} max={total} />
{left}/{total} left
</label>
```
@ -414,12 +414,12 @@ If you need to use bindings, for whatever reason (for example when you want some
</script>
<label>
<input type="range" bind:value spent} max={total} />
<input type="range" bind:value={spent} max={total} />
{spent}/{total} spent
</label>
<label>
<input type="range" bind:value left.value} max={total} />
<input type="range" bind:value={left.value} max={total} />
{left.value}/{total} left
</label>
```
@ -467,7 +467,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
});
</script>
<div bind:this div}>
<div bind:this={div}>
{#each messages as message}
<p>{message}</p>
{/each}
@ -627,7 +627,7 @@ or array using [fine-grained reactivity](/docs/fine-grained-reactivity) will cau
</script>
<button onclick={() => count++}>Increment</button>
<input bind:value message} />
<input bind:value={message} />
```
`$inspect` returns a property `with`, which you can invoke with a callback, which will then be invoked instead of `console.log`. The first argument to the callback is either `"init"` or `"update"`, all following arguments are the values passed to `$inspect`. [Demo:](/#H4sIAAAAAAAACkVQ24qDMBD9lSEUqlTqPlsj7ON-w7pQG8c2VCchmVSK-O-bKMs-DefKYRYx6BG9qL4XQd2EohKf1opC8Nsm4F84MkbsTXAqMbVXTltuWmp5RAZlAjFIOHjuGLOP_BKVqB00eYuKs82Qn2fNjyxLtcWeyUE2sCRry3qATQIpJRyD7WPVMf9TW-7xFu53dBcoSzAOrsqQNyOe2XUKr0Xi5kcMvdDB2wSYO-I9vKazplV1-T-d6ltgNgSG1KjVUy7ZtmdbdjqtzRcphxMS1-XubOITJtPrQWMvKnYB15_1F7KKadA_AQAA)

10
sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
Unescape View File

@ -25,7 +25,7 @@ Forces any pending effects (including DOM updates) to be applied immediately, ra
}
</script>
<span bind:this element}>{count}</span>
<span bind:this={element}>{count}</span>
<button {onclick}>update</button>
```
@ -140,14 +140,14 @@ Svelte provides reactive `SvelteMap`, `SvelteSet`, `SvelteDate` and `SvelteURL`
</script>
<!-- changes to these... -->
<input bind:value url.protocol} />
<input bind:value url.hostname} />
<input bind:value url.pathname} />
<input bind:value={url.protocol} />
<input bind:value={url.hostname} />
<input bind:value={url.pathname} />
<hr />
<!-- will update `href` and vice versa -->
<input bind:value url.href} />
<input bind:value={url.href} />
```
## `svelte/events`

4
sites/svelte-5-preview/src/routes/docs/content/02-examples/02-fine-grained-reactivity.md
Unescape View File

@ -32,8 +32,8 @@ In Svelte 4, reactivity centres on the _component_ and the top-level state decla
{#each todos as todo}
<div>
<input bind:value todo.text} />
<input type="checkbox" bind:checked todo.done} />
<input bind:value={todo.text} />
<input type="checkbox" bind:checked={todo.done} />
</div>
{/each}

2
sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
Unescape View File

@ -228,7 +228,7 @@ This is [no longer true in Svelte 5](/#H4sIAAAAAAAAE4WQwU7DMAyGX8VESANpXe8lq9Q8A
let Thing = $state();
</script>
<select bind:value Thing}>
<select bind:value={Thing}>
<option value={A}>A</option>
<option value={B}>B</option>
</select>

Write Preview
Loading…
Cancel
Save