Merge pull request #1009 from coralproject/revert-1008-revert-1002-es6-modules-tree-shaking

Es6 modules + tree shaking
This commit is contained in:
Kiwi
2017-10-04 13:12:53 +02:00
committed by GitHub
39 changed files with 139 additions and 511 deletions
+1 -2
View File
@@ -1,9 +1,8 @@
{ {
"presets": [ "presets": [
"es2015" ["es2015", {modules: false}]
], ],
"plugins": [ "plugins": [
"add-module-exports",
"transform-class-properties", "transform-class-properties",
"transform-decorators-legacy", "transform-decorators-legacy",
"transform-object-assign", "transform-object-assign",
-14
View File
@@ -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"
]
}
@@ -19,7 +19,7 @@ class QuestionBoxBuilder extends React.Component {
} }
async loadEditor() { async loadEditor() {
const MarkdownEditor = await import('coral-framework/components/MarkdownEditor'); const {default: MarkdownEditor} = await import('coral-framework/components/MarkdownEditor');
return this.setState({ return this.setState({
loading : false, loading : false,
+92 -95
View File
@@ -2,101 +2,98 @@ import URLSearchParams from 'url-search-params';
import Stream from './Stream'; import Stream from './Stream';
import StreamInterface from './StreamInterface'; import StreamInterface from './StreamInterface';
// This function should return value of window.Coral export class Talk {
const Coral = {};
const Talk = (Coral.Talk = {});
/** /**
* Render a Talk stream * Render a Talk stream
* @param {HTMLElement} el - Element to render the stream in * @param {HTMLElement} el - Element to render the stream in
* @param {Object} opts - Configuration options for talk * @param {Object} opts - Configuration options for talk
* @param {String} opts.talk - Talk base URL * @param {String} opts.talk - Talk base URL
* @param {String} [opts.title] - Title of Stream (rendered in iframe) * @param {String} [opts.title] - Title of Stream (rendered in iframe)
* @param {String} [opts.asset_url] - Asset URL * @param {String} [opts.asset_url] - Asset URL
* @param {String} [opts.asset_id] - Asset ID * @param {String} [opts.asset_id] - Asset ID
* @param {String} [opts.auth_token] - (optional) A jwt representing the session * @param {String} [opts.auth_token] - (optional) A jwt representing the session
* @return {Object} * @return {Object}
* *
* Example: * Example:
* ``` * ```
* const embed = Talk.render(document.getElementById('talkStreamEmbed'), opts); * const embed = Talk.render(document.getElementById('talkStreamEmbed'), opts);
* *
* // trigger a login with optional token. * // trigger a login with optional token.
* embed.login(token); * embed.login(token);
* *
* // trigger a logout. * // trigger a logout.
* embed.logout(); * embed.logout();
* *
* // listen to events (in this case all events). * // listen to events (in this case all events).
* embed.on('**', function(value) { * embed.on('**', function(value) {
* console.log(this.event, value); * console.log(this.event, value);
* }); * });
* ``` * ```
*/ */
Talk.render = (el, opts) => { static render(el, opts) {
if (!el) { if (!el) {
throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.'); 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;
} }
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;
@@ -21,7 +21,7 @@ module.exports = function(source) {
this.cacheable(); this.cacheable();
const config = this.exec(source, this.resourcePath); const config = this.exec(source, this.resourcePath);
const plugins = getPluginList(config).map((plugin) => `{ const plugins = getPluginList(config).map((plugin) => `{
module: require('${plugin}/client'), module: require('${plugin}/client').default,
name: '${plugin}' name: '${plugin}'
}`); }`);
+1 -2
View File
@@ -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 {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
import MessageTypes from 'subscriptions-transport-ws/dist/message-types'; import MessageTypes from 'subscriptions-transport-ws/dist/message-types';
@@ -64,7 +64,6 @@ export function createClient(options = {}) {
connectToDevTools: true, connectToDevTools: true,
addTypename: true, addTypename: true,
fragmentMatcher: new IntrospectionFragmentMatcher({introspectionQueryResultData: introspectionData}), fragmentMatcher: new IntrospectionFragmentMatcher({introspectionQueryResultData: introspectionData}),
queryTransformer: addTypename,
dataIdFromObject: (result) => { dataIdFromObject: (result) => {
if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle
+1 -5
View File
@@ -1,5 +1 @@
import reducer from './reducer'; export {default as reducer} from './reducer';
export default {
reducer
};
+13 -14
View File
@@ -1,15 +1,14 @@
export default { export const username = {
username: { offensive: 'USERNAME_OFFENSIVE',
offensive: 'USERNAME_OFFENSIVE', nolike: 'USERNAME_NOLIKE',
nolike: 'USERNAME_NOLIKE', impersonating: 'USERNAME_IMPERSONATING',
impersonating: 'USERNAME_IMPERSONATING', spam: 'USERNAME_SPAM',
spam: 'USERNAME_SPAM', other: 'USERNAME_OTHER'
other: 'USERNAME_OTHER' };
},
comment: { export const comment = {
offensive: 'COMMENT_OFFENSIVE', offensive: 'COMMENT_OFFENSIVE',
spam: 'COMMENT_SPAM', spam: 'COMMENT_SPAM',
noagree: 'COMMENT_NOAGREE', noagree: 'COMMENT_NOAGREE',
other: 'COMMENT_OTHER' other: 'COMMENT_OTHER'
}
}; };
-1
View File
@@ -63,7 +63,6 @@
"babel-core": "^6.26.0", "babel-core": "^6.26.0",
"babel-eslint": "^7.2.1", "babel-eslint": "^7.2.1",
"babel-loader": "^7.1.2", "babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-async-to-generator": "^6.16.0", "babel-plugin-transform-async-to-generator": "^6.16.0",
"babel-plugin-transform-class-properties": "^6.23.0", "babel-plugin-transform-class-properties": "^6.23.0",
-14
View File
@@ -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"
]
}
-14
View File
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -3,7 +3,7 @@ import cn from 'classnames';
import styles from './ModTag.css'; import styles from './ModTag.css';
import {t} from 'plugin-api/beta/client/services'; import {t} from 'plugin-api/beta/client/services';
import {Icon} from 'plugin-api/beta/client/components/ui'; import {Icon} from 'plugin-api/beta/client/components/ui';
import * as notification from 'coral-admin/src/services/notification'; import {getErrorMessages} from 'plugin-api/beta/client/utils';
export default class ModTag extends React.Component { export default class ModTag extends React.Component {
constructor() { constructor() {
@@ -32,10 +32,10 @@ export default class ModTag extends React.Component {
postTag = async () => { postTag = async () => {
try { try {
await this.props.postTag(); await this.props.postTag();
notification.success(t('talk-plugin-featured-comments.notify_self_featured', this.props.comment.user.username)); this.props.notify('success', t('talk-plugin-featured-comments.notify_self_featured', this.props.comment.user.username));
} }
catch(err) { catch(err) {
notification.showMutationErrors(err); this.props.notify('error', getErrorMessages(err));
} }
} }
@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import Comment from '../containers/Comment'; import Comment from '../containers/Comment';
import LoadMore from './LoadMore'; import LoadMore from './LoadMore';
import {forEachError} from 'plugin-api/beta/client/utils'; import {getErrorMessages} from 'plugin-api/beta/client/utils';
class TabPane extends React.Component { class TabPane extends React.Component {
state = { state = {
@@ -16,7 +16,7 @@ class TabPane extends React.Component {
}) })
.catch((error) => { .catch((error) => {
this.setState({loadingState: 'error'}); this.setState({loadingState: 'error'});
forEachError(error, ({msg}) => {this.props.addNotification('error', msg);}); this.props.notify('error', getErrorMessages(error));
}); });
} }
@@ -1,6 +1,13 @@
import ModTag from '../components/ModTag'; import ModTag from '../components/ModTag';
import {withTags} from 'plugin-api/beta/client/hocs'; import {withTags, connect} from 'plugin-api/beta/client/hocs';
import {gql} from 'react-apollo'; import {gql, compose} from 'react-apollo';
import {bindActionCreators} from 'redux';
import {notify} from 'plugin-api/beta/client/actions/notification';
const mapDispatchToProps = (dispatch) =>
bindActionCreators({
notify,
}, dispatch);
const fragments = { const fragments = {
comment: gql` comment: gql`
@@ -11,6 +18,10 @@ const fragments = {
} }
` `
}; };
const enhance = compose(
withTags('featured', {fragments}),
connect(null, mapDispatchToProps),
);
export default withTags('featured', {fragments})(ModTag); export default enhance(ModTag);
@@ -4,7 +4,7 @@ import {compose, gql} from 'react-apollo';
import TabPane from '../components/TabPane'; import TabPane from '../components/TabPane';
import {withFragments, connect} from 'plugin-api/beta/client/hocs'; import {withFragments, connect} from 'plugin-api/beta/client/hocs';
import Comment from '../containers/Comment'; import Comment from '../containers/Comment';
import {addNotification} from 'plugin-api/beta/client/actions/notification'; import {notify} from 'plugin-api/beta/client/actions/notification';
import {viewComment} from 'coral-embed-stream/src/actions/stream'; import {viewComment} from 'coral-embed-stream/src/actions/stream';
import {appendNewNodes, getDefinitionName} from 'plugin-api/beta/client/utils'; import {appendNewNodes, getDefinitionName} from 'plugin-api/beta/client/utils';
import update from 'immutability-helper'; import update from 'immutability-helper';
@@ -81,7 +81,7 @@ const LOAD_MORE_QUERY = gql`
const mapDispatchToProps = (dispatch) => const mapDispatchToProps = (dispatch) =>
bindActionCreators({ bindActionCreators({
viewComment, viewComment,
addNotification, notify,
}, dispatch); }, dispatch);
const enhance = compose( const enhance = compose(
@@ -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"
]
}
@@ -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"
]
}
-14
View File
@@ -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"
]
}
-14
View File
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
@@ -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"
]
}
+1 -9
View File
@@ -572,10 +572,6 @@ babel-messages@^6.23.0:
dependencies: dependencies:
babel-runtime "^6.22.0" babel-runtime "^6.22.0"
babel-plugin-add-module-exports@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz#9ae9a1f4a8dc67f0cdec4f4aeda1e43a5ff65e25"
babel-plugin-check-es2015-constants@^6.22.0: babel-plugin-check-es2015-constants@^6.22.0:
version "6.22.0" version "6.22.0"
resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a" resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
@@ -3180,11 +3176,7 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6,
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725" resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
graphql-anywhere@^3.0.0, graphql-anywhere@^3.0.1: graphql-anywhere@^3.0.0, graphql-anywhere@^3.0.1, graphql-anywhere@^3.1.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.0.1.tgz#73531db861174c8f212eafb9f8e84944b38b4e5a"
graphql-anywhere@^3.1.0:
version "3.1.0" version "3.1.0"
resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96" resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"