Merge branch 'main' into chore-perf

Author: Alfred-Skyblue

package.json

@@ -35,7 +35,7 @@
     "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
     "build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
     "build-sfc-playground-self": "cd packages/sfc-playground && npm run build",
-    "preinstall": "node ./scripts/preinstall.js",
+    "preinstall": "npx only-allow pnpm",
     "postinstall": "simple-git-hooks"
   },
   "simple-git-hooks": {

packages/compiler-dom/src/decodeHtmlBrowser.ts

@@ -8,9 +8,9 @@ export function decodeHtmlBrowser(raw: string, asAttr = false): string {
   }
   if (asAttr) {
     decoder.innerHTML = `<div foo="${raw.replace(/"/g, '&quot;')}">`
-    return decoder.children[0].getAttribute('foo') as string
+    return decoder.children[0].getAttribute('foo')!
   } else {
     decoder.innerHTML = raw
-    return decoder.textContent as string
+    return decoder.textContent!
   }
 }

packages/compiler-sfc/src/style/cssVars.ts

@@ -53,8 +53,9 @@ export function parseCssVars(sfc: SFCDescriptor): string[] {
   const vars: string[] = []
   sfc.styles.forEach(style => {
     let match
-    // ignore v-bind() in comments /* ... */
-    const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '')
+    // ignore v-bind() in comments, eg /* ... */
+    // and // (Less, Sass and Stylus all support the use of // to comment)
+    const content = style.content.replace(/\/\*([\s\S]*?)\*\/|\/\/.*/g, '')
     while ((match = vBindRE.exec(content))) {
       const start = match.index + match[0].length
       const end = lexBinding(content, start)

packages/compiler-sfc/src/style/preprocessors.ts

@@ -98,8 +98,7 @@ const less: StylePreprocessor = (source, map, options, load = require) => {
 const styl: StylePreprocessor = (source, map, options, load = require) => {
   const nodeStylus = load('stylus')
   try {
-    const ref = nodeStylus(source)
-    Object.keys(options).forEach(key => ref.set(key, options[key]))
+    const ref = nodeStylus(source, options)
     if (map) ref.set('sourcemap', { inline: false, comment: false })
 
     const result = ref.render()

packages/reactivity/__tests__/computed.spec.ts

@@ -259,13 +259,13 @@ describe('reactivity/computed', () => {
     const onTrigger = vi.fn((e: DebuggerEvent) => {
       events.push(e)
     })
-    const obj = reactive({ foo: 1 })
+    const obj = reactive<{ foo?: number }>({ foo: 1 })
     const c = computed(() => obj.foo, { onTrigger })
 
     // computed won't trigger compute until accessed
     c.value
 
-    obj.foo++
+    obj.foo!++
     expect(c.value).toBe(2)
     expect(onTrigger).toHaveBeenCalledTimes(1)
     expect(events[0]).toEqual({
@@ -277,7 +277,6 @@ describe('reactivity/computed', () => {
       newValue: 2
     })
 
-    // @ts-ignore
     delete obj.foo
     expect(c.value).toBeUndefined()
     expect(onTrigger).toHaveBeenCalledTimes(2)

packages/reactivity/__tests__/reactive.spec.ts

@@ -23,7 +23,7 @@ describe('reactivity/reactive', () => {
     const reactiveObj = reactive(obj)
     expect(isReactive(reactiveObj)).toBe(true)
     // read prop of reactiveObject will cause reactiveObj[prop] to be reactive
-    // @ts-ignore
+    // @ts-expect-error
     const prototype = reactiveObj['__proto__']
     const otherObj = { data: ['a'] }
     expect(isReactive(otherObj)).toBe(false)
@@ -204,7 +204,7 @@ describe('reactivity/reactive', () => {
     const dummy = computed(() => observed.a)
     expect(dummy.value).toBe(0)
 
-    // @ts-ignore
+    // @ts-expect-error
     observed.a = bar
     expect(dummy.value).toBe(1)
 
@@ -233,6 +233,9 @@ describe('reactivity/reactive', () => {
     // symbol
     const s = Symbol()
     assertValue(s)
+    // bigint
+    const bn = BigInt('9007199254740991')
+    assertValue(bn)
 
     // built-ins should work and return same value
     const p = Promise.resolve()

packages/reactivity/src/collectionHandlers.ts

@@ -27,7 +27,7 @@ function get(
   const rawTarget = toRaw(target)
   const rawKey = toRaw(key)
   if (!isReadonly) {
-    if (key !== rawKey) {
+    if (hasChanged(key, rawKey)) {
       track(rawTarget, TrackOpTypes.GET, key)
     }
     track(rawTarget, TrackOpTypes.GET, rawKey)
@@ -50,7 +50,7 @@ function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean {
   const rawTarget = toRaw(target)
   const rawKey = toRaw(key)
   if (!isReadonly) {
-    if (key !== rawKey) {
+    if (hasChanged(key, rawKey)) {
       track(rawTarget, TrackOpTypes.HAS, key)
     }
     track(rawTarget, TrackOpTypes.HAS, rawKey)

packages/reactivity/src/ref.ts

@@ -342,7 +342,7 @@ class ObjectRefImpl<T extends object, K extends keyof T> {
 
   get value() {
     const val = this._object[this._key]
-    return val === undefined ? (this._defaultValue as T[K]) : val
+    return val === undefined ? this._defaultValue! : val
   }
 
   set value(newVal) {

packages/runtime-core/src/apiCreateApp.ts

@@ -16,7 +16,7 @@ import {
   ComponentPublicInstance
 } from './componentPublicInstance'
 import { Directive, validateDirectiveName } from './directives'
-import { RootRenderFunction } from './renderer'
+import { RendererElement, RootRenderFunction } from './renderer'
 import { InjectionKey } from './apiInject'
 import { warn } from './warning'
 import { createVNode, cloneVNode, VNode } from './vnode'
@@ -196,7 +196,7 @@ export type CreateAppFunction<HostElement> = (
 
 let uid = 0
 
-export function createAppAPI<HostElement>(
+export function createAppAPI<HostElement extends RendererElement>(
   render: RootRenderFunction<HostElement>,
   hydrate?: RootHydrateFunction
 ): CreateAppFunction<HostElement> {

packages/runtime-core/src/devtools.ts

@@ -30,7 +30,7 @@ interface DevtoolsHook {
   appRecords: AppRecord[]
   /**
    * Added at https://github.com/vuejs/devtools/commit/f2ad51eea789006ab66942e5a27c0f0986a257f9
-   * Returns wether the arg was buffered or not
+   * Returns whether the arg was buffered or not
    */
   cleanupBuffer?: (matchArg: unknown) => boolean
 }

packages/runtime-core/src/directives.ts

@@ -21,6 +21,7 @@ import { ComponentPublicInstance } from './componentPublicInstance'
 import { mapCompatDirectiveHook } from './compat/customDirective'
 import { pauseTracking, resetTracking } from '@vue/reactivity'
 import { traverse } from './apiWatch'
+import { RendererElement } from './renderer'
 
 export interface DirectiveBinding<V = any> {
   instance: ComponentPublicInstance | null
@@ -31,7 +32,11 @@ export interface DirectiveBinding<V = any> {
   dir: ObjectDirective<any, V>
 }
 
-export type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = (
+export type DirectiveHook<
+  T extends RendererElement = any,
+  Prev = VNode<any, T> | null,
+  V = any
+> = (
   el: T,
   binding: DirectiveBinding<V>,
   vnode: VNode<any, T>,
@@ -43,7 +48,7 @@ export type SSRDirectiveHook = (
   vnode: VNode
 ) => Data | undefined
 
-export interface ObjectDirective<T = any, V = any> {
+export interface ObjectDirective<T extends RendererElement = any, V = any> {
   created?: DirectiveHook<T, null, V>
   beforeMount?: DirectiveHook<T, null, V>
   mounted?: DirectiveHook<T, null, V>
@@ -55,9 +60,12 @@ export interface ObjectDirective<T = any, V = any> {
   deep?: boolean
 }
 
-export type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V>
+export type FunctionDirective<
+  T extends RendererElement = any,
+  V = any
+> = DirectiveHook<T, any, V>
 
-export type Directive<T = any, V = any> =
+export type Directive<T extends RendererElement = any, V = any> =
   | ObjectDirective<T, V>
   | FunctionDirective<T, V>
 

packages/runtime-core/src/renderer.ts

@@ -90,7 +90,7 @@ export type RootRenderFunction<HostElement = RendererElement> = (
 
 export interface RendererOptions<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement extends RendererElement = RendererElement
 > {
   patchProp(
     el: HostElement,
@@ -145,7 +145,7 @@ export interface RendererElement extends RendererNode {}
 // to optimize bundle size.
 export interface RendererInternals<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement extends RendererElement = RendererElement
 > {
   p: PatchFn
   um: UnmountFn
@@ -295,7 +295,7 @@ export const queuePostRenderEffect = __FEATURE_SUSPENSE__
  */
 export function createRenderer<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement extends RendererElement = RendererElement
 >(options: RendererOptions<HostNode, HostElement>) {
   return baseCreateRenderer<HostNode, HostElement>(options)
 }
@@ -312,7 +312,7 @@ export function createHydrationRenderer(
 // overload 1: no hydration
 function baseCreateRenderer<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement extends RendererElement = RendererElement
 >(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement>
 
 // overload 2: with hydration
@@ -584,7 +584,7 @@ function baseCreateRenderer(
     slotScopeIds: string[] | null,
     optimized: boolean
   ) => {
-    isSVG = isSVG || (n2.type as string) === 'svg'
+    isSVG = isSVG || n2.type === 'svg'
     if (n1 == null) {
       mountElement(
         n2,

packages/runtime-core/src/vnode.ts

@@ -133,7 +133,7 @@ export type VNodeNormalizedChildren =
 
 export interface VNode<
   HostNode = RendererNode,
-  HostElement = RendererElement,
+  HostElement extends RendererElement = RendererElement,
   ExtraProps = { [key: string]: any }
 > {
   /**
@@ -613,7 +613,7 @@ export function guardReactiveProps(props: (Data & VNodeProps) | null) {
     : props
 }
 
-export function cloneVNode<T, U>(
+export function cloneVNode<T extends RendererNode, U extends RendererElement>(
   vnode: VNode<T, U>,
   extraProps?: (Data & VNodeProps) | null,
   mergeRef = false
@@ -681,7 +681,7 @@ export function cloneVNode<T, U>(
   if (__COMPAT__) {
     defineLegacyVNodeProperties(cloned as VNode)
   }
-  return cloned as any
+  return cloned
 }
 
 /**

packages/runtime-dom/src/jsx.ts

@@ -457,13 +457,39 @@ export interface ImgHTMLAttributes extends HTMLAttributes {
   srcset?: string
   usemap?: string
   width?: Numberish
+  loading?: 'lazy' | 'eager'
 }
 
 export interface InsHTMLAttributes extends HTMLAttributes {
   cite?: string
   datetime?: string
 }
 
+export type InputTypeHTMLAttribute =
+  | 'button'
+  | 'checkbox'
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'file'
+  | 'hidden'
+  | 'image'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'radio'
+  | 'range'
+  | 'reset'
+  | 'search'
+  | 'submit'
+  | 'tel'
+  | 'text'
+  | 'time'
+  | 'url'
+  | 'week'
+  | (string & {})
+
 export interface InputHTMLAttributes extends HTMLAttributes {
   accept?: string
   alt?: string
@@ -495,7 +521,7 @@ export interface InputHTMLAttributes extends HTMLAttributes {
   size?: Numberish
   src?: string
   step?: Numberish
-  type?: string
+  type?: InputTypeHTMLAttribute
   value?: any // we support :value to be bound to anything w/ v-model
   width?: Numberish
 }
@@ -677,7 +703,7 @@ export interface TextareaHTMLAttributes extends HTMLAttributes {
   minlength?: Numberish
   name?: string
   placeholder?: string
-  readonly?: boolean
+  readonly?: Booleanish
   required?: Booleanish
   rows?: Numberish
   value?: string | string[] | number
@@ -749,7 +775,7 @@ export interface SVGAttributes extends AriaAttributes, EventHandlers<Events> {
    * @see https://www.w3.org/TR/SVG/styling.html#ElementSpecificStyling
    */
   class?: any
-  style?: string | CSSProperties
+  style?: StyleValue
 
   color?: string
   height?: Numberish

packages/sfc-playground/package.json

@@ -9,10 +9,10 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.3.9"
+    "vite": "^4.4.2"
   },
   "dependencies": {
-    "@vue/repl": "^2.4.0",
+    "@vue/repl": "^2.5.4",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0",
     "vue": "workspace:*"

packages/sfc-playground/src/App.vue

@@ -73,7 +73,7 @@ function toggleSSR() {
   store.setFiles(store.getFiles())
 }
 
-const theme = ref('dark')
+const theme = ref<'dark' | 'light'>('dark')
 function toggleTheme(isDark: boolean) {
   theme.value = isDark ? 'dark' : 'light'
 }