meteor/itgenio:live-modules

Deploy any code to client/server 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/server 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
Server and Client

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.

Only works on the Client side.

Types

See src/types.ts

Tests

npm run test