diff --git a/client/.babelrc b/.babelrc
similarity index 60%
rename from client/.babelrc
rename to .babelrc
index 2af1a3dad..92a64c2a4 100644
--- a/client/.babelrc
+++ b/.babelrc
@@ -1,9 +1,8 @@
{
"presets": [
- "es2015"
+ ["es2015", {modules: false}]
],
"plugins": [
- "add-module-exports",
"transform-class-properties",
"transform-decorators-legacy",
"transform-object-assign",
@@ -11,5 +10,12 @@
"transform-async-to-generator",
"transform-react-jsx",
"syntax-dynamic-import"
- ]
-}
\ No newline at end of file
+ ],
+ "env": {
+ "test": {
+ "plugins": [
+ ["transform-es2015-modules-commonjs", "dynamic-import-node"]
+ ]
+ }
+ }
+}
diff --git a/bin/templates/plugin/client/.babelrc b/bin/templates/plugin/client/.babelrc
deleted file mode 100644
index 60be246eb..000000000
--- a/bin/templates/plugin/client/.babelrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "presets": [
- "es2015"
- ],
- "plugins": [
- "add-module-exports",
- "transform-class-properties",
- "transform-decorators-legacy",
- "transform-object-assign",
- "transform-object-rest-spread",
- "transform-async-to-generator",
- "transform-react-jsx"
- ]
-}
\ No newline at end of file
diff --git a/client/coral-configure/components/QuestionBoxBuilder.js b/client/coral-configure/components/QuestionBoxBuilder.js
index 285df40ed..28dfc30b3 100644
--- a/client/coral-configure/components/QuestionBoxBuilder.js
+++ b/client/coral-configure/components/QuestionBoxBuilder.js
@@ -8,7 +8,7 @@ import styles from './QuestionBoxBuilder.css';
class QuestionBoxBuilder extends React.Component {
constructor() {
super();
-
+
this.state = {
loading: true
};
@@ -17,9 +17,9 @@ class QuestionBoxBuilder extends React.Component {
componentWillMount() {
this.loadEditor();
}
-
+
async loadEditor() {
- const MarkdownEditor = await import('coral-framework/components/MarkdownEditor');
+ const {default: MarkdownEditor} = await import('coral-framework/components/MarkdownEditor');
return this.setState({
loading : false,
@@ -79,17 +79,17 @@ class QuestionBoxBuilder extends React.Component {
- handleChange({}, {questionBoxContent: value})}
/>
-
+
);
}
diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js
index 34bee1797..f60a88439 100644
--- a/client/coral-embed/src/index.js
+++ b/client/coral-embed/src/index.js
@@ -2,101 +2,98 @@ import URLSearchParams from 'url-search-params';
import Stream from './Stream';
import StreamInterface from './StreamInterface';
-// This function should return value of window.Coral
-const Coral = {};
-const Talk = (Coral.Talk = {});
+export class Talk {
-/**
- * Render a Talk stream
- * @param {HTMLElement} el - Element to render the stream in
- * @param {Object} opts - Configuration options for talk
- * @param {String} opts.talk - Talk base URL
- * @param {String} [opts.title] - Title of Stream (rendered in iframe)
- * @param {String} [opts.asset_url] - Asset URL
- * @param {String} [opts.asset_id] - Asset ID
- * @param {String} [opts.auth_token] - (optional) A jwt representing the session
- * @return {Object}
- *
- * Example:
- * ```
- * const embed = Talk.render(document.getElementById('talkStreamEmbed'), opts);
- *
- * // trigger a login with optional token.
- * embed.login(token);
- *
- * // trigger a logout.
- * embed.logout();
- *
- * // listen to events (in this case all events).
- * embed.on('**', function(value) {
- * console.log(this.event, value);
- * });
- * ```
- */
-Talk.render = (el, opts) => {
- if (!el) {
- throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.');
- }
- if (typeof el !== 'object') {
- throw new Error(`Coral.Talk.render() expected HTMLElement but got ${el} (${typeof el})`);
- }
-
- opts = opts || {};
-
- // TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
- if (!opts.talk) {
- throw new Error(
- 'Coral.Talk.render() expects opts.talk as the Talk Base URL'
- );
- }
-
- // Ensure el has an id, as pym can't directly accept the HTMLElement.
- if (!el.id) {
- el.id = `_${Math.random()}`;
- }
-
- // Compose the query to send down to the Talk API so it knows what to load.
- const query = {};
-
- // Parse the url parameters to extract some of the information.
- const urlParams = new URLSearchParams(window.location.search);
- if (urlParams.get('commentId')) {
- query.comment_id = urlParams.get('commentId');
- }
-
- // Extract the asset id from the options.
- if (opts.asset_id) {
- query.asset_id = opts.asset_id;
- }
-
- // Extract the asset url.
- if (opts.asset_url) {
- query.asset_url = opts.asset_url;
- } else if (!opts.asset_id) {
-
- // The asset url was not provided and the asset id was also not provided,
- // we need to infer the asset url from details on the page.
-
- try {
- query.asset_url = document.querySelector('link[rel="canonical"]').href;
- } catch (e) {
- console.warn(
- 'This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.'
- );
-
- if (!window.location.origin) {
- window.location.origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
- }
-
- query.asset_url = window.location.origin + window.location.pathname;
+ /**
+ * Render a Talk stream
+ * @param {HTMLElement} el - Element to render the stream in
+ * @param {Object} opts - Configuration options for talk
+ * @param {String} opts.talk - Talk base URL
+ * @param {String} [opts.title] - Title of Stream (rendered in iframe)
+ * @param {String} [opts.asset_url] - Asset URL
+ * @param {String} [opts.asset_id] - Asset ID
+ * @param {String} [opts.auth_token] - (optional) A jwt representing the session
+ * @return {Object}
+ *
+ * Example:
+ * ```
+ * const embed = Talk.render(document.getElementById('talkStreamEmbed'), opts);
+ *
+ * // trigger a login with optional token.
+ * embed.login(token);
+ *
+ * // trigger a logout.
+ * embed.logout();
+ *
+ * // listen to events (in this case all events).
+ * embed.on('**', function(value) {
+ * console.log(this.event, value);
+ * });
+ * ```
+ */
+ static render(el, opts) {
+ if (!el) {
+ throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.');
}
+ if (typeof el !== 'object') {
+ throw new Error(`Coral.Talk.render() expected HTMLElement but got ${el} (${typeof el})`);
+ }
+
+ opts = opts || {};
+
+ // TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
+ if (!opts.talk) {
+ throw new Error(
+ 'Coral.Talk.render() expects opts.talk as the Talk Base URL'
+ );
+ }
+
+ // Ensure el has an id, as pym can't directly accept the HTMLElement.
+ if (!el.id) {
+ el.id = `_${Math.random()}`;
+ }
+
+ // Compose the query to send down to the Talk API so it knows what to load.
+ const query = {};
+
+ // Parse the url parameters to extract some of the information.
+ const urlParams = new URLSearchParams(window.location.search);
+ if (urlParams.get('commentId')) {
+ query.comment_id = urlParams.get('commentId');
+ }
+
+ // Extract the asset id from the options.
+ if (opts.asset_id) {
+ query.asset_id = opts.asset_id;
+ }
+
+ // Extract the asset url.
+ if (opts.asset_url) {
+ query.asset_url = opts.asset_url;
+ } else if (!opts.asset_id) {
+
+ // The asset url was not provided and the asset id was also not provided,
+ // we need to infer the asset url from details on the page.
+
+ try {
+ query.asset_url = document.querySelector('link[rel="canonical"]').href;
+ } catch (e) {
+ console.warn(
+ 'This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.'
+ );
+
+ if (!window.location.origin) {
+ window.location.origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
+ }
+
+ query.asset_url = window.location.origin + window.location.pathname;
+ }
+ }
+
+ // Create the new Stream.
+ const stream = new Stream(el, opts.talk, query, opts);
+
+ // Return the public interface for the stream.
+ return new StreamInterface(stream);
}
-
- // Create the new Stream.
- const stream = new Stream(el, opts.talk, query, opts);
-
- // Return the public interface for the stream.
- return new StreamInterface(stream);
-};
-
-export default Coral;
+}
diff --git a/client/talk-plugin-infobox/__tests__/markdown.spec.js b/client/coral-framework/components/__tests__/Markdown.spec.js
similarity index 81%
rename from client/talk-plugin-infobox/__tests__/markdown.spec.js
rename to client/coral-framework/components/__tests__/Markdown.spec.js
index 1d98dabae..ab2c1afd1 100644
--- a/client/talk-plugin-infobox/__tests__/markdown.spec.js
+++ b/client/coral-framework/components/__tests__/Markdown.spec.js
@@ -1,6 +1,5 @@
import React from 'react';
import {shallow} from 'enzyme';
-import {expect} from 'chai';
import Markdown from '../Markdown';
const render = (props) => shallow();
@@ -9,12 +8,12 @@ describe('Markdown', () => {
it('should convert Markdown to html', () => {
const wrapper = render({content: '*test*'});
const html = wrapper.html();
- expect(html).to.contain('');
+ expect(html).toMatch('');
});
it('should set target="_parent" for links', () => {
const wrapper = render({content: '[link](https://coralproject.net)'});
const html = wrapper.html();
- expect(html).to.contain('target="_parent"');
+ expect(html).toMatch('target="_parent"');
});
});
diff --git a/client/coral-framework/loaders/plugins-loader.js b/client/coral-framework/loaders/plugins-loader.js
index a9fed95ab..7683dae8d 100644
--- a/client/coral-framework/loaders/plugins-loader.js
+++ b/client/coral-framework/loaders/plugins-loader.js
@@ -21,7 +21,7 @@ module.exports = function(source) {
this.cacheable();
const config = this.exec(source, this.resourcePath);
const plugins = getPluginList(config).map((plugin) => `{
- module: require('${plugin}/client'),
+ module: require('${plugin}/client').default,
name: '${plugin}'
}`);
diff --git a/client/coral-framework/services/client.js b/client/coral-framework/services/client.js
index 52088ad79..dc5a67d03 100644
--- a/client/coral-framework/services/client.js
+++ b/client/coral-framework/services/client.js
@@ -1,4 +1,4 @@
-import ApolloClient, {addTypename, IntrospectionFragmentMatcher, createNetworkInterface} from 'apollo-client';
+import ApolloClient, {IntrospectionFragmentMatcher, createNetworkInterface} from 'apollo-client';
import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
import MessageTypes from 'subscriptions-transport-ws/dist/message-types';
@@ -64,7 +64,6 @@ export function createClient(options = {}) {
connectToDevTools: true,
addTypename: true,
fragmentMatcher: new IntrospectionFragmentMatcher({introspectionQueryResultData: introspectionData}),
- queryTransformer: addTypename,
dataIdFromObject: (result) => {
if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle
diff --git a/client/talk-plugin-commentbox/__tests__/commentBox.spec.js b/client/talk-plugin-commentbox/__tests__/commentBox.spec.js
deleted file mode 100644
index 6ae09e786..000000000
--- a/client/talk-plugin-commentbox/__tests__/commentBox.spec.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {shallow} from 'enzyme';
-import {expect} from 'chai';
-import CommentBox from '../CommentBox';
-
-describe('CommentBox', () => {
- let comment;
- let render;
- beforeEach(() => {
- comment = {};
- const postItem = (item) => {
- comment.posted = item;
- return Promise.resolve(4);
- };
- render = shallow( comment.text = e.target.value}
- item_id={'1'}
- comments={['1', '2', '3']}/>);
- });
-
- it('should render the CommentBox appropriately', () => {
- expect(render.contains('