Add support for loading multiple imports per component (localization)

[swernerx]

I'd like to see support for loading locale-specific i18n message files together with the actual view component. This would allow for route-splitted translation files which, as the view itself, are just loaded on demand e.g. for usage with IntlProvider by react-intl.

Conceptually it might look like:

const AboutView = createLazyComponent({
  load: (language) => {
    return [
      import("./views/About"),
      import("./views/About." + language + ".json")
    ]
  }
})

but int theory instead of an array we could also use an object/dict for being more specific:

const AboutView = createLazyComponent({
  load: (language) => {
    return {
      view: import("./views/About"),
      messages: import("./views/About." + language + ".json")
    }
  }
})

If there are messages it would probably be a good idea to use IntlProvider with the messages given for wrapping the dynamically loaded view. It might be also cool to use injectIntl for offering the intl API via props to the loaded view.

What do you think?

[swernerx]

I tried implementing these requirements in style of your component in this file: https://github.com/sebastian-software/edgestack/blob/master/src/api/common/createLazyComponent.js

But I would like working on a single solution instead of implementing too many alternatives.

[ctrlplusb]

Hey @swernerx

Thanks for this suggestion.

With the latest code parse I did a bit of renaming to help the API move towards supporting something like your request.

My initial idea is to allow an additional prop to be provided to an async component instance. Specifically a render callback function. The render callback would then receive the result of the render. Something like:

const AboutView = asyncComponent({
  resolve: (props) => {
    const { language } = props
    return Promise.all([
      import("./views/About"),
      import("./views/About." + language + ".json")
   ])
  },
  passThroughProps: ['language']
})

<AboutView
  language="de"
  render={(resolved) => {
    const [ View, translations ] = resolved
    return <View translations={translations} />
  }}
/>

The props pass through to the resolver poses an interesting question though. This would affect our caching. We would have to cache a result per variation of prop. Therefore we may need to consider adding an additional configuration value to asyncComponent called something like passThroughProps that would allow you define which props to pass to asyncComponent. These props would then be used as keys in a cache map of sorts.

Thoughts?

[swernerx]

Looks good.

I just figure it would be nicer from the API standpoint to use named parameters/fields instead of array indexes and destructing. In this case we can't use Promise.all() as this does not work for objects... but it would be nicer from the usage standpoint. We could just return an objet in resolve() with { view: xx, translations: xx } and let the promise handling being done inside of asyncComponent.

I wonder what's the benefit of making the pass-through config required? Why not just pass-through all props?

[djeeg]

Perfect,

I want to try something like this

<Switch>
    <Route path="/section1" render={(props) => (
        <Layout store={this.context.store} {...props} />
    )} />
</Switch>

const Layout = asyncComponent({
    resolve: (props) => {
        return Promise.all([
            System.import('./LayoutAsync'),
            System.import('./../logic/section1')
        ]).then(function([component, module]) {
            injectReducer(props.store, {key: 'section1State', reducer: module.reducer});
            injectSagas(props.store, module.SagasList);
            return component;
        })
    }
});

[hoschi]

interesting, a lot of people solving the same problem :) I did a prototype here https://github.com/hoschi/react-async-component/tree/feature/render

Here is an example usage:

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

export let config = {
    resolve: (props) => import( /* webpackChunkName: "dynamic-icons" */ `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

As my use case is a bit different, I create another ticket this or next week.

[hoschi]

I created issue #44 for my use case