feat: use encapsulated api

packages/compiler-sfc/src/compileScript.ts

@@ -11,7 +11,7 @@ import {
   type SFCScriptBlock,
 } from './parse'
 import type { ParserPlugin } from '@babel/parser'
-import { generateCodeFrame } from '@vue/shared'
+import { generateCodeFrame, isString } from '@vue/shared'
 import type {
   ArrayPattern,
   CallExpression,
@@ -886,7 +886,7 @@ export function compileScript(
         tips.forEach(warnOnce)
       }
       const err = errors[0]
-      if (typeof err === 'string') {
+      if (isString(err)) {
         throw new Error(err)
       } else if (err) {
         if (err.loc) {

packages/compiler-sfc/src/script/context.ts

@@ -1,6 +1,6 @@
 import type { CallExpression, Node, ObjectPattern, Program } from '@babel/types'
 import type { SFCDescriptor } from '../parse'
-import { generateCodeFrame, isArray } from '@vue/shared'
+import { generateCodeFrame, isArray, isBoolean } from '@vue/shared'
 import { type ParserPlugin, parse as babelParse } from '@babel/parser'
 import type { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
 import type { PropsDestructureBindings } from './defineProps'
@@ -99,10 +99,9 @@ export class ScriptCompileContext {
     const customElement = options.customElement
     const filename = this.descriptor.filename
     if (customElement) {
-      this.isCE =
-        typeof customElement === 'boolean'
-          ? customElement
-          : customElement(filename)
+      this.isCE = isBoolean(customElement)
+        ? customElement
+        : customElement(filename)
     }
     // resolve parser plugins
     const plugins: ParserPlugin[] = resolveParserPlugins(

packages/compiler-sfc/src/script/resolveType.ts

@@ -34,7 +34,7 @@ import {
 } from './utils'
 import { type ScriptCompileContext, resolveParserPlugins } from './context'
 import type { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
-import { capitalize, hasOwn } from '@vue/shared'
+import { capitalize, hasOwn, isString } from '@vue/shared'
 import { parse as babelParse } from '@babel/parser'
 import { parse } from '../parse'
 import { createCache } from '../cache'
@@ -244,7 +244,7 @@ function innerResolveTypeElements(
           typeParams,
         )
       } else {
-        if (typeof typeName === 'string') {
+        if (isString(typeName)) {
           if (typeParameters && typeParameters[typeName]) {
             return resolveTypeElements(
               ctx,
@@ -729,7 +729,7 @@ function innerResolveTypeReference(
   node: ReferenceTypes,
   onlyExported: boolean,
 ): ScopeTypeNode | undefined {
-  if (typeof name === 'string') {
+  if (isString(name)) {
     if (scope.imports[name]) {
       return resolveTypeFromImport(ctx, node, name, scope)
     } else {
@@ -827,10 +827,7 @@ export function registerTS(_loadTS: () => typeof TS) {
     try {
       return _loadTS()
     } catch (err: any) {
-      if (
-        typeof err.message === 'string' &&
-        err.message.includes('Cannot find module')
-      ) {
+      if (isString(err.message) && err.message.includes('Cannot find module')) {
         throw new Error(
           'Failed to load TypeScript, which is required for resolving imported types. ' +
             'Please make sure "typescript" is installed as a project dependency.',

packages/compiler-sfc/src/script/utils.ts

@@ -8,6 +8,7 @@ import type {
   Node,
   StringLiteral,
 } from '@babel/types'
+import { isString } from '@vue/shared'
 import path from 'path'
 
 export const UNKNOWN_TYPE = 'Unknown'
@@ -40,9 +41,7 @@ export function isCallOf(
     test &&
     node.type === 'CallExpression' &&
     node.callee.type === 'Identifier' &&
-    (typeof test === 'string'
-      ? node.callee.name === test
-      : test(node.callee.name))
+    (isString(test) ? node.callee.name === test : test(node.callee.name))
   )
 }
 

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

@@ -11,6 +11,7 @@ import type { SFCDescriptor } from '../parse'
 import { getEscapedCssVarName } from '../script/utils'
 import type { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
+import { isString } from '@vue/shared'
 
 export const CSS_VARS_HELPER = `useCssVars`
 
@@ -176,9 +177,7 @@ export function genCssVarsCode(
       ? transformed.content
       : transformed.children
           .map(c => {
-            return typeof c === 'string'
-              ? c
-              : (c as SimpleExpressionNode).content
+            return isString(c) ? c : (c as SimpleExpressionNode).content
           })
           .join('')
 

packages/compiler-ssr/src/index.ts

@@ -27,6 +27,7 @@ import { ssrTransformModel } from './transforms/ssrVModel'
 import { ssrTransformShow } from './transforms/ssrVShow'
 import { ssrInjectFallthroughAttrs } from './transforms/ssrInjectFallthroughAttrs'
 import { ssrInjectCssVars } from './transforms/ssrInjectCssVars'
+import { isString } from '@vue/shared'
 
 export function compile(
   source: string | RootNode,
@@ -45,7 +46,7 @@ export function compile(
     hoistStatic: false,
   }
 
-  const ast = typeof source === 'string' ? baseParse(source, options) : source
+  const ast = isString(source) ? baseParse(source, options) : source
 
   // Save raw options for AST. This is needed when performing sub-transforms
   // on slot vnode branches.

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

@@ -55,7 +55,14 @@ import {
   ssrProcessTransitionGroup,
   ssrTransformTransitionGroup,
 } from './ssrTransformTransitionGroup'
-import { extend, isArray, isObject, isPlainObject, isSymbol } from '@vue/shared'
+import {
+  extend,
+  isArray,
+  isObject,
+  isPlainObject,
+  isString,
+  isSymbol,
+} from '@vue/shared'
 import { buildSSRProps } from './ssrTransformElement'
 import {
   ssrProcessTransition,
@@ -255,7 +262,7 @@ export function ssrProcessComponent(
       node.ssrCodegenNode.arguments.push(`_scopeId`)
     }
 
-    if (typeof component === 'string') {
+    if (isString(component)) {
       // static component
       context.pushStatement(
         createCallExpression(`_push`, [node.ssrCodegenNode]),

packages/runtime-core/src/compat/global.ts

@@ -494,7 +494,7 @@ function installCompatMount(
       }
 
       let container: Element
-      if (typeof selectorOrEl === 'string') {
+      if (isString(selectorOrEl)) {
         // eslint-disable-next-line
         const result = document.querySelector(selectorOrEl)
         if (!result) {

packages/runtime-core/src/compat/renderFn.ts

@@ -127,7 +127,7 @@ export function compatH(
   }
 
   // to support v2 string component name look!up
-  if (typeof type === 'string') {
+  if (isString(type)) {
     const t = hyphenate(type)
     if (t === 'transition' || t === 'transition-group' || t === 'keep-alive') {
       // since transition and transition-group are runtime-dom-specific,

packages/runtime-core/src/compat/renderHelpers.ts

@@ -5,6 +5,7 @@ import {
   isArray,
   isObject,
   isReservedProp,
+  isString,
   normalizeClass,
 } from '@vue/shared'
 import type { ComponentInternalInstance } from '../component'
@@ -170,13 +171,13 @@ export function legacyMarkOnce(tree: VNode) {
 export function legacyBindDynamicKeys(props: any, values: any[]) {
   for (let i = 0; i < values.length; i += 2) {
     const key = values[i]
-    if (typeof key === 'string' && key) {
+    if (isString(key) && key) {
       props[values[i]] = values[i + 1]
     }
   }
   return props
 }
 
 export function legacyPrependModifier(value: any, symbol: string) {
-  return typeof value === 'string' ? symbol + value : value
+  return isString(value) ? symbol + value : value
 }

packages/runtime-core/src/components/Suspense.ts

@@ -10,7 +10,13 @@ import {
   normalizeVNode,
   openBlock,
 } from '../vnode'
-import { ShapeFlags, isArray, isFunction, toNumber } from '@vue/shared'
+import {
+  ShapeFlags,
+  isArray,
+  isFunction,
+  isNumber,
+  toNumber,
+} from '@vue/shared'
 import { type ComponentInternalInstance, handleSetupResult } from '../component'
 import type { Slots } from '../componentSlots'
 import {
@@ -500,7 +506,7 @@ function createSuspenseBoundary(
     hiddenContainer,
     deps: 0,
     pendingId: suspenseId++,
-    timeout: typeof timeout === 'number' ? timeout : -1,
+    timeout: isNumber(timeout) ? timeout : -1,
     activeBranch: null,
     pendingBranch: null,
     isInFallback: !isHydrating,

packages/runtime-core/src/customFormatter.ts

@@ -6,7 +6,16 @@ import {
   isShallow,
   toRaw,
 } from '@vue/reactivity'
-import { EMPTY_OBJ, extend, isArray, isFunction, isObject } from '@vue/shared'
+import {
+  EMPTY_OBJ,
+  extend,
+  isArray,
+  isBoolean,
+  isFunction,
+  isNumber,
+  isObject,
+  isString,
+} from '@vue/shared'
 import type { ComponentInternalInstance, ComponentOptions } from './component'
 import type { ComponentPublicInstance } from './componentPublicInstance'
 
@@ -144,11 +153,11 @@ export function initCustomFormatter() {
   }
 
   function formatValue(v: unknown, asRaw = true) {
-    if (typeof v === 'number') {
+    if (isNumber(v)) {
       return ['span', numberStyle, v]
-    } else if (typeof v === 'string') {
+    } else if (isString(v)) {
       return ['span', stringStyle, JSON.stringify(v)]
-    } else if (typeof v === 'boolean') {
+    } else if (isBoolean(v)) {
       return ['span', keywordStyle, v]
     } else if (isObject(v)) {
       return ['object', { object: asRaw ? toRaw(v) : v }]

packages/runtime-core/src/helpers/renderList.ts

@@ -1,5 +1,5 @@
 import type { VNode, VNodeChild } from '../vnode'
-import { isArray, isObject, isString } from '@vue/shared'
+import { isArray, isNumber, isObject, isString } from '@vue/shared'
 import { warn } from '../warning'
 
 /**
@@ -64,7 +64,7 @@ export function renderList(
     for (let i = 0, l = source.length; i < l; i++) {
       ret[i] = renderItem(source[i], i, undefined, cached && cached[i])
     }
-  } else if (typeof source === 'number') {
+  } else if (isNumber(source)) {
     if (__DEV__ && !Number.isInteger(source)) {
       warn(`The v-for range expect an integer value but got ${source}.`)
     }

packages/runtime-core/src/vnode.ts

@@ -5,7 +5,9 @@ import {
   SlotFlags,
   extend,
   isArray,
+  isBoolean,
   isFunction,
+  isNumber,
   isObject,
   isOn,
   isString,
@@ -420,7 +422,7 @@ const normalizeRef = ({
   ref_key,
   ref_for,
 }: VNodeProps): VNodeNormalizedRefAtom | null => {
-  if (typeof ref === 'number') {
+  if (isNumber(ref)) {
     ref = '' + ref
   }
   return (
@@ -759,7 +761,7 @@ export function createCommentVNode(
 }
 
 export function normalizeVNode(child: VNodeChild): VNode {
-  if (child == null || typeof child === 'boolean') {
+  if (child == null || isBoolean(child)) {
     // empty placeholder
     return createVNode(Comment)
   } else if (isArray(child)) {

packages/runtime-core/src/warning.ts

@@ -5,7 +5,7 @@ import {
   type Data,
   formatComponentName,
 } from './component'
-import { isFunction, isString } from '@vue/shared'
+import { isBoolean, isFunction, isNumber, isString } from '@vue/shared'
 import { isRef, pauseTracking, resetTracking, toRaw } from '@vue/reactivity'
 import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 
@@ -145,11 +145,7 @@ function formatProp(key: string, value: unknown, raw?: boolean): any {
   if (isString(value)) {
     value = JSON.stringify(value)
     return raw ? value : [`${key}=${value}`]
-  } else if (
-    typeof value === 'number' ||
-    typeof value === 'boolean' ||
-    value == null
-  ) {
+  } else if (isNumber(value) || isBoolean(value) || value == null) {
     return raw ? value : [`${key}=${value}`]
   } else if (isRef(value)) {
     value = formatProp(key, toRaw(value.value), true)

packages/runtime-dom/src/apiCustomElement.ts

@@ -24,7 +24,15 @@ import {
   nextTick,
   warn,
 } from '@vue/runtime-core'
-import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared'
+import {
+  camelize,
+  extend,
+  hyphenate,
+  isArray,
+  isNumber,
+  isString,
+  toNumber,
+} from '@vue/shared'
 import { hydrate, render } from '.'
 
 export type VueElementConstructor<P = {}> = {
@@ -360,7 +368,7 @@ export class VueElement extends BaseClass {
       if (shouldReflect) {
         if (val === true) {
           this.setAttribute(hyphenate(key), '')
-        } else if (typeof val === 'string' || typeof val === 'number') {
+        } else if (isString(val) || isNumber(val)) {
           this.setAttribute(hyphenate(key), val + '')
         } else if (!val) {
           this.removeAttribute(hyphenate(key))

packages/server-renderer/src/helpers/ssrRenderList.ts

@@ -1,4 +1,4 @@
-import { isArray, isObject, isString } from '@vue/shared'
+import { isArray, isNumber, isObject, isString } from '@vue/shared'
 import { warn } from '@vue/runtime-core'
 
 export function ssrRenderList(
@@ -9,7 +9,7 @@ export function ssrRenderList(
     for (let i = 0, l = source.length; i < l; i++) {
       renderItem(source[i], i)
     }
-  } else if (typeof source === 'number') {
+  } else if (isNumber(source)) {
     if (__DEV__ && !Number.isInteger(source)) {
       warn(`The v-for range expect an integer value but got ${source}.`)
       return

packages/shared/src/general.ts

@@ -47,6 +47,9 @@ export const isRegExp = (val: unknown): val is RegExp =>
   toTypeString(val) === '[object RegExp]'
 export const isFunction = (val: unknown): val is Function =>
   typeof val === 'function'
+export const isNumber = (val: unknown): val is number => typeof val === 'number'
+export const isBoolean = (val: unknown): val is boolean =>
+  typeof val === 'boolean'
 export const isString = (val: unknown): val is string => typeof val === 'string'
 export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'
 export const isObject = (val: unknown): val is Record<any, any> =>

packages/shared/src/normalizeProp.ts

@@ -1,4 +1,4 @@
-import { hyphenate, isArray, isObject, isString } from './general'
+import { hyphenate, isArray, isNumber, isObject, isString } from './general'
 
 export type NormalizedStyle = Record<string, string | number>
 
@@ -51,7 +51,7 @@ export function stringifyStyle(
   }
   for (const key in styles) {
     const value = styles[key]
-    if (isString(value) || typeof value === 'number') {
+    if (isString(value) || isNumber(value)) {
       const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key)
       // only render valid values
       ret += `${normalizedKey}:${value};`