Commit fdd30606 authored by Ivan Malov's avatar Ivan Malov Committed by Tomas Vik

Resolve "Reduce sidecar.v1.js size"

- Remove postcss plugin stack
- Return webpack as builder
- Remove bower_components and react preset from rollup bundle, minor reformat code
- Add support spread operator instead for in
- Update PostCSS version for gulp
- Update README with contributing information
- Replaced the webpack with rollup for sidecar chat
- Remove es6-promise dependency
- Add size-limit
- Remove Array.from polyfill
- Remove object-assign polyfill
- Update node version and add .idea folder to .gitignore
parent ffae47c5
{
"presets": ["es2015", "react"]
"presets": ["es2015", "react"],
"plugins": ["transform-object-rest-spread"]
}
......@@ -6,3 +6,4 @@ npm-debug.log
todo.md
dist/*
sc.log
.idea
......@@ -80,3 +80,9 @@ You'll need AWS credentials exported as `AWS_KEY` and `AWS_SECRET`. This command
# Testing
`npm test`
# Contributing
We use [git-flow](https://danielkummer.github.io/git-flow-cheatsheet/). Merge requests should be made against `develop` not `master`.
Please join us in [gitterHQ/contributing](https://gitter.im/gitterHQ/contributing) for questions or to get in touch.
......@@ -17,8 +17,6 @@ import S3 from 's3';
import manifest from './package.json';
import postcss from 'gulp-postcss';
import getPostcssPluginStack from './postcss-plugin-stack';
//import sidecarWebpackConfig from './webpack.config';
import micrositeWebpackConfig from './microsite/webpack.config';
......@@ -197,7 +195,7 @@ gulp.task('build-microsite-styles', function() {
.pipe(plumber({
errorHandler: plumberErrorHandler
}))
.pipe(postcss(getPostcssPluginStack()))
.pipe(postcss())
.pipe(gulp.dest(config.paths.micrositeCss.dist));
});
......
......@@ -14,12 +14,12 @@
<link href="css/all.css" rel="stylesheet">
</head>
<body>
<div class="microsite-app-entry-point"><div class="panel-wrapper" data-reactid=".1wxz3h4ecuw" data-react-checksum="-792303769"><section class="documentation-panel" data-reactid=".1wxz3h4ecuw.0"><div class="documentation-panel-getting-started" data-reactid=".1wxz3h4ecuw.0.0"><h1 class="documentation-panel-primary-header" data-reactid=".1wxz3h4ecuw.0.0.0">Sidecar</h1><div class="documentation-panel-getting-started-body" data-reactid=".1wxz3h4ecuw.0.0.1"><p data-reactid=".1wxz3h4ecuw.0.0.1.0">Please type the name of the public, existing room that you want to load into your sidecar. E.g. gitterHQ/sidecar</p><input class="primary-input" type="text" placeholder="Enter Room Name" value="" data-reactid=".1wxz3h4ecuw.0.0.1.1"/><p data-reactid=".1wxz3h4ecuw.0.0.1.2">Just copy and paste it into your site.</p><div class="copy-snippet-block {this.props.className}" data-reactid=".1wxz3h4ecuw.0.0.1.3"><pre class="copy-snippet-block-body" data-reactid=".1wxz3h4ecuw.0.0.1.3.0"><code data-reactid=".1wxz3h4ecuw.0.0.1.3.0.0">&lt;script&gt;
<div class="microsite-app-entry-point"><div class="panel-wrapper" data-reactid=".9dcenz6tha" data-react-checksum="749886407"><section class="documentation-panel" data-reactid=".9dcenz6tha.0"><div class="documentation-panel-getting-started" data-reactid=".9dcenz6tha.0.0"><h1 class="documentation-panel-primary-header" data-reactid=".9dcenz6tha.0.0.0">Sidecar</h1><div class="documentation-panel-getting-started-body" data-reactid=".9dcenz6tha.0.0.1"><p data-reactid=".9dcenz6tha.0.0.1.0">Please type the name of the public, existing room that you want to load into your sidecar. E.g. gitterHQ/sidecar</p><input class="primary-input" type="text" placeholder="Enter Room Name" value="" data-reactid=".9dcenz6tha.0.0.1.1"/><p data-reactid=".9dcenz6tha.0.0.1.2">Just copy and paste it into your site.</p><div class="copy-snippet-block {this.props.className}" data-reactid=".9dcenz6tha.0.0.1.3"><pre class="copy-snippet-block-body" data-reactid=".9dcenz6tha.0.0.1.3.0"><code data-reactid=".9dcenz6tha.0.0.1.3.0.0">&lt;script&gt;
((window.gitter = {}).chat = {}).options = {
room: &#x27;&#x27;
};
&lt;/script&gt;
&lt;script src=&quot;https://sidecar.gitter.im/dist/sidecar.v1.js&quot; async defer&gt;&lt;/script&gt;</code></pre><div class="copy-snippet-block-under-section" data-reactid=".1wxz3h4ecuw.0.0.1.3.1"><summary class="copy-snippet-block-annotation" data-reactid=".1wxz3h4ecuw.0.0.1.3.1.0">A little snippet in your website</summary><button class="copy-snippet-block-copy-button" data-reactid=".1wxz3h4ecuw.0.0.1.3.1.1"><span class="copy-snippet-block-copy-button-main-text" data-reactid=".1wxz3h4ecuw.0.0.1.3.1.1.0">Copy to Clipboard</span></button></div></div></div></div><div class="documentation-panel-docs" data-reactid=".1wxz3h4ecuw.0.1"><h2 class="documentation-panel-secondary-header header-with-down-arrow" data-reactid=".1wxz3h4ecuw.0.1.0">Documentation</h2><section class="documentation-panel-docs-body use-markdown" data-reactid=".1wxz3h4ecuw.0.1.1"><h2 id="overview">Overview</h2>
&lt;script src=&quot;https://sidecar.gitter.im/dist/sidecar.v1.js&quot; async defer&gt;&lt;/script&gt;</code></pre><div class="copy-snippet-block-under-section" data-reactid=".9dcenz6tha.0.0.1.3.1"><summary class="copy-snippet-block-annotation" data-reactid=".9dcenz6tha.0.0.1.3.1.0">A little snippet in your website</summary><button class="copy-snippet-block-copy-button" data-reactid=".9dcenz6tha.0.0.1.3.1.1"><span class="copy-snippet-block-copy-button-main-text" data-reactid=".9dcenz6tha.0.0.1.3.1.1.0">Copy to Clipboard</span></button></div></div></div></div><div class="documentation-panel-docs" data-reactid=".9dcenz6tha.0.1"><h2 class="documentation-panel-secondary-header header-with-down-arrow" data-reactid=".9dcenz6tha.0.1.0">Documentation</h2><section class="documentation-panel-docs-body use-markdown" data-reactid=".9dcenz6tha.0.1.1"><h2 id="overview">Overview</h2>
<p>Primarily sidecar has an activation element that will show sidecar and a target element where sidecar gets loaded. These elements are specified by default but can be customised (see below).</p>
<h2 id="ui-customisation">UI Customisation</h2>
<p>If you need a custom button or want to insert the chat in your own element, use the following setup:</p>
......@@ -143,7 +143,7 @@
console.log(e.detail.state ? &#39;Chat Opened&#39; : &#39;Chat Closed&#39;);
});
</code></pre>
</section></div></section><section class="primary-panel" data-reactid=".1wxz3h4ecuw.1"><div class="primary-panel-gitter-logo-title" data-reactid=".1wxz3h4ecuw.1.0"><div class="gitter-logo-holder primary-panel-gitter-logo-diagram" data-reactid=".1wxz3h4ecuw.1.0.0"><div class="logo-left-arm" data-reactid=".1wxz3h4ecuw.1.0.0.0"></div><div class="logo-body-left" data-reactid=".1wxz3h4ecuw.1.0.0.1"></div><div class="logo-body-right" data-reactid=".1wxz3h4ecuw.1.0.0.2"></div><div class="logo-right-arm" data-reactid=".1wxz3h4ecuw.1.0.0.3"></div></div><img class="primary-panel-gitter-logo-text" src="images/gitter-logo-text.svg" data-reactid=".1wxz3h4ecuw.1.0.1"/></div><img class="sidecar-diagram" src="images/sidecar-diagram.svg" data-reactid=".1wxz3h4ecuw.1.1"/><h2 class="primary-panel-secondary-header" data-reactid=".1wxz3h4ecuw.1.2">Add some Gitter to your site</h2><p data-reactid=".1wxz3h4ecuw.1.3">Sidecar is a (mostly) code-free way of embedding Gitter into your website with a simple JavaScript snippet.</p><p data-reactid=".1wxz3h4ecuw.1.4">It works out of the box with no customization, or you can control its behaviour with some basic configuration.</p><div class="see-action-wrapper" data-reactid=".1wxz3h4ecuw.1.5"><img class="see-action-diagram" src="images/see-it-in-action.svg" data-reactid=".1wxz3h4ecuw.1.5.0"/></div></section></div></div>
</section></div></section><section class="primary-panel" data-reactid=".9dcenz6tha.1"><div class="primary-panel-gitter-logo-title" data-reactid=".9dcenz6tha.1.0"><div class="gitter-logo-holder primary-panel-gitter-logo-diagram" data-reactid=".9dcenz6tha.1.0.0"><div class="logo-left-arm" data-reactid=".9dcenz6tha.1.0.0.0"></div><div class="logo-body-left" data-reactid=".9dcenz6tha.1.0.0.1"></div><div class="logo-body-right" data-reactid=".9dcenz6tha.1.0.0.2"></div><div class="logo-right-arm" data-reactid=".9dcenz6tha.1.0.0.3"></div></div><img class="primary-panel-gitter-logo-text" src="images/gitter-logo-text.svg" data-reactid=".9dcenz6tha.1.0.1"/></div><img class="sidecar-diagram" src="images/sidecar-diagram.svg" data-reactid=".9dcenz6tha.1.1"/><h2 class="primary-panel-secondary-header" data-reactid=".9dcenz6tha.1.2">Add some Gitter to your site</h2><p data-reactid=".9dcenz6tha.1.3">Sidecar is a (mostly) code-free way of embedding Gitter into your website with a simple JavaScript snippet.</p><p data-reactid=".9dcenz6tha.1.4">It works out of the box with no customization, or you can control its behaviour with some basic configuration.</p><div class="see-action-wrapper" data-reactid=".9dcenz6tha.1.5"><img class="see-action-diagram" src="images/see-it-in-action.svg" data-reactid=".9dcenz6tha.1.5.0"/></div></section></div></div>
<script>
......
This diff is collapsed.
This diff is collapsed.
......@@ -4,18 +4,16 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import objectAssign from 'object-assign';
import MicrositeApp from './components/MicrositeApp';
import micrositeAppReducer from './reducers/MicrositeReducer';
let initialState = window.__INITIAL_STATE__;
const initialState = window.__INITIAL_STATE__;
let store = createStore(micrositeAppReducer, objectAssign({
let store = createStore(micrositeAppReducer, {
roomName: '',
documentation: ''
}, initialState));
documentation: '',
...initialState
});
ReactDOM.render(
// The child must be wrapped in a function
......
var path = require('path');
var objectAssign = require('object-assign');
var webpack = require('webpack');
var productionConfig = require('./webpack.production.config');
const path = require('path');
const webpack = require('webpack');
const productionConfig = require('./webpack.production.config');
var port = parseInt(process.env.PORT, 10) + 1 || 3001;
module.exports = objectAssign({}, productionConfig, {
//devtool: 'eval-source-map',
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:' + port,
'webpack/hot/only-dev-server',
path.join(__dirname, './src/js/index')
],
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});
module.exports = (function () {
return {
...productionConfig,
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:' + port,
'webpack/hot/only-dev-server',
path.join(__dirname, './src/js/index')
],
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
})();
var path = require('path');
var webpack = require('webpack');
const path = require('path');
module.exports = {
devtool: 'source-map',
......
This diff is collapsed.
......@@ -5,28 +5,31 @@
"main": "./dist/sidecar-module.js",
"repository": "https://gitlab.com/gitlab-org/gitter/sidecar",
"engine": {
"node": "=4.8.6"
"node": "=8.16.2"
},
"scripts": {
"prepublish": "npm run build-module && npm run build",
"build": "webpack -p",
"build-module": "webpack -p --config ./webpack.sidecar-module.config.js",
"prepublish": "npm run build-module && npm run build && npm run size",
"test": "gulp move-sidecar-dist-to-fixtures && npm run test-base | tap-spec",
"test-base": "babel-tape-runner test/button_present_test.js",
"devbuild": "webpack --watch --progress",
"build": "webpack -p",
"build-module": "webpack -p --config ./webpack.sidecar-module.config.js",
"build-microsite": "gulp build-microsite",
"devbuild-microsite": "gulp build-microsite --dev",
"start-microsite": "babel-node ./microsite/server/server.js",
"deploy-sidecar": "gulp deploy-sidecar",
"deploy-microsite": "gulp deploy-microsite"
"deploy-microsite": "gulp deploy-microsite",
"size": "size-limit"
},
"author": "The Gitter Team",
"license": "MIT",
"devDependencies": {
"@size-limit/preset-small-lib": "^2.1.6",
"autoprefixer": "^6.3.1",
"babel-cli": "^6.4.5",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-tape-runner": "^2.0.1",
......@@ -40,18 +43,18 @@
"gulp-cached": "^1.1.0",
"gulp-gzip": "^1.2.0",
"gulp-plumber": "^1.0.1",
"gulp-postcss": "^6.0.0",
"gulp-postcss": "^7.0.0",
"gulp-util": "^3.0.6",
"json-loader": "^0.5.4",
"mocha": "^2.4.5",
"postcss": "^5.0.14",
"postcss": "^7.0.14",
"postcss-browser-reporter": "^0.4.0",
"postcss-calc": "^5.2.0",
"postcss-css-variables": "^0.5.1",
"postcss-css-variables": "^0.13.0",
"postcss-import": "^8.0.2",
"postcss-loader": "^0.8.0",
"postcss-loader": "^3.0.0",
"postcss-mixins": "^4.0.0",
"postcss-nested": "^1.0.0",
"postcss-nested": "^4.2.1",
"postcss-plugin-context": "^2.0.0",
"postcss-reporter": "^1.3.1",
"postcss-simple-vars": "^1.2.0",
......@@ -73,11 +76,8 @@
"yargs": "^3.32.0"
},
"dependencies": {
"array.from": "^1.0.0",
"es6-promise": "^3.0.2",
"keymirror": "^0.1.1",
"marked": "^0.3.5",
"object-assign": "^4.0.1",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.4.0",
......@@ -85,5 +85,15 @@
"semver": "^5.1.0",
"strip-indent": "^1.0.1",
"whatwg-fetch": "^0.11.0"
}
},
"size-limit": [
{
"path": "dist/sidecar.js",
"limit": "7 KB"
},
{
"path": "dist/sidecar-module.js",
"limit": "7 KB"
}
]
}
var postcss = require('postcss');
var context = require('postcss-plugin-context');
var atImport = require('postcss-import');
var mixins = require('postcss-mixins');
var simpleVariables = require('postcss-simple-vars');
var writeSvg = require('postcss-write-svg');
var nested = require('postcss-nested');
var cssvariables = require('postcss-css-variables');
var calc = require('postcss-calc');
var reporter = require('postcss-reporter');
var autoprefixer = require('autoprefixer');
var csswring = require('csswring');
var borderBox = postcss.plugin('postcss-border-box', function (opts) {
opts = opts || {};
return function(css) {
css.eachRule(function(rule) {
var decl = postcss.decl({
prop: 'box-sizing',
value: 'border-box'
});
rule.prepend(decl);
});
};
});
module.exports = function() {
return [
atImport(),
mixins(),
simpleVariables(),
writeSvg({
// For IE support
encoding: 'base64'
}),
nested(),
cssvariables(),
calc(),
context({
'border-box': borderBox
}),
autoprefixer(),
csswring(),
reporter({
//clearMessages: true
})
];
};
const postcss = require('postcss');
const borderBox = postcss.plugin('postcss-border-box', () => root => {
root.walkRules(rule => {
rule.prepend(postcss.decl({
prop: 'box-sizing',
value: 'border-box'
}));
});
});
module.exports = () => ({
plugins: {
'postcss-import': {},
'postcss-mixins': {},
'postcss-simple-vars': {},
'postcss-write-svg': {
// For IE support
encoding: 'base64'
},
'postcss-nested': {},
'postcss-css-variables': {},
'postcss-calc': {},
'postcss-plugin-context': {
'border-box': borderBox
},
'autoprefixer': {},
'csswring': {},
'postcss-reporter': {}
}
});
// This is the entry point for the <script> tag window global friendly version: https://sidecar.gitter.im/
import objectAssign from 'object-assign';
import CustomEvent from './lib/custom-event-ponyfill';
import Chat from './lib/chat.js';
let getOrDefaultKey = function(obj, key) {
const getOrDefaultKey = function(obj, key) {
return obj[key] || (function() {
obj[key] = {};
return obj[key];
})();
};
let windowGitter = getOrDefaultKey(window, 'gitter');
let sidecar = {
Chat
const sidecar = { Chat };
const windowGitter = {
...getOrDefaultKey(window, 'gitter'),
...sidecar
};
// Plop it on the `window`
objectAssign(windowGitter, sidecar);
// Tell them that `sidecar` is loaded and ready
let event = new CustomEvent('gitter-sidecar-ready', {
const event = new CustomEvent('gitter-sidecar-ready', {
detail: sidecar
});
document.dispatchEvent(event);
// Create the default instance
if(!((windowGitter.chat || {}).options || {}).disableDefaultChat) {
let windowGitterChat = getOrDefaultKey(windowGitter, 'chat');
windowGitterChat.defaultChat = new Chat(windowGitterChat.options || {});
}
export default sidecar;
import {shim as arrayFromShim} from 'array.from';
if (!Array.from) {
arrayFromShim();
}
import objectAssign from 'object-assign';
import {Promise} from 'es6-promise';
import Symbol from './basic-symbol-ponyfill';
import CustomEvent from './custom-event-ponyfill';
//import Promise from 'bluebird';
import ElementStore from './element-store.js';
import chatCss from '../css/chat.css';
......@@ -16,9 +8,6 @@ import * as domUtility from './dom-utility.js';
import makeReadableCopy from './make-readable-copy';
let parseAttributeTruthiness = function(value) {
if(value) {
let valueSanitized = value.trim().toLowerCase();
......@@ -53,7 +42,10 @@ let getDataOptionsFromElement = function(options, element) {
}
});
return objectAssign({}, options, newOptions);
return {
...options,
...newOptions
};
};
......@@ -85,6 +77,7 @@ let embedGitterStyles = function() {
//$('head')[0].insertAdjacentHTML('afterbegin', '<div></div>');
let style = elementStore.createElement('style');
style.type = 'text/css';
style.innerHTML = chatCss;
// Put it at the top of the head so others can override
......@@ -223,8 +216,8 @@ class chatEmbed {
this[ELEMENTSTORE] = new ElementStore();
this[EVENTHANDLESTORE] = [];
this[DEFAULTS] = objectAssign({}, defaults);
this[OPTIONS] = objectAssign({}, this[DEFAULTS], options);
this[DEFAULTS] = defaults;
this[OPTIONS] = { ...this[DEFAULTS], ...options };
this[INIT]();
}
......
import objectAssign from 'object-assign';
let remove = function(element) {
if(element) {
element.parentElement.removeChild(element);
......
import Promise from 'bluebird';
import assert from 'assert';
import path from 'path';
import objectAssign from 'object-assign';
import webdriver from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome';
import test from 'tape';
......
This diff is collapsed.
var path = require('path');
var webpack = require('webpack');
var manifest = require('./package.json');
var getPostcssPluginStack = require('./postcss-plugin-stack.js');
var commentHeader = 'Gitter Sidecar v' + manifest.version + '\nhttps://sidecar.gitter.im/';
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'sidecar.js',
library: 'sidecar'
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel'
},
{
test: /\.css$/,
loader: 'css-loader!postcss-loader'
}
]
},
plugins: [
new webpack.BannerPlugin(commentHeader)
],
postcss: function() {
return getPostcssPluginStack();
}
};
const path = require('path');
const webpack = require('webpack');
const manifest = require('./package.json');
const commentHeader = 'Gitter Sidecar v' + manifest.version + '\nhttps://sidecar.gitter.im/';
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'sidecar.js',
library: 'sidecar'
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel'
},
{
test: /\.css$/,
loader: 'css-loader!postcss-loader'
}
]
},
plugins: [
new webpack.BannerPlugin(commentHeader)
]
};
var path = require('path');
var objectAssign = require('object-assign');
var webpackConfig = require('./webpack.config');
const path = require('path');
const webpackConfig = require('./webpack.config');
module.exports = objectAssign({}, webpackConfig, {
module.exports = {
...webpackConfig,
entry: './src/index.module.js',
output: {
path: path.join(__dirname, 'dist'),
......@@ -10,4 +10,4 @@ module.exports = objectAssign({}, webpackConfig, {
library: 'sidecar',
libraryTarget: 'umd'
}
});
};
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment