JavaScript Modules – import and export

// Without modules – everything is global (old way)
// math.js (included via <script>)
var add = function(a, b) { return a + b; }; // pollutes global scope

// With modules – private by default
// math.js
const PI = Math.PI; // private — not accessible outside this file

export function add(a, b) { return a + b; }         // named export
export function multiply(a, b) { return a * b; }    // named export
export const VERSION = '1.0.0';                      // export a value

// utils.js
export function formatDate(date) {
  return date.toLocaleDateString('en-GB');
}

export function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export const MAX_RETRIES = 3;

// Alternative: declare first, export at the end
function debounce(fn, delay) { /* ... */ }
function throttle(fn, limit) { /* ... */ }
export { debounce, throttle }; // export list

// Rename on export
export { debounce as debounceFn };

// logger.js – a single default export
export default class Logger {
  constructor(prefix) {
    this.prefix = prefix;
  }
  log(msg) {
    console.log(`[${this.prefix}] ${msg}`);
  }
}

// api.js – export function as default
export default async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

// config.js – export an object as default
export default {
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
};

// Named imports – must match exported names
import { formatDate, capitalize, MAX_RETRIES } from './utils.js';

// Rename on import with 'as'
import { formatDate as fmt, capitalize as cap } from './utils.js';

// Import everything as a namespace object
import * as Utils from './utils.js';
Utils.formatDate(new Date());
Utils.capitalize('hello');

// Default import – name can be anything
import Logger from './logger.js';
import fetchUser from './api.js';

// Mix default and named imports
import Logger, { LOG_LEVELS } from './logger.js';

// Import for side effects only (e.g., polyfills, initialisation)
import './setup.js'; // runs the module code but imports nothing

// Using imports
const logger = new Logger('App');
logger.log('Server started'); // [App] Server started

const user = await fetchUser(42);
console.log(user.name);

// components/index.js – "barrel" file that re-exports
export { Button } from './Button.js';
export { Input } from './Input.js';
export { Modal } from './Modal.js';
export { default as Card } from './Card.js'; // re-export default as named

// Now consumers import from one clean path:
import { Button, Modal } from './components/index.js';
// instead of:
// import { Button } from './components/Button.js';
// import { Modal }  from './components/Modal.js';

// Re-export everything from a module
export * from './utils.js';
export * from './validators.js';

// Re-export with rename
export { formatDate as fmtDate } from './utils.js';

// Load a module only when needed
async function loadChart() {
  const { default: Chart } = await import('./Chart.js');
  return new Chart('canvas');
}

// Conditionally load based on feature detection
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  const { applyDarkTheme } = await import('./themes/dark.js');
  applyDarkTheme();
}

// Lazy-load on user action
document.getElementById('loadEditor').addEventListener('click', async () => {
  const { Editor } = await import('./Editor.js');
  const editor = new Editor('#container');
  editor.init();
});

// Import with error handling
try {
  const module = await import('./optional-feature.js');
  module.init();
} catch (err) {
  console.warn('Optional feature not available:', err.message);
}

// In HTML: add type="module"
// <script type="module" src="./main.js"></script>

// Key differences with type="module":
// 1. Deferred by default (runs after DOM is parsed)
// 2. Strict mode is always on
// 3. Has its own scope (no global leakage)
// 4. Can use top-level await

// main.js (type="module")
import { initRouter } from './router.js';
import { setupTheme } from './theme.js';

// Top-level await (ES2022 — works in module scripts)
const config = await fetch('/api/config').then(r => r.json());

initRouter(config.routes);
setupTheme(config.defaultTheme);