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

Props and Style Normalization

Name: tessl/npm-vue--shared
Author: tessl

Utilities for normalizing component props, CSS styles, and class names into standardized formats that Vue's runtime can process consistently. These functions handle the variety of ways developers can specify styles and classes.

Capabilities

Style Normalization

Functions for converting various style input formats into consistent, processable formats.

/**
 * Normalized style object type - string keys with string or number values
 */
type NormalizedStyle = Record<string, string | number>;

/**
 * Normalize style binding to a consistent format
 * Handles arrays, objects, and strings
 * @param value - Style value in any supported format
 * @returns Normalized style object, string, or undefined
 */
function normalizeStyle(
  value: unknown
): NormalizedStyle | string | undefined;

/**
 * Parse CSS string into normalized style object
 * Handles CSS comments and various delimiter formats
 * @param cssText - CSS string to parse
 * @returns Object with CSS properties as keys
 */
function parseStringStyle(cssText: string): NormalizedStyle;

/**
 * Convert normalized style object back to CSS string
 * Automatically converts camelCase properties to kebab-case
 * @param styles - Style object or string to stringify
 * @returns CSS string representation
 */
function stringifyStyle(
  styles: NormalizedStyle | string | undefined
): string;

Class Normalization

Functions for normalizing class bindings into space-separated class name strings.

/**
 * Normalize class binding to a space-separated string
 * Handles strings, arrays, and objects with conditional classes
 * @param value - Class value in any supported format
 * @returns Space-separated class name string
 */
function normalizeClass(value: unknown): string;

Props Normalization

Combined normalization function for component props that handles both class and style properties.

/**
 * Normalize props object by standardizing class and style properties  
 * Applies class and style normalization to props object
 * @param props - Props object to normalize (can be null)
 * @returns Normalized props object or null
 */
function normalizeProps(
  props: Record<string, any> | null
): Record<string, any> | null;

CSS Variable Utilities

Functions for handling CSS custom properties (variables) in Vue's style binding system.

/**
 * Normalize CSS variable value for v-bind in style blocks
 * Handles null/undefined values and non-finite numbers
 * @param value - CSS variable value to normalize
 * @returns Normalized string value for CSS variable
 */
function normalizeCssVarValue(value: unknown): string;

Usage Examples:

import { 
  normalizeClass, 
  normalizeStyle, 
  parseStringStyle,
  stringifyStyle,
  normalizeProps,
  normalizeCssVarValue
} from "@vue/shared";

// Class normalization
const classes1 = normalizeClass("btn primary"); // "btn primary"
const classes2 = normalizeClass(["btn", "primary", "active"]); // "btn primary active"
const classes3 = normalizeClass({
  btn: true,
  primary: true,
  disabled: false
}); // "btn primary"
const classes4 = normalizeClass([
  "btn", 
  { primary: true, disabled: false }, 
  "size-large"
]); // "btn primary size-large"

// Style normalization - objects
const style1 = normalizeStyle({
  color: "red",
  fontSize: "14px",
  backgroundColor: "blue"
});
// Returns: { color: "red", fontSize: "14px", backgroundColor: "blue" }

// Style normalization - arrays
const style2 = normalizeStyle([
  { color: "red" },
  { fontSize: "14px" },
  "background-color: blue; margin: 0"
]);
// Returns: { color: "red", fontSize: "14px", "background-color": "blue", margin: "0" }

// Style normalization - strings (pass through)
const style3 = normalizeStyle("color: red; font-size: 14px");
// Returns: "color: red; font-size: 14px"

// Parse CSS strings
const parsed = parseStringStyle("color: red; font-size: 14px; /* comment */ margin: 0");
// Returns: { color: "red", "font-size": "14px", margin: "0" }

// Stringify style objects
const cssString = stringifyStyle({
  color: "red",
  fontSize: 14,
  backgroundColor: "blue",
  "--custom-var": "value"
});
// Returns: "color:red;font-size:14;background-color:blue;--custom-var:value;"

// Props normalization
const originalProps = {
  id: "my-component",
  class: ["btn", { primary: true }],
  style: [{ color: "red" }, "font-size: 14px"]
};

const normalized = normalizeProps(originalProps);
// Returns: {
//   id: "my-component", 
//   class: "btn primary",
//   style: { color: "red", "font-size": "14px" }
// }

// CSS variable normalization
const cssVar1 = normalizeCssVarValue("red"); // "red"
const cssVar2 = normalizeCssVarValue(null); // "initial"
const cssVar3 = normalizeCssVarValue(""); // " " (single space)
const cssVar4 = normalizeCssVarValue(42); // "42"
const cssVar5 = normalizeCssVarValue(NaN); // "NaN" (with dev warning)