Skip to content

Support dynamic imports and arbitrary modules, not just components #44

Open
@hoschi

Description

@hoschi

Webpack supports dynamic imports, which can have a variable in the module path.
To support this with react-async-component it must hold more than one loaded module, not just one.
This way it can prevent flash of content for each already loaded module.

Example for this is a bunch of possible icon files to load, but only know which to render at runtime.
In combination of that example and the dynamic import, another feature would be to use the loaded module not only as component.
I used another method render to do something with the loaded module.

Here is an exapmle of the icon use case:

import React from 'react';
import GeneralIcon from 'place/GeneralIcon'
import { asyncComponent } from 'react-async-component';

export let config = {
    resolve: (props) => import(`icons/${props.iconName}/iconDescription`),
    getModuleId: (props) => props.iconName,
    autoResolveES2015Default: false,
    render: (iconDescription, props) => <GeneralIcon {...props} iconDescription={ iconDescription } />,
};

export default asyncComponent(config);

This can be used to

  • apply module content to a generic component
  • bundling each file in a directory as its own bundle and decide at runtime by props which to show
  • loading one module which contain different parts of the app, like @djeeg showed here

I created a working example, you can see the changes needed here.
@ctrlplusb please tell me if this looks good to you and I should proceed with it. I don't know much about SSR, so this is better done by you, if needs additional changes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions