ronantakizawa/codereview-bench huggingface dataset:
Repository: sveltejs/svelte
File: packages/svelte/src/index.d.ts (TypeScript)

Code before:
			? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
			: undefined extends EventMap[Type]
				? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
				: [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
	): boolean;
}

/**
 * Defines the options accepted by the `mount()` function.
 */
export type MountOptions<Props extends Record<string, any> = Record<string, any>> = {
	/**
	 * Target element where the component will be mounted.
	 */
	target: Document | Element | ShadowRoot;
	/**
	 * Optional node inside `target`. When specified, it is used to render the component immediately before it.
	 */
	anchor?: Node;
	/**
	 * Allows the specification of events.
	 * @deprecated Use callback props instead.
	 */
	events?: Record<string, (e: any) => any>;
	/**
	 * Context that can be access via `getContext()` at the component level.
	 */
	context?: Map<any, any>;
	/**
	 * Whether or not to play transitions on initial render.
	 * @default true
	 */
	intro?: boolean;
} & ({} extends Props
	? {
			/**
			 * Component properties.
			 */
			props?: Props;
		}
	: {
			/**
			 * Component properties.
			 */
			props: Props;
		});

export * from './index-client.js';


Review comment (suggestion):
don't think you need to lead off with saying it's "Context" since that's the variable name and you say it's returned from `getContext`
```suggestion
	 * Can be accessed via `getContext()` at the component level.
```

Code after:
			? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
			: undefined extends EventMap[Type]
				? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
				: [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
	): boolean;
}

/**
 * Defines the options accepted by the `mount()` function.
 */
export type MountOptions<Props extends Record<string, any> = Record<string, any>> = {
	/**
	 * Target element where the component will be mounted.
	 */
	target: Document | Element | ShadowRoot;
	/**
	 * Optional node inside `target`. When specified, it is used to render the component immediately before it.
	 */
	anchor?: Node;
	/**
	 * Allows the specification of events.
	 * @deprecated Use callback props instead.
	 */
	events?: Record<string, (e: any) => any>;
	/**
	 * Can be accessed via `getContext()` at the component level.
	 */
	context?: Map<any, any>;
	/**
	 * Whether or not to play transitions on initial render.
	 * @default true
	 */
	intro?: boolean;
} & ({} extends Props
	? {
			/**
			 * Component properties.
			 */
			props?: Props;
		}
	: {
			/**
			 * Component properties.
			 */
			props: Props;
		});

export * from './index-client.js';
Repository: sveltejs/svelte
File: packages/svelte/tests/migrate/samples/is-not-where-has/input.svelte (Svelte)

Code before:
```css
	:has(.is_cool)
```

<style lang="postcss">
	div:has(span){}
	div > :not(span){}
	div > :is(span){}
	div > :where(span){}

	div:has(:is(span)){}
	div > :not(:is(span)){}
	div > :is(:is(span)){}
	div > :where(:is(span)){}

	div:has(.class:is(span)){}
	div > :not(.class:is(span)){}
	div > :is(.class:is(span)){}
	div > :where(.class:is(span)){}

	div :has(.class:is(span:where(:focus))){}
	div :not(.class:is(span:where(:focus-within))){}
	div :is(.class:is(span:is(:hover))){}
	div :where(.class:is(span:has(* > *))){}


	div{
		p:has(&){

		}
		:not(span > *){
			:where(form){}
		}
	}
</style>

Review comment (suggestion):
```suggestion
div :is(.class:is(span:is(:hover)), .x){}
```

Code after:
```css
	:has(.is_cool)
```

<style lang="postcss">
	div:has(span){}
	div > :not(span){}
	div > :is(span){}
	div > :where(span){}

	div:has(:is(span)){}
	div > :not(:is(span)){}
	div > :is(:is(span)){}
	div > :where(:is(span)){}

	div:has(.class:is(span)){}
	div > :not(.class:is(span)){}
	div > :is(.class:is(span)){}
	div > :where(.class:is(span)){}

	div :has(.class:is(span:where(:focus))){}
	div :not(.class:is(span:where(:focus-within))){}
	div :is(.class:is(span:is(:hover))){}
	div :where(.class:is(span:has(* > *))){}
	div :is(.class:is(span:is(:hover)), .x){}

	div :has(    :global(.class:is(span:where(:focus)))){}
	div :not(:global(.class:is(span:where(:focus-within)))){}
	div :is(:global(.class:is(span:is(:hover)))){}
	div :where(:global(.class:is(span:has(* > *)))){}
	div :is(:global(.class:is(span:is(:hover)), .x)){}

	div{
		p:has(&){

		}
		:not(span > *){
			:where(form){}
		}
	}
