Skip to content

The one and only template loader you need! Allows to import Templates dynamically at lookup-time. All code < 200 lines.

License

Notifications You must be signed in to change notification settings

jankapunkt/meteor-template-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Meteor Template Loader

JavaScript Style Guide Project Status: Active – The project has reached a stable, usable state and is being actively developed. GitHub file size in bytes GitHub

The one and only template loader you need! Allows to import Templates dynamically at lookup-time. All code < 200 lines.

How it works

Blaze usually requires a Template to exist when looking it up to render it's content to the DOM. However, a Blaze.View is constructed reactively, waiting for the template instance to be created, first.

This mechanism can be exploited in order to "wait" until the Template is imported and from there run like with any other Template.

Installation and usage

Install this package via

$ meteor add jkuester:template-loader

Then import it anywhere soon in your client startup order and add the Templates that are common to be loaded dynamically.

However, you need to initialize it once beforehand, otherwise there won't be any interception of the Template lookup/include mechanism.

Consider the following example:

client/main.js

import { TemplateLoader } from 'meteor/jkuester:template-loader'

TemplateLoader.enable()
    .register('myForm', async () => import('../path/to/myForm'))
    .register('myList', async () => import('../path/to/myList'))
    .register('myUser', async () => import('../path/to/myUser'))
    .register('myCard', async () => {
      const { dependency } = await import('../path/to/dependency')
      const { cardExport } = await import('../path/to/myCard')
      return  cardExport.inject(dependency)
    })

All these Templates are now automatically loaded via the given loader function. As you can see, the operation is chainable and you can also include complex import logic into the loader function.

Note, the Templates will not be imported before there is no other Template, that includes them in it's HTML/SpaceBars code (or until it is manually imported).

You can add more Templates to autoload at any time.

Do not add the import function directly or it will trigger the import immediately and that would defy the purpose of this package:

// XXX DO NOT DO IT LIKE THIS
TemplateLoader.register('myForm', import('../path/to/myForm'))

Why do I want this?

Once your application bundle grows beyond 1MB (which can happen very fast!) you need to consider dynamic imports to reduce initial bundle size.

A large initial bundle will rapidly delay the time to interact and may shut out users with lower bandwidth. By dynamically importing Templates you can ensure to deliver complex applications with great speed.

Contribution

About

The one and only template loader you need! Allows to import Templates dynamically at lookup-time. All code < 200 lines.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published