CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--shared

Internal utility functions shared across Vue.js packages for DOM manipulation, type checking, and general utilities

—

Pending
Overview
Eval results
Files

Vue Shared

Vue Shared is the foundational utility library used internally across all Vue.js packages. It provides a comprehensive collection of utilities for DOM manipulation, type checking, reactive system optimizations, string transformations, and general-purpose functions. These utilities ensure consistent behavior and reduce code duplication across Vue's compiler, reactivity system, runtime, and other core packages.

Package Information

  • Package Name: @vue/shared
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @vue/shared

Core Imports

import { 
  isString, isObject, isFunction, extend, hasOwn,
  PatchFlags, ShapeFlags, SlotFlags,
  makeMap, camelize, hyphenate, capitalize,
  escapeHtml, normalizeClass, normalizeStyle
} from "@vue/shared";

For CommonJS:

const { 
  isString, isObject, isFunction, extend, hasOwn,
  PatchFlags, ShapeFlags, SlotFlags,
  makeMap, camelize, hyphenate, capitalize,
  escapeHtml, normalizeClass, normalizeStyle
} = require("@vue/shared");

Basic Usage

import { 
  isString, isObject, extend, camelize, 
  normalizeClass, escapeHtml, PatchFlags 
} from "@vue/shared";

// Type checking
if (isString(value)) {
  console.log("It's a string:", value);
}

if (isObject(data)) {
  const merged = extend({}, data, { newProp: "value" });
}

// String transformations
const camelCase = camelize("kebab-case-string"); // "kebabCaseString"
const kebabCase = hyphenate("camelCaseString"); // "camel-case-string"

// Class normalization
const classes = normalizeClass(["btn", { active: true }, "btn-primary"]);
// "btn active btn-primary"

// HTML escaping
const safe = escapeHtml('<script>alert("xss")</script>');
// "&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;"

// Using optimization flags
const patchFlag = PatchFlags.TEXT | PatchFlags.CLASS;
if (patchFlag & PatchFlags.TEXT) {
  // Handle text content updates
}

Architecture

Vue Shared is organized around several key functional areas:

  • Type System: Comprehensive type guards and checking utilities for all JavaScript types
  • String Utilities: Cached transformation functions for common string operations (camelCase, kebab-case, etc.)
  • DOM Configuration: Tag and attribute validation for HTML, SVG, and MathML elements
  • Reactive System Support: Optimization flags (PatchFlags, ShapeFlags, SlotFlags) for efficient rendering
  • Normalization: Standardization of props, styles, and classes across Vue components
  • Safety Utilities: HTML escaping, sanitization, and security helpers
  • General Utilities: Object manipulation, array helpers, and cross-environment compatibility

Capabilities

Type Checking and Validation

Comprehensive type guards and validation utilities for runtime type checking and safe property access.

function isString(val: unknown): val is string;
function isObject(val: unknown): val is Record<any, any>;
function isFunction(val: unknown): val is Function;
function isArray(val: unknown): val is any[];
function hasOwn(val: object, key: string | symbol): key is keyof typeof val;

Type Checking

String Transformations

Cached string transformation utilities for converting between naming conventions and manipulating text.

function camelize(str: string): string;
function hyphenate(str: string): string;
function capitalize<T extends string>(str: T): Capitalize<T>;
function toHandlerKey<T extends string>(str: T): T extends '' ? '' : `on${Capitalize<T>}`;

String Transformations

Reactive System Flags

Bitwise optimization flags used by Vue's compiler and runtime for efficient rendering and reactivity tracking.

enum PatchFlags {
  TEXT = 1,
  CLASS = 2,
  STYLE = 4,
  PROPS = 8,
  // ... more flags
}

enum ShapeFlags {
  ELEMENT = 1,
  FUNCTIONAL_COMPONENT = 2,
  STATEFUL_COMPONENT = 4,
  // ... more flags
}

Reactive System Flags

DOM Configuration

Validation utilities for HTML, SVG, and MathML elements and attributes, used by Vue's compiler for proper DOM handling.

function isHTMLTag(key: string): boolean;
function isSVGTag(key: string): boolean;
function isBooleanAttr(key: string): boolean;
function isVoidTag(key: string): boolean;

DOM Configuration

Props and Style Normalization

Utilities for normalizing component props, CSS styles, and class names into standardized formats.

function normalizeClass(value: unknown): string;
function normalizeStyle(value: unknown): NormalizedStyle | string | undefined;
function normalizeProps(props: Record<string, any> | null): Record<string, any> | null;

type NormalizedStyle = Record<string, string | number>;

Normalization

HTML Security

HTML escaping and sanitization utilities for preventing XSS attacks and ensuring safe rendering.

function escapeHtml(string: unknown): string;
function escapeHtmlComment(src: string): string;
function getEscapedCssVarName(key: string, doubleEscape: boolean): string;

HTML Security

Object and Array Utilities

General-purpose utilities for object manipulation, array operations, and data structure handling.

const extend: typeof Object.assign;
function remove<T>(arr: T[], el: T): void;
function def(obj: object, key: string | symbol, value: any, writable?: boolean): void;
function hasChanged(value: any, oldValue: any): boolean;

Object Utilities

Equality and Comparison

Deep equality checking and comparison utilities with special handling for complex data types.

function looseEqual(a: any, b: any): boolean;
function looseIndexOf(arr: any[], val: any): number;

Equality Utilities

Display and Formatting

Utilities for converting values to display strings and formatting data for user presentation.

function toDisplayString(val: unknown): string;
function generateCodeFrame(source: string, start?: number, end?: number): string;

Display Utilities

Environment and Global Access

Cross-environment utilities for accessing global objects and handling platform differences.

function getGlobalThis(): any;
function isGloballyAllowed(key: string): boolean;

Environment Utilities

Compiler Utilities

Internal utilities used by Vue's compiler for code generation and caching.

function genPropsAccessExp(name: string): string;
function genCacheKey(source: string, options: any): string;

Constants and Built-in Values

Common Constants

const EMPTY_OBJ: { readonly [key: string]: any };
const EMPTY_ARR: readonly never[];
const NOOP: () => void;
const NO: () => false;

Vue-Specific Lookups

function isReservedProp(key: string): boolean;
function isBuiltInDirective(key: string): boolean;
function isOn(key: string): boolean;
function isModelListener(key: string): key is `onUpdate:${string}`;

TypeScript Utility Types

Advanced TypeScript utility types for type manipulation and generic programming.

type Prettify<T> = { [K in keyof T]: T[K] } & {};
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
type LooseRequired<T> = { [P in keyof (T & Required<T>)]: T[P] };
type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
type IsKeyValues<T, K = string> = IfAny<T, false, T extends object ? (keyof T extends K ? true : false) : false>;
type OverloadParameters<T extends (...args: any[]) => any> = Parameters<OverloadUnion<T>>;

Install with Tessl CLI

npx tessl i tessl/npm-vue--shared
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/shared@3.5.x