</style>
Repository: sveltejs/svelte
File: packages/svelte/tests/migrate/samples/is-not-where-has/output.svelte (Svelte)

Code before:
```css
	:has(.is_cool)
```

<style lang="postcss">
	div:has(:global(span)){}
	div > :not(:global(span)){}
	div > :is(:global(span)){}
	div > :where(:global(span)){}

	div:has(:global(:is(span))){}
	div > :not(:global(:is(span))){}
	div > :is(:global(:is(span))){}
	div > :where(:global(:is(span))){}

	div:has(:global(.class:is(span))){}
	div > :not(:global(.class:is(span))){}
	div > :is(:global(.class:is(span))){}
	div > :where(:global(.class:is(span))){}

	div :has(:global(.class:is(span:where(:focus)))){}
	div :not(:global(.class:is(span:where(:focus-within)))){}
	div :is(:global(.class:is(span:is(:hover)))){}
	div :where(:global(.class:is(span:has(* > *)))){}


	div{
		p:has(:global(&)){

		}
		:not(:global(span > *)){
			:where(:global(form)){}
		}
	}
</style>

Review comment (suggestion):
```suggestion
div :is(:global(.class:is(span:is(:hover)), .x)){}
```

Code after:
```css
	:has(.is_cool)
```

<style lang="postcss">
	div:has(:global(span)){}
	div > :not(:global(span)){}
	div > :is(:global(span)){}
	div > :where(:global(span)){}

	div:has(:global(:is(span))){}
	div > :not(:global(:is(span))){}
	div > :is(:global(:is(span))){}
	div > :where(:global(:is(span))){}

	div:has(:global(.class:is(span))){}
	div > :not(:global(.class:is(span))){}
	div > :is(:global(.class:is(span))){}
	div > :where(:global(.class:is(span))){}

	div :has(:global(.class:is(span:where(:focus)))){}
	div :not(:global(.class:is(span:where(:focus-within)))){}
	div :is(:global(.class:is(span:is(:hover)))){}
	div :where(:global(.class:is(span:has(* > *)))){}
	div :is(:global(.class:is(span:is(:hover)), .x)){}

	div :has(    :global(.class:is(span:where(:focus)))){}
	div :not(:global(.class:is(span:where(:focus-within)))){}
	div :is(:global(.class:is(span:is(:hover)))){}
	div :where(:global(.class:is(span:has(* > *)))){}
	div :is(:global(.class:is(span:is(:hover)), .x)){}

	div{
		p:has(:global(&)){

		}
		:not(:global(span > *)){
			:where(:global(form)){}
		}
	}
</style>
Repository: sveltejs/svelte
File: packages/svelte/src/store/utils.js (JavaScript)

Code before:
/** @import { Readable } from './public' */
import { untrack } from '../index-client.js';
import { noop } from '../internal/shared/utils.js';

/**
 * @template T
 * @param {Readable<T> | null | undefined} store
 * @param {(value: T) => void} run
 * @param {(value: T) => void} [invalidate]
 * @returns {() => void}
 */
export function subscribe_to_store(store, run, invalidate) {
	if (store == null) {
		// @ts-expect-error
		run(undefined);

		// @ts-expect-error
		if (invalidate) invalidate(undefined);

		return noop;
	}

	// Svelte store takes a private second argument
	const unsub = untrack(() =>
		store.subscribe(
			run,
			// @ts-expect-error
			invalidate
		)
	);

	// Also support RxJS
	// @ts-expect-error TODO fix this in the types?
	return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
}


Review comment (suggestion):
```suggestion
	// StartStopNotifier could mutate state, and we want to silence the corresponding validation error
	const unsub = untrack(() =>
```

Code after:
/** @import { Readable } from './public' */
import { untrack } from '../index-client.js';
import { noop } from '../internal/shared/utils.js';

/**
 * @template T
 * @param {Readable<T> | null | undefined} store
 * @param {(value: T) => void} run
 * @param {(value: T) => void} [invalidate]
 * @returns {() => void}
 */
export function subscribe_to_store(store, run, invalidate) {
	if (store == null) {
		// @ts-expect-error
		run(undefined);

		// @ts-expect-error
		if (invalidate) invalidate(undefined);

		return noop;
	}

	// Svelte store takes a private second argument
	// StartStopNotifier could mutate state, and we want to silence the corresponding validation error
	const unsub = untrack(() =>
		store.subscribe(
			run,
			// @ts-expect-error
			invalidate
		)
	);

	// Also support RxJS
	// @ts-expect-error TODO fix this in the types?
	return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
}
Repository: sveltejs/svelte
File: packages/svelte/src/internal/client/dom/blocks/each.js (JavaScript)

