Plugin system suggestion

[asvae]

This issue is split into 2 steps.
Step 1 provides framework to get a working prototype (app + plugins) but is not future proof. It's also easy to migrate to Step 2.
Step 2 is meant as a stable solution, but requires significantly more work and testing.
Proposed solution doesn't cover styling or plugin API conventions, to keep focus tight.

Step 1

Requirements

• ability to enable and disable plugins

Implementation

• include healthbrain-settings.js to project root. It should include all plugins in following format

export default [
  "plugin-one",
  "plugin-two"
]

• healthbrain-settings.js should be added to .gitignore.
• only plugins included in this file should be added to bundle (see this SO answer and webpack DefinePlugin for details on how to do that)
• package.json in overview app should contain all plugins that currently exist.

Workflow

• user adds or removes plugins from healthbrain-settings.js
• user has to recompile bundle for change to appear

Step 2

• split overview app to separate repo.
• Overview repo is supposed to be cloned by user and versioned separately. So there should be little to no code that requires updating from version to version. Instead, all such code should be moved to dependencies and plugins, so that updating is as simple as npm update.
• plugins are managed purely via npm install (see factor implementation, we likely want something very similar to what they do).
• plugins should be able to include other plugins.
• we want a framework for settings in the following format (we can repurpose healthbrain-settings.js for that):

export default {
  "plugin-one": {"plugin-setting": "value"},
}

• we want to use lerna + workspaces for dependencies management if multiple plugins are going to be stored in singular repo

Workflow

Here's the steps user will do to setup application:

• clone overview repo (could be implemented as installer)
• add needed plugins via npm add
• setup plugins in healthbrain-settings.js if needed.

[vikaskedia]

The goal is for recommendation-panel and recommendation-card to have the same vuex store. So when the state changes in recommendation-panel the view of recommendation-card is automatically updated.

The code till 4th May implemented recommendation-panel and recommendation-card as two different npm packages. Different npm packages cannot share the same vuex store.

Hence recommendation-panel and recommendation-card cannot be two seperate npm packages they have to be components of the same vue app.