Formatting

tip

For money formatting, see localization.

Formatting functions are defined in @/utils/formatting. By default this includes a set of common formatting functions from SALVO-TS (see examples below.)

Built-in formatting

typescript
// Use all formatting functions
import * as formatting from '@/utils/formatting';
// Use as formatting.camelCase('my example');
// Import specific functions
import { camelCase, kebabCase } from '@/utils/formatting';
// Use as camelCase('my example');
/**
 * Change casing
 */
camelCase('my example')
// => "myExample"
pascalCase('my example')
// => "MyExample"
kebabCase('my example')
// => "my-example"
snakeCase('my example')
// => "my_example"
constantCase('my example')
// => "MY_EXAMPLE"
capitalCase('my example')
// => "My Example"
sentanceCase('my example')
// => "My example"
noCase('my example')
// => "my example"
headerCase('my example')
// => "My-Example"
dotCase('my example')
// => "my.example"
pathCase('my example')
// => "my/example"
/**
 * Shopify-related
 */
// Get handle string from title text - not guarenteed to match a particular URL since the merchant can override.
handlize('My Example 1239%!')
// => "my-example-1239"
// Get desired image size from CDN URL
getImageSize('https://cdn.shopify.com/s/files/1/0479/3060/5720/products/801010_Beef_Meal_and_Pack_720x.jpg?v=1610613985')
// => "700x"
// Modify CDN URL with desired image size
getSizedImageUrl('https://cdn.shopify.com/s/files/1/0479/3060/5720/products/801010_Beef_Meal_and_Pack_720x.jpg?v=1610613985', '300x200')
// => "https://cdn.shopify.com/s/files/1/0479/3060/5720/products/801010_Beef_Meal_and_Pack_300x200.jpg?v=1610613985"

typescript
// Use all formatting functions
import * as formatting from '@/utils/formatting';
// Use as formatting.camelCase('my example');
// Import specific functions
import { camelCase, kebabCase } from '@/utils/formatting';
// Use as camelCase('my example');
/**
 * Change casing
 */
camelCase('my example')
// => "myExample"
pascalCase('my example')
// => "MyExample"
kebabCase('my example')
// => "my-example"
snakeCase('my example')
// => "my_example"
constantCase('my example')
// => "MY_EXAMPLE"
capitalCase('my example')
// => "My Example"
sentanceCase('my example')
// => "My example"
noCase('my example')
// => "my example"
headerCase('my example')
// => "My-Example"
dotCase('my example')
// => "my.example"
pathCase('my example')
// => "my/example"
/**
 * Shopify-related
 */
// Get handle string from title text - not guarenteed to match a particular URL since the merchant can override.
handlize('My Example 1239%!')
// => "my-example-1239"
// Get desired image size from CDN URL
getImageSize('https://cdn.shopify.com/s/files/1/0479/3060/5720/products/801010_Beef_Meal_and_Pack_720x.jpg?v=1610613985')
// => "700x"
// Modify CDN URL with desired image size
getSizedImageUrl('https://cdn.shopify.com/s/files/1/0479/3060/5720/products/801010_Beef_Meal_and_Pack_720x.jpg?v=1610613985', '300x200')
// => "https://cdn.shopify.com/s/files/1/0479/3060/5720/products/801010_Beef_Meal_and_Pack_300x200.jpg?v=1610613985"

Adding new formatting functions

To add new formatting functions, simply export them from src/utils/formatting.ts

typescript
// src/utils/formatting.ts
// ...
export function spongeCase(input: string): string {
  let result = "";
  for (let i = 0; i < input.length; i++) {
    result +=
      Math.random() > 0.5 ? input[i].toUpperCase() : input[i].toLowerCase();
  }
  return result;
}
// other file
import { spongeCase } from '@/utils/formatting';
spongeCase('my example');
// => "mY eXAmplE"

typescript
// src/utils/formatting.ts
// ...
export function spongeCase(input: string): string {
  let result = "";
  for (let i = 0; i < input.length; i++) {
    result +=
      Math.random() > 0.5 ? input[i].toUpperCase() : input[i].toLowerCase();
  }
  return result;
}
// other file
import { spongeCase } from '@/utils/formatting';
spongeCase('my example');
// => "mY eXAmplE"