Importing Components
Alapa provides a flexible import system that supports multiple styles to include and use components within your templates. This allows you to structure your project efficiently and reuse components seamlessly.
Import Examples
Here are various ways to import components in Alapa:
{%
import { Button, Input } from 'modules/form';
import Default { OtherComponent } from 'component/path';
// Aliases are also supported
import { Button as MyButton } from 'form';
// These will import the default component
import DefaultMember from 'components/default-member.component';
import 'component/button';
import("component/button")
// Import the default component as an alias
import DefaultMember as MyDefaultComponent from 'components/default-member.component';
%}
Import Syntax Breakdown
1. Named Imports
Use named imports to select specific components from a module.
Example:
{%
import { Button, Input } from 'modules/form';
%}
2. Default Imports
Import the default export of a module for use in your templates.
Example:
{%
import DefaultMember from 'components/default-member.component';
%}
3. Aliased Imports
Assign an alias to an imported component to avoid naming conflicts or for clarity.
Example:
{%
import { Button as MyButton } from 'form';
import DefaultMember as MyDefaultComponent from 'components/default-member.component';
%}
4. Wildcard Imports
Import all exports from a module when you need access to multiple components.
Example:
{%
import * from 'modules/all-components';
%}
5. Dynamic Imports
Load components dynamically when needed, which can be useful for optimizing performance.
Example:
{%
import('component/button');
%}
Import Best Practices
- Organize Imports: Group related components together to maintain readability.
- Use Aliases Sparingly: Aliases can improve clarity but may also lead to confusion if overused.
- Leverage Dynamic Imports: Use dynamic imports for components that are not immediately needed to improve application performance.
- Avoid Redundant Imports: Ensure components are imported only where they are required to keep templates clean.
With these import options, you can manage your components effectively and keep your templates modular and organized.