Code before:
				// skip over adding it to our seen Set as the item is already being handled
				if (is_inert || (current.e.f & INERT) === 0) {
					(seen ??= new Set()).add(current);
				}
				stashed.push(current);
				current = current.next;
			}

			if (current === null) {
				continue;
			}

			item = current;
		}

		matched.push(item);
		prev = item;
		current = item.next;
	}

	if (current !== null || seen !== undefined) {
		var to_destroy = seen === undefined ? [] : array_from(seen);

		while (current !== null) {
			// If the each block isn't inert, then  item effects that are inert means they are currently
			// already outroing and will be removed once the transition is finished
			if (is_inert || (current.e.f & INERT) === 0) {
				to_destroy.push(current);
			}
			current = current.next;
		}

		var destroy_length = to_destroy.length;

		if (destroy_length > 0) {
			var controlled_anchor = (flags & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;

			if (is_animated) {
				for (i = 0; i < destroy_length; i += 1) {
					to_destroy[i].a?.measure();
				}

				for (i = 0; i < destroy_length; i += 1) {
					to_destroy[i].a?.fix();
				}
			}

			pause_effects(state, to_destroy, controlled_anchor, items);
		}
	}


Review comment (suggestion):
```suggestion
			// If the each block isn't inert, then inert effects are currently outroing and will be removed once the transition is finished
```

Code after:
				// skip over adding it to our seen Set as the item is already being handled
				if (is_inert || (current.e.f & INERT) === 0) {
					(seen ??= new Set()).add(current);
				}
				stashed.push(current);
				current = current.next;
			}

			if (current === null) {
				continue;
			}

			item = current;
		}

		matched.push(item);
		prev = item;
		current = item.next;
	}

	if (current !== null || seen !== undefined) {
		var to_destroy = seen === undefined ? [] : array_from(seen);

		while (current !== null) {
			// If the each block isn't inert, then inert effects are currently outroing and will be removed once the transition is finished
			if (is_inert || (current.e.f & INERT) === 0) {
				to_destroy.push(current);
			}
			current = current.next;
		}

		var destroy_length = to_destroy.length;

		if (destroy_length > 0) {
			var controlled_anchor = (flags & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;

			if (is_animated) {
				for (i = 0; i < destroy_length; i += 1) {
					to_destroy[i].a?.measure();
				}

				for (i = 0; i < destroy_length; i += 1) {
					to_destroy[i].a?.fix();
				}
			}

			pause_effects(state, to_destroy, controlled_anchor, items);
		}
	}

	if (is_animated) {
Repository: sveltejs/svelte
File: packages/svelte/src/internal/client/reactivity/effects.js (JavaScript)

Code before:
 * `x` becomes falsy then truthy: `{#if x}...{/if}`
 * @param {Effect} effect
 */
export function resume_effect(effect) {
	resume_children(effect, true);
}

/**
 * @param {Effect} effect
 * @param {boolean} local
 */
function resume_children(effect, local) {
	if ((effect.f & INERT) === 0) return;

	// If a dependency of this effect changed while it was paused,
	// apply the change now
	if (check_dirtiness(effect)) {
		update_effect(effect);
	}

	effect.f ^= INERT;

	var child = effect.first;

	while (child !== null) {
		var sibling = child.next;
		var transparent = (child.f & EFFECT_TRANSPARENT) !== 0 || (child.f & BRANCH_EFFECT) !== 0;
		// TODO we don't need to call resume_children recursively with a linked list in place
		// it's slightly more involved though as we have to account for `transparent` changing
		// through the tree.
		resume_children(child, transparent ? local : false);
		child = sibling;
	}

	if (effect.transitions !== null) {
		for (const transition of effect.transitions) {
			if (transition.is_global || local) {
				transition.in();
			}
		}
	}
}


Review comment (suggestion):
seems like the order is important? Is there a small comment that we can add to explain it? `Only do this after updating effects because ...`

Code after:

/**
 * The opposite of `pause_effect`. We call this if (for example)
 * `x` becomes falsy then truthy: `{#if x}...{/if}`
 * @param {Effect} effect
 */
export function resume_effect(effect) {
	resume_children(effect, true);
}

/**
 * @param {Effect} effect
 * @param {boolean} local
 */
function resume_children(effect, local) {
	if ((effect.f & INERT) === 0) return;

	// If a dependency of this effect changed while it was paused,
	// apply the change now
	if (check_dirtiness(effect)) {
		update_effect(effect);
	}

	// Ensure we toggle the flag after possibly updating the effect so that
	// each block logic can correctly operate on inert items
	effect.f ^= INERT;

	var child = effect.first;

	while (child !== null) {
		var sibling = child.next;
		var transparent = (child.f & EFFECT_TRANSPARENT) !== 0 || (child.f & BRANCH_EFFECT) !== 0;
		// TODO we don't need to call resume_children recursively with a linked list in place
		// it's slightly more involved though as we have to account for `transparent` changing
		// through the tree.
		resume_children(child, transparent ? local : false);
		child = sibling;
	}

	if (effect.transitions !== null) {
		for (const transition of effect.transitions) {
			if (transition.is_global || local) {
				transition.in();
			}
		}
	}
}
Repository: sveltejs/svelte
File: packages/svelte/src/compiler/utils/compile_diagnostic.js (JavaScript)

Code before:
					' '.repeat(digits + 2 + tabs_to_spaces(str.slice(0, column)).length) + '^';
				return `${line_num}: ${tabs_to_spaces(str)}\n${indicator}`;
			}
			return `${line_num}: ${tabs_to_spaces(str)}`;
		})
		.join('\n');
}

