Mekhi's blog

• Writings
• Notes
• Tags
• About

// conceptually...
const ctx = instance(/*...*/);
const fragment = create_fragment(ctx);
// to track which variable has changed
const dirty = new Set();
const $$invalidate = (variable, newValue) => {
    // update ctx
    ctx[variable] = newValue;
    // mark variable as dirty
    dirty.add(variable);
    // schedules update for the component
    scheduleUpdate(component);
};
 
// gets called when update is scheduled
function flushUpdate() {
    // update the fragment
    fragment.p(ctx, dirty);
    // clear the dirty
    dirty.clear();
}

name = 'Svelte';
count++;
foo.a = 1;
bar = baz = 3;
// compiled into
$$invalidate('name', (name = 'Svelte'));
$$invalidate('count', count++, count);
$$invalidate('foo', (foo.a = 1), foo);
$$invalidate('bar', (bar = $$invalidate('baz', (baz = 3))));

//https://github.com/sveltejs/svelte/blob/99a3cc93b66bf2c6be551e23101bfdbdb2c6bf72/packages/svelte/src/runtime/internal/Component.js#L124C2-L133C8
// 1. update the variable in $$.ctx
$$.ctx = instance
		? instance(component, options.props || {}, (i, ret, ...rest) => {
				const value = rest.length ? rest[0] : ret;
				if ($$.ctx && not_equal($$.ctx[i], ($$.ctx[i] = value))) {
					if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value);
					// 2a. mark the variable in $$.dirty
					if (ready) make_dirty(component, i);
				}
    			// 4. return the value of the assignment or update expression
				return ret;
		  })
		: [];
 
 
//https://github.com/sveltejs/svelte/blob/99a3cc93b66bf2c6be551e23101bfdbdb2c6bf72/packages/svelte/src/runtime/internal/Component.js#L78
/** @returns {void} */
function make_dirty(component, i) {
	if (component.$$.dirty[0] === -1) {
		dirty_components.push(component);
		// 3. schedule an update
		schedule_update();
		// initialise $$.dirty
		component.$$.dirty.fill(0);
	}
	// 2b. mark the variable in $$.dirty
	component.$$.dirty[(i / 31) | 0] |= 1 << i % 31;
}
 

$$.dirty = { givenName: true, familyName: false };

$$.dirty = [0b0000_0011]
// 0和1位标记为true

// set 1st boolean to true
0b0101 | 0b0010 = 0b0111;
 
// set 2nd boolean to false
0b0101 & 0b1011 = 0b0001;
 
// is 2nd boolean true?
((0b0101 & 0b0100) > 0) === true;
 
// NOTE: You can test multiple boolean values at once
// is 2nd and 3rd boolean true?
((0b0101 & 0b1100) > 0) === true;

function instance($$self, $$props, $$invalidate) {
  // ...
  return [givenName, familyName];
}

$$.ctx[0] + $$.ctx[1];

$$invalidate(0, (givenName = 'Li Hau'));

$$.dirty[0] |= 1 << 0;

if ($dirty[0] & 1) { /* ... */ }
if ($dirty[0] & 3) { /* ... */ }

<script>
  export let count = 0;
  // `doubled`, `tripled`, `quadrupled` are reactive
  $: doubled = count * 2;
  $: tripled = count * 3;
  $: quadrupled = doubled * 2;
</script>
{doubled} {tripled} {quadrupled}

function instance($$self, $$props, $$invalidate) {
    // ...
    $$self.$$.update = () => {
        if ($$self.$$.dirty & /*count*/ 8) {
            $: $$invalidate(0, doubled = count * 2);
        }
        if ($$self.$$.dirty & /*count*/ 8) {
            $: $$invalidate(1, tripled = count * 3);
        }
        if ($$self.$$.dirty & /*doubled*/ 1) {
            $: $$invalidate(2, quadrupled = doubled * 2);
        }
    };
    
	return [doubled, tripled, quadrupled, count];
}

<script>
// NOTE: use `count` in a reactive declaration before `count` is declared
$: doubled = count * 2;
let count = 1;
</script>
{count} * 2 = {doubled}

//https://github.com/sveltejs/svelte/blob/99a3cc93b66bf2c6be551e23101bfdbdb2c6bf72/packages/svelte/src/runtime/internal/scheduler.js#L113
function update($$) {
	if ($$.fragment !== null) {
		$$.update();
		run_all($$.before_update);
		const dirty = $$.dirty;
		$$.dirty = [-1];
		$$.fragment && $$.fragment.p($$.ctx, dirty);
		$$.after_update.forEach(add_render_callback);
	}
}

<script>
let givenName = '', familyName = '';
function update() {
    givenName = 'Li Hau';
    familyName = 'Tan';
}
$: name = givenName + " " + familyName;
$: console.log('name', name);
</script>

<script>
let givenName = '', familyName = '';
function update() {
    givenName = 'Li Hau';
    familyName = 'Tan';
    console.log('name', name); // Logs ''
}
$: name = givenName + " " + familyName;
</script>

<script>
let givenName = '', familyName = '';
function update() {
    givenName = 'Li Hau';
    familyName = 'Tan';
}
$: name = givenName + " " + familyName;
$: console.log('name', name); // Logs 'Li Hau Tan'
</script>

<script>
let count = 0;
// NOTE: refers to `doubled`
$: quadrupled = doubled * 2;
// NOTE: defined `doubled`
$: doubled = count * 2;
 
// compiles into:
 
$$self.$$.update = () => {
    // ...
    $: $$invalidate(/* doubled */, doubled = count * 2);
    $: $$invalidate(/* quadrupled */, quadrupled = doubled * 2);
    // ...
}
</script>

<script>
  let count = 0;
  $: doubled = count * 2;
</script>
{ count } x 2 = {doubled}

function instance($$self, $$props, $$invalidate) {
	let doubled;
	$: $$invalidate(0, doubled = count * 2);
	return [doubled];
}