diff --git a/compiler/docs/DESIGN_GOALS.md b/compiler/docs/DESIGN_GOALS.md index 76d19e25c084b..ef619db4770d1 100644 --- a/compiler/docs/DESIGN_GOALS.md +++ b/compiler/docs/DESIGN_GOALS.md @@ -19,7 +19,7 @@ The idea of React Compiler is to allow developers to use React's familiar declar The following are explicitly *not* goals for React Compiler: * Provide perfectly optimal re-rendering with zero unnecessary recomputation. This is a non-goal for several reasons: - * The runtime overhead of the extra tracking involved can outweight the cost of recomputation in many cases. + * The runtime overhead of the extra tracking involved can outweigh the cost of recomputation in many cases. * In cases with conditional dependencies it may not be possible to avoid recomputing some/all instructions. * The amount of code may regress startup times, which would conflict with our goal of neutral startup performance. * Support code that violates React's rules. React's rules exist to help developers build robust, scalable applications and form a contract that allows us to continue improving React without breaking applications. React Compiler depends on these rules to safely transform code, and violations of rules will therefore break React Compiler's optimizations. diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Reanimated.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Reanimated.ts index 6c54476200a18..7110b4211795d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Reanimated.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Reanimated.ts @@ -28,7 +28,7 @@ function hasModule(name: string): boolean { /** * Tries to detect if reanimated is installed by first looking for the presence of the babel plugin. - * However, babel-preset-expo includes it by default so it is occasionally ommitted. If so, we do + * However, babel-preset-expo includes it by default so it is occasionally omitted. If so, we do * a check to see if `react-native-animated` is requireable. * * See https://github.com/expo/expo/blob/e4b8d86442482c7316365a6b7ec1141eec73409d/packages/babel-preset-expo/src/index.ts#L300-L301 diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts index f6872da1117e5..3d48c53312231 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts @@ -980,7 +980,7 @@ function lowerStatement( const conditionalBlock = builder.reserve('loop'); // Block for code following the loop const continuationBlock = builder.reserve('block'); - // Loop body, executed at least once uncondtionally prior to exit + // Loop body, executed at least once unconditionally prior to exit const loopBlock = builder.enter('block', _loopBlockId => { return builder.loop( label, diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index b29d65e6aa528..a77469d0c6296 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -229,7 +229,7 @@ export const EnvironmentConfigSchema = z.object({ /** * Enable use of type annotations in the source to drive type inference. By default - * Forget attemps to infer types using only information that is guaranteed correct + * Forget attempts to infer types using only information that is guaranteed correct * given the source, and does not trust user-supplied type annotations. This mode * enables trusting user type annotations. */ @@ -292,7 +292,7 @@ export const EnvironmentConfigSchema = z.object({ * An alternative to the standard JSX transform which replaces JSX with React's jsxProd() runtime * Currently a prod-only optimization, requiring Fast JSX dependencies * - * The symbol configuration is set for backwards compatability with pre-React 19 transforms + * The symbol configuration is set for backwards compatibility with pre-React 19 transforms */ inlineJsxTransform: ReactElementSymbolSchema.nullable().default(null), @@ -549,7 +549,7 @@ export const EnvironmentConfigSchema = z.object({ * makes sure we don't load a dep when it's a property (to check if it has * changed) and instead check the receiver. * - * This makes sure we don't end up throwing when the reciver is null. Consider + * This makes sure we don't end up throwing when the receiver is null. Consider * this code: * * ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts index 441b5d5452a7d..6c5a8e2ae69e2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts @@ -919,7 +919,7 @@ TYPED_GLOBALS.push( 'createRef', addFunction(DEFAULT_SHAPES, [], { positionalParams: [], - restParam: Effect.Capture, // createRef takes no paramters + restParam: Effect.Capture, // createRef takes no parameters returnType: {kind: 'Object', shapeId: BuiltInUseRefId}, calleeEffect: Effect.Read, returnValueKind: ValueKind.Mutable, diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts index 5a19490cb6c58..ffef70b88c363 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts @@ -741,7 +741,7 @@ export enum InstructionKind { Const = 'Const', // let declaration Let = 'Let', - // assing a new value to a let binding + // assign a new value to a let binding Reassign = 'Reassign', // catch clause binding Catch = 'Catch', @@ -1216,7 +1216,7 @@ export type MutableRange = { export type VariableBinding = // let, const, etc declared within the current component/hook | {kind: 'Identifier'; identifier: Identifier; bindingKind: BindingKind} - // bindings declard outside the current component/hook + // bindings declared outside the current component/hook | NonLocalBinding; // `import {bar as baz} from 'foo'`: name=baz, module=foo, imported=bar diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts index 7f30e25a5c060..56ac6aa2e0304 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts @@ -36,7 +36,7 @@ export type AliasingEffect = * For example: * const x = {}; * const y = [x]; - * y.pop(); // y dosn't contain x anymore! + * y.pop(); // y doesn't contain x anymore! * freeze(y); * mutate(x); // safe to mutate! * @@ -164,7 +164,7 @@ export type AliasingEffect = */ | {kind: 'Impure'; place: Place; error: CompilerDiagnostic} /** - * Indicates that a given place is accessed during render. Used to distingush + * Indicates that a given place is accessed during render. Used to distinguish * hook arguments that are known to be called immediately vs those used for * event handlers/effects, and for JSX values known to be called during render * (tags, children) vs those that may be events/effect (other props). diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts index b894eb2898641..680c5aa51bf13 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts @@ -90,7 +90,7 @@ const DEBUG = false; * - Then we do abstract interpretation over the HIR, iterating until reaching a fixpoint. * This phase tracks the abstract kind of each value (mutable, primitive, frozen, etc) * and the set of values pointed to by each identifier. Each candidate effect is "applied" - * to the current abtract state, and effects may be dropped or rewritten accordingly. + * to the current abstract state, and effects may be dropped or rewritten accordingly. * For example, a "MutateConditionally " effect may be dropped if x is not a mutable * value. A "Mutate " effect may get converted into a "MutateFrozen " effect * if y is mutable, etc. @@ -527,7 +527,7 @@ function inferBlock( if (handlerParam != null) { CompilerError.invariant(state.kind(handlerParam) != null, { reason: - 'Expected catch binding to be intialized with a DeclareLocal Catch instruction', + 'Expected catch binding to be initialized with a DeclareLocal Catch instruction', description: null, details: [ { @@ -1373,7 +1373,7 @@ class InferenceState { #values: Map; /* * The set of values pointed to by each identifier. This is a set - * to accomodate phi points (where a variable may have different + * to accommodate phi points (where a variable may have different * values from different control flow paths). */ #variables: Map>; diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md b/compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md index ab327c255b109..cec97aab4052d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md +++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md @@ -24,7 +24,7 @@ The goal of mutability and aliasing inference is to understand the set of instru In code, the mutability and aliasing model is compromised of the following phases: -* `InferMutationAliasingEffects`. Infers a set of mutation and aliasing effects for each instruction. The approach is to generate a set of candidate effects based purely on the semantics of each instruction and the types of the operands, then use abstract interpretation to determine the actual effects (or errros) that would apply. For example, an instruction that by default has a Capture effect might downgrade to an ImmutableCapture effect if the value is known to be frozen. +* `InferMutationAliasingEffects`. Infers a set of mutation and aliasing effects for each instruction. The approach is to generate a set of candidate effects based purely on the semantics of each instruction and the types of the operands, then use abstract interpretation to determine the actual effects (or errors) that would apply. For example, an instruction that by default has a Capture effect might downgrade to an ImmutableCapture effect if the value is known to be frozen. * `InferMutationAliasingRanges`. Infers a mutable range (start:end instruction ids) for each value in the program, and annotates each Place with its effect type for usage in later passes. This builds a graph of data flow through the program over time in order to understand which mutations effect which values. * `InferReactiveScopeVariables`. Given the per-Place effects, determines disjoint sets of values that mutate together and assigns all identifiers in each set to a unique scope, and updates the range to include the ranges of all constituent values. @@ -69,7 +69,7 @@ Describes the creation of new function value, capturing the given set of mutable kind: 'Apply'; receiver: Place; function: Place; // same as receiver for function calls - mutatesFunction: boolean; // indicates if this is a type that we consdier to mutate the function itself by default + mutatesFunction: boolean; // indicates if this is a type that we consider to mutate the function itself by default args: Array; into: Place; // where result is stored signature: FunctionSignature | null; diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts index ca2f6e00a5d0b..e9bfdec75e5d4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/ConstantPropagation.ts @@ -168,7 +168,7 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null { let value: Constant | null = null; for (const [, operand] of phi.operands) { const operandValue = constants.get(operand.identifier.id) ?? null; - // did not find a constant, can't constant propogate + // did not find a constant, can't constant propagate if (operandValue === null) { return null; } @@ -182,7 +182,7 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null { continue; } - // found different kinds of constants, can't constant propogate + // found different kinds of constants, can't constant propagate if (operandValue.kind !== value.kind) { return null; } @@ -202,7 +202,7 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null { suggestions: null, }); - // different constant values, can't constant propogate + // different constant values, can't constant propagate if (operandValue.value !== value.value) { return null; } @@ -222,7 +222,7 @@ function evaluatePhi(phi: Phi, constants: Constants): Constant | null { suggestions: null, }); - // different global values, can't constant propogate + // different global values, can't constant propagate if (operandValue.binding.name !== value.binding.name) { return null; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts index 2b752c6dfd28e..62ac7fc4e4470 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/DeadCodeElimination.ts @@ -81,7 +81,7 @@ class State { /* * Check if any version of the given identifier is used somewhere. - * This checks both for usage of this specific identifer id (ssa id) + * This checks both for usage of this specific identifier id (ssa id) * and (for named identifiers) for any usages of that identifier name. */ isIdOrNameUsed(identifier: Identifier): boolean { @@ -379,7 +379,7 @@ function pruneableValue(value: InstructionValue, state: State): boolean { default: { assertExhaustive( value, - `Unexepcted value kind \`${(value as any).kind}\``, + `Unexpected value kind \`${(value as any).kind}\``, ); } } diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts index 2e8584050eb7a..c0c50cdca3d5f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts @@ -1019,7 +1019,7 @@ class Driver { /* * Value blocks generally end in a StoreLocal to assign the value of the * expression for this branch. These StoreLocal instructions can be pruned, - * since we represent the value blocks as a compund value in ReactiveFunction + * since we represent the value blocks as a compound value in ReactiveFunction * (no phis). However, it's also possible to have a value block that ends in * an AssignmentExpression, which we need to keep. So we only prune * StoreLocal for temporaries — any named/promoted values must be used @@ -1049,7 +1049,7 @@ class Driver { /* * Value blocks generally end in a StoreLocal to assign the value of the * expression for this branch. These StoreLocal instructions can be pruned, - * since we represent the value blocks as a compund value in ReactiveFunction + * since we represent the value blocks as a compound value in ReactiveFunction * (no phis). However, it's also possible to have a value block that ends in * an AssignmentExpression, which we need to keep. So we only prune * StoreLocal for temporaries — any named/promoted values must be used diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts index f81c962edf867..915a334f03fe3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts @@ -133,7 +133,7 @@ export function codegenFunction( /** * Fast Refresh reuses component instances at runtime even as the source of the component changes. - * The generated code needs to prevent values from one version of the code being reused after a code cange. + * The generated code needs to prevent values from one version of the code being reused after a code change. * If HMR detection is enabled and we know the source code of the component, assign a cache slot to track * the source hash, and later, emit code to check for source changes and reset the cache on source changes. */ diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts index 300115c04e4cb..6242670f3ffdf 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts @@ -143,7 +143,7 @@ export function inferReactiveScopeVariables(fn: HIRFunction): void { } /* - * Validate that all scopes have properly intialized, valid mutable ranges + * Validate that all scopes have properly initialized, valid mutable ranges * within the span of instructions for this function, ie from 1 to 1 past * the last instruction id. */ diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts index a698e3bd2472d..33f91301309f4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts @@ -66,7 +66,7 @@ import { * those dependencies. * - The output of A is the input to B. Any invalidation of A will change its output * which invalidates B, so we can similarly merge scopes. Note that this optimization - * may not be beneficial if the outupts of A are not guaranteed to change if its input + * may not be beneficial if the outputs of A are not guaranteed to change if its input * changes, but in practice this is generally the case. * * ## Nested Scopes @@ -77,7 +77,7 @@ import { * Note that PropagateScopeDependencies propagates scope dependencies upwards. This ensures * that parent scopes have the union of their own direct dependencies as well as those of * their (transitive) children. As a result nested scopes may have the same or fewer - * dependencies than their parents, but not more dependencies. If they have fewer dependncies, + * dependencies than their parents, but not more dependencies. If they have fewer dependencies, * it means that the inner scope does not always invalidate with the parent and we should not * flatten. If they inner scope has the exact same dependencies, however, then it's always * better to flatten. diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts index 52efb92350c9c..59da8a1ab87a5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PruneNonEscapingScopes.ts @@ -1064,7 +1064,7 @@ class PruneScopesTransform extends ReactiveFunctionTransform< /** * Scopes may initially appear "empty" because the value being memoized - * is early-returned from within the scope. For now we intentionaly keep + * is early-returned from within the scope. For now we intentionally keep * these scopes, and let them get pruned later by PruneUnusedScopes * _after_ handling the early-return case in PropagateEarlyReturns. * diff --git a/compiler/packages/babel-plugin-react-compiler/src/SSA/EnterSSA.ts b/compiler/packages/babel-plugin-react-compiler/src/SSA/EnterSSA.ts index 67b8e75eb20e7..91a1228983e83 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/SSA/EnterSSA.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/SSA/EnterSSA.ts @@ -146,7 +146,7 @@ class SSABuilder { if (block.preds.size == 0) { /* - * We're at the entry block and haven't found our defintion yet. + * We're at the entry block and haven't found our definition yet. * console.log( * `Unable to find "${printPlace( * oldPlace diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/Keyword.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/Keyword.ts index 3964f4accc85f..6c5104fed1a9e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Utils/Keyword.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/Keyword.ts @@ -75,7 +75,7 @@ const STRICT_MODE_RESERVED_WORDS = new Set([ const STRICT_MODE_RESTRICTED_WORDS = new Set(['eval', 'arguments']); /** - * Conservative check for whether an identifer name is reserved or not. We assume that code is + * Conservative check for whether an identifier name is reserved or not. We assume that code is * written with strict mode. */ export function isReservedWord(identifierName: string): boolean { diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts index 7259041ec29a7..3a0e468b19ba6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateHooksUsage.ts @@ -118,7 +118,7 @@ export function validateHooksUsage( /* * In some circumstances such as optional calls, we may first encounter a "hook may not be referenced as normal values" error. - * If that same place is also used as a conditional call, upgrade the error to a conditonal hook error + * If that same place is also used as a conditional call, upgrade the error to a conditional hook error */ if (previousError === undefined || previousError.reason !== reason) { recordError( diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInRender.ts index a1a05b2e63c0a..3ba18c32fe165 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInRender.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInRender.ts @@ -88,7 +88,7 @@ function validateNoSetStateInRenderImpl( isSetStateType(operand.identifier) || unconditionalSetStateFunctions.has(operand.identifier.id), ) && - // if yes, does it unconditonally call it? + // if yes, does it unconditionally call it? validateNoSetStateInRenderImpl( instr.value.loweredFunc.func, unconditionalSetStateFunctions, diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts index ca386fb2402ef..1ab6f49895ff6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/Logger-test.ts @@ -10,7 +10,7 @@ import invariant from 'invariant'; import {runBabelPluginReactCompiler} from '../Babel/RunReactCompilerBabelPlugin'; import type {Logger, LoggerEvent} from '../Entrypoint'; -it('logs succesful compilation', () => { +it('logs successful compilation', () => { const logs: [string | null, LoggerEvent][] = []; const logger: Logger = { logEvent(filename, event) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md index 1d5a4a2284cfe..d2f3041ef9432 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md @@ -10,7 +10,7 @@ function Foo(props, ref) { export const FIXTURE_ENTRYPOINT = { fn: Foo, - params: [{bar: 'foo'}, {ref: {cuurrent: 1}}], + params: [{bar: 'foo'}, {ref: {current: 1}}], isComponent: true, }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js index 10218fc616338..9d886079e1bd8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js @@ -6,6 +6,6 @@ function Foo(props, ref) { export const FIXTURE_ENTRYPOINT = { fn: Foo, - params: [{bar: 'foo'}, {ref: {cuurrent: 1}}], + params: [{bar: 'foo'}, {ref: {current: 1}}], isComponent: true, }; diff --git a/compiler/packages/react-forgive/client/src/colors.ts b/compiler/packages/react-forgive/client/src/colors.ts index 8989aa1c62ce9..350bf70177586 100644 --- a/compiler/packages/react-forgive/client/src/colors.ts +++ b/compiler/packages/react-forgive/client/src/colors.ts @@ -40,7 +40,7 @@ export class Color { return `rgba(${this.r},${this.g},${this.b},${a})`; } /** - * Redistributes rgb, maintaing hue until its clamped. + * Redistributes rgb, maintaining hue until its clamped. * https://stackoverflow.com/a/141943 */ private static redistribute([r, g, b]: RGB): RGB { diff --git a/compiler/packages/react-mcp-server/src/index.ts b/compiler/packages/react-mcp-server/src/index.ts index e5bd794107dc1..e5d6588672379 100644 --- a/compiler/packages/react-mcp-server/src/index.ts +++ b/compiler/packages/react-mcp-server/src/index.ts @@ -377,7 +377,7 @@ server.tool( - The url should be a full url with the protocol (http:// or https://) and the domain name (e.g. localhost:3000). - Also the user should be running a Chrome browser running on debug mode on port 9222. If you receive an error message, advise the user to run - the following comand in the terminal: + the following command in the terminal: MacOS: "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome" Windows: "chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\temp\chrome" diff --git a/fixtures/nesting/src/legacy/createLegacyRoot.js b/fixtures/nesting/src/legacy/createLegacyRoot.js index ec4941b5d9293..f1124b52a7eef 100644 --- a/fixtures/nesting/src/legacy/createLegacyRoot.js +++ b/fixtures/nesting/src/legacy/createLegacyRoot.js @@ -17,7 +17,7 @@ function Bridge({children, context}) { <__RouterContext.Provider value={context.router}> {/* If we used the newer react-redux@7.x in the legacy/package.json, - we woud instead import {ReactReduxContext} from 'react-redux' + we would instead import {ReactReduxContext} from 'react-redux' and render . */} {children} diff --git a/flow-typed/environments/dom.js b/flow-typed/environments/dom.js index 8e3e757073148..6fc8dc4ebe43d 100644 --- a/flow-typed/environments/dom.js +++ b/flow-typed/environments/dom.js @@ -643,7 +643,7 @@ declare class Event { preventDefault(): void; /** * Returns true if preventDefault() was invoked successfully to indicate - * cancelation, and false otherwise. + * cancellation, and false otherwise. */ +defaultPrevented: boolean; /** diff --git a/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-analyzer.js b/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-analyzer.js index 8dd76e57129b5..d2d4d2b642bcc 100644 --- a/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-analyzer.js +++ b/packages/eslint-plugin-react-hooks/src/code-path-analysis/code-path-analyzer.js @@ -488,7 +488,7 @@ function processCodePathToEnter(analyzer, node) { case 'SwitchCase': /* - * Fork if this node is after the 2st node in `cases`. + * Fork if this node is after the 2nd node in `cases`. * It's similar to `else` blocks. * The next `test` node is processed in this path. */ diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 49da30ccf4c17..01be457c73c86 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -1828,7 +1828,7 @@ function loadServerReference, T>( let resolvedValue = (requireModule(serverReference): any); if (metaData.bound) { - // This promise is coming from us and should have initilialized by now. + // This promise is coming from us and should have initialized by now. const boundArgs: Array = (metaData.bound: any).value.slice(0); boundArgs.unshift(null); // this resolvedValue = resolvedValue.bind.apply(resolvedValue, boundArgs); diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index f8286783a9b44..3c8f5808afaa1 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -354,7 +354,7 @@ function startServer( // The renderer interface doesn't read saved component filters directly, // because they are generally stored in localStorage within the context of the extension. - // Because of this it relies on the extension to pass filters, so include them wth the response here. + // Because of this it relies on the extension to pass filters, so include them with the response here. // This will ensure that saved filters are shared across different web pages. const savedPreferencesString = ` window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify( diff --git a/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js b/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js index 3e2f6b7c1ea83..ab9785248c554 100644 --- a/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js +++ b/packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js @@ -36,7 +36,7 @@ const contentScriptsToInject = [ async function dynamicallyInjectContentScripts() { try { - // Using this, instead of filtering registered scrips with `chrome.scripting.getRegisteredScripts` + // Using this, instead of filtering registered scripts with `chrome.scripting.getRegisteredScripts` // because of https://bugs.chromium.org/p/chromium/issues/detail?id=1393762 // This fixes registering proxy content script in incognito mode await chrome.scripting.unregisterContentScripts(); diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js index 8d9f34371b348..24529d4963b82 100644 --- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js +++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js @@ -1458,7 +1458,7 @@ describe('Timeline profiler', () => { } `); - // There should be two batches of renders: Suspeneded and resolved. + // There should be two batches of renders: Suspended and resolved. expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toHaveLength(2); }); @@ -1516,7 +1516,7 @@ describe('Timeline profiler', () => { } `); - // There should be two batches of renders: Suspeneded and resolved. + // There should be two batches of renders: Suspended and resolved. expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); expect(timelineData.componentMeasures).toHaveLength(2); }); @@ -1721,7 +1721,7 @@ describe('Timeline profiler', () => { ] `); - // There should be two batches of renders: Suspeneded and resolved. + // There should be two batches of renders: Suspended and resolved. expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); // An additional measure with pre-warming expect(timelineData.componentMeasures).toHaveLength(3); @@ -1791,7 +1791,7 @@ describe('Timeline profiler', () => { ] `); - // There should be two batches of renders: Suspeneded and resolved. + // There should be two batches of renders: Suspended and resolved. expect(timelineData.batchUIDToMeasuresMap.size).toBe(2); // An additional measure with pre-warming expect(timelineData.componentMeasures).toHaveLength(3); diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js index 09f811172f30d..7cdb553f71ee1 100644 --- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js +++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js @@ -3134,7 +3134,7 @@ describe('InspectedElement', () => { expect(store.getElementIDAtIndex(1)).toBe(null); }); - // Inpsect to toggle off the error state + // Inspect to toggle off the error state inspectedElement = await inspect(0); expect(inspectedElement.canToggleError).toBe(true); expect(inspectedElement.isErrored).toBe(true); diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js index be2e0377d42b8..cdb1f50ba1b42 100644 --- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js +++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js @@ -1294,7 +1294,7 @@ describe('Timeline profiler', () => { describe('long event handlers', () => { // @reactVersion >= 18.0 // @reactVersion <= 18.2 - it('should not warn when React scedules a (sync) update inside of a short event handler', async () => { + it('should not warn when React schedules a (sync) update inside of a short event handler', async () => { function App() { return null; } @@ -1342,7 +1342,7 @@ describe('Timeline profiler', () => { // @reactVersion >= 18.0 // @reactVersion <= 18.2 - it('should warn when React scedules a long (sync) update inside of an event', async () => { + it('should warn when React schedules a long (sync) update inside of an event', async () => { function App() { return null; } diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js index 9b9e82102cce8..1522dba4e51d1 100644 --- a/packages/react-devtools-shared/src/__tests__/utils-test.js +++ b/packages/react-devtools-shared/src/__tests__/utils-test.js @@ -203,7 +203,7 @@ describe('utils', () => { ).toEqual(['%c%s %s %s', 'color: gray', 'a', 'b', 'c']); // The last letter isn't gray here but I think it's not a big - // deal, since there is a string substituion but it's incorrect + // deal, since there is a string substitution but it's incorrect expect(formatWithStyles(['%s %s', 'a', 'b', 'c'], 'color: gray')).toEqual( ['%c%s %s', 'color: gray', 'a', 'b', 'c'], ); diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 4f755fda29392..3405089df2ff3 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -1091,7 +1091,7 @@ export function attach( // For example, ASTs cached for the component (for named hooks) may no longer be valid. // Send a signal to the frontend to purge this cached information. // The "fastRefreshScheduled" dispatched is global (not Fiber or even Renderer specific). - // This is less effecient since it means the front-end will need to purge the entire cache, + // This is less efficient since it means the front-end will need to purge the entire cache, // but this is probably an okay trade off in order to reduce coupling between the DevTools and Fast Refresh. renderer.scheduleRefresh = (...args) => { try { @@ -5240,7 +5240,7 @@ export function attach( } if (prevFiber.stateNode !== nextFiber.stateNode) { // In persistent mode, it's possible for the stateNode to update with - // a new clone. In that case we need to release the old one and aquire + // a new clone. In that case we need to release the old one and acquire // new one instead. releaseHostInstance(nearestInstance, prevFiber.stateNode); aquireHostInstance(nearestInstance, nextFiber.stateNode); @@ -6448,7 +6448,7 @@ export function attach( const ioInfo = asyncInfo.awaited; if (foundIOEntries.has(ioInfo)) { // We have already added this I/O entry to the result. We can dedupe it. - // This can happen when an instance depends on the same data in mutliple places. + // This can happen when an instance depends on the same data in multiple places. continue; } foundIOEntries.add(ioInfo); @@ -7550,7 +7550,7 @@ export function attach( const inspectedElement = mostRecentlyInspectedElement; // Any time an inspected element has an update, - // we should update the selected $r value as wel. + // we should update the selected $r value as well. // Do this before dehydration (cleanForBridge). updateSelectedElement(inspectedElement); diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index ccd9cdac3e02e..985f7db3a6b28 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -764,7 +764,7 @@ export function attach( } // Any time an inspected element has an update, - // we should update the selected $r value as wel. + // we should update the selected $r value as well. // Do this before dehydration (cleanForBridge). updateSelectedElement(id); diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js index ffba7769bc756..215df20316c3e 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js @@ -156,7 +156,7 @@ export default class ErrorBoundary extends Component { React DevTools encountered an error while trying to inspect the diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js index 088ca0325d002..03412d5adebd5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js @@ -93,7 +93,7 @@ export default function SnapshotSelector(_: Props): React.Node { const filteredIndex = Math.min( Math.max(value - 1, 0), - // Snashots are shown to the user as 1-based + // Snapshots are shown to the user as 1-based // but the indices within the profiler data array ar 0-based. numFilteredCommits - 1, ); diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js index d8f50a9cdc7db..e1a495b0d5a0d 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js @@ -29,7 +29,7 @@ function getChangeLogUrl(version: ?string): string | null { // Version numbers are in the format of: ..- // e.g. "4.23.0-f0dd459e0" // GitHub CHANGELOG headers are in the format of: .. - // but the "." are stripped from anchor tags, becomming: + // but the "." are stripped from anchor tags, becoming: const versionAnchor = version.replace(/^(\d+)\.(\d+)\.(\d+).*/, '$1$2$3'); return `${CHANGE_LOG_URL}#${versionAnchor}`; } diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js index d967109163aa1..16d7167e82dff 100644 --- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js +++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js @@ -38,7 +38,7 @@ import type { // the backend will send a "no-change" message if the element hasn't updated (rendered) since the last time it was asked. // In this case, the frontend cache should reuse the previous (cached) value. // Using a WeakMap keyed on Element generally works well for this, since Elements are mutable and stable in the Store. -// This doens't work properly though when component filters are changed, +// This doesn't work properly though when component filters are changed, // because this will cause the Store to dump all roots and re-initialize the tree (recreating the Element objects). // So instead we key on Element ID (which is stable in this case) and use an LRU for eviction. const inspectedElementCache: LRUCache = diff --git a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js index f85aba3b3ca91..3d730cdcf0295 100644 --- a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js +++ b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js @@ -132,7 +132,7 @@ export class ReactMeasuresView extends View { textFillStyle = COLORS.REACT_COMMIT_TEXT; // Commit phase rects are overlapped by layout and passive rects, - // and it looks bad if text flows underneath/behind these overlayed rects. + // and it looks bad if text flows underneath/behind these overlaid rects. if (nextMeasure != null) { // This clipping shouldn't apply for measures that don't overlap though, // like passive effects that are processed after a delay, diff --git a/packages/react-devtools-timeline/src/import-worker/index.js b/packages/react-devtools-timeline/src/import-worker/index.js index 7c05ec8971326..cafc573213126 100644 --- a/packages/react-devtools-timeline/src/import-worker/index.js +++ b/packages/react-devtools-timeline/src/import-worker/index.js @@ -7,7 +7,7 @@ * @flow */ -// This file uses workerize to load ./importFile.worker as a webworker and instanciates it, +// This file uses workerize to load ./importFile.worker as a webworker and instantiates it, // exposing flow typed functions that can be used on other files. import * as importFileModule from './importFile'; diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js index 8d45be544d742..ce18a668c5838 100644 --- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js +++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js @@ -285,7 +285,7 @@ function processEventDispatch( profilerData.nativeEvents.push(nativeEvent); - // Keep track of curent event in case future ones overlap. + // Keep track of current event in case future ones overlap. // We separate them into different vertical lanes in this case. state.nativeEventStack.push(nativeEvent); } @@ -1046,7 +1046,7 @@ export default async function preprocessData( // We'll thus expect there to be a 'Profile' event; if there is not one, we // can deduce that there are no flame chart events. As we expect React // scheduling profiling user timing marks to be recorded together with browser - // flame chart events, we can futher deduce that the data is invalid and we + // flame chart events, we can further deduce that the data is invalid and we // don't bother finding React events. const indexOfProfileEvent = timeline.findIndex( event => event.name === 'Profile', diff --git a/packages/react-devtools-timeline/src/view-base/Surface.js b/packages/react-devtools-timeline/src/view-base/Surface.js index 81c0199cc743d..c27cf3f295985 100644 --- a/packages/react-devtools-timeline/src/view-base/Surface.js +++ b/packages/react-devtools-timeline/src/view-base/Surface.js @@ -54,8 +54,8 @@ const getCanvasContext = memoize( type ResetHoveredEventFn = () => void; /** - * Represents the canvas surface and a view heirarchy. A surface is also the - * place where all interactions enter the view heirarchy. + * Represents the canvas surface and a view hierarchy. A surface is also the + * place where all interactions enter the view hierarchy. */ export class Surface { rootView: ?View; diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md index 6c3ab1baf07eb..e3e954795fc61 100644 --- a/packages/react-devtools/CHANGELOG.md +++ b/packages/react-devtools/CHANGELOG.md @@ -448,7 +448,7 @@ July 13, 2022 * Timeline Profiler Sidebar with component tree ([lunaruan](https://github.com/lunaruan) and [blakef](https://github.com/blakef) in [#24816](https://github.com/facebook/react/pull/24816), [#24815](https://github.com/facebook/react/pull/24815), [#24814](https://github.com/facebook/react/pull/24814), [#24805](https://github.com/facebook/react/pull/24805), [#24776](https://github.com/facebook/react/pull/24776)) * [DevTools][Bugfix] Fix DevTools Perf Issue When Unmounting Large React Subtrees ([lunaruan](https://github.com/lunaruan) in [#24863](https://github.com/facebook/react/pull/24863)) * Enable "reload & profile" button for timeline view ([mondaychen](https://github.com/mondaychen) in [#24702](https://github.com/facebook/react/pull/24702)) -* Find best renderer when inspecting app with mutilple react roots ([mondaychen](https://github.com/mondaychen) in [#24665](https://github.com/facebook/react/pull/24665)) +* Find best renderer when inspecting app with multiple react roots ([mondaychen](https://github.com/mondaychen) in [#24665](https://github.com/facebook/react/pull/24665)) * Only polyfill requestAnimationFrame when necessary ([mondaychen](https://github.com/mondaychen) in [#24651](https://github.com/facebook/react/pull/24651)) --- @@ -586,7 +586,7 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt #### Bugfix * DevTools should inject itself for XHTML pages too (not just HTML) ([@bvaughn](https://github.com/bvaughn) in [#22932](https://github.com/facebook/react/pull/22932)) -* Don't restore profiling data if we're profling ([@eps1lon](https://github.com/eps1lon) in [#22753](https://github.com/facebook/react/pull/22753)) +* Don't restore profiling data if we're profiling ([@eps1lon](https://github.com/eps1lon) in [#22753](https://github.com/facebook/react/pull/22753)) * DevTools should properly report re-renders due to (use)context changes ([@bvaughn](https://github.com/bvaughn) in [#22746](https://github.com/facebook/react/pull/22746)) * Filter empty commits (all Fibers bailed out) from Profiler ([@bvaughn](https://github.com/bvaughn) in [#22745](https://github.com/facebook/react/pull/22745)) * Accept json file in import fileinput ([@jyash97](https://github.com/jyash97) in [#22717](https://github.com/facebook/react/pull/22717)) diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js index 549b279f1da50..45e25f48af835 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js +++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js @@ -2350,7 +2350,7 @@ function hydrateSrcObjectAttribute( if (typeof size === 'number' && typeof type === 'string') { if (serverValue.indexOf('data:' + type + ';base64,') === 0) { // For Blobs we don't bother reading the actual data but just diff by checking if - // the byte length size of the Blob maches the length of the data url. + // the byte length size of the Blob matches the length of the data url. const prefixLength = 5 + type.length + 8; let byteLength = ((serverValue.length - prefixLength) / 4) * 3; if (serverValue[serverValue.length - 1] === '=') { diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index e4c45ccc4c3f1..540866f44c96a 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -648,7 +648,7 @@ export function finalizeHydratedChildren( props: Props, hostContext: HostContext, ): boolean { - // TOOD: Consider unifying this with hydrateInstance. + // TODO: Consider unifying this with hydrateInstance. if (!enableHydrationChangeEvent) { return false; } @@ -1998,7 +1998,7 @@ export function hasInstanceAffectedParent( function cancelAllViewTransitionAnimations(scope: Element) { // In Safari, we need to manually cancel all manually start animations - // or it'll block or interfer with future transitions. + // or it'll block or interfere with future transitions. // $FlowFixMe[prop-missing] const animations = scope.getAnimations({subtree: true}); for (let i = 0; i < animations.length; i++) { @@ -3520,7 +3520,7 @@ function clearContainerSparingly(container: Node) { const element: Element = (node: any); clearContainerSparingly(element); // If these singleton instances had previously been rendered with React they - // may still hold on to references to the previous fiber tree. We detatch them + // may still hold on to references to the previous fiber tree. We detach them // prospectively to reset them to a baseline starting state since we cannot create // new instances. detachDeletedInstance(element); @@ -3695,7 +3695,7 @@ export function canHydrateInstance( // Scripts are a little tricky, we exclude known resources and then similar to links try to use high-entropy attributes // to reject poor matches. One challenge with scripts are inline scripts. We don't attempt to check text content which could // in theory lead to a hydration error later if a 3rd party injected an inline script before the React rendered nodes. - // Falling back to client rendering if this happens should be seemless though so we will try this hueristic and revisit later + // Falling back to client rendering if this happens should be seamless though so we will try this heuristic and revisit later // if we learn it is problematic const srcAttr = element.getAttribute('src'); if ( @@ -3706,7 +3706,7 @@ export function canHydrateInstance( (anyProps.crossOrigin == null ? null : anyProps.crossOrigin) ) { // This script is for a different src/type/crossOrigin. It may be a script resource - // or it may just be a mistmatch + // or it may just be a mismatch if ( srcAttr && element.hasAttribute('async') && @@ -3720,7 +3720,7 @@ export function canHydrateInstance( } default: { // We have excluded the most likely cases of mismatch between hoistable tags, 3rd party script inserted tags, - // and browser extension inserted tags. While it is possible this is not the right match it is a decent hueristic + // and browser extension inserted tags. While it is possible this is not the right match it is a decent heuristic // that should work in the vast majority of cases. return element; } @@ -3895,7 +3895,7 @@ export function registerSuspenseInstanceRetry( instance.data !== SUSPENSE_PENDING_START_DATA || // The boundary is still in pending status but the document has finished loading // before we could register the event handler that would have scheduled the retry - // on load so we call teh callback now. + // on load so we call the callback now. ownerDocument.readyState !== DOCUMENT_READY_STATE_LOADING ) { callback(); @@ -4805,7 +4805,7 @@ function preload(href: string, as: string, options?: ?PreloadImplOptions) { rel: 'preload', // There is a bug in Safari where imageSrcSet is not respected on preload links // so we omit the href here if we have imageSrcSet b/c safari will load the wrong image. - // This harms older browers that do not support imageSrcSet by making their preloads not work + // This harms older browsers that do not support imageSrcSet by making their preloads not work // but this population is shrinking fast and is already small so we accept this tradeoff. href: as === 'image' && options && options.imageSrcSet ? undefined : href, @@ -6170,7 +6170,7 @@ export function suspendResource( instance = ownerDocument.createElement('link'); markNodeAsHoistable(instance); const linkInstance: HTMLLinkElement = (instance: any); - // This Promise is a loading state used by the Fizz runtime. We need this incase there is a race + // This Promise is a loading state used by the Fizz runtime. We need this in case there is a race // between this resource being rendered on the client and being rendered with a late completed boundary. (linkInstance: any)._p = new Promise((resolve, reject) => { linkInstance.onload = resolve; @@ -6322,7 +6322,7 @@ function checkIfFullyUnsuspended(state: SuspendedState) { // If we haven't actually inserted the stylesheets yet we need to do so now before starting the commit. // The reason we do this after everything else has finished is because we want to have all the stylesheets // load synchronously right before mutating. Ideally the new styles will cause a single recalc only on the - // new tree. When we filled up stylesheets we only inlcuded stylesheets with matching media attributes so we + // new tree. When we filled up stylesheets we only included stylesheets with matching media attributes so we // wait for them to load before actually continuing. We expect this to increase the count above zero insertSuspendedStylesheets(state, state.stylesheets); } else if (state.unsuspend) { diff --git a/packages/react-dom-bindings/src/client/estimateBandwidth.js b/packages/react-dom-bindings/src/client/estimateBandwidth.js index 4b143a5b562c3..96cc0d3030715 100644 --- a/packages/react-dom-bindings/src/client/estimateBandwidth.js +++ b/packages/react-dom-bindings/src/client/estimateBandwidth.js @@ -42,7 +42,7 @@ export default function estimateBandwidth(): number { !duration || !isLikelyStaticResource(initiatorType) ) { - // Skip cached, cross-orgin entries and resources likely to be dynamically generated. + // Skip cached, cross-origin entries and resources likely to be dynamically generated. continue; } // Find any overlapping entries that were transferring at the same time since the total @@ -65,7 +65,7 @@ export default function estimateBandwidth(): number { !overlapTransferSize || !isLikelyStaticResource(overlapInitiatorType) ) { - // Skip cached, cross-orgin entries and resources likely to be dynamically generated. + // Skip cached, cross-origin entries and resources likely to be dynamically generated. continue; } // $FlowFixMe[prop-missing] @@ -107,6 +107,6 @@ export default function estimateBandwidth(): number { // Otherwise, use a default of 5mbps to compute heuristics. // This can happen commonly in Safari if all static resources and images are loaded - // cross-orgin. + // cross-origin. return 5; } diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js index a93c32a947f10..bdb1e8871173f 100644 --- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js +++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js @@ -264,7 +264,7 @@ export type ResumableState = { nextFormID: number, streamingFormat: StreamingFormat, - // We carry the bootstrap intializers in resumable state in case we postpone in the shell + // We carry the bootstrap initializers in resumable state in case we postpone in the shell // of a prerender. On resume we will reinitialize the bootstrap scripts if necessary. // If we end up flushing the bootstrap scripts we void these on the resumable state bootstrapScriptContent?: string | void, @@ -959,7 +959,7 @@ function getSuspenseViewTransition( share: parentViewTransition.update, // For exit or enter of reveals. name: parentViewTransition.autoName, autoName: parentViewTransition.autoName, - // TOOD: If we have more than just this Suspense boundary as a child of the ViewTransition + // TODO: If we have more than just this Suspense boundary as a child of the ViewTransition // then the parent needs to isolate the names so that they don't conflict. nameIdx: 0, }; @@ -2810,7 +2810,7 @@ function pushMeta( if (isFallback) { // Hoistable Elements for fallbacks are simply omitted. we don't want to emit them early - // because they are likely superceded by primary content and we want to avoid needing to clean + // because they are likely superseded by primary content and we want to avoid needing to clean // them up when the primary content is ready. They are never hydrated on the client anyway because // boundaries in fallback are awaited or client render, in either case there is never hydration return null; @@ -2873,7 +2873,7 @@ function pushLink( if (rel === 'stylesheet' && typeof props.precedence === 'string') { if (typeof href !== 'string' || !href) { console.error( - 'React encountered a `` with a `precedence` prop and expected the `href` prop to be a non-empty string but ecountered %s instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.', + 'React encountered a `` with a `precedence` prop and expected the `href` prop to be a non-empty string but encountered %s instead. If your intent was to have React hoist and deduplciate this stylesheet using the `precedence` prop ensure there is a non-empty string `href` prop as well, otherwise remove the `precedence` prop.', getValueDescriptorExpectingObjectForWarning(href), ); } @@ -3013,7 +3013,7 @@ function pushLink( if (isFallback) { // Hoistable Elements for fallbacks are simply omitted. we don't want to emit them early - // because they are likely superceded by primary content and we want to avoid needing to clean + // because they are likely superseded by primary content and we want to avoid needing to clean // them up when the primary content is ready. They are never hydrated on the client anyway because // boundaries in fallback are awaited or client render, in either case there is never hydration return null; @@ -3113,7 +3113,7 @@ function pushStyle( if (__DEV__) { if (href.includes(' ')) { console.error( - 'React expected the `href` prop for a