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
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

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>>;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/shared@3.5.x
Publish Source
CLI
Badge
tessl/npm-vue--shared badge