rename to raw

pull/11180/head
Dominic Gannaway 2 years ago
parent 8a23228312
commit 2ef6fdcc8b

@ -2,4 +2,4 @@
"svelte": patch "svelte": patch
--- ---
breaking: remove unstate(), replace with $state.clean rune breaking: remove unstate(), replace with $state.raw rune

@ -388,12 +388,12 @@ export const javascript_visitors_runes = {
return b.call('$.effect_active'); return b.call('$.effect_active');
} }
if (rune === '$state.clean') { if (rune === '$state.raw') {
const arg = const arg =
node.arguments.length > 0 node.arguments.length > 0
? /** @type {import('estree').Expression} */ (context.visit(node.arguments[0])) ? /** @type {import('estree').Expression} */ (context.visit(node.arguments[0]))
: b.id('undefined'); : b.id('undefined');
return b.call('$.clean', arg); return b.call('$.raw', arg);
} }
if (rune === '$effect.root') { if (rune === '$effect.root') {

@ -793,7 +793,7 @@ const javascript_visitors_runes = {
return b.literal(false); return b.literal(false);
} }
if (rune === '$state.clean') { if (rune === '$state.raw') {
const arg = const arg =
node.arguments.length > 0 node.arguments.length > 0
? /** @type {import('estree').Expression} */ (context.visit(node.arguments[0])) ? /** @type {import('estree').Expression} */ (context.visit(node.arguments[0]))

@ -31,7 +31,7 @@ export const PassiveEvents = ['wheel', 'touchstart', 'touchmove', 'touchend', 't
export const Runes = /** @type {const} */ ([ export const Runes = /** @type {const} */ ([
'$state', '$state',
'$state.frozen', '$state.frozen',
'$state.clean', '$state.raw',
'$props', '$props',
'$bindable', '$bindable',
'$derived', '$derived',

@ -127,7 +127,7 @@ export {
validate_store validate_store
} from './validate.js'; } from './validate.js';
export { raf } from './timing.js'; export { raf } from './timing.js';
export { proxy, clean } from './proxy.js'; export { proxy, raw } from './proxy.js';
export { create_custom_element } from './dom/elements/custom-element.js'; export { create_custom_element } from './dom/elements/custom-element.js';
export { export {
child, child,

@ -140,7 +140,7 @@ function unwrap(value, already_unwrapped) {
* @param {T} value * @param {T} value
* @returns {T} * @returns {T}
*/ */
export function clean(value) { export function raw(value) {
return /** @type {T} */ ( return /** @type {T} */ (
unwrap(/** @type {import('#client').ProxyStateObject} */ (value), new Map()) unwrap(/** @type {import('#client').ProxyStateObject} */ (value), new Map())
); );

@ -7,7 +7,7 @@ import {
object_freeze, object_freeze,
object_prototype object_prototype
} from './utils.js'; } from './utils.js';
import { clean } from './proxy.js'; import { raw } from './proxy.js';
import { destroy_effect, effect, user_pre_effect } from './reactivity/effects.js'; import { destroy_effect, effect, user_pre_effect } from './reactivity/effects.js';
import { import {
EFFECT, EFFECT,
@ -1173,7 +1173,7 @@ export function deep_read(value, visited = new Set()) {
*/ */
function deep_unstate(value, visited = new Map()) { function deep_unstate(value, visited = new Map()) {
if (typeof value === 'object' && value !== null && !visited.has(value)) { if (typeof value === 'object' && value !== null && !visited.has(value)) {
const unstated = clean(value); const unstated = raw(value);
if (unstated !== value) { if (unstated !== value) {
visited.set(value, unstated); visited.set(value, unstated);
return unstated; return unstated;
@ -1303,7 +1303,7 @@ export function freeze(value) {
if (typeof value === 'object' && value != null && !is_frozen(value)) { if (typeof value === 'object' && value != null && !is_frozen(value)) {
// If the object is already proxified, then unstate the value // If the object is already proxified, then unstate the value
if (STATE_SYMBOL in value) { if (STATE_SYMBOL in value) {
return object_freeze(clean(value)); return object_freeze(raw(value));
} }
// Otherwise freeze the object // Otherwise freeze the object
object_freeze(value); object_freeze(value);

@ -2,4 +2,4 @@
let items = $state([{a: 0}]); let items = $state([{a: 0}]);
</script> </script>
<button on:click={() => items.push({a: items.length})}>{JSON.stringify(structuredClone($state.clean(items)))}</button> <button on:click={() => items.push({a: items.length})}>{JSON.stringify(structuredClone($state.raw(items)))}</button>

@ -226,7 +226,7 @@
type: 'keyword', type: 'keyword',
boost: 4 boost: 4
}), }),
{ label: '$state.clean', type: 'keyword', boost: 3 }, { label: '$state.raw', type: 'keyword', boost: 3 },
snip('$effect.active()', { snip('$effect.active()', {
label: '$effect.active', label: '$effect.active',
type: 'keyword', type: 'keyword',

@ -112,9 +112,9 @@ Svelte provides reactive `Map`, `Set` and `Date` classes. These can be imported
<p>{map.get('message')}</p> <p>{map.get('message')}</p>
``` ```
## `$state.clean` ## `$state.raw`
To remove reactivity from objects and arrays created with `$state`, use `$state.clean`: To remove reactivity from objects and arrays created with `$state`, use `$state.raw`:
```svelte ```svelte
<script> <script>
@ -122,14 +122,14 @@ To remove reactivity from objects and arrays created with `$state`, use `$state.
$effect(() => { $effect(() => {
// Will log { count: 0 } // Will log { count: 0 }
console.log($state.clean(counter)); console.log($state.raw(counter));
}); });
</script> </script>
``` ```
This is handy when you want to pass some state to an external library or API that doesn't expect a reactive object such as `structuredClone`. This is handy when you want to pass some state to an external library or API that doesn't expect a reactive object such as `structuredClone`.
> Note that `$state.clean` will return a new object from the input when removing reactivity. If the object passed isn't reactive, it will be returned as is. > Note that `$state.raw` will return a new object from the input when removing reactivity. If the object passed isn't reactive, it will be returned as is.
## `$derived` ## `$derived`

Loading…
Cancel
Save