Merge pull request #195 from Yukaii/webpack-frontend

Use Webpack to bundle frontend code

12 files changed, 431 insertions, 125 deletions

diff --git a/public/js/common.js b/public/js/common.js
index 047df8af..19455f3d 100644
--- a/public/js/common.js
+++ b/public/js/common.js
@@ -1,3 +1,11 @@
+var config = require('./config');
+var domain = config.domain; // domain name
+var urlpath = config.urlpath; // sub url path, like: www.example.com/<urlpath>
+var debug = config.debug;
+var GOOGLE_API_KEY = config.GOOGLE_API_KEY;
+var GOOGLE_CLIENT_ID = config.GOOGLE_CLIENT_ID;
+var DROPBOX_APP_KEY = config.DROPBOX_APP_KEY;
+
 //common
 var port = window.location.port;
 var serverurl = window.location.protocol + '//' + (domain ? domain : window.location.hostname) + (port ? ':' + port : '') + (urlpath ? '/' + urlpath : '');
@@ -82,4 +90,32 @@ function checkIfAuth(yesCallback, noCallback) {
     } else {
         noCallback();
     }
-}
\ No newline at end of file
+}
+
+module.exports = {
+  domain: domain,
+  urlpath: urlpath,
+  debug: debug,
+  GOOGLE_API_KEY: GOOGLE_API_KEY,
+  GOOGLE_CLIENT_ID: GOOGLE_CLIENT_ID,
+  DROPBOX_APP_KEY: DROPBOX_APP_KEY,
+  port: port,
+  serverurl: serverurl,
+  noteid: noteid,
+  noteurl: noteurl,
+  version: version,
+  checkAuth: checkAuth,
+  profile: profile,
+  lastLoginState: lastLoginState,
+  lastUserId: lastUserId,
+  loginStateChangeEvent: loginStateChangeEvent,
+
+  /* export functions */
+  resetCheckAuth: resetCheckAuth,
+  setLoginState: setLoginState,
+  checkLoginStateChanged: checkLoginStateChanged,
+  getLoginState: getLoginState,
+  getUserId: getUserId,
+  clearLoginState: clearLoginState,
+  checkIfAuth: checkIfAuth
+};
diff --git a/public/js/config.js.example b/public/js/config.js.example
index 197d18f2..c5de388f 100644
--- a/public/js/config.js.example
+++ b/public/js/config.js.example
@@ -1,10 +1,11 @@
-//config
-var domain = ''; // domain name
-var urlpath = ''; // sub url path, like: www.example.com/<urlpath>
-//settings
-var debug = false;
+module.exports = {
+    domain: '', // domain name
+    urlpath: '', // sub url path, like: www.example.com/<urlpath>
 
-var GOOGLE_API_KEY = '';
-var GOOGLE_CLIENT_ID = '';
+    // settings
+    debug: false,
 
-var DROPBOX_APP_KEY = '';
\ No newline at end of file
+    GOOGLE_API_KEY: '',
+    GOOGLE_CLIENT_ID: '',
+    DROPBOX_APP_KEY: ''
+};
diff --git a/public/js/cover.js b/public/js/cover.js
index 3f9d787e..30a8e5c8 100644
--- a/public/js/cover.js
+++ b/public/js/cover.js
@@ -1,3 +1,26 @@
+var common = require('./common');
+var checkIfAuth = common.checkIfAuth;
+var urlpath = common.urlpath;
+var serverurl = common.serverurl;
+var resetCheckAuth = common.resetCheckAuth;
+var getLoginState = common.getLoginState;
+var clearLoginState = common.clearLoginState;
+
+var historyModule = require('./history');
+var parseStorageToHistory = historyModule.parseStorageToHistory;
+var parseHistory = historyModule.parseHistory;
+var getStorageHistory = historyModule.getStorageHistory;
+var getHistory = historyModule.getHistory;
+var saveHistory = historyModule.saveHistory;
+var removeHistory = historyModule.removeHistory;
+var postHistoryToServer = historyModule.postHistoryToServer;
+var deleteServerHistory = historyModule.deleteServerHistory;
+var parseServerToHistory = historyModule.parseServerToHistory;
+var saveStorageHistoryToServer = historyModule.saveStorageHistoryToServer;
+
+var saveAs = require('file-saver').saveAs;
+var List = require('list.js');
+
 var options = {
     valueNames: ['id', 'text', 'timestamp', 'fromNow', 'time', 'tags', 'pinned'],
     item: '<li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">\
@@ -199,7 +222,7 @@ function historyPinClick(e) {
                     $this.addClass('active');
                 else
                     $this.removeClass('active');
-            } 
+            }
         });
     }, function () {
         getHistory(function (notehistory) {
@@ -317,7 +340,7 @@ $(".ui-clear-history").click(function () {
 });
 
 $(".ui-refresh-history").click(function () {
-    var lastTags = $(".ui-use-tags").select2('val'); 
+    var lastTags = $(".ui-use-tags").select2('val');
     $(".ui-use-tags").select2('val', '');
     historyList.filter();
     var lastKeyword = $('.search').val();
@@ -325,10 +348,10 @@ $(".ui-refresh-history").click(function () {
     historyList.search();
     $('#history-list').slideUp('fast');
     $('.pagination').slideUp('fast');
-    
+
     resetCheckAuth();
     historyList.clear();
-    parseHistory(historyList, function (list, notehistory) { 
+    parseHistory(historyList, function (list, notehistory) {
         parseHistoryCallback(list, notehistory);
         $(".ui-use-tags").select2('val', lastTags);
         $(".ui-use-tags").trigger('change');
@@ -392,4 +415,4 @@ $(".ui-use-tags").on('change', function () {
 
 $('.search').keyup(function () {
     checkHistoryList();
-});
\ No newline at end of file
+});
diff --git a/public/js/extra.js b/public/js/extra.js
index 4a6c4a67..24d53fe7 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -1,3 +1,9 @@
+var hljs = require('highlight.js');
+var PDFObject = require('pdfobject');
+var S = require('string');
+var saveAs = require('file-saver').saveAs;
+require('../vendor/md-toc');
+
 //auto update last change
 var createtime = null;
 var lastchangetime = null;
@@ -242,7 +248,7 @@ function finishView(view) {
     });
     //emojify
     try {
-        emojify.run(view[0]);   
+        emojify.run(view[0]);
     } catch (err) {
         console.warn(err);
     }
@@ -257,77 +263,79 @@ function finishView(view) {
             MathJax.Hub.Queue(viewAjaxCallback);
         }
     } catch (err) {}
-    //sequence diagram
-    var sequences = view.find(".sequence-diagram.raw").removeClass("raw");
-    sequences.each(function (key, value) {
-        try {
-            var $value = $(value);
-            var $ele = $(value).parent().parent();
-            
-            var sequence = $value;
-            sequence.sequenceDiagram({
-                theme: 'simple'
-            });
-            
-            $ele.addClass('sequence-diagram');
-            $value.children().unwrap().unwrap();
-            var svg = $ele.find('> svg');
-            svg[0].setAttribute('viewBox', '0 0 ' + svg.attr('width') + ' ' + svg.attr('height'));
-            svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet');
-        } catch (err) {
-            console.warn(err);
-        }
-    });
-    //flowchart
-    var flow = view.find(".flow-chart.raw").removeClass("raw");
-    flow.each(function (key, value) {
-        try {
-            var $value = $(value);
-            var $ele = $(value).parent().parent();
-            
-            var chart = flowchart.parse($value.text());
-            $value.html('');
-            chart.drawSVG(value, {
-                'line-width': 2,
-                'fill': 'none',
-                'font-size': '16px',
-                'font-family': "'Andale Mono', monospace"
-            });
-            
-            $ele.addClass('flow-chart');
-            $value.children().unwrap().unwrap();
-        } catch (err) {
-            console.warn(err);
-        }
-    });
+        //sequence diagram
+        var sequences = view.find(".sequence-diagram.raw").removeClass("raw");
+        sequences.each(function (key, value) {
+            try {
+                var $value = $(value);
+                var $ele = $(value).parent().parent();
+
+                var sequence = $value;
+                sequence.sequenceDiagram({
+                    theme: 'simple'
+                });
+
+                $ele.addClass('sequence-diagram');
+                $value.children().unwrap().unwrap();
+                var svg = $ele.find('> svg');
+                svg[0].setAttribute('viewBox', '0 0 ' + svg.attr('width') + ' ' + svg.attr('height'));
+                svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet');
+            } catch (err) {
+                console.warn(err);
+            }
+        });
+        //flowchart
+        var flow = view.find(".flow-chart.raw").removeClass("raw");
+        flow.each(function (key, value) {
+            try {
+                var $value = $(value);
+                var $ele = $(value).parent().parent();
+
+                var chart = flowchart.parse($value.text());
+                $value.html('');
+                chart.drawSVG(value, {
+                    'line-width': 2,
+                    'fill': 'none',
+                    'font-size': '16px',
+                    'font-family': "'Andale Mono', monospace"
+                });
+
+                $ele.addClass('flow-chart');
+                $value.children().unwrap().unwrap();
+            } catch (err) {
+                console.warn(err);
+            }
+        });
     //graphviz
+    var Viz = require("viz.js");
     var graphvizs = view.find(".graphviz.raw").removeClass("raw");
     graphvizs.each(function (key, value) {
         try {
             var $value = $(value);
             var $ele = $(value).parent().parent();
-            
+
             var graphviz = Viz($value.text());
             $value.html(graphviz);
-            
+
             $ele.addClass('graphviz');
             $value.children().unwrap().unwrap();
         } catch (err) {
             console.warn(err);
         }
     });
+
     //mermaid
     var mermaids = view.find(".mermaid.raw").removeClass("raw");
     mermaids.each(function (key, value) {
         try {
             var $value = $(value);
             var $ele = $(value).parent().parent();
-            
+
             var mermaidError = null;
             mermaid.parseError = function (err, hash) {
                 mermaidError = err;
             };
-            
+
             if (mermaidAPI.parse($value.text())) {
                 $ele.addClass('mermaid');
                 $ele.html($value.text());
@@ -427,14 +435,14 @@ function finishView(view) {
         });
     //pdf
     view.find(".pdf.raw").removeClass("raw")
-        .each(function (key, value) {
-            var url = $(value).attr('data-pdfurl');
-            var inner = $('<div></div>');
-            $(this).append(inner);
-            PDFObject.embed(url, inner, {
-                height: '400px'
+            .each(function (key, value) {
+                var url = $(value).attr('data-pdfurl');
+                var inner = $('<div></div>');
+                $(this).append(inner);
+                PDFObject.embed(url, inner, {
+                    height: '400px'
+                });
             });
-        });
     //syntax highlighting
     view.find("pre.raw").removeClass("raw")
         .each(function (key, value) {
@@ -483,6 +491,7 @@ function postProcess(code) {
 	}
     return result;
 }
+window.postProcess = postProcess;
 
 function generateCleanHTML(view) {
     var src = view.clone();
@@ -534,6 +543,8 @@ function exportToRawHTML(view) {
     saveAs(blob, filename);
 }
 
+var common = require('./common.js');
+var serverurl = common.serverurl;
 //extract markdown body to html and compile to template
 function exportToHTML(view) {
     var title = renderTitle(ui.area.markdown);
@@ -829,7 +840,10 @@ emojify.setConfig({
     ignore_emoticons: true
 });
 
-var md = window.markdownit('default', {
+var markdownit = require('markdown-it');
+var markdownitContainer = require('markdown-it-container');
+
+var md = markdownit('default', {
     html: true,
     breaks: true,
     langPrefix: "",
@@ -837,25 +851,28 @@ var md = window.markdownit('default', {
     typographer: true,
     highlight: highlightRender
 });
-md.use(window.markdownitAbbr);
-md.use(window.markdownitFootnote);
-md.use(window.markdownitDeflist);
-md.use(window.markdownitMark);
-md.use(window.markdownitIns);
-md.use(window.markdownitSub);
-md.use(window.markdownitSup);
-md.use(window.markdownitMathjax);
-md.use(window.markdownitImsize);
+window.md = md;
+
+md.use(require('markdown-it-abbr'));
+md.use(require('markdown-it-footnote'));
+md.use(require('markdown-it-deflist'));
+md.use(require('markdown-it-mark'));
+md.use(require('markdown-it-ins'));
+md.use(require('markdown-it-sub'));
+md.use(require('markdown-it-sup'));
+md.use(require('../vendor/markdown-it-mathjax'));
+md.use(require('markdown-it-imsize'));
+
 function renderContainer(tokens, idx, options, env, self) {
     tokens[idx].attrJoin('role', 'alert');
     tokens[idx].attrJoin('class', 'alert');
     tokens[idx].attrJoin('class', 'alert-' + tokens[idx].info.trim());
     return self.renderToken.apply(self, arguments);
 }
-md.use(window.markdownitContainer, 'success', { render: renderContainer });
-md.use(window.markdownitContainer, 'info', { render: renderContainer });
-md.use(window.markdownitContainer, 'warning', { render: renderContainer });
-md.use(window.markdownitContainer, 'danger', { render: renderContainer });
+md.use(markdownitContainer, 'success', { render: renderContainer });
+md.use(markdownitContainer, 'info', { render: renderContainer });
+md.use(markdownitContainer, 'warning', { render: renderContainer });
+md.use(markdownitContainer, 'danger', { render: renderContainer });
 
 md.renderer.rules.image = function (tokens, idx, options, env, self) {
     tokens[idx].attrJoin('class', 'raw');
@@ -900,6 +917,9 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) {
         + '</code></pre>\n';
 };
 
+/* Defined regex markdown it plugins */
+require('script!../vendor/markdown-it-regexp');
+
 //youtube
 var youtubePlugin = new Plugin(
     // regexp to match
@@ -1046,4 +1066,26 @@ md.use(gistPlugin);
 md.use(tocPlugin);
 md.use(slidesharePlugin);
 md.use(speakerdeckPlugin);
-md.use(pdfPlugin);
\ No newline at end of file
+md.use(pdfPlugin);
+
+module.exports = {
+  md: md,
+  createtime: createtime,
+  lastchangetime: lastchangetime,
+  updateLastChange: updateLastChange,
+  lastchangeui: lastchangeui,
+  lastchangeuser: lastchangeuser,
+  postProcess: postProcess,
+  finishView: finishView,
+  autoLinkify: autoLinkify,
+  deduplicatedHeaderId: deduplicatedHeaderId,
+  renderTOC: renderTOC,
+  renderTitle: renderTitle,
+  renderFilename: renderFilename,
+  generateToc: generateToc,
+  smoothHashScroll: smoothHashScroll,
+  scrollToHash: scrollToHash,
+  owner: owner,
+  updateLastChangeUser: updateLastChangeUser,
+  updateOwner: updateOwner
+};
diff --git a/public/js/history.js b/public/js/history.js
index 324a9da2..d5082dd9 100644
--- a/public/js/history.js
+++ b/public/js/history.js
@@ -1,3 +1,15 @@
+var store = require('store');
+
+var common = require('./common');
+var checkIfAuth = common.checkIfAuth;
+var urlpath = common.urlpath;
+var serverurl = common.serverurl;
+var getLoginState = common.getLoginState;
+
+var extra = require('./extra');
+var renderFilename = extra.renderFilename;
+var md = extra.md;
+
 var migrateHistoryFromTempCallback = null;
 
 migrateHistoryFromTemp();
@@ -392,4 +404,18 @@ function deleteServerHistory(noteId, callback) {
         console.error(xhr.responseText);
         return callback(error, null);
     });
-}
\ No newline at end of file
+}
+
+module.exports = {
+    writeHistory: writeHistory,
+    parseHistory: parseHistory,
+    getStorageHistory: getStorageHistory,
+    getHistory: getHistory,
+    saveHistory: saveHistory,
+    removeHistory: removeHistory,
+    parseStorageToHistory: parseStorageToHistory,
+    postHistoryToServer: postHistoryToServer,
+    deleteServerHistory: deleteServerHistory,
+    parseServerToHistory: parseServerToHistory,
+    saveStorageHistoryToServer: saveStorageHistoryToServer
+}
diff --git a/public/js/index.js b/public/js/index.js
index 06be2f77..20a76ff1 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1,3 +1,68 @@
+/* jquery and jquery plugins */
+require('../vendor/showup/showup');
+
+require('prismjs/themes/prism.css');
+require('highlight.js/styles/github-gist.css');
+
+require('prismjs');
+require('prismjs/components/prism-wiki');
+var toMarkdown = require('to-markdown');
+
+var saveAs = require('file-saver').saveAs;
+require('js-url');
+require('randomcolor');
+
+var _ = require("lodash");
+
+var List = require('list.js');
+
+var common = require('./common.js');
+var urlpath = common.urlpath;
+var noteid = common.noteid;
+var debug = common.debug;
+var version = common.version;
+var serverurl = common.serverurl;
+var GOOGLE_API_KEY = common.GOOGLE_API_KEY;
+var GOOGLE_CLIENT_ID = common.GOOGLE_CLIENT_ID;
+var DROPBOX_APP_KEY = common.DROPBOX_APP_KEY;
+var noteurl = common.noteurl;
+
+var checkLoginStateChanged = common.checkLoginStateChanged;
+
+var syncScroll = require('./syncscroll');
+var setupSyncAreas = syncScroll.setupSyncAreas;
+var clearMap = syncScroll.clearMap;
+var syncScrollToEdit = syncScroll.syncScrollToEdit;
+var syncScrollToView = syncScroll.syncScrollToView;
+
+require('./pretty');
+var extra = require('./extra');
+var md = extra.md;
+var createtime = extra.createtime;
+var updateLastChange = extra.updateLastChange;
+var postProcess = extra.postProcess;
+var finishView = extra.finishView;
+var lastchangetime = extra.lastchangetime;
+var autoLinkify = extra.autoLinkify;
+var generateToc = extra.generateToc;
+var smoothHashScroll = extra.smoothHashScroll;
+var lastchangeuser = extra.lastchangeuser;
+var deduplicatedHeaderId = extra.deduplicatedHeaderId;
+var renderTOC = extra.renderTOC;
+var renderTitle = extra.renderTitle;
+var renderFilename = extra.renderFilename;
+var scrollToHash = extra.scrollToHash;
+var owner = extra.owner;
+var updateLastChangeUser = extra.updateLastChangeUser;
+var updateOwner = extra.updateOwner;
+
+var historyModule = require('./history');
+var writeHistory = historyModule.writeHistory;
+var deleteServerHistory = historyModule.deleteServerHistory;
+
+var renderer = require('./render');
+var preventXSS = renderer.preventXSS;
+
 var defaultTextHeight = 20;
 var viewportMargin = 20;
 var mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
@@ -127,7 +192,7 @@ function wrapTextWith(cm, symbol) {
                     };
                     var postText = cm.getRange(postEndPos, from);
                     var postIndex = wrapSymbols.indexOf(postText);
-                    // check if surround symbol are list in array and matched 
+                    // check if surround symbol are list in array and matched
                     if (preIndex > -1 && postIndex > -1 && preIndex === postIndex) {
                         cm.replaceRange("", to, preEndPos, '+delete');
                         cm.replaceRange("", postEndPos, from, '+delete');
@@ -279,7 +344,7 @@ var supportExtraTags = [
         }
     }
 ];
-var modeType = {
+window.modeType = {
     edit: {
         name: "edit"
     },
@@ -310,18 +375,18 @@ var statusType = {
 var defaultMode = modeType.view;
 
 //global vars
-var loaded = false;
-var needRefresh = false;
-var isDirty = false;
-var editShown = false;
-var visibleXS = false;
-var visibleSM = false;
-var visibleMD = false;
-var visibleLG = false;
-var isTouchDevice = 'ontouchstart' in document.documentElement;
-var currentMode = defaultMode;
-var currentStatus = statusType.offline;
-var lastInfo = {
+window.loaded = false;
+window.needRefresh = false;
+window.isDirty = false;
+window.editShown = false;
+window.visibleXS = false;
+window.visibleSM = false;
+window.visibleMD = false;
+window.visibleLG = false;
+window.isTouchDevice = 'ontouchstart' in document.documentElement;
+window.currentMode = defaultMode;
+window.currentStatus = statusType.offline;
+window.lastInfo = {
     needRestore: false,
     cursor: null,
     scroll: null,
@@ -343,9 +408,9 @@ var lastInfo = {
     },
     history: null
 };
-var personalInfo = {};
-var onlineUsers = [];
-var fileTypes = {
+window.personalInfo = {};
+window.onlineUsers = [];
+window.fileTypes = {
     "pl": "perl",
     "cgi": "perl",
     "js": "javascript",
@@ -359,7 +424,7 @@ var fileTypes = {
 //editor settings
 var textit = document.getElementById("textit");
 if (!textit) throw new Error("There was no textit area!");
-var editor = CodeMirror.fromTextArea(textit, {
+window.editor = CodeMirror.fromTextArea(textit, {
     mode: defaultEditorMode,
     backdrop: defaultEditorMode,
     keyMap: "sublime",
@@ -1047,7 +1112,7 @@ function checkEditorStyle() {
             },
             stop: function (e) {
                 lastEditorWidth = ui.area.edit.width();
-                // workaround that scroll event bindings 
+                // workaround that scroll event bindings
                 preventSyncScrollToView = 2;
                 preventSyncScrollToEdit = true;
                 editor.setOption('viewportMargin', viewportMargin);
@@ -1281,12 +1346,12 @@ function changeMode(type) {
         preventSyncScrollToView = 2;
         syncScrollToEdit(null, true);
     }
-    
+
     if (lastMode == modeType.edit && currentMode == modeType.both) {
         preventSyncScrollToEdit = 2;
         syncScrollToView(null, true);
     }
-    
+
     if (lastMode == modeType.both && currentMode != modeType.both) {
         preventSyncScrollToView = false;
         preventSyncScrollToEdit = false;
@@ -1389,6 +1454,7 @@ function onGoogleAPILoaded() {
         .prop('defer', true)
         .appendTo('body');
 }
+window.onGoogleAPILoaded = onGoogleAPILoaded;
 
 //button actions
 //share
@@ -1687,7 +1753,7 @@ function parseRevisions(_revisions) {
     }
 }
 function selectRevision(time) {
-    if (time == revisionTime) return; 
+    if (time == revisionTime) return;
     $.get(noteurl + '/revision/' + time)
         .done(function(data) {
             revision = data;
@@ -2188,8 +2254,11 @@ function havePermission() {
     }
     return bool;
 }
+// global module workaround
+window.havePermission = havePermission;
 
 //socket.io actions
+var io = require("socket.io-client");
 var socket = io.connect({
     path: urlpath ? '/' + urlpath + '/socket.io/' : '',
     timeout: 5000 //5 secs to timeout
@@ -2198,7 +2267,7 @@ var socket = io.connect({
 var on = socket.on;
 socket.on = function () {
     if (!checkLoginStateChanged() && !needRefresh)
-        on.apply(socket, arguments);
+        return on.apply(socket, arguments);
 };
 var emit = socket.emit;
 socket.emit = function () {
diff --git a/public/js/locale.js b/public/js/locale.js
index 6fe7fdb6..484ce22f 100644
--- a/public/js/locale.js
+++ b/public/js/locale.js
@@ -1,3 +1,5 @@
+require('./cover');
+
 var lang = "en";
 var userLang = navigator.language || navigator.userLanguage;
 var userLangCode = userLang.split('-')[0];
@@ -21,4 +23,4 @@ locale.change(function() {
         expires: 365
     });
     window.location.reload();
-});
\ No newline at end of file
+});
diff --git a/public/js/pretty.js b/public/js/pretty.js
index 0ca7ee18..6b551c17 100644
--- a/public/js/pretty.js
+++ b/public/js/pretty.js
@@ -1,3 +1,16 @@
+var extra = require('./extra');
+var md = extra.md;
+var finishView = extra.finishView;
+var autoLinkify = extra.autoLinkify;
+var deduplicatedHeaderId = extra.deduplicatedHeaderId;
+var renderTOC = extra.renderTOC;
+var generateToc = extra.generateToc;
+var smoothHashScroll = extra.smoothHashScroll;
+var postProcess = extra.postProcess;
+var lastchangeui = extra.lastchangeui;
+var updateLastChange = extra.updateLastChange;
+var preventXSS = require('./render').preventXSS;
+
 var markdown = $(".markdown-body");
 var text = $('<textarea/>').html(markdown.html()).text();
 var lastMeta = md.meta;
@@ -109,4 +122,12 @@ function scrollToBottom() {
     $('body, html').stop(true, true).animate({
         scrollTop: $(document.body)[0].scrollHeight
     }, 100, "linear");
-}
\ No newline at end of file
+}
+
+window.scrollToTop = scrollToTop;
+window.scrollToBottom = scrollToBottom;
+
+module.exports = {
+  scrollToBottom: scrollToBottom,
+  scrollToTop: scrollToTop
+}
diff --git a/public/js/public.js b/public/js/public.js
new file mode 100644
index 00000000..ac951804
--- /dev/null
+++ b/public/js/public.js
@@ -0,0 +1,27 @@
+/* jquery and jquery plugins */
+require('../vendor/showup/showup');
+
+require('prismjs/themes/prism.css');
+require('highlight.js/styles/github-gist.css');
+
+/* other vendors plugin */
+require('gist-embed');
+require('string');
+require('highlight.js');
+require('prismjs');
+require('prismjs/components/prism-wiki');
+require('to-markdown');
+
+require('file-saver');
+require('store');
+require('js-url');
+require('visibilityjs');
+require('list.js');
+require('../vendor/md-toc');
+require('randomcolor');
+
+require('./syncscroll');
+require('./extra');
+require('./history');
+require('./pretty');
+require('./render');
diff --git a/public/js/render.js b/public/js/render.js
index 6f1a1c19..77778795 100644
--- a/public/js/render.js
+++ b/public/js/render.js
@@ -50,4 +50,9 @@ var filterXSSOptions = {
 
 function preventXSS(html) {
     return filterXSS(html, filterXSSOptions);
-}
\ No newline at end of file
+}
+window.preventXSS = preventXSS;
+
+module.exports = {
+  preventXSS: preventXSS
+}
diff --git a/public/js/slide.js b/public/js/slide.js
index 5b0f9bd0..257c60bb 100644
--- a/public/js/slide.js
+++ b/public/js/slide.js
@@ -1,3 +1,45 @@
+require('prismjs/themes/prism.css');
+
+/* other vendors plugin */
+var S = require('string');
+require('prismjs');
+require('prismjs/components/prism-wiki');
+require('to-markdown');
+
+require('../vendor/md-toc');
+require('randomcolor');
+
+var commonModule = require('./common');
+var urlpath = commonModule.urlpath;
+var noteid = commonModule.noteid;
+var debug = commonModule.debug;
+var version = commonModule.version;
+var serverurl = commonModule.serverurl;
+var GOOGLE_API_KEY = commonModule.GOOGLE_API_KEY;
+var GOOGLE_CLIENT_ID = commonModule.GOOGLE_CLIENT_ID;
+var DROPBOX_APP_KEY = commonModule.DROPBOX_APP_KEY;
+var noteurl = commonModule.noteurl;
+
+var extraModule = require('./extra');
+var md = extraModule.md;
+var createtime = extraModule.createtime;
+var updateLastChange = extraModule.updateLastChange;
+var postProcess = extraModule.postProcess;
+var finishView = extraModule.finishView;
+var lastchangetime = extraModule.lastchangetime;
+var lastchangeui = extraModule.lastchangeui;
+var autoLinkify = extraModule.autoLinkify;
+var generateToc = extraModule.generateToc;
+var smoothHashScroll = extraModule.smoothHashScroll;
+var lastchangeuser = extraModule.lastchangeuser;
+var deduplicatedHeaderId = extraModule.deduplicatedHeaderId;
+var renderTOC = extraModule.renderTOC;
+var renderTitle = extraModule.renderTitle;
+var renderFilename = extraModule.renderFilename;
+var scrollToHash = extraModule.scrollToHash;
+
+var render = require('./render');
+
 var body = $(".slides").html();
 $(".slides").html(S(body).unescapeHTML().s);
 
diff --git a/public/js/syncscroll.js b/public/js/syncscroll.js
index 32d3f7a3..511c5000 100644
--- a/public/js/syncscroll.js
+++ b/public/js/syncscroll.js
@@ -1,5 +1,8 @@
 // Inject line numbers for sync scroll.
 
+var extra = require('./extra');
+var md = extra.md;
+
 function addPart(tokens, idx) {
     if (tokens[idx].map && tokens[idx].level === 0) {
         var startline = tokens[idx].map[0] + 1;
@@ -71,7 +74,7 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) {
     if (highlighted.indexOf('<pre') === 0) {
         return highlighted + '\n';
     }
-    
+
     if (tokens[idx].map && tokens[idx].level === 0) {
         var startline = tokens[idx].map[0] + 1;
         var endline = tokens[idx].map[1];
@@ -99,10 +102,12 @@ function renderContainer(tokens, idx, options, env, self) {
     addPart(tokens, idx);
     return self.renderToken.apply(self, arguments);
 }
-md.use(window.markdownitContainer, 'success', { render: renderContainer });
-md.use(window.markdownitContainer, 'info', { render: renderContainer });
-md.use(window.markdownitContainer, 'warning', { render: renderContainer });
-md.use(window.markdownitContainer, 'danger', { render: renderContainer });
+
+var markdownitContainer = require('markdown-it-container');
+md.use(markdownitContainer, 'success', { render: renderContainer });
+md.use(markdownitContainer, 'info', { render: renderContainer });
+md.use(markdownitContainer, 'warning', { render: renderContainer });
+md.use(markdownitContainer, 'danger', { render: renderContainer });
 
 var syncscroll = true;
 
@@ -240,7 +245,7 @@ function syncScrollToEdit(event, preventAnimate) {
         return;
     }
     if (editScrolling) return;
-    
+
     var scrollTop = viewArea[0].scrollTop;
     var lineIndex = 0;
     for (var i = 0, l = scrollMap.length; i < l; i++) {
@@ -260,7 +265,7 @@ function syncScrollToEdit(event, preventAnimate) {
             lineDiff = lineHeightMap[i + 1] - lineNo;
         }
     }
-    
+
     var posTo = 0;
     var topDiffPercent = 0;
     var posToNextDiff = 0;
@@ -269,7 +274,7 @@ function syncScrollToEdit(event, preventAnimate) {
     var preLastLineHeight = scrollInfo.height - scrollInfo.clientHeight - textHeight;
     var preLastLineNo = Math.round(preLastLineHeight / textHeight);
     var preLastLinePos = scrollMap[preLastLineNo];
-    
+
     if (scrollInfo.height > scrollInfo.clientHeight && scrollTop >= preLastLinePos) {
         posTo = preLastLineHeight;
         topDiffPercent = (scrollTop - preLastLinePos) / (viewBottom - preLastLinePos);
@@ -281,7 +286,7 @@ function syncScrollToEdit(event, preventAnimate) {
         posToNextDiff = textHeight * lineDiff * topDiffPercent;
         posTo += Math.ceil(posToNextDiff);
     }
-    
+
     if (preventAnimate) {
         editArea.scrollTop(posTo);
     } else {
@@ -292,7 +297,7 @@ function syncScrollToEdit(event, preventAnimate) {
             scrollTop: posTo
         }, duration, "linear");
     }
-    
+
     viewScrolling = true;
     clearTimeout(viewScrollingTimer);
     viewScrollingTimer = setTimeout(viewScrollingTimeoutInner, duration * 1.5);
@@ -322,7 +327,7 @@ function syncScrollToView(event, preventAnimate) {
         return;
     }
     if (viewScrolling) return;
-    
+
     var lineNo, posTo;
     var topDiffPercent, posToNextDiff;
     var scrollInfo = editor.getScrollInfo();
@@ -341,7 +346,7 @@ function syncScrollToView(event, preventAnimate) {
         posToNextDiff = (scrollMap[lineNo + 1] - posTo) * topDiffPercent;
         posTo += Math.floor(posToNextDiff);
     }
-    
+
     if (preventAnimate) {
         viewArea.scrollTop(posTo);
     } else {
@@ -352,7 +357,7 @@ function syncScrollToView(event, preventAnimate) {
             scrollTop: posTo
         }, duration, "linear");
     }
-    
+
     editScrolling = true;
     clearTimeout(editScrollingTimer);
     editScrollingTimer = setTimeout(editScrollingTimeoutInner, duration * 1.5);
@@ -360,4 +365,11 @@ function syncScrollToView(event, preventAnimate) {
 
 function editScrollingTimeoutInner() {
     editScrolling = false;
-}
\ No newline at end of file
+}
+
+module.exports = {
+  setupSyncAreas: setupSyncAreas,
+  clearMap: clearMap,
+  syncScrollToEdit: syncScrollToEdit,
+  syncScrollToView: syncScrollToView
+};