/**
 * @typedef {{
 * 	code: string;
 * 	message: string;
 *  stack?: string;
 * 	filename?: string;
 * 	start?: Location;
 * 	end?: Location;
 * 	position?: [number, number];
 * 	frame?: string;
 * }} ICompileDiagnostic
 */

/** @implements {ICompileDiagnostic} */
export class CompileDiagnostic {
	name = 'CompileDiagnostic';
	stack = '';

	/**
	 * @param {string} code
	 * @param {string} message
	 * @param {[number, number] | undefined} position
	 */
	constructor(code, message, position) {
		this.code = code;
		this.message = message;

		if (state.filename) {
			this.filename = state.filename;
		}

		if (position) {
			this.position = position;
			this.start = state.locator(position[0]);
			this.end = state.locator(position[1]);
			if (this.start && this.end) {
				this.frame = get_code_frame(state.source, this.start.line - 1, this.end.column);
			}
		}
	}

	toString() {
		let out = `${this.code}: ${this.message}`;

Review comment (suggestion):
```suggestion
	// adding an empty stack so that vite will show the file and frame during build
	stack = '';
```

Code after:
					' '.repeat(digits + 2 + tabs_to_spaces(str.slice(0, column)).length) + '^';
				return `${line_num}: ${tabs_to_spaces(str)}\n${indicator}`;
			}
			return `${line_num}: ${tabs_to_spaces(str)}`;
		})
		.join('\n');
}

/**
 * @typedef {{
 * 	code: string;
 * 	message: string;
 *  stack?: string;
 * 	filename?: string;
 * 	start?: Location;
 * 	end?: Location;
 * 	position?: [number, number];
 * 	frame?: string;
 * }} ICompileDiagnostic
 */

/** @implements {ICompileDiagnostic} */
export class CompileDiagnostic {
	name = 'CompileDiagnostic';
	// adding an empty stack so that vite will show the file and frame during build
	stack = '';

	/**
	 * @param {string} code
	 * @param {string} message
	 * @param {[number, number] | undefined} position
	 */
	constructor(code, message, position) {
		this.code = code;
		this.message = message;

		if (state.filename) {
			this.filename = state.filename;
		}

		if (position) {
			this.position = position;
			this.start = state.locator(position[0]);
			this.end = state.locator(position[1]);
			if (this.start && this.end) {
				this.frame = get_code_frame(state.source, this.start.line - 1, this.end.column);
			}
		}
	}

	toString() {
Repository: sveltejs/svelte
File: packages/svelte/src/compiler/phases/3-transform/css/index.js (JavaScript)

Code before:
			}

