jQuery Integration

/**
 * Get or set URI for DOM element with automatic synchronization
 * @param uri - URI string or URI instance to set
 * @returns URI instance (getter) or jQuery object (setter)
 */
$.fn.uri(uri?: string | URI): URI | jQuery;

// Import jQuery plugin
import 'urijs/src/jquery.URI';

// HTML: <a href="http://example.com/path">Link</a>
const $link = $('a');

// Get URI from element
const linkUri = $link.uri();
console.log(linkUri.hostname()); // 'example.com'
console.log(linkUri.pathname()); // '/path'

// Modify URI - automatically updates href attribute
linkUri.hostname('newhost.com')
       .addQuery('source', 'jquery');

console.log($link.attr('href')); // 'http://newhost.com/path?source=jquery'

// Set new URI
$link.uri('https://api.example.com/users');
console.log($link.attr('href')); // 'https://api.example.com/users'

// Work with different element types
$('img').uri().hostname('cdn.example.com'); // Updates src attribute
$('form').uri().pathname('/new-action'); // Updates action attribute
$('script').uri().protocol('https'); // Updates src attribute

// Batch operations
$('a').each(function() {
  const $this = $(this);
  const uri = $this.uri();
  
  // Add tracking to all links
  uri.addQuery('utm_source', 'website');
  
  // Convert to HTTPS
  if (uri.protocol() === 'http') {
    uri.protocol('https');
  }
});

// URI component attribute hooks
$.attrHooks['uri:origin']: object;
$.attrHooks['uri:authority']: object;
$.attrHooks['uri:directory']: object;
$.attrHooks['uri:domain']: object;
$.attrHooks['uri:filename']: object;
$.attrHooks['uri:fragment']: object;
$.attrHooks['uri:hash']: object;
$.attrHooks['uri:host']: object;
$.attrHooks['uri:hostname']: object;
$.attrHooks['uri:href']: object;
$.attrHooks['uri:password']: object;
$.attrHooks['uri:path']: object;
$.attrHooks['uri:pathname']: object;
$.attrHooks['uri:port']: object;
$.attrHooks['uri:protocol']: object;
$.attrHooks['uri:query']: object;
$.attrHooks['uri:resource']: object;
$.attrHooks['uri:scheme']: object;
$.attrHooks['uri:search']: object;
$.attrHooks['uri:subdomain']: object;
$.attrHooks['uri:suffix']: object;
$.attrHooks['uri:tld']: object;
$.attrHooks['uri:username']: object;

// Direct attribute hooks
$.attrHooks['src']: object;
$.attrHooks['href']: object;
$.attrHooks['action']: object;
$.attrHooks['uri']: object;
$.attrHooks['cite']: object;

// HTML: <a href="http://www.example.com:8080/path/file.html?query=value#section">Link</a>
const $link = $('a');

// Access URI components directly as attributes
console.log($link.attr('uri:hostname')); // 'www.example.com'
console.log($link.attr('uri:port')); // '8080'
console.log($link.attr('uri:pathname')); // '/path/file.html'
console.log($link.attr('uri:query')); // 'query=value'
console.log($link.attr('uri:fragment')); // 'section'

// Set URI components directly
$link.attr('uri:hostname', 'api.example.com');
$link.attr('uri:port', '9000');
$link.attr('uri:pathname', '/api/users');

console.log($link.attr('href')); // 'http://api.example.com:9000/api/users?query=value#section'

// Domain-specific components
console.log($link.attr('uri:subdomain')); // 'api'
console.log($link.attr('uri:domain')); // 'example'
console.log($link.attr('uri:tld')); // 'com'

// Path-specific components
console.log($link.attr('uri:directory')); // '/api'
console.log($link.attr('uri:filename')); // 'users'

// Compound components
console.log($link.attr('uri:authority')); // 'api.example.com:9000'
console.log($link.attr('uri:origin')); // 'http://api.example.com:9000'

// Batch attribute updates
$('a[href^="http://"]').attr('uri:protocol', 'https');
$('img[src*="old-cdn"]').attr('uri:hostname', 'new-cdn.example.com');

/**
 * CSS pseudo-selector for URI matching
 * Supports operators: =, ^=, $=, *=, equals:, is:
 * @param selector - URI selector expression
 * @returns Matched elements
 */
$(':uri(selector)'): jQuery;

