tessl/npm-vue-resource

The HTTP client for Vue.js providing services for making web requests and handling responses using XMLHttpRequest or JSONP

—

Pending

Overview

Eval results

Files

URL Processing

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

URL templating and transformation utilities for building dynamic URLs with parameter substitution, query string handling, and URL parsing.

Capabilities

URL Templating

Core URL templating function that supports parameter substitution and transformations.

/**
 * Process URL template with parameters and transformations
 * @param url - URL template string
 * @param params - Parameters for substitution
 * @returns Processed URL string
 */
function $url(url: string, params?: object): string;

/**
 * Process URL template with options object
 * @param options - URL options including url, params, and other settings
 * @returns Processed URL string
 */
function $url(options: UrlOptions): string;

interface UrlOptions {
  url: string;
  params?: object;
  root?: string;
}

Usage Examples:

// Basic URL templating
const url = this.$url('/api/users/{id}', {id: 123});
// Result: '/api/users/123'

// Optional parameters with braces
const url = this.$url('/api/users{/id}', {id: 123});
// Result: '/api/users/123'

const url = this.$url('/api/users{/id}', {});
// Result: '/api/users'

// With query parameters
const url = this.$url('/api/users', {page: 1, limit: 10});
// Result: '/api/users?page=1&limit=10'

// Using options object
const url = this.$url({
  url: '/api/users/{id}',
  params: {id: 123, active: true},
  root: 'https://api.example.com'
});
// Result: 'https://api.example.com/api/users/123?active=true'

Parameter Encoding

Encode object parameters into URL query string format.

/**
 * Encode an object into URL parameter string
 * @param obj - Object to encode as parameters
 * @returns URL-encoded parameter string
 */
function $url.params(obj: object): string;

Usage Examples:

// Simple parameters
const params = this.$url.params({name: 'John', age: 30});
// Result: 'name=John&age=30'

// Array parameters
const params = this.$url.params({tags: ['javascript', 'vue', 'http']});
// Result: 'tags[]=javascript&tags[]=vue&tags[]=http'

// Nested object parameters
const params = this.$url.params({
  user: {name: 'John', email: 'john@example.com'},
  active: true
});
// Result: 'user[name]=John&user[email]=john%40example.com&active=true'

// Function values (called at encode time)
const params = this.$url.params({
  timestamp: () => Date.now(),
  random: Math.random
});
// Result: 'timestamp=1609459200000&random=0.123456789'

// Null values become empty strings
const params = this.$url.params({name: 'John', city: null});
// Result: 'name=John&city='

URL Parsing

Parse a URL string into its component parts.

/**
 * Parse a URL and return its components
 * @param url - URL string to parse
 * @returns Object with URL components
 */
function $url.parse(url: string): UrlComponents;

interface UrlComponents {
  /** Complete URL */
  href: string;
  /** Protocol (http, https, etc.) */
  protocol: string;
  /** Port number */
  port: string;
  /** Host with port */
  host: string;
  /** Hostname without port */
  hostname: string;
  /** Path portion */
  pathname: string;
  /** Query string without leading ? */
  search: string;  
  /** Hash fragment without leading # */
  hash: string;
}

Usage Examples:

const components = this.$url.parse('https://api.example.com:8080/users?page=1#section');

console.log(components.protocol); // 'https'
console.log(components.hostname); // 'api.example.com'
console.log(components.port);     // '8080'
console.log(components.host);     // 'api.example.com:8080'
console.log(components.pathname); // '/users'
console.log(components.search);   // 'page=1'
console.log(components.hash);     // 'section'
console.log(components.href);     // 'https://api.example.com:8080/users?page=1#section'

// Relative URL
const components = this.$url.parse('/api/users?active=true');
console.log(components.pathname); // '/api/users'
console.log(components.search);   // 'active=true'
console.log(components.protocol); // ''
console.log(components.hostname); // ''

Global URL Configuration

Configure default URL options and transformations.

// Default URL options
Vue.url.options: UrlOptions;

// URL transformation functions
Vue.url.transform: {
  template: Function;
  query: Function;
  root: Function;
};

// URL transformation pipeline
Vue.url.transforms: string[];

Usage Examples:

// Set global root URL
Vue.url.options.root = 'https://api.example.com';

// All URL calls will now use this root
const url = this.$url('/users'); 
// Result: 'https://api.example.com/users'

// Set default parameters
Vue.url.options.params = {version: 'v1'};

const url = this.$url('/users');
// Result: 'https://api.example.com/users?version=v1'

// Custom URL transformation
Vue.url.transforms.push('custom');
Vue.url.transform.custom = function(options, next) {
  // Add timestamp to all URLs
  options.params = options.params || {};
  options.params._t = Date.now();
  return next(options);
};

URL Template Syntax

Vue Resource supports URI template syntax for flexible URL construction.

Template Patterns:

// Basic parameter substitution
'/users/{id}'          // Required parameter
'/users/{id}/posts'    // Multiple parameters

// Optional parameters (with braces)
'/users{/id}'          // Optional parameter
'/users{/id}{/action}' // Multiple optional parameters

// Query parameters (automatically added)
'/users' + {page: 1, limit: 10} // Results in '/users?page=1&limit=10'

Usage Examples:

// Required parameters
this.$url('/users/{id}', {id: 123});
// Result: '/users/123'

this.$url('/users/{id}', {}); 
// Error: Missing required parameter 'id'

// Optional parameters
this.$url('/users{/id}', {id: 123});
// Result: '/users/123'

this.$url('/users{/id}', {});
// Result: '/users'

// Multiple optional parameters
this.$url('/users{/id}{/action}', {id: 123});
// Result: '/users/123'

this.$url('/users{/id}{/action}', {id: 123, action: 'edit'});
// Result: '/users/123/edit'

// Mixed required and optional
this.$url('/api/{version}/users{/id}', {version: 'v1', id: 123});
// Result: '/api/v1/users/123'

// Unused parameters become query string
this.$url('/users/{id}', {id: 123, active: true, page: 1});
// Result: '/users/123?active=true&page=1'

Types

interface UrlOptions {
  /** URL template string */
  url: string;
  /** Parameters for substitution and query string */
  params?: object;
  /** Root URL to prepend */
  root?: string;
}

interface UrlComponents {
  /** Complete URL */
  href: string;
  /** Protocol (http, https, etc.) without trailing colon */
  protocol: string;
  /** Port number as string */
  port: string;
  /** Host including port */
  host: string;
  /** Hostname without port */
  hostname: string;
  /** Path portion starting with / */
  pathname: string;
  /** Query string without leading ? */
  search: string;
  /** Hash fragment without leading # */
  hash: string;
}

interface UrlTransform {
  /** Template parameter substitution */
  template: (options: UrlOptions, next: Function) => UrlOptions;
  /** Query string processing */
  query: (options: UrlOptions, next: Function) => UrlOptions;  
  /** Root URL prepending */
  root: (options: UrlOptions, next: Function) => UrlOptions;
}

Install with Tessl CLI