			// don't recurse into body
			visit(node.prelude);
			return;
		}

		next();
	},
	SelectorList(node, { state, next, path }) {
		// Only add comments if we're not inside a complex selector that itself is unused
		if (!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)) {
			const children = node.children;
			let pruning = false;
			let prune_start = children[0].start;
			let last = prune_start;

			for (let i = 0; i < children.length; i += 1) {
				const selector = children[i];

				if (selector.metadata.used === pruning) {
					if (pruning) {
						let i = selector.start;
						while (state.code.original[i] !== ',') i--;
						// If this is not the last selector keep the separator
						if (i !== children.length - 1) i++;

						if (state.minify) {
							state.code.remove(prune_start, i + 1);
						} else {
							state.code.overwrite(i, i + 1, '*/');
						}
					} else {
						if (i === 0) {
							if (state.minify) {
								prune_start = selector.start;
							} else {
								state.code.prependRight(selector.start, '/* (unused) ');
							}
						} else {
							if (state.minify) {
								prune_start = last;
							} else {
								state.code.overwrite(last, selector.start, ' /* (unused) ');
							}
						}
					}

					pruning = !pruning;
				}


Review comment (suggestion):
```suggestion
						// If this is an in-between pruned selector keep the last separator
						if (prune_start !== children[0].start && i !== children.length - 1) i--;
```

Code after:
			}

			// don't recurse into body
			visit(node.prelude);
			return;
		}

		next();
	},
	SelectorList(node, { state, next, path }) {
		// Only add comments if we're not inside a complex selector that itself is unused
		if (!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)) {
			const children = node.children;
			let pruning = false;
			let prune_start = children[0].start;
			let last = prune_start;

			for (let i = 0; i < children.length; i += 1) {
				const selector = children[i];

				if (selector.metadata.used === pruning) {
					if (pruning) {
						let i = selector.start;
						while (state.code.original[i] !== ',') i--;

						if (state.minify) {
							state.code.remove(prune_start, i + 1);
						} else {
							state.code.overwrite(i, i + 1, '*/');
						}
					} else {
						if (i === 0) {
							if (state.minify) {
								prune_start = selector.start;
							} else {
								state.code.prependRight(selector.start, '/* (unused) ');
							}
						} else {
							// If this is not the last selector add a separator
							const separator = i !== children.length - 1 ? ',' : '';

							if (state.minify) {
								prune_start = last;
								if (separator) {
									while (state.code.original[prune_start - 1] !== ',') prune_start++;
									state.code.update(last, prune_start, separator);
								}
							} else {
								state.code.overwrite(last, selector.start, `${separator} /* (unused) `);
							}
						}
Repository: sveltejs/svelte
File: packages/svelte/src/compiler/phases/3-transform/css/index.js (JavaScript)

Code before:
		}

		next();
	},
	SelectorList(node, { state, next, path }) {
		// Only add comments if we're not inside a complex selector that itself is unused
		if (!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)) {
			const children = node.children;
			let pruning = false;
			let prune_start = children[0].start;
			let last = prune_start;

			for (let i = 0; i < children.length; i += 1) {
				const selector = children[i];

				if (selector.metadata.used === pruning) {
					if (pruning) {
						let end = selector.start;
						while (state.code.original[end - 1] !== ',') end--;
						// If this is an in-between pruned selector keep the last separator
						if (prune_start !== children[0].start && i !== children.length - 1) end--;

						if (state.minify) {
							state.code.remove(prune_start, end);
						} else {
							state.code.overwrite(i, end, '*/');
						}
					} else {
						if (i === 0) {
							if (state.minify) {
								prune_start = selector.start;
							} else {
								state.code.prependRight(selector.start, '/* (unused) ');
							}
						} else {
							if (state.minify) {
								prune_start = last;
							} else {
								state.code.overwrite(last, selector.start, ' /* (unused) ');
							}
						}
					}

					pruning = !pruning;
				}

				last = selector.end;
			}

			if (pruning) {
				if (state.minify) {

Review comment (suggestion):
```suggestion
							state.code.overwrite(end - 1, end, '*/');
```

Code after:
		}

		next();
	},
	SelectorList(node, { state, next, path }) {
		// Only add comments if we're not inside a complex selector that itself is unused
		if (!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)) {
			const children = node.children;
			let pruning = false;
			let prune_start = children[0].start;
			let last = prune_start;

			for (let i = 0; i < children.length; i += 1) {
				const selector = children[i];

				if (selector.metadata.used === pruning) {
					if (pruning) {
						let i = selector.start;
						while (state.code.original[i] !== ',') i--;

						if (state.minify) {
							state.code.remove(prune_start, i + 1);
						} else {
							state.code.overwrite(i, i + 1, '*/');
						}
					} else {
						if (i === 0) {
							if (state.minify) {
								prune_start = selector.start;
							} else {
								state.code.prependRight(selector.start, '/* (unused) ');
							}
						} else {
							// If this is not the last selector add a separator
							const separator = i !== children.length - 1 ? ',' : '';

							if (state.minify) {
								prune_start = last;
								if (separator) {
									while (state.code.original[prune_start - 1] !== ',') prune_start++;
									state.code.update(last, prune_start, separator);
								}
							} else {
								state.code.overwrite(last, selector.start, `${separator} /* (unused) `);
							}
						}
					}

					pruning = !pruning;
				}