diff --git a/client/coral-embed-stream/src/Pluggable.js b/client/coral-embed-stream/src/Pluggable.js
index fd5b1aa4e..5f636c7c5 100644
--- a/client/coral-embed-stream/src/Pluggable.js
+++ b/client/coral-embed-stream/src/Pluggable.js
@@ -4,7 +4,11 @@ import injectedPlugins from 'coral-framework/helpers/importer';
export default function pluginContainer () {
return (
- {Object.keys(injectedPlugins).map((component, i) => injectedPlugins[component]({key: i}))}
+ {
+ Object.keys(injectedPlugins).map((component, i) => {
+ return injectedPlugins[component]({key: i});
+ })
+ }
- )
-};
+ );
+}
diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
new file mode 100644
index 000000000..65a12c668
--- /dev/null
+++ b/client/coral-framework/components/Slot.js
@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+// { "slot": "Comment.DetailArea"},
+
+class Slot extends Component {
+ render() {
+ return (
+
+ This is a slot
+
+ );
+ }
+}
+
+export default Slot;
diff --git a/client/coral-framework/helpers/importer.js b/client/coral-framework/helpers/importer.js
index 5fc057610..ae77f472d 100644
--- a/client/coral-framework/helpers/importer.js
+++ b/client/coral-framework/helpers/importer.js
@@ -1,12 +1,78 @@
+import {client as clientPlugins} from 'pluginsConfig';
+
function importer () {
- const context = require.context("../../../plugins", true, /\.\/(.*)\/client\/index.js$/);
- let res = {};
+ let context,
+ importedFiles;
- context.keys().forEach(function (key) {
- res[key] = context(key)
- });
+ function buildContext() {
- return res;
+ /**
+ * buildContext creates the context for the plugins
+ * require.context(
, true,
+ * path: The path where the importer builds the context. 'plugins' is allowed as path because it's an alias
+ * regxp: A Regular Expression to match the files that the importer needs. i.e (index.js, config.json)
+ * data such as path and regexp cannot be passed as arguments or variables
+ */
+ context = require.context('plugins', true, /\.\/(.*)\/client\/(index|config).(js|json)$/);
+ return importedFiles = context
+ .keys()
+ .map(key => shapeData(key));
+ }
+
+ function shapeData(test) {
+
+ /**
+ * shapeData shapes each item in the plugins array with useful data
+ * returns an Object with the name of the plugin, the format, and it's key(filename)
+ */
+ const match = test.match(/\.\/(.*)\/client\/.*.(json|js)$/);
+ return {
+ name: match[1],
+ format: match[2],
+ key: match[0]
+ };
+ }
+
+ function getConfig (name) {
+
+ /**
+ * getConfig finds a the config file for each plugin
+ * returns the config.json as an object to be passed as props to the plugin
+ */
+ return importedFiles
+ .filter(key => key.format === 'json' && key.name === name)
+ .reduce((acc, plugin) => {
+ return context(plugin.key);
+ }, {});
+ }
+
+ function filterByUserConfig (list) {
+
+ /**
+ * filterByUserConfig will filter the imported files and will only keep the allowed plugins
+ */
+ return list
+ .filter(plugin => clientPlugins.indexOf(plugin.name) > -1);
+ }
+
+ function init() {
+
+ /**
+ * init will build the context and
+ * returns a map with each plugin and its instance
+ */
+ buildContext();
+
+ return filterByUserConfig(importedFiles)
+ .filter(key => key.format === 'js')
+ .reduce((entry, plugin) => {
+ entry[plugin.name] = () => context(plugin.key)(getConfig(plugin.name));
+ return entry;
+ }, {});
+ }
+
+ return init();
}
-export default importer();
\ No newline at end of file
+export default importer();
+
diff --git a/client/coral-framework/index.js b/client/coral-framework/index.js
index 2900466ee..6350d29b1 100644
--- a/client/coral-framework/index.js
+++ b/client/coral-framework/index.js
@@ -4,9 +4,11 @@ import I18n from './modules/i18n/i18n';
import * as authActions from './actions/auth';
import * as assetActions from './actions/asset';
import * as notificationActions from './actions/notification';
+import Slot from './components/Slot';
export {
pym,
+ Slot,
I18n,
store,
authActions,
diff --git a/webpack.config.js b/webpack.config.js
index 8c7119bd2..59dc58b33 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,8 +4,7 @@ const precss = require('precss');
const Copy = require('copy-webpack-plugin');
const LicenseWebpackPlugin = require('license-webpack-plugin');
const webpack = require('webpack');
-// const plugins = require('./plugins.json');
-// 'plugins': plugins.client.map(name => path.join(__dirname, `plugins/${name}/index`))
+
// Edit the build targets and embeds below.
const buildTargets = [
@@ -18,7 +17,7 @@ const buildEmbeds = [
];
module.exports = {
- devtool: '#cheap-module-source-map',
+ devtool: 'cheap-module-source-map',
entry: Object.assign({}, {
'embed': [
'babel-polyfill',
@@ -59,8 +58,7 @@ module.exports = {
exclude: /node_modules/,
test: /\.js$/,
query: {
- cacheDirectory: true,
- sourceMap: true
+ cacheDirectory: true
}
},
{
@@ -124,10 +122,10 @@ module.exports = {
resolve: {
alias: {
plugins: path.resolve(__dirname, 'plugins/'),
+ pluginsConfig: path.resolve(__dirname, 'plugins.json')
},
modules: [
path.resolve(__dirname, 'client'),
- path.resolve(__dirname, 'plugins'),
...buildTargets.map(target => path.join(__dirname, 'client', target, 'src')),
...buildEmbeds.map(embed => path.join(__dirname, 'client', `coral-embed-${embed}`, 'src')),
'node_modules'