or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

amd-loading.mdbuild-system.mdcommand-line.mdconfiguration.mderror-handling.mdindex.mdplugin-system.md
tile.json

amd-loading.mddocs/

AMD Module Loading

Core AMD (Asynchronous Module Definition) implementation providing module loading, dependency resolution, and execution management for browser and server environments.

Capabilities

Define Function

Defines a new AMD module with optional dependencies and factory function.

/**
 * Define an AMD module
 * @param id - Optional module identifier
 * @param deps - Array of dependency module identifiers
 * @param factory - Module factory function or object
 */
function define(id?: string, deps?: string[], factory?: Function | any): void;

// Anonymous module (most common)
define(['dep1', 'dep2'], function(dep1, dep2) {
  return { /* module exports */ };
});

// Named module
define('myModule', ['dep1'], function(dep1) {
  return { /* module exports */ };
});

// Simple object module
define({ value: 42, name: 'simple' });

// CommonJS wrapper
define(function(require, exports, module) {
  var dep = require('dependency');
  exports.method = function() { /* implementation */ };
});

Usage Examples:

// Basic module definition
define(['jquery', 'underscore'], function($, _) {
  return {
    init: function() {
      console.log('Module initialized');
    },
    process: function(data) {
      return _.map(data, function(item) {
        return $(item).text();
      });
    }
  };
});

// Module with no dependencies
define(function() {
  return {
    version: '1.0.0',
    utils: {
      capitalize: function(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
      }
    }
  };
});

Require Function

Loads and executes modules asynchronously with their dependencies.

/**
 * Load modules asynchronously
 * @param deps - Array of module identifiers to load
 * @param callback - Function called when all modules are loaded
 * @param errback - Optional error callback
 * @returns Module value when called synchronously (inside define)
 */
function require(deps: string[], callback?: Function, errback?: Function): any;

// Local require (synchronous, inside define)
function require(moduleId: string): any;

Usage Examples:

// Asynchronous require
require(['module1', 'module2'], function(mod1, mod2) {
  mod1.init();
  mod2.process();
});

// With error handling
require(['risky-module'], 
  function(module) {
    module.start();
  },
  function(err) {
    console.error('Failed to load module:', err);
  }
);

// Synchronous require (inside define)
define(['jquery'], function($) {
  var _ = require('underscore'); // Synchronous
  return {
    // module implementation
  };
});

Configuration

Configure module loading behavior, paths, and dependencies.

/**
 * Configure RequireJS behavior
 * @param config - Configuration object
 */
function require.config(config: RequireConfig): void;

interface RequireConfig {
  /** Base URL for all module lookups */
  baseUrl?: string;
  /** Path mappings for module names */
  paths?: { [key: string]: string };
  /** Package configuration */
  packages?: PackageConfig[];
  /** Module mapping for different contexts */
  map?: { [key: string]: { [key: string]: string } };
  /** Configuration passed to modules */
  config?: { [key: string]: any };
  /** Shim configuration for non-AMD libraries */
  shim?: { [key: string]: ShimConfig };
  /** Timeout for module loading (seconds) */
  waitSeconds?: number;
  /** Context name for multiple RequireJS instances */
  context?: string;
  /** Dependencies to load immediately */
  deps?: string[];
  /** Callback after deps are loaded */
  callback?: Function;
}

interface PackageConfig {
  name: string;
  location?: string;
  main?: string;
}

interface ShimConfig {
  deps?: string[];
  exports?: string;
  init?: Function;
}

Usage Examples:

// Basic configuration
require.config({
  baseUrl: 'scripts',
  paths: {
    'jquery': 'lib/jquery-1.8.2.min',
    'underscore': 'lib/underscore-min',
    'backbone': 'lib/backbone-min'
  }
});

// Package configuration
require.config({
  packages: [
    {
      name: 'dojo',
      location: 'lib/dojo',
      main: 'main'
    }
  ]
});

