Dynamic fragment initalization

[ochicf]

Features:

• more fine grained fragment initialization, as initializeFragements can now be parametrized with the names of the fragments to initialize (defaults to all non-initialized fragments)
• when retrieving an already registered fragment with getFragment, it will be initalized if it isn't

This allows:

1. to use HOCs such as withList at compile time. The only requirement now is that all the fragments used are registered.
2. to register fragments in dynamic imports and use them normally

[ochicf]

Here's an example of fragment registered with a dynamic import. The use case would be to have a route-specific fragment to be registered only when that route is accessed by the user.

For some context, this is a pattern we have in using and now with dynamic fragment initialization will work even better.

The file structure is like this:

posts
|- collection.js
|- components
   |- PostsList.jsx // presentational component
|- routes
    |- PostsList
        |- fragments.js // route-specific fragments
        |- index.js // registers the route and dynamically imports PostLists.js
        |- PostsList.js // main entry point for the route

As you can see, the main idea is to have a folder for each route, where only the index is statically imported. All the other files are imported from the main file of the route (in this case, PostsList.js). In this case, the presentational component for the route will be also loaded dynamically, so this route minimally affects bundle size.

Contents of each file:

// routes/PostsList/index.js
import { addRoute, dynamicLoader } from 'meteor/vulcan:core';

addRoute({
  name: 'PostsList',
  path: '/posts',
  component: dynamicLoader(() => import('./PostsList')),
});

// routes/PostsList/fragments.js
import { registerFragment } from 'meteor/vulcan:core';
import Posts from '../../collection';

export const POSTS_LIST = 'PostsListFragment';
registerFragment(`
  fragment ${POSTS_LIST} on ${Posts.typeName} {
    _id
    title
    content
`);

// routes/PostsList/PostsList.js
import { withMulti } from 'meteor/vulcan:core';
import Posts from '../../collection';

import PostsList from '../../components/PostsList';
import { POSTS_LIST } from './fragments';

export default withMulti({
  collection: Posts,
  fragmentName: POSTS_LIST,
  limit: 0,
})(PostsList);

Note that you with this new PR you could also import statically all the files and it would also work.

[SachaG]

Nice work, this will come in handy :)