From bd261e717979dbf88c0e0f294cd5b137ba8fcccd Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Fri, 21 Jul 2017 17:33:31 +0800 Subject: [PATCH 01/10] browser compatibility --- .babelrc | 3 ++- package.json | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/.babelrc b/.babelrc index af0f0c3..c970805 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,4 @@ { - "presets": ["es2015"] + "presets": ["es2015"], + "plugins": ["transform-runtime"] } \ No newline at end of file diff --git a/package.json b/package.json index d7a066a..72bb0b9 100644 --- a/package.json +++ b/package.json @@ -20,14 +20,16 @@ }, "homepage": "https://github.com/imsun/gitment", "scripts": { - "build": "babel src --out-dir dist --ignore test.js --source-maps & NODE_ENV=production webpack --config webpack.config.js --progress --profile --colors", + "build": "babel src --out-dir dist --ignore test.js --source-maps & cross-env NODE_ENV=production webpack --config webpack.config.js --progress --profile --colors", "dev": "webpack-dev-server --config webpack.dev.config.js --host 0.0.0.0 --progress --profile --colors" }, "devDependencies": { "babel-cli": "^6.24.0", "babel-core": "^6.24.0", "babel-loader": "^6.4.1", + "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.0", + "cross-env": "^5.0.1", "webpack": "^2.3.2", "webpack-dev-server": "^2.4.2" }, From aa7c3054b7f3731f9830999f05fb692c044253e2 Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Fri, 21 Jul 2017 18:24:54 +0800 Subject: [PATCH 02/10] fix config error && add npm script --- package.json | 3 ++- webpack.config.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 72bb0b9..a816aea 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "homepage": "https://github.com/imsun/gitment", "scripts": { "build": "babel src --out-dir dist --ignore test.js --source-maps & cross-env NODE_ENV=production webpack --config webpack.config.js --progress --profile --colors", - "dev": "webpack-dev-server --config webpack.dev.config.js --host 0.0.0.0 --progress --profile --colors" + "dev": "webpack-dev-server --config webpack.dev.config.js --host 0.0.0.0 --progress --profile --colors", + "dist": "babel src --out-dir dist --ignore test.js --source-maps & webpack --config webpack.config.js -p" }, "devDependencies": { "babel-cli": "^6.24.0", diff --git a/webpack.config.js b/webpack.config.js index b0ef9ff..6b7a350 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,7 +14,7 @@ module.exports = { loaders: [ { test: /\.js$/, - exclude: /^node_mocules/, + exclude: /node_modules/, loaders: ['babel-loader'], }, ], From ffa970e5859c588c9cf0526693630c7efd495b31 Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Fri, 21 Jul 2017 23:08:06 +0800 Subject: [PATCH 03/10] fix browser compatibility for IE11/10 etc. --- src/theme/default.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/theme/default.js b/src/theme/default.js index b4921db..ac37d36 100644 --- a/src/theme/default.js +++ b/src/theme/default.js @@ -30,6 +30,7 @@ function renderHeader({ meta, user, reactions }, instance) { likeButton.classList.remove('liked') likeButton.onclick = () => instance.like() } + container.appendChild(likeButton) const commentsCount = document.createElement('span') @@ -78,6 +79,7 @@ function renderComments({ meta, comments, commentReactions, currentPage, user, e initHint.appendChild(initButton) errorBlock.appendChild(initHint) } else { + console.log('error object',error); errorBlock.innerText = error } container.appendChild(errorBlock) @@ -335,10 +337,10 @@ function render(state, instance) { const container = document.createElement('div') container.lang = "en-US" container.className = 'gitment-container gitment-root-container' - container.appendChild(instance.renderHeader(state, instance)) - container.appendChild(instance.renderComments(state, instance)) - container.appendChild(instance.renderEditor(state, instance)) - container.appendChild(instance.renderFooter(state, instance)) + container.appendChild(renderHeader(state, instance)) + container.appendChild(renderComments(state, instance)) + container.appendChild(renderEditor(state, instance)) + container.appendChild(renderFooter(state, instance)) return container } From 9fdfef593a18b18d35d647f04cc49cb6144de041 Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Fri, 21 Jul 2017 23:09:29 +0800 Subject: [PATCH 04/10] support uglifying js --- package.json | 3 ++- webpack.config.js | 42 ++++++++++++++++++++++-------------------- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index a816aea..aae5013 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "scripts": { "build": "babel src --out-dir dist --ignore test.js --source-maps & cross-env NODE_ENV=production webpack --config webpack.config.js --progress --profile --colors", "dev": "webpack-dev-server --config webpack.dev.config.js --host 0.0.0.0 --progress --profile --colors", - "dist": "babel src --out-dir dist --ignore test.js --source-maps & webpack --config webpack.config.js -p" + "postbuild": "babel src --out-dir dist --ignore test.js --source-maps & webpack --config webpack.config.js -p --env.production" }, "devDependencies": { "babel-cli": "^6.24.0", @@ -35,6 +35,7 @@ "webpack-dev-server": "^2.4.2" }, "dependencies": { + "babel-runtime": "^6.23.0", "mobx": "^3.1.7" }, "license": "MIT" diff --git a/webpack.config.js b/webpack.config.js index 6b7a350..f082b8a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,22 +1,24 @@ const path = require('path') -module.exports = { - context: path.join(__dirname, 'src'), - entry: './gitment.js', - devtool: 'source-map', - output: { - path: path.join(__dirname, 'dist'), - filename: 'gitment.browser.js', - libraryTarget: 'var', - library: 'Gitment', - }, - module: { - loaders: [ - { - test: /\.js$/, - exclude: /node_modules/, - loaders: ['babel-loader'], - }, - ], - }, -} +module.exports = function (env) { + return { + context: path.join(__dirname, 'src'), + entry: './gitment.js', + devtool: 'source-map', + output: { + path: path.join(__dirname, 'dist'), + filename: (env&&env.production)?'gitment.browser.min.js':'gitment.browser.js', + libraryTarget: 'var', + library: 'Gitment', + }, + module: { + loaders: [ + { + test: /\.js$/, + exclude: /node_modules/, + loaders: ['babel-loader'], + }, + ], + }, + } +}; From bdd45feee02bfd93d6c7b81aa05fe84c111d3804 Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Fri, 21 Jul 2017 23:13:29 +0800 Subject: [PATCH 05/10] remove console.log --- src/theme/default.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/theme/default.js b/src/theme/default.js index ac37d36..6d2062e 100644 --- a/src/theme/default.js +++ b/src/theme/default.js @@ -79,7 +79,6 @@ function renderComments({ meta, comments, commentReactions, currentPage, user, e initHint.appendChild(initButton) errorBlock.appendChild(initHint) } else { - console.log('error object',error); errorBlock.innerText = error } container.appendChild(errorBlock) From 1c6809028c457f9f19c5b8d91bf11b8af09b0f26 Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Sat, 22 Jul 2017 13:20:46 +0800 Subject: [PATCH 06/10] fix bugs using instance && do not change api as posible --- src/gitment.js | 15 +++++---------- src/theme/default.js | 8 ++++---- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/src/gitment.js b/src/gitment.js index 06fe17a..c1a918a 100644 --- a/src/gitment.js +++ b/src/gitment.js @@ -9,8 +9,7 @@ const scope = 'public_repo' function extendRenderer(instance, renderer) { instance[renderer] = (container) => { const targetContainer = getTargetContainer(container) - const render = instance.theme[renderer] || instance.defaultTheme[renderer] - + const render = instance.theme[renderer] autorun(() => { const e = render(instance.state, instance) if (targetContainer.firstChild) { @@ -46,20 +45,17 @@ class Gitment { constructor(options = {}) { this.defaultTheme = defaultTheme - this.useTheme(defaultTheme) - Object.assign(this, { id: window.location.href, title: window.document.title, link: window.location.href, desc: '', labels: [], - theme: defaultTheme, oauth: {}, perPage: 20, maxCommentHeight: 250, }, options) - + this.theme = Object.assign({},defaultTheme,options.theme); this.useTheme(this.theme) const user = {} @@ -127,10 +123,9 @@ class Gitment { } useTheme(theme = {}) { - this.theme = theme - - const renderers = Object.keys(this.theme) - renderers.forEach(renderer => extendRenderer(this, renderer)) + const renderers = Object.keys(theme) + renderers.forEach(renderer => this[renderer]=this.theme[renderer]) + extendRenderer(this,'render') } update() { diff --git a/src/theme/default.js b/src/theme/default.js index 6d2062e..d65e94a 100644 --- a/src/theme/default.js +++ b/src/theme/default.js @@ -336,10 +336,10 @@ function render(state, instance) { const container = document.createElement('div') container.lang = "en-US" container.className = 'gitment-container gitment-root-container' - container.appendChild(renderHeader(state, instance)) - container.appendChild(renderComments(state, instance)) - container.appendChild(renderEditor(state, instance)) - container.appendChild(renderFooter(state, instance)) + container.appendChild(instance.renderHeader(state, instance)) + container.appendChild(instance.renderComments(state, instance)) + container.appendChild(instance.renderEditor(state, instance)) + container.appendChild(instance.renderFooter(state, instance)) return container } From 54af3cbf79627b6be75e28b50c3335a8a35f016e Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Sat, 22 Jul 2017 13:27:59 +0800 Subject: [PATCH 07/10] format --- src/gitment.js | 2 +- webpack.config.js | 2 +- webpack.dev.config.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/gitment.js b/src/gitment.js index c1a918a..1f02b14 100644 --- a/src/gitment.js +++ b/src/gitment.js @@ -55,7 +55,7 @@ class Gitment { perPage: 20, maxCommentHeight: 250, }, options) - this.theme = Object.assign({},defaultTheme,options.theme); + this.theme = Object.assign({}, defaultTheme, options.theme) this.useTheme(this.theme) const user = {} diff --git a/webpack.config.js b/webpack.config.js index f082b8a..1cd9b8c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,7 +7,7 @@ module.exports = function (env) { devtool: 'source-map', output: { path: path.join(__dirname, 'dist'), - filename: (env&&env.production)?'gitment.browser.min.js':'gitment.browser.js', + filename: (env&&env.production) ? 'gitment.browser.min.js' : 'gitment.browser.js', libraryTarget: 'var', library: 'Gitment', }, diff --git a/webpack.dev.config.js b/webpack.dev.config.js index c1954eb..29ad136 100644 --- a/webpack.dev.config.js +++ b/webpack.dev.config.js @@ -13,7 +13,7 @@ module.exports = { loaders: [ { test: /\.js$/, - exclude: /^node_mocules/, + exclude: /^node_modules/, loaders: ['babel-loader'], }, ], From 2f9a7bac08080b312866258673b70126031247ee Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Sat, 22 Jul 2017 13:36:12 +0800 Subject: [PATCH 08/10] format --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 1cd9b8c..fd13876 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,7 +7,7 @@ module.exports = function (env) { devtool: 'source-map', output: { path: path.join(__dirname, 'dist'), - filename: (env&&env.production) ? 'gitment.browser.min.js' : 'gitment.browser.js', + filename: (env && env.production) ? 'gitment.browser.min.js' : 'gitment.browser.js', libraryTarget: 'var', library: 'Gitment', }, From f0e2a0ba9633d9555af909e99bf585ea686e4236 Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Sat, 22 Jul 2017 18:42:18 +0800 Subject: [PATCH 09/10] api break && webpack config and npm script optimize --- package.json | 5 ++--- src/gitment.js | 3 +-- src/theme/default.js | 8 ++++---- webpack.config.js | 4 ++-- 4 files changed, 9 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index aae5013..d5f1a7c 100644 --- a/package.json +++ b/package.json @@ -20,9 +20,8 @@ }, "homepage": "https://github.com/imsun/gitment", "scripts": { - "build": "babel src --out-dir dist --ignore test.js --source-maps & cross-env NODE_ENV=production webpack --config webpack.config.js --progress --profile --colors", - "dev": "webpack-dev-server --config webpack.dev.config.js --host 0.0.0.0 --progress --profile --colors", - "postbuild": "babel src --out-dir dist --ignore test.js --source-maps & webpack --config webpack.config.js -p --env.production" + "build": "babel src --out-dir dist --ignore test.js --source-maps & webpack --progress --profile --colors & cross-env NODE_ENV=production webpack -p", + "dev": "webpack-dev-server --config webpack.dev.config.js --host 0.0.0.0 --progress --profile --colors" }, "devDependencies": { "babel-cli": "^6.24.0", diff --git a/src/gitment.js b/src/gitment.js index 1f02b14..7a85557 100644 --- a/src/gitment.js +++ b/src/gitment.js @@ -124,8 +124,7 @@ class Gitment { useTheme(theme = {}) { const renderers = Object.keys(theme) - renderers.forEach(renderer => this[renderer]=this.theme[renderer]) - extendRenderer(this,'render') + renderers.forEach(renderer => extendRenderer(this,renderer)) } update() { diff --git a/src/theme/default.js b/src/theme/default.js index d65e94a..e028702 100644 --- a/src/theme/default.js +++ b/src/theme/default.js @@ -336,10 +336,10 @@ function render(state, instance) { const container = document.createElement('div') container.lang = "en-US" container.className = 'gitment-container gitment-root-container' - container.appendChild(instance.renderHeader(state, instance)) - container.appendChild(instance.renderComments(state, instance)) - container.appendChild(instance.renderEditor(state, instance)) - container.appendChild(instance.renderFooter(state, instance)) + container.appendChild(instance.theme.renderHeader(state, instance)) + container.appendChild(instance.theme.renderComments(state, instance)) + container.appendChild(instance.theme.renderEditor(state, instance)) + container.appendChild(instance.theme.renderFooter(state, instance)) return container } diff --git a/webpack.config.js b/webpack.config.js index fd13876..bec638c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,5 @@ const path = require('path') - +const PROD = process.env.NODE_ENV === 'production' module.exports = function (env) { return { context: path.join(__dirname, 'src'), @@ -7,7 +7,7 @@ module.exports = function (env) { devtool: 'source-map', output: { path: path.join(__dirname, 'dist'), - filename: (env && env.production) ? 'gitment.browser.min.js' : 'gitment.browser.js', + filename: PROD ? 'gitment.browser.min.js' : 'gitment.browser.js', libraryTarget: 'var', library: 'Gitment', }, From 50ff9dd97f9eb5bf5778650c26c729ef3d8a6c5a Mon Sep 17 00:00:00 2001 From: GeekaholicLin Date: Sat, 22 Jul 2017 18:59:39 +0800 Subject: [PATCH 10/10] fix toString.call not working in IE && recover origin api --- src/theme/default.js | 8 ++++---- src/utils.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/theme/default.js b/src/theme/default.js index e028702..d65e94a 100644 --- a/src/theme/default.js +++ b/src/theme/default.js @@ -336,10 +336,10 @@ function render(state, instance) { const container = document.createElement('div') container.lang = "en-US" container.className = 'gitment-container gitment-root-container' - container.appendChild(instance.theme.renderHeader(state, instance)) - container.appendChild(instance.theme.renderComments(state, instance)) - container.appendChild(instance.theme.renderEditor(state, instance)) - container.appendChild(instance.theme.renderFooter(state, instance)) + container.appendChild(instance.renderHeader(state, instance)) + container.appendChild(instance.renderComments(state, instance)) + container.appendChild(instance.renderEditor(state, instance)) + container.appendChild(instance.renderFooter(state, instance)) return container } diff --git a/src/utils.js b/src/utils.js index 69de733..87f8a68 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,6 +1,6 @@ import { LS_ACCESS_TOKEN_KEY } from './constants' -export const isString = s => toString.call(s) === '[object String]' +export const isString = s => ({}).toString.call(s) === '[object String]' export function getTargetContainer(container) { let targetContainer