Adding modules to runtime

Any script can extend the runtime module system, Live offers a utility function to expose a directory of javascript modules.

The directory structure

It is advised to create a shared folder within your project, like so:

Suggested directory structure

Exposing the entire "shared" directory

Inside the shared folder create index.ts file with the following content:

// exposeRequireContext depends on webpack's requireContext
import { exposeRequireContext } from 'live/expose'


// #see: https://webpack.js.org/guides/dependency-management/#requirecontext
const req = require.context(
    './', // require from current directory
    true, // recursive
    // it is important to ignore some folders and files
    /^(?!.*__tests__.*)^(?!.*\.stories\.*)^(?!.*Spec.js)^(?!.*worker.js)^(?!.*__mocks__.*\.js)((.*\.([t|j]sx?\.*))[^.]*$)/
)

// this call expose recursively all the modules on the current folder
// second argument is the prefix of the modules
exposeRequireContext(req, 'plugin-example/shared/')

Import the shared index file from the app entry point

app.tsx

import '../shared'
// ... rest of the app.tsx file

That's it! Your modules are ready to be required by another plugin's web application.

Example result

Before importing from plugin-example there are some configurations needed to be set up.

1. Configure your webpack.config.js to treat these modules as external

webpack.config.js

...
    externals: [
        function(context, request, callback) {
            // tells webpack that plugin-example is an external module
            if (request.startsWith('plugin-example/'))
                return callback(null, 'commonjs ' + request)

            callback()
        }
    ]
...

2. Configure your pom.xml to add explicitly show that dependency

...
<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-jar-plugin</artifactId>
    <version>3.0.2</version>
    <configuration>
        <archive>
            <manifestEntries>
                <name>${project.name}</name>
                <version>${project.version}</version>
                <build>${buildID}</build>
                <author>Intelie</author>
                <entryPoint>net.intelie.example.plugin.pioneer.Main</entryPoint>
                <!-- explicit depdendency to plugin-example -->
                <requirePlugins>[email protected],[email protected]</requirePlugins>
            </manifestEntries>
        </archive>
    </configuration>
</plugin>
...

Now you're set up to import modules from plugin-example!

3. Import from plugin-example in any module

import util from 'plugin-example/shared/util'