Bundling Imports and Exports

Bundling involves grouping multiple imports or exports into a single object. This can be done through namespace imports or object bundling. Bundling is useful because it simplifies SDK imports, avoids namespace collisions, and provides a clean and organized way to manage code.

Namespace Imports as Bundling

Namespace imports can be considered a type of bundling, where all exports from a module are grouped into a single object using the import * as syntax. This approach allows you to access all the module's exports through a single namespace.

Consider a simple State module for a counter:

// state.ts
export let count = 0;

export function increment() {
  count += 1;
}

export function decrement() {
  count -= 1;
}

You can import all these exports into a namespace like this:

// main.ts
import * as State from "./state";

State.increment();
console.log(State.count); // Output: 1
State.decrement();
console.log(State.count); // Output: 0

This technique allows you to import everything from a module without having to list each export individually.

Object Bundling

Object bundling involves explicitly grouping related exports into a single object within a module.

Consider the index.ts file in SimpleKit's layout folder:

import { FixedLayout } from "./fixed";
import { CentredLayout } from "./centred";
import { WrapRowLayout } from "./wrapRow";

// Grouping layout methods into a single object
export const Layout = {
  FixedLayout,
  CentredLayout,
  WrapRowLayout,
};

Then, in your project, import the bundled object like this:

import { Layout } from './layout';

// Use the bundled layouts
const layout = Layout.FixedLayout;

External Resources

• 📚 MDN Web Docs: Importing and Exporting ↗️