Sharing custom angular directives between plugins

Elastic Stack Kibana
1

Hello.

I have written some custom plugins for Kibana. There are common directives I have been replicating in each plugin. For instance in order to add a common header for my plugin pages, I create and add a directive to each plugin as follows:

uiModules.get('app/my-plugin', []).directive('ngcustomheader', 
function() {
  return {
    restrict: 'A',
    template: headerTemplate
  }});

Where headerTemplate is just an import as follows:

import headerTemplate from './templates/header.html';

I would like to be able to add this custom directive in such a way that is accessible from all my plugins.

Is this possible?. How can I accomplish this?.

Thanks.

2

I see a few options:

  1. You can create an npm module with your shared code in it, publish it to npm, and pull it in as a dependency.

  2. Put these resources in a "core" style plugin. Plugins can import from one another on the client-side with import 'plugins/{core-plugin-id}/{path-in-plugin-public-directory}' just like the module ids in the uiExport listing.

  3. If don't want to publish to npm, and you want people to be able to install a single plugin without having to install the core plugin you could also do what we do in Kibana and use a "monorepo" style setup. In this setup one repository has all the code for each plugin as well as common code. Then each plugin can reference the common code as a linked npm package with yarn like we do here: https://github.com/elastic/kibana/blob/master/package.json#L83

    When the version for a dependency in package.json is formatted as link:../relative/path/to/source then yarn will create a symlink in your node_modules pointing to the local source of the package. This way you can update the code in once place and it will by linked into each plugin when you run yarn. Then when you do the build step it should copy the files from the symlinked directory into the node_modules directory and make them a part of each plugin's archive.

1 Like
3

Thanks for your help Spencer. I think the third solution you propose is what we would like to do.

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.