// Select by exact URI match
const exactMatch = $(':uri(http://example.com/page)');

// Select by URI component equality
const httpsLinks = $(':uri(protocol=https)');
const exampleDomain = $(':uri(hostname=example.com)');
const apiPaths = $(':uri(pathname^=/api)');

// Select by URI property
const relativeLinks = $(':uri(is:relative)');
const absoluteLinks = $(':uri(is:absolute)');
const domainLinks = $(':uri(is:domain)');
const ipLinks = $(':uri(is:ip)');

// Complex selectors
const httpsApi = $(':uri(protocol=https):uri(pathname^=/api)');
const externalLinks = $('a:uri(hostname!=example.com)');

// Wildcard matching
const cdnImages = $('img:uri(hostname*=cdn)');
const pdfLinks = $('a:uri(pathname$=.pdf)');

// Use with other jQuery methods
$(':uri(protocol=http)').attr('uri:protocol', 'https');
$(':uri(is:relative)').each(function() {
  const $this = $(this);
  const uri = $this.uri();
  console.log('Relative URI:', uri.toString());
});

// Combine with standard CSS selectors
const secureApiLinks = $('a.api-link:uri(protocol=https)');
const internalImages = $('img.content:uri(hostname=example.com)');

// Advanced URI property checks
const sldDomains = $(':uri(is:sld)'); // Second-level domains
const punycodeDomains = $(':uri(is:punycode)'); // Punycode domains
const ipv6Addresses = $(':uri(is:ip6)'); // IPv6 addresses
const urnResources = $(':uri(is:urn)'); // URN resources

/**
 * Enhanced build method that updates associated DOM elements
 * @param deferBuild - Don't trigger automatic rebuilding
 * @returns Complete URI string
 */
build(deferBuild?: boolean): string;

// Create URI from jQuery element
const $link = $('<a href="http://example.com/page">Link</a>');
const linkUri = $link.uri();

// Modifications automatically sync with DOM
linkUri.hostname('newhost.com')
       .addQuery('ref', 'jquery')
       .fragment('section');

console.log($link.attr('href')); // 'http://newhost.com/page?ref=jquery#section'

// Manual build triggers DOM update
linkUri.pathname('/newpath');
linkUri.build(); // Forces DOM synchronization

// Deferred building for performance
linkUri.hostname('api.example.com', false) // Don't build yet
       .port(8080, false)                   // Don't build yet
       .pathname('/api/users', false)       // Don't build yet
       .build();                            // Build now and update DOM

// Batch DOM updates
$('a').each(function() {
  const $this = $(this);
  const uri = $this.uri();
  
  // Make multiple changes without rebuilding
  uri.protocol('https', false)
     .addQuery('utm_source', 'jquery', false)
     .build(); // Single DOM update per element
});

// Link transformation
$(document).ready(function() {
  // Convert all HTTP links to HTTPS
  $('a:uri(protocol=http)').each(function() {
    $(this).uri().protocol('https');
  });
  
  // Add tracking to external links
  $('a:uri(hostname!=example.com)').each(function() {
    $(this).uri().addQuery('utm_source', 'website')
                 .addQuery('utm_medium', 'link');
  });
  
  // Open external links in new window
  $('a:uri(hostname!=example.com)').attr('target', '_blank');
});

// Image CDN migration
function migrateToCDN(cdnHost) {
  $('img').each(function() {
    const $img = $(this);
    const uri = $img.uri();
    
    if (uri.hostname() === 'old-cdn.example.com') {
      uri.hostname(cdnHost);
    }
  });
}

// Form action updates
$('form:uri(protocol=http)').attr('uri:protocol', 'https');
$('form:uri(hostname=staging.example.com)').attr('uri:hostname', 'api.example.com');

// Dynamic URI building
function buildApiUrl(endpoint, params) {
  const $template = $('<a>').attr('href', 'https://api.example.com/');
  const uri = $template.uri();
  
  uri.pathname('/api/v1/' + endpoint);
  
  if (params) {
    Object.keys(params).forEach(key => {
      uri.addQuery(key, params[key]);
    });
  }
  
  return uri.toString();
}

const userUrl = buildApiUrl('users', { page: 1, limit: 10 });
console.log(userUrl); // 'https://api.example.com/api/v1/users?page=1&limit=10'