mirror of https://github.com/sveltejs/svelte
Rich Harris
4 months ago
committed by
GitHub
commit
35a3b473c7
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: handle more hydration mismatches
|
||||
@ -1,30 +1,107 @@
|
||||
/** @import { ClassBody } from 'estree' */
|
||||
/** @import { AssignmentExpression, CallExpression, ClassBody, PropertyDefinition, Expression, PrivateIdentifier, MethodDefinition } from 'estree' */
|
||||
/** @import { StateField } from '#compiler' */
|
||||
/** @import { Context } from '../types' */
|
||||
import * as b from '#compiler/builders';
|
||||
import { get_rune } from '../../scope.js';
|
||||
import * as e from '../../../errors.js';
|
||||
import { is_state_creation_rune } from '../../../../utils.js';
|
||||
import { get_name } from '../../nodes.js';
|
||||
import { regex_invalid_identifier_chars } from '../../patterns.js';
|
||||
|
||||
/**
|
||||
* @param {ClassBody} node
|
||||
* @param {Context} context
|
||||
*/
|
||||
export function ClassBody(node, context) {
|
||||
/** @type {{name: string, private: boolean}[]} */
|
||||
const derived_state = [];
|
||||
if (!context.state.analysis.runes) {
|
||||
context.next();
|
||||
return;
|
||||
}
|
||||
|
||||
/** @type {string[]} */
|
||||
const private_ids = [];
|
||||
|
||||
for (const definition of node.body) {
|
||||
for (const prop of node.body) {
|
||||
if (
|
||||
definition.type === 'PropertyDefinition' &&
|
||||
(definition.key.type === 'PrivateIdentifier' || definition.key.type === 'Identifier') &&
|
||||
definition.value?.type === 'CallExpression'
|
||||
(prop.type === 'MethodDefinition' || prop.type === 'PropertyDefinition') &&
|
||||
prop.key.type === 'PrivateIdentifier'
|
||||
) {
|
||||
const rune = get_rune(definition.value, context.state.scope);
|
||||
if (rune === '$derived' || rune === '$derived.by') {
|
||||
derived_state.push({
|
||||
name: definition.key.name,
|
||||
private: definition.key.type === 'PrivateIdentifier'
|
||||
private_ids.push(prop.key.name);
|
||||
}
|
||||
}
|
||||
|
||||
/** @type {Map<string, StateField>} */
|
||||
const state_fields = new Map();
|
||||
|
||||
context.state.analysis.classes.set(node, state_fields);
|
||||
|
||||
/** @type {MethodDefinition | null} */
|
||||
let constructor = null;
|
||||
|
||||
/**
|
||||
* @param {PropertyDefinition | AssignmentExpression} node
|
||||
* @param {Expression | PrivateIdentifier} key
|
||||
* @param {Expression | null | undefined} value
|
||||
*/
|
||||
function handle(node, key, value) {
|
||||
const name = get_name(key);
|
||||
if (name === null) return;
|
||||
|
||||
const rune = get_rune(value, context.state.scope);
|
||||
|
||||
if (rune && is_state_creation_rune(rune)) {
|
||||
if (state_fields.has(name)) {
|
||||
e.state_field_duplicate(node, name);
|
||||
}
|
||||
|
||||
state_fields.set(name, {
|
||||
node,
|
||||
type: rune,
|
||||
// @ts-expect-error for public state this is filled out in a moment
|
||||
key: key.type === 'PrivateIdentifier' ? key : null,
|
||||
value: /** @type {CallExpression} */ (value)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
for (const child of node.body) {
|
||||
if (child.type === 'PropertyDefinition' && !child.computed && !child.static) {
|
||||
handle(child, child.key, child.value);
|
||||
}
|
||||
|
||||
if (child.type === 'MethodDefinition' && child.kind === 'constructor') {
|
||||
constructor = child;
|
||||
}
|
||||
}
|
||||
|
||||
if (constructor) {
|
||||
for (const statement of constructor.value.body.body) {
|
||||
if (statement.type !== 'ExpressionStatement') continue;
|
||||
if (statement.expression.type !== 'AssignmentExpression') continue;
|
||||
|
||||
const { left, right } = statement.expression;
|
||||
|
||||
if (left.type !== 'MemberExpression') continue;
|
||||
if (left.object.type !== 'ThisExpression') continue;
|
||||
if (left.computed && left.property.type !== 'Literal') continue;
|
||||
|
||||
handle(statement.expression, left.property, right);
|
||||
}
|
||||
}
|
||||
|
||||
for (const [name, field] of state_fields) {
|
||||
if (name[0] === '#') {
|
||||
continue;
|
||||
}
|
||||
|
||||
let deconflicted = name.replace(regex_invalid_identifier_chars, '_');
|
||||
while (private_ids.includes(deconflicted)) {
|
||||
deconflicted = '_' + deconflicted;
|
||||
}
|
||||
|
||||
private_ids.push(deconflicted);
|
||||
field.key = b.private_id(deconflicted);
|
||||
}
|
||||
|
||||
context.next({ ...context.state, derived_state });
|
||||
context.next({ ...context.state, state_fields });
|
||||
}
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
/** @import { PropertyDefinition } from 'estree' */
|
||||
/** @import { Context } from '../types' */
|
||||
import * as e from '../../../errors.js';
|
||||
import { get_name } from '../../nodes.js';
|
||||
|
||||
/**
|
||||
* @param {PropertyDefinition} node
|
||||
* @param {Context} context
|
||||
*/
|
||||
export function PropertyDefinition(node, context) {
|
||||
const name = get_name(node.key);
|
||||
const field = name && context.state.state_fields.get(name);
|
||||
|
||||
if (field && node !== field.node && node.value) {
|
||||
if (/** @type {number} */ (node.start) < /** @type {number} */ (field.node.start)) {
|
||||
e.state_field_invalid_assignment(node);
|
||||
}
|
||||
}
|
||||
|
||||
context.next();
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
/** @import { MemberExpression } from 'estree' */
|
||||
/** @import { Context } from '../types.js' */
|
||||
import * as b from '#compiler/builders';
|
||||
|
||||
/**
|
||||
* @param {MemberExpression} node
|
||||
* @param {Context} context
|
||||
*/
|
||||
export function MemberExpression(node, context) {
|
||||
if (
|
||||
context.state.analysis.runes &&
|
||||
node.object.type === 'ThisExpression' &&
|
||||
node.property.type === 'PrivateIdentifier'
|
||||
) {
|
||||
const field = context.state.private_derived.get(node.property.name);
|
||||
|
||||
if (field) {
|
||||
return b.call(node);
|
||||
}
|
||||
}
|
||||
|
||||
context.next();
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>10</button>`,
|
||||
ssrHtml: `<button>0</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>10</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
class Counter {
|
||||
constructor() {
|
||||
this.count = $state(0);
|
||||
$effect(() => {
|
||||
this.count = 10;
|
||||
});
|
||||
}
|
||||
}
|
||||
const counter = new Counter();
|
||||
</script>
|
||||
|
||||
<button on:click={() => counter.count++}>{counter.count}</button>
|
||||
@ -0,0 +1,13 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>10</button>`,
|
||||
ssrHtml: `<button>0</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>10</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
const counter = new class Counter {
|
||||
constructor() {
|
||||
this.count = $state(0);
|
||||
$effect(() => {
|
||||
this.count = 10;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<button on:click={() => counter.count++}>{counter.count}</button>
|
||||
@ -0,0 +1,3 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({});
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
class Test {
|
||||
0 = $state();
|
||||
|
||||
constructor() {
|
||||
this[1] = $state();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,45 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
// The component context class instance gets shared between tests, strangely, causing hydration to fail?
|
||||
mode: ['client', 'server'],
|
||||
|
||||
async test({ assert, target, logs }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1]);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1, 2]);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1, 2, 3]);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [
|
||||
0,
|
||||
'class trigger false',
|
||||
'local trigger false',
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
'class trigger true',
|
||||
'local trigger true'
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,37 @@
|
||||
<script module>
|
||||
class SomeLogic {
|
||||
trigger() {
|
||||
this.someValue++;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this.someValue = $state(0);
|
||||
this.isAboveThree = $derived(this.someValue > 3);
|
||||
}
|
||||
}
|
||||
|
||||
const someLogic = new SomeLogic();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function increment() {
|
||||
someLogic.trigger();
|
||||
}
|
||||
|
||||
let localDerived = $derived(someLogic.someValue > 3);
|
||||
|
||||
$effect(() => {
|
||||
console.log(someLogic.someValue);
|
||||
});
|
||||
$effect(() => {
|
||||
console.log('class trigger ' + someLogic.isAboveThree)
|
||||
});
|
||||
$effect(() => {
|
||||
console.log('local trigger ' + localDerived)
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<button on:click={increment}>
|
||||
clicks: {someLogic.someValue}
|
||||
</button>
|
||||
@ -0,0 +1,20 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>0</button>`,
|
||||
|
||||
test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, `<button>1</button>`);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, `<button>2</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
class Counter {
|
||||
count;
|
||||
|
||||
constructor(count) {
|
||||
this.count = $state(count);
|
||||
}
|
||||
}
|
||||
const counter = new Counter(0);
|
||||
</script>
|
||||
|
||||
<button onclick={() => counter.count++}>{counter.count}</button>
|
||||
@ -0,0 +1,20 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>10: 20</button>`,
|
||||
|
||||
test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, `<button>11: 22</button>`);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, `<button>12: 24</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
class Counter {
|
||||
constructor(initial) {
|
||||
this.count = $state(initial);
|
||||
}
|
||||
|
||||
increment = () => {
|
||||
this.count++;
|
||||
}
|
||||
}
|
||||
|
||||
class PluggableCounter extends Counter {
|
||||
constructor(initial, plugin) {
|
||||
super(initial)
|
||||
this.custom = $derived(plugin(this.count));
|
||||
}
|
||||
}
|
||||
|
||||
const counter = new PluggableCounter(10, (count) => count * 2);
|
||||
</script>
|
||||
|
||||
<button onclick={counter.increment}>{counter.count}: {counter.custom}</button>
|
||||
@ -0,0 +1,20 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>20</button>`,
|
||||
|
||||
test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, `<button>22</button>`);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, `<button>24</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
class Counter {
|
||||
/** @type {number} */
|
||||
#count;
|
||||
|
||||
constructor(initial) {
|
||||
this.#count = $state(initial);
|
||||
this.doubled = $derived(this.#count * 2);
|
||||
}
|
||||
|
||||
increment = () => {
|
||||
this.#count++;
|
||||
}
|
||||
}
|
||||
const counter = new Counter(10);
|
||||
</script>
|
||||
|
||||
<button onclick={counter.increment}>{counter.doubled}</button>
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_field_duplicate",
|
||||
"message": "`count` has already been declared on this class",
|
||||
"start": {
|
||||
"line": 5,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 24
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
count = $state(0);
|
||||
|
||||
constructor() {
|
||||
this.count = $state(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_field_invalid_assignment",
|
||||
"message": "Cannot assign to a state field before its declaration",
|
||||
"start": {
|
||||
"line": 4,
|
||||
"column": 3
|
||||
},
|
||||
"end": {
|
||||
"line": 4,
|
||||
"column": 18
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,9 @@
|
||||
export class Counter {
|
||||
constructor() {
|
||||
if (true) {
|
||||
this.count = -1;
|
||||
}
|
||||
|
||||
this.count = $state(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_field_duplicate",
|
||||
"message": "`count` has already been declared on this class",
|
||||
"start": {
|
||||
"line": 5,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 24
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
constructor() {
|
||||
this.count = $state(0);
|
||||
this.count = 1;
|
||||
this.count = $state(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_field_duplicate",
|
||||
"message": "`count` has already been declared on this class",
|
||||
"start": {
|
||||
"line": 5,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 28
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
constructor() {
|
||||
this.count = $state(0);
|
||||
this.count = 1;
|
||||
this.count = $state.raw(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_invalid_placement",
|
||||
"message": "`$state(...)` 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.",
|
||||
"start": {
|
||||
"line": 4,
|
||||
"column": 16
|
||||
},
|
||||
"end": {
|
||||
"line": 4,
|
||||
"column": 25
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
constructor() {
|
||||
if (true) {
|
||||
this.count = $state(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_field_duplicate",
|
||||
"message": "`count` has already been declared on this class",
|
||||
"start": {
|
||||
"line": 5,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 27
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
// prettier-ignore
|
||||
'count' = $state(0);
|
||||
constructor() {
|
||||
this['count'] = $state(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_field_duplicate",
|
||||
"message": "`count` has already been declared on this class",
|
||||
"start": {
|
||||
"line": 4,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 4,
|
||||
"column": 27
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,6 @@
|
||||
export class Counter {
|
||||
count = $state(0);
|
||||
constructor() {
|
||||
this['count'] = $state(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_invalid_placement",
|
||||
"message": "`$state(...)` 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.",
|
||||
"start": {
|
||||
"line": 5,
|
||||
"column": 16
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 25
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
const count = 'count';
|
||||
|
||||
export class Counter {
|
||||
constructor() {
|
||||
this[count] = $state(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_field_invalid_assignment",
|
||||
"message": "Cannot assign to a state field before its declaration",
|
||||
"start": {
|
||||
"line": 3,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 3,
|
||||
"column": 17
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,6 @@
|
||||
export class Counter {
|
||||
constructor() {
|
||||
this.count = -1;
|
||||
this.count = $state(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_field_invalid_assignment",
|
||||
"message": "Cannot assign to a state field before its declaration",
|
||||
"start": {
|
||||
"line": 2,
|
||||
"column": 1
|
||||
},
|
||||
"end": {
|
||||
"line": 2,
|
||||
"column": 12
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
count = -1;
|
||||
|
||||
constructor() {
|
||||
this.count = $state(0);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue