tsx-wrapper

A TypeScript loader for webpack that automatically wraps exported React components with a configurable wrapper function.

Features

• Automatically detects React functional components in TypeScript files
• Supports function declarations, arrow functions, and default exports
• Configurable wrapper function and import path
• TypeScript-first with full type safety
• Comprehensive test coverage

Installation

npm install tsx-wrapper --save-dev

Usage

Webpack Configuration

Add the loader to your webpack config:

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'tsx-wrapper',
            options: {
              wrapper: 'wrapperFunction', // Name of the wrapper function
              from: './path/to/wrapper'    // Import path for the wrapper
            }
          },
          'ts-loader' // or your TypeScript loader
        ]
      }
    ]
  }
};

Example

Input (component.tsx):

export function MyComponent() {
  return <div>Hello World</div>;
}

export default function DefaultComponent() {
  return <span>Default</span>;
}

Output:

import { wrapperFunction } from './path/to/wrapper';

export const MyComponent = wrapperFunction(function MyComponent() {
  return <div>Hello World</div>;
});

export default wrapperFunction(function DefaultComponent() {
  return <span>Default</span>;
});

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | wrapper | string | 'wrapper' | Name of the wrapper function to use | | from | string | '../wrapper-file' | Import path for the wrapper function |

Supported Patterns

• export function Component() { return <JSX />; }
• export const Component = () => <JSX />;
• export default function Component() { return <JSX />; }
• export default () => <JSX />;

Requirements

• TypeScript 4.0+
• Webpack 5+
• React (for JSX processing)

Development

# Install dependencies
npm install

# Run tests
npm test

# Build
npm run build

# Lint
npm run lint

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT - see LICENSE file for details.