meteor/itgenio:live-modules

Deploy any code to client's runtime in any time.

Installation

Add to your meteor project:

meteor add itgenio:live-modules

(server side) Register modules:

by inserting documents into LiveModulesCollection;
by using helper class LiveModulesServiceDefault.

(client side) Use LiveModules.importModule(...) or LiveModules.importModules(..) anywhere to import a code.

See an example

Features

Enable/disable modules
Import modules by specific tags or name
importTimeout to control imports time
Works with JS & CSS

Configuration via Meteor.settings

1{
2  "public": {
3    "liveModules": {
4      "collName": "meteor_itgenio_live-modules",
5      "subName": "itgenio.live-modules",
6      "logging": true,
7      "importTimeout": 5000,
8      "subOnStartup": true,
9      "jsMarker": "/*js-content*/"
10    }
11  }
12}

Example

Add the package:

meteor add itgenio:live-modules

server/index.js:

1import { LiveModulesConfig, LiveModulesCollection } from 'meteor/itgenio:live-modules';
2
3LiveModulesCollection.remove({}); //clean all modules
4
5LiveModulesCollection.insert({
6  name: 'test-module1',
7  v: 0,
8  tags: ['startup'],
9  enabled: true,
10  required: false,
11  source: `${LiveModulesConfig.jsMarker} console.log('Hello from test-module1');`,
12});
13
14LiveModulesCollection.insert({
15  name: 'test-module2',
16  v: 0,
17  tags: ['startup'],
18  enabled: true,
19  required: false,
20  source: `${LiveModulesConfig.jsMarker} console.log('Hello from test-module2');`,
21});

Import live module (client side):

client/index.js:

1import { LiveModules } from 'meteor/itgenio:live-modules';
2
3(async () => {
4  await LiveModules.importModule('test-module1'); //by name
5})();

Done! Check your console in the browser for a line Hello from test-module1

Use cases

Import by tag on startup

1import { LiveModules } from 'meteor/itgenio:live-modules';
2
3Meteor.startup(async () => {
4  //...
5
6  //
7  // Import all modules with tag `startup`
8  //
9  try {
10    await LiveModules.importModules(['startup']);
11  } catch (e) {
12    console.error(e);
13  }
14  //...
15});

Import by name in specific page

1import { LiveModules } from 'meteor/itgenio:live-modules';
2
3const lazy = () => LiveModules.importModule('my-lazy-component');
4
5//suspense is HOC for <Suspense/> from react
6const SubComponent = suspense(() => {
7  //Some magic...
8  //But you just waiting for resolving promise
9  const { LazyComponent } = useService(lazy);
10
11  return LazyComponent;
12});
13
14export function MyPage() {
15  return <SubComponent />;
16}

Evaluation

evaluate as JS

If the url ends with .js/.cjs or the source field starts with LiveModulesConfig.jsMarker (by default, /*js-content*/).

It's not safe, so be careful to use source field.

evaluate as CSS

If the url ends with .css or the source field doesn't start with LiveModulesConfig.jsMarker.

Types

See src/types.ts

Tests

npm run test