chore: typo fixes (#1546)

* chore: fix typos in comments/JSDoc.

* chore: fix typo in internal function name.

* chore: fix typos in test comments/descriptions/variable names.

packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts

@@ -412,7 +412,7 @@ describe('compiler: expression transform', () => {
       })
     })
 
-    test('nullish colescing', () => {
+    test('nullish coalescing', () => {
       const node = parseWithExpressionTransform(
         `{{ a ?? b }}`
       ) as InterpolationNode

packages/compiler-core/src/codegen.ts

@@ -333,7 +333,7 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
   }
   // generate variables for ssr helpers
   if (!__BROWSER__ && ast.ssrHelpers && ast.ssrHelpers.length) {
-    // ssr guaruntees prefixIdentifier: true
+    // ssr guarantees prefixIdentifier: true
     push(
       `const { ${ast.ssrHelpers
         .map(aliasHelper)
@@ -372,7 +372,7 @@ function genModulePreamble(
       // when bundled with webpack with code-split, calling an import binding
       // as a function leads to it being wrapped with `Object(a.b)` or `(0,a.b)`,
       // incurring both payload size increase and potential perf overhead.
-      // therefore we assign the imports to vairables (which is a constant ~50b
+      // therefore we assign the imports to variables (which is a constant ~50b
       // cost per-component instead of scaling with template size)
       push(
         `import { ${ast.helpers
@@ -446,7 +446,7 @@ function genHoists(hoists: (JSChildNode | null)[], context: CodegenContext) {
   const genScopeId = !__BROWSER__ && scopeId != null && mode !== 'function'
   newline()
 
-  // push scope Id before initilaizing hoisted vnodes so that these vnodes
+  // push scope Id before initializing hoisted vnodes so that these vnodes
   // get the proper scopeId as well.
   if (genScopeId) {
     push(`${helper(PUSH_SCOPE_ID)}("${scopeId}")`)

packages/compiler-core/src/options.ts

@@ -59,7 +59,7 @@ export type HoistTransform = (
 
 export interface TransformOptions {
   /**
-   * An array of node trasnforms to be applied to every AST node.
+   * An array of node transforms to be applied to every AST node.
    */
   nodeTransforms?: NodeTransform[]
   /**
@@ -118,7 +118,7 @@ export interface TransformOptions {
   scopeId?: string | null
   /**
    * Generate SSR-optimized render functions instead.
-   * The resulting funciton must be attached to the component via the
+   * The resulting function must be attached to the component via the
    * `ssrRender` option instead of `render`.
    */
   ssr?: boolean

packages/compiler-core/src/transforms/hoistStatic.ts

@@ -51,7 +51,7 @@ function walk(
   doNotHoistNode: boolean = false
 ) {
   let hasHoistedNode = false
-  // Some transforms, e.g. trasnformAssetUrls from @vue/compiler-sfc, replaces
+  // Some transforms, e.g. transformAssetUrls from @vue/compiler-sfc, replaces
   // static bindings with expressions. These expressions are guaranteed to be
   // constant so they are still eligible for hoisting, but they are only
   // available at runtime and therefore cannot be evaluated ahead of time.

packages/compiler-core/src/transforms/transformElement.ts

@@ -280,7 +280,7 @@ export function buildProps(
       if (
         !isComponent &&
         isOn(name) &&
-        // omit the flag for click handlers becaues hydration gives click
+        // omit the flag for click handlers because hydration gives click
         // dedicated fast path.
         name.toLowerCase() !== 'onclick' &&
         // omit v-model handlers

packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts

@@ -12,11 +12,11 @@ import {
 
 function compileWithSrcset(template: string, options?: AssetURLOptions) {
   const ast = baseParse(template)
-  const srcsetTrasnform = options
+  const srcsetTransform = options
     ? createSrcsetTransformWithOptions(normalizeOptions(options))
     : transformSrcset
   transform(ast, {
-    nodeTransforms: [srcsetTrasnform, transformElement],
+    nodeTransforms: [srcsetTransform, transformElement],
     directiveTransforms: {
       bind: transformBind
     }

packages/compiler-ssr/src/transforms/ssrTransformComponent.ts

@@ -142,7 +142,7 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
 
     if (typeof component !== 'string') {
       // dynamic component that resolved to a `resolveDynamicComponent` call
-      // expression - since the reoslved result may be a plain element (string)
+      // expression - since the resolved result may be a plain element (string)
       // or a VNode, handle it with `renderVNode`.
       node.ssrCodegenNode = createCallExpression(
         context.helper(SSR_RENDER_VNODE),

packages/compiler-ssr/src/transforms/ssrTransformElement.ts

@@ -64,7 +64,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
     // element
     // generate the template literal representing the open tag.
     const openTag: TemplateLiteral['elements'] = [`<${node.tag}`]
-    // some tags need to be pasesd to runtime for special checks
+    // some tags need to be passed to runtime for special checks
     const needTagForRuntime =
       node.tag === 'textarea' || node.tag.indexOf('-') > 0
 

packages/reactivity/src/ref.ts

@@ -150,7 +150,7 @@ type BaseTypes = string | number | boolean
  * }
  * ```
  *
- * Note that api-extractor somehow refuses to include `decalre module`
+ * Note that api-extractor somehow refuses to include `declare module`
  * augmentations in its generated d.ts, so we have to manually append them
  * to the final generated d.ts in our build process.
  */

packages/runtime-core/__tests__/componentEmits.spec.ts

@@ -26,13 +26,13 @@ describe('component: emit', () => {
     render(h(Comp), nodeOps.createElement('div'))
 
     expect(onfoo).not.toHaveBeenCalled()
-    // only capitalized or special chars are considerd event listeners
+    // only capitalized or special chars are considered event listeners
     expect(onBar).toHaveBeenCalled()
     expect(onBaz).toHaveBeenCalled()
   })
 
   // for v-model:foo-bar usage in DOM templates
-  test('trigger hyphendated events for update:xxx events', () => {
+  test('trigger hyphenated events for update:xxx events', () => {
     const Foo = defineComponent({
       render() {},
       created() {

packages/runtime-core/__tests__/helpers/scopeId.spec.ts

@@ -45,10 +45,10 @@ describe('scopeId runtime support', () => {
         return h('div', this.$slots.default())
       })
     }
-    const withChil2Id = withScopeId('child2')
+    const withChild2Id = withScopeId('child2')
     const Child2 = {
       __scopeId: 'child2',
-      render: withChil2Id(() => h('span'))
+      render: withChild2Id(() => h('span'))
     }
     const App = {
       __scopeId: 'parent',

packages/runtime-core/__tests__/vnode.spec.ts

@@ -254,7 +254,7 @@ describe('vnode', () => {
 
     // cloning with new ref, but with same context instance
     const cloned5 = cloneVNode(original, { ref: 'bar' })
-    // new ref should use current context instance and overwrite orgiinal
+    // new ref should use current context instance and overwrite original
     expect(cloned5.ref).toEqual([mockInstance2, 'bar'])
 
     // cloning and adding ref to original that has no ref

packages/runtime-core/src/apiDefineComponent.ts

@@ -121,7 +121,7 @@ export function defineComponent<
     EE
   >
 ): ComponentPublicInstanceConstructor<
-  // array props technically doesn't place any contraints on props in TSX before,
+  // array props technically doesn't place any constraints on props in TSX before,
   // but now we can export array props in TSX
   CreateComponentPublicInstance<
     Readonly<{ [key in PropNames]?: any }>,

packages/runtime-core/src/componentProxy.ts

@@ -210,7 +210,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       appContext
     } = instance
 
-    // let @vue/reatvitiy know it should never observe Vue public instances.
+    // let @vue/reactivity know it should never observe Vue public instances.
     if (key === ReactiveFlags.SKIP) {
       return true
     }

packages/runtime-core/src/componentSlots.ts

@@ -38,7 +38,7 @@ export type RawSlots = {
   // internal, indicates compiler generated slots
   // we use a reserved property instead of a vnode patchFlag because the slots
   // object may be directly passed down to a child component in a manual
-  // render funciton, and the optimization hint need to be on the slot object
+  // render function, and the optimization hint need to be on the slot object
   // itself to be preserved.
   _?: 1
 }

packages/runtime-core/src/hydration.ts

@@ -80,7 +80,7 @@ export function createHydrationFunctions(
   ): Node | null => {
     const isFragmentStart = isComment(node) && node.data === '['
     const onMismatch = () =>
-      handleMismtach(
+      handleMismatch(
         node,
         vnode,
         parentComponent,
@@ -397,7 +397,7 @@ export function createHydrationFunctions(
     }
   }
 
-  const handleMismtach = (
+  const handleMismatch = (
     node: Node,
     vnode: VNode,
     parentComponent: ComponentInternalInstance | null,

packages/runtime-dom/__tests__/patchProps.spec.ts

@@ -88,12 +88,12 @@ describe('runtime-dom: props patching', () => {
     // anyway, here we just want to make sure Vue doesn't set non-string props
     // to an empty string on nullish values - it should reset to its default
     // value.
-    const intiialValue = el.srcObject
+    const initialValue = el.srcObject
     const fakeObject = {}
     patchProp(el, 'srcObject', null, fakeObject)
     expect(el.srcObject).not.toBe(fakeObject)
     patchProp(el, 'srcObject', null, null)
-    expect(el.srcObject).toBe(intiialValue)
+    expect(el.srcObject).toBe(initialValue)
   })
 
   test('catch and warn prop set TypeError', () => {

packages/runtime-dom/src/modules/props.ts

@@ -4,7 +4,7 @@
 
 import { warn } from '@vue/runtime-core'
 
-// functions. The user is reponsible for using them with only trusted content.
+// functions. The user is responsible for using them with only trusted content.
 export function patchDOMProp(
   el: any,
   key: string,

packages/vue/__tests__/index.spec.ts

@@ -117,7 +117,7 @@ describe('compiler + runtime integration', () => {
     document.querySelector = origin
   })
 
-  it('should warn when template is not avaiable', () => {
+  it('should warn when template is not available', () => {
     const app = createApp({
       template: {}
     })