// Shim for non-AMD libraries
require.config({
  shim: {
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});

// Module-specific configuration
require.config({
  config: {
    'my-module': {
      apiUrl: 'https://api.example.com',
      timeout: 5000
    }
  }
});

Context Management

Create isolated RequireJS contexts for multiple applications or configurations.

/**
 * Create a new RequireJS context
 * @param contextName - Unique context identifier
 * @returns New RequireJS instance
 */
function requirejs.config({ context: string }): RequireJS;

// Access existing context
function requirejs.s.contexts[contextName]: Context;

Usage Examples:

// Create separate contexts
var appContext = requirejs.config({
  context: 'app',
  baseUrl: 'app-scripts'
});

var adminContext = requirejs.config({
  context: 'admin', 
  baseUrl: 'admin-scripts'
});

// Use different contexts
appContext(['main'], function(main) {
  main.startApp();
});

adminContext(['admin-main'], function(adminMain) {
  adminMain.startAdmin();
});

Utility Functions

Helper functions for module management and debugging.

/**
 * Convert module name to URL
 * @param moduleNamePlusExt - Module name with file extension
 * @returns Full URL to module
 */
function require.toUrl(moduleNamePlusExt: string): string;

/**
 * Undefine a module (for debugging/reloading)
 * @param moduleName - Name of module to undefine
 */
function require.undef(moduleName: string): void;

/**
 * Check if module is defined
 * @param moduleName - Name of module to check
 * @returns True if module is defined
 */
function require.defined(moduleName: string): boolean;

/**
 * Check if module is specified (loading or loaded)
 * @param moduleName - Name of module to check  
 * @returns True if module is specified
 */
function require.specified(moduleName: string): boolean;

// Environment and version properties
var require.version: string;     // RequireJS version
var require.isBrowser: boolean;  // True if running in browser environment

Usage Examples:

// Convert to URL
var url = require.toUrl('templates/user.html');
// Returns: 'scripts/templates/user.html'

// Check module status
if (require.defined('my-module')) {
  console.log('Module is loaded');
}

if (require.specified('loading-module')) {
  console.log('Module is loading or loaded');
}

// Undefine for reloading
require.undef('my-module');
require(['my-module'], function(reloaded) {
  // Fresh copy loaded
});

// Environment detection
console.log('RequireJS version:', require.version);
if (require.isBrowser) {
  console.log('Running in browser');
  // Browser-specific code
} else {
  console.log('Running in server environment');
  // Server-specific code
}

Error Handling

Handle module loading errors and dependency issues.

// Error callback in require
function require(deps: string[], success: Function, error: (err: RequireError) => void): void;

interface RequireError extends Error {
  requireType: "timeout" | "nodefine" | "scripterror" | "mismatch";
  requireModules: string[];
  originalError?: Error;
}

// Global error handler
function requirejs.onError(err: RequireError): void;

Usage Examples:

// Handle specific require errors
require(['problematic-module'], 
  function(module) {
    // Success
  },
  function(err) {
    console.log('Error type:', err.requireType);
    console.log('Failed modules:', err.requireModules);
    
    if (err.requireType === 'timeout') {
      console.log('Module loading timed out');
    } else if (err.requireType === 'nodefine') {
      console.log('Module did not call define()');
    }
  }
);

// Global error handling
requirejs.onError = function(err) {
  console.error('RequireJS error:', err);
  // Report to error tracking service
  if (window.errorTracker) {
    window.errorTracker.report(err);
  }
};

Types

// Module factory function signatures
type ModuleFactory = (...deps: any[]) => any;
type CommonJSFactory = (require: LocalRequire, exports: any, module: ModuleObject) => void;

interface LocalRequire {
  (moduleId: string): any;
  toUrl(moduleNamePlusExt: string): string;
}

interface ModuleObject {
  id: string;
  uri: string;
  config(): any;
  exports: any;
}

// Context and loading state
interface Context {
  config: RequireConfig;
  defined: { [key: string]: any };
  waiting: { [key: string]: boolean };
  urlFetched: { [key: string]: